Migrate resume+streaming to React

2025-03-30 19:56:21 +00:00 · 2025-02-06 05:22:40 +03:00 · 2025-02-06 05:22:40 +03:00 · 4fb82c91a9
commit 4fb82c91a9
parent ceb4f8c786
10 changed files with 255 additions and 170 deletions
--- a/src/apps/dashboard/routes/playback/resume.tsx
+++ b/src/apps/dashboard/routes/playback/resume.tsx
@ -0,0 +1,151 @@
+import React from 'react';
+import Page from 'components/Page';
+import globalize from 'lib/globalize';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { type ActionFunctionArgs, Form, useActionData, useNavigation } from 'react-router-dom';
+import { ActionData } from 'types/actionData';
+import { useConfiguration } from 'hooks/useConfiguration';
+import Loading from 'components/loading/LoadingComponent';
+import ServerConnections from 'components/ServerConnections';
+import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+    const api = ServerConnections.getCurrentApi();
+    if (!api) throw new Error('No Api instance available');
+
+    const { data: config } = await getConfigurationApi(api).getConfiguration();
+    const formData = await request.formData();
+
+    const minResumePercentage = formData.get('MinResumePercentage')?.toString();
+    const maxResumePercentage = formData.get('MaxResumePercentage')?.toString();
+    const minAudiobookResume = formData.get('MinAudiobookResume')?.toString();
+    const maxAudiobookResume = formData.get('MaxAudiobookResume')?.toString();
+    const minResumeDuration = formData.get('MinResumeDuration')?.toString();
+
+    if (minResumePercentage) config.MinResumePct = parseInt(minResumePercentage, 10);
+    if (maxResumePercentage) config.MaxResumePct = parseInt(maxResumePercentage, 10);
+    if (minAudiobookResume) config.MinAudiobookResume = parseInt(minAudiobookResume, 10);
+    if (maxAudiobookResume) config.MaxAudiobookResume = parseInt(maxAudiobookResume, 10);
+    if (minResumeDuration) config.MinResumeDurationSeconds = parseInt(minResumeDuration, 10);
+
+    await getConfigurationApi(api)
+        .updateConfiguration({ serverConfiguration: config });
+
+    return {
+        isSaved: true
+    };
+};
+
+const Resume = () => {
+    const navigation = useNavigation();
+    const actionData = useActionData() as ActionData | undefined;
+    const isSubmitting = navigation.state === 'submitting';
+
+    const { isPending: isConfigurationPending, data: config } = useConfiguration();
+
+    if (isConfigurationPending) {
+        return <Loading />;
+    }
+
+    return (
+        <Page
+            id='playbackConfigurationPage'
+            title={globalize.translate('ButtonResume')}
+            className='mainAnimatedPage type-interior'
+        >
+            <Box className='content-primary'>
+                <Form method='POST'>
+                    <Stack spacing={3}>
+                        <Typography variant='h2'>
+                            {globalize.translate('ButtonResume')}
+                        </Typography>
+
+                        {!isSubmitting && actionData?.isSaved && (
+                            <Alert severity='success'>
+                                {globalize.translate('SettingsSaved')}
+                            </Alert>
+                        )}
+
+                        <TextField
+                            label={globalize.translate('LabelMinResumePercentage')}
+                            name='MinResumePercentage'
+                            type='number'
+                            defaultValue={config?.MinResumePct}
+                            inputProps={{
+                                min: 0,
+                                max: 100,
+                                required: true
+                            }}
+                            helperText={globalize.translate('LabelMinResumePercentageHelp')}
+                        />
+
+                        <TextField
+                            label={globalize.translate('LabelMaxResumePercentage')}
+                            name='MaxResumePercentage'
+                            type='number'
+                            defaultValue={config?.MaxResumePct}
+                            inputProps={{
+                                min: 1,
+                                max: 100,
+                                required: true
+                            }}
+                            helperText={globalize.translate('LabelMaxResumePercentageHelp')}
+                        />
+
+                        <TextField
+                            label={globalize.translate('LabelMinAudiobookResume')}
+                            name='MinAudiobookResume'
+                            type='number'
+                            defaultValue={config?.MinAudiobookResume}
+                            inputProps={{
+                                min: 0,
+                                max: 100,
+                                required: true
+                            }}
+                            helperText={globalize.translate('LabelMinAudiobookResumeHelp')}
+                        />
+
+                        <TextField
+                            label={globalize.translate('LabelMaxAudiobookResume')}
+                            name='MaxAudiobookResume'
+                            type='number'
+                            defaultValue={config?.MaxAudiobookResume}
+                            inputProps={{
+                                min: 1,
+                                max: 100,
+                                required: true
+                            }}
+                            helperText={globalize.translate('LabelMaxAudiobookResumeHelp')}
+                        />
+
+                        <TextField
+                            label={globalize.translate('LabelMinResumeDuration')}
+                            name='MinResumeDuration'
+                            type='number'
+                            defaultValue={config?.MinResumeDurationSeconds}
+                            inputProps={{
+                                min: 0,
+                                required: true
+                            }}
+                            helperText={globalize.translate('LabelMinResumeDurationHelp')}
+                        />
+
+                        <Button
+                            type='submit'
+                            size='large'
+                        >
+                            {globalize.translate('Save')}
+                        </Button>
+                    </Stack>
+                </Form>
+            </Box>
+        </Page>
+    );
+};
+
+export default Resume;