aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/nodes/AudioBox.scss64
-rw-r--r--src/client/views/nodes/AudioBox.tsx164
2 files changed, 210 insertions, 18 deletions
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index e9420a072..b1da40287 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -46,6 +46,38 @@
width: 100%;
height: 100%;
position: relative;
+
+
+ }
+
+ .recording {
+ margin-top: auto;
+ margin-bottom: auto;
+ width: 100%;
+ height: 80%;
+ position: relative;
+ padding-right: 5px;
+ display: flex;
+
+ .time {
+ position: relative;
+ height: 100%;
+ width: 100%;
+ font-size: 20;
+ text-align: center;
+ }
+
+ .buttons {
+ position: relative;
+ margin-top: auto;
+ margin-bottom: auto;
+ width: 25px;
+ padding: 5px;
+ }
+
+ .buttons:hover {
+ background-color: darkgrey;
+ }
}
.audiobox-controls {
@@ -54,6 +86,7 @@
position: relative;
display: flex;
padding-left: 2px;
+ background: lightgrey;
.audiobox-player {
margin-top: auto;
@@ -73,6 +106,10 @@
padding: 2px;
}
+ .audiobox-playhead:hover {
+ background-color: darkgrey;
+ }
+
.audiobox-dictation {
align-items: center;
display: inherit;
@@ -159,6 +196,33 @@
}
}
+ .audiobox-marker-container1,
+ .audiobox-marker-minicontainer {
+ position: absolute;
+ width: 10px;
+ height: 90%;
+ top: 2.5%;
+ background: gray;
+ border-radius: 5px;
+ box-shadow: black 2px 2px 1px;
+ opacity: 0.3;
+
+ .audiobox-marker {
+ position: relative;
+ height: calc(100% - 15px);
+ margin-top: 15px;
+ }
+
+ .audio-marker:hover {
+ border: orange 2px solid;
+ }
+ }
+
+ .audiobox-marker-container1:hover,
+ .audiobox-marker-minicontainer:hover {
+ opacity: 1;
+ }
+
.audiobox-marker-minicontainer {
width: 5px;
border-radius: 1px;
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 5c921cea4..9a2baf85d 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -2,13 +2,13 @@ import React = require("react");
import { FieldViewProps, FieldView } from './FieldView';
import { observer } from "mobx-react";
import "./AudioBox.scss";
-import { Cast, DateCast, NumCast } from "../../../fields/Types";
+import { Cast, DateCast, NumCast, FieldValue } from "../../../fields/Types";
import { AudioField, nullAudio } from "../../../fields/URLField";
import { ViewBoxBaseComponent } from "../DocComponent";
import { makeInterface, createSchema } from "../../../fields/Schema";
import { documentSchema } from "../../../fields/documentSchemas";
import { Utils, returnTrue, emptyFunction, returnOne, returnTransparent, returnFalse, returnZero } from "../../../Utils";
-import { runInAction, observable, reaction, IReactionDisposer, computed, action } from "mobx";
+import { runInAction, observable, reaction, IReactionDisposer, computed, action, trace } from "mobx";
import { DateField } from "../../../fields/DateField";
import { SelectionManager } from "../../util/SelectionManager";
import { Doc, DocListCast } from "../../../fields/Doc";
@@ -21,6 +21,9 @@ import { Docs, DocUtils } from "../../documents/Documents";
import { ComputedField } from "../../../fields/ScriptField";
import { Networking } from "../../Network";
import { LinkAnchorBox } from "./LinkAnchorBox";
+import { FormattedTextBox } from "./formattedText/FormattedTextBox";
+import { RichTextField } from "../../../fields/RichTextField";
+
// testing testing
@@ -50,9 +53,19 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
_ele: HTMLAudioElement | null = null;
_recorder: any;
_recordStart = 0;
+ _pauseStart = 0;
+ _pauseEnd = 0;
+ _pausedTime = 0;
_stream: MediaStream | undefined;
+ _start: number = 0;
+ _hold: boolean = false;
+ @observable private _duration = 0;
+ @observable private _rect: Array<any> = []
+ @observable private _markers: Array<any> = [];
+ @observable private _paused: boolean = false;
@observable private static _scrubTime = 0;
+ @observable private _repeat: boolean = false;
@computed get audioState(): undefined | "recording" | "paused" | "playing" { return this.dataDoc.audioState as (undefined | "recording" | "paused" | "playing"); }
set audioState(value) { this.dataDoc.audioState = value; }
public static SetScrubTime = (timeInMillisFrom1970: number) => { runInAction(() => AudioBox._scrubTime = 0); runInAction(() => AudioBox._scrubTime = timeInMillisFrom1970); };
@@ -106,14 +119,23 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
}
pause = action(() => {
- this._ele!.pause();
- this.audioState = "paused";
+ if (this._repeat) {
+ this.playFrom(0);
+ } else {
+ this._ele!.pause();
+ this.audioState = "paused";
+ }
});
playFromTime = (absoluteTime: number) => {
this.recordingStart && this.playFrom((absoluteTime - this.recordingStart) / 1000);
}
- playFrom = (seekTimeInSeconds: number) => {
+
+ @action
+ playFrom = (seekTimeInSeconds: number, endTime: number = this.dataDoc.duration) => {
+ let play;
+ clearTimeout(play);
+ this._duration = endTime - seekTimeInSeconds;
if (this._ele && AudioBox.Enabled) {
if (seekTimeInSeconds < 0) {
if (seekTimeInSeconds > -1) {
@@ -122,9 +144,13 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
this.pause();
}
} else if (seekTimeInSeconds <= this._ele.duration) {
+ console.log("playing");
this._ele.currentTime = seekTimeInSeconds;
this._ele.play();
runInAction(() => this.audioState = "playing");
+ if (endTime !== this.dataDoc.duration) {
+ play = setTimeout(() => this.pause(), (this._duration) * 1000);
+ }
} else {
this.pause();
}
@@ -134,8 +160,13 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
updateRecordTime = () => {
if (this.audioState === "recording") {
- setTimeout(this.updateRecordTime, 30);
- this.layoutDoc.currentTimecode = (new Date().getTime() - this._recordStart) / 1000;
+ if (this._paused) {
+ setTimeout(this.updateRecordTime, 30);
+ this._pausedTime += (new Date().getTime() - this._recordStart) / 1000;
+ } else {
+ setTimeout(this.updateRecordTime, 30);
+ this.layoutDoc.currentTimecode = (new Date().getTime() - this._recordStart - this.pauseTime) / 1000;
+ }
}
}
@@ -167,7 +198,7 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
stopRecording = action(() => {
this._recorder.stop();
this._recorder = undefined;
- this.dataDoc.duration = (new Date().getTime() - this._recordStart) / 1000;
+ this.dataDoc.duration = (new Date().getTime() - this._recordStart - this.pauseTime) / 1000;
this.audioState = "paused";
this._stream?.getAudioTracks()[0].stop();
const ind = DocUtils.ActiveRecordings.indexOf(this.props.Document);
@@ -222,6 +253,53 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
</audio>;
}
+ @action
+ onRepeat = (e: React.MouseEvent) => {
+ this._repeat = !this._repeat;
+ e.stopPropagation();
+ }
+
+ @action
+ recordPause = (e: React.MouseEvent) => {
+ this._pauseStart = new Date().getTime();
+ this._paused = true;
+ this._recorder.pause();
+ e.stopPropagation();
+
+ }
+
+ @action
+ recordPlay = (e: React.MouseEvent) => {
+ this._pauseEnd = new Date().getTime();
+ this._paused = false;
+ this._recorder.resume();
+ e.stopPropagation();
+
+ }
+
+ @computed get pauseTime() {
+ return (this._pauseEnd - this._pauseStart);
+ }
+
+ @action
+ newMarker(marker: number) {
+ this._markers.push(marker);
+ }
+
+ start(marker: number) {
+ console.log("start!");
+ this._hold = true;
+ this._start = marker;
+ }
+
+ @action
+ end(marker: number) {
+ console.log("end!");
+ this._hold = false;
+ this._markers.push([this._start, marker]);
+ this._start = 0;
+ }
+
render() {
const interactive = this.active() ? "-interactive" : "";
return <div className={`audiobox-container`} onContextMenu={this.specificContextMenu} onClick={!this.path ? this.recordClick : undefined}>
@@ -230,24 +308,72 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
<div className="audiobox-dictation" onClick={this.onFile}>
<FontAwesomeIcon style={{ width: "30px", background: this.layoutDoc.playOnSelect ? "yellow" : "rgba(0,0,0,0)" }} icon="file-alt" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
</div>
- <button className={`audiobox-record${interactive}`} style={{ backgroundColor: this.audioState === "recording" ? "red" : "black" }}>
- {this.audioState === "recording" ? "STOP" : "RECORD"}
- </button>
+ {/* <button className={`audiobox-record${interactive}`} style={{ backgroundColor: this.audioState === "recording" ? "lightgrey" : "black" }}>
+ {this.audioState === "recording" ?
+ <div className="recording" style={{}}>
+ 10:00
+ <FontAwesomeIcon style={{ width: "100%" }} icon={"stop-circle"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
+ <FontAwesomeIcon style={{ width: "100%" }} icon={"pause"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /> </div> : "RECORD"}
+ </button> */}
+ {this.audioState === "recording" ?
+ <div className="recording" onClick={e => e.stopPropagation()}>
+ <div className="buttons" onClick={this.recordClick}>
+ <FontAwesomeIcon style={{ width: "100%" }} icon={"stop"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
+ </div>
+ <div className="buttons" onClick={this._paused ? this.recordPlay : this.recordPause}>
+ <FontAwesomeIcon style={{ width: "100%" }} icon={this._paused ? "play" : "pause"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
+ </div>
+ <div className="time">{NumCast(this.layoutDoc.currentTimecode).toFixed(1)}</div>
+ </div>
+
+ :
+ <button className={`audiobox-record${interactive}`} style={{ backgroundColor: "black" }}>
+ RECORD
+ </button>}
</div> :
- <div className="audiobox-controls">
- <div className="audiobox-player" onClick={this.onPlay}>
- <div className="audiobox-playhead"> <FontAwesomeIcon style={{ width: "100%" }} icon={this.audioState === "paused" ? "play" : "pause"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /></div>
- <div className="audiobox-playhead" onClick={this.onStop}><FontAwesomeIcon style={{ width: "100%", background: this.layoutDoc.playOnSelect ? "yellow" : "dimGray" }} icon="hand-point-left" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /></div>
+ <div className="audiobox-controls" onClick={this.layoutDoc.playOnSelect ? this.onPlay : undefined}>
+ <div className="audiobox-player" >
+ <div className="audiobox-playhead" onClick={this.onPlay}> <FontAwesomeIcon style={{ width: "100%" }} icon={this.audioState === "paused" ? "play" : "pause"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /></div>
+ <div className="audiobox-playhead" onClick={this.onStop}><FontAwesomeIcon style={{ width: "100%", background: this.layoutDoc.playOnSelect ? "darkgrey" : "" }} icon="hand-point-left" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /></div>
+ <div className="audiobox-playhead" onClick={this.onRepeat}><FontAwesomeIcon style={{ width: "100%", background: this._repeat ? "darkgrey" : "" }} icon="redo-alt" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /></div>
<div className="audiobox-timeline" onClick={e => e.stopPropagation()}
onPointerDown={e => {
if (e.button === 0 && !e.ctrlKey) {
const rect = (e.target as any).getBoundingClientRect();
+
const wasPaused = this.audioState === "paused";
this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration);
wasPaused && this.pause();
- e.stopPropagation();
+
}
- }} >
+ if (e.button === 0 && e.altKey) {
+ this.newMarker(this._ele!.currentTime);
+ }
+
+ if (e.button === 0 && e.shiftKey) {
+ const rect = (e.target as any).getBoundingClientRect();
+ this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration);
+ this._hold ? this.end(this._ele!.currentTime) : this.start(this._ele!.currentTime);
+ }
+ }}>
+ {this._markers.map((m, i) => {
+ let text = Docs.Create.TextDocument("hello", { title: "label", _showSidebar: false, _autoHeight: false });
+ let rect;
+ (m.length > 1) ?
+
+ rect =
+ <div className={this.props.PanelHeight() < 32 ? "audiobox-marker-minicontainer" : "audiobox-marker-container1"} key={i} style={{ left: `${m[0] / NumCast(this.dataDoc.duration, 1) * 100}%`, width: `${(m[1] - m[0]) / NumCast(this.dataDoc.duration, 1) * 100}%` }} onClick={e => { this.playFrom(m[0], m[1]); e.stopPropagation() }}>
+ {/* <FormattedTextBox {...this.props} key={"label" + i} Document={text} /> */}
+ </div>
+ :
+ rect =
+ <div className={this.props.PanelHeight() < 32 ? "audiobox-marker-minicontainer" : "audiobox-marker-container"} key={i} style={{ left: `${m / NumCast(this.dataDoc.duration, 1) * 100}%` }}>
+ {/* <DocumentView {...this.props}
+ Document={text}
+ parentActive={returnTrue} /> */}
+ </div>;
+ return rect
+ })}
{DocListCast(this.dataDoc.links).map((l, i) => {
let la1 = l.anchor1 as Doc;
let la2 = l.anchor2 as Doc;
@@ -257,8 +383,10 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
la2 = l.anchor1 as Doc;
linkTime = NumCast(l.anchor1_timecode);
}
+
+
return !linkTime ? (null) :
- <div className={this.props.PanelHeight() < 32 ? "audiobox-marker-minicontainer" : "audiobox-marker-container"} key={l[Id]} style={{ left: `${linkTime / NumCast(this.dataDoc.duration, 1) * 100}%` }}>
+ <div className={this.props.PanelHeight() < 32 ? "audiobox-marker-minicontainer" : "audiobox-marker-container"} key={l[Id]} style={{ left: `${linkTime / NumCast(this.dataDoc.duration, 1) * 100}%`, width: `${(this.dataDoc.duration - linkTime) / NumCast(this.dataDoc.duration, 1) * 100}%` }}>
<div className={this.props.PanelHeight() < 32 ? "audioBox-linker-mini" : "audioBox-linker"} key={"linker" + i}>
<DocumentView {...this.props}
Document={l}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 10:51:54 +0000