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

Migration of tunerPicker to ES6 modules

Browse source
This commit is contained in:
Cameron 2020-08-07 08:19:47 +01:00
parent 949c60b9ae
commit e0b56a2e95
2 changed files with 168 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -172,6 +172,7 @@
"src/components/tvproviders/schedulesdirect.js", "src/components/tvproviders/schedulesdirect.js",
"src/components/tvproviders/xmltv.js", "src/components/tvproviders/xmltv.js",
"src/components/toast/toast.js", "src/components/toast/toast.js",
"src/components/tunerPicker.js",
"src/components/upnextdialog/upnextdialog.js", "src/components/upnextdialog/upnextdialog.js",
"src/components/viewContainer.js", "src/components/viewContainer.js",
"src/components/castSenderApi.js", "src/components/castSenderApi.js",

325
src/components/tunerPicker.js
View file

@ -1,181 +1,190 @@
define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize', 'loading', 'browser', 'focusManager', 'scrollHelper', 'material-icons', 'formDialogStyle', 'emby-button', 'emby-itemscontainer', 'cardStyle'], function (dialogHelper, dom, layoutManager, connectionManager, globalize, loading, browser, focusManager, scrollHelper) { import dialogHelper from 'dialogHelper';
'use strict'; import dom from 'dom';
import layoutManager from 'layoutManager';
import connectionManager from 'connectionManager';
import globalize from 'globalize';
import loading from 'loading';
import browser from 'browser';
import focusManager from 'focusManager';
import scrollHelper from 'scrollHelper';
import 'material-icons';
import 'formDialogStyle';
import 'emby-button';
import 'emby-itemscontainer';
import 'cardStyle';
browser = browser.default || browser; /*eslint prefer-const: "error"*/
loading = loading.default || loading;
focusManager = focusManager.default || focusManager;
var enableFocusTransform = !browser.slow && !browser.edge; const enableFocusTransform = !browser.slow && !browser.edge;
function getEditorHtml() { function getEditorHtml() {
var html = ''; let html = '';
html += '<div class="formDialogContent scrollY">'; html += '<div class="formDialogContent scrollY">';
html += '<div class="dialogContentInner dialog-content-centered">'; html += '<div class="dialogContentInner dialog-content-centered">';
html += '<div class="loadingContent hide">'; html += '<div class="loadingContent hide">';
html += '<h1>' + globalize.translate('DetectingDevices') + '...</h1>'; html += '<h1>' + globalize.translate('DetectingDevices') + '...</h1>';
html += '<p>' + globalize.translate('MessagePleaseWait') + '</p>'; html += '<p>' + globalize.translate('MessagePleaseWait') + '</p>';
html += '</div>'; html += '</div>';
html += '<h1 style="margin-bottom:.25em;" class="devicesHeader hide">' + globalize.translate('HeaderNewDevices') + '</h1>'; html += '<h1 style="margin-bottom:.25em;" class="devicesHeader hide">' + globalize.translate('HeaderNewDevices') + '</h1>';
html += '<div is="emby-itemscontainer" class="results vertical-wrap">'; html += '<div is="emby-itemscontainer" class="results vertical-wrap">';
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
return html += '</div>'; return html += '</div>';
} }
function getDeviceHtml(device) { function getDeviceHtml(device) {
var padderClass; let html = '';
var html = ''; let cssClass = 'card scalableCard';
var cssClass = 'card scalableCard'; const cardBoxCssClass = 'cardBox visualCardBox';
var cardBoxCssClass = 'cardBox visualCardBox'; cssClass += ' backdropCard backdropCard-scalable';
cssClass += ' backdropCard backdropCard-scalable'; const padderClass = 'cardPadder-backdrop';
padderClass = 'cardPadder-backdrop';
// TODO move card creation code to Card component // TODO move card creation code to Card component
if (layoutManager.tv) { if (layoutManager.tv) {
cssClass += ' show-focus'; cssClass += ' show-focus';
if (enableFocusTransform) { if (enableFocusTransform) {
cssClass += ' show-animation'; cssClass += ' show-animation';
}
}
html += '<button type="button" class="' + cssClass + '" data-id="' + device.DeviceId + '" style="min-width:33.3333%;">';
html += '<div class="' + cardBoxCssClass + '">';
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="' + padderClass + '"></div>';
html += '<div class="cardContent searchImage">';
html += '<div class="cardImageContainer coveredImage"><span class="cardImageIcon material-icons dvr"></span></div>';
html += '</div>';
html += '</div>';
html += '<div class="cardFooter visualCardBox-cardFooter">';
html += '<div class="cardText cardTextCentered">' + getTunerName(device.Type) + '</div>';
html += '<div class="cardText cardTextCentered cardText-secondary">' + device.FriendlyName + '</div>';
html += '<div class="cardText cardText-secondary cardTextCentered">';
html += device.Url || '&nbsp;';
html += '</div>';
html += '</div>';
html += '</div>';
return html += '</button>';
}
function getTunerName(providerId) {
switch (providerId = providerId.toLowerCase()) {
case 'm3u':
return 'M3U';
case 'hdhomerun':
return 'HDHomerun';
case 'hauppauge':
return 'Hauppauge';
case 'satip':
return 'DVB';
default:
return 'Unknown';
} }
} }
function renderDevices(view, devices) { html += '<button type="button" class="' + cssClass + '" data-id="' + device.DeviceId + '" style="min-width:33.3333%;">';
var i; html += '<div class="' + cardBoxCssClass + '">';
var length; html += '<div class="cardScalable visualCardBox-cardScalable">';
var html = ''; html += '<div class="' + padderClass + '"></div>';
html += '<div class="cardContent searchImage">';
html += '<div class="cardImageContainer coveredImage"><span class="cardImageIcon material-icons dvr"></span></div>';
html += '</div>';
html += '</div>';
html += '<div class="cardFooter visualCardBox-cardFooter">';
html += '<div class="cardText cardTextCentered">' + getTunerName(device.Type) + '</div>';
html += '<div class="cardText cardTextCentered cardText-secondary">' + device.FriendlyName + '</div>';
html += '<div class="cardText cardText-secondary cardTextCentered">';
html += device.Url || '&nbsp;';
html += '</div>';
html += '</div>';
html += '</div>';
return html += '</button>';
}
for (i = 0, length = devices.length; i < length; i++) { function getTunerName(providerId) {
html += getDeviceHtml(devices[i]); switch (providerId = providerId.toLowerCase()) {
} case 'm3u':
return 'M3U';
if (devices.length) { case 'hdhomerun':
view.querySelector('.devicesHeader').classList.remove('hide'); return 'HDHomerun';
} else {
html = '<p><br/>' + globalize.translate('NoNewDevicesFound') + '</p>';
view.querySelector('.devicesHeader').classList.add('hide');
}
var elem = view.querySelector('.results'); case 'hauppauge':
elem.innerHTML = html; return 'Hauppauge';
if (layoutManager.tv) { case 'satip':
focusManager.autoFocus(elem); return 'DVB';
}
default:
return 'Unknown';
}
}
function renderDevices(view, devices) {
let i;
let length;
let html = '';
for (i = 0, length = devices.length; i < length; i++) {
html += getDeviceHtml(devices[i]);
} }
function discoverDevices(view, apiClient) { if (devices.length) {
loading.show(); view.querySelector('.devicesHeader').classList.remove('hide');
view.querySelector('.loadingContent').classList.remove('hide'); } else {
return ApiClient.getJSON(ApiClient.getUrl('LiveTv/Tuners/Discvover', { html = '<p><br/>' + globalize.translate('NoNewDevicesFound') + '</p>';
NewDevicesOnly: true view.querySelector('.devicesHeader').classList.add('hide');
})).then(function (devices) {
currentDevices = devices;
renderDevices(view, devices);
view.querySelector('.loadingContent').classList.add('hide');
loading.hide();
});
} }
function tunerPicker() { const elem = view.querySelector('.results');
this.show = function (options) { elem.innerHTML = html;
var dialogOptions = {
removeOnClose: true,
scrollY: false
};
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; focusManager.autoFocus(elem);
} else { }
dialogOptions.size = 'small'; }
}
var dlg = dialogHelper.createDialog(dialogOptions); function discoverDevices(view, apiClient) {
dlg.classList.add('formDialog'); loading.show();
var html = ''; view.querySelector('.loadingContent').classList.remove('hide');
html += '<div class="formDialogHeader">'; return ApiClient.getJSON(ApiClient.getUrl('LiveTv/Tuners/Discvover', {
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>'; NewDevicesOnly: true
html += '<h3 class="formDialogHeaderTitle">'; })).then(function (devices) {
html += globalize.translate('HeaderLiveTvTunerSetup'); currentDevices = devices;
html += '</h3>'; renderDevices(view, devices);
html += '</div>'; view.querySelector('.loadingContent').classList.add('hide');
html += getEditorHtml(); loading.hide();
dlg.innerHTML = html; });
dlg.querySelector('.btnCancel').addEventListener('click', function () { }
dialogHelper.close(dlg);
});
var deviceResult;
dlg.querySelector('.results').addEventListener('click', function (e) {
var tunerCard = dom.parentWithClass(e.target, 'card');
if (tunerCard) { function tunerPicker() {
var deviceId = tunerCard.getAttribute('data-id'); this.show = function (options) {
deviceResult = currentDevices.filter(function (d) { const dialogOptions = {
return d.DeviceId === deviceId; removeOnClose: true,
})[0]; scrollY: false
dialogHelper.close(dlg);
}
});
if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
}
var apiClient = connectionManager.getApiClient(options.serverId);
discoverDevices(dlg, apiClient);
if (layoutManager.tv) {
scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
}
return dialogHelper.open(dlg).then(function () {
if (deviceResult) {
return Promise.resolve(deviceResult);
}
return Promise.reject();
});
}; };
}
var currentDevices = []; if (layoutManager.tv) {
return tunerPicker; dialogOptions.size = 'fullscreen';
}); } else {
dialogOptions.size = 'small';
}
const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
let html = '';
html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">';
html += globalize.translate('HeaderLiveTvTunerSetup');
html += '</h3>';
html += '</div>';
html += getEditorHtml();
dlg.innerHTML = html;
dlg.querySelector('.btnCancel').addEventListener('click', function () {
dialogHelper.close(dlg);
});
let deviceResult;
dlg.querySelector('.results').addEventListener('click', function (e) {
const tunerCard = dom.parentWithClass(e.target, 'card');
if (tunerCard) {
const deviceId = tunerCard.getAttribute('data-id');
deviceResult = currentDevices.filter(function (d) {
return d.DeviceId === deviceId;
})[0];
dialogHelper.close(dlg);
}
});
if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
}
const apiClient = connectionManager.getApiClient(options.serverId);
discoverDevices(dlg, apiClient);
if (layoutManager.tv) {
scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
}
return dialogHelper.open(dlg).then(function () {
if (deviceResult) {
return Promise.resolve(deviceResult);
}
return Promise.reject();
});
};
}
let currentDevices = [];
export default tunerPicker;