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 931288770..919de0f4e 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 } })) @@ -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) => { 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); diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx index 592e94581..400761b02 100644 --- a/src/main/SubtitleSelect.tsx +++ b/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 diff --git a/src/main/SubtitleTimeline.tsx b/src/main/SubtitleTimeline.tsx index 9af7b264a..c36228625 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"; @@ -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( diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx index cf8277611..6d3cd7a3d 100644 --- a/src/main/Thumbnail.tsx +++ b/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, - generate: any, - upload: any, - uploadCallback: any, - discard: any, + generate: (track: Track, index: number) => void, + upload: (index: number) => void, + uploadCallback: (event: React.ChangeEvent, 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, 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, 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, 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, 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 cc84e5b60..6621034af 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' @@ -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}); diff --git a/src/main/TrackSelection.tsx b/src/main/TrackSelection.tsx index fc5a094c3..578b7f1ef 100644 --- a/src/main/TrackSelection.tsx +++ b/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, diff --git a/src/main/VideoPlayers.tsx b/src/main/VideoPlayers.tsx index 702898dcb..943b5304c 100644 --- a/src/main/VideoPlayers.tsx +++ b/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, + 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, setPreviewTriggered: ActionCreatorWithPayload, setClickTriggered: ActionCreatorWithPayload, - setCurrentlyAt: any, + setCurrentlyAt: ActionCreatorWithPayload, 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) } diff --git a/src/redux/subtitleSlice.ts b/src/redux/subtitleSlice.ts index d3bf64dee..a94446ff4 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 { @@ -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) {