aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/collections/CollectionStackedTimeline.tsx10
-rw-r--r--src/client/views/nodes/VideoBox.scss49
-rw-r--r--src/client/views/nodes/VideoBox.tsx15
3 files changed, 49 insertions, 25 deletions
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index c5fa126a3..9a8b2940f 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -47,6 +47,7 @@ import { Colors } from "../global/globalEnums";
import { DocumentManager } from "../../util/DocumentManager";
import { SnappingManager } from "../../util/SnappingManager";
import { DragManager } from "../../util/DragManager";
+import { faBreadSlice } from "@fortawesome/free-solid-svg-icons";
type PanZoomDocument = makeInterface<[]>;
const PanZoomDocument = makeInterface();
@@ -176,6 +177,8 @@ export class CollectionStackedTimeline extends CollectionSubView<
!(e.target instanceof HTMLInputElement) &&
this.props.isSelected(true)
) {
+ const jump = e.shiftKey ? 1 : 0.1;
+ e.stopPropagation();
switch (e.key) {
case " ":
if (!CollectionStackedTimeline.SelectingRegion) {
@@ -200,6 +203,13 @@ export class CollectionStackedTimeline extends CollectionSubView<
this._trimStart = this.clipStart;
this._trimStart = this.clipEnd;
this._trimming = TrimScope.None;
+ break;
+ case "ArrowLeft":
+ this.props.setTime(Math.min(Math.max(this.clipStart, this.currentTime - jump), this.clipEnd));
+ break;
+ case "ArrowRight":
+ this.props.setTime(Math.min(Math.max(this.clipStart, this.currentTime + jump), this.clipEnd));
+ break;
}
}
}
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index 4871599b8..a75248fa0 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -1,4 +1,6 @@
-.mini-viewer{
+@import "../global/globalCssVariables.scss";
+
+.mini-viewer {
cursor: grab;
position: absolute;
right: 10;
@@ -14,22 +16,21 @@
height: 100%;
position: relative;
.videoBox-viewer {
- display:flex;
+ display: flex;
flex-direction: column;
height: 100%;
border-radius: inherit;
- opacity: 0.99; // hack! overcomes some kind of Chrome weirdness where buttons (e.g., snapshot) disappear at some point as the video is resized larger
+ opacity: 0.99; // hack! overcomes some kind of Chrome weirdness where buttons (e.g., snapshot) disappear at some point as the video is resized larger
+ background: $dark-gray;
}
.inkingCanvas-paths-markers {
- opacity : 0.4; // we shouldn't have to do this, but since chrome crawls to a halt with z-index unset in videoBox-content, this is a workaround
- }
- .collectionStackedTimeline {
- background: beige;
+ opacity: 0.4; // we shouldn't have to do this, but since chrome crawls to a halt with z-index unset in videoBox-content, this is a workaround
}
+
.videoBox-stackPanel {
z-index: -1;
width: 100%;
- position: relative;
+ position: relative;
}
.videoBox-annotationLayer {
@@ -43,18 +44,24 @@
}
}
-.videoBox-content-YouTube, .videoBox-content-YouTube-fullScreen,
-.videoBox-content, .videoBox-content-interactive, .videoBox-cont-fullScreen {
+.videoBox-content-YouTube,
+.videoBox-content-YouTube-fullScreen,
+.videoBox-content,
+.videoBox-content-interactive,
+.videoBox-cont-fullScreen {
width: 100%;
z-index: -1; // 0; // logically this should be 0 (or unset) which would give us transparent brush strokes over videos. However, this makes Chrome crawl to a halt
position: absolute;
}
-.videoBox-content, .videoBox-content-interactive, .videoBox-content-fullScreen {
- height: Auto;
+.videoBox-content,
+.videoBox-content-interactive,
+.videoBox-content-fullScreen {
+ height: Auto;
}
-.videoBox-content-YouTube, .videoBox-content-YouTube-fullScreen {
+.videoBox-content-YouTube,
+.videoBox-content-YouTube-fullScreen {
height: 100%;
}
@@ -68,17 +75,21 @@
right: 5px;
top: 5px;
display: none;
- background-color: rgba(0, 0, 0, 0.6);
+ background-color: rgba($dark-gray, 0.6);
}
-.videoBox-time, .videoBox-snapshot, .videoBox-timelineButton, .videoBox-play, .videoBox-full {
- color : white;
+.videoBox-time,
+.videoBox-snapshot,
+.videoBox-timelineButton,
+.videoBox-play,
+.videoBox-full {
+ color: white;
position: relative;
transform-origin: left top;
- pointer-events:all;
+ pointer-events: all;
padding-right: 5px;
cursor: pointer;
&:hover {
- background-color: gray;
+ background-color: $medium-gray;
}
}
@@ -86,4 +97,4 @@
.videoBox-ui {
display: flex;
}
-} \ No newline at end of file
+}
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index fbefa02bc..d08006722 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -55,7 +55,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
}
}
static _youtubeIframeCounter: number = 0;
- static heightPercent = 60; // height of timeline in percent of height of videoBox.
+ static heightPercent = 80; // height of timeline in percent of height of videoBox.
private _disposers: { [name: string]: IReactionDisposer } = {};
private _youtubePlayer: YT.Player | undefined = undefined;
private _videoRef: HTMLVideoElement | null = null;
@@ -366,8 +366,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
action(encodeURIComponent => {
this._clicking = false;
if (this.props.isContentActive()) {
- const local = this.props.ScreenToLocalTransform().scale(this.props.scaling?.() || 1).transformPoint(e.clientX, e.clientY);
- this.layoutDoc._timelineHeightPercent = Math.max(0, Math.min(100, local[1] / this.props.PanelHeight() * 100));
+ // const local = this.props.ScreenToLocalTransform().scale(this.props.scaling?.() || 1).transformPoint(e.clientX, e.clientY);
+ // this.layoutDoc._timelineHeightPercent = Math.max(0, Math.min(100, local[1] / this.props.PanelHeight() * 100));
+
+ this.layoutDoc._timelineHeightPercent = 80;
}
return false;
}), emptyFunction,
@@ -378,14 +380,15 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
}
onResetDown = (e: React.PointerEvent) => {
+ const start = this.timeline?.clipStart || 0;
setupMoveUpEvents(this, e,
e => {
- this.Seek(Math.max(0, (this.layoutDoc._currentTimecode || 0) + Math.sign(e.movementX) * 0.0333));
+ this.Seek(Math.max(start, (this.layoutDoc._currentTimecode || 0) + Math.sign(e.movementX) * 0.0333));
e.stopImmediatePropagation();
return false;
},
emptyFunction,
- e => this.layoutDoc._currentTimecode = 0);
+ e => this.layoutDoc._currentTimecode = start);
}
@action.bound
@@ -528,7 +531,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
src={`https://www.youtube.com/embed/${this.youtubeVideoId}?enablejsapi=1&rel=0&showinfo=1&autoplay=0&mute=1&start=${start}&modestbranding=1&controls=${VideoBox._nativeControls ? 1 : 0}`} />;
}
@computed get uIButtons() {
- const curTime = (this.layoutDoc._currentTimecode || 0);
+ const curTime = (this.layoutDoc._currentTimecode || 0) - (this.timeline?.clipStart || 0);
const nonNativeControls = [
<Tooltip title={<div className="dash-tooltip">{"playback"}</div>} key="play" placement="bottom">
<div className="videoBox-play" onPointerDown={this.onPlayDown} >
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 13:19:52 +0000