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

Merge pull request #1318 from MediaBrowser/master

Browse source 
schedule recordings with a dialog
This commit is contained in:
Luke 2015-12-15 13:29:15 -05:00
commit 22c8725e01
8 changed files with 357 additions and 347 deletions
Download patch file Download diff file Expand all files Collapse all files

265
dashboard-ui/components/recordingcreator/recordingcreator.js Normal file
View file

@ -0,0 +1,265 @@
define(['components/paperdialoghelper', 'scripts/livetvcomponents', 'livetvcss', 'paper-checkbox', 'paper-input'], function (paperDialogHelper) {
var currentProgramId;
var currentDialog;
var currentResolve;
var currentReject;
function getDaysOfWeek() {
// Do not localize. These are used as values, not text.
return LiveTvHelpers.getDaysOfWeek().map(function (d) {
return d.value;
});
}
function getDays(context) {
var daysOfWeek = getDaysOfWeek();
var days = [];
for (var i = 0, length = daysOfWeek.length; i < length; i++) {
var day = daysOfWeek[i];
if ($('#chk' + day, context).checked()) {
days.push(day);
}
}
return days;
}
function hideSeriesRecordingFields(context) {
$('#seriesFields', context).hide();
context.querySelector('.btnSubmitContainer').classList.remove('hide');
context.querySelector('.supporterContainer').classList.add('hide');
}
function closeDialog(isSubmitted) {
paperDialogHelper.close(currentDialog);
if (isSubmitted) {
currentResolve();
} else {
currentReject();
}
}
function onSubmit() {
Dashboard.showLoadingMsg();
var form = this;
ApiClient.getNewLiveTvTimerDefaults({ programId: currentProgramId }).then(function (item) {
item.PrePaddingSeconds = $('#txtPrePaddingMinutes', form).val() * 60;
item.PostPaddingSeconds = $('#txtPostPaddingMinutes', form).val() * 60;
item.RecordNewOnly = $('#chkNewOnly', form).checked();
item.RecordAnyChannel = $('#chkAllChannels', form).checked();
item.RecordAnyTime = $('#chkAnyTime', form).checked();
item.Days = getDays(form);
if ($('#chkRecordSeries', form).checked()) {
ApiClient.createLiveTvSeriesTimer(item).then(function () {
Dashboard.hideLoadingMsg();
closeDialog(true);
});
} else {
ApiClient.createLiveTvTimer(item).then(function () {
Dashboard.hideLoadingMsg();
closeDialog(true);
});
}
});
// Disable default form submission
return false;
}
function getRegistration(programId) {
Dashboard.showLoadingMsg();
return ApiClient.getJSON(ApiClient.getUrl('LiveTv/Registration', {
ProgramId: programId,
Feature: 'seriesrecordings'
})).then(function (result) {
Dashboard.hideLoadingMsg();
return result;
}, function () {
Dashboard.hideLoadingMsg();
return {
TrialVersion: true,
IsValid: true,
IsRegistered: false
};
});
}
function showSeriesRecordingFields(context) {
$('#seriesFields', context).show();
context.querySelector('.btnSubmitContainer').classList.remove('hide');
getRegistration(getParameterByName('programid')).then(function (regInfo) {
if (regInfo.IsValid) {
context.querySelector('.btnSubmitContainer').classList.remove('hide');
} else {
context.querySelector('.btnSubmitContainer').classList.add('hide');
}
if (regInfo.IsRegistered) {
context.querySelector('.supporterContainer').classList.add('hide');
} else {
context.querySelector('.supporterContainer').classList.remove('hide');
if (AppInfo.enableSupporterMembership) {
context.querySelector('.btnSupporter').classList.remove('hide');
} else {
context.querySelector('.btnSupporter').classList.add('hide');
}
if (regInfo.TrialVersion) {
context.querySelector('.supporterTrial').classList.remove('hide');
} else {
context.querySelector('.supporterTrial').classList.add('hide');
}
}
});
}
function init(context) {
$('#chkRecordSeries', context).on('change', function () {
if (this.checked) {
showSeriesRecordingFields(context);
} else {
hideSeriesRecordingFields(context);
}
});
$('.btnCancel', context).on('click', function () {
closeDialog(false);
});
$('form', context).off('submit', onSubmit).on('submit', onSubmit);
}
function selectDays(page, days) {
var daysOfWeek = getDaysOfWeek();
for (var i = 0, length = daysOfWeek.length; i < length; i++) {
var day = daysOfWeek[i];
$('#chk' + day, page).checked(days.indexOf(day) != -1);
}
}
function renderRecording(context, defaultTimer, program) {
$('#chkNewOnly', context).checked(defaultTimer.RecordNewOnly);
$('#chkAllChannels', context).checked(defaultTimer.RecordAnyChannel);
$('#chkAnyTime', context).checked(defaultTimer.RecordAnyTime);
$('#txtPrePaddingMinutes', context).val(defaultTimer.PrePaddingSeconds / 60);
$('#txtPostPaddingMinutes', context).val(defaultTimer.PostPaddingSeconds / 60);
if (program.IsSeries) {
$('#eligibleForSeriesFields', context).show();
} else {
$('#eligibleForSeriesFields', context).hide();
}
selectDays(context, defaultTimer.Days);
Dashboard.hideLoadingMsg();
}
function reload(context, programId) {
Dashboard.showLoadingMsg();
var promise1 = ApiClient.getNewLiveTvTimerDefaults({ programId: programId });
var promise2 = ApiClient.getLiveTvProgram(programId, Dashboard.getCurrentUserId());
Promise.all([promise1, promise2]).then(function (responses) {
var defaults = responses[0];
var program = responses[1];
renderRecording(context, defaults, program);
});
}
function showEditor(itemId) {
return new Promise(function (resolve, reject) {
currentResolve = resolve;
currentReject = reject;
currentProgramId = itemId;
Dashboard.showLoadingMsg();
var xhr = new XMLHttpRequest();
xhr.open('GET', 'components/recordingcreator/recordingcreator.template.html', true);
xhr.onload = function (e) {
var template = this.response;
var dlg = paperDialogHelper.createDialog({
removeOnClose: true,
theme: 'b'
});
dlg.classList.add('formDialog');
var html = '';
html += Globalize.translateDocument(template);
dlg.innerHTML = html;
document.body.appendChild(dlg);
paperDialogHelper.open(dlg);
currentDialog = dlg;
hideSeriesRecordingFields(dlg);
init(dlg);
reload(dlg, itemId);
}
xhr.send();
});
}
return {
show: showEditor
};
});

61
dashboard-ui/components/recordingcreator/recordingcreator.template.html Normal file
View file

@ -0,0 +1,61 @@
<div class="dialogHeader">
<paper-icon-button icon="close" class="btnCancel"></paper-icon-button>
<div class="dialogHeaderTitle">
New Recording
</div>
</div>
<form class="liveTvNewRecordingForm" style="margin: 0 auto;">
<div style="display: none;" id="eligibleForSeriesFields">
<div>
<paper-checkbox id="chkRecordSeries">${OptionRecordSeries}</paper-checkbox>
</div>
<br />
<div id="seriesFields" style="display: none;">
<div>
<h1>${HeaderDays}</h1>
</div>
<div class="paperCheckboxList">
<paper-checkbox id="chkSunday">${OptionSunday}</paper-checkbox>
<paper-checkbox id="chkMonday">${OptionMonday}</paper-checkbox>
<paper-checkbox id="chkTuesday">${OptionTuesday}</paper-checkbox>
<paper-checkbox id="chkWednesday">${OptionWednesday}</paper-checkbox>
<paper-checkbox id="chkThursday">${OptionThursday}</paper-checkbox>
<paper-checkbox id="chkFriday">${OptionFriday}</paper-checkbox>
<paper-checkbox id="chkSaturday">${OptionSaturday}</paper-checkbox>
</div>
<div>
<h1>${HeaderRepeatingOptions}</h1>
</div>
<div class="paperCheckboxList">
<paper-checkbox id="chkNewOnly">${OptionRecordOnlyNewEpisodes}</paper-checkbox>
<paper-checkbox id="chkAnyTime">${OptionRecordAnytime}</paper-checkbox>
<paper-checkbox id="chkAllChannels">${OptionRecordOnAllChannels}</paper-checkbox>
</div>
</div>
<br />
</div>
<div>
<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>
</div>
<br />
<div>
<div class="supporterContainer hide">
<p>${MessageActiveSubscriptionRequiredSeriesRecordings}</p>
<p class="supporterTrial hide">${HeaderEnjoyDayTrial}</p>
<a class="clearLink btnSupporter hide" href="http://emby.media/premiere" target="_blank"><paper-button raised class="accent block"><iron-icon icon="check"></iron-icon><span>${HeaderBecomeProjectSupporter}</span></paper-button></a>
</div>
<button type="submit" data-role="none" class="clearButton btnSubmitContainer">
<paper-button raised class="submit block" style="background:#cc3333;"><iron-icon icon="videocam"></iron-icon><span>${ButtonRecord}</span></paper-button>
</button>
</div>
</form>

86
dashboard-ui/livetvnewrecording.html
View file

@ -1,86 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Emby</title>
</head>
<body>
<div id="liveTvNewRecordingPage" data-role="page" class="page libraryPage liveTvPage noSecondaryNavPage" data-contextname="${HeaderLiveTv}" data-require="jqmcollapsible,scripts/livetvcomponents,scripts/livetvnewrecording,livetvcss,paper-checkbox,paper-input" data-backbutton="true" data-menubutton="false">
<div data-role="content">
<form class="liveTvNewRecordingForm" style="margin: 0 auto;">
<p><span class="itemName inlineItemName"></span></p>
<p class="itemEpisodeName"></p>
<p class="itemMiscInfo"></p>
<p>
<span class="itemCommunityRating"></span>
</p>
<p class="itemGenres"></p>
<p class="itemOverview smoothScrollY"></p>
<br />
<div style="display: none;" id="eligibleForSeriesFields">
<div>
<paper-checkbox id="chkRecordSeries">${OptionRecordSeries}</paper-checkbox>
</div>
<br />
<div id="seriesFields" style="display: none;">
<div>
<h1>${HeaderDays}</h1>
</div>
<div class="paperCheckboxList">
<paper-checkbox id="chkSunday">${OptionSunday}</paper-checkbox>
<paper-checkbox id="chkMonday">${OptionMonday}</paper-checkbox>
<paper-checkbox id="chkTuesday">${OptionTuesday}</paper-checkbox>
<paper-checkbox id="chkWednesday">${OptionWednesday}</paper-checkbox>
<paper-checkbox id="chkThursday">${OptionThursday}</paper-checkbox>
<paper-checkbox id="chkFriday">${OptionFriday}</paper-checkbox>
<paper-checkbox id="chkSaturday">${OptionSaturday}</paper-checkbox>
</div>
<div>
<h1>${HeaderRepeatingOptions}</h1>
</div>
<div class="paperCheckboxList">
<paper-checkbox id="chkNewOnly">${OptionRecordOnlyNewEpisodes}</paper-checkbox>
<paper-checkbox id="chkAnyTime">${OptionRecordAnytime}</paper-checkbox>
<paper-checkbox id="chkAllChannels">${OptionRecordOnAllChannels}</paper-checkbox>
</div>
</div>
<br />
</div>
<div data-role="collapsible" data-mini="true">
<h3>${HeaderAdvanced}</h3>
<div>
<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 />
</div>
</div>
<br />
<br />
<div>
<div class="supporterContainer hide">
<p>${MessageActiveSubscriptionRequiredSeriesRecordings}</p>
<p class="supporterTrial hide">${HeaderEnjoyDayTrial}</p>
<a class="clearLink btnSupporter hide" href="http://emby.media/premiere" target="_blank"><paper-button raised class="accent block"><iron-icon icon="check"></iron-icon><span>${HeaderBecomeProjectSupporter}</span></paper-button></a>
<br />
</div>
<button type="submit" data-role="none" class="clearButton btnSubmitContainer">
<paper-button raised class="submit block" style="background:#cc3333;"><iron-icon icon="videocam"></iron-icon><span>${ButtonRecord}</span></paper-button>
</button>
<paper-button raised class="cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
</div>
</form>
</div>
</div>
</body>
</html>

7
dashboard-ui/scripts/itemdetailpage.js
View file

@ -1991,8 +1991,11 @@
$('.btnRecord,.btnFloatingRecord', page).on('click', function () {
var id = getParameterByName('id');
Dashboard.navigate('livetvnewrecording.html?programid=' + id);
require(['components/recordingcreator/recordingcreator'], function (recordingcreator) {
recordingcreator.show(id).then(function () {
reload(page);
});
});
});

4
dashboard-ui/scripts/librarylist.js
View file

@ -494,7 +494,9 @@
Dashboard.navigate('itemdetails.html?id=' + albumid);
break;
case 'record':
Dashboard.navigate('livetvnewrecording.html?programid=' + itemId);
require(['components/recordingcreator/recordingcreator'], function (recordingcreator) {
recordingcreator.show(itemId);
});
break;
case 'artist':
Dashboard.navigate('itemdetails.html?context=music&id=' + artistid);

5
dashboard-ui/scripts/livetvcomponents.js
View file

@ -245,7 +245,10 @@
function onRecordClick() {
hideOverlay();
Dashboard.navigate('livetvnewrecording.html?programid=' + this.getAttribute('data-id'));
var programId = this.getAttribute('data-id');
require(['components/recordingcreator/recordingcreator'], function (recordingcreator) {
recordingcreator.show(programId);
});
}
function showOverlay(elem, item) {

256
dashboard-ui/scripts/livetvnewrecording.js
View file

@ -1,256 +0,0 @@
(function ($, document) {
var currentProgram;
var registrationInfo;
var lastRegId;
function getRegistration(programId) {
var deferred = DeferredBuilder.Deferred();
if (registrationInfo && (lastRegId == programId)) {
deferred.resolveWith(null, [registrationInfo]);
return deferred.promise();
}
registrationInfo = null;
Dashboard.showLoadingMsg();
ApiClient.getJSON(ApiClient.getUrl('LiveTv/Registration', {
ProgramId: programId,
Feature: 'seriesrecordings'
})).then(function (result) {
lastRegId = programId;
registrationInfo = result;
deferred.resolveWith(null, [registrationInfo]);
Dashboard.hideLoadingMsg();
}, function () {
deferred.resolveWith(null, [
{
TrialVersion: true,
IsValid: true,
IsRegistered: false
}]);
Dashboard.hideLoadingMsg();
});
return deferred.promise();
}
function renderRecording(page, defaultTimer, program) {
currentProgram = program;
$('.itemName', page).html(program.Name);
$('.itemEpisodeName', page).html(program.EpisodeTitle || '');
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(program));
LibraryBrowser.renderGenres($('.itemGenres', page), program);
LibraryBrowser.renderOverview(page.querySelectorAll('.itemOverview'), program);
$('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(program));
$('#chkNewOnly', page).checked(defaultTimer.RecordNewOnly);
$('#chkAllChannels', page).checked(defaultTimer.RecordAnyChannel);
$('#chkAnyTime', page).checked(defaultTimer.RecordAnyTime);
$('#txtPrePaddingMinutes', page).val(defaultTimer.PrePaddingSeconds / 60);
$('#txtPostPaddingMinutes', page).val(defaultTimer.PostPaddingSeconds / 60);
if (program.IsSeries) {
$('#eligibleForSeriesFields', page).show();
} else {
$('#eligibleForSeriesFields', page).hide();
}
selectDays(page, defaultTimer.Days);
Dashboard.hideLoadingMsg();
}
function reload(page) {
Dashboard.showLoadingMsg();
var programId = getParameterByName('programid');
var promise1 = ApiClient.getNewLiveTvTimerDefaults({ programId: programId });
var promise2 = ApiClient.getLiveTvProgram(programId, Dashboard.getCurrentUserId());
Promise.all([promise1, promise2]).then(function (responses) {
var defaults = responses[0];
var program = responses[1];
renderRecording(page, defaults, program);
});
}
function selectDays(page, days) {
var daysOfWeek = getDaysOfWeek();
for (var i = 0, length = daysOfWeek.length; i < length; i++) {
var day = daysOfWeek[i];
$('#chk' + day, page).checked(days.indexOf(day) != -1);
}
}
function getDaysOfWeek() {
// Do not localize. These are used as values, not text.
return LiveTvHelpers.getDaysOfWeek().map(function (d) {
return d.value;
});
}
function getDays(page) {
var daysOfWeek = getDaysOfWeek();
var days = [];
for (var i = 0, length = daysOfWeek.length; i < length; i++) {
var day = daysOfWeek[i];
if ($('#chk' + day, page).checked()) {
days.push(day);
}
}
return days;
}
function onSubmit() {
Dashboard.showLoadingMsg();
var form = this;
var programId = getParameterByName('programid');
ApiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (item) {
item.PrePaddingSeconds = $('#txtPrePaddingMinutes', form).val() * 60;
item.PostPaddingSeconds = $('#txtPostPaddingMinutes', form).val() * 60;
item.RecordNewOnly = $('#chkNewOnly', form).checked();
item.RecordAnyChannel = $('#chkAllChannels', form).checked();
item.RecordAnyTime = $('#chkAnyTime', form).checked();
item.Days = getDays(form);
if ($('#chkRecordSeries', form).checked()) {
ApiClient.createLiveTvSeriesTimer(item).then(function () {
Dashboard.hideLoadingMsg();
Dashboard.navigate('livetv.html');
});
} else {
ApiClient.createLiveTvTimer(item).then(function () {
Dashboard.hideLoadingMsg();
Dashboard.navigate('livetv.html');
});
}
});
// Disable default form submission
return false;
}
function hideSeriesRecordingFields(page) {
$('#seriesFields', page).hide();
page.querySelector('.btnSubmitContainer').classList.remove('hide');
page.querySelector('.supporterContainer').classList.add('hide');
}
function showSeriesRecordingFields(page) {
$('#seriesFields', page).show();
page.querySelector('.btnSubmitContainer').classList.remove('hide');
getRegistration(getParameterByName('programid')).then(function (regInfo) {
if (regInfo.IsValid) {
page.querySelector('.btnSubmitContainer').classList.remove('hide');
} else {
page.querySelector('.btnSubmitContainer').classList.add('hide');
}
if (regInfo.IsRegistered) {
page.querySelector('.supporterContainer').classList.add('hide');
} else {
page.querySelector('.supporterContainer').classList.remove('hide');
if (AppInfo.enableSupporterMembership) {
page.querySelector('.btnSupporter').classList.remove('hide');
} else {
page.querySelector('.btnSupporter').classList.add('hide');
}
if (regInfo.TrialVersion) {
page.querySelector('.supporterTrial').classList.remove('hide');
} else {
page.querySelector('.supporterTrial').classList.add('hide');
}
}
});
}
$(document).on('pageinit', "#liveTvNewRecordingPage", function () {
var page = this;
$('#chkRecordSeries', page).on('change', function () {
if (this.checked) {
showSeriesRecordingFields(page);
} else {
hideSeriesRecordingFields(page);
}
});
$('#btnCancel', page).on('click', function () {
var programId = getParameterByName('programid');
Dashboard.navigate('itemdetails.html?id=' + programId);
});
$('.liveTvNewRecordingForm').off('submit', onSubmit).on('submit', onSubmit);
}).on('pagebeforeshow', "#liveTvNewRecordingPage", function () {
var page = this;
hideSeriesRecordingFields(page);
reload(page);
}).on('pagebeforehide', "#liveTvNewRecordingPage", function () {
currentProgram = null;
});
})(jQuery, document);

20
dashboard-ui/thirdparty/paper-button-style.css vendored
View file

@ -570,7 +570,21 @@ paper-dialog paper-radio-group paper-radio-button {
}
}
paper-dialog.popupEditor .dialogHeader {
div.dialogHeader {
margin: 0 0 2.5em!important;
padding: .35em 1em;
background-color: #101010;
display: flex;
align-items: center;
line-height: normal;
font-size: 110%;
}
.dialogHeaderTitle {
margin-left: .75em;
}
paper-dialog.popupEditor h2.dialogHeader {
font-weight: inherit !important;
line-height: 36px;
padding: 0 1em;
@ -613,3 +627,7 @@ paper-toggle-button paper-ripple {
paper-progress.mini #progressContainer {
height: 3px !important;
}
.formDialog.background-theme-b {
background-color: #202020;
}