aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/CollectionStackedTimeline.scss9
-rw-r--r--src/client/views/collections/CollectionStackedTimeline.tsx194
-rw-r--r--src/client/views/nodes/AudioBox.scss5
3 files changed, 110 insertions, 98 deletions
diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index 34679e9e3..843c5dcb5 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -1,11 +1,16 @@
@import "../global/globalCssVariables.scss";
+.timeline-container {
+ height: calc(100% - 50px);
+ overflow-x: scroll;
+ border: none;
+}
+
.collectionStackedTimeline {
position: absolute;
- width: 100%;
- height: 100%;
background: $off-white;
z-index: 1000;
+ height: 100%;
::-webkit-scrollbar {
position: relative;
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index c79d21418..82a6b2a66 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -575,108 +575,110 @@ export class CollectionStackedTimeline extends CollectionSubView<
}));
const maxLevel = overlaps.reduce((m, o) => Math.max(m, o.level), 0) + 2;
return (<div ref={this.createDashEventsTarget} style={{ pointerEvents: SnappingManager.GetIsDragging() ? "all" : undefined }}>
- <div
- className="collectionStackedTimeline"
- ref={(timeline: HTMLDivElement | null) => (this._timeline = timeline)}
- onClick={(e) => this.isContentActive() && StopEvent(e)}
- onPointerDown={(e) => this.isContentActive() && this.onPointerDownTimeline(e)}
- style={{ height: this.props.PanelHeight(), width: this.props.PanelWidth() }}
- >
-
- {drawAnchors.map((d) => {
- const start = this.anchorStart(d.anchor);
- const end = this.anchorEnd(
- d.anchor,
- start + (10 / timelineContentWidth) * this.clipDuration
- );
- if (end < this.clipStart || start > this.clipEnd) return (null);
- const left = Math.max((start - this.clipStart) / this.clipDuration * timelineContentWidth, 0);
- const top = (d.level / maxLevel) * this.props.PanelHeight();
- const timespan = Math.max(0, end - this.clipStart) - Math.max(0, start - this.clipStart);
- const width = (timespan / this.clipDuration) * timelineContentWidth;
- const height = this.props.PanelHeight() / maxLevel;
- return this.props.Document.hideAnchors ? null : (
- <div
- className={"collectionStackedTimeline-marker-timeline"}
- key={d.anchor[Id]}
- style={{
- left,
- top,
- width: `${width}px`,
- height: `${height}px`,
- }}
- onClick={(e) => {
- this.props.playFrom(start, this.anchorEnd(d.anchor));
- e.stopPropagation();
- }}
- >
- <StackedTimelineAnchor
- {...this.props}
- mark={d.anchor}
- rangeClickScript={this.rangeClickScript}
- rangePlayScript={this.rangePlayScript}
- left={left}
- top={top}
- width={width}
- height={height}
- toTimeline={this.toTimeline}
- layoutDoc={this.layoutDoc}
- isDocumentActive={this.props.childDocumentsActive ? this.props.isDocumentActive : this.isContentActive}
- currentTimecode={this.currentTimecode}
- _timeline={this._timeline}
- stackedTimeline={this}
- trimStart={this.trimStart}
- trimEnd={this.trimEnd}
- />
- </div>
- );
- })}
- {!this.IsTrimming && this.selectionContainer}
- {this.renderAudioWaveform}
- {this.renderDictation}
-
+ <div className="timeline-container"
+ style={{ width: this.props.PanelWidth() }}>
<div
- className="collectionStackedTimeline-current"
- style={{
- left: `${((this.currentTime - this.clipStart) / this.clipDuration) * 100}%`,
- }}
- />
-
- {this.IsTrimming !== TrimScope.None && (
- <>
- <div
- className="collectionStackedTimeline-trim-shade"
- style={{ width: `${((this.trimStart - this.clipStart) / this.clipDuration) * 100}%` }}
- ></div>
-
- <div
- className="collectionStackedTimeline-trim-controls"
- style={{
- left: `${((this.trimStart - this.clipStart) / this.clipDuration) * 100}%`,
- width: `${((this.trimEnd - this.trimStart) / this.clipDuration) * 100}%`,
- }}
- >
+ className="collectionStackedTimeline"
+ ref={(timeline: HTMLDivElement | null) => (this._timeline = timeline)}
+ onClick={(e) => this.isContentActive() && StopEvent(e)}
+ onPointerDown={(e) => this.isContentActive() && this.onPointerDownTimeline(e)}
+ style={{ width: timelineContentWidth }}>
+
+ {drawAnchors.map((d) => {
+ const start = this.anchorStart(d.anchor);
+ const end = this.anchorEnd(
+ d.anchor,
+ start + (10 / timelineContentWidth) * this.clipDuration
+ );
+ if (end < this.clipStart || start > this.clipEnd) return (null);
+ const left = Math.max((start - this.clipStart) / this.clipDuration * timelineContentWidth, 0);
+ const top = (d.level / maxLevel) * this.props.PanelHeight();
+ const timespan = Math.max(0, end - this.clipStart) - Math.max(0, start - this.clipStart);
+ const width = (timespan / this.clipDuration) * timelineContentWidth;
+ const height = this.props.PanelHeight() / maxLevel;
+ return this.props.Document.hideAnchors ? null : (
<div
- className="collectionStackedTimeline-trim-handle"
- onPointerDown={this.trimLeft}
- ></div>
+ className={"collectionStackedTimeline-marker-timeline"}
+ key={d.anchor[Id]}
+ style={{
+ left,
+ top,
+ width: `${width}px`,
+ height: `${height}px`,
+ }}
+ onClick={(e) => {
+ this.props.playFrom(start, this.anchorEnd(d.anchor));
+ e.stopPropagation();
+ }}
+ >
+ <StackedTimelineAnchor
+ {...this.props}
+ mark={d.anchor}
+ rangeClickScript={this.rangeClickScript}
+ rangePlayScript={this.rangePlayScript}
+ left={left}
+ top={top}
+ width={width}
+ height={height}
+ toTimeline={this.toTimeline}
+ layoutDoc={this.layoutDoc}
+ isDocumentActive={this.props.childDocumentsActive ? this.props.isDocumentActive : this.isContentActive}
+ currentTimecode={this.currentTimecode}
+ _timeline={this._timeline}
+ stackedTimeline={this}
+ trimStart={this.trimStart}
+ trimEnd={this.trimEnd}
+ />
+ </div>
+ );
+ })}
+ {!this.IsTrimming && this.selectionContainer}
+ {this.renderAudioWaveform}
+ {this.renderDictation}
+
+ <div
+ className="collectionStackedTimeline-current"
+ style={{
+ left: `${((this.currentTime - this.clipStart) / this.clipDuration) * 100}%`,
+ }}
+ />
+
+ {this.IsTrimming !== TrimScope.None && (
+ <>
<div
- className="collectionStackedTimeline-trim-handle"
- onPointerDown={this.trimRight}
+ className="collectionStackedTimeline-trim-shade"
+ style={{ width: `${((this.trimStart - this.clipStart) / this.clipDuration) * 100}%` }}
></div>
- </div>
- <div
- className="collectionStackedTimeline-trim-shade"
- style={{
- left: `${((this.trimEnd - this.clipStart) / this.clipDuration) * 100}%`,
- width: `${((this.clipEnd - this.trimEnd) / this.clipDuration) * 100}%`,
- }}
- ></div>
- </>
- )}
+ <div
+ className="collectionStackedTimeline-trim-controls"
+ style={{
+ left: `${((this.trimStart - this.clipStart) / this.clipDuration) * 100}%`,
+ width: `${((this.trimEnd - this.trimStart) / this.clipDuration) * 100}%`,
+ }}
+ >
+ <div
+ className="collectionStackedTimeline-trim-handle"
+ onPointerDown={this.trimLeft}
+ ></div>
+ <div
+ className="collectionStackedTimeline-trim-handle"
+ onPointerDown={this.trimRight}
+ ></div>
+ </div>
+
+ <div
+ className="collectionStackedTimeline-trim-shade"
+ style={{
+ left: `${((this.trimEnd - this.clipStart) / this.clipDuration) * 100}%`,
+ width: `${((this.clipEnd - this.trimEnd) / this.clipDuration) * 100}%`,
+ }}
+ ></div>
+ </>
+ )}
+ </div>
</div>
- </div>);
+ </div >);
}
}
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 391507796..d466c6c3b 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -177,6 +177,11 @@
width: 100%;
background: $white;
}
+
+ .audiobox-timeline > div {
+ width: 100%;
+ height: 100%;
+ }
}
.audiobox-timecodes {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 18:17:10 +0000