';
html += '
-
-
-
-
';
+ elem.innerHTML = '';
- document.body.appendChild(elem);
+ document.body.appendChild(elem);
- layer1 = elem.querySelector('.mdl-spinner__layer-1');
- layer2 = elem.querySelector('.mdl-spinner__layer-2');
- layer3 = elem.querySelector('.mdl-spinner__layer-3');
- layer4 = elem.querySelector('.mdl-spinner__layer-4');
+ layer1 = elem.querySelector('.mdl-spinner__layer-1');
+ layer2 = elem.querySelector('.mdl-spinner__layer-2');
+ layer3 = elem.querySelector('.mdl-spinner__layer-3');
+ layer4 = elem.querySelector('.mdl-spinner__layer-4');
- circleLefts = elem.querySelectorAll('.mdl-spinner__circleLeft');
- circleRights = elem.querySelectorAll('.mdl-spinner__circleRight');
- }
+ circleLefts = elem.querySelectorAll('.mdl-spinner__circleLeft');
+ circleRights = elem.querySelectorAll('.mdl-spinner__circleRight');
+ }
- elem.classList.add('mdlSpinnerActive');
+ elem.classList.add('mdlSpinnerActive');
- layer1.classList.add('mdl-spinner__layer-1-active');
- layer2.classList.add('mdl-spinner__layer-2-active');
- layer3.classList.add('mdl-spinner__layer-3-active');
- layer4.classList.add('mdl-spinner__layer-4-active');
+ layer1.classList.add('mdl-spinner__layer-1-active');
+ layer2.classList.add('mdl-spinner__layer-2-active');
+ layer3.classList.add('mdl-spinner__layer-3-active');
+ layer4.classList.add('mdl-spinner__layer-4-active');
- var i;
- var length;
+ for (let i = 0, length = circleLefts.length; i < length; i++) {
+ circleLefts[i].classList.add('mdl-spinner__circleLeft-active');
+ }
- for (i = 0, length = circleLefts.length; i < length; i++) {
- circleLefts[i].classList.add('mdl-spinner__circleLeft-active');
- }
+ for (let i = 0, length = circleRights.length; i < length; i++) {
+ circleRights[i].classList.add('mdl-spinner__circleRight-active');
+ }
+}
- for (i = 0, length = circleRights.length; i < length; i++) {
- circleRights[i].classList.add('mdl-spinner__circleRight-active');
- }
- },
- hide: function () {
- var elem = loadingElem;
+export function hide() {
+ const elem = loadingElem;
- if (elem) {
- elem.classList.remove('mdlSpinnerActive');
+ if (elem) {
+ elem.classList.remove('mdlSpinnerActive');
- elem.classList.remove('mdl-spinner__layer-1-active');
- elem.classList.remove('mdl-spinner__layer-2-active');
- elem.classList.remove('mdl-spinner__layer-3-active');
- elem.classList.remove('mdl-spinner__layer-4-active');
+ elem.classList.remove('mdl-spinner__layer-1-active');
+ elem.classList.remove('mdl-spinner__layer-2-active');
+ elem.classList.remove('mdl-spinner__layer-3-active');
+ elem.classList.remove('mdl-spinner__layer-4-active');
- var i;
- var length;
-
- for (i = 0, length = circleLefts.length; i < length; i++) {
- circleLefts[i].classList.remove('mdl-spinner__circleLeft-active');
- }
-
- for (i = 0, length = circleRights.length; i < length; i++) {
- circleRights[i].classList.remove('mdl-spinner__circleRight-active');
- }
- }
+ for (let i = 0, length = circleLefts.length; i < length; i++) {
+ circleLefts[i].classList.remove('mdl-spinner__circleLeft-active');
}
- };
-});
+
+ for (let i = 0, length = circleRights.length; i < length; i++) {
+ circleRights[i].classList.remove('mdl-spinner__circleRight-active');
+ }
+ }
+}
+
+export default {
+ show: show,
+ hide: hide
+};
diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html b/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html
index f92a63e40..4d84544d0 100644
--- a/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html
+++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.template.html
@@ -24,8 +24,8 @@
.split('?')[0] + '/empty.png)
';
+ imageContainer.classList.remove('hide');
+
+ imageLoader.lazyChildren(imageContainer);
+ } else {
+ imageContainer.innerHTML = '';
+ imageContainer.classList.add('hide');
}
- if (imageTags.Primary) {
- return apiClient.getScaledImageUrl(item.Id, {
- type: 'Primary',
- maxHeight: imageHeight,
- tag: item.ImageTags.Primary
- });
- } else if (imageTags.Thumb) {
- return apiClient.getScaledImageUrl(item.Id, {
- type: 'Thumb',
- maxHeight: imageHeight,
- tag: item.ImageTags.Thumb
- });
+ context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
+ context.querySelector('.formDialogHeaderTitle').innerHTML = program.Name;
+ context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
+ context.querySelector('.itemOverview').innerHTML = program.Overview || '';
+
+ const formDialogFooter = context.querySelector('.formDialogFooter');
+ const now = new Date();
+ if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
+ formDialogFooter.classList.remove('hide');
+ } else {
+ formDialogFooter.classList.add('hide');
}
- return null;
+ context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
}
- function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) {
- if (!refreshRecordingStateOnly) {
- var imgUrl = getImageUrl(program, apiClient, 200);
- var imageContainer = context.querySelector('.recordingDialog-imageContainer');
+ context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program, {
+ });
- if (imgUrl) {
- imageContainer.innerHTML = '';
- imageContainer.classList.remove('hide');
+ loading.hide();
+}
- imageLoader.lazyChildren(imageContainer);
- } else {
- imageContainer.innerHTML = '';
- imageContainer.classList.add('hide');
- }
+function reload(context, programId, serverId, refreshRecordingStateOnly) {
+ loading.show();
- context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
- context.querySelector('.formDialogHeaderTitle').innerHTML = program.Name;
- context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
- context.querySelector('.itemOverview').innerHTML = program.Overview || '';
+ const apiClient = connectionManager.getApiClient(serverId);
- var formDialogFooter = context.querySelector('.formDialogFooter');
- var now = new Date();
- if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
- formDialogFooter.classList.remove('hide');
- } else {
- formDialogFooter.classList.add('hide');
- }
+ const promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
+ const promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
- context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
- }
+ Promise.all([promise1, promise2]).then(function (responses) {
+ const defaults = responses[0];
+ const program = responses[1];
- context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program, {
- });
+ renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly);
+ });
+}
- loading.hide();
- }
+function executeCloseAction(action, programId, serverId) {
+ if (action === 'play') {
+ import('playbackManager').then(({ default: playbackManager }) => {
+ const apiClient = connectionManager.getApiClient(serverId);
- function reload(context, programId, serverId, refreshRecordingStateOnly) {
- loading.show();
-
- var apiClient = connectionManager.getApiClient(serverId);
-
- var promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
- var promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
-
- Promise.all([promise1, promise2]).then(function (responses) {
- var defaults = responses[0];
- var program = responses[1];
-
- renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly);
- });
- }
-
- function executeCloseAction(action, programId, serverId) {
- if (action === 'play') {
- require(['playbackManager'], function (playbackManager) {
- var apiClient = connectionManager.getApiClient(serverId);
-
- apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
- playbackManager.play({
- ids: [item.ChannelId],
- serverId: serverId
- });
- });
- });
- return;
- }
- }
-
- function showEditor(itemId, serverId) {
- return new Promise(function (resolve, reject) {
- closeAction = null;
-
- loading.show();
-
- require(['text!./recordingcreator.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.translateHtml(template, 'core');
-
- dlg.innerHTML = html;
-
- currentDialog = dlg;
-
- function onRecordingChanged() {
- reload(dlg, itemId, serverId, true);
- }
-
- dlg.addEventListener('close', function () {
- events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged);
- executeCloseAction(closeAction, itemId, serverId);
-
- if (currentRecordingFields && currentRecordingFields.hasChanged()) {
- resolve();
- } else {
- reject();
- }
- });
-
- if (layoutManager.tv) {
- scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
- }
-
- init(dlg);
-
- reload(dlg, itemId, serverId);
-
- currentRecordingFields = new recordingFields({
- parent: dlg.querySelector('.recordingFields'),
- programId: itemId,
+ apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
+ playbackManager.play({
+ ids: [item.ChannelId],
serverId: serverId
});
-
- events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged);
-
- dialogHelper.open(dlg);
});
});
+ return;
}
+}
- return {
- show: showEditor
- };
-});
+function showEditor(itemId, serverId) {
+ return new Promise(function (resolve, reject) {
+ closeAction = null;
+
+ loading.show();
+
+ import('text!./recordingcreator.template.html').then(({ default: template }) => {
+ const dialogOptions = {
+ removeOnClose: true,
+ scrollY: false
+ };
+
+ if (layoutManager.tv) {
+ dialogOptions.size = 'fullscreen';
+ } else {
+ dialogOptions.size = 'small';
+ }
+
+ const dlg = dialogHelper.createDialog(dialogOptions);
+
+ dlg.classList.add('formDialog');
+ dlg.classList.add('recordingDialog');
+
+ let html = '';
+
+ html += globalize.translateHtml(template, 'core');
+
+ dlg.innerHTML = html;
+
+ currentDialog = dlg;
+
+ function onRecordingChanged() {
+ reload(dlg, itemId, serverId, true);
+ }
+
+ dlg.addEventListener('close', function () {
+ events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged);
+ executeCloseAction(closeAction, itemId, serverId);
+
+ if (currentRecordingFields && currentRecordingFields.hasChanged()) {
+ resolve();
+ } else {
+ reject();
+ }
+ });
+
+ if (layoutManager.tv) {
+ scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+ }
+
+ init(dlg);
+
+ reload(dlg, itemId, serverId);
+
+ currentRecordingFields = new recordingFields({
+ parent: dlg.querySelector('.recordingFields'),
+ programId: itemId,
+ serverId: serverId
+ });
+
+ events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged);
+
+ dialogHelper.open(dlg);
+ });
+ });
+}
+
+export default {
+ show: showEditor
+};
diff --git a/src/components/recordingcreator/recordingeditor.js b/src/components/recordingcreator/recordingeditor.js
index 3797cde37..096ea3b62 100644
--- a/src/components/recordingcreator/recordingeditor.js
+++ b/src/components/recordingcreator/recordingeditor.js
@@ -1,145 +1,155 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'scrollStyles', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader) {
- 'use strict';
+import dialogHelper from 'dialogHelper';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+import loading from 'loading';
+import scrollHelper from 'scrollHelper';
+import 'scrollStyles';
+import 'emby-button';
+import 'emby-collapse';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'css!./recordingcreator';
+import 'material-icons';
+import 'flexStyles';
- var currentDialog;
- var recordingDeleted = false;
- var currentItemId;
- var currentServerId;
- var currentResolve;
+let currentDialog;
+let recordingDeleted = false;
+let currentItemId;
+let currentServerId;
+let currentResolve;
- function deleteTimer(apiClient, timerId) {
- return new Promise(function (resolve, reject) {
- require(['recordingHelper'], function (recordingHelper) {
- recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
- });
+function deleteTimer(apiClient, timerId) {
+ return import('recordingHelper').then(({ default: recordingHelper }) => {
+ recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId());
+ });
+}
+
+function renderTimer(context, item, apiClient) {
+ context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
+ context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
+
+ loading.hide();
+}
+
+function closeDialog(isDeleted) {
+ recordingDeleted = isDeleted;
+ dialogHelper.close(currentDialog);
+}
+
+function onSubmit(e) {
+ const form = this;
+
+ const 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(currentResolve);
+ });
+
+ e.preventDefault();
+
+ // Disable default form submission
+ return false;
+}
+
+function init(context) {
+ context.querySelector('.btnCancel').addEventListener('click', function () {
+ closeDialog(false);
+ });
+
+ context.querySelector('.btnCancelRecording').addEventListener('click', function () {
+ const apiClient = connectionManager.getApiClient(currentServerId);
+
+ deleteTimer(apiClient, currentItemId).then(function () {
+ closeDialog(true);
});
- }
+ });
- function renderTimer(context, item, apiClient) {
- context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
- context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
+ context.querySelector('form').addEventListener('submit', onSubmit);
+}
+function reload(context, id) {
+ loading.show();
+ currentItemId = id;
+
+ const apiClient = connectionManager.getApiClient(currentServerId);
+ apiClient.getLiveTvTimer(id).then(function (result) {
+ renderTimer(context, result, apiClient);
loading.hide();
- }
+ });
+}
- function closeDialog(isDeleted) {
- recordingDeleted = isDeleted;
-
- dialogHelper.close(currentDialog);
- }
-
- function onSubmit(e) {
- 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(currentResolve);
- });
-
- e.preventDefault();
-
- // Disable default form submission
- return false;
- }
-
- function init(context) {
- context.querySelector('.btnCancel').addEventListener('click', function () {
- closeDialog(false);
- });
-
- context.querySelector('.btnCancelRecording').addEventListener('click', function () {
- var apiClient = connectionManager.getApiClient(currentServerId);
- deleteTimer(apiClient, currentItemId).then(function () {
- closeDialog(true);
- });
- });
-
- context.querySelector('form').addEventListener('submit', onSubmit);
- }
-
- function reload(context, id) {
+function showEditor(itemId, serverId, options) {
+ return new Promise(function (resolve, reject) {
+ recordingDeleted = false;
+ currentServerId = serverId;
loading.show();
- currentItemId = id;
+ options = options || {};
+ currentResolve = resolve;
- var apiClient = connectionManager.getApiClient(currentServerId);
- apiClient.getLiveTvTimer(id).then(function (result) {
- renderTimer(context, result, apiClient);
- loading.hide();
- });
- }
+ import('text!./recordingeditor.template.html').then(({default: template}) => {
+ const dialogOptions = {
+ removeOnClose: true,
+ scrollY: false
+ };
- function showEditor(itemId, serverId, options) {
- return new Promise(function (resolve, reject) {
- recordingDeleted = false;
- currentServerId = serverId;
- loading.show();
- options = options || {};
- currentResolve = resolve;
+ if (layoutManager.tv) {
+ dialogOptions.size = 'fullscreen';
+ }
- require(['text!./recordingeditor.template.html'], function (template) {
- var dialogOptions = {
- removeOnClose: true,
- scrollY: false
- };
+ const dlg = dialogHelper.createDialog(dialogOptions);
- if (layoutManager.tv) {
- dialogOptions.size = 'fullscreen';
+ dlg.classList.add('formDialog');
+ dlg.classList.add('recordingDialog');
+
+ if (!layoutManager.tv) {
+ dlg.style['min-width'] = '20%';
+ dlg.classList.add('dialog-fullscreen-lowres');
+ }
+
+ let html = '';
+
+ html += globalize.translateHtml(template, 'core');
+
+ dlg.innerHTML = html;
+
+ if (options.enableCancel === false) {
+ dlg.querySelector('.formDialogFooter').classList.add('hide');
+ }
+
+ currentDialog = dlg;
+
+ dlg.addEventListener('closing', function () {
+ if (!recordingDeleted) {
+ dlg.querySelector('.btnSubmit').click();
}
-
- var dlg = dialogHelper.createDialog(dialogOptions);
-
- dlg.classList.add('formDialog');
- dlg.classList.add('recordingDialog');
-
- if (!layoutManager.tv) {
- dlg.style['min-width'] = '20%';
- dlg.classList.add('dialog-fullscreen-lowres');
- }
-
- var html = '';
-
- html += globalize.translateHtml(template, 'core');
-
- dlg.innerHTML = html;
-
- if (options.enableCancel === false) {
- dlg.querySelector('.formDialogFooter').classList.add('hide');
- }
-
- currentDialog = dlg;
-
- dlg.addEventListener('closing', function () {
- if (!recordingDeleted) {
- dlg.querySelector('.btnSubmit').click();
- }
- });
-
- dlg.addEventListener('close', function () {
- if (recordingDeleted) {
- resolve({
- updated: true,
- deleted: true
- });
- }
- });
-
- if (layoutManager.tv) {
- scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
- }
-
- init(dlg);
-
- reload(dlg, itemId);
-
- dialogHelper.open(dlg);
});
- });
- }
- return {
- show: showEditor
- };
-});
+ dlg.addEventListener('close', function () {
+ if (recordingDeleted) {
+ resolve({
+ updated: true,
+ deleted: true
+ });
+ }
+ });
+
+ if (layoutManager.tv) {
+ scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+ }
+
+ init(dlg);
+
+ reload(dlg, itemId);
+
+ dialogHelper.open(dlg);
+ });
+ });
+}
+
+export default {
+ show: showEditor
+};
diff --git a/src/components/recordingcreator/recordingfields.js b/src/components/recordingcreator/recordingfields.js
index 2534eafe6..d9d7c0098 100644
--- a/src/components/recordingcreator/recordingfields.js
+++ b/src/components/recordingcreator/recordingfields.js
@@ -1,219 +1,126 @@
-define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields', 'flexStyles'], function (globalize, connectionManager, serverNotifications, require, loading, appHost, dom, recordingHelper, events) {
- 'use strict';
+import globalize from 'globalize';
+import connectionManager from 'connectionManager';
+import serverNotifications from 'serverNotifications';
+import loading from 'loading';
+import dom from 'dom';
+import recordingHelper from 'recordingHelper';
+import events from 'events';
+import 'paper-icon-button-light';
+import 'emby-button';
+import 'css!./recordingfields';
+import 'flexStyles';
- function loadData(parent, program, apiClient) {
- if (program.IsSeries) {
- parent.querySelector('.recordSeriesContainer').classList.remove('hide');
+/*eslint prefer-const: "error"*/
+
+function loadData(parent, program, apiClient) {
+ if (program.IsSeries) {
+ parent.querySelector('.recordSeriesContainer').classList.remove('hide');
+ } else {
+ parent.querySelector('.recordSeriesContainer').classList.add('hide');
+ }
+
+ if (program.SeriesTimerId) {
+ parent.querySelector('.btnManageSeriesRecording').classList.remove('hide');
+ parent.querySelector('.seriesRecordingButton .recordingIcon').classList.add('recordingIcon-active');
+ parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('CancelSeries');
+ } else {
+ parent.querySelector('.btnManageSeriesRecording').classList.add('hide');
+ parent.querySelector('.seriesRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
+ parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('RecordSeries');
+ }
+
+ if (program.TimerId && program.Status !== 'Cancelled') {
+ parent.querySelector('.btnManageRecording').classList.remove('hide');
+ parent.querySelector('.singleRecordingButton .recordingIcon').classList.add('recordingIcon-active');
+ if (program.Status === 'InProgress') {
+ parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('StopRecording');
} else {
- parent.querySelector('.recordSeriesContainer').classList.add('hide');
+ parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('DoNotRecord');
}
+ } else {
+ parent.querySelector('.btnManageRecording').classList.add('hide');
+ parent.querySelector('.singleRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
+ parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('Record');
+ }
+}
- if (program.SeriesTimerId) {
- parent.querySelector('.btnManageSeriesRecording').classList.remove('hide');
- parent.querySelector('.seriesRecordingButton .recordingIcon').classList.add('recordingIcon-active');
- parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('CancelSeries');
- } else {
- parent.querySelector('.btnManageSeriesRecording').classList.add('hide');
- parent.querySelector('.seriesRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
- parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('RecordSeries');
+function fetchData(instance) {
+ const options = instance.options;
+ const apiClient = connectionManager.getApiClient(options.serverId);
+
+ options.parent.querySelector('.recordingFields').classList.remove('hide');
+ return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
+ instance.TimerId = program.TimerId;
+ instance.Status = program.Status;
+ instance.SeriesTimerId = program.SeriesTimerId;
+ loadData(options.parent, program, apiClient);
+ });
+}
+
+function onTimerChangedExternally(e, apiClient, data) {
+ const options = this.options;
+ let refresh = false;
+
+ if (data.Id) {
+ if (this.TimerId === data.Id) {
+ refresh = true;
}
-
- if (program.TimerId && program.Status !== 'Cancelled') {
- parent.querySelector('.btnManageRecording').classList.remove('hide');
- parent.querySelector('.singleRecordingButton .recordingIcon').classList.add('recordingIcon-active');
- if (program.Status === 'InProgress') {
- parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('StopRecording');
- } else {
- parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('DoNotRecord');
- }
- } else {
- parent.querySelector('.btnManageRecording').classList.add('hide');
- parent.querySelector('.singleRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
- parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('Record');
+ }
+ if (data.ProgramId && options) {
+ if (options.programId === data.ProgramId) {
+ refresh = true;
}
}
- function fetchData(instance) {
- var options = instance.options;
- var apiClient = connectionManager.getApiClient(options.serverId);
-
- options.parent.querySelector('.recordingFields').classList.remove('hide');
- return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
- instance.TimerId = program.TimerId;
- instance.Status = program.Status;
- instance.SeriesTimerId = program.SeriesTimerId;
- loadData(options.parent, program, apiClient);
- });
+ if (refresh) {
+ this.refresh();
}
+}
- function onTimerChangedExternally(e, apiClient, data) {
- var options = this.options;
- var refresh = false;
+function onSeriesTimerChangedExternally(e, apiClient, data) {
+ const options = this.options;
+ let refresh = false;
- if (data.Id) {
- if (this.TimerId === data.Id) {
- refresh = true;
- }
+ if (data.Id) {
+ if (this.SeriesTimerId === data.Id) {
+ refresh = true;
}
- if (data.ProgramId && options) {
- if (options.programId === data.ProgramId) {
- refresh = true;
- }
- }
-
- if (refresh) {
- this.refresh();
+ }
+ if (data.ProgramId && options) {
+ if (options.programId === data.ProgramId) {
+ refresh = true;
}
}
- function onSeriesTimerChangedExternally(e, apiClient, data) {
- var options = this.options;
- var refresh = false;
-
- if (data.Id) {
- if (this.SeriesTimerId === data.Id) {
- refresh = true;
- }
- }
- if (data.ProgramId && options) {
- if (options.programId === data.ProgramId) {
- refresh = true;
- }
- }
-
- if (refresh) {
- this.refresh();
- }
+ if (refresh) {
+ this.refresh();
}
+}
- function RecordingEditor(options) {
+class RecordingEditor {
+ constructor(options) {
this.options = options;
this.embed();
- var timerChangedHandler = onTimerChangedExternally.bind(this);
+ const timerChangedHandler = onTimerChangedExternally.bind(this);
this.timerChangedHandler = timerChangedHandler;
events.on(serverNotifications, 'TimerCreated', timerChangedHandler);
events.on(serverNotifications, 'TimerCancelled', timerChangedHandler);
- var seriesTimerChangedHandler = onSeriesTimerChangedExternally.bind(this);
+ const seriesTimerChangedHandler = onSeriesTimerChangedExternally.bind(this);
this.seriesTimerChangedHandler = seriesTimerChangedHandler;
events.on(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler);
events.on(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler);
}
- function onManageRecordingClick(e) {
- var options = this.options;
- if (!this.TimerId || this.Status === 'Cancelled') {
- return;
- }
-
- var self = this;
- require(['recordingEditor'], function (recordingEditor) {
- recordingEditor.show(self.TimerId, options.serverId, {
- enableCancel: false
- }).then(function () {
- self.changed = true;
- });
- });
- }
-
- function onManageSeriesRecordingClick(e) {
- var options = this.options;
-
- if (!this.SeriesTimerId) {
- return;
- }
-
- var self = this;
-
- require(['seriesRecordingEditor'], function (seriesRecordingEditor) {
- seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, {
-
- enableCancel: false
-
- }).then(function () {
- self.changed = true;
- });
- });
- }
-
- function onRecordChange(e) {
- this.changed = true;
-
- var self = this;
- var options = this.options;
- var apiClient = connectionManager.getApiClient(options.serverId);
-
- var button = dom.parentWithTag(e.target, 'BUTTON');
- var isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
-
- var hasEnabledTimer = this.TimerId && this.Status !== 'Cancelled';
-
- if (isChecked) {
- if (!hasEnabledTimer) {
- loading.show();
- recordingHelper.createRecording(apiClient, options.programId, false).then(function () {
- events.trigger(self, 'recordingchanged');
- fetchData(self);
- loading.hide();
- });
- }
- } else {
- if (hasEnabledTimer) {
- loading.show();
- recordingHelper.cancelTimer(apiClient, this.TimerId, true).then(function () {
- events.trigger(self, 'recordingchanged');
- fetchData(self);
- loading.hide();
- });
- }
- }
- }
-
- function sendToast(msg) {
- require(['toast'], function (toast) {
- toast(msg);
- });
- }
-
- function onRecordSeriesChange(e) {
- this.changed = true;
-
- var self = this;
- var options = this.options;
- var apiClient = connectionManager.getApiClient(options.serverId);
-
- var button = dom.parentWithTag(e.target, 'BUTTON');
- var isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
-
- if (isChecked) {
- options.parent.querySelector('.recordSeriesContainer').classList.remove('hide');
- if (!this.SeriesTimerId) {
- var promise = this.TimerId ?
- recordingHelper.changeRecordingToSeries(apiClient, this.TimerId, options.programId) :
- recordingHelper.createRecording(apiClient, options.programId, true);
- promise.then(function () {
- fetchData(self);
- });
- }
- } else {
- if (this.SeriesTimerId) {
- apiClient.cancelLiveTvSeriesTimer(this.SeriesTimerId).then(function () {
- sendToast(globalize.translate('RecordingCancelled'));
- fetchData(self);
- });
- }
- }
- }
-
- RecordingEditor.prototype.embed = function () {
- var self = this;
+ embed() {
+ const self = this;
return new Promise(function (resolve, reject) {
- require(['text!./recordingfields.template.html'], function (template) {
- var options = self.options;
- var context = options.parent;
+ import('text!./recordingfields.template.html').then(({default: template}) => {
+ const options = self.options;
+ const context = options.parent;
context.innerHTML = globalize.translateHtml(template, 'core');
context.querySelector('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self));
@@ -224,29 +131,134 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
fetchData(self).then(resolve);
});
});
- };
+ }
- RecordingEditor.prototype.hasChanged = function () {
+ hasChanged() {
return this.changed;
- };
+ }
- RecordingEditor.prototype.refresh = function () {
+ refresh() {
fetchData(this);
- };
+ }
- RecordingEditor.prototype.destroy = function () {
- var timerChangedHandler = this.timerChangedHandler;
+ destroy() {
+ const timerChangedHandler = this.timerChangedHandler;
this.timerChangedHandler = null;
events.off(serverNotifications, 'TimerCreated', timerChangedHandler);
events.off(serverNotifications, 'TimerCancelled', timerChangedHandler);
- var seriesTimerChangedHandler = this.seriesTimerChangedHandler;
+ const seriesTimerChangedHandler = this.seriesTimerChangedHandler;
this.seriesTimerChangedHandler = null;
events.off(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler);
events.off(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler);
- };
+ }
+}
- return RecordingEditor;
-});
+function onManageRecordingClick(e) {
+ const options = this.options;
+ if (!this.TimerId || this.Status === 'Cancelled') {
+ return;
+ }
+
+ const self = this;
+ import('recordingEditor').then(({default: recordingEditor}) => {
+ recordingEditor.show(self.TimerId, options.serverId, {
+ enableCancel: false
+ }).then(function () {
+ self.changed = true;
+ });
+ });
+}
+
+function onManageSeriesRecordingClick(e) {
+ const options = this.options;
+
+ if (!this.SeriesTimerId) {
+ return;
+ }
+
+ const self = this;
+
+ import('seriesRecordingEditor').then(({default: seriesRecordingEditor}) => {
+ seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, {
+
+ enableCancel: false
+
+ }).then(function () {
+ self.changed = true;
+ });
+ });
+}
+
+function onRecordChange(e) {
+ this.changed = true;
+
+ const self = this;
+ const options = this.options;
+ const apiClient = connectionManager.getApiClient(options.serverId);
+
+ const button = dom.parentWithTag(e.target, 'BUTTON');
+ const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
+
+ const hasEnabledTimer = this.TimerId && this.Status !== 'Cancelled';
+
+ if (isChecked) {
+ if (!hasEnabledTimer) {
+ loading.show();
+ recordingHelper.createRecording(apiClient, options.programId, false).then(function () {
+ events.trigger(self, 'recordingchanged');
+ fetchData(self);
+ loading.hide();
+ });
+ }
+ } else {
+ if (hasEnabledTimer) {
+ loading.show();
+ recordingHelper.cancelTimer(apiClient, this.TimerId, true).then(function () {
+ events.trigger(self, 'recordingchanged');
+ fetchData(self);
+ loading.hide();
+ });
+ }
+ }
+}
+
+function sendToast(msg) {
+ import('toast').then(({default: toast}) => {
+ toast(msg);
+ });
+}
+
+function onRecordSeriesChange(e) {
+ this.changed = true;
+
+ const self = this;
+ const options = this.options;
+ const apiClient = connectionManager.getApiClient(options.serverId);
+
+ const button = dom.parentWithTag(e.target, 'BUTTON');
+ const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
+
+ if (isChecked) {
+ options.parent.querySelector('.recordSeriesContainer').classList.remove('hide');
+ if (!this.SeriesTimerId) {
+ const promise = this.TimerId ?
+ recordingHelper.changeRecordingToSeries(apiClient, this.TimerId, options.programId) :
+ recordingHelper.createRecording(apiClient, options.programId, true);
+ promise.then(function () {
+ fetchData(self);
+ });
+ }
+ } else {
+ if (this.SeriesTimerId) {
+ apiClient.cancelLiveTvSeriesTimer(this.SeriesTimerId).then(function () {
+ sendToast(globalize.translate('RecordingCancelled'));
+ fetchData(self);
+ });
+ }
+ }
+}
+
+export default RecordingEditor;
diff --git a/src/components/recordingcreator/recordinghelper.js b/src/components/recordingcreator/recordinghelper.js
index 4a0bdd9b0..13359de2b 100644
--- a/src/components/recordingcreator/recordinghelper.js
+++ b/src/components/recordingcreator/recordinghelper.js
@@ -1,192 +1,195 @@
-define(['globalize', 'loading', 'connectionManager'], function (globalize, loading, connectionManager) {
- 'use strict';
+import globalize from 'globalize';
+import loading from 'loading';
+import connectionManager from 'connectionManager';
- function changeRecordingToSeries(apiClient, timerId, programId, confirmTimerCancellation) {
- loading.show();
+/*eslint prefer-const: "error"*/
- return apiClient.getItem(apiClient.getCurrentUserId(), programId).then(function (item) {
- if (item.IsSeries) {
- // create series
- return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (timerDefaults) {
- return apiClient.createLiveTvSeriesTimer(timerDefaults).then(function () {
- loading.hide();
- sendToast(globalize.translate('SeriesRecordingScheduled'));
+function changeRecordingToSeries(apiClient, timerId, programId, confirmTimerCancellation) {
+ loading.show();
+
+ return apiClient.getItem(apiClient.getCurrentUserId(), programId).then(function (item) {
+ if (item.IsSeries) {
+ // create series
+ return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (timerDefaults) {
+ return apiClient.createLiveTvSeriesTimer(timerDefaults).then(function () {
+ loading.hide();
+ sendToast(globalize.translate('SeriesRecordingScheduled'));
+ });
+ });
+ } else {
+ // cancel
+ if (confirmTimerCancellation) {
+ return cancelTimerWithConfirmation(timerId, apiClient.serverId());
+ }
+
+ return cancelTimer(apiClient.serverId(), timerId, true);
+ }
+ });
+}
+
+function cancelTimerWithConfirmation(timerId, serverId) {
+ return new Promise(function (resolve, reject) {
+ import('confirm').then(({ default: confirm }) => {
+ confirm.default({
+
+ text: globalize.translate('MessageConfirmRecordingCancellation'),
+ primary: 'delete',
+ confirmText: globalize.translate('HeaderCancelRecording'),
+ cancelText: globalize.translate('HeaderKeepRecording')
+
+ }).then(function () {
+ loading.show();
+
+ const apiClient = connectionManager.getApiClient(serverId);
+ cancelTimer(apiClient, timerId, true).then(resolve, reject);
+ }, reject);
+ });
+ });
+}
+
+function cancelSeriesTimerWithConfirmation(timerId, serverId) {
+ return new Promise(function (resolve, reject) {
+ import('confirm').then(({ default: confirm }) => {
+ confirm.default({
+
+ text: globalize.translate('MessageConfirmRecordingCancellation'),
+ primary: 'delete',
+ confirmText: globalize.translate('HeaderCancelSeries'),
+ cancelText: globalize.translate('HeaderKeepSeries')
+
+ }).then(function () {
+ loading.show();
+
+ const apiClient = connectionManager.getApiClient(serverId);
+ apiClient.cancelLiveTvSeriesTimer(timerId).then(function () {
+ import('toast').then(({default: toast}) => {
+ toast(globalize.translate('SeriesCancelled'));
});
+
+ loading.hide();
+ resolve();
+ }, reject);
+ }, reject);
+ });
+ });
+}
+
+function cancelTimer(apiClient, timerId, hideLoading) {
+ loading.show();
+ return apiClient.cancelLiveTvTimer(timerId).then(function () {
+ if (hideLoading !== false) {
+ loading.hide();
+ sendToast(globalize.translate('RecordingCancelled'));
+ }
+ });
+}
+
+function createRecording(apiClient, programId, isSeries) {
+ loading.show();
+ return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (item) {
+ const promise = isSeries ?
+ apiClient.createLiveTvSeriesTimer(item) :
+ apiClient.createLiveTvTimer(item);
+
+ return promise.then(function () {
+ loading.hide();
+ sendToast(globalize.translate('RecordingScheduled'));
+ });
+ });
+}
+
+function sendToast(msg) {
+ import('toast').then(({ default: toast }) => {
+ toast(msg);
+ });
+}
+
+function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId) {
+ return new Promise(function (resolve, reject) {
+ import('dialog').then(({ default: dialog }) => {
+ const items = [];
+
+ items.push({
+ name: globalize.translate('HeaderKeepRecording'),
+ id: 'cancel',
+ type: 'submit'
+ });
+
+ if (timerStatus === 'InProgress') {
+ items.push({
+ name: globalize.translate('HeaderStopRecording'),
+ id: 'canceltimer',
+ type: 'cancel'
});
} else {
- // cancel
- if (confirmTimerCancellation) {
- return cancelTimerWithConfirmation(timerId, apiClient.serverId());
- }
-
- return cancelTimer(apiClient.serverId(), timerId, true);
+ items.push({
+ name: globalize.translate('HeaderCancelRecording'),
+ id: 'canceltimer',
+ type: 'cancel'
+ });
}
- });
- }
- function cancelTimerWithConfirmation(timerId, serverId) {
- return new Promise(function (resolve, reject) {
- require(['confirm'], function (confirm) {
- confirm.default({
-
- text: globalize.translate('MessageConfirmRecordingCancellation'),
- primary: 'delete',
- confirmText: globalize.translate('HeaderCancelRecording'),
- cancelText: globalize.translate('HeaderKeepRecording')
-
- }).then(function () {
- loading.show();
-
- var apiClient = connectionManager.getApiClient(serverId);
- cancelTimer(apiClient, timerId, true).then(resolve, reject);
- }, reject);
+ items.push({
+ name: globalize.translate('HeaderCancelSeries'),
+ id: 'cancelseriestimer',
+ type: 'cancel'
});
- });
- }
- function cancelSeriesTimerWithConfirmation(timerId, serverId) {
- return new Promise(function (resolve, reject) {
- require(['confirm'], function (confirm) {
- confirm.default({
+ dialog({
- text: globalize.translate('MessageConfirmRecordingCancellation'),
- primary: 'delete',
- confirmText: globalize.translate('HeaderCancelSeries'),
- cancelText: globalize.translate('HeaderKeepSeries')
+ text: globalize.translate('MessageConfirmRecordingCancellation'),
+ buttons: items
- }).then(function () {
+ }).then(function (result) {
+ const apiClient = connectionManager.getApiClient(serverId);
+
+ if (result === 'canceltimer') {
loading.show();
- var apiClient = connectionManager.getApiClient(serverId);
- apiClient.cancelLiveTvSeriesTimer(timerId).then(function () {
- require(['toast'], function (toast) {
+ cancelTimer(apiClient, timerId, true).then(resolve, reject);
+ } else if (result === 'cancelseriestimer') {
+ loading.show();
+
+ apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () {
+ import('toast').then(({ default: toast }) => {
toast(globalize.translate('SeriesCancelled'));
});
loading.hide();
resolve();
}, reject);
- }, reject);
- });
- });
- }
-
- function cancelTimer(apiClient, timerId, hideLoading) {
- loading.show();
- return apiClient.cancelLiveTvTimer(timerId).then(function () {
- if (hideLoading !== false) {
- loading.hide();
- sendToast(globalize.translate('RecordingCancelled'));
- }
- });
- }
-
- function createRecording(apiClient, programId, isSeries) {
- loading.show();
- return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (item) {
- var promise = isSeries ?
- apiClient.createLiveTvSeriesTimer(item) :
- apiClient.createLiveTvTimer(item);
-
- return promise.then(function () {
- loading.hide();
- sendToast(globalize.translate('RecordingScheduled'));
- });
- });
- }
-
- function sendToast(msg) {
- require(['toast'], function (toast) {
- toast(msg);
- });
- }
-
- function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId) {
- return new Promise(function (resolve, reject) {
- require(['dialog'], function (dialog) {
- var items = [];
-
- items.push({
- name: globalize.translate('HeaderKeepRecording'),
- id: 'cancel',
- type: 'submit'
- });
-
- if (timerStatus === 'InProgress') {
- items.push({
- name: globalize.translate('HeaderStopRecording'),
- id: 'canceltimer',
- type: 'cancel'
- });
} else {
- items.push({
- name: globalize.translate('HeaderCancelRecording'),
- id: 'canceltimer',
- type: 'cancel'
- });
+ resolve();
}
-
- items.push({
- name: globalize.translate('HeaderCancelSeries'),
- id: 'cancelseriestimer',
- type: 'cancel'
- });
-
- dialog({
-
- text: globalize.translate('MessageConfirmRecordingCancellation'),
- buttons: items
-
- }).then(function (result) {
- var apiClient = connectionManager.getApiClient(serverId);
-
- if (result === 'canceltimer') {
- loading.show();
-
- cancelTimer(apiClient, timerId, true).then(resolve, reject);
- } else if (result === 'cancelseriestimer') {
- loading.show();
-
- apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () {
- require(['toast'], function (toast) {
- toast(globalize.translate('SeriesCancelled'));
- });
-
- loading.hide();
- resolve();
- }, reject);
- } else {
- resolve();
- }
- }, reject);
- });
+ }, reject);
});
- }
+ });
+}
- function toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId) {
- var apiClient = connectionManager.getApiClient(serverId);
- var hasTimer = timerId && timerStatus !== 'Cancelled';
- if (seriesTimerId && hasTimer) {
- // cancel
- return showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId);
- } else if (hasTimer && programId) {
- // change to series recording, if possible
- // otherwise cancel individual recording
- return changeRecordingToSeries(apiClient, timerId, programId, true);
- } else if (programId) {
- // schedule recording
- return createRecording(apiClient, programId);
- } else {
- return Promise.reject();
- }
+function toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId) {
+ const apiClient = connectionManager.getApiClient(serverId);
+ const hasTimer = timerId && timerStatus !== 'Cancelled';
+ if (seriesTimerId && hasTimer) {
+ // cancel
+ return showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId);
+ } else if (hasTimer && programId) {
+ // change to series recording, if possible
+ // otherwise cancel individual recording
+ return changeRecordingToSeries(apiClient, timerId, programId, true);
+ } else if (programId) {
+ // schedule recording
+ return createRecording(apiClient, programId);
+ } else {
+ return Promise.reject();
}
+}
+
+export default {
+ cancelTimer: cancelTimer,
+ createRecording: createRecording,
+ changeRecordingToSeries: changeRecordingToSeries,
+ toggleRecording: toggleRecording,
+ cancelTimerWithConfirmation: cancelTimerWithConfirmation,
+ cancelSeriesTimerWithConfirmation: cancelSeriesTimerWithConfirmation
+};
- return {
- cancelTimer: cancelTimer,
- createRecording: createRecording,
- changeRecordingToSeries: changeRecordingToSeries,
- toggleRecording: toggleRecording,
- cancelTimerWithConfirmation: cancelTimerWithConfirmation,
- cancelSeriesTimerWithConfirmation: cancelSeriesTimerWithConfirmation
- };
-});
diff --git a/src/components/recordingcreator/seriesrecordingeditor.js b/src/components/recordingcreator/seriesrecordingeditor.js
index ea20c7267..48fbbcf22 100644
--- a/src/components/recordingcreator/seriesrecordingeditor.js
+++ b/src/components/recordingcreator/seriesrecordingeditor.js
@@ -1,141 +1,200 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'datetime', 'scrollStyles', 'emby-button', 'emby-checkbox', 'emby-input', 'emby-select', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader, datetime) {
- 'use strict';
+import dialogHelper from 'dialogHelper';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+import loading from 'loading';
+import scrollHelper from 'scrollHelper';
+import datetime from 'datetime';
+import 'scrollStyles';
+import 'emby-button';
+import 'emby-checkbox';
+import 'emby-input';
+import 'emby-select';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'css!./recordingcreator';
+import 'material-icons';
+import 'flexStyles';
- var currentDialog;
- var recordingUpdated = false;
- var recordingDeleted = false;
- var currentItemId;
- var currentServerId;
+/*eslint prefer-const: "error"*/
- function deleteTimer(apiClient, timerId) {
- return new Promise(function (resolve, reject) {
- require(['recordingHelper'], function (recordingHelper) {
- recordingHelper.cancelSeriesTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
- });
+let currentDialog;
+let recordingUpdated = false;
+let recordingDeleted = false;
+let currentItemId;
+let currentServerId;
+
+function deleteTimer(apiClient, timerId) {
+ return new Promise(function (resolve, reject) {
+ import('recordingHelper').then(({ default: recordingHelper }) => {
+ recordingHelper.cancelSeriesTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
});
+ });
+}
+
+function renderTimer(context, item) {
+ context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
+ context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
+
+ context.querySelector('.selectChannels').value = item.RecordAnyChannel ? 'all' : 'one';
+ context.querySelector('.selectAirTime').value = item.RecordAnyTime ? 'any' : 'original';
+
+ context.querySelector('.selectShowType').value = item.RecordNewOnly ? 'new' : 'all';
+ context.querySelector('.chkSkipEpisodesInLibrary').checked = item.SkipEpisodesInLibrary;
+ context.querySelector('.selectKeepUpTo').value = item.KeepUpTo || 0;
+
+ if (item.ChannelName || item.ChannelNumber) {
+ context.querySelector('.optionChannelOnly').innerHTML = globalize.translate('ChannelNameOnly', item.ChannelName || item.ChannelNumber);
+ } else {
+ context.querySelector('.optionChannelOnly').innerHTML = globalize.translate('OneChannel');
}
- function renderTimer(context, item, apiClient) {
- context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
- context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
+ context.querySelector('.optionAroundTime').innerHTML = globalize.translate('AroundTime', datetime.getDisplayTime(datetime.parseISO8601Date(item.StartDate)));
- context.querySelector('.selectChannels').value = item.RecordAnyChannel ? 'all' : 'one';
- context.querySelector('.selectAirTime').value = item.RecordAnyTime ? 'any' : 'original';
+ loading.hide();
+}
- context.querySelector('.selectShowType').value = item.RecordNewOnly ? 'new' : 'all';
- context.querySelector('.chkSkipEpisodesInLibrary').checked = item.SkipEpisodesInLibrary;
- context.querySelector('.selectKeepUpTo').value = item.KeepUpTo || 0;
+function closeDialog(isDeleted) {
+ recordingUpdated = true;
+ recordingDeleted = isDeleted;
- if (item.ChannelName || item.ChannelNumber) {
- context.querySelector('.optionChannelOnly').innerHTML = globalize.translate('ChannelNameOnly', item.ChannelName || item.ChannelNumber);
- } else {
- context.querySelector('.optionChannelOnly').innerHTML = globalize.translate('OneChannel');
- }
+ dialogHelper.close(currentDialog);
+}
- context.querySelector('.optionAroundTime').innerHTML = globalize.translate('AroundTime', datetime.getDisplayTime(datetime.parseISO8601Date(item.StartDate)));
+function onSubmit(e) {
+ const form = this;
+ const apiClient = connectionManager.getApiClient(currentServerId);
+
+ apiClient.getLiveTvSeriesTimer(currentItemId).then(function (item) {
+ item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
+ item.PostPaddingSeconds = form.querySelector('#txtPostPaddingMinutes').value * 60;
+ item.RecordAnyChannel = form.querySelector('.selectChannels').value === 'all';
+ item.RecordAnyTime = form.querySelector('.selectAirTime').value === 'any';
+ item.RecordNewOnly = form.querySelector('.selectShowType').value === 'new';
+ item.SkipEpisodesInLibrary = form.querySelector('.chkSkipEpisodesInLibrary').checked;
+ item.KeepUpTo = form.querySelector('.selectKeepUpTo').value;
+
+ apiClient.updateLiveTvSeriesTimer(item);
+ });
+
+ e.preventDefault();
+
+ // Disable default form submission
+ return false;
+}
+
+function init(context) {
+ fillKeepUpTo(context);
+
+ context.querySelector('.btnCancel').addEventListener('click', function () {
+ closeDialog(false);
+ });
+
+ context.querySelector('.btnCancelRecording').addEventListener('click', function () {
+ const apiClient = connectionManager.getApiClient(currentServerId);
+ deleteTimer(apiClient, currentItemId).then(function () {
+ closeDialog(true);
+ });
+ });
+
+ context.querySelector('form').addEventListener('submit', onSubmit);
+}
+
+function reload(context, id) {
+ const apiClient = connectionManager.getApiClient(currentServerId);
+
+ loading.show();
+ if (typeof id === 'string') {
+ currentItemId = id;
+
+ apiClient.getLiveTvSeriesTimer(id).then(function (result) {
+ renderTimer(context, result);
+ loading.hide();
+ });
+ } else if (id) {
+ currentItemId = id.Id;
+
+ renderTimer(context, id);
loading.hide();
}
+}
- function closeDialog(isDeleted) {
- recordingUpdated = true;
- recordingDeleted = isDeleted;
+function fillKeepUpTo(context) {
+ let html = '';
- dialogHelper.close(currentDialog);
- }
+ for (let i = 0; i <= 50; i++) {
+ let text;
- function onSubmit(e) {
- var form = this;
-
- var apiClient = connectionManager.getApiClient(currentServerId);
-
- apiClient.getLiveTvSeriesTimer(currentItemId).then(function (item) {
- item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
- item.PostPaddingSeconds = form.querySelector('#txtPostPaddingMinutes').value * 60;
- item.RecordAnyChannel = form.querySelector('.selectChannels').value === 'all';
- item.RecordAnyTime = form.querySelector('.selectAirTime').value === 'any';
- item.RecordNewOnly = form.querySelector('.selectShowType').value === 'new';
- item.SkipEpisodesInLibrary = form.querySelector('.chkSkipEpisodesInLibrary').checked;
- item.KeepUpTo = form.querySelector('.selectKeepUpTo').value;
-
- apiClient.updateLiveTvSeriesTimer(item);
- });
-
- e.preventDefault();
-
- // Disable default form submission
- return false;
- }
-
- function init(context) {
- fillKeepUpTo(context);
-
- context.querySelector('.btnCancel').addEventListener('click', function () {
- closeDialog(false);
- });
-
- context.querySelector('.btnCancelRecording').addEventListener('click', function () {
- var apiClient = connectionManager.getApiClient(currentServerId);
- deleteTimer(apiClient, currentItemId).then(function () {
- closeDialog(true);
- });
- });
-
- context.querySelector('form').addEventListener('submit', onSubmit);
- }
-
- function reload(context, id) {
- var apiClient = connectionManager.getApiClient(currentServerId);
-
- loading.show();
- if (typeof id === 'string') {
- currentItemId = id;
-
- apiClient.getLiveTvSeriesTimer(id).then(function (result) {
- renderTimer(context, result, apiClient);
- loading.hide();
- });
- } else if (id) {
- currentItemId = id.Id;
-
- renderTimer(context, id, apiClient);
- loading.hide();
- }
- }
-
- function fillKeepUpTo(context) {
- var html = '';
-
- for (var i = 0; i <= 50; i++) {
- var text;
-
- if (i === 0) {
- text = globalize.translate('AsManyAsPossible');
- } else if (i === 1) {
- text = globalize.translate('ValueOneEpisode');
- } else {
- text = globalize.translate('ValueEpisodeCount', i);
- }
-
- html += '';
+ if (i === 0) {
+ text = globalize.translate('AsManyAsPossible');
+ } else if (i === 1) {
+ text = globalize.translate('ValueOneEpisode');
+ } else {
+ text = globalize.translate('ValueEpisodeCount', i);
}
- context.querySelector('.selectKeepUpTo').innerHTML = html;
+ html += '';
}
- function onFieldChange(e) {
- this.querySelector('.btnSubmit').click();
- }
+ context.querySelector('.selectKeepUpTo').innerHTML = html;
+}
- function embed(itemId, serverId, options) {
+function onFieldChange() {
+ this.querySelector('.btnSubmit').click();
+}
+
+function embed(itemId, serverId, options) {
+ recordingUpdated = false;
+ recordingDeleted = false;
+ currentServerId = serverId;
+ loading.show();
+ options = options || {};
+
+ import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => {
+ const dialogOptions = {
+ removeOnClose: true,
+ scrollY: false
+ };
+
+ if (layoutManager.tv) {
+ dialogOptions.size = 'fullscreen';
+ } else {
+ dialogOptions.size = 'small';
+ }
+
+ const dlg = options.context;
+
+ dlg.classList.add('hide');
+ dlg.innerHTML = globalize.translateHtml(template, 'core');
+
+ dlg.querySelector('.formDialogHeader').classList.add('hide');
+ dlg.querySelector('.formDialogFooter').classList.add('hide');
+ dlg.querySelector('.formDialogContent').className = '';
+ dlg.querySelector('.dialogContentInner').className = '';
+ dlg.classList.remove('hide');
+
+ dlg.removeEventListener('change', onFieldChange);
+ dlg.addEventListener('change', onFieldChange);
+
+ currentDialog = dlg;
+
+ init(dlg);
+
+ reload(dlg, itemId);
+ });
+}
+
+function showEditor(itemId, serverId, options) {
+ return new Promise(function (resolve, reject) {
recordingUpdated = false;
recordingDeleted = false;
currentServerId = serverId;
loading.show();
options = options || {};
- require(['text!./seriesrecordingeditor.template.html'], function (template) {
- var dialogOptions = {
+ import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => {
+ const dialogOptions = {
removeOnClose: true,
scrollY: false
};
@@ -146,101 +205,58 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
dialogOptions.size = 'small';
}
- var dlg = options.context;
+ const dlg = dialogHelper.createDialog(dialogOptions);
- dlg.classList.add('hide');
- dlg.innerHTML = globalize.translateHtml(template, 'core');
+ dlg.classList.add('formDialog');
+ dlg.classList.add('recordingDialog');
- dlg.querySelector('.formDialogHeader').classList.add('hide');
- dlg.querySelector('.formDialogFooter').classList.add('hide');
- dlg.querySelector('.formDialogContent').className = '';
- dlg.querySelector('.dialogContentInner').className = '';
- dlg.classList.remove('hide');
+ if (!layoutManager.tv) {
+ dlg.style['min-width'] = '20%';
+ }
- dlg.removeEventListener('change', onFieldChange);
- dlg.addEventListener('change', onFieldChange);
+ let html = '';
+
+ html += globalize.translateHtml(template, 'core');
+
+ dlg.innerHTML = html;
+
+ if (options.enableCancel === false) {
+ dlg.querySelector('.formDialogFooter').classList.add('hide');
+ }
currentDialog = dlg;
+ dlg.addEventListener('closing', function () {
+ if (!recordingDeleted) {
+ this.querySelector('.btnSubmit').click();
+ }
+ });
+
+ dlg.addEventListener('close', function () {
+ if (recordingUpdated) {
+ resolve({
+ updated: true,
+ deleted: recordingDeleted
+ });
+ } else {
+ reject();
+ }
+ });
+
+ if (layoutManager.tv) {
+ scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+ }
+
init(dlg);
reload(dlg, itemId);
+
+ dialogHelper.open(dlg);
});
- }
+ });
+}
- function showEditor(itemId, serverId, options) {
- return new Promise(function (resolve, reject) {
- recordingUpdated = false;
- recordingDeleted = false;
- currentServerId = serverId;
- loading.show();
- options = options || {};
-
- require(['text!./seriesrecordingeditor.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');
-
- if (!layoutManager.tv) {
- dlg.style['min-width'] = '20%';
- }
-
- var html = '';
-
- html += globalize.translateHtml(template, 'core');
-
- dlg.innerHTML = html;
-
- if (options.enableCancel === false) {
- dlg.querySelector('.formDialogFooter').classList.add('hide');
- }
-
- currentDialog = dlg;
-
- dlg.addEventListener('closing', function () {
- if (!recordingDeleted) {
- this.querySelector('.btnSubmit').click();
- }
- });
-
- dlg.addEventListener('close', function () {
- if (recordingUpdated) {
- resolve({
- updated: true,
- deleted: recordingDeleted
- });
- } else {
- reject();
- }
- });
-
- if (layoutManager.tv) {
- scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
- }
-
- init(dlg);
-
- reload(dlg, itemId);
-
- dialogHelper.open(dlg);
- });
- });
- }
-
- return {
- show: showEditor,
- embed: embed
- };
-});
+export default {
+ show: showEditor,
+ embed: embed
+};
diff --git a/src/components/refreshdialog/refreshdialog.js b/src/components/refreshdialog/refreshdialog.js
index 40e118350..1ec051744 100644
--- a/src/components/refreshdialog/refreshdialog.js
+++ b/src/components/refreshdialog/refreshdialog.js
@@ -1,94 +1,108 @@
-define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'emby-input', 'emby-checkbox', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (dom, shell, dialogHelper, loading, layoutManager, connectionManager, appRouter, globalize) {
- 'use strict';
+import dom from 'dom';
+import dialogHelper from 'dialogHelper';
+import loading from 'loading';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
+import 'emby-input';
+import 'emby-checkbox';
+import 'paper-icon-button-light';
+import 'emby-select';
+import 'material-icons';
+import 'css!./../formdialog';
+import 'emby-button';
- function getEditorHtml() {
- var html = '';
+/*eslint prefer-const: "error"*/
- html += '
@@ -65,7 +65,7 @@
diff --git a/src/components/tvproviders/xmltv.js b/src/components/tvproviders/xmltv.js
index 054c5b640..a75b29eeb 100644
--- a/src/components/tvproviders/xmltv.js
+++ b/src/components/tvproviders/xmltv.js
@@ -1,189 +1,193 @@
-define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listViewStyle', 'paper-icon-button-light'], function ($, loading, globalize) {
- 'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import globalize from 'globalize';
+import 'emby-checkbox';
+import 'emby-input';
+import 'listViewStyle';
+import 'paper-icon-button-light';
- return function (page, providerId, options) {
- function getListingProvider(config, id) {
- if (config && id) {
- var result = config.ListingProviders.filter(function (provider) {
- return provider.Id === id;
- })[0];
+export default function (page, providerId, options) {
+ function getListingProvider(config, id) {
+ if (config && id) {
+ const result = config.ListingProviders.filter(function (provider) {
+ return provider.Id === id;
+ })[0];
- if (result) {
- return Promise.resolve(result);
- }
-
- return getListingProvider();
+ if (result) {
+ return Promise.resolve(result);
}
- return ApiClient.getJSON(ApiClient.getUrl('LiveTv/ListingProviders/Default'));
+ return getListingProvider();
}
- function reload() {
- loading.show();
- ApiClient.getNamedConfiguration('livetv').then(function (config) {
- getListingProvider(config, providerId).then(function (info) {
- page.querySelector('.txtPath').value = info.Path || '';
- page.querySelector('.txtKids').value = (info.KidsCategories || []).join('|');
- page.querySelector('.txtNews').value = (info.NewsCategories || []).join('|');
- page.querySelector('.txtSports').value = (info.SportsCategories || []).join('|');
- page.querySelector('.txtMovies').value = (info.MovieCategories || []).join('|');
- page.querySelector('.txtMoviePrefix').value = info.MoviePrefix || '';
- page.querySelector('.txtUserAgent').value = info.UserAgent || '';
- page.querySelector('.chkAllTuners').checked = info.EnableAllTuners;
+ return ApiClient.getJSON(ApiClient.getUrl('LiveTv/ListingProviders/Default'));
+ }
- if (page.querySelector('.chkAllTuners').checked) {
- page.querySelector('.selectTunersSection').classList.add('hide');
- } else {
- page.querySelector('.selectTunersSection').classList.remove('hide');
- }
+ function reload() {
+ loading.show();
+ ApiClient.getNamedConfiguration('livetv').then(function (config) {
+ getListingProvider(config, providerId).then(function (info) {
+ page.querySelector('.txtPath').value = info.Path || '';
+ page.querySelector('.txtKids').value = (info.KidsCategories || []).join('|');
+ page.querySelector('.txtNews').value = (info.NewsCategories || []).join('|');
+ page.querySelector('.txtSports').value = (info.SportsCategories || []).join('|');
+ page.querySelector('.txtMovies').value = (info.MovieCategories || []).join('|');
+ page.querySelector('.txtMoviePrefix').value = info.MoviePrefix || '';
+ page.querySelector('.txtUserAgent').value = info.UserAgent || '';
+ page.querySelector('.chkAllTuners').checked = info.EnableAllTuners;
- refreshTunerDevices(page, info, config.TunerHosts);
- loading.hide();
- });
- });
- }
-
- function getCategories(txtInput) {
- var value = txtInput.value;
-
- if (value) {
- return value.split('|');
- }
-
- return [];
- }
-
- function submitListingsForm() {
- loading.show();
- var id = providerId;
- ApiClient.getNamedConfiguration('livetv').then(function (config) {
- var info = config.ListingProviders.filter(function (provider) {
- return provider.Id === id;
- })[0] || {};
- info.Type = 'xmltv';
- info.Path = page.querySelector('.txtPath').value;
- info.MoviePrefix = page.querySelector('.txtMoviePrefix').value || null;
- info.UserAgent = page.querySelector('.txtUserAgent').value || null;
- info.MovieCategories = getCategories(page.querySelector('.txtMovies'));
- info.KidsCategories = getCategories(page.querySelector('.txtKids'));
- info.NewsCategories = getCategories(page.querySelector('.txtNews'));
- info.SportsCategories = getCategories(page.querySelector('.txtSports'));
- info.EnableAllTuners = page.querySelector('.chkAllTuners').checked;
- info.EnabledTuners = info.EnableAllTuners ? [] : $('.chkTuner', page).get().filter(function (tuner) {
- return tuner.checked;
- }).map(function (tuner) {
- return tuner.getAttribute('data-id');
- });
- ApiClient.ajax({
- type: 'POST',
- url: ApiClient.getUrl('LiveTv/ListingProviders', {
- ValidateListings: true
- }),
- data: JSON.stringify(info),
- contentType: 'application/json'
- }).then(function (result) {
- loading.hide();
-
- if (false !== options.showConfirmation) {
- Dashboard.processServerConfigurationUpdateResult();
- }
-
- Events.trigger(self, 'submitted');
- }, function () {
- loading.hide();
- Dashboard.alert({
- message: globalize.translate('ErrorAddingXmlTvFile')
- });
- });
- });
- }
-
- function getTunerName(providerId) {
- switch (providerId = providerId.toLowerCase()) {
- case 'm3u':
- return 'M3U Playlist';
- case 'hdhomerun':
- return 'HDHomerun';
- case 'satip':
- return 'DVB';
- default:
- return 'Unknown';
- }
- }
-
- function refreshTunerDevices(page, providerInfo, devices) {
- var html = '';
-
- for (var i = 0, length = devices.length; i < length; i++) {
- var device = devices[i];
- html += '';
html += '';
diff --git a/src/components/collectionEditor/collectionEditor.js b/src/components/collectionEditor/collectionEditor.js
index a115b86a8..dd8b3d683 100644
--- a/src/components/collectionEditor/collectionEditor.js
+++ b/src/components/collectionEditor/collectionEditor.js
@@ -200,7 +200,7 @@ import 'flexStyles';
}
function centerFocus(elem, horiz, on) {
- import('scrollHelper').then(scrollHelper => {
+ import('scrollHelper').then((scrollHelper) => {
const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
});
diff --git a/src/components/dialogHelper/dialogHelper.js b/src/components/dialogHelper/dialogHelper.js
index 1f11d8a19..b9256714f 100644
--- a/src/components/dialogHelper/dialogHelper.js
+++ b/src/components/dialogHelper/dialogHelper.js
@@ -354,7 +354,7 @@ import 'scrollStyles';
}
function centerFocus(elem, horiz, on) {
- import('scrollHelper').then(scrollHelper => {
+ import('scrollHelper').then((scrollHelper) => {
const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
});
@@ -375,7 +375,7 @@ import 'scrollStyles';
dlg.setAttribute('data-lockscroll', 'true');
}
- if (options.enableHistory !== false && appRouter.enableNativeHistory()) {
+ if (options.enableHistory !== false) {
dlg.setAttribute('data-history', 'true');
}
@@ -391,11 +391,8 @@ import 'scrollStyles';
dlg.setAttribute('data-autofocus', 'true');
}
- let defaultEntryAnimation;
- let defaultExitAnimation;
-
- defaultEntryAnimation = 'scaleup';
- defaultExitAnimation = 'scaledown';
+ const defaultEntryAnimation = 'scaleup';
+ const defaultExitAnimation = 'scaledown';
const entryAnimation = options.entryAnimation || defaultEntryAnimation;
const exitAnimation = options.exitAnimation || defaultExitAnimation;
diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js
index 41744bdcb..5c44db3b1 100644
--- a/src/components/directorybrowser/directorybrowser.js
+++ b/src/components/directorybrowser/directorybrowser.js
@@ -166,10 +166,10 @@ import 'emby-button';
return apiClient.ajax({
type: 'POST',
url: apiClient.getUrl('Environment/ValidatePath'),
- data: {
+ data: JSON.stringify({
ValidateWriteable: validateWriteable,
Path: path
- }
+ })
}).catch(response => {
if (response) {
if (response.status === 404) {
diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js
index ba78ab99e..ae7647f98 100644
--- a/src/components/displaySettings/displaySettings.js
+++ b/src/components/displaySettings/displaySettings.js
@@ -1,6 +1,5 @@
import browser from 'browser';
import layoutManager from 'layoutManager';
-import appSettings from 'appSettings';
import pluginManager from 'pluginManager';
import appHost from 'apphost';
import focusManager from 'focusManager';
@@ -16,17 +15,22 @@ import 'emby-button';
/* eslint-disable indent */
- function fillThemes(select, isDashboard) {
- select.innerHTML = skinManager.getThemes().map(t => {
- let value = t.id;
- if (t.isDefault && !isDashboard) {
- value = '';
- } else if (t.isDefaultServerDashboard && isDashboard) {
- value = '';
- }
+ function fillThemes(context, userSettings) {
+ const select = context.querySelector('#selectTheme');
- return ``;
- }).join('');
+ skinManager.getThemes().then(themes => {
+ select.innerHTML = themes.map(t => {
+ return ``;
+ }).join('');
+
+ // get default theme
+ var defaultTheme = themes.find(theme => {
+ return theme.default;
+ });
+
+ // set the current theme
+ select.value = userSettings.theme() || defaultTheme.id;
+ });
}
function loadScreensavers(context, userSettings) {
@@ -46,6 +50,7 @@ import 'emby-button';
selectScreensaver.innerHTML = options.map(o => {
return ``;
}).join('');
+
selectScreensaver.value = userSettings.screensaver();
if (!selectScreensaver.value) {
@@ -54,57 +59,6 @@ import 'emby-button';
}
}
- function loadSoundEffects(context, userSettings) {
- const selectSoundEffects = context.querySelector('.selectSoundEffects');
- const options = pluginManager.ofType('soundeffects').map(plugin => {
- return {
- name: plugin.name,
- value: plugin.id
- };
- });
-
- options.unshift({
- name: globalize.translate('None'),
- value: 'none'
- });
-
- selectSoundEffects.innerHTML = options.map(o => {
- return ``;
- }).join('');
- selectSoundEffects.value = userSettings.soundEffects();
-
- if (!selectSoundEffects.value) {
- // TODO: set the default instead of none
- selectSoundEffects.value = 'none';
- }
- }
-
- function loadSkins(context, userSettings) {
- const selectSkin = context.querySelector('.selectSkin');
-
- const options = pluginManager.ofType('skin').map(plugin => {
- return {
- name: plugin.name,
- value: plugin.id
- };
- });
-
- selectSkin.innerHTML = options.map(o => {
- return ``;
- }).join('');
- selectSkin.value = userSettings.skin();
-
- if (!selectSkin.value && options.length) {
- selectSkin.value = options[0].value;
- }
-
- if (options.length > 1 && appHost.supports('skins')) {
- context.querySelector('.selectSkinContainer').classList.remove('hide');
- } else {
- context.querySelector('.selectSkinContainer').classList.add('hide');
- }
- }
-
function showOrHideMissingEpisodesField(context) {
if (browser.tizen || browser.web0s) {
context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide');
@@ -115,12 +69,6 @@ import 'emby-button';
}
function loadForm(context, user, userSettings) {
- if (user.Policy.IsAdministrator) {
- context.querySelector('.selectDashboardThemeContainer').classList.remove('hide');
- } else {
- context.querySelector('.selectDashboardThemeContainer').classList.add('hide');
- }
-
if (appHost.supports('displaylanguage')) {
context.querySelector('.languageSection').classList.remove('hide');
} else {
@@ -139,18 +87,6 @@ import 'emby-button';
context.querySelector('.learnHowToContributeContainer').classList.add('hide');
}
- if (appHost.supports('runatstartup')) {
- context.querySelector('.fldAutorun').classList.remove('hide');
- } else {
- context.querySelector('.fldAutorun').classList.add('hide');
- }
-
- if (appHost.supports('soundeffects')) {
- context.querySelector('.fldSoundEffects').classList.remove('hide');
- } else {
- context.querySelector('.fldSoundEffects').classList.add('hide');
- }
-
if (appHost.supports('screensaver')) {
context.querySelector('.selectScreensaverContainer').classList.remove('hide');
} else {
@@ -173,16 +109,8 @@ import 'emby-button';
context.querySelector('.fldThemeVideo').classList.add('hide');
}
- context.querySelector('.chkRunAtStartup').checked = appSettings.runAtStartup();
-
- const selectTheme = context.querySelector('#selectTheme');
- const selectDashboardTheme = context.querySelector('#selectDashboardTheme');
-
- fillThemes(selectTheme);
- fillThemes(selectDashboardTheme, true);
+ fillThemes(context, userSettings);
loadScreensavers(context, userSettings);
- loadSoundEffects(context, userSettings);
- loadSkins(context, userSettings);
context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
@@ -198,9 +126,6 @@ import 'emby-button';
context.querySelector('#txtLibraryPageSize').value = userSettings.libraryPageSize();
- selectDashboardTheme.value = userSettings.dashboardTheme() || '';
- selectTheme.value = userSettings.theme() || '';
-
context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || '';
showOrHideMissingEpisodesField(context);
@@ -209,8 +134,6 @@ import 'emby-button';
}
function saveUser(context, user, userSettingsInstance, apiClient) {
- appSettings.runAtStartup(context.querySelector('.chkRunAtStartup').checked);
-
user.Configuration.DisplayMissingEpisodes = context.querySelector('.chkDisplayMissingEpisodes').checked;
if (appHost.supports('displaylanguage')) {
@@ -221,15 +144,11 @@ import 'emby-button';
userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked);
userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked);
- userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value);
userSettingsInstance.theme(context.querySelector('#selectTheme').value);
- userSettingsInstance.soundEffects(context.querySelector('.selectSoundEffects').value);
userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value);
userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value);
- userSettingsInstance.skin(context.querySelector('.selectSkin').value);
-
userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked);
userSettingsInstance.enableBlurhash(context.querySelector('#chkBlurhash').checked);
userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked);
diff --git a/src/components/displaySettings/displaySettings.template.html b/src/components/displaySettings/displaySettings.template.html
index ab01b4b6a..e751ce56c 100644
--- a/src/components/displaySettings/displaySettings.template.html
+++ b/src/components/displaySettings/displaySettings.template.html
@@ -1,5 +1,4 @@
-
-
${LabelLibraryPageSizeHelp}
@@ -159,9 +146,9 @@
-
${EnableBlurhashHelp}
+ ${EnableBlurHashHelp}
@@ -175,7 +162,7 @@
@@ -196,13 +183,6 @@
-
-
';
}
@@ -291,13 +291,13 @@ import 'emby-input';
const btnSortable = elem.querySelector('.btnSortable');
const inner = btnSortable.querySelector('.material-icons');
if (elem.previousSibling) {
- btnSortable.title = globalize.translate('ButtonUp');
+ btnSortable.title = globalize.translate('Up');
btnSortable.classList.add('btnSortableMoveUp');
btnSortable.classList.remove('btnSortableMoveDown');
inner.classList.remove('keyboard_arrow_down');
inner.classList.add('keyboard_arrow_up');
} else {
- btnSortable.title = globalize.translate('ButtonDown');
+ btnSortable.title = globalize.translate('Down');
btnSortable.classList.remove('btnSortableMoveUp');
btnSortable.classList.add('btnSortableMoveDown');
inner.classList.remove('keyboard_arrow_up');
@@ -362,7 +362,7 @@ import 'emby-input';
TypeOptions: []
};
currentAvailableOptions = null;
- const isNewLibrary = null === libraryOptions;
+ const isNewLibrary = libraryOptions === null;
isNewLibrary && parent.classList.add('newlibrary');
const response = await fetch('components/libraryoptionseditor/libraryoptionseditor.template.html');
const template = await response.text();
@@ -578,7 +578,7 @@ import 'emby-input';
parent.querySelector('#chkSkipIfAudioTrackPresent').checked = options.SkipSubtitlesIfAudioTrackMatches;
parent.querySelector('#chkRequirePerfectMatch').checked = options.RequirePerfectSubtitleMatch;
Array.prototype.forEach.call(parent.querySelectorAll('.chkMetadataSaver'), elem => {
- elem.checked = options.MetadataSavers ? options.MetadataSavers.includes(elem.getAttribute('data-pluginname')) : 'true' === elem.getAttribute('data-defaultenabled');
+ elem.checked = options.MetadataSavers ? options.MetadataSavers.includes(elem.getAttribute('data-pluginname')) : elem.getAttribute('data-defaultenabled') === 'true';
});
Array.prototype.forEach.call(parent.querySelectorAll('.chkSubtitleLanguage'), elem => {
elem.checked = !!options.SubtitleDownloadLanguages && options.SubtitleDownloadLanguages.includes(elem.getAttribute('data-lang'));
diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js
index 6b2015913..11e8e953a 100644
--- a/src/components/listview/listview.js
+++ b/src/components/listview/listview.js
@@ -81,7 +81,7 @@ import 'emby-playstatebutton';
let itemId;
const options = {
- maxWidth: width * 2,
+ maxWidth: width,
type: 'Primary'
};
@@ -108,7 +108,7 @@ import 'emby-playstatebutton';
function getChannelImageUrl(item, width) {
const apiClient = connectionManager.getApiClient(item.ServerId);
const options = {
- maxWidth: width * 2,
+ maxWidth: width,
type: 'Primary'
};
diff --git a/src/components/loading/loading.js b/src/components/loading/loading.js
index 9f86ba452..823761137 100644
--- a/src/components/loading/loading.js
+++ b/src/components/loading/loading.js
@@ -1,78 +1,74 @@
-define(['css!./loading'], function () {
- 'use strict';
+import 'css!./loading';
- var loadingElem;
- var layer1;
- var layer2;
- var layer3;
- var layer4;
- var circleLefts;
- var circleRights;
+let loadingElem;
+let layer1;
+let layer2;
+let layer3;
+let layer4;
+let circleLefts;
+let circleRights;
- return {
- show: function () {
- var elem = loadingElem;
+export function show() {
+ let elem = loadingElem;
- if (!elem) {
- elem = document.createElement('div');
- loadingElem = elem;
+ if (!elem) {
+ elem = document.createElement('div');
+ loadingElem = elem;
- elem.classList.add('docspinner');
- elem.classList.add('mdl-spinner');
+ elem.classList.add('docspinner');
+ elem.classList.add('mdl-spinner');
- elem.innerHTML = '${EnableThemeVideosHelp}
-
diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.js b/src/components/mediaLibraryEditor/mediaLibraryEditor.js
index 1cee6984d..13d264f4c 100644
--- a/src/components/mediaLibraryEditor/mediaLibraryEditor.js
+++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.js
@@ -76,7 +76,7 @@ import 'flexStyles';
confirm({
title: globalize.translate('HeaderRemoveMediaLocation'),
text: globalize.translate('MessageConfirmRemoveMediaLocation'),
- confirmText: globalize.translate('ButtonDelete'),
+ confirmText: globalize.translate('Delete'),
primary: 'delete'
}).then(() => {
const refreshAfterChange = currentOptions.refresh;
@@ -85,7 +85,7 @@ import 'flexStyles';
refreshLibraryFromServer(dom.parentWithClass(button, 'dlg-libraryeditor'));
}, () => {
import('toast').then(({default: toast}) => {
- toast(globalize.translate('DefaultErrorMessage'));
+ toast(globalize.translate('ErrorDefault'));
});
});
});
@@ -98,8 +98,8 @@ import 'flexStyles';
if (listItem) {
const index = parseInt(listItem.getAttribute('data-index'));
const pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || [];
- const pathInfo = null == index ? {} : pathInfos[index] || {};
- const originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]);
+ const pathInfo = index == null ? {} : pathInfos[index] || {};
+ const originalPath = pathInfo.Path || (index == null ? null : currentOptions.library.Locations[index]);
const btnRemovePath = dom.parentWithClass(e.target, 'btnRemovePath');
if (btnRemovePath) {
@@ -171,7 +171,7 @@ import 'flexStyles';
const picker = new directoryBrowser();
picker.show({
enableNetworkSharePath: true,
- pathReadOnly: null != originalPath,
+ pathReadOnly: originalPath != null,
path: originalPath,
networkSharePath: networkPath,
callback: function (path, networkSharePath) {
diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html b/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html
index 6c814cf2d..1f2581612 100644
--- a/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html
+++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.template.html
@@ -18,8 +18,8 @@
diff --git a/src/components/playlisteditor/playlisteditor.js b/src/components/playlisteditor/playlisteditor.js
index 7b1e915e1..78f0cf3de 100644
--- a/src/components/playlisteditor/playlisteditor.js
+++ b/src/components/playlisteditor/playlisteditor.js
@@ -210,7 +210,7 @@ import 'emby-button';
}
function centerFocus(elem, horiz, on) {
- import('scrollHelper').then(scrollHelper => {
+ import('scrollHelper').then((scrollHelper) => {
const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
});
diff --git a/src/components/pluginManager.js b/src/components/pluginManager.js
index df4a0c42b..55a5c230f 100644
--- a/src/components/pluginManager.js
+++ b/src/components/pluginManager.js
@@ -1,37 +1,38 @@
-define(['events', 'globalize'], function (events, globalize) {
- 'use strict';
+import events from 'events';
+import globalize from 'globalize';
+/* eslint-disable indent */
// TODO: replace with each plugin version
var cacheParam = new Date().getTime();
- function loadStrings(plugin) {
- var strings = plugin.getTranslations ? plugin.getTranslations() : [];
- return globalize.loadStrings({
- name: plugin.id || plugin.packageName,
- strings: strings
- });
- }
+ class PluginManager {
+ pluginsList = [];
- function definePluginRoute(pluginManager, route, plugin) {
- route.contentPath = pluginManager.mapPath(plugin, route.path);
- route.path = pluginManager.mapRoute(plugin, route);
+ get plugins() {
+ return this.pluginsList;
+ }
- Emby.App.defineRoute(route, plugin.id);
- }
+ #loadStrings(plugin) {
+ var strings = plugin.getTranslations ? plugin.getTranslations() : [];
+ return globalize.loadStrings({
+ name: plugin.id || plugin.packageName,
+ strings: strings
+ });
+ }
- function PluginManager() {
- this.pluginsList = [];
- }
+ #definePluginRoute(route, plugin) {
+ route.contentPath = this.mapPath(plugin, route.path);
+ route.path = this.#mapRoute(plugin, route);
- PluginManager.prototype.loadPlugin = function(pluginSpec) {
- var instance = this;
+ Emby.App.defineRoute(route, plugin.id);
+ }
- function registerPlugin(plugin) {
- instance.register(plugin);
+ #registerPlugin(plugin) {
+ this.#register(plugin);
if (plugin.getRoutes) {
- plugin.getRoutes().forEach(function (route) {
- definePluginRoute(instance, route, plugin);
+ plugin.getRoutes().forEach((route) => {
+ this.#definePluginRoute(route, plugin);
});
}
@@ -40,7 +41,7 @@ define(['events', 'globalize'], function (events, globalize) {
return Promise.resolve(plugin);
} else {
return new Promise((resolve, reject) => {
- loadStrings(plugin)
+ this.#loadStrings(plugin)
.then(function () {
resolve(plugin);
})
@@ -49,103 +50,102 @@ define(['events', 'globalize'], function (events, globalize) {
}
}
- if (typeof pluginSpec === 'string') {
- console.debug('Loading plugin (via deprecated requirejs method): ' + pluginSpec);
+ loadPlugin(pluginSpec) {
+ if (typeof pluginSpec === 'string') {
+ console.debug('Loading plugin (via deprecated requirejs method): ' + pluginSpec);
- return new Promise(function (resolve, reject) {
- require([pluginSpec], (pluginFactory) => {
- var plugin = pluginFactory.default ? new pluginFactory.default() : new pluginFactory();
+ return new Promise((resolve, reject) => {
+ require([pluginSpec], (pluginFactory) => {
+ var plugin = pluginFactory.default ? new pluginFactory.default() : new pluginFactory();
- // See if it's already installed
- var existing = instance.pluginsList.filter(function (p) {
- return p.id === plugin.id;
- })[0];
+ // See if it's already installed
+ var existing = this.pluginsList.filter(function (p) {
+ return p.id === plugin.id;
+ })[0];
- if (existing) {
- resolve(pluginSpec);
- }
+ if (existing) {
+ resolve(pluginSpec);
+ }
- plugin.installUrl = pluginSpec;
+ plugin.installUrl = pluginSpec;
- var separatorIndex = Math.max(pluginSpec.lastIndexOf('/'), pluginSpec.lastIndexOf('\\'));
- plugin.baseUrl = pluginSpec.substring(0, separatorIndex);
+ var separatorIndex = Math.max(pluginSpec.lastIndexOf('/'), pluginSpec.lastIndexOf('\\'));
+ plugin.baseUrl = pluginSpec.substring(0, separatorIndex);
- var paths = {};
- paths[plugin.id] = plugin.baseUrl;
+ var paths = {};
+ paths[plugin.id] = plugin.baseUrl;
- requirejs.config({
- waitSeconds: 0,
- paths: paths
+ requirejs.config({
+ waitSeconds: 0,
+ paths: paths
+ });
+
+ this.#registerPlugin(plugin).then(resolve).catch(reject);
});
-
- registerPlugin(plugin).then(resolve).catch(reject);
});
+ } else if (pluginSpec.then) {
+ return pluginSpec.then(pluginBuilder => {
+ return pluginBuilder();
+ }).then((plugin) => {
+ console.debug(`Plugin loaded: ${plugin.id}`);
+ return this.#registerPlugin(plugin);
+ });
+ } else {
+ const err = new TypeError('Plugins have to be a Promise that resolves to a plugin builder function or a RequireJS url (deprecated)');
+ console.error(err);
+ return Promise.reject(err);
+ }
+ }
+
+ // In lieu of automatic discovery, plugins will register dynamic objects
+ // Each object will have the following properties:
+ // name
+ // type (skin, screensaver, etc)
+ #register(obj) {
+ this.pluginsList.push(obj);
+ events.trigger(this, 'registered', [obj]);
+ }
+
+ ofType(type) {
+ return this.pluginsList.filter((o) => {
+ return o.type === type;
});
- } else if (pluginSpec.then) {
- return pluginSpec.then(pluginBuilder => {
- return pluginBuilder();
- }).then(plugin => {
- console.debug(`Plugin loaded: ${plugin.id}`);
- return registerPlugin(plugin);
- });
- } else {
- const err = new Error('Plugins have to be a Promise that resolves to a plugin builder function or a requirejs urls (deprecated)');
- console.error(err);
- return Promise.reject(err);
- }
- };
-
- // In lieu of automatic discovery, plugins will register dynamic objects
- // Each object will have the following properties:
- // name
- // type (skin, screensaver, etc)
- PluginManager.prototype.register = function (obj) {
- this.pluginsList.push(obj);
- events.trigger(this, 'registered', [obj]);
- };
-
- PluginManager.prototype.ofType = function (type) {
- return this.pluginsList.filter(function (o) {
- return o.type === type;
- });
- };
-
- PluginManager.prototype.plugins = function () {
- return this.pluginsList;
- };
-
- PluginManager.prototype.mapRoute = function (plugin, route) {
- if (typeof plugin === 'string') {
- plugin = this.pluginsList.filter(function (p) {
- return (p.id || p.packageName) === plugin;
- })[0];
}
- route = route.path || route;
+ #mapRoute(plugin, route) {
+ if (typeof plugin === 'string') {
+ plugin = this.pluginsList.filter((p) => {
+ return (p.id || p.packageName) === plugin;
+ })[0];
+ }
- if (route.toLowerCase().indexOf('http') === 0) {
- return route;
+ route = route.path || route;
+
+ if (route.toLowerCase().startsWith('http')) {
+ return route;
+ }
+
+ return '/plugins/' + plugin.id + '/' + route;
}
- return '/plugins/' + plugin.id + '/' + route;
- };
+ mapPath(plugin, path, addCacheParam) {
+ if (typeof plugin === 'string') {
+ plugin = this.pluginsList.filter((p) => {
+ return (p.id || p.packageName) === plugin;
+ })[0];
+ }
- PluginManager.prototype.mapPath = function (plugin, path, addCacheParam) {
- if (typeof plugin === 'string') {
- plugin = this.pluginsList.filter(function (p) {
- return (p.id || p.packageName) === plugin;
- })[0];
+ var url = plugin.baseUrl + '/' + path;
+
+ if (addCacheParam) {
+ url += url.includes('?') ? '&' : '?';
+ url += 'v=' + cacheParam;
+ }
+
+ return url;
}
+ }
- var url = plugin.baseUrl + '/' + path;
+/* eslint-enable indent */
- if (addCacheParam) {
- url += url.indexOf('?') === -1 ? '?' : '&';
- url += 'v=' + cacheParam;
- }
-
- return url;
- };
-
- return new PluginManager();
-});
+export default new PluginManager();
diff --git a/src/components/qualityOptions.js b/src/components/qualityOptions.js
index 10a5df39b..63d9557c7 100644
--- a/src/components/qualityOptions.js
+++ b/src/components/qualityOptions.js
@@ -1,160 +1,158 @@
-define(['globalize'], function (globalize) {
- 'use strict';
+import globalize from 'globalize';
- function getVideoQualityOptions(options) {
- var maxStreamingBitrate = options.currentMaxBitrate;
- var videoWidth = options.videoWidth;
- var videoHeight = options.videoHeight;
+export function getVideoQualityOptions(options) {
+ var maxStreamingBitrate = options.currentMaxBitrate;
+ var videoWidth = options.videoWidth;
+ var videoHeight = options.videoHeight;
- // If the aspect ratio is less than 16/9 (1.77), set the width as if it were pillarboxed.
- // 4:3 1440x1080 -> 1920x1080
- if (videoWidth / videoHeight < 16 / 9) {
- videoWidth = videoHeight * (16 / 9);
- }
-
- var maxAllowedWidth = videoWidth || 4096;
-
- var qualityOptions = [];
-
- if (maxAllowedWidth >= 3800) {
- qualityOptions.push({ name: '4K - 120 Mbps', maxHeight: 2160, bitrate: 120000000 });
- qualityOptions.push({ name: '4K - 100 Mbps', maxHeight: 2160, bitrate: 100000000 });
- qualityOptions.push({ name: '4K - 80 Mbps', maxHeight: 2160, bitrate: 80000000 });
- }
-
- // Some 1080- videos are reported as 1912?
- if (maxAllowedWidth >= 1900) {
- qualityOptions.push({ name: '1080p - 60 Mbps', maxHeight: 1080, bitrate: 60000000 });
- qualityOptions.push({ name: '1080p - 50 Mbps', maxHeight: 1080, bitrate: 50000000 });
- qualityOptions.push({ name: '1080p - 40 Mbps', maxHeight: 1080, bitrate: 40000000 });
- qualityOptions.push({ name: '1080p - 30 Mbps', maxHeight: 1080, bitrate: 30000000 });
- qualityOptions.push({ name: '1080p - 25 Mbps', maxHeight: 1080, bitrate: 25000000 });
- qualityOptions.push({ name: '1080p - 20 Mbps', maxHeight: 1080, bitrate: 20000000 });
- qualityOptions.push({ name: '1080p - 15 Mbps', maxHeight: 1080, bitrate: 15000000 });
- qualityOptions.push({ name: '1080p - 10 Mbps', maxHeight: 1080, bitrate: 10000001 });
- qualityOptions.push({ name: '1080p - 8 Mbps', maxHeight: 1080, bitrate: 8000001 });
- qualityOptions.push({ name: '1080p - 6 Mbps', maxHeight: 1080, bitrate: 6000001 });
- qualityOptions.push({ name: '1080p - 5 Mbps', maxHeight: 1080, bitrate: 5000001 });
- qualityOptions.push({ name: '1080p - 4 Mbps', maxHeight: 1080, bitrate: 4000002 });
- } else if (maxAllowedWidth >= 1260) {
- qualityOptions.push({ name: '720p - 10 Mbps', maxHeight: 720, bitrate: 10000000 });
- qualityOptions.push({ name: '720p - 8 Mbps', maxHeight: 720, bitrate: 8000000 });
- qualityOptions.push({ name: '720p - 6 Mbps', maxHeight: 720, bitrate: 6000000 });
- qualityOptions.push({ name: '720p - 5 Mbps', maxHeight: 720, bitrate: 5000000 });
- } else if (maxAllowedWidth >= 620) {
- qualityOptions.push({ name: '480p - 4 Mbps', maxHeight: 480, bitrate: 4000001 });
- qualityOptions.push({ name: '480p - 3 Mbps', maxHeight: 480, bitrate: 3000001 });
- qualityOptions.push({ name: '480p - 2.5 Mbps', maxHeight: 480, bitrate: 2500000 });
- qualityOptions.push({ name: '480p - 2 Mbps', maxHeight: 480, bitrate: 2000001 });
- qualityOptions.push({ name: '480p - 1.5 Mbps', maxHeight: 480, bitrate: 1500001 });
- }
-
- if (maxAllowedWidth >= 1260) {
- qualityOptions.push({ name: '720p - 4 Mbps', maxHeight: 720, bitrate: 4000000 });
- qualityOptions.push({ name: '720p - 3 Mbps', maxHeight: 720, bitrate: 3000000 });
- qualityOptions.push({ name: '720p - 2 Mbps', maxHeight: 720, bitrate: 2000000 });
-
- // The extra 1 is because they're keyed off the bitrate value
- qualityOptions.push({ name: '720p - 1.5 Mbps', maxHeight: 720, bitrate: 1500000 });
- qualityOptions.push({ name: '720p - 1 Mbps', maxHeight: 720, bitrate: 1000001 });
- }
-
- qualityOptions.push({ name: '480p - 1 Mbps', maxHeight: 480, bitrate: 1000000 });
- qualityOptions.push({ name: '480p - 720 kbps', maxHeight: 480, bitrate: 720000 });
- qualityOptions.push({ name: '480p - 420 kbps', maxHeight: 480, bitrate: 420000 });
- qualityOptions.push({ name: '360p', maxHeight: 360, bitrate: 400000 });
- qualityOptions.push({ name: '240p', maxHeight: 240, bitrate: 320000 });
- qualityOptions.push({ name: '144p', maxHeight: 144, bitrate: 192000 });
-
- var autoQualityOption = {
- name: globalize.translate('Auto'),
- bitrate: 0,
- selected: options.isAutomaticBitrateEnabled
- };
-
- if (options.enableAuto) {
- qualityOptions.push(autoQualityOption);
- }
-
- if (maxStreamingBitrate) {
- var selectedIndex = -1;
- for (var i = 0, length = qualityOptions.length; i < length; i++) {
- var option = qualityOptions[i];
-
- if (selectedIndex === -1 && option.bitrate <= maxStreamingBitrate) {
- selectedIndex = i;
- }
- }
-
- if (selectedIndex === -1) {
- selectedIndex = qualityOptions.length - 1;
- }
-
- var currentQualityOption = qualityOptions[selectedIndex];
-
- if (!options.isAutomaticBitrateEnabled) {
- currentQualityOption.selected = true;
- } else {
- autoQualityOption.autoText = currentQualityOption.name;
- }
- }
-
- return qualityOptions;
+ // If the aspect ratio is less than 16/9 (1.77), set the width as if it were pillarboxed.
+ // 4:3 1440x1080 -> 1920x1080
+ if (videoWidth / videoHeight < 16 / 9) {
+ videoWidth = videoHeight * (16 / 9);
}
- function getAudioQualityOptions(options) {
- var maxStreamingBitrate = options.currentMaxBitrate;
+ var maxAllowedWidth = videoWidth || 4096;
- var qualityOptions = [];
+ var qualityOptions = [];
- qualityOptions.push({ name: '2 Mbps', bitrate: 2000000 });
- qualityOptions.push({ name: '1.5 Mbps', bitrate: 1500000 });
- qualityOptions.push({ name: '1 Mbps', bitrate: 1000000 });
- qualityOptions.push({ name: '320 kbps', bitrate: 320000 });
- qualityOptions.push({ name: '256 kbps', bitrate: 256000 });
- qualityOptions.push({ name: '192 kbps', bitrate: 192000 });
- qualityOptions.push({ name: '128 kbps', bitrate: 128000 });
- qualityOptions.push({ name: '96 kbps', bitrate: 96000 });
- qualityOptions.push({ name: '64 kbps', bitrate: 64000 });
-
- var autoQualityOption = {
- name: globalize.translate('Auto'),
- bitrate: 0,
- selected: options.isAutomaticBitrateEnabled
- };
-
- if (options.enableAuto) {
- qualityOptions.push(autoQualityOption);
- }
-
- if (maxStreamingBitrate) {
- var selectedIndex = -1;
- for (var i = 0, length = qualityOptions.length; i < length; i++) {
- var option = qualityOptions[i];
-
- if (selectedIndex === -1 && option.bitrate <= maxStreamingBitrate) {
- selectedIndex = i;
- }
- }
-
- if (selectedIndex === -1) {
- selectedIndex = qualityOptions.length - 1;
- }
-
- var currentQualityOption = qualityOptions[selectedIndex];
-
- if (!options.isAutomaticBitrateEnabled) {
- currentQualityOption.selected = true;
- } else {
- autoQualityOption.autoText = currentQualityOption.name;
- }
- }
-
- return qualityOptions;
+ if (maxAllowedWidth >= 3800) {
+ qualityOptions.push({ name: '4K - 120 Mbps', maxHeight: 2160, bitrate: 120000000 });
+ qualityOptions.push({ name: '4K - 100 Mbps', maxHeight: 2160, bitrate: 100000000 });
+ qualityOptions.push({ name: '4K - 80 Mbps', maxHeight: 2160, bitrate: 80000000 });
}
- return {
- getVideoQualityOptions: getVideoQualityOptions,
- getAudioQualityOptions: getAudioQualityOptions
+ // Some 1080- videos are reported as 1912?
+ if (maxAllowedWidth >= 1900) {
+ qualityOptions.push({ name: '1080p - 60 Mbps', maxHeight: 1080, bitrate: 60000000 });
+ qualityOptions.push({ name: '1080p - 50 Mbps', maxHeight: 1080, bitrate: 50000000 });
+ qualityOptions.push({ name: '1080p - 40 Mbps', maxHeight: 1080, bitrate: 40000000 });
+ qualityOptions.push({ name: '1080p - 30 Mbps', maxHeight: 1080, bitrate: 30000000 });
+ qualityOptions.push({ name: '1080p - 25 Mbps', maxHeight: 1080, bitrate: 25000000 });
+ qualityOptions.push({ name: '1080p - 20 Mbps', maxHeight: 1080, bitrate: 20000000 });
+ qualityOptions.push({ name: '1080p - 15 Mbps', maxHeight: 1080, bitrate: 15000000 });
+ qualityOptions.push({ name: '1080p - 10 Mbps', maxHeight: 1080, bitrate: 10000001 });
+ qualityOptions.push({ name: '1080p - 8 Mbps', maxHeight: 1080, bitrate: 8000001 });
+ qualityOptions.push({ name: '1080p - 6 Mbps', maxHeight: 1080, bitrate: 6000001 });
+ qualityOptions.push({ name: '1080p - 5 Mbps', maxHeight: 1080, bitrate: 5000001 });
+ qualityOptions.push({ name: '1080p - 4 Mbps', maxHeight: 1080, bitrate: 4000002 });
+ } else if (maxAllowedWidth >= 1260) {
+ qualityOptions.push({ name: '720p - 10 Mbps', maxHeight: 720, bitrate: 10000000 });
+ qualityOptions.push({ name: '720p - 8 Mbps', maxHeight: 720, bitrate: 8000000 });
+ qualityOptions.push({ name: '720p - 6 Mbps', maxHeight: 720, bitrate: 6000000 });
+ qualityOptions.push({ name: '720p - 5 Mbps', maxHeight: 720, bitrate: 5000000 });
+ } else if (maxAllowedWidth >= 620) {
+ qualityOptions.push({ name: '480p - 4 Mbps', maxHeight: 480, bitrate: 4000001 });
+ qualityOptions.push({ name: '480p - 3 Mbps', maxHeight: 480, bitrate: 3000001 });
+ qualityOptions.push({ name: '480p - 2.5 Mbps', maxHeight: 480, bitrate: 2500000 });
+ qualityOptions.push({ name: '480p - 2 Mbps', maxHeight: 480, bitrate: 2000001 });
+ qualityOptions.push({ name: '480p - 1.5 Mbps', maxHeight: 480, bitrate: 1500001 });
+ }
+
+ if (maxAllowedWidth >= 1260) {
+ qualityOptions.push({ name: '720p - 4 Mbps', maxHeight: 720, bitrate: 4000000 });
+ qualityOptions.push({ name: '720p - 3 Mbps', maxHeight: 720, bitrate: 3000000 });
+ qualityOptions.push({ name: '720p - 2 Mbps', maxHeight: 720, bitrate: 2000000 });
+
+ // The extra 1 is because they're keyed off the bitrate value
+ qualityOptions.push({ name: '720p - 1.5 Mbps', maxHeight: 720, bitrate: 1500000 });
+ qualityOptions.push({ name: '720p - 1 Mbps', maxHeight: 720, bitrate: 1000001 });
+ }
+
+ qualityOptions.push({ name: '480p - 1 Mbps', maxHeight: 480, bitrate: 1000000 });
+ qualityOptions.push({ name: '480p - 720 kbps', maxHeight: 480, bitrate: 720000 });
+ qualityOptions.push({ name: '480p - 420 kbps', maxHeight: 480, bitrate: 420000 });
+ qualityOptions.push({ name: '360p', maxHeight: 360, bitrate: 400000 });
+ qualityOptions.push({ name: '240p', maxHeight: 240, bitrate: 320000 });
+ qualityOptions.push({ name: '144p', maxHeight: 144, bitrate: 192000 });
+
+ var autoQualityOption = {
+ name: globalize.translate('Auto'),
+ bitrate: 0,
+ selected: options.isAutomaticBitrateEnabled
};
-});
+
+ if (options.enableAuto) {
+ qualityOptions.push(autoQualityOption);
+ }
+
+ if (maxStreamingBitrate) {
+ var selectedIndex = -1;
+ for (var i = 0, length = qualityOptions.length; i < length; i++) {
+ var option = qualityOptions[i];
+
+ if (selectedIndex === -1 && option.bitrate <= maxStreamingBitrate) {
+ selectedIndex = i;
+ }
+ }
+
+ if (selectedIndex === -1) {
+ selectedIndex = qualityOptions.length - 1;
+ }
+
+ var currentQualityOption = qualityOptions[selectedIndex];
+
+ if (!options.isAutomaticBitrateEnabled) {
+ currentQualityOption.selected = true;
+ } else {
+ autoQualityOption.autoText = currentQualityOption.name;
+ }
+ }
+
+ return qualityOptions;
+}
+
+export function getAudioQualityOptions(options) {
+ var maxStreamingBitrate = options.currentMaxBitrate;
+
+ var qualityOptions = [];
+
+ qualityOptions.push({ name: '2 Mbps', bitrate: 2000000 });
+ qualityOptions.push({ name: '1.5 Mbps', bitrate: 1500000 });
+ qualityOptions.push({ name: '1 Mbps', bitrate: 1000000 });
+ qualityOptions.push({ name: '320 kbps', bitrate: 320000 });
+ qualityOptions.push({ name: '256 kbps', bitrate: 256000 });
+ qualityOptions.push({ name: '192 kbps', bitrate: 192000 });
+ qualityOptions.push({ name: '128 kbps', bitrate: 128000 });
+ qualityOptions.push({ name: '96 kbps', bitrate: 96000 });
+ qualityOptions.push({ name: '64 kbps', bitrate: 64000 });
+
+ var autoQualityOption = {
+ name: globalize.translate('Auto'),
+ bitrate: 0,
+ selected: options.isAutomaticBitrateEnabled
+ };
+
+ if (options.enableAuto) {
+ qualityOptions.push(autoQualityOption);
+ }
+
+ if (maxStreamingBitrate) {
+ var selectedIndex = -1;
+ for (var i = 0, length = qualityOptions.length; i < length; i++) {
+ var option = qualityOptions[i];
+
+ if (selectedIndex === -1 && option.bitrate <= maxStreamingBitrate) {
+ selectedIndex = i;
+ }
+ }
+
+ if (selectedIndex === -1) {
+ selectedIndex = qualityOptions.length - 1;
+ }
+
+ var currentQualityOption = qualityOptions[selectedIndex];
+
+ if (!options.isAutomaticBitrateEnabled) {
+ currentQualityOption.selected = true;
+ } else {
+ autoQualityOption.autoText = currentQualityOption.name;
+ }
+ }
+
+ return qualityOptions;
+}
+
+export default {
+ getVideoQualityOptions,
+ getAudioQualityOptions
+};
diff --git a/src/components/recordingcreator/recordingbutton.js b/src/components/recordingcreator/recordingbutton.js
index 3ad4ffa59..9f102e2f9 100644
--- a/src/components/recordingcreator/recordingbutton.js
+++ b/src/components/recordingcreator/recordingbutton.js
@@ -1,35 +1,40 @@
-define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields'], function (globalize, connectionManager, require, loading, appHost, dom, recordingHelper, events) {
- 'use strict';
+import connectionManager from 'connectionManager';
+import dom from 'dom';
+import recordingHelper from 'recordingHelper';
+import 'paper-icon-button-light';
+import 'emby-button';
+import 'css!./recordingfields';
- function onRecordingButtonClick(e) {
- var item = this.item;
+function onRecordingButtonClick(e) {
+ const item = this.item;
- if (item) {
- var serverId = item.ServerId;
- var programId = item.Id;
- var timerId = item.TimerId;
- var timerStatus = item.Status;
- var seriesTimerId = item.SeriesTimerId;
+ if (item) {
+ const serverId = item.ServerId;
+ const programId = item.Id;
+ const timerId = item.TimerId;
+ const timerStatus = item.Status;
+ const seriesTimerId = item.SeriesTimerId;
- var instance = this;
+ const instance = this;
- recordingHelper.toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId).then(function () {
- instance.refresh(serverId, programId);
- });
- }
+ recordingHelper.toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId).then(function () {
+ instance.refresh(serverId, programId);
+ });
}
+}
- function setButtonIcon(button, icon) {
- var inner = button.querySelector('.material-icons');
- inner.classList.remove('fiber_smart_record');
- inner.classList.remove('fiber_manual_record');
- inner.classList.add(icon);
- }
+function setButtonIcon(button, icon) {
+ const inner = button.querySelector('.material-icons');
+ inner.classList.remove('fiber_smart_record');
+ inner.classList.remove('fiber_manual_record');
+ inner.classList.add(icon);
+}
- function RecordingButton(options) {
+class RecordingButton {
+ constructor(options) {
this.options = options;
- var button = options.button;
+ const button = options.button;
setButtonIcon(button, 'fiber_manual_record');
@@ -39,7 +44,7 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
this.refresh(options.itemId, options.serverId);
}
- var clickFn = onRecordingButtonClick.bind(this);
+ const clickFn = onRecordingButtonClick.bind(this);
this.clickFn = clickFn;
dom.addEventListener(button, 'click', clickFn, {
@@ -47,39 +52,17 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
});
}
- function getIndicatorIcon(item) {
- var status;
-
- if (item.Type === 'SeriesTimer') {
- return 'fiber_smart_record';
- } else if (item.TimerId || item.SeriesTimerId) {
- status = item.Status || 'Cancelled';
- } else if (item.Type === 'Timer') {
- status = item.Status;
- } else {
- return 'fiber_manual_record';
- }
-
- if (item.SeriesTimerId) {
- if (status !== 'Cancelled') {
- return 'fiber_smart_record';
- }
- }
-
- return 'fiber_manual_record';
- }
-
- RecordingButton.prototype.refresh = function (serverId, itemId) {
- var apiClient = connectionManager.getApiClient(serverId);
- var self = this;
+ refresh(serverId, itemId) {
+ const apiClient = connectionManager.getApiClient(serverId);
+ const self = this;
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
self.refreshItem(item);
});
- };
+ }
- RecordingButton.prototype.refreshItem = function (item) {
- var options = this.options;
- var button = options.button;
+ refreshItem(item) {
+ const options = this.options;
+ const button = options.button;
this.item = item;
setButtonIcon(button, getIndicatorIcon(item));
@@ -88,15 +71,15 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
} else {
button.classList.remove('recordingIcon-active');
}
- };
+ }
- RecordingButton.prototype.destroy = function () {
- var options = this.options;
+ destroy() {
+ const options = this.options;
if (options) {
- var button = options.button;
+ const button = options.button;
- var clickFn = this.clickFn;
+ const clickFn = this.clickFn;
if (clickFn) {
dom.removeEventListener(button, 'click', clickFn, {
@@ -107,7 +90,29 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
this.options = null;
this.item = null;
- };
+ }
+}
- return RecordingButton;
-});
+function getIndicatorIcon(item) {
+ let status;
+
+ if (item.Type === 'SeriesTimer') {
+ return 'fiber_smart_record';
+ } else if (item.TimerId || item.SeriesTimerId) {
+ status = item.Status || 'Cancelled';
+ } else if (item.Type === 'Timer') {
+ status = item.Status;
+ } else {
+ return 'fiber_manual_record';
+ }
+
+ if (item.SeriesTimerId) {
+ if (status !== 'Cancelled') {
+ return 'fiber_smart_record';
+ }
+ }
+
+ return 'fiber_manual_record';
+}
+
+export default RecordingButton;
diff --git a/src/components/recordingcreator/recordingcreator.js b/src/components/recordingcreator/recordingcreator.js
index f330e5415..9cb4e41d2 100644
--- a/src/components/recordingcreator/recordingcreator.js
+++ b/src/components/recordingcreator/recordingcreator.js
@@ -1,187 +1,204 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'datetime', 'imageLoader', 'recordingFields', 'events', 'emby-checkbox', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, datetime, imageLoader, recordingFields, events) {
- 'use strict';
+import dialogHelper from 'dialogHelper';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import mediaInfo from 'mediaInfo';
+import connectionManager from 'connectionManager';
+import require from 'require';
+import loading from 'loading';
+import scrollHelper from 'scrollHelper';
+import datetime from 'datetime';
+import imageLoader from 'imageLoader';
+import recordingFields from 'recordingFields';
+import events from 'events';
+import 'emby-checkbox';
+import 'emby-button';
+import 'emby-collapse';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'css!./recordingcreator';
+import 'material-icons';
- var currentDialog;
- var closeAction;
- var currentRecordingFields;
+let currentDialog;
+let closeAction;
+let currentRecordingFields;
- function closeDialog() {
- dialogHelper.close(currentDialog);
+function closeDialog() {
+ dialogHelper.close(currentDialog);
+}
+
+function init(context) {
+ context.querySelector('.btnPlay').addEventListener('click', function () {
+ closeAction = 'play';
+ closeDialog();
+ });
+
+ context.querySelector('.btnCancel').addEventListener('click', function () {
+ closeAction = null;
+ closeDialog();
+ });
+}
+
+function getImageUrl(item, apiClient, imageHeight) {
+ const imageTags = item.ImageTags || {};
+
+ if (item.PrimaryImageTag) {
+ imageTags.Primary = item.PrimaryImageTag;
}
- function init(context) {
- context.querySelector('.btnPlay').addEventListener('click', function () {
- closeAction = 'play';
- closeDialog();
+ if (imageTags.Primary) {
+ return apiClient.getScaledImageUrl(item.Id, {
+ type: 'Primary',
+ maxHeight: imageHeight,
+ tag: item.ImageTags.Primary
});
-
- context.querySelector('.btnCancel').addEventListener('click', function () {
- closeAction = null;
- closeDialog();
+ } else if (imageTags.Thumb) {
+ return apiClient.getScaledImageUrl(item.Id, {
+ type: 'Thumb',
+ maxHeight: imageHeight,
+ tag: item.ImageTags.Thumb
});
}
- function getImageUrl(item, apiClient, imageHeight) {
- var imageTags = item.ImageTags || {};
+ return null;
+}
- if (item.PrimaryImageTag) {
- imageTags.Primary = item.PrimaryImageTag;
+function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) {
+ if (!refreshRecordingStateOnly) {
+ const imgUrl = getImageUrl(program, apiClient, 200);
+ const imageContainer = context.querySelector('.recordingDialog-imageContainer');
+
+ if (imgUrl) {
+ imageContainer.innerHTML = '${HeadersFolders}
-
';
+ imageContainer.classList.remove('hide');
+
+ imageLoader.lazyChildren(imageContainer);
+ } else {
+ imageContainer.innerHTML = '';
+ imageContainer.classList.add('hide');
}
- if (imageTags.Primary) {
- return apiClient.getScaledImageUrl(item.Id, {
- type: 'Primary',
- maxHeight: imageHeight,
- tag: item.ImageTags.Primary
- });
- } else if (imageTags.Thumb) {
- return apiClient.getScaledImageUrl(item.Id, {
- type: 'Thumb',
- maxHeight: imageHeight,
- tag: item.ImageTags.Thumb
- });
+ context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
+ context.querySelector('.formDialogHeaderTitle').innerHTML = program.Name;
+ context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
+ context.querySelector('.itemOverview').innerHTML = program.Overview || '';
+
+ const formDialogFooter = context.querySelector('.formDialogFooter');
+ const now = new Date();
+ if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
+ formDialogFooter.classList.remove('hide');
+ } else {
+ formDialogFooter.classList.add('hide');
}
- return null;
+ context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
}
- function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) {
- if (!refreshRecordingStateOnly) {
- var imgUrl = getImageUrl(program, apiClient, 200);
- var imageContainer = context.querySelector('.recordingDialog-imageContainer');
+ context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program, {
+ });
- if (imgUrl) {
- imageContainer.innerHTML = '';
- imageContainer.classList.remove('hide');
+ loading.hide();
+}
- imageLoader.lazyChildren(imageContainer);
- } else {
- imageContainer.innerHTML = '';
- imageContainer.classList.add('hide');
- }
+function reload(context, programId, serverId, refreshRecordingStateOnly) {
+ loading.show();
- context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
- context.querySelector('.formDialogHeaderTitle').innerHTML = program.Name;
- context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
- context.querySelector('.itemOverview').innerHTML = program.Overview || '';
+ const apiClient = connectionManager.getApiClient(serverId);
- var formDialogFooter = context.querySelector('.formDialogFooter');
- var now = new Date();
- if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
- formDialogFooter.classList.remove('hide');
- } else {
- formDialogFooter.classList.add('hide');
- }
+ const promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
+ const promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
- context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
- }
+ Promise.all([promise1, promise2]).then(function (responses) {
+ const defaults = responses[0];
+ const program = responses[1];
- context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program, {
- });
+ renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly);
+ });
+}
- loading.hide();
- }
+function executeCloseAction(action, programId, serverId) {
+ if (action === 'play') {
+ import('playbackManager').then(({ default: playbackManager }) => {
+ const apiClient = connectionManager.getApiClient(serverId);
- function reload(context, programId, serverId, refreshRecordingStateOnly) {
- loading.show();
-
- var apiClient = connectionManager.getApiClient(serverId);
-
- var promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
- var promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
-
- Promise.all([promise1, promise2]).then(function (responses) {
- var defaults = responses[0];
- var program = responses[1];
-
- renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly);
- });
- }
-
- function executeCloseAction(action, programId, serverId) {
- if (action === 'play') {
- require(['playbackManager'], function (playbackManager) {
- var apiClient = connectionManager.getApiClient(serverId);
-
- apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
- playbackManager.play({
- ids: [item.ChannelId],
- serverId: serverId
- });
- });
- });
- return;
- }
- }
-
- function showEditor(itemId, serverId) {
- return new Promise(function (resolve, reject) {
- closeAction = null;
-
- loading.show();
-
- require(['text!./recordingcreator.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.translateHtml(template, 'core');
-
- dlg.innerHTML = html;
-
- currentDialog = dlg;
-
- function onRecordingChanged() {
- reload(dlg, itemId, serverId, true);
- }
-
- dlg.addEventListener('close', function () {
- events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged);
- executeCloseAction(closeAction, itemId, serverId);
-
- if (currentRecordingFields && currentRecordingFields.hasChanged()) {
- resolve();
- } else {
- reject();
- }
- });
-
- if (layoutManager.tv) {
- scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
- }
-
- init(dlg);
-
- reload(dlg, itemId, serverId);
-
- currentRecordingFields = new recordingFields({
- parent: dlg.querySelector('.recordingFields'),
- programId: itemId,
+ apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
+ playbackManager.play({
+ ids: [item.ChannelId],
serverId: serverId
});
-
- events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged);
-
- dialogHelper.open(dlg);
});
});
+ return;
}
+}
- return {
- show: showEditor
- };
-});
+function showEditor(itemId, serverId) {
+ return new Promise(function (resolve, reject) {
+ closeAction = null;
+
+ loading.show();
+
+ import('text!./recordingcreator.template.html').then(({ default: template }) => {
+ const dialogOptions = {
+ removeOnClose: true,
+ scrollY: false
+ };
+
+ if (layoutManager.tv) {
+ dialogOptions.size = 'fullscreen';
+ } else {
+ dialogOptions.size = 'small';
+ }
+
+ const dlg = dialogHelper.createDialog(dialogOptions);
+
+ dlg.classList.add('formDialog');
+ dlg.classList.add('recordingDialog');
+
+ let html = '';
+
+ html += globalize.translateHtml(template, 'core');
+
+ dlg.innerHTML = html;
+
+ currentDialog = dlg;
+
+ function onRecordingChanged() {
+ reload(dlg, itemId, serverId, true);
+ }
+
+ dlg.addEventListener('close', function () {
+ events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged);
+ executeCloseAction(closeAction, itemId, serverId);
+
+ if (currentRecordingFields && currentRecordingFields.hasChanged()) {
+ resolve();
+ } else {
+ reject();
+ }
+ });
+
+ if (layoutManager.tv) {
+ scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+ }
+
+ init(dlg);
+
+ reload(dlg, itemId, serverId);
+
+ currentRecordingFields = new recordingFields({
+ parent: dlg.querySelector('.recordingFields'),
+ programId: itemId,
+ serverId: serverId
+ });
+
+ events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged);
+
+ dialogHelper.open(dlg);
+ });
+ });
+}
+
+export default {
+ show: showEditor
+};
diff --git a/src/components/recordingcreator/recordingeditor.js b/src/components/recordingcreator/recordingeditor.js
index 3797cde37..096ea3b62 100644
--- a/src/components/recordingcreator/recordingeditor.js
+++ b/src/components/recordingcreator/recordingeditor.js
@@ -1,145 +1,155 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'scrollStyles', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader) {
- 'use strict';
+import dialogHelper from 'dialogHelper';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+import loading from 'loading';
+import scrollHelper from 'scrollHelper';
+import 'scrollStyles';
+import 'emby-button';
+import 'emby-collapse';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'css!./recordingcreator';
+import 'material-icons';
+import 'flexStyles';
- var currentDialog;
- var recordingDeleted = false;
- var currentItemId;
- var currentServerId;
- var currentResolve;
+let currentDialog;
+let recordingDeleted = false;
+let currentItemId;
+let currentServerId;
+let currentResolve;
- function deleteTimer(apiClient, timerId) {
- return new Promise(function (resolve, reject) {
- require(['recordingHelper'], function (recordingHelper) {
- recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
- });
+function deleteTimer(apiClient, timerId) {
+ return import('recordingHelper').then(({ default: recordingHelper }) => {
+ recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId());
+ });
+}
+
+function renderTimer(context, item, apiClient) {
+ context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
+ context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
+
+ loading.hide();
+}
+
+function closeDialog(isDeleted) {
+ recordingDeleted = isDeleted;
+ dialogHelper.close(currentDialog);
+}
+
+function onSubmit(e) {
+ const form = this;
+
+ const 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(currentResolve);
+ });
+
+ e.preventDefault();
+
+ // Disable default form submission
+ return false;
+}
+
+function init(context) {
+ context.querySelector('.btnCancel').addEventListener('click', function () {
+ closeDialog(false);
+ });
+
+ context.querySelector('.btnCancelRecording').addEventListener('click', function () {
+ const apiClient = connectionManager.getApiClient(currentServerId);
+
+ deleteTimer(apiClient, currentItemId).then(function () {
+ closeDialog(true);
});
- }
+ });
- function renderTimer(context, item, apiClient) {
- context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
- context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
+ context.querySelector('form').addEventListener('submit', onSubmit);
+}
+function reload(context, id) {
+ loading.show();
+ currentItemId = id;
+
+ const apiClient = connectionManager.getApiClient(currentServerId);
+ apiClient.getLiveTvTimer(id).then(function (result) {
+ renderTimer(context, result, apiClient);
loading.hide();
- }
+ });
+}
- function closeDialog(isDeleted) {
- recordingDeleted = isDeleted;
-
- dialogHelper.close(currentDialog);
- }
-
- function onSubmit(e) {
- 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(currentResolve);
- });
-
- e.preventDefault();
-
- // Disable default form submission
- return false;
- }
-
- function init(context) {
- context.querySelector('.btnCancel').addEventListener('click', function () {
- closeDialog(false);
- });
-
- context.querySelector('.btnCancelRecording').addEventListener('click', function () {
- var apiClient = connectionManager.getApiClient(currentServerId);
- deleteTimer(apiClient, currentItemId).then(function () {
- closeDialog(true);
- });
- });
-
- context.querySelector('form').addEventListener('submit', onSubmit);
- }
-
- function reload(context, id) {
+function showEditor(itemId, serverId, options) {
+ return new Promise(function (resolve, reject) {
+ recordingDeleted = false;
+ currentServerId = serverId;
loading.show();
- currentItemId = id;
+ options = options || {};
+ currentResolve = resolve;
- var apiClient = connectionManager.getApiClient(currentServerId);
- apiClient.getLiveTvTimer(id).then(function (result) {
- renderTimer(context, result, apiClient);
- loading.hide();
- });
- }
+ import('text!./recordingeditor.template.html').then(({default: template}) => {
+ const dialogOptions = {
+ removeOnClose: true,
+ scrollY: false
+ };
- function showEditor(itemId, serverId, options) {
- return new Promise(function (resolve, reject) {
- recordingDeleted = false;
- currentServerId = serverId;
- loading.show();
- options = options || {};
- currentResolve = resolve;
+ if (layoutManager.tv) {
+ dialogOptions.size = 'fullscreen';
+ }
- require(['text!./recordingeditor.template.html'], function (template) {
- var dialogOptions = {
- removeOnClose: true,
- scrollY: false
- };
+ const dlg = dialogHelper.createDialog(dialogOptions);
- if (layoutManager.tv) {
- dialogOptions.size = 'fullscreen';
+ dlg.classList.add('formDialog');
+ dlg.classList.add('recordingDialog');
+
+ if (!layoutManager.tv) {
+ dlg.style['min-width'] = '20%';
+ dlg.classList.add('dialog-fullscreen-lowres');
+ }
+
+ let html = '';
+
+ html += globalize.translateHtml(template, 'core');
+
+ dlg.innerHTML = html;
+
+ if (options.enableCancel === false) {
+ dlg.querySelector('.formDialogFooter').classList.add('hide');
+ }
+
+ currentDialog = dlg;
+
+ dlg.addEventListener('closing', function () {
+ if (!recordingDeleted) {
+ dlg.querySelector('.btnSubmit').click();
}
-
- var dlg = dialogHelper.createDialog(dialogOptions);
-
- dlg.classList.add('formDialog');
- dlg.classList.add('recordingDialog');
-
- if (!layoutManager.tv) {
- dlg.style['min-width'] = '20%';
- dlg.classList.add('dialog-fullscreen-lowres');
- }
-
- var html = '';
-
- html += globalize.translateHtml(template, 'core');
-
- dlg.innerHTML = html;
-
- if (options.enableCancel === false) {
- dlg.querySelector('.formDialogFooter').classList.add('hide');
- }
-
- currentDialog = dlg;
-
- dlg.addEventListener('closing', function () {
- if (!recordingDeleted) {
- dlg.querySelector('.btnSubmit').click();
- }
- });
-
- dlg.addEventListener('close', function () {
- if (recordingDeleted) {
- resolve({
- updated: true,
- deleted: true
- });
- }
- });
-
- if (layoutManager.tv) {
- scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
- }
-
- init(dlg);
-
- reload(dlg, itemId);
-
- dialogHelper.open(dlg);
});
- });
- }
- return {
- show: showEditor
- };
-});
+ dlg.addEventListener('close', function () {
+ if (recordingDeleted) {
+ resolve({
+ updated: true,
+ deleted: true
+ });
+ }
+ });
+
+ if (layoutManager.tv) {
+ scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+ }
+
+ init(dlg);
+
+ reload(dlg, itemId);
+
+ dialogHelper.open(dlg);
+ });
+ });
+}
+
+export default {
+ show: showEditor
+};
diff --git a/src/components/recordingcreator/recordingfields.js b/src/components/recordingcreator/recordingfields.js
index 2534eafe6..d9d7c0098 100644
--- a/src/components/recordingcreator/recordingfields.js
+++ b/src/components/recordingcreator/recordingfields.js
@@ -1,219 +1,126 @@
-define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields', 'flexStyles'], function (globalize, connectionManager, serverNotifications, require, loading, appHost, dom, recordingHelper, events) {
- 'use strict';
+import globalize from 'globalize';
+import connectionManager from 'connectionManager';
+import serverNotifications from 'serverNotifications';
+import loading from 'loading';
+import dom from 'dom';
+import recordingHelper from 'recordingHelper';
+import events from 'events';
+import 'paper-icon-button-light';
+import 'emby-button';
+import 'css!./recordingfields';
+import 'flexStyles';
- function loadData(parent, program, apiClient) {
- if (program.IsSeries) {
- parent.querySelector('.recordSeriesContainer').classList.remove('hide');
+/*eslint prefer-const: "error"*/
+
+function loadData(parent, program, apiClient) {
+ if (program.IsSeries) {
+ parent.querySelector('.recordSeriesContainer').classList.remove('hide');
+ } else {
+ parent.querySelector('.recordSeriesContainer').classList.add('hide');
+ }
+
+ if (program.SeriesTimerId) {
+ parent.querySelector('.btnManageSeriesRecording').classList.remove('hide');
+ parent.querySelector('.seriesRecordingButton .recordingIcon').classList.add('recordingIcon-active');
+ parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('CancelSeries');
+ } else {
+ parent.querySelector('.btnManageSeriesRecording').classList.add('hide');
+ parent.querySelector('.seriesRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
+ parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('RecordSeries');
+ }
+
+ if (program.TimerId && program.Status !== 'Cancelled') {
+ parent.querySelector('.btnManageRecording').classList.remove('hide');
+ parent.querySelector('.singleRecordingButton .recordingIcon').classList.add('recordingIcon-active');
+ if (program.Status === 'InProgress') {
+ parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('StopRecording');
} else {
- parent.querySelector('.recordSeriesContainer').classList.add('hide');
+ parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('DoNotRecord');
}
+ } else {
+ parent.querySelector('.btnManageRecording').classList.add('hide');
+ parent.querySelector('.singleRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
+ parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('Record');
+ }
+}
- if (program.SeriesTimerId) {
- parent.querySelector('.btnManageSeriesRecording').classList.remove('hide');
- parent.querySelector('.seriesRecordingButton .recordingIcon').classList.add('recordingIcon-active');
- parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('CancelSeries');
- } else {
- parent.querySelector('.btnManageSeriesRecording').classList.add('hide');
- parent.querySelector('.seriesRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
- parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('RecordSeries');
+function fetchData(instance) {
+ const options = instance.options;
+ const apiClient = connectionManager.getApiClient(options.serverId);
+
+ options.parent.querySelector('.recordingFields').classList.remove('hide');
+ return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
+ instance.TimerId = program.TimerId;
+ instance.Status = program.Status;
+ instance.SeriesTimerId = program.SeriesTimerId;
+ loadData(options.parent, program, apiClient);
+ });
+}
+
+function onTimerChangedExternally(e, apiClient, data) {
+ const options = this.options;
+ let refresh = false;
+
+ if (data.Id) {
+ if (this.TimerId === data.Id) {
+ refresh = true;
}
-
- if (program.TimerId && program.Status !== 'Cancelled') {
- parent.querySelector('.btnManageRecording').classList.remove('hide');
- parent.querySelector('.singleRecordingButton .recordingIcon').classList.add('recordingIcon-active');
- if (program.Status === 'InProgress') {
- parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('StopRecording');
- } else {
- parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('DoNotRecord');
- }
- } else {
- parent.querySelector('.btnManageRecording').classList.add('hide');
- parent.querySelector('.singleRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
- parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('Record');
+ }
+ if (data.ProgramId && options) {
+ if (options.programId === data.ProgramId) {
+ refresh = true;
}
}
- function fetchData(instance) {
- var options = instance.options;
- var apiClient = connectionManager.getApiClient(options.serverId);
-
- options.parent.querySelector('.recordingFields').classList.remove('hide');
- return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
- instance.TimerId = program.TimerId;
- instance.Status = program.Status;
- instance.SeriesTimerId = program.SeriesTimerId;
- loadData(options.parent, program, apiClient);
- });
+ if (refresh) {
+ this.refresh();
}
+}
- function onTimerChangedExternally(e, apiClient, data) {
- var options = this.options;
- var refresh = false;
+function onSeriesTimerChangedExternally(e, apiClient, data) {
+ const options = this.options;
+ let refresh = false;
- if (data.Id) {
- if (this.TimerId === data.Id) {
- refresh = true;
- }
+ if (data.Id) {
+ if (this.SeriesTimerId === data.Id) {
+ refresh = true;
}
- if (data.ProgramId && options) {
- if (options.programId === data.ProgramId) {
- refresh = true;
- }
- }
-
- if (refresh) {
- this.refresh();
+ }
+ if (data.ProgramId && options) {
+ if (options.programId === data.ProgramId) {
+ refresh = true;
}
}
- function onSeriesTimerChangedExternally(e, apiClient, data) {
- var options = this.options;
- var refresh = false;
-
- if (data.Id) {
- if (this.SeriesTimerId === data.Id) {
- refresh = true;
- }
- }
- if (data.ProgramId && options) {
- if (options.programId === data.ProgramId) {
- refresh = true;
- }
- }
-
- if (refresh) {
- this.refresh();
- }
+ if (refresh) {
+ this.refresh();
}
+}
- function RecordingEditor(options) {
+class RecordingEditor {
+ constructor(options) {
this.options = options;
this.embed();
- var timerChangedHandler = onTimerChangedExternally.bind(this);
+ const timerChangedHandler = onTimerChangedExternally.bind(this);
this.timerChangedHandler = timerChangedHandler;
events.on(serverNotifications, 'TimerCreated', timerChangedHandler);
events.on(serverNotifications, 'TimerCancelled', timerChangedHandler);
- var seriesTimerChangedHandler = onSeriesTimerChangedExternally.bind(this);
+ const seriesTimerChangedHandler = onSeriesTimerChangedExternally.bind(this);
this.seriesTimerChangedHandler = seriesTimerChangedHandler;
events.on(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler);
events.on(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler);
}
- function onManageRecordingClick(e) {
- var options = this.options;
- if (!this.TimerId || this.Status === 'Cancelled') {
- return;
- }
-
- var self = this;
- require(['recordingEditor'], function (recordingEditor) {
- recordingEditor.show(self.TimerId, options.serverId, {
- enableCancel: false
- }).then(function () {
- self.changed = true;
- });
- });
- }
-
- function onManageSeriesRecordingClick(e) {
- var options = this.options;
-
- if (!this.SeriesTimerId) {
- return;
- }
-
- var self = this;
-
- require(['seriesRecordingEditor'], function (seriesRecordingEditor) {
- seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, {
-
- enableCancel: false
-
- }).then(function () {
- self.changed = true;
- });
- });
- }
-
- function onRecordChange(e) {
- this.changed = true;
-
- var self = this;
- var options = this.options;
- var apiClient = connectionManager.getApiClient(options.serverId);
-
- var button = dom.parentWithTag(e.target, 'BUTTON');
- var isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
-
- var hasEnabledTimer = this.TimerId && this.Status !== 'Cancelled';
-
- if (isChecked) {
- if (!hasEnabledTimer) {
- loading.show();
- recordingHelper.createRecording(apiClient, options.programId, false).then(function () {
- events.trigger(self, 'recordingchanged');
- fetchData(self);
- loading.hide();
- });
- }
- } else {
- if (hasEnabledTimer) {
- loading.show();
- recordingHelper.cancelTimer(apiClient, this.TimerId, true).then(function () {
- events.trigger(self, 'recordingchanged');
- fetchData(self);
- loading.hide();
- });
- }
- }
- }
-
- function sendToast(msg) {
- require(['toast'], function (toast) {
- toast(msg);
- });
- }
-
- function onRecordSeriesChange(e) {
- this.changed = true;
-
- var self = this;
- var options = this.options;
- var apiClient = connectionManager.getApiClient(options.serverId);
-
- var button = dom.parentWithTag(e.target, 'BUTTON');
- var isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
-
- if (isChecked) {
- options.parent.querySelector('.recordSeriesContainer').classList.remove('hide');
- if (!this.SeriesTimerId) {
- var promise = this.TimerId ?
- recordingHelper.changeRecordingToSeries(apiClient, this.TimerId, options.programId) :
- recordingHelper.createRecording(apiClient, options.programId, true);
- promise.then(function () {
- fetchData(self);
- });
- }
- } else {
- if (this.SeriesTimerId) {
- apiClient.cancelLiveTvSeriesTimer(this.SeriesTimerId).then(function () {
- sendToast(globalize.translate('RecordingCancelled'));
- fetchData(self);
- });
- }
- }
- }
-
- RecordingEditor.prototype.embed = function () {
- var self = this;
+ embed() {
+ const self = this;
return new Promise(function (resolve, reject) {
- require(['text!./recordingfields.template.html'], function (template) {
- var options = self.options;
- var context = options.parent;
+ import('text!./recordingfields.template.html').then(({default: template}) => {
+ const options = self.options;
+ const context = options.parent;
context.innerHTML = globalize.translateHtml(template, 'core');
context.querySelector('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self));
@@ -224,29 +131,134 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
fetchData(self).then(resolve);
});
});
- };
+ }
- RecordingEditor.prototype.hasChanged = function () {
+ hasChanged() {
return this.changed;
- };
+ }
- RecordingEditor.prototype.refresh = function () {
+ refresh() {
fetchData(this);
- };
+ }
- RecordingEditor.prototype.destroy = function () {
- var timerChangedHandler = this.timerChangedHandler;
+ destroy() {
+ const timerChangedHandler = this.timerChangedHandler;
this.timerChangedHandler = null;
events.off(serverNotifications, 'TimerCreated', timerChangedHandler);
events.off(serverNotifications, 'TimerCancelled', timerChangedHandler);
- var seriesTimerChangedHandler = this.seriesTimerChangedHandler;
+ const seriesTimerChangedHandler = this.seriesTimerChangedHandler;
this.seriesTimerChangedHandler = null;
events.off(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler);
events.off(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler);
- };
+ }
+}
- return RecordingEditor;
-});
+function onManageRecordingClick(e) {
+ const options = this.options;
+ if (!this.TimerId || this.Status === 'Cancelled') {
+ return;
+ }
+
+ const self = this;
+ import('recordingEditor').then(({default: recordingEditor}) => {
+ recordingEditor.show(self.TimerId, options.serverId, {
+ enableCancel: false
+ }).then(function () {
+ self.changed = true;
+ });
+ });
+}
+
+function onManageSeriesRecordingClick(e) {
+ const options = this.options;
+
+ if (!this.SeriesTimerId) {
+ return;
+ }
+
+ const self = this;
+
+ import('seriesRecordingEditor').then(({default: seriesRecordingEditor}) => {
+ seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, {
+
+ enableCancel: false
+
+ }).then(function () {
+ self.changed = true;
+ });
+ });
+}
+
+function onRecordChange(e) {
+ this.changed = true;
+
+ const self = this;
+ const options = this.options;
+ const apiClient = connectionManager.getApiClient(options.serverId);
+
+ const button = dom.parentWithTag(e.target, 'BUTTON');
+ const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
+
+ const hasEnabledTimer = this.TimerId && this.Status !== 'Cancelled';
+
+ if (isChecked) {
+ if (!hasEnabledTimer) {
+ loading.show();
+ recordingHelper.createRecording(apiClient, options.programId, false).then(function () {
+ events.trigger(self, 'recordingchanged');
+ fetchData(self);
+ loading.hide();
+ });
+ }
+ } else {
+ if (hasEnabledTimer) {
+ loading.show();
+ recordingHelper.cancelTimer(apiClient, this.TimerId, true).then(function () {
+ events.trigger(self, 'recordingchanged');
+ fetchData(self);
+ loading.hide();
+ });
+ }
+ }
+}
+
+function sendToast(msg) {
+ import('toast').then(({default: toast}) => {
+ toast(msg);
+ });
+}
+
+function onRecordSeriesChange(e) {
+ this.changed = true;
+
+ const self = this;
+ const options = this.options;
+ const apiClient = connectionManager.getApiClient(options.serverId);
+
+ const button = dom.parentWithTag(e.target, 'BUTTON');
+ const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
+
+ if (isChecked) {
+ options.parent.querySelector('.recordSeriesContainer').classList.remove('hide');
+ if (!this.SeriesTimerId) {
+ const promise = this.TimerId ?
+ recordingHelper.changeRecordingToSeries(apiClient, this.TimerId, options.programId) :
+ recordingHelper.createRecording(apiClient, options.programId, true);
+ promise.then(function () {
+ fetchData(self);
+ });
+ }
+ } else {
+ if (this.SeriesTimerId) {
+ apiClient.cancelLiveTvSeriesTimer(this.SeriesTimerId).then(function () {
+ sendToast(globalize.translate('RecordingCancelled'));
+ fetchData(self);
+ });
+ }
+ }
+}
+
+export default RecordingEditor;
diff --git a/src/components/recordingcreator/recordinghelper.js b/src/components/recordingcreator/recordinghelper.js
index 4a0bdd9b0..13359de2b 100644
--- a/src/components/recordingcreator/recordinghelper.js
+++ b/src/components/recordingcreator/recordinghelper.js
@@ -1,192 +1,195 @@
-define(['globalize', 'loading', 'connectionManager'], function (globalize, loading, connectionManager) {
- 'use strict';
+import globalize from 'globalize';
+import loading from 'loading';
+import connectionManager from 'connectionManager';
- function changeRecordingToSeries(apiClient, timerId, programId, confirmTimerCancellation) {
- loading.show();
+/*eslint prefer-const: "error"*/
- return apiClient.getItem(apiClient.getCurrentUserId(), programId).then(function (item) {
- if (item.IsSeries) {
- // create series
- return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (timerDefaults) {
- return apiClient.createLiveTvSeriesTimer(timerDefaults).then(function () {
- loading.hide();
- sendToast(globalize.translate('SeriesRecordingScheduled'));
+function changeRecordingToSeries(apiClient, timerId, programId, confirmTimerCancellation) {
+ loading.show();
+
+ return apiClient.getItem(apiClient.getCurrentUserId(), programId).then(function (item) {
+ if (item.IsSeries) {
+ // create series
+ return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (timerDefaults) {
+ return apiClient.createLiveTvSeriesTimer(timerDefaults).then(function () {
+ loading.hide();
+ sendToast(globalize.translate('SeriesRecordingScheduled'));
+ });
+ });
+ } else {
+ // cancel
+ if (confirmTimerCancellation) {
+ return cancelTimerWithConfirmation(timerId, apiClient.serverId());
+ }
+
+ return cancelTimer(apiClient.serverId(), timerId, true);
+ }
+ });
+}
+
+function cancelTimerWithConfirmation(timerId, serverId) {
+ return new Promise(function (resolve, reject) {
+ import('confirm').then(({ default: confirm }) => {
+ confirm.default({
+
+ text: globalize.translate('MessageConfirmRecordingCancellation'),
+ primary: 'delete',
+ confirmText: globalize.translate('HeaderCancelRecording'),
+ cancelText: globalize.translate('HeaderKeepRecording')
+
+ }).then(function () {
+ loading.show();
+
+ const apiClient = connectionManager.getApiClient(serverId);
+ cancelTimer(apiClient, timerId, true).then(resolve, reject);
+ }, reject);
+ });
+ });
+}
+
+function cancelSeriesTimerWithConfirmation(timerId, serverId) {
+ return new Promise(function (resolve, reject) {
+ import('confirm').then(({ default: confirm }) => {
+ confirm.default({
+
+ text: globalize.translate('MessageConfirmRecordingCancellation'),
+ primary: 'delete',
+ confirmText: globalize.translate('HeaderCancelSeries'),
+ cancelText: globalize.translate('HeaderKeepSeries')
+
+ }).then(function () {
+ loading.show();
+
+ const apiClient = connectionManager.getApiClient(serverId);
+ apiClient.cancelLiveTvSeriesTimer(timerId).then(function () {
+ import('toast').then(({default: toast}) => {
+ toast(globalize.translate('SeriesCancelled'));
});
+
+ loading.hide();
+ resolve();
+ }, reject);
+ }, reject);
+ });
+ });
+}
+
+function cancelTimer(apiClient, timerId, hideLoading) {
+ loading.show();
+ return apiClient.cancelLiveTvTimer(timerId).then(function () {
+ if (hideLoading !== false) {
+ loading.hide();
+ sendToast(globalize.translate('RecordingCancelled'));
+ }
+ });
+}
+
+function createRecording(apiClient, programId, isSeries) {
+ loading.show();
+ return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (item) {
+ const promise = isSeries ?
+ apiClient.createLiveTvSeriesTimer(item) :
+ apiClient.createLiveTvTimer(item);
+
+ return promise.then(function () {
+ loading.hide();
+ sendToast(globalize.translate('RecordingScheduled'));
+ });
+ });
+}
+
+function sendToast(msg) {
+ import('toast').then(({ default: toast }) => {
+ toast(msg);
+ });
+}
+
+function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId) {
+ return new Promise(function (resolve, reject) {
+ import('dialog').then(({ default: dialog }) => {
+ const items = [];
+
+ items.push({
+ name: globalize.translate('HeaderKeepRecording'),
+ id: 'cancel',
+ type: 'submit'
+ });
+
+ if (timerStatus === 'InProgress') {
+ items.push({
+ name: globalize.translate('HeaderStopRecording'),
+ id: 'canceltimer',
+ type: 'cancel'
});
} else {
- // cancel
- if (confirmTimerCancellation) {
- return cancelTimerWithConfirmation(timerId, apiClient.serverId());
- }
-
- return cancelTimer(apiClient.serverId(), timerId, true);
+ items.push({
+ name: globalize.translate('HeaderCancelRecording'),
+ id: 'canceltimer',
+ type: 'cancel'
+ });
}
- });
- }
- function cancelTimerWithConfirmation(timerId, serverId) {
- return new Promise(function (resolve, reject) {
- require(['confirm'], function (confirm) {
- confirm.default({
-
- text: globalize.translate('MessageConfirmRecordingCancellation'),
- primary: 'delete',
- confirmText: globalize.translate('HeaderCancelRecording'),
- cancelText: globalize.translate('HeaderKeepRecording')
-
- }).then(function () {
- loading.show();
-
- var apiClient = connectionManager.getApiClient(serverId);
- cancelTimer(apiClient, timerId, true).then(resolve, reject);
- }, reject);
+ items.push({
+ name: globalize.translate('HeaderCancelSeries'),
+ id: 'cancelseriestimer',
+ type: 'cancel'
});
- });
- }
- function cancelSeriesTimerWithConfirmation(timerId, serverId) {
- return new Promise(function (resolve, reject) {
- require(['confirm'], function (confirm) {
- confirm.default({
+ dialog({
- text: globalize.translate('MessageConfirmRecordingCancellation'),
- primary: 'delete',
- confirmText: globalize.translate('HeaderCancelSeries'),
- cancelText: globalize.translate('HeaderKeepSeries')
+ text: globalize.translate('MessageConfirmRecordingCancellation'),
+ buttons: items
- }).then(function () {
+ }).then(function (result) {
+ const apiClient = connectionManager.getApiClient(serverId);
+
+ if (result === 'canceltimer') {
loading.show();
- var apiClient = connectionManager.getApiClient(serverId);
- apiClient.cancelLiveTvSeriesTimer(timerId).then(function () {
- require(['toast'], function (toast) {
+ cancelTimer(apiClient, timerId, true).then(resolve, reject);
+ } else if (result === 'cancelseriestimer') {
+ loading.show();
+
+ apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () {
+ import('toast').then(({ default: toast }) => {
toast(globalize.translate('SeriesCancelled'));
});
loading.hide();
resolve();
}, reject);
- }, reject);
- });
- });
- }
-
- function cancelTimer(apiClient, timerId, hideLoading) {
- loading.show();
- return apiClient.cancelLiveTvTimer(timerId).then(function () {
- if (hideLoading !== false) {
- loading.hide();
- sendToast(globalize.translate('RecordingCancelled'));
- }
- });
- }
-
- function createRecording(apiClient, programId, isSeries) {
- loading.show();
- return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (item) {
- var promise = isSeries ?
- apiClient.createLiveTvSeriesTimer(item) :
- apiClient.createLiveTvTimer(item);
-
- return promise.then(function () {
- loading.hide();
- sendToast(globalize.translate('RecordingScheduled'));
- });
- });
- }
-
- function sendToast(msg) {
- require(['toast'], function (toast) {
- toast(msg);
- });
- }
-
- function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId) {
- return new Promise(function (resolve, reject) {
- require(['dialog'], function (dialog) {
- var items = [];
-
- items.push({
- name: globalize.translate('HeaderKeepRecording'),
- id: 'cancel',
- type: 'submit'
- });
-
- if (timerStatus === 'InProgress') {
- items.push({
- name: globalize.translate('HeaderStopRecording'),
- id: 'canceltimer',
- type: 'cancel'
- });
} else {
- items.push({
- name: globalize.translate('HeaderCancelRecording'),
- id: 'canceltimer',
- type: 'cancel'
- });
+ resolve();
}
-
- items.push({
- name: globalize.translate('HeaderCancelSeries'),
- id: 'cancelseriestimer',
- type: 'cancel'
- });
-
- dialog({
-
- text: globalize.translate('MessageConfirmRecordingCancellation'),
- buttons: items
-
- }).then(function (result) {
- var apiClient = connectionManager.getApiClient(serverId);
-
- if (result === 'canceltimer') {
- loading.show();
-
- cancelTimer(apiClient, timerId, true).then(resolve, reject);
- } else if (result === 'cancelseriestimer') {
- loading.show();
-
- apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () {
- require(['toast'], function (toast) {
- toast(globalize.translate('SeriesCancelled'));
- });
-
- loading.hide();
- resolve();
- }, reject);
- } else {
- resolve();
- }
- }, reject);
- });
+ }, reject);
});
- }
+ });
+}
- function toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId) {
- var apiClient = connectionManager.getApiClient(serverId);
- var hasTimer = timerId && timerStatus !== 'Cancelled';
- if (seriesTimerId && hasTimer) {
- // cancel
- return showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId);
- } else if (hasTimer && programId) {
- // change to series recording, if possible
- // otherwise cancel individual recording
- return changeRecordingToSeries(apiClient, timerId, programId, true);
- } else if (programId) {
- // schedule recording
- return createRecording(apiClient, programId);
- } else {
- return Promise.reject();
- }
+function toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId) {
+ const apiClient = connectionManager.getApiClient(serverId);
+ const hasTimer = timerId && timerStatus !== 'Cancelled';
+ if (seriesTimerId && hasTimer) {
+ // cancel
+ return showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId);
+ } else if (hasTimer && programId) {
+ // change to series recording, if possible
+ // otherwise cancel individual recording
+ return changeRecordingToSeries(apiClient, timerId, programId, true);
+ } else if (programId) {
+ // schedule recording
+ return createRecording(apiClient, programId);
+ } else {
+ return Promise.reject();
}
+}
+
+export default {
+ cancelTimer: cancelTimer,
+ createRecording: createRecording,
+ changeRecordingToSeries: changeRecordingToSeries,
+ toggleRecording: toggleRecording,
+ cancelTimerWithConfirmation: cancelTimerWithConfirmation,
+ cancelSeriesTimerWithConfirmation: cancelSeriesTimerWithConfirmation
+};
- return {
- cancelTimer: cancelTimer,
- createRecording: createRecording,
- changeRecordingToSeries: changeRecordingToSeries,
- toggleRecording: toggleRecording,
- cancelTimerWithConfirmation: cancelTimerWithConfirmation,
- cancelSeriesTimerWithConfirmation: cancelSeriesTimerWithConfirmation
- };
-});
diff --git a/src/components/recordingcreator/seriesrecordingeditor.js b/src/components/recordingcreator/seriesrecordingeditor.js
index ea20c7267..48fbbcf22 100644
--- a/src/components/recordingcreator/seriesrecordingeditor.js
+++ b/src/components/recordingcreator/seriesrecordingeditor.js
@@ -1,141 +1,200 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'datetime', 'scrollStyles', 'emby-button', 'emby-checkbox', 'emby-input', 'emby-select', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader, datetime) {
- 'use strict';
+import dialogHelper from 'dialogHelper';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+import loading from 'loading';
+import scrollHelper from 'scrollHelper';
+import datetime from 'datetime';
+import 'scrollStyles';
+import 'emby-button';
+import 'emby-checkbox';
+import 'emby-input';
+import 'emby-select';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'css!./recordingcreator';
+import 'material-icons';
+import 'flexStyles';
- var currentDialog;
- var recordingUpdated = false;
- var recordingDeleted = false;
- var currentItemId;
- var currentServerId;
+/*eslint prefer-const: "error"*/
- function deleteTimer(apiClient, timerId) {
- return new Promise(function (resolve, reject) {
- require(['recordingHelper'], function (recordingHelper) {
- recordingHelper.cancelSeriesTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
- });
+let currentDialog;
+let recordingUpdated = false;
+let recordingDeleted = false;
+let currentItemId;
+let currentServerId;
+
+function deleteTimer(apiClient, timerId) {
+ return new Promise(function (resolve, reject) {
+ import('recordingHelper').then(({ default: recordingHelper }) => {
+ recordingHelper.cancelSeriesTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
});
+ });
+}
+
+function renderTimer(context, item) {
+ context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
+ context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
+
+ context.querySelector('.selectChannels').value = item.RecordAnyChannel ? 'all' : 'one';
+ context.querySelector('.selectAirTime').value = item.RecordAnyTime ? 'any' : 'original';
+
+ context.querySelector('.selectShowType').value = item.RecordNewOnly ? 'new' : 'all';
+ context.querySelector('.chkSkipEpisodesInLibrary').checked = item.SkipEpisodesInLibrary;
+ context.querySelector('.selectKeepUpTo').value = item.KeepUpTo || 0;
+
+ if (item.ChannelName || item.ChannelNumber) {
+ context.querySelector('.optionChannelOnly').innerHTML = globalize.translate('ChannelNameOnly', item.ChannelName || item.ChannelNumber);
+ } else {
+ context.querySelector('.optionChannelOnly').innerHTML = globalize.translate('OneChannel');
}
- function renderTimer(context, item, apiClient) {
- context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
- context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
+ context.querySelector('.optionAroundTime').innerHTML = globalize.translate('AroundTime', datetime.getDisplayTime(datetime.parseISO8601Date(item.StartDate)));
- context.querySelector('.selectChannels').value = item.RecordAnyChannel ? 'all' : 'one';
- context.querySelector('.selectAirTime').value = item.RecordAnyTime ? 'any' : 'original';
+ loading.hide();
+}
- context.querySelector('.selectShowType').value = item.RecordNewOnly ? 'new' : 'all';
- context.querySelector('.chkSkipEpisodesInLibrary').checked = item.SkipEpisodesInLibrary;
- context.querySelector('.selectKeepUpTo').value = item.KeepUpTo || 0;
+function closeDialog(isDeleted) {
+ recordingUpdated = true;
+ recordingDeleted = isDeleted;
- if (item.ChannelName || item.ChannelNumber) {
- context.querySelector('.optionChannelOnly').innerHTML = globalize.translate('ChannelNameOnly', item.ChannelName || item.ChannelNumber);
- } else {
- context.querySelector('.optionChannelOnly').innerHTML = globalize.translate('OneChannel');
- }
+ dialogHelper.close(currentDialog);
+}
- context.querySelector('.optionAroundTime').innerHTML = globalize.translate('AroundTime', datetime.getDisplayTime(datetime.parseISO8601Date(item.StartDate)));
+function onSubmit(e) {
+ const form = this;
+ const apiClient = connectionManager.getApiClient(currentServerId);
+
+ apiClient.getLiveTvSeriesTimer(currentItemId).then(function (item) {
+ item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
+ item.PostPaddingSeconds = form.querySelector('#txtPostPaddingMinutes').value * 60;
+ item.RecordAnyChannel = form.querySelector('.selectChannels').value === 'all';
+ item.RecordAnyTime = form.querySelector('.selectAirTime').value === 'any';
+ item.RecordNewOnly = form.querySelector('.selectShowType').value === 'new';
+ item.SkipEpisodesInLibrary = form.querySelector('.chkSkipEpisodesInLibrary').checked;
+ item.KeepUpTo = form.querySelector('.selectKeepUpTo').value;
+
+ apiClient.updateLiveTvSeriesTimer(item);
+ });
+
+ e.preventDefault();
+
+ // Disable default form submission
+ return false;
+}
+
+function init(context) {
+ fillKeepUpTo(context);
+
+ context.querySelector('.btnCancel').addEventListener('click', function () {
+ closeDialog(false);
+ });
+
+ context.querySelector('.btnCancelRecording').addEventListener('click', function () {
+ const apiClient = connectionManager.getApiClient(currentServerId);
+ deleteTimer(apiClient, currentItemId).then(function () {
+ closeDialog(true);
+ });
+ });
+
+ context.querySelector('form').addEventListener('submit', onSubmit);
+}
+
+function reload(context, id) {
+ const apiClient = connectionManager.getApiClient(currentServerId);
+
+ loading.show();
+ if (typeof id === 'string') {
+ currentItemId = id;
+
+ apiClient.getLiveTvSeriesTimer(id).then(function (result) {
+ renderTimer(context, result);
+ loading.hide();
+ });
+ } else if (id) {
+ currentItemId = id.Id;
+
+ renderTimer(context, id);
loading.hide();
}
+}
- function closeDialog(isDeleted) {
- recordingUpdated = true;
- recordingDeleted = isDeleted;
+function fillKeepUpTo(context) {
+ let html = '';
- dialogHelper.close(currentDialog);
- }
+ for (let i = 0; i <= 50; i++) {
+ let text;
- function onSubmit(e) {
- var form = this;
-
- var apiClient = connectionManager.getApiClient(currentServerId);
-
- apiClient.getLiveTvSeriesTimer(currentItemId).then(function (item) {
- item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
- item.PostPaddingSeconds = form.querySelector('#txtPostPaddingMinutes').value * 60;
- item.RecordAnyChannel = form.querySelector('.selectChannels').value === 'all';
- item.RecordAnyTime = form.querySelector('.selectAirTime').value === 'any';
- item.RecordNewOnly = form.querySelector('.selectShowType').value === 'new';
- item.SkipEpisodesInLibrary = form.querySelector('.chkSkipEpisodesInLibrary').checked;
- item.KeepUpTo = form.querySelector('.selectKeepUpTo').value;
-
- apiClient.updateLiveTvSeriesTimer(item);
- });
-
- e.preventDefault();
-
- // Disable default form submission
- return false;
- }
-
- function init(context) {
- fillKeepUpTo(context);
-
- context.querySelector('.btnCancel').addEventListener('click', function () {
- closeDialog(false);
- });
-
- context.querySelector('.btnCancelRecording').addEventListener('click', function () {
- var apiClient = connectionManager.getApiClient(currentServerId);
- deleteTimer(apiClient, currentItemId).then(function () {
- closeDialog(true);
- });
- });
-
- context.querySelector('form').addEventListener('submit', onSubmit);
- }
-
- function reload(context, id) {
- var apiClient = connectionManager.getApiClient(currentServerId);
-
- loading.show();
- if (typeof id === 'string') {
- currentItemId = id;
-
- apiClient.getLiveTvSeriesTimer(id).then(function (result) {
- renderTimer(context, result, apiClient);
- loading.hide();
- });
- } else if (id) {
- currentItemId = id.Id;
-
- renderTimer(context, id, apiClient);
- loading.hide();
- }
- }
-
- function fillKeepUpTo(context) {
- var html = '';
-
- for (var i = 0; i <= 50; i++) {
- var text;
-
- if (i === 0) {
- text = globalize.translate('AsManyAsPossible');
- } else if (i === 1) {
- text = globalize.translate('ValueOneEpisode');
- } else {
- text = globalize.translate('ValueEpisodeCount', i);
- }
-
- html += '';
+ if (i === 0) {
+ text = globalize.translate('AsManyAsPossible');
+ } else if (i === 1) {
+ text = globalize.translate('ValueOneEpisode');
+ } else {
+ text = globalize.translate('ValueEpisodeCount', i);
}
- context.querySelector('.selectKeepUpTo').innerHTML = html;
+ html += '';
}
- function onFieldChange(e) {
- this.querySelector('.btnSubmit').click();
- }
+ context.querySelector('.selectKeepUpTo').innerHTML = html;
+}
- function embed(itemId, serverId, options) {
+function onFieldChange() {
+ this.querySelector('.btnSubmit').click();
+}
+
+function embed(itemId, serverId, options) {
+ recordingUpdated = false;
+ recordingDeleted = false;
+ currentServerId = serverId;
+ loading.show();
+ options = options || {};
+
+ import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => {
+ const dialogOptions = {
+ removeOnClose: true,
+ scrollY: false
+ };
+
+ if (layoutManager.tv) {
+ dialogOptions.size = 'fullscreen';
+ } else {
+ dialogOptions.size = 'small';
+ }
+
+ const dlg = options.context;
+
+ dlg.classList.add('hide');
+ dlg.innerHTML = globalize.translateHtml(template, 'core');
+
+ dlg.querySelector('.formDialogHeader').classList.add('hide');
+ dlg.querySelector('.formDialogFooter').classList.add('hide');
+ dlg.querySelector('.formDialogContent').className = '';
+ dlg.querySelector('.dialogContentInner').className = '';
+ dlg.classList.remove('hide');
+
+ dlg.removeEventListener('change', onFieldChange);
+ dlg.addEventListener('change', onFieldChange);
+
+ currentDialog = dlg;
+
+ init(dlg);
+
+ reload(dlg, itemId);
+ });
+}
+
+function showEditor(itemId, serverId, options) {
+ return new Promise(function (resolve, reject) {
recordingUpdated = false;
recordingDeleted = false;
currentServerId = serverId;
loading.show();
options = options || {};
- require(['text!./seriesrecordingeditor.template.html'], function (template) {
- var dialogOptions = {
+ import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => {
+ const dialogOptions = {
removeOnClose: true,
scrollY: false
};
@@ -146,101 +205,58 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
dialogOptions.size = 'small';
}
- var dlg = options.context;
+ const dlg = dialogHelper.createDialog(dialogOptions);
- dlg.classList.add('hide');
- dlg.innerHTML = globalize.translateHtml(template, 'core');
+ dlg.classList.add('formDialog');
+ dlg.classList.add('recordingDialog');
- dlg.querySelector('.formDialogHeader').classList.add('hide');
- dlg.querySelector('.formDialogFooter').classList.add('hide');
- dlg.querySelector('.formDialogContent').className = '';
- dlg.querySelector('.dialogContentInner').className = '';
- dlg.classList.remove('hide');
+ if (!layoutManager.tv) {
+ dlg.style['min-width'] = '20%';
+ }
- dlg.removeEventListener('change', onFieldChange);
- dlg.addEventListener('change', onFieldChange);
+ let html = '';
+
+ html += globalize.translateHtml(template, 'core');
+
+ dlg.innerHTML = html;
+
+ if (options.enableCancel === false) {
+ dlg.querySelector('.formDialogFooter').classList.add('hide');
+ }
currentDialog = dlg;
+ dlg.addEventListener('closing', function () {
+ if (!recordingDeleted) {
+ this.querySelector('.btnSubmit').click();
+ }
+ });
+
+ dlg.addEventListener('close', function () {
+ if (recordingUpdated) {
+ resolve({
+ updated: true,
+ deleted: recordingDeleted
+ });
+ } else {
+ reject();
+ }
+ });
+
+ if (layoutManager.tv) {
+ scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+ }
+
init(dlg);
reload(dlg, itemId);
+
+ dialogHelper.open(dlg);
});
- }
+ });
+}
- function showEditor(itemId, serverId, options) {
- return new Promise(function (resolve, reject) {
- recordingUpdated = false;
- recordingDeleted = false;
- currentServerId = serverId;
- loading.show();
- options = options || {};
-
- require(['text!./seriesrecordingeditor.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');
-
- if (!layoutManager.tv) {
- dlg.style['min-width'] = '20%';
- }
-
- var html = '';
-
- html += globalize.translateHtml(template, 'core');
-
- dlg.innerHTML = html;
-
- if (options.enableCancel === false) {
- dlg.querySelector('.formDialogFooter').classList.add('hide');
- }
-
- currentDialog = dlg;
-
- dlg.addEventListener('closing', function () {
- if (!recordingDeleted) {
- this.querySelector('.btnSubmit').click();
- }
- });
-
- dlg.addEventListener('close', function () {
- if (recordingUpdated) {
- resolve({
- updated: true,
- deleted: recordingDeleted
- });
- } else {
- reject();
- }
- });
-
- if (layoutManager.tv) {
- scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
- }
-
- init(dlg);
-
- reload(dlg, itemId);
-
- dialogHelper.open(dlg);
- });
- });
- }
-
- return {
- show: showEditor,
- embed: embed
- };
-});
+export default {
+ show: showEditor,
+ embed: embed
+};
diff --git a/src/components/refreshdialog/refreshdialog.js b/src/components/refreshdialog/refreshdialog.js
index 40e118350..1ec051744 100644
--- a/src/components/refreshdialog/refreshdialog.js
+++ b/src/components/refreshdialog/refreshdialog.js
@@ -1,94 +1,108 @@
-define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'emby-input', 'emby-checkbox', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (dom, shell, dialogHelper, loading, layoutManager, connectionManager, appRouter, globalize) {
- 'use strict';
+import dom from 'dom';
+import dialogHelper from 'dialogHelper';
+import loading from 'loading';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
+import 'emby-input';
+import 'emby-checkbox';
+import 'paper-icon-button-light';
+import 'emby-select';
+import 'material-icons';
+import 'css!./../formdialog';
+import 'emby-button';
- function getEditorHtml() {
- var html = '';
+/*eslint prefer-const: "error"*/
- html += '';
- html += '
';
- function centerFocus(elem, horiz, on) {
- require(['scrollHelper'], function (scrollHelper) {
- var fn = on ? 'on' : 'off';
- scrollHelper.centerFocus[fn](elem, horiz);
+ return html;
+}
+
+function centerFocus(elem, horiz, on) {
+ import('scrollHelper').then(({default: scrollHelper}) => {
+ const fn = on ? 'on' : 'off';
+ scrollHelper.centerFocus[fn](elem, horiz);
+ });
+}
+
+function onSubmit(e) {
+ loading.show();
+
+ const instance = this;
+ const dlg = dom.parentWithClass(e.target, 'dialog');
+ const options = instance.options;
+
+ const apiClient = connectionManager.getApiClient(options.serverId);
+
+ const replaceAllMetadata = dlg.querySelector('#selectMetadataRefreshMode').value === 'all';
+
+ const mode = dlg.querySelector('#selectMetadataRefreshMode').value === 'scan' ? 'Default' : 'FullRefresh';
+ const replaceAllImages = mode === 'FullRefresh' && dlg.querySelector('.chkReplaceImages').checked;
+
+ options.itemIds.forEach(function (itemId) {
+ apiClient.refreshItem(itemId, {
+
+ Recursive: true,
+ ImageRefreshMode: mode,
+ MetadataRefreshMode: mode,
+ ReplaceAllImages: replaceAllImages,
+ ReplaceAllMetadata: replaceAllMetadata
});
- }
+ });
- function onSubmit(e) {
- loading.show();
+ dialogHelper.close(dlg);
- var instance = this;
- var dlg = dom.parentWithClass(e.target, 'dialog');
- var options = instance.options;
+ import('toast').then(({default: toast}) => {
+ toast(globalize.translate('RefreshQueued'));
+ });
- var apiClient = connectionManager.getApiClient(options.serverId);
+ loading.hide();
- var replaceAllMetadata = dlg.querySelector('#selectMetadataRefreshMode').value === 'all';
+ e.preventDefault();
+ return false;
+}
- var mode = dlg.querySelector('#selectMetadataRefreshMode').value === 'scan' ? 'Default' : 'FullRefresh';
- var replaceAllImages = mode === 'FullRefresh' && dlg.querySelector('.chkReplaceImages').checked;
-
- options.itemIds.forEach(function (itemId) {
- apiClient.refreshItem(itemId, {
-
- Recursive: true,
- ImageRefreshMode: mode,
- MetadataRefreshMode: mode,
- ReplaceAllImages: replaceAllImages,
- ReplaceAllMetadata: replaceAllMetadata
- });
- });
-
- dialogHelper.close(dlg);
-
- require(['toast'], function (toast) {
- toast(globalize.translate('RefreshQueued'));
- });
-
- loading.hide();
-
- e.preventDefault();
- return false;
- }
-
- function RefreshDialog(options) {
+class RefreshDialog {
+ constructor(options) {
this.options = options;
}
- RefreshDialog.prototype.show = function () {
- var dialogOptions = {
+ show() {
+ const dialogOptions = {
removeOnClose: true,
scrollY: false
};
@@ -99,12 +113,12 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
dialogOptions.size = 'small';
}
- var dlg = dialogHelper.createDialog(dialogOptions);
+ const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
- var html = '';
- var title = globalize.translate('RefreshMetadata');
+ let html = '';
+ const title = globalize.translate('RefreshMetadata');
html += '';
- html += '';
+ html += '
';
+ html += '';
html += '';
@@ -150,7 +164,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
dlg.addEventListener('close', resolve);
dialogHelper.open(dlg);
});
- };
+ }
+}
- return RefreshDialog;
-});
+export default RefreshDialog;
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index db2bed36a..6048c918c 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -1,933 +1,954 @@
-define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageLoader', 'playbackManager', 'nowPlayingHelper', 'events', 'connectionManager', 'apphost', 'globalize', 'layoutManager', 'userSettings', 'cardBuilder', 'itemContextMenu', 'cardStyle', 'emby-itemscontainer', 'css!./remotecontrol.css', 'emby-ratingbutton'], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings, cardBuilder, itemContextMenu) {
- 'use strict';
- var showMuteButton = true;
- var showVolumeSlider = true;
+import datetime from 'datetime';
+import backdrop from 'backdrop';
+import listView from 'listView';
+import imageLoader from 'imageLoader';
+import playbackManager from 'playbackManager';
+import nowPlayingHelper from 'nowPlayingHelper';
+import events from 'events';
+import connectionManager from 'connectionManager';
+import appHost from 'apphost';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import * as userSettings from 'userSettings';
+import cardBuilder from 'cardBuilder';
+import itemContextMenu from 'itemContextMenu';
+import 'cardStyle';
+import 'emby-itemscontainer';
+import 'css!./remotecontrol.css';
+import 'emby-ratingbutton';
- function showAudioMenu(context, player, button, item) {
- var currentIndex = playbackManager.getAudioStreamIndex(player);
- var streams = playbackManager.audioTracks(player);
- var menuItems = streams.map(function (s) {
- var menuItem = {
- name: s.DisplayTitle,
- id: s.Index
- };
+/*eslint prefer-const: "error"*/
- if (s.Index == currentIndex) {
- menuItem.selected = true;
- }
+let showMuteButton = true;
+let showVolumeSlider = true;
- return menuItem;
- });
+function showAudioMenu(context, player, button, item) {
+ const currentIndex = playbackManager.getAudioStreamIndex(player);
+ const streams = playbackManager.audioTracks(player);
+ const menuItems = streams.map(function (s) {
+ const menuItem = {
+ name: s.DisplayTitle,
+ id: s.Index
+ };
- require(['actionsheet'], function (actionsheet) {
- actionsheet.show({
- items: menuItems,
- positionTo: button,
- callback: function (id) {
- playbackManager.setAudioStreamIndex(parseInt(id), player);
- }
- });
- });
- }
-
- function showSubtitleMenu(context, player, button, item) {
- var currentIndex = playbackManager.getSubtitleStreamIndex(player);
- var streams = playbackManager.subtitleTracks(player);
- var menuItems = streams.map(function (s) {
- var menuItem = {
- name: s.DisplayTitle,
- id: s.Index
- };
-
- if (s.Index == currentIndex) {
- menuItem.selected = true;
- }
-
- return menuItem;
- });
- menuItems.unshift({
- id: -1,
- name: globalize.translate('ButtonOff'),
- selected: null == currentIndex
- });
-
- require(['actionsheet'], function (actionsheet) {
- actionsheet.show({
- items: menuItems,
- positionTo: button,
- callback: function (id) {
- playbackManager.setSubtitleStreamIndex(parseInt(id), player);
- }
- });
- });
- }
-
- function getNowPlayingNameHtml(nowPlayingItem, includeNonNameInfo) {
- return nowPlayingHelper.getNowPlayingNames(nowPlayingItem, includeNonNameInfo).map(function (i) {
- return i.text;
- }).join('
'); - } - - function seriesImageUrl(item, options) { - if ('Episode' !== item.Type) { - return null; + if (s.Index == currentIndex) { + menuItem.selected = true; } - options = options || {}; - options.type = options.type || 'Primary'; - if ('Primary' === options.type && item.SeriesPrimaryImageTag) { - options.tag = item.SeriesPrimaryImageTag; + return menuItem; + }); + + import('actionsheet').then(({ default: actionsheet }) => { + actionsheet.show({ + items: menuItems, + positionTo: button, + callback: function (id) { + playbackManager.setAudioStreamIndex(parseInt(id), player); + } + }); + }); +} + +function showSubtitleMenu(context, player, button, item) { + const currentIndex = playbackManager.getSubtitleStreamIndex(player); + const streams = playbackManager.subtitleTracks(player); + const menuItems = streams.map(function (s) { + const menuItem = { + name: s.DisplayTitle, + id: s.Index + }; + + if (s.Index == currentIndex) { + menuItem.selected = true; + } + + return menuItem; + }); + menuItems.unshift({ + id: -1, + name: globalize.translate('ButtonOff'), + selected: currentIndex == null + }); + + import('actionsheet').then(({ default: actionsheet }) => { + actionsheet.show({ + items: menuItems, + positionTo: button, + callback: function (id) { + playbackManager.setSubtitleStreamIndex(parseInt(id), player); + } + }); + }); +} + +function getNowPlayingNameHtml(nowPlayingItem, includeNonNameInfo) { + return nowPlayingHelper.getNowPlayingNames(nowPlayingItem, includeNonNameInfo).map(function (i) { + return i.text; + }).join('
'); +} + +function seriesImageUrl(item, options) { + if (item.Type !== 'Episode') { + return null; + } + + options = options || {}; + options.type = options.type || 'Primary'; + if (options.type === 'Primary' && item.SeriesPrimaryImageTag) { + options.tag = item.SeriesPrimaryImageTag; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); + } + + if (options.type === 'Thumb') { + if (item.SeriesThumbImageTag) { + options.tag = item.SeriesThumbImageTag; return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); } - if ('Thumb' === options.type) { - if (item.SeriesThumbImageTag) { - options.tag = item.SeriesThumbImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - - if (item.ParentThumbImageTag) { - options.tag = item.ParentThumbImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); - } + if (item.ParentThumbImageTag) { + options.tag = item.ParentThumbImageTag; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); } - - return null; } - function imageUrl(item, options) { - options = options || {}; - options.type = options.type || 'Primary'; + return null; +} - if (item.ImageTags && item.ImageTags[options.type]) { - options.tag = item.ImageTags[options.type]; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); - } +function imageUrl(item, options) { + options = options || {}; + options.type = options.type || 'Primary'; - if (item.AlbumId && item.AlbumPrimaryImageTag) { - options.tag = item.AlbumPrimaryImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); - } - - return null; + if (item.ImageTags && item.ImageTags[options.type]) { + options.tag = item.ImageTags[options.type]; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); } - function updateNowPlayingInfo(context, state, serverId) { - var item = state.NowPlayingItem; - var displayName = item ? getNowPlayingNameHtml(item).replace('
', ' - ') : ''; - if (typeof item !== 'undefined') { - var nowPlayingServerId = (item.ServerId || serverId); - if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') { - var songName = item.Name; - if (item.Album != null && item.Artists != null) { - var artistsSeries = ''; - var albumName = item.Album; - if (item.ArtistItems != null) { - for (const artist of item.ArtistItems) { - let artistName = artist.Name; - let artistId = artist.Id; - artistsSeries += `${artistName}`; - if (artist !== item.ArtistItems.slice(-1)[0]) { - artistsSeries += ', '; - } - } - } else if (item.Artists) { - // For some reason, Chromecast Player doesn't return a item.ArtistItems object, so we need to fallback - // to normal item.Artists item. - // TODO: Normalise fields returned by all the players - for (const artist of item.Artists) { - artistsSeries += `${artist}`; - if (artist !== item.Artists.slice(-1)[0]) { - artistsSeries += ', '; - } + if (item.AlbumId && item.AlbumPrimaryImageTag) { + options.tag = item.AlbumPrimaryImageTag; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); + } + + return null; +} + +function updateNowPlayingInfo(context, state, serverId) { + const item = state.NowPlayingItem; + const displayName = item ? getNowPlayingNameHtml(item).replace('
', ' - ') : ''; + if (typeof item !== 'undefined') { + const nowPlayingServerId = (item.ServerId || serverId); + if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') { + const songName = item.Name; + let artistsSeries = ''; + let albumName = ''; + if (item.Artists != null) { + if (item.ArtistItems != null) { + for (const artist of item.ArtistItems) { + const artistName = artist.Name; + const artistId = artist.Id; + artistsSeries += `${artistName}`; + if (artist !== item.ArtistItems.slice(-1)[0]) { + artistsSeries += ', '; } } - context.querySelector('.nowPlayingArtist').innerHTML = artistsSeries; - context.querySelector('.nowPlayingAlbum').innerHTML = '${albumName}`; - } - context.querySelector('.nowPlayingSongName').innerHTML = songName; - } else if (item.Type == 'Episode') { - if (item.SeasonName != null) { - var seasonName = item.SeasonName; - context.querySelector('.nowPlayingSeason').innerHTML = '${seasonName}`; - } - if (item.SeriesName != null) { - var seriesName = item.SeriesName; - if (item.SeriesId != null) { - context.querySelector('.nowPlayingSerie').innerHTML = '${seriesName}`; - } else { - context.querySelector('.nowPlayingSerie').innerHTML = seriesName; - } - } - context.querySelector('.nowPlayingEpisode').innerHTML = item.Name; - } else { - context.querySelector('.nowPlayingPageTitle').innerHTML = displayName; - } - - if (displayName.length > 0 && item.Type != 'Audio' && item.Type != 'Episode') { - context.querySelector('.nowPlayingPageTitle').classList.remove('hide'); - } else { - context.querySelector('.nowPlayingPageTitle').classList.add('hide'); - } - - var url = item ? seriesImageUrl(item, { - maxHeight: 300 * 2 - }) || imageUrl(item, { - maxHeight: 300 * 2 - }) : null; - - let contextButton = context.querySelector('.btnToggleContextMenu'); - // We remove the previous event listener by replacing the item in each update event - const autoFocusContextButton = document.activeElement === contextButton; - let contextButtonClone = contextButton.cloneNode(true); - contextButton.parentNode.replaceChild(contextButtonClone, contextButton); - contextButton = context.querySelector('.btnToggleContextMenu'); - if (autoFocusContextButton) { - contextButton.focus(); - } - const stopPlayback = !!layoutManager.mobile; - var options = { - play: false, - queue: false, - stopPlayback: stopPlayback, - clearQueue: true, - openAlbum: false, - positionTo: contextButton - }; - var apiClient = connectionManager.getApiClient(item.ServerId); - apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { - apiClient.getCurrentUser().then(function (user) { - contextButton.addEventListener('click', function () { - itemContextMenu.show(Object.assign({ - item: fullItem, - user: user - }, options)); - }); - }); - }); - setImageUrl(context, state, url); - if (item) { - backdrop.setBackdrops([item]); - apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { - var userData = fullItem.UserData || {}; - var likes = null == userData.Likes ? '' : userData.Likes; - context.querySelector('.nowPlayingPageUserDataButtonsTitle').innerHTML = ''; - context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = ''; - }); - } else { - backdrop.clearBackdrop(); - context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = ''; - } - } - } - - function setImageUrl(context, state, url) { - var item = state.NowPlayingItem; - var imgContainer = context.querySelector('.nowPlayingPageImageContainer'); - - if (url) { - imgContainer.innerHTML = '
';
- if (item.Type == 'Audio') {
- context.querySelector('.nowPlayingPageImage').classList.add('nowPlayingPageImageAudio');
- context.querySelector('.nowPlayingPageImageContainer').classList.remove('nowPlayingPageImageAudio');
- } else {
- context.querySelector('.nowPlayingPageImageContainer').classList.add('nowPlayingPageImagePoster');
- context.querySelector('.nowPlayingPageImage').classList.remove('nowPlayingPageImageAudio');
- }
- } else {
- imgContainer.innerHTML = '';
- }
- }
-
- function buttonVisible(btn, enabled) {
- if (enabled) {
- btn.classList.remove('hide');
- } else {
- btn.classList.add('hide');
- }
- }
-
- function updateSupportedCommands(context, commands) {
- var all = context.querySelectorAll('.btnCommand');
-
- for (var i = 0, length = all.length; i < length; i++) {
- var enableButton = -1 !== commands.indexOf(all[i].getAttribute('data-command'));
- all[i].disabled = !enableButton;
- }
- }
-
- return function () {
- function toggleRepeat() {
- switch (playbackManager.getRepeatMode()) {
- case 'RepeatAll':
- playbackManager.setRepeatMode('RepeatOne');
- break;
- case 'RepeatOne':
- playbackManager.setRepeatMode('RepeatNone');
- break;
- case 'RepeatNone':
- playbackManager.setRepeatMode('RepeatAll');
- }
- }
-
- function updatePlayerState(player, context, state) {
- lastPlayerState = state;
- var item = state.NowPlayingItem;
- var playerInfo = playbackManager.getPlayerInfo();
- var supportedCommands = playerInfo.supportedCommands;
- currentPlayerSupportedCommands = supportedCommands;
- var playState = state.PlayState || {};
- var isSupportedCommands = supportedCommands.includes('DisplayMessage') || supportedCommands.includes('SendString') || supportedCommands.includes('Select');
- buttonVisible(context.querySelector('.btnToggleFullscreen'), item && 'Video' == item.MediaType && supportedCommands.includes('ToggleFullscreen'));
- updateAudioTracksDisplay(player, context);
- updateSubtitleTracksDisplay(player, context);
-
- if (supportedCommands.includes('DisplayMessage') && !currentPlayer.isLocalPlayer) {
- context.querySelector('.sendMessageSection').classList.remove('hide');
- } else {
- context.querySelector('.sendMessageSection').classList.add('hide');
- }
-
- if (supportedCommands.includes('SendString') && !currentPlayer.isLocalPlayer) {
- context.querySelector('.sendTextSection').classList.remove('hide');
- } else {
- context.querySelector('.sendTextSection').classList.add('hide');
- }
-
- if (supportedCommands.includes('Select') && !currentPlayer.isLocalPlayer) {
- context.querySelector('.navigationSection').classList.remove('hide');
- } else {
- context.querySelector('.navigationSection').classList.add('hide');
- }
-
- if (isSupportedCommands && !currentPlayer.isLocalPlayer) {
- context.querySelector('.remoteControlSection').classList.remove('hide');
- } else {
- context.querySelector('.remoteControlSection').classList.add('hide');
- }
-
- buttonVisible(context.querySelector('.btnStop'), null != item);
- buttonVisible(context.querySelector('.btnNextTrack'), null != item);
- buttonVisible(context.querySelector('.btnPreviousTrack'), null != item);
- if (layoutManager.mobile) {
- buttonVisible(context.querySelector('.btnRewind'), false);
- buttonVisible(context.querySelector('.btnFastForward'), false);
- } else {
- buttonVisible(context.querySelector('.btnRewind'), null != item);
- buttonVisible(context.querySelector('.btnFastForward'), null != item);
- }
- var positionSlider = context.querySelector('.nowPlayingPositionSlider');
-
- if (positionSlider && item && item.RunTimeTicks) {
- positionSlider.setKeyboardSteps(userSettings.skipBackLength() * 1000000 / item.RunTimeTicks,
- userSettings.skipForwardLength() * 1000000 / item.RunTimeTicks);
- }
-
- if (positionSlider && !positionSlider.dragging) {
- positionSlider.disabled = !playState.CanSeek;
- var isProgressClear = state.MediaSource && null == state.MediaSource.RunTimeTicks;
- positionSlider.setIsClear(isProgressClear);
- }
-
- updatePlayPauseState(playState.IsPaused, null != item);
- updateTimeDisplay(playState.PositionTicks, item ? item.RunTimeTicks : null);
- updatePlayerVolumeState(context, playState.IsMuted, playState.VolumeLevel);
-
- if (item && 'Video' == item.MediaType) {
- context.classList.remove('hideVideoButtons');
- } else {
- context.classList.add('hideVideoButtons');
- }
-
- updateRepeatModeDisplay(playbackManager.getRepeatMode());
- onShuffleQueueModeChange(false);
- updateNowPlayingInfo(context, state);
- }
-
- function updateAudioTracksDisplay(player, context) {
- var supportedCommands = currentPlayerSupportedCommands;
- buttonVisible(context.querySelector('.btnAudioTracks'), playbackManager.audioTracks(player).length > 1 && -1 != supportedCommands.indexOf('SetAudioStreamIndex'));
- }
-
- function updateSubtitleTracksDisplay(player, context) {
- var supportedCommands = currentPlayerSupportedCommands;
- buttonVisible(context.querySelector('.btnSubtitles'), playbackManager.subtitleTracks(player).length && -1 != supportedCommands.indexOf('SetSubtitleStreamIndex'));
- }
-
- function updateRepeatModeDisplay(repeatMode) {
- var context = dlg;
- let toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton');
- const cssClass = 'buttonActive';
- let innHtml = '';
- let repeatOn = true;
-
- switch (repeatMode) {
- case 'RepeatAll':
- break;
- case 'RepeatOne':
- innHtml = '';
- break;
- case 'RepeatNone':
- default:
- repeatOn = false;
- break;
- }
-
- for (const toggleRepeatButton of toggleRepeatButtons) {
- toggleRepeatButton.classList.toggle(cssClass, repeatOn);
- toggleRepeatButton.innerHTML = innHtml;
- }
- }
-
- function updatePlayerVolumeState(context, isMuted, volumeLevel) {
- var view = context;
- var supportedCommands = currentPlayerSupportedCommands;
-
- if (-1 === supportedCommands.indexOf('Mute')) {
- showMuteButton = false;
- }
-
- if (-1 === supportedCommands.indexOf('SetVolume')) {
- showVolumeSlider = false;
- }
-
- if (currentPlayer.isLocalPlayer && appHost.supports('physicalvolumecontrol')) {
- showMuteButton = false;
- showVolumeSlider = false;
- }
-
- const buttonMute = view.querySelector('.buttonMute');
- const buttonMuteIcon = buttonMute.querySelector('.material-icons');
-
- buttonMuteIcon.classList.remove('volume_off', 'volume_up');
-
- if (isMuted) {
- buttonMute.setAttribute('title', globalize.translate('Unmute'));
- buttonMuteIcon.classList.add('volume_off');
- } else {
- buttonMute.setAttribute('title', globalize.translate('Mute'));
- buttonMuteIcon.classList.add('volume_up');
- }
-
- if (!showMuteButton && !showVolumeSlider) {
- context.querySelector('.volumecontrol').classList.add('hide');
- } else {
- buttonMute.classList.toggle('hide', !showMuteButton);
-
- var nowPlayingVolumeSlider = context.querySelector('.nowPlayingVolumeSlider');
- var nowPlayingVolumeSliderContainer = context.querySelector('.nowPlayingVolumeSliderContainer');
-
- if (nowPlayingVolumeSlider) {
- nowPlayingVolumeSliderContainer.classList.toggle('hide', !showVolumeSlider);
-
- if (!nowPlayingVolumeSlider.dragging) {
- nowPlayingVolumeSlider.value = volumeLevel || 0;
+ } else if (item.Artists) {
+ // For some reason, Chromecast Player doesn't return a item.ArtistItems object, so we need to fallback
+ // to normal item.Artists item.
+ // TODO: Normalise fields returned by all the players
+ for (const artist of item.Artists) {
+ artistsSeries += `${artist}`;
+ if (artist !== item.Artists.slice(-1)[0]) {
+ artistsSeries += ', ';
+ }
}
}
}
- }
-
- function updatePlayPauseState(isPaused, isActive) {
- var context = dlg;
- var btnPlayPause = context.querySelector('.btnPlayPause');
- const btnPlayPauseIcon = btnPlayPause.querySelector('.material-icons');
-
- btnPlayPauseIcon.classList.remove('play_circle_filled', 'pause_circle_filled');
- btnPlayPauseIcon.classList.add(isPaused ? 'play_circle_filled' : 'pause_circle_filled');
-
- buttonVisible(btnPlayPause, isActive);
- }
-
- function updateTimeDisplay(positionTicks, runtimeTicks) {
- var context = dlg;
- var positionSlider = context.querySelector('.nowPlayingPositionSlider');
-
- if (positionSlider && !positionSlider.dragging) {
- if (runtimeTicks) {
- var pct = positionTicks / runtimeTicks;
- pct *= 100;
- positionSlider.value = pct;
+ if (item.Album != null) {
+ albumName = '` + item.Album + '';
+ }
+ context.querySelector('.nowPlayingAlbum').innerHTML = albumName;
+ context.querySelector('.nowPlayingArtist').innerHTML = artistsSeries;
+ context.querySelector('.nowPlayingSongName').innerHTML = songName;
+ } else if (item.Type == 'Episode') {
+ if (item.SeasonName != null) {
+ const seasonName = item.SeasonName;
+ context.querySelector('.nowPlayingSeason').innerHTML = '${seasonName}`;
+ }
+ if (item.SeriesName != null) {
+ const seriesName = item.SeriesName;
+ if (item.SeriesId != null) {
+ context.querySelector('.nowPlayingSerie').innerHTML = '${seriesName}`;
} else {
- positionSlider.value = 0;
+ context.querySelector('.nowPlayingSerie').innerHTML = seriesName;
}
}
-
- context.querySelector('.positionTime').innerHTML = null == positionTicks ? '--:--' : datetime.getDisplayRunningTime(positionTicks);
- context.querySelector('.runtime').innerHTML = null != runtimeTicks ? datetime.getDisplayRunningTime(runtimeTicks) : '--:--';
+ context.querySelector('.nowPlayingEpisode').innerHTML = item.Name;
+ } else {
+ context.querySelector('.nowPlayingPageTitle').innerHTML = displayName;
}
- function getPlaylistItems(player) {
- return playbackManager.getPlaylist(player);
+ if (displayName.length > 0 && item.Type != 'Audio' && item.Type != 'Episode') {
+ context.querySelector('.nowPlayingPageTitle').classList.remove('hide');
+ } else {
+ context.querySelector('.nowPlayingPageTitle').classList.add('hide');
}
- function loadPlaylist(context, player) {
- getPlaylistItems(player).then(function (items) {
- var html = '';
- let favoritesEnabled = true;
- if (layoutManager.mobile) {
- if (items.length > 0) {
- context.querySelector('.btnTogglePlaylist').classList.remove('hide');
- } else {
- context.querySelector('.btnTogglePlaylist').classList.add('hide');
- }
- favoritesEnabled = false;
- }
+ const url = item ? seriesImageUrl(item, {
+ maxHeight: 300
+ }) || imageUrl(item, {
+ maxHeight: 300
+ }) : null;
- html += listView.getListViewHtml({
- items: items,
- smallIcon: true,
- action: 'setplaylistindex',
- enableUserDataButtons: favoritesEnabled,
- rightButtons: [{
- icon: 'remove_circle_outline',
- title: globalize.translate('ButtonRemove'),
- id: 'remove'
- }],
- dragHandle: true
+ let contextButton = context.querySelector('.btnToggleContextMenu');
+ // We remove the previous event listener by replacing the item in each update event
+ const autoFocusContextButton = document.activeElement === contextButton;
+ const contextButtonClone = contextButton.cloneNode(true);
+ contextButton.parentNode.replaceChild(contextButtonClone, contextButton);
+ contextButton = context.querySelector('.btnToggleContextMenu');
+ if (autoFocusContextButton) {
+ contextButton.focus();
+ }
+ const stopPlayback = !!layoutManager.mobile;
+ const options = {
+ play: false,
+ queue: false,
+ stopPlayback: stopPlayback,
+ clearQueue: true,
+ openAlbum: false,
+ positionTo: contextButton
+ };
+ const apiClient = connectionManager.getApiClient(item.ServerId);
+ apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
+ apiClient.getCurrentUser().then(function (user) {
+ contextButton.addEventListener('click', function () {
+ itemContextMenu.show(Object.assign({
+ item: fullItem,
+ user: user
+ }, options));
});
-
- var itemsContainer = context.querySelector('.playlist');
- let focusedItemPlaylistId = itemsContainer.querySelector('button:focus');
- itemsContainer.innerHTML = html;
- if (focusedItemPlaylistId !== null) {
- focusedItemPlaylistId = focusedItemPlaylistId.getAttribute('data-playlistitemid');
- const newFocusedItem = itemsContainer.querySelector(`button[data-playlistitemid="${focusedItemPlaylistId}"]`);
- if (newFocusedItem !== null) {
- newFocusedItem.focus();
- }
- }
-
- var playlistItemId = playbackManager.getCurrentPlaylistItemId(player);
-
- if (playlistItemId) {
- var img = itemsContainer.querySelector(`.listItem[data-playlistItemId="${playlistItemId}"] .listItemImage`);
-
- if (img) {
- img.classList.remove('lazy');
- img.classList.add('playlistIndexIndicatorImage');
- }
- }
-
- imageLoader.lazyChildren(itemsContainer);
});
+ });
+ setImageUrl(context, state, url);
+ if (item) {
+ backdrop.setBackdrops([item]);
+ apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
+ const userData = fullItem.UserData || {};
+ const likes = userData.Likes == null ? '' : userData.Likes;
+ context.querySelector('.nowPlayingPageUserDataButtonsTitle').innerHTML = '';
+ context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '';
+ });
+ } else {
+ backdrop.clearBackdrop();
+ context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '';
+ }
+ }
+}
+
+function setImageUrl(context, state, url) {
+ const item = state.NowPlayingItem;
+ const imgContainer = context.querySelector('.nowPlayingPageImageContainer');
+
+ if (url) {
+ imgContainer.innerHTML = '';
+ if (item.Type == 'Audio') {
+ context.querySelector('.nowPlayingPageImage').classList.add('nowPlayingPageImageAudio');
+ context.querySelector('.nowPlayingPageImageContainer').classList.remove('nowPlayingPageImageAudio');
+ } else {
+ context.querySelector('.nowPlayingPageImageContainer').classList.add('nowPlayingPageImagePoster');
+ context.querySelector('.nowPlayingPageImage').classList.remove('nowPlayingPageImageAudio');
+ }
+ } else {
+ imgContainer.innerHTML = '';
+ }
+}
+
+function buttonVisible(btn, enabled) {
+ if (enabled) {
+ btn.classList.remove('hide');
+ } else {
+ btn.classList.add('hide');
+ }
+}
+
+function updateSupportedCommands(context, commands) {
+ const all = context.querySelectorAll('.btnCommand');
+
+ for (let i = 0, length = all.length; i < length; i++) {
+ const enableButton = commands.indexOf(all[i].getAttribute('data-command')) !== -1;
+ all[i].disabled = !enableButton;
+ }
+}
+
+export default function () {
+ function toggleRepeat() {
+ switch (playbackManager.getRepeatMode()) {
+ case 'RepeatAll':
+ playbackManager.setRepeatMode('RepeatOne');
+ break;
+ case 'RepeatOne':
+ playbackManager.setRepeatMode('RepeatNone');
+ break;
+ case 'RepeatNone':
+ playbackManager.setRepeatMode('RepeatAll');
+ }
+ }
+
+ function updatePlayerState(player, context, state) {
+ lastPlayerState = state;
+ const item = state.NowPlayingItem;
+ const playerInfo = playbackManager.getPlayerInfo();
+ const supportedCommands = playerInfo.supportedCommands;
+ currentPlayerSupportedCommands = supportedCommands;
+ const playState = state.PlayState || {};
+ const isSupportedCommands = supportedCommands.includes('DisplayMessage') || supportedCommands.includes('SendString') || supportedCommands.includes('Select');
+ buttonVisible(context.querySelector('.btnToggleFullscreen'), item && item.MediaType == 'Video' && supportedCommands.includes('ToggleFullscreen'));
+ updateAudioTracksDisplay(player, context);
+ updateSubtitleTracksDisplay(player, context);
+
+ if (supportedCommands.includes('DisplayMessage') && !currentPlayer.isLocalPlayer) {
+ context.querySelector('.sendMessageSection').classList.remove('hide');
+ } else {
+ context.querySelector('.sendMessageSection').classList.add('hide');
}
- function onPlaybackStart(e, state) {
- console.debug('remotecontrol event: ' + e.type);
- var player = this;
- onStateChanged.call(player, e, state);
+ if (supportedCommands.includes('SendString') && !currentPlayer.isLocalPlayer) {
+ context.querySelector('.sendTextSection').classList.remove('hide');
+ } else {
+ context.querySelector('.sendTextSection').classList.add('hide');
}
- function onRepeatModeChange() {
- updateRepeatModeDisplay(playbackManager.getRepeatMode());
+ if (supportedCommands.includes('Select') && !currentPlayer.isLocalPlayer) {
+ context.querySelector('.navigationSection').classList.remove('hide');
+ } else {
+ context.querySelector('.navigationSection').classList.add('hide');
}
- function onShuffleQueueModeChange(updateView = true) {
- let shuffleMode = playbackManager.getQueueShuffleMode(this);
- let context = dlg;
- const cssClass = 'buttonActive';
- let shuffleButtons = context.querySelectorAll('.btnShuffleQueue');
+ if (isSupportedCommands && !currentPlayer.isLocalPlayer) {
+ context.querySelector('.remoteControlSection').classList.remove('hide');
+ } else {
+ context.querySelector('.remoteControlSection').classList.add('hide');
+ }
- for (let shuffleButton of shuffleButtons) {
- switch (shuffleMode) {
- case 'Shuffle':
- shuffleButton.classList.add(cssClass);
- break;
- case 'Sorted':
- default:
- shuffleButton.classList.remove(cssClass);
- break;
+ buttonVisible(context.querySelector('.btnStop'), item != null);
+ buttonVisible(context.querySelector('.btnNextTrack'), item != null);
+ buttonVisible(context.querySelector('.btnPreviousTrack'), item != null);
+ if (layoutManager.mobile) {
+ buttonVisible(context.querySelector('.btnRewind'), false);
+ buttonVisible(context.querySelector('.btnFastForward'), false);
+ } else {
+ buttonVisible(context.querySelector('.btnRewind'), item != null);
+ buttonVisible(context.querySelector('.btnFastForward'), item != null);
+ }
+ const positionSlider = context.querySelector('.nowPlayingPositionSlider');
+
+ if (positionSlider && item && item.RunTimeTicks) {
+ positionSlider.setKeyboardSteps(userSettings.skipBackLength() * 1000000 / item.RunTimeTicks,
+ userSettings.skipForwardLength() * 1000000 / item.RunTimeTicks);
+ }
+
+ if (positionSlider && !positionSlider.dragging) {
+ positionSlider.disabled = !playState.CanSeek;
+ const isProgressClear = state.MediaSource && state.MediaSource.RunTimeTicks == null;
+ positionSlider.setIsClear(isProgressClear);
+ }
+
+ updatePlayPauseState(playState.IsPaused, item != null);
+ updateTimeDisplay(playState.PositionTicks, item ? item.RunTimeTicks : null);
+ updatePlayerVolumeState(context, playState.IsMuted, playState.VolumeLevel);
+
+ if (item && item.MediaType == 'Video') {
+ context.classList.remove('hideVideoButtons');
+ } else {
+ context.classList.add('hideVideoButtons');
+ }
+
+ updateRepeatModeDisplay(playbackManager.getRepeatMode());
+ onShuffleQueueModeChange(false);
+ updateNowPlayingInfo(context, state);
+ }
+
+ function updateAudioTracksDisplay(player, context) {
+ const supportedCommands = currentPlayerSupportedCommands;
+ buttonVisible(context.querySelector('.btnAudioTracks'), playbackManager.audioTracks(player).length > 1 && supportedCommands.indexOf('SetAudioStreamIndex') != -1);
+ }
+
+ function updateSubtitleTracksDisplay(player, context) {
+ const supportedCommands = currentPlayerSupportedCommands;
+ buttonVisible(context.querySelector('.btnSubtitles'), playbackManager.subtitleTracks(player).length && supportedCommands.indexOf('SetSubtitleStreamIndex') != -1);
+ }
+
+ function updateRepeatModeDisplay(repeatMode) {
+ const context = dlg;
+ const toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton');
+ const cssClass = 'buttonActive';
+ let innHtml = '';
+ let repeatOn = true;
+
+ switch (repeatMode) {
+ case 'RepeatAll':
+ break;
+ case 'RepeatOne':
+ innHtml = '';
+ break;
+ case 'RepeatNone':
+ default:
+ repeatOn = false;
+ break;
+ }
+
+ for (const toggleRepeatButton of toggleRepeatButtons) {
+ toggleRepeatButton.classList.toggle(cssClass, repeatOn);
+ toggleRepeatButton.innerHTML = innHtml;
+ }
+ }
+
+ function updatePlayerVolumeState(context, isMuted, volumeLevel) {
+ const view = context;
+ const supportedCommands = currentPlayerSupportedCommands;
+
+ if (supportedCommands.indexOf('Mute') === -1) {
+ showMuteButton = false;
+ }
+
+ if (supportedCommands.indexOf('SetVolume') === -1) {
+ showVolumeSlider = false;
+ }
+
+ if (currentPlayer.isLocalPlayer && appHost.supports('physicalvolumecontrol')) {
+ showMuteButton = false;
+ showVolumeSlider = false;
+ }
+
+ const buttonMute = view.querySelector('.buttonMute');
+ const buttonMuteIcon = buttonMute.querySelector('.material-icons');
+
+ buttonMuteIcon.classList.remove('volume_off', 'volume_up');
+
+ if (isMuted) {
+ buttonMute.setAttribute('title', globalize.translate('Unmute'));
+ buttonMuteIcon.classList.add('volume_off');
+ } else {
+ buttonMute.setAttribute('title', globalize.translate('Mute'));
+ buttonMuteIcon.classList.add('volume_up');
+ }
+
+ if (!showMuteButton && !showVolumeSlider) {
+ context.querySelector('.volumecontrol').classList.add('hide');
+ } else {
+ buttonMute.classList.toggle('hide', !showMuteButton);
+
+ const nowPlayingVolumeSlider = context.querySelector('.nowPlayingVolumeSlider');
+ const nowPlayingVolumeSliderContainer = context.querySelector('.nowPlayingVolumeSliderContainer');
+
+ if (nowPlayingVolumeSlider) {
+ nowPlayingVolumeSliderContainer.classList.toggle('hide', !showVolumeSlider);
+
+ if (!nowPlayingVolumeSlider.dragging) {
+ nowPlayingVolumeSlider.value = volumeLevel || 0;
}
}
-
- if (updateView) {
- onPlaylistUpdate();
- }
}
+ }
- function onPlaylistUpdate(e) {
- loadPlaylist(dlg, this);
- }
+ function updatePlayPauseState(isPaused, isActive) {
+ const context = dlg;
+ const btnPlayPause = context.querySelector('.btnPlayPause');
+ const btnPlayPauseIcon = btnPlayPause.querySelector('.material-icons');
- function onPlaylistItemRemoved(e, info) {
- var context = dlg;
- if (info !== undefined) {
- var playlistItemIds = info.playlistItemIds;
+ btnPlayPauseIcon.classList.remove('play_circle_filled', 'pause_circle_filled');
+ btnPlayPauseIcon.classList.add(isPaused ? 'play_circle_filled' : 'pause_circle_filled');
- for (var i = 0, length = playlistItemIds.length; i < length; i++) {
- var listItem = context.querySelector('.listItem[data-playlistItemId="' + playlistItemIds[i] + '"]');
+ buttonVisible(btnPlayPause, isActive);
+ }
- if (listItem) {
- listItem.parentNode.removeChild(listItem);
- }
- }
+ function updateTimeDisplay(positionTicks, runtimeTicks) {
+ const context = dlg;
+ const positionSlider = context.querySelector('.nowPlayingPositionSlider');
+
+ if (positionSlider && !positionSlider.dragging) {
+ if (runtimeTicks) {
+ let pct = positionTicks / runtimeTicks;
+ pct *= 100;
+ positionSlider.value = pct;
} else {
- onPlaylistUpdate();
+ positionSlider.value = 0;
}
}
- function onPlaybackStopped(e, state) {
- console.debug('remotecontrol event: ' + e.type);
- var player = this;
+ context.querySelector('.positionTime').innerHTML = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks);
+ context.querySelector('.runtime').innerHTML = runtimeTicks != null ? datetime.getDisplayRunningTime(runtimeTicks) : '--:--';
+ }
- if (!state.NextMediaType) {
- updatePlayerState(player, dlg, {});
- Emby.Page.back();
+ function getPlaylistItems(player) {
+ return playbackManager.getPlaylist(player);
+ }
+
+ function loadPlaylist(context, player) {
+ getPlaylistItems(player).then(function (items) {
+ let html = '';
+ let favoritesEnabled = true;
+ if (layoutManager.mobile) {
+ if (items.length > 0) {
+ context.querySelector('.btnTogglePlaylist').classList.remove('hide');
+ } else {
+ context.querySelector('.btnTogglePlaylist').classList.add('hide');
+ }
+ favoritesEnabled = false;
+ }
+
+ html += listView.getListViewHtml({
+ items: items,
+ smallIcon: true,
+ action: 'setplaylistindex',
+ enableUserDataButtons: favoritesEnabled,
+ rightButtons: [{
+ icon: 'remove_circle_outline',
+ title: globalize.translate('ButtonRemove'),
+ id: 'remove'
+ }],
+ dragHandle: true
+ });
+
+ const itemsContainer = context.querySelector('.playlist');
+ let focusedItemPlaylistId = itemsContainer.querySelector('button:focus');
+ itemsContainer.innerHTML = html;
+ if (focusedItemPlaylistId !== null) {
+ focusedItemPlaylistId = focusedItemPlaylistId.getAttribute('data-playlistitemid');
+ const newFocusedItem = itemsContainer.querySelector(`button[data-playlistitemid="${focusedItemPlaylistId}"]`);
+ if (newFocusedItem !== null) {
+ newFocusedItem.focus();
+ }
+ }
+
+ const playlistItemId = playbackManager.getCurrentPlaylistItemId(player);
+
+ if (playlistItemId) {
+ const img = itemsContainer.querySelector(`.listItem[data-playlistItemId="${playlistItemId}"] .listItemImage`);
+
+ if (img) {
+ img.classList.remove('lazy');
+ img.classList.add('playlistIndexIndicatorImage');
+ }
+ }
+
+ imageLoader.lazyChildren(itemsContainer);
+ });
+ }
+
+ function onPlaybackStart(e, state) {
+ console.debug('remotecontrol event: ' + e.type);
+ const player = this;
+ onStateChanged.call(player, e, state);
+ }
+
+ function onRepeatModeChange() {
+ updateRepeatModeDisplay(playbackManager.getRepeatMode());
+ }
+
+ function onShuffleQueueModeChange(updateView = true) {
+ const shuffleMode = playbackManager.getQueueShuffleMode(this);
+ const context = dlg;
+ const cssClass = 'buttonActive';
+ const shuffleButtons = context.querySelectorAll('.btnShuffleQueue');
+
+ for (const shuffleButton of shuffleButtons) {
+ switch (shuffleMode) {
+ case 'Shuffle':
+ shuffleButton.classList.add(cssClass);
+ break;
+ case 'Sorted':
+ default:
+ shuffleButton.classList.remove(cssClass);
+ break;
}
}
- function onPlayPauseStateChanged(e) {
- updatePlayPauseState(this.paused(), true);
- }
-
- function onStateChanged(event, state) {
- var player = this;
- updatePlayerState(player, dlg, state);
+ if (updateView) {
onPlaylistUpdate();
}
+ }
- function onTimeUpdate(e) {
- var now = new Date().getTime();
+ function onPlaylistUpdate(e) {
+ loadPlaylist(dlg, this);
+ }
- if (!(now - lastUpdateTime < 700)) {
- lastUpdateTime = now;
- var player = this;
- currentRuntimeTicks = playbackManager.duration(player);
- updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks);
+ function onPlaylistItemRemoved(e, info) {
+ const context = dlg;
+ if (info !== undefined) {
+ const playlistItemIds = info.playlistItemIds;
+
+ for (let i = 0, length = playlistItemIds.length; i < length; i++) {
+ const listItem = context.querySelector('.listItem[data-playlistItemId="' + playlistItemIds[i] + '"]');
+
+ if (listItem) {
+ listItem.parentNode.removeChild(listItem);
+ }
+ }
+ } else {
+ onPlaylistUpdate();
+ }
+ }
+
+ function onPlaybackStopped(e, state) {
+ console.debug('remotecontrol event: ' + e.type);
+ const player = this;
+
+ if (!state.NextMediaType) {
+ updatePlayerState(player, dlg, {});
+ Emby.Page.back();
+ }
+ }
+
+ function onPlayPauseStateChanged(e) {
+ updatePlayPauseState(this.paused(), true);
+ }
+
+ function onStateChanged(event, state) {
+ const player = this;
+ updatePlayerState(player, dlg, state);
+ onPlaylistUpdate();
+ }
+
+ function onTimeUpdate(e) {
+ const now = new Date().getTime();
+
+ if (!(now - lastUpdateTime < 700)) {
+ lastUpdateTime = now;
+ const player = this;
+ currentRuntimeTicks = playbackManager.duration(player);
+ updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks);
+ }
+ }
+
+ function onVolumeChanged(e) {
+ const player = this;
+ updatePlayerVolumeState(dlg, player.isMuted(), player.getVolume());
+ }
+
+ function releaseCurrentPlayer() {
+ const player = currentPlayer;
+
+ if (player) {
+ events.off(player, 'playbackstart', onPlaybackStart);
+ events.off(player, 'statechange', onStateChanged);
+ events.off(player, 'repeatmodechange', onRepeatModeChange);
+ events.off(player, 'shufflequeuemodechange', onShuffleQueueModeChange);
+ events.off(player, 'playlistitemremove', onPlaylistItemRemoved);
+ events.off(player, 'playlistitemmove', onPlaylistUpdate);
+ events.off(player, 'playlistitemadd', onPlaylistUpdate);
+ events.off(player, 'playbackstop', onPlaybackStopped);
+ events.off(player, 'volumechange', onVolumeChanged);
+ events.off(player, 'pause', onPlayPauseStateChanged);
+ events.off(player, 'unpause', onPlayPauseStateChanged);
+ events.off(player, 'timeupdate', onTimeUpdate);
+ currentPlayer = null;
+ }
+ }
+
+ function bindToPlayer(context, player) {
+ if (releaseCurrentPlayer(), currentPlayer = player, player) {
+ const state = playbackManager.getPlayerState(player);
+ onStateChanged.call(player, {
+ type: 'init'
+ }, state);
+ events.on(player, 'playbackstart', onPlaybackStart);
+ events.on(player, 'statechange', onStateChanged);
+ events.on(player, 'repeatmodechange', onRepeatModeChange);
+ events.on(player, 'shufflequeuemodechange', onShuffleQueueModeChange);
+ events.on(player, 'playlistitemremove', onPlaylistItemRemoved);
+ events.on(player, 'playlistitemmove', onPlaylistUpdate);
+ events.on(player, 'playlistitemadd', onPlaylistUpdate);
+ events.on(player, 'playbackstop', onPlaybackStopped);
+ events.on(player, 'volumechange', onVolumeChanged);
+ events.on(player, 'pause', onPlayPauseStateChanged);
+ events.on(player, 'unpause', onPlayPauseStateChanged);
+ events.on(player, 'timeupdate', onTimeUpdate);
+ const playerInfo = playbackManager.getPlayerInfo();
+ const supportedCommands = playerInfo.supportedCommands;
+ currentPlayerSupportedCommands = supportedCommands;
+ updateSupportedCommands(context, supportedCommands);
+ }
+ }
+
+ function onBtnCommandClick() {
+ if (currentPlayer) {
+ if (this.classList.contains('repeatToggleButton')) {
+ toggleRepeat();
+ } else {
+ playbackManager.sendCommand({
+ Name: this.getAttribute('data-command')
+ }, currentPlayer);
}
}
+ }
- function onVolumeChanged(e) {
- var player = this;
- updatePlayerVolumeState(dlg, player.isMuted(), player.getVolume());
+ function getSaveablePlaylistItems() {
+ return getPlaylistItems(currentPlayer).then(function (items) {
+ return items.filter(function (i) {
+ return i.Id && i.ServerId;
+ });
+ });
+ }
+
+ function savePlaylist() {
+ import('playlistEditor').then(({ default: playlistEditor }) => {
+ getSaveablePlaylistItems().then(function (items) {
+ const serverId = items.length ? items[0].ServerId : ApiClient.serverId();
+ new playlistEditor({
+ items: items.map(function (i) {
+ return i.Id;
+ }),
+ serverId: serverId,
+ enableAddToPlayQueue: false,
+ defaultValue: 'new'
+ });
+ });
+ });
+ }
+
+ function bindEvents(context) {
+ const btnCommand = context.querySelectorAll('.btnCommand');
+ const positionSlider = context.querySelector('.nowPlayingPositionSlider');
+
+ for (let i = 0, length = btnCommand.length; i < length; i++) {
+ btnCommand[i].addEventListener('click', onBtnCommandClick);
}
- function releaseCurrentPlayer() {
- var player = currentPlayer;
-
- if (player) {
- events.off(player, 'playbackstart', onPlaybackStart);
- events.off(player, 'statechange', onStateChanged);
- events.off(player, 'repeatmodechange', onRepeatModeChange);
- events.off(player, 'shufflequeuemodechange', onShuffleQueueModeChange);
- events.off(player, 'playlistitemremove', onPlaylistItemRemoved);
- events.off(player, 'playlistitemmove', onPlaylistUpdate);
- events.off(player, 'playlistitemadd', onPlaylistUpdate);
- events.off(player, 'playbackstop', onPlaybackStopped);
- events.off(player, 'volumechange', onVolumeChanged);
- events.off(player, 'pause', onPlayPauseStateChanged);
- events.off(player, 'unpause', onPlayPauseStateChanged);
- events.off(player, 'timeupdate', onTimeUpdate);
- currentPlayer = null;
- }
- }
-
- function bindToPlayer(context, player) {
- if (releaseCurrentPlayer(), currentPlayer = player, player) {
- var state = playbackManager.getPlayerState(player);
- onStateChanged.call(player, {
- type: 'init'
- }, state);
- events.on(player, 'playbackstart', onPlaybackStart);
- events.on(player, 'statechange', onStateChanged);
- events.on(player, 'repeatmodechange', onRepeatModeChange);
- events.on(player, 'shufflequeuemodechange', onShuffleQueueModeChange);
- events.on(player, 'playlistitemremove', onPlaylistItemRemoved);
- events.on(player, 'playlistitemmove', onPlaylistUpdate);
- events.on(player, 'playlistitemadd', onPlaylistUpdate);
- events.on(player, 'playbackstop', onPlaybackStopped);
- events.on(player, 'volumechange', onVolumeChanged);
- events.on(player, 'pause', onPlayPauseStateChanged);
- events.on(player, 'unpause', onPlayPauseStateChanged);
- events.on(player, 'timeupdate', onTimeUpdate);
- var playerInfo = playbackManager.getPlayerInfo();
- var supportedCommands = playerInfo.supportedCommands;
- currentPlayerSupportedCommands = supportedCommands;
- updateSupportedCommands(context, supportedCommands);
- }
- }
-
- function onBtnCommandClick() {
+ context.querySelector('.btnToggleFullscreen').addEventListener('click', function (e) {
if (currentPlayer) {
- if (this.classList.contains('repeatToggleButton')) {
- toggleRepeat();
+ playbackManager.sendCommand({
+ Name: e.target.getAttribute('data-command')
+ }, currentPlayer);
+ }
+ });
+ context.querySelector('.btnAudioTracks').addEventListener('click', function (e) {
+ if (currentPlayer && lastPlayerState && lastPlayerState.NowPlayingItem) {
+ showAudioMenu(context, currentPlayer, e.target, lastPlayerState.NowPlayingItem);
+ }
+ });
+ context.querySelector('.btnSubtitles').addEventListener('click', function (e) {
+ if (currentPlayer && lastPlayerState && lastPlayerState.NowPlayingItem) {
+ showSubtitleMenu(context, currentPlayer, e.target, lastPlayerState.NowPlayingItem);
+ }
+ });
+ context.querySelector('.btnStop').addEventListener('click', function () {
+ if (currentPlayer) {
+ playbackManager.stop(currentPlayer);
+ }
+ });
+ context.querySelector('.btnPlayPause').addEventListener('click', function () {
+ if (currentPlayer) {
+ playbackManager.playPause(currentPlayer);
+ }
+ });
+ context.querySelector('.btnNextTrack').addEventListener('click', function () {
+ if (currentPlayer) {
+ playbackManager.nextTrack(currentPlayer);
+ }
+ });
+ context.querySelector('.btnRewind').addEventListener('click', function () {
+ if (currentPlayer) {
+ playbackManager.rewind(currentPlayer);
+ }
+ });
+ context.querySelector('.btnFastForward').addEventListener('click', function () {
+ if (currentPlayer) {
+ playbackManager.fastForward(currentPlayer);
+ }
+ });
+ for (const shuffleButton of context.querySelectorAll('.btnShuffleQueue')) {
+ shuffleButton.addEventListener('click', function () {
+ if (currentPlayer) {
+ playbackManager.toggleQueueShuffleMode(currentPlayer);
+ }
+ });
+ }
+
+ context.querySelector('.btnPreviousTrack').addEventListener('click', function (e) {
+ if (currentPlayer) {
+ if (lastPlayerState.NowPlayingItem.MediaType === 'Audio' && (currentPlayer._currentTime >= 5 || !playbackManager.previousTrack(currentPlayer))) {
+ // Cancel this event if doubleclick is fired
+ if (e.detail > 1 && playbackManager.previousTrack(currentPlayer)) {
+ return;
+ }
+ playbackManager.seekPercent(0, currentPlayer);
+ // This is done automatically by playbackManager. However, setting this here gives instant visual feedback.
+ // TODO: Check why seekPercentage doesn't reflect the changes inmmediately, so we can remove this workaround.
+ positionSlider.value = 0;
} else {
- playbackManager.sendCommand({
- Name: this.getAttribute('data-command')
- }, currentPlayer);
- }
- }
- }
-
- function getSaveablePlaylistItems() {
- return getPlaylistItems(currentPlayer).then(function (items) {
- return items.filter(function (i) {
- return i.Id && i.ServerId;
- });
- });
- }
-
- function savePlaylist() {
- require(['playlistEditor'], function (playlistEditor) {
- getSaveablePlaylistItems().then(function (items) {
- var serverId = items.length ? items[0].ServerId : ApiClient.serverId();
- new playlistEditor.showEditor({
- items: items.map(function (i) {
- return i.Id;
- }),
- serverId: serverId,
- enableAddToPlayQueue: false,
- defaultValue: 'new'
- });
- });
- });
- }
-
- function bindEvents(context) {
- var btnCommand = context.querySelectorAll('.btnCommand');
- var positionSlider = context.querySelector('.nowPlayingPositionSlider');
-
- for (var i = 0, length = btnCommand.length; i < length; i++) {
- btnCommand[i].addEventListener('click', onBtnCommandClick);
- }
-
- context.querySelector('.btnToggleFullscreen').addEventListener('click', function (e) {
- if (currentPlayer) {
- playbackManager.sendCommand({
- Name: e.target.getAttribute('data-command')
- }, currentPlayer);
- }
- });
- context.querySelector('.btnAudioTracks').addEventListener('click', function (e) {
- if (currentPlayer && lastPlayerState && lastPlayerState.NowPlayingItem) {
- showAudioMenu(context, currentPlayer, e.target, lastPlayerState.NowPlayingItem);
- }
- });
- context.querySelector('.btnSubtitles').addEventListener('click', function (e) {
- if (currentPlayer && lastPlayerState && lastPlayerState.NowPlayingItem) {
- showSubtitleMenu(context, currentPlayer, e.target, lastPlayerState.NowPlayingItem);
- }
- });
- context.querySelector('.btnStop').addEventListener('click', function () {
- if (currentPlayer) {
- playbackManager.stop(currentPlayer);
- }
- });
- context.querySelector('.btnPlayPause').addEventListener('click', function () {
- if (currentPlayer) {
- playbackManager.playPause(currentPlayer);
- }
- });
- context.querySelector('.btnNextTrack').addEventListener('click', function () {
- if (currentPlayer) {
- playbackManager.nextTrack(currentPlayer);
- }
- });
- context.querySelector('.btnRewind').addEventListener('click', function () {
- if (currentPlayer) {
- playbackManager.rewind(currentPlayer);
- }
- });
- context.querySelector('.btnFastForward').addEventListener('click', function () {
- if (currentPlayer) {
- playbackManager.fastForward(currentPlayer);
- }
- });
- for (const shuffleButton of context.querySelectorAll('.btnShuffleQueue')) {
- shuffleButton.addEventListener('click', function () {
- if (currentPlayer) {
- playbackManager.toggleQueueShuffleMode(currentPlayer);
- }
- });
- }
-
- context.querySelector('.btnPreviousTrack').addEventListener('click', function (e) {
- if (currentPlayer) {
- if (lastPlayerState.NowPlayingItem.MediaType === 'Audio' && (currentPlayer._currentTime >= 5 || !playbackManager.previousTrack(currentPlayer))) {
- // Cancel this event if doubleclick is fired
- if (e.detail > 1 && playbackManager.previousTrack(currentPlayer)) {
- return;
- }
- playbackManager.seekPercent(0, currentPlayer);
- // This is done automatically by playbackManager. However, setting this here gives instant visual feedback.
- // TODO: Check why seekPercentage doesn't reflect the changes inmmediately, so we can remove this workaround.
- positionSlider.value = 0;
- } else {
- playbackManager.previousTrack(currentPlayer);
- }
- }
- });
-
- context.querySelector('.btnPreviousTrack').addEventListener('dblclick', function () {
- if (currentPlayer) {
playbackManager.previousTrack(currentPlayer);
}
- });
- positionSlider.addEventListener('change', function () {
- var value = this.value;
+ }
+ });
- if (currentPlayer) {
- var newPercent = parseFloat(value);
- playbackManager.seekPercent(newPercent, currentPlayer);
- }
- });
+ context.querySelector('.btnPreviousTrack').addEventListener('dblclick', function () {
+ if (currentPlayer) {
+ playbackManager.previousTrack(currentPlayer);
+ }
+ });
+ positionSlider.addEventListener('change', function () {
+ const value = this.value;
- positionSlider.getBubbleText = function (value) {
- var state = lastPlayerState;
+ if (currentPlayer) {
+ const newPercent = parseFloat(value);
+ playbackManager.seekPercent(newPercent, currentPlayer);
+ }
+ });
- if (!state || !state.NowPlayingItem || !currentRuntimeTicks) {
- return '--:--';
- }
+ positionSlider.getBubbleText = function (value) {
+ const state = lastPlayerState;
- var ticks = currentRuntimeTicks;
- ticks /= 100;
- ticks *= value;
- return datetime.getDisplayRunningTime(ticks);
- };
+ if (!state || !state.NowPlayingItem || !currentRuntimeTicks) {
+ return '--:--';
+ }
- context.querySelector('.nowPlayingVolumeSlider').addEventListener('input', (e) => {
- playbackManager.setVolume(e.target.value, currentPlayer);
- });
+ let ticks = currentRuntimeTicks;
+ ticks /= 100;
+ ticks *= value;
+ return datetime.getDisplayRunningTime(ticks);
+ };
- context.querySelector('.buttonMute').addEventListener('click', function () {
- playbackManager.toggleMute(currentPlayer);
- });
- var playlistContainer = context.querySelector('.playlist');
- playlistContainer.addEventListener('action-remove', function (e) {
- playbackManager.removeFromPlaylist([e.detail.playlistItemId], currentPlayer);
- });
- playlistContainer.addEventListener('itemdrop', function (e) {
- var newIndex = e.detail.newIndex;
- var playlistItemId = e.detail.playlistItemId;
- playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer);
- });
- context.querySelector('.btnSavePlaylist').addEventListener('click', savePlaylist);
- context.querySelector('.btnTogglePlaylist').addEventListener('click', function () {
- if (context.querySelector('.playlist').classList.contains('hide')) {
- context.querySelector('.playlist').classList.remove('hide');
- context.querySelector('.btnSavePlaylist').classList.remove('hide');
- context.querySelector('.volumecontrol').classList.add('hide');
- if (layoutManager.mobile) {
- context.querySelector('.playlistSectionButton').classList.remove('playlistSectionButtonTransparent');
- }
- } else {
- context.querySelector('.playlist').classList.add('hide');
- context.querySelector('.btnSavePlaylist').classList.add('hide');
- if (showMuteButton || showVolumeSlider) {
- context.querySelector('.volumecontrol').classList.remove('hide');
- }
- if (layoutManager.mobile) {
- context.querySelector('.playlistSectionButton').classList.add('playlistSectionButtonTransparent');
- }
- }
- });
- }
+ context.querySelector('.nowPlayingVolumeSlider').addEventListener('input', (e) => {
+ playbackManager.setVolume(e.target.value, currentPlayer);
+ });
- function onPlayerChange() {
- bindToPlayer(dlg, playbackManager.getCurrentPlayer());
- }
-
- function onMessageSubmit(e) {
- var form = e.target;
- playbackManager.sendCommand({
- Name: 'DisplayMessage',
- Arguments: {
- Header: form.querySelector('#txtMessageTitle').value,
- Text: form.querySelector('#txtMessageText', form).value
- }
- }, currentPlayer);
- form.querySelector('input').value = '';
-
- require(['toast'], function (toast) {
- toast('Message sent.');
- });
-
- e.preventDefault();
- e.stopPropagation();
- return false;
- }
-
- function onSendStringSubmit(e) {
- var form = e.target;
- playbackManager.sendCommand({
- Name: 'SendString',
- Arguments: {
- String: form.querySelector('#txtTypeText', form).value
- }
- }, currentPlayer);
- form.querySelector('input').value = '';
-
- require(['toast'], function (toast) {
- toast('Text sent.');
- });
-
- e.preventDefault();
- e.stopPropagation();
- return false;
- }
-
- function init(ownerView, context) {
- let volumecontrolHtml = '
';
+ }
+
+ let elem = context.querySelector('.subtitleResults');
+ elem.innerHTML = html;
+
+ loading.hide();
+}
+
+function searchForSubtitles(context, language) {
+ userSettings.set('subtitleeditor-language', language);
+
+ loading.show();
+
+ let apiClient = connectionManager.getApiClient(currentItem.ServerId);
+ let url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
+
+ apiClient.getJSON(url).then(function (results) {
+ renderSearchResults(context, results);
+ });
+}
+
+function reload(context, apiClient, itemId) {
+ context.querySelector('.noSearchResults').classList.add('hide');
+
+ function onGetItem(item) {
+ currentItem = item;
+
+ fillSubtitleList(context, item);
+ let file = item.Path || '';
+ let index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
+ if (index > -1) {
+ file = file.substring(index + 1);
+ }
+
+ if (file) {
+ context.querySelector('.pathValue').innerHTML = file;
+ context.querySelector('.originalFile').classList.remove('hide');
+ } else {
+ context.querySelector('.pathValue').innerHTML = '';
+ context.querySelector('.originalFile').classList.add('hide');
+ }
loading.hide();
}
- function searchForSubtitles(context, language) {
- userSettings.set('subtitleeditor-language', language);
+ if (typeof itemId === 'string') {
+ apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(onGetItem);
+ } else {
+ onGetItem(itemId);
+ }
+}
- loading.show();
+function onSearchSubmit(e) {
+ let form = this;
- var apiClient = connectionManager.getApiClient(currentItem.ServerId);
- var url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
+ let lang = form.querySelector('#selectLanguage', form).value;
- apiClient.getJSON(url).then(function (results) {
- renderSearchResults(context, results);
- });
+ searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
+
+ e.preventDefault();
+ return false;
+}
+
+function onSubtitleListClick(e) {
+ let btnDelete = dom.parentWithClass(e.target, 'btnDelete');
+ if (btnDelete) {
+ let index = btnDelete.getAttribute('data-index');
+ let context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
+ deleteLocalSubtitle(context, index);
+ }
+}
+
+function onSubtitleResultsClick(e) {
+ let subtitleId;
+ let context;
+
+ let btnOptions = dom.parentWithClass(e.target, 'btnOptions');
+ if (btnOptions) {
+ subtitleId = btnOptions.getAttribute('data-subid');
+ context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
+ showDownloadOptions(btnOptions, context, subtitleId);
}
- function reload(context, apiClient, itemId) {
- context.querySelector('.noSearchResults').classList.add('hide');
+ let btnDownload = dom.parentWithClass(e.target, 'btnDownload');
+ if (btnDownload) {
+ subtitleId = btnDownload.getAttribute('data-subid');
+ context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
+ downloadRemoteSubtitles(context, subtitleId);
+ }
+}
- function onGetItem(item) {
- currentItem = item;
+function showDownloadOptions(button, context, subtitleId) {
+ let items = [];
- fillSubtitleList(context, item);
- var file = item.Path || '';
- var index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
- if (index > -1) {
- file = file.substring(index + 1);
+ items.push({
+ name: globalize.translate('Download'),
+ id: 'download'
+ });
+
+ import('actionsheet').then(({default: actionsheet}) => {
+ actionsheet.show({
+ items: items,
+ positionTo: button
+
+ }).then(function (id) {
+ switch (id) {
+ case 'download':
+ downloadRemoteSubtitles(context, subtitleId);
+ break;
+ default:
+ break;
}
+ });
+ });
+}
- if (file) {
- context.querySelector('.pathValue').innerHTML = file;
- context.querySelector('.originalFile').classList.remove('hide');
- } else {
- context.querySelector('.pathValue').innerHTML = '';
- context.querySelector('.originalFile').classList.add('hide');
- }
+function centerFocus(elem, horiz, on) {
+ import('scrollHelper').then(({default: scrollHelper}) => {
+ let fn = on ? 'on' : 'off';
+ scrollHelper.centerFocus[fn](elem, horiz);
+ });
+}
- loading.hide();
- }
+function showEditorInternal(itemId, serverId, template) {
+ hasChanges = false;
- if (typeof itemId === 'string') {
- apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(onGetItem);
+ let apiClient = connectionManager.getApiClient(serverId);
+ return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
+ let dialogOptions = {
+ removeOnClose: true,
+ scrollY: false
+ };
+
+ if (layoutManager.tv) {
+ dialogOptions.size = 'fullscreen';
} else {
- onGetItem(itemId);
- }
- }
-
- function onSearchSubmit(e) {
- var form = this;
-
- var lang = form.querySelector('#selectLanguage', form).value;
-
- searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
-
- e.preventDefault();
- return false;
- }
-
- function onSubtitleListClick(e) {
- var btnDelete = dom.parentWithClass(e.target, 'btnDelete');
- if (btnDelete) {
- var index = btnDelete.getAttribute('data-index');
- var context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
- deleteLocalSubtitle(context, index);
- }
- }
-
- function onSubtitleResultsClick(e) {
- var subtitleId;
- var context;
-
- var btnOptions = dom.parentWithClass(e.target, 'btnOptions');
- if (btnOptions) {
- subtitleId = btnOptions.getAttribute('data-subid');
- context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
- showDownloadOptions(btnOptions, context, subtitleId);
+ dialogOptions.size = 'small';
}
- var btnDownload = dom.parentWithClass(e.target, 'btnDownload');
- if (btnDownload) {
- subtitleId = btnDownload.getAttribute('data-subid');
- context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
- downloadRemoteSubtitles(context, subtitleId);
+ let dlg = dialogHelper.createDialog(dialogOptions);
+
+ dlg.classList.add('formDialog');
+ dlg.classList.add('subtitleEditorDialog');
+
+ dlg.innerHTML = globalize.translateHtml(template, 'core');
+
+ dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('File');
+
+ dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
+
+ let btnSubmit = dlg.querySelector('.btnSubmit');
+
+ if (layoutManager.tv) {
+ centerFocus(dlg.querySelector('.formDialogContent'), false, true);
+ dlg.querySelector('.btnSearchSubtitles').classList.add('hide');
+ } else {
+ btnSubmit.classList.add('hide');
}
- }
- function showDownloadOptions(button, context, subtitleId) {
- var items = [];
+ let editorContent = dlg.querySelector('.formDialogContent');
- items.push({
- name: globalize.translate('Download'),
- id: 'download'
+ dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
+ dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
+
+ apiClient.getCultures().then(function (languages) {
+ fillLanguages(editorContent, apiClient, languages);
});
- require(['actionsheet'], function (actionsheet) {
- actionsheet.show({
- items: items,
- positionTo: button
-
- }).then(function (id) {
- switch (id) {
- case 'download':
- downloadRemoteSubtitles(context, subtitleId);
- break;
- default:
- break;
- }
- });
+ dlg.querySelector('.btnCancel').addEventListener('click', function () {
+ dialogHelper.close(dlg);
});
- }
-
- function centerFocus(elem, horiz, on) {
- require(['scrollHelper'], function (scrollHelper) {
- var fn = on ? 'on' : 'off';
- scrollHelper.centerFocus[fn](elem, horiz);
- });
- }
-
- function showEditorInternal(itemId, serverId, template) {
- hasChanges = false;
-
- var apiClient = connectionManager.getApiClient(serverId);
- return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
- 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('subtitleEditorDialog');
-
- dlg.innerHTML = globalize.translateHtml(template, 'core');
-
- dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('File');
-
- dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
-
- var btnSubmit = dlg.querySelector('.btnSubmit');
-
- if (layoutManager.tv) {
- centerFocus(dlg.querySelector('.formDialogContent'), false, true);
- dlg.querySelector('.btnSearchSubtitles').classList.add('hide');
- } else {
- btnSubmit.classList.add('hide');
- }
-
- var editorContent = dlg.querySelector('.formDialogContent');
-
- dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
- dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
-
- apiClient.getCultures().then(function (languages) {
- fillLanguages(editorContent, apiClient, languages);
- });
-
- dlg.querySelector('.btnCancel').addEventListener('click', function () {
- dialogHelper.close(dlg);
- });
-
- return new Promise(function (resolve, reject) {
- dlg.addEventListener('close', function () {
- if (layoutManager.tv) {
- centerFocus(dlg.querySelector('.formDialogContent'), false, false);
- }
-
- if (hasChanges) {
- resolve();
- } else {
- reject();
- }
- });
-
- dialogHelper.open(dlg);
-
- reload(editorContent, apiClient, item);
- });
- });
- }
-
- function showEditor(itemId, serverId) {
- loading.show();
return new Promise(function (resolve, reject) {
- require(['text!./subtitleeditor.template.html'], function (template) {
- showEditorInternal(itemId, serverId, template).then(resolve, reject);
- });
- });
- }
+ dlg.addEventListener('close', function () {
+ if (layoutManager.tv) {
+ centerFocus(dlg.querySelector('.formDialogContent'), false, false);
+ }
- return {
- show: showEditor
- };
-});
+ if (hasChanges) {
+ resolve();
+ } else {
+ reject();
+ }
+ });
+
+ dialogHelper.open(dlg);
+
+ reload(editorContent, apiClient, item);
+ });
+ });
+}
+
+function showEditor(itemId, serverId) {
+ loading.show();
+
+ return new Promise(function (resolve, reject) {
+ import('text!./subtitleeditor.template.html').then(({default: template}) => {
+ showEditorInternal(itemId, serverId, template).then(resolve, reject);
+ });
+ });
+}
+
+export default {
+ show: showEditor
+};
diff --git a/src/components/subtitlesettings/subtitleappearancehelper.js b/src/components/subtitlesettings/subtitleappearancehelper.js
index 7e3e2de7a..1834cafa1 100644
--- a/src/components/subtitlesettings/subtitleappearancehelper.js
+++ b/src/components/subtitlesettings/subtitleappearancehelper.js
@@ -3,52 +3,29 @@
* @module components/subtitleSettings/subtitleAppearanceHelper
*/
-function getTextStyles(settings, isCue) {
- let list = [];
+function getTextStyles(settings, preview) {
+ const list = [];
- if (isCue) {
- switch (settings.textSize || '') {
- case 'smaller':
- list.push({ name: 'font-size', value: '.5em' });
- break;
- case 'small':
- list.push({ name: 'font-size', value: '.7em' });
- break;
- case 'large':
- list.push({ name: 'font-size', value: '1.3em' });
- break;
- case 'larger':
- list.push({ name: 'font-size', value: '1.72em' });
- break;
- case 'extralarge':
- list.push({ name: 'font-size', value: '2em' });
- break;
- default:
- case 'medium':
- break;
- }
- } else {
- switch (settings.textSize || '') {
- case 'smaller':
- list.push({ name: 'font-size', value: '.8em' });
- break;
- case 'small':
- list.push({ name: 'font-size', value: 'inherit' });
- break;
- case 'larger':
- list.push({ name: 'font-size', value: '2em' });
- break;
- case 'extralarge':
- list.push({ name: 'font-size', value: '2.2em' });
- break;
- case 'large':
- list.push({ name: 'font-size', value: '1.72em' });
- break;
- default:
- case 'medium':
- list.push({ name: 'font-size', value: '1.36em' });
- break;
- }
+ switch (settings.textSize || '') {
+ case 'smaller':
+ list.push({ name: 'font-size', value: '.8em' });
+ break;
+ case 'small':
+ list.push({ name: 'font-size', value: 'inherit' });
+ break;
+ case 'larger':
+ list.push({ name: 'font-size', value: '2em' });
+ break;
+ case 'extralarge':
+ list.push({ name: 'font-size', value: '2.2em' });
+ break;
+ case 'large':
+ list.push({ name: 'font-size', value: '1.72em' });
+ break;
+ default:
+ case 'medium':
+ list.push({ name: 'font-size', value: '1.36em' });
+ break;
}
switch (settings.dropShadow || '') {
@@ -111,26 +88,56 @@ function getTextStyles(settings, isCue) {
break;
}
+ if (!preview) {
+ const pos = parseInt(settings.verticalPosition, 10);
+ const lineHeight = 1.35; // FIXME: It is better to read this value from element
+ const line = Math.abs(pos * lineHeight);
+ if (pos < 0) {
+ list.push({ name: 'min-height', value: `${line}em` });
+ list.push({ name: 'margin-top', value: '' });
+ } else {
+ list.push({ name: 'min-height', value: '' });
+ list.push({ name: 'margin-top', value: `${line}em` });
+ }
+ }
+
return list;
}
-export function getStyles(settings, isCue) {
+function getWindowStyles(settings, preview) {
+ const list = [];
+
+ if (!preview) {
+ const pos = parseInt(settings.verticalPosition, 10);
+ if (pos < 0) {
+ list.push({ name: 'top', value: '' });
+ list.push({ name: 'bottom', value: '0' });
+ } else {
+ list.push({ name: 'top', value: '0' });
+ list.push({ name: 'bottom', value: '' });
+ }
+ }
+
+ return list;
+}
+
+export function getStyles(settings, preview) {
return {
- text: getTextStyles(settings, isCue),
- window: []
+ text: getTextStyles(settings, preview),
+ window: getWindowStyles(settings, preview)
};
}
function applyStyleList(styles, elem) {
for (let i = 0, length = styles.length; i < length; i++) {
- let style = styles[i];
+ const style = styles[i];
elem.style[style.name] = style.value;
}
}
export function applyStyles(elements, appearanceSettings) {
- let styles = getStyles(appearanceSettings);
+ const styles = getStyles(appearanceSettings, !!elements.preview);
if (elements.text) {
applyStyleList(styles.text, elements.text);
diff --git a/src/components/subtitlesettings/subtitlesettings.css b/src/components/subtitlesettings/subtitlesettings.css
new file mode 100644
index 000000000..204757f10
--- /dev/null
+++ b/src/components/subtitlesettings/subtitlesettings.css
@@ -0,0 +1,26 @@
+.subtitleappearance-fullpreview {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: 1000;
+ pointer-events: none;
+ transition: 0.2s;
+}
+
+.subtitleappearance-fullpreview-hide {
+ opacity: 0;
+}
+
+.subtitleappearance-fullpreview-window {
+ position: absolute;
+ width: 100%;
+ font-size: 170%;
+ text-align: center;
+}
+
+.subtitleappearance-fullpreview-text {
+ display: inline-block;
+ max-width: 70%;
+}
diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js
index 79fa289ab..46760be4c 100644
--- a/src/components/subtitlesettings/subtitlesettings.js
+++ b/src/components/subtitlesettings/subtitlesettings.js
@@ -2,6 +2,7 @@ import globalize from 'globalize';
import appHost from 'apphost';
import appSettings from 'appSettings';
import focusManager from 'focusManager';
+import layoutManager from 'layoutManager';
import loading from 'loading';
import connectionManager from 'connectionManager';
import subtitleAppearanceHelper from 'subtitleAppearanceHelper';
@@ -10,9 +11,11 @@ import dom from 'dom';
import events from 'events';
import 'listViewStyle';
import 'emby-select';
+import 'emby-slider';
import 'emby-input';
import 'emby-checkbox';
import 'flexStyles';
+import 'css!./subtitlesettings';
/**
* Subtitle settings.
@@ -20,13 +23,14 @@ import 'flexStyles';
*/
function getSubtitleAppearanceObject(context) {
- let appearanceSettings = {};
+ const appearanceSettings = {};
appearanceSettings.textSize = context.querySelector('#selectTextSize').value;
appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value;
appearanceSettings.font = context.querySelector('#selectFont').value;
appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value;
appearanceSettings.textColor = context.querySelector('#inputTextColor').value;
+ appearanceSettings.verticalPosition = context.querySelector('#sliderVerticalPosition').value;
return appearanceSettings;
}
@@ -37,7 +41,7 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
context.querySelector('.fldBurnIn').classList.remove('hide');
}
- let selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage');
+ const selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage');
settingsHelper.populateLanguages(selectSubtitleLanguage, allCultures);
@@ -51,6 +55,7 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent';
context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff';
context.querySelector('#selectFont').value = appearanceSettings.font || '';
+ context.querySelector('#sliderVerticalPosition').value = appearanceSettings.verticalPosition;
context.querySelector('#selectSubtitleBurnIn').value = appSettings.get('subtitleburnin') || '';
@@ -96,9 +101,9 @@ function save(instance, context, userId, userSettings, apiClient, enableSaveConf
}
function onSubtitleModeChange(e) {
- let view = dom.parentWithClass(e.target, 'subtitlesettings');
+ const view = dom.parentWithClass(e.target, 'subtitlesettings');
- let subtitlesHelp = view.querySelectorAll('.subtitlesHelp');
+ const subtitlesHelp = view.querySelectorAll('.subtitlesHelp');
for (let i = 0, length = subtitlesHelp.length; i < length; i++) {
subtitlesHelp[i].classList.add('hide');
}
@@ -106,16 +111,51 @@ function onSubtitleModeChange(e) {
}
function onAppearanceFieldChange(e) {
- let view = dom.parentWithClass(e.target, 'subtitlesettings');
+ const view = dom.parentWithClass(e.target, 'subtitlesettings');
- let appearanceSettings = getSubtitleAppearanceObject(view);
+ const appearanceSettings = getSubtitleAppearanceObject(view);
- let elements = {
+ const elements = {
window: view.querySelector('.subtitleappearance-preview-window'),
- text: view.querySelector('.subtitleappearance-preview-text')
+ text: view.querySelector('.subtitleappearance-preview-text'),
+ preview: true
};
subtitleAppearanceHelper.applyStyles(elements, appearanceSettings);
+
+ subtitleAppearanceHelper.applyStyles({
+ window: view.querySelector('.subtitleappearance-fullpreview-window'),
+ text: view.querySelector('.subtitleappearance-fullpreview-text')
+ }, appearanceSettings);
+}
+
+const subtitlePreviewDelay = 1000;
+let subtitlePreviewTimer;
+
+function showSubtitlePreview(persistent) {
+ clearTimeout(subtitlePreviewTimer);
+
+ this._fullPreview.classList.remove('subtitleappearance-fullpreview-hide');
+
+ if (persistent) {
+ this._refFullPreview++;
+ }
+
+ if (this._refFullPreview === 0) {
+ subtitlePreviewTimer = setTimeout(hideSubtitlePreview.bind(this), subtitlePreviewDelay);
+ }
+}
+
+function hideSubtitlePreview(persistent) {
+ clearTimeout(subtitlePreviewTimer);
+
+ if (persistent) {
+ this._refFullPreview--;
+ }
+
+ if (this._refFullPreview === 0) {
+ this._fullPreview.classList.add('subtitleappearance-fullpreview-hide');
+ }
}
function embed(options, self) {
@@ -138,6 +178,36 @@ function embed(options, self) {
if (appHost.supports('subtitleappearancesettings')) {
options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide');
+
+ self._fullPreview = options.element.querySelector('.subtitleappearance-fullpreview');
+ self._refFullPreview = 0;
+
+ const sliderVerticalPosition = options.element.querySelector('#sliderVerticalPosition');
+ sliderVerticalPosition.addEventListener('input', onAppearanceFieldChange);
+ sliderVerticalPosition.addEventListener('input', () => showSubtitlePreview.call(self));
+
+ const eventPrefix = window.PointerEvent ? 'pointer' : 'mouse';
+ sliderVerticalPosition.addEventListener(`${eventPrefix}enter`, () => showSubtitlePreview.call(self, true));
+ sliderVerticalPosition.addEventListener(`${eventPrefix}leave`, () => hideSubtitlePreview.call(self, true));
+
+ if (layoutManager.tv) {
+ sliderVerticalPosition.addEventListener('focus', () => showSubtitlePreview.call(self, true));
+ sliderVerticalPosition.addEventListener('blur', () => hideSubtitlePreview.call(self, true));
+
+ // Give CustomElements time to attach
+ setTimeout(() => {
+ sliderVerticalPosition.classList.add('focusable');
+ sliderVerticalPosition.enableKeyboardDragging();
+ }, 0);
+ }
+
+ options.element.querySelector('.chkPreview').addEventListener('change', (e) => {
+ if (e.target.checked) {
+ showSubtitlePreview.call(self, true);
+ } else {
+ hideSubtitlePreview.call(self, true);
+ }
+ });
}
self.loadData();
@@ -156,20 +226,20 @@ export class SubtitleSettings {
}
loadData() {
- let self = this;
- let context = self.options.element;
+ const self = this;
+ const context = self.options.element;
loading.show();
- let userId = self.options.userId;
- let apiClient = connectionManager.getApiClient(self.options.serverId);
- let userSettings = self.options.userSettings;
+ const userId = self.options.userId;
+ const apiClient = connectionManager.getApiClient(self.options.serverId);
+ const userSettings = self.options.userSettings;
apiClient.getUser(userId).then(function (user) {
userSettings.setUserInfo(userId, apiClient).then(function () {
self.dataLoaded = true;
- let appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey);
+ const appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey);
loadForm(context, user, userSettings, appearanceSettings, apiClient);
});
@@ -186,12 +256,12 @@ export class SubtitleSettings {
onSubmit(e) {
const self = this;
- let apiClient = connectionManager.getApiClient(self.options.serverId);
- let userId = self.options.userId;
- let userSettings = self.options.userSettings;
+ const apiClient = connectionManager.getApiClient(self.options.serverId);
+ const userId = self.options.userId;
+ const userSettings = self.options.userSettings;
userSettings.setUserInfo(userId, apiClient).then(function () {
- let enableSaveConfirmation = self.options.enableSaveConfirmation;
+ const enableSaveConfirmation = self.options.enableSaveConfirmation;
save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
});
diff --git a/src/components/subtitlesettings/subtitlesettings.template.html b/src/components/subtitlesettings/subtitlesettings.template.html
index 716296a25..2884b26ef 100644
--- a/src/components/subtitlesettings/subtitlesettings.template.html
+++ b/src/components/subtitlesettings/subtitlesettings.template.html
@@ -14,7 +14,7 @@
-
+
@@ -38,6 +38,16 @@
${HeaderSubtitleAppearance}
+ '); - } - - function seriesImageUrl(item, options) { - if ('Episode' !== item.Type) { - return null; + if (s.Index == currentIndex) { + menuItem.selected = true; } - options = options || {}; - options.type = options.type || 'Primary'; - if ('Primary' === options.type && item.SeriesPrimaryImageTag) { - options.tag = item.SeriesPrimaryImageTag; + return menuItem; + }); + + import('actionsheet').then(({ default: actionsheet }) => { + actionsheet.show({ + items: menuItems, + positionTo: button, + callback: function (id) { + playbackManager.setAudioStreamIndex(parseInt(id), player); + } + }); + }); +} + +function showSubtitleMenu(context, player, button, item) { + const currentIndex = playbackManager.getSubtitleStreamIndex(player); + const streams = playbackManager.subtitleTracks(player); + const menuItems = streams.map(function (s) { + const menuItem = { + name: s.DisplayTitle, + id: s.Index + }; + + if (s.Index == currentIndex) { + menuItem.selected = true; + } + + return menuItem; + }); + menuItems.unshift({ + id: -1, + name: globalize.translate('ButtonOff'), + selected: currentIndex == null + }); + + import('actionsheet').then(({ default: actionsheet }) => { + actionsheet.show({ + items: menuItems, + positionTo: button, + callback: function (id) { + playbackManager.setSubtitleStreamIndex(parseInt(id), player); + } + }); + }); +} + +function getNowPlayingNameHtml(nowPlayingItem, includeNonNameInfo) { + return nowPlayingHelper.getNowPlayingNames(nowPlayingItem, includeNonNameInfo).map(function (i) { + return i.text; + }).join('
'); +} + +function seriesImageUrl(item, options) { + if (item.Type !== 'Episode') { + return null; + } + + options = options || {}; + options.type = options.type || 'Primary'; + if (options.type === 'Primary' && item.SeriesPrimaryImageTag) { + options.tag = item.SeriesPrimaryImageTag; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); + } + + if (options.type === 'Thumb') { + if (item.SeriesThumbImageTag) { + options.tag = item.SeriesThumbImageTag; return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); } - if ('Thumb' === options.type) { - if (item.SeriesThumbImageTag) { - options.tag = item.SeriesThumbImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - - if (item.ParentThumbImageTag) { - options.tag = item.ParentThumbImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); - } + if (item.ParentThumbImageTag) { + options.tag = item.ParentThumbImageTag; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); } - - return null; } - function imageUrl(item, options) { - options = options || {}; - options.type = options.type || 'Primary'; + return null; +} - if (item.ImageTags && item.ImageTags[options.type]) { - options.tag = item.ImageTags[options.type]; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); - } +function imageUrl(item, options) { + options = options || {}; + options.type = options.type || 'Primary'; - if (item.AlbumId && item.AlbumPrimaryImageTag) { - options.tag = item.AlbumPrimaryImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); - } - - return null; + if (item.ImageTags && item.ImageTags[options.type]) { + options.tag = item.ImageTags[options.type]; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); } - function updateNowPlayingInfo(context, state, serverId) { - var item = state.NowPlayingItem; - var displayName = item ? getNowPlayingNameHtml(item).replace('
', ' - ') : ''; - if (typeof item !== 'undefined') { - var nowPlayingServerId = (item.ServerId || serverId); - if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') { - var songName = item.Name; - if (item.Album != null && item.Artists != null) { - var artistsSeries = ''; - var albumName = item.Album; - if (item.ArtistItems != null) { - for (const artist of item.ArtistItems) { - let artistName = artist.Name; - let artistId = artist.Id; - artistsSeries += `${artistName}`; - if (artist !== item.ArtistItems.slice(-1)[0]) { - artistsSeries += ', '; - } - } - } else if (item.Artists) { - // For some reason, Chromecast Player doesn't return a item.ArtistItems object, so we need to fallback - // to normal item.Artists item. - // TODO: Normalise fields returned by all the players - for (const artist of item.Artists) { - artistsSeries += `${artist}`; - if (artist !== item.Artists.slice(-1)[0]) { - artistsSeries += ', '; - } + if (item.AlbumId && item.AlbumPrimaryImageTag) { + options.tag = item.AlbumPrimaryImageTag; + return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); + } + + return null; +} + +function updateNowPlayingInfo(context, state, serverId) { + const item = state.NowPlayingItem; + const displayName = item ? getNowPlayingNameHtml(item).replace('
', ' - ') : ''; + if (typeof item !== 'undefined') { + const nowPlayingServerId = (item.ServerId || serverId); + if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') { + const songName = item.Name; + let artistsSeries = ''; + let albumName = ''; + if (item.Artists != null) { + if (item.ArtistItems != null) { + for (const artist of item.ArtistItems) { + const artistName = artist.Name; + const artistId = artist.Id; + artistsSeries += `${artistName}`; + if (artist !== item.ArtistItems.slice(-1)[0]) { + artistsSeries += ', '; } } - context.querySelector('.nowPlayingArtist').innerHTML = artistsSeries; - context.querySelector('.nowPlayingAlbum').innerHTML = '${albumName}`; - } - context.querySelector('.nowPlayingSongName').innerHTML = songName; - } else if (item.Type == 'Episode') { - if (item.SeasonName != null) { - var seasonName = item.SeasonName; - context.querySelector('.nowPlayingSeason').innerHTML = '${seasonName}`; - } - if (item.SeriesName != null) { - var seriesName = item.SeriesName; - if (item.SeriesId != null) { - context.querySelector('.nowPlayingSerie').innerHTML = '${seriesName}`; - } else { - context.querySelector('.nowPlayingSerie').innerHTML = seriesName; - } - } - context.querySelector('.nowPlayingEpisode').innerHTML = item.Name; - } else { - context.querySelector('.nowPlayingPageTitle').innerHTML = displayName; - } - - if (displayName.length > 0 && item.Type != 'Audio' && item.Type != 'Episode') { - context.querySelector('.nowPlayingPageTitle').classList.remove('hide'); - } else { - context.querySelector('.nowPlayingPageTitle').classList.add('hide'); - } - - var url = item ? seriesImageUrl(item, { - maxHeight: 300 * 2 - }) || imageUrl(item, { - maxHeight: 300 * 2 - }) : null; - - let contextButton = context.querySelector('.btnToggleContextMenu'); - // We remove the previous event listener by replacing the item in each update event - const autoFocusContextButton = document.activeElement === contextButton; - let contextButtonClone = contextButton.cloneNode(true); - contextButton.parentNode.replaceChild(contextButtonClone, contextButton); - contextButton = context.querySelector('.btnToggleContextMenu'); - if (autoFocusContextButton) { - contextButton.focus(); - } - const stopPlayback = !!layoutManager.mobile; - var options = { - play: false, - queue: false, - stopPlayback: stopPlayback, - clearQueue: true, - openAlbum: false, - positionTo: contextButton - }; - var apiClient = connectionManager.getApiClient(item.ServerId); - apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { - apiClient.getCurrentUser().then(function (user) { - contextButton.addEventListener('click', function () { - itemContextMenu.show(Object.assign({ - item: fullItem, - user: user - }, options)); - }); - }); - }); - setImageUrl(context, state, url); - if (item) { - backdrop.setBackdrops([item]); - apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { - var userData = fullItem.UserData || {}; - var likes = null == userData.Likes ? '' : userData.Likes; - context.querySelector('.nowPlayingPageUserDataButtonsTitle').innerHTML = ''; - context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = ''; - }); - } else { - backdrop.clearBackdrop(); - context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = ''; - } - } - } - - function setImageUrl(context, state, url) { - var item = state.NowPlayingItem; - var imgContainer = context.querySelector('.nowPlayingPageImageContainer'); - - if (url) { - imgContainer.innerHTML = '
';
- volumecontrolHtml += ``;
- volumecontrolHtml += '';
- volumecontrolHtml += '
';
- let optionsSection = context.querySelector('.playlistSectionButton');
- if (!layoutManager.mobile) {
- context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', volumecontrolHtml);
- optionsSection.classList.remove('align-items-center', 'justify-content-center');
- optionsSection.classList.add('align-items-right', 'justify-content-flex-end');
+ context.querySelector('.buttonMute').addEventListener('click', function () {
+ playbackManager.toggleMute(currentPlayer);
+ });
+ const playlistContainer = context.querySelector('.playlist');
+ playlistContainer.addEventListener('action-remove', function (e) {
+ playbackManager.removeFromPlaylist([e.detail.playlistItemId], currentPlayer);
+ });
+ playlistContainer.addEventListener('itemdrop', function (e) {
+ const newIndex = e.detail.newIndex;
+ const playlistItemId = e.detail.playlistItemId;
+ playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer);
+ });
+ context.querySelector('.btnSavePlaylist').addEventListener('click', savePlaylist);
+ context.querySelector('.btnTogglePlaylist').addEventListener('click', function () {
+ if (context.querySelector('.playlist').classList.contains('hide')) {
context.querySelector('.playlist').classList.remove('hide');
context.querySelector('.btnSavePlaylist').classList.remove('hide');
- context.classList.add('padded-bottom');
+ context.querySelector('.volumecontrol').classList.add('hide');
+ if (layoutManager.mobile) {
+ context.querySelector('.playlistSectionButton').classList.remove('playlistSectionButtonTransparent');
+ }
} else {
- optionsSection.querySelector('.btnTogglePlaylist').insertAdjacentHTML('afterend', volumecontrolHtml);
- optionsSection.classList.add('playlistSectionButtonTransparent');
- context.querySelector('.btnTogglePlaylist').classList.remove('hide');
- context.querySelector('.playlistSectionButton').classList.remove('justify-content-center');
- context.querySelector('.playlistSectionButton').classList.add('justify-content-space-between');
+ context.querySelector('.playlist').classList.add('hide');
+ context.querySelector('.btnSavePlaylist').classList.add('hide');
+ if (showMuteButton || showVolumeSlider) {
+ context.querySelector('.volumecontrol').classList.remove('hide');
+ }
+ if (layoutManager.mobile) {
+ context.querySelector('.playlistSectionButton').classList.add('playlistSectionButtonTransparent');
+ }
}
+ });
+ }
- bindEvents(context);
- context.querySelector('.sendMessageForm').addEventListener('submit', onMessageSubmit);
- context.querySelector('.typeTextForm').addEventListener('submit', onSendStringSubmit);
- events.on(playbackManager, 'playerchange', onPlayerChange);
+ function onPlayerChange() {
+ bindToPlayer(dlg, playbackManager.getCurrentPlayer());
+ }
- if (layoutManager.tv) {
- var positionSlider = context.querySelector('.nowPlayingPositionSlider');
- positionSlider.classList.add('focusable');
- positionSlider.enableKeyboardDragging();
+ function onMessageSubmit(e) {
+ const form = e.target;
+ playbackManager.sendCommand({
+ Name: 'DisplayMessage',
+ Arguments: {
+ Header: form.querySelector('#txtMessageTitle').value,
+ Text: form.querySelector('#txtMessageText', form).value
}
+ }, currentPlayer);
+ form.querySelector('input').value = '';
+
+ import('toast').then(({ default: toast }) => {
+ toast('Message sent.');
+ });
+
+ e.preventDefault();
+ e.stopPropagation();
+ return false;
+ }
+
+ function onSendStringSubmit(e) {
+ const form = e.target;
+ playbackManager.sendCommand({
+ Name: 'SendString',
+ Arguments: {
+ String: form.querySelector('#txtTypeText', form).value
+ }
+ }, currentPlayer);
+ form.querySelector('input').value = '';
+
+ import('toast').then(({ default: toast }) => {
+ toast('Text sent.');
+ });
+
+ e.preventDefault();
+ e.stopPropagation();
+ return false;
+ }
+
+ function init(ownerView, context) {
+ let volumecontrolHtml = '';
+ volumecontrolHtml += ``;
+ volumecontrolHtml += '';
+ volumecontrolHtml += '
';
+ const optionsSection = context.querySelector('.playlistSectionButton');
+ if (!layoutManager.mobile) {
+ context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', volumecontrolHtml);
+ optionsSection.classList.remove('align-items-center', 'justify-content-center');
+ optionsSection.classList.add('align-items-right', 'justify-content-flex-end');
+ context.querySelector('.playlist').classList.remove('hide');
+ context.querySelector('.btnSavePlaylist').classList.remove('hide');
+ context.classList.add('padded-bottom');
+ } else {
+ optionsSection.querySelector('.btnTogglePlaylist').insertAdjacentHTML('afterend', volumecontrolHtml);
+ optionsSection.classList.add('playlistSectionButtonTransparent');
+ context.querySelector('.btnTogglePlaylist').classList.remove('hide');
+ context.querySelector('.playlistSectionButton').classList.remove('justify-content-center');
+ context.querySelector('.playlistSectionButton').classList.add('justify-content-space-between');
}
- function onDialogClosed(e) {
- releaseCurrentPlayer();
- events.off(playbackManager, 'playerchange', onPlayerChange);
- lastPlayerState = null;
+ bindEvents(context);
+ context.querySelector('.sendMessageForm').addEventListener('submit', onMessageSubmit);
+ context.querySelector('.typeTextForm').addEventListener('submit', onSendStringSubmit);
+ events.on(playbackManager, 'playerchange', onPlayerChange);
+
+ if (layoutManager.tv) {
+ const positionSlider = context.querySelector('.nowPlayingPositionSlider');
+ positionSlider.classList.add('focusable');
+ positionSlider.enableKeyboardDragging();
}
+ }
- function onShow(context, tab) {
- bindToPlayer(context, playbackManager.getCurrentPlayer());
- }
+ function onDialogClosed(e) {
+ releaseCurrentPlayer();
+ events.off(playbackManager, 'playerchange', onPlayerChange);
+ lastPlayerState = null;
+ }
- var dlg;
- var currentPlayer;
- var lastPlayerState;
- var currentPlayerSupportedCommands = [];
- var lastUpdateTime = 0;
- var currentRuntimeTicks = 0;
- var self = this;
+ function onShow(context, tab) {
+ bindToPlayer(context, playbackManager.getCurrentPlayer());
+ }
- self.init = function (ownerView, context) {
- dlg = context;
- init(ownerView, dlg);
- };
+ let dlg;
+ let currentPlayer;
+ let lastPlayerState;
+ let currentPlayerSupportedCommands = [];
+ let lastUpdateTime = 0;
+ let currentRuntimeTicks = 0;
+ const self = this;
- self.onShow = function () {
- onShow(dlg, window.location.hash);
- };
-
- self.destroy = function () {
- onDialogClosed();
- };
+ self.init = function (ownerView, context) {
+ dlg = context;
+ init(ownerView, dlg);
};
-});
+
+ self.onShow = function () {
+ onShow(dlg, window.location.hash);
+ };
+
+ self.destroy = function () {
+ onDialogClosed();
+ };
+}
diff --git a/src/components/scrollManager.js b/src/components/scrollManager.js
index 4ee31a627..549cb9445 100644
--- a/src/components/scrollManager.js
+++ b/src/components/scrollManager.js
@@ -251,7 +251,7 @@ import layoutManager from 'layoutManager';
* @return {ScrollerData} Scroller data.
*/
function getScrollerData(scroller, vertical) {
- let data = {};
+ const data = {};
if (!vertical) {
data.scrollPos = scroller.scrollLeft;
diff --git a/src/components/skinManager.js b/src/components/skinManager.js
deleted file mode 100644
index faa1a1f30..000000000
--- a/src/components/skinManager.js
+++ /dev/null
@@ -1,184 +0,0 @@
-define(['apphost', 'userSettings', 'browser', 'events', 'backdrop', 'globalize', 'require', 'appSettings'], function (appHost, userSettings, browser, events, backdrop, globalize, require, appSettings) {
- 'use strict';
-
- var themeStyleElement;
- var currentThemeId;
-
- function unloadTheme() {
- var elem = themeStyleElement;
- if (elem) {
- elem.parentNode.removeChild(elem);
- themeStyleElement = null;
- currentThemeId = null;
- }
- }
-
- function loadUserSkin(options) {
- options = options || {};
- if (options.start) {
- Emby.Page.invokeShortcut(options.start);
- } else {
- Emby.Page.goHome();
- }
- }
-
- function getThemes() {
- return [{
- name: 'Apple TV',
- id: 'appletv'
- }, {
- name: 'Blue Radiance',
- id: 'blueradiance'
- }, {
- name: 'Dark',
- id: 'dark',
- isDefault: true,
- isDefaultServerDashboard: true
- }, {
- name: 'Light',
- id: 'light'
- }, {
- name: 'Purple Haze',
- id: 'purplehaze'
- }, {
- name: 'Windows Media Center',
- id: 'wmc'
- }];
- }
-
- var skinManager = {
- getThemes: getThemes,
- loadUserSkin: loadUserSkin
- };
-
- function getThemeStylesheetInfo(id, isDefaultProperty) {
- var themes = skinManager.getThemes();
- var defaultTheme;
- var selectedTheme;
-
- for (var i = 0, length = themes.length; i < length; i++) {
- var theme = themes[i];
- if (theme[isDefaultProperty]) {
- defaultTheme = theme;
- }
- if (id === theme.id) {
- selectedTheme = theme;
- }
- }
-
- selectedTheme = selectedTheme || defaultTheme;
- return {
- stylesheetPath: require.toUrl('themes/' + selectedTheme.id + '/theme.css'),
- themeId: selectedTheme.id
- };
- }
-
- var themeResources = {};
- var lastSound = 0;
- var currentSound;
-
- function loadThemeResources(id) {
- lastSound = 0;
- if (currentSound) {
- currentSound.stop();
- currentSound = null;
- }
-
- backdrop.clearBackdrop();
- }
-
- function onThemeLoaded() {
- document.documentElement.classList.remove('preload');
- try {
- var color = getComputedStyle(document.querySelector('.skinHeader')).getPropertyValue('background-color');
- if (color) {
- appHost.setThemeColor(color);
- }
- } catch (err) {
- console.error('error setting theme color: ' + err);
- }
- }
-
- skinManager.setTheme = function (id, context) {
- return new Promise(function (resolve, reject) {
- if (currentThemeId && currentThemeId === id) {
- resolve();
- return;
- }
-
- var isDefaultProperty = context === 'serverdashboard' ? 'isDefaultServerDashboard' : 'isDefault';
- var info = getThemeStylesheetInfo(id, isDefaultProperty);
- if (currentThemeId && currentThemeId === info.themeId) {
- resolve();
- return;
- }
-
- var linkUrl = info.stylesheetPath;
- unloadTheme();
-
- var link = document.createElement('link');
- link.setAttribute('rel', 'stylesheet');
- link.setAttribute('type', 'text/css');
- link.onload = function () {
- onThemeLoaded();
- resolve();
- };
-
- link.setAttribute('href', linkUrl);
- document.head.appendChild(link);
- themeStyleElement = link;
- currentThemeId = info.themeId;
- loadThemeResources(info.themeId);
-
- onViewBeforeShow({});
- });
- };
-
- function onViewBeforeShow(e) {
- if (e.detail && e.detail.type === 'video-osd') {
- // This removes the space that the scrollbar takes while playing a video
- document.body.classList.remove('force-scroll');
- return;
- }
-
- if (themeResources.backdrop) {
- backdrop.setBackdrop(themeResources.backdrop);
- }
-
- if (!browser.mobile && userSettings.enableThemeSongs()) {
- if (lastSound === 0) {
- if (themeResources.themeSong) {
- playSound(themeResources.themeSong);
- }
- } else if ((new Date().getTime() - lastSound) > 30000) {
- if (themeResources.effect) {
- playSound(themeResources.effect);
- }
- }
- }
- // This keeps the scrollbar always present in all pages, so we avoid clipping while switching between pages
- // that need the scrollbar and pages that don't.
- document.body.classList.add('force-scroll');
- }
-
- document.addEventListener('viewshow', onViewBeforeShow);
-
- function playSound(path, volume) {
- lastSound = new Date().getTime();
- require(['howler'], function (howler) {
- /* globals Howl */
- try {
- var sound = new Howl({
- src: [path],
- volume: volume || 0.1
- });
- sound.play();
- currentSound = sound;
- } catch (err) {
- console.error('error playing sound: ' + err);
- }
- });
- }
-
- return skinManager;
-});
diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js
index 56327312f..82f541a11 100644
--- a/src/components/slideshow/slideshow.js
+++ b/src/components/slideshow/slideshow.js
@@ -2,664 +2,672 @@
* Image viewer component
* @module components/slideshow/slideshow
*/
-define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'browser', 'apphost', 'dom', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (dialogHelper, inputManager, connectionManager, layoutManager, focusManager, browser, appHost, dom) {
- 'use strict';
+import dialogHelper from 'dialogHelper';
+import inputManager from 'inputManager';
+import connectionManager from 'connectionManager';
+import layoutManager from 'layoutManager';
+import focusManager from 'focusManager';
+import browser from 'browser';
+import appHost from 'apphost';
+import dom from 'dom';
+import 'css!./style';
+import 'material-icons';
+import 'paper-icon-button-light';
- /**
- * Name of transition event.
- */
- const transitionEndEventName = dom.whichTransitionEvent();
+/**
+ * Name of transition event.
+ */
+const transitionEndEventName = dom.whichTransitionEvent();
- /**
- * Flag to use fake image to fix blurry zoomed image.
- * At least WebKit doesn't restore quality for zoomed images.
- */
- const useFakeZoomImage = browser.safari;
+/**
+ * Flag to use fake image to fix blurry zoomed image.
+ * At least WebKit doesn't restore quality for zoomed images.
+ */
+const useFakeZoomImage = browser.safari;
- /**
- * Retrieves an item's image URL from the API.
- * @param {object|string} item - Item used to generate the image URL.
- * @param {object} options - Options of the image.
- * @param {object} apiClient - API client instance used to retrieve the image.
- * @returns {null|string} URL of the item's image.
- */
- function getImageUrl(item, options, apiClient) {
- options = options || {};
- options.type = options.type || 'Primary';
+/**
+ * Retrieves an item's image URL from the API.
+ * @param {object|string} item - Item used to generate the image URL.
+ * @param {object} options - Options of the image.
+ * @param {object} apiClient - API client instance used to retrieve the image.
+ * @returns {null|string} URL of the item's image.
+ */
+function getImageUrl(item, options, apiClient) {
+ options = options || {};
+ options.type = options.type || 'Primary';
- if (typeof (item) === 'string') {
- return apiClient.getScaledImageUrl(item, options);
+ if (typeof (item) === 'string') {
+ return apiClient.getScaledImageUrl(item, options);
+ }
+
+ if (item.ImageTags && item.ImageTags[options.type]) {
+ options.tag = item.ImageTags[options.type];
+ return apiClient.getScaledImageUrl(item.Id, options);
+ }
+
+ if (options.type === 'Primary') {
+ if (item.AlbumId && item.AlbumPrimaryImageTag) {
+ options.tag = item.AlbumPrimaryImageTag;
+ return apiClient.getScaledImageUrl(item.AlbumId, options);
}
+ }
- if (item.ImageTags && item.ImageTags[options.type]) {
- options.tag = item.ImageTags[options.type];
- return apiClient.getScaledImageUrl(item.Id, options);
+ return null;
+}
+
+/**
+ * Retrieves a backdrop's image URL from the API.
+ * @param {object} item - Item used to generate the image URL.
+ * @param {object} options - Options of the image.
+ * @param {object} apiClient - API client instance used to retrieve the image.
+ * @returns {null|string} URL of the item's backdrop.
+ */
+function getBackdropImageUrl(item, options, apiClient) {
+ options = options || {};
+ options.type = options.type || 'Backdrop';
+
+ // If not resizing, get the original image
+ if (!options.maxWidth && !options.width && !options.maxHeight && !options.height) {
+ options.quality = 100;
+ }
+
+ if (item.BackdropImageTags && item.BackdropImageTags.length) {
+ options.tag = item.BackdropImageTags[0];
+ return apiClient.getScaledImageUrl(item.Id, options);
+ }
+
+ return null;
+}
+
+/**
+ * Dispatches a request for an item's image to its respective handler.
+ * @param {object} item - Item used to generate the image URL.
+ * @returns {string} URL of the item's image.
+ */
+function getImgUrl(item, user) {
+ const apiClient = connectionManager.getApiClient(item.ServerId);
+ const imageOptions = {};
+
+ if (item.BackdropImageTags && item.BackdropImageTags.length) {
+ return getBackdropImageUrl(item, imageOptions, apiClient);
+ } else {
+ if (item.MediaType === 'Photo' && user && user.Policy.EnableContentDownloading) {
+ return apiClient.getItemDownloadUrl(item.Id);
}
+ imageOptions.type = 'Primary';
+ return getImageUrl(item, imageOptions, apiClient);
+ }
+}
- if (options.type === 'Primary') {
- if (item.AlbumId && item.AlbumPrimaryImageTag) {
- options.tag = item.AlbumPrimaryImageTag;
- return apiClient.getScaledImageUrl(item.AlbumId, options);
+/**
+ * Generates a button using the specified icon, classes and properties.
+ * @param {string} icon - Name of the material icon on the button
+ * @param {string} cssClass - CSS classes to assign to the button
+ * @param {boolean} canFocus - Flag to set the tabindex attribute on the button to -1.
+ * @param {boolean} autoFocus - Flag to set the autofocus attribute on the button.
+ * @returns {string} The HTML markup of the button.
+ */
+function getIcon(icon, cssClass, canFocus, autoFocus) {
+ const tabIndex = canFocus ? '' : ' tabindex="-1"';
+ autoFocus = autoFocus ? ' autofocus' : '';
+ return '';
+}
+
+/**
+ * Sets the viewport meta tag to enable or disable scaling by the user.
+ * @param {boolean} scalable - Flag to set the scalability of the viewport.
+ */
+function setUserScalable(scalable) {
+ try {
+ appHost.setUserScalable(scalable);
+ } catch (err) {
+ console.error('error in appHost.setUserScalable: ' + err);
+ }
+}
+
+export default function (options) {
+ const self = this;
+ /** Initialized instance of Swiper. */
+ let swiperInstance;
+ /** Initialized instance of the dialog containing the Swiper instance. */
+ let dialog;
+ /** Options of the slideshow components */
+ let currentOptions;
+ /** ID of the timeout used to hide the OSD. */
+ let hideTimeout;
+ /** Last coordinates of the mouse pointer. */
+ let lastMouseMoveData;
+
+ /**
+ * Creates the HTML markup for the dialog and the OSD.
+ * @param {Object} options - Options used to create the dialog and slideshow.
+ */
+ function createElements(options) {
+ currentOptions = options;
+
+ dialog = dialogHelper.createDialog({
+ exitAnimationDuration: options.interactive ? 400 : 800,
+ size: 'fullscreen',
+ autoFocus: false,
+ scrollY: false,
+ exitAnimation: 'fadeout',
+ removeOnClose: true
+ });
+
+ dialog.classList.add('slideshowDialog');
+
+ let html = '';
+
+ html += '';
+
+ if (options.interactive && !layoutManager.tv) {
+ const actionButtonsOnTop = layoutManager.mobile;
+
+ html += getIcon('keyboard_arrow_left', 'btnSlideshowPrevious slideshowButton hide-mouse-idle-tv', false);
+ html += getIcon('keyboard_arrow_right', 'btnSlideshowNext slideshowButton hide-mouse-idle-tv', false);
+
+ html += '';
+ if (actionButtonsOnTop) {
+ if (appHost.supports('filedownload') && options.user && options.user.Policy.EnableContentDownloading) {
+ html += getIcon('file_download', 'btnDownload slideshowButton', true);
+ }
+ if (appHost.supports('sharing')) {
+ html += getIcon('share', 'btnShare slideshowButton', true);
+ }
}
- }
+ html += getIcon('close', 'slideshowButton btnSlideshowExit hide-mouse-idle-tv', false);
+ html += '
';
- return null;
- }
+ if (!actionButtonsOnTop) {
+ html += '';
+ }
} else {
- if (item.MediaType === 'Photo' && user && user.Policy.EnableContentDownloading) {
- return apiClient.getItemDownloadUrl(item.Id);
- }
- imageOptions.type = 'Primary';
- return getImageUrl(item, imageOptions, apiClient);
- }
- }
-
- /**
- * Generates a button using the specified icon, classes and properties.
- * @param {string} icon - Name of the material icon on the button
- * @param {string} cssClass - CSS classes to assign to the button
- * @param {boolean} canFocus - Flag to set the tabindex attribute on the button to -1.
- * @param {boolean} autoFocus - Flag to set the autofocus attribute on the button.
- * @returns {string} The HTML markup of the button.
- */
- function getIcon(icon, cssClass, canFocus, autoFocus) {
- var tabIndex = canFocus ? '' : ' tabindex="-1"';
- autoFocus = autoFocus ? ' autofocus' : '';
- return '';
- }
-
- /**
- * Sets the viewport meta tag to enable or disable scaling by the user.
- * @param {boolean} scalable - Flag to set the scalability of the viewport.
- */
- function setUserScalable(scalable) {
- try {
- appHost.setUserScalable(scalable);
- } catch (err) {
- console.error('error in appHost.setUserScalable: ' + err);
- }
- }
-
- return function (options) {
- var self = this;
- /** Initialized instance of Swiper. */
- var swiperInstance;
- /** Initialized instance of the dialog containing the Swiper instance. */
- var dialog;
- /** Options of the slideshow components */
- var currentOptions;
- /** ID of the timeout used to hide the OSD. */
- var hideTimeout;
- /** Last coordinates of the mouse pointer. */
- var lastMouseMoveData;
-
- /**
- * Creates the HTML markup for the dialog and the OSD.
- * @param {Object} options - Options used to create the dialog and slideshow.
- */
- function createElements(options) {
- currentOptions = options;
-
- dialog = dialogHelper.createDialog({
- exitAnimationDuration: options.interactive ? 400 : 800,
- size: 'fullscreen',
- autoFocus: false,
- scrollY: false,
- exitAnimation: 'fadeout',
- removeOnClose: true
- });
-
- dialog.classList.add('slideshowDialog');
-
- var html = '';
-
- html += '';
-
- if (options.interactive && !layoutManager.tv) {
- var actionButtonsOnTop = layoutManager.mobile;
-
- html += getIcon('keyboard_arrow_left', 'btnSlideshowPrevious slideshowButton hide-mouse-idle-tv', false);
- html += getIcon('keyboard_arrow_right', 'btnSlideshowNext slideshowButton hide-mouse-idle-tv', false);
-
- html += '';
- if (actionButtonsOnTop) {
- if (appHost.supports('filedownload') && options.user && options.user.Policy.EnableContentDownloading) {
- html += getIcon('file_download', 'btnDownload slideshowButton', true);
- }
- if (appHost.supports('sharing')) {
- html += getIcon('share', 'btnShare slideshowButton', true);
- }
- }
- html += getIcon('close', 'slideshowButton btnSlideshowExit hide-mouse-idle-tv', false);
- html += '
';
-
- if (!actionButtonsOnTop) {
- html += '';
- }
- } else {
- html += '';
- }
-
- dialog.innerHTML = html;
-
- if (options.interactive && !layoutManager.tv) {
- dialog.querySelector('.btnSlideshowExit').addEventListener('click', function (e) {
- dialogHelper.close(dialog);
- });
-
- var btnPause = dialog.querySelector('.btnSlideshowPause');
- if (btnPause) {
- btnPause.addEventListener('click', playPause);
- }
-
- var btnDownload = dialog.querySelector('.btnDownload');
- if (btnDownload) {
- btnDownload.addEventListener('click', download);
- }
-
- var btnShare = dialog.querySelector('.btnShare');
- if (btnShare) {
- btnShare.addEventListener('click', share);
- }
- }
-
- setUserScalable(true);
-
- dialogHelper.open(dialog).then(function () {
- setUserScalable(false);
- });
-
- inputManager.on(window, onInputCommand);
- /* eslint-disable-next-line compat/compat */
- document.addEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
-
- dialog.addEventListener('close', onDialogClosed);
-
- loadSwiper(dialog, options);
+ html += '';
}
- /**
- * Handles OSD changes when the autoplay is started.
- */
- function onAutoplayStart() {
- var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
- if (btnSlideshowPause) {
- btnSlideshowPause.classList.replace('play_arrow', 'pause');
- }
- }
+ dialog.innerHTML = html;
- /**
- * Handles OSD changes when the autoplay is stopped.
- */
- function onAutoplayStop() {
- var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
- if (btnSlideshowPause) {
- btnSlideshowPause.classList.replace('pause', 'play_arrow');
- }
- }
-
- /**
- * Handles zoom changes.
- */
- function onZoomChange(scale, imageEl, slideEl) {
- const zoomImage = slideEl.querySelector('.swiper-zoom-fakeimg');
-
- if (zoomImage) {
- zoomImage.style.width = zoomImage.style.height = scale * 100 + '%';
-
- if (scale > 1) {
- if (zoomImage.classList.contains('swiper-zoom-fakeimg-hidden')) {
- // Await for Swiper style changes
- setTimeout(() => {
- const callback = () => {
- imageEl.removeEventListener(transitionEndEventName, callback);
- zoomImage.classList.remove('swiper-zoom-fakeimg-hidden');
- };
-
- // Swiper set 'transition-duration: 300ms' for auto zoom
- // and 'transition-duration: 0s' for touch zoom
- const transitionDuration = parseFloat(imageEl.style.transitionDuration.replace(/[a-z]/i, ''));
-
- if (transitionDuration > 0) {
- imageEl.addEventListener(transitionEndEventName, callback);
- } else {
- callback();
- }
- }, 0);
- }
- } else {
- zoomImage.classList.add('swiper-zoom-fakeimg-hidden');
- }
- }
- }
-
- /**
- * Initializes the Swiper instance and binds the relevant events.
- * @param {HTMLElement} dialog - Element containing the dialog.
- * @param {Object} options - Options used to initialize the Swiper instance.
- */
- function loadSwiper(dialog, options) {
- var slides;
- if (currentOptions.slides) {
- slides = currentOptions.slides;
- } else {
- slides = currentOptions.items;
- }
-
- require(['swiper'], function (Swiper) {
- swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), {
- direction: 'horizontal',
- // Loop is disabled due to the virtual slides option not supporting it.
- loop: false,
- zoom: {
- minRatio: 1,
- toggle: true
- },
- autoplay: !options.interactive,
- keyboard: {
- enabled: true
- },
- preloadImages: true,
- slidesPerView: 1,
- slidesPerColumn: 1,
- initialSlide: options.startIndex || 0,
- speed: 240,
- navigation: {
- nextEl: '.btnSlideshowNext',
- prevEl: '.btnSlideshowPrevious'
- },
- // Virtual slides reduce memory consumption for large libraries while allowing preloading of images;
- virtual: {
- slides: slides,
- cache: true,
- renderSlide: getSwiperSlideHtml,
- addSlidesBefore: 1,
- addSlidesAfter: 1
- }
- });
-
- swiperInstance.on('autoplayStart', onAutoplayStart);
- swiperInstance.on('autoplayStop', onAutoplayStop);
-
- if (useFakeZoomImage) {
- swiperInstance.on('zoomChange', onZoomChange);
- }
- });
- }
-
- /**
- * Renders the HTML markup of a slide for an item or a slide.
- * @param {Object} item - The item used to render the slide.
- * @param {number} index - The index of the item in the Swiper instance.
- * @returns {string} The HTML markup of the slide.
- */
- function getSwiperSlideHtml(item, index) {
- if (currentOptions.slides) {
- return getSwiperSlideHtmlFromSlide(item);
- } else {
- return getSwiperSlideHtmlFromItem(item);
- }
- }
-
- /**
- * Renders the HTML markup of a slide for an item.
- * @param {Object} item - Item used to generate the slide.
- * @returns {string} The HTML markup of the slide.
- */
- function getSwiperSlideHtmlFromItem(item) {
- return getSwiperSlideHtmlFromSlide({
- originalImage: getImgUrl(item, currentOptions.user),
- Id: item.Id,
- ServerId: item.ServerId
- });
- }
-
- /**
- * Renders the HTML markup of a slide for a slide object.
- * @param {Object} item - Slide object used to generate the slide.
- * @returns {string} The HTML markup of the slide.
- */
- function getSwiperSlideHtmlFromSlide(item) {
- var html = '';
- html += '';
- html += '
';
-
- return html;
- }
-
- /**
- * Fetches the information of the currently displayed slide.
- * @returns {null|{itemId: string, shareUrl: string, serverId: string, url: string}} Object containing the information of the currently displayed slide.
- */
- function getCurrentImageInfo() {
- if (swiperInstance) {
- var slide = document.querySelector('.swiper-slide-active');
-
- if (slide) {
- return {
- url: slide.getAttribute('data-original'),
- shareUrl: slide.getAttribute('data-original'),
- itemId: slide.getAttribute('data-itemid'),
- serverId: slide.getAttribute('data-serverid')
- };
- }
- return null;
- } else {
- return null;
- }
- }
-
- /**
- * Starts a download for the currently displayed slide.
- */
- function download() {
- var imageInfo = getCurrentImageInfo();
-
- require(['fileDownloader'], function (fileDownloader) {
- fileDownloader.download([imageInfo]);
- });
- }
-
- /**
- * Shares the currently displayed slide using the browser's built-in sharing feature.
- */
- function share() {
- var imageInfo = getCurrentImageInfo();
-
- navigator.share({
- url: imageInfo.shareUrl
- });
- }
-
- /**
- * Starts the autoplay feature of the Swiper instance.
- */
- function play() {
- if (swiperInstance.autoplay) {
- swiperInstance.autoplay.start();
- }
- }
-
- /**
- * Pauses the autoplay feature of the Swiper instance;
- */
- function pause() {
- if (swiperInstance.autoplay) {
- swiperInstance.autoplay.stop();
- }
- }
-
- /**
- * Toggles the autoplay feature of the Swiper instance.
- */
- function playPause() {
- var paused = !dialog.querySelector('.btnSlideshowPause .material-icons').classList.contains('pause');
- if (paused) {
- play();
- } else {
- pause();
- }
- }
-
- /**
- * Closes the dialog and destroys the Swiper instance.
- */
- function onDialogClosed() {
- var swiper = swiperInstance;
- if (swiper) {
- swiper.destroy(true, true);
- swiperInstance = null;
- }
-
- inputManager.off(window, onInputCommand);
- /* eslint-disable-next-line compat/compat */
- document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
- // Shows page scrollbar
- document.body.classList.remove('hide-scroll');
- document.body.classList.add('force-scroll');
- }
-
- /**
- * Shows the OSD.
- */
- function showOsd() {
- var bottom = dialog.querySelector('.slideshowBottomBar');
- if (bottom) {
- slideUpToShow(bottom);
- startHideTimer();
- }
- }
-
- /**
- * Hides the OSD.
- */
- function hideOsd() {
- var bottom = dialog.querySelector('.slideshowBottomBar');
- if (bottom) {
- slideDownToHide(bottom);
- }
- }
-
- /**
- * Starts the timer used to automatically hide the OSD.
- */
- function startHideTimer() {
- stopHideTimer();
- hideTimeout = setTimeout(hideOsd, 3000);
- }
-
- /**
- * Stops the timer used to automatically hide the OSD.
- */
- function stopHideTimer() {
- if (hideTimeout) {
- clearTimeout(hideTimeout);
- hideTimeout = null;
- }
- }
-
- /**
- * Shows the OSD by sliding it into view.
- * @param {HTMLElement} element - Element containing the OSD.
- */
- function slideUpToShow(element) {
- if (!element.classList.contains('hide')) {
- return;
- }
-
- element.classList.remove('hide');
-
- var onFinish = function () {
- focusManager.focus(element.querySelector('.btnSlideshowPause'));
- };
-
- if (!element.animate) {
- onFinish();
- return;
- }
-
- requestAnimationFrame(function () {
- var keyframes = [
- { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
- { transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }
- ];
- var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
- element.animate(keyframes, timing).onfinish = onFinish;
- });
- }
-
- /**
- * Hides the OSD by sliding it out of view.
- * @param {HTMLElement} element - Element containing the OSD.
- */
- function slideDownToHide(element) {
- if (element.classList.contains('hide')) {
- return;
- }
-
- var onFinish = function () {
- element.classList.add('hide');
- };
-
- if (!element.animate) {
- onFinish();
- return;
- }
-
- requestAnimationFrame(function () {
- var keyframes = [
- { transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
- { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }
- ];
- var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
- element.animate(keyframes, timing).onfinish = onFinish;
- });
- }
-
- /**
- * Shows the OSD when moving the mouse pointer or touching the screen.
- * @param {Event} event - Pointer movement event.
- */
- function onPointerMove(event) {
- var pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
-
- if (pointerType === 'mouse') {
- var eventX = event.screenX || 0;
- var eventY = event.screenY || 0;
-
- var obj = lastMouseMoveData;
- if (!obj) {
- lastMouseMoveData = {
- x: eventX,
- y: eventY
- };
- return;
- }
-
- // if coord are same, it didn't move
- if (Math.abs(eventX - obj.x) < 10 && Math.abs(eventY - obj.y) < 10) {
- return;
- }
-
- obj.x = eventX;
- obj.y = eventY;
-
- showOsd();
- }
- }
-
- /**
- * Dispatches keyboard inputs to their proper handlers.
- * @param {Event} event - Keyboard input event.
- */
- function onInputCommand(event) {
- switch (event.detail.command) {
- case 'up':
- case 'down':
- case 'select':
- case 'menu':
- case 'info':
- showOsd();
- break;
- case 'play':
- play();
- break;
- case 'pause':
- pause();
- break;
- case 'playpause':
- playPause();
- break;
- default:
- break;
- }
- }
-
- /**
- * Shows the slideshow component.
- */
- self.show = function () {
- createElements(options);
- // Hides page scrollbar
- document.body.classList.remove('force-scroll');
- document.body.classList.add('hide-scroll');
- };
-
- /**
- * Hides the slideshow element.
- */
- self.hide = function () {
- if (dialog) {
+ if (options.interactive && !layoutManager.tv) {
+ dialog.querySelector('.btnSlideshowExit').addEventListener('click', function (e) {
dialogHelper.close(dialog);
+ });
+
+ const btnPause = dialog.querySelector('.btnSlideshowPause');
+ if (btnPause) {
+ btnPause.addEventListener('click', playPause);
}
+
+ const btnDownload = dialog.querySelector('.btnDownload');
+ if (btnDownload) {
+ btnDownload.addEventListener('click', download);
+ }
+
+ const btnShare = dialog.querySelector('.btnShare');
+ if (btnShare) {
+ btnShare.addEventListener('click', share);
+ }
+ }
+
+ setUserScalable(true);
+
+ dialogHelper.open(dialog).then(function () {
+ setUserScalable(false);
+ });
+
+ inputManager.on(window, onInputCommand);
+ /* eslint-disable-next-line compat/compat */
+ document.addEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
+
+ dialog.addEventListener('close', onDialogClosed);
+
+ loadSwiper(dialog, options);
+ }
+
+ /**
+ * Handles OSD changes when the autoplay is started.
+ */
+ function onAutoplayStart() {
+ const btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
+ if (btnSlideshowPause) {
+ btnSlideshowPause.classList.replace('play_arrow', 'pause');
+ }
+ }
+
+ /**
+ * Handles OSD changes when the autoplay is stopped.
+ */
+ function onAutoplayStop() {
+ const btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
+ if (btnSlideshowPause) {
+ btnSlideshowPause.classList.replace('pause', 'play_arrow');
+ }
+ }
+
+ /**
+ * Handles zoom changes.
+ */
+ function onZoomChange(scale, imageEl, slideEl) {
+ const zoomImage = slideEl.querySelector('.swiper-zoom-fakeimg');
+
+ if (zoomImage) {
+ zoomImage.style.width = zoomImage.style.height = scale * 100 + '%';
+
+ if (scale > 1) {
+ if (zoomImage.classList.contains('swiper-zoom-fakeimg-hidden')) {
+ // Await for Swiper style changes
+ setTimeout(() => {
+ const callback = () => {
+ imageEl.removeEventListener(transitionEndEventName, callback);
+ zoomImage.classList.remove('swiper-zoom-fakeimg-hidden');
+ };
+
+ // Swiper set 'transition-duration: 300ms' for auto zoom
+ // and 'transition-duration: 0s' for touch zoom
+ const transitionDuration = parseFloat(imageEl.style.transitionDuration.replace(/[a-z]/i, ''));
+
+ if (transitionDuration > 0) {
+ imageEl.addEventListener(transitionEndEventName, callback);
+ } else {
+ callback();
+ }
+ }, 0);
+ }
+ } else {
+ zoomImage.classList.add('swiper-zoom-fakeimg-hidden');
+ }
+ }
+ }
+
+ /**
+ * Initializes the Swiper instance and binds the relevant events.
+ * @param {HTMLElement} dialog - Element containing the dialog.
+ * @param {Object} options - Options used to initialize the Swiper instance.
+ */
+ function loadSwiper(dialog, options) {
+ let slides;
+ if (currentOptions.slides) {
+ slides = currentOptions.slides;
+ } else {
+ slides = currentOptions.items;
+ }
+
+ import('swiper').then(({default: Swiper}) => {
+ swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), {
+ direction: 'horizontal',
+ // Loop is disabled due to the virtual slides option not supporting it.
+ loop: false,
+ zoom: {
+ minRatio: 1,
+ toggle: true
+ },
+ autoplay: !options.interactive,
+ keyboard: {
+ enabled: true
+ },
+ preloadImages: true,
+ slidesPerView: 1,
+ slidesPerColumn: 1,
+ initialSlide: options.startIndex || 0,
+ speed: 240,
+ navigation: {
+ nextEl: '.btnSlideshowNext',
+ prevEl: '.btnSlideshowPrevious'
+ },
+ // Virtual slides reduce memory consumption for large libraries while allowing preloading of images;
+ virtual: {
+ slides: slides,
+ cache: true,
+ renderSlide: getSwiperSlideHtml,
+ addSlidesBefore: 1,
+ addSlidesAfter: 1
+ }
+ });
+
+ swiperInstance.on('autoplayStart', onAutoplayStart);
+ swiperInstance.on('autoplayStop', onAutoplayStop);
+
+ if (useFakeZoomImage) {
+ swiperInstance.on('zoomChange', onZoomChange);
+ }
+ });
+ }
+
+ /**
+ * Renders the HTML markup of a slide for an item or a slide.
+ * @param {Object} item - The item used to render the slide.
+ * @param {number} index - The index of the item in the Swiper instance.
+ * @returns {string} The HTML markup of the slide.
+ */
+ function getSwiperSlideHtml(item, index) {
+ if (currentOptions.slides) {
+ return getSwiperSlideHtmlFromSlide(item);
+ } else {
+ return getSwiperSlideHtmlFromItem(item);
+ }
+ }
+
+ /**
+ * Renders the HTML markup of a slide for an item.
+ * @param {Object} item - Item used to generate the slide.
+ * @returns {string} The HTML markup of the slide.
+ */
+ function getSwiperSlideHtmlFromItem(item) {
+ return getSwiperSlideHtmlFromSlide({
+ originalImage: getImgUrl(item, currentOptions.user),
+ Id: item.Id,
+ ServerId: item.ServerId
+ });
+ }
+
+ /**
+ * Renders the HTML markup of a slide for a slide object.
+ * @param {Object} item - Slide object used to generate the slide.
+ * @returns {string} The HTML markup of the slide.
+ */
+ function getSwiperSlideHtmlFromSlide(item) {
+ let html = '';
+ html += '';
- if (useFakeZoomImage) {
- html += ``;
- }
- html += '
';
- html += '
';
- if (item.title || item.subtitle) {
- html += '';
- }
- html += '';
+ html += '
';
+
+ return html;
+ }
+
+ /**
+ * Fetches the information of the currently displayed slide.
+ * @returns {null|{itemId: string, shareUrl: string, serverId: string, url: string}} Object containing the information of the currently displayed slide.
+ */
+ function getCurrentImageInfo() {
+ if (swiperInstance) {
+ const slide = document.querySelector('.swiper-slide-active');
+
+ if (slide) {
+ return {
+ url: slide.getAttribute('data-original'),
+ shareUrl: slide.getAttribute('data-original'),
+ itemId: slide.getAttribute('data-itemid'),
+ serverId: slide.getAttribute('data-serverid')
+ };
+ }
+ return null;
+ } else {
+ return null;
+ }
+ }
+
+ /**
+ * Starts a download for the currently displayed slide.
+ */
+ function download() {
+ const imageInfo = getCurrentImageInfo();
+
+ import('fileDownloader').then(({default: fileDownloader}) => {
+ fileDownloader.download([imageInfo]);
+ });
+ }
+
+ /**
+ * Shares the currently displayed slide using the browser's built-in sharing feature.
+ */
+ function share() {
+ const imageInfo = getCurrentImageInfo();
+
+ navigator.share({
+ url: imageInfo.shareUrl
+ });
+ }
+
+ /**
+ * Starts the autoplay feature of the Swiper instance.
+ */
+ function play() {
+ if (swiperInstance.autoplay) {
+ swiperInstance.autoplay.start();
+ }
+ }
+
+ /**
+ * Pauses the autoplay feature of the Swiper instance;
+ */
+ function pause() {
+ if (swiperInstance.autoplay) {
+ swiperInstance.autoplay.stop();
+ }
+ }
+
+ /**
+ * Toggles the autoplay feature of the Swiper instance.
+ */
+ function playPause() {
+ const paused = !dialog.querySelector('.btnSlideshowPause .material-icons').classList.contains('pause');
+ if (paused) {
+ play();
+ } else {
+ pause();
+ }
+ }
+
+ /**
+ * Closes the dialog and destroys the Swiper instance.
+ */
+ function onDialogClosed() {
+ const swiper = swiperInstance;
+ if (swiper) {
+ swiper.destroy(true, true);
+ swiperInstance = null;
+ }
+
+ inputManager.off(window, onInputCommand);
+ /* eslint-disable-next-line compat/compat */
+ document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
+ // Shows page scrollbar
+ document.body.classList.remove('hide-scroll');
+ document.body.classList.add('force-scroll');
+ }
+
+ /**
+ * Shows the OSD.
+ */
+ function showOsd() {
+ const bottom = dialog.querySelector('.slideshowBottomBar');
+ if (bottom) {
+ slideUpToShow(bottom);
+ startHideTimer();
+ }
+ }
+
+ /**
+ * Hides the OSD.
+ */
+ function hideOsd() {
+ const bottom = dialog.querySelector('.slideshowBottomBar');
+ if (bottom) {
+ slideDownToHide(bottom);
+ }
+ }
+
+ /**
+ * Starts the timer used to automatically hide the OSD.
+ */
+ function startHideTimer() {
+ stopHideTimer();
+ hideTimeout = setTimeout(hideOsd, 3000);
+ }
+
+ /**
+ * Stops the timer used to automatically hide the OSD.
+ */
+ function stopHideTimer() {
+ if (hideTimeout) {
+ clearTimeout(hideTimeout);
+ hideTimeout = null;
+ }
+ }
+
+ /**
+ * Shows the OSD by sliding it into view.
+ * @param {HTMLElement} element - Element containing the OSD.
+ */
+ function slideUpToShow(element) {
+ if (!element.classList.contains('hide')) {
+ return;
+ }
+
+ element.classList.remove('hide');
+
+ const onFinish = function () {
+ focusManager.focus(element.querySelector('.btnSlideshowPause'));
};
+
+ if (!element.animate) {
+ onFinish();
+ return;
+ }
+
+ requestAnimationFrame(function () {
+ const keyframes = [
+ { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
+ { transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }
+ ];
+ const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
+ element.animate(keyframes, timing).onfinish = onFinish;
+ });
+ }
+
+ /**
+ * Hides the OSD by sliding it out of view.
+ * @param {HTMLElement} element - Element containing the OSD.
+ */
+ function slideDownToHide(element) {
+ if (element.classList.contains('hide')) {
+ return;
+ }
+
+ const onFinish = function () {
+ element.classList.add('hide');
+ };
+
+ if (!element.animate) {
+ onFinish();
+ return;
+ }
+
+ requestAnimationFrame(function () {
+ const keyframes = [
+ { transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
+ { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }
+ ];
+ const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
+ element.animate(keyframes, timing).onfinish = onFinish;
+ });
+ }
+
+ /**
+ * Shows the OSD when moving the mouse pointer or touching the screen.
+ * @param {Event} event - Pointer movement event.
+ */
+ function onPointerMove(event) {
+ const pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
+
+ if (pointerType === 'mouse') {
+ const eventX = event.screenX || 0;
+ const eventY = event.screenY || 0;
+
+ const obj = lastMouseMoveData;
+ if (!obj) {
+ lastMouseMoveData = {
+ x: eventX,
+ y: eventY
+ };
+ return;
+ }
+
+ // if coord are same, it didn't move
+ if (Math.abs(eventX - obj.x) < 10 && Math.abs(eventY - obj.y) < 10) {
+ return;
+ }
+
+ obj.x = eventX;
+ obj.y = eventY;
+
+ showOsd();
+ }
+ }
+
+ /**
+ * Dispatches keyboard inputs to their proper handlers.
+ * @param {Event} event - Keyboard input event.
+ */
+ function onInputCommand(event) {
+ switch (event.detail.command) {
+ case 'up':
+ case 'down':
+ case 'select':
+ case 'menu':
+ case 'info':
+ showOsd();
+ break;
+ case 'play':
+ play();
+ break;
+ case 'pause':
+ pause();
+ break;
+ case 'playpause':
+ playPause();
+ break;
+ default:
+ break;
+ }
+ }
+
+ /**
+ * Shows the slideshow component.
+ */
+ self.show = function () {
+ createElements(options);
+ // Hides page scrollbar
+ document.body.classList.remove('force-scroll');
+ document.body.classList.add('hide-scroll');
};
-});
+
+ /**
+ * Hides the slideshow element.
+ */
+ self.hide = function () {
+ if (dialog) {
+ dialogHelper.close(dialog);
+ }
+ };
+}
diff --git a/src/components/sortmenu/sortmenu.js b/src/components/sortmenu/sortmenu.js
index f62e5bb3a..d38d98c09 100644
--- a/src/components/sortmenu/sortmenu.js
+++ b/src/components/sortmenu/sortmenu.js
@@ -1,46 +1,51 @@
-define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'globalize', 'userSettings', 'emby-select', 'paper-icon-button-light', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dom, focusManager, dialogHelper, loading, layoutManager, connectionManager, globalize, userSettings) {
- 'use strict';
+import dialogHelper from 'dialogHelper';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import 'emby-select';
+import 'paper-icon-button-light';
+import 'material-icons';
+import 'css!./../formdialog';
+import 'emby-button';
+import 'flexStyles';
- function onSubmit(e) {
- e.preventDefault();
- return false;
- }
+function onSubmit(e) {
+ e.preventDefault();
+ return false;
+}
- function initEditor(context, settings) {
- context.querySelector('form').addEventListener('submit', onSubmit);
+function initEditor(context, settings) {
+ context.querySelector('form').addEventListener('submit', onSubmit);
- context.querySelector('.selectSortOrder').value = settings.sortOrder;
- context.querySelector('.selectSortBy').value = settings.sortBy;
- }
+ context.querySelector('.selectSortOrder').value = settings.sortOrder;
+ context.querySelector('.selectSortBy').value = settings.sortBy;
+}
- function centerFocus(elem, horiz, on) {
- require(['scrollHelper'], function (scrollHelper) {
- var fn = on ? 'on' : 'off';
- scrollHelper.centerFocus[fn](elem, horiz);
- });
- }
+function centerFocus(elem, horiz, on) {
+ import('scrollHelper').then(({default: scrollHelper}) => {
+ const fn = on ? 'on' : 'off';
+ scrollHelper.centerFocus[fn](elem, horiz);
+ });
+}
- function fillSortBy(context, options) {
- var selectSortBy = context.querySelector('.selectSortBy');
+function fillSortBy(context, options) {
+ const selectSortBy = context.querySelector('.selectSortBy');
- selectSortBy.innerHTML = options.map(function (o) {
- return '';
- }).join('');
- }
+ selectSortBy.innerHTML = options.map(function (o) {
+ return '';
+ }).join('');
+}
- function saveValues(context, settings, settingsKey) {
- userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
- userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
- }
+function saveValues(context, settingsKey) {
+ userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
+ userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
+}
- function SortMenu() {
-
- }
-
- SortMenu.prototype.show = function (options) {
+class SortMenu {
+ show(options) {
return new Promise(function (resolve, reject) {
- require(['text!./sortmenu.template.html'], function (template) {
- var dialogOptions = {
+ import('text!./sortmenu.template.html').then(({default: template}) => {
+ const dialogOptions = {
removeOnClose: true,
scrollY: false
};
@@ -51,11 +56,11 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
dialogOptions.size = 'small';
}
- var dlg = dialogHelper.createDialog(dialogOptions);
+ const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
- var html = '';
+ let html = '';
html += '';
+ if (useFakeZoomImage) {
+ html += ``;
+ }
+ html += '';
+ html += '
';
+ if (item.title || item.subtitle) {
+ html += '';
+ }
+ html += '';
html += '';
@@ -78,7 +83,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
centerFocus(dlg.querySelector('.formDialogContent'), false, true);
}
- var submitted;
+ let submitted;
dlg.querySelector('form').addEventListener('change', function () {
submitted = true;
@@ -90,7 +95,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
}
if (submitted) {
- saveValues(dlg, options.settings, options.settingsKey);
+ saveValues(dlg, options.settingsKey);
resolve();
return;
}
@@ -99,7 +104,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
});
});
});
- };
+ }
+}
- return SortMenu;
-});
+export default SortMenu;
diff --git a/src/components/subtitleeditor/subtitleeditor.js b/src/components/subtitleeditor/subtitleeditor.js
index 37f767524..dfd7f9446 100644
--- a/src/components/subtitleeditor/subtitleeditor.js
+++ b/src/components/subtitleeditor/subtitleeditor.js
@@ -1,424 +1,437 @@
-define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', 'connectionManager', 'loading', 'focusManager', 'dom', 'apphost', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'css!./subtitleeditor', 'emby-button', 'flexStyles'], function (dialogHelper, require, layoutManager, globalize, userSettings, connectionManager, loading, focusManager, dom, appHost) {
- 'use strict';
+import dialogHelper from 'dialogHelper';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import connectionManager from 'connectionManager';
+import loading from 'loading';
+import focusManager from 'focusManager';
+import dom from 'dom';
+import 'emby-select';
+import 'listViewStyle';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'material-icons';
+import 'css!./subtitleeditor';
+import 'emby-button';
+import 'flexStyles';
- var currentItem;
- var hasChanges;
+let currentItem;
+let hasChanges;
- function downloadRemoteSubtitles(context, id) {
- var url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
+function downloadRemoteSubtitles(context, id) {
+ let url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
- var apiClient = connectionManager.getApiClient(currentItem.ServerId);
- apiClient.ajax({
+ let apiClient = connectionManager.getApiClient(currentItem.ServerId);
+ apiClient.ajax({
- type: 'POST',
- url: apiClient.getUrl(url)
+ type: 'POST',
+ url: apiClient.getUrl(url)
+
+ }).then(function () {
+ hasChanges = true;
+
+ import('toast').then(({default: toast}) => {
+ toast(globalize.translate('MessageDownloadQueued'));
+ });
+
+ focusManager.autoFocus(context);
+ });
+}
+
+function deleteLocalSubtitle(context, index) {
+ let msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
+
+ import('confirm').then(({default: confirm}) => {
+ confirm({
+
+ title: globalize.translate('ConfirmDeletion'),
+ text: msg,
+ confirmText: globalize.translate('Delete'),
+ primary: 'delete'
}).then(function () {
- hasChanges = true;
+ loading.show();
- require(['toast'], function (toast) {
- toast(globalize.translate('MessageDownloadQueued'));
- });
+ let itemId = currentItem.Id;
+ let url = 'Videos/' + itemId + '/Subtitles/' + index;
- focusManager.autoFocus(context);
- });
- }
+ let apiClient = connectionManager.getApiClient(currentItem.ServerId);
- function deleteLocalSubtitle(context, index) {
- var msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
+ apiClient.ajax({
- require(['confirm'], function (confirm) {
- confirm.default({
-
- title: globalize.translate('ConfirmDeletion'),
- text: msg,
- confirmText: globalize.translate('Delete'),
- primary: 'delete'
+ type: 'DELETE',
+ url: apiClient.getUrl(url)
}).then(function () {
- loading.show();
-
- var itemId = currentItem.Id;
- var url = 'Videos/' + itemId + '/Subtitles/' + index;
-
- var apiClient = connectionManager.getApiClient(currentItem.ServerId);
-
- apiClient.ajax({
-
- type: 'DELETE',
- url: apiClient.getUrl(url)
-
- }).then(function () {
- hasChanges = true;
- reload(context, apiClient, itemId);
- });
+ hasChanges = true;
+ reload(context, apiClient, itemId);
});
});
- }
+ });
+}
- function fillSubtitleList(context, item) {
- var streams = item.MediaStreams || [];
+function fillSubtitleList(context, item) {
+ let streams = item.MediaStreams || [];
- var subs = streams.filter(function (s) {
- return s.Type === 'Subtitle';
- });
+ let subs = streams.filter(function (s) {
+ return s.Type === 'Subtitle';
+ });
- var html = '';
+ let html = '';
- if (subs.length) {
- html += '
';
+ }
+ html += '' + globalize.translate('MySubtitles') + '
'; + if (subs.length) { + html += '' + globalize.translate('MySubtitles') + '
'; - html += '';
+ html += '
';
- }
- html += '';
- html += subs.map(function (s) {
- var itemHtml = '';
+ html += subs.map(function (s) {
+ let itemHtml = '';
- var tagName = layoutManager.tv ? 'button' : 'div';
- var className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border';
+ let tagName = layoutManager.tv ? 'button' : 'div';
+ let className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border';
- if (layoutManager.tv) {
- className += ' listItem-focusscale listItem-button';
- }
-
- className += ' listItem-noborder';
-
- itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';
-
- itemHtml += '';
-
- itemHtml += '
';
- }
-
- var elem = context.querySelector('.subtitleList');
-
- if (subs.length) {
- elem.classList.remove('hide');
- } else {
- elem.classList.add('hide');
- }
- elem.innerHTML = html;
- }
-
- function fillLanguages(context, apiClient, languages) {
- var selectLanguage = context.querySelector('#selectLanguage');
-
- selectLanguage.innerHTML = languages.map(function (l) {
- return '';
- });
-
- var lastLanguage = userSettings.get('subtitleeditor-language');
- if (lastLanguage) {
- selectLanguage.value = lastLanguage;
- } else {
- apiClient.getCurrentUser().then(function (user) {
- var lang = user.Configuration.SubtitleLanguagePreference;
-
- if (lang) {
- selectLanguage.value = lang;
- }
- });
- }
- }
-
- function renderSearchResults(context, results) {
- var lastProvider = '';
- var html = '';
-
- if (!results.length) {
- context.querySelector('.noSearchResults').classList.remove('hide');
- context.querySelector('.subtitleResults').innerHTML = '';
- loading.hide();
- return;
- }
-
- context.querySelector('.noSearchResults').classList.add('hide');
-
- for (var i = 0, length = results.length; i < length; i++) {
- var result = results[i];
-
- var provider = result.ProviderName;
-
- if (provider !== lastProvider) {
- if (i > 0) {
- html += '';
-
- itemHtml += '
';
-
- if (!layoutManager.tv) {
- if (s.Path) {
- itemHtml += '';
- }
- }
-
- itemHtml += '';
-
- return itemHtml;
- }).join('');
-
- html += '';
- itemHtml += s.DisplayTitle || '';
- itemHtml += '
';
-
- if (s.Path) {
- itemHtml += '' + (s.Path) + '
';
- }
-
- itemHtml += '';
- itemHtml += '' + provider + '
'; - html += '';
- lastProvider = provider;
- }
-
- var tagName = layoutManager.tv ? 'button' : 'div';
- var className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
if (layoutManager.tv) {
className += ' listItem-focusscale listItem-button';
}
- html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">';
+ className += ' listItem-noborder';
- html += '';
+ itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';
- var bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
+ itemHtml += '';
- html += '
';
+ }
+
+ let elem = context.querySelector('.subtitleList');
+
+ if (subs.length) {
+ elem.classList.remove('hide');
+ } else {
+ elem.classList.add('hide');
+ }
+ elem.innerHTML = html;
+}
+
+function fillLanguages(context, apiClient, languages) {
+ let selectLanguage = context.querySelector('#selectLanguage');
+
+ selectLanguage.innerHTML = languages.map(function (l) {
+ return '';
+ });
+
+ let lastLanguage = userSettings.get('subtitleeditor-language');
+ if (lastLanguage) {
+ selectLanguage.value = lastLanguage;
+ } else {
+ apiClient.getCurrentUser().then(function (user) {
+ let lang = user.Configuration.SubtitleLanguagePreference;
+
+ if (lang) {
+ selectLanguage.value = lang;
+ }
+ });
+ }
+}
+
+function renderSearchResults(context, results) {
+ let lastProvider = '';
+ let html = '';
+
+ if (!results.length) {
+ context.querySelector('.noSearchResults').classList.remove('hide');
+ context.querySelector('.subtitleResults').innerHTML = '';
+ loading.hide();
+ return;
+ }
+
+ context.querySelector('.noSearchResults').classList.add('hide');
+
+ for (let i = 0, length = results.length; i < length; i++) {
+ let result = results[i];
+
+ let provider = result.ProviderName;
+
+ if (provider !== lastProvider) {
+ if (i > 0) {
+ html += '';
+ itemHtml += '
';
if (!layoutManager.tv) {
- html += '';
+ if (s.Path) {
+ itemHtml += '';
+ }
}
- html += '';
+ itemHtml += '';
+
+ return itemHtml;
+ }).join('');
+
+ html += '';
- html += '';
- }
-
- html += '
';
+ itemHtml += '';
+ itemHtml += '' + (result.Name) + '
';
- html += '';
+ itemHtml += '
';
-
- if (result.Comment) {
- html += '';
+ itemHtml += s.DisplayTitle || '';
+ itemHtml += '
';
- if (result.Format) {
- html += '' + globalize.translate('FormatValue', result.Format) + '';
+ if (s.Path) {
+ itemHtml += '' + (s.Path) + '
';
}
- if (result.DownloadCount != null) {
- html += '' + globalize.translate('DownloadsValue', result.DownloadCount) + '';
- }
- html += '' + (result.Comment) + '
';
- }
-
- if (result.IsHashMatch) {
- html += '' + globalize.translate('PerfectMatch') + '
' + provider + '
'; + html += '';
+ lastProvider = provider;
}
- if (results.length) {
- html += '
';
+ let tagName = layoutManager.tv ? 'button' : 'div';
+ let className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
+ if (layoutManager.tv) {
+ className += ' listItem-focusscale listItem-button';
}
- var elem = context.querySelector('.subtitleResults');
- elem.innerHTML = html;
+ html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">';
+
+ html += '';
+
+ let bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
+
+ html += '';
+
+ html += '';
+ }
+
+ html += '
';
+
+ if (!layoutManager.tv) {
+ html += '';
+ }
+
+ html += '';
+ }
+
+ if (results.length) {
+ html += '' + (result.Name) + '
';
+ html += '';
+
+ if (result.Format) {
+ html += '' + globalize.translate('FormatValue', result.Format) + '';
+ }
+
+ if (result.DownloadCount != null) {
+ html += '' + globalize.translate('DownloadsValue', result.DownloadCount) + '';
+ }
+ html += '
';
+
+ if (result.Comment) {
+ html += '' + (result.Comment) + '
';
+ }
+
+ if (result.IsHashMatch) {
+ html += '' + globalize.translate('PerfectMatch') + '
+
+
+
+
+ ${HeaderSubtitleAppearance}
+
+ ${TheseSettingsAffectSubtitlesOnThisDevice} +
+ + ${TheseSettingsAffectSubtitlesOnThisDevice} +
@@ -89,6 +99,20 @@
+
+
+
+
+
+
-
+
-
+
';
- var enabledTuners = providerInfo.EnabledTuners || [];
- var isChecked = providerInfo.EnableAllTuners || -1 !== enabledTuners.indexOf(device.Id);
- var checkedAttribute = isChecked ? ' checked' : '';
- html += '';
- html += '
';
- }
-
- page.querySelector('.tunerList').innerHTML = html;
- }
-
- function onSelectPathClick(e) {
- var page = $(e.target).parents('.xmltvForm')[0];
-
- require(['directorybrowser'], function (directoryBrowser) {
- var picker = new directoryBrowser.default();
- picker.show({
- includeFiles: true,
- callback: function (path) {
- if (path) {
- var txtPath = page.querySelector('.txtPath');
- txtPath.value = path;
- txtPath.focus();
- }
- picker.close();
- }
- });
- });
- }
-
- var self = this;
-
- self.submit = function () {
- page.querySelector('.btnSubmitListings').click();
- };
-
- self.init = function () {
- options = options || {};
-
- // Only hide the buttons if explicitly set to false; default to showing if undefined or null
- // FIXME: rename this option to clarify logic
- var hideCancelButton = options.showCancelButton === false;
- page.querySelector('.btnCancel').classList.toggle('hide', hideCancelButton);
-
- var hideSubmitButton = options.showSubmitButton === false;
- page.querySelector('.btnSubmitListings').classList.toggle('hide', hideSubmitButton);
-
- $('form', page).on('submit', function () {
- submitListingsForm();
- return false;
- });
- page.querySelector('#btnSelectPath').addEventListener('click', onSelectPathClick);
- page.querySelector('.chkAllTuners').addEventListener('change', function (evt) {
- if (evt.target.checked) {
+ if (page.querySelector('.chkAllTuners').checked) {
page.querySelector('.selectTunersSection').classList.add('hide');
} else {
page.querySelector('.selectTunersSection').classList.remove('hide');
}
+
+ refreshTunerDevices(page, info, config.TunerHosts);
+ loading.hide();
});
- reload();
- };
+ });
+ }
+
+ function getCategories(txtInput) {
+ const value = txtInput.value;
+
+ if (value) {
+ return value.split('|');
+ }
+
+ return [];
+ }
+
+ function submitListingsForm() {
+ loading.show();
+ const id = providerId;
+ ApiClient.getNamedConfiguration('livetv').then(function (config) {
+ const info = config.ListingProviders.filter(function (provider) {
+ return provider.Id === id;
+ })[0] || {};
+ info.Type = 'xmltv';
+ info.Path = page.querySelector('.txtPath').value;
+ info.MoviePrefix = page.querySelector('.txtMoviePrefix').value || null;
+ info.UserAgent = page.querySelector('.txtUserAgent').value || null;
+ info.MovieCategories = getCategories(page.querySelector('.txtMovies'));
+ info.KidsCategories = getCategories(page.querySelector('.txtKids'));
+ info.NewsCategories = getCategories(page.querySelector('.txtNews'));
+ info.SportsCategories = getCategories(page.querySelector('.txtSports'));
+ info.EnableAllTuners = page.querySelector('.chkAllTuners').checked;
+ info.EnabledTuners = info.EnableAllTuners ? [] : $('.chkTuner', page).get().filter(function (tuner) {
+ return tuner.checked;
+ }).map(function (tuner) {
+ return tuner.getAttribute('data-id');
+ });
+ ApiClient.ajax({
+ type: 'POST',
+ url: ApiClient.getUrl('LiveTv/ListingProviders', {
+ ValidateListings: true
+ }),
+ data: JSON.stringify(info),
+ contentType: 'application/json'
+ }).then(function (result) {
+ loading.hide();
+
+ if (options.showConfirmation !== false) {
+ Dashboard.processServerConfigurationUpdateResult();
+ }
+
+ Events.trigger(self, 'submitted');
+ }, function () {
+ loading.hide();
+ Dashboard.alert({
+ message: globalize.translate('ErrorAddingXmlTvFile')
+ });
+ });
+ });
+ }
+
+ function getTunerName(providerId) {
+ switch (providerId = providerId.toLowerCase()) {
+ case 'm3u':
+ return 'M3U Playlist';
+ case 'hdhomerun':
+ return 'HDHomerun';
+ case 'satip':
+ return 'DVB';
+ default:
+ return 'Unknown';
+ }
+ }
+
+ function refreshTunerDevices(page, providerInfo, devices) {
+ let html = '';
+
+ for (let i = 0, length = devices.length; i < length; i++) {
+ const device = devices[i];
+ html += '';
- html += '
';
- html += '';
- html += device.FriendlyName || getTunerName(device.Type);
- html += '
';
- html += '';
- html += device.Url;
- html += '
';
- html += '';
+ const enabledTuners = providerInfo.EnabledTuners || [];
+ const isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) !== -1;
+ const checkedAttribute = isChecked ? ' checked' : '';
+ html += '';
+ html += '
';
+ }
+
+ page.querySelector('.tunerList').innerHTML = html;
+ }
+
+ function onSelectPathClick(e) {
+ const page = $(e.target).parents('.xmltvForm')[0];
+
+ import('directorybrowser').then(({default: directoryBrowser}) => {
+ const picker = new directoryBrowser();
+ picker.show({
+ includeFiles: true,
+ callback: function (path) {
+ if (path) {
+ const txtPath = page.querySelector('.txtPath');
+ txtPath.value = path;
+ txtPath.focus();
+ }
+ picker.close();
+ }
+ });
+ });
+ }
+
+ const self = this;
+
+ self.submit = function () {
+ page.querySelector('.btnSubmitListings').click();
};
-});
+
+ self.init = function () {
+ options = options || {};
+
+ // Only hide the buttons if explicitly set to false; default to showing if undefined or null
+ // FIXME: rename this option to clarify logic
+ const hideCancelButton = options.showCancelButton === false;
+ page.querySelector('.btnCancel').classList.toggle('hide', hideCancelButton);
+
+ const hideSubmitButton = options.showSubmitButton === false;
+ page.querySelector('.btnSubmitListings').classList.toggle('hide', hideSubmitButton);
+
+ $('form', page).on('submit', function () {
+ submitListingsForm();
+ return false;
+ });
+ page.querySelector('#btnSelectPath').addEventListener('click', onSelectPathClick);
+ page.querySelector('.chkAllTuners').addEventListener('change', function (evt) {
+ if (evt.target.checked) {
+ page.querySelector('.selectTunersSection').classList.add('hide');
+ } else {
+ page.querySelector('.selectTunersSection').classList.remove('hide');
+ }
+ });
+ reload();
+ };
+}
diff --git a/src/components/tvproviders/xmltv.template.html b/src/components/tvproviders/xmltv.template.html
index 72c29904b..010e66ea0 100644
--- a/src/components/tvproviders/xmltv.template.html
+++ b/src/components/tvproviders/xmltv.template.html
@@ -56,7 +56,7 @@
';
+ html += '
';
+ html += '';
+ html += device.FriendlyName || getTunerName(device.Type);
+ html += '
';
+ html += '';
+ html += device.Url;
+ html += '
';
+ html += '