From 778c189edc73cdc6f672eff5166c23fd932740e3 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 9 Aug 2020 19:23:28 -0500 Subject: minor changes --- src/client/views/linking/LinkEditor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/linking') diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 5832a2181..0470cf08b 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -382,7 +382,7 @@ export class LinkEditor extends React.Component {
this.changeFollowBehavior("onRight")}> - Always open in right tab + Always open in new pane on right
this.changeFollowBehavior("inTab")}> -- cgit v1.2.3-70-g09d2 From dc0ffc050b5b11e345245927f3d8a813937e588d Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 9 Aug 2020 22:48:26 -0400 Subject: starting to fix link following behavior to audio regions. --- src/client/util/DocumentManager.ts | 2 +- src/client/views/linking/LinkEditor.tsx | 6 +- src/client/views/nodes/AudioBox.scss | 5 + src/client/views/nodes/AudioBox.tsx | 256 ++++++++++++++++---------------- 4 files changed, 140 insertions(+), 129 deletions(-) (limited to 'src/client/views/linking') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 523dbfca0..bd57e7f48 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -152,7 +152,7 @@ export class DocumentManager { const first = getFirstDocView(annotatedDoc); if (first) { annotatedDoc = first.props.Document; - docView?.props.focus(annotatedDoc, false); + first.props.focus(annotatedDoc, false); } } if (docView) { // we have a docView already and aren't forced to create a new one ... just focus on the document. TODO move into view if necessary otherwise just highlight? diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 5832a2181..3ef391a5d 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -355,11 +355,11 @@ export class LinkEditor extends React.Component { this.openDropdown = !this.openDropdown; } - @undoBatch @action - changeFollowBehavior = (follow: string) => { + @undoBatch + changeFollowBehavior = action((follow: string) => { this.openDropdown = false; Doc.GetProto(this.props.linkDoc).followLinkLocation = follow; - } + }) @computed get followingDropdown() { diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 0d787d9af..c80e3af24 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -8,6 +8,11 @@ position: relative; cursor: default; + .audiobox-inner { + width:100%; + height: 100%; + } + .audiobox-buttons { display: flex; width: 100%; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 709422f35..0ea624edf 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -128,37 +128,41 @@ export class AudioBox extends ViewBoxAnnotatableComponent SelectionManager.SelectedDocuments(), selected => { - const sel = selected.length ? selected[0].props.Document : undefined; - let link; - if (sel) { - // for determining if the link is created after recording (since it will use linkTime rather than creation date) - DocListCast(this.dataDoc.links).map(l => { - let { la1, la2, linkTime } = this.getLinkData(l); - if (la1 === sel || la2 === sel) { // if the selected document is linked to this audio - let endTime; - if (la2.audioStart) linkTime = NumCast(la2.audioStart); - if (la1.audioStart) linkTime = NumCast(la1.audioStart); - - if (la1.audioEnd) endTime = NumCast(la1.audioEnd); - if (la2.audioEnd) endTime = NumCast(la2.audioEnd); - - if (linkTime) { - link = true; - this.layoutDoc.playOnSelect && this.recordingStart && sel && !Doc.AreProtosEqual(sel, this.props.Document) && (endTime ? this.playFrom(linkTime, endTime) : this.playFrom(linkTime)); - } - } - }); - } - - // for links created during recording - if (!link) { - this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime()); - this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause(); + if (this.layoutDoc.playOnSelect) { + const sel = selected.length ? selected[0].props.Document : undefined; + const link = sel && DocListCast(this.dataDoc.links).forEach(l => (l.anchor1 === sel || l.anchor2 === sel) && this.playLink(l), false); + // for links created during recording + if (!link) { + this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime()); + this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause(); + } } }); this._scrubbingDisposer = reaction(() => AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime)); } + playLink = (doc: Doc) => { + let link = false; + !Doc.AreProtosEqual(doc, this.props.Document) && DocListCast(this.props.Document.links).forEach(l => { + if (l.anchor1 === doc || l.anchor2 === doc) { + const { la1, la2, linkTime } = this.getLinkData(l); + let startTime = linkTime; + if (la2.audioStart) startTime = NumCast(la2.audioStart); + if (la1.audioStart) startTime = NumCast(la1.audioStart); + + let endTime; + if (la1.audioEnd) endTime = NumCast(la1.audioEnd); + if (la2.audioEnd) endTime = NumCast(la2.audioEnd); + + if (startTime) { + link = true; + this.recordingStart && (endTime ? this.playFrom(startTime, endTime) : this.playFrom(startTime)); + } + } + }); + return link; + } + // for updating the timecode timecodeChanged = () => { const htmlEle = this._ele; @@ -511,6 +515,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent ScriptField)) => { return this.playLink(mark)} pointerEvents={true} NativeHeight={returnZero} NativeWidth={returnZero} @@ -524,112 +529,113 @@ export class AudioBox extends ViewBoxAnnotatableComponent; }; - return
- {!this.path ? -
-
- -
- {this.audioState === "recording" ? -
e.stopPropagation()}> -
- -
-
- -
-
{formatTime(Math.round(NumCast(this.layoutDoc.currentTimecode)))}
+ return
+
+ {!this.path ? +
+
+
- : - } -
: -
-
-
-
-
{ e.stopPropagation(); e.preventDefault(); }} - onPointerDown={e => { - if (e.button === 0 && !e.ctrlKey) { - const rect = (e.target as any).getBoundingClientRect(); - - if (e.target !== this._audioRef.current) { - const wasPaused = this.audioState === "paused"; - this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * this.audioDuration; - wasPaused && this.pause(); +
: +
+
+
+
+
{ e.stopPropagation(); e.preventDefault(); }} + onPointerDown={e => { + if (e.button === 0 && !e.ctrlKey) { + const rect = (e.target as any).getBoundingClientRect(); + + if (e.target !== this._audioRef.current) { + const wasPaused = this.audioState === "paused"; + this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * this.audioDuration; + wasPaused && this.pause(); + } + + this.onPointerDownTimeline(e); + } + }}> +
+ {this.waveform} +
+ {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => + (!m.isLabel) ? + (this.layoutDoc.hideMarkers) ? (null) : +
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation(); }} > +
this.onPointerDown(e, m, true)}>
+ {markerDoc(m, this.rangeScript)} +
this.onPointerDown(e, m, false)}>
+
+ : + (this.layoutDoc.hideLabels) ? (null) : +
+ {markerDoc(m, this.labelScript)} +
+ )} + {DocListCast(this.dataDoc.links).map((l, i) => { + const { la1, la2, linkTime } = this.getLinkData(l); + let startTime = linkTime; + if (la2.audioStart && !la2.audioEnd) { + startTime = NumCast(la2.audioStart); } - this.onPointerDownTimeline(e); - } - }}> -
- {this.waveform} + return !linkTime ? (null) : +
e.stopPropagation()}> + +
Doc.linkFollowHighlight(la1)} + onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { this.playFrom(startTime); e.stopPropagation(); e.preventDefault(); } }} /> +
; + })} + {this._visible ? this.selectionContainer : null} + +
{ e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / this.audioDuration * 100}%`, pointerEvents: "none" }} /> + {this.audio} +
+
+ {formatTime(Math.round(NumCast(this.layoutDoc.currentTimecode)))} +
+
+ {formatTime(Math.round(this.audioDuration))}
- {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => - (!m.isLabel) ? - (this.layoutDoc.hideMarkers) ? (null) : -
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation(); }} > -
this.onPointerDown(e, m, true)}>
- {markerDoc(m, this.rangeScript)} -
this.onPointerDown(e, m, false)}>
-
- : - (this.layoutDoc.hideLabels) ? (null) : -
- {markerDoc(m, this.labelScript)} -
- )} - {DocListCast(this.dataDoc.links).map((l, i) => { - let { la1, la2, linkTime } = this.getLinkData(l); - if (la2.audioStart && !la2.audioEnd) { - linkTime = NumCast(la2.audioStart); - } - - return !linkTime ? (null) : -
e.stopPropagation()}> - -
Doc.linkFollowHighlight(la1)} - onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { this.playFrom(linkTime); e.stopPropagation(); e.preventDefault(); } }} /> -
; - })} - {this._visible ? this.selectionContainer : null} - -
{ e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / this.audioDuration * 100}%`, pointerEvents: "none" }} /> - {this.audio} -
-
- {formatTime(Math.round(NumCast(this.layoutDoc.currentTimecode)))} -
-
- {formatTime(Math.round(this.audioDuration))}
-
- } + }
; } } -- cgit v1.2.3-70-g09d2 From 1d2851b237fd41f8a8726244b095986699f513a5 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 9 Aug 2020 23:09:49 -0400 Subject: fixed playing audio on link follow when audio opens on right or in tab --- src/client/views/linking/LinkMenuItem.tsx | 9 ++++++++- src/client/views/nodes/AudioBox.tsx | 4 +++- 2 files changed, 11 insertions(+), 2 deletions(-) (limited to 'src/client/views/linking') diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index b95fccf2a..21c666a4d 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -162,7 +162,14 @@ export class LinkMenuItem extends React.Component { } if (linkDoc.followLinkLocation && linkDoc.followLinkLocation !== "Default") { - this.props.addDocTab(this.props.destinationDoc, StrCast(linkDoc.followLinkLocation)); + const annotationOn = this.props.destinationDoc.annotationOn as Doc; + this.props.addDocTab(annotationOn instanceof Doc ? annotationOn : this.props.destinationDoc, StrCast(linkDoc.followLinkLocation)); + if (annotationOn) { + setTimeout(() => { + const dv = DocumentManager.Instance.getFirstDocumentView(this.props.destinationDoc); + dv?.props.focus(this.props.destinationDoc, false); + }); + } } else { DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false); } diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 0ea624edf..d689aeadc 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -195,7 +195,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent this.playFrom(seekTimeInSeconds, endTime), 500); + } else if (this._ele && AudioBox.Enabled) { if (seekTimeInSeconds < 0) { if (seekTimeInSeconds > -1) { setTimeout(() => this.playFrom(0), -seekTimeInSeconds * 1000); -- cgit v1.2.3-70-g09d2 From 9351115c7ed7426f6e796a8d9310789c19ed86ef Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 10 Aug 2020 10:45:50 -0400 Subject: fixed warnings --- src/client/views/GestureOverlay.tsx | 59 ---------------------- .../collectionFreeForm/FormatShapePane.tsx | 6 +-- src/client/views/linking/LinkEditor.tsx | 2 +- 3 files changed, 2 insertions(+), 65 deletions(-) (limited to 'src/client/views/linking') diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index a9fc20174..81bb542dd 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -733,19 +733,8 @@ export default class GestureOverlay extends Touchable { this._points.push({ X: left, Y: top }); this._points.push({ X: left, Y: top }); - // this._points.push({ X: left, Y: top }); - - // this._points.push({ X: left, Y: top }); - // this._points.push({ X: left, Y: top }); - - // this._points.push({ X: left, Y: top - 1 }); break; case "triangle": - // this._points.push({ X: left, Y: bottom }); - // this._points.push({ X: right, Y: bottom }); - // this._points.push({ X: (right + left) / 2, Y: top }); - // this._points.push({ X: left, Y: bottom }); - // this._points.push({ X: left, Y: bottom - 1 }); this._points.push({ X: left, Y: bottom }); this._points.push({ X: left, Y: bottom }); @@ -779,59 +768,11 @@ export default class GestureOverlay extends Touchable { } this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top }); this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top - 1 }); - // this._points.push({ X: centerX, Y: top }); - // this._points.push({ X: centerX + radius / 2, Y: top }); - - // this._points.push({ X: right, Y: top + radius / 2 }); - // this._points.push({ X: right, Y: top + radius }); - // this._points.push({ X: right, Y: top + radius }); - // this._points.push({ X: right, Y: bottom - radius / 2 }); - - // this._points.push({ X: right - radius / 2, Y: bottom }); - // this._points.push({ X: right - radius, Y: bottom }); - // this._points.push({ X: right - radius, Y: bottom }); - // this._points.push({ X: left + radius / 2, Y: bottom }); - - // this._points.push({ X: left, Y: bottom - radius / 2 }); - // this._points.push({ X: left, Y: bottom - radius }); - // this._points.push({ X: left, Y: bottom - radius }); - // this._points.push({ X: left, Y: top + radius / 2 }); - - // this._points.push({ X: left + radius / 2, Y: top }); - // this._points.push({ X: left + radius, Y: top }); - - - - - - break; case "line": - // const firstx = this._points[0].X; - // const firsty = this._points[0].Y; - // const lastx = this._points[this._points.length - 1].X; - // const lasty = this._points[this._points.length - 1].Y; - // const fourth = (lastx - firstx) / 4; - // const m = (lasty - firsty) / (lastx - firstx); - // const b = firsty - m * firstx; this._points.push({ X: firstx, Y: firsty }); this._points.push({ X: firstx, Y: firsty }); - //removed points - // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); - // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); - // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); - // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); - - // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); - // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); - // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); - // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); - - // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); - // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); - // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); - // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); this._points.push({ X: firstx + 4 * fourth, Y: m * (firstx + 4 * fourth) + b }); this._points.push({ X: firstx + 4 * fourth, Y: m * (firstx + 4 * fourth) + b }); diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index c53e4de0f..1ffa2fbed 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -173,11 +173,7 @@ export default class FormatShapePane extends AntimodeMenu { const newPoints: { X: number, Y: number }[] = []; var counter = 0; for (var k = 0; k < index; k++) { - for (var l = 0; l < control.length; l++) { - if (pts[k].X === control[l].X && pts[k].Y === control[l].Y) { - counter++; - } - } + control.forEach(pt => (pts[k].X === pt.X && pts[k].Y === pt.Y) && counter++); } //decide where to put the new coordinate const spNum = Math.floor(counter / 2) * 4 + 2; diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 1d71fff04..c9e39cf7b 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -359,7 +359,7 @@ export class LinkEditor extends React.Component { changeFollowBehavior = action((follow: string) => { this.openDropdown = false; Doc.GetProto(this.props.linkDoc).followLinkLocation = follow; - }) + }); @computed get followingDropdown() { -- cgit v1.2.3-70-g09d2