aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/util/ReplayMovements.ts27
-rw-r--r--src/client/util/TrackMovements.ts2
-rw-r--r--src/client/views/nodes/RecordingBox/RecordingBox.tsx106
-rw-r--r--src/client/views/nodes/RecordingBox/RecordingView.tsx10
4 files changed, 75 insertions, 70 deletions
diff --git a/src/client/util/ReplayMovements.ts b/src/client/util/ReplayMovements.ts
index 40261985a..22cca4a2e 100644
--- a/src/client/util/ReplayMovements.ts
+++ b/src/client/util/ReplayMovements.ts
@@ -1,13 +1,11 @@
+import { IReactionDisposer, observable, reaction } from 'mobx';
+import { Doc, IdToDoc } from '../../fields/Doc';
+import { CollectionDockingView } from '../views/collections/CollectionDockingView';
import { CollectionFreeFormView } from '../views/collections/collectionFreeForm';
-import { IReactionDisposer, observable, observe, reaction } from 'mobx';
-import { Doc } from '../../fields/Doc';
+import { OpenWhereMod } from '../views/nodes/DocumentView';
import { VideoBox } from '../views/nodes/VideoBox';
import { DocumentManager } from './DocumentManager';
-import { CollectionDockingView } from '../views/collections/CollectionDockingView';
-import { DocServer } from '../DocServer';
import { Movement, Presentation } from './TrackMovements';
-import { OpenWhereMod } from '../views/nodes/DocumentView';
-import { returnTransparent } from '../../Utils';
export class ReplayMovements {
private timers: NodeJS.Timeout[] | null;
@@ -61,7 +59,7 @@ export class ReplayMovements {
return;
}
- const docIdtoDoc = this.loadPresentation(presentation);
+ this.loadPresentation(presentation);
this.videoBoxDisposeFunc = reaction(
() => ({ playing: videoBox._playing, timeViewed: videoBox.player?.currentTime || 0 }),
@@ -94,13 +92,14 @@ export class ReplayMovements {
throw '[recordingApi.ts] followMovements() failed: no presentation data';
}
- // generate a set of all unique docIds
- const docs = new Set<Doc>();
- for (const { doc } of movements) {
- if (!docs.has(doc)) docs.add(doc);
- }
-
- return docs;
+ movements.forEach((movement, i) => {
+ if (typeof movement.doc === 'string') {
+ movements[i].doc = IdToDoc(movement.doc);
+ if (!movements[i].doc) {
+ console.log('ERROR: tracked doc not found');
+ }
+ }
+ });
};
// returns undefined if the docView isn't open on the screen
diff --git a/src/client/util/TrackMovements.ts b/src/client/util/TrackMovements.ts
index 2f16307b3..cb8225643 100644
--- a/src/client/util/TrackMovements.ts
+++ b/src/client/util/TrackMovements.ts
@@ -234,7 +234,7 @@ export class TrackMovements {
const movement: Movement = { time, panX, panY, scale, doc };
// add that movement to the current presentation data's movement array
- this.currentPresentation.movements && this.currentPresentation.movements.push(movement);
+ this.currentPresentation.movements?.push(movement);
};
// method that concatenates an array of presentatations into one
diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index 0ff7c4292..f406ffbea 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -1,58 +1,64 @@
-import { action, observable } from "mobx";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { VideoField } from "../../../../fields/URLField";
-import { Upload } from "../../../../server/SharedMediaTypes";
-import { ViewBoxBaseComponent } from "../../DocComponent";
-import { FieldView } from "../FieldView";
-import { VideoBox } from "../VideoBox";
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { VideoField } from '../../../../fields/URLField';
+import { Upload } from '../../../../server/SharedMediaTypes';
+import { ViewBoxBaseComponent } from '../../DocComponent';
+import { FieldView } from '../FieldView';
+import { VideoBox } from '../VideoBox';
import { RecordingView } from './RecordingView';
-import { DocumentType } from "../../../documents/DocumentTypes";
-import { Presentation } from "../../../util/TrackMovements";
-import { Doc } from "../../../../fields/Doc";
-import { Id } from "../../../../fields/FieldSymbols";
-
+import { DocumentType } from '../../../documents/DocumentTypes';
+import { Presentation } from '../../../util/TrackMovements';
+import { Doc } from '../../../../fields/Doc';
+import { Id } from '../../../../fields/FieldSymbols';
@observer
export class RecordingBox extends ViewBoxBaseComponent() {
+ public static LayoutString(fieldKey: string) {
+ return FieldView.LayoutString(RecordingBox, fieldKey);
+ }
- public static LayoutString(fieldKey: string) { return FieldView.LayoutString(RecordingBox, fieldKey); }
-
- private _ref: React.RefObject<HTMLDivElement> = React.createRef();
+ private _ref: React.RefObject<HTMLDivElement> = React.createRef();
- constructor(props: any) {
+ constructor(props: any) {
super(props);
- }
-
- componentDidMount() {
- Doc.SetNativeWidth(this.dataDoc, 1280);
- Doc.SetNativeHeight(this.dataDoc, 720);
- }
-
- @observable result: Upload.AccessPathInfo | undefined = undefined
- @observable videoDuration: number | undefined = undefined
-
- @action
- setVideoDuration = (duration: number) => {
- this.videoDuration = duration
- }
-
- @action
- setResult = (info: Upload.AccessPathInfo, presentation?: Presentation) => {
- this.result = info
- this.dataDoc.type = DocumentType.VID;
- this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration;
-
- this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey);
- this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.client);
- this.dataDoc[this.fieldKey + "-recorded"] = true;
- // stringify the presentation and store it
- presentation?.movements && (this.dataDoc[this.fieldKey + "-presentation"] = JSON.stringify(presentation));
- }
-
- render() {
- return <div className="recordingBox" ref={this._ref}>
- {!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} id={this.rootDoc.proto?.[Id] || ''} />}
- </div>;
- }
+ }
+
+ componentDidMount() {
+ Doc.SetNativeWidth(this.dataDoc, 1280);
+ Doc.SetNativeHeight(this.dataDoc, 720);
+ }
+
+ @observable result: Upload.AccessPathInfo | undefined = undefined;
+ @observable videoDuration: number | undefined = undefined;
+
+ @action
+ setVideoDuration = (duration: number) => {
+ this.videoDuration = duration;
+ };
+
+ @action
+ setResult = (info: Upload.AccessPathInfo, presentation?: Presentation) => {
+ this.result = info;
+ this.dataDoc.type = DocumentType.VID;
+ this.dataDoc[this.fieldKey + '-duration'] = this.videoDuration;
+
+ this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey);
+ this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.client);
+ this.dataDoc[this.fieldKey + '-recorded'] = true;
+ // stringify the presentation and store it
+ if (presentation?.movements) {
+ const presCopy = { ...presentation };
+ presCopy.movements = presentation.movements.map(movement => ({ ...movement, doc: movement.doc[Id] })) as any;
+ this.dataDoc[this.fieldKey + '-presentation'] = JSON.stringify(presCopy);
+ }
+ };
+
+ render() {
+ return (
+ <div className="recordingBox" ref={this._ref}>
+ {!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} id={this.rootDoc.proto?.[Id] || ''} />}
+ </div>
+ );
+ }
}
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 6efe62e0b..424ebc384 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -1,14 +1,14 @@
import * as React from 'react';
-import './RecordingView.scss';
import { useEffect, useRef, useState } from 'react';
-import { ProgressBar } from './ProgressBar';
-import { MdBackspace } from 'react-icons/md';
-import { FaCheckCircle } from 'react-icons/fa';
import { IconContext } from 'react-icons';
-import { Networking } from '../../../Network';
+import { FaCheckCircle } from 'react-icons/fa';
+import { MdBackspace } from 'react-icons/md';
import { Upload } from '../../../../server/SharedMediaTypes';
import { returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils';
+import { Networking } from '../../../Network';
import { Presentation, TrackMovements } from '../../../util/TrackMovements';
+import { ProgressBar } from './ProgressBar';
+import './RecordingView.scss';
export interface MediaSegment {
videoChunks: any[];
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-21 19:48:17 +0000