Generate thumbnail images for both file and clip objects

src/components/Clips.vue

@@ -4,15 +4,10 @@
     <div class="col-12">
 
       <div class="row gy-2 gx-2 mb-2" v-for="clip in clips" :key="clip.id">
-        <div class="col-4 text-center img-parent">
-          <img class="img-fluid img-thumbnail clip-thumbnail" :title="clip.name" src="../assets/logo.png"/>
-          <p class="carousel-caption clip-thumbnail">Start</p>
+        <div class="col-7 text-center img-parent">
+          <img class="img-fluid img-thumbnail clip-thumbnail" :title="clip.name" :src="clip.thumbnail"/>
         </div>
-        <div class="col-4 text-center img-parent">
-          <img class="img-fluid img-thumbnail clip-thumbnail" :title="clip.name" src="../assets/logo.png"/>
-          <p class="carousel-caption clip-thumbnail">End</p>
-        </div>
-        <div class="col-4">
+        <div class="col-5">
 
           <div class="row">
 

src/components/Files.vue

@@ -8,7 +8,7 @@
       </div>
     </div>
     <div v-for="file in files" :key="file.id" class="col-4">
-      <img @click="toggleSelection(file)" :class="getSelectedClass(file)" class="file-thumbnail img-fluid img-thumbnail" :title="file.name" src="../assets/logo.png"/>
+      <img @click="toggleSelection(file)" :class="getSelectedClass(file)" class="file-thumbnail img-fluid img-thumbnail" :title="file.name" :src="file.thumbnail"/>
     </div>
     <div v-for="upload in uploads" :key="upload.id" class="col-4">
       <div class="row h-100">

src/store/index.js

@@ -116,7 +116,32 @@ export default createStore({
     async loadFiles({commit}, project_id) {
       try {
         const response = await instance.get(`projects/${project_id}/files/`)
-        commit('setFiles', response.data.results)
+        let files = response.data.results
+
+        // Generate thumbnail for each file object
+        for (let fileObj of files) {
+          let data = {
+            "frame_number": 1,
+            "width": 480,
+            "height": 270,
+            "image_format": "JPEG",
+            "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'] }
+            )
+            // Append thumbnail attribute to each file object
+            let thumbnailUrl = URL.createObjectURL(blob)
+            fileObj.thumbnail = thumbnailUrl
+
+          } catch(err) {
+            commit('addError', err.response.data)
+          }
+        }
+        commit('setFiles', files)
       } catch(err) {
         commit('addError', err.response.data)
       }
@@ -124,7 +149,33 @@ export default createStore({
     async loadClips({commit}, project_id) {
       try {
         const response = await instance.get(`projects/${project_id}/clips/`)
-        commit('setClips', response.data.results)
+        let clips = response.data.results
+
+        for (let clipObj of clips) {
+
+          let fps = clipObj.json.reader.fps.num / clipObj.json.reader.fps.den
+          let data = {
+            "frame_number": clipObj.start * fps,
+            "width": 480,
+            "height": 270,
+            "image_format": "JPEG",
+            "image_quality": 100
+          }
+          try {
+            const response = await instance.post(`${clipObj.file}thumbnail/`, data, { responseType: 'arraybuffer' })
+            let blob = new Blob(
+                [response.data],
+                { type: response.headers['content-type'] }
+            )
+            // Append thumbnail attribute to each clip object
+            let thumbnailUrl = URL.createObjectURL(blob)
+            clipObj.thumbnail = thumbnailUrl
+
+          } catch(err) {
+            commit('addError', err.response.data)
+          }
+        }
+        commit('setClips', clips)
       } catch(err) {
         commit('addError', err.response.data)
       }