mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #1750 from Camc314/migrate-to-ES6-60
Migration of recordingbutton and recordingcreator to ES6 modules
This commit is contained in:
Bond-009
GitHub
commit
2e08dd7d0f
3 changed files with 242 additions and 223 deletions
|
|
@ -157,6 +157,8 @@
|
|||
"src/components/playlisteditor/playlisteditor.js",
|
||||
"src/components/playmenu.js",
|
||||
"src/components/prompt/prompt.js",
|
||||
"src/components/recordingcreator/recordingbutton.js",
|
||||
"src/components/recordingcreator/recordingcreator.js",
|
||||
"src/components/recordingcreator/seriesrecordingeditor.js",
|
||||
"src/components/recordingcreator/recordinghelper.js",
|
||||
"src/components/refreshdialog/refreshdialog.js",
|
||||
|
|
|
|||
|
|
@ -1,37 +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';
|
||||
|
||||
recordingHelper = recordingHelper.default || recordingHelper;
|
||||
function onRecordingButtonClick(e) {
|
||||
const item = this.item;
|
||||
|
||||
function onRecordingButtonClick(e) {
|
||||
var item = this.item;
|
||||
if (item) {
|
||||
const serverId = item.ServerId;
|
||||
const programId = item.Id;
|
||||
const timerId = item.TimerId;
|
||||
const timerStatus = item.Status;
|
||||
const seriesTimerId = item.SeriesTimerId;
|
||||
|
||||
if (item) {
|
||||
var serverId = item.ServerId;
|
||||
var programId = item.Id;
|
||||
var timerId = item.TimerId;
|
||||
var timerStatus = item.Status;
|
||||
var seriesTimerId = item.SeriesTimerId;
|
||||
const instance = this;
|
||||
|
||||
var 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');
|
||||
|
||||
|
|
@ -41,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, {
|
||||
|
|
@ -49,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));
|
||||
|
||||
|
|
@ -90,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, {
|
||||
|
|
@ -109,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;
|
||||
|
|
|
|||
|
|
@ -1,190 +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';
|
||||
|
||||
layoutManager = layoutManager.default || layoutManager;
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
let currentDialog;
|
||||
let closeAction;
|
||||
let currentRecordingFields;
|
||||
|
||||
var currentDialog;
|
||||
var closeAction;
|
||||
var 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 = '<img src="' + require.toUrl('.').split('?')[0] + '/empty.png" data-src="' + imgUrl + '" class="recordingDialog-img lazy" />';
|
||||
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 = '<img src="' + require.toUrl('.').split('?')[0] + '/empty.png" data-src="' + imgUrl + '" class="recordingDialog-img lazy" />';
|
||||
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.default.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
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue