software caching thumbnails in javascript

This commit is contained in:
j3d1 2024-06-22 22:11:38 +02:00
parent facefc1cc7
commit e91b64ca97
5 changed files with 54 additions and 18 deletions

View file

@ -7,7 +7,7 @@
<script>
import {mapActions} from "vuex";
import {mapActions, mapGetters, mapMutations} from "vuex";
export default {
name: "AuthenticatedImage",
@ -16,6 +16,7 @@ export default {
type: String,
required: true
},
cached: Boolean
},
data() {
return {
@ -23,21 +24,37 @@ export default {
servers: []
}
},
computed: {
...mapGetters(['getThumbnail']),
},
methods: {
...mapActions(['fetchImage']),
loadImage() {
this.fetchImage(this.src).then((response) => {
const mime_type = response.headers.get("content-type");
response.arrayBuffer().then((buf) => {
const base64 = btoa(new Uint8Array(buf)
.reduce((data, byte) => data + String.fromCharCode(byte), ""));
this.image_data = "data:" + mime_type + ";base64," + base64;
...mapMutations(['setThumbnail']),
async loadImage() {
const response = await this.fetchImage(this.src);
const mime_type = response.headers.get("content-type");
const buf = await response.arrayBuffer();
const base64 = btoa(new Uint8Array(buf)
.reduce((data, byte) => data + String.fromCharCode(byte), ""));
this.image_data = "data:" + mime_type + ";base64," + base64;
if (this.cached)
this.setThumbnail({
url: this.src,
data: this.image_data
});
})
}
},
mounted() {
this.loadImage();
setTimeout(() => {
if (this.cached) {
const c = this.getThumbnail(this.src);
if (c) {
this.image_data = c;
return;
}
}
this.loadImage();
}, 0);
}
}
</script>

View file

@ -25,8 +25,8 @@
<ul>
<li v-for="attachment in item.attachments" @click="openLightboxModalWith(attachment)">
<AuthenticatedImage :src="`/media/2/256/${attachment.hash}/`" :alt="attachment.name"
v-if="attachment.mime_type.startsWith('image/')"/>
<AuthenticatedDataLink :href="`/media/2/256/${attachment.hash}/`" :download="attachment.name"
v-if="attachment.mime_type.startsWith('image/')" cached/>
<AuthenticatedDataLink :href="`/media/2/${attachment.hash}/`" :download="attachment.name"
v-else/>
</li>
</ul>

View file

@ -29,8 +29,9 @@ const store = createStore({
expiry: null,
},
showAddBoxModal: false,
thumbnailCache: {},
persistent_loaded: false,
showAddBoxModal: false,
},
getters: {
route: state => router.currentRoute.value,
@ -71,6 +72,12 @@ const store = createStore({
isLoggedIn(state) {
return state.user && state.user.username !== null && state.user.token !== null;
},
getThumbnail: (state) => (url) => {
if (!url) return null;
if (!(url in state.thumbnailCache))
return null;
return state.thumbnailCache[url];
},
},
mutations: {
updateLastEvent(state, slug) {
@ -162,6 +169,9 @@ const store = createStore({
user.permissions = null;
state.user = user;
},
setThumbnail(state, {url, data}) {
state.thumbnailCache[url] = data;
},
},
actions: {
async login({commit}, {username, password, remember}) {

View file

@ -4,9 +4,16 @@
<div class="col-xl-8 offset-xl-2">
<div class="card bg-dark text-light mb-2" id="filters">
<div class="card-header">
<h3 class="text-center">User: {{user}}</h3>
<h3 class="text-center">User: {{ activeUser }}</h3>
</div>
<div class="card-body">
<div class="card-body" v-if="hasPermissions">
<p>Your Account is activated. Got to
<router-link :to="{name: 'items', params: {event: getEventSlug}}">Items</router-link>
or
<router-link :to="{name: 'tickets', params: {event: getEventSlug}}">Tickets</router-link>
</p>
</div>
<div class="card-body" v-else>
<p>Your Account is not yet activated. Please contact an admin.</p>
</div>
</div>
@ -16,11 +23,13 @@
</template>
<script>
import {mapState} from "vuex";
import {mapGetters, mapState} from "vuex";
export default {
name: 'Empty',
computed: mapState(['user']),
computed: {
...mapGetters(['hasPermissions', 'getEventSlug', 'activeUser']),
},
};
</script>

View file

@ -45,7 +45,7 @@
v-slot="{ item }"
@itemActivated="openLightboxModalWith($event)"
>
<AuthenticatedImage v-if="item.file"
<AuthenticatedImage v-if="item.file" cached
:src="`/media/2/256/${item.file}/`"
class="card-img-top img-fluid"
/>