ui fixes and thumbnails upload in parallel

2 files changed, 16 insertions, 30 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 59c37753a..1d06f368f 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -581,7 +581,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 <div className="timecode-current">
                     {this.timeline && formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this.timeline.clipStart)))}
                 </div>
-                {!this.miniPlayer &&
+                {this.miniPlayer ?
+                    <div>/</div>
+                    :
                     <div className="bottom-controls-middle">
                         <FontAwesomeIcon icon="search-plus" />
                         <input type="range" step="0.1" min="1" max="5" value={this.timeline?._zoomFactor}
@@ -591,8 +593,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                         />
                     </div>}
 
-                {this.miniPlayer && <div>/</div>}
-
                 <div className="timecode-duration">
                     {this.timeline && formatTime(Math.round(this.timeline.clipDuration))}
                 </div>
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();
         }
     }