From ec807c9d3c36774506044f73d9172a81df170866 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 16 Jan 2024 15:51:40 +0100 Subject: [PATCH] Specify more types This replaces some `any` types with more specific ones. No functional changes. --- src/i18n/config.tsx | 4 +-- src/main/SubtitleListEditor.tsx | 20 ++++++------ src/main/SubtitleSelect.tsx | 3 +- src/main/SubtitleTimeline.tsx | 12 +++---- src/main/Thumbnail.tsx | 56 ++++++++++++++++----------------- src/main/Timeline.tsx | 8 ++--- src/main/TrackSelection.tsx | 2 +- src/main/VideoPlayers.tsx | 7 +++-- src/redux/subtitleSlice.ts | 6 ++-- 9 files changed, 60 insertions(+), 58 deletions(-) diff --git a/src/i18n/config.tsx b/src/i18n/config.tsx index ec1b22437..38fa4abc3 100644 --- a/src/i18n/config.tsx +++ b/src/i18n/config.tsx @@ -1,4 +1,4 @@ -import i18next from 'i18next'; +import i18next, { InitOptions } from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; @@ -6,7 +6,7 @@ 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(/-.*$/, ''); diff --git a/src/main/SubtitleListEditor.tsx b/src/main/SubtitleListEditor.tsx index 3f91ffabc..3788da7af 100644 --- a/src/main/SubtitleListEditor.tsx +++ b/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) => { dispatch(setCueAtIndex({ identifier: identifier, cueIndex: props.index, @@ -219,7 +219,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => { })) }; - const updateCueStart = (event: { target: { value: any } }) => { + const updateCueStart = (value: number) => { dispatch(setCueAtIndex({ identifier: identifier, cueIndex: props.index, @@ -227,14 +227,14 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => { 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 } })) @@ -461,8 +461,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, @@ -502,7 +502,7 @@ const FunctionButton : React.FC<{ */ const TimeInput : React.FC<{ value: number, - changeCallback: any, + changeCallback: (value: number) => void, generalFieldStyle: SerializedStyles[], tooltip: string, tooltipAria: string, @@ -531,7 +531,7 @@ const TimeInput : React.FC<{ }; // Update state in redux - const onBlur = (event: { target: { value: any; }; }) => { + const onBlur = (event: React.FocusEvent) => { setParsingError(false) // Parse value and pass it to parent @@ -541,7 +541,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); diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx index f11fafecf..fa0bc803d 100644 --- a/src/main/SubtitleSelect.tsx +++ b/src/main/SubtitleSelect.tsx @@ -16,6 +16,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 @@ -312,7 +313,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 diff --git a/src/main/SubtitleTimeline.tsx b/src/main/SubtitleTimeline.tsx index 8dd6a64f9..d20393d6e 100644 --- a/src/main/SubtitleTimeline.tsx +++ b/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"; @@ -262,7 +262,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; @@ -286,7 +286,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 @@ -315,11 +315,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( diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx index 9f970a2d2..0a40396dd 100644 --- a/src/main/Thumbnail.tsx +++ b/src/main/Thumbnail.tsx @@ -78,7 +78,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({ @@ -138,11 +138,11 @@ const Thumbnail : React.FC = () => { * A table for displaying thumbnails and associated actions */ const ThumbnailTable : React.FC<{ - 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, track: Track) => void, + discard: (id: string) => void, }> = ({inputRefs, generate, upload, uploadCallback, discard}) => { const videoTracks = useSelector(selectVideos) @@ -206,11 +206,11 @@ const ThumbnailTable : React.FC<{ const ThumbnailTableRow: 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, track: Track) => void, + discard: (id: string) => void, }> = ({track, index, inputRefs, generate, upload, uploadCallback, discard}) => { const { t } = useTranslation() @@ -301,11 +301,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, track: Track) => void, + discard: (id: string) => void, }> = ({track, index, inputRefs, generate, upload, uploadCallback, discard}) => { const { t } = useTranslation() @@ -384,7 +384,7 @@ const ThumbnailButtons : React.FC<{ } const ThumbnailButton : React.FC<{ - handler: any, + handler: () => void, text: string tooltipText: string, ariaLabel: string, @@ -426,7 +426,7 @@ const ThumbnailButton : React.FC<{ */ const AffectAllRow : React.FC<{ tracks: Track[] - generate: any + generate: (track: Track, index: number) => void }> = ({generate, tracks}) => { const { t } = useTranslation() @@ -487,11 +487,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, track: Track) => void, + discard: (id: string) => void, }> = ({track, index, inputRefs, generate, upload, uploadCallback, discard}) => { const { t } = useTranslation(); const theme = useTheme(); @@ -523,11 +523,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, track: Track) => void, + discard: (id: string) => void, }> = ({track, index, generate, inputRefs, upload, uploadCallback, discard}) => { const { t } = useTranslation() diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx index 6ca99eedf..847849735 100644 --- a/src/main/Timeline.tsx +++ b/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' @@ -144,7 +144,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))) @@ -155,7 +155,7 @@ export const Scrubber: React.FC<{ setControlledPosition({x: (currentlyAt / duration) * (timelineWidth), y: 0}); }; - const onStartDrag = () => { + const onStartDrag: DraggableEventHandler = () => { setIsGrabbed(true) // Halt video playback @@ -167,7 +167,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}); diff --git a/src/main/TrackSelection.tsx b/src/main/TrackSelection.tsx index 533ad38e2..2766c430a 100644 --- a/src/main/TrackSelection.tsx +++ b/src/main/TrackSelection.tsx @@ -171,7 +171,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, diff --git a/src/main/VideoPlayers.tsx b/src/main/VideoPlayers.tsx index 367c770ca..012a00ce4 100644 --- a/src/main/VideoPlayers.tsx +++ b/src/main/VideoPlayers.tsx @@ -23,8 +23,9 @@ import { ActionCreatorWithPayload } from "@reduxjs/toolkit"; import { useTheme } from "../themes"; import { backgroundBoxStyle, flexGapReplacementStyle } from '../cssStyles' +import { BaseReactPlayerProps } from "react-player/base"; -const VideoPlayers: React.FC<{refs: any, widthInPercent?: number}> = ({refs, widthInPercent = 100}) => { +const VideoPlayers: React.FC<{refs?: React.MutableRefObject, widthInPercent?: number}> = ({refs, widthInPercent = 100}) => { const videoURLs = useSelector(selectVideoURL) const videoCount = useSelector(selectVideoCount) @@ -102,7 +103,7 @@ export const VideoPlayer = React.forwardRef( setIsPlaying: ActionCreatorWithPayload, setPreviewTriggered: ActionCreatorWithPayload, setClickTriggered: ActionCreatorWithPayload, - setCurrentlyAt: any, + setCurrentlyAt: ActionCreatorWithPayload, setAspectRatio: ActionCreatorWithPayload<{dataKey: number} & {width: number, height: number}, string>, }, forwardRefThing @@ -200,7 +201,7 @@ export const VideoPlayer = React.forwardRef( } } - const onErrorCallback = (_e: any) => { + const onErrorCallback: BaseReactPlayerProps["onError"] = _e => { setError(true) } diff --git a/src/redux/subtitleSlice.ts b/src/redux/subtitleSlice.ts index 6c4ce43eb..5da418bca 100644 --- a/src/redux/subtitleSlice.ts +++ b/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 { @@ -228,7 +228,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) {