From 4488ae98f7644c84cfcb357d066d1075fdb76d3e Mon Sep 17 00:00:00 2001 From: mehekj Date: Thu, 2 Dec 2021 14:46:34 -0500 Subject: currently playing indicator complete --- .../collectionLinear/CollectionLinearView.scss | 4 +++ .../collectionLinear/CollectionLinearView.tsx | 25 ++++++++------- src/client/views/nodes/AudioBox.tsx | 37 +++++++++++++--------- 3 files changed, 39 insertions(+), 27 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.scss b/src/client/views/collections/collectionLinear/CollectionLinearView.scss index d86e2d81f..1e11acb1f 100644 --- a/src/client/views/collections/collectionLinear/CollectionLinearView.scss +++ b/src/client/views/collections/collectionLinear/CollectionLinearView.scss @@ -35,6 +35,10 @@ cursor: pointer; } + .audio-title:hover { + text-decoration: underline; + } + .bottomPopup-background { background: $medium-blue; display: flex; diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx index 3a06df746..a0f7ceb64 100644 --- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx +++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx @@ -117,15 +117,14 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { } - getDisplayDoc = (doc: Doc) => { + getDisplayDoc = (doc: Doc, preview: boolean = false) => { const nested = doc._viewType === CollectionViewType.Linear; const hidden = doc.hidden === true; let dref: Opt; const docXf = () => this.getTransform(dref); // const scalable = pair.layout.onClick || pair.layout.onDragStart; - doc.title == "audio recording 1" && console.log(doc); - return hidden ? (null) :
dref = r || undefined} + return hidden ? (null) :
dref = r || undefined} style={{ pointerEvents: "all", width: nested ? undefined : NumCast(doc._width), @@ -159,7 +158,8 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { docRangeFilters={this.props.docRangeFilters} searchFilterDocs={this.props.searchFilterDocs} ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} /> + ContainingCollectionDoc={undefined} + hideResizeHandles={true} />
; } @@ -223,21 +223,22 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { : null} - {/* TODO: add small player for single clip, dropdown sort of expandable menu for multiple clips - add onclick show audio similar to follow link behavior - add button to close out audio from currently playing */} {AudioBox.CurrentlyPlaying && AudioBox.CurrentlyPlaying.length != 0 && StrCast(this.layoutDoc.title) === "docked buttons" ? - Currently listening to: {AudioBox.CurrentlyPlaying.map((clip) => - { + Currently listening to: {AudioBox.CurrentlyPlaying.map((clip, i) => + { DocumentManager.Instance.jumpToDocument(clip, true); - }}>{clip.title}, + }}>{clip.title + (i == AudioBox.CurrentlyPlaying.length - 1 ? "" : ",")} )} : null} - {/* {AudioBox.CurrentlyPlaying && AudioBox.CurrentlyPlaying.length != 0 && StrCast(this.layoutDoc.title) === "docked buttons" ? - this.getDisplayDoc(AudioBox.CurrentlyPlaying[0]) : null} */} + {/* THIS RENDERS AUDIOBOX FOR EACH CLIP */} + {/* {AudioBox.CurrentlyPlaying && AudioBox.CurrentlyPlaying.length != 0 && StrCast(this.layoutDoc.title) === "docked buttons" ?
+
+ {AudioBox.CurrentlyPlaying.map((clip) => this.getDisplayDoc(clip, true))} +
+
: null} */}
; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 67c8902f9..c33a74325 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -21,7 +21,6 @@ import { ContextMenuProps } from "../ContextMenuItem"; import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from "../DocComponent"; import "./AudioBox.scss"; import { FieldView, FieldViewProps } from "./FieldView"; -import { time, timeStamp } from "console"; declare class MediaRecorder { constructor(e: any); // whatever MediaRecorder has @@ -86,6 +85,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent disposer?.()); const ind = DocUtils.ActiveRecordings.indexOf(this); @@ -99,7 +99,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent { - // IN PROGRESS: current attempt to make interface for keeping track of audio that is playing - if (!AudioBox.CurrentlyPlaying) { - AudioBox.CurrentlyPlaying = []; - } - if (AudioBox.CurrentlyPlaying.indexOf(this.Document) == -1) { - AudioBox.CurrentlyPlaying.push(this.Document); - } - clearTimeout(this._play); // abort any previous clip ending if (Number.isNaN(this._ele?.duration)) { // audio element isn't loaded yet... wait 1/2 second and try again setTimeout(() => this.playFrom(seekTimeInSeconds, endTime), 500); @@ -173,6 +164,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { if (fullPlay) this._finished = true; @@ -190,7 +182,20 @@ export class AudioBox extends ViewBoxAnnotatableComponent { - AudioBox.CurrentlyPlaying.splice(AudioBox.CurrentlyPlaying.indexOf(this.Document), 1); + if (AudioBox.CurrentlyPlaying) { + const index = AudioBox.CurrentlyPlaying.indexOf(this.layoutDoc.doc as Doc); + index !== -1 && AudioBox.CurrentlyPlaying.splice(index, 1); + } + } + + @action + addCurrentlyPlaying = () => { + if (!AudioBox.CurrentlyPlaying) { + AudioBox.CurrentlyPlaying = []; + } + if (AudioBox.CurrentlyPlaying.indexOf(this.layoutDoc.doc as Doc) == -1) { + AudioBox.CurrentlyPlaying.push(this.layoutDoc.doc as Doc); + } } // update the recording time @@ -293,10 +298,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent { - this._ele?.pause(); - this.mediaState = media_state.Paused; - if (!this._finished) clearTimeout(this._play); - AudioBox.CurrentlyPlaying.splice(AudioBox.CurrentlyPlaying.indexOf(this.Document), 1); + if (this._ele) { + this._ele.pause(); + this.mediaState = media_state.Paused; + if (!this._finished) clearTimeout(this._play); + this.removeCurrentlyPlaying(); + } } // creates a text document for dictation -- cgit v1.2.3-70-g09d2