diff options
Diffstat (limited to 'src')
4 files changed, 67 insertions, 63 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 5b1f3c01c..ef4b7b9d2 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1504,32 +1504,30 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF @computed get presPaths() { const presPaths = "presPaths" + (this.props.presPaths ? "" : "-hidden"); - if (PresBox.Instance) return ( - <> - {!this.props.presPaths ? (null) : <><div>{PresBox.Instance.order}</div> - <svg className={presPaths}> - <defs> - <marker id="arrow" markerWidth="3" overflow="visible" markerHeight="3" refX="5" refY="5" orient="auto" markerUnits="strokeWidth"> - <path d="M0,0 L0,6 L9,3 z" fill="#69a6db" /> - </marker> - <marker id="square" markerWidth="3" markerHeight="3" overflow="visible" - refX="5" refY="5" orient="auto" markerUnits="strokeWidth"> - <path d="M 5,1 L 9,5 5,9 1,5 z" fill="#69a6db" /> - </marker> - <marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" - orient="auto" overflow="visible"> - <rect x="1" y="1" width="5" height="5" fill="#69a6db" /> - </marker> - - <marker id="markerArrow" markerWidth="5" markerHeight="5" refX="2" refY="7" - orient="auto" overflow="visible"> - <path d="M2,2 L2,13 L8,7 L2,2" fill="#69a6db" /> - </marker> - </defs>; + return !(PresBox.Instance) ? (null) : (<> + {!this.props.presPaths ? (null) : <><div>{PresBox.Instance.order}</div> + <svg className={presPaths}> + <defs> + <marker id="arrow" markerWidth="3" overflow="visible" markerHeight="3" refX="5" refY="5" orient="auto" markerUnits="strokeWidth"> + <path d="M0,0 L0,6 L9,3 z" fill="#69a6db" /> + </marker> + <marker id="square" markerWidth="3" markerHeight="3" overflow="visible" + refX="5" refY="5" orient="auto" markerUnits="strokeWidth"> + <path d="M 5,1 L 9,5 5,9 1,5 z" fill="#69a6db" /> + </marker> + <marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" + orient="auto" overflow="visible"> + <rect x="1" y="1" width="5" height="5" fill="#69a6db" /> + </marker> + + <marker id="markerArrow" markerWidth="5" markerHeight="5" refX="2" refY="7" + orient="auto" overflow="visible"> + <path d="M2,2 L2,13 L8,7 L2,2" fill="#69a6db" /> + </marker> + </defs>; {PresBox.Instance.paths} - </svg></>} - </> - ); + </svg></>} + </>); } render() { diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 11fecc0c2..eba1046b2 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -23,8 +23,8 @@ import { Networking } from "../../Network"; import { LinkAnchorBox } from "./LinkAnchorBox"; import { List } from "../../../fields/List"; import { Scripting } from "../../util/Scripting"; -import Waveform from "react-audio-waveform" -import axios from "axios" +import Waveform from "react-audio-waveform"; +import axios from "axios"; const _global = (window /* browser */ || global /* node */) as any; declare class MediaRecorder { @@ -375,7 +375,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD @action end(marker: number) { this._hold = false; - let newMarker = Docs.Create.LabelDocument({ title: ComputedField.MakeFunction(`formatToTime(self.audioStart) + "-" + formatToTime(self.audioEnd)`) as any, isLabel: false, useLinkSmallAnchor: true, hideLinkButton: true, audioStart: this._start, audioEnd: marker, _showSidebar: false, _autoHeight: true, annotationOn: this.props.Document }); + const newMarker = Docs.Create.LabelDocument({ title: ComputedField.MakeFunction(`formatToTime(self.audioStart) + "-" + formatToTime(self.audioEnd)`) as any, isLabel: false, useLinkSmallAnchor: true, hideLinkButton: true, audioStart: this._start, audioEnd: marker, _showSidebar: false, _autoHeight: true, annotationOn: this.props.Document }); newMarker.data = ""; if (this.dataDoc[this.annotationKey]) { this.dataDoc[this.annotationKey].push(newMarker); @@ -429,7 +429,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD const rect = await (e.target as any).getBoundingClientRect(); - let newTime = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); + const newTime = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); this.changeMarker(this._currMarker, newTime); } @@ -437,11 +437,11 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD // updates the marker with the new time @action changeMarker = (m: any, time: any) => { - for (let i = 0; i < this.dataDoc[this.annotationKey].length; i++) { - if (this.isSame(this.dataDoc[this.annotationKey][i], m)) { - this._left ? this.dataDoc[this.annotationKey][i].audioStart = time : this.dataDoc[this.annotationKey][i].audioEnd = time; + DocListCast(this.dataDoc[this.annotationKey]).forEach((marker: Doc) => { + if (this.isSame(marker, m)) { + this._left ? marker.audioStart = time : marker.audioEnd = time; } - } + }); } // checks if the two markers are the same with start and end time @@ -457,7 +457,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD const increment = NumCast(this.layoutDoc.duration) / 500; this._count = []; for (let i = 0; i < 500; i++) { - this._count.push([increment * i, 0]) + this._count.push([increment * i, 0]); } } @@ -468,7 +468,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD this._first = false; this.markers(); } - let max = 0 + let max = 0; for (let i = 0; i < 500; i++) { if (this._count[i][0] >= m.audioStart && this._count[i][0] <= m.audioEnd) { @@ -490,7 +490,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD if (this.dataDoc.markerAmount < max) { this.dataDoc.markerAmount = max; } - return max - 1 + return max - 1; } // returns the audio waveform @@ -509,27 +509,27 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD // decodes the audio file into peaks for generating the waveform @action buckets = async () => { - let audioCtx = new (window.AudioContext)(); + const audioCtx = new (window.AudioContext)(); axios({ url: this.path, responseType: "arraybuffer" }) .then(response => { - let audioData = response.data; + const audioData = response.data; audioCtx.decodeAudioData(audioData, action(buffer => { - let decodedAudioData = buffer.getChannelData(0); + const decodedAudioData = buffer.getChannelData(0); const NUMBER_OF_BUCKETS = 100; - let bucketDataSize = Math.floor(decodedAudioData.length / NUMBER_OF_BUCKETS); + const bucketDataSize = Math.floor(decodedAudioData.length / NUMBER_OF_BUCKETS); for (let i = 0; i < NUMBER_OF_BUCKETS; i++) { - let startingPoint = i * bucketDataSize; - let endingPoint = i * bucketDataSize + bucketDataSize; + const startingPoint = i * bucketDataSize; + const endingPoint = i * bucketDataSize + bucketDataSize; let max = 0; for (let j = startingPoint; j < endingPoint; j++) { if (decodedAudioData[j] > max) { max = decodedAudioData[j]; } } - let size = Math.abs(max); + const size = Math.abs(max); this._buckets.push(size / 2); } @@ -560,36 +560,36 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD update = (width: number, height: number) => { if (height) { this._height = 0.8 * NumCast(this.layoutDoc._height); - let canvas2 = document.getElementsByTagName("canvas")[0]; + const canvas2 = document.getElementsByTagName("canvas")[0]; if (canvas2) { - let oldWidth = canvas2.width; - let oldHeight = canvas2.height; + const oldWidth = canvas2.width; + const oldHeight = canvas2.height; canvas2.style.height = `${this._height}`; canvas2.style.width = `${width}`; - let ratio1 = oldWidth / window.innerWidth; - let ratio2 = oldHeight / window.innerHeight; - let context = canvas2.getContext('2d'); + const ratio1 = oldWidth / window.innerWidth; + const ratio2 = oldHeight / window.innerHeight; + const context = canvas2.getContext('2d'); if (context) { - context.scale(ratio1, ratio2) + context.scale(ratio1, ratio2); } } - let canvas1 = document.getElementsByTagName("canvas")[1]; + const canvas1 = document.getElementsByTagName("canvas")[1]; if (canvas1) { - let oldWidth = canvas1.width; - let oldHeight = canvas1.height; + const oldWidth = canvas1.width; + const oldHeight = canvas1.height; canvas1.style.height = `${this._height}`; canvas1.style.width = `${width}`; - let ratio1 = oldWidth / window.innerWidth; - let ratio2 = oldHeight / window.innerHeight; - let context = canvas1.getContext('2d'); + const ratio1 = oldWidth / window.innerWidth; + const ratio2 = oldHeight / window.innerHeight; + const context = canvas1.getContext('2d'); if (context) { - context.scale(ratio1, ratio2) + context.scale(ratio1, ratio2); } - let parent = canvas1.parentElement; + const parent = canvas1.parentElement; if (parent) { parent.style.width = `${width}`; parent.style.height = `${this._height}`; @@ -665,7 +665,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD (!m.isLabel) ? (this.layoutDoc.hideMarkers) ? (null) : rect = - <div className={this.props.PanelHeight() < 32 ? "audiobox-marker-minicontainer" : "audiobox-marker-container1"} title={`${formatTime(Math.round(NumCast(m.audioStart)))}` + " - " + `${formatTime(Math.round(NumCast(m.audioEnd)))}`} key={i} id={"audiobox-marker-container1"} style={{ left: `${NumCast(m.audioStart) / NumCast(this.dataDoc.duration, 1) * 100}%`, width: `${(NumCast(m.audioEnd) - NumCast(m.audioStart)) / NumCast(this.dataDoc.duration, 1) * 100}%`, height: `${1 / (this.dataDoc.markerAmount + 1) * 100}%`, top: `${this.isOverlap(m) * 1 / (this.dataDoc.markerAmount + 1) * 100}%` }} onClick={e => { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation() }} > + <div key={i} id={"audiobox-marker-container1"} className={this.props.PanelHeight() < 32 ? "audiobox-marker-minicontainer" : "audiobox-marker-container1"} + title={`${formatTime(Math.round(NumCast(m.audioStart)))}` + " - " + `${formatTime(Math.round(NumCast(m.audioEnd)))}`} + style={{ + left: `${NumCast(m.audioStart) / NumCast(this.dataDoc.duration, 1) * 100}%`, + width: `${(NumCast(m.audioEnd) - NumCast(m.audioStart)) / NumCast(this.dataDoc.duration, 1) * 100}%`, height: `${1 / (this.dataDoc.markerAmount + 1) * 100}%`, + top: `${this.isOverlap(m) * 1 / (this.dataDoc.markerAmount + 1) * 100}%` + }} + onClick={e => { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation(); }} > <div className="left-resizer" onPointerDown={e => this.onPointerDown(e, m, true)}></div> <DocumentView {...this.props} Document={m} diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 230137584..502fd51f3 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -137,7 +137,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> this.gotoDocument(nextSelected, this.itemIndex); const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null); if (activeNext && targetNext.type === DocumentType.AUDIO && activeNext.playAuto) { - } else { this._moveOnFromAudio = false }; + } else this._moveOnFromAudio = false; } } @@ -1646,7 +1646,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> </select> <div className="presBox-presentPanel" style={{ opacity: this.childDocs.length > 0 ? 1 : 0.3 }}> <span className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`}> - <div className="presBox-button-left" onClick={() => { if (this.childDocs.length > 0) this.layoutDoc.presStatus = "manual" }}> + <div className="presBox-button-left" onClick={() => (this.childDocs.length > 0) && (this.layoutDoc.presStatus = "manual")}> <FontAwesomeIcon icon={"play-circle"} /> <div style={{ display: this.props.PanelWidth() > 200 ? "inline-flex" : "none" }}> Present</div> </div> diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 4b06f2800..b0bf54be6 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -305,7 +305,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp // for inserting timestamps insertTime = () => { - let linkTime; if (this._first) { this._first = false; DocListCast(this.dataDoc.links).map((l, i) => { @@ -318,7 +317,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._linkTime = NumCast(l.anchor1_timecode); } - }) + }); } this._currentTime = Date.now(); let time; |