From 3d76222b8cd41423bcdd7a91e4aee2826f329d9f Mon Sep 17 00:00:00 2001 From: mehekj Date: Sat, 23 Oct 2021 21:36:30 -0400 Subject: audiobox UI update --- src/client/views/AudioWaveform.tsx | 3 - .../collections/CollectionStackedTimeline.scss | 3 +- .../collections/CollectionStackedTimeline.tsx | 10 +- src/client/views/nodes/AudioBox.scss | 349 ++++++--------------- src/client/views/nodes/AudioBox.tsx | 120 ++++--- src/client/views/nodes/ComparisonBox.tsx | 4 +- 6 files changed, 163 insertions(+), 326 deletions(-) (limited to 'src') diff --git a/src/client/views/AudioWaveform.tsx b/src/client/views/AudioWaveform.tsx index 7b9b1aa81..ca1dd6f36 100644 --- a/src/client/views/AudioWaveform.tsx +++ b/src/client/views/AudioWaveform.tsx @@ -38,7 +38,6 @@ export class AudioWaveform extends React.Component { this._disposer?.(); } componentDidMount() { - console.log("new waveform"); this._disposer = reaction(() => ({ clipStart: this.clipStart, clipEnd: this.clipEnd, fieldKey: this.audioBucketField(this.clipStart, this.clipEnd, this.zoomFactor), zoomFactor: this.props.zoomFactor }), ({ clipStart, clipEnd, fieldKey, zoomFactor }) => { if (!this.props.layoutDoc[fieldKey]) { @@ -65,8 +64,6 @@ export class AudioWaveform extends React.Component { const decodedAudioData = rawDecodedAudioData.slice(Math.floor(startInd * rawDecodedAudioData.length), Math.floor(endInd * rawDecodedAudioData.length)); const numBuckets = Math.floor(AudioWaveform.NUMBER_OF_BUCKETS * zoomFactor); - console.log(numBuckets); - const bucketDataSize = Math.floor( decodedAudioData.length / numBuckets ); diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss index 0ec5f9aef..34679e9e3 100644 --- a/src/client/views/collections/CollectionStackedTimeline.scss +++ b/src/client/views/collections/CollectionStackedTimeline.scss @@ -4,9 +4,8 @@ position: absolute; width: 100%; height: 100%; + background: $off-white; z-index: 1000; - top: 0px; - // overflow-x: scroll; ::-webkit-scrollbar { position: relative; diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index 5c02611bb..c79d21418 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -153,7 +153,6 @@ export class CollectionStackedTimeline extends CollectionSubView< @action public setZoom(zoom: number) { this._zoomFactor = zoom; - // console.log(this._timeline?.scrollWidth); } anchorStart = (anchor: Doc) => NumCast(anchor._timecodeToShow, NumCast(anchor[this.props.startTag])); @@ -534,8 +533,9 @@ export class CollectionStackedTimeline extends CollectionSubView< ); } @computed get renderAudioWaveform() { + console.log(this.props.mediaPath) return !this.props.mediaPath ? null : ( -
+
(this._timeline = timeline)} onClick={(e) => this.isContentActive() && StopEvent(e)} onPointerDown={(e) => this.isContentActive() && this.onPointerDownTimeline(e)} - onPointerEnter={(e) => { console.log("scroll"); e.preventDefault(); e.stopPropagation(); }} + style={{ height: this.props.PanelHeight(), width: this.props.PanelWidth() }} > {drawAnchors.map((d) => { @@ -591,10 +591,10 @@ export class CollectionStackedTimeline extends CollectionSubView< ); 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.timelineContentHeight(); + 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.timelineContentHeight() / maxLevel; + const height = this.props.PanelHeight() / maxLevel; return this.props.Document.hideAnchors ? null : (
this.props.whenChildContentsActiveChanged(this._isAnyChildContentActive = isActive) timelineScreenToLocal = () => - this.props - .ScreenToLocalTransform() - .translate( - -AudioBox.playheadWidth, - (-(100 - AudioBox.heightPercent) / 200) * this.props.PanelHeight() - ) + this.props.ScreenToLocalTransform().translate(0, -AudioBox.bottomControlsHeight) setPlayheadTime = (time: number) => this._ele!.currentTime = this.layoutDoc._currentTimecode = time; playing = () => this.mediaState === media_state.Playing; isActiveChild = () => this._isAnyChildContentActive; - timelineWidth = () => this.props.PanelWidth() - AudioBox.playheadWidth; - timelineHeight = () => (this.props.PanelHeight() * (AudioBox.heightPercent / 100)) *// panelHeight * heightPercent is player height - (AudioBox.heightPercent / 100) // * heightPercent is timeline height (as per css inline) + timelineWidth = () => this.props.PanelWidth(); + timelineHeight = () => (this.props.PanelHeight() - (AudioBox.topControlsHeight + AudioBox.bottomControlsHeight)) @undoBatch finishTrim = () => { // hides trim controls and displays new clip @@ -365,6 +359,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { + e.stopPropagation(); this.timeline && setupMoveUpEvents(this, e, returnFalse, returnFalse, action((e: PointerEvent, doubleTap?: boolean) => { if (doubleTap) { this.startTrim(TrimScope.All); @@ -392,90 +387,81 @@ export class AudioBox extends ViewBoxAnnotatableComponent + return
+ size="2x" + icon="file-alt" />
{[media_state.Recording, media_state.Playing].includes(this.mediaState) ? -
e.stopPropagation()}> -
+
e.stopPropagation()}> +
+ size="2x" + icon="stop" />
-
+
+ size="2x" + icon={this._paused ? "play" : "pause"} />
-
+
{formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode)))}
: -
+
RECORD
} -
; +
} @computed get playbackControls() { - return
-
-
-
- {" "} - -
+ return
+
+
+
+ +
-
- +
+ +
+
+ + { e.stopPropagation(); }} + onChange={(e: React.ChangeEvent) => { this.zoom(Number(e.target.value)); }} + /> +
+
-
+
+
{this.renderTimeline}
- {this.audio} -
- {this.timeline && formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this.timeline.clipStart)))} -
+
- {/* { e.stopPropagation(); }} - onChange={(e: React.ChangeEvent) => { this.zoom(e.target.value); }} - /> */} + {this.audio} -
+
+
+ {this.timeline && formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this.timeline.clipStart)))} +
+
{this.timeline && formatTime(Math.round(NumCast(this.timeline?.clipDuration)))}
-
; + + +
} @computed get renderTimeline() { diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index d80fb44cf..d47e8340c 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -89,8 +89,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent { var whichDoc = Cast(this.dataDoc[which], Doc, null); - if (whichDoc?.type === DocumentType.MARKER) whichDoc = Cast(whichDoc.annotationOn, Doc, null); - const targetDoc = Cast(whichDoc.annotationOn, Doc, null) ?? whichDoc; + // if (whichDoc?.type === DocumentType.MARKER) whichDoc = Cast(whichDoc.annotationOn, Doc, null); + const targetDoc = Cast(whichDoc?.annotationOn, Doc, null) ?? whichDoc; return whichDoc ? <> { -- cgit v1.2.3-70-g09d2