fix: convert advanced transcode options form to new form lib

Fixes: #1708

web/src/components/settings/ffmpeg/TranscodeConfigAdvancedOptions.tsx

@@ -1,62 +1,51 @@
-import {
-  FormControl,
-  FormControlLabel,
-  FormHelperText,
-  Stack,
-} from '@mui/material';
-import type { TranscodeConfig } from '@tunarr/types';
-import { useFormContext } from 'react-hook-form';
-import { CheckboxFormController } from '../../util/TypedController.tsx';
+import { Stack } from '@mui/material';
+import { useTypedAppFormContext } from '../../../hooks/form.ts';
+import type { BaseTranscodeConfigProps } from './BaseTranscodeConfigProps.ts';
+import { useBaseTranscodeConfigFormOptions } from './useTranscodeConfigFormOptions.ts';
+
+export const TranscodeConfigAdvancedOptions = ({
+  initialConfig,
+}: BaseTranscodeConfigProps) => {
+  const formOpts = useBaseTranscodeConfigFormOptions(initialConfig);
+  const form = useTypedAppFormContext({ ...formOpts });
 
-export const TranscodeConfigAdvancedOptions = () => {
-  const { control } = useFormContext<TranscodeConfig>();
   return (
     <Stack gap={2}>
-      <FormControl fullWidth>
-        <FormControlLabel
-          control={
-            <CheckboxFormController
-              control={control}
-              name="disableHardwareDecoder"
-            />
-          }
-          label={'Disable Hardware Decoding'}
-        />
-        <FormHelperText>
-          Will force use of a software decoder despite hardware acceleration
-          settings.
-        </FormHelperText>
-      </FormControl>
-      <FormControl fullWidth>
-        <FormControlLabel
-          control={
-            <CheckboxFormController
-              control={control}
-              name="disableHardwareEncoding"
-            />
-          }
-          label={'Disable Hardware Encoding'}
-        />
-        <FormHelperText>
-          Will force use of a software encoder despite hardware acceleration
-          settings.
-        </FormHelperText>
-      </FormControl>
-      <FormControl fullWidth>
-        <FormControlLabel
-          control={
-            <CheckboxFormController
-              control={control}
-              name="disableHardwareFilters"
-            />
-          }
-          label={'Disable Hardware Filters'}
-        />
-        <FormHelperText>
-          Will force use of a software filters (e.g. scale, pad, etc.) despite
-          hardware acceleration settings.
-        </FormHelperText>
-      </FormControl>
+      <form.AppField
+        name="disableHardwareDecoder"
+        children={(field) => (
+          <field.BasicCheckboxInput
+            label="Disable Hardware Decoding"
+            formControlProps={{ fullWidth: true }}
+            helperText="Will force use of a software decoder despite hardware acceleration
+          settings."
+          />
+        )}
+      />
+
+      <form.AppField
+        name="disableHardwareEncoding"
+        children={(field) => (
+          <field.BasicCheckboxInput
+            label="Disable Hardware Encoding"
+            formControlProps={{ fullWidth: true }}
+            helperText="Will force use of a software encoder despite hardware acceleration
+          settings."
+          />
+        )}
+      />
+
+      <form.AppField
+        name="disableHardwareFilters"
+        children={(field) => (
+          <field.BasicCheckboxInput
+            label="Disable Hardware Filters"
+            formControlProps={{ fullWidth: true }}
+            helperText="Will force use of a software filters (e.g. scale, pad, etc.) despite
+          hardware acceleration settings."
+          />
+        )}
+      />
     </Stack>
   );
 };

web/src/components/settings/ffmpeg/TranscodeConfigSettingsForm.tsx

@@ -1,5 +1,5 @@
 import { useAppForm } from '@/hooks/form.ts';
-import { Check } from '@mui/icons-material';
+import { Check, VisibilityOff } from '@mui/icons-material';
 import {
   Box,
   Button,
@@ -73,7 +73,12 @@ export const TranscodeConfigSettingsForm = ({
               onChange={() => setShowAdvancedSettings(!showAdvancedSettings)}
               sx={{ ml: 'auto' }}
             >
-              <Check sx={{ mr: 0.5 }} /> Show Advanced
+              {showAdvancedSettings ? (
+                <VisibilityOff sx={{ mr: 0.5 }} />
+              ) : (
+                <Check sx={{ mr: 0.5 }} />
+              )}{' '}
+              {showAdvancedSettings ? 'Hide' : 'Show'} Advanced
             </ToggleButton>
           </Stack>
           <Box>
@@ -201,8 +206,8 @@ export const TranscodeConfigSettingsForm = ({
             </Grid>
           </Box>
 
-          <Box>
-            <Typography component="h5" variant="h5" sx={{ mb: 2 }}>
+          <Stack spacing={2}>
+            <Typography component="h5" variant="h5">
               Video Options
             </Typography>
             <TranscodeConfigVideoSettingsForm initialConfig={initialConfig} />
@@ -222,12 +227,14 @@ export const TranscodeConfigSettingsForm = ({
                       dizqueTV transcode pipeline as well as to provide
                       mechanisms to aid in debugging streaming issues.
                     </Typography>
-                    <TranscodeConfigAdvancedOptions />
+                    <TranscodeConfigAdvancedOptions
+                      initialConfig={initialConfig}
+                    />
                   </Box>
                 )
               }
             />
-          </Box>
+          </Stack>
           <Box>
             <Typography component="h5" variant="h5" sx={{ mb: 2 }}>
               Audio Options