diff options
| -rw-r--r-- | src/client/views/nodes/VideoBox.scss | 7 | ||||
| -rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 41 |
2 files changed, 44 insertions, 4 deletions
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<ViewBoxAnnotatableProp @observable _finished: boolean = false; // has playback reached end of clip @observable _volume: number = 1; @observable _muted: boolean = false; + @observable _controlsTransform?: { X: number, Y: number }; + // @observable _showLinkPopup = false; @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 @@ -220,6 +223,26 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp } + @action controlsDrag = (e: React.PointerEvent) => { + 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 ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp return !field ? <div key="loading">Loading</div> : <div className="videoBox-contentContainer" key="container" style={{ mixBlendMode: "multiply" }}> <div className={classname} ref={this.setContentRef} onPointerDown={(e) => this._fullScreen && e.stopPropagation()}> - {this._fullScreen && <div className="videoBox-ui"> + {this._fullScreen && <div className="videoBox-ui" onPointerDown={this.controlsDrag} style={this._controlsTransform ? { left: this._controlsTransform.X, top: this._controlsTransform.Y } : {}}> {this.UIButtons} </div>} <video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef} style={this._fullScreen ? this.fullScreenSize() : {}} @@ -609,6 +632,19 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp } } + @action + onAudioDown = (e: React.PointerEvent) => { + e.stopPropagation(); + setupMoveUpEvents(this, e, returnFalse, returnFalse, action((e: PointerEvent, doubleTap?: boolean) => { + if (doubleTap && !this._fullScreen) { + // console.log("hello"); + // this._showLinkPopup = !this._showLinkPopup; + } else { + this.toggleMute(); + } + })); + } + // toggles video mute @action toggleMute = () => { @@ -706,6 +742,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp return this._fullScreen ? 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 }}> {this.UIButtons} + {/* <LinkPopup key="popup" showPopup={this._showLinkPopup} linkFrom={emptyFunction} />, */} </div> </div> } @@ -760,7 +797,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp <div className="videobox-button show-slider" title={this._muted ? "unmute" : "mute"} - onPointerDown={(e) => { e.stopPropagation(); this.toggleMute(); }}> + onPointerDown={this.onAudioDown}> <FontAwesomeIcon icon={this._muted ? "volume-mute" : "volume-up"} /> </div> <input type="range" step="0.1" min="0" max="1" value={this._muted ? 0 : this._volume} |