more lint cleanup

1 files changed, 85 insertions, 67 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 3f6638b25..7adf44a5c 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -1,3 +1,8 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable jsx-a11y/alt-text */
+/* eslint-disable no-use-before-define */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
@@ -22,7 +27,7 @@ import { ScriptingGlobals } from '../../util/ScriptingGlobals';
 import { SnappingManager } from '../../util/SnappingManager';
 import { Transform } from '../../util/Transform';
 import { undoBatch, UndoManager } from '../../util/UndoManager';
-import { CollectionSubView } from '../collections/CollectionSubView';
+import { CollectionSubView } from './CollectionSubView';
 import { LightboxView } from '../LightboxView';
 import { AudioWaveform } from '../nodes/audio/AudioWaveform';
 import { DocumentView, OpenWhere } from '../nodes/DocumentView';
@@ -58,9 +63,14 @@ export enum TrimScope {
 
 @observer
 export class CollectionStackedTimeline extends CollectionSubView<CollectionStackedTimelineProps>() {
+    // eslint-disable-next-line no-use-before-define
     public static SelectingRegions: Set<CollectionStackedTimeline> = new Set();
     public static StopSelecting() {
-        this.SelectingRegions.forEach(action(region => (region._selectingRegion = false)));
+        this.SelectingRegions.forEach(
+            action(region => {
+                region._selectingRegion = false;
+            })
+        );
         this.SelectingRegions.clear();
     }
     constructor(props: any) {
@@ -131,7 +141,9 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
     componentWillUnmount() {
         document.removeEventListener('keydown', this.keyEvents, true);
         if (this._selectingRegion) {
-            runInAction(() => (this._selectingRegion = false));
+            runInAction(() => {
+                this._selectingRegion = false;
+            });
             CollectionStackedTimeline.SelectingRegions.delete(this);
         }
     }
@@ -175,9 +187,9 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
     anchorEnd = (anchor: Doc, val: any = null) => NumCast(anchor._timecodeToHide, NumCast(anchor[this._props.endTag], val) ?? null);
 
     // converts screen pixel offset to time
-    toTimeline = (screen_delta: number, width: number) => {
-        return Math.max(this.clipStart, Math.min(this.clipEnd, (screen_delta / width) * this.clipDuration + this.clipStart));
-    };
+    // prettier-ignore
+    toTimeline = (screenDelta: number, width: number) => //
+        Math.max(this.clipStart, Math.min(this.clipEnd, (screenDelta / width) * this.clipDuration + this.clipStart));
 
     @computed get rangeClick() {
         // prettier-ignore
@@ -235,6 +247,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                     this._props.setTime(Math.min(Math.max(this.clipStart, this.currentTime + jump), this.clipEnd));
                     e.stopPropagation();
                     break;
+                default:
             }
         }
     };
@@ -254,17 +267,15 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
     @action
     onPointerDownTimeline = (e: React.PointerEvent): void => {
         const rect = this._timeline?.getBoundingClientRect();
-        const clientX = e.clientX;
-        const diff = rect ? clientX - rect?.x : null;
-        const shiftKey = e.shiftKey;
+        const { clientX, shiftKey } = e;
         if (rect && this._props.isContentActive()) {
             const wasPlaying = this._props.playing();
             if (wasPlaying) this._props.Pause();
-            var wasSelecting = this._markerEnd !== undefined;
+            let wasSelecting = this._markerEnd !== undefined;
             setupMoveUpEvents(
                 this,
                 e,
-                action(e => {
+                action(() => {
                     if (!wasSelecting) {
                         this._markerStart = this._markerEnd = this.toTimeline(clientX - rect.x, rect.width);
                         wasSelecting = true;
@@ -273,8 +284,8 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                     this._markerEnd = this.toTimeline(e.clientX - rect.x, rect.width);
                     return false;
                 }),
-                action((e, movement, isClick) => {
-                    this._markerEnd = this.toTimeline(e.clientX - rect.x, rect.width);
+                action((upEvent, movement, isClick) => {
+                    this._markerEnd = this.toTimeline(upEvent.clientX - rect.x, rect.width);
                     if (this._markerEnd < this._markerStart) {
                         const tmp = this._markerStart;
                         this._markerStart = this._markerEnd;
@@ -287,8 +298,8 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                     (!isClick || !wasSelecting) && (this._markerEnd = undefined);
                     this._timelineWrapper && (this._timelineWrapper.style.cursor = '');
                 }),
-                (e, doubleTap) => {
-                    if (e.button !== 2) {
+                (clickEv, doubleTap) => {
+                    if (clickEv.button !== 2) {
                         this._props.select(false);
                         !wasPlaying && doubleTap && this._props.Play();
                     }
@@ -310,7 +321,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
     onHover = (e: React.MouseEvent): void => {
         e.stopPropagation();
         const rect = this._timeline?.getBoundingClientRect();
-        const clientX = e.clientX;
+        const { clientX } = e;
         if (rect) {
             this._hoverTime = this.toTimeline(clientX - rect.x, rect.width);
             if (this.thumbnails) {
@@ -328,14 +339,14 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
         setupMoveUpEvents(
             this,
             e,
-            action((e, [], []) => {
+            action(moveEv => {
                 if (rect && this._props.isContentActive()) {
-                    this._trimStart = Math.min(Math.max(this.trimStart + (e.movementX / rect.width) * this.clipDuration, this.clipStart), this.trimEnd - this.minTrimLength);
+                    this._trimStart = Math.min(Math.max(this.trimStart + (moveEv.movementX / rect.width) * this.clipDuration, this.clipStart), this.trimEnd - this.minTrimLength);
                 }
                 return false;
             }),
             emptyFunction,
-            action((e, doubleTap) => {
+            action((clickEv, doubleTap) => {
                 doubleTap && (this._trimStart = this.clipStart);
             })
         );
@@ -348,14 +359,14 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
         setupMoveUpEvents(
             this,
             e,
-            action((e, [], []) => {
+            action(moveEv => {
                 if (rect && this._props.isContentActive()) {
-                    this._trimEnd = Math.max(Math.min(this.trimEnd + (e.movementX / rect.width) * this.clipDuration, this.clipEnd), this.trimStart + this.minTrimLength);
+                    this._trimEnd = Math.max(Math.min(this.trimEnd + (moveEv.movementX / rect.width) * this.clipDuration, this.clipEnd), this.trimStart + this.minTrimLength);
                 }
                 return false;
             }),
             emptyFunction,
-            action((e, doubleTap) => {
+            action((clickEv, doubleTap) => {
                 doubleTap && (this._trimEnd = this.clipEnd);
             })
         );
@@ -384,7 +395,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
 
     // handles dragging and dropping markers in timeline
     @action
-    internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData, xp: number) {
+    internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData) {
         if (super.onInternalDrop(e, de)) {
             // determine x coordinate of drop and assign it to the documents being dragged  --- see internalDocDrop of collectionFreeFormView.tsx for how it's done when dropping onto a 2D freeform view
             const localPt = this.ScreenToLocalBoxXf().transformPoint(de.x, de.y);
@@ -404,7 +415,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
     }
 
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
-        if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData, 0);
+        if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData);
         return false;
     };
 
@@ -442,7 +453,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
     }
 
     @action
-    playOnClick = (anchorDoc: Doc, clientX: number) => {
+    playOnClick = (anchorDoc: Doc /* , clientX: number */) => {
         const seekTimeInSeconds = this.anchorStart(anchorDoc) - 0.05;
         const endTime = this.anchorEnd(anchorDoc);
         if (this.layoutDoc.autoPlayAnchors) {
@@ -451,17 +462,15 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                 this._props.playFrom(seekTimeInSeconds, endTime);
                 this.scrollToTime(seekTimeInSeconds);
             }
-        } else {
-            if (seekTimeInSeconds < NumCast(this.layoutDoc._layout_currentTimecode) && endTime > NumCast(this.layoutDoc._layout_currentTimecode)) {
-                if (!this.layoutDoc.autoPlayAnchors && this._props.playing()) {
-                    this._props.Pause();
-                } else {
-                    this._props.Play();
-                }
+        } else if (seekTimeInSeconds < NumCast(this.layoutDoc._layout_currentTimecode) && endTime > NumCast(this.layoutDoc._layout_currentTimecode)) {
+            if (!this.layoutDoc.autoPlayAnchors && this._props.playing()) {
+                this._props.Pause();
             } else {
-                this._props.playFrom(seekTimeInSeconds, endTime);
-                this.scrollToTime(seekTimeInSeconds);
+                this._props.Play();
             }
+        } else {
+            this._props.playFrom(seekTimeInSeconds, endTime);
+            this.scrollToTime(seekTimeInSeconds);
         }
         return { select: true };
     };
@@ -480,19 +489,17 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                 const rect = this._timeline?.getBoundingClientRect();
                 rect && this._props.setTime(this.toTimeline(clientX - rect.x, rect.width));
             }
+        } else if (this.layoutDoc.autoPlayAnchors) {
+            this._props.playFrom(seekTimeInSeconds, endTime);
         } else {
-            if (this.layoutDoc.autoPlayAnchors) {
-                this._props.playFrom(seekTimeInSeconds, endTime);
-            } else {
-                this._props.setTime(seekTimeInSeconds);
-            }
+            this._props.setTime(seekTimeInSeconds);
         }
         return { select: true };
     };
 
     // makes sure no anchors overlaps each other by setting the correct position and width
     getLevel = (m: Doc, placed: { anchorStartTime: number; anchorEndTime: number; level: number }[]) => {
-        const timelineContentWidth = this.timelineContentWidth;
+        const { timelineContentWidth } = this;
         const x1 = this.anchorStart(m);
         const x2 = this.anchorEnd(m, x1 + (10 / timelineContentWidth) * this.clipDuration);
         let max = 0;
@@ -504,6 +511,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                     max = Math.max(max, p.level);
                     return p.level;
                 }
+                return undefined;
             })
         );
         let level = max + 1;
@@ -565,10 +573,14 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                     onWheel={e => this.isContentActive() && e.stopPropagation()}
                     onScroll={this.setScroll}
                     onMouseMove={e => this.isContentActive() && this.onHover(e)}
-                    ref={wrapper => (this._timelineWrapper = wrapper)}>
+                    ref={wrapper => {
+                        this._timelineWrapper = wrapper;
+                    }}>
                     <div
                         className="collectionStackedTimeline"
-                        ref={(timeline: HTMLDivElement | null) => (this._timeline = timeline)}
+                        ref={(timeline: HTMLDivElement | null) => {
+                            this._timeline = timeline;
+                        }}
                         onClick={e => this.isContentActive() && StopEvent(e)}
                         onPointerDown={e => this.isContentActive() && this.onPointerDownTimeline(e)}
                         style={{ width: this.timelineContentWidth }}>
@@ -583,7 +595,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                             const height = this._props.PanelHeight() / maxLevel;
                             return this.Document.hideAnchors ? null : (
                                 <div
-                                    className={'collectionStackedTimeline-marker-timeline'}
+                                    className="collectionStackedTimeline-marker-timeline"
                                     key={d.anchor[Id]}
                                     style={{
                                         left,
@@ -593,6 +605,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                                         pointerEvents: 'none',
                                     }}>
                                     <StackedTimelineAnchor
+                                        // eslint-disable-next-line react/jsx-props-no-spreading
                                         {...this._props}
                                         mark={d.anchor}
                                         containerViewPath={this._props.containerViewPath}
@@ -647,7 +660,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
 
                         {this.IsTrimming !== TrimScope.None && (
                             <>
-                                <div className="collectionStackedTimeline-trim-shade" style={{ width: `${((this.trimStart - this.clipStart) / this.clipDuration) * 100}%` }}></div>
+                                <div className="collectionStackedTimeline-trim-shade" style={{ width: `${((this.trimStart - this.clipStart) / this.clipDuration) * 100}%` }} />
 
                                 <div
                                     className="collectionStackedTimeline-trim-controls"
@@ -655,8 +668,8 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                                         left: `${((this.trimStart - this.clipStart) / this.clipDuration) * 100}%`,
                                         width: `${((this.trimEnd - this.trimStart) / this.clipDuration) * 100}%`,
                                     }}>
-                                    <div className="collectionStackedTimeline-trim-handle" onPointerDown={this.trimLeft}></div>
-                                    <div className="collectionStackedTimeline-trim-handle" onPointerDown={this.trimRight}></div>
+                                    <div className="collectionStackedTimeline-trim-handle" onPointerDown={this.trimLeft} />
+                                    <div className="collectionStackedTimeline-trim-handle" onPointerDown={this.trimRight} />
                                 </div>
 
                                 <div
@@ -664,7 +677,8 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                                     style={{
                                         left: `${((this.trimEnd - this.clipStart) / this.clipDuration) * 100}%`,
                                         width: `${((this.clipEnd - this.trimEnd) / this.clipDuration) * 100}%`,
-                                    }}></div>
+                                    }}
+                                />
                             </>
                         )}
                     </div>
@@ -686,7 +700,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
 interface StackedTimelineAnchorProps {
     mark: Doc;
     whenChildContentsActiveChanged: (isActive: boolean) => void;
-    addDocTab: (doc: Doc, where: OpenWhere) => boolean;
+    addDocTab: (doc: Doc | Doc[], where: OpenWhere) => boolean;
     rangeClickScript: () => ScriptField;
     rangePlayScript: () => ScriptField;
     left: number;
@@ -736,13 +750,13 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch
         this._disposer = reaction(
             () => this._props.currentTimecode(),
             time => {
-                const dictationDoc = Cast(this._props.layoutDoc.data_dictation, Doc, null);
-                const isDictation = dictationDoc && LinkManager.Links(this._props.mark).some(link => Cast(link.link_anchor_1, Doc, null)?.annotationOn === dictationDoc);
+                // const dictationDoc = Cast(this._props.layoutDoc.data_dictation, Doc, null);
+                // const isDictation = dictationDoc && LinkManager.Links(this._props.mark).some(link => Cast(link.link_anchor_1, Doc, null)?.annotationOn === dictationDoc);
                 if (
                     !LightboxView.LightboxDoc &&
                     // bcz: when should links be followed?  we don't want to move away from the video to follow a link but we can open it in a sidebar/etc.  But we don't know that upfront.
                     // for now, we won't follow any links when the lightbox is oepn to avoid "losing" the video.
-                    /*(isDictation || !Doc.AreProtosEqual(LightboxView.LightboxDoc, this._props.layoutDoc))*/
+                    /* (isDictation || !Doc.AreProtosEqual(LightboxView.LightboxDoc, this._props.layoutDoc)) */
                     !this._props.layoutDoc.dontAutoFollowLinks &&
                     LinkManager.Links(this._props.mark).length &&
                     time > NumCast(this._props.mark[this._props.startTag]) &&
@@ -764,34 +778,33 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch
     // starting the drag event for anchor resizing
     @action
     onAnchorDown = (e: React.PointerEvent, anchor: Doc, left: boolean): void => {
-        //this._props._timeline?.setPointerCapture(e.pointerId);
-        const newTime = (e: PointerEvent) => {
-            const rect = (e.target as any).getBoundingClientRect();
-            return this._props.toTimeline(e.clientX - rect.x, rect.width);
+        const newTime = (timeDownEv: PointerEvent) => {
+            const rect = (timeDownEv.target as any).getBoundingClientRect();
+            return this._props.toTimeline(timeDownEv.clientX - rect.x, rect.width);
         };
-        const changeAnchor = (anchor: Doc, left: boolean, time: number | undefined) => {
+        const changeAnchor = (time: number | undefined) => {
             const timelineOnly = Cast(anchor[this._props.startTag], 'number', null) !== undefined;
             if (timelineOnly) {
-                if (!left && time !== undefined && time <= NumCast(anchor[this._props.startTag])) time = undefined;
-                Doc.SetInPlace(anchor, left ? this._props.startTag : this._props.endTag, time, true);
-                if (!left) Doc.SetInPlace(anchor, 'layout_borderRounding', time !== undefined ? undefined : '100%', true);
+                const timeMod = !left && time !== undefined && time <= NumCast(anchor[this._props.startTag]) ? undefined : time;
+                Doc.SetInPlace(anchor, left ? this._props.startTag : this._props.endTag, timeMod, true);
+                if (!left) Doc.SetInPlace(anchor, 'layout_borderRounding', timeMod !== undefined ? undefined : '100%', true);
             } else {
                 anchor[left ? '_timecodeToShow' : '_timecodeToHide'] = time;
             }
             return false;
         };
         this.noEvents = true;
-        var undo: UndoManager.Batch | undefined;
+        let undo: UndoManager.Batch | undefined;
         setupMoveUpEvents(
             this,
             e,
-            e => {
+            moveEv => {
                 if (!undo) undo = UndoManager.StartBatch('drag anchor');
-                this._props.setTime(newTime(e));
-                return changeAnchor(anchor, left, newTime(e));
+                this._props.setTime(newTime(moveEv));
+                return changeAnchor(newTime(moveEv));
             },
-            action(e => {
-                this._props.setTime(newTime(e));
+            action(upEv => {
+                this._props.setTime(newTime(upEv));
                 undo?.end();
                 this.noEvents = false;
             }),
@@ -829,7 +842,9 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch
                     {...this._props}
                     NativeWidth={returnZero}
                     NativeHeight={returnZero}
-                    ref={action((r: DocumentView | null) => (anchor.view = r))}
+                    ref={action((r: DocumentView | null) => {
+                        anchor.view = r;
+                    })}
                     Document={mark}
                     TemplateDataDocument={undefined}
                     containerViewPath={this._props.containerViewPath}
@@ -852,7 +867,7 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch
                     onClickScript={script}
                     onDoubleClickScript={this._props.layoutDoc.autoPlayAnchors ? undefined : doublescript}
                     ignoreAutoHeight={false}
-                    hideResizeHandles={true}
+                    hideResizeHandles
                     contextMenuItems={this.contextMenuItems}
                 />
             ),
@@ -878,12 +893,15 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch
         );
     }
 }
+// eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function formatToTime(time: number): any {
     return formatTime(time);
 });
+// eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function min(num1: number, num2: number): number {
     return Math.min(num1, num2);
 });
+// eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function max(num1: number, num2: number): number {
     return Math.max(num1, num2);
 });