Added sessionStorage to blob image thumbnails (caching them for a session).…

Added sessionStorage to blob image thumbnails (caching them for a session). Reloading the browser tab seems to clear the blob URLs, causing 404s, and then the thumbnails are regenerated. Also made image thumbnail 100% width by default.

src/components/Preview.vue

@@ -313,4 +313,7 @@ video {
   width: 100%;
   padding: 0.15em;
 }
+.img-thumbnail {
+  width: 100%!important;
+}
 </style>
\ No newline at end of file

src/store/axios.js

 import {create} from "axios";
-//import store from './index'
 
 
 // Init a new axios instance, with auth
@@ -7,6 +6,9 @@ const instance = create({
     baseURL: 'https://cloud.openshot.org'
 });
 
+// Init a new axios instance, with auth
+const blob_instance = create({});
+
 // Set the AUTH token for any request
 instance.interceptors.request.use(function (config) {
     const token = localStorage.auth
@@ -22,4 +24,4 @@ function fixImageDuration(duration) {
     }
 }
 
-export { instance, fixImageDuration };
\ No newline at end of file
+export { instance, blob_instance, fixImageDuration };
\ No newline at end of file

src/store/index.js

 import { createStore } from 'vuex'
 import { v4 as uuidv4 } from "uuid"
-import { instance, fixImageDuration } from "./axios"
+import { instance, blob_instance, fixImageDuration } from "./axios"
 
 
 export default createStore({
@@ -331,6 +331,7 @@ export default createStore({
         fileObj = payload.obj
         objectType = 'file'
       }
+      let sessionKey = `${objectType}-${fileObj.id}-frame${payload.frame}`
 
       let data = {
         "frame_number": payload.frame,
@@ -340,13 +341,27 @@ export default createStore({
         "image_quality": 100
       }
       try {
-        const response = await instance.post(`${fileObj.url}thumbnail/`, data, { responseType: 'arraybuffer' })
-        let blob = new Blob(
-            [response.data],
-            { type: response.headers['content-type'] }
-        )
+        let thumbnailUrl = sessionStorage.getItem(sessionKey)
+        if (thumbnailUrl) {
+          try {
+            // Verify blob
+            await blob_instance.get(thumbnailUrl)
+          } catch(err) {
+            // Failed to find blob
+            thumbnailUrl = null
+          }
+        }
+        if (!thumbnailUrl) {
+          const response = await instance.post(`${fileObj.url}thumbnail/`, data, { responseType: 'arraybuffer' })
+          let blob = new Blob(
+              [response.data],
+              { type: response.headers['content-type'] }
+          )
+          thumbnailUrl = URL.createObjectURL(blob)
+          sessionStorage.setItem(sessionKey, thumbnailUrl)
+        }
+
         // Append thumbnail attribute to each file object
-        let thumbnailUrl = URL.createObjectURL(blob)
         payload.obj.thumbnail = thumbnailUrl
         if (objectType == 'file') {
           commit('updateFileThumbnail', payload)