1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
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, FieldViewProps } 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 { BoolCast, DocCast } from '../../../../fields/Types';
import { ScriptingGlobals } from '../../../util/ScriptingGlobals';
import { DocumentManager } from '../../../util/DocumentManager';
import { Docs } from '../../../documents/Documents';
@observer
export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
public static LayoutString(fieldKey: string) {
return FieldView.LayoutString(RecordingBox, fieldKey);
}
private _ref: React.RefObject<HTMLDivElement> = React.createRef();
componentDidMount() {
this.props.setContentView?.(this);
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);
}
};
Record: undefined | (() => void);
Pause: undefined | (() => void);
Finish: undefined | (() => void);
getControls = (record: () => void, pause: () => void, finish: () => void) => {
this.Record = record;
this.Pause = pause;
this.Finish = finish;
};
render() {
return (
<div className="recordingBox" 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] || ''}
/>
)}
</div>
);
}
static screengrabber: RecordingBox | undefined;
}
ScriptingGlobals.add(function toggleRecording(_readOnly_: boolean) {
if (_readOnly_) return RecordingBox.screengrabber ? true : false;
if (RecordingBox.screengrabber) {
RecordingBox.screengrabber.Pause?.();
setTimeout(() => {
RecordingBox.screengrabber?.Finish?.();
RecordingBox.screengrabber!.rootDoc.overlayX = 100;
RecordingBox.screengrabber!.rootDoc.overlayY = 100;
RecordingBox.screengrabber = undefined;
}, 100);
} else {
const screengrabber = Docs.Create.WebCamDocument('', {
_width: 384,
_height: 216,
});
screengrabber.overlayX = -400;
screengrabber.overlayY = 0;
screengrabber[Doc.LayoutFieldKey(screengrabber) + '_trackScreen'] = true;
Doc.AddToMyOverlay(screengrabber);
DocumentManager.Instance.AddViewRenderedCb(screengrabber, docView => {
RecordingBox.screengrabber = docView.ComponentView as RecordingBox;
RecordingBox.screengrabber.Record?.();
});
}
}, 'toggle recording');
|
