aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/MainView.tsx2
-rw-r--r--src/client/views/nodes/VideoBox.scss72
-rw-r--r--src/client/views/nodes/VideoBox.tsx26
3 files changed, 54 insertions, 46 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index c794c73db..15ccd7b31 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -184,7 +184,7 @@ export class MainView extends React.Component {
fa.faArrowAltCircleDown, fa.faArrowAltCircleUp, fa.faArrowAltCircleLeft, fa.faArrowAltCircleRight, fa.faStopCircle, fa.faCheckCircle, fa.faGripVertical,
fa.faSortUp, fa.faSortDown, fa.faTable, fa.faTh, fa.faThList, fa.faProjectDiagram, fa.faSignature, fa.faColumns, fa.faChevronCircleUp, fa.faUpload, fa.faBorderAll,
fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines,
- fa.faSave, fa.faBookmark, fa.faList, fa.faListOl, fa.faFolderPlus, fa.faLightbulb, fa.faBookOpen, fa.faMapMarkerAlt, fa.faSearchPlus, fa.faVolumeUp, fa.faVolumeDown]);
+ fa.faSave, fa.faBookmark, fa.faList, fa.faListOl, fa.faFolderPlus, fa.faLightbulb, fa.faBookOpen, fa.faMapMarkerAlt, fa.faSearchPlus, fa.faVolumeUp, fa.faVolumeMute]);
this.initAuthenticationRouters();
}
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
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index e57cb1abe..80ad63e72 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -383,7 +383,10 @@ 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.uIButtons}
+ {/* {this._fullScreen && this.componentUI(0, 0)} */}
+ {this._fullScreen && <div className="videoBox-ui">
+ {this.UIButtons}
+ </div>}
<video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef} style={this._fullScreen ? this.fullScreenSize() : {}}
onCanPlay={this.videoLoad}
controls={VideoBox._nativeControls}
@@ -692,9 +695,24 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
// renders video controls
- @computed get uIButtons() {
+ componentUI = (boundsLeft: number, boundsTop: number) => {
+ const bounds = this.props.docViewPath().lastElement().getBounds();
+ const left = bounds?.left || 0;
+ 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 - 20, 300);
+ 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 + 10, top: yPos, width: width }}>
+ {this.UIButtons}
+ </div>
+ </div>
+ }
+
+ @computed get UIButtons() {
const curTime = NumCast(this.layoutDoc._currentTimecode) - (this.timeline?.clipStart || 0);
- return <div className="videoBox-ui" style={this._fullScreen || this.heightPercent === 100 ? { fontSize: "40px", minWidth: "80%" } : {}}>
+ return <>
<div className="videobox-button"
title={this._playing ? "play" : "pause"}
onPointerDown={this.onPlayDown}>
@@ -762,7 +780,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { this.zoom(Number(e.target.value)); }}
/>
</>}
- </div>;
+ </>
}
// renders CollectionStackedTimeline
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 21:32:40 +0000