diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/VideoBox.scss | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 16 |
2 files changed, 8 insertions, 9 deletions
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index 47867b128..da29c291f 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -97,6 +97,7 @@ z-index: 2001; height: 40px; padding: 0 10px 0 7px; + transition: opacity 0.3s; .timecode-controls { display: flex; diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index c8bea2a44..bad7813ef 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -103,7 +103,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; + @observable _controlsOpacity: number = 1; @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 @@ -262,9 +262,8 @@ 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); + this._controlsFadeTimer = setTimeout(action(() => this._controlsOpacity = 0), 3000); } @@ -449,8 +448,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp this._fullScreen = (document.fullscreenElement === cref); if (this._fullScreen) { document.addEventListener('pointermove', this.controlsFade); - this._controlsVisible = true; - this._controlsFadeTimer = setTimeout(action(() => this._controlsVisible = false), 3000) } else { document.removeEventListener('pointermove', this.controlsFade); @@ -509,10 +506,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp const interactive = CurrentUserUtils.ActiveTool !== 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", cursor: this._fullScreen && !this._controlsVisible ? 'none' : 'pointer' }}> + <div className="videoBox-contentContainer" key="container" style={{ mixBlendMode: "multiply", cursor: this._fullScreen && !this._controlsOpacity ? 'none' : 'pointer' }}> <div className={classname} ref={this.setContentRef} onPointerDown={(e) => this._fullScreen && e.stopPropagation()}> {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 }}> + style={{ left: this._controlsTransform && this._controlsTransform.X, top: this._controlsTransform && this._controlsTransform.Y, visibility: this._controlsOpacity ? 'visible' : 'hidden', opacity: this._controlsOpacity }}> {this.UIButtons} </div>} <video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef} style={this._fullScreen ? this.fullScreenSize() : {}} @@ -837,7 +834,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp const yPos = top + vidHeight - uiHeight - uiMargin; const xPos = uiHeight / vidHeight > 0.4 ? right + 10 : left + 10; return this._fullScreen || (right - left) < 50 ? null : <div className="videoBox-ui-wrapper" style={{ clip: `rect(${boundsTop}px, 10000px, 10000px, ${boundsLeft}px)` }}> - <div className="videoBox-ui" style={{ left: xPos, top: yPos, height: uiHeight, width: width - 20, transition: this._clicking ? "top 0.5s" : "" }}> + <div className="videoBox-ui" style={{ left: xPos, top: yPos, height: uiHeight, width: width - 20, transition: this._clicking ? "top 0.5s" : "", opacity: this._controlsOpacity}}> {this.UIButtons} </div> </div> @@ -863,8 +860,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp <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(); }} + onPointerDown={action((e: React.PointerEvent) => { e.stopPropagation(); this._controlsOpacity = 0.5;})} onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.setPlayheadTime(Number(e.target.value))} + onPointerUp={action((e: React.PointerEvent) => {e.stopPropagation(); this._controlsOpacity = 1;})} /> </div> : |