software caching thumbnails in javascript

web/src/components/AuthenticatedImage.vue

@@ -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>

web/src/components/TimelineMail.vue

@@ -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>

web/src/store.js

@@ -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}) {

web/src/views/Empty.vue

@@ -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>
 

web/src/views/Items.vue

@@ -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"
             />