From 419c225937bb9ed5d4304c7b75cb1b68129e5ac2 Mon Sep 17 00:00:00 2001
From: gompa <gompa@h-bomb.nl>
Date: Wed, 26 Mar 2025 10:33:35 +0100
Subject: [PATCH] fix inputProps depreciation

---
 .../tasks/components/NewTriggerForm.tsx       | 10 ++-
 src/apps/dashboard/routes/branding/index.tsx  | 16 ++--
 .../dashboard/routes/libraries/metadata.tsx   | 10 ++-
 src/apps/dashboard/routes/playback/resume.tsx | 58 +++++++++------
 .../dashboard/routes/playback/streaming.tsx   | 10 ++-
 .../dashboard/routes/playback/trickplay.tsx   | 74 +++++++++++--------
 src/apps/dashboard/routes/settings/index.tsx  | 60 ++++++++-------
 .../components/DisplayPreferences.tsx         | 20 ++---
 .../components/LibraryPreferences.tsx         | 20 ++---
 .../components/NextUpPreferences.tsx          | 20 ++---
 10 files changed, 174 insertions(+), 124 deletions(-)

diff --git a/src/apps/dashboard/features/tasks/components/NewTriggerForm.tsx b/src/apps/dashboard/features/tasks/components/NewTriggerForm.tsx
index 4cec4b0474..35f645fbd4 100644
--- a/src/apps/dashboard/features/tasks/components/NewTriggerForm.tsx
+++ b/src/apps/dashboard/features/tasks/components/NewTriggerForm.tsx
@@ -148,11 +148,13 @@ const NewTriggerForm: FunctionComponent<IProps> = ({ open, title, onClose, onAdd
                         fullWidth
                         defaultValue={''}
                         type='number'
-                        inputProps={{
-                            min: 1,
-                            step: 0.5
-                        }}
                         label={globalize.translate('LabelTimeLimitHours')}
+                        slotProps={{
+                            htmlInput: {
+                                min: 1,
+                                step: 0.5
+                            }
+                        }}
                     />
                 </Stack>
             </DialogContent>
diff --git a/src/apps/dashboard/routes/branding/index.tsx b/src/apps/dashboard/routes/branding/index.tsx
index a62cd929ba..e510c98c30 100644
--- a/src/apps/dashboard/routes/branding/index.tsx
+++ b/src/apps/dashboard/routes/branding/index.tsx
@@ -123,14 +123,16 @@ export const Component = () => {
                             multiline
                             minRows={5}
                             maxRows={5}
-                            InputProps={{
-                                className: 'textarea-mono'
-                            }}
                             name={BrandingOption.LoginDisclaimer}
                             label={globalize.translate('LabelLoginDisclaimer')}
                             helperText={globalize.translate('LabelLoginDisclaimerHelp')}
                             value={brandingOptions?.LoginDisclaimer}
                             onChange={setBrandingOption}
+                            slotProps={{
+                                input: {
+                                    className: 'textarea-mono'
+                                }
+                            }}
                         />
 
                         <TextField
@@ -138,14 +140,16 @@ export const Component = () => {
                             multiline
                             minRows={5}
                             maxRows={20}
-                            InputProps={{
-                                className: 'textarea-mono'
-                            }}
                             name={BrandingOption.CustomCss}
                             label={globalize.translate('LabelCustomCss')}
                             helperText={globalize.translate('LabelCustomCssHelp')}
                             value={brandingOptions?.CustomCss}
                             onChange={setBrandingOption}
+                            slotProps={{
+                                input: {
+                                    className: 'textarea-mono'
+                                }
+                            }}
                         />
 
                         <Button
diff --git a/src/apps/dashboard/routes/libraries/metadata.tsx b/src/apps/dashboard/routes/libraries/metadata.tsx
index 61ba4bb513..4ac74a9608 100644
--- a/src/apps/dashboard/routes/libraries/metadata.tsx
+++ b/src/apps/dashboard/routes/libraries/metadata.tsx
@@ -127,12 +127,14 @@ export const Component = () => {
                                 name={'DummyChapterDuration'}
                                 defaultValue={config.DummyChapterDuration}
                                 type='number'
-                                inputProps={{
-                                    min: 0,
-                                    required: true
-                                }}
                                 label={globalize.translate('LabelDummyChapterDuration')}
                                 helperText={globalize.translate('LabelDummyChapterDurationHelp')}
+                                slotProps={{
+                                    htmlInput: {
+                                        min: 0,
+                                        required: true
+                                    }
+                                }}
                             />
 
                             <TextField
diff --git a/src/apps/dashboard/routes/playback/resume.tsx b/src/apps/dashboard/routes/playback/resume.tsx
index 3009825cfd..f711ac82d4 100644
--- a/src/apps/dashboard/routes/playback/resume.tsx
+++ b/src/apps/dashboard/routes/playback/resume.tsx
@@ -81,12 +81,14 @@ export const Component = () => {
                             name='MinResumePercentage'
                             type='number'
                             defaultValue={config?.MinResumePct}
-                            inputProps={{
-                                min: 0,
-                                max: 100,
-                                required: true
-                            }}
                             helperText={globalize.translate('LabelMinResumePercentageHelp')}
+                            slotProps={{
+                                htmlInput: {
+                                    min: 0,
+                                    max: 100,
+                                    required: true
+                                }
+                            }}
                         />
 
                         <TextField
@@ -94,12 +96,14 @@ export const Component = () => {
                             name='MaxResumePercentage'
                             type='number'
                             defaultValue={config?.MaxResumePct}
-                            inputProps={{
-                                min: 1,
-                                max: 100,
-                                required: true
-                            }}
                             helperText={globalize.translate('LabelMaxResumePercentageHelp')}
+                            slotProps={{
+                                htmlInput: {
+                                    min: 1,
+                                    max: 100,
+                                    required: true
+                                }
+                            }}
                         />
 
                         <TextField
@@ -107,12 +111,14 @@ export const Component = () => {
                             name='MinAudiobookResume'
                             type='number'
                             defaultValue={config?.MinAudiobookResume}
-                            inputProps={{
-                                min: 0,
-                                max: 100,
-                                required: true
-                            }}
                             helperText={globalize.translate('LabelMinAudiobookResumeHelp')}
+                            slotProps={{
+                                htmlInput: {
+                                    min: 0,
+                                    max: 100,
+                                    required: true
+                                }
+                            }}
                         />
 
                         <TextField
@@ -120,12 +126,14 @@ export const Component = () => {
                             name='MaxAudiobookResume'
                             type='number'
                             defaultValue={config?.MaxAudiobookResume}
-                            inputProps={{
-                                min: 1,
-                                max: 100,
-                                required: true
-                            }}
                             helperText={globalize.translate('LabelMaxAudiobookResumeHelp')}
+                            slotProps={{
+                                htmlInput: {
+                                    min: 1,
+                                    max: 100,
+                                    required: true
+                                }
+                            }}
                         />
 
                         <TextField
@@ -133,11 +141,13 @@ export const Component = () => {
                             name='MinResumeDuration'
                             type='number'
                             defaultValue={config?.MinResumeDurationSeconds}
-                            inputProps={{
-                                min: 0,
-                                required: true
-                            }}
                             helperText={globalize.translate('LabelMinResumeDurationHelp')}
+                            slotProps={{
+                                htmlInput: {
+                                    min: 0,
+                                    required: true
+                                }
+                            }}
                         />
 
                         <Button
diff --git a/src/apps/dashboard/routes/playback/streaming.tsx b/src/apps/dashboard/routes/playback/streaming.tsx
index e329277303..fdb75b834d 100644
--- a/src/apps/dashboard/routes/playback/streaming.tsx
+++ b/src/apps/dashboard/routes/playback/streaming.tsx
@@ -70,14 +70,16 @@ export const Component = () => {
                         <TextField
                             type='number'
                             inputMode='decimal'
-                            inputProps={{
-                                min: 0,
-                                step: 0.25
-                            }}
                             name='StreamingBitrateLimit'
                             label={globalize.translate('LabelRemoteClientBitrateLimit')}
                             helperText={globalize.translate('LabelRemoteClientBitrateLimitHelp')}
                             defaultValue={defaultConfiguration?.RemoteClientBitrateLimit ? defaultConfiguration?.RemoteClientBitrateLimit / 1e6 : ''}
+                            slotProps={{
+                                htmlInput: {
+                                    min: 0,
+                                    step: 0.25
+                                }
+                            }}
                         />
                         <Button
                             type='submit'
diff --git a/src/apps/dashboard/routes/playback/trickplay.tsx b/src/apps/dashboard/routes/playback/trickplay.tsx
index 4d33d4d321..02591d2169 100644
--- a/src/apps/dashboard/routes/playback/trickplay.tsx
+++ b/src/apps/dashboard/routes/playback/trickplay.tsx
@@ -158,22 +158,26 @@ export const Component = () => {
                             type='number'
                             inputMode='numeric'
                             defaultValue={defaultConfig.TrickplayOptions?.Interval}
-                            inputProps={{
-                                min: 1,
-                                required: true
-                            }}
                             helperText={globalize.translate('LabelImageIntervalHelp')}
+                            slotProps={{
+                                htmlInput: {
+                                    min: 1,
+                                    required: true
+                                }
+                            }}
                         />
 
                         <TextField
                             label={globalize.translate('LabelWidthResolutions')}
                             name='WidthResolutions'
                             defaultValue={defaultConfig.TrickplayOptions?.WidthResolutions}
-                            inputProps={{
-                                required: true,
-                                pattern: '[0-9,]*'
-                            }}
                             helperText={globalize.translate('LabelWidthResolutionsHelp')}
+                            slotProps={{
+                                htmlInput: {
+                                    required: true,
+                                    pattern: '[0-9,]*'
+                                }
+                            }}
                         />
 
                         <TextField
@@ -182,11 +186,13 @@ export const Component = () => {
                             type='number'
                             inputMode='numeric'
                             defaultValue={defaultConfig.TrickplayOptions?.TileWidth}
-                            inputProps={{
-                                min: 1,
-                                required: true
-                            }}
                             helperText={globalize.translate('LabelTileWidthHelp')}
+                            slotProps={{
+                                htmlInput: {
+                                    min: 1,
+                                    required: true
+                                }
+                            }}
                         />
 
                         <TextField
@@ -195,11 +201,13 @@ export const Component = () => {
                             type='number'
                             inputMode='numeric'
                             defaultValue={defaultConfig.TrickplayOptions?.TileHeight}
-                            inputProps={{
-                                min: 1,
-                                required: true
-                            }}
                             helperText={globalize.translate('LabelTileHeightHelp')}
+                            slotProps={{
+                                htmlInput: {
+                                    min: 1,
+                                    required: true
+                                }
+                            }}
                         />
 
                         <TextField
@@ -208,12 +216,14 @@ export const Component = () => {
                             type='number'
                             inputMode='numeric'
                             defaultValue={defaultConfig.TrickplayOptions?.JpegQuality}
-                            inputProps={{
-                                min: 1,
-                                max: 100,
-                                required: true
-                            }}
                             helperText={globalize.translate('LabelJpegQualityHelp')}
+                            slotProps={{
+                                htmlInput: {
+                                    min: 1,
+                                    max: 100,
+                                    required: true
+                                }
+                            }}
                         />
 
                         <TextField
@@ -222,12 +232,14 @@ export const Component = () => {
                             type='number'
                             inputMode='numeric'
                             defaultValue={defaultConfig.TrickplayOptions?.Qscale}
-                            inputProps={{
-                                min: 2,
-                                max: 31,
-                                required: true
-                            }}
                             helperText={globalize.translate('LabelQscaleHelp')}
+                            slotProps={{
+                                htmlInput: {
+                                    min: 2,
+                                    max: 31,
+                                    required: true
+                                }
+                            }}
                         />
 
                         <TextField
@@ -236,11 +248,13 @@ export const Component = () => {
                             type='number'
                             inputMode='numeric'
                             defaultValue={defaultConfig.TrickplayOptions?.ProcessThreads}
-                            inputProps={{
-                                min: 0,
-                                required: true
-                            }}
                             helperText={globalize.translate('LabelTrickplayThreadsHelp')}
+                            slotProps={{
+                                htmlInput: {
+                                    min: 0,
+                                    required: true
+                                }
+                            }}
                         />
 
                         <Button
diff --git a/src/apps/dashboard/routes/settings/index.tsx b/src/apps/dashboard/routes/settings/index.tsx
index 376b277288..2e4a31d0f8 100644
--- a/src/apps/dashboard/routes/settings/index.tsx
+++ b/src/apps/dashboard/routes/settings/index.tsx
@@ -161,7 +161,6 @@ export const Component = () => {
                                 select
                                 name='UICulture'
                                 label={globalize.translate('LabelPreferredDisplayLanguage')}
-                                FormHelperTextProps={{ component: Stack }}
                                 helperText={(
                                     <>
                                         <span>{globalize.translate('LabelDisplayLanguageHelp')}</span>
@@ -171,6 +170,9 @@ export const Component = () => {
                                     </>
                                 )}
                                 defaultValue={config.UICulture}
+                                slotProps={{
+                                    formHelperText: { component: Stack }
+                                }}
                             >
                                 {languageOptions.map((language) =>
                                     <MenuItem key={language.Name} value={language.Value || ''}>{language.Name}</MenuItem>
@@ -185,14 +187,16 @@ export const Component = () => {
                                 helperText={globalize.translate('LabelCachePathHelp')}
                                 value={cachePath}
                                 onChange={onCachePathChange}
-                                InputProps={{
-                                    endAdornment: (
-                                        <InputAdornment position='end'>
-                                            <IconButton edge='end' onClick={showCachePathPicker}>
-                                                <SearchIcon />
-                                            </IconButton>
-                                        </InputAdornment>
-                                    )
+                                slotProps={{
+                                    input: {
+                                        endAdornment: (
+                                            <InputAdornment position='end'>
+                                                <IconButton edge='end' onClick={showCachePathPicker}>
+                                                    <SearchIcon />
+                                                </IconButton>
+                                            </InputAdornment>
+                                        )
+                                    }
                                 }}
                             />
 
@@ -202,14 +206,16 @@ export const Component = () => {
                                 helperText={globalize.translate('LabelMetadataPathHelp')}
                                 value={metadataPath}
                                 onChange={onMetadataPathChange}
-                                InputProps={{
-                                    endAdornment: (
-                                        <InputAdornment position='end'>
-                                            <IconButton edge='end' onClick={showMetadataPathPicker}>
-                                                <SearchIcon />
-                                            </IconButton>
-                                        </InputAdornment>
-                                    )
+                                slotProps={{
+                                    input: {
+                                        endAdornment: (
+                                            <InputAdornment position='end'>
+                                                <IconButton edge='end' onClick={showMetadataPathPicker}>
+                                                    <SearchIcon />
+                                                </IconButton>
+                                            </InputAdornment>
+                                        )
+                                    }
                                 }}
                             />
 
@@ -232,25 +238,29 @@ export const Component = () => {
                             <TextField
                                 name='LibraryScanFanoutConcurrency'
                                 type='number'
-                                inputProps={{
-                                    min: 0,
-                                    step: 1
-                                }}
                                 label={globalize.translate('LibraryScanFanoutConcurrency')}
                                 helperText={globalize.translate('LibraryScanFanoutConcurrencyHelp')}
                                 defaultValue={config.LibraryScanFanoutConcurrency || ''}
+                                slotProps={{
+                                    htmlInput: {
+                                        min: 0,
+                                        step: 1
+                                    }
+                                }}
                             />
 
                             <TextField
                                 name='ParallelImageEncodingLimit'
                                 type='number'
-                                inputProps={{
-                                    min: 0,
-                                    step: 1
-                                }}
                                 label={globalize.translate('LabelParallelImageEncodingLimit')}
                                 helperText={globalize.translate('LabelParallelImageEncodingLimitHelp')}
                                 defaultValue={config.ParallelImageEncodingLimit || ''}
+                                slotProps={{
+                                    htmlInput: {
+                                        min: 0,
+                                        step: 1
+                                    }
+                                }}
                             />
 
                             <Button type='submit' size='large'>
diff --git a/src/apps/experimental/features/preferences/components/DisplayPreferences.tsx b/src/apps/experimental/features/preferences/components/DisplayPreferences.tsx
index e384f34ee6..6977459c6b 100644
--- a/src/apps/experimental/features/preferences/components/DisplayPreferences.tsx
+++ b/src/apps/experimental/features/preferences/components/DisplayPreferences.tsx
@@ -146,18 +146,20 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
                         <TextField
                             aria-describedby='display-settings-screensaver-interval-description'
                             value={values.screensaverInterval}
-                            inputProps={{
-                                inputMode: 'numeric',
-                                max: '3600',
-                                min: '1',
-                                pattern: '[0-9]',
-                                required: true,
-                                step: '1',
-                                type: 'number'
-                            }}
                             label={globalize.translate('LabelBackdropScreensaverInterval')}
                             name='screensaverInterval'
                             onChange={onChange}
+                            slotProps={{
+                                htmlInput: {
+                                    inputMode: 'numeric',
+                                    max: '3600',
+                                    min: '1',
+                                    pattern: '[0-9]',
+                                    required: true,
+                                    step: '1',
+                                    type: 'number'
+                                }
+                            }}
                         />
                         <FormHelperText id='display-settings-screensaver-interval-description'>
                             {globalize.translate('LabelBackdropScreensaverIntervalHelp')}
diff --git a/src/apps/experimental/features/preferences/components/LibraryPreferences.tsx b/src/apps/experimental/features/preferences/components/LibraryPreferences.tsx
index 4b65960070..487fcd4e58 100644
--- a/src/apps/experimental/features/preferences/components/LibraryPreferences.tsx
+++ b/src/apps/experimental/features/preferences/components/LibraryPreferences.tsx
@@ -24,19 +24,21 @@ export function LibraryPreferences({ onChange, values }: Readonly<LibraryPrefere
             <FormControl fullWidth>
                 <TextField
                     aria-describedby='display-settings-lib-pagesize-description'
-                    inputProps={{
-                        type: 'number',
-                        inputMode: 'numeric',
-                        max: '1000',
-                        min: '0',
-                        pattern: '[0-9]',
-                        required: true,
-                        step: '1'
-                    }}
                     value={values.libraryPageSize}
                     label={globalize.translate('LabelLibraryPageSize')}
                     name='libraryPageSize'
                     onChange={onChange}
+                    slotProps={{
+                        htmlInput: {
+                            type: 'number',
+                            inputMode: 'numeric',
+                            max: '1000',
+                            min: '0',
+                            pattern: '[0-9]',
+                            required: true,
+                            step: '1'
+                        }
+                    }}
                 />
                 <FormHelperText id='display-settings-lib-pagesize-description'>
                     {globalize.translate('LabelLibraryPageSizeHelp')}
diff --git a/src/apps/experimental/features/preferences/components/NextUpPreferences.tsx b/src/apps/experimental/features/preferences/components/NextUpPreferences.tsx
index 890f86d65d..69deba4bb9 100644
--- a/src/apps/experimental/features/preferences/components/NextUpPreferences.tsx
+++ b/src/apps/experimental/features/preferences/components/NextUpPreferences.tsx
@@ -25,18 +25,20 @@ export function NextUpPreferences({ onChange, values }: Readonly<NextUpPreferenc
                 <TextField
                     aria-describedby='display-settings-max-days-next-up-description'
                     value={values.maxDaysForNextUp}
-                    inputProps={{
-                        type: 'number',
-                        inputMode: 'numeric',
-                        max: '1000',
-                        min: '0',
-                        pattern: '[0-9]',
-                        required: true,
-                        step: '1'
-                    }}
                     label={globalize.translate('LabelMaxDaysForNextUp')}
                     name='maxDaysForNextUp'
                     onChange={onChange}
+                    slotProps={{
+                        htmlInput: {
+                            type: 'number',
+                            inputMode: 'numeric',
+                            max: '1000',
+                            min: '0',
+                            pattern: '[0-9]',
+                            required: true,
+                            step: '1'
+                        }
+                    }}
                 />
                 <FormHelperText id='display-settings-max-days-next-up-description'>
                     {globalize.translate('LabelMaxDaysForNextUpHelp')}