Migrate DVR page to React
This commit is contained in:
viown
@@ -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);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user