mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
move recording editor to popup
This commit is contained in:
parent
25f06c166b
commit
4d7b51f730
19 changed files with 322 additions and 248 deletions
163
dashboard-ui/components/recordingeditor/recordingeditor.js
Normal file
163
dashboard-ui/components/recordingeditor/recordingeditor.js
Normal file
|
@ -0,0 +1,163 @@
|
|||
define(['dialogHelper', 'loading', 'jQuery', 'paper-checkbox', 'paper-input', 'emby-collapsible', 'paper-button', 'paper-icon-button-light'], function (dialogHelper, loading, $) {
|
||||
|
||||
var currentDialog;
|
||||
var recordingUpdated = false;
|
||||
var currentItemId;
|
||||
|
||||
function renderTimer(context, item) {
|
||||
|
||||
var programInfo = item.ProgramInfo || {};
|
||||
|
||||
$('.itemName', context).html(item.Name);
|
||||
|
||||
$('.itemEpisodeName', context).html(programInfo.EpisodeTitle || '');
|
||||
|
||||
$('.itemCommunityRating', context).html(LibraryBrowser.getRatingHtml(programInfo));
|
||||
|
||||
LibraryBrowser.renderGenres($('.itemGenres', context), programInfo);
|
||||
LibraryBrowser.renderOverview(context.querySelectorAll('.itemOverview'), programInfo);
|
||||
|
||||
if (programInfo.ImageTags && programInfo.ImageTags.Primary) {
|
||||
|
||||
var imgUrl = ApiClient.getScaledImageUrl(programInfo.Id, {
|
||||
maxWidth: 200,
|
||||
maxHeight: 200,
|
||||
tag: programInfo.ImageTags.Primary,
|
||||
type: "Primary"
|
||||
});
|
||||
|
||||
$('.timerPageImageContainer', context).css("display", "inline-block")
|
||||
.html('<img src="' + imgUrl + '" style="max-width:200px;max-height:200px;" />');
|
||||
|
||||
} else {
|
||||
$('.timerPageImageContainer', context).hide();
|
||||
}
|
||||
|
||||
$('.itemMiscInfo', context).html(LibraryBrowser.getMiscInfoHtml(programInfo));
|
||||
|
||||
$('#txtPrePaddingMinutes', context).val(item.PrePaddingSeconds / 60);
|
||||
$('#txtPostPaddingMinutes', context).val(item.PostPaddingSeconds / 60);
|
||||
|
||||
if (item.Status == 'New') {
|
||||
$('.timerStatus', context).hide();
|
||||
} else {
|
||||
$('.timerStatus', context).show().html('Status: ' + item.Status);
|
||||
}
|
||||
|
||||
loading.hide();
|
||||
}
|
||||
|
||||
function closeDialog(isSubmitted) {
|
||||
|
||||
recordingUpdated = isSubmitted;
|
||||
dialogHelper.close(currentDialog);
|
||||
}
|
||||
|
||||
function onSubmit(e) {
|
||||
|
||||
loading.show();
|
||||
|
||||
var form = this;
|
||||
|
||||
ApiClient.getLiveTvTimer(currentItemId).then(function (item) {
|
||||
|
||||
item.PrePaddingSeconds = $('#txtPrePaddingMinutes', form).val() * 60;
|
||||
item.PostPaddingSeconds = $('#txtPostPaddingMinutes', form).val() * 60;
|
||||
ApiClient.updateLiveTvTimer(item).then(function () {
|
||||
loading.hide();
|
||||
require(['toast'], function (toast) {
|
||||
toast(Globalize.translate('MessageRecordingSaved'));
|
||||
closeDialog(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// Disable default form submission
|
||||
return false;
|
||||
}
|
||||
|
||||
function init(context) {
|
||||
|
||||
context.querySelector('.btnCancel').addEventListener('click', function () {
|
||||
|
||||
closeDialog(false);
|
||||
});
|
||||
|
||||
context.querySelector('form').addEventListener('submit', onSubmit);
|
||||
|
||||
context.querySelector('.btnHeaderSave').addEventListener('click', function (e) {
|
||||
|
||||
context.querySelector('.btnSave').click();
|
||||
});
|
||||
}
|
||||
|
||||
function reload(context, id) {
|
||||
|
||||
loading.show();
|
||||
currentItemId = id;
|
||||
|
||||
ApiClient.getLiveTvTimer(id).then(function (result) {
|
||||
|
||||
renderTimer(context, result);
|
||||
loading.hide();
|
||||
});
|
||||
}
|
||||
|
||||
function showEditor(itemId) {
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
||||
recordingUpdated = false;
|
||||
loading.show();
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'components/recordingeditor/recordingeditor.template.html', true);
|
||||
|
||||
xhr.onload = function (e) {
|
||||
|
||||
var template = this.response;
|
||||
var dlg = dialogHelper.createDialog({
|
||||
removeOnClose: true,
|
||||
size: 'small'
|
||||
});
|
||||
|
||||
dlg.classList.add('ui-body-b');
|
||||
dlg.classList.add('background-theme-b');
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
|
||||
var html = '';
|
||||
|
||||
html += Globalize.translateDocument(template);
|
||||
|
||||
dlg.innerHTML = html;
|
||||
document.body.appendChild(dlg);
|
||||
|
||||
dialogHelper.open(dlg);
|
||||
|
||||
currentDialog = dlg;
|
||||
|
||||
dlg.addEventListener('close', function () {
|
||||
|
||||
if (recordingUpdated) {
|
||||
resolve();
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
|
||||
init(dlg);
|
||||
|
||||
reload(dlg, itemId);
|
||||
}
|
||||
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
show: showEditor
|
||||
};
|
||||
});
|
|
@ -0,0 +1,55 @@
|
|||
<div class="dialogHeader">
|
||||
<button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="arrow-back"></iron-icon></button>
|
||||
<div class="dialogHeaderTitle">
|
||||
${ButtonEdit}
|
||||
</div>
|
||||
<div style="margin-left:auto; display: flex; align-items: center; justify-content: center;">
|
||||
<paper-button class="btnHeaderSave accent" tabindex="-1">
|
||||
<iron-icon icon="check"></iron-icon>
|
||||
<span>${ButtonSave}</span>
|
||||
</paper-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="readOnlyContent" style="margin: 0 auto;">
|
||||
<div>
|
||||
<div style="display: none; vertical-align: top; margin-right: 1em; padding-top: 1em;" class="timerPageImageContainer">
|
||||
</div>
|
||||
<div style="display: inline-block; vertical-align: middle;">
|
||||
<p><span class="itemName inlineItemName"></span></p>
|
||||
<p class="itemEpisodeName"></p>
|
||||
<p class="itemMiscInfo miscTvProgramInfo"></p>
|
||||
<p>
|
||||
<span class="itemCommunityRating"></span>
|
||||
</p>
|
||||
<p class="itemGenres"></p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="itemOverview smoothScrollY"></p>
|
||||
|
||||
<p style="margin-top: 2em;" class="timerStatus">
|
||||
</p>
|
||||
</div>
|
||||
<br />
|
||||
<form class="liveTvTimerForm" style="margin: 0 auto;">
|
||||
<h1>${HeaderRecordingOptions}</h1>
|
||||
|
||||
<emby-collapsible title="${HeaderAdvanced}">
|
||||
<br />
|
||||
<div>
|
||||
<paper-input type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPrePaddingMinutes}"></paper-input>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<paper-input type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPostPaddingMinutes}"></paper-input>
|
||||
</div>
|
||||
<br />
|
||||
</emby-collapsible>
|
||||
<br />
|
||||
<br />
|
||||
<div>
|
||||
<button type="submit" data-role="none" class="clearButton btnSave">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
Loading…
Add table
Add a link
Reference in a new issue