diff options
| -rw-r--r-- | src/client/views/nodes/VideoBox.scss | 11 | ||||
| -rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 72 |
2 files changed, 48 insertions, 35 deletions
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index f279b9709..47867b128 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -95,8 +95,7 @@ color: white; border-radius: 100px; z-index: 2001; - min-width: 300px; - height: 50px; + height: 40px; padding: 0 10px 0 7px; .timecode-controls { @@ -121,8 +120,8 @@ .videobox-button { margin: 2px; cursor: pointer; - width: 30px; - height: 30px; + width: 25px; + height: 25px; border-radius: 50%; background: $dark-gray; display: flex; @@ -134,8 +133,8 @@ } svg { - width: 17px; - height: 17px; + width: 15px; + height: 15px; } } } diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 76b1ad842..61afda70f 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -763,17 +763,22 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp const right = bounds?.right || 0; const top = bounds?.top || 0; const height = (bounds?.bottom || 0) - top; - const yPos = height * this.heightPercent / 100 - 60 + top; - const width = Math.max(right - left, 300); - const overflow = (width - right + left) / 2; - return this._fullScreen || (right - left) < 250 ? null : <div className="videoBox-ui-wrapper" style={{ clip: `rect(${boundsTop}px, 10000px, 10000px, ${boundsLeft}px)` }}> - <div className="videoBox-ui" style={{ left: left - overflow, top: yPos, width: width, transition: this._clicking ? "top 0.5s" : "" }}> + const width = right - left; + const uiHeight = Math.max(25, Math.min(50, height / 10)); + const uiMargin = Math.min(10, height / 20); + const vidHeight = height * this.heightPercent / 100; + const yPos = top + vidHeight - uiHeight - uiMargin; + const xPos = uiHeight / vidHeight > 0.5 ? right + 10 : left + 10; + return this._fullScreen || width < 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" : "" }}> {this.UIButtons} </div> </div> } @computed get UIButtons() { + const bounds = this.props.docViewPath().lastElement().getBounds(); + const width = (bounds?.right || 0) - (bounds?.left || 0); const curTime = NumCast(this.layoutDoc._currentTimecode) - (this.timeline?.clipStart || 0); return <> <div className="videobox-button" @@ -782,12 +787,12 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp <FontAwesomeIcon icon={this._playing ? "pause" : "play"} /> </div> - {this.timeline && <div className="timecode-controls"> + {this.timeline && width > 160 && <div className="timecode-controls"> <div className="timecode-current"> {formatTime(curTime)} </div> - {this._fullScreen || this.heightPercent === 100 ? + {this._fullScreen || (this.heightPercent === 100 && width > 200) ? <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" @@ -801,38 +806,46 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp <div className="timecode-end"> {formatTime(this.timeline.clipDuration)} </div> - </div>} + </div> + } - <div className="videobox-button" + {width > 100 && <div className="videobox-button" title={"full screen"} onPointerDown={this.onFullDown}> <FontAwesomeIcon icon="expand" /> - </div> - - {!this._fullScreen && <div className="videobox-button" - title={"show timeline"} - onPointerDown={this.onTimelineHdlDown}> - <FontAwesomeIcon icon="eye" /> </div>} - {!this._fullScreen && <div className="videobox-button" - title={this.timeline?.IsTrimming !== TrimScope.None ? "finish trimming" : "start trim"} - onPointerDown={this.onClipPointerDown}> - <FontAwesomeIcon icon={this.timeline?.IsTrimming !== TrimScope.None ? "check" : "cut"} /> - </div>} + { + !this._fullScreen && width > 250 && <div className="videobox-button" + title={"show timeline"} + onPointerDown={this.onTimelineHdlDown}> + <FontAwesomeIcon icon="eye" /> + </div> + } - <div className="videobox-button show-slider" + { + !this._fullScreen && width > 250 && <div className="videobox-button" + title={this.timeline?.IsTrimming !== TrimScope.None ? "finish trimming" : "start trim"} + onPointerDown={this.onClipPointerDown}> + <FontAwesomeIcon icon={this.timeline?.IsTrimming !== TrimScope.None ? "check" : "cut"} /> + </div> + } + + {width > 70 && <div className="videobox-button" title={this._muted ? "unmute" : "mute"} onPointerDown={(e) => { e.stopPropagation(); this.toggleMute(); }}> <FontAwesomeIcon icon={this._muted ? "volume-mute" : "volume-up"} /> - </div> - <input type="range" style={{ width: `min(25%, 50px)` }} 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))} - /> + </div>} + { + width > 300 && <input type="range" style={{ width: `min(25%, 50px)` }} 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 && + { + !this._fullScreen && this.heightPercent !== 100 && width > 300 && <> <div className="videobox-button" title="zoom"> <FontAwesomeIcon icon="search-plus" /> @@ -842,7 +855,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp onPointerDown={(e: React.PointerEvent) => { e.stopPropagation(); }} onChange={(e: React.ChangeEvent<HTMLInputElement>) => { this.zoom(Number(e.target.value)); }} /> - </>} + </> + } </> } |