Merge branch 'master' into alyssa-starter

1 files changed, 18 insertions, 18 deletions

diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx
index 3be50f5e6..6289470b6 100644
--- a/src/client/views/nodes/ScreenshotBox.tsx
+++ b/src/client/views/nodes/ScreenshotBox.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/media-has-caption */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as React from 'react';
 // import { Canvas } from '@react-three/fiber';
@@ -21,7 +20,7 @@ import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
 import { CaptureManager } from '../../util/CaptureManager';
 import { SettingsManager } from '../../util/SettingsManager';
-import { TrackMovements } from '../../util/TrackMovements';
+import { Movement, TrackMovements } from '../../util/TrackMovements';
 import { ContextMenu } from '../ContextMenu';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
 import { DocViewUtils } from '../DocViewUtils';
@@ -32,10 +31,11 @@ import { FieldView, FieldViewProps } from './FieldView';
 import './ScreenshotBox.scss';
 import { VideoBox } from './VideoBox';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
-declare class MediaRecorder {
-    constructor(e: any, options?: any); // whatever MediaRecorder has
-}
+// declare class MediaRecorder {
+//     constructor(e: any, options?: any); // whatever MediaRecorder has
+// }
 
 // interface VideoTileProps {
 //     raised: { coord: Vector2, off: Vector3 }[];
@@ -118,8 +118,8 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(ScreenshotBox, fieldKey);
     }
-    private _audioRec: any;
-    private _videoRec: any;
+    private _audioRec: MediaRecorder | undefined;
+    private _videoRec: MediaRecorder | undefined;
     @observable private _videoRef: HTMLVideoElement | null = null;
     @observable _screenCapture = false;
     @computed get recordingStart() {
@@ -137,7 +137,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     };
 
     videoLoad = () => {
-        const aspect = this._videoRef!.videoWidth / this._videoRef!.videoHeight;
+        const aspect = (this._videoRef?.videoWidth || 0) / (this._videoRef?.videoHeight || 1);
         const nativeWidth = Doc.NativeWidth(this.layoutDoc);
         const nativeHeight = Doc.NativeHeight(this.layoutDoc);
         if (!nativeWidth || !nativeHeight) {
@@ -167,7 +167,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     }
 
     specificContextMenu = (): void => {
-        const subitems = [{ description: 'Screen Capture', event: this.toggleRecording, icon: 'expand-arrows-alt' as any }];
+        const subitems = [{ description: 'Screen Capture', event: this.toggleRecording, icon: 'expand-arrows-alt' as IconProp }];
         ContextMenu.Instance.addItem({ description: 'Options...', subitems, icon: 'video' });
     };
 
@@ -222,29 +222,29 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     Pause = () => this._screenCapture && this.toggleRecording();
 
     toggleRecording = async () => {
-        if (!this._screenCapture) {
+        if (!this._screenCapture && this._videoRef) {
             this._audioRec = new MediaRecorder(await navigator.mediaDevices.getUserMedia({ audio: true }));
-            const audChunks: any = [];
-            this._audioRec.ondataavailable = (e: any) => audChunks.push(e.data);
+            const audChunks: Blob[] = [];
+            this._audioRec.ondataavailable = e => audChunks.push(e.data);
             this._audioRec.onstop = async () => {
-                const [{ result }] = await Networking.UploadFilesToServer(audChunks.map((file: any) => ({ file })));
+                const [{ result }] = await Networking.UploadFilesToServer(audChunks.map(file => ({ file })));
                 if (!(result instanceof Error)) {
                     this.dataDoc[this._props.fieldKey + '_audio'] = new AudioField(result.accessPaths.agnostic.client);
                 }
             };
-            this._videoRef!.srcObject = await (navigator.mediaDevices as any).getDisplayMedia({ video: true });
-            this._videoRec = new MediaRecorder(this._videoRef!.srcObject);
-            const vidChunks: any = [];
+            this._videoRef.srcObject = await navigator.mediaDevices.getDisplayMedia({ video: true });
+            this._videoRec = new MediaRecorder(this._videoRef.srcObject);
+            const vidChunks: Blob[] = [];
             this._videoRec.onstart = () => {
                 if (this.dataDoc[this._props.fieldKey + '_trackScreen']) TrackMovements.Instance.start();
                 this.dataDoc[this._props.fieldKey + '_recordingStart'] = new DateField(new Date());
             };
-            this._videoRec.ondataavailable = (e: any) => vidChunks.push(e.data);
+            this._videoRec.ondataavailable = e => vidChunks.push(e.data);
             this._videoRec.onstop = async () => {
                 const presentation = TrackMovements.Instance.yieldPresentation();
                 if (presentation?.movements) {
                     const presCopy = { ...presentation };
-                    presCopy.movements = presentation.movements.map(movement => ({ ...movement, doc: movement.doc[Id] })) as any;
+                    presCopy.movements = presentation.movements.map(movement => ({ ...movement, doc: (movement.doc as Doc)[Id] }) as Movement);
                     this.dataDoc[this.fieldKey + '_presentation'] = JSON.stringify(presCopy);
                 }
                 TrackMovements.Instance.finish();