Merge pull request #1251 from Arnei/typescript-specify-some-any-typings

Specify more types

src/i18n/config.tsx

@@ -1,12 +1,12 @@
-import i18next from 'i18next';
+import i18next, { InitOptions } from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
 import locales from './locales/locales.json';
 
 const debug = Boolean(new URLSearchParams(window.location.search).get('debug'));
 
-const resources: any = {};
+const resources: InitOptions["resources"] = {};
 for (const lang of locales) {
   const code = lang.replace(/\..*$/, '');
   const short = code.replace(/-.*$/, '');

src/main/SubtitleListEditor.tsx

@@ -204,7 +204,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
     }
   }, [cue.idInternal, dispatch, focusId2, focusTriggered2])
 
-  const updateCueText = (event: { target: { value: any } }) => {
+  const updateCueText = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     dispatch(setCueAtIndex({
       identifier: identifier,
       cueIndex: props.index,
@@ -219,22 +219,22 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
     }))
   };
 
-  const updateCueStart = (event: { target: { value: any } }) => {
+  const updateCueStart = (value: number) => {
     dispatch(setCueAtIndex({
       identifier: identifier,
       cueIndex: props.index,
       newCue: {
         id: cue.id,
         idInternal: cue.idInternal,
         text: cue.text,
-        startTime: event.target.value,
+        startTime: value,
         endTime: cue.endTime,
         tree: cue.tree
       }
     }))
   };
 
-  const updateCueEnd = (event: { target: { value: any } }) => {
+  const updateCueEnd = (value: number) => {
     dispatch(setCueAtIndex({
       identifier: identifier,
       cueIndex: props.index,
@@ -243,7 +243,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
         idInternal: cue.idInternal,
         text: cue.text,
         startTime: cue.startTime,
-        endTime: event.target.value,
+        endTime: value,
         tree: cue.tree
       }
     }))
@@ -465,8 +465,8 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
 const FunctionButton : React.FC<{
   tooltip: string,
   tooltipAria: string,
-  onClick: any,
-  onKeyDown: any,
+  onClick: React.MouseEventHandler,
+  onKeyDown: React.KeyboardEventHandler,
   Icon: IconType
 }> = ({
   tooltip,
@@ -506,7 +506,7 @@ const FunctionButton : React.FC<{
  */
 const TimeInput : React.FC<{
   value: number,
-  changeCallback: any,
+  changeCallback: (value: number) => void,
   generalFieldStyle: SerializedStyles[],
   tooltip: string,
   tooltipAria: string,
@@ -535,7 +535,7 @@ const TimeInput : React.FC<{
   };
 
   // Update state in redux
-  const onBlur = (event: { target: { value: any; }; }) => {
+  const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {
     setParsingError(false)
 
     // Parse value and pass it to parent
@@ -545,7 +545,7 @@ const TimeInput : React.FC<{
       setParsingError(true)
       return
     }
-    changeCallback({ target: { value: milliseconds } });
+    changeCallback(milliseconds);
 
     // Make sure to set state to the parsed value
     const time = toHHMMSSMS(milliseconds);

src/main/SubtitleSelect.tsx

@@ -22,6 +22,7 @@ import { ThemeProvider } from '@mui/material/styles';
 import { ThemedTooltip } from "./Tooltip";
 import { languageCodeToName } from "../util/utilityFunctions";
 import { v4 as uuidv4 } from 'uuid';
+import { TFunction } from "i18next";
 
 /**
  * Displays buttons that allow the user to select the subtitle they want to edit
@@ -319,7 +320,7 @@ const SubtitleAddButton: React.FC<{
 /**
  * Generates a title for the buttons from the tags
  */
-export function generateButtonTitle(tags: string[], t: any) {
+export function generateButtonTitle(tags: string[], t: TFunction<"translation", undefined>) {
   let lang = tags.find(e => e.startsWith('lang:'))
   lang = lang ? lang.split(':')[1].trim() : undefined
   lang = languageCodeToName(lang?.trim()) ?? lang

src/main/SubtitleTimeline.tsx

@@ -15,9 +15,9 @@ import {
 import { useDispatch, useSelector } from "react-redux";
 import useResizeObserver from "use-resize-observer";
 import { selectDuration } from "../redux/videoSlice";
-import Draggable, { DraggableEvent } from "react-draggable";
+import Draggable, { DraggableEventHandler } from "react-draggable";
 import { SubtitleCue } from "../types";
-import { Resizable } from "react-resizable";
+import { Resizable, ResizableProps } from "react-resizable";
 import "react-resizable/css/styles.css";
 import ScrollContainer, { ScrollEvent } from "react-indiana-drag-scroll";
 import { useTheme } from "../themes";
@@ -284,7 +284,7 @@ const TimelineSubtitleSegment: React.FC<{
   // Resizable does not support resizing in the west/north directions out of the box,
   // so additional calculations are necessary.
   // Adapted from Resizable example code
-  const onResizeAbsolute = (_event: any, {size, handle}: any) => {
+  const onResizeAbsolute: ResizableProps["onResize"] = (_event, {size, handle}) => {
     // Possible TODO: Find a way to stop resizing a segment beyond 0ms here instead of later
     let newLeft = absoluteLeft;
     let newTop = absoluteTop;
@@ -308,7 +308,7 @@ const TimelineSubtitleSegment: React.FC<{
   };
 
   // Update redux state based on the resize
-  const onResizeStop = (_event: any, {handle}: any) => {
+  const onResizeStop: ResizableProps["onResizeStop"] = (_event, {handle}) => {
     // Calc new width, factoring in offset
     const newWidth = absoluteWidth
 
@@ -337,11 +337,11 @@ const TimelineSubtitleSegment: React.FC<{
     setAbsoluteTop(0)
   }
 
-  const onStartDrag = (_e: DraggableEvent) => {
+  const onStartDrag: DraggableEventHandler = _e => {
     setIsGrabbed(true)
   }
 
-  const onStopDrag = (_e: DraggableEvent, position: any) => {
+  const onStopDrag: DraggableEventHandler = (_e, position) => {
     // Update position and thereby start/end times in redux
     const {x} = position
     dispatchNewTimes(

src/main/Thumbnail.tsx

@@ -95,7 +95,7 @@ const Thumbnail : React.FC = () => {
   };
 
   const discardThumbnail = (id: string) => {
-    dispatch(setThumbnail({ id: id, uri: originalThumbnails.find((e: any) => e.id === id)?.uri }))
+    dispatch(setThumbnail({ id: id, uri: originalThumbnails.find(e => e.id === id)?.uri }))
   }
 
   const thumbnailStyle = css({
@@ -158,12 +158,12 @@ const Thumbnail : React.FC = () => {
  * A table for displaying thumbnails and associated actions
  */
 const ThumbnailTable : React.FC<{
-  inputRefs: any,
+  inputRefs: React.MutableRefObject<(HTMLInputElement | null)[]>,
   generateRefs: React.MutableRefObject<any>,
-  generate: any,
-  upload: any,
-  uploadCallback: any,
-  discard: any,
+  generate: (track: Track, index: number) => void,
+  upload: (index: number) => void,
+  uploadCallback: (event: React.ChangeEvent<HTMLInputElement>, track: Track) => void,
+  discard: (id: string) => void,
 }> = ({inputRefs, generateRefs, generate, upload, uploadCallback, discard}) => {
 
   const videoTracks = useSelector(selectVideos)
@@ -231,12 +231,12 @@ const ThumbnailTable : React.FC<{
 const ThumbnailTableRow: React.FC<{
   track: Track,
   index: number,
-  inputRefs: any,
+  inputRefs: React.MutableRefObject<(HTMLInputElement | null)[]>,
   generateRef: any,
-  generate: any,
-  upload: any,
-  uploadCallback: any,
-  discard: any,
+  generate: (track: Track, index: number) => void,
+  upload: (index: number) => void,
+  uploadCallback: (event: React.ChangeEvent<HTMLInputElement>, track: Track) => void,
+  discard: (id: string) => void,
 }> = ({track, index, inputRefs, generateRef, generate, upload, uploadCallback, discard}) => {
 
   const { t } = useTranslation()
@@ -330,11 +330,11 @@ const ThumbnailDisplayer : React.FC<{track: Track}> = ({track}) => {
 const ThumbnailButtons : React.FC<{
   track: Track,
   index: number,
-  inputRefs: any,
-  generate: any,
-  upload: any,
-  uploadCallback: any,
-  discard: any,
+  inputRefs: React.MutableRefObject<(HTMLInputElement | null)[]>,
+  generate: (track: Track, index: number) => void,
+  upload: (index: number) => void,
+  uploadCallback: (event: React.ChangeEvent<HTMLInputElement>, track: Track) => void,
+  discard: (id: string) => void,
 }> = ({track, index, inputRefs, generate, upload, uploadCallback, discard}) => {
 
   const { t } = useTranslation()
@@ -417,7 +417,7 @@ const ThumbnailButtons : React.FC<{
 }
 
 const ThumbnailButton : React.FC<{
-  handler: any,
+  handler: () => void,
   text: string
   tooltipText: string,
   ariaLabel: string,
@@ -459,7 +459,7 @@ const ThumbnailButton : React.FC<{
  */
 const AffectAllRow : React.FC<{
   tracks: Track[]
-  generate: any
+  generate: (track: Track, index: number) => void
 }> = ({generate, tracks}) => {
 
   const { t } = useTranslation()
@@ -520,11 +520,11 @@ const AffectAllRow : React.FC<{
 const ThumbnailTableSingleRow: React.FC<{
   track: Track,
   index: number,
-  inputRefs: any,
-  generate: any,
-  upload: any,
-  uploadCallback: any,
-  discard: any,
+  inputRefs: React.MutableRefObject<(HTMLInputElement | null)[]>,
+  generate: (track: Track, index: number) => void,
+  upload: (index: number) => void,
+  uploadCallback: (event: React.ChangeEvent<HTMLInputElement>, track: Track) => void,
+  discard: (id: string) => void,
 }> = ({track, index, inputRefs, generate, upload, uploadCallback, discard}) => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -556,11 +556,11 @@ const ThumbnailTableSingleRow: React.FC<{
 const ThumbnailButtonsSimple : React.FC<{
   track: Track,
   index: number,
-  inputRefs: any,
-  generate: any,
-  upload: any,
-  uploadCallback: any,
-  discard: any,
+  inputRefs: React.MutableRefObject<(HTMLInputElement | null)[]>,
+  generate: (track: Track, index: number) => void,
+  upload: (index: number) => void,
+  uploadCallback: (event: React.ChangeEvent<HTMLInputElement>, track: Track) => void,
+  discard: (id: string) => void,
 }> = ({track, index, generate, inputRefs, upload, uploadCallback, discard}) => {
 
   const { t } = useTranslation()

src/main/Timeline.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react'
 
-import Draggable from 'react-draggable';
+import Draggable, { DraggableEventHandler } from 'react-draggable';
 
 import { css } from '@emotion/react'
 
@@ -149,7 +149,7 @@ export const Scrubber: React.FC<{
   }, [timelineWidth])
 
   // Callback for when the scrubber gets dragged by the user
-  const onControlledDrag = (_e: any, position: any) => {
+  const onControlledDrag: DraggableEventHandler = (_e, position) => {
     // Update position
     const {x} = position
     dispatch(setCurrentlyAt((x / timelineWidth) * (duration)))
@@ -160,7 +160,7 @@ export const Scrubber: React.FC<{
     setControlledPosition({x: (currentlyAt / duration) * (timelineWidth), y: 0});
   };
 
-  const onStartDrag = () => {
+  const onStartDrag: DraggableEventHandler = () => {
     setIsGrabbed(true)
 
     // Halt video playback
@@ -172,7 +172,7 @@ export const Scrubber: React.FC<{
     }
   }
 
-  const onStopDrag = (_e: any, position: any) => {
+  const onStopDrag: DraggableEventHandler = (_e, position) => {
     // Update position
     const {x} = position;
     setControlledPosition({x, y: 0});

src/main/TrackSelection.tsx

@@ -179,7 +179,7 @@ const TrackItem: React.FC<{track: Track, enabledCount: number}> = ({track, enabl
 }
 
 interface selectButtonInterface {
-  handler: any,
+  handler: () => void,
   text: string,
   Icon: IconType | React.FunctionComponent,
   tooltip: string,

src/main/VideoPlayers.tsx

@@ -35,8 +35,17 @@ import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
 import { useTheme } from "../themes";
 
 import { backgroundBoxStyle, flexGapReplacementStyle } from '../cssStyles'
-
-const VideoPlayers: React.FC<{refs: any, widthInPercent?: number, maxHeightInPixel?: number}> = ({refs, widthInPercent = 100, maxHeightInPixel = 300}) => {
+import { BaseReactPlayerProps } from "react-player/base";
+
+const VideoPlayers: React.FC<{
+  refs?: React.MutableRefObject<any>,
+  widthInPercent?: number,
+  maxHeightInPixel?: number
+}> = ({
+  refs,
+  widthInPercent = 100,
+  maxHeightInPixel = 300
+}) => {
 
   const videoURLs = useSelector(selectVideoURL)
   const videoCount = useSelector(selectVideoCount)
@@ -114,7 +123,7 @@ export const VideoPlayer = React.forwardRef(
     setIsPlaying: ActionCreatorWithPayload<boolean, string>,
     setPreviewTriggered: ActionCreatorWithPayload<any, string>,
     setClickTriggered: ActionCreatorWithPayload<any, string>,
-    setCurrentlyAt: any,
+    setCurrentlyAt: ActionCreatorWithPayload<number, string>,
     setAspectRatio: ActionCreatorWithPayload<{dataKey: number} & {width: number, height: number}, string>,
   },
   forwardRefThing
@@ -215,7 +224,7 @@ export const VideoPlayer = React.forwardRef(
       }
     }
 
-    const onErrorCallback = (_e: any) => {
+    const onErrorCallback: BaseReactPlayerProps["onError"] = _e => {
       setError(true)
     }
 

src/redux/subtitleSlice.ts

@@ -1,7 +1,7 @@
 import { Segment, SubtitleCue, SubtitlesInEditor } from './../types';
-import { createSlice, Dispatch, nanoid, PayloadAction } from '@reduxjs/toolkit'
+import { createSlice, nanoid, PayloadAction } from '@reduxjs/toolkit'
 import { roundToDecimalPlace } from '../util/utilityFunctions';
-import type { RootState } from '../redux/store'
+import type { AppDispatch, RootState } from '../redux/store'
 import { video } from './videoSlice';
 
 export interface subtitle {
@@ -249,7 +249,7 @@ export const selectHasChanges = (state: { subtitleState: { hasChanges: subtitle[
  * mode is active.
  */
 export function setCurrentlyAtAndTriggerPreview(milliseconds: number) {
-  return (dispatch: Dispatch, getState: any) => {
+  return (dispatch: AppDispatch, getState: () => RootState) => {
     milliseconds = roundToDecimalPlace(milliseconds, 0);
 
     if (milliseconds < 0) {