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

update recording editor

This commit is contained in:
Luke Pulverenti 2016-05-16 01:38:17 -04:00
parent 236922386b
commit 97f2044bc4
17 changed files with 268 additions and 261 deletions

View file

@ -16,12 +16,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.3.30",
"_release": "1.3.30",
"version": "1.3.37",
"_release": "1.3.37",
"_resolution": {
"type": "version",
"tag": "1.3.30",
"commit": "0cce51a6d5a1ab91c305ba22a211ee87fdf1bea0"
"tag": "1.3.37",
"commit": "43c74d495f1fbdae6d86ac6608e934d396069806"
},
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.0",

View file

@ -15,7 +15,7 @@
margin-left: .75em;
}
.formDialog form {
.formDialog .centeredContent {
margin: 0 auto;
}
@ -25,16 +25,19 @@
.formDialog .dialogContentInner {
padding-bottom: 10vh;
padding-top: 1em;
}
.layout-tv .formDialog .dialogContentInner {
padding-bottom: 50vh;
}
.formDialog .centeredContent {
max-width: 700px;
}
@media all and (min-width: 1000px) {
.formDialog form {
.layout-tv .formDialog .centeredContent {
max-width: 70vw;
}
}

View file

@ -1,4 +1,4 @@
define(['require', 'globalize', 'connectionManager', 'loading', 'scrollHelper', 'datetime', 'focusManager', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'registrationservices', 'clearButtonStyle', 'css!./guide.css', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html', 'scrollStyles'], function (require, globalize, connectionManager, loading, scrollHelper, datetime, focusManager, imageLoader, events, layoutManager, itemShortcuts, registrationServices) {
define(['require', 'browser', 'globalize', 'connectionManager', 'loading', 'scrollHelper', 'datetime', 'focusManager', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'registrationservices', 'clearButtonStyle', 'css!./guide.css', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html', 'scrollStyles'], function (require, browser, globalize, connectionManager, loading, scrollHelper, datetime, focusManager, imageLoader, events, layoutManager, itemShortcuts, registrationServices) {
function Guide(options) {
@ -59,7 +59,7 @@
return registrationServices.validateFeature('livetv').then(function () {
var limit = 400;
var limit = browser.mobile ? 100 : 400;
context.querySelector('.guideRequiresUnlock').classList.add('hide');

View file

@ -1,3 +1,7 @@
.recordingDialog .btnSubmit {
background-color: #cc3333;
}
}
.layout-tv .btnHeaderSave {
display: none;
}

View file

@ -5,7 +5,7 @@
</div>
</div>
<div class="dialogContent smoothScrollY">
<form class="dialogContentInner">
<form class="dialogContentInner centeredContent">
<h1 class="itemName"></h1>
<p class="itemEpisodeName"></p>
@ -52,11 +52,11 @@
<br />
<emby-collapsible title="${Advanced}">
<div>
<paper-input type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${PrePaddingMinutes}"></paper-input>
<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="${PostPaddingMinutes}"></paper-input>
<paper-input type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPostPaddingMinutes}"></paper-input>
</div>
</emby-collapsible>
<br />

View file

@ -0,0 +1,175 @@
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'scrollStyles', 'paper-checkbox', 'emby-collapsible', 'paper-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
var currentDialog;
var recordingUpdated = false;
var currentItemId;
var currentServerId;
function renderTimer(context, item) {
var programInfo = item.ProgramInfo || {};
context.querySelector('.itemName').innerHTML = item.Name;
context.querySelector('.itemEpisodeName').innerHTML = programInfo.EpisodeTitle || '';
context.querySelector('.itemGenres').innerHTML = (programInfo.Genres || []).join(' / ');
context.querySelector('.itemOverview').innerHTML = programInfo.Overview || '';
var timerPageImageContainer = context.querySelector('.timerPageImageContainer');
context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(programInfo);
context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(programInfo);
context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
var timerStausElem = context.querySelector('.timerStatus');
if (item.Status == 'New') {
timerStausElem.classList.add('hide');
} else {
timerStausElem.classList.remove('hide');
timerStausElem.innerHTML = 'Status:&nbsp;&nbsp;&nbsp;' + item.Status;
}
loading.hide();
}
function closeDialog(isSubmitted) {
recordingUpdated = isSubmitted;
dialogHelper.close(currentDialog);
}
function onSubmit(e) {
loading.show();
var form = this;
var apiClient = connectionManager.getApiClient(currentServerId);
apiClient.getLiveTvTimer(currentItemId).then(function (item) {
item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
item.PostPaddingSeconds = form.querySelector('#txtPostPaddingMinutes').value * 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('.btnSubmit').click();
});
context.querySelector('.btnSubmit').addEventListener('click', function () {
// Do a fake form submit this the button isn't a real submit button
var fakeSubmit = document.createElement('input');
fakeSubmit.setAttribute('type', 'submit');
fakeSubmit.style.display = 'none';
var form = context.querySelector('form');
form.appendChild(fakeSubmit);
fakeSubmit.click();
// Seeing issues in smart tv browsers where the form does not get submitted if the button is removed prior to the submission actually happening
setTimeout(function () {
form.removeChild(fakeSubmit);
}, 500);
});
}
function reload(context, id) {
loading.show();
currentItemId = id;
var apiClient = connectionManager.getApiClient(currentServerId);
apiClient.getLiveTvTimer(id).then(function (result) {
renderTimer(context, result);
loading.hide();
});
}
function showEditor(itemId, serverId) {
return new Promise(function (resolve, reject) {
recordingUpdated = false;
currentServerId = serverId;
loading.show();
require(['text!./recordingeditor.template.html'], function (template) {
var dialogOptions = {
removeOnClose: true,
scrollY: false
};
if (layoutManager.tv) {
dialogOptions.size = 'fullscreen';
} else {
dialogOptions.size = 'small';
}
var dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
dlg.classList.add('recordingDialog');
var html = '';
html += globalize.translateDocument(template, 'sharedcomponents');
dlg.innerHTML = html;
document.body.appendChild(dlg);
currentDialog = dlg;
dlg.addEventListener('close', function () {
if (recordingUpdated) {
resolve();
} else {
reject();
}
});
if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg.querySelector('.dialogContent'), false);
}
init(dlg);
reload(dlg, itemId);
dialogHelper.open(dlg);
});
});
}
return {
show: showEditor
};
});

View file

@ -0,0 +1,43 @@
<div class="dialogHeader" style="margin:0 0 2em;">
<button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="arrow-back"></iron-icon></button>
<div class="dialogHeaderTitle">
${Edit}
</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>${Save}</span>
</paper-button>
</div>
</div>
<div class="dialogContent smoothScrollY">
<div class="dialogContentInner centeredContent">
<h1 class="itemName"></h1>
<p class="itemEpisodeName"></p>
<p class="itemMiscInfoPrimary" style="display: flex; align-items: center;"></p>
<p class="itemMiscInfoSecondary" style="display: flex; align-items: center;"></p>
<p class="itemGenres"></p>
<p class="itemOverview"></p>
<p style="margin-top: 2em;" class="timerStatus hide">
</p>
<form>
<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 />
<br />
<paper-button raised class="btnSubmit block"><iron-icon icon="mediainfo:fiber-manual-record"></iron-icon><span>${Save}</span></paper-button>
<br />
<br />
<br />
</form>
</div>
</div>

View file

@ -34,8 +34,8 @@
"Saturday": "Saturday",
"Days": "Days",
"RecordSeries": "Record series",
"PrePaddingMinutes": "Pre-padding minutes:",
"PostPaddingMinutes": "Post-padding minutes:",
"LabelPrePaddingMinutes": "Pre-padding minutes:",
"LabelPostPaddingMinutes": "Post-padding minutes:",
"RecordOnAllChannels": "Record on all channels",
"RecordAnytime": "Record at any time",
"RecordOnlyNewEpisodes": "Record only new episodes",
@ -46,6 +46,8 @@
"OptionConvertRecordingsToStreamingFormatHelp": "Recordings will be converted on the fly to MP4 for easy playback on your devices.",
"FeatureRequiresEmbyPremiere": "This feature requires an active Emby Premiere subscription.",
"Record": "Record",
"Save": "Save",
"Edit": "Edit",
"Download": "Download",
"Advanced": "Advanced",
"Refresh": "Refresh",

View file

@ -1,6 +1,7 @@
define(['browser'], function (browser) {
var allPages = document.querySelectorAll('.mainAnimatedPage');
var currentUrls = [];
var pageContainerCount = allPages.length;
var animationDuration = 500;
var allowAnimation = true;
@ -39,7 +40,6 @@ define(['browser'], function (browser) {
if (options.type) {
view.setAttribute('data-type', options.type);
}
view.setAttribute('data-url', options.url);
view.innerHTML = options.view;
var animatable = allPages[pageIndex];
@ -63,6 +63,7 @@ define(['browser'], function (browser) {
return animate(animatable, previousAnimatable, options.transition, options.isBack).then(function () {
selectedPageIndex = pageIndex;
currentUrls[pageIndex] = options.url;
if (!options.cancel && previousAnimatable) {
afterAnimate(allPages, pageIndex);
}
@ -225,22 +226,15 @@ define(['browser'], function (browser) {
}
function tryRestoreView(options) {
var url = options.url;
var view = document.querySelector(".page-view[data-url='" + url + "']");
var page = parentWithClass(view, 'mainAnimatedPage');
var index = currentUrls.indexOf(url);
if (view) {
if (index != -1) {
var page = allPages[index];
var view = page.querySelector(".page-view");
var index = -1;
var pages = allPages;
for (var i = 0, length = pages.length; i < length; i++) {
if (pages[i] == page) {
index = i;
break;
}
}
if (index != -1) {
if (view) {
if (options.cancel) {
return;
@ -278,14 +272,7 @@ define(['browser'], function (browser) {
function reset() {
var views = document.querySelectorAll(".mainAnimatedPage.hide .page-view");
for (var i = 0, length = views.length; i < length; i++) {
var view = views[i];
triggerDestroy(view);
view.parentNode.removeChild(view);
}
currentUrls = [];
}
function parentWithClass(elem, className) {