diff options
| -rw-r--r-- | src/client/views/collections/CollectionStackedTimeline.tsx | 65 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 37 |
2 files changed, 53 insertions, 49 deletions
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index d689d7970..5352b5220 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -52,7 +52,7 @@ type PanZoomDocument = makeInterface<[]>; const PanZoomDocument = makeInterface(); export type CollectionStackedTimelineProps = { Play: () => void; - Pause: () => void; + Pause: (timeoutClear: boolean) => void; playLink: (linkDoc: Doc) => void; playFrom: (seekTimeInSeconds: number, endTime?: number) => void; playing: () => boolean; @@ -127,11 +127,6 @@ export class CollectionStackedTimeline extends CollectionSubView< } componentDidMount() { - // bcz: setting these shouldn't be necessary since they are the default values of this.clipStart and this.clipEnd. - // also, setting anything on the Document in DidMount or the constructor is not good form since it means that - // someone who has viewing but not edit permissions would not be able to do the assignment. - // this.layoutDoc.clipStart = 0; - // this.layoutDoc.clipEnd = this.props.rawDuration; document.addEventListener("keydown", this.keyEvents, true); } @@ -232,7 +227,7 @@ export class CollectionStackedTimeline extends CollectionSubView< const shiftKey = e.shiftKey; if (rect && this.props.isContentActive()) { const wasPlaying = this.props.playing(); - if (wasPlaying) this.props.Pause(); + if (wasPlaying) this.props.Pause(true); var wasSelecting = this._markerEnd !== undefined; setupMoveUpEvents( this, @@ -358,15 +353,15 @@ export class CollectionStackedTimeline extends CollectionSubView< @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); + if (this._timelineWrapper) { + if (time > this.toTimeline(this._scroll + this.props.PanelWidth(), this.timelineContentWidth)) { + this._scroll = Math.min(this._scroll + this.props.PanelWidth(), this.timelineContentWidth - this.props.PanelWidth()); + smoothScrollHorizontal(200, this._timelineWrapper, this._scroll); + } + else if (time < this.toTimeline(this._scroll, this.timelineContentWidth)) { + this._scroll = time / this.timelineContentWidth * this.clipDuration; + smoothScrollHorizontal(200, this._timelineWrapper, this._scroll); + } } } @@ -434,20 +429,24 @@ export class CollectionStackedTimeline extends CollectionSubView< const seekTimeInSeconds = this.anchorStart(anchorDoc) - 0.25; const endTime = this.anchorEnd(anchorDoc); if (this.layoutDoc.autoPlayAnchors) { - if (this.props.playing()) this.props.Pause(); - else this.props.playFrom(seekTimeInSeconds, endTime); + if (this.props.playing()) this.props.Pause(true); + else { + this.props.playFrom(seekTimeInSeconds, endTime); + this.scrollToTime(seekTimeInSeconds); + } } else { if ( seekTimeInSeconds < NumCast(this.layoutDoc._currentTimecode) && endTime > NumCast(this.layoutDoc._currentTimecode) ) { if (!this.layoutDoc.autoPlayAnchors && this.props.playing()) { - this.props.Pause(); + this.props.Pause(true); } else { this.props.Play(); } } else { this.props.playFrom(seekTimeInSeconds, endTime); + this.scrollToTime(seekTimeInSeconds); } } return { select: true }; @@ -464,7 +463,7 @@ export class CollectionStackedTimeline extends CollectionSubView< seekTimeInSeconds < NumCast(this.layoutDoc._currentTimecode) + 1e-4 && endTime > NumCast(this.layoutDoc._currentTimecode) - 1e-4 ) { - if (this.props.playing()) this.props.Pause(); + if (this.props.playing()) this.props.Pause(true); else if (this.layoutDoc.autoPlayAnchors) this.props.Play(); else if (!this.layoutDoc.autoPlayAnchors) { const rect = this._timeline?.getBoundingClientRect(); @@ -919,19 +918,19 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps> {inner.view} {!inner.anchor.view || !SelectionManager.IsSelected(inner.anchor.view) ? null : ( - <> - <div - key="left" - className="collectionStackedTimeline-left-resizer" - onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, true)} - /> - <div - key="right" - className="collectionStackedTimeline-resizer" - onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, false)} - /> - </> - )} + <> + <div + key="left" + className="collectionStackedTimeline-left-resizer" + onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, true)} + /> + <div + key="right" + className="collectionStackedTimeline-resizer" + onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, false)} + /> + </> + )} </> ); } diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 62958a80b..6850c2f6c 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -64,9 +64,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp @observable _volume: number = 1; @observable _muted: boolean = false; @observable _paused: boolean = false; - @observable rawDuration: number = 0; // computed from the length of the audio element when loaded + // @observable rawDuration: number = 0; // computed from the length of the audio element when loaded @computed get recordingStart() { return DateCast(this.dataDoc[this.fieldKey + "-recordingStart"])?.date.getTime(); } - // @computed get rawDuration() { return NumCast(this.dataDoc[`${this.fieldKey}-duration`]); } // bcz: shouldn't be needed since it's computed from audio element + @computed get rawDuration() { return NumCast(this.dataDoc[`${this.fieldKey}-duration`]); } // bcz: shouldn't be needed since it's computed from audio element + // mehek: not 100% sure but i think due to the order in which things are loaded this is necessary ^^ + // if you get rid of it and set the value to 0 the timeline and waveform will set their bounds incorrectly + @computed get links() { return DocListCast(this.dataDoc.links); } @computed get pauseTime() { return this._pauseEnd - this._pauseStart; } // total time paused to update the correct time @computed get mediaState() { return this.layoutDoc.mediaState as media_state; } @@ -140,7 +143,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp } }); this.layoutDoc._currentTimecode = this._ele.currentTime; - console.log("current time: " + this.layoutDoc._currentTimecode); this.timeline?.scrollToTime(NumCast(this.layoutDoc._currentTimecode)); } } @@ -161,7 +163,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp this.mediaState = media_state.Playing; this._play = setTimeout( () => { - this.setPlayheadTime(this.timeline!.trimStart); + this.Pause(); + if (fullPlay) this.setPlayheadTime(this.timeline!.trimStart); }, (end - start) * 1000); } else { @@ -254,18 +257,20 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // for play button Play = (e?: any) => { - const eleTime = this._ele?.currentTime || 0; - const start = eleTime === this.timeline?.trimEnd ? this.timeline.trimStart : eleTime; - this.playFrom(start, undefined); - e?.stopPropagation?.(); + if (this.timeline && this._ele) { + const eleTime = this._ele.currentTime; + const start = eleTime >= this.timeline.trimEnd || eleTime <= this.timeline.trimStart ? this.timeline.trimStart : eleTime; + this.playFrom(start, this.timeline.trimEnd, true); + e?.stopPropagation?.(); + } } // pause play back @action - Pause = () => { + Pause = (timeoutClear: boolean = false) => { this._ele?.pause(); this.mediaState = media_state.Paused; - clearTimeout(this._play); // stops clip from jumping back to beginning + if (timeoutClear) clearTimeout(this._play); // prevents jump back to beginning when manually paused } // creates a text document for dictation @@ -293,7 +298,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // ref for updating time setRef = (e: HTMLAudioElement | null) => { e?.addEventListener("timeupdate", this.timecodeChanged); - e?.addEventListener("ended", this.Pause); + e?.addEventListener("ended", () => this.Pause()); this._ele = e; } @@ -354,13 +359,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp @undoBatch finishTrim = () => { // hides trim controls and displays new clip - this.Pause(); + this.Pause(true); this.setPlayheadTime(Math.max(Math.min(this.timeline?.trimEnd || 0, this._ele!.currentTime), this.timeline?.trimStart || 0)); this.timeline?.StopTrimming(); } startTrim = (scope: TrimScope) => { - this.Pause(); + this.Pause(true); this.timeline?.StartTrimming(scope); } @@ -370,7 +375,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp if (doubleTap) { this.startTrim(TrimScope.All); } else if (this.timeline) { - this.Pause(); + this.Pause(true); this.timeline.IsTrimming !== TrimScope.None ? this.finishTrim() : this.startTrim(TrimScope.Clip); } })); @@ -446,7 +451,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp <div className="controls-left"> <div className="audiobox-button" title={this.mediaState === media_state.Paused ? "play" : "pause"} - onPointerDown={this.mediaState === media_state.Paused ? this.Play : this.Pause}> + onPointerDown={this.mediaState === media_state.Paused ? this.Play : (e) => { e.stopPropagation(); this.Pause(true); }}> <FontAwesomeIcon icon={this.mediaState === media_state.Paused ? "play" : "pause"} size={"1x"} /> </div> @@ -538,7 +543,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp className={`audiobox-control${this.props.isContentActive() ? "-interactive" : ""}`} onLoadedData={action(e => (this._ele?.duration && this._ele?.duration !== Infinity) && - (this.dataDoc[this.fieldKey + "-duration"] = this.rawDuration = this._ele.duration) + (this.dataDoc[this.fieldKey + "-duration"] = this._ele.duration) )} > <source src={this.path} type="audio/mpeg" /> |