diff options
| -rw-r--r-- | src/client/views/nodes/VideoBox.scss | 11 | ||||
| -rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 39 |
2 files changed, 35 insertions, 15 deletions
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index 1fb5cef98..b97e90bd9 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -86,15 +86,13 @@ align-items: center; justify-content: center; display: flex; - // visibility: none; - // opacity: 0; background-color: $dark-gray; color: white; border-radius: 100px; z-index: 2001; min-width: 300px; - transition: top 0.5s, width 0.5s, opacity 0.2s, visibility 0s; + transition: top 0.5s, width 0.5s, opacity 0.2s, visibility 0.2s; height: 50px; padding: 0 10px 0 7px; @@ -161,16 +159,11 @@ align-items: flex-end; .videoBox-ui { - // opacity: 0; left: 50%; top: 90%; transform: translate(-50%, -50%); width: 80%; - transition: none; - } - - .videoBox-ui:hover { - opacity: 1; + transition: top 0s, width 0s, opacity 0.3s, visibility 0.3s; } } diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 3ffd813d6..a98cd8cf4 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -4,7 +4,7 @@ import { action, computed, IReactionDisposer, observable, ObservableMap, reactio import { observer } from "mobx-react"; import { basename } from "path"; import * as rp from 'request-promise'; -import { Doc, DocListCast, HeightSym, WidthSym } from "../../../fields/Doc"; +import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../fields/Doc"; import { InkTool } from "../../../fields/InkField"; import { Cast, NumCast, StrCast } from "../../../fields/Types"; import { AudioField, ImageField, VideoField } from "../../../fields/URLField"; @@ -84,6 +84,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); // outermost div private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef(); private _playRegionTimer: any = null; // timeout for playback + private _controlsFadeTimer: any = null; // timeout for controls fade + + public onMakeAnchor: () => Opt<Doc> = () => undefined; // Method to get anchor from text search + @observable _stackedTimeline: any; // CollectionStackedTimeline ref @observable static _nativeControls: boolean; // default html controls @observable _marqueeing: number[] | undefined; // coords for marquee selection @@ -98,6 +102,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp @observable _volume: number = 1; @observable _muted: boolean = false; @observable _controlsTransform?: { X: number, Y: number }; + @observable _controlsVisible: boolean = true; @computed get links() { return DocListCast(this.dataDoc.links); } @computed get heightPercent() { return NumCast(this.layoutDoc._timelineHeightPercent, 100); } // current percent of video relative to VideoBox height @@ -211,7 +216,6 @@ 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"); @@ -220,7 +224,16 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp } } + // fades out controls in fullscreen after mouse stops moving + @action controlsFade = (e: PointerEvent) => { + e.stopPropagation(); + this._controlsVisible = true; + clearTimeout(this._controlsFadeTimer); + this._controlsFadeTimer = setTimeout(action(() => this._controlsVisible = false), 3000); + } + + // drag controls around window in fulls screen @action controlsDrag = (e: React.PointerEvent) => { e.preventDefault(); e.stopPropagation(); @@ -361,7 +374,19 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp setContentRef = (cref: HTMLDivElement | null) => { this._contentRef = cref; if (cref) { - cref.onfullscreenchange = action((e) => this._fullScreen = (document.fullscreenElement === cref)); + cref.onfullscreenchange = action((e) => { + this._fullScreen = (document.fullscreenElement === cref); + if (this._fullScreen) { + 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"); + } + }); } } @@ -402,9 +427,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp 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="videoBox-contentContainer" key="container" style={{ mixBlendMode: "multiply", cursor: this._fullScreen && !this._controlsVisible ? 'none' : 'pointer' }}> <div className={classname} ref={this.setContentRef} onPointerDown={(e) => this._fullScreen && e.stopPropagation()}> - {this._fullScreen && <div className="videoBox-ui" onPointerDown={this.controlsDrag} style={this._controlsTransform ? { left: this._controlsTransform.X, top: this._controlsTransform.Y } : {}}> + {this._fullScreen && <div className="videoBox-ui" onPointerDown={this.controlsDrag} + style={{ left: this._controlsTransform && this._controlsTransform.X, top: this._controlsTransform && this._controlsTransform.Y, visibility: this._controlsVisible ? 'visible' : 'hidden', opacity: this._controlsVisible ? 1 : 0 }}> {this.UIButtons} </div>} <video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef} style={this._fullScreen ? this.fullScreenSize() : {}} @@ -413,7 +439,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp onPlay={() => this.Play()} onSeeked={this.updateTimecode} onPause={() => this.Pause()} - onClick={e => e.preventDefault()}> + onClick={this._fullScreen ? () => this.playing() ? this.Pause() : this.Play() : e => e.preventDefault()}> <source src={field.url.href} type="video/mp4" /> Not supported. </video> @@ -830,6 +856,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp playLink={this.playLink} PanelHeight={this.timelineHeight} rawDuration={this.rawDuration} + vref={this._videoRef} /> </div>; } |