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

View file

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

View file

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

View file

@ -4,9 +4,16 @@
<div class="col-xl-8 offset-xl-2"> <div class="col-xl-8 offset-xl-2">
<div class="card bg-dark text-light mb-2" id="filters"> <div class="card bg-dark text-light mb-2" id="filters">
<div class="card-header"> <div class="card-header">
<h3 class="text-center">User: {{user}}</h3> <h3 class="text-center">User: {{ activeUser }}</h3>
</div> </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> <p>Your Account is not yet activated. Please contact an admin.</p>
</div> </div>
</div> </div>
@ -16,11 +23,13 @@
</template> </template>
<script> <script>
import {mapState} from "vuex"; import {mapGetters, mapState} from "vuex";
export default { export default {
name: 'Empty', name: 'Empty',
computed: mapState(['user']), computed: {
...mapGetters(['hasPermissions', 'getEventSlug', 'activeUser']),
},
}; };
</script> </script>

View file

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