diff options
| -rw-r--r-- | src/client/util/RecordingApi.ts (renamed from src/client/apis/recording/recordingApi.ts) | 97 | ||||
| -rw-r--r-- | src/client/views/Main.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 5 | ||||
| -rw-r--r-- | src/client/views/nodes/RecordingBox/RecordingBox.tsx | 14 | ||||
| -rw-r--r-- | src/client/views/nodes/RecordingBox/RecordingView.tsx | 26 | ||||
| -rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 14 |
6 files changed, 95 insertions, 63 deletions
diff --git a/src/client/apis/recording/recordingApi.ts b/src/client/util/RecordingApi.ts index b57e675b7..c4f76282c 100644 --- a/src/client/apis/recording/recordingApi.ts +++ b/src/client/util/RecordingApi.ts @@ -1,7 +1,6 @@ -import { CollectionFreeFormView } from "../../views/collections/collectionFreeForm"; -import React, { useState } from "react"; +import { CollectionFreeFormView } from "../views/collections/collectionFreeForm"; import { IReactionDisposer, observable, reaction } from "mobx"; -import { NumCast } from "../../../fields/Types"; +import { NumCast } from "../../fields/Types"; type Movement = { time: number, @@ -31,7 +30,7 @@ export class RecordingApi { // create static instance and getter for global use @observable static _instance: RecordingApi; - public static get instance(): RecordingApi { return RecordingApi._instance } + public static get Instance(): RecordingApi { return RecordingApi._instance } public constructor() { // init the global instance RecordingApi._instance = this; @@ -54,7 +53,7 @@ export class RecordingApi { return this.currentPresentation.startDate === null } - public start = (view: CollectionFreeFormView, meta?: Object): Error | undefined => { + public start = (meta?: Object): Error | undefined => { // check if already init a presentation if (!this.isInitPresenation) { console.error('[recordingApi.ts] start() failed: current presentation data exists. please call clear() first.') @@ -74,22 +73,25 @@ export class RecordingApi { this.isRecording = true } - public clear = (): Error | undefined => { + public clear = (): Error | Presentation => { // TODO: maybe archive the data? if (this.isRecording) { - console.error('[recordingApi.ts] clear() failed: currently recording presentation. call pause() or finish() first') + console.error('[recordingApi.ts] clear() failed: currently recording presentation. call pause() first') return new Error('[recordingApi.ts] clear()') } + const presCopy = { ...this.currentPresentation } + // clear presenation data this.currentPresentation = RecordingApi.NULL_PRESENTATION // clear isRecording this.isRecording = false // clear absoluteStart this.absoluteStart = -1 - // clear the disposeFunc this.disposeFunc = null + + return presCopy; } public pause = (): Error | undefined => { @@ -118,15 +120,15 @@ export class RecordingApi { this.absoluteStart = absoluteTimePaused } - public finish = (): Error | Presentation => { - if (this.isInitPresenation) { - console.error('[recordingApi.ts] finish() failed: no presentation data. try calling start() first') - return new Error('[recordingApi.ts] finish()') - } + // public finish = (): Error | Presentation => { + // if (this.isInitPresenation) { + // console.error('[recordingApi.ts] finish() failed: no presentation data. try calling start() first') + // return new Error('[recordingApi.ts] finish()') + // } - // return a copy of the the presentation data - return { ...this.currentPresentation } - } + // // return a copy of the the presentation data + // return { ...this.currentPresentation } + // } private trackMovements = (panX: number, panY: number): Error | undefined => { // ensure we are recording @@ -152,7 +154,7 @@ export class RecordingApi { // set the FFView that will be used in a reaction to track the movements public setRecordingFFView = (view: CollectionFreeFormView): void => { // set the view to the current view - if (view === null) return; + if (view === null || view === this.playFFView) return; //this.recordingFFView = view; // set the reaction to track the movements @@ -175,22 +177,23 @@ export class RecordingApi { private playFFView: CollectionFreeFormView | null; private timers: Timer[] | null; - public followMovements = (presentation: Presentation): undefined | Error => { - if (presentation.startDate === null || this.playFFView === null) { - return new Error('[recordingApi.ts] followMovements() failed: no presentation data or no view') - } + // public followMovements = (presentation: Presentation): undefined | Error => { + // console.log(presentation) + // if (presentation.startDate === null || this.playFFView === null) { + // return new Error('[recordingApi.ts] followMovements() failed: no presentation data or no view') + // } - const document = this.playFFView.Document - const { movements } = presentation - this.timers = movements.map(movement => { - const { panX, panY, time } = movement - return new Timer(() => { - document._panX = panX; - document._panY = panY; - // TODO: consider cleaning this array to null or some state - }, time) - }) - } + // const document = this.playFFView.Document + // const { movements } = presentation + // this.timers = movements.map(movement => { + // const { panX, panY, time } = movement + // return new Timer(() => { + // document._panX = panX; + // document._panY = panY; + // // TODO: consider cleaning this array to null or some state + // }, time) + // }) + // } public pauseMovements = (): undefined | Error => { if (this.playFFView === null) { @@ -207,22 +210,22 @@ export class RecordingApi { this.timers?.forEach(timer => timer.resume()) } - // public followMovements = (presentation: Presentation): undefined | Error => { - // if (presentation.startDate === null || this.playFFView === null) { - // return new Error('[recordingApi.ts] followMovements() failed: no presentation data or no view') - // } + public followMovements = (presentation: Presentation): undefined | Error => { + if (presentation.startDate === null || this.playFFView === null) { + return new Error('[recordingApi.ts] followMovements() failed: no presentation data or no view') + } - // const document = this.playFFView.Document - // const { movements } = presentation - // movements.forEach(movement => { - // const { panX, panY, time } = movement - // // set the pan to what was stored - // setTimeout(() => { - // document._panX = panX; - // document._panY = panY; - // }, time) - // }) - // } + const document = this.playFFView.Document + const { movements } = presentation + movements.forEach(movement => { + const { panX, panY, time } = movement + // set the pan to what was stored + setTimeout(() => { + document._panX = panX; + document._panY = panY; + }, time) + }) + } // Unfinished code for tracing multiple free form views // export let pres: Map<CollectionFreeFormView, IReactionDisposer> = new Map() diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 8560ccb29..517fe097c 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -8,6 +8,7 @@ import { AssignAllExtensions } from "../../extensions/General/Extensions"; import { Docs } from "../documents/Documents"; import { CurrentUserUtils } from "../util/CurrentUserUtils"; import { LinkManager } from "../util/LinkManager"; +import { RecordingApi } from "../util/RecordingApi"; import { CollectionView } from "./collections/CollectionView"; import { MainView } from "./MainView"; @@ -36,5 +37,6 @@ AssignAllExtensions(); const expires = "expires=" + d.toUTCString(); document.cookie = `loadtime=${loading};${expires};path=/`; new LinkManager(); + new RecordingApi; ReactDOM.render(<MainView />, document.getElementById('root')); })();
\ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 35bd9cf79..f74e526b6 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -54,7 +54,7 @@ import "./CollectionFreeFormView.scss"; import { MarqueeView } from "./MarqueeView"; import React = require("react"); import e = require("connect-flash"); -import { RecordingApi } from "../../../apis/recording/RecordingApi"; +import { RecordingApi } from "../../../util/RecordingApi"; export const panZoomSchema = createSchema({ _panX: "number", @@ -965,6 +965,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @action setPan(panX: number, panY: number, panTime: number = 0, clamp: boolean = false) { + // set the current FFview to the tab being panned. + RecordingApi.Instance.setRecordingFFView(this) + if (!this.isAnnotationOverlay && clamp) { // this section wraps the pan position, horizontally and/or vertically whenever the content is panned out of the viewing bounds const docs = this.childLayoutPairs.map(pair => pair.layout).filter(doc => doc instanceof Doc); diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx index 86358e838..1b17476f7 100644 --- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx @@ -1,7 +1,7 @@ import { action, observable } from "mobx"; import { observer } from "mobx-react"; import * as React from "react"; -import { AudioField, VideoField } from "../../../../fields/URLField"; +import { VideoField } from "../../../../fields/URLField"; import { Upload } from "../../../../server/SharedMediaTypes"; import { ViewBoxBaseComponent } from "../../DocComponent"; import { FieldView } from "../FieldView"; @@ -9,6 +9,8 @@ import { VideoBox } from "../VideoBox"; import { RecordingView } from './RecordingView'; import { DocumentType } from "../../../documents/DocumentTypes"; +import { RecordingApi } from "../../../util/RecordingApi"; + @observer export class RecordingBox extends ViewBoxBaseComponent() { @@ -31,17 +33,19 @@ export class RecordingBox extends ViewBoxBaseComponent() { @action setResult = (info: Upload.FileInformation) => { - console.log("Setting result to " + info) + // console.log("Setting result to " + info) this.result = info - console.log(this.result.accessPaths.agnostic.client) + // console.log(this.result.accessPaths.agnostic.client) this.dataDoc.type = DocumentType.VID; - console.log(this.videoDuration) + // console.log(this.videoDuration) this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration; this.layoutDoc.layout = VideoBox.LayoutString(this.fieldKey); // this.dataDoc.nativeWidth = this.dataDoc.nativeHeight = undefined; // this.layoutDoc._fitWidth = undefined; - this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.agnostic.client); + this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.agnostic.client); + // stringify the presenation and store it + this.dataDoc[this.fieldKey + "-presentation"] = JSON.stringify(RecordingApi.Instance.clear()); } render() { diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx index d99492095..870ef87d7 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx @@ -8,7 +8,7 @@ import { IconContext } from "react-icons"; import { Networking } from '../../../Network'; import { Upload } from '../../../../server/SharedMediaTypes'; -import { RecordingApi } from '../../../apis/recording/RecordingApi'; +import { RecordingApi } from '../../../util/RecordingApi'; enum RecordingStatus { @@ -57,11 +57,11 @@ export function RecordingView(props: IRecordingViewProps) { height: 720, }, // audio: true, - // audio: { - // echoCancellation: true, - // noiseSuppression: true, - // sampleRate: 44100 - // } + audio: { + echoCancellation: true, + noiseSuppression: true, + sampleRate: 44100 + } } useEffect(() => { @@ -159,7 +159,10 @@ export function RecordingView(props: IRecordingViewProps) { // } videoRecorder.current.onstart = (event: any) => { - setRecording(true); + setRecording(true); + // TODO: update names + // RecordingApi.Instance.clear(); + RecordingApi.Instance.start(); } videoRecorder.current.onstop = () => { @@ -172,7 +175,8 @@ export function RecordingView(props: IRecordingViewProps) { // reset the temporary chunks videoChunks = [] setRecording(false); - setFinished(true); + setFinished(true); + RecordingApi.Instance.pause(); } // recording paused @@ -182,12 +186,14 @@ export function RecordingView(props: IRecordingViewProps) { // reset the temporary chunks videoChunks = [] - setRecording(false); + setRecording(false); + RecordingApi.Instance.pause(); } videoRecorder.current.onresume = async (event: any) => { await startShowingStream(); - setRecording(true); + setRecording(true); + RecordingApi.Instance.resume(); } videoRecorder.current.start(200) diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index e57cb1abe..7364a64d9 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -28,6 +28,7 @@ import { AnchorMenu } from "../pdf/AnchorMenu"; import { StyleProp } from "../StyleProvider"; import { FieldView, FieldViewProps } from './FieldView'; import "./VideoBox.scss"; +import { RecordingApi } from "../../util/RecordingApi"; const path = require('path'); @@ -117,6 +118,12 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp return field?.url.href ?? vfield?.url.href ?? ""; } + // returns the presentation data if it exists, null otherwise + @computed get presentation() { + const data = this.dataDoc[this.fieldKey + '-presentation']; + return data ? JSON.parse(data) : null; + } + @computed private get timeline() { return this._stackedTimeline; } private get transition() { return this._clicking ? "left 0.5s, width 0.5s, height 0.5s" : ""; } // css transition for hiding/showing timeline @@ -147,6 +154,13 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // plays video @action public Play = (update: boolean = true) => { + // if presentation isn't null, call followmovements on the recording api + if (this.presentation) { + const err = RecordingApi.Instance.followMovements(this.presentation); + if (err) console.log(err); + } + + this._playing = true; const eleTime = this.player?.currentTime || 0; if (this.timeline) { |