diff options
| -rw-r--r-- | src/client/apis/recording/RecordingApi.ts (renamed from src/client/apis/recording/recordingApi.tsx) | 36 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 27 | ||||
| -rw-r--r-- | src/client/views/nodes/RecordingBox/RecordingView.tsx | 19 |
3 files changed, 37 insertions, 45 deletions
diff --git a/src/client/apis/recording/recordingApi.tsx b/src/client/apis/recording/RecordingApi.ts index 55714f03b..64243e443 100644 --- a/src/client/apis/recording/recordingApi.tsx +++ b/src/client/apis/recording/RecordingApi.ts @@ -1,7 +1,7 @@ import { CollectionFreeFormView } from "../../views/collections/collectionFreeForm"; import React, { useState } from "react"; -export function RecordingApi() { +export namespace RecordingApi { type Movement = { time: number, @@ -9,7 +9,7 @@ export function RecordingApi() { panY: number, } - type Presentation = { + export type Presentation = { movements: Array<Movement> meta: Object, startDate: Date | null, @@ -25,7 +25,7 @@ export function RecordingApi() { const [isRecording, setIsRecording] = useState(false) const [absoluteStart, setAbsoluteStart] = useState<number>(-1) - const initAndStart = (view: CollectionFreeFormView, meta?: Object): Error | undefined => { + export const initAndStart = (meta?: Object): Error | undefined => { // check if already init a presentation if (currentPresentation.startDate !== null) { console.error('[recordingApi.ts] start() failed: current presentation data exists. please call clear() first.') @@ -46,7 +46,7 @@ export function RecordingApi() { setIsRecording(true) } - const clear = (): Error | undefined => { + export const clear = (): Error | undefined => { // TODO: maybe archive the data? if (isRecording) { console.error('[recordingApi.ts] clear() failed: currently recording presentation. call pause() or finish() first') @@ -55,17 +55,17 @@ export function RecordingApi() { // clear presenation data setCurrentPresenation(NULL_PRESENTATION) - // clear isRecording + // set isRecording false setIsRecording(false) - // clear absoluteStart + // default absoluteStart setAbsoluteStart(-1) } - const pause = (): Error | undefined => { + export const pause = (): Error | undefined => { if (currentPresentation.startDate === null) { console.error('[recordingApi.ts] pause() failed: no presentation started. try calling init() first') - return new Error('[recordingApi.ts] pause(): no presenation') + return new Error('[recordingApi.ts] pause()') } // don't allow track movments setIsRecording(false) @@ -75,7 +75,7 @@ export function RecordingApi() { setAbsoluteStart(timestamp) } - const resume = () => { + export const resume = () => { if (currentPresentation.startDate === null) { console.error('[recordingApi.ts] resume() failed: no presentation started. try calling init() first') return new Error('[recordingApi.ts] resume()') @@ -97,24 +97,26 @@ export function RecordingApi() { }) } - const finish = (): Error | Presentation => { + export const finish = (): Error | Presentation => { if (currentPresentation.movements === null) { console.error('[recordingApi.ts] finish() failed: no presentation data. try calling init() first') return new Error('[recordingApi.ts] finish()') } // make copy and clear this class's data - const returnCopy = { ...currentPresentation } - clear() + // const returnCopy = { ...currentPresentation } + // clear() + + // // return the copy + // return returnCopy - // return the copy - return returnCopy + return currentPresentation } - const trackMovements = (panX: number, panY: number): Error | undefined => { + export const trackMovements = (panX: number, panY: number): Error | undefined => { // ensure we are recording if (!isRecording) { - console.error('[recordingApi.ts] pause() failed: recording is paused()') + console.error('[recordingApi.ts] pause() failed: recording is paused()') return new Error('[recordingApi.ts] pause()') } @@ -134,7 +136,7 @@ export function RecordingApi() { // TOOD: need to pause all intervals if possible lol // TODO: extract this into different class with pause and resume recording - const followMovements = (presentation: Presentation, docView: CollectionFreeFormView): void => { + export const followMovements = (presentation: Presentation, docView: CollectionFreeFormView): void => { const document = docView.Document const { movements } = presentation diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 6db2269c4..239aacd4f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -51,6 +51,7 @@ import "./CollectionFreeFormView.scss"; import { MarqueeView } from "./MarqueeView"; import React = require("react"); import e = require("connect-flash"); +import { RecordingApi } from "../../../apis/recording/RecordingApi"; export const panZoomSchema = createSchema({ _panX: "number", @@ -959,36 +960,18 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } } - - followMovements = (): void => { - // need the first for subtraction - let first = null; - - this.storedMovements.forEach(movement => { - if (first === null) first = movement.time; - - // set the pan to what was stored - setTimeout(() => { - this.Document._panX = movement.panX; - this.Document._panY = movement.panY; - }, movement.time - first) - }) - - // for now, clear the movements - this.storedMovements = [] - } - @action setPan(panX: number, panY: number, panTime: number = 0, clamp: boolean = false) { // if not presenting, just retrace the movements if (Doc.UserDoc()?.presentationMode === 'watching') { - this.followMovements() - return; + // RecordingApi.followMovements(presentation, this) + return } if (Doc.UserDoc()?.presentationMode === 'recording') { // store as many movments as possible - this.storedMovements.push({time: new Date().getTime(), panX, panY}) + // this.storedMovements.push({time: new Date().getTime(), panX, panY}) + const err = RecordingApi.trackMovements(panX, panY) } if (!this.isAnnotationOverlay && clamp) { diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx index 905f87a1a..fab7bc990 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx @@ -6,6 +6,8 @@ import { MdBackspace } from 'react-icons/md'; import { FaCheckCircle } from 'react-icons/fa'; import { IconContext } from "react-icons"; +import { RecordingApi } from '../../../apis/recording/RecordingApi'; + enum RecordingStatus { Recording, @@ -36,7 +38,7 @@ export function RecordingView() { const recorder = useRef<MediaRecorder | null>(null); const videoElementRef = useRef<HTMLVideoElement | null>(null); - const [finished, setFinished] = useState<Boolean>(false) + const [finished, setFinished] = useState<Boolean>(false) @@ -71,7 +73,11 @@ export function RecordingView() { videoElementRef.current!.srcObject = null videoElementRef.current!.src = blobUrl - videoElementRef.current!.muted = false + videoElementRef.current!.muted = false + + // clear the recording api + const presentation = RecordingApi.finish() + RecordingApi.clear() // upload data // const [{ result }] = await Networking.UploadFilesToServer(e.data); @@ -207,7 +213,8 @@ export function RecordingView() { const pause = () => { if (recorder.current) { if (recorder.current.state === "recording") { - recorder.current.pause(); + recorder.current.pause(); + const err = RecordingApi.pause() } } } @@ -215,7 +222,8 @@ export function RecordingView() { const startOrResume = () => { console.log('[RecordingView.tsx] startOrResume') if (!recorder.current || recorder.current.state === "inactive") { - record(); + record(); + const err = RecordingApi.initAndStart() } else if (recorder.current.state === "paused") { recorder.current.resume(); } @@ -328,8 +336,7 @@ export function RecordingView() { <i className="bx bxs-volume-mute"></i> )} </button> */} - </div> - + </div> </div> </div>) }
\ No newline at end of file |