mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

move recording editor to popup

Browse source
This commit is contained in:
Luke Pulverenti 2016-05-09 23:36:43 -04:00
parent 25f06c166b
commit 4d7b51f730
19 changed files with 322 additions and 248 deletions
Download patch file Download diff file Expand all files Collapse all files

163
dashboard-ui/components/recordingeditor/recordingeditor.js Normal file
View 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:&nbsp;&nbsp;&nbsp;' + 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
};
});

55
dashboard-ui/components/recordingeditor/recordingeditor.template.html Normal file
View file

@ -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>