From 799333f898304cc54ced23d11d84a5094ead127b Mon Sep 17 00:00:00 2001 From: Mikael Finstad Date: Mon, 20 May 2024 11:48:23 +0200 Subject: [PATCH] lint --- .eslintrc.cjs | 1 - src/renderer/src/BetweenSegments.tsx | 7 +- src/renderer/src/BottomBar.jsx | 10 +-- src/renderer/src/LastCommandsSheet.tsx | 8 +-- src/renderer/src/NoFileLoaded.tsx | 8 +-- src/renderer/src/SegmentList.tsx | 9 +-- src/renderer/src/StreamsSelector.tsx | 3 + src/renderer/src/Timeline.tsx | 11 +-- src/renderer/src/TimelineSeg.tsx | 8 +-- src/renderer/src/TopMenu.tsx | 8 +-- .../src/components/AutoExportToggler.tsx | 6 +- src/renderer/src/components/BatchFile.tsx | 8 +-- ...{BatchFilesList.jsx => BatchFilesList.tsx} | 8 +-- src/renderer/src/components/BigWaveform.tsx | 8 +-- src/renderer/src/components/Button.tsx | 12 ++-- .../src/components/CaptureFormatButton.tsx | 7 +- src/renderer/src/components/ConcatDialog.tsx | 8 +-- .../src/components/CopyClipboardButton.tsx | 6 +- src/renderer/src/components/ExportButton.tsx | 8 +-- src/renderer/src/components/ExportConfirm.tsx | 8 +-- .../src/components/ExportModeButton.tsx | 6 +- .../src/components/KeyboardShortcuts.tsx | 10 +-- .../src/components/MergedOutFileName.tsx | 14 ++-- ...StartButton.jsx => MovFastStartButton.tsx} | 6 +- .../src/components/OutSegTemplateEditor.tsx | 8 +-- .../src/components/OutputFormatSelect.tsx | 10 +-- .../src/components/PlaybackStreamSelector.tsx | 8 +-- ...taButton.jsx => PreserveMovDataButton.tsx} | 6 +- src/renderer/src/components/Select.tsx | 13 ++-- src/renderer/src/components/Settings.tsx | 8 +-- src/renderer/src/components/Sheet.tsx | 9 +-- .../src/components/SimpleModeButton.tsx | 6 +- src/renderer/src/components/TextInput.tsx | 2 + .../src/components/ToggleExportConfirm.tsx | 6 +- src/renderer/src/components/ValueTuner.tsx | 8 +-- src/renderer/src/components/ValueTuners.tsx | 7 +- src/renderer/src/components/VolumeControl.tsx | 6 +- src/renderer/src/components/Working.tsx | 68 ++++++++++--------- 38 files changed, 189 insertions(+), 164 deletions(-) rename src/renderer/src/components/{BatchFilesList.jsx => BatchFilesList.tsx} (91%) rename src/renderer/src/components/{MovFastStartButton.jsx => MovFastStartButton.tsx} (80%) rename src/renderer/src/components/{PreserveMovDataButton.jsx => PreserveMovDataButton.tsx} (79%) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 5fcf2825..b2cfbdb9 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -7,7 +7,6 @@ module.exports = { 'jsx-a11y/control-has-associated-label': 0, 'unicorn/prefer-node-protocol': 0, // todo '@typescript-eslint/no-var-requires': 0, // todo - 'react/display-name': 0, // todo }, overrides: [ diff --git a/src/renderer/src/BetweenSegments.tsx b/src/renderer/src/BetweenSegments.tsx index e129a040..55390ab9 100644 --- a/src/renderer/src/BetweenSegments.tsx +++ b/src/renderer/src/BetweenSegments.tsx @@ -5,7 +5,8 @@ import { FaTrashAlt, FaSave } from 'react-icons/fa'; import { mySpring } from './animations'; import { saveColor } from './colors'; -const BetweenSegments = memo(({ start, end, duration, invertCutSegments }: { start: number, end: number, duration: number, invertCutSegments: boolean }) => { + +function BetweenSegments({ start, end, duration, invertCutSegments }: { start: number, end: number, duration: number, invertCutSegments: boolean }) { const left = `${(start / duration) * 100}%`; return ( @@ -38,6 +39,6 @@ const BetweenSegments = memo(({ start, end, duration, invertCutSegments }: { sta
); -}); +} -export default BetweenSegments; +export default memo(BetweenSegments); diff --git a/src/renderer/src/BottomBar.jsx b/src/renderer/src/BottomBar.jsx index b72d3dd5..206a82a7 100644 --- a/src/renderer/src/BottomBar.jsx +++ b/src/renderer/src/BottomBar.jsx @@ -31,6 +31,7 @@ const zoomOptions = Array.from({ length: 13 }).fill().map((unused, z) => 2 ** z) const leftRightWidth = 100; +// eslint-disable-next-line react/display-name const InvertCutModeButton = memo(({ invertCutSegments, setInvertCutSegments }) => { const { t } = useTranslation(); @@ -63,6 +64,7 @@ const InvertCutModeButton = memo(({ invertCutSegments, setInvertCutSegments }) = }); +// eslint-disable-next-line react/display-name const CutTimeInput = memo(({ darkMode, cutTime, setCutTime, startTimeOffset, seekAbs, currentCutSeg, currentApparentCutSeg, isStart, formatTimecode, parseTimecode }) => { const { t } = useTranslation(); const { getSegColor } = useSegColors(); @@ -166,7 +168,7 @@ const CutTimeInput = memo(({ darkMode, cutTime, setCutTime, startTimeOffset, see ); }); -const BottomBar = memo(({ +function BottomBar({ zoom, setZoom, timelineToggleComfortZoom, isRotationSet, rotation, areWeCutting, increaseRotation, cleanupFilesDialog, captureSnapshot, onExportPress, segmentsToExport, hasVideo, @@ -179,7 +181,7 @@ const BottomBar = memo(({ toggleShowThumbnails, toggleWaveformMode, waveformMode, showThumbnails, outputPlaybackRate, setOutputPlaybackRate, formatTimecode, parseTimecode, -}) => { +}) { const { t } = useTranslation(); const { getSegColor } = useSegColors(); @@ -458,6 +460,6 @@ const BottomBar = memo(({
); -}); +} -export default BottomBar; +export default memo(BottomBar); diff --git a/src/renderer/src/LastCommandsSheet.tsx b/src/renderer/src/LastCommandsSheet.tsx index 9e0141ea..cc98f90e 100644 --- a/src/renderer/src/LastCommandsSheet.tsx +++ b/src/renderer/src/LastCommandsSheet.tsx @@ -5,9 +5,9 @@ import CopyClipboardButton from './components/CopyClipboardButton'; import Sheet from './components/Sheet'; import { FfmpegCommandLog } from './types'; -const LastCommandsSheet = memo(({ visible, onTogglePress, ffmpegCommandLog }: { +function LastCommandsSheet({ visible, onTogglePress, ffmpegCommandLog }: { visible: boolean, onTogglePress: () => void, ffmpegCommandLog: FfmpegCommandLog, -}) => { +}) { const { t } = useTranslation(); return ( @@ -28,6 +28,6 @@ const LastCommandsSheet = memo(({ visible, onTogglePress, ffmpegCommandLog }: { )} ); -}); +} -export default LastCommandsSheet; +export default memo(LastCommandsSheet); diff --git a/src/renderer/src/NoFileLoaded.tsx b/src/renderer/src/NoFileLoaded.tsx index f4d1fe0e..67b20833 100644 --- a/src/renderer/src/NoFileLoaded.tsx +++ b/src/renderer/src/NoFileLoaded.tsx @@ -8,9 +8,9 @@ import useUserSettings from './hooks/useUserSettings'; const electron = window.require('electron'); -const NoFileLoaded = memo(({ mifiLink, currentCutSeg, onClick, darkMode }: { +function NoFileLoaded({ mifiLink, currentCutSeg, onClick, darkMode }: { mifiLink: unknown, currentCutSeg, onClick: () => void, darkMode?: boolean, -}) => { +}) { const { t } = useTranslation(); const { simpleMode } = useUserSettings(); @@ -48,6 +48,6 @@ const NoFileLoaded = memo(({ mifiLink, currentCutSeg, onClick, darkMode }: { ) : undefined} ); -}); +} -export default NoFileLoaded; +export default memo(NoFileLoaded); diff --git a/src/renderer/src/SegmentList.tsx b/src/renderer/src/SegmentList.tsx index 5783b1e9..80c71568 100644 --- a/src/renderer/src/SegmentList.tsx +++ b/src/renderer/src/SegmentList.tsx @@ -26,6 +26,7 @@ const buttonBaseStyle = { const neutralButtonColor = 'var(--gray8)'; +// eslint-disable-next-line react/display-name const Segment = memo(({ seg, index, @@ -218,7 +219,7 @@ const Segment = memo(({ ); }); -const SegmentList = memo(({ +function SegmentList({ width, formatTimecode, apparentCutSegments, @@ -294,7 +295,7 @@ const SegmentList = memo(({ setEditingSegmentTags: Dispatch>, setEditingSegmentTagsSegmentIndex: Dispatch>, onEditSegmentTags: (index: number) => void, -}) => { +}) { const { t } = useTranslation(); const { getSegColor } = useSegColors(); @@ -502,6 +503,6 @@ const SegmentList = memo(({ ); -}); +} -export default SegmentList; +export default memo(SegmentList); diff --git a/src/renderer/src/StreamsSelector.tsx b/src/renderer/src/StreamsSelector.tsx index c49554bf..b5575bef 100644 --- a/src/renderer/src/StreamsSelector.tsx +++ b/src/renderer/src/StreamsSelector.tsx @@ -28,6 +28,7 @@ interface EditingStream { path: string; } +// eslint-disable-next-line react/display-name const EditFileDialog = memo(({ editingFile, allFilesMeta, customTagsByFile, setCustomTagsByFile, editingTag, setEditingTag }: { editingFile: string, allFilesMeta: FilesMeta, customTagsByFile: CustomTagsByFile, setCustomTagsByFile: Dispatch>, editingTag: string | undefined, setEditingTag: (tag: string | undefined) => void }) => { @@ -92,6 +93,7 @@ function StreamParametersEditor({ stream, streamParams, updateStreamParams }: { ); } +// eslint-disable-next-line react/display-name const EditStreamDialog = memo(({ editingStream: { streamId: editingStreamId, path: editingFile }, setEditingStream, allFilesMeta, paramsByStreamId, updateStreamParams }: { editingStream: EditingStream, setEditingStream: Dispatch>, allFilesMeta: FilesMeta, paramsByStreamId: ParamsByStreamId, updateStreamParams: UpdateStreamParams, }) => { @@ -149,6 +151,7 @@ function onInfoClick(json: unknown, title: string) { showJson5Dialog({ title, json }); } +// eslint-disable-next-line react/display-name const Stream = memo(({ filePath, stream, onToggle, batchSetCopyStreamIds, copyStream, fileDuration, setEditingStream, onExtractStreamPress, paramsByStreamId, updateStreamParams, formatTimecode, loadSubtitleTrackToSegments }: { filePath: string, stream: FFprobeStream, onToggle: (a: number) => void, batchSetCopyStreamIds: (filter: (a: FFprobeStream) => boolean, enabled: boolean) => void, copyStream: boolean, fileDuration: number | undefined, setEditingStream: (a: EditingStream) => void, onExtractStreamPress?: () => void, paramsByStreamId: ParamsByStreamId, updateStreamParams: UpdateStreamParams, formatTimecode: FormatTimecode, loadSubtitleTrackToSegments?: (index: number) => void, }) => { diff --git a/src/renderer/src/Timeline.tsx b/src/renderer/src/Timeline.tsx index df95175a..dcaf1fe5 100644 --- a/src/renderer/src/Timeline.tsx +++ b/src/renderer/src/Timeline.tsx @@ -20,6 +20,7 @@ type CalculateTimelinePercent = (time: number) => string | undefined; const currentTimeWidth = 1; +// eslint-disable-next-line react/display-name const Waveform = memo(({ waveform, calculateTimelinePercent, durationSafe }: { waveform: RenderableWaveform, calculateTimelinePercent: CalculateTimelinePercent, durationSafe: number, }) => { @@ -43,6 +44,7 @@ const Waveform = memo(({ waveform, calculateTimelinePercent, durationSafe }: { ); }); +// eslint-disable-next-line react/display-name const Waveforms = memo(({ calculateTimelinePercent, durationSafe, waveforms, zoom, height }: { calculateTimelinePercent: CalculateTimelinePercent, durationSafe: number, waveforms: RenderableWaveform[], zoom: number, height: number, }) => ( @@ -53,6 +55,7 @@ const Waveforms = memo(({ calculateTimelinePercent, durationSafe, waveforms, zoo )); +// eslint-disable-next-line react/display-name const CommandedTime = memo(({ commandedTimePercent }: { commandedTimePercent: string }) => { const color = 'var(--gray12)'; const commonStyle: CSSProperties = { left: commandedTimePercent, position: 'absolute', pointerEvents: 'none' }; @@ -70,7 +73,7 @@ const timelineHeight = 36; const timeWrapperStyle: CSSProperties = { position: 'absolute', height: timelineHeight, left: 0, right: 0, bottom: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }; const timeStyle: CSSProperties = { background: 'rgba(0,0,0,0.4)', borderRadius: 3, padding: '2px 4px', color: 'rgba(255, 255, 255, 0.8)' }; -const Timeline = memo(({ +function Timeline({ durationSafe, startTimeOffset, playerTime, @@ -126,7 +129,7 @@ const Timeline = memo(({ commandedTimeRef: MutableRefObject, goToTimecode: () => void, isSegmentSelected: (a: { segId: string }) => boolean, -}) => { +}) { const { t } = useTranslation(); const { invertCutSegments } = useUserSettings(); @@ -405,6 +408,6 @@ const Timeline = memo(({ ); -}); +} -export default Timeline; +export default memo(Timeline); diff --git a/src/renderer/src/TimelineSeg.tsx b/src/renderer/src/TimelineSeg.tsx index 307c0614..5cb9d0f5 100644 --- a/src/renderer/src/TimelineSeg.tsx +++ b/src/renderer/src/TimelineSeg.tsx @@ -8,11 +8,11 @@ import { useSegColors } from './contexts'; import { ApparentCutSegment, FormatTimecode } from './types'; -const TimelineSeg = memo(({ +function TimelineSeg({ seg, duration, isActive, segNum, onSegClick, invertCutSegments, formatTimecode, selected, } : { seg: ApparentCutSegment, duration: number, isActive: boolean, segNum: number, onSegClick: (a: number) => void, invertCutSegments: boolean, formatTimecode: FormatTimecode, selected: boolean, -}) => { +}) { const { darkMode } = useUserSettings(); const { getSegColor } = useSegColors(); @@ -103,6 +103,6 @@ const TimelineSeg = memo(({
); -}); +} -export default TimelineSeg; +export default memo(TimelineSeg); diff --git a/src/renderer/src/TopMenu.tsx b/src/renderer/src/TopMenu.tsx index 3ecefae4..9f0fca64 100644 --- a/src/renderer/src/TopMenu.tsx +++ b/src/renderer/src/TopMenu.tsx @@ -16,7 +16,7 @@ import { InverseCutSegment } from './types'; const outFmtStyle = { height: 20, maxWidth: 100 }; const exportModeStyle = { flexGrow: 0, flexBasis: 140 }; -const TopMenu = memo(({ +function TopMenu({ filePath, fileFormat, copyAnyAudioTrack, @@ -42,7 +42,7 @@ const TopMenu = memo(({ selectedSegments: InverseCutSegment[], isCustomFormatSelected: boolean, clearOutDir: () => void, -}) => { +}) { const { t } = useTranslation(); const { customOutDir, changeOutDir, simpleMode, outFormatLocked, setOutFormatLocked } = useUserSettings(); @@ -113,6 +113,6 @@ const TopMenu = memo(({
); -}); +} -export default TopMenu; +export default memo(TopMenu); diff --git a/src/renderer/src/components/AutoExportToggler.tsx b/src/renderer/src/components/AutoExportToggler.tsx index 5c0b9b6a..5d9f5659 100644 --- a/src/renderer/src/components/AutoExportToggler.tsx +++ b/src/renderer/src/components/AutoExportToggler.tsx @@ -4,7 +4,7 @@ import { Button, ForkIcon, DisableIcon } from 'evergreen-ui'; import useUserSettings from '../hooks/useUserSettings'; -const AutoExportToggler = memo(() => { +function AutoExportToggler() { const { t } = useTranslation(); const { autoExportExtraStreams, setAutoExportExtraStreams } = useUserSettings(); @@ -13,6 +13,6 @@ const AutoExportToggler = memo(() => { {autoExportExtraStreams ? t('Extract') : t('Discard')} ); -}); +} -export default AutoExportToggler; +export default memo(AutoExportToggler); diff --git a/src/renderer/src/components/BatchFile.tsx b/src/renderer/src/components/BatchFile.tsx index 0b951aa8..1ef38408 100644 --- a/src/renderer/src/components/BatchFile.tsx +++ b/src/renderer/src/components/BatchFile.tsx @@ -5,9 +5,9 @@ import { FaAngleRight, FaFile } from 'react-icons/fa'; import useContextMenu from '../hooks/useContextMenu'; import { primaryTextColor } from '../colors'; -const BatchFile = memo(({ path, isOpen, isSelected, name, onSelect, onDelete }: { +function BatchFile({ path, isOpen, isSelected, name, onSelect, onDelete }: { path: string, isOpen: boolean, isSelected: boolean, name: string, onSelect: (a: string) => void, onDelete: (a: string) => void -}) => { +}) { const ref = useRef(null); const { t } = useTranslation(); @@ -26,6 +26,6 @@ const BatchFile = memo(({ path, isOpen, isSelected, name, onSelect, onDelete }: {isOpen && } ); -}); +} -export default BatchFile; +export default memo(BatchFile); diff --git a/src/renderer/src/components/BatchFilesList.jsx b/src/renderer/src/components/BatchFilesList.tsx similarity index 91% rename from src/renderer/src/components/BatchFilesList.jsx rename to src/renderer/src/components/BatchFilesList.tsx index f765477a..1642112e 100644 --- a/src/renderer/src/components/BatchFilesList.jsx +++ b/src/renderer/src/components/BatchFilesList.tsx @@ -20,10 +20,10 @@ const iconStyle = { padding: '3px 5px', }; -const BatchFilesList = memo(({ selectedBatchFiles, filePath, width, batchFiles, setBatchFiles, onBatchFileSelect, batchListRemoveFile, closeBatch, onMergeFilesClick, onBatchConvertToSupportedFormatClick }) => { +function BatchFilesList({ selectedBatchFiles, filePath, width, batchFiles, setBatchFiles, onBatchFileSelect, batchListRemoveFile, closeBatch, onMergeFilesClick, onBatchConvertToSupportedFormatClick }) { const { t } = useTranslation(); - const [sortDesc, setSortDesc] = useState(); + const [sortDesc, setSortDesc] = useState(); const sortableList = batchFiles.map((batchFile) => ({ id: batchFile.path, batchFile })); @@ -70,6 +70,6 @@ const BatchFilesList = memo(({ selectedBatchFiles, filePath, width, batchFiles, ); -}); +} -export default BatchFilesList; +export default memo(BatchFilesList); diff --git a/src/renderer/src/components/BigWaveform.tsx b/src/renderer/src/components/BigWaveform.tsx index 0fce3822..61f36cc0 100644 --- a/src/renderer/src/components/BigWaveform.tsx +++ b/src/renderer/src/components/BigWaveform.tsx @@ -5,9 +5,9 @@ import { ffmpegExtractWindow } from '../util/constants'; import { RenderableWaveform } from '../types'; -const BigWaveform = memo(({ waveforms, relevantTime, playing, durationSafe, zoom, seekRel }: { +function BigWaveform({ waveforms, relevantTime, playing, durationSafe, zoom, seekRel }: { waveforms: RenderableWaveform[], relevantTime: number, playing: boolean, durationSafe: number, zoom: number, seekRel: (a: number) => void, -}) => { +}) { const windowSize = ffmpegExtractWindow * 2; const windowStart = Math.max(0, relevantTime - windowSize); const windowEnd = relevantTime + windowSize; @@ -129,6 +129,6 @@ const BigWaveform = memo(({ waveforms, relevantTime, playing, durationSafe, zoom
); -}); +} -export default BigWaveform; +export default memo(BigWaveform); diff --git a/src/renderer/src/components/Button.tsx b/src/renderer/src/components/Button.tsx index 27627829..7c01ffa8 100644 --- a/src/renderer/src/components/Button.tsx +++ b/src/renderer/src/components/Button.tsx @@ -2,9 +2,11 @@ import { ButtonHTMLAttributes, memo } from 'react'; import styles from './Button.module.css'; -const Button = memo(({ type = 'button', ...props }: ButtonHTMLAttributes) => ( - // eslint-disable-next-line react/jsx-props-no-spreading, react/button-has-type - ); -}); +} -export default CaptureFormatButton; +export default memo(CaptureFormatButton); diff --git a/src/renderer/src/components/ConcatDialog.tsx b/src/renderer/src/components/ConcatDialog.tsx index 2f0e3bcd..d98b33ab 100644 --- a/src/renderer/src/components/ConcatDialog.tsx +++ b/src/renderer/src/components/ConcatDialog.tsx @@ -26,9 +26,9 @@ const rowStyle: CSSProperties = { color: 'black', fontSize: 14, margin: '4px 0px', overflowY: 'auto', whiteSpace: 'nowrap', }; -const ConcatDialog = memo(({ isShown, onHide, paths, onConcat, alwaysConcatMultipleFiles, setAlwaysConcatMultipleFiles }: { +function ConcatDialog({ isShown, onHide, paths, onConcat, alwaysConcatMultipleFiles, setAlwaysConcatMultipleFiles }: { isShown: boolean, onHide: () => void, paths: string[], onConcat: (a: { paths: string[], includeAllStreams: boolean, streams: FFprobeStream[], outFileName: string, fileFormat: string, clearBatchFilesAfterConcat: boolean }) => Promise, alwaysConcatMultipleFiles: boolean, setAlwaysConcatMultipleFiles: (a: boolean) => void, -}) => { +}) { const { t } = useTranslation(); const { preserveMovData, setPreserveMovData, segmentsToChapters, setSegmentsToChapters, preserveMetadataOnMerge, setPreserveMetadataOnMerge } = useUserSettings(); @@ -238,6 +238,6 @@ const ConcatDialog = memo(({ isShown, onHide, paths, onConcat, alwaysConcatMulti ); -}); +} -export default ConcatDialog; +export default memo(ConcatDialog); diff --git a/src/renderer/src/components/CopyClipboardButton.tsx b/src/renderer/src/components/CopyClipboardButton.tsx index a1295428..3047491a 100644 --- a/src/renderer/src/components/CopyClipboardButton.tsx +++ b/src/renderer/src/components/CopyClipboardButton.tsx @@ -6,7 +6,7 @@ import { MotionStyle, motion, useAnimation } from 'framer-motion'; const electron = window.require('electron'); const { clipboard } = electron; -const CopyClipboardButton = memo(({ text, style }: { text: string, style?: MotionStyle }) => { +function CopyClipboardButton({ text, style }: { text: string, style?: MotionStyle }) { const { t } = useTranslation(); const animation = useAnimation(); @@ -24,6 +24,6 @@ const CopyClipboardButton = memo(({ text, style }: { text: string, style?: Motio ); -}); +} -export default CopyClipboardButton; +export default memo(CopyClipboardButton); diff --git a/src/renderer/src/components/ExportButton.tsx b/src/renderer/src/components/ExportButton.tsx index 5ff0086a..bc684d2f 100644 --- a/src/renderer/src/components/ExportButton.tsx +++ b/src/renderer/src/components/ExportButton.tsx @@ -8,9 +8,9 @@ import useUserSettings from '../hooks/useUserSettings'; import { SegmentToExport } from '../types'; -const ExportButton = memo(({ segmentsToExport, areWeCutting, onClick, size = 1 }: { +function ExportButton({ segmentsToExport, areWeCutting, onClick, size = 1 }: { segmentsToExport: SegmentToExport[], areWeCutting: boolean, onClick: () => void, size?: number | undefined, -}) => { +}) { const CutIcon = areWeCutting ? FiScissors : FaFileExport; const { t } = useTranslation(); @@ -40,6 +40,6 @@ const ExportButton = memo(({ segmentsToExport, areWeCutting, onClick, size = 1 } {text} ); -}); +} -export default ExportButton; +export default memo(ExportButton); diff --git a/src/renderer/src/components/ExportConfirm.tsx b/src/renderer/src/components/ExportConfirm.tsx index ef7b1f36..a5422660 100644 --- a/src/renderer/src/components/ExportConfirm.tsx +++ b/src/renderer/src/components/ExportConfirm.tsx @@ -39,7 +39,7 @@ const warningStyle: CSSProperties = { color: 'var(--orange8)', fontSize: '80%', const HelpIcon = ({ onClick, style }: { onClick: () => void, style?: CSSProperties }) => ; -const ExportConfirm = memo(({ +function ExportConfirm({ areWeCutting, selectedSegments, segmentsToExport, @@ -89,7 +89,7 @@ const ExportConfirm = memo(({ setMergedOutFileName: (a: string) => void, smartCutBitrate: number | undefined, setSmartCutBitrate: Dispatch>, -}) => { +}) { const { t } = useTranslation(); const { changeOutDir, keyframeCut, toggleKeyframeCut, preserveMovData, movFastStart, avoidNegativeTs, setAvoidNegativeTs, autoDeleteMergedSegments, exportConfirmEnabled, toggleExportConfirmEnabled, segmentsToChapters, toggleSegmentsToChapters, preserveMetadataOnMerge, togglePreserveMetadataOnMerge, enableSmartCut, setEnableSmartCut, effectiveExportMode, enableOverwriteOutput, setEnableOverwriteOutput, ffmpegExperimental, setFfmpegExperimental, cutFromAdjustmentFrames, setCutFromAdjustmentFrames } = useUserSettings(); @@ -539,6 +539,6 @@ const ExportConfirm = memo(({ )} ); -}); +} -export default ExportConfirm; +export default memo(ExportConfirm); diff --git a/src/renderer/src/components/ExportModeButton.tsx b/src/renderer/src/components/ExportModeButton.tsx index aae814e9..27316e50 100644 --- a/src/renderer/src/components/ExportModeButton.tsx +++ b/src/renderer/src/components/ExportModeButton.tsx @@ -7,7 +7,7 @@ import Select from './Select'; import { ExportMode } from '../types'; -const ExportModeButton = memo(({ selectedSegments, style }: { selectedSegments: unknown[], style?: CSSProperties }) => { +function ExportModeButton({ selectedSegments, style }: { selectedSegments: unknown[], style?: CSSProperties }) { const { t } = useTranslation(); const { effectiveExportMode, setAutoMerge, setAutoDeleteMergedSegments, setSegmentsToChaptersOnly } = useUserSettings(); @@ -75,6 +75,6 @@ const ExportModeButton = memo(({ selectedSegments, style }: { selectedSegments: })} ); -}); +} -export default ExportModeButton; +export default memo(ExportModeButton); diff --git a/src/renderer/src/components/KeyboardShortcuts.tsx b/src/renderer/src/components/KeyboardShortcuts.tsx index feb66063..daaf4880 100644 --- a/src/renderer/src/components/KeyboardShortcuts.tsx +++ b/src/renderer/src/components/KeyboardShortcuts.tsx @@ -44,6 +44,7 @@ function fixKeys(keys: string[]) { return orderBy(uniqed, [(key) => key !== 'shift', (key) => key !== 'ctrl', (key) => key !== 'alt', (key) => key !== 'meta', (key) => key]); } +// eslint-disable-next-line react/display-name const CreateBinding = memo(({ actionsMap, action, setCreatingBinding, onNewKeyBindingConfirmed, }: { @@ -117,6 +118,7 @@ const CreateBinding = memo(({ const rowStyle = { display: 'flex', alignItems: 'center', margin: '.2em 0', borderBottom: '1px solid rgba(0,0,0,0.1)', paddingBottom: '.5em' }; +// eslint-disable-next-line react/display-name const KeyboardShortcuts = memo(({ keyBindings, setKeyBindings, resetKeyBindings, currentCutSeg, }: { @@ -775,11 +777,11 @@ const KeyboardShortcuts = memo(({ ); }); -const KeyboardShortcutsDialog = memo(({ +function KeyboardShortcutsDialog({ isShown, onHide, keyBindings, setKeyBindings, resetKeyBindings, currentCutSeg, }: { isShown: boolean, onHide: () => void, keyBindings: KeyBinding[], setKeyBindings: Dispatch>, resetKeyBindings: () => void, currentCutSeg: StateSegment, -}) => { +}) { const { t } = useTranslation(); return ( @@ -795,6 +797,6 @@ const KeyboardShortcutsDialog = memo(({ {isShown ? :
} ); -}); +} -export default KeyboardShortcutsDialog; +export default memo(KeyboardShortcutsDialog); diff --git a/src/renderer/src/components/MergedOutFileName.tsx b/src/renderer/src/components/MergedOutFileName.tsx index 6c642277..6ff58621 100644 --- a/src/renderer/src/components/MergedOutFileName.tsx +++ b/src/renderer/src/components/MergedOutFileName.tsx @@ -3,10 +3,12 @@ import { memo } from 'react'; import TextInput from './TextInput'; -const MergedOutFileName = memo(({ mergedOutFileName, setMergedOutFileName }: { mergedOutFileName: string | undefined, setMergedOutFileName: (a: string) => void }) => ( -
- setMergedOutFileName(e.target.value)} style={{ textAlign: 'right' }} /> -
-)); +function MergedOutFileName({ mergedOutFileName, setMergedOutFileName }: { mergedOutFileName: string | undefined, setMergedOutFileName: (a: string) => void }) { + return ( +
+ setMergedOutFileName(e.target.value)} style={{ textAlign: 'right' }} /> +
+ ); +} -export default MergedOutFileName; +export default memo(MergedOutFileName); diff --git a/src/renderer/src/components/MovFastStartButton.jsx b/src/renderer/src/components/MovFastStartButton.tsx similarity index 80% rename from src/renderer/src/components/MovFastStartButton.jsx rename to src/renderer/src/components/MovFastStartButton.tsx index 1c622317..67843247 100644 --- a/src/renderer/src/components/MovFastStartButton.jsx +++ b/src/renderer/src/components/MovFastStartButton.tsx @@ -5,12 +5,12 @@ import useUserSettings from '../hooks/useUserSettings'; import Switch from './Switch'; -const MovFastStartButton = memo(() => { +function MovFastStartButton() { const { movFastStart, toggleMovFastStart } = useUserSettings(); return ( ); -}); +} -export default MovFastStartButton; +export default memo(MovFastStartButton); diff --git a/src/renderer/src/components/OutSegTemplateEditor.tsx b/src/renderer/src/components/OutSegTemplateEditor.tsx index 4df03c33..3361e021 100644 --- a/src/renderer/src/components/OutSegTemplateEditor.tsx +++ b/src/renderer/src/components/OutSegTemplateEditor.tsx @@ -23,9 +23,9 @@ const formatVariable = (variable) => `\${${variable}}`; const extVar = formatVariable('EXT'); -const OutSegTemplateEditor = memo(({ outSegTemplate, setOutSegTemplate, generateOutSegFileNames, currentSegIndexSafe }: { +function OutSegTemplateEditor({ outSegTemplate, setOutSegTemplate, generateOutSegFileNames, currentSegIndexSafe }: { outSegTemplate: string, setOutSegTemplate: (text: string) => void, generateOutSegFileNames: GenerateOutSegFileNames, currentSegIndexSafe: number, -}) => { +}) { const { safeOutputFileName, toggleSafeOutputFileName, outputFileNameMinZeroPadding, setOutputFileNameMinZeroPadding } = useUserSettings(); const [text, setText] = useState(outSegTemplate); @@ -174,6 +174,6 @@ const OutSegTemplateEditor = memo(({ outSegTemplate, setOutSegTemplate, generate ); -}); +} -export default OutSegTemplateEditor; +export default memo(OutSegTemplateEditor); diff --git a/src/renderer/src/components/OutputFormatSelect.tsx b/src/renderer/src/components/OutputFormatSelect.tsx index 05788944..7b1464c0 100644 --- a/src/renderer/src/components/OutputFormatSelect.tsx +++ b/src/renderer/src/components/OutputFormatSelect.tsx @@ -9,15 +9,15 @@ const commonVideoAudioFormats = ['matroska', 'mov', 'mp4', 'mpegts', 'ogv', 'web const commonAudioFormats = ['flac', 'ipod', 'mp3', 'oga', 'ogg', 'opus', 'wav']; const commonSubtitleFormats = ['ass', 'srt', 'sup', 'webvtt']; -function renderFormatOptions(formats) { +function renderFormatOptions(formats: string[]) { return formats.map((format) => ( )); } -const OutputFormatSelect = memo(({ style, detectedFileFormat, fileFormat, onOutputFormatUserChange }: { +function OutputFormatSelect({ style, detectedFileFormat, fileFormat, onOutputFormatUserChange }: { style: CSSProperties, detectedFileFormat?: string | undefined, fileFormat?: string | undefined, onOutputFormatUserChange: (a: string) => void, -}) => { +}) { const commonVideoAudioFormatsExceptDetectedFormat = useMemo(() => commonVideoAudioFormats.filter((f) => f !== detectedFileFormat), [detectedFileFormat]); const commonAudioFormatsExceptDetectedFormat = useMemo(() => commonAudioFormats.filter((f) => f !== detectedFileFormat), [detectedFileFormat]); const commonSubtitleFormatsExceptDetectedFormat = useMemo(() => commonSubtitleFormats.filter((f) => f !== detectedFileFormat), [detectedFileFormat]); @@ -49,6 +49,6 @@ const OutputFormatSelect = memo(({ style, detectedFileFormat, fileFormat, onOutp {renderFormatOptions(otherFormats)} ); -}); +} -export default OutputFormatSelect; +export default memo(OutputFormatSelect); diff --git a/src/renderer/src/components/PlaybackStreamSelector.tsx b/src/renderer/src/components/PlaybackStreamSelector.tsx index 3e75a721..c600b222 100644 --- a/src/renderer/src/components/PlaybackStreamSelector.tsx +++ b/src/renderer/src/components/PlaybackStreamSelector.tsx @@ -3,7 +3,7 @@ import { MdSubtitles } from 'react-icons/md'; import { useTranslation } from 'react-i18next'; import Select from './Select'; -const PlaybackStreamSelector = memo(({ +function PlaybackStreamSelector({ subtitleStreams, videoStreams, audioStreams, @@ -23,7 +23,7 @@ const PlaybackStreamSelector = memo(({ onActiveSubtitleChange: (a?: number | undefined) => void, onActiveVideoStreamChange: (a?: number | undefined) => void, onActiveAudioStreamChange: (a?: number | undefined) => void, -}) => { +}) { const [controlVisible, setControlVisible] = useState(false); const timeoutRef = useRef(); @@ -105,6 +105,6 @@ const PlaybackStreamSelector = memo(({ /> ); -}); +} -export default PlaybackStreamSelector; +export default memo(PlaybackStreamSelector); diff --git a/src/renderer/src/components/PreserveMovDataButton.jsx b/src/renderer/src/components/PreserveMovDataButton.tsx similarity index 79% rename from src/renderer/src/components/PreserveMovDataButton.jsx rename to src/renderer/src/components/PreserveMovDataButton.tsx index 66fd9cfa..17b4bc3f 100644 --- a/src/renderer/src/components/PreserveMovDataButton.jsx +++ b/src/renderer/src/components/PreserveMovDataButton.tsx @@ -5,12 +5,12 @@ import useUserSettings from '../hooks/useUserSettings'; import Switch from './Switch'; -const PreserveMovDataButton = memo(() => { +function PreserveMovDataButton() { const { preserveMovData, togglePreserveMovData } = useUserSettings(); return ( ); -}); +} -export default PreserveMovDataButton; +export default memo(PreserveMovDataButton); diff --git a/src/renderer/src/components/Select.tsx b/src/renderer/src/components/Select.tsx index fc9f57ff..5391426c 100644 --- a/src/renderer/src/components/Select.tsx +++ b/src/renderer/src/components/Select.tsx @@ -2,9 +2,12 @@ import { SelectHTMLAttributes, memo } from 'react'; import styles from './Select.module.css'; -const Select = memo((props: SelectHTMLAttributes) => ( - // eslint-disable-next-line react/jsx-props-no-spreading - + ); +} + +export default memo(Select); diff --git a/src/renderer/src/components/Settings.tsx b/src/renderer/src/components/Settings.tsx index 7b46971d..2a30569b 100644 --- a/src/renderer/src/components/Settings.tsx +++ b/src/renderer/src/components/Settings.tsx @@ -41,7 +41,7 @@ const Header = ({ title }: { title: string }) => ( const detailsStyle: CSSProperties = { opacity: 0.75, fontSize: '.9em', marginTop: '.3em' }; -const Settings = memo(({ +function Settings({ onTunerRequested, onKeyboardShortcutsDialogRequested, askForCleanupChoices, @@ -55,7 +55,7 @@ const Settings = memo(({ toggleStoreProjectInWorkingDir: () => Promise, simpleMode: boolean, clearOutDir: () => Promise, -}) => { +}) { const { t } = useTranslation(); const [showAdvanced, setShowAdvanced] = useState(!simpleMode); @@ -481,6 +481,6 @@ const Settings = memo(({ ); -}); +} -export default Settings; +export default memo(Settings); diff --git a/src/renderer/src/components/Sheet.tsx b/src/renderer/src/components/Sheet.tsx index b3d57e8a..038571df 100644 --- a/src/renderer/src/components/Sheet.tsx +++ b/src/renderer/src/components/Sheet.tsx @@ -5,9 +5,10 @@ import { useTranslation } from 'react-i18next'; import styles from './Sheet.module.css'; -const Sheet = memo(({ visible, onClosePress, children, maxWidth = 800, style }: { + +function Sheet({ visible, onClosePress, children, maxWidth = 800, style }: { visible: boolean, onClosePress: () => void, children: ReactNode, maxWidth?: number, style?: CSSProperties -}) => { +}) { const { t } = useTranslation(); return ( @@ -30,6 +31,6 @@ const Sheet = memo(({ visible, onClosePress, children, maxWidth = 800, style }: )} ); -}); +} -export default Sheet; +export default memo(Sheet); diff --git a/src/renderer/src/components/SimpleModeButton.tsx b/src/renderer/src/components/SimpleModeButton.tsx index 48e0e1f5..a898fa6f 100644 --- a/src/renderer/src/components/SimpleModeButton.tsx +++ b/src/renderer/src/components/SimpleModeButton.tsx @@ -6,7 +6,7 @@ import { primaryTextColor } from '../colors'; import useUserSettings from '../hooks/useUserSettings'; -const SimpleModeButton = memo(({ size = 20, style }: { size?: number, style: CSSProperties }) => { +function SimpleModeButton({ size = 20, style }: { size?: number, style: CSSProperties }) { const { t } = useTranslation(); const { simpleMode, toggleSimpleMode } = useUserSettings(); @@ -18,6 +18,6 @@ const SimpleModeButton = memo(({ size = 20, style }: { size?: number, style: CSS onClick={toggleSimpleMode} /> ); -}); +} -export default SimpleModeButton; +export default memo(SimpleModeButton); diff --git a/src/renderer/src/components/TextInput.tsx b/src/renderer/src/components/TextInput.tsx index 46f495dd..45f15599 100644 --- a/src/renderer/src/components/TextInput.tsx +++ b/src/renderer/src/components/TextInput.tsx @@ -1,7 +1,9 @@ import { CSSProperties, forwardRef } from 'react'; + const inputStyle: CSSProperties = { borderRadius: '.4em', flexGrow: 1, fontFamily: 'inherit', fontSize: '.8em', backgroundColor: 'var(--gray3)', color: 'var(--gray12)', border: '1px solid var(--gray7)', appearance: 'none' }; +// eslint-disable-next-line react/display-name const TextInput = forwardRef(({ style, ...props }, forwardedRef) => ( // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/src/renderer/src/components/ToggleExportConfirm.tsx b/src/renderer/src/components/ToggleExportConfirm.tsx index d066fb5d..3d9e7ea4 100644 --- a/src/renderer/src/components/ToggleExportConfirm.tsx +++ b/src/renderer/src/components/ToggleExportConfirm.tsx @@ -7,13 +7,13 @@ import { primaryTextColor } from '../colors'; import useUserSettings from '../hooks/useUserSettings'; -const ToggleExportConfirm = memo(({ size = 23, style }: { size?: number | undefined, style?: CSSProperties }) => { +function ToggleExportConfirm({ size = 23, style }: { size?: number | undefined, style?: CSSProperties }) { const { t } = useTranslation(); const { exportConfirmEnabled, toggleExportConfirmEnabled } = useUserSettings(); return ( ); -}); +} -export default ToggleExportConfirm; +export default memo(ToggleExportConfirm); diff --git a/src/renderer/src/components/ValueTuner.tsx b/src/renderer/src/components/ValueTuner.tsx index ba835bc5..4b9ffc45 100644 --- a/src/renderer/src/components/ValueTuner.tsx +++ b/src/renderer/src/components/ValueTuner.tsx @@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next'; import Switch from './Switch'; -const ValueTuner = memo(({ style, title, value, setValue, onFinished, resolution = 1000, min: minIn = 0, max: maxIn = 1, resetToDefault }: { +function ValueTuner({ style, title, value, setValue, onFinished, resolution = 1000, min: minIn = 0, max: maxIn = 1, resetToDefault }: { style?: CSSProperties, title: string, value: number, setValue: (string) => void, onFinished: () => void, resolution?: number, min?: number, max?: number, resetToDefault: () => void -}) => { +}) { const { t } = useTranslation(); const [min, setMin] = useState(minIn); @@ -49,6 +49,6 @@ const ValueTuner = memo(({ style, title, value, setValue, onFinished, resolution
); -}); +} -export default ValueTuner; +export default memo(ValueTuner); diff --git a/src/renderer/src/components/ValueTuners.tsx b/src/renderer/src/components/ValueTuners.tsx index 44dca485..8d6296d3 100644 --- a/src/renderer/src/components/ValueTuners.tsx +++ b/src/renderer/src/components/ValueTuners.tsx @@ -5,7 +5,8 @@ import ValueTuner from './ValueTuner'; import useUserSettings from '../hooks/useUserSettings'; import { TunerType } from '../types'; -const ValueTuners = memo(({ type, onFinished }: { type: TunerType, onFinished: () => void }) => { + +function ValueTuners({ type, onFinished }: { type: TunerType, onFinished: () => void }) { const { t } = useTranslation(); const { wheelSensitivity, setWheelSensitivity, keyboardNormalSeekSpeed, keyboardSeekSpeed2, setKeyboardSeekSpeed2, keyboardSeekSpeed3, setKeyboardSeekSpeed3, setKeyboardNormalSeekSpeed, keyboardSeekAccFactor, setKeyboardSeekAccFactor } = useUserSettings(); @@ -57,7 +58,7 @@ const ValueTuners = memo(({ type, onFinished }: { type: TunerType, onFinished: ( const resetToDefault = () => setValue(defaultValue); return ; -}); +} -export default ValueTuners; +export default memo(ValueTuners); diff --git a/src/renderer/src/components/VolumeControl.tsx b/src/renderer/src/components/VolumeControl.tsx index ae0dd529..38642285 100644 --- a/src/renderer/src/components/VolumeControl.tsx +++ b/src/renderer/src/components/VolumeControl.tsx @@ -3,7 +3,7 @@ import { FaVolumeMute, FaVolumeUp } from 'react-icons/fa'; import { useTranslation } from 'react-i18next'; -const VolumeControl = memo(({ playbackVolume, setPlaybackVolume }: { playbackVolume: number, setPlaybackVolume: (a: number) => void }) => { +function VolumeControl({ playbackVolume, setPlaybackVolume }: { playbackVolume: number, setPlaybackVolume: (a: number) => void }) { const [volumeControlVisible, setVolumeControlVisible] = useState(false); const timeoutRef = useRef(); const { t } = useTranslation(); @@ -52,6 +52,6 @@ const VolumeControl = memo(({ playbackVolume, setPlaybackVolume }: { playbackVol /> ); -}); +} -export default VolumeControl; +export default memo(VolumeControl); diff --git a/src/renderer/src/components/Working.tsx b/src/renderer/src/components/Working.tsx index 3c24ed7f..b76118e6 100644 --- a/src/renderer/src/components/Working.tsx +++ b/src/renderer/src/components/Working.tsx @@ -8,40 +8,42 @@ import { primaryColor } from '../colors'; import loadingLottie from '../7077-magic-flow.json'; -const Working = memo(({ text, cutProgress, onAbortClick }: { +function Working({ text, cutProgress, onAbortClick }: { text: string, cutProgress?: number | undefined, onAbortClick: () => void -}) => ( -
- -
- -
- -
- {text}... -
- - {(cutProgress != null) && ( -
- {`${(cutProgress * 100).toFixed(1)} %`} +}) { + return ( +
+ +
+
- )} -
- -
- -
-)); +
+ {text}... +
-export default Working; + {(cutProgress != null) && ( +
+ {`${(cutProgress * 100).toFixed(1)} %`} +
+ )} + +
+ +
+ +
+ ); +} + +export default memo(Working);