diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/AudioWaveform.tsx | 20 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionStackedTimeline.tsx | 10 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 7 |
3 files changed, 26 insertions, 11 deletions
diff --git a/src/client/views/AudioWaveform.tsx b/src/client/views/AudioWaveform.tsx index 58384792e..4d9c039c4 100644 --- a/src/client/views/AudioWaveform.tsx +++ b/src/client/views/AudioWaveform.tsx @@ -20,6 +20,7 @@ export interface AudioWaveformProps { clipEnd: number; zoomFactor: number; PanelHeight: () => number; + PanelWidth: () => number; } @observer @@ -88,15 +89,28 @@ export class AudioWaveform extends React.Component<AudioWaveformProps> { return ( <div className="audioWaveform"> <Waveform - color={Colors.MEDIUM_BLUE} + color={Colors.MEDIUM_BLUE_ALT} height={this.waveHeight} - barWidth={200.0 / this.audioBuckets.length} + barWidth={2} pos={this.props.duration} duration={this.props.duration} peaks={this.audioBuckets} - progressColor={Colors.MEDIUM_BLUE} + progressColor={Colors.MEDIUM_BLUE_ALT} /> </div> ); } } + + +// export interface WaveformProps { +// barWidth: number; +// width: () => number; +// height: () => number; +// peaks: number[]; +// color: string; +// } + +// export class Waveform extends React.Component<WaveformProps> { + +// }
\ No newline at end of file diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index 37fd42bc1..b63835b00 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -357,7 +357,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.props.PanelWidth()); + const timelinePt = this.toTimeline(x + this._scroll, this.timelineContentWidth()); docDragData.droppedDocuments.forEach(drop => { const anchorEnd = this.anchorEnd(drop); if (anchorEnd !== undefined) { @@ -466,7 +466,7 @@ export class CollectionStackedTimeline extends CollectionSubView< m: Doc, placed: { anchorStartTime: number; anchorEndTime: number; level: number }[] ) => { - const timelineContentWidth = this.props.PanelWidth(); + const timelineContentWidth = this.timelineContentWidth(); const x1 = this.anchorStart(m); const x2 = this.anchorEnd( m, @@ -498,6 +498,7 @@ 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()); isContentActive = () => this.props.isSelected() || this.props.isContentActive(); currentTimecode = () => this.currentTime; @@ -548,8 +549,9 @@ export class CollectionStackedTimeline extends CollectionSubView< layoutDoc={this.layoutDoc} clipStart={this.clipStart} clipEnd={this.clipEnd} - PanelHeight={this.timelineContentHeight} zoomFactor={this.zoomFactor} + PanelHeight={this.timelineContentHeight} + PanelWidth={this.timelineContentWidth} /> </div> ); @@ -568,7 +570,7 @@ export class CollectionStackedTimeline extends CollectionSubView< } render() { - const timelineContentWidth = this.props.PanelWidth() * this.zoomFactor - 4; // subtract size of container border + const timelineContentWidth = this.timelineContentWidth(); const overlaps: { anchorStartTime: number; anchorEndTime: number; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 3a3eb78e1..a896c7d90 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -158,8 +158,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp this.mediaState = media_state.Playing; this._play = setTimeout( () => { - this.Pause(); - if (fullPlay) this.setPlayheadTime(this.timeline!.trimStart); + this.setPlayheadTime(this.timeline!.trimStart); }, (end - start) * 1000); } else { @@ -254,7 +253,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp Play = (e?: any) => { const eleTime = this._ele?.currentTime || 0; const start = eleTime === this.timeline?.trimEnd ? this.timeline.trimStart : eleTime; - this.playFrom(start, undefined, true); + this.playFrom(start, undefined); e?.stopPropagation?.(); } @@ -263,7 +262,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp Pause = () => { this._ele?.pause(); this.mediaState = media_state.Paused; - // clearTimeout(this._play); // stops clip from jumping back to beginning + clearTimeout(this._play); // stops clip from jumping back to beginning } // creates a text document for dictation |