diff options
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 51 |
1 files changed, 11 insertions, 40 deletions
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index f52b54d01..e66003f88 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -1,40 +1,29 @@ import React = require("react"); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - action, - computed, - IReactionDisposer, - observable, - reaction, - runInAction -} from "mobx"; +import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; import { DateField } from "../../../fields/DateField"; -import { Doc, DocListCast, Opt } from "../../../fields/Doc"; +import { Doc, DocListCast } from "../../../fields/Doc"; import { documentSchema } from "../../../fields/documentSchemas"; import { makeInterface } from "../../../fields/Schema"; import { ComputedField } from "../../../fields/ScriptField"; -import { Cast, NumCast, DateCast } from "../../../fields/Types"; +import { Cast, DateCast, NumCast } from "../../../fields/Types"; import { AudioField, nullAudio } from "../../../fields/URLField"; import { emptyFunction, formatTime, OmitKeys, returnFalse, setupMoveUpEvents } from "../../../Utils"; import { DocUtils } from "../../documents/Documents"; import { Networking } from "../../Network"; import { CurrentUserUtils } from "../../util/CurrentUserUtils"; import { DragManager } from "../../util/DragManager"; -import { SnappingManager } from "../../util/SnappingManager"; +import { undoBatch } from "../../util/UndoManager"; import { CollectionStackedTimeline, TrimScope } from "../collections/CollectionStackedTimeline"; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; -import { - ViewBoxAnnotatableComponent, - ViewBoxAnnotatableProps -} from "../DocComponent"; +import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from "../DocComponent"; import { Colors } from "../global/globalEnums"; import "./AudioBox.scss"; import { FieldView, FieldViewProps } from "./FieldView"; import { LinkDocPreview } from "./LinkDocPreview"; import e = require("connect-flash"); -import { undoBatch } from "../../util/UndoManager"; declare class MediaRecorder { constructor(e: any); // whatever MediaRecorder has @@ -55,7 +44,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp public static Enabled = false; static playheadWidth = 40; // width of playhead static heightPercent = 75; // height of timeline in percent of height of audioBox. - static Instance: AudioBox; _dropDisposer?: DragManager.DragDropDisposer; _disposers: { [name: string]: IReactionDisposer } = {}; @@ -67,28 +55,18 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp _pauseEnd = 0; _pausedTime = 0; _stream: MediaStream | undefined; - _start: number = 0; _play: any = null; @observable static _scrubTime = 0; - @observable _waveHeight: Opt<number> = this.layoutDoc._height; @observable _paused: boolean = false; @computed get recordingStart() { return DateCast(this.dataDoc[this.fieldKey + "-recordingStart"])?.date.getTime(); } @computed get rawDuration() { return NumCast(this.dataDoc[`${this.fieldKey}-duration`]); } - @computed get anchorDocs() { return DocListCast(this.dataDoc[this.annotationKey]); } @computed get links() { return DocListCast(this.dataDoc.links); } @computed get pauseTime() { return this._pauseEnd - this._pauseStart; } // total time paused to update the correct time - @computed get heightPercent() { return AudioBox.heightPercent; } @computed get mediaState() { return this.layoutDoc.mediaState as media_state; } set mediaState(value) { this.layoutDoc.mediaState = value; } get timeline() { return this._stackedTimeline.current; } - - constructor(props: Readonly<ViewBoxAnnotatableProps & FieldViewProps>) { - super(props); - AudioBox.Instance = this; - } - public static SetScrubTime = action((timeInMillisFrom1970: number) => { AudioBox._scrubTime = 0; AudioBox._scrubTime = timeInMillisFrom1970; @@ -365,9 +343,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp onLoadedData={action(e => { const duration = this._ele?.duration; if (duration && duration !== Infinity) { - runInAction( - () => this.dataDoc[this.fieldKey + "-duration"] = duration - ); + this.dataDoc[this.fieldKey + "-duration"] = duration; } })} className={`audiobox-control${this.props.isContentActive() ? "-interactive" : ""}`}> @@ -431,16 +407,15 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp .ScreenToLocalTransform() .translate( -AudioBox.playheadWidth, - (-(100 - this.heightPercent) / 200) * this.props.PanelHeight() + (-(100 - AudioBox.heightPercent) / 200) * this.props.PanelHeight() ) setAnchorTime = (time: number) => { (this._ele!.currentTime = this.layoutDoc._currentTimecode = time); } timelineHeight = () => - (((this.props.PanelHeight() * this.heightPercent) / 100) * - this.heightPercent) / - 100 // panelHeight * heightPercent is player height. * heightPercent is timeline height (as per css inline) + (((this.props.PanelHeight() * AudioBox.heightPercent) / 100) * + AudioBox.heightPercent) / 100 // panelHeight * heightPercent is player height. * heightPercent is timeline height (as per css inline) timelineWidth = () => this.props.PanelWidth() - AudioBox.playheadWidth; @computed get renderTimeline() { return ( @@ -499,10 +474,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp } render() { - const interactive = - SnappingManager.GetIsDragging() || this.props.isContentActive() - ? "-interactive" - : ""; return ( <div ref={r => { @@ -541,7 +512,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp <div className="recording" onClick={(e) => e.stopPropagation()}> <div className="recording-buttons" onClick={this.recordClick}> <FontAwesomeIcon - icon={"stop"} + icon="stop" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /> </div> @@ -562,7 +533,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp </div> ) : ( <div - className={`audiobox-record${interactive}`} + className={`audiobox-record${this.props.isContentActive() ? "-interactive" : ""}`} style={{ backgroundColor: Colors.DARK_GRAY }} > <FontAwesomeIcon icon="microphone" /> |