Migrate DVR page to React
This commit is contained in:
viown
@@ -29,7 +29,7 @@ const LiveTvDrawerSection = () => {
|
||||
</ListItemLink>
|
||||
</ListItem>
|
||||
<ListItem disablePadding>
|
||||
<ListItemLink to='/dashboard/recordings'>
|
||||
<ListItemLink to='/dashboard/livetv/recordings'>
|
||||
<ListItemIcon>
|
||||
<Dvr />
|
||||
</ListItemIcon>
|
||||
|
||||
@@ -1,120 +0,0 @@
|
||||
<div id="liveTvSettingsPage" data-role="page" class="page type-interior liveTvPage" data-title="${HeaderDVR}">
|
||||
<div>
|
||||
<div class="content-primary">
|
||||
<div class="verticalSection">
|
||||
<div class="sectionTitleContainer flex align-items-center">
|
||||
<h2 class="sectionTitle">${HeaderDVR}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="liveTvSettingsForm">
|
||||
<div class="selectContainer">
|
||||
<select is="emby-select" id="selectGuideDays" label="${LabelNumberOfGuideDays}">
|
||||
<option value="">${Auto}</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
<option value="11">11</option>
|
||||
<option value="12">12</option>
|
||||
<option value="13">13</option>
|
||||
<option value="14">14</option>
|
||||
</select>
|
||||
<div class="fieldDescription">${LabelNumberOfGuideDaysHelp}</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div style="flex-grow:1;">
|
||||
<input is="emby-input" id="txtRecordingPath" label="${LabelRecordingPath}" autocomplete="off" />
|
||||
</div>
|
||||
<button type="button" is="paper-icon-button-light" id="btnSelectRecordingPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
<div class="fieldDescription">${LabelRecordingPathHelp}</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div style="flex-grow:1;">
|
||||
<input is="emby-input" id="txtMovieRecordingPath" label="${LabelMovieRecordingPath}" autocomplete="off" />
|
||||
</div>
|
||||
<button type="button" is="paper-icon-button-light" id="btnSelectMovieRecordingPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div style="flex-grow:1;">
|
||||
<input is="emby-input" id="txtSeriesRecordingPath" label="${LabelSeriesRecordingPath}" autocomplete="off" />
|
||||
</div>
|
||||
<button type="button" is="paper-icon-button-light" id="btnSelectSeriesRecordingPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="verticalSection">
|
||||
<h2 class="sectionTitle">${HeaderDefaultRecordingSettings}</h2>
|
||||
<div class="inputContainer">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div style="flex-grow: 1;">
|
||||
<input is="emby-input" type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelStartWhenPossible}" />
|
||||
</div>
|
||||
<div class="fieldDescription" style="margin-left:.5em;font-size:90%;margin-top:1.3em;">
|
||||
${MinutesBefore}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div style="flex-grow: 1;">
|
||||
<input is="emby-input" type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelStopWhenPossible}" />
|
||||
</div>
|
||||
<div class="fieldDescription" style="margin-left:.5em;font-size:90%;margin-top:1.3em;">
|
||||
${MinutesAfter}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="verticalSection">
|
||||
<h2 class="sectionTitle">${HeaderRecordingPostProcessing}</h2>
|
||||
<div class="inputContainer">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div style="flex-grow:1;">
|
||||
<input is="emby-input" type="text" id="txtPostProcessor" label="${LabelPostProcessor}" />
|
||||
</div>
|
||||
<button type="button" is="paper-icon-button-light" id="btnSelectPostProcessorPath" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" type="text" id="txtPostProcessorArguments" label="${LabelPostProcessorArguments}" />
|
||||
<div class="fieldDescription">${LabelPostProcessorArgumentsHelp}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="verticalSection">
|
||||
<h2 class="sectionTitle">${HeaderRecordingMetadataSaving}</h2>
|
||||
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="chkSaveRecordingNFO" />
|
||||
<span>${SaveRecordingNFO}</span>
|
||||
</label>
|
||||
<div class="fieldDescription checkboxFieldDescription">${SaveRecordingNFOHelp}</div>
|
||||
</div>
|
||||
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="chkSaveRecordingImages" />
|
||||
<span>${SaveRecordingImages}</span>
|
||||
</label>
|
||||
<div class="fieldDescription checkboxFieldDescription">${SaveRecordingImagesHelp}</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,133 +0,0 @@
|
||||
import 'jquery';
|
||||
|
||||
import loading from 'components/loading/loading';
|
||||
import globalize from 'lib/globalize';
|
||||
import 'elements/emby-button/emby-button';
|
||||
import Dashboard from 'utils/dashboard';
|
||||
import alert from 'components/alert';
|
||||
|
||||
function loadPage(page, config) {
|
||||
page.querySelector('.liveTvSettingsForm').classList.remove('hide');
|
||||
page.querySelector('.noLiveTvServices')?.classList.add('hide');
|
||||
page.querySelector('#selectGuideDays').value = config.GuideDays || '';
|
||||
page.querySelector('#txtPrePaddingMinutes').value = config.PrePaddingSeconds / 60;
|
||||
page.querySelector('#txtPostPaddingMinutes').value = config.PostPaddingSeconds / 60;
|
||||
page.querySelector('#txtRecordingPath').value = config.RecordingPath || '';
|
||||
page.querySelector('#txtMovieRecordingPath').value = config.MovieRecordingPath || '';
|
||||
page.querySelector('#txtSeriesRecordingPath').value = config.SeriesRecordingPath || '';
|
||||
page.querySelector('#txtPostProcessor').value = config.RecordingPostProcessor || '';
|
||||
page.querySelector('#txtPostProcessorArguments').value = config.RecordingPostProcessorArguments || '';
|
||||
page.querySelector('#chkSaveRecordingNFO').checked = config.SaveRecordingNFO;
|
||||
page.querySelector('#chkSaveRecordingImages').checked = config.SaveRecordingImages;
|
||||
loading.hide();
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
loading.show();
|
||||
const form = this;
|
||||
ApiClient.getNamedConfiguration('livetv').then(function (config) {
|
||||
config.GuideDays = form.querySelector('#selectGuideDays').value || null;
|
||||
const recordingPath = form.querySelector('#txtRecordingPath').value || null;
|
||||
const movieRecordingPath = form.querySelector('#txtMovieRecordingPath').value || null;
|
||||
const seriesRecordingPath = form.querySelector('#txtSeriesRecordingPath').value || null;
|
||||
const recordingPathChanged = recordingPath != config.RecordingPath || movieRecordingPath != config.MovieRecordingPath || seriesRecordingPath != config.SeriesRecordingPath;
|
||||
config.RecordingPath = recordingPath;
|
||||
config.MovieRecordingPath = movieRecordingPath;
|
||||
config.SeriesRecordingPath = seriesRecordingPath;
|
||||
config.RecordingEncodingFormat = 'mkv';
|
||||
config.PrePaddingSeconds = 60 * form.querySelector('#txtPrePaddingMinutes').value;
|
||||
config.PostPaddingSeconds = 60 * form.querySelector('#txtPostPaddingMinutes').value;
|
||||
config.RecordingPostProcessor = form.querySelector('#txtPostProcessor').value;
|
||||
config.RecordingPostProcessorArguments = form.querySelector('#txtPostProcessorArguments').value;
|
||||
config.SaveRecordingNFO = form.querySelector('#chkSaveRecordingNFO').checked;
|
||||
config.SaveRecordingImages = form.querySelector('#chkSaveRecordingImages').checked;
|
||||
ApiClient.updateNamedConfiguration('livetv', config).then(function () {
|
||||
Dashboard.processServerConfigurationUpdateResult();
|
||||
showSaveMessage(recordingPathChanged);
|
||||
});
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
function showSaveMessage(recordingPathChanged) {
|
||||
let msg = '';
|
||||
|
||||
if (recordingPathChanged) {
|
||||
msg += globalize.translate('MessageChangeRecordingPath');
|
||||
}
|
||||
|
||||
if (msg) {
|
||||
alert(msg);
|
||||
}
|
||||
}
|
||||
|
||||
$(document).on('pageinit', '#liveTvSettingsPage', function () {
|
||||
const page = this;
|
||||
$('.liveTvSettingsForm').off('submit', onSubmit).on('submit', onSubmit);
|
||||
$('#btnSelectRecordingPath', page).on('click.selectDirectory', function () {
|
||||
import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
|
||||
const picker = new DirectoryBrowser();
|
||||
picker.show({
|
||||
callback: function (path) {
|
||||
if (path) {
|
||||
page.querySelector('#txtRecordingPath').value = path;
|
||||
}
|
||||
|
||||
picker.close();
|
||||
},
|
||||
validateWriteable: true
|
||||
});
|
||||
});
|
||||
});
|
||||
$('#btnSelectMovieRecordingPath', page).on('click.selectDirectory', function () {
|
||||
import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
|
||||
const picker = new DirectoryBrowser();
|
||||
picker.show({
|
||||
callback: function (path) {
|
||||
if (path) {
|
||||
page.querySelector('#txtMovieRecordingPath').value = path;
|
||||
}
|
||||
|
||||
picker.close();
|
||||
},
|
||||
validateWriteable: true
|
||||
});
|
||||
});
|
||||
});
|
||||
$('#btnSelectSeriesRecordingPath', page).on('click.selectDirectory', function () {
|
||||
import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
|
||||
const picker = new DirectoryBrowser();
|
||||
picker.show({
|
||||
callback: function (path) {
|
||||
if (path) {
|
||||
page.querySelector('#txtSeriesRecordingPath').value = path;
|
||||
}
|
||||
|
||||
picker.close();
|
||||
},
|
||||
validateWriteable: true
|
||||
});
|
||||
});
|
||||
});
|
||||
$('#btnSelectPostProcessorPath', page).on('click.selectDirectory', function () {
|
||||
import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
|
||||
const picker = new DirectoryBrowser();
|
||||
picker.show({
|
||||
includeFiles: true,
|
||||
callback: function (path) {
|
||||
if (path) {
|
||||
page.querySelector('#txtPostProcessor').value = path;
|
||||
}
|
||||
|
||||
picker.close();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}).on('pageshow', '#liveTvSettingsPage', function () {
|
||||
loading.show();
|
||||
const page = this;
|
||||
ApiClient.getNamedConfiguration('livetv').then(function (config) {
|
||||
loadPage(page, config);
|
||||
});
|
||||
});
|
||||
@@ -11,6 +11,7 @@ export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
|
||||
{ path: 'libraries/display', type: AppType.Dashboard },
|
||||
{ path: 'libraries/metadata', type: AppType.Dashboard },
|
||||
{ path: 'libraries/nfo', type: AppType.Dashboard },
|
||||
{ path: 'livetv/recordings', type: AppType.Dashboard },
|
||||
{ path: 'logs', type: AppType.Dashboard },
|
||||
{ path: 'logs/:file', page: 'logs/file', type: AppType.Dashboard },
|
||||
{ path: 'playback/resume', type: AppType.Dashboard },
|
||||
|
||||
@@ -44,13 +44,6 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
|
||||
controller: 'livetvguideprovider',
|
||||
view: 'livetvguideprovider.html'
|
||||
}
|
||||
}, {
|
||||
path: 'recordings',
|
||||
pageProps: {
|
||||
appType: AppType.Dashboard,
|
||||
controller: 'livetvsettings',
|
||||
view: 'livetvsettings.html'
|
||||
}
|
||||
}, {
|
||||
path: 'livetv',
|
||||
pageProps: {
|
||||
|
||||
414
src/apps/dashboard/routes/livetv/recordings.tsx
Normal file
414
src/apps/dashboard/routes/livetv/recordings.tsx
Normal file
@@ -0,0 +1,414 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Page from 'components/Page';
|
||||
import { QUERY_KEY, useNamedConfiguration } from 'hooks/useNamedConfiguration';
|
||||
import globalize from 'lib/globalize';
|
||||
import { ActionFunctionArgs, Form, useActionData, useNavigation, useSubmit } from 'react-router-dom';
|
||||
import type { LiveTvOptions } from '@jellyfin/sdk/lib/generated-client/models/live-tv-options';
|
||||
import Loading from 'components/loading/LoadingComponent';
|
||||
import Alert from '@mui/material/Alert';
|
||||
import InputAdornment from '@mui/material/InputAdornment';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import DirectoryBrowser from 'components/directorybrowser/directorybrowser';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import FormHelperText from '@mui/material/FormHelperText';
|
||||
import Button from '@mui/material/Button';
|
||||
import { ServerConnections } from 'lib/jellyfin-apiclient';
|
||||
import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
|
||||
import { queryClient } from 'utils/query/queryClient';
|
||||
import { ActionData } from 'types/actionData';
|
||||
|
||||
const CONFIG_KEY = 'livetv';
|
||||
|
||||
export const action = async ({ request }: ActionFunctionArgs) => {
|
||||
const api = ServerConnections.getCurrentApi();
|
||||
if (!api) throw new Error('No Api instance available');
|
||||
|
||||
const data = await request.json() as LiveTvOptions;
|
||||
|
||||
await getConfigurationApi(api)
|
||||
.updateNamedConfiguration({ key: CONFIG_KEY, body: data });
|
||||
|
||||
void queryClient.invalidateQueries({
|
||||
queryKey: [ QUERY_KEY, CONFIG_KEY ]
|
||||
});
|
||||
|
||||
return {
|
||||
isSaved: true
|
||||
};
|
||||
};
|
||||
|
||||
export const Component = () => {
|
||||
const navigation = useNavigation();
|
||||
const actionData = useActionData() as ActionData | undefined;
|
||||
const { data: initialConfig, isPending, isError } = useNamedConfiguration<LiveTvOptions>(CONFIG_KEY);
|
||||
const [ config, setConfig ] = useState<LiveTvOptions | null>(null);
|
||||
const [ prePaddingMinutes, setPrePaddingMinutes ] = useState('');
|
||||
const [ postPaddingMinutes, setPostPaddingMinutes ] = useState('');
|
||||
const isSubmitting = navigation.state === 'submitting';
|
||||
const submit = useSubmit();
|
||||
|
||||
useEffect(() => {
|
||||
if (initialConfig && config == null) {
|
||||
setConfig(initialConfig);
|
||||
if (initialConfig.PrePaddingSeconds) {
|
||||
setPrePaddingMinutes((initialConfig.PrePaddingSeconds / 60).toString());
|
||||
}
|
||||
if (initialConfig.PostPaddingSeconds) {
|
||||
setPostPaddingMinutes((initialConfig.PostPaddingSeconds / 60).toString());
|
||||
}
|
||||
}
|
||||
}, [ initialConfig, config ]);
|
||||
|
||||
const onPrePaddingMinutesChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setPrePaddingMinutes(e.target.value);
|
||||
setConfig({
|
||||
...config,
|
||||
PrePaddingSeconds: parseInt(e.target.value, 10) * 60
|
||||
});
|
||||
}, [ config ]);
|
||||
|
||||
const onPostPaddingMinutesChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setPostPaddingMinutes(e.target.value);
|
||||
setConfig({
|
||||
...config,
|
||||
PostPaddingSeconds: parseInt(e.target.value, 10) * 60
|
||||
});
|
||||
}, [ config ]);
|
||||
|
||||
const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setConfig({
|
||||
...config,
|
||||
[e.target.name]: e.target.value
|
||||
});
|
||||
}, [ config ]);
|
||||
|
||||
const onCheckboxChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setConfig({
|
||||
...config,
|
||||
[e.target.name]: e.target.checked
|
||||
});
|
||||
}, [ config ]);
|
||||
|
||||
const showRecordingPathPicker = useCallback(() => {
|
||||
const picker = new DirectoryBrowser();
|
||||
|
||||
picker.show({
|
||||
callback: (path: string) => {
|
||||
if (path) {
|
||||
setConfig({
|
||||
...config,
|
||||
RecordingPath: path
|
||||
});
|
||||
}
|
||||
|
||||
picker.close();
|
||||
},
|
||||
validateWriteable: true
|
||||
});
|
||||
}, [ config ]);
|
||||
|
||||
const showMovieRecordingPathPicker = useCallback(() => {
|
||||
const picker = new DirectoryBrowser();
|
||||
|
||||
picker.show({
|
||||
callback: (path: string) => {
|
||||
if (path) {
|
||||
setConfig({
|
||||
...config,
|
||||
MovieRecordingPath: path
|
||||
});
|
||||
}
|
||||
|
||||
picker.close();
|
||||
},
|
||||
validateWriteable: true
|
||||
});
|
||||
}, [ config ]);
|
||||
|
||||
const showSeriesRecordingPathPicker = useCallback(() => {
|
||||
const picker = new DirectoryBrowser();
|
||||
|
||||
picker.show({
|
||||
callback: (path: string) => {
|
||||
if (path) {
|
||||
setConfig({
|
||||
...config,
|
||||
SeriesRecordingPath: path
|
||||
});
|
||||
}
|
||||
|
||||
picker.close();
|
||||
},
|
||||
validateWriteable: true
|
||||
});
|
||||
}, [ config ]);
|
||||
|
||||
const showPostProcessorPicker = useCallback(() => {
|
||||
const picker = new DirectoryBrowser();
|
||||
|
||||
picker.show({
|
||||
callback: (path: string) => {
|
||||
if (path) {
|
||||
setConfig({
|
||||
...config,
|
||||
RecordingPostProcessor: path
|
||||
});
|
||||
}
|
||||
|
||||
picker.close();
|
||||
},
|
||||
validateWriteable: true
|
||||
});
|
||||
}, [ config ]);
|
||||
|
||||
const onSubmit = useCallback((e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
if (config) {
|
||||
submit(
|
||||
JSON.stringify(config),
|
||||
{ method: 'post', encType: 'application/json' }
|
||||
);
|
||||
}
|
||||
}, [ config, submit ]);
|
||||
|
||||
if (isPending || !config) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Page
|
||||
id='liveTvSettingsPage'
|
||||
title={globalize.translate('HeaderDVR')}
|
||||
className='mainAnimatedPage type-interior'
|
||||
>
|
||||
<Box className='content-primary'>
|
||||
{isError ? (
|
||||
<Alert severity='error'>{globalize.translate('LiveTVPageLoadError')}</Alert>
|
||||
) : (
|
||||
<Form method='POST' onSubmit={onSubmit}>
|
||||
<Stack spacing={3}>
|
||||
<Typography variant='h1'>{globalize.translate('HeaderDVR')}</Typography>
|
||||
|
||||
{(!isSubmitting && actionData?.isSaved) && (
|
||||
<Alert severity='success'>
|
||||
{globalize.translate('SettingsSaved')}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<TextField
|
||||
select
|
||||
name='GuideDays'
|
||||
label={globalize.translate('LabelNumberOfGuideDays')}
|
||||
helperText={globalize.translate('LabelNumberOfGuideDaysHelp')}
|
||||
value={config.GuideDays || ''}
|
||||
onChange={onChange}
|
||||
slotProps={{
|
||||
select: {
|
||||
displayEmpty: true
|
||||
},
|
||||
|
||||
inputLabel: {
|
||||
shrink: true
|
||||
}
|
||||
}}
|
||||
>
|
||||
<MenuItem value=''>{globalize.translate('Auto')}</MenuItem>
|
||||
<MenuItem value='1'>1</MenuItem>
|
||||
<MenuItem value='2'>2</MenuItem>
|
||||
<MenuItem value='3'>3</MenuItem>
|
||||
<MenuItem value='4'>4</MenuItem>
|
||||
<MenuItem value='5'>5</MenuItem>
|
||||
<MenuItem value='6'>6</MenuItem>
|
||||
<MenuItem value='7'>7</MenuItem>
|
||||
<MenuItem value='8'>8</MenuItem>
|
||||
<MenuItem value='9'>9</MenuItem>
|
||||
<MenuItem value='10'>10</MenuItem>
|
||||
<MenuItem value='11'>11</MenuItem>
|
||||
<MenuItem value='12'>12</MenuItem>
|
||||
<MenuItem value='13'>13</MenuItem>
|
||||
<MenuItem value='14'>14</MenuItem>
|
||||
</TextField>
|
||||
|
||||
<TextField
|
||||
name='RecordingPath'
|
||||
label={globalize.translate('LabelRecordingPath')}
|
||||
helperText={globalize.translate('LabelRecordingPathHelp')}
|
||||
value={config.RecordingPath}
|
||||
onChange={onChange}
|
||||
slotProps={{
|
||||
input: {
|
||||
endAdornment: (
|
||||
<InputAdornment position='end'>
|
||||
<IconButton edge='end' onClick={showRecordingPathPicker}>
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
},
|
||||
|
||||
inputLabel: {
|
||||
shrink: !!config.RecordingPath
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
name='MovieRecordingPath'
|
||||
label={globalize.translate('LabelMovieRecordingPath')}
|
||||
value={config.MovieRecordingPath}
|
||||
onChange={onChange}
|
||||
slotProps={{
|
||||
input: {
|
||||
endAdornment: (
|
||||
<InputAdornment position='end'>
|
||||
<IconButton edge='end' onClick={showMovieRecordingPathPicker}>
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
},
|
||||
|
||||
inputLabel: {
|
||||
shrink: !!config.MovieRecordingPath
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
name='SeriesRecordingPath'
|
||||
label={globalize.translate('LabelSeriesRecordingPath')}
|
||||
value={config.SeriesRecordingPath}
|
||||
onChange={onChange}
|
||||
slotProps={{
|
||||
input: {
|
||||
endAdornment: (
|
||||
<InputAdornment position='end'>
|
||||
<IconButton edge='end' onClick={showSeriesRecordingPathPicker}>
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
},
|
||||
|
||||
inputLabel: {
|
||||
shrink: !!config.SeriesRecordingPath
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<Typography variant='h2'>{globalize.translate('HeaderDefaultRecordingSettings')}</Typography>
|
||||
|
||||
<TextField
|
||||
name='PrePaddingMinutes'
|
||||
label={globalize.translate('LabelStartWhenPossible')}
|
||||
value={prePaddingMinutes}
|
||||
onChange={onPrePaddingMinutesChange}
|
||||
slotProps={{
|
||||
input: {
|
||||
endAdornment: (
|
||||
<InputAdornment position='end'>
|
||||
<Typography variant='body1' color='text.secondary'>{globalize.translate('MinutesBefore')}</Typography>
|
||||
</InputAdornment>
|
||||
)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
name='PostPaddingMinutes'
|
||||
label={globalize.translate('LabelStopWhenPossible')}
|
||||
value={postPaddingMinutes}
|
||||
onChange={onPostPaddingMinutesChange}
|
||||
slotProps={{
|
||||
input: {
|
||||
endAdornment: (
|
||||
<InputAdornment position='end'>
|
||||
<Typography variant='body1' color='text.secondary'>{globalize.translate('MinutesAfter')}</Typography>
|
||||
</InputAdornment>
|
||||
)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<Typography variant='h2'>{globalize.translate('HeaderRecordingPostProcessing')}</Typography>
|
||||
|
||||
<TextField
|
||||
name='RecordingPostProcessor'
|
||||
label={globalize.translate('LabelPostProcessor')}
|
||||
value={config.RecordingPostProcessor}
|
||||
onChange={onChange}
|
||||
slotProps={{
|
||||
input: {
|
||||
endAdornment: (
|
||||
<InputAdornment position='end'>
|
||||
<IconButton edge='end' onClick={showPostProcessorPicker}>
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
},
|
||||
|
||||
inputLabel: {
|
||||
shrink: !!config.RecordingPostProcessor
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
name='RecordingPostProcessorArguments'
|
||||
label={globalize.translate('LabelPostProcessorArguments')}
|
||||
helperText={globalize.translate('LabelPostProcessorArgumentsHelp')}
|
||||
value={config.RecordingPostProcessorArguments}
|
||||
onChange={onChange}
|
||||
/>
|
||||
|
||||
<Typography variant='h2'>{globalize.translate('HeaderRecordingMetadataSaving')}</Typography>
|
||||
|
||||
<FormControl>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
name='SaveRecordingNFO'
|
||||
checked={config.SaveRecordingNFO}
|
||||
onChange={onCheckboxChange}
|
||||
/>
|
||||
}
|
||||
label={globalize.translate('SaveRecordingNFO')}
|
||||
/>
|
||||
<FormHelperText>{globalize.translate('SaveRecordingNFOHelp')}</FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
<FormControl>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
name='SaveRecordingImages'
|
||||
checked={config.SaveRecordingImages}
|
||||
onChange={onCheckboxChange}
|
||||
/>
|
||||
}
|
||||
label={globalize.translate('SaveRecordingImages')}
|
||||
/>
|
||||
<FormHelperText>{globalize.translate('SaveRecordingImagesHelp')}</FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
<Button type='submit' size='large'>
|
||||
{globalize.translate('Save')}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Form>
|
||||
)}
|
||||
</Box>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
Component.displayName = 'LiveTvRecordingsPage';
|
||||
@@ -1052,6 +1052,7 @@
|
||||
"Live": "Live",
|
||||
"LiveBroadcasts": "Live broadcasts",
|
||||
"LiveTV": "Live TV",
|
||||
"LiveTVPageLoadError": "Failed to load recordings page",
|
||||
"Localization": "Localization",
|
||||
"LogLevel.Trace": "Trace",
|
||||
"LogLevel.Debug": "Debug",
|
||||
|
||||
Reference in New Issue
Block a user