reworked recording workspace UI and switched to recording window, not webcam

4 files changed, 141 insertions, 169 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 8a0706c30..998024cea 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -798,7 +798,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             !more && moreItems.length && cm.addItem({ description: 'More...', subitems: moreItems, icon: 'compass' });
         }
         const constantItems: ContextMenuProps[] = [];
-        if (!Doc.IsSystem(this.rootDoc)) {
+        if (!Doc.IsSystem(this.rootDoc) && this.rootDoc._type_collection !== CollectionViewType.Docking) {
             constantItems.push({ description: 'Zip Export', icon: 'download', event: async () => Doc.Zip(this.props.Document) });
             (this.rootDoc._type_collection !== CollectionViewType.Docking || !Doc.noviceMode) && constantItems.push({ description: 'Share', event: () => SharingManager.Instance.open(this.props.DocumentView()), icon: 'users' });
             if (this.props.removeDocument && Doc.ActiveDashboard !== this.props.Document) {
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index bb2069cc9..8ef9cd792 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -180,55 +180,45 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
      * Dropdown list
      */
     @computed get dropdownListButton() {
-        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const script = ScriptCast(this.rootDoc.script);
 
         let noviceList: string[] = [];
         let text: string | undefined;
-        let dropdown = true;
         let getStyle: (val: string) => any = () => {};
         let icon: IconProp = 'caret-down';
-        let isViewDropdown: boolean = script?.script.originalScript.startsWith('setView');
-        try {
-            if (isViewDropdown) {
-                const selectedDocs: Doc[] = SelectionManager.Docs();
-                const selected = SelectionManager.Docs().lastElement();
-                if (selected) {
-                    if (StrCast(selected.type) === DocumentType.COL) {
-                        text = StrCast(selected._type_collection);
+        const isViewDropdown = script?.script.originalScript.startsWith('setView');
+        if (isViewDropdown) {
+            const selected = SelectionManager.Docs();
+            if (selected.lastElement()) {
+                if (StrCast(selected.lastElement().type) === DocumentType.COL) {
+                    text = StrCast(selected.lastElement()._type_collection);
+                } else {
+                    if (selected.length > 1) {
+                        text = selected.length + ' selected';
                     } else {
-                        dropdown = false;
-                        if (selectedDocs.length > 1) {
-                            text = selectedDocs.length + ' selected';
-                        } else {
-                            text = Utils.cleanDocumentType(StrCast(selected.type) as DocumentType);
-                            icon = Doc.toIcon(selected);
-                        }
-                        return (
-                            <Popup
-                                icon={<FontAwesomeIcon size={'1x'} icon={icon} />}
-                                text={text}
-                                type={Type.TERT}
-                                color={SettingsManager.userColor}
-                                background={SettingsManager.userVariantColor}
-                                popup={<SelectedDocView selectedDocs={selectedDocs} />}
-                                fillWidth
-                            />
-                        );
+                        text = Utils.cleanDocumentType(StrCast(selected.lastElement().type) as DocumentType);
+                        icon = Doc.toIcon(selected.lastElement());
                     }
-                } else {
-                    dropdown = false;
-                    return <Button text="None Selected" type={Type.TERT} color={SettingsManager.userColor} background={SettingsManager.userVariantColor} fillWidth inactive />;
+                    return (
+                        <Popup
+                            icon={<FontAwesomeIcon size={'1x'} icon={icon} />}
+                            text={text}
+                            type={Type.TERT}
+                            color={SettingsManager.userColor}
+                            background={SettingsManager.userVariantColor}
+                            popup={<SelectedDocView selectedDocs={selected} />}
+                            fillWidth
+                        />
+                    );
                 }
-                noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
             } else {
-                text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
-                getStyle = (val: string) => {
-                    return { fontFamily: val };
-                };
+                return <Button text="None Selected" type={Type.TERT} color={SettingsManager.userColor} background={SettingsManager.userVariantColor} fillWidth inactive />;
             }
-        } catch (e) {
-            console.log(e);
+            noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
+        } else {
+            text = script?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: '', _readOnly_: true }).result;
+            // text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
+            getStyle = (val: string) => ({ fontFamily: val });
         }
 
         // Get items to place into the list
@@ -243,19 +233,17 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             }));
 
         return (
-            <div style={{ color: SettingsManager.userColor, background: SettingsManager.userBackgroundColor }}>
-                <Dropdown
-                    selectedVal={text}
-                    setSelectedVal={undoable(val => script.script.run({ this: this.layoutDoc, self: this.rootDoc, val }), `dropdown select ${this.label}`)}
-                    color={SettingsManager.userColor}
-                    background={isViewDropdown ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
-                    type={Type.TERT}
-                    dropdownType={DropdownType.SELECT}
-                    items={list}
-                    tooltip={this.label}
-                    fillWidth
-                />
-            </div>
+            <Dropdown
+                selectedVal={text ?? 'Record Workspace'}
+                setSelectedVal={undoable(val => script.script.run({ this: this.layoutDoc, self: this.rootDoc, val }), `dropdown select ${this.label}`)}
+                color={SettingsManager.userColor}
+                background={SettingsManager.userVariantColor}
+                type={Type.TERT}
+                dropdownType={DropdownType.SELECT}
+                items={list}
+                tooltip={this.label}
+                fillWidth
+            />
         );
     }
 
diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index 9dd673591..b1b044c25 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -1,11 +1,10 @@
 import { action, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { formatTime } from '../../../../Utils';
 import { Doc, DocListCast } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
 import { listSpec } from '../../../../fields/Schema';
-import { BoolCast, Cast, DocCast } from '../../../../fields/Types';
+import { BoolCast, Cast, DocCast, StrCast } from '../../../../fields/Types';
 import { VideoField } from '../../../../fields/URLField';
 import { Upload } from '../../../../server/SharedMediaTypes';
 import { Docs } from '../../../documents/Documents';
@@ -22,6 +21,8 @@ import { FieldView, FieldViewProps } from '../FieldView';
 import { VideoBox } from '../VideoBox';
 import { RecordingView } from './RecordingView';
 import { DateField } from '../../../../fields/DateField';
+import { media_state } from '../AudioBox';
+import { List } from '../../../../fields/List';
 
 @observer
 export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
@@ -41,9 +42,7 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @observable videoDuration: number | undefined = undefined;
 
     @action
-    setVideoDuration = (duration: number) => {
-        this.videoDuration = duration;
-    };
+    setVideoDuration = (duration: number) => (this.videoDuration = duration);
 
     @action
     setResult = (info: Upload.AccessPathInfo, presentation?: Presentation) => {
@@ -61,76 +60,68 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
             this.dataDoc[this.fieldKey + '_presentation'] = JSON.stringify(presCopy);
         }
     };
-
-    /**
-     * This method toggles whether or not we are currently using the RecordingBox to record with the topbar button
-     * @param _readOnly_
-     * @returns
-     */
     @undoBatch
     @action
-    public static toggleWorkspaceRecording(_readOnly_: boolean) {
-        if (_readOnly_) return RecordingBox.screengrabber ? true : false;
-        if (RecordingBox.screengrabber) {
+    public static WorkspaceStopRecording() {
+        const remDoc = RecordingBox.screengrabber?.rootDoc;
+        if (remDoc) {
             //if recordingbox is true; when we press the stop button. changed vals temporarily to see if changes happening
-            console.log('grabbing screen!');
-            RecordingBox.screengrabber.Pause?.();
-            const remDoc = RecordingBox.screengrabber.rootDoc;
+            RecordingBox.screengrabber?.Pause?.();
             setTimeout(() => {
                 RecordingBox.screengrabber?.Finish?.();
-                RecordingBox.screengrabber!.rootDoc.overlayX = 70; //was 100
-                RecordingBox.screengrabber!.rootDoc.overlayY = 590;
-                console.log(RecordingBox.screengrabber);
+                remDoc.overlayX = 70; //was 100
+                remDoc.overlayY = 590;
                 RecordingBox.screengrabber = undefined;
             }, 100);
             //could break if recording takes too long to turn into videobox. If so, either increase time on setTimeout below or find diff place to do this
-            setTimeout(() => {
-                Doc.RemFromMyOverlay(remDoc);
-            }, 1000);
-            Doc.UserDoc().isRecording = false;
-            Doc.AddDocToList(Doc.UserDoc(), 'workspaceRecordings', RecordingBox.screengrabber.rootDoc);
-        } else {
-            //when we first press mic
-            const screengrabber = Docs.Create.WebCamDocument('', {
-                title: `${Doc.ActiveDashboard?.title ?? ''} ${new DateField()}`,
-                _width: 205,
-                _height: 115,
-            });
-            screengrabber.overlayX = 70; //was -400
-            screengrabber.overlayY = 590; //was 0
-            screengrabber[Doc.LayoutFieldKey(screengrabber) + '_trackScreen'] = true;
-            Doc.AddToMyOverlay(screengrabber); //just adds doc to overlay
-            DocumentManager.Instance.AddViewRenderedCb(screengrabber, docView => {
-                RecordingBox.screengrabber = docView.ComponentView as RecordingBox;
-                RecordingBox.screengrabber.Record?.();
-            });
-            Doc.UserDoc().isRecording = true;
+            setTimeout(() => Doc.RemFromMyOverlay(remDoc), 1000);
+            Doc.UserDoc().workspaceRecordingState = media_state.Paused;
+            Doc.AddDocToList(Doc.UserDoc(), 'workspaceRecordings', remDoc);
         }
     }
 
     /**
+     * This method toggles whether or not we are currently using the RecordingBox to record with the topbar button
+     * @param _readOnly_
+     * @returns
+     */
+    @undoBatch
+    @action
+    public static WorkspaceStartRecording() {
+        const screengrabber = Docs.Create.ScreenshotDocument({
+            title: `${Doc.ActiveDashboard?.title ?? ''} ${new DateField()}`,
+            _width: 205,
+            _height: 115,
+        });
+        screengrabber.overlayX = 70; //was -400
+        screengrabber.overlayY = 590; //was 0
+        screengrabber[Doc.LayoutFieldKey(screengrabber) + '_trackScreen'] = true;
+        Doc.AddToMyOverlay(screengrabber); //just adds doc to overlay
+        DocumentManager.Instance.AddViewRenderedCb(screengrabber, docView => {
+            RecordingBox.screengrabber = docView.ComponentView as RecordingBox;
+            RecordingBox.screengrabber.Record?.();
+        });
+        Doc.UserDoc().workspaceRecordingState = media_state.Recording;
+    }
+
+    /**
      * This method changes the menu depending on whether or not we are in playback mode
      * @param value  RecordingBox rootdoc
      */
     @undoBatch
     @action
-    public static toggleWorkspaceRecPlayback(value: Doc) {
+    public static replayWorkspace(value: Doc) {
         Doc.UserDoc().currentRecording = value;
-        console.log(value);
         value.overlayX = 70;
         value.overlayY = 590;
-        if (!Doc.UserDoc().isAddRecToDocMode) {
-            Doc.UserDoc().isRecPlayback = true;
-            Doc.UserDoc().isWorkspaceRecPlaying = true;
-            Doc.AddToMyOverlay(value);
-            DocumentManager.Instance.AddViewRenderedCb(value, docView => {
-                Doc.UserDoc().currentRecording = docView.rootDoc;
-                SelectionManager.SelectSchemaViewDoc(value);
-            });
-        } else {
-            let recordingIndex = DocListCast(Doc.UserDoc().workspaceRecordings).indexOf(value);
-            DragManager.StartDropdownDrag([document.createElement('div')], new DragManager.DocumentDragData([value]), 1, 1, recordingIndex);
-        }
+        Doc.AddToMyOverlay(value);
+        DocumentManager.Instance.AddViewRenderedCb(value, docView => {
+            Doc.UserDoc().currentRecording = docView.rootDoc;
+            SelectionManager.SelectSchemaViewDoc(value);
+            RecordingBox.resumeWorkspaceReplaying(value);
+        });
+        // let recordingIndex = DocListCast(Doc.UserDoc().workspaceRecordings).indexOf(value);
+        // DragManager.StartDropdownDrag([document.createElement('div')], new DragManager.DocumentDragData([value]), 1, 1, recordingIndex);
     }
 
     /**
@@ -140,62 +131,55 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @undoBatch
     @action
     public static addRecToWorkspace(value: RecordingBox) {
-        console.log('adding rec to doc');
-        console.log(value);
         let ffView = Array.from(DocumentManager.Instance.DocumentViews).find(view => view.ComponentView instanceof CollectionFreeFormView);
         (ffView?.ComponentView as CollectionFreeFormView).props.addDocument?.(value.rootDoc);
-        let recordingIndex = DocListCast(Doc.UserDoc().workspaceRecordings).indexOf(value.rootDoc);
-        console.log(recordingIndex);
-        Cast(Doc.UserDoc().workspaceRecordings, listSpec(Doc), null)?.splice(recordingIndex, 1);
-        Doc.UserDoc().isAddRecToDocMode = false;
+        Doc.RemoveDocFromList(Doc.UserDoc(), 'workspaceRecordings', value.rootDoc);
         Doc.RemFromMyOverlay(value.rootDoc);
         Doc.UserDoc().currentRecording = undefined;
-        Doc.UserDoc().isRecPlayback = false;
-        Doc.UserDoc().isAddRecToDocMode = false;
-        Doc.UserDoc().isWorkspaceRecPlaying = false;
-        Doc.UserDoc().isWorkspaceRecPaused = false;
+        Doc.UserDoc().workspaceReplayingState = undefined;
+        Doc.UserDoc().workspaceRecordingState = undefined;
     }
 
     @undoBatch
     @action
-    public static playWorkspaceRec(value: VideoBox) {
-        value.Play();
-        Doc.UserDoc().isWorkspaceRecPlaying = false;
-        Doc.UserDoc().isWorkspaceRecPaused = true;
+    public static resumeWorkspaceReplaying(doc: Doc) {
+        const docView = DocumentManager.Instance.getDocumentView(doc);
+        const videoBox = docView?.ComponentView as VideoBox;
+        if (videoBox) {
+            videoBox.Play();
+            Doc.UserDoc().workspaceReplayingState = media_state.Playing;
+        }
     }
 
     @undoBatch
     @action
-    public static pauseWorkspaceRec(value: VideoBox) {
-        value.Pause();
-        Doc.UserDoc().isWorkspaceRecPlaying = true;
-        Doc.UserDoc().isWorkspaceRecPaused = false;
+    public static pauseWorkspaceReplaying(doc: Doc) {
+        const docView = DocumentManager.Instance.getDocumentView(doc);
+        const videoBox = docView?.ComponentView as VideoBox;
+        if (videoBox) {
+            videoBox.Pause();
+        }
+        Doc.UserDoc().workspaceReplayingState = media_state.Paused;
     }
 
     @undoBatch
     @action
-    public static closeWorkspaceRec(value: VideoBox) {
-        value.Pause();
-        Doc.RemFromMyOverlay(value.rootDoc);
+    public static stopWorkspaceReplaying(value: Doc) {
+        Doc.RemFromMyOverlay(value);
         Doc.UserDoc().currentRecording = undefined;
-        Doc.UserDoc().isRecPlayback = false;
-        Doc.UserDoc().isWorkspaceRecPlaying = false;
-        Doc.UserDoc().isWorkspaceRecPaused = false;
-        Doc.RemFromMyOverlay(value.rootDoc);
+        Doc.UserDoc().workspaceReplayingState = undefined;
+        Doc.UserDoc().workspaceRecordingState = undefined;
+        Doc.RemFromMyOverlay(value);
     }
 
     @undoBatch
     @action
-    public static removeWorkspaceRec(value: VideoBox) {
-        let recordingIndex = DocListCast(Doc.UserDoc().workspaceRecordings).indexOf(value.rootDoc);
-        Cast(Doc.UserDoc().workspaceRecordings, listSpec(Doc), null)?.splice(recordingIndex, 1);
-        Doc.UserDoc().isAddRecToDocMode = false;
-        Doc.RemFromMyOverlay(value.rootDoc);
+    public static removeWorkspaceReplaying(value: Doc) {
+        Doc.RemoveDocFromList(Doc.UserDoc(), 'workspaceRecordings', value);
+        Doc.RemFromMyOverlay(value);
         Doc.UserDoc().currentRecording = undefined;
-        Doc.UserDoc().isRecPlayback = false;
-        Doc.UserDoc().isAddRecToDocMode = false;
-        Doc.UserDoc().isWorkspaceRecPlaying = false;
-        Doc.UserDoc().isWorkspaceRecPaused = false;
+        Doc.UserDoc().workspaceReplayingState = undefined;
+        Doc.UserDoc().workspaceRecordingState = undefined;
     }
 
     Record: undefined | (() => void);
@@ -225,47 +209,44 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
     static screengrabber: RecordingBox | undefined;
 }
 
-ScriptingGlobals.add(function toggleRecording(_readOnly_: boolean) {
-    RecordingBox.toggleWorkspaceRecording(_readOnly_);
-});
-ScriptingGlobals.add(function toggleRecPlayback(value: Doc) {
-    RecordingBox.toggleWorkspaceRecPlayback(value);
+ScriptingGlobals.add(function startWorkspaceRecording() {
+    RecordingBox.WorkspaceStartRecording();
 });
-ScriptingGlobals.add(function addRectoWorkspace(value: RecordingBox) {
-    RecordingBox.addRecToWorkspace(value);
+ScriptingGlobals.add(function stopWorkspaceRecording() {
+    RecordingBox.WorkspaceStopRecording();
 });
 
-ScriptingGlobals.add(function playWorkspaceRec(value: VideoBox) {
-    RecordingBox.playWorkspaceRec(value);
+ScriptingGlobals.add(function stopWorkspaceReplaying(value: Doc) {
+    RecordingBox.stopWorkspaceReplaying(value);
 });
-ScriptingGlobals.add(function pauseWorkspaceRec(value: VideoBox) {
-    RecordingBox.pauseWorkspaceRec(value);
-});
-ScriptingGlobals.add(function closeWorkspaceRec(value: VideoBox) {
-    RecordingBox.closeWorkspaceRec(value);
-});
-ScriptingGlobals.add(function removeWorkspaceRec(value: VideoBox) {
-    RecordingBox.removeWorkspaceRec(value);
+ScriptingGlobals.add(function removeWorkspaceReplaying(value: Doc) {
+    RecordingBox.removeWorkspaceReplaying(value);
 });
 
+ScriptingGlobals.add(function getCurrentRecording() {
+    return Doc.UserDoc().currentRecording;
+});
 ScriptingGlobals.add(function getWorkspaceRecordings() {
-    return Doc.UserDoc().workspaceRecordings;
+    return new List<any>(['Record Workspace', ...DocListCast(Doc.UserDoc().workspaceRecordings)]);
 });
-ScriptingGlobals.add(function getIsRecording() {
-    return Doc.UserDoc().isRecording;
+ScriptingGlobals.add(function isWorkspaceRecording() {
+    return Doc.UserDoc().workspaceRecordingState === media_state.Recording;
 });
-ScriptingGlobals.add(function getIsRecPlayback() {
-    return Doc.UserDoc().isRecPlayback;
+ScriptingGlobals.add(function isWorkspaceReplaying() {
+    return Doc.UserDoc().workspaceReplayingState;
 });
-ScriptingGlobals.add(function getCurrentRecording() {
-    return Doc.UserDoc().currentRecording;
+ScriptingGlobals.add(function replayWorkspace(value: Doc | string, _readOnly_: boolean) {
+    if (_readOnly_) return DocCast(Doc.UserDoc().currentRecording) ?? 'Record Workspace';
+    if (typeof value === 'string') RecordingBox.WorkspaceStartRecording();
+    else RecordingBox.replayWorkspace(value);
 });
-ScriptingGlobals.add(function getIsWorkspaceRecPlaying() {
-    return Doc.UserDoc().isWorkspaceRecPlaying;
+ScriptingGlobals.add(function pauseWorkspaceReplaying(value: Doc, _readOnly_: boolean) {
+    RecordingBox.pauseWorkspaceReplaying(value);
 });
-ScriptingGlobals.add(function getIsWorkspaceRecPaused() {
-    return Doc.UserDoc().isWorkspaceRecPaused;
+ScriptingGlobals.add(function resumeWorkspaceReplaying(value: Doc, _readOnly_: boolean) {
+    RecordingBox.resumeWorkspaceReplaying(value);
 });
+
 ScriptingGlobals.add(function renderDropdown() {
     if (!Doc.UserDoc().workspaceRecordings || DocListCast(Doc.UserDoc().workspaceRecordings).length === 0) {
         return true;
diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx
index fa19caae1..4ebc93165 100644
--- a/src/client/views/nodes/ScreenshotBox.tsx
+++ b/src/client/views/nodes/ScreenshotBox.tsx
@@ -219,6 +219,9 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
         // }
         return null;
     }
+    Record = () => !this._screenCapture && this.toggleRecording();
+    Pause = () => this._screenCapture && this.toggleRecording();
+
     toggleRecording = async () => {
         if (!this._screenCapture) {
             this._audioRec = new MediaRecorder(await navigator.mediaDevices.getUserMedia({ audio: true }));