diff options
Diffstat (limited to 'src/client/views/nodes/RecordingBox')
| -rw-r--r-- | src/client/views/nodes/RecordingBox/RecordingBox.tsx | 33 |
1 files changed, 19 insertions, 14 deletions
diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx index 116069cbd..f6d94ce05 100644 --- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx @@ -1,4 +1,4 @@ -import { action, observable } from 'mobx'; +import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { DateField } from '../../../../fields/DateField'; @@ -8,20 +8,20 @@ import { List } from '../../../../fields/List'; import { BoolCast, DocCast } from '../../../../fields/Types'; import { VideoField } from '../../../../fields/URLField'; import { Upload } from '../../../../server/SharedMediaTypes'; -import { Docs } from '../../../documents/Documents'; import { DocumentType } from '../../../documents/DocumentTypes'; +import { Docs } from '../../../documents/Documents'; import { DocumentManager } from '../../../util/DocumentManager'; import { DragManager } from '../../../util/DragManager'; import { ScriptingGlobals } from '../../../util/ScriptingGlobals'; -import { SelectionManager } from '../../../util/SelectionManager'; import { Presentation } from '../../../util/TrackMovements'; import { undoBatch } from '../../../util/UndoManager'; -import { CollectionFreeFormView } from '../../collections/collectionFreeForm/CollectionFreeFormView'; import { ViewBoxBaseComponent } from '../../DocComponent'; +import { CollectionFreeFormView } from '../../collections/collectionFreeForm/CollectionFreeFormView'; import { media_state } from '../AudioBox'; import { FieldView, FieldViewProps } from '../FieldView'; import { VideoBox } from '../VideoBox'; import { RecordingView } from './RecordingView'; +import { DocData } from '../../../../fields/DocSymbols'; @observer export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { @@ -31,8 +31,13 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { private _ref: React.RefObject<HTMLDivElement> = React.createRef(); + constructor(props: FieldViewProps) { + super(props); + makeObservable(this); + } + componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentViewBox?.(this); Doc.SetNativeWidth(this.dataDoc, 1280); Doc.SetNativeHeight(this.dataDoc, 720); } @@ -50,7 +55,7 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { 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._props.fieldKey] = new VideoField(this.result.accessPaths.client); this.dataDoc[this.fieldKey + '_recorded'] = true; // stringify the presentation and store it if (presentation?.movements) { @@ -62,7 +67,7 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { @undoBatch @action public static WorkspaceStopRecording() { - const remDoc = RecordingBox.screengrabber?.rootDoc; + const remDoc = RecordingBox.screengrabber?.Document; if (remDoc) { //if recordingbox is true; when we press the stop button. changed vals temporarily to see if changes happening RecordingBox.screengrabber?.Pause?.(); @@ -101,7 +106,7 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { }); screengrabber.overlayX = 70; //was -400 screengrabber.overlayY = 590; //was 0 - Doc.GetProto(screengrabber)[Doc.LayoutFieldKey(screengrabber) + '_trackScreen'] = true; + screengrabber[DocData][Doc.LayoutFieldKey(screengrabber) + '_trackScreen'] = true; Doc.AddToMyOverlay(screengrabber); //just adds doc to overlay DocumentManager.Instance.AddViewRenderedCb(screengrabber, docView => { RecordingBox.screengrabber = docView.ComponentView as RecordingBox; @@ -122,7 +127,7 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { value.overlayY = window.innerHeight - 180; Doc.AddToMyOverlay(value); DocumentManager.Instance.AddViewRenderedCb(value, docView => { - Doc.UserDoc().currentRecording = docView.rootDoc; + Doc.UserDoc().currentRecording = docView.Document; docView.select(false); RecordingBox.resumeWorkspaceReplaying(value); }); @@ -136,9 +141,9 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { @action public static addRecToWorkspace(value: RecordingBox) { let ffView = Array.from(DocumentManager.Instance.DocumentViews).find(view => view.ComponentView instanceof CollectionFreeFormView); - (ffView?.ComponentView as CollectionFreeFormView).props.addDocument?.(value.rootDoc); - Doc.RemoveDocFromList(Doc.UserDoc(), 'workspaceRecordings', value.rootDoc); - Doc.RemFromMyOverlay(value.rootDoc); + (ffView?.ComponentView as CollectionFreeFormView)._props.addDocument?.(value.Document); + Doc.RemoveDocFromList(Doc.UserDoc(), 'workspaceRecordings', value.Document); + Doc.RemFromMyOverlay(value.Document); Doc.UserDoc().currentRecording = undefined; Doc.UserDoc().workspaceReplayingState = undefined; Doc.UserDoc().workspaceRecordingState = undefined; @@ -193,14 +198,14 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() { render() { return ( - <div className="recordingBox" ref={this._ref}> + <div className="recordingBox" style={{ width: '100%' }} ref={this._ref}> {!this.result && ( <RecordingView forceTrackScreen={BoolCast(this.layoutDoc[this.fieldKey + '_trackScreen'])} getControls={this.getControls} setResult={this.setResult} setDuration={this.setVideoDuration} - id={DocCast(this.rootDoc.proto)?.[Id] || ''} + id={DocCast(this.Document.proto)?.[Id] || ''} /> )} </div> |