diff options
Diffstat (limited to 'src')
3 files changed, 39 insertions, 27 deletions
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<HTMLDivElement>; const docXf = () => this.getTransform(dref); // const scalable = pair.layout.onClick || pair.layout.onDragStart; - doc.title == "audio recording 1" && console.log(doc); - return hidden ? (null) : <div className={`collectionLinearView-docBtn`} key={doc[Id]} ref={r => dref = r || undefined} + return hidden ? (null) : <div className={preview ? "preview" : `collectionLinearView-docBtn`} key={doc[Id]} ref={r => 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} /> </div>; } @@ -223,21 +223,22 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { </Tooltip> </span> : 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" ? <span className="bottomPopup-background"> <span className="bottomPopup-text"> - Currently listening to: {AudioBox.CurrentlyPlaying.map((clip) => - <span onPointerDown={() => { + Currently listening to: {AudioBox.CurrentlyPlaying.map((clip, i) => + <span className="audio-title" onPointerDown={() => { DocumentManager.Instance.jumpToDocument(clip, true); - }}>{clip.title}, </span> + }}>{clip.title + (i == AudioBox.CurrentlyPlaying.length - 1 ? "" : ",")} </span> )} </span> </span> : 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" ? <div> + <div className="currently-playing"> + {AudioBox.CurrentlyPlaying.map((clip) => this.getDisplayDoc(clip, true))} + </div> + </div> : null} */} </div> </div>; 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<ViewBoxAnnotatableProp get timeline() { return this._stackedTimeline.current; } // can't be computed since it's not observable componentWillUnmount() { + this.removeCurrentlyPlaying(); this._dropDisposer?.(); Object.values(this._disposers).forEach((disposer) => disposer?.()); const ind = DocUtils.ActiveRecordings.indexOf(this); @@ -99,7 +99,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp if (this.path) { this.mediaState = media_state.Paused; this.setPlayheadTime(NumCast(this.layoutDoc.clipStart)); - this.timecodeChanged(); } else { this.mediaState = undefined as any as media_state; } @@ -154,14 +153,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // play back the audio from time @action playFrom = (seekTimeInSeconds: number, endTime?: number, fullPlay: boolean = false) => { - // 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<ViewBoxAnnotatableProp this._ele.currentTime = start; this._ele.play(); this.mediaState = media_state.Playing; + this.addCurrentlyPlaying(); this._play = setTimeout( () => { if (fullPlay) this._finished = true; @@ -190,7 +182,20 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // removes from currently playing display @action removeCurrentlyPlaying = () => { - 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<ViewBoxAnnotatableProp // pause play back @action Pause = () => { - 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 |