From 4d130a85618f4e88cf8fdb4763e1a21bb71e689b Mon Sep 17 00:00:00 2001 From: mehekj Date: Sun, 1 May 2022 22:18:34 -0400 Subject: put videoBox ui into componentUI function --- src/client/views/nodes/VideoBox.scss | 72 ++++++++++++++++-------------------- 1 file changed, 31 insertions(+), 41 deletions(-) (limited to 'src/client/views/nodes/VideoBox.scss') diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index f47a71469..08d0bb035 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -75,54 +75,53 @@ // pointer-events: all; // } +.videoBox-ui-wrapper { + width: 0; + height: 0; +} + .videoBox-ui { position: absolute; flex-direction: row; align-items: center; justify-content: center; display: flex; - width: 100%; - visibility: none; - opacity: 0; + // visibility: none; + // opacity: 0; background-color: $dark-gray; color: white; border-radius: 100px; - top: calc(100% - 20px); - left: 50%; - transform: translate(-50%, -100%); + z-index: 2001; + min-width: 300px; transition: top 0.5s, width 0.5s, opacity 0.2s, visibility 0s; - height: 120px; - padding: 0 20px; + height: 50px; + padding: 0 10px 0 7px; .timecode-controls { display: flex; flex-direction: row; align-items: center; justify-content: center; - margin: 0 5px; + margin: 0 2px; flex-grow: 2; - font-size: 32px; - - .timecode { - margin: 0 5px; - } + font-size: 14px; .timeline-slider { - margin: 0 20px 0 20px; + margin: 5px; flex-grow: 2; } } .toolbar-slider.volume, .toolbar-slider.zoom { - width: 100px; + width: 50px; } .videobox-button { - margin: 5px; + margin: 2px; cursor: pointer; - width: 70px; - height: 70px; + width: 30px; + height: 30px; border-radius: 50%; background: $dark-gray; display: flex; @@ -134,8 +133,8 @@ } svg { - width: 40px; - height: 40px; + width: 17px; + height: 17px; } } } @@ -156,23 +155,15 @@ } } -.videoBox:hover { - .videoBox-ui { - visibility: visible; - opacity: 1; - z-index: 10000; - } -} - .videoBox-content-fullScreen, .videoBox-content-fullScreen-interactive { display: flex; justify-content: center; - align-items: center; + align-items: flex-end; - &:hover { - .videoBox-ui { - opacity: 0; - } + .videoBox-ui { + opacity: 0; + bottom: 50px; + width: 80%; } .videoBox-ui:hover { @@ -187,7 +178,6 @@ video::-webkit-media-controls { input[type="range"] { -webkit-appearance: none; background: none; - margin: 10px; } input[type="range"]:focus { @@ -196,21 +186,21 @@ input[type="range"]:focus { input[type="range"]::-webkit-slider-runnable-track { width: 100%; - height: 20px; + height: 10px; cursor: pointer; box-shadow: 0; background: $light-gray; - border-radius: 20px; + border-radius: 10px; } input[type="range"]::-webkit-slider-thumb { box-shadow: 0; border: 0; - height: 26px; - width: 26px; - border-radius: 20px; + height: 12px; + width: 12px; + border-radius: 10px; background: $medium-blue; cursor: pointer; -webkit-appearance: none; - margin-top: -3px; + margin-top: -1px; } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 7a4e8b6352d06242d3c8006256f395c59f8d342a Mon Sep 17 00:00:00 2001 From: mehekj Date: Thu, 5 May 2022 13:32:34 -0400 Subject: drag video controls in full screen --- src/client/views/nodes/VideoBox.scss | 7 ++++-- src/client/views/nodes/VideoBox.tsx | 41 ++++++++++++++++++++++++++++++++++-- 2 files changed, 44 insertions(+), 4 deletions(-) (limited to 'src/client/views/nodes/VideoBox.scss') diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index 08d0bb035..1fb5cef98 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -161,9 +161,12 @@ align-items: flex-end; .videoBox-ui { - opacity: 0; - bottom: 50px; + // opacity: 0; + left: 50%; + top: 90%; + transform: translate(-50%, -50%); width: 80%; + transition: none; } .videoBox-ui:hover { diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 0344295bb..a4b7ffb9b 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -23,6 +23,7 @@ import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from "../DocComponent"; import { DocumentDecorations } from "../DocumentDecorations"; +import { LinkPopup } from "../linking/LinkPopup"; import { MarqueeAnnotator } from "../MarqueeAnnotator"; import { AnchorMenu } from "../pdf/AnchorMenu"; import { StyleProp } from "../StyleProvider"; @@ -97,6 +98,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent { + e.preventDefault(); + e.stopPropagation(); + const eleStyle = getComputedStyle(e.target as Element); + this._controlsTransform = { X: parseInt(eleStyle.left), Y: parseInt(eleStyle.top) }; + + setupMoveUpEvents(e.target, + e, + action((e, down, delta) => { + if (this._controlsTransform) { + this._controlsTransform.X = Math.max(0, Math.min(delta[0] + this._controlsTransform.X, window.innerWidth)); + this._controlsTransform.Y = Math.max(0, Math.min(delta[1] + this._controlsTransform.Y, window.innerHeight)); + } + return false; + }), + emptyFunction, + emptyFunction) + } + + // creates and links snapshot photo of current video frame @action public Snapshot = (downX?: number, downY?: number, cb?: (filename: string, x: number | undefined, y: number | undefined) => void) => { const width = NumCast(this.layoutDoc._width); @@ -383,7 +406,7 @@ export class VideoBox extends ViewBoxAnnotatableComponentLoading :
this._fullScreen && e.stopPropagation()}> - {this._fullScreen &&
+ {this._fullScreen &&
{this.UIButtons}
}
} @@ -760,7 +797,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent { e.stopPropagation(); this.toggleMute(); }}> + onPointerDown={this.onAudioDown}>
Date: Sun, 5 Jun 2022 12:02:24 -0400 Subject: fade full screen controls --- src/client/views/nodes/VideoBox.scss | 11 ++-------- src/client/views/nodes/VideoBox.tsx | 39 ++++++++++++++++++++++++++++++------ 2 files changed, 35 insertions(+), 15 deletions(-) (limited to 'src/client/views/nodes/VideoBox.scss') 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 = React.createRef(); // outermost div private _annotationLayer: React.RefObject = React.createRef(); private _playRegionTimer: any = null; // timeout for playback + private _controlsFadeTimer: any = null; // timeout for controls fade + + public onMakeAnchor: () => Opt = () => 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 { + 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 { 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 ViewBoxAnnotatableComponentLoading
: -
+
this._fullScreen && e.stopPropagation()}> - {this._fullScreen &&
+ {this._fullScreen &&
{this.UIButtons}
} @@ -830,6 +856,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent
; } -- cgit v1.2.3-70-g09d2 From 516fbb5692bd774b0421f4bbdb10a19e5920c84c Mon Sep 17 00:00:00 2001 From: mehekj Date: Mon, 6 Jun 2022 11:17:27 -0400 Subject: fixed funky video UI scaling and movement --- src/client/views/nodes/VideoBox.scss | 2 -- src/client/views/nodes/VideoBox.tsx | 15 +++++++++++++-- 2 files changed, 13 insertions(+), 4 deletions(-) (limited to 'src/client/views/nodes/VideoBox.scss') diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index c7108d290..f279b9709 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -96,8 +96,6 @@ border-radius: 100px; z-index: 2001; min-width: 300px; - - transition: top 0.5s, width 0.5s, opacity 0.2s, visibility 0.2s; height: 50px; padding: 0 10px 0 7px; diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 5fe1ad5ed..76b1ad842 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -31,6 +31,17 @@ import "./VideoBox.scss"; const path = require('path'); +//TODO mj: one option for doing thumbnail previews of video in timeline? +/** + * 1. set vref in videobox + * 2. when vref is set immediately process video to extract ~50 thumbnails + * (^^ would make more sense to do this when video is initially uploaded) + * 3. upload each file to server using convertDataURI and save list of URLs as field on doc + * 4. in CST onHover, set hover time + * 5. use hover time to figure out index of nearest thumbnail + * 6. get URL of image and use source to paint canvas accordingly + */ + /** * VideoBox * Main component: VideoBox.tsx @@ -755,8 +766,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent -
+ return this._fullScreen || (right - left) < 250 ? null :
+
{this.UIButtons}
-- cgit v1.2.3-70-g09d2 From 469838fd9c6515c0ec1894e5964be51e8a8b988b Mon Sep 17 00:00:00 2001 From: mehekj Date: Tue, 7 Jun 2022 12:06:45 -0400 Subject: dynamically adjust video controls based on scale --- src/client/views/nodes/VideoBox.scss | 11 +++--- src/client/views/nodes/VideoBox.tsx | 72 +++++++++++++++++++++--------------- 2 files changed, 48 insertions(+), 35 deletions(-) (limited to 'src/client/views/nodes/VideoBox.scss') 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 -
+ 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 :
+
{this.UIButtons}
} @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 <>
- {this.timeline &&
+ {this.timeline && width > 160 &&
{formatTime(curTime)}
- {this._fullScreen || this.heightPercent === 100 ? + {this._fullScreen || (this.heightPercent === 100 && width > 200) ?
{formatTime(this.timeline.clipDuration)}
-
} +
+ } -
100 &&
-
- - {!this._fullScreen &&
-
} - {!this._fullScreen &&
- -
} + { + !this._fullScreen && width > 250 &&
+ +
+ } -
250 &&
+ +
+ } + + {width > 70 &&
{ e.stopPropagation(); this.toggleMute(); }}> -
- e.stopPropagation()} - onChange={(e: React.ChangeEvent) => this.setVolume(Number(e.target.value))} - /> +
} + { + width > 300 && e.stopPropagation()} + onChange={(e: React.ChangeEvent) => this.setVolume(Number(e.target.value))} + /> + } - {!this._fullScreen && this.heightPercent !== 100 && + { + !this._fullScreen && this.heightPercent !== 100 && width > 300 && <>
@@ -842,7 +855,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent { e.stopPropagation(); }} onChange={(e: React.ChangeEvent) => { this.zoom(Number(e.target.value)); }} /> - } + + } } -- cgit v1.2.3-70-g09d2 From 7ce56059b907240ed834dfc38a88233ad620ae49 Mon Sep 17 00:00:00 2001 From: mehekj Date: Tue, 21 Jun 2022 11:57:31 -0400 Subject: fade controls when scrubbing --- package-lock.json | 29 +++++++++++++---------------- src/client/views/nodes/VideoBox.scss | 1 + src/client/views/nodes/VideoBox.tsx | 16 +++++++--------- 3 files changed, 21 insertions(+), 25 deletions(-) (limited to 'src/client/views/nodes/VideoBox.scss') diff --git a/package-lock.json b/package-lock.json index 9dc7f1b04..5214ce10e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2384,9 +2384,13 @@ "integrity": "sha512-reGEWshDmTDQDsCec/HduOO9Wyj6yMOupMfhIf3ugN1TDlK2NQW4DDJSqNNtp380SNcvRfXtO8HSCQot0d0SMw==" }, "D": { - "version": "1.0.0", + "version": "1.0.1", "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", - "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==" + "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", + "requires": { + "es5-ext": "^0.10.50", + "type": "^1.0.1" + } }, "abab": { "version": "2.0.6", @@ -4838,7 +4842,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", - "dev": true, "requires": { "es5-ext": "^0.10.50", "type": "^1.0.1" @@ -5973,7 +5976,6 @@ "version": "0.10.61", "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.61.tgz", "integrity": "sha512-yFhIqQAzu2Ca2I4SE2Au3rxVfmohU9Y7wqGR+s7+H7krk26NXhIRAZDgqd6xqjCEFUomDEA3/Bo/7fKmIkW1kA==", - "dev": true, "requires": { "es6-iterator": "^2.0.3", "es6-symbol": "^3.1.3", @@ -5984,7 +5986,6 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz", "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==", - "dev": true, "requires": { "d": "1", "es5-ext": "^0.10.35", @@ -6000,7 +6001,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz", "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==", - "dev": true, "requires": { "d": "^1.0.1", "ext": "^1.1.2" @@ -6388,7 +6388,6 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/ext/-/ext-1.6.0.tgz", "integrity": "sha512-sdBImtzkq2HpkdRLtlLWDa6w4DX22ijZLKx8BMPUuKe1c5lbN6xwQDQCxSfxBQnHZ13ls/FH0MQZx/q/gr6FQg==", - "dev": true, "requires": { "type": "^2.5.0" }, @@ -6396,8 +6395,7 @@ "type": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/type/-/type-2.6.0.tgz", - "integrity": "sha512-eiDBDOmkih5pMbo9OqsqPRGMljLodLcwd5XD5JbtNB0o89xZAwynY9EdCDsJU7LtcVCClu9DvM7/0Ep1hYX3EQ==", - "dev": true + "integrity": "sha512-eiDBDOmkih5pMbo9OqsqPRGMljLodLcwd5XD5JbtNB0o89xZAwynY9EdCDsJU7LtcVCClu9DvM7/0Ep1hYX3EQ==" } } }, @@ -10869,7 +10867,7 @@ "dependencies": { "JSONStream": { "version": "1.3.5", - "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz", + "resolved": false, "integrity": "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==", "requires": { "jsonparse": "^1.2.0", @@ -12317,7 +12315,7 @@ }, "jsonparse": { "version": "1.3.1", - "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz", + "resolved": false, "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=" }, "jsprim": { @@ -13703,7 +13701,7 @@ }, "strict-uri-encode": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz", + "resolved": false, "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=" }, "string-width": { @@ -13737,7 +13735,7 @@ }, "string_decoder": { "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "resolved": false, "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", "requires": { "safe-buffer": "~5.2.0" @@ -13745,7 +13743,7 @@ "dependencies": { "safe-buffer": { "version": "5.2.0", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz", + "resolved": false, "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==" } } @@ -18921,8 +18919,7 @@ "type": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz", - "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==", - "dev": true + "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==" }, "type-check": { "version": "0.3.2", 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 { 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 this._controlsVisible = false), 3000) } else { document.removeEventListener('pointermove', this.controlsFade); @@ -509,10 +506,10 @@ export class VideoBox extends ViewBoxAnnotatableComponentLoading
: -
+
this._fullScreen && e.stopPropagation()}> {this._fullScreen &&
+ style={{ left: this._controlsTransform && this._controlsTransform.X, top: this._controlsTransform && this._controlsTransform.Y, visibility: this._controlsOpacity ? 'visible' : 'hidden', opacity: this._controlsOpacity }}> {this.UIButtons}
}