1 files changed, 13 insertions, 27 deletions

diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 80ff19519..ef3b0d105 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -32,18 +32,6 @@ import { Image } from "wikijs";
 import { List } from "../../../fields/List";
 const path = require('path');
 
-
-//TODO mj: one option for doing thumbnail previews of video in timeline?
-/**
- * 1. set vref in videobox
- * 2. when vref is set immediately process video to extract ~50 thumbnails
- * (^^ would make more sense to do this when video is initially uploaded)
- * 3. upload each file to server using convertDataURI and save list of URLs as field on doc
- * 4. in CST onHover, set hover time
- * 5. use hover time to figure out index of nearest thumbnail
- * 6. get URL of image and use source to paint canvas accordingly
- */
-
 /**
  * VideoBox
  * Main component: VideoBox.tsx
@@ -375,12 +363,13 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     // extracts video thumbnails and saves them as field of doc
     getVideoThumbnails = () => {
-        this.layoutDoc.cloneO
         const video = document.createElement('video');
-        const thumbnails: string[] = [];
+        const thumbnailPromises: Promise<any>[] = [];
+
         video.onloadedmetadata = () => {
             video.currentTime = 0;
         };
+
         video.onseeked = () => {
             const canvas = document.createElement('canvas');
             canvas.height = video.videoHeight;
@@ -391,18 +380,15 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             const retitled = StrCast(this.rootDoc.title).replace(/[ -\.:]/g, "");
             const encodedFilename = encodeURIComponent("thumbnail" + retitled + "_" + video.currentTime.toString().replace(/\./, "_"));
             const filename = basename(encodedFilename);
-            VideoBox.convertDataUri(imgUrl, filename).then((returnedFilename: string) => {
-                returnedFilename && thumbnails.push(returnedFilename);
-                const newTime = video.currentTime + video.duration / VideoBox.numThumbnails;
-                if (newTime < video.duration) {
-                    video.currentTime = newTime;
-                    console.log(thumbnails.length);
-                }
-                else {
-                    this.dataDoc.thumbnails = new List<string>(thumbnails);
-                }
-            });
-        };
+            thumbnailPromises.push(VideoBox.convertDataUri(imgUrl, filename));
+            const newTime = video.currentTime + video.duration / (VideoBox.numThumbnails - 1);
+            if (newTime < video.duration) {
+                video.currentTime = newTime;
+            }
+            else {
+                Promise.all(thumbnailPromises).then(thumbnails => { this.dataDoc.thumbnails = new List<string>(thumbnails); });
+            }
+        }
 
         const field = Cast(this.dataDoc[this.fieldKey], VideoField);
         field && (video.src = field.url.href);
@@ -421,7 +407,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             this._disposers.reactionDisposer = reaction(() => NumCast(this.layoutDoc._currentTimecode),
                 time => !this._playing && (vref.currentTime = time), { fireImmediately: true });
 
-            !this.dataDoc.thumbnails && this.getVideoThumbnails();
+            (!this.dataDoc.thumbnails || this.dataDoc.thumbnails.length != VideoBox.numThumbnails) && this.getVideoThumbnails();
         }
     }