diff options
| author | mehekj <mehek.jethani@gmail.com> | 2022-06-08 09:17:31 -0400 |
|---|---|---|
| committer | mehekj <mehek.jethani@gmail.com> | 2022-06-08 09:17:31 -0400 |
| commit | c412afe10fda4b3a8a918621c7f3bbaf6db8f1f2 (patch) | |
| tree | b9622e8de3c1b0d9c33011a452158271ce626319 | |
| parent | 469838fd9c6515c0ec1894e5964be51e8a8b988b (diff) | |
better controls breakpoints
| -rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 20 |
1 files changed, 10 insertions, 10 deletions
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 61afda70f..236c0d5fd 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -763,13 +763,13 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp const right = bounds?.right || 0; const top = bounds?.top || 0; const height = (bounds?.bottom || 0) - top; - const width = right - left; + const width = Math.max(right - left, 100); 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)` }}> + 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" : "" }}> {this.UIButtons} </div> @@ -787,7 +787,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp <FontAwesomeIcon icon={this._playing ? "pause" : "play"} /> </div> - {this.timeline && width > 160 && <div className="timecode-controls"> + {this.timeline && width > 150 && <div className="timecode-controls"> <div className="timecode-current"> {formatTime(curTime)} </div> @@ -809,14 +809,14 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp </div> } - {width > 100 && <div className="videobox-button" + <div className="videobox-button" title={"full screen"} onPointerDown={this.onFullDown}> <FontAwesomeIcon icon="expand" /> - </div>} + </div> { - !this._fullScreen && width > 250 && <div className="videobox-button" + !this._fullScreen && width > 300 && <div className="videobox-button" title={"show timeline"} onPointerDown={this.onTimelineHdlDown}> <FontAwesomeIcon icon="eye" /> @@ -824,18 +824,18 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp } { - !this._fullScreen && width > 250 && <div className="videobox-button" + !this._fullScreen && width > 300 && <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" + <div className="videobox-button" title={this._muted ? "unmute" : "mute"} onPointerDown={(e) => { e.stopPropagation(); this.toggleMute(); }}> <FontAwesomeIcon icon={this._muted ? "volume-mute" : "volume-up"} /> - </div>} + </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" |