1 files changed, 53 insertions, 3 deletions
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index d08006722..6dfb41671 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -301,8 +301,47 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         }
     }
 
-    @action
-    youtubeIframeLoaded = (e: any) => {
+    // returns the path of the audio file
+    @computed get audiopath() {
+        const field = Cast(this.props.Document[this.props.fieldKey + '-audio'], AudioField, null);
+        const vfield = Cast(this.dataDoc[this.fieldKey], VideoField, null);
+        return field?.url.href ?? vfield?.url.href ?? "";
+    }
+    // ref for updating time
+    _audioPlayer: HTMLAudioElement | null = null;
+    setAudioRef = (e: HTMLAudioElement | null) => this._audioPlayer = e;
+    @computed get content() {
+        const field = Cast(this.dataDoc[this.fieldKey], VideoField);
+        const interactive = CurrentUserUtils.SelectedTool !== InkTool.None || !this.props.isSelected() ? "" : "-interactive";
+        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}>
+                    <video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef}
+                        onCanPlay={this.videoLoad}
+                        controls={VideoBox._nativeControls}
+                        onPlay={() => this.Play()}
+                        onSeeked={this.updateTimecode}
+                        onPause={() => this.Pause()}
+                        onClick={e => e.preventDefault()}>
+                        <source src={field.url.href} type="video/mp4" />
+                        Not supported.
+                    </video>
+                    {!this.audiopath || this.audiopath === field.url.href ? (null) :
+                        <audio ref={this.setAudioRef} className={`audiobox-control${this.props.isContentActive() ? "-interactive" : ""}`}>
+                            <source src={this.audiopath} type="audio/mpeg" />
+                            Not supported.
+                        </audio>}
+                </div>
+            </div>;
+    }
+
+    @computed get youtubeVideoId() {
+        const field = Cast(this.dataDoc[this.props.fieldKey], VideoField);
+        return field && field.url.href.indexOf("youtube") !== -1 ? ((arr: string[]) => arr[arr.length - 1])(field.url.href.split("/")) : "";
+    }
+
+    @action youtubeIframeLoaded = (e: any) => {
         if (!this._youtubeContentCreated) {
             this._forceCreateYouTubeIFrame = !this._forceCreateYouTubeIFrame;
             return;
@@ -388,7 +427,18 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 return false;
             },
             emptyFunction,
-            e => this.layoutDoc._currentTimecode = start);
+            (e: PointerEvent) => this.layoutDoc._currentTimecode = 0);
+    }
+
+    @computed get youtubeContent() {
+        this._youtubeIframeId = VideoBox._youtubeIframeCounter++;
+        this._youtubeContentCreated = this._forceCreateYouTubeIFrame ? true : true;
+        const classname = "videoBox-content-YouTube" + (this._fullScreen ? "-fullScreen" : "");
+        const start = untracked(() => Math.round((this.layoutDoc._currentTimecode || 0)));
+        return <iframe key={this._youtubeIframeId} id={`${this.youtubeVideoId + this._youtubeIframeId}-player`}
+            onPointerLeave={this.updateTimecode}
+            onLoad={this.youtubeIframeLoaded} className={classname} width={Doc.NativeWidth(this.layoutDoc) || 640} height={Doc.NativeHeight(this.layoutDoc) || 390}
+            src={`https://www.youtube.com/embed/${this.youtubeVideoId}?enablejsapi=1&rel=0&showinfo=1&autoplay=0&mute=1&start=${start}&modestbranding=1&controls=${VideoBox._nativeControls ? 1 : 0}`} />;
     }
 
     @action.bound