From 1eb2c362b020b3cbe446bbc1585108129fda6977 Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Wed, 4 May 2022 01:11:54 -0400 Subject: Get storing pres data working, but is choppy due to mobx usage. --- src/client/views/nodes/VideoBox.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'src/client/views/nodes/VideoBox.tsx') 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 { + // 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) { -- cgit v1.2.3-70-g09d2 From a2173243c7a447527e2e86ec0a00998ed8b9cc40 Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Wed, 4 May 2022 03:30:07 -0400 Subject: Get play and pause to work. There is a bug with getting double called that was causing choppiness. --- src/client/util/RecordingApi.ts | 207 ++++++++++++++------- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 10 +- 3 files changed, 148 insertions(+), 71 deletions(-) (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/src/client/util/RecordingApi.ts b/src/client/util/RecordingApi.ts index b53cba79d..dfe8e98ca 100644 --- a/src/client/util/RecordingApi.ts +++ b/src/client/util/RecordingApi.ts @@ -183,11 +183,10 @@ export class RecordingApi { // TODO: extract this into different class with pause and resume recording private playFFView: CollectionFreeFormView | null; - private timers: Timer[] | null; + private timers: NodeJS.Timeout[] | null; - // public followMovements = (presentation: Presentation): undefined | Error => { - // console.log(presentation) - // if (presentation.startDate === null || this.playFFView === null) { + // public loadPresentation = (presentation: Presentation): undefined | Error => { + // if (presentation.startTime === null || this.playFFView === null) { // return new Error('[recordingApi.ts] followMovements() failed: no presentation data or no view') // } @@ -195,48 +194,85 @@ export class RecordingApi { // const { movements } = presentation // this.timers = movements.map(movement => { // const { panX, panY, time } = movement - // return new Timer(() => { + + // const t = new Timer(() => { // document._panX = panX; // document._panY = panY; // // TODO: consider cleaning this array to null or some state - // }, time) + // }, time - presentation.startTime) + // t.pause() + // return t // }) + // console.log(this.timers) // } public setPlayFFView = (view: CollectionFreeFormView): void => { this.playFFView = view } + // public pauseMovements = (): undefined | Error => { + // console.log('[recordingApi.ts] pauseMovements()') + // if (this.playFFView === null) { + // return new Error('[recordingApi.ts] pauseMovements() failed: no view') + // } + // // TODO: set userdoc presentMode to browsing + // this.timers?.forEach(timer => timer.pause()) + // } + public pauseMovements = (): undefined | Error => { if (this.playFFView === null) { return new Error('[recordingApi.ts] pauseMovements() failed: no view') } - // TODO: set userdoc presentMode to browsing - this.timers?.forEach(timer => timer.pause()) - } - public resumeMovements = (): undefined | Error => { - if (this.playFFView === null) { - return new Error('[recordingApi.ts] resumeMovements() failed: no view') + if (!this._isPlaying) { + return new Error('[recordingApi.ts] pauseMovements() failed: not playing') } - this.timers?.forEach(timer => timer.resume()) + // TODO: set userdoc presentMode to browsing + //console.log('cleared timers', this.timers) + console.log(this.timers?.map(timer => clearTimeout(timer))) + console.log('[recordingApi.ts] pauseMovements()') + + this._isPlaying = false } - public followMovements = (presentation: Presentation): undefined | Error => { + // public resumeMovements = (): undefined | Error => { + // if (this.playFFView === null) { + // return new Error('[recordingApi.ts] resumeMovements() failed: no view') + // } + // console.log('resume') + // this.timers?.forEach(timer => timer.resume()) + // } + + private _isPlaying = false; + + public playMovements = (presentation: Presentation, timeViewed: number = 0): undefined | Error => { if (presentation.startTime === null || this.playFFView === null) { return new Error('[recordingApi.ts] followMovements() failed: no presentation data or no view') } + if (this._isPlaying) { + return new Error('[recordingApi.ts] playMovements() failed: already playing') + } + this._isPlaying = true; + + console.log(timeViewed) + const document = this.playFFView.Document const { movements } = presentation - movements.forEach(movement => { + this.timers = movements.reduce((arr: NodeJS.Timeout[], movement) => { const { panX, panY, time } = movement + const absoluteTime = time - presentation.startTime - timeViewed*1000 + if (absoluteTime < 0) return arr; + // set the pan to what was stored - setTimeout(() => { + arr.push(setTimeout(() => { document._panX = panX; document._panY = panY; - }, time - presentation.startTime) - }) + }, absoluteTime)) + return arr; + }, []) + + console.log(this.timers.length) } // Unfinished code for tracing multiple free form views // export let pres: Map = new Map() @@ -258,58 +294,95 @@ export class RecordingApi { /** Represents the `setTimeout` with an ability to perform pause/resume actions * citation: https://stackoverflow.com/questions/3969475/javascript-pause-settimeout */ -export class Timer { - private _start: Date; - private _remaining: number; - private _durationTimeoutId?: NodeJS.Timeout; - private _callback: (...args: any[]) => void; - private _done = false; - get done () { - return this._done; +class Timer { + private timerId: NodeJS.Timeout | null; + private callback: (...args: any[]) => void + private start: number + private remaining: number; + + constructor(callback: (...args: any[]) => void, delay: number) { + this.callback = callback; + this.remaining = delay; + + this.start = Date.now(); + this.timerId = setTimeout(this.callback, this.remaining); } - public constructor(callback: (...args: any[]) => void, ms = 0) { - this._callback = () => { - callback(); - this._done = true; - }; - this._remaining = ms; - this.resume(); - } - - /** pauses the timer */ - public pause(): Timer { - if (this._durationTimeoutId && !this._done) { - this._clearTimeoutRef(); - this._remaining -= new Date().getTime() - this._start.getTime(); - } - return this; - } + public pause = () => { + console.log('[timer.ts] pause()') + this.timerId !== null && clearTimeout(this.timerId); + this.timerId = null; + this.remaining -= (Date.now() - this.start); + }; - /** resumes the timer */ - public resume(): Timer { - if (!this._durationTimeoutId && !this._done) { - this._start = new Date; - this._durationTimeoutId = setTimeout(this._callback, this._remaining); + public resume = () => { + if (this.timerId) { + return; } - return this; - } - /** - * clears the timeout and marks it as done. - * - * After called, the timeout will not resume - */ - public clearTimeout() { - this._clearTimeoutRef(); - this._done = true; - } + this.start = Date.now(); + this.timerId = setTimeout(this.callback, this.remaining); + }; - private _clearTimeoutRef() { - if (this._durationTimeoutId) { - clearTimeout(this._durationTimeoutId); - this._durationTimeoutId = undefined; - } - } - -} \ No newline at end of file + public clear = () => { + console.log('[timer.ts] clear()') + this.timerId !== null && clearTimeout(this.timerId); + // this.timerId = null; + // this.remaining -= (Date.now() - this.start); + }; +} +// class Timer { +// private _start: Date; +// private _remaining: number; +// private _durationTimeoutId?: NodeJS.Timeout; +// private _callback: (...args: any[]) => void; +// private _done = false; +// get done () { +// return this._done; +// } + +// public constructor(callback: (...args: any[]) => void, ms = 0) { +// this._callback = () => { +// callback(); +// this._done = true; +// }; +// this._remaining = ms; +// this.resume(); +// } + +// /** pauses the timer */ +// public pause(): Timer { +// if (this._durationTimeoutId && !this._done) { +// this._clearTimeoutRef(); +// this._remaining -= new Date().getTime() - this._start.getTime(); +// } +// return this; +// } + +// /** resumes the timer */ +// public resume(): Timer { +// if (!this._durationTimeoutId && !this._done) { +// this._start = new Date; +// this._durationTimeoutId = setTimeout(this._callback, this._remaining); +// } +// return this; +// } + +// /** +// * clears the timeout and marks it as done. +// * +// * After called, the timeout will not resume +// */ +// public clearTimeout() { +// this._clearTimeoutRef(); +// this._done = true; +// } + +// private _clearTimeoutRef() { +// if (this._durationTimeoutId) { +// clearTimeout(this._durationTimeoutId); +// this._durationTimeoutId = undefined; +// } +// } + +// } \ 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 8bcf6f46f..214d4bbdc 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -966,7 +966,7 @@ export class CollectionFreeFormView extends CollectionSubView { // 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); + const err = RecordingApi.Instance.playMovements(this.presentation, this.player?.currentTime || 0); + err && console.log(err) } - this._playing = true; const eleTime = this.player?.currentTime || 0; if (this.timeline) { @@ -198,6 +197,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent { + if (this.presentation) { + const err = RecordingApi.Instance.pauseMovements(); + err && console.log(err); + } + this._playing = false; this.removeCurrentlyPlaying(); try { -- cgit v1.2.3-70-g09d2 From 32f1fb8df81b5dfc12539090c3fe589099bf165b Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Wed, 4 May 2022 04:43:22 -0400 Subject: Pause works with presentation now. --- src/client/util/RecordingApi.ts | 86 ++++++++++++---------- .../collectionFreeForm/CollectionFreeFormView.tsx | 7 +- src/client/views/nodes/VideoBox.tsx | 2 +- 3 files changed, 56 insertions(+), 39 deletions(-) (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/src/client/util/RecordingApi.ts b/src/client/util/RecordingApi.ts index e779a4ab1..ee427e5df 100644 --- a/src/client/util/RecordingApi.ts +++ b/src/client/util/RecordingApi.ts @@ -2,6 +2,7 @@ import { CollectionFreeFormView } from "../views/collections/collectionFreeForm" import { IReactionDisposer, observable, reaction } from "mobx"; import { NumCast } from "../../fields/Types"; import { Doc } from "../../fields/Doc"; +import { VideoBox } from "../views/nodes/VideoBox"; type Movement = { time: number, @@ -10,17 +11,15 @@ type Movement = { } type Presentation = { - movements: Array + movements: Array | null meta: Object, - startTime: number | null, } export class RecordingApi { private static NULL_PRESENTATION: Presentation = { - movements: [], + movements: null, meta: {}, - startTime: null, } // instance variables @@ -52,7 +51,7 @@ export class RecordingApi { // little helper :) private get isInitPresenation(): boolean { - return this.currentPresentation.startTime === null + return this.currentPresentation.movements === null } public start = (meta?: Object): Error | undefined => { @@ -68,12 +67,12 @@ export class RecordingApi { // (1a) get start date for presenation const startDate = new Date() // (1b) set start timestamp to absolute timestamp - // this.absoluteStart = startDate.getTime() + this.absoluteStart = startDate.getTime() // (2) assign meta content if it exists this.currentPresentation.meta = meta || {} // (3) assign start date to currentPresenation - this.currentPresentation.startTime = startDate.getTime() + this.currentPresentation.movements = [] // (4) set isRecording true to allow trackMovements this.isRecording = true } @@ -110,39 +109,35 @@ export class RecordingApi { // don't allow track movments this.isRecording = false - // set relativeStart to the pausedTimestamp + // set adjust absoluteStart to add the time difference const timestamp = new Date().getTime() - this.absoluteStart = timestamp + this.absoluteStart = timestamp - this.absoluteStart } public resume = () => { - const timestamp = new Date().getTime() - const startTimestamp = this.currentPresentation.startTime - if (!startTimestamp) { - console.error('[recordingApi.ts] resume() failed: no presentation data. try calling start() first') - return new Error('[recordingApi.ts] pause()') - } - - // update absoluteStart to bridge the paused time - const absoluteTimePaused = timestamp - this.absoluteStart - this.absoluteStart = absoluteTimePaused + this.isRecording = true + // set absoluteStart to the pausedTimestamp + this.absoluteStart = new Date().getTime() - this.absoluteStart } private trackMovements = (panX: number, panY: number): Error | undefined => { // ensure we are recording if (!this.isRecording) { - console.error('[recordingApi.ts] trackMovements() failed: recording is paused()') return new Error('[recordingApi.ts] trackMovements()') } + // check to see if the presetation is init + if (this.isInitPresenation) { + return new Error('[recordingApi.ts] trackMovements(): no presentation') + } // get the time - const timestamp = new Date().getTime() - - // make new movement struct - const movement: Movement = { time: timestamp, panX, panY } + const time = new Date().getTime() - this.absoluteStart + // make new movement object + console.log(time) + const movement: Movement = { time, panX, panY } // add that movement to the current presentation data's movement array - this.currentPresentation.movements.push(movement) + this.currentPresentation.movements && this.currentPresentation.movements.push(movement) } // instance variable for the FFView @@ -172,6 +167,7 @@ export class RecordingApi { } // TODO: extract this into different class with pause and resume recording + // TODO: store the FFview with the movements private playFFView: CollectionFreeFormView | null; private timers: NodeJS.Timeout[] | null; @@ -185,42 +181,58 @@ export class RecordingApi { } if (!this._isPlaying) { - return new Error('[recordingApi.ts] pauseMovements() failed: not playing') + //return new Error('[recordingApi.ts] pauseMovements() failed: not playing') + return } + this._isPlaying = false // TODO: set userdoc presentMode to browsing - //console.log('cleared timers', this.timers) - console.log(this.timers?.map(timer => clearTimeout(timer))) - console.log('[recordingApi.ts] pauseMovements()') + this.timers?.map(timer => clearTimeout(timer)) - this._isPlaying = false + this.videoBox = null; + } + + private videoBox: VideoBox | null = null; + + // by calling pause on the VideoBox, the pauseMovements will be called + public pauseVideoAndMovements = (): boolean => { + this.videoBox?.Pause() + return this.videoBox === null } private _isPlaying = false; - public playMovements = (presentation: Presentation, timeViewed: number = 0): undefined | Error => { - if (presentation.startTime === null || this.playFFView === null) { + public playMovements = (presentation: Presentation, timeViewed: number = 0, videoBox?: VideoBox): undefined | Error => { + if (presentation.movements === null || this.playFFView === null) { return new Error('[recordingApi.ts] followMovements() failed: no presentation data or no view') } if (this._isPlaying) { - return new Error('[recordingApi.ts] playMovements() failed: already playing') + //return new Error('[recordingApi.ts] playMovements() failed: already playing') + return } this._isPlaying = true; + // Doc.UserDoc().presentationMode = 'watching'; - console.log(timeViewed) + // TODO: consider this bug at the end of the clip on seek + console.log(timeViewed, videoBox?.player?.currentTime) + this.videoBox = videoBox || null; const document = this.playFFView.Document const { movements } = presentation this.timers = movements.reduce((arr: NodeJS.Timeout[], movement) => { const { panX, panY, time } = movement - const absoluteTime = time - presentation.startTime - timeViewed*1000 - if (absoluteTime < 0) return arr; + + const timeDiff = time - timeViewed*1000 + if (timeDiff < 0) return arr; // set the pan to what was stored arr.push(setTimeout(() => { document._panX = panX; document._panY = panY; - }, absoluteTime)) + // if (movement === movements[movements.length - 1]) { + // this._isPlaying = false; + // } + }, timeDiff)) return arr; }, []) } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 214d4bbdc..9e57bca4f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -968,7 +968,12 @@ export class CollectionFreeFormView extends CollectionSubView { // if presentation isn't null, call followmovements on the recording api if (this.presentation) { - const err = RecordingApi.Instance.playMovements(this.presentation, this.player?.currentTime || 0); + const err = RecordingApi.Instance.playMovements(this.presentation, this.player?.currentTime || 0, this); err && console.log(err) } -- cgit v1.2.3-70-g09d2 From 51b4d65fe05939ea27639bc1b5cc66ec99fa54e5 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 4 May 2022 11:30:32 -0400 Subject: fixes to make recordingBox appear on slides after reopening. --- src/client/views/OverlayView.scss | 71 +- src/client/views/OverlayView.tsx | 390 +++++------ src/client/views/nodes/VideoBox.tsx | 2 +- src/client/views/nodes/trails/PresElementBox.tsx | 836 +++++++++++------------ 4 files changed, 650 insertions(+), 649 deletions(-) (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/src/client/views/OverlayView.scss b/src/client/views/OverlayView.scss index d6a6e4301..42efecb98 100644 --- a/src/client/views/OverlayView.scss +++ b/src/client/views/OverlayView.scss @@ -1,59 +1,60 @@ .overlayView { - position: absolute; - pointer-events: none; - top: 0; - width: 100vw; - height: 100vh; - /* background-color: pink; */ - z-index: 100000; + position: absolute; + pointer-events: none; + top: 0; + width: 100vw; + height: 100vh; + /* background-color: pink; */ + z-index: 100000; } .overlayWindow-outerDiv { - border-radius: 5px; - overflow: hidden; - display: flex; - flex-direction: column; - top: 0; - left: 0; + border-radius: 5px; + overflow: hidden; + display: flex; + flex-direction: column; + top: 0; + left: 0; } .overlayWindow-outerDiv, .overlayView-wrapperDiv { - position: absolute; - z-index: 1; + position: absolute; + z-index: 1; } .overlayWindow-titleBar { - flex: 0 1 30px; - background: darkslategray; - color: whitesmoke; - text-align: center; - cursor: move; + flex: 0 1 30px; + background: darkslategray; + color: whitesmoke; + text-align: center; + cursor: move; } .overlayWindow-content { - flex: 1 1 auto; - display: flex; - flex-direction: column; + flex: 1 1 auto; + display: flex; + flex-direction: column; } .overlayWindow-closeButton { - float: right; - height: 30px; - width: 30px; + float: right; + height: 30px; + width: 30px; } .overlayWindow-resizeDragger { - background-color: rgb(0, 0, 0); - position: absolute; - right: 0px; - bottom: 0px; - width: 10px; - height: 10px; - cursor: nwse-resize; + background-color: rgb(0, 0, 0); + position: absolute; + right: 0px; + bottom: 0px; + width: 10px; + height: 10px; + cursor: nwse-resize; } .overlayView-doc { - z-index: 9002; //so that it appears above chroma - position: absolute; + z-index: 9002; //so that it appears above chroma + position: absolute; + pointer-events: all; } \ No newline at end of file diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx index f86406997..4b8e87b0f 100644 --- a/src/client/views/OverlayView.tsx +++ b/src/client/views/OverlayView.tsx @@ -2,7 +2,7 @@ import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import * as React from "react"; import ReactLoading from 'react-loading'; -import { Doc } from "../../fields/Doc"; +import { Doc, WidthSym, HeightSym } from "../../fields/Doc"; import { Id } from "../../fields/FieldSymbols"; import { Cast, NumCast } from "../../fields/Types"; import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, setupMoveUpEvents, Utils } from "../../Utils"; @@ -20,213 +20,213 @@ import { DefaultStyleProvider } from "./StyleProvider"; export type OverlayDisposer = () => void; export type OverlayElementOptions = { - x: number; - y: number; - width?: number; - height?: number; - title?: string; + x: number; + y: number; + width?: number; + height?: number; + title?: string; }; export interface OverlayWindowProps { - children: JSX.Element; - overlayOptions: OverlayElementOptions; - onClick: () => void; + children: JSX.Element; + overlayOptions: OverlayElementOptions; + onClick: () => void; } @observer export class OverlayWindow extends React.Component { - @observable x: number; - @observable y: number; - @observable width: number; - @observable height: number; - constructor(props: OverlayWindowProps) { - super(props); - - const opts = props.overlayOptions; - this.x = opts.x; - this.y = opts.y; - this.width = opts.width || 200; - this.height = opts.height || 200; - } - - onPointerDown = (_: React.PointerEvent) => { - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointerup", this.onPointerUp); - } - - onResizerPointerDown = (_: React.PointerEvent) => { - document.removeEventListener("pointermove", this.onResizerPointerMove); - document.removeEventListener("pointerup", this.onResizerPointerUp); - document.addEventListener("pointermove", this.onResizerPointerMove); - document.addEventListener("pointerup", this.onResizerPointerUp); - } - - @action - onPointerMove = (e: PointerEvent) => { - this.x += e.movementX; - this.x = Math.max(Math.min(this.x, window.innerWidth - this.width), 0); - this.y += e.movementY; - this.y = Math.max(Math.min(this.y, window.innerHeight - this.height), 0); - } - - @action - onResizerPointerMove = (e: PointerEvent) => { - this.width += e.movementX; - this.width = Math.max(this.width, 30); - this.height += e.movementY; - this.height = Math.max(this.height, 30); - } - - onPointerUp = (e: PointerEvent) => { - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - } - - onResizerPointerUp = (e: PointerEvent) => { - document.removeEventListener("pointermove", this.onResizerPointerMove); - document.removeEventListener("pointerup", this.onResizerPointerUp); - } - - render() { - return ( -
-
- {this.props.overlayOptions.title || "Untitled"} - -
-
- {this.props.children} -
-
-
- ); - } + @observable x: number; + @observable y: number; + @observable width: number; + @observable height: number; + constructor(props: OverlayWindowProps) { + super(props); + + const opts = props.overlayOptions; + this.x = opts.x; + this.y = opts.y; + this.width = opts.width || 200; + this.height = opts.height || 200; + } + + onPointerDown = (_: React.PointerEvent) => { + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointerup", this.onPointerUp); + } + + onResizerPointerDown = (_: React.PointerEvent) => { + document.removeEventListener("pointermove", this.onResizerPointerMove); + document.removeEventListener("pointerup", this.onResizerPointerUp); + document.addEventListener("pointermove", this.onResizerPointerMove); + document.addEventListener("pointerup", this.onResizerPointerUp); + } + + @action + onPointerMove = (e: PointerEvent) => { + this.x += e.movementX; + this.x = Math.max(Math.min(this.x, window.innerWidth - this.width), 0); + this.y += e.movementY; + this.y = Math.max(Math.min(this.y, window.innerHeight - this.height), 0); + } + + @action + onResizerPointerMove = (e: PointerEvent) => { + this.width += e.movementX; + this.width = Math.max(this.width, 30); + this.height += e.movementY; + this.height = Math.max(this.height, 30); + } + + onPointerUp = (e: PointerEvent) => { + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + } + + onResizerPointerUp = (e: PointerEvent) => { + document.removeEventListener("pointermove", this.onResizerPointerMove); + document.removeEventListener("pointerup", this.onResizerPointerUp); + } + + render() { + return ( +
+
+ {this.props.overlayOptions.title || "Untitled"} + +
+
+ {this.props.children} +
+
+
+ ); + } } @observer export class OverlayView extends React.Component { - public static Instance: OverlayView; - @observable.shallow - private _elements: JSX.Element[] = []; - - constructor(props: any) { - super(props); - if (!OverlayView.Instance) { - OverlayView.Instance = this; - } - } - - @action - addElement(ele: JSX.Element, options: OverlayElementOptions): OverlayDisposer { - const remove = action(() => { - const index = this._elements.indexOf(ele); - if (index !== -1) this._elements.splice(index, 1); + public static Instance: OverlayView; + @observable.shallow + private _elements: JSX.Element[] = []; + + constructor(props: any) { + super(props); + if (!OverlayView.Instance) { + OverlayView.Instance = this; + } + } + + @action + addElement(ele: JSX.Element, options: OverlayElementOptions): OverlayDisposer { + const remove = action(() => { + const index = this._elements.indexOf(ele); + if (index !== -1) this._elements.splice(index, 1); + }); + ele =
{ele}
; + this._elements.push(ele); + return remove; + } + + @action + addWindow(contents: JSX.Element, options: OverlayElementOptions): OverlayDisposer { + const remove = action(() => { + const index = this._elements.indexOf(contents); + if (index !== -1) this._elements.splice(index, 1); + }); + contents = {contents}; + this._elements.push(contents); + return remove; + } + + + @computed get overlayDocs() { + return CurrentUserUtils.OverlayDocs?.map(d => { + let offsetx = 0, offsety = 0; + const dref = React.createRef(); + const onPointerMove = action((e: PointerEvent, down: number[]) => { + if (e.buttons === 1) { + d.x = e.clientX + offsetx; + d.y = e.clientY + offsety; + } + if (e.metaKey) { + const dragData = new DragManager.DocumentDragData([d]); + dragData.offset = [-offsetx, -offsety]; + dragData.dropAction = "move"; + dragData.removeDocument = (doc: Doc | Doc[]) => { + const docs = (doc instanceof Doc) ? [doc] : doc; + docs.forEach(d => Doc.RemoveDocFromList(Cast(Doc.UserDoc().myOverlayDocs, Doc, null), "data", d)); + return true; + }; + dragData.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => { + return dragData.removeDocument!(doc) ? addDocument(doc) : false; + }; + DragManager.StartDocumentDrag([dref.current!], dragData, down[0], down[1]); + return true; + } + return false; }); - ele =
{ele}
; - this._elements.push(ele); - return remove; - } - - @action - addWindow(contents: JSX.Element, options: OverlayElementOptions): OverlayDisposer { - const remove = action(() => { - const index = this._elements.indexOf(contents); - if (index !== -1) this._elements.splice(index, 1); - }); - contents = {contents}; - this._elements.push(contents); - return remove; - } - - - @computed get overlayDocs() { - return CurrentUserUtils.OverlayDocs?.map(d => { - let offsetx = 0, offsety = 0; - const dref = React.createRef(); - const onPointerMove = action((e: PointerEvent, down: number[]) => { - if (e.buttons === 1) { - d.x = e.clientX + offsetx; - d.y = e.clientY + offsety; - } - if (e.metaKey) { - const dragData = new DragManager.DocumentDragData([d]); - dragData.offset = [-offsetx, -offsety]; - dragData.dropAction = "move"; - dragData.removeDocument = (doc: Doc | Doc[]) => { - const docs = (doc instanceof Doc) ? [doc] : doc; - docs.forEach(d => Doc.RemoveDocFromList(Cast(Doc.UserDoc().myOverlayDocs, Doc, null), "data", d)); - return true; - }; - dragData.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => { - return dragData.removeDocument!(doc) ? addDocument(doc) : false; - }; - DragManager.StartDocumentDrag([dref.current!], dragData, down[0], down[1]); - return true; - } - return false; - }); - - const onPointerDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, onPointerMove, emptyFunction, emptyFunction); - offsetx = NumCast(d.x) - e.clientX; - offsety = NumCast(d.y) - e.clientY; - }; - - return
- NumCast(d._width)} - PanelHeight={() => NumCast(d._height)} - ScreenToLocalTransform={Transform.Identity} - renderDepth={1} - isDocumentActive={returnTrue} - isContentActive={emptyFunction} - whenChildContentsActiveChanged={emptyFunction} - focus={DocUtils.DefaultFocus} - styleProvider={DefaultStyleProvider} - layerProvider={undefined} - docViewPath={returnEmptyDoclist} - addDocTab={returnFalse} - pinToPres={emptyFunction} - docFilters={returnEmptyFilter} - docRangeFilters={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} /> -
; - }); - } - - public static ShowSpinner() { - return OverlayView.Instance.addElement(, { x: 300, y: 200 }); - } - - - render() { - return ( -
-
- {this._elements} -
- - {this.overlayDocs} -
- ); - } + + const onPointerDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, onPointerMove, emptyFunction, emptyFunction); + offsetx = NumCast(d.x) - e.clientX; + offsety = NumCast(d.y) - e.clientY; + }; + + return
+ (doc instanceof Doc ? [doc] : doc).map(doc => Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), "data", doc)).length ? true : false} + PanelWidth={d[WidthSym]} + PanelHeight={d[HeightSym]} + ScreenToLocalTransform={() => new Transform(-NumCast(d.x), -NumCast(d.y), 1)} + renderDepth={1} + isDocumentActive={returnTrue} + isContentActive={emptyFunction} + whenChildContentsActiveChanged={emptyFunction} + focus={DocUtils.DefaultFocus} + styleProvider={DefaultStyleProvider} + layerProvider={undefined} + docViewPath={returnEmptyDoclist} + addDocTab={returnFalse} + pinToPres={emptyFunction} + docFilters={returnEmptyFilter} + docRangeFilters={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} /> +
; + }); + } + + public static ShowSpinner() { + return OverlayView.Instance.addElement(, { x: 300, y: 200 }); + } + + + render() { + return ( +
+
+ {this._elements} +
+ + {this.overlayDocs} +
+ ); + } } // bcz: ugh ... want to be able to pass ScriptingRepl as tag argument, but that doesn't seem to work.. runtime error ScriptingGlobals.add(function addOverlayWindow(type: string, options: OverlayElementOptions) { - OverlayView.Instance.addWindow(, options); + OverlayView.Instance.addWindow(, options); }); \ No newline at end of file diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index e57cb1abe..b424225e7 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -305,7 +305,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent() { - public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresElementBox, fieldKey); } - _heightDisposer: IReactionDisposer | undefined; - - @observable _dragging = false; - // these fields are conditionally computed fields on the layout document that take this document as a parameter - @computed get indexInPres() { return Number(this.lookupField("indexInPres")); } // the index field is where this document is in the presBox display list (since this value is different for each presentation element, the value can't be stored on the layout template which is used by all display elements) - @computed get collapsedHeight() { return Number(this.lookupField("presCollapsedHeight")); } // the collapsed height changes depending on the state of the presBox. We could store this on the presentation element template if it's used by only one presentation - but if it's shared by multiple, then this value must be looked up - @computed get presStatus() { return StrCast(this.lookupField("presStatus")); } - @computed get itemIndex() { return NumCast(this.lookupField("_itemIndex")); } - @computed get presBox() { return Cast(this.lookupField("presBox"), Doc, null); } - @computed get targetDoc() { return Cast(this.rootDoc.presentationTargetDoc, Doc, null) || this.rootDoc; } - - - @observable isShowingVideo = false; - @action setIsShowingVideo(shown: boolean) { - this.isShowingVideo = shown - } - - componentDidMount() { - this.layoutDoc.hideLinkButton = true; - this._heightDisposer = reaction(() => [this.rootDoc.presExpandInlineButton, this.collapsedHeight], - params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true }); - } - componentWillUnmount() { - this._heightDisposer?.(); - } - - /** - * Returns a local transformed coordinate array for given coordinates. - */ - ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord]; - - embedHeight = (): number => 97; - // embedWidth = () => this.props.PanelWidth(); - // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); - embedWidth = (): number => this.props.PanelWidth() - 35; - styleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { - if (property === StyleProp.Opacity) return 1; - return this.props.styleProvider?.(doc, props, property); - } - /** - * The function that is responsible for rendering a preview or not for this - * presentation element. - */ - @computed get renderEmbeddedInline() { - return !this.rootDoc.presExpandInlineButton || !this.targetDoc ? (null) : -
- -
-
; - } - @computed get duration() { - let durationInS: number; - if (this.rootDoc.type === DocumentType.AUDIO || this.rootDoc.type === DocumentType.VID) { durationInS = NumCast(this.rootDoc.presEndTime) - NumCast(this.rootDoc.presStartTime); durationInS = Math.round(durationInS * 10) / 10; } - else if (this.rootDoc.presDuration) durationInS = NumCast(this.rootDoc.presDuration) / 1000; - else durationInS = 2; - return "D: " + durationInS + "s"; - } - - @computed get transition() { - let transitionInS: number; - if (this.rootDoc.presTransition) transitionInS = NumCast(this.rootDoc.presTransition) / 1000; - else transitionInS = 0.5; - return this.rootDoc.presMovement === PresMovement.Jump || this.rootDoc.presMovement === PresMovement.None ? (null) : "M: " + transitionInS + "s"; - } - - private _itemRef: React.RefObject = React.createRef(); - private _dragRef: React.RefObject = React.createRef(); - private _titleRef: React.RefObject = React.createRef(); - - - @action - headerDown = (e: React.PointerEvent) => { - const element = e.target as any; - e.stopPropagation(); - e.preventDefault(); - if (element && !(e.ctrlKey || e.metaKey)) { - if (PresBox.Instance._selectedArray.has(this.rootDoc)) { - PresBox.Instance._selectedArray.size === 1 && PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false); - setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); - } else { - setupMoveUpEvents(this, e, ((e: PointerEvent) => { - PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false); - return this.startDrag(e); - }), emptyFunction, emptyFunction); - } - } - } - - headerUp = (e: React.PointerEvent) => { - e.stopPropagation(); - e.preventDefault(); - } - - /** - * Function to drag and drop the pres element to a diferent location - */ - startDrag = (e: PointerEvent) => { - const miniView: boolean = this.toolbarWidth <= 100; - const activeItem = this.rootDoc; - const dragArray = PresBox.Instance._dragArray; - const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray()); - if (!dragData.draggedDocuments.length) dragData.draggedDocuments.push(this.rootDoc); - dragData.dropAction = "move"; - dragData.treeViewDoc = this.props.docViewPath().lastElement()?.props.treeViewDoc; - dragData.moveDocument = this.props.docViewPath().lastElement()?.props.moveDocument; - const dragItem: HTMLElement[] = []; - if (dragArray.length === 1) { - const doc = dragArray[0]; - doc.className = miniView ? "presItem-miniSlide" : "presItem-slide"; - dragItem.push(doc); - } else if (dragArray.length >= 1) { - const doc = document.createElement('div'); - doc.className = "presItem-multiDrag"; - doc.innerText = "Move " + PresBox.Instance._selectedArray.size + " slides"; - doc.style.position = 'absolute'; - doc.style.top = (e.clientY) + 'px'; - doc.style.left = (e.clientX - 50) + 'px'; - dragItem.push(doc); - } - - // const dropEvent = () => runInAction(() => this._dragging = false); - if (activeItem) { - DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY, undefined); - // runInAction(() => this._dragging = true); - return true; - } - return false; - } - - onPointerOver = (e: any) => { - document.removeEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointermove", this.onPointerMove); - } - - onPointerMove = (e: PointerEvent) => { - const slide = this._itemRef.current!; - let dragIsPresItem: boolean = DragManager.docsBeingDragged.length > 0 ? true : false; - for (const doc of DragManager.docsBeingDragged) { - if (!doc.presentationTargetDoc) dragIsPresItem = false; - } - if (slide && dragIsPresItem) { - const rect = slide.getBoundingClientRect(); - const y = e.clientY - rect.top; //y position within the element. - const height = slide.clientHeight; - const halfLine = height / 2; - if (y <= halfLine) { - slide.style.borderTop = `solid 2px ${Colors.MEDIUM_BLUE}`; - slide.style.borderBottom = "0px"; - } else if (y > halfLine) { - slide.style.borderTop = "0px"; - slide.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`; - } - } - document.removeEventListener("pointermove", this.onPointerMove); - } - - onPointerLeave = (e: any) => { - this._itemRef.current!.style.borderTop = "0px"; - this._itemRef.current!.style.borderBottom = "0px"; - document.removeEventListener("pointermove", this.onPointerMove); - } - - @action - toggleProperties = () => { - if (CurrentUserUtils.propertiesWidth < 5) { - action(() => (CurrentUserUtils.propertiesWidth = 250)); - } - } - - @undoBatch - removeItem = action((e: React.MouseEvent) => { - this.props.removeDocument?.(this.rootDoc); + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresElementBox, fieldKey); } + _heightDisposer: IReactionDisposer | undefined; + + @observable _dragging = false; + // these fields are conditionally computed fields on the layout document that take this document as a parameter + @computed get indexInPres() { return Number(this.lookupField("indexInPres")); } // the index field is where this document is in the presBox display list (since this value is different for each presentation element, the value can't be stored on the layout template which is used by all display elements) + @computed get collapsedHeight() { return Number(this.lookupField("presCollapsedHeight")); } // the collapsed height changes depending on the state of the presBox. We could store this on the presentation element template if it's used by only one presentation - but if it's shared by multiple, then this value must be looked up + @computed get presStatus() { return StrCast(this.lookupField("presStatus")); } + @computed get itemIndex() { return NumCast(this.lookupField("_itemIndex")); } + @computed get presBox() { return Cast(this.lookupField("presBox"), Doc, null); } + @computed get targetDoc() { return Cast(this.rootDoc.presentationTargetDoc, Doc, null) || this.rootDoc; } + + + @observable isShowingVideo = false; + @action setIsShowingVideo(shown: boolean) { + this.isShowingVideo = shown + } + + componentDidMount() { + this.layoutDoc.hideLinkButton = true; + this._heightDisposer = reaction(() => [this.rootDoc.presExpandInlineButton, this.collapsedHeight], + params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true }); + } + componentWillUnmount() { + this._heightDisposer?.(); + } + + /** + * Returns a local transformed coordinate array for given coordinates. + */ + ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord]; + + embedHeight = (): number => 97; + // embedWidth = () => this.props.PanelWidth(); + // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); + embedWidth = (): number => this.props.PanelWidth() - 35; + styleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { + if (property === StyleProp.Opacity) return 1; + return this.props.styleProvider?.(doc, props, property); + } + /** + * The function that is responsible for rendering a preview or not for this + * presentation element. + */ + @computed get renderEmbeddedInline() { + return !this.rootDoc.presExpandInlineButton || !this.targetDoc ? (null) : +
+ +
+
; + } + @computed get duration() { + let durationInS: number; + if (this.rootDoc.type === DocumentType.AUDIO || this.rootDoc.type === DocumentType.VID) { durationInS = NumCast(this.rootDoc.presEndTime) - NumCast(this.rootDoc.presStartTime); durationInS = Math.round(durationInS * 10) / 10; } + else if (this.rootDoc.presDuration) durationInS = NumCast(this.rootDoc.presDuration) / 1000; + else durationInS = 2; + return "D: " + durationInS + "s"; + } + + @computed get transition() { + let transitionInS: number; + if (this.rootDoc.presTransition) transitionInS = NumCast(this.rootDoc.presTransition) / 1000; + else transitionInS = 0.5; + return this.rootDoc.presMovement === PresMovement.Jump || this.rootDoc.presMovement === PresMovement.None ? (null) : "M: " + transitionInS + "s"; + } + + private _itemRef: React.RefObject = React.createRef(); + private _dragRef: React.RefObject = React.createRef(); + private _titleRef: React.RefObject = React.createRef(); + + + @action + headerDown = (e: React.PointerEvent) => { + const element = e.target as any; + e.stopPropagation(); + e.preventDefault(); + if (element && !(e.ctrlKey || e.metaKey)) { if (PresBox.Instance._selectedArray.has(this.rootDoc)) { - PresBox.Instance._selectedArray.delete(this.rootDoc); + PresBox.Instance._selectedArray.size === 1 && PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false); + setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); + } else { + setupMoveUpEvents(this, e, ((e: PointerEvent) => { + PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false); + return this.startDrag(e); + }), emptyFunction, emptyFunction); } - this.hideRecording(); - e.stopPropagation(); - }); - - // set the value/title of the individual pres element - @undoBatch - @action - onSetValue = (value: string) => { - this.rootDoc.title = !value.trim().length ? "-untitled-" : value; + } + } + + headerUp = (e: React.PointerEvent) => { + e.stopPropagation(); + e.preventDefault(); + } + + /** + * Function to drag and drop the pres element to a diferent location + */ + startDrag = (e: PointerEvent) => { + const miniView: boolean = this.toolbarWidth <= 100; + const activeItem = this.rootDoc; + const dragArray = PresBox.Instance._dragArray; + const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray()); + if (!dragData.draggedDocuments.length) dragData.draggedDocuments.push(this.rootDoc); + dragData.dropAction = "move"; + dragData.treeViewDoc = this.props.docViewPath().lastElement()?.props.treeViewDoc; + dragData.moveDocument = this.props.docViewPath().lastElement()?.props.moveDocument; + const dragItem: HTMLElement[] = []; + if (dragArray.length === 1) { + const doc = dragArray[0]; + doc.className = miniView ? "presItem-miniSlide" : "presItem-slide"; + dragItem.push(doc); + } else if (dragArray.length >= 1) { + const doc = document.createElement('div'); + doc.className = "presItem-multiDrag"; + doc.innerText = "Move " + PresBox.Instance._selectedArray.size + " slides"; + doc.style.position = 'absolute'; + doc.style.top = (e.clientY) + 'px'; + doc.style.left = (e.clientX - 50) + 'px'; + dragItem.push(doc); + } + + // const dropEvent = () => runInAction(() => this._dragging = false); + if (activeItem) { + DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY, undefined); + // runInAction(() => this._dragging = true); return true; - } - - /** - * Method called for updating the view of the currently selected document - * - * @param targetDoc - * @param activeItem - */ - @undoBatch - @action - updateView = (targetDoc: Doc, activeItem: Doc) => { - if (targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF) { - const scroll = targetDoc._scrollTop; - activeItem.presPinViewScroll = scroll; - } else if (targetDoc.type === DocumentType.VID) { - activeItem.presPinTimecode = targetDoc._currentTimecode; - } else if (targetDoc.type === DocumentType.COMPARISON) { - const clipWidth = targetDoc._clipWidth; - activeItem.presPinClipWidth = clipWidth; - } else { - const x = targetDoc._panX; - const y = targetDoc._panY; - const scale = targetDoc._viewScale; - activeItem.presPinViewX = x; - activeItem.presPinViewY = y; - activeItem.presPinViewScale = scale; + } + return false; + } + + onPointerOver = (e: any) => { + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); + } + + onPointerMove = (e: PointerEvent) => { + const slide = this._itemRef.current!; + let dragIsPresItem: boolean = DragManager.docsBeingDragged.length > 0 ? true : false; + for (const doc of DragManager.docsBeingDragged) { + if (!doc.presentationTargetDoc) dragIsPresItem = false; + } + if (slide && dragIsPresItem) { + const rect = slide.getBoundingClientRect(); + const y = e.clientY - rect.top; //y position within the element. + const height = slide.clientHeight; + const halfLine = height / 2; + if (y <= halfLine) { + slide.style.borderTop = `solid 2px ${Colors.MEDIUM_BLUE}`; + slide.style.borderBottom = "0px"; + } else if (y > halfLine) { + slide.style.borderTop = "0px"; + slide.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`; } - } - - @computed get recordingIsInOverlay() { - let isInOverlay = false - DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => { - if (doc.slides === this.rootDoc) { - isInOverlay = true - return - } - }) - return isInOverlay - } - - @undoBatch - @action - hideRecording = () => { - console.log("hide recording") - DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => { - if (doc.slides === this.rootDoc) { - Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, doc); - } - }) - } - - @undoBatch - @action - startRecording = (targetDoc: Doc, activeItem: Doc) => { - // Remove every recording that already exists in overlay view - DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => { - if (doc.slides !== null) { - Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, doc); - } - }) - - if (activeItem.recording) { - // if we already have an existing recording - console.log("recording exists") - console.log(activeItem.recording) - console.log(Cast(activeItem.recording, Doc, null)) - Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, Cast(activeItem.recording, Doc, null)); - - } else { - console.log("creating new recording") - // if we dont have any recording - const recording = Docs.Create.WebCamDocument("", { _width: 400, _height: 200, title: "recording", system: true, cloneFieldFilter: new List(["system"]) }); - - // attach the recording to the slide, and attach the slide to the recording - recording.slides = activeItem - activeItem.recording = recording - - // TODO: Figure out exactly where we want the video to appear - const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - recording.x = pt[0]; - recording.y = pt[1]; - console.log(pt) - Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, recording); + } + document.removeEventListener("pointermove", this.onPointerMove); + } + + onPointerLeave = (e: any) => { + this._itemRef.current!.style.borderTop = "0px"; + this._itemRef.current!.style.borderBottom = "0px"; + document.removeEventListener("pointermove", this.onPointerMove); + } + + @action + toggleProperties = () => { + if (CurrentUserUtils.propertiesWidth < 5) { + action(() => (CurrentUserUtils.propertiesWidth = 250)); + } + } + + @undoBatch + removeItem = action((e: React.MouseEvent) => { + this.props.removeDocument?.(this.rootDoc); + if (PresBox.Instance._selectedArray.has(this.rootDoc)) { + PresBox.Instance._selectedArray.delete(this.rootDoc); + } + this.hideRecording(); + e.stopPropagation(); + }); + + // set the value/title of the individual pres element + @undoBatch + @action + onSetValue = (value: string) => { + this.rootDoc.title = !value.trim().length ? "-untitled-" : value; + return true; + } + + /** + * Method called for updating the view of the currently selected document + * + * @param targetDoc + * @param activeItem + */ + @undoBatch + @action + updateView = (targetDoc: Doc, activeItem: Doc) => { + if (targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF) { + const scroll = targetDoc._scrollTop; + activeItem.presPinViewScroll = scroll; + } else if (targetDoc.type === DocumentType.VID) { + activeItem.presPinTimecode = targetDoc._currentTimecode; + } else if (targetDoc.type === DocumentType.COMPARISON) { + const clipWidth = targetDoc._clipWidth; + activeItem.presPinClipWidth = clipWidth; + } else { + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + activeItem.presPinViewX = x; + activeItem.presPinViewY = y; + activeItem.presPinViewScale = scale; + } + } + + @computed get recordingIsInOverlay() { + let isInOverlay = false + DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => { + if (doc.slides === this.rootDoc) { + isInOverlay = true + return + } + }) + return isInOverlay + } + + @undoBatch + @action + hideRecording = () => { + console.log("hide recording") + DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => { + if (doc.slides === this.rootDoc) { + Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, doc); } - } - - @computed - get toolbarWidth(): number { - const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox); - let width: number = NumCast(this.presBox._width); - if (presBoxDocView) width = presBoxDocView.props.PanelWidth(); - if (width === 0) width = 300; - return width; - } - - @computed get mainItem() { - const isSelected: boolean = PresBox.Instance._selectedArray.has(this.rootDoc); - const toolbarWidth: number = this.toolbarWidth; - const showMore: boolean = this.toolbarWidth >= 300; - const miniView: boolean = this.toolbarWidth <= 110; - const presBox: Doc = this.presBox; //presBox - const presBoxColor: string = StrCast(presBox._backgroundColor); - const presColorBool: boolean = presBoxColor ? (presBoxColor !== Colors.WHITE && presBoxColor !== "transparent") : false; - const targetDoc: Doc = this.targetDoc; - const activeItem: Doc = this.rootDoc; - return ( -
{ - e.stopPropagation(); - e.preventDefault(); - PresBox.Instance.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey); - }} - onDoubleClick={action(e => { - this.toggleProperties(); - PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, true); - })} - onPointerOver={this.onPointerOver} - onPointerLeave={this.onPointerLeave} - onPointerDown={this.headerDown} - onPointerUp={this.headerUp} - > - {miniView ? - // when width is LESS than 110 px -
- {`${this.indexInPres + 1}.`} -
- : - // when width is MORE than 110 px -
- {`${this.indexInPres + 1}.`} -
} - {miniView ? (null) :
-
- StrCast(activeItem.title)} - SetValue={this.onSetValue} - /> -
-
{"Movement speed"}
}>
{this.transition}
 -
{"Duration"}
}>
{this.duration}
 -
-
{"Update view"}
}> -
this.updateView(targetDoc, activeItem)} - style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V
- - - {this.recordingIsInOverlay ? -
{"Hide Recording"}
}> -
- e.stopPropagation()} /> -
- : -
{"Start recording"}
}> -
this.startRecording(targetDoc, activeItem)} - style={{ fontWeight: 700 }}> - e.stopPropagation()} /> -
- - } - - - {this.indexInPres === 0 ? (null) :
{activeItem.groupWithUp ? "Ungroup" : "Group with up"}
}> -
activeItem.groupWithUp = !activeItem.groupWithUp} - style={{ - zIndex: 1000 - this.indexInPres, - fontWeight: 700, - backgroundColor: activeItem.groupWithUp ? presColorBool ? presBoxColor : Colors.MEDIUM_BLUE : undefined, - height: activeItem.groupWithUp ? 53 : 18, - transform: activeItem.groupWithUp ? "translate(0, -17px)" : undefined - }}> -
- e.stopPropagation()} /> -
-
- } - {/*
{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}
}>
{ e.stopPropagation(); this.presExpandDocumentClick(); }}> + }) + } + + @undoBatch + @action + startRecording = (targetDoc: Doc, activeItem: Doc) => { + // Remove every recording that already exists in overlay view + DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => { + if (doc.slides !== null) { + Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, doc); + } + }) + + if (activeItem.recording) { + // if we already have an existing recording + console.log("recording exists") + console.log(activeItem.recording) + console.log(Cast(activeItem.recording, Doc, null)) + Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, Cast(activeItem.recording, Doc, null)); + + } else { + console.log("creating new recording") + // if we dont have any recording + const recording = Docs.Create.WebCamDocument("", { _width: 400, _height: 200, title: "recording", cloneFieldFilter: new List(["system"]) }); + + // attach the recording to the slide, and attach the slide to the recording + recording.slides = activeItem + activeItem.recording = recording + + // TODO: Figure out exactly where we want the video to appear + const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + recording.x = pt[0]; + recording.y = pt[1]; + console.log(pt) + Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, recording); + } + } + + @computed + get toolbarWidth(): number { + const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox); + let width: number = NumCast(this.presBox._width); + if (presBoxDocView) width = presBoxDocView.props.PanelWidth(); + if (width === 0) width = 300; + return width; + } + + @computed get mainItem() { + const isSelected: boolean = PresBox.Instance?._selectedArray.has(this.rootDoc); + const toolbarWidth: number = this.toolbarWidth; + const showMore: boolean = this.toolbarWidth >= 300; + const miniView: boolean = this.toolbarWidth <= 110; + const presBox: Doc = this.presBox; //presBox + const presBoxColor: string = StrCast(presBox._backgroundColor); + const presColorBool: boolean = presBoxColor ? (presBoxColor !== Colors.WHITE && presBoxColor !== "transparent") : false; + const targetDoc: Doc = this.targetDoc; + const activeItem: Doc = this.rootDoc; + return ( +
{ + e.stopPropagation(); + e.preventDefault(); + PresBox.Instance.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey); + }} + onDoubleClick={action(e => { + this.toggleProperties(); + PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, true); + })} + onPointerOver={this.onPointerOver} + onPointerLeave={this.onPointerLeave} + onPointerDown={this.headerDown} + onPointerUp={this.headerUp} + > + {miniView ? + // when width is LESS than 110 px +
+ {`${this.indexInPres + 1}.`} +
+ : + // when width is MORE than 110 px +
+ {`${this.indexInPres + 1}.`} +
} + {miniView ? (null) :
+
+ StrCast(activeItem.title)} + SetValue={this.onSetValue} + /> +
+
{"Movement speed"}
}>
{this.transition}
 +
{"Duration"}
}>
{this.duration}
 +
+
{"Update view"}
}> +
this.updateView(targetDoc, activeItem)} + style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V
+ + + {this.recordingIsInOverlay ? +
{"Hide Recording"}
}> +
+ e.stopPropagation()} /> +
+ : +
{"Start recording"}
}> +
this.startRecording(targetDoc, activeItem)} + style={{ fontWeight: 700 }}> + e.stopPropagation()} /> +
+ + } + + + {this.indexInPres === 0 ? (null) :
{activeItem.groupWithUp ? "Ungroup" : "Group with up"}
}> +
activeItem.groupWithUp = !activeItem.groupWithUp} + style={{ + zIndex: 1000 - this.indexInPres, + fontWeight: 700, + backgroundColor: activeItem.groupWithUp ? presColorBool ? presBoxColor : Colors.MEDIUM_BLUE : undefined, + height: activeItem.groupWithUp ? 53 : 18, + transform: activeItem.groupWithUp ? "translate(0, -17px)" : undefined + }}> +
+ e.stopPropagation()} /> +
+
+ } + {/*
{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}
}>
{ e.stopPropagation(); this.presExpandDocumentClick(); }}> e.stopPropagation()} />
*/} -
{"Remove from presentation"}
}>
- e.stopPropagation()} /> -
-
-
{activeItem.presPinView ? (<>View of {targetDoc.title}) : targetDoc.title}
- {this.renderEmbeddedInline} -
} -
); - } - - render() { - return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : this.mainItem; - } +
{"Remove from presentation"}
}>
+ e.stopPropagation()} /> +
+
+
{activeItem.presPinView ? (<>View of {targetDoc.title}) : targetDoc.title}
+ {this.renderEmbeddedInline} +
} +
); + } + + render() { + return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : this.mainItem; + } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From a9ff0c90656de71e37edafba68e946807d41403f Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Wed, 4 May 2022 13:36:13 -0400 Subject: fix infinite pause/play bug with a stopper, but still very buggy --- src/client/util/RecordingApi.ts | 3 ++- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 ++-- .../views/nodes/RecordingBox/RecordingView.scss | 20 ++++++++++++-------- .../views/nodes/RecordingBox/RecordingView.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 5 +++++ 5 files changed, 22 insertions(+), 12 deletions(-) (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/src/client/util/RecordingApi.ts b/src/client/util/RecordingApi.ts index 8fb503b00..fec579486 100644 --- a/src/client/util/RecordingApi.ts +++ b/src/client/util/RecordingApi.ts @@ -188,7 +188,7 @@ export class RecordingApi { // TODO: set userdoc presentMode to browsing this.timers?.map(timer => clearTimeout(timer)) - this.videoBox = null; + // this.videoBox = null; } private videoBox: VideoBox | null = null; @@ -236,6 +236,7 @@ export class RecordingApi { }, timeDiff)) return arr; }, []) + } // Unfinished code for tracing multiple free form views diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 9e57bca4f..aa2e0c417 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -970,9 +970,9 @@ export class CollectionFreeFormView extends CollectionSubView