aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-rw-r--r--src/client/views/nodes/AudioBox.scss28
-rw-r--r--src/client/views/nodes/AudioBox.tsx19
-rw-r--r--src/client/views/nodes/DocuLinkBox.tsx2
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx2
4 files changed, 28 insertions, 23 deletions
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index ccbf0d75f..3b19a6dba 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -44,22 +44,27 @@
width:100%;
height: 80%;
position: relative;
+ padding-right: 5px;
display: flex;
.audiobox-playhead {
position: relative;
margin-top: auto;
margin-bottom: auto;
width: 25px;
+ padding: 2px;
}
.audiobox-timeline {
position:relative;
height:100%;
width:100%;
+ background: white;
+ border: gray solid 1px;
+ border-radius: 3px;
.audiobox-current {
width: 1px;
height:100%;
background-color: red;
- position: absolute;;
+ position: absolute;
}
.audiobox-linker, .audiobox-linker-mini {
position:absolute;
@@ -72,10 +77,11 @@
background-color: transparent;
box-shadow: black 2px 2px 1px;
.docuLinkBox-cont {
- width:15px !important;
- height:15px !important;
- left: calc(100% - 15px) !important;
- top: calc(100% - 15px) !important;
+ position: relative !important;
+ height: 100% !important;
+ width: 100% !important;
+ left:unset !important;
+ top:unset !important;
}
}
.audiobox-linker-mini {
@@ -86,10 +92,11 @@
margin-left: -1;
margin-top: -2;
.docuLinkBox-cont {
- width:8px !important;
- height:8px !important;
- left: calc(100% - 8px) !important;
- top: calc(100% - 8px) !important;
+ position: relative !important;
+ height: 100% !important;
+ width: 100% !important;
+ left:unset !important;
+ top:unset !important;
}
}
.audiobox-linker:hover, .audiobox-linker-mini:hover {
@@ -98,7 +105,8 @@
.audiobox-marker-container, .audiobox-marker-minicontainer {
position:absolute;
width:10px;
- height:100%;
+ height:90%;
+ top:2.5%;
background:gray;
border-radius: 5px;
box-shadow: black 2px 2px 1px;
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index cc1c63d44..bd1caaf1b 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -12,12 +12,11 @@ import { RouteStore } from "../../../server/RouteStore";
import { runInAction, observable, reaction, IReactionDisposer, computed, action } from "mobx";
import { DateField } from "../../../new_fields/DateField";
import { SelectionManager } from "../../util/SelectionManager";
-import { Doc, DocListCast, WidthSym } from "../../../new_fields/Doc";
+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";
import { DocumentView } from "./DocumentView";
interface Window {
@@ -59,7 +58,7 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
scrollLinkId && DocListCast(this.dataDoc.links).filter(l => l[Id] === scrollLinkId).map(l => {
let la1 = l.anchor1 as Doc;
let linkTime = Doc.AreProtosEqual(la1, this.dataDoc) ? NumCast(l.anchor1Timecode) : NumCast(l.anchor2Timecode);
- setTimeout(() => this.playFrom(linkTime), 250);
+ setTimeout(() => { this.playFrom(linkTime); Doc.linkFollowHighlight(l); }, 250);
});
scrollLinkId && Doc.SetInPlace(this.layoutDoc, "scrollToLinkID", undefined, false);
}, { fireImmediately: true });
@@ -75,11 +74,9 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
}
timecodeChanged = () => {
- const extensionDoc = this.extensionDoc;
const htmlEle = this._ele;
- const start = extensionDoc && DateCast(extensionDoc.recordingStart);
- if (start && htmlEle) {
- htmlEle && htmlEle.duration && htmlEle.duration !== Infinity && runInAction(() => this.dataDoc.duration = htmlEle.duration);
+ if (this._audioState === "recorded" && htmlEle) {
+ htmlEle.duration && htmlEle.duration !== Infinity && runInAction(() => this.dataDoc.duration = htmlEle.duration);
DocListCast(this.dataDoc.links).map(l => {
let la1 = l.anchor1 as Doc;
let linkTime = NumCast(l.anchor2Timecode);
@@ -195,7 +192,7 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
}
setRef = (e: HTMLAudioElement | null) => {
- e && e.addEventListener("timeupdate", action(() => this.Document.currentTimecode = e!.currentTime));
+ e && e.addEventListener("timeupdate", this.timecodeChanged);
this._ele = e;
}
@@ -225,13 +222,13 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
</button> :
<div className="audiobox-controls">
<div className="audiobox-player" onClick={this.onPlay}>
- <FontAwesomeIcon className="audiobox-playhead" icon={this._playing ? "pause" : "play"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
- <div className="audiobox-playhead" onClick={this.onStop}><FontAwesomeIcon className="audiobox-playhead" icon="stop" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /></div>
+ <div className="audiobox-playhead"> <FontAwesomeIcon style={{ width: "100%" }} icon={this._playing ? "pause" : "play"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /></div>
+ <div className="audiobox-playhead" onClick={this.onStop}><FontAwesomeIcon style={{ width: "100%" }} icon="stop" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /></div>
<div className="audiobox-timeline" onClick={e => e.stopPropagation()}
onPointerDown={e => {
if (e.button === 0 && !e.ctrlKey) {
let rect = (e.target as any).getBoundingClientRect();
- this._ele!.currentTime = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration);
+ this._ele!.currentTime = this.Document.currentTimecode = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration);
this.pause();
e.stopPropagation();
}
diff --git a/src/client/views/nodes/DocuLinkBox.tsx b/src/client/views/nodes/DocuLinkBox.tsx
index f2ab6fcd8..8f68effe8 100644
--- a/src/client/views/nodes/DocuLinkBox.tsx
+++ b/src/client/views/nodes/DocuLinkBox.tsx
@@ -73,7 +73,7 @@ export class DocuLinkBox extends DocComponent<FieldViewProps, DocLinkSchema>(Doc
let c = StrCast(this.props.Document.backgroundColor, "lightblue");
return <div className="docuLinkBox-cont" onPointerDown={this.onPointerDown} onClick={this.onClick} title={StrCast((this.props.Document[this.props.fieldKey === "anchor1" ? "anchor2" : "anchor1"]! as Doc).title)}
ref={this._ref} style={{
- background: c, width: "25px", left: `calc(${x}% - 12.5px)`, top: `calc(${y}% - 12.5px)`,
+ background: c, left: `calc(${x}% - 12.5px)`, top: `calc(${y}% - 12.5px)`,
transform: `scale(${hasAnchor ? 0.333 : 1 / this.props.ContentScaling()})`
}} />;
}
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 566b698bd..cf55a10ba 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -192,7 +192,7 @@ export class FormattedTextBox extends DocExtendableComponent<(FieldViewProps & F
}
let tsel = this._editorView.state.selection.$from;
- tsel.marks().filter(m => m.type === this._editorView!.state.schema.marks.user_mark).map(m => AudioBox.SetScrubTime(Math.max(0, m.attrs.modified * 5000 - 5000)));
+ tsel.marks().filter(m => m.type === this._editorView!.state.schema.marks.user_mark).map(m => AudioBox.SetScrubTime(Math.max(0, m.attrs.modified * 5000 - 1000)));
this._applyingChange = true;
this.extensionDoc && (this.extensionDoc.text = state.doc.textBetween(0, state.doc.content.size, "\n\n"));
this.extensionDoc && (this.extensionDoc.lastModified = new DateField(new Date(Date.now())));
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-03-02 01:10:26 +0000