aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/MainView.tsx1
-rw-r--r--src/client/views/nodes/AudioBox.scss19
-rw-r--r--src/client/views/nodes/AudioBox.tsx48
-rw-r--r--src/server/authentication/models/current_user_utils.ts1
4 files changed, 55 insertions, 14 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 78b8ac0b7..cc5c5bf2b 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -37,6 +37,7 @@ import { OverlayView } from './OverlayView';
import PDFMenu from './pdf/PDFMenu';
import { PreviewCursor } from './PreviewCursor';
import { Scripting } from '../util/Scripting';
+import { LinkManager } from '../util/LinkManager';
@observer
export class MainView extends React.Component {
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 9bda5b2a7..14b90c570 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -31,4 +31,23 @@
.audiobox-record-interactive {
pointer-events: all;
}
+ .audiobox-controls {
+ width:100%;
+ height:100%;
+ position: relative;
+ display: grid;
+ .audiobox-player {
+ margin-top:auto;
+ margin-bottom:auto;
+ width:100%;
+ position: relative;
+ display: grid;
+ .audiobox-marker {
+ position:absolute;
+ width:10px;
+ height:100%;
+ background:green;
+ }
+ }
+ }
} \ No newline at end of file
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index e9a11c9b6..57360272e 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -16,6 +16,8 @@ import { Doc, DocListCast } from "../../../new_fields/Doc";
import { ContextMenuProps } from "../ContextMenuItem";
import { ContextMenu } from "../ContextMenu";
import { Id } from "../../../new_fields/FieldSymbols";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { DocumentManager } from "../../util/DocumentManager";
interface Window {
MediaRecorder: MediaRecorder;
@@ -42,6 +44,7 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
_ele: HTMLAudioElement | null = null;
_recorder: any;
_recordStart = 0;
+ @observable _duration = 1;
_lastUpdate = 0;
@observable private _audioState: "unrecorded" | "recording" | "recorded" = "unrecorded";
@@ -50,6 +53,7 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
public static ActiveRecordings: Doc[] = [];
componentDidMount() {
+ runInAction(() => this._duration = NumCast(this.dataDoc.duration, 1));
runInAction(() => this._audioState = this.path ? "recorded" : "unrecorded");
this._linkPlayDisposer = reaction(() => this.layoutDoc.scrollToLinkID,
scrollLinkId => {
@@ -76,6 +80,7 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
const htmlEle = this._ele;
const start = extensionDoc && DateCast(extensionDoc.recordingStart);
if (htmlEle && !htmlEle.paused && start) {
+ htmlEle.duration && htmlEle.duration !== Infinity && runInAction(() => this.dataDoc.duration = this._duration = htmlEle.duration);
setTimeout(this.updateHighlights, 30);
this.Document.currentTimecode = htmlEle.currentTime;
DocListCast(this.dataDoc.links).map(l => {
@@ -94,18 +99,14 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
}
playFrom = (seekTimeInSeconds: number) => {
- const extensionDoc = this.extensionDoc;
- let start = extensionDoc && DateCast(extensionDoc.recordingStart);
- if (this._ele && start) {
- if (seekTimeInSeconds) {
- if (seekTimeInSeconds >= 0 && seekTimeInSeconds <= this._ele.duration) {
- this._ele.currentTime = seekTimeInSeconds;
- this._ele.play();
- this._lastUpdate = seekTimeInSeconds;
- setTimeout(this.updateHighlights, 0);
- } else {
- this._ele.pause();
- }
+ if (this._ele) {
+ if (seekTimeInSeconds < 0) {
+ this._ele.pause();
+ } else if (seekTimeInSeconds <= this._ele.duration) {
+ this._ele.currentTime = seekTimeInSeconds;
+ this._ele.play();
+ this._lastUpdate = seekTimeInSeconds;
+ setTimeout(this.updateHighlights, 0);
} else {
this._ele.pause();
}
@@ -182,6 +183,7 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
}
playClick = (e: any) => setTimeout(this.updateHighlights, 30);
+ onPlay = (e: any) => this.playFrom(this._ele!.paused ? this._ele!.currentTime : -1);
setRef = (e: HTMLAudioElement | null) => {
e && e.addEventListener("play", this.playClick as any);
@@ -197,7 +199,7 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
@computed get audio() {
let interactive = this.active() ? "-interactive" : "";
- return <audio controls ref={this.setRef} className={`audiobox-control${interactive}`}>
+ return <audio ref={this.setRef} className={`audiobox-control${interactive}`}>
<source src={this.path} type="audio/mpeg" />
Not supported.
</audio>;
@@ -212,7 +214,25 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
<button className={`audiobox-record${interactive}`} style={{ backgroundColor: this._audioState === "recording" ? "red" : "black" }}>
{this._audioState === "recording" ? "STOP" : "RECORD"}
</button> :
- this.audio
+ <div className="audiobox-controls">
+ <div className="audiobox-player" onClick={this.onPlay}>
+ <FontAwesomeIcon icon="play" size="sm" ></FontAwesomeIcon>
+ {DocListCast(this.dataDoc.links).map((l, i) => {
+ let la1 = l.anchor1 as Doc;
+ let la2 = l.anchor2 as Doc;
+ let linkTime = NumCast(l.anchor2Timecode);
+ if (Doc.AreProtosEqual(la1, this.dataDoc)) {
+ la1 = l.anchor2 as Doc;
+ la2 = l.anchor1 as Doc;
+ linkTime = NumCast(l.anchor1Timecode);
+ }
+ return <div key={i} className="audiobox-marker" onPointerDown={() =>
+ DocumentManager.Instance.FollowLink(l, la2, document => this.props.addDocTab(document, undefined, "onRight"), false)}
+ style={{ left: `${linkTime / this._duration * 100}%` }} />;
+ })}
+ {this.audio}
+ </div>
+ </div>
}
</div>
);
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 044ec746b..ee9794564 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -15,6 +15,7 @@ import { RouteStore } from "../../RouteStore";
import { InkingControl } from "../../../client/views/InkingControl";
import { DragManager } from "../../../client/util/DragManager";
import { nullAudio } from "../../../new_fields/URLField";
+import { LinkManager } from "../../../client/util/LinkManager";
export class CurrentUserUtils {
private static curr_id: string;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 03:30:33 +0000