From 9501e39728851d7cd66faa51c619e17b0265f56e Mon Sep 17 00:00:00 2001
From: mehekj <mehek.jethani@gmail.com>
Date: Wed, 8 Jun 2022 15:51:28 -0400
Subject: thumbnail preview of video when hovering over timeline

---
 src/client/views/nodes/AudioBox.tsx |  2 ++
 src/client/views/nodes/VideoBox.tsx | 43 +++++++++++++++++++++++++++++++++++--
 2 files changed, 43 insertions(+), 2 deletions(-)

(limited to 'src/client/views/nodes')

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 787ad939d..59c37753a 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -591,6 +591,8 @@ 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 236c0d5fd..172b0b16f 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -28,6 +28,8 @@ import { AnchorMenu } from "../pdf/AnchorMenu";
 import { StyleProp } from "../StyleProvider";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./VideoBox.scss";
+import { Image } from "wikijs";
+import { List } from "../../../fields/List";
 const path = require('path');
 
 
@@ -85,6 +87,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     static _youtubeIframeCounter: number = 0;
     static heightPercent = 80; // height of video relative to videoBox when timeline is open
+    static numThumbnails = 20;
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _youtubePlayer: YT.Player | undefined = undefined;
     private _videoRef: HTMLVideoElement | null = null; // <video> ref
@@ -370,6 +373,42 @@ 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[] = [];
+        video.onloadedmetadata = () => {
+            video.currentTime = 0;
+        };
+        video.onseeked = () => {
+            const canvas = document.createElement('canvas');
+            canvas.height = video.videoHeight;
+            canvas.width = video.videoWidth;
+            const ctx = canvas.getContext('2d');
+            ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
+            const imgUrl = canvas.toDataURL();
+            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);
+                }
+            });
+        };
+
+        const field = Cast(this.dataDoc[this.fieldKey], VideoField);
+        field && (video.src = field.url.href);
+    }
+
+
     // sets video element ref
     @action
     setVideoRef = (vref: HTMLVideoElement | null) => {
@@ -381,6 +420,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             this._disposers.reactionDisposer?.();
             this._disposers.reactionDisposer = reaction(() => NumCast(this.layoutDoc._currentTimecode),
                 time => !this._playing && (vref.currentTime = time), { fireImmediately: true });
+
+            !this.dataDoc.thumbnails && this.getVideoThumbnails();
         }
     }
 
@@ -395,11 +436,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                     document.addEventListener('pointermove', this.controlsFade);
                     this._controlsVisible = true;
                     this._controlsFadeTimer = setTimeout(action(() => this._controlsVisible = false), 3000)
-                    console.log("added");
                 }
                 else {
                     document.removeEventListener('pointermove', this.controlsFade);
-                    console.log("removed");
                 }
             });
         }
-- 
cgit v1.2.3-70-g09d2