diff --git a/dashboard-ui/components/recordingcreator/recordingcreator.js b/dashboard-ui/components/recordingcreator/recordingcreator.js new file mode 100644 index 0000000000..6dd4bcd25d --- /dev/null +++ b/dashboard-ui/components/recordingcreator/recordingcreator.js @@ -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 + }; +}); \ No newline at end of file diff --git a/dashboard-ui/components/recordingcreator/recordingcreator.template.html b/dashboard-ui/components/recordingcreator/recordingcreator.template.html new file mode 100644 index 0000000000..f702ed3a3e --- /dev/null +++ b/dashboard-ui/components/recordingcreator/recordingcreator.template.html @@ -0,0 +1,61 @@ +
+ +
+ New Recording +
+
+ +
+ + + +
+
+ +
+
+
+ +
+
+
+
+
+

${MessageActiveSubscriptionRequiredSeriesRecordings}

+

${HeaderEnjoyDayTrial}

+ ${HeaderBecomeProjectSupporter} +
+ +
+
\ No newline at end of file diff --git a/dashboard-ui/livetvnewrecording.html b/dashboard-ui/livetvnewrecording.html deleted file mode 100644 index eeecabd969..0000000000 --- a/dashboard-ui/livetvnewrecording.html +++ /dev/null @@ -1,86 +0,0 @@ - - - - Emby - - -
- -
-
-

-

-

-

- -

-

-

- -
- - - -
-

${HeaderAdvanced}

-
-
-
- -
-
-
- -
-
-
-
-
-
-
-
-

${MessageActiveSubscriptionRequiredSeriesRecordings}

-

${HeaderEnjoyDayTrial}

- ${HeaderBecomeProjectSupporter} -
-
- - - ${ButtonCancel} -
-
-
-
- - diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js index fc06de7ac1..fedb9a7e2f 100644 --- a/dashboard-ui/scripts/itemdetailpage.js +++ b/dashboard-ui/scripts/itemdetailpage.js @@ -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); + }); + }); }); diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js index 043af1f602..aa6064c408 100644 --- a/dashboard-ui/scripts/librarylist.js +++ b/dashboard-ui/scripts/librarylist.js @@ -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); diff --git a/dashboard-ui/scripts/livetvcomponents.js b/dashboard-ui/scripts/livetvcomponents.js index 697373b496..ed35280e05 100644 --- a/dashboard-ui/scripts/livetvcomponents.js +++ b/dashboard-ui/scripts/livetvcomponents.js @@ -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) { diff --git a/dashboard-ui/scripts/livetvnewrecording.js b/dashboard-ui/scripts/livetvnewrecording.js deleted file mode 100644 index 51279ed7c7..0000000000 --- a/dashboard-ui/scripts/livetvnewrecording.js +++ /dev/null @@ -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); \ No newline at end of file diff --git a/dashboard-ui/thirdparty/paper-button-style.css b/dashboard-ui/thirdparty/paper-button-style.css index e6eea25526..22c68c2a0c 100644 --- a/dashboard-ui/thirdparty/paper-button-style.css +++ b/dashboard-ui/thirdparty/paper-button-style.css @@ -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; +} \ No newline at end of file