basic video UI and functionality complete

1 files changed, 68 insertions, 52 deletions

diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index bd9423d74..c8e0cdb66 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -117,6 +117,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     }
 
     componentWillUnmount() {
+        this.removeCurrentlyPlaying();
         this.Pause();
         Object.keys(this._disposers).forEach(d => this._disposers[d]?.());
     }
@@ -155,6 +156,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     @action public Pause = (update: boolean = true) => {
         this._playing = false;
+        this.removeCurrentlyPlaying();
         try {
             update && this.player?.pause();
             update && this._audioPlayer?.pause();
@@ -178,6 +180,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         else {
             this._fullScreen = true;
             this.player && this._contentRef && this._contentRef.requestFullscreen();
+
         }
         try {
             this._youtubePlayer && this.props.addDocTab(this.rootDoc, "add");
@@ -326,9 +329,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         const classname = "videoBox-content" + (this._fullScreen ? "-fullScreen" : "") + interactive;
         return !field ? <div key="loading">Loading</div> :
             <div className="videoBox-contentContainer" key="container" style={{ mixBlendMode: "multiply" }}>
-                <div className={classname} ref={this.setContentRef}>
+                <div className={classname} ref={this.setContentRef} onPointerDown={(e) => this._fullScreen && e.stopPropagation()}>
                     {this.uIButtons}
-                    <video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef}
+                    <video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef} style={this._fullScreen ? this.fullScreenSize() : {}}
                         onCanPlay={this.videoLoad}
                         controls={VideoBox._nativeControls}
                         onPlay={() => this.Play()}
@@ -436,6 +439,24 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             (e: PointerEvent) => this.layoutDoc._currentTimecode = 0);
     }
 
+    @action
+    removeCurrentlyPlaying = () => {
+        if (CollectionStackedTimeline.CurrentlyPlaying) {
+            const index = CollectionStackedTimeline.CurrentlyPlaying.indexOf(this.layoutDoc.doc as Doc);
+            index !== -1 && CollectionStackedTimeline.CurrentlyPlaying.splice(index, 1);
+        }
+    }
+
+    @action
+    addCurrentlyPlaying = () => {
+        if (!CollectionStackedTimeline.CurrentlyPlaying) {
+            CollectionStackedTimeline.CurrentlyPlaying = [];
+        }
+        if (CollectionStackedTimeline.CurrentlyPlaying.indexOf(this.layoutDoc.doc as Doc) == -1) {
+            CollectionStackedTimeline.CurrentlyPlaying.push(this.layoutDoc.doc as Doc);
+        }
+    }
+
     @computed get youtubeContent() {
         this._youtubeIframeId = VideoBox._youtubeIframeCounter++;
         this._youtubeContentCreated = this._forceCreateYouTubeIFrame ? true : true;
@@ -472,9 +493,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 this.player.play();
                 this._audioPlayer?.play();
                 this._playing = true;
+                this.addCurrentlyPlaying();
                 this._playRegionTimer = setTimeout(
                     () => {
                         if (fullPlay) this._finished = true;
+                        else this.removeCurrentlyPlaying();
                         this.Pause();
                     }, this._playRegionDuration * 1000);
             } else {
@@ -512,20 +535,33 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         if (this.player) {
             this._volume = volume;
             this.player.volume = volume;
+            if (this._muted) {
+                this.toggleMute();
+            }
         }
     }
 
     @action
-    toggleMute = (e: React.PointerEvent) => {
-        e.stopPropagation();
-        console.log("click");
+    toggleMute = () => {
         if (this.player) {
-            console.log("audio exists");
             this._muted = !this._muted;
             this.player.muted = this._muted;
         }
     }
 
+    fullScreenSize() {
+        if (this._videoRef && this._videoRef.videoHeight / this._videoRef.videoWidth > 1) {
+            return { height: "100%" }
+        }
+        else {
+            return { width: "100%" }
+        }
+    }
+
+    zoom = (zoom: number) => {
+        this.timeline?.setZoom(zoom);
+    }
+
     playLink = (doc: Doc) => {
         const startTime = Math.max(0, (this._stackedTimeline.current?.anchorStart(doc) || 0));
         const endTime = this.timeline?.anchorEnd(doc);
@@ -571,42 +607,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     @computed get uIButtons() {
         const curTime = (this.layoutDoc._currentTimecode || 0) - (this.timeline?.clipStart || 0);
-        // const nonNativeControls = [
-        //     <Tooltip title={<div className="dash-tooltip">{"playback"}</div>} key="play" placement="bottom">
-        //         <div className="videoBox-play" onPointerDown={this.onPlayDown} >
-        //             <FontAwesomeIcon icon={this._playing ? "pause" : "play"} size="lg" />
-        //         </div>
-        //     </Tooltip>,
-        //     <Tooltip title={<div className="dash-tooltip">{"timecode"}</div>} key="time" placement="bottom">
-        //         <div className="videoBox-time" onPointerDown={this.onResetDown} >
-        //             <span>{formatTime(curTime)}</span>
-        //             <span style={{ fontSize: 8 }}>{" " + Math.floor((curTime - Math.trunc(curTime)) * 100).toString().padStart(2, "0")}</span>
-        //         </div>
-        //     </Tooltip>,
-        //     <Tooltip title={<div className="dash-tooltip">{"view full screen"}</div>} key="full" placement="bottom">
-        //         <div className="videoBox-full" onPointerDown={this.FullScreen}>
-        //             <FontAwesomeIcon icon="expand" size="lg" />
-        //         </div>
-        //     </Tooltip>];
-        // return <div className="videoBox-ui">
-        //     {[...(VideoBox._nativeControls ? [] : nonNativeControls),
-        //     <Tooltip title={<div className="dash-tooltip">{"snapshot current frame"}</div>} key="snap" placement="bottom">
-        //         <div className="videoBox-snapshot" onPointerDown={this.onSnapshotDown} >
-        //             <FontAwesomeIcon icon="camera" size="lg" />
-        //         </div>
-        //     </Tooltip>,
-        //     <Tooltip title={<div className="dash-tooltip">{"show annotation timeline"}</div>} key="timeline" placement="bottom">
-        //         <div className="videoBox-timelineButton" onPointerDown={this.onTimelineHdlDown}>
-        //             <FontAwesomeIcon icon="eye" size="lg" />
-        //         </div>
-        //     </Tooltip>,
-        //     <Tooltip title={<div className="dash-tooltip">{this.timeline?.IsTrimming !== TrimScope.None ? "finish trimming" : "start trim"}</div>} key="trim" placement="bottom">
-        //         <div className="videoBox-timelineButton" onPointerDown={this.onClipPointerDown}>
-        //             <FontAwesomeIcon icon={this.timeline?.IsTrimming !== TrimScope.None ? "check" : "cut"} size="lg" />
-        //         </div>
-        //     </Tooltip>,]}
-        // </div>;
-        return <div className="videoBox-ui" style={{ top: `calc(100% - 10px)` }}>
+        return <div className="videoBox-ui" style={this._fullScreen || this.heightPercent == 100 ? { fontSize: "40px", minWidth: "80%" } : {}}>
             <div className="videobox-button"
                 title={this._playing ? "play" : "pause"}
                 onPointerDown={this.onPlayDown}>
@@ -618,13 +619,16 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                     {formatTime(curTime)}
                 </div>
 
-                <div className="timeline-slider">
-                    <input type="range" step="0.1" min={this.timeline.clipStart} max={this.timeline.clipEnd} value={curTime}
-                        className="toolbar-slider time-progress"
-                        onPointerDown={(e: React.PointerEvent) => { e.stopPropagation(); }}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => { this.setPlayheadTime(Number(e.target.value)) }}
-                    />
-                </div>
+                {this._fullScreen || this.heightPercent == 100 ?
+                    <div className="timeline-slider">
+                        <input type="range" step="0.1" min={this.timeline.clipStart} max={this.timeline.clipEnd} value={curTime}
+                            className="toolbar-slider time-progress"
+                            onPointerDown={(e: React.PointerEvent) => { e.stopPropagation(); }}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => { this.setPlayheadTime(Number(e.target.value)) }}
+                        />
+                    </div>
+                    :
+                    <div>/</div>}
 
                 <div className="timecode-end">
                     {formatTime(this.timeline.clipDuration)}
@@ -649,16 +653,28 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 <FontAwesomeIcon icon={this.timeline?.IsTrimming !== TrimScope.None ? "check" : "cut"} />
             </div>}
 
-            <div className="videobox-button"
+            <div className="videobox-button show-slider"
                 title={this._muted ? "unmute" : "mute"}
-                onPointerDown={this.toggleMute}>
-                <FontAwesomeIcon icon={this._muted || this._volume == 0 ? "volume-mute" : "volume-up"} />
+                onPointerDown={(e) => { e.stopPropagation(); this.toggleMute(); }}>
+                <FontAwesomeIcon icon={this._muted ? "volume-mute" : "volume-up"} />
             </div>
             <input type="range" step="0.1" min="0" max="1" value={this._muted ? 0 : this._volume}
                 className="toolbar-slider volume"
                 onPointerDown={(e: React.PointerEvent) => { e.stopPropagation(); }}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => { this.setVolume(Number(e.target.value)) }}
             />
+
+            {!this._fullScreen && this.heightPercent != 100 &&
+                <>
+                    <div className="videobox-button" title="zoom">
+                        <FontAwesomeIcon icon="search-plus" />
+                    </div>
+                    <input type="range" step="0.1" min="1" max="5" value={this.timeline?._zoomFactor}
+                        className="toolbar-slider zoom"
+                        onPointerDown={(e: React.PointerEvent) => { e.stopPropagation(); }}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => { this.zoom(Number(e.target.value)); }}
+                    />
+                </>}
         </div>
     }
     @computed get renderTimeline() {