mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
parent
59b4199fc0
commit
8144b83f54
44 changed files with 413 additions and 355 deletions
|
@ -1,80 +1,130 @@
|
|||
define(['dialogHelper', 'loading', 'connectionManager', 'globalize', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'emby-button', 'listViewStyle'],
|
||||
function (dialogHelper, loading, connectionManager, globalize) {
|
||||
define(['dialogHelper', 'loading', 'connectionManager', 'globalize', 'actionsheet', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'emby-button', 'listViewStyle', 'material-icons'],
|
||||
function (dialogHelper, loading, connectionManager, globalize, actionsheet) {
|
||||
|
||||
var currentServerId;
|
||||
|
||||
function getChannelMappingOptions(serverId, providerId) {
|
||||
|
||||
return connectionManager.getApiClient(serverId).getJSON(ApiClient.getUrl('LiveTv/ChannelMappingOptions', {
|
||||
providerId: providerId
|
||||
}));
|
||||
}
|
||||
|
||||
function getTunerChannelHtml(channel, providerName) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<div class="listItem">';
|
||||
|
||||
html += '<button is="emby-button" type="button" class="fab listItemIcon mini" style="background:#52B54B;"><iron-icon icon="dvr"></iron-icon></button>';
|
||||
|
||||
html += '<div class="listItemBody">';
|
||||
html += '<h3>';
|
||||
html += channel.Name;
|
||||
html += '</h3>';
|
||||
|
||||
if (channel.ProviderChannelNumber || channel.ProviderChannelName) {
|
||||
html += '<div class="secondary">';
|
||||
html += (channel.ProviderChannelNumber || '') + ' ' + (channel.ProviderChannelName || '') + ' - ' + providerName;
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '<button is="paper-icon-button-light" type="button" onclick="alert(\'coming soon.\');"><iron-icon icon="mode-edit"></iron-icon></button>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function getEditorHtml() {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<div class="dialogContent">';
|
||||
html += '<div class="dialogContentInner centeredContent">';
|
||||
html += '<form style="margin:auto;">';
|
||||
|
||||
html += '<h1>' + globalize.translate('HeaderChannels') + '</h1>';
|
||||
|
||||
html += '<div class="channels paperList">';
|
||||
html += '</div>';
|
||||
|
||||
html += '</form>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function initEditor(dlg, options) {
|
||||
|
||||
getChannelMappingOptions(options.serverId, options.providerId).then(function (result) {
|
||||
|
||||
dlg.querySelector('.channels').innerHTML = result.TunerChannels.map(function (channel) {
|
||||
return getTunerChannelHtml(channel, result.ProviderName);
|
||||
}).join('');
|
||||
});
|
||||
}
|
||||
|
||||
return function () {
|
||||
return function (options) {
|
||||
|
||||
var self = this;
|
||||
|
||||
self.show = function (options) {
|
||||
var currentMappingOptions;
|
||||
|
||||
currentServerId = options.serverId;
|
||||
function parentWithClass(elem, className) {
|
||||
|
||||
while (!elem.classList || !elem.classList.contains(className)) {
|
||||
elem = elem.parentNode;
|
||||
|
||||
if (!elem) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
function mapChannel(tunerChannelNumber, providerChannelNumber) {
|
||||
|
||||
alert('coming soon.');
|
||||
}
|
||||
|
||||
function onChannelsElementClick(e) {
|
||||
|
||||
var btnMap = parentWithClass(e.target, 'btnMap');
|
||||
|
||||
if (!btnMap) {
|
||||
return;
|
||||
}
|
||||
|
||||
var channelNumber = btnMap.getAttribute('data-number');
|
||||
|
||||
var menuItems = currentMappingOptions.ProviderChannels.map(function (m) {
|
||||
|
||||
return {
|
||||
name: m.Name,
|
||||
id: m.Id,
|
||||
selected: m.Id == channelNumber
|
||||
};
|
||||
});
|
||||
|
||||
actionsheet.show({
|
||||
positionTo: btnMap,
|
||||
items: menuItems
|
||||
|
||||
}).then(function (newChannelNumber) {
|
||||
mapChannel(channelNumber, newChannelNumber);
|
||||
});
|
||||
}
|
||||
|
||||
function getChannelMappingOptions(serverId, providerId) {
|
||||
|
||||
return connectionManager.getApiClient(serverId).getJSON(ApiClient.getUrl('LiveTv/ChannelMappingOptions', {
|
||||
providerId: providerId
|
||||
}));
|
||||
}
|
||||
|
||||
function getTunerChannelHtml(channel, providerName) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<div class="listItem">';
|
||||
|
||||
html += '<button is="emby-button" type="button" class="fab listItemIcon mini" style="background:#52B54B;"><iron-icon icon="dvr"></iron-icon></button>';
|
||||
|
||||
html += '<div class="listItemBody">';
|
||||
html += '<h3>';
|
||||
html += channel.Name;
|
||||
html += '</h3>';
|
||||
|
||||
if (channel.ProviderChannelNumber || channel.ProviderChannelName) {
|
||||
html += '<div class="secondary">';
|
||||
html += (channel.ProviderChannelNumber || '') + ' ' + (channel.ProviderChannelName || '') + ' - ' + providerName;
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '<button class="btnMap" is="paper-icon-button-light" type="button" data-number="' + channel.Number + '"><iron-icon icon="mode-edit"></iron-icon></button>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function getEditorHtml() {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<div class="dialogContent">';
|
||||
html += '<div class="dialogContentInner centeredContent">';
|
||||
html += '<form style="margin:auto;">';
|
||||
|
||||
html += '<h1>' + globalize.translate('HeaderChannels') + '</h1>';
|
||||
|
||||
html += '<div class="channels paperList">';
|
||||
html += '</div>';
|
||||
|
||||
html += '</form>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function initEditor(dlg, options) {
|
||||
|
||||
getChannelMappingOptions(options.serverId, options.providerId).then(function (result) {
|
||||
|
||||
currentMappingOptions = result;
|
||||
|
||||
var channelsElement = dlg.querySelector('.channels');
|
||||
|
||||
channelsElement.innerHTML = result.TunerChannels.map(function (channel) {
|
||||
return getTunerChannelHtml(channel, result.ProviderName);
|
||||
}).join('');
|
||||
|
||||
channelsElement.addEventListener('click', onChannelsElementClick);
|
||||
});
|
||||
}
|
||||
|
||||
self.show = function () {
|
||||
|
||||
var dialogOptions = {
|
||||
removeOnClose: true
|
||||
|
@ -92,7 +142,7 @@ function (dialogHelper, loading, connectionManager, globalize) {
|
|||
var title = globalize.translate('MapChannels');
|
||||
|
||||
html += '<div class="dialogHeader" style="margin:0 0 2em;">';
|
||||
html += '<button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="nav:arrow-back"></iron-icon></button>';
|
||||
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
|
||||
html += '<div class="dialogHeaderTitle">';
|
||||
html += title;
|
||||
html += '</div>';
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue