From 939e18624af4252551f38c43335ee8ef0acd144c Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sun, 21 Apr 2024 19:03:49 -0400
Subject: more lint cleanup

---
 src/client/views/nodes/VideoBox.tsx | 103 ++++++++++++++++++++++++------------
 1 file changed, 68 insertions(+), 35 deletions(-)

(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 60141b2a6..5b3f37993 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/media-has-caption */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -153,11 +154,14 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
                     clearTimeout(this._controlsFadeTimer);
                     this._scrubbing = true;
                     this._controlsFadeTimer = setTimeout(
-                        action(() => (this._scrubbing = false)),
+                        action(() => {
+                            this._scrubbing = false;
+                        }),
                         500
                     );
                     e.stopPropagation();
                     break;
+                default:
             }
         }
     };
@@ -204,7 +208,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
         else {
             this._keepCurrentlyPlaying = true;
             this.pause();
-            setTimeout(() => (this._keepCurrentlyPlaying = false));
+            setTimeout(() => {
+                this._keepCurrentlyPlaying = false;
+            });
         }
     };
 
@@ -247,7 +253,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
             clearTimeout(this._controlsFadeTimer);
             this._controlsVisible = true;
             this._controlsFadeTimer = setTimeout(
-                action(() => (this._controlsVisible = false)),
+                action(() => {
+                    this._controlsVisible = false;
+                }),
                 3000
             );
         }
@@ -281,7 +289,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
         const canvas = document.createElement('canvas');
         canvas.width = 640;
         canvas.height = (640 * Doc.NativeHeight(this.layoutDoc)) / (Doc.NativeWidth(this.layoutDoc) || 1);
-        const ctx = canvas.getContext('2d'); //draw image to canvas. scale to target dimensions
+        const ctx = canvas.getContext('2d'); // draw image to canvas. scale to target dimensions
         if (ctx) {
             this._videoRef && ctx.drawImage(this._videoRef, 0, 0, canvas.width, canvas.height);
         }
@@ -298,7 +306,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
             this._props.addDocument?.(b);
             DocUtils.MakeLink(b, this.Document, { link_relationship: 'video snapshot' });
         } else {
-            //convert to desired file format
+            // convert to desired file format
             const dataUrl = canvas.toDataURL('image/png'); // can also use 'image/png'
             // if you want to preview the captured image,
             const retitled = StrCast(this.Document.title).replace(/[ -\.:]/g, '');
@@ -335,7 +343,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
         Doc.SetNativeWidth(imageSnapshot[DocData], Doc.NativeWidth(this.layoutDoc));
         Doc.SetNativeHeight(imageSnapshot[DocData], Doc.NativeHeight(this.layoutDoc));
         this._props.addDocument?.(imageSnapshot);
-        const link = DocUtils.MakeLink(imageSnapshot, this.getAnchor(true), { link_relationship: 'video snapshot' });
+        DocUtils.MakeLink(imageSnapshot, this.getAnchor(true), { link_relationship: 'video snapshot' });
         // link && (DocCast(link.link_anchor_2)[DocData].timecodeToHide = NumCast(DocCast(link.link_anchor_2).timecodeToShow) + 3);  // do we need to set an end time? should default to +0.1
         setTimeout(() => downX !== undefined && downY !== undefined && DocumentManager.Instance.getFirstDocumentView(imageSnapshot)?.startDragging(downX, downY, dropActionType.move, true));
     };
@@ -346,7 +354,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
         if (!addAsAnnotation && marquee) marquee.backgroundColor = 'transparent';
         const anchor =
             addAsAnnotation && marquee
-                ? CollectionStackedTimeline.createAnchor(this.Document, this.dataDoc, this.annotationKey, timecode ? timecode : undefined, undefined, marquee, addAsAnnotation) || this.Document
+                ? CollectionStackedTimeline.createAnchor(this.Document, this.dataDoc, this.annotationKey, timecode || undefined, undefined, marquee, addAsAnnotation) || this.Document
                 : Docs.Create.ConfigDocument({ title: '#' + timecode, _timecodeToShow: timecode, annotationOn: this.Document });
         PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), temporal: true, pannable: true } }, this.Document);
         return anchor;
@@ -376,12 +384,14 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
         if (this._stackedTimeline?.makeDocUnfiltered(doc)) {
             if (this.heightPercent === 100) {
                 // do we want to always open up the timeline when followin a link? kind of clunky visually
-                //this.layoutDoc._layout_timelineHeightPercent = VideoBox.heightPercent;
+                // this.layoutDoc._layout_timelineHeightPercent = VideoBox.heightPercent;
                 options.didMove = true;
             }
             return this._stackedTimeline.getView(doc, options);
         }
-        return new Promise<Opt<DocumentView>>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv)));
+        return new Promise<Opt<DocumentView>>(res => {
+            DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv));
+        });
     };
 
     // extracts video thumbnails and saves them as field of doc
@@ -391,7 +401,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
         const thumbnailPromises: Promise<any>[] = [];
         const video = document.createElement('video');
 
-        video.onloadedmetadata = () => (video.currentTime = 0);
+        video.onloadedmetadata = () => {
+            video.currentTime = 0;
+        };
 
         video.onseeked = () => {
             const canvas = document.createElement('canvas');
@@ -405,7 +417,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
             if (newTime < video.duration) {
                 video.currentTime = newTime;
             } else {
-                Promise.all(thumbnailPromises).then(thumbnails => (this.dataDoc[this.fieldKey + '_thumbnails'] = new List<string>(thumbnails)));
+                Promise.all(thumbnailPromises).then(thumbnails => {
+                    this.dataDoc[this.fieldKey + '_thumbnails'] = new List<string>(thumbnails);
+                });
             }
         };
 
@@ -424,11 +438,13 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
             this._disposers.reactionDisposer?.();
             this._disposers.reactionDisposer = reaction(
                 () => NumCast(this.layoutDoc._layout_currentTimecode),
-                time => !this._playing && (vref.currentTime = time),
+                time => {
+                    !this._playing && (vref.currentTime = time);
+                },
                 { fireImmediately: true }
             );
 
-            (!this.dataDoc[this.fieldKey + '_thumbnails'] || StrListCast(this.dataDoc[this.fieldKey + '_thumbnails']).length != VideoBox.numThumbnails) && this.getVideoThumbnails();
+            (!this.dataDoc[this.fieldKey + '_thumbnails'] || StrListCast(this.dataDoc[this.fieldKey + '_thumbnails']).length !== VideoBox.numThumbnails) && this.getVideoThumbnails();
         }
     };
 
@@ -437,7 +453,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
     setContentRef = (cref: HTMLDivElement | null) => {
         this._contentRef = cref;
         if (cref) {
-            cref.onfullscreenchange = action(e => {
+            cref.onfullscreenchange = action(() => {
                 this._fullScreen = document.fullscreenElement === cref;
                 this._controlsVisible = true;
                 this._scrubbing = false;
@@ -452,7 +468,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
     };
 
     // context menu
-    specificContextMenu = (e: React.MouseEvent): void => {
+    specificContextMenu = (): void => {
         const field = Cast(this.dataDoc[this._props.fieldKey], VideoField);
         if (field) {
             const url = field.url.href;
@@ -463,7 +479,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
                 subitems.push({
                     description: 'Screen Capture',
                     event: async () => {
-                        runInAction(() => (this._screenCapture = !this._screenCapture));
+                        runInAction(() => {
+                            this._screenCapture = !this._screenCapture;
+                        });
                         this._videoRef!.srcObject = !this._screenCapture ? undefined : await (navigator.mediaDevices as any).getDisplayMedia({ video: true });
                     },
                     icon: 'expand-arrows-alt',
@@ -471,7 +489,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
             subitems.push({ description: (this.layoutDoc.dontAutoFollowLinks ? '' : "Don't") + ' follow links when encountered', event: () => (this.layoutDoc.dontAutoFollowLinks = !this.layoutDoc.dontAutoFollowLinks), icon: 'expand-arrows-alt' });
             subitems.push({
                 description: (this.layoutDoc.dontAutoPlayFollowedLinks ? '' : "Don't") + ' play when link is selected',
-                event: () => (this.layoutDoc.dontAutoPlayFollowedLinks = !this.layoutDoc.dontAutoPlayFollowedLinks),
+                event: () => {
+                    this.layoutDoc.dontAutoPlayFollowedLinks = !this.layoutDoc.dontAutoPlayFollowedLinks;
+                },
                 icon: 'expand-arrows-alt',
             });
             subitems.push({ description: (this.layoutDoc.autoPlayAnchors ? "Don't auto play" : 'Auto play') + ' anchors onClick', event: () => (this.layoutDoc.autoPlayAnchors = !this.layoutDoc.autoPlayAnchors), icon: 'expand-arrows-alt' });
@@ -505,7 +525,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
     };
 
     // ref for updating time
-    setAudioRef = (e: HTMLAudioElement | null) => (this._audioPlayer = e);
+    setAudioRef = (e: HTMLAudioElement | null) => {
+        this._audioPlayer = e;
+    };
 
     // renders the video and audio
     @computed get content() {
@@ -587,7 +609,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
         setupMoveUpEvents(
             this,
             e,
-            action(encodeURIComponent => {
+            action(() => {
                 this._clicking = false;
                 if (this._props.isContentActive()) {
                     // const local = this.ScreenToLocalTransform().scale(this._props.scaling?.() || 1).transformPoint(e.clientX, e.clientY);
@@ -601,7 +623,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
             () => {
                 this.layoutDoc._layout_timelineHeightPercent = this.heightPercent !== 100 ? 100 : VideoBox.heightPercent;
                 setTimeout(
-                    action(() => (this._clicking = false)),
+                    action(() => {
+                        this._clicking = false;
+                    }),
                     500
                 );
             },
@@ -636,7 +660,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
     addDocWithTimecode(doc: Doc | Doc[]): boolean {
         const docs = doc instanceof Doc ? [doc] : doc;
         const curTime = NumCast(this.layoutDoc._layout_currentTimecode);
-        docs.forEach(doc => (doc._timecodeToHide = (doc._timecodeToShow = curTime) + 1));
+        docs.forEach(doc => {
+            doc._timecodeToHide = (doc._timecodeToShow = curTime) + 1;
+        });
         return this.addDocument(doc);
     }
 
@@ -732,11 +758,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
     // stretches vertically or horizontally depending on video orientation so video fits full screen
     fullScreenSize() {
         if (this._videoRef && this._videoRef.videoHeight / this._videoRef.videoWidth > 1) {
-            //prettier-ignore
-            return ({ height: '100%' });
+            return { height: '100%' };
         }
-        //prettier-ignore
-        return ({ width: '100%' });
+        return ({ width: '100%' }); // prettier-ignore
     }
 
     // for zoom slider, sets timeline waveform zoom
@@ -778,7 +802,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
         this._props.select(true);
     };
 
-    timelineWhenChildContentsActiveChanged = action((isActive: boolean) => this._props.whenChildContentsActiveChanged((this._isAnyChildContentActive = isActive)));
+    timelineWhenChildContentsActiveChanged = action((isActive: boolean) => {
+        this._isAnyChildContentActive = isActive;
+        this._props.whenChildContentsActiveChanged(isActive);
+    });
 
     timelineScreenToLocal = () =>
         this._props
@@ -786,7 +813,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
             .scale(this.scaling())
             .translate(0, (-this.heightPercent / 100) * this._props.PanelHeight());
 
-    setPlayheadTime = (time: number) => (this.player!.currentTime = this.layoutDoc._layout_currentTimecode = time);
+    setPlayheadTime = (time: number) => {
+        this.player!.currentTime = this.layoutDoc._layout_currentTimecode = time;
+    };
 
     timelineHeight = () => (this._props.PanelHeight() * (100 - this.heightPercent)) / 100;
 
@@ -849,7 +878,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
         return (
             <div className="videoBox-stackPanel" style={{ transition: this.transition, height: `${100 - this.heightPercent}%`, display: this.heightPercent === 100 ? 'none' : '' }}>
                 <CollectionStackedTimeline
-                    ref={action((r: any) => (this._stackedTimeline = r))}
+                    ref={action((r: any) => {
+                        this._stackedTimeline = r;
+                    })}
+                    // eslint-disable-next-line react/jsx-props-no-spreading
                     {...this._props}
                     dataFieldKey={this.fieldKey}
                     fieldKey={this.annotationKey}
@@ -887,7 +919,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
     }
 
     crop = (region: Doc | undefined, addCrop?: boolean) => {
-        if (!region) return;
+        if (!region) return undefined;
         const cropping = Doc.MakeCopy(region, true);
         const regionData = region[DocData];
         regionData.backgroundColor = 'transparent';
@@ -916,8 +948,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
         croppingProto.type = DocumentType.VID;
         croppingProto.layout = VideoBox.LayoutString('data');
         croppingProto.data = ObjectField.MakeCopy(this.dataDoc[this.fieldKey] as ObjectField);
-        croppingProto['data_nativeWidth'] = anchw;
-        croppingProto['data_nativeHeight'] = anchh;
+        croppingProto.data_nativeWidth = anchw;
+        croppingProto.data_nativeHeight = anchh;
         croppingProto.videoCrop = true;
         croppingProto.layout_currentTimecode = this.layoutDoc._layout_currentTimecode;
         croppingProto.freeform_scale = viewScale;
@@ -959,14 +991,15 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
                             left: (this._props.PanelWidth() - this.panelWidth()) / 2,
                         }}>
                         <CollectionFreeFormView
+                            // eslint-disable-next-line react/jsx-props-no-spreading
                             {...this._props}
                             setContentViewBox={emptyFunction}
                             NativeWidth={returnZero}
                             NativeHeight={returnZero}
                             renderDepth={this._props.renderDepth + 1}
                             fieldKey={this.annotationKey}
-                            isAnnotationOverlay={true}
-                            annotationLayerHostsContent={true}
+                            isAnnotationOverlay
+                            annotationLayerHostsContent
                             PanelWidth={this._props.PanelWidth}
                             PanelHeight={this._props.PanelHeight}
                             isAnyChildContentActive={returnFalse}
@@ -1050,12 +1083,12 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
                     </div>
                 )}
 
-                <div className="videobox-button" title={'full screen'} onPointerDown={this.onFullDown}>
+                <div className="videobox-button" title="full screen" onPointerDown={this.onFullDown}>
                     <FontAwesomeIcon icon="expand" />
                 </div>
 
                 {!this._fullScreen && width > 300 && (
-                    <div className="videobox-button" title={'show timeline'} onPointerDown={this.onTimelineHdlDown}>
+                    <div className="videobox-button" title="show timeline" onPointerDown={this.onTimelineHdlDown}>
                         <FontAwesomeIcon icon="eye" />
                     </div>
                 )}
-- 
cgit v1.2.3-70-g09d2

