diff options
Diffstat (limited to 'src/client/views/collections')
| -rw-r--r-- | src/client/views/collections/CollectionStackedTimeline.scss | 17 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionStackedTimeline.tsx | 59 |
2 files changed, 48 insertions, 28 deletions
diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss index 19913350b..fce105a44 100644 --- a/src/client/views/collections/CollectionStackedTimeline.scss +++ b/src/client/views/collections/CollectionStackedTimeline.scss @@ -3,25 +3,13 @@ .timeline-container { height: calc(100% - 50px); overflow-x: auto; + overflow-y: hidden; border: none; background-color: $white; border: 2px solid $dark-gray; border-width: 0 2px 0 2px; } -::-webkit-scrollbar { - position: relative; - -webkit-appearance: none; - height: 5px; -} - -::-webkit-scrollbar-thumb { - position: relative; - -webkit-appearance: none; - height: 5px; - background-color: $medium-gray; -} - .collectionStackedTimeline { position: absolute; background: $off-white; @@ -33,6 +21,7 @@ height: 100%; background-color: $dark-gray; opacity: 0.3; + top: 0; } .collectionStackedTimeline-trim-controls { @@ -43,6 +32,8 @@ display: flex; justify-content: space-between; max-width: 100%; + top: 0; + left: 0; .collectionStackedTimeline-trim-handle { background-color: $medium-blue; diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index b63835b00..ced8a68e8 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -23,6 +23,8 @@ import { setupMoveUpEvents, StopEvent, returnTrue, + smoothScroll, + smoothScrollHorizontal, } from "../../../Utils"; import { Docs } from "../../documents/Documents"; import { LinkManager } from "../../util/LinkManager"; @@ -81,6 +83,7 @@ export class CollectionStackedTimeline extends CollectionSubView< static LabelPlayScript: ScriptField; private _timeline: HTMLDivElement | null = null; + private _timelineWrapper: HTMLDivElement | null = null; private _markerStart: number = 0; @observable _markerEnd: number | undefined; @observable _trimming: number = TrimScope.None; @@ -345,8 +348,23 @@ export class CollectionStackedTimeline extends CollectionSubView< } @action - setScroll = (e: React.MouseEvent) => { - this._scroll = e.currentTarget.scrollLeft; + setScroll = (e: React.UIEvent) => { + e.stopPropagation(); + this._scroll = this._timelineWrapper!.scrollLeft; + } + + @action + scrollToTime = (time: number) => { + console.log("rightmost visible time: " + this.toTimeline(this._scroll + this.props.PanelWidth(), this.timelineContentWidth)); + if (this._timelineWrapper && time > this.toTimeline(this._scroll + this.props.PanelWidth(), this.timelineContentWidth)) { + console.log("scrolled"); + this._scroll = Math.min(this._scroll + this.props.PanelWidth(), this.timelineContentWidth - this.props.PanelWidth()); + smoothScrollHorizontal(100, this._timelineWrapper, this._scroll); + } + else if (this._timelineWrapper && time < this.toTimeline(this._scroll, this.timelineContentWidth)) { + this._scroll = time / this.timelineContentWidth * this.clipDuration; + smoothScrollHorizontal(100, this._timelineWrapper, this._scroll); + } } @action @@ -357,7 +375,7 @@ export class CollectionStackedTimeline extends CollectionSubView< // determine x coordinate of drop and assign it to the documents being dragged --- see internalDocDrop of collectionFreeFormView.tsx for how it's done when dropping onto a 2D freeform view const localPt = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y); const x = localPt[0] - docDragData.offset[0]; - const timelinePt = this.toTimeline(x + this._scroll, this.timelineContentWidth()); + const timelinePt = this.toTimeline(x + this._scroll, this.timelineContentWidth); docDragData.droppedDocuments.forEach(drop => { const anchorEnd = this.anchorEnd(drop); if (anchorEnd !== undefined) { @@ -466,7 +484,7 @@ export class CollectionStackedTimeline extends CollectionSubView< m: Doc, placed: { anchorStartTime: number; anchorEndTime: number; level: number }[] ) => { - const timelineContentWidth = this.timelineContentWidth(); + const timelineContentWidth = this.timelineContentWidth; const x1 = this.anchorStart(m); const x2 = this.anchorEnd( m, @@ -497,9 +515,9 @@ export class CollectionStackedTimeline extends CollectionSubView< dictationHeightPercent = 50; dictationHeight = () => (this.props.PanelHeight() * (100 - this.dictationHeightPercent)) / 100; - timelineContentHeight = () => (this.props.PanelHeight() * this.dictationHeightPercent) / 100; - timelineContentWidth = () => (this.props.PanelWidth() * this.zoomFactor - 4); // subtract size of container border - dictationScreenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.timelineContentHeight()); + @computed get timelineContentHeight() { return this.props.PanelHeight() * this.dictationHeightPercent / 100; } + @computed get timelineContentWidth() { return this.props.PanelWidth() * this.zoomFactor - 4 }; // subtract size of container border + dictationScreenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.timelineContentHeight); isContentActive = () => this.props.isSelected() || this.props.isContentActive(); currentTimecode = () => this.currentTime; @@ -510,7 +528,7 @@ export class CollectionStackedTimeline extends CollectionSubView< style={{ position: "absolute", height: "100%", - top: this.timelineContentHeight(), + top: this.timelineContentHeight, background: Colors.LIGHT_BLUE, }} > @@ -570,7 +588,6 @@ export class CollectionStackedTimeline extends CollectionSubView< } render() { - const timelineContentWidth = this.timelineContentWidth(); const overlaps: { anchorStartTime: number; anchorEndTime: number; @@ -584,25 +601,26 @@ export class CollectionStackedTimeline extends CollectionSubView< return (<div ref={this.createDashEventsTarget} style={{ pointerEvents: SnappingManager.GetIsDragging() ? "all" : undefined }}> <div className="timeline-container" style={{ width: this.props.PanelWidth() }} - onScroll={this.setScroll}> + onScroll={this.setScroll} + ref={(wrapper: HTMLDivElement | null) => (this._timelineWrapper = wrapper)}> <div 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 }}> + style={{ width: this.timelineContentWidth }}> {drawAnchors.map((d) => { const start = this.anchorStart(d.anchor); const end = this.anchorEnd( d.anchor, - start + (10 / timelineContentWidth) * this.clipDuration + start + (10 / this.timelineContentWidth) * this.clipDuration ); if (end < this.clipStart || start > this.clipEnd) return (null); - const left = Math.max((start - this.clipStart) / this.clipDuration * timelineContentWidth, 0); + const left = Math.max((start - this.clipStart) / this.clipDuration * this.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 width = (timespan / this.clipDuration) * this.timelineContentWidth; const height = this.props.PanelHeight() / maxLevel; return this.props.Document.hideAnchors ? null : ( <div @@ -641,7 +659,18 @@ export class CollectionStackedTimeline extends CollectionSubView< ); })} {!this.IsTrimming && this.selectionContainer} - {this.renderAudioWaveform} + {/* {this.renderAudioWaveform} */} + <AudioWaveform + rawDuration={this.props.rawDuration} + duration={this.clipDuration} + mediaPath={this.props.mediaPath} + layoutDoc={this.layoutDoc} + clipStart={this.clipStart} + clipEnd={this.clipEnd} + zoomFactor={this.zoomFactor} + PanelHeight={this.timelineContentHeight} + PanelWidth={this.timelineContentWidth} + /> {this.renderDictation} <div |