From 2f12e2d6945c51eb7df961443fe5d06b10577659 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Wed, 5 Aug 2020 01:00:39 -0700 Subject: change css --- src/client/views/nodes/AudioBox.scss | 26 +++++++--- src/client/views/nodes/AudioBox.tsx | 98 +++++++++++++++++++++++++++--------- 2 files changed, 95 insertions(+), 29 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 0ea4b37cb..9065966d7 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -90,6 +90,16 @@ padding-left: 2px; background: black; + .audiobox-dictation { + position: absolute; + width: 30px; + height: 100%; + align-items: center; + display: inherit; + background: dimgray; + left: 0px; + } + .audiobox-player { margin-top: auto; margin-bottom: auto; @@ -108,11 +118,15 @@ height: 25px; padding: 2px; border-radius: 50%; - background-color: dimgrey; + background-color: black; + color: white; } .audiobox-playhead:hover { - background-color: white; + // background-color: black; + // border-radius: 5px; + background-color: grey; + color: lightgrey; } .audiobox-dictation { @@ -285,16 +299,16 @@ .current-time { position: absolute; - font-size: 12; - top: calc(100% - 10px); + font-size: 8; + top: calc(100% - 8px); left: 30px; color: white; } .total-time { position: absolute; - top: calc(100% - 10px); - font-size: 12; + top: calc(100% - 8px); + font-size: 8; right: 2px; color: white; } diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 7c90547ef..0f142261d 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -74,7 +74,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent = []; _first: boolean = false; - _buckets: Array = new Array(); + _buckets: Array = new Array(); _count: Array = []; private _isPointerDown = false; @@ -133,24 +133,45 @@ export class AudioBox extends ViewBoxAnnotatableComponent SelectionManager.SelectedDocuments(), selected => { const sel = selected.length ? selected[0].props.Document : undefined; - // if (sel) { - // DocListCast(sel.links).map((l, i) => { - // let la1 = l.anchor1 as Doc; - // let la2 = l.anchor2 as Doc; - // let linkTime = NumCast(l.anchor2_timecode); - // if (Doc.AreProtosEqual(la1, this.dataDoc)) { - // la1 = l.anchor2 as Doc; - // la2 = l.anchor1 as Doc; - // linkTime = NumCast(l.anchor1_timecode); - // } - // console.log(linkTime); - // if (linkTime) { - // this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFrom(linkTime); - // } - // }); - // } - this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime()); - this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause(); + let link; + if (sel) { + DocListCast(sel.links).map((l, i) => { + let la1 = l.anchor1 as Doc; + let la2 = l.anchor2 as Doc; + let linkTime = NumCast(l.anchor2_timecode); + let endTime; + if (Doc.AreProtosEqual(la1, this.dataDoc)) { + la1 = l.anchor2 as Doc; + la2 = l.anchor1 as Doc; + linkTime = NumCast(l.anchor1_timecode); + } + if (la2.audioStart) { + linkTime = NumCast(la2.audioStart); + } + + if (la1.audioStart) { + linkTime = NumCast(la1.audioStart); + } + + if (la1.audioEnd) { + endTime = NumCast(la1.audioEnd); + } + + if (la2.audioEnd) { + endTime = NumCast(la2.audioEnd); + } + + console.log(linkTime); + if (linkTime) { + link = true; + this.layoutDoc.playOnSelect && this.recordingStart && sel && !Doc.AreProtosEqual(sel, this.props.Document) && endTime ? this.playFrom(linkTime, endTime) : this.playFrom(linkTime); + } + }); + } + if (!link) { + this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime()); + this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause(); + } }); this._scrubbingDisposer = reaction(() => AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime)); } @@ -303,6 +324,38 @@ export class AudioBox extends ViewBoxAnnotatableComponent { + // let audioCtx = new (window.AudioContext)(); + // const buckets: number[] = []; + + // axios({ url: this.path, responseType: "arraybuffer" }) + // .then(response => runInAction(() => { + // let audioData = response.data; + + // audioCtx.decodeAudioData(audioData, buffer => { + // let decodedAudioData = buffer.getChannelData(0); + // const NUMBER_OF_BUCKETS = 100; + // let bucketDataSize = Math.floor(decodedAudioData.length / NUMBER_OF_BUCKETS); + + // for (let i = 0; i < NUMBER_OF_BUCKETS; i++) { + // let startingPoint = i * bucketDataSize; + // let endingPoint = i * bucketDataSize + bucketDataSize; + // let max = 0; + // for (let j = startingPoint; j < endingPoint; j++) { + // if (decodedAudioData[j] > max) { + // max = decodedAudioData[j]; + // } + // } + // let size = Math.abs(max); + // buckets.push(size / 2); + // } + + // }); + // return buckets + // })); + // } + @action buckets = async () => { let audioCtx = new (window.AudioContext)(); @@ -555,7 +608,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent} :
-
-
+
-
+
{/*
*/}
{ e.stopPropagation(); e.preventDefault(); }} onDoubleClick={e => this.change} @@ -711,6 +762,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent
{DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => { -- cgit v1.2.3-70-g09d2