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

Merge remote-tracking branch 'upstream/master' into sorted-media-sources

Browse source
This commit is contained in:
DesertCookie 2020-09-02 20:39:02 +02:00
commit bf05ee9579
535 changed files with 43589 additions and 46721 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/controllers/dashboard/apikeys.html Normal file
View file

@ -0,0 +1,26 @@
<div id="apiKeysPage" data-role="page" class="page type-interior advancedConfigurationPage fullWidthContent">
<div>
<div class="content-primary">
<div class="detailSectionHeader">
<h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">${HeaderApiKeys}</h2>
<button is="emby-button" type="button" class="fab btnNewKey submit" style="margin-left:1em;" title="${Add}">
<span class="material-icons add" aria-hidden="true"></span>
</button>
</div>
<p>${HeaderApiKeysHelp}</p>
<br />
<table class="tblApiKeys detailTable">
<caption class="clipForScreenReader">${ApiKeysCaption}</caption>
<thead>
<tr>
<th scope="col" class="detailTableHeaderCell"></th>
<th scope="col" class="detailTableHeaderCell">${HeaderApiKey}</th>
<th scope="col" class="detailTableHeaderCell">${HeaderApp}</th>
<th scope="col" class="detailTableHeaderCell">${HeaderDateIssued}</th>
</tr>
</thead>
<tbody class="resultBody"></tbody>
</table>
</div>
</div>
</div>

26
src/controllers/dashboard/apikeys.js
View file

@ -1,8 +1,13 @@
define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button'], function (datetime, loading, libraryMenu, dom, globalize) {
'use strict';
import datetime from 'datetime';
import loading from 'loading';
import dom from 'dom';
import globalize from 'globalize';
import 'emby-button';
/* eslint-disable indent */
function revoke(page, key) {
require(['confirm'], function (confirm) {
import('confirm').then(({default: confirm}) => {
confirm(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () {
loading.show();
ApiClient.ajax({
@ -16,8 +21,8 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
}
function renderKeys(page, keys) {
var rows = keys.map(function (item) {
var html = '';
const rows = keys.map(function (item) {
let html = '';
html += '<tr class="detailTableBodyRow detailTableBodyRow-shaded">';
html += '<td class="detailTableBodyCell">';
html += '<button type="button" is="emby-button" data-token="' + item.AccessToken + '" class="raised raised-mini btnRevoke" data-mini="true" title="' + globalize.translate('ButtonRevoke') + '" style="margin:0;">' + globalize.translate('ButtonRevoke') + '</button>';
@ -29,7 +34,7 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
html += item.AppName || '';
html += '</td>';
html += '<td class="detailTableBodyCell" style="vertical-align:middle;">';
var date = datetime.parseISO8601Date(item.DateCreated, true);
const date = datetime.parseISO8601Date(item.DateCreated, true);
html += datetime.toLocaleDateString(date) + ' ' + datetime.getDisplayTime(date);
html += '</td>';
return html += '</tr>';
@ -46,7 +51,7 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
}
function showNewKeyPrompt(page) {
require(['prompt'], function (prompt) {
import('prompt').then(({default: prompt}) => {
prompt({
title: globalize.translate('HeaderNewApiKey'),
label: globalize.translate('LabelAppName'),
@ -65,12 +70,12 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
}
pageIdOn('pageinit', 'apiKeysPage', function () {
var page = this;
const page = this;
page.querySelector('.btnNewKey').addEventListener('click', function () {
showNewKeyPrompt(page);
});
page.querySelector('.tblApiKeys').addEventListener('click', function (e) {
var btnRevoke = dom.parentWithClass(e.target, 'btnRevoke');
const btnRevoke = dom.parentWithClass(e.target, 'btnRevoke');
if (btnRevoke) {
revoke(page, btnRevoke.getAttribute('data-token'));
@ -80,4 +85,5 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
pageIdOn('pagebeforeshow', 'apiKeysPage', function () {
loadData(this);
});
});
/* eslint-enable indent */

119
src/controllers/dashboard/dashboard.html Normal file
View file

@ -0,0 +1,119 @@
<div id="dashboardPage" data-role="page" class="page type-interior dashboardHomePage fullWidthContent">
<div class="content-primary">
<div class="dashboardSections" style="padding-top:.5em;">
<div class="dashboardColumn dashboardColumn-2-60 dashboardColumn-3-46">
<div class="dashboardSection">
<a is="emby-linkbutton" href="dashboardgeneral.html" class="button-flat sectionTitleTextButton">
<h3>${TabServer}</h3>
<span class="material-icons chevron_right"></span>
</a>
<div class="paperList" style="padding: 1em;">
<p id="serverName"></p>
<p id="versionNumber"></p>
<p id="operatingSystem"></p>
<p id="architecture"></p>
</div>
<div style="margin-top:1em;">
<button is="emby-button" type="button" id="btnRestartServer" class="raised" onclick="DashboardPage.restart(this);" style="margin-left:0;">
<span>${Restart}</span>
</button>
<button is="emby-button" type="button" id="btnShutdown" class="raised" onclick="DashboardPage.shutdown(this);">
<span>${ButtonShutdown}</span>
</button>
</div>
<div style="margin-top: 2em;" class="runningTasksContainer hide">
<h3>${HeaderRunningTasks}</h3>
<div id="divRunningTasks" class="paperList" style="padding: 1em;">
</div>
</div>
</div>
<div class="dashboardSection">
<a is="emby-linkbutton" href="devices.html" class="button-flat sectionTitleTextButton">
<h3>${HeaderActiveDevices}</h3>
<span class="material-icons chevron_right"></span>
</a>
<div class="activeDevices itemsContainer vertical-wrap">
</div>
</div>
</div>
<div class="dashboardColumn dashboardColumn-2-40 dashboardColumn-3-27">
<div class="dashboardSection">
<a is="emby-linkbutton" href="serveractivity.html?useractivity=true" class="button-flat sectionTitleTextButton">
<h3>${HeaderActivity}</h3>
<span class="material-icons chevron_right"></span>
</a>
<div class="paperList userActivityItems" data-activitylimit="7" data-useractivity="true">
</div>
</div>
</div>
<div class="dashboardColumn dashboardColumn-3-27">
<div class="dashboardSection activeRecordingsSection hide">
<h3>${HeaderActiveRecordings}</h3>
<div class="activeRecordingItems vertical-wrap" is="emby-itemscontainer">
</div>
</div>
<div class="dashboardSection serverActivitySection hide activityContainer">
<a is="emby-linkbutton" href="serveractivity.html?useractivity=false" class="button-flat sectionTitleTextButton">
<h3>${Alerts}</h3>
<span class="material-icons chevron_right"></span>
</a>
<div class="paperList serverActivityItems" data-activitylimit="4" data-useractivity="false">
</div>
</div>
<div class="dashboardSection">
<a is="emby-linkbutton" href="dashboardgeneral.html" class="button-flat sectionTitleTextButton">
<h3>${HeaderPaths}</h3>
<span class="material-icons chevron_right"></span>
</a>
<div class="paperList">
<div class="listItem listItem-border">
<div class="listItemBody two-line">
<div class="listItemBodyText secondary" style="margin:0;">${LabelCache}</div>
<div class="listItemBodyText" id="cachePath"></div>
</div>
</div>
<div class="listItem listItem-border">
<div class="listItemBody two-line">
<div class="listItemBodyText secondary" style="margin:0;">${LabelLogs}</div>
<div class="listItemBodyText" id="logPath"></div>
</div>
</div>
<div class="listItem listItem-border">
<div class="listItemBody two-line">
<div class="listItemBodyText secondary" style="margin:0;">${LabelMetadata}</div>
<div class="listItemBodyText" id="metadataPath"></div>
</div>
</div>
<div class="listItem listItem-border">
<div class="listItemBody two-line">
<div class="listItemBodyText secondary" style="margin:0;">${LabelTranscodes}</div>
<div class="listItemBodyText" id="transcodePath"></div>
</div>
</div>
<div class="listItem listItem-border">
<div class="listItemBody two-line">
<div class="listItemBodyText secondary" style="margin:0;">${LabelWeb}</div>
<div class="listItemBodyText" id="webPath"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dashboardFooter">
<div style="height:1px;" class="ui-bar-inherit"></div>
<div style="margin-top:1em;">
<a is="emby-linkbutton" rel="noopener noreferrer" class="button-link" href="https://jellyfin.org" target="_blank">Jellyfin</a>
</div>
</div>
</div>
</div>

213
src/controllers/dashboard/dashboard.js
View file

@ -1,11 +1,30 @@
define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'loading', 'connectionManager', 'playMethodHelper', 'cardBuilder', 'imageLoader', 'components/activitylog', 'scripts/imagehelper', 'indicators', 'listViewStyle', 'emby-button', 'flexStyles', 'emby-button', 'emby-itemscontainer'], function (datetime, events, itemHelper, serverNotifications, dom, globalize, datefns, dfnshelper, loading, connectionManager, playMethodHelper, cardBuilder, imageLoader, ActivityLog, imageHelper, indicators) {
'use strict';
import datetime from 'datetime';
import events from 'events';
import itemHelper from 'itemHelper';
import serverNotifications from 'serverNotifications';
import dom from 'dom';
import globalize from 'globalize';
import * as datefns from 'date-fns';
import dfnshelper from 'dfnshelper';
import loading from 'loading';
import playMethodHelper from 'playMethodHelper';
import cardBuilder from 'cardBuilder';
import imageLoader from 'imageLoader';
import ActivityLog from 'components/activitylog';
import imageHelper from 'scripts/imagehelper';
import indicators from 'indicators';
import 'listViewStyle';
import 'emby-button';
import 'flexStyles';
import 'emby-itemscontainer';
/* eslint-disable indent */
function showPlaybackInfo(btn, session) {
require(['alert'], function (alert) {
var title;
var text = [];
var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
import('alert').then(({default: alert}) => {
let title;
const text = [];
const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
if (displayPlayMethod === 'DirectStream') {
title = globalize.translate('DirectStreaming');
@ -33,14 +52,14 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}
function showSendMessageForm(btn, session) {
require(['prompt'], function (prompt) {
import('prompt').then(({default: prompt}) => {
prompt({
title: globalize.translate('HeaderSendMessage'),
label: globalize.translate('LabelMessageText'),
confirmText: globalize.translate('ButtonSend')
}).then(function (text) {
if (text) {
connectionManager.getApiClient(session.ServerId).sendMessageCommand(session.Id, {
window.connectionManager.getApiClient(session.ServerId).sendMessageCommand(session.Id, {
Text: text,
TimeoutMs: 5e3
});
@ -50,10 +69,10 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}
function showOptionsMenu(btn, session) {
require(['actionsheet'], function (actionsheet) {
var menuItems = [];
import('actionsheet').then(({default: actionsheet}) => {
const menuItems = [];
if (session.ServerId && session.DeviceId !== connectionManager.deviceId()) {
if (session.ServerId && session.DeviceId !== window.connectionManager.deviceId()) {
menuItems.push({
name: globalize.translate('SendMessage'),
id: 'sendmessage'
@ -84,14 +103,14 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}
function onActiveDevicesClick(evt) {
var btn = dom.parentWithClass(evt.target, 'sessionCardButton');
const btn = dom.parentWithClass(evt.target, 'sessionCardButton');
if (btn) {
var card = dom.parentWithClass(btn, 'card');
const card = dom.parentWithClass(btn, 'card');
if (card) {
var sessionId = card.id;
var session = (DashboardPage.sessionsList || []).filter(function (dashboardSession) {
const sessionId = card.id;
const session = (DashboardPage.sessionsList || []).filter(function (dashboardSession) {
return 'session' + dashboardSession.Id === sessionId;
})[0];
@ -103,9 +122,9 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} else if (btn.classList.contains('btnSessionSendMessage')) {
showSendMessageForm(btn, session);
} else if (btn.classList.contains('btnSessionStop')) {
connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'Stop');
window.connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'Stop');
} else if (btn.classList.contains('btnSessionPlayPause') && session.PlayState) {
connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'PlayPause');
window.connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'PlayPause');
}
}
}
@ -113,11 +132,11 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}
function filterSessions(sessions) {
var list = [];
var minActiveDate = new Date().getTime() - 9e5;
const list = [];
const minActiveDate = new Date().getTime() - 9e5;
for (var i = 0, length = sessions.length; i < length; i++) {
var session = sessions[i];
for (let i = 0, length = sessions.length; i < length; i++) {
const session = sessions[i];
if (!session.NowPlayingItem && !session.UserId) {
continue;
@ -139,7 +158,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
EnableTotalRecordCount: false,
EnableImageTypes: 'Primary,Thumb,Backdrop'
}).then(function (result) {
var itemsContainer = view.querySelector('.activeRecordingItems');
const itemsContainer = view.querySelector('.activeRecordingItems');
if (!result.Items.length) {
view.querySelector('.activeRecordingsSection').classList.add('hide');
@ -169,13 +188,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
function reloadSystemInfo(view, apiClient) {
apiClient.getSystemInfo().then(function (systemInfo) {
view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName);
var localizedVersion = globalize.translate('DashboardVersionNumber', systemInfo.Version);
if (systemInfo.SystemUpdateLevel !== 'Release') {
localizedVersion += ' ' + systemInfo.SystemUpdateLevel;
}
view.querySelector('#versionNumber').innerHTML = localizedVersion;
view.querySelector('#versionNumber').innerHTML = globalize.translate('DashboardVersionNumber', systemInfo.Version);
view.querySelector('#operatingSystem').innerHTML = globalize.translate('DashboardOperatingSystem', systemInfo.OperatingSystem);
view.querySelector('#architecture').innerHTML = globalize.translate('DashboardArchitecture', systemInfo.SystemArchitecture);
@ -205,31 +218,31 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}
function renderActiveConnections(view, sessions) {
var html = '';
let html = '';
DashboardPage.sessionsList = sessions;
var parentElement = view.querySelector('.activeDevices');
var cardElem = parentElement.querySelector('.card');
const parentElement = view.querySelector('.activeDevices');
const cardElem = parentElement.querySelector('.card');
if (cardElem) {
cardElem.classList.add('deadSession');
}
for (var i = 0, length = sessions.length; i < length; i++) {
var session = sessions[i];
var rowId = 'session' + session.Id;
var elem = view.querySelector('#' + rowId);
for (let i = 0, length = sessions.length; i < length; i++) {
const session = sessions[i];
const rowId = 'session' + session.Id;
const elem = view.querySelector('#' + rowId);
if (elem) {
DashboardPage.updateSession(elem, session);
} else {
var nowPlayingItem = session.NowPlayingItem;
var className = 'scalableCard card activeSession backdropCard backdropCard-scalable';
const nowPlayingItem = session.NowPlayingItem;
const className = 'scalableCard card activeSession backdropCard backdropCard-scalable';
html += '<div class="' + className + '" id="' + rowId + '">';
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += '<div class="cardContent">';
var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
if (imgUrl) {
html += '<div class="sessionNowPlayingContent sessionNowPlayingContent-withbackground"';
@ -240,7 +253,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
html += '<div class="sessionNowPlayingInnerContent">';
html += '<div class="sessionAppInfo">';
var clientImage = DashboardPage.getClientImage(session);
const clientImage = DashboardPage.getClientImage(session);
if (clientImage) {
html += clientImage;
@ -252,14 +265,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
html += '</div>';
html += '</div>';
if (session.TranscodingInfo && session.TranscodingInfo.Framerate) {
html += '<div class="sessionTranscodingFramerate">' + session.TranscodingInfo.Framerate + ' fps</div>';
} else {
html += '<div class="sessionTranscodingFramerate"></div>';
}
html += '<div class="sessionNowPlayingDetails">';
var nowPlayingName = DashboardPage.getNowPlayingName(session);
const nowPlayingName = DashboardPage.getNowPlayingName(session);
html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">';
html += nowPlayingName.html;
html += '</div>';
@ -267,7 +274,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
html += '</div>';
if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
var percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
html += indicators.getProgressHtml(percent, {
containerClass: 'playbackProgress'
});
@ -279,7 +286,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
var percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
html += indicators.getProgressHtml(percent, {
containerClass: 'transcodingProgress'
});
@ -296,7 +303,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
html += '<div class="sessionCardFooter cardFooter">';
html += '<div class="sessionCardButtons flex align-items-center justify-content-center">';
var btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? '' : ' hide';
let btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? '' : ' hide';
const playIcon = session.PlayState.IsPaused ? 'pause' : 'play_arrow';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><span class="material-icons ' + playIcon + '"></span></button>';
@ -305,7 +312,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
btnCssClass = session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length ? '' : ' hide';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionInfo paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate('ViewPlaybackInfo') + '"><span class="material-icons info"></span></button>';
btnCssClass = session.ServerId && -1 !== session.SupportedCommands.indexOf('DisplayMessage') && session.DeviceId !== connectionManager.deviceId() ? '' : ' hide';
btnCssClass = session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== window.connectionManager.deviceId() ? '' : ' hide';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionSendMessage paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate('SendMessage') + '"><span class="material-icons message"></span></button>';
html += '</div>';
@ -314,7 +321,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
html += '</div>';
html += '<div class="flex align-items-center justify-content-center">';
var userImage = DashboardPage.getUserImage(session);
const userImage = DashboardPage.getUserImage(session);
html += userImage ? '<div class="activitylogUserPhoto" style="background-image:url(\'' + userImage + "');\"></div>" : '<div style="height:1.71em;"></div>';
html += '<div class="sessionUserName">';
html += DashboardPage.getUsersHtml(session);
@ -328,7 +335,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}
parentElement.insertAdjacentHTML('beforeend', html);
var deadSessionElem = parentElement.querySelector('.deadSession');
const deadSessionElem = parentElement.querySelector('.deadSession');
if (deadSessionElem) {
deadSessionElem.parentNode.removeChild(deadSessionElem);
@ -336,9 +343,9 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}
function renderRunningTasks(view, tasks) {
var html = '';
let html = '';
tasks = tasks.filter(function (task) {
if ('Idle' != task.State) {
if (task.State != 'Idle') {
return !task.IsHidden;
}
@ -351,13 +358,13 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
view.querySelector('.runningTasksContainer').classList.add('hide');
}
for (var i = 0, length = tasks.length; i < length; i++) {
var task = tasks[i];
for (let i = 0, length = tasks.length; i < length; i++) {
const task = tasks[i];
html += '<p>';
html += task.Name + '<br/>';
if (task.State === 'Running') {
var progress = (task.CurrentProgressPercentage || 0).toFixed(1);
const progress = (task.CurrentProgressPercentage || 0).toFixed(1);
html += '<progress max="100" value="' + progress + '" title="' + progress + '%">';
html += progress + '%';
html += '</progress>';
@ -383,9 +390,9 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
apiClient.sendMessage('ScheduledTasksInfoStop');
},
getSessionNowPlayingStreamInfo: function (session) {
var html = '';
var showTranscodingInfo = false;
var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
let html = '';
let showTranscodingInfo = false;
const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
if (displayPlayMethod === 'DirectStream') {
html += globalize.translate('DirectStreaming');
@ -402,7 +409,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}
if (showTranscodingInfo) {
var line = [];
const line = [];
if (session.TranscodingInfo) {
if (session.TranscodingInfo.Bitrate) {
@ -434,8 +441,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
return html;
},
getSessionNowPlayingTime: function (session) {
var nowPlayingItem = session.NowPlayingItem;
var html = '';
const nowPlayingItem = session.NowPlayingItem;
let html = '';
if (nowPlayingItem) {
if (session.PlayState.PositionTicks) {
@ -459,8 +466,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
return session.Client + ' ' + session.ApplicationVersion;
},
getNowPlayingName: function (session) {
var imgUrl = '';
var nowPlayingItem = session.NowPlayingItem;
let imgUrl = '';
const nowPlayingItem = session.NowPlayingItem;
// FIXME: It seems that, sometimes, server sends date in the future, so date-fns displays messages like 'in less than a minute'. We should fix
// how dates are returned by the server when the session is active and show something like 'Active now', instead of past/future sentences
if (!nowPlayingItem) {
@ -470,8 +477,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
};
}
var topText = itemHelper.getDisplayName(nowPlayingItem);
var bottomText = '';
let topText = itemHelper.getDisplayName(nowPlayingItem);
let bottomText = '';
if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
bottomText = topText;
@ -511,13 +518,13 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
};
},
getUsersHtml: function (session) {
var html = [];
const html = [];
if (session.UserId) {
html.push(session.UserName);
}
for (var i = 0, length = session.AdditionalUsers.length; i < length; i++) {
for (let i = 0, length = session.AdditionalUsers.length; i < length; i++) {
html.push(session.AdditionalUsers[i].UserName);
}
@ -535,7 +542,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
},
updateSession: function (row, session) {
row.classList.remove('deadSession');
var nowPlayingItem = session.NowPlayingItem;
const nowPlayingItem = session.NowPlayingItem;
if (nowPlayingItem) {
row.classList.add('playingSession');
@ -543,7 +550,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
row.classList.remove('playingSession');
}
if (session.ServerId && -1 !== session.SupportedCommands.indexOf('DisplayMessage') && session.DeviceId !== connectionManager.deviceId()) {
if (session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== window.connectionManager.deviceId()) {
row.querySelector('.btnSessionSendMessage').classList.remove('hide');
} else {
row.querySelector('.btnSessionSendMessage').classList.add('hide');
@ -555,9 +562,9 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
row.querySelector('.btnSessionInfo').classList.add('hide');
}
var btnSessionPlayPause = row.querySelector('.btnSessionPlayPause');
const btnSessionPlayPause = row.querySelector('.btnSessionPlayPause');
if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== connectionManager.deviceId()) {
if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== window.connectionManager.deviceId()) {
btnSessionPlayPause.classList.remove('hide');
row.querySelector('.btnSessionStop').classList.remove('hide');
} else {
@ -573,19 +580,18 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
row.querySelector('.sessionNowPlayingTime').innerHTML = DashboardPage.getSessionNowPlayingTime(session);
row.querySelector('.sessionUserName').innerHTML = DashboardPage.getUsersHtml(session);
row.querySelector('.sessionAppSecondaryText').innerHTML = DashboardPage.getAppSecondaryText(session);
row.querySelector('.sessionTranscodingFramerate').innerHTML = session.TranscodingInfo && session.TranscodingInfo.Framerate ? session.TranscodingInfo.Framerate + ' fps' : '';
var nowPlayingName = DashboardPage.getNowPlayingName(session);
var nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo');
const nowPlayingName = DashboardPage.getNowPlayingName(session);
const nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo');
if (!(nowPlayingName.image && nowPlayingName.image == nowPlayingInfoElem.getAttribute('data-imgsrc'))) {
nowPlayingInfoElem.innerHTML = nowPlayingName.html;
nowPlayingInfoElem.setAttribute('data-imgsrc', nowPlayingName.image || '');
}
var playbackProgressElem = row.querySelector('.playbackProgress');
const playbackProgressElem = row.querySelector('.playbackProgress');
if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
var percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
playbackProgressElem.outerHTML = indicators.getProgressHtml(percent, {
containerClass: 'playbackProgress'
});
@ -595,10 +601,10 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
});
}
var transcodingProgress = row.querySelector('.transcodingProgress');
const transcodingProgress = row.querySelector('.transcodingProgress');
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
var percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
transcodingProgress.outerHTML = indicators.getProgressHtml(percent, {
containerClass: 'transcodingProgress'
});
@ -608,8 +614,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
});
}
var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';
var imgElem = row.querySelector('.sessionNowPlayingContent');
const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';
const imgElem = row.querySelector('.sessionNowPlayingContent');
if (imgUrl != imgElem.getAttribute('data-src')) {
imgElem.style.backgroundImage = imgUrl ? "url('" + imgUrl + "')" : '';
@ -623,7 +629,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}
},
getClientImage: function (connection) {
var iconUrl = imageHelper.getDeviceIcon(connection);
const iconUrl = imageHelper.getDeviceIcon(connection);
return "<img src='" + iconUrl + "' />";
},
getNowPlayingImageUrl: function (item) {
@ -653,7 +659,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
});
}
var imageTags = (item || {}).ImageTags || {};
const imageTags = (item || {}).ImageTags || {};
if (item && imageTags.Thumb) {
return ApiClient.getScaledImageUrl(item.Id, {
@ -707,20 +713,20 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
},
systemUpdateTaskKey: 'SystemUpdateTask',
stopTask: function (btn, id) {
var page = dom.parentWithClass(btn, 'page');
const page = dom.parentWithClass(btn, 'page');
ApiClient.stopScheduledTask(id).then(function () {
pollForInfo(page, ApiClient);
});
},
restart: function (btn) {
require(['confirm'], function (confirm) {
import('confirm').then(({default: confirm}) => {
confirm({
title: globalize.translate('HeaderRestart'),
title: globalize.translate('Restart'),
text: globalize.translate('MessageConfirmRestart'),
confirmText: globalize.translate('ButtonRestart'),
confirmText: globalize.translate('Restart'),
primary: 'delete'
}).then(function () {
var page = dom.parentWithClass(btn, 'page');
const page = dom.parentWithClass(btn, 'page');
page.querySelector('#btnRestartServer').disabled = true;
page.querySelector('#btnShutdown').disabled = true;
ApiClient.restartServer();
@ -728,14 +734,14 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
});
},
shutdown: function (btn) {
require(['confirm'], function (confirm) {
import('confirm').then(({default: confirm}) => {
confirm({
title: globalize.translate('HeaderShutdown'),
title: globalize.translate('ButtonShutdown'),
text: globalize.translate('MessageConfirmShutdown'),
confirmText: globalize.translate('ButtonShutdown'),
primary: 'delete'
}).then(function () {
var page = dom.parentWithClass(btn, 'page');
const page = dom.parentWithClass(btn, 'page');
page.querySelector('#btnRestartServer').disabled = true;
page.querySelector('#btnShutdown').disabled = true;
ApiClient.shutdownServer();
@ -743,7 +749,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
});
}
};
return function (view, params) {
export default function (view, params) {
function onRestartRequired(evt, apiClient) {
console.debug('onRestartRequired not implemented', evt, apiClient);
}
@ -782,11 +788,11 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}
}
var serverId = ApiClient.serverId();
const serverId = ApiClient.serverId();
view.querySelector('.activeDevices').addEventListener('click', onActiveDevicesClick);
view.addEventListener('viewshow', function () {
var page = this;
var apiClient = ApiClient;
const page = this;
const apiClient = ApiClient;
if (apiClient) {
loading.show();
@ -823,7 +829,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}
});
view.addEventListener('viewbeforehide', function () {
var apiClient = ApiClient;
const apiClient = ApiClient;
events.off(serverNotifications, 'RestartRequired', onRestartRequired);
events.off(serverNotifications, 'ServerShuttingDown', onServerShuttingDown);
events.off(serverNotifications, 'ServerRestarting', onServerRestarting);
@ -837,18 +843,19 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}
});
view.addEventListener('viewdestroy', function () {
var page = this;
var userActivityLog = page.userActivityLog;
const page = this;
const userActivityLog = page.userActivityLog;
if (userActivityLog) {
userActivityLog.destroy();
}
var serverActivityLog = page.serverActivityLog;
const serverActivityLog = page.serverActivityLog;
if (serverActivityLog) {
serverActivityLog.destroy();
}
});
};
});
}
/* eslint-enable indent */

24
src/controllers/dashboard/devices/device.html Normal file
View file

@ -0,0 +1,24 @@
<div id="devicePage" data-role="page" class="page type-interior devicesPage noSecondaryNavPage">
<div>
<div class="content-primary">
<form class="deviceForm">
<div class="verticalSection verticalSection-extrabottompadding">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle reportedName"></h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/devices.html">${Help}</a>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtCustomName" label="${LabelDisplayName}" />
<div class="fieldDescription">${LabelCustomDeviceDisplayNameHelp}</div>
</div>
</div>
<div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
</div>
</form>
</div>
</div>
</div>

27
src/controllers/dashboard/devices/device.js
View file

@ -1,5 +1,9 @@
define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function (loading, libraryMenu, dom) {
'use strict';
import loading from 'loading';
import dom from 'dom';
import 'emby-input';
import 'emby-button';
/* eslint-disable indent */
function load(page, device, deviceOptions) {
page.querySelector('#txtCustomName', page).value = deviceOptions.CustomName || '';
@ -7,13 +11,13 @@ define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function
}
function loadData() {
var page = this;
const page = this;
loading.show();
var id = getParameterByName('id');
var promise1 = ApiClient.getJSON(ApiClient.getUrl('Devices/Info', {
const id = getParameterByName('id');
const promise1 = ApiClient.getJSON(ApiClient.getUrl('Devices/Info', {
Id: id
}));
var promise2 = ApiClient.getJSON(ApiClient.getUrl('Devices/Options', {
const promise2 = ApiClient.getJSON(ApiClient.getUrl('Devices/Options', {
Id: id
}));
Promise.all([promise1, promise2]).then(function (responses) {
@ -23,7 +27,7 @@ define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function
}
function save(page) {
var id = getParameterByName('id');
const id = getParameterByName('id');
ApiClient.ajax({
url: ApiClient.getUrl('Devices/Options', {
Id: id
@ -37,14 +41,15 @@ define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function
}
function onSubmit(e) {
var form = this;
const form = this;
save(dom.parentWithClass(form, 'page'));
e.preventDefault();
return false;
}
return function (view, params) {
export default function (view, params) {
view.querySelector('form').addEventListener('submit', onSubmit);
view.addEventListener('viewshow', loadData);
};
});
}
/* eslint-enable indent */

13
src/controllers/dashboard/devices/devices.html Normal file
View file

@ -0,0 +1,13 @@
<div id="devicesPage" data-role="page" class="page type-interior devicesPage noSecondaryNavPage">
<div>
<div class="content-primary">
<div class="verticalSection verticalSection">
<div class="sectionTitleContainer sectionTitleContainer-cards flex align-items-center">
<h2 class="sectionTitle sectionTitle-cards">${HeaderDevices}</h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/devices.html">${Help}</a>
</div>
</div>
<div is="emby-itemscontainer" class="devicesList vertical-wrap" data-multiselect="false"></div>
</div>
</div>
</div>

40
src/controllers/dashboard/devices/devices.js
View file

@ -1,18 +1,27 @@
define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'date-fns', 'dfnshelper', 'emby-button', 'emby-itemscontainer', 'cardStyle'], function (loading, dom, libraryMenu, globalize, imageHelper, datefns, dfnshelper) {
'use strict';
import loading from 'loading';
import dom from 'dom';
import globalize from 'globalize';
import imageHelper from 'scripts/imagehelper';
import * as datefns from 'date-fns';
import dfnshelper from 'dfnshelper';
import 'emby-button';
import 'emby-itemscontainer';
import 'cardStyle';
/* eslint-disable indent */
function canDelete(deviceId) {
return deviceId !== ApiClient.deviceId();
}
function deleteDevice(page, id) {
var msg = globalize.translate('DeleteDeviceConfirmation');
const msg = globalize.translate('DeleteDeviceConfirmation');
require(['confirm'], function (confirm) {
import('confirm').then(({default: confirm}) => {
confirm({
text: msg,
title: globalize.translate('HeaderDeleteDevice'),
confirmText: globalize.translate('ButtonDelete'),
confirmText: globalize.translate('Delete'),
primary: 'delete'
}).then(function () {
loading.show();
@ -29,7 +38,7 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
}
function showDeviceMenu(view, btn, deviceId) {
var menuItems = [];
const menuItems = [];
if (canEdit) {
menuItems.push({
@ -47,7 +56,7 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
});
}
require(['actionsheet'], function (actionsheet) {
import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({
items: menuItems,
positionTo: btn,
@ -66,15 +75,15 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
}
function load(page, devices) {
var html = '';
let html = '';
html += devices.map(function (device) {
var deviceHtml = '';
let deviceHtml = '';
deviceHtml += "<div data-id='" + device.Id + "' class='card backdropCard'>";
deviceHtml += '<div class="cardBox visualCardBox">';
deviceHtml += '<div class="cardScalable">';
deviceHtml += '<div class="cardPadder cardPadder-backdrop"></div>';
deviceHtml += '<a is="emby-linkbutton" href="' + (canEdit ? 'device.html?id=' + device.Id : '#') + '" class="cardContent cardImageContainer">';
var iconUrl = imageHelper.getDeviceIcon(device);
const iconUrl = imageHelper.getDeviceIcon(device);
if (iconUrl) {
deviceHtml += '<div class="cardImage" style="background-image:url(\'' + iconUrl + "');background-size: auto 64%;background-position:center center;\">";
@ -124,10 +133,10 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
});
}
var canEdit = ApiClient.isMinServerVersion('3.4.1.31');
return function (view, params) {
const canEdit = ApiClient.isMinServerVersion('3.4.1.31');
export default function (view, params) {
view.querySelector('.devicesList').addEventListener('click', function (e) {
var btnDeviceMenu = dom.parentWithClass(e.target, 'btnDeviceMenu');
const btnDeviceMenu = dom.parentWithClass(e.target, 'btnDeviceMenu');
if (btnDeviceMenu) {
showDeviceMenu(view, btnDeviceMenu, btnDeviceMenu.getAttribute('data-id'));
@ -136,5 +145,6 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
view.addEventListener('viewshow', function () {
loadData(this);
});
};
});
}
/* eslint-enable indent */

584
src/controllers/dashboard/dlna/profile.html Normal file
View file

@ -0,0 +1,584 @@
<div id="dlnaProfilePage" data-role="page" class="page type-interior dlnaPage withTabs">
<div data-role="content">
<div class="content-primary">
<form class="dlnaProfileForm" style="max-width: 650px;">
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${HeaderProfileInformation}</h2>
</div>
</div>
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioInfo" data-value="tabInfo">${ButtonInfo}</a>
<a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioDirectPlay" data-value="tabDirectPlayProfiles">${TabDirectPlay}</a>
<a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioTranscoding" data-value="tabTranscodingProfiles">${Transcoding}</a>
<a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioContainers" data-value="tabContainerProfiles">${TabContainers}</a>
<a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioCodecs" data-value="tabCodecProfiles">${TabCodecs}</a>
<a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioMediaProfiles" data-value="tabMediaProfiles">${TabResponses}</a>
</div>
<br />
<div class="tabContent tabInfo">
<div class="inputContainer">
<input is="emby-input" type="text" id="txtName" required="required" label="${LabelName}" />
</div>
<div class="selectContainer">
<select is="emby-select" id="selectUser" label="${LabelUserLibrary}"></select>
<div class="fieldDescription">${LabelUserLibraryHelp}</div>
</div>
<div>
<h3 class="checkboxListLabel">${LabelSupportedMediaTypes}</h3>
<div class="checkboxList paperList checkboxList-paperList">
<label>
<input is="emby-checkbox" type="checkbox" id="chkAudio" data-value="Audio" class="chkMediaType" />
<span>${Audio}</span>
</label>
<label>
<input is="emby-checkbox" type="checkbox" id="chkPhoto" data-value="Photo" class="chkMediaType" />
<span>${OptionProfilePhoto}</span>
</label>
<label>
<input is="emby-checkbox" type="checkbox" id="chkVideo" data-value="Video" class="chkMediaType" />
<span>${OptionProfileVideo}</span>
</label>
</div>
</div>
<br />
<div class="inputContainer">
<input is="emby-input" type="number" id="txtMaxAllowedBitrate" pattern="[0-9]*" min="1" label="${LabelMaxStreamingBitrate}" />
<div class="fieldDescription">${LabelMaxStreamingBitrateHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="number" id="txtMusicStreamingTranscodingBitrate" pattern="[0-9]*" min="1" label="${LabelMusicStreamingTranscodingBitrate}" />
<div class="fieldDescription">${LabelMusicStreamingTranscodingBitrateHelp}</div>
</div>
<div style="display:none;">
<label for="chkIgnoreTranscodeByteRangeRequests">${OptionIgnoreTranscodeByteRangeRequests}</label>
<input type="checkbox" id="chkIgnoreTranscodeByteRangeRequests" data-mini="true" />
<div class="fieldDescription">${OptionIgnoreTranscodeByteRangeRequestsHelp}</div>
</div>
<div is="emby-collapse" title="${HeaderIdentification}">
<div class="collapseContent">
<h3>${HeaderIdentificationCriteriaHelp}</h3>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtIdFriendlyName" label="${LabelFriendlyName}" />
<div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtIdManufacturer" label="${LabelManufacturer}" />
<div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtIdManufacturerUrl" label="${LabelManufacturerUrl}" />
<div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtIdModelName" label="${LabelModelName}" />
<div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtIdModelNumber" label="${LabelModelNumber}" />
<div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtIdModelDesription" label="${LabelModelDescription}" />
<div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtIdModelUrl" label="${LabelModelUrl}" />
<div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtIdSerialNumber" label="${LabelSerialNumber}" />
<div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtIdDeviceDescription" label="${LabelDeviceDescription}" />
<div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
</div>
<div>
<h2 style="vertical-align:middle;display:inline-block;">${HeaderHttpHeaders}</h2>
<button is="emby-button" type="button" class="fab btnAddIdentificationHttpHeader submit sectionTitleButton" style="margin-left:1em;" title="${Add}">
<span class="material-icons add"></span>
</button>
</div>
<div class="httpHeaderIdentificationList"></div>
</div>
</div>
<div is="emby-collapse" title="${Display}">
<div class="collapseContent">
<br />
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="chkRequiresPlainFolders" />
<span>${OptionPlainStorageFolders}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${OptionPlainStorageFoldersHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="chkRequiresPlainVideoItems" />
<span>${OptionPlainVideoItems}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${OptionPlainVideoItemsHelp}</div>
</div>
</div>
</div>
<div is="emby-collapse" title="${HeaderImageSettings}">
<div class="collapseContent">
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="chkEnableAlbumArtInDidl" data-mini="true" />
<span>${LabelEmbedAlbumArtDidl}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelEmbedAlbumArtDidlHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="chkEnableSingleImageLimit" data-mini="true" />
<span>${LabelEnableSingleImageInDidlLimit}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelEnableSingleImageInDidlLimitHelp}</div>
</div>
<div class="inputContainer">
<input type="text" is="emby-input" id="txtAlbumArtPn" label="${LabelAlbumArtPN}" />
<div class="fieldDescription">${LabelAlbumArtHelp}</div>
</div>
<div class="inputContainer">
<input type="number" is="emby-input" id="txtAlbumArtMaxWidth" pattern="[0-9]*" min="1" label="${LabelAlbumArtMaxWidth}" />
<div class="fieldDescription">${LabelAlbumArtMaxWidthHelp}</div>
</div>
<div class="inputContainer">
<input type="number" is="emby-input" id="txtAlbumArtMaxHeight" pattern="[0-9]*" min="1" label="${LabelAlbumArtMaxHeight}" />
<div class="fieldDescription">${LabelAlbumArtMaxHeightHelp}</div>
</div>
<div class="inputContainer">
<input type="number" is="emby-input" id="txtIconMaxWidth" pattern="[0-9]*" min="1" label="${LabelIconMaxWidth}" />
<div class="fieldDescription">${LabelIconMaxWidthHelp}</div>
</div>
<div class="inputContainer">
<input type="number" is="emby-input" id="txtIconMaxHeight" pattern="[0-9]*" min="1" label="${LabelIconMaxHeight}" />
<div class="fieldDescription">${LabelIconMaxHeightHelp}</div>
</div>
</div>
</div>
<div is="emby-collapse" title="${HeaderServerSettings}">
<div class="collapseContent">
<p>${HeaderProfileServerSettingsHelp}</p>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtInfoFriendlyName" label="${LabelFriendlyName}" />
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtInfoManufacturer" label="${LabelManufacturer}" />
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtInfoManufacturerUrl" label="${LabelManufacturerUrl}" />
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtInfoModelName" label="${LabelModelName}" />
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtInfoModelNumber" label="${LabelModelNumber}" />
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtInfoModelDesription" label="${LabelModelDescription}" />
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtInfoModelUrl" label="${LabelModelUrl}" />
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtInfoSerialNumber" label="${LabelSerialNumber}" />
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtProtocolInfo" label="${LabelProtocolInfo}" />
<div class="fieldDescription">${LabelProtocolInfoHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtXDlnaCap" label="${LabelXDlnaCap}" />
<div class="fieldDescription">${LabelXDlnaCapHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtXDlnaDoc" label="${LabelXDlnaDoc}" />
<div class="fieldDescription">${LabelXDlnaDocHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtSonyAggregationFlags" label="${LabelSonyAggregationFlags}" />
<div class="fieldDescription">${LabelSonyAggregationFlagsHelp}</div>
</div>
</div>
</div>
<div is="emby-collapse" title="${HeaderSubtitleProfiles}">
<div class="collapseContent">
<p>${HeaderSubtitleProfilesHelp}</p>
<button is="emby-button" type="button" class="raised submit block btnAddSubtitleProfile">
<span>${Add}</span>
</button>
<div class="subtitleProfileList"></div>
<br />
</div>
</div>
<div is="emby-collapse" title="${HeaderXmlSettings}">
<div class="collapseContent">
<div>
<h2 style="vertical-align:middle;display:inline-block;">${HeaderXmlDocumentAttributes}</h2>
<button is="emby-button" type="button" class="fab btnAddXmlDocumentAttribute submit sectionTitleButton" style="margin-left:1em;" title="${Add}">
<span class="material-icons add"></span>
</button>
</div>
<div class="xmlDocumentAttributeList"></div>
<div class="fieldDescription">${XmlDocumentAttributeListHelp}</div>
<br />
</div>
</div>
</div>
<div class="tabContent tabDirectPlayProfiles">
<p>${HeaderDirectPlayProfileHelp}</p>
<button is="emby-button" class="raised submit block btnAddDirectPlayProfile" type="button" data-mini="true" data-icon="plus">${New}</button>
<br />
<div class="directPlayProfiles"></div>
</div>
<div class="tabContent tabTranscodingProfiles">
<p>${HeaderTranscodingProfileHelp}</p>
<button is="emby-button" class="raised submit block btnAddTranscodingProfile" type="button" data-mini="true" data-icon="plus">${New}</button>
<br />
<div class="transcodingProfiles"></div>
</div>
<div class="tabContent tabContainerProfiles">
<p>${HeaderContainerProfileHelp}</p>
<button is="emby-button" class="raised submit block btnAddContainerProfile" type="button" data-mini="true" data-icon="plus">${New}</button>
<br />
<div class="containerProfiles"></div>
</div>
<div class="tabContent tabCodecProfiles">
<p>${HeaderCodecProfileHelp}</p>
<button is="emby-button" class="raised submit block btnAddCodecProfile" type="button" data-icon="plus">${New}</button>
<br />
<div class="codecProfiles"></div>
</div>
<div class="tabContent tabMediaProfiles">
<p>${HeaderResponseProfileHelp}</p>
<button is="emby-button" class="raised submit block btnAddResponseProfile" type="button" data-mini="true" data-icon="plus">${New}</button>
<br />
<div class="mediaProfiles"></div>
</div>
<br />
<div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
<button is="emby-button" type="button" class="button-cancel raised block" onclick="Dashboard.navigate('dlnaprofiles.html');">
<span>${ButtonCancel}</span>
</button>
</div>
</form>
</div>
</div>
<div data-role="popup" id="popupEditDirectPlayProfile" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="editDirectPlayProfileForm" style="padding:1em;">
<div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderDirectPlayProfile}</h3>
</div>
<div data-role="content">
<div class="selectContainer">
<select id="selectDirectPlayProfileType" name="selectDirectPlayProfileType" is="emby-select" label="${LabelType}">
<option value="Audio">${Audio}</option>
<option value="Photo">${OptionProfilePhoto}</option>
<option value="Video">${OptionProfileVideo}</option>
</select>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtDirectPlayContainer" label="${LabelProfileContainer}" />
<div class="fieldDescription">${LabelProfileContainersHelp}</div>
</div>
<div id="fldDirectPlayVideoCodec" style="margin: 1em 0;">
<div class="inputContainer">
<input is="emby-input" type="text" id="txtDirectPlayVideoCodec" label="${LabelProfileVideoCodecs}" />
<div class="fieldDescription">${LabelProfileCodecsHelp}</div>
</div>
</div>
<div id="fldDirectPlayAudioCodec" style="margin: 1em 0 2em;">
<div class="inputContainer">
<input is="emby-input" type="text" id="txtDirectPlayAudioCodec" label="${LabelProfileAudioCodecs}" />
<div class="fieldDescription">${LabelProfileCodecsHelp}</div>
</div>
</div>
<p>
<button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
<span>${ButtonOk}</span>
</button>
<button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
<span>${ButtonCancel}</span>
</button>
</p>
</div>
</form>
</div>
<div data-role="popup" id="transcodingProfilePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="transcodingProfileForm" style="padding:1em;">
<div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderTranscodingProfile}</h3>
</div>
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<input type="radio" name="radioTranscodingTab" class="radioTabButton" id="radioTranscodingBasics" value="tabTranscodingBasics">
<label for="radioTranscodingBasics">${ButtonInfo}</label>
<input type="radio" name="radioTranscodingTab" class="radioTabButton" id="radioTranscodingAdvanced" value="tabTranscodingAdvanced">
<label for="radioTranscodingAdvanced">${TabAdvanced}</label>
</div>
<br />
<div class="tabContent tabTranscodingBasics" style="display: none;">
<div class="selectContainer">
<select id="selectTranscodingProfileType" name="selectTranscodingProfileType" is="emby-select" label="${LabelType}">
<option value="Audio">${Audio}</option>
<option value="Photo">${OptionProfilePhoto}</option>
<option value="Video">${OptionProfileVideo}</option>
</select>
</div>
<div id="fldTranscodingProtocol" style="margin: 1em 0;">
<div class="selectContainer">
<select id="selectTranscodingProtocol" name="selectTranscodingProtocol" is="emby-select" label="${LabelProtocol}">
<option value="Http">${OptionProtocolHttp}</option>
<option value="Hls">${OptionProtocolHls}</option>
</select>
</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtTranscodingContainer" label="${LabelProfileContainer}"; required="required" />
</div>
<div id="fldTranscodingVideoCodec" style="margin: 1em 0;">
<div class="inputContainer">
<input is="emby-input" type="text" id="txtTranscodingVideoCodec" label="${LabelVideoCodec}" />
</div>
</div>
<div id="fldTranscodingAudioCodec" style="margin: 1em 0;">
<div class="inputContainer">
<input is="emby-input" type="text" id="txtTranscodingAudioCodec" label="${LabelAudioCodec}" />
</div>
</div>
</div>
<div class="tabContent tabTranscodingAdvanced" style="display: none;">
<div id="fldEnableMpegtsM2TsMode" style="margin: 1em 0;">
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="chkEnableMpegtsM2TsMode" />
<span>${OptionEnableM2tsMode}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${OptionEnableM2tsModeHelp}</div>
</div>
</div>
<div id="fldEstimateContentLength" style="margin: 1em 0;">
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="chkEstimateContentLength" />
<span>${OptionEstimateContentLength}</span>
</label>
</div>
</div>
<div id="fldReportByteRangeRequests" style="margin: 1em 0;">
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="chkReportByteRangeRequests" />
<span>${OptionReportByteRangeSeekingWhenTranscoding}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${OptionReportByteRangeSeekingWhenTranscodingHelp}</div>
</div>
</div>
</div>
<p>
<button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
<span>${ButtonOk}</span>
</button>
<button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
<span>${ButtonCancel}</span>
</button>
</p>
</div>
</form>
</div>
<div data-role="popup" id="containerProfilePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="containerProfileForm" style="padding:1em;">
<div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderContainerProfile}</h3>
</div>
<div data-role="content">
<p>${HeaderContainerProfileHelp}</p>
<div class="tabContent tabContainerBasics">
<div class="selectContainer">
<select id="selectContainerProfileType" name="selectContainerProfileType" is="emby-select" label="${LabelType}">
<option value="Audio">${Audio}</option>
<option value="Photo">${OptionProfilePhoto}</option>
<option value="Video">${OptionProfileVideo}</option>
</select>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtContainerProfileContainer" label="${LabelProfileContainer}" />
<div class="fieldDescription">${LabelProfileContainersHelp}</div>
</div>
</div>
<div class="tabContent tabContainerConditions" style="display: none;"></div>
<p>
<button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
<span>${ButtonOk}</span>
</button>
<button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
<span>${ButtonCancel}</span>
</button>
</p>
</div>
</form>
</div>
<div data-role="popup" id="codecProfilePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="codecProfileForm" style="padding:1em;">
<div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderCodecProfile}</h3>
</div>
<div data-role="content">
<p>${HeaderCodecProfileHelp}</p>
<div class="selectContainer">
<select id="selectCodecProfileType" name="selectCodecProfileType" is="emby-select" label="${LabelType}">
<option value="Video">${OptionProfileVideo}</option>
<option value="VideoAudio">${OptionProfileVideoAudio}</option>
<option value="Audio">${Audio}</option>
</select>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtCodecProfileCodec" label="${LabelProfileCodecs}" />
<div class="fieldDescription">${LabelProfileCodecsHelp}</div>
</div>
<p>
<button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
<span>${ButtonOk}</span>
</button>
<button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
<span>${ButtonCancel}</span>
</button>
</p>
</div>
</form>
</div>
<div data-role="popup" id="responseProfilePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="editResponseProfileForm" style="padding:1em;">
<div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderResponseProfile}</h3>
</div>
<div data-role="content">
<div class="selectContainer">
<select id="selectResponseProfileType" name="selectResponseProfileType" is="emby-select" label="${LabelType}">
<option value="Audio">${Audio}</option>
<option value="Photo">${OptionProfilePhoto}</option>
<option value="Video">${OptionProfileVideo}</option>
</select>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtResponseProfileContainer" label="${LabelProfileContainer}" />
<div class="fieldDescription">${LabelProfileContainersHelp}</div>
</div>
<div id="fldResponseProfileVideoCodec" style="margin: 1em 0;">
<div class="inputContainer">
<input is="emby-input" type="text" id="txtResponseProfileVideoCodec" label="${LabelProfileVideoCodecs}" />
<div class="fieldDescription">${LabelProfileCodecsHelp}</div>
</div>
</div>
<div id="fldResponseProfileAudioCodec" style="margin: 1em 0 2em;">
<div class="inputContainer">
<input is="emby-input" type="text" id="txtResponseProfileAudioCodec" label="${LabelProfileAudioCodecs}" />
<div class="fieldDescription">${LabelProfileCodecsHelp}</div>
</div>
</div>
<p>
<button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
<span>${ButtonOk}</span>
</button>
<button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
<span>${ButtonCancel}</span>
</button>
</p>
</div>
</form>
</div>
<div data-role="popup" id="identificationHeaderPopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="identificationHeaderForm" style="padding:1em;">
<div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderIdentificationHeader}</h3>
</div>
<div data-role="content">
<div class="inputContainer">
<input is="emby-input" type="text" id="txtIdentificationHeaderName" label="${LabelName}" />
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtIdentificationHeaderValue" label="${LabelValue}" />
</div>
<div class="selectContainer">
<select id="selectMatchType" name="selectMatchType" is="emby-select" label="${LabelMatchType}">
<option value="Equals">${OptionEquals}</option>
<option value="Regex">${OptionRegex}</option>
<option value="Substring">${OptionSubstring}</option>
</select>
</div>
<p>
<button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
<span>${ButtonOk}</span>
</button>
<button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
<span>${ButtonCancel}</span>
</button>
</p>
</div>
</form>
</div>
<div data-role="popup" id="xmlAttributePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="xmlAttributeForm" style="padding:1em;">
<div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderXmlDocumentAttribute}</h3>
</div>
<div data-role="content">
<div class="inputContainer">
<input is="emby-input" type="text" id="txtXmlAttributeName" label="${LabelName}" />
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtXmlAttributeValue" label="${LabelValue}" />
</div>
<p>
<button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
<span>${ButtonOk}</span>
</button>
<button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
<span>${ButtonCancel}</span>
</button>
</p>
</div>
</form>
</div>
<div data-role="popup" id="subtitleProfilePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="subtitleProfileForm" style="padding:1em;">
<div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderSubtitleProfile}</h3>
</div>
<div data-role="content">
<div class="inputContainer">
<input is="emby-input" type="text" id="txtSubtitleProfileFormat" label="${LabelFormat}" />
<div class="fieldDescription">${LabelSubtitleFormatHelp}</div>
</div>
<div class="selectContainer">
<select id="selectSubtitleProfileMethod" name="selectSubtitleProfileMethod" is="emby-select" label="${LabelMethod}">
<option value="Embed">${OptionEmbedSubtitles}</option>
<option value="External">${OptionExternallyDownloaded}</option>
<option value="Hls">${OptionHlsSegmentedSubtitles}</option>
</select>
</div>
<div class="selectContainer">
<select id="selectSubtitleProfileDidlMode" name="selectSubtitleProfileDidlMode" is="emby-select" label="${LabelDidlMode}">
<option value="">${OptionResElement}</option>
<option value="CaptionInfoEx">${OptionCaptionInfoExSamsung}</option>
</select>
</div>
<p>
<button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
<span>${ButtonOk}</span>
</button>
<button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
<span>${ButtonCancel}</span>
</button>
</p>
</div>
</form>
</div>
</div>

243
src/controllers/dashboard/dlna/profile.js
View file

@ -1,10 +1,18 @@
define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-button', 'emby-input', 'emby-checkbox', 'listViewStyle', 'emby-button'], function ($, loading, globalize) {
'use strict';
import $ from 'jQuery';
import loading from 'loading';
import globalize from 'globalize';
import 'emby-select';
import 'emby-button';
import 'emby-input';
import 'emby-checkbox';
import 'listViewStyle';
/* eslint-disable indent */
function loadProfile(page) {
loading.show();
var promise1 = getProfile();
var promise2 = ApiClient.getUsers();
const promise1 = getProfile();
const promise2 = ApiClient.getUsers();
Promise.all([promise1, promise2]).then(function (responses) {
currentProfile = responses[0];
renderProfile(page, currentProfile, responses[1]);
@ -13,20 +21,20 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
function getProfile() {
var id = getParameterByName('id');
var url = id ? 'Dlna/Profiles/' + id : 'Dlna/Profiles/Default';
const id = getParameterByName('id');
const url = id ? 'Dlna/Profiles/' + id : 'Dlna/Profiles/Default';
return ApiClient.getJSON(ApiClient.getUrl(url));
}
function renderProfile(page, profile, users) {
$('#txtName', page).val(profile.Name);
$('.chkMediaType', page).each(function () {
this.checked = -1 != (profile.SupportedMediaTypes || '').split(',').indexOf(this.getAttribute('data-value'));
this.checked = (profile.SupportedMediaTypes || '').split(',').indexOf(this.getAttribute('data-value')) != -1;
});
$('#chkEnableAlbumArtInDidl', page).checked(profile.EnableAlbumArtInDidl);
$('#chkEnableSingleImageLimit', page).checked(profile.EnableSingleAlbumArtLimit);
$('#chkEnableAlbumArtInDidl', page).prop('checked', profile.EnableAlbumArtInDidl);
$('#chkEnableSingleImageLimit', page).prop('checked', profile.EnableSingleAlbumArtLimit);
renderXmlDocumentAttributes(page, profile.XmlRootAttributes || []);
var idInfo = profile.Identification || {};
const idInfo = profile.Identification || {};
renderIdentificationHeaders(page, idInfo.Headers || []);
renderSubtitleProfiles(page, profile.SubtitleProfiles || []);
$('#txtInfoFriendlyName', page).val(profile.FriendlyName || '');
@ -51,11 +59,11 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
$('#txtAlbumArtMaxHeight', page).val(profile.MaxAlbumArtHeight || '');
$('#txtIconMaxWidth', page).val(profile.MaxIconWidth || '');
$('#txtIconMaxHeight', page).val(profile.MaxIconHeight || '');
$('#chkIgnoreTranscodeByteRangeRequests', page).checked(profile.IgnoreTranscodeByteRangeRequests);
$('#chkIgnoreTranscodeByteRangeRequests', page).prop('checked', profile.IgnoreTranscodeByteRangeRequests);
$('#txtMaxAllowedBitrate', page).val(profile.MaxStreamingBitrate || '');
$('#txtMusicStreamingTranscodingBitrate', page).val(profile.MusicStreamingTranscodingBitrate || '');
$('#chkRequiresPlainFolders', page).checked(profile.RequiresPlainFolders);
$('#chkRequiresPlainVideoItems', page).checked(profile.RequiresPlainVideoItems);
$('#chkRequiresPlainFolders', page).prop('checked', profile.RequiresPlainFolders);
$('#chkRequiresPlainVideoItems', page).prop('checked', profile.RequiresPlainVideoItems);
$('#txtProtocolInfo', page).val(profile.ProtocolInfo || '');
$('#txtXDlnaCap', page).val(profile.XDlnaCap || '');
$('#txtXDlnaDoc', page).val(profile.XDlnaDoc || '');
@ -65,7 +73,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
profile.ContainerProfiles = profile.ContainerProfiles || [];
profile.CodecProfiles = profile.CodecProfiles || [];
profile.ResponseProfiles = profile.ResponseProfiles || [];
var usersHtml = '<option></option>' + users.map(function (u) {
const usersHtml = '<option></option>' + users.map(function (u) {
return '<option value="' + u.Id + '">' + u.Name + '</option>';
}).join('');
$('#selectUser', page).html(usersHtml).val(profile.UserId || '');
@ -73,9 +81,9 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
function renderIdentificationHeaders(page, headers) {
var index = 0;
var html = '<div class="paperList">' + headers.map(function (h) {
var li = '<div class="listItem">';
let index = 0;
const html = '<div class="paperList">' + headers.map(function (h) {
let li = '<div class="listItem">';
li += '<span class="material-icons listItemIcon info"></span>';
li += '<div class="listItemBody">';
li += '<h3 class="listItemBodyText">' + h.Name + ': ' + (h.Value || '') + '</h3>';
@ -86,9 +94,9 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
index++;
return li;
}).join('') + '</div>';
var elem = $('.httpHeaderIdentificationList', page).html(html).trigger('create');
const elem = $('.httpHeaderIdentificationList', page).html(html).trigger('create');
$('.btnDeleteIdentificationHeader', elem).on('click', function () {
var itemIndex = parseInt(this.getAttribute('data-index'));
const itemIndex = parseInt(this.getAttribute('data-index'));
currentProfile.Identification.Headers.splice(itemIndex, 1);
renderIdentificationHeaders(page, currentProfile.Identification.Headers);
});
@ -103,10 +111,10 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
function editIdentificationHeader(page, header) {
isSubProfileNew = null == header;
isSubProfileNew = header == null;
header = header || {};
currentSubProfile = header;
var popup = $('#identificationHeaderPopup', page);
const popup = $('#identificationHeaderPopup', page);
$('#txtIdentificationHeaderName', popup).val(header.Name || '');
$('#txtIdentificationHeaderValue', popup).val(header.Value || '');
$('#selectMatchType', popup).val(header.Match || 'Equals');
@ -130,8 +138,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
function renderXmlDocumentAttributes(page, attribute) {
var html = '<div class="paperList">' + attribute.map(function (h) {
var li = '<div class="listItem">';
const html = '<div class="paperList">' + attribute.map(function (h) {
let li = '<div class="listItem">';
li += '<span class="material-icons listItemIcon info"></span>';
li += '<div class="listItemBody">';
li += '<h3 class="listItemBodyText">' + h.Name + ' = ' + (h.Value || '') + '</h3>';
@ -139,19 +147,19 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
li += '<button type="button" is="paper-icon-button-light" class="btnDeleteXmlAttribute listItemButton" data-index="0"><span class="material-icons delete"></span></button>';
return li += '</div>';
}).join('') + '</div>';
var elem = $('.xmlDocumentAttributeList', page).html(html).trigger('create');
const elem = $('.xmlDocumentAttributeList', page).html(html).trigger('create');
$('.btnDeleteXmlAttribute', elem).on('click', function () {
var itemIndex = parseInt(this.getAttribute('data-index'));
const itemIndex = parseInt(this.getAttribute('data-index'));
currentProfile.XmlRootAttributes.splice(itemIndex, 1);
renderXmlDocumentAttributes(page, currentProfile.XmlRootAttributes);
});
}
function editXmlDocumentAttribute(page, attribute) {
isSubProfileNew = null == attribute;
isSubProfileNew = attribute == null;
attribute = attribute || {};
currentSubProfile = attribute;
var popup = $('#xmlAttributePopup', page);
const popup = $('#xmlAttributePopup', page);
$('#txtXmlAttributeName', popup).val(attribute.Name || '');
$('#txtXmlAttributeValue', popup).val(attribute.Value || '');
openPopup(popup[0]);
@ -171,9 +179,9 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
function renderSubtitleProfiles(page, profiles) {
var index = 0;
var html = '<div class="paperList">' + profiles.map(function (h) {
var li = '<div class="listItem lnkEditSubProfile" data-index="' + index + '">';
let index = 0;
const html = '<div class="paperList">' + profiles.map(function (h) {
let li = '<div class="listItem lnkEditSubProfile" data-index="' + index + '">';
li += '<span class="material-icons listItemIcon info"></span>';
li += '<div class="listItemBody">';
li += '<h3 class="listItemBodyText">' + (h.Format || '') + '</h3>';
@ -183,23 +191,23 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
index++;
return li;
}).join('') + '</div>';
var elem = $('.subtitleProfileList', page).html(html).trigger('create');
const elem = $('.subtitleProfileList', page).html(html).trigger('create');
$('.btnDeleteProfile', elem).on('click', function () {
var itemIndex = parseInt(this.getAttribute('data-index'));
const itemIndex = parseInt(this.getAttribute('data-index'));
currentProfile.SubtitleProfiles.splice(itemIndex, 1);
renderSubtitleProfiles(page, currentProfile.SubtitleProfiles);
});
$('.lnkEditSubProfile', elem).on('click', function () {
var itemIndex = parseInt(this.getAttribute('data-index'));
const itemIndex = parseInt(this.getAttribute('data-index'));
editSubtitleProfile(page, currentProfile.SubtitleProfiles[itemIndex]);
});
}
function editSubtitleProfile(page, profile) {
isSubProfileNew = null == profile;
isSubProfileNew = profile == null;
profile = profile || {};
currentSubProfile = profile;
var popup = $('#subtitleProfilePopup', page);
const popup = $('#subtitleProfilePopup', page);
$('#txtSubtitleProfileFormat', popup).val(profile.Format || '');
$('#selectSubtitleProfileMethod', popup).val(profile.Method || '');
$('#selectSubtitleProfileDidlMode', popup).val(profile.DidlMode || '');
@ -244,44 +252,42 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
function renderDirectPlayProfiles(page, profiles) {
var html = '';
let html = '';
html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
var currentType;
for (var i = 0, length = profiles.length; i < length; i++) {
var profile = profiles[i];
let currentType;
for (const [index, profile] of profiles.entries()) {
if (profile.Type !== currentType) {
html += '<li data-role="list-divider">' + profile.Type + '</li>';
currentType = profile.Type;
}
html += '<div>';
html += '<a is="emby-linkbutton" href="#" class="lnkEditSubProfile" data-profileindex="' + i + '">';
html += '<a is="emby-linkbutton" href="#" class="lnkEditSubProfile" data-profileindex="' + index + '">';
html += '<p>' + globalize.translate('ValueContainer', profile.Container || allText) + '</p>';
if ('Video' == profile.Type) {
if (profile.Type == 'Video') {
html += '<p>' + globalize.translate('ValueVideoCodec', profile.VideoCodec || allText) + '</p>';
html += '<p>' + globalize.translate('ValueAudioCodec', profile.AudioCodec || allText) + '</p>';
} else {
if ('Audio' == profile.Type) {
if (profile.Type == 'Audio') {
html += '<p>' + globalize.translate('ValueCodec', profile.AudioCodec || allText) + '</p>';
}
}
html += '</a>';
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><span class="material-icons delete"></span></button>';
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + index + '"><span class="material-icons delete"></span></button>';
html += '</div>';
}
html += '</ul>';
var elem = $('.directPlayProfiles', page).html(html).trigger('create');
const elem = $('.directPlayProfiles', page).html(html).trigger('create');
$('.btnDeleteProfile', elem).on('click', function () {
var index = this.getAttribute('data-profileindex');
const index = this.getAttribute('data-profileindex');
deleteDirectPlayProfile(page, index);
});
$('.lnkEditSubProfile', elem).on('click', function () {
var index = parseInt(this.getAttribute('data-profileindex'));
const index = parseInt(this.getAttribute('data-profileindex'));
editDirectPlayProfile(page, currentProfile.DirectPlayProfiles[index]);
});
}
@ -292,10 +298,10 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
function editDirectPlayProfile(page, directPlayProfile) {
isSubProfileNew = null == directPlayProfile;
isSubProfileNew = directPlayProfile == null;
directPlayProfile = directPlayProfile || {};
currentSubProfile = directPlayProfile;
var popup = $('#popupEditDirectPlayProfile', page);
const popup = $('#popupEditDirectPlayProfile', page);
$('#selectDirectPlayProfileType', popup).val(directPlayProfile.Type || 'Video').trigger('change');
$('#txtDirectPlayContainer', popup).val(directPlayProfile.Container || '');
$('#txtDirectPlayAudioCodec', popup).val(directPlayProfile.AudioCodec || '');
@ -304,12 +310,12 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
function renderTranscodingProfiles(page, profiles) {
var html = '';
let html = '';
html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
var currentType;
let currentType;
for (var i = 0, length = profiles.length; i < length; i++) {
var profile = profiles[i];
for (let i = 0, length = profiles.length; i < length; i++) {
const profile = profiles[i];
if (profile.Type !== currentType) {
html += '<li data-role="list-divider">' + profile.Type + '</li>';
@ -321,11 +327,11 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
html += '<p>Protocol: ' + (profile.Protocol || 'Http') + '</p>';
html += '<p>' + globalize.translate('ValueContainer', profile.Container || allText) + '</p>';
if ('Video' == profile.Type) {
if (profile.Type == 'Video') {
html += '<p>' + globalize.translate('ValueVideoCodec', profile.VideoCodec || allText) + '</p>';
html += '<p>' + globalize.translate('ValueAudioCodec', profile.AudioCodec || allText) + '</p>';
} else {
if ('Audio' == profile.Type) {
if (profile.Type == 'Audio') {
html += '<p>' + globalize.translate('ValueCodec', profile.AudioCodec || allText) + '</p>';
}
}
@ -336,30 +342,30 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
html += '</ul>';
var elem = $('.transcodingProfiles', page).html(html).trigger('create');
const elem = $('.transcodingProfiles', page).html(html).trigger('create');
$('.btnDeleteProfile', elem).on('click', function () {
var index = this.getAttribute('data-profileindex');
const index = this.getAttribute('data-profileindex');
deleteTranscodingProfile(page, index);
});
$('.lnkEditSubProfile', elem).on('click', function () {
var index = parseInt(this.getAttribute('data-profileindex'));
const index = parseInt(this.getAttribute('data-profileindex'));
editTranscodingProfile(page, currentProfile.TranscodingProfiles[index]);
});
}
function editTranscodingProfile(page, transcodingProfile) {
isSubProfileNew = null == transcodingProfile;
isSubProfileNew = transcodingProfile == null;
transcodingProfile = transcodingProfile || {};
currentSubProfile = transcodingProfile;
var popup = $('#transcodingProfilePopup', page);
const popup = $('#transcodingProfilePopup', page);
$('#selectTranscodingProfileType', popup).val(transcodingProfile.Type || 'Video').trigger('change');
$('#txtTranscodingContainer', popup).val(transcodingProfile.Container || '');
$('#txtTranscodingAudioCodec', popup).val(transcodingProfile.AudioCodec || '');
$('#txtTranscodingVideoCodec', popup).val(transcodingProfile.VideoCodec || '');
$('#selectTranscodingProtocol', popup).val(transcodingProfile.Protocol || 'Http');
$('#chkEnableMpegtsM2TsMode', popup).checked(transcodingProfile.EnableMpegtsM2TsMode || false);
$('#chkEstimateContentLength', popup).checked(transcodingProfile.EstimateContentLength || false);
$('#chkReportByteRangeRequests', popup).checked('Bytes' == transcodingProfile.TranscodeSeekInfo);
$('#chkEnableMpegtsM2TsMode', popup).prop('checked', transcodingProfile.EnableMpegtsM2TsMode || false);
$('#chkEstimateContentLength', popup).prop('checked', transcodingProfile.EstimateContentLength || false);
$('#chkReportByteRangeRequests', popup).prop('checked', transcodingProfile.TranscodeSeekInfo == 'Bytes');
$('.radioTabButton:first', popup).trigger('click');
openPopup(popup[0]);
}
@ -376,9 +382,9 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
currentSubProfile.VideoCodec = $('#txtTranscodingVideoCodec', page).val();
currentSubProfile.Protocol = $('#selectTranscodingProtocol', page).val();
currentSubProfile.Context = 'Streaming';
currentSubProfile.EnableMpegtsM2TsMode = $('#chkEnableMpegtsM2TsMode', page).checked();
currentSubProfile.EstimateContentLength = $('#chkEstimateContentLength', page).checked();
currentSubProfile.TranscodeSeekInfo = $('#chkReportByteRangeRequests', page).checked() ? 'Bytes' : 'Auto';
currentSubProfile.EnableMpegtsM2TsMode = $('#chkEnableMpegtsM2TsMode', page).is(':checked');
currentSubProfile.EstimateContentLength = $('#chkEstimateContentLength', page).is(':checked');
currentSubProfile.TranscodeSeekInfo = $('#chkReportByteRangeRequests', page).is(':checked') ? 'Bytes' : 'Auto';
if (isSubProfileNew) {
currentProfile.TranscodingProfiles.push(currentSubProfile);
@ -390,12 +396,12 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
function renderContainerProfiles(page, profiles) {
var html = '';
let html = '';
html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
var currentType;
let currentType;
for (var i = 0, length = profiles.length; i < length; i++) {
var profile = profiles[i];
for (let i = 0, length = profiles.length; i < length; i++) {
const profile = profiles[i];
if (profile.Type !== currentType) {
html += '<li data-role="list-divider">' + profile.Type + '</li>';
@ -420,13 +426,13 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
html += '</ul>';
var elem = $('.containerProfiles', page).html(html).trigger('create');
const elem = $('.containerProfiles', page).html(html).trigger('create');
$('.btnDeleteProfile', elem).on('click', function () {
var index = this.getAttribute('data-profileindex');
const index = this.getAttribute('data-profileindex');
deleteContainerProfile(page, index);
});
$('.lnkEditSubProfile', elem).on('click', function () {
var index = parseInt(this.getAttribute('data-profileindex'));
const index = parseInt(this.getAttribute('data-profileindex'));
editContainerProfile(page, currentProfile.ContainerProfiles[index]);
});
}
@ -437,10 +443,10 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
function editContainerProfile(page, containerProfile) {
isSubProfileNew = null == containerProfile;
isSubProfileNew = containerProfile == null;
containerProfile = containerProfile || {};
currentSubProfile = containerProfile;
var popup = $('#containerProfilePopup', page);
const popup = $('#containerProfilePopup', page);
$('#selectContainerProfileType', popup).val(containerProfile.Type || 'Video').trigger('change');
$('#txtContainerProfileContainer', popup).val(containerProfile.Container || '');
$('.radioTabButton:first', popup).trigger('click');
@ -461,13 +467,13 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
function renderCodecProfiles(page, profiles) {
var html = '';
let html = '';
html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
var currentType;
let currentType;
for (var i = 0, length = profiles.length; i < length; i++) {
var profile = profiles[i];
var type = profile.Type.replace('VideoAudio', 'Video Audio');
for (let i = 0, length = profiles.length; i < length; i++) {
const profile = profiles[i];
const type = profile.Type.replace('VideoAudio', 'Video Audio');
if (type !== currentType) {
html += '<li data-role="list-divider">' + type + '</li>';
@ -492,13 +498,13 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
html += '</ul>';
var elem = $('.codecProfiles', page).html(html).trigger('create');
const elem = $('.codecProfiles', page).html(html).trigger('create');
$('.btnDeleteProfile', elem).on('click', function () {
var index = this.getAttribute('data-profileindex');
const index = this.getAttribute('data-profileindex');
deleteCodecProfile(page, index);
});
$('.lnkEditSubProfile', elem).on('click', function () {
var index = parseInt(this.getAttribute('data-profileindex'));
const index = parseInt(this.getAttribute('data-profileindex'));
editCodecProfile(page, currentProfile.CodecProfiles[index]);
});
}
@ -509,10 +515,10 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
function editCodecProfile(page, codecProfile) {
isSubProfileNew = null == codecProfile;
isSubProfileNew = codecProfile == null;
codecProfile = codecProfile || {};
currentSubProfile = codecProfile;
var popup = $('#codecProfilePopup', page);
const popup = $('#codecProfilePopup', page);
$('#selectCodecProfileType', popup).val(codecProfile.Type || 'Video').trigger('change');
$('#txtCodecProfileCodec', popup).val(codecProfile.Codec || '');
$('.radioTabButton:first', popup).trigger('click');
@ -533,12 +539,12 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
function renderResponseProfiles(page, profiles) {
var html = '';
let html = '';
html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
var currentType;
let currentType;
for (var i = 0, length = profiles.length; i < length; i++) {
var profile = profiles[i];
for (let i = 0, length = profiles.length; i < length; i++) {
const profile = profiles[i];
if (profile.Type !== currentType) {
html += '<li data-role="list-divider">' + profile.Type + '</li>';
@ -549,11 +555,11 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
html += '<a is="emby-linkbutton" href="#" class="lnkEditSubProfile" data-profileindex="' + i + '">';
html += '<p>' + globalize.translate('ValueContainer', profile.Container || allText) + '</p>';
if ('Video' == profile.Type) {
if (profile.Type == 'Video') {
html += '<p>' + globalize.translate('ValueVideoCodec', profile.VideoCodec || allText) + '</p>';
html += '<p>' + globalize.translate('ValueAudioCodec', profile.AudioCodec || allText) + '</p>';
} else {
if ('Audio' == profile.Type) {
if (profile.Type == 'Audio') {
html += '<p>' + globalize.translate('ValueCodec', profile.AudioCodec || allText) + '</p>';
}
}
@ -572,13 +578,13 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
html += '</ul>';
var elem = $('.mediaProfiles', page).html(html).trigger('create');
const elem = $('.mediaProfiles', page).html(html).trigger('create');
$('.btnDeleteProfile', elem).on('click', function () {
var index = this.getAttribute('data-profileindex');
const index = this.getAttribute('data-profileindex');
deleteResponseProfile(page, index);
});
$('.lnkEditSubProfile', elem).on('click', function () {
var index = parseInt(this.getAttribute('data-profileindex'));
const index = parseInt(this.getAttribute('data-profileindex'));
editResponseProfile(page, currentProfile.ResponseProfiles[index]);
});
}
@ -589,10 +595,10 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
function editResponseProfile(page, responseProfile) {
isSubProfileNew = null == responseProfile;
isSubProfileNew = responseProfile == null;
responseProfile = responseProfile || {};
currentSubProfile = responseProfile;
var popup = $('#responseProfilePopup', page);
const popup = $('#responseProfilePopup', page);
$('#selectResponseProfileType', popup).val(responseProfile.Type || 'Video').trigger('change');
$('#txtResponseProfileContainer', popup).val(responseProfile.Container || '');
$('#txtResponseProfileAudioCodec', popup).val(responseProfile.AudioCodec || '');
@ -618,7 +624,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
function saveProfile(page, profile) {
updateProfile(page, profile);
var id = getParameterByName('id');
const id = getParameterByName('id');
if (id) {
ApiClient.ajax({
@ -627,7 +633,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
data: JSON.stringify(profile),
contentType: 'application/json'
}).then(function () {
require(['toast'], function (toast) {
import('toast').then(({default: toast}) => {
toast('Settings saved.');
});
}, Dashboard.processErrorResponse);
@ -647,8 +653,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
function updateProfile(page, profile) {
profile.Name = $('#txtName', page).val();
profile.EnableAlbumArtInDidl = $('#chkEnableAlbumArtInDidl', page).checked();
profile.EnableSingleAlbumArtLimit = $('#chkEnableSingleImageLimit', page).checked();
profile.EnableAlbumArtInDidl = $('#chkEnableAlbumArtInDidl', page).is(':checked');
profile.EnableSingleAlbumArtLimit = $('#chkEnableSingleImageLimit', page).is(':checked');
profile.SupportedMediaTypes = $('.chkMediaType:checked', page).get().map(function (c) {
return c.getAttribute('data-value');
}).join(',');
@ -675,9 +681,9 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
profile.MaxAlbumArtHeight = $('#txtAlbumArtMaxHeight', page).val();
profile.MaxIconWidth = $('#txtIconMaxWidth', page).val();
profile.MaxIconHeight = $('#txtIconMaxHeight', page).val();
profile.RequiresPlainFolders = $('#chkRequiresPlainFolders', page).checked();
profile.RequiresPlainVideoItems = $('#chkRequiresPlainVideoItems', page).checked();
profile.IgnoreTranscodeByteRangeRequests = $('#chkIgnoreTranscodeByteRangeRequests', page).checked();
profile.RequiresPlainFolders = $('#chkRequiresPlainFolders', page).is(':checked');
profile.RequiresPlainVideoItems = $('#chkRequiresPlainVideoItems', page).is(':checked');
profile.IgnoreTranscodeByteRangeRequests = $('#chkIgnoreTranscodeByteRangeRequests', page).is(':checked');
profile.MaxStreamingBitrate = $('#txtMaxAllowedBitrate', page).val();
profile.MusicStreamingTranscodingBitrate = $('#txtMusicStreamingTranscodingBitrate', page).val();
profile.ProtocolInfo = $('#txtProtocolInfo', page).val();
@ -687,36 +693,36 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
profile.UserId = $('#selectUser', page).val();
}
var currentProfile;
var currentSubProfile;
var isSubProfileNew;
var allText = globalize.translate('LabelAll');
let currentProfile;
let currentSubProfile;
let isSubProfileNew;
const allText = globalize.translate('All');
$(document).on('pageinit', '#dlnaProfilePage', function () {
var page = this;
const page = this;
$('.radioTabButton', page).on('click', function () {
$(this).siblings().removeClass('ui-btn-active');
$(this).addClass('ui-btn-active');
var value = 'A' == this.tagName ? this.getAttribute('data-value') : this.value;
var elem = $('.' + value, page);
const value = this.tagName == 'A' ? this.getAttribute('data-value') : this.value;
const elem = $('.' + value, page);
elem.siblings('.tabContent').hide();
elem.show();
});
$('#selectDirectPlayProfileType', page).on('change', function () {
if ('Video' == this.value) {
if (this.value == 'Video') {
$('#fldDirectPlayVideoCodec', page).show();
} else {
$('#fldDirectPlayVideoCodec', page).hide();
}
if ('Photo' == this.value) {
if (this.value == 'Photo') {
$('#fldDirectPlayAudioCodec', page).hide();
} else {
$('#fldDirectPlayAudioCodec', page).show();
}
});
$('#selectTranscodingProfileType', page).on('change', function () {
if ('Video' == this.value) {
if (this.value == 'Video') {
$('#fldTranscodingVideoCodec', page).show();
$('#fldTranscodingProtocol', page).show();
$('#fldEnableMpegtsM2TsMode', page).show();
@ -726,7 +732,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
$('#fldEnableMpegtsM2TsMode', page).hide();
}
if ('Photo' == this.value) {
if (this.value == 'Photo') {
$('#fldTranscodingAudioCodec', page).hide();
$('#fldEstimateContentLength', page).hide();
$('#fldReportByteRangeRequests', page).hide();
@ -737,13 +743,13 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
}
});
$('#selectResponseProfileType', page).on('change', function () {
if ('Video' == this.value) {
if (this.value == 'Video') {
$('#fldResponseProfileVideoCodec', page).show();
} else {
$('#fldResponseProfileVideoCodec', page).hide();
}
if ('Photo' == this.value) {
if (this.value == 'Photo') {
$('#fldResponseProfileAudioCodec', page).hide();
} else {
$('#fldResponseProfileAudioCodec', page).show();
@ -783,7 +789,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
$('.xmlAttributeForm').off('submit', DlnaProfilePage.onXmlAttributeFormSubmit).on('submit', DlnaProfilePage.onXmlAttributeFormSubmit);
$('.subtitleProfileForm').off('submit', DlnaProfilePage.onSubtitleProfileFormSubmit).on('submit', DlnaProfilePage.onSubtitleProfileFormSubmit);
}).on('pageshow', '#dlnaProfilePage', function () {
var page = this;
const page = this;
$('#radioInfo', page).trigger('click');
loadProfile(page);
});
@ -826,4 +832,5 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
return false;
}
};
});
/* eslint-enable indent */

32
src/controllers/dashboard/dlna/profiles.html Normal file
View file

@ -0,0 +1,32 @@
<div id="dlnaProfilesPage" data-role="page" class="page type-interior dlnaPage withTabs">
<div>
<div class="content-primary">
<div class="readOnlyContent">
<div class="verticalSection verticalSection-extrabottompadding">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${HeaderCustomDlnaProfiles}</h2>
<a is="emby-linkbutton" href="dlnaprofile.html" class="fab submit" style="margin:0 0 0 1em">
<span class="material-icons add"></span>
</a>
</div>
<p>${CustomDlnaProfilesHelp}</p>
<div class="customProfiles"></div>
</div>
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${HeaderSystemDlnaProfiles}</h2>
</div>
<p>${SystemDlnaProfilesHelp}</p>
<div class="systemProfiles"></div>
</div>
</div>
</div>
</div>
</div>

33
src/controllers/dashboard/dlna/profiles.js
View file

@ -1,5 +1,11 @@
define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-button'], function ($, globalize, loading, libraryMenu) {
'use strict';
import $ from 'jQuery';
import globalize from 'globalize';
import loading from 'loading';
import libraryMenu from 'libraryMenu';
import 'listViewStyle';
import 'emby-button';
/* eslint-disable indent */
function loadProfiles(page) {
loading.show();
@ -12,25 +18,25 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-
function renderUserProfiles(page, profiles) {
renderProfiles(page, page.querySelector('.customProfiles'), profiles.filter(function (p) {
return 'User' == p.Type;
return p.Type == 'User';
}));
}
function renderSystemProfiles(page, profiles) {
renderProfiles(page, page.querySelector('.systemProfiles'), profiles.filter(function (p) {
return 'System' == p.Type;
return p.Type == 'System';
}));
}
function renderProfiles(page, element, profiles) {
var html = '';
let html = '';
if (profiles.length) {
html += '<div class="paperList">';
}
for (var i = 0, length = profiles.length; i < length; i++) {
var profile = profiles[i];
for (let i = 0, length = profiles.length; i < length; i++) {
const profile = profiles[i];
html += '<div class="listItem listItem-border">';
html += '<span class="listItemIcon material-icons live_tv"></span>';
html += '<div class="listItemBody two-line">';
@ -39,8 +45,8 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-
html += '</a>';
html += '</div>';
if ('User' == profile.Type) {
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile" data-profileid="' + profile.Id + '" title="' + globalize.translate('ButtonDelete') + '"><span class="material-icons delete"></span></button>';
if (profile.Type == 'User') {
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile" data-profileid="' + profile.Id + '" title="' + globalize.translate('Delete') + '"><span class="material-icons delete"></span></button>';
}
html += '</div>';
@ -52,13 +58,13 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-
element.innerHTML = html;
$('.btnDeleteProfile', element).on('click', function () {
var id = this.getAttribute('data-profileid');
const id = this.getAttribute('data-profileid');
deleteProfile(page, id);
});
}
function deleteProfile(page, id) {
require(['confirm'], function (confirm) {
import('confirm').then(({default: confirm}) => {
confirm(globalize.translate('MessageConfirmProfileDeletion'), globalize.translate('HeaderConfirmProfileDeletion')).then(function () {
loading.show();
ApiClient.ajax({
@ -75,7 +81,7 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-
function getTabs() {
return [{
href: 'dlnasettings.html',
name: globalize.translate('TabSettings')
name: globalize.translate('Settings')
}, {
href: 'dlnaprofiles.html',
name: globalize.translate('TabProfiles')
@ -86,4 +92,5 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-
libraryMenu.setTabs('dlna', 1, getTabs);
loadProfiles(this);
});
});
/* eslint-enable indent */

69
src/controllers/dashboard/dlna/settings.html Normal file
View file

@ -0,0 +1,69 @@
<div id="dlnaSettingsPage" data-role="page" class="page type-interior withTabs">
<div>
<div class="content-primary">
<form class="dlnaSettingsForm">
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${Settings}</h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/networking/dlna.html">${Help}</a>
</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnablePlayTo" />
<span>${LabelEnableDlnaPlayTo}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelEnableDlnaPlayToHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableDlnaDebugLogging" />
<span>${LabelEnableDlnaDebugLogging}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelEnableDlnaDebugLoggingHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="number" id="txtClientDiscoveryInterval" min="1" max="300" label="${LabelEnableDlnaClientDiscoveryInterval}" />
<div class="fieldDescription">${LabelEnableDlnaClientDiscoveryIntervalHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableServer" />
<span>${LabelEnableDlnaServer}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelEnableDlnaServerHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkBlastAliveMessages" />
<span>${LabelEnableBlastAliveMessages}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelEnableBlastAliveMessagesHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="number" id="txtBlastInterval" min="1" max="3600" label="${LabelBlastMessageInterval}" />
<div class="fieldDescription">${LabelBlastMessageIntervalHelp}</div>
</div>
<div class="selectContainer">
<select is="emby-select" id="selectUser" data-mini="true" label="${LabelDefaultUser}"></select>
<div class="fieldDescription">${LabelDefaultUserHelp}</div>
</div>
<div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
</div>
</form>
</div>
</div>
</div>

31
src/controllers/dashboard/dlna/settings.js
View file

@ -1,14 +1,18 @@
define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function ($, loading, libraryMenu, globalize) {
'use strict';
import $ from 'jQuery';
import loading from 'loading';
import libraryMenu from 'libraryMenu';
import globalize from 'globalize';
/* eslint-disable indent */
function loadPage(page, config, users) {
page.querySelector('#chkEnablePlayTo').checked = config.EnablePlayTo;
page.querySelector('#chkEnableDlnaDebugLogging').checked = config.EnableDebugLog;
$('#txtClientDiscoveryInterval', page).val(config.ClientDiscoveryIntervalSeconds);
$('#chkEnableServer', page).checked(config.EnableServer);
$('#chkBlastAliveMessages', page).checked(config.BlastAliveMessages);
$('#chkEnableServer', page).prop('checked', config.EnableServer);
$('#chkBlastAliveMessages', page).prop('checked', config.BlastAliveMessages);
$('#txtBlastInterval', page).val(config.BlastAliveMessageIntervalSeconds);
var usersHtml = users.map(function (u) {
const usersHtml = users.map(function (u) {
return '<option value="' + u.Id + '">' + u.Name + '</option>';
}).join('');
$('#selectUser', page).html(usersHtml).val(config.DefaultUserId || '');
@ -17,13 +21,13 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
function onSubmit() {
loading.show();
var form = this;
const form = this;
ApiClient.getNamedConfiguration('dlna').then(function (config) {
config.EnablePlayTo = form.querySelector('#chkEnablePlayTo').checked;
config.EnableDebugLog = form.querySelector('#chkEnableDlnaDebugLogging').checked;
config.ClientDiscoveryIntervalSeconds = $('#txtClientDiscoveryInterval', form).val();
config.EnableServer = $('#chkEnableServer', form).checked();
config.BlastAliveMessages = $('#chkBlastAliveMessages', form).checked();
config.EnableServer = $('#chkEnableServer', form).is(':checked');
config.BlastAliveMessages = $('#chkBlastAliveMessages', form).is(':checked');
config.BlastAliveMessageIntervalSeconds = $('#txtBlastInterval', form).val();
config.DefaultUserId = $('#selectUser', form).val();
ApiClient.updateNamedConfiguration('dlna', config).then(Dashboard.processServerConfigurationUpdateResult);
@ -34,7 +38,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
function getTabs() {
return [{
href: 'dlnasettings.html',
name: globalize.translate('TabSettings')
name: globalize.translate('Settings')
}, {
href: 'dlnaprofiles.html',
name: globalize.translate('TabProfiles')
@ -46,11 +50,12 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
}).on('pageshow', '#dlnaSettingsPage', function () {
libraryMenu.setTabs('dlna', 0, getTabs);
loading.show();
var page = this;
var promise1 = ApiClient.getNamedConfiguration('dlna');
var promise2 = ApiClient.getUsers();
const page = this;
const promise1 = ApiClient.getNamedConfiguration('dlna');
const promise2 = ApiClient.getUsers();
Promise.all([promise1, promise2]).then(function (responses) {
loadPage(page, responses[0], responses[1]);
});
});
});
/* eslint-enable indent */

185
src/controllers/dashboard/encodingsettings.html Normal file
View file

@ -0,0 +1,185 @@
<div id="encodingSettingsPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs">
<div>
<div class="content-primary">
<form class="encodingSettingsForm">
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${Transcoding}</h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/transcoding.html">${Help}</a>
</div>
</div>
<div class="selectContainer">
<select is="emby-select" id="selectVideoDecoder" label="${LabelHardwareAccelerationType}">
<option value="">${None}</option>
<option value="amf">AMD AMF</option>
<option value="qsv">Intel Quick Sync</option>
<option value="mediacodec">MediaCodec Android</option>
<option value="omx">OpenMAX OMX</option>
<option value="nvenc">Nvidia NVENC</option>
<option value="vaapi">Video Acceleration API (VAAPI)</option>
<option value="h264_v4l2m2m">Exynos V4L2 MFC</option>
<option value="videotoolbox">Video ToolBox</option>
</select>
<div class="fieldDescription">
<a is="emby-linkbutton" rel="noopener noreferrer" class="button-link" href="https://docs.jellyfin.org/general/administration/hardware-acceleration.html" target="_blank">${LabelHardwareAccelerationTypeHelp}</a>
</div>
</div>
<div class="inputContainer hide fldVaapiDevice">
<input is="emby-input" type="text" id="txtVaapiDevice" label="${LabelVaapiDevice}" />
<div class="fieldDescription">${LabelVaapiDeviceHelp}</div>
</div>
<div class="hardwareAccelerationOptions hide">
<div class="checkboxListContainer decodingCodecsList">
<h3 class="checkboxListLabel">${LabelEnableHardwareDecodingFor}</h3>
<div class="checkboxList">
<label>
<input type="checkbox" is="emby-checkbox" class="chkDecodeCodec" data-codec="h264" data-types="amf,qsv,nvenc,vaapi,omx,mediacodec,videotoolbox" />
<span>H264</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" class="chkDecodeCodec" data-codec="hevc" data-types="amf,qsv,nvenc,vaapi,mediacodec,videotoolbox" />
<span>HEVC</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" class="chkDecodeCodec" data-codec="mpeg2video" data-types="amf,qsv,nvenc,vaapi,omx,mediacodec,videotoolbox" />
<span>MPEG2</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" class="chkDecodeCodec" data-codec="mpeg4" data-types="amf,nvenc,omx,mediacodec,videotoolbox" />
<span>MPEG4</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" class="chkDecodeCodec" data-codec="vc1" data-types="amf,qsv,nvenc,vaapi,omx,videotoolbox" />
<span>VC1</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" class="chkDecodeCodec" data-codec="vp8" data-types="qsv,nvenc,vaapi,mediacodec,videotoolbox" />
<span>VP8</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" class="chkDecodeCodec" data-codec="vp9" data-types="amf,qsv,nvenc,vaapi,mediacodec,videotoolbox" />
<span>VP9</span>
</label>
</div>
</div>
<div class="checkboxListContainer">
<label>
<input type="checkbox" is="emby-checkbox" id="chkDecodingColorDepth10Hevc" />
<span>${EnableDecodingColorDepth10Hevc}</span>
</label>
</div>
<div class="checkboxListContainer">
<label>
<input type="checkbox" is="emby-checkbox" id="chkDecodingColorDepth10Vp9" />
<span>${EnableDecodingColorDepth10Vp9}</span>
</label>
</div>
<div class="checkboxListContainer">
<div class="checkboxList">
<label>
<input type="checkbox" is="emby-checkbox" id="chkHardwareEncoding" />
<span>${EnableHardwareEncoding}</span>
</label>
</div>
</div>
</div>
<div class="selectContainer">
<select is="emby-select" id="selectThreadCount" label="${LabelTranscodingThreadCount}">
<option value="-1">${Auto}</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="0">${OptionMax}</option>
</select>
<div class="fieldDescription">${LabelTranscodingThreadCountHelp}</div>
</div>
<div class="inputContainer fldEncoderPath">
<div style="display: flex; align-items: center;">
<div style="flex-grow:1;">
<input is="emby-input" class="txtEncoderPath" label="${LabelffmpegPath}" autocomplete="off" />
</div>
<button type="button" is="paper-icon-button-light" id="btnSelectEncoderPath" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
</div>
<div class="fieldDescription">
<div>${LabelffmpegPathHelp}</div>
</div>
</div>
<div class="inputContainer">
<div style="display: flex; align-items: center;">
<div style="flex-grow:1;">
<input is="emby-input" id="txtTranscodingTempPath" label="${LabelTranscodePath}" autocomplete="off" />
</div>
<button type="button" is="paper-icon-button-light" id="btnSelectTranscodingTempPath" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
</div>
<div class="fieldDescription">${LabelTranscodingTempPathHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="number" id="txtDownMixAudioBoost" pattern="[0-9]*" required="required" min=".5" max="3" step=".1" label="${LabelDownMixAudioScale}" />
<div class="fieldDescription">${LabelDownMixAudioScaleHelp}</div>
</div>
<div class="selectContainer">
<select is="emby-select" id="selectEncoderPreset" label="${LabelEncoderPreset}">
<option value="">${Auto}</option>
<option value="veryslow">veryslow</option>
<option value="slower">slower</option>
<option value="slow">slow</option>
<option value="medium">medium</option>
<option value="fast">fast</option>
<option value="faster">faster</option>
<option value="veryfast">veryfast</option>
<option value="superfast">superfast</option>
<option value="ultrafast">ultrafast</option>
</select>
<div class="fieldDescription">${EncoderPresetHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="number" id="txtH264Crf" pattern="[0-9]*" min="0" max="51" step="1" label="${LabelH264Crf}" />
<div class="fieldDescription">${H264CrfHelp}</div>
</div>
<div class="selectContainer">
<select is="emby-select" id="selectDeinterlaceMethod" label="${LabelDeinterlaceMethod}">
<option value="yadif">${Yadif}</option>
<option value="yadif_bob">${YadifBob}</option>
</select>
<div class="fieldDescription">${DeinterlaceMethodHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="chkEnableSubtitleExtraction" />
<span>${AllowOnTheFlySubtitleExtraction}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${AllowOnTheFlySubtitleExtractionHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="chkEnableThrottling" />
<span>${AllowFfmpegThrottling}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${AllowFfmpegThrottlingHelp}</div>
</div>
<div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
</div>
</form>
</div>
</div>
</div>

57
src/controllers/dashboard/encodingsettings.js
View file

@ -1,10 +1,17 @@
define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, loading, globalize, dom, libraryMenu) {
'use strict';
import $ from 'jQuery';
import loading from 'loading';
import globalize from 'globalize';
import dom from 'dom';
import libraryMenu from 'libraryMenu';
/* eslint-disable indent */
function loadPage(page, config, systemInfo) {
Array.prototype.forEach.call(page.querySelectorAll('.chkDecodeCodec'), function (c) {
c.checked = -1 !== (config.HardwareDecodingCodecs || []).indexOf(c.getAttribute('data-codec'));
c.checked = (config.HardwareDecodingCodecs || []).indexOf(c.getAttribute('data-codec')) !== -1;
});
page.querySelector('#chkDecodingColorDepth10Hevc').checked = config.EnableDecodingColorDepth10Hevc;
page.querySelector('#chkDecodingColorDepth10Vp9').checked = config.EnableDecodingColorDepth10Vp9;
page.querySelector('#chkHardwareEncoding').checked = config.EnableHardwareEncoding;
$('#selectVideoDecoder', page).val(config.HardwareAccelerationType);
$('#selectThreadCount', page).val(config.EncodingThreadCount);
@ -25,10 +32,10 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
function onSaveEncodingPathFailure(response) {
loading.hide();
var msg = '';
let msg = '';
msg = globalize.translate('FFmpegSavePathNotFound');
require(['alert'], function (alert) {
import('alert').then(({default: alert}) => {
alert(msg);
});
}
@ -38,18 +45,19 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
return ApiClient.ajax({
url: ApiClient.getUrl('System/MediaEncoder/Path'),
type: 'POST',
data: {
data: JSON.stringify({
Path: form.querySelector('.txtEncoderPath').value,
PathType: 'Custom'
}
}),
contentType: 'application/json'
}).then(Dashboard.processServerConfigurationUpdateResult, onSaveEncodingPathFailure);
});
}
function onSubmit() {
var form = this;
const form = this;
var onDecoderConfirmed = function () {
const onDecoderConfirmed = function () {
loading.show();
ApiClient.getNamedConfiguration('encoding').then(function (config) {
config.DownMixAudioBoost = $('#txtDownMixAudioBoost', form).val();
@ -67,12 +75,14 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
}), function (c) {
return c.getAttribute('data-codec');
});
config.EnableDecodingColorDepth10Hevc = form.querySelector('#chkDecodingColorDepth10Hevc').checked;
config.EnableDecodingColorDepth10Vp9 = form.querySelector('#chkDecodingColorDepth10Vp9').checked;
config.EnableHardwareEncoding = form.querySelector('#chkHardwareEncoding').checked;
ApiClient.updateNamedConfiguration('encoding', config).then(function () {
updateEncoder(form);
}, function () {
require(['alert'], function (alert) {
alert(globalize.translate('DefaultErrorMessage'));
import('alert').then(({default: alert}) => {
alert(globalize.translate('ErrorDefault'));
});
Dashboard.processServerConfigurationUpdateResult();
@ -81,7 +91,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
};
if ($('#selectVideoDecoder', form).val()) {
require(['alert'], function (alert) {
import('alert').then(({default: alert}) => {
alert({
title: globalize.translate('TitleHardwareAcceleration'),
text: globalize.translate('HardwareAccelerationWarning')
@ -96,9 +106,9 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
function setDecodingCodecsVisible(context, value) {
value = value || '';
var any;
let any;
Array.prototype.forEach.call(context.querySelectorAll('.chkDecodeCodec'), function (c) {
if (-1 === c.getAttribute('data-types').split(',').indexOf(value)) {
if (c.getAttribute('data-types').split(',').indexOf(value) === -1) {
dom.parentWithTag(c, 'LABEL').classList.add('hide');
} else {
dom.parentWithTag(c, 'LABEL').classList.remove('hide');
@ -119,7 +129,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
name: globalize.translate('Transcoding')
}, {
href: 'playbackconfiguration.html',
name: globalize.translate('TabResumeSettings')
name: globalize.translate('ButtonResume')
}, {
href: 'streamingsettings.html',
name: globalize.translate('TabStreaming')
@ -127,9 +137,9 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
}
$(document).on('pageinit', '#encodingSettingsPage', function () {
var page = this;
const page = this;
page.querySelector('#selectVideoDecoder').addEventListener('change', function () {
if ('vaapi' == this.value) {
if (this.value == 'vaapi') {
page.querySelector('.fldVaapiDevice').classList.remove('hide');
page.querySelector('#txtVaapiDevice').setAttribute('required', 'required');
} else {
@ -146,8 +156,8 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
setDecodingCodecsVisible(page, this.value);
});
$('#btnSelectEncoderPath', page).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser();
import('directorybrowser').then(({default: directoryBrowser}) => {
const picker = new directoryBrowser();
picker.show({
includeFiles: true,
callback: function (path) {
@ -161,8 +171,8 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
});
});
$('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser();
import('directorybrowser').then(({default: directoryBrowser}) => {
const picker = new directoryBrowser();
picker.show({
callback: function (path) {
if (path) {
@ -181,11 +191,12 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
}).on('pageshow', '#encodingSettingsPage', function () {
loading.show();
libraryMenu.setTabs('playback', 0, getTabs);
var page = this;
const page = this;
ApiClient.getNamedConfiguration('encoding').then(function (config) {
ApiClient.getSystemInfo().then(function (systemInfo) {
loadPage(page, config, systemInfo);
});
});
});
});
/* eslint-enable indent */

72
src/controllers/dashboard/general.html Normal file
View file

@ -0,0 +1,72 @@
<div id="dashboardGeneralPage" data-role="page" class="page type-interior dashboardHomePage">
<div>
<div class="content-primary">
<form class="dashboardGeneralForm">
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${Settings}</h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/settings.html">${Help}</a>
</div>
</div>
<div class="verticalSection">
<div class="inputContainer">
<input is="emby-input" type="text" id="txtServerName" label="${LabelServerName}" />
<div class="fieldDescription">${LabelServerNameHelp}</div>
</div>
<div class="selectContainer">
<select is="emby-select" id="selectLocalizationLanguage" label="${LabelPreferredDisplayLanguage}"></select>
<div class="fieldDescription">
<div>${LabelDisplayLanguageHelp}</div>
<div style="margin-top: .25em;">
<a is="emby-linkbutton" rel="noopener noreferrer" class="button-link" href="https://docs.jellyfin.org/general/contributing/index.html" target="_blank">${LearnHowYouCanContribute}</a>
</div>
</div>
</div>
</div>
<div class="verticalSection verticalSection-extrabottompadding">
<h2>${HeaderPaths}</h2>
<div class="inputContainer">
<div style="display: flex; align-items: center;">
<div style="flex-grow:1;">
<input is="emby-input" id="txtCachePath" label="${LabelCachePath}" autocomplete="off" />
</div>
<button type="button" is="paper-icon-button-light" id="btnSelectCachePath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
</div>
<div class="fieldDescription">${LabelCachePathHelp}</div>
</div>
<div class="inputContainer">
<div style="display: flex; align-items: center;">
<div style="flex-grow:1;">
<input is="emby-input" id="txtMetadataPath" label="${LabelMetadataPath}" autocomplete="off" />
</div>
<button type="button" is="paper-icon-button-light" id="btnSelectMetadataPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
</div>
<div class="fieldDescription">${LabelMetadataPathHelp}</div>
<input type="hidden" id="txtMetadataNetworkPath" />
</div>
</div>
<div class="verticalSection">
<h2>${HeaderBranding}</h2>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtLoginDisclaimer" label="${LabelLoginDisclaimer}" />
<div class="fieldDescription">${LabelLoginDisclaimerHelp}</div>
</div>
<div class="inputContainer customCssContainer">
<textarea is="emby-textarea" id="txtCustomCss" label="${LabelCustomCss}" class="textarea-mono"></textarea>
<div class="fieldDescription">${LabelCustomCssHelp}</div>
</div>
</div>
<br />
<div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
</div>
</form>
</div>
</div>
</div>

56
src/controllers/dashboard/general.js
View file

@ -1,16 +1,16 @@
define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-textarea', 'emby-input', 'emby-select', 'emby-button'], function ($, loading, globalize) {
'use strict';
import $ from 'jQuery';
import loading from 'loading';
import globalize from 'globalize';
import 'emby-checkbox';
import 'emby-textarea';
import 'emby-input';
import 'emby-select';
import 'emby-button';
/* eslint-disable indent */
function loadPage(page, config, languageOptions, systemInfo) {
page.querySelector('#txtServerName').value = systemInfo.ServerName;
$('#chkAutoRunWebApp', page).checked(config.AutoRunWebApp);
if (systemInfo.CanLaunchWebBrowser) {
page.querySelector('#fldAutoRunWebApp').classList.remove('hide');
} else {
page.querySelector('#fldAutoRunWebApp').classList.add('hide');
}
page.querySelector('#txtCachePath').value = systemInfo.CachePath || '';
$('#txtMetadataPath', page).val(systemInfo.InternalMetadataPath || '');
$('#txtMetadataNetworkPath', page).val(systemInfo.MetadataNetworkPath || '');
@ -24,7 +24,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-te
function onSubmit() {
loading.show();
var form = this;
const form = this;
$(form).parents('.page');
ApiClient.getServerConfiguration().then(function (config) {
config.ServerName = $('#txtServerName', form).val();
@ -32,8 +32,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-te
config.CachePath = form.querySelector('#txtCachePath').value;
config.MetadataPath = $('#txtMetadataPath', form).val();
config.MetadataNetworkPath = $('#txtMetadataNetworkPath', form).val();
var requiresReload = config.UICulture !== currentLanguage;
config.AutoRunWebApp = $('#chkAutoRunWebApp', form).checked();
let requiresReload = config.UICulture !== currentLanguage;
ApiClient.updateServerConfiguration(config).then(function() {
ApiClient.getNamedConfiguration(brandingConfigKey).then(function(brandingConfig) {
brandingConfig.LoginDisclaimer = form.querySelector('#txtLoginDisclaimer').value;
@ -52,8 +51,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-te
});
});
}, function () {
require(['alert'], function (alert) {
alert(globalize.translate('DefaultErrorMessage'));
import('alert').then(({default: alert}) => {
alert(globalize.translate('ErrorDefault'));
});
Dashboard.processServerConfigurationUpdateResult();
@ -62,13 +61,13 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-te
return false;
}
var currentBrandingOptions;
var currentLanguage;
var brandingConfigKey = 'branding';
return function (view, params) {
let currentBrandingOptions;
let currentLanguage;
const brandingConfigKey = 'branding';
export default function (view, params) {
$('#btnSelectCachePath', view).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser();
import('directorybrowser').then(({default: directoryBrowser}) => {
const picker = new directoryBrowser();
picker.show({
callback: function (path) {
if (path) {
@ -84,8 +83,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-te
});
});
$('#btnSelectMetadataPath', view).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser();
import('directorybrowser').then(({default: directoryBrowser}) => {
const picker = new directoryBrowser();
picker.show({
path: $('#txtMetadataPath', view).val(),
networkSharePath: $('#txtMetadataNetworkPath', view).val(),
@ -109,9 +108,9 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-te
});
$('.dashboardGeneralForm', view).off('submit', onSubmit).on('submit', onSubmit);
view.addEventListener('viewshow', function () {
var promiseConfig = ApiClient.getServerConfiguration();
var promiseLanguageOptions = ApiClient.getJSON(ApiClient.getUrl('Localization/Options'));
var promiseSystemInfo = ApiClient.getSystemInfo();
const promiseConfig = ApiClient.getServerConfiguration();
const promiseLanguageOptions = ApiClient.getJSON(ApiClient.getUrl('Localization/Options'));
const promiseSystemInfo = ApiClient.getSystemInfo();
Promise.all([promiseConfig, promiseLanguageOptions, promiseSystemInfo]).then(function (responses) {
loadPage(view, responses[0], responses[1], responses[2]);
});
@ -121,5 +120,6 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-te
view.querySelector('#txtCustomCss').value = config.CustomCss || '';
});
});
};
});
}
/* eslint-enable indent */

15
src/controllers/dashboard/library.html Normal file
View file

@ -0,0 +1,15 @@
<div id="mediaLibraryPage" data-role="page" class="page type-interior mediaLibraryPage librarySectionPage withTabs fullWidthContent">
<div>
<div class="content-primary">
<div class="padded-top padded-bottom">
<button is="emby-button" type="button" class="raised btnRefresh">
<span>${ButtonScanAllLibraries}</span>
</button>
<progress max="100" min="0" style="display: inline-block; vertical-align: middle;" class="refreshProgress"></progress>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt" target="_blank" href="https://docs.jellyfin.org/general/server/libraries.html">${Help}</a>
</div>
<div id="divVirtualFolders"></div>
</div>
</div>
</div>

102
src/controllers/dashboard/mediaLibrary.js → src/controllers/dashboard/library.js
View file

@ -1,9 +1,18 @@
define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'globalize', 'dom', 'indicators', 'scripts/imagehelper', 'cardStyle', 'emby-itemrefreshindicator'], function ($, appHost, taskButton, loading, libraryMenu, globalize, dom, indicators, imageHelper) {
'use strict';
import $ from 'jQuery';
import taskButton from 'scripts/taskbutton';
import loading from 'loading';
import libraryMenu from 'libraryMenu';
import globalize from 'globalize';
import dom from 'dom';
import imageHelper from 'scripts/imagehelper';
import 'cardStyle';
import 'emby-itemrefreshindicator';
/* eslint-disable indent */
function addVirtualFolder(page) {
require(['medialibrarycreator'], function (medialibrarycreator) {
new medialibrarycreator().show({
import('medialibrarycreator').then(({default: medialibrarycreator}) => {
new medialibrarycreator({
collectionTypeOptions: getCollectionTypeOptions().filter(function (f) {
return !f.hidden;
}),
@ -17,8 +26,8 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
}
function editVirtualFolder(page, virtualFolder) {
require(['medialibraryeditor'], function (medialibraryeditor) {
new medialibraryeditor().show({
import('medialibraryeditor').then(({default: medialibraryeditor}) => {
new medialibraryeditor({
refresh: shouldRefreshLibraryAfterChanges(page),
library: virtualFolder
}).then(function (hasChanges) {
@ -30,23 +39,21 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
}
function deleteVirtualFolder(page, virtualFolder) {
var msg = globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder');
let msg = globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder');
if (virtualFolder.Locations.length) {
msg += '<br/><br/>' + globalize.translate('MessageTheFollowingLocationWillBeRemovedFromLibrary') + '<br/><br/>';
msg += virtualFolder.Locations.join('<br/>');
}
require(['confirm'], function (confirm) {
import('confirm').then(({default: confirm}) => {
confirm({
text: msg,
title: globalize.translate('HeaderRemoveMediaFolder'),
confirmText: globalize.translate('Delete'),
primary: 'delete'
}).then(function () {
var refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
const refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
ApiClient.removeVirtualFolder(virtualFolder.Name, refreshAfterChange).then(function () {
reloadLibrary(page);
});
@ -55,7 +62,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
}
function refreshVirtualFolder(page, virtualFolder) {
require(['refreshDialog'], function (refreshDialog) {
import('refreshDialog').then(({default: refreshDialog}) => {
new refreshDialog({
itemIds: [virtualFolder.ItemId],
serverId: ApiClient.serverId(),
@ -65,13 +72,13 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
}
function renameVirtualFolder(page, virtualFolder) {
require(['prompt'], function (prompt) {
import('prompt').then(({default: prompt}) => {
prompt({
label: globalize.translate('LabelNewName'),
confirmText: globalize.translate('ButtonRename')
}).then(function (newName) {
if (newName && newName != virtualFolder.Name) {
var refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
const refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
ApiClient.renameVirtualFolder(virtualFolder.Name, newName, refreshAfterChange).then(function () {
reloadLibrary(page);
});
@ -81,12 +88,12 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
}
function showCardMenu(page, elem, virtualFolders) {
var card = dom.parentWithClass(elem, 'card');
var index = parseInt(card.getAttribute('data-index'));
var virtualFolder = virtualFolders[index];
var menuItems = [];
const card = dom.parentWithClass(elem, 'card');
const index = parseInt(card.getAttribute('data-index'));
const virtualFolder = virtualFolders[index];
const menuItems = [];
menuItems.push({
name: globalize.translate('ButtonEditImages'),
name: globalize.translate('EditImages'),
id: 'editimages',
icon: 'photo'
});
@ -111,7 +118,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
icon: 'refresh'
});
require(['actionsheet'], function (actionsheet) {
import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({
items: menuItems,
positionTo: elem,
@ -149,11 +156,11 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
}
function shouldRefreshLibraryAfterChanges(page) {
return 'mediaLibraryPage' === page.id;
return page.id === 'mediaLibraryPage';
}
function reloadVirtualFolders(page, virtualFolders) {
var html = '';
let html = '';
virtualFolders.push({
Name: globalize.translate('ButtonAddMediaLibrary'),
icon: 'add_circle',
@ -161,28 +168,28 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
showType: false,
showLocations: false,
showMenu: false,
showNameWithIcon: true
showNameWithIcon: false
});
for (var i = 0; i < virtualFolders.length; i++) {
var virtualFolder = virtualFolders[i];
for (let i = 0; i < virtualFolders.length; i++) {
const virtualFolder = virtualFolders[i];
html += getVirtualFolderHtml(page, virtualFolder, i);
}
var divVirtualFolders = page.querySelector('#divVirtualFolders');
const divVirtualFolders = page.querySelector('#divVirtualFolders');
divVirtualFolders.innerHTML = html;
divVirtualFolders.classList.add('itemsContainer');
divVirtualFolders.classList.add('vertical-wrap');
$('.btnCardMenu', divVirtualFolders).on('click', function () {
showCardMenu(page, this, virtualFolders);
});
divVirtualFolders.querySelector('.addLibrary').addEventListener('click', function () {
divVirtualFolders.querySelector('#addLibrary').addEventListener('click', function () {
addVirtualFolder(page);
});
$('.editLibrary', divVirtualFolders).on('click', function () {
var card = $(this).parents('.card')[0];
var index = parseInt(card.getAttribute('data-index'));
var virtualFolder = virtualFolders[index];
const card = $(this).parents('.card')[0];
const index = parseInt(card.getAttribute('data-index'));
const virtualFolder = virtualFolders[index];
if (virtualFolder.ItemId) {
editVirtualFolder(page, virtualFolder);
@ -192,7 +199,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
}
function editImages(page, virtualFolder) {
require(['imageEditor'], function (imageEditor) {
import('imageEditor').then(({default: imageEditor}) => {
imageEditor.show({
itemId: virtualFolder.ItemId,
serverId: ApiClient.serverId()
@ -227,7 +234,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
value: 'books',
message: getLink('BookLibraryHelp', 'https://docs.jellyfin.org/general/server/media/books.html')
}, {
name: globalize.translate('OptionHomeVideos'),
name: globalize.translate('Photos'),
value: 'homevideos'
}, {
name: globalize.translate('FolderTypeMusicVideos'),
@ -240,19 +247,24 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
}
function getVirtualFolderHtml(page, virtualFolder, index) {
var html = '';
var style = '';
let html = '';
let style = '';
if (page.classList.contains('wizardPage')) {
style += 'min-width:33.3%;';
}
html += '<div class="card backdropCard scalableCard backdropCard-scalable" style="' + style + '" data-index="' + index + '" data-id="' + virtualFolder.ItemId + '">';
if (virtualFolder.Locations.length == 0) {
html += '<div id="addLibrary" class="card backdropCard scalableCard backdropCard-scalable" style="' + style + '" data-index="' + index + '" data-id="' + virtualFolder.ItemId + '">';
} else {
html += '<div class="card backdropCard scalableCard backdropCard-scalable" style="' + style + '" data-index="' + index + '" data-id="' + virtualFolder.ItemId + '">';
}
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += '<div class="cardContent">';
var imgUrl = '';
let imgUrl = '';
if (virtualFolder.PrimaryImageItemId) {
imgUrl = ApiClient.getScaledImageUrl(virtualFolder.PrimaryImageItemId, {
@ -261,7 +273,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
});
}
var hasCardImageContainer;
let hasCardImageContainer;
if (imgUrl) {
html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;background-image:url(\'' + imgUrl + "');\">";
@ -274,7 +286,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
if (hasCardImageContainer) {
html += '<div class="cardIndicators backdropCardIndicators">';
html += '<div is="emby-itemrefreshindicator"' + (virtualFolder.RefreshProgress || virtualFolder.RefreshStatus && 'Idle' !== virtualFolder.RefreshStatus ? '' : ' class="hide"') + ' data-progress="' + (virtualFolder.RefreshProgress || 0) + '" data-status="' + virtualFolder.RefreshStatus + '"></div>';
html += '<div is="emby-itemrefreshindicator"' + (virtualFolder.RefreshProgress || virtualFolder.RefreshStatus && virtualFolder.RefreshStatus !== 'Idle' ? '' : ' class="hide"') + ' data-progress="' + (virtualFolder.RefreshProgress || 0) + '" data-status="' + virtualFolder.RefreshStatus + '"></div>';
html += '</div>';
html += '</div>';
}
@ -311,7 +323,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
}
html += '</div>';
var typeName = getCollectionTypeOptions().filter(function (t) {
let typeName = getCollectionTypeOptions().filter(function (t) {
return t.value == virtualFolder.CollectionType;
})[0];
typeName = typeName ? typeName.name : globalize.translate('FolderTypeUnset');
@ -351,10 +363,10 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
name: globalize.translate('HeaderLibraries')
}, {
href: 'librarydisplay.html',
name: globalize.translate('TabDisplay')
name: globalize.translate('Display')
}, {
href: 'metadataimages.html',
name: globalize.translate('TabMetadata')
name: globalize.translate('Metadata')
}, {
href: 'metadatanfo.html',
name: globalize.translate('TabNfoSettings')
@ -371,7 +383,8 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
});
pageIdOn('pageshow', 'mediaLibraryPage', function () {
libraryMenu.setTabs('librarysetup', 0, getTabs);
var page = this;
const page = this;
taskButton({
mode: 'on',
progressElem: page.querySelector('.refreshProgress'),
@ -380,7 +393,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
});
});
pageIdOn('pagebeforehide', 'mediaLibraryPage', function () {
var page = this;
const page = this;
taskButton({
mode: 'off',
progressElem: page.querySelector('.refreshProgress'),
@ -388,4 +401,5 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
button: page.querySelector('.btnRefresh')
});
});
});
/* eslint-enable indent */

57
src/controllers/dashboard/librarydisplay.html Normal file
View file

@ -0,0 +1,57 @@
<div id="libraryDisplayPage" data-role="page" class="page type-interior librarySectionPage withTabs">
<div>
<div class="content-primary">
<form>
<div class="selectContainer">
<select is="emby-select" id="selectDateAdded" data-mini="true" label="${LabelDateAddedBehavior}">
<option value="0">${OptionDateAddedImportTime}</option>
<option value="1">${OptionDateAddedFileTime}</option>
</select>
<div class="fieldDescription">${LabelDateAddedBehaviorHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" class="chkFolderView" />
<span>${OptionDisplayFolderView}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${OptionDisplayFolderViewHelp}</div>
</div>
<label class="checkboxContainer">
<input type="checkbox" is="emby-checkbox" class="chkDisplaySpecialsWithinSeasons"/>
<span>${LabelDisplaySpecialsWithinSeasons}</span>
</label>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" class="chkGroupMoviesIntoCollections" />
<span>${LabelGroupMoviesIntoCollections}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelGroupMoviesIntoCollectionsHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input class="chkExternalContentInSuggestions" type="checkbox" is="emby-checkbox" />
<span>${OptionEnableExternalContentInSuggestions}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${OptionEnableExternalContentInSuggestionsHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription fldSaveMetadataHidden hide">
<label>
<input type="checkbox" is="emby-checkbox" class="chkAirDays" id="chkSaveMetadataHidden" data-filter="Sunday" />
<span>${OptionSaveMetadataAsHidden}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${OptionSaveMetadataAsHiddenHelp}</div>
</div>
<br/>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
</form>
</div>
</div>
</div>

26
src/controllers/dashboard/librarydisplay.js
View file

@ -1,5 +1,10 @@
define(['globalize', 'loading', 'libraryMenu', 'emby-checkbox', 'emby-button', 'emby-button'], function(globalize, loading, libraryMenu) {
'use strict';
import globalize from 'globalize';
import loading from 'loading';
import libraryMenu from 'libraryMenu';
import 'emby-checkbox';
import 'emby-button';
/* eslint-disable indent */
function getTabs() {
return [{
@ -7,17 +12,17 @@ define(['globalize', 'loading', 'libraryMenu', 'emby-checkbox', 'emby-button', '
name: globalize.translate('HeaderLibraries')
}, {
href: 'librarydisplay.html',
name: globalize.translate('TabDisplay')
name: globalize.translate('Display')
}, {
href: 'metadataimages.html',
name: globalize.translate('TabMetadata')
name: globalize.translate('Metadata')
}, {
href: 'metadatanfo.html',
name: globalize.translate('TabNfoSettings')
}];
}
return function(view, params) {
export default function(view, params) {
function loadData() {
ApiClient.getServerConfiguration().then(function(config) {
view.querySelector('.chkFolderView').checked = config.EnableFolderView;
@ -33,7 +38,7 @@ define(['globalize', 'loading', 'libraryMenu', 'emby-checkbox', 'emby-button', '
view.querySelector('form').addEventListener('submit', function(e) {
loading.show();
var form = this;
const form = this;
ApiClient.getServerConfiguration().then(function(config) {
config.EnableFolderView = form.querySelector('.chkFolderView').checked;
config.EnableGroupingIntoCollections = form.querySelector('.chkGroupMoviesIntoCollections').checked;
@ -43,7 +48,7 @@ define(['globalize', 'loading', 'libraryMenu', 'emby-checkbox', 'emby-button', '
ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult);
});
ApiClient.getNamedConfiguration('metadata').then(function(config) {
config.UseFileCreationTimeForDateAdded = '1' === $('#selectDateAdded', form).val();
config.UseFileCreationTimeForDateAdded = $('#selectDateAdded', form).val() === '1';
ApiClient.updateNamedConfiguration('metadata', config);
});
@ -56,12 +61,13 @@ define(['globalize', 'loading', 'libraryMenu', 'emby-checkbox', 'emby-button', '
libraryMenu.setTabs('librarysetup', 1, getTabs);
loadData();
ApiClient.getSystemInfo().then(function(info) {
if ('Windows' === info.OperatingSystem) {
if (info.OperatingSystem === 'Windows') {
view.querySelector('.fldSaveMetadataHidden').classList.remove('hide');
} else {
view.querySelector('.fldSaveMetadataHidden').classList.add('hide');
}
});
});
};
});
}
/* eslint-enable indent */

8
src/controllers/dashboard/logs.html Normal file
View file

@ -0,0 +1,8 @@
<div id="logPage" data-role="page" class="page type-interior">
<div>
<div class="content-primary">
<div class="serverLogs readOnlyContent">
</div>
</div>
</div>
</div>

17
src/controllers/dashboard/logs.js
View file

@ -1,6 +1,12 @@
define(['datetime', 'loading', 'apphost', 'listViewStyle', 'emby-button', 'flexStyles'], function(datetime, loading, appHost) {
'use strict';
return function(view, params) {
import datetime from 'datetime';
import loading from 'loading';
import 'emby-button';
import 'listViewStyle';
import 'flexStyles';
/* eslint-disable indent */
export default function(view, params) {
view.addEventListener('viewbeforeshow', function() {
loading.show();
var apiClient = ApiClient;
@ -29,5 +35,6 @@ define(['datetime', 'loading', 'apphost', 'listViewStyle', 'emby-button', 'flexS
loading.hide();
});
});
};
});
}
/* eslint-enable indent */

34
src/controllers/dashboard/metadataImages.js
View file

@ -1,12 +1,17 @@
define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle'], function($, dom, loading, libraryMenu, globalize) {
'use strict';
import $ from 'jQuery';
import loading from 'loading';
import libraryMenu from 'libraryMenu';
import globalize from 'globalize';
import 'listViewStyle';
/* eslint-disable indent */
function populateLanguages(select) {
return ApiClient.getCultures().then(function(languages) {
var html = '';
let html = '';
html += "<option value=''></option>";
for (var i = 0, length = languages.length; i < length; i++) {
var culture = languages[i];
for (let i = 0, length = languages.length; i < length; i++) {
const culture = languages[i];
html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
}
select.innerHTML = html;
@ -15,10 +20,10 @@ define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle']
function populateCountries(select) {
return ApiClient.getCountries().then(function(allCountries) {
var html = '';
let html = '';
html += "<option value=''></option>";
for (var i = 0, length = allCountries.length; i < length; i++) {
var culture = allCountries[i];
for (let i = 0, length = allCountries.length; i < length; i++) {
const culture = allCountries[i];
html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + '</option>';
}
select.innerHTML = html;
@ -26,9 +31,9 @@ define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle']
}
function loadPage(page) {
var promises = [ApiClient.getServerConfiguration(), populateLanguages(page.querySelector('#selectLanguage')), populateCountries(page.querySelector('#selectCountry'))];
const promises = [ApiClient.getServerConfiguration(), populateLanguages(page.querySelector('#selectLanguage')), populateCountries(page.querySelector('#selectCountry'))];
Promise.all(promises).then(function(responses) {
var config = responses[0];
const config = responses[0];
page.querySelector('#selectLanguage').value = config.PreferredMetadataLanguage || '';
page.querySelector('#selectCountry').value = config.MetadataCountryCode || '';
loading.hide();
@ -36,7 +41,7 @@ define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle']
}
function onSubmit() {
var form = this;
const form = this;
return loading.show(), ApiClient.getServerConfiguration().then(function(config) {
config.PreferredMetadataLanguage = form.querySelector('#selectLanguage').value;
config.MetadataCountryCode = form.querySelector('#selectCountry').value;
@ -50,10 +55,10 @@ define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle']
name: globalize.translate('HeaderLibraries')
}, {
href: 'librarydisplay.html',
name: globalize.translate('TabDisplay')
name: globalize.translate('Display')
}, {
href: 'metadataimages.html',
name: globalize.translate('TabMetadata')
name: globalize.translate('Metadata')
}, {
href: 'metadatanfo.html',
name: globalize.translate('TabNfoSettings')
@ -67,4 +72,5 @@ define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle']
loading.show();
loadPage(this);
});
});
/* eslint-enable indent */

25
src/controllers/dashboard/metadataimages.html Normal file
View file

@ -0,0 +1,25 @@
<div id="metadataImagesConfigurationPage" data-role="page" class="page type-interior metadataConfigurationPage withTabs">
<div>
<div class="content-primary">
<form class="metadataImagesConfigurationForm">
<h2 style="margin-top:0;">${HeaderPreferredMetadataLanguage}</h2>
<p style="margin:1.5em 0;">${DefaultMetadataLangaugeDescription}</p>
<div class="selectContainer">
<select is="emby-select" id="selectLanguage" required="required" label="${LabelLanguage}"></select>
</div>
<div class="selectContainer">
<select is="emby-select" id="selectCountry" required="required" label="${LabelCountry}"></select>
</div>
<br />
<div><button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button></div>
</form>
</div>
</div>
</div>

49
src/controllers/dashboard/metadatanfo.html Normal file
View file

@ -0,0 +1,49 @@
<div id="metadataNfoPage" data-role="page" class="page type-interior metadataConfigurationPage withTabs">
<div>
<div class="content-primary">
<form class="metadataNfoForm">
<p>${HeaderKodiMetadataHelp}</p>
<br />
<div class="selectContainer">
<select is="emby-select" name="selectUser" id="selectUser" label="${LabelKodiMetadataUser}"></select>
<div class="fieldDescription">${LabelKodiMetadataUserHelp}</div>
</div>
<div class="selectContainer">
<select is="emby-select" name="selectReleaseDateFormat" id="selectReleaseDateFormat" label="${LabelKodiMetadataDateFormat}">
<option value="yyyy-MM-dd">yyyy-MM-dd</option>
</select>
<div class="fieldDescription">${LabelKodiMetadataDateFormatHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkSaveImagePaths" />
<span>${LabelKodiMetadataSaveImagePaths}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelKodiMetadataSaveImagePathsHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnablePathSubstitution" />
<span>${LabelKodiMetadataEnablePathSubstitution}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">
<div>${LabelKodiMetadataEnablePathSubstitutionHelp}</div>
</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableExtraThumbs" />
<span>${LabelKodiMetadataEnableExtraThumbs}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelKodiMetadataEnableExtraThumbsHelp}</div>
</div>
<div><button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button></div>
</form>
</div>
</div>
</div>

31
src/controllers/dashboard/metadatanfo.js
View file

@ -1,8 +1,12 @@
define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, libraryMenu, globalize) {
'use strict';
import $ from 'jQuery';
import loading from 'loading';
import libraryMenu from 'libraryMenu';
import globalize from 'globalize';
/* eslint-disable indent */
function loadPage(page, config, users) {
var html = '<option value="" selected="selected">' + globalize.translate('OptionNone') + '</option>';
let html = '<option value="" selected="selected">' + globalize.translate('None') + '</option>';
html += users.map(function (user) {
return '<option value="' + user.Id + '">' + user.Name + '</option>';
}).join('');
@ -16,7 +20,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
function onSubmit() {
loading.show();
var form = this;
const form = this;
ApiClient.getNamedConfiguration(metadataKey).then(function (config) {
config.UserId = $('#selectUser', form).val() || null;
config.ReleaseDateFormat = $('#selectReleaseDateFormat', form).val();
@ -32,10 +36,10 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
}
function showConfirmMessage(config) {
var msg = [];
const msg = [];
msg.push(globalize.translate('MetadataSettingChangeHelp'));
require(['alert'], function (alert) {
import('alert').then(({default: alert}) => {
alert({
text: msg.join('<br/><br/>')
});
@ -48,27 +52,28 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
name: globalize.translate('HeaderLibraries')
}, {
href: 'librarydisplay.html',
name: globalize.translate('TabDisplay')
name: globalize.translate('Display')
}, {
href: 'metadataimages.html',
name: globalize.translate('TabMetadata')
name: globalize.translate('Metadata')
}, {
href: 'metadatanfo.html',
name: globalize.translate('TabNfoSettings')
}];
}
var metadataKey = 'xbmcmetadata';
const metadataKey = 'xbmcmetadata';
$(document).on('pageinit', '#metadataNfoPage', function () {
$('.metadataNfoForm').off('submit', onSubmit).on('submit', onSubmit);
}).on('pageshow', '#metadataNfoPage', function () {
libraryMenu.setTabs('metadata', 3, getTabs);
loading.show();
var page = this;
var promise1 = ApiClient.getUsers();
var promise2 = ApiClient.getNamedConfiguration(metadataKey);
const page = this;
const promise1 = ApiClient.getUsers();
const promise2 = ApiClient.getNamedConfiguration(metadataKey);
Promise.all([promise1, promise2]).then(function (responses) {
loadPage(page, responses[1], responses[0]);
});
});
});
/* eslint-enable indent */

121
src/controllers/dashboard/networking.html Normal file
View file

@ -0,0 +1,121 @@
<div id="networkingPage" data-role="page" class="page type-interior advancedConfigurationPage">
<div>
<div class="content-primary">
<form class="dashboardHostingForm">
<div class="verticalSection verticalSection-extrabottompadding">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${TabNetworking}</h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/networking/index.html">${Help}</a>
</div>
<fieldset class='verticalSection verticalSection-extrabottompadding'>
<legend><h3>${HeaderServerAddressSettings}</h3></legend>
<div class="inputContainer">
<input is="emby-input" type="number" id="txtPortNumber" label="${LabelLocalHttpServerPortNumber}" pattern="[0-9]*" required="required" min="1" max="65535" />
<div class="fieldDescription">${LabelLocalHttpServerPortNumberHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableHttps" />
<span>${LabelEnableHttps}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelEnableHttpsHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="number" id="txtHttpsPort" pattern="[0-9]*" required="required" min="1" max="65535" label="${LabelHttpsPort}" />
<div class="fieldDescription">${LabelHttpsPortHelp}</div>
</div>
<div class="inputContainer fldBaseUrl">
<input is="emby-input" id="txtBaseUrl" type="text" label="${LabelBaseUrl}" />
<div class="fieldDescription">${LabelBaseUrlHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtLocalAddress" label="${LabelBindToLocalNetworkAddress}" />
<div class="fieldDescription">${LabelBindToLocalNetworkAddressHelp}</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtLanNetworks" label="${LabelLanNetworks}" />
<div class="fieldDescription">${LanNetworksHelp}</div>
</div>
</fieldset>
<fieldset class='verticalSection verticalSection-extrabottompadding'>
<legend><h3>${HeaderHttpsSettings}</h3></legend>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkRequireHttps" />
<span>${LabelRequireHttps}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelRequireHttpsHelp}</div>
</div>
<div class="inputContainer fldCertificatePath">
<div style="display: flex; align-items: center;">
<div style="flex-grow:1;">
<input is="emby-input" type="text" id="txtCertificatePath" label="${LabelCustomCertificatePath}" autocomplete="off" />
</div>
<button type="button" is="paper-icon-button-light" id="btnSelectCertPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
</div>
<div class="fieldDescription">${LabelCustomCertificatePathHelp}</div>
</div>
<div class="inputContainer fldCertPassword">
<input is="emby-input" id="txtCertPassword" type="password" label="${LabelCertificatePassword}" autocomplete="new-password" />
<div class="fieldDescription">${LabelCertificatePasswordHelp}</div>
</div>
</fieldset>
<fieldset class='verticalSection verticalSection-extrabottompadding'>
<legend><h3>${HeaderRemoteAccessSettings}</h3></legend>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkRemoteAccess" />
<span>${AllowRemoteAccess}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${AllowRemoteAccessHelp}</div>
</div>
<div class="inputContainer fldExternalAddressFilter hide">
<input is="emby-input" type="text" id="txtExternalAddressFilter" label="${LabelAllowedRemoteAddresses}" />
<div class="fieldDescription">${AllowedRemoteAddressesHelp}</div>
</div>
<div class="selectContainer fldExternalAddressFilterMode hide">
<select is="emby-select" id="selectExternalAddressFilterMode" label="${LabelAllowedRemoteAddressesMode}">
<option value="whitelist">${Whitelist}</option>
<option value="blacklist">${Blacklist}</option>
</select>
</div>
<div class="checkboxContainer checkboxContainer-withDescription fldEnableUpnp hide">
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableUpnp" />
<span>${LabelEnableAutomaticPortMap}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelEnableAutomaticPortMapHelp}</div>
</div>
<div class="inputContainer fldPublicPort hide">
<input is="emby-input" type="number" label="${LabelPublicHttpPort}" id="txtPublicPort" pattern="[0-9]*" required="required" min="1" max="65535" />
<div class="fieldDescription">${LabelPublicHttpPortHelp}</div>
</div>
<div class="inputContainer fldPublicHttpsPort hide">
<input is="emby-input" type="number" id="txtPublicHttpsPort" pattern="[0-9]*" required="required" min="1" max="65535" label="${LabelPublicHttpsPort}" />
<div class="fieldDescription">${LabelPublicHttpsPortHelp}</div>
</div>
</fieldset>
</div>
<div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
</div>
</form>
</div>
</div>
</div>

41
src/controllers/dashboard/networking.js
View file

@ -1,12 +1,16 @@
define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], function (loading, libraryMenu, globalize) {
'use strict';
import loading from 'loading';
import globalize from 'globalize';
import 'emby-checkbox';
import 'emby-select';
/* eslint-disable indent */
function onSubmit(e) {
var form = this;
var localAddress = form.querySelector('#txtLocalAddress').value;
var enableUpnp = form.querySelector('#chkEnableUpnp').checked;
const form = this;
const localAddress = form.querySelector('#txtLocalAddress').value;
const enableUpnp = form.querySelector('#chkEnableUpnp').checked;
confirmSelections(localAddress, enableUpnp, function () {
var validationResult = getValidationAlert(form);
const validationResult = getValidationAlert(form);
if (validationResult) {
showAlertText(validationResult);
@ -26,7 +30,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
}).filter(function (s) {
return s.length > 0;
});
config.IsRemoteIPFilterBlacklist = 'blacklist' === form.querySelector('#selectExternalAddressFilterMode').value;
config.IsRemoteIPFilterBlacklist = form.querySelector('#selectExternalAddressFilterMode').value === 'blacklist';
config.PublicPort = form.querySelector('#txtPublicPort').value;
config.PublicHttpsPort = form.querySelector('#txtPublicHttpsPort').value;
config.HttpServerPortNumber = form.querySelector('#txtPortNumber').value;
@ -47,7 +51,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
}
function triggerChange(select) {
var evt = document.createEvent('HTMLEvents');
const evt = document.createEvent('HTMLEvents');
evt.initEvent('change', false, true);
select.dispatchEvent(evt);
}
@ -65,8 +69,8 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
}
function validateHttps(form) {
var certPath = form.querySelector('#txtCertificatePath').value || null;
var httpsEnabled = form.querySelector('#chkEnableHttps').checked;
const certPath = form.querySelector('#txtCertificatePath').value || null;
const httpsEnabled = form.querySelector('#chkEnableHttps').checked;
if (httpsEnabled && !certPath) {
return showAlertText({
@ -80,7 +84,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
function showAlertText(options) {
return new Promise(function (resolve, reject) {
require(['alert'], function (alert) {
import('alert').then(({default: alert}) => {
alert(options).then(resolve, reject);
});
});
@ -97,7 +101,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
}
}
return function (view, params) {
export default function (view, params) {
function loadPage(page, config) {
page.querySelector('#txtPortNumber').value = config.HttpServerPortNumber;
page.querySelector('#txtPublicPort').value = config.PublicPort;
@ -106,12 +110,12 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
page.querySelector('#txtLanNetworks').value = (config.LocalNetworkSubnets || []).join(', ');
page.querySelector('#txtExternalAddressFilter').value = (config.RemoteIPFilter || []).join(', ');
page.querySelector('#selectExternalAddressFilterMode').value = config.IsRemoteIPFilterBlacklist ? 'blacklist' : 'whitelist';
page.querySelector('#chkRemoteAccess').checked = null == config.EnableRemoteAccess || config.EnableRemoteAccess;
page.querySelector('#chkRemoteAccess').checked = config.EnableRemoteAccess == null || config.EnableRemoteAccess;
page.querySelector('#txtHttpsPort').value = config.HttpsPortNumber;
page.querySelector('#chkEnableHttps').checked = config.EnableHttps;
page.querySelector('#chkRequireHttps').checked = config.RequireHttps;
page.querySelector('#txtBaseUrl').value = config.BaseUrl || '';
var txtCertificatePath = page.querySelector('#txtCertificatePath');
const txtCertificatePath = page.querySelector('#txtCertificatePath');
txtCertificatePath.value = config.CertificatePath || '';
page.querySelector('#txtCertPassword').value = config.CertificatePassword || '';
page.querySelector('#chkEnableUpnp').checked = config.EnableUPnP;
@ -135,8 +139,8 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
}
});
view.querySelector('#btnSelectCertPath').addEventListener('click', function () {
require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser();
import('directorybrowser').then(({default: directoryBrowser}) => {
const picker = new directoryBrowser();
picker.show({
includeFiles: true,
includeDirectories: true,
@ -158,5 +162,6 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
loadPage(view, config);
});
});
};
});
}
/* eslint-enable indent */

119
src/controllers/dashboard/notifications/notification.js
View file

@ -1,119 +0,0 @@
define(['jQuery', 'emby-checkbox', 'fnchecked'], function ($) {
'use strict';
function fillItems(elem, items, cssClass, idPrefix, currentList, isEnabledList) {
var html = '<div class="checkboxList paperList" style="padding: .5em 1em;">';
html += items.map(function (u) {
var isChecked = isEnabledList ? currentList.indexOf(u.Id) != -1 : currentList.indexOf(u.Id) == -1;
var checkedHtml = isChecked ? ' checked="checked"' : '';
return '<label><input is="emby-checkbox" class="' + cssClass + '" type="checkbox" data-itemid="' + u.Id + '"' + checkedHtml + '/><span>' + u.Name + '</span></label>';
}).join('');
html += '</div>';
elem.html(html).trigger('create');
}
function reload(page) {
var type = getParameterByName('type');
var promise1 = ApiClient.getUsers();
var promise2 = ApiClient.getNamedConfiguration(notificationsConfigurationKey);
var promise3 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Types'));
var promise4 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Services'));
Promise.all([promise1, promise2, promise3, promise4]).then(function (responses) {
var users = responses[0];
var notificationOptions = responses[1];
var types = responses[2];
var services = responses[3];
var notificationConfig = notificationOptions.Options.filter(function (n) {
return n.Type == type;
})[0];
var typeInfo = types.filter(function (n) {
return n.Type == type;
})[0] || {};
if (typeInfo.IsBasedOnUserEvent) {
$('.monitorUsers', page).show();
} else {
$('.monitorUsers', page).hide();
}
$('.notificationType', page).html(typeInfo.Name || 'Unknown Notification');
if (!notificationConfig) {
notificationConfig = {
DisabledMonitorUsers: [],
SendToUsers: [],
DisabledServices: [],
SendToUserMode: 'Admins'
};
}
fillItems($('.monitorUsersList', page), users, 'chkMonitor', 'chkMonitor', notificationConfig.DisabledMonitorUsers);
fillItems($('.sendToUsersList', page), users, 'chkSendTo', 'chkSendTo', notificationConfig.SendToUsers, true);
fillItems($('.servicesList', page), services, 'chkService', 'chkService', notificationConfig.DisabledServices);
$('#chkEnabled', page).checked(notificationConfig.Enabled || false);
$('#selectUsers', page).val(notificationConfig.SendToUserMode).trigger('change');
});
}
function save(page) {
var type = getParameterByName('type');
var promise1 = ApiClient.getNamedConfiguration(notificationsConfigurationKey);
// TODO: Check if this promise is really needed, as it's unused.
var promise2 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Types'));
Promise.all([promise1, promise2]).then(function (responses) {
var notificationOptions = responses[0];
var notificationConfig = notificationOptions.Options.filter(function (n) {
return n.Type == type;
})[0];
if (!notificationConfig) {
notificationConfig = {
Type: type
};
notificationOptions.Options.push(notificationConfig);
}
notificationConfig.Enabled = $('#chkEnabled', page).checked();
notificationConfig.SendToUserMode = $('#selectUsers', page).val();
notificationConfig.DisabledMonitorUsers = $('.chkMonitor', page).get().filter(function (c) {
return !c.checked;
}).map(function (c) {
return c.getAttribute('data-itemid');
});
notificationConfig.SendToUsers = $('.chkSendTo', page).get().filter(function (c) {
return c.checked;
}).map(function (c) {
return c.getAttribute('data-itemid');
});
notificationConfig.DisabledServices = $('.chkService', page).get().filter(function (c) {
return !c.checked;
}).map(function (c) {
return c.getAttribute('data-itemid');
});
ApiClient.updateNamedConfiguration(notificationsConfigurationKey, notificationOptions).then(function (r) {
Dashboard.processServerConfigurationUpdateResult();
Dashboard.navigate('notificationsettings.html');
});
});
}
function onSubmit() {
save($(this).parents('.page'));
return false;
}
var notificationsConfigurationKey = 'notifications';
$(document).on('pageinit', '#notificationSettingPage', function () {
var page = this;
$('#selectUsers', page).on('change', function () {
if ('Custom' == this.value) {
$('.selectCustomUsers', page).show();
} else {
$('.selectCustomUsers', page).hide();
}
});
$('.notificationSettingForm').off('submit', onSubmit).on('submit', onSubmit);
}).on('pageshow', '#notificationSettingPage', function () {
reload(this);
});
});

68
src/controllers/dashboard/notifications/notification/index.html Normal file
View file

@ -0,0 +1,68 @@
<div id="notificationSettingPage" data-role="page" class="page type-interior notificationConfigurationPage withTabs">
<div>
<div class="content-primary">
<form class="notificationSettingForm">
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="notificationType sectionTitle"></h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/notifications.html">${Help}</a>
</div>
</div>
<label class="checkboxContainer">
<input type="checkbox" is="emby-checkbox" id="chkEnabled" />
<span>${LabelNotificationEnabled}</span>
</label>
<br />
<div class="monitorUsers" style="display: none;">
<div class="paperListLabel">${LabelMonitorUsers}</div>
<div class="monitorUsersList">
</div>
<br />
<br />
</div>
<div>
<div class="selectContainer">
<select is="emby-select" id="selectUsers" label="${LabelSendNotificationToUsers}">
<option value="All">${OptionAllUsers}</option>
<option value="Admins">${OptionAdminUsers}</option>
<option value="Custom">${OptionCustomUsers}</option>
</select>
</div>
<div class="selectCustomUsers" style="display: none;">
<br />
<label>${LabelSelectUsers}</label>
<div class="sendToUsersList">
</div>
</div>
<br />
</div>
<div>
<label>${LabelUseNotificationServices}</label>
<div class="servicesList">
</div>
<div class="fieldDescription">${AdditionalNotificationServices}</div>
<br />
</div>
<div>
<br />
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
<button is="emby-button" type="button" class="raised button-cancel block btnCancel" onclick="history.back();">
<span>${ButtonCancel}</span>
</button>
</div>
</form>
</div>
</div>
</div>

118
src/controllers/dashboard/notifications/notification/index.js Normal file
View file

@ -0,0 +1,118 @@
import $ from 'jQuery';
import 'emby-checkbox';
function fillItems(elem, items, cssClass, idPrefix, currentList, isEnabledList) {
let html = '<div class="checkboxList paperList" style="padding: .5em 1em;">';
html += items.map(function (u) {
const isChecked = isEnabledList ? currentList.indexOf(u.Id) != -1 : currentList.indexOf(u.Id) == -1;
const checkedHtml = isChecked ? ' checked="checked"' : '';
return '<label><input is="emby-checkbox" class="' + cssClass + '" type="checkbox" data-itemid="' + u.Id + '"' + checkedHtml + '/><span>' + u.Name + '</span></label>';
}).join('');
html += '</div>';
elem.html(html).trigger('create');
}
function reload(page) {
const type = getParameterByName('type');
const promise1 = ApiClient.getUsers();
const promise2 = ApiClient.getNamedConfiguration(notificationsConfigurationKey);
const promise3 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Types'));
const promise4 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Services'));
Promise.all([promise1, promise2, promise3, promise4]).then(function (responses) {
const users = responses[0];
const notificationOptions = responses[1];
const types = responses[2];
const services = responses[3];
let notificationConfig = notificationOptions.Options.filter(function (n) {
return n.Type == type;
})[0];
const typeInfo = types.filter(function (n) {
return n.Type == type;
})[0] || {};
if (typeInfo.IsBasedOnUserEvent) {
$('.monitorUsers', page).show();
} else {
$('.monitorUsers', page).hide();
}
$('.notificationType', page).html(typeInfo.Name || 'Unknown Notification');
if (!notificationConfig) {
notificationConfig = {
DisabledMonitorUsers: [],
SendToUsers: [],
DisabledServices: [],
SendToUserMode: 'Admins'
};
}
fillItems($('.monitorUsersList', page), users, 'chkMonitor', 'chkMonitor', notificationConfig.DisabledMonitorUsers);
fillItems($('.sendToUsersList', page), users, 'chkSendTo', 'chkSendTo', notificationConfig.SendToUsers, true);
fillItems($('.servicesList', page), services, 'chkService', 'chkService', notificationConfig.DisabledServices);
$('#chkEnabled', page).prop('checked', notificationConfig.Enabled || false);
$('#selectUsers', page).val(notificationConfig.SendToUserMode).trigger('change');
});
}
function save(page) {
const type = getParameterByName('type');
const promise1 = ApiClient.getNamedConfiguration(notificationsConfigurationKey);
// TODO: Check if this promise is really needed, as it's unused.
const promise2 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Types'));
Promise.all([promise1, promise2]).then(function (responses) {
const notificationOptions = responses[0];
let notificationConfig = notificationOptions.Options.filter(function (n) {
return n.Type == type;
})[0];
if (!notificationConfig) {
notificationConfig = {
Type: type
};
notificationOptions.Options.push(notificationConfig);
}
notificationConfig.Enabled = $('#chkEnabled', page).is(':checked');
notificationConfig.SendToUserMode = $('#selectUsers', page).val();
notificationConfig.DisabledMonitorUsers = $('.chkMonitor', page).get().filter(function (c) {
return !c.checked;
}).map(function (c) {
return c.getAttribute('data-itemid');
});
notificationConfig.SendToUsers = $('.chkSendTo', page).get().filter(function (c) {
return c.checked;
}).map(function (c) {
return c.getAttribute('data-itemid');
});
notificationConfig.DisabledServices = $('.chkService', page).get().filter(function (c) {
return !c.checked;
}).map(function (c) {
return c.getAttribute('data-itemid');
});
ApiClient.updateNamedConfiguration(notificationsConfigurationKey, notificationOptions).then(function (r) {
Dashboard.processServerConfigurationUpdateResult();
Dashboard.navigate('notificationsettings.html');
});
});
}
function onSubmit() {
save($(this).parents('.page'));
return false;
}
const notificationsConfigurationKey = 'notifications';
$(document).on('pageinit', '#notificationSettingPage', function () {
const page = this;
$('#selectUsers', page).on('change', function () {
if (this.value == 'Custom') {
$('.selectCustomUsers', page).show();
} else {
$('.selectCustomUsers', page).hide();
}
});
$('.notificationSettingForm').off('submit', onSubmit).on('submit', onSubmit);
}).on('pageshow', '#notificationSettingPage', function () {
reload(this);
});

60
src/controllers/dashboard/notifications/notifications.js
View file

@ -1,60 +0,0 @@
define(['loading', 'libraryMenu', 'globalize', 'listViewStyle', 'emby-button'], function(loading, libraryMenu, globalize) {
'use strict';
function reload(page) {
loading.show();
ApiClient.getJSON(ApiClient.getUrl('Notifications/Types')).then(function(list) {
var html = '';
var lastCategory = '';
var showHelp = true;
html += list.map(function(notification) {
var itemHtml = '';
if (notification.Category !== lastCategory) {
lastCategory = notification.Category;
if (lastCategory) {
itemHtml += '</div>';
itemHtml += '</div>';
}
itemHtml += '<div class="verticalSection verticalSection-extrabottompadding">';
itemHtml += '<div class="sectionTitleContainer" style="margin-bottom:1em;">';
itemHtml += '<h2 class="sectionTitle">';
itemHtml += notification.Category;
itemHtml += '</h2>';
if (showHelp) {
showHelp = false;
itemHtml += '<a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/notifications.html">';
itemHtml += globalize.translate('Help');
itemHtml += '</a>';
}
itemHtml += '</div>';
itemHtml += '<div class="paperList">';
}
itemHtml += '<a class="listItem listItem-border" is="emby-linkbutton" data-ripple="false" href="notificationsetting.html?type=' + notification.Type + '">';
if (notification.Enabled) {
itemHtml += '<span class="listItemIcon material-icons notifications_active"></span>';
} else {
itemHtml += '<span class="listItemIcon material-icons notifications_off" style="background-color:#999;"></span>';
}
itemHtml += '<div class="listItemBody">';
itemHtml += '<div class="listItemBodyText">' + notification.Name + '</div>';
itemHtml += '</div>';
itemHtml += '<button type="button" is="paper-icon-button-light"><span class="material-icons mode_edit"></span></button>';
itemHtml += '</a>';
return itemHtml;
}).join('');
if (list.length) {
html += '</div>';
html += '</div>';
}
page.querySelector('.notificationList').innerHTML = html;
loading.hide();
});
}
return function(view, params) {
view.addEventListener('viewshow', function() {
reload(view);
});
};
});

9
src/controllers/dashboard/notifications/notifications/index.html Normal file
View file

@ -0,0 +1,9 @@
<div id="notificationSettingsPage" data-role="page" class="page type-interior notificationConfigurationPage">
<div>
<div class="content-primary">
<div class="readOnlyContent">
<div class="notificationList"></div>
</div>
</div>
</div>
</div>

61
src/controllers/dashboard/notifications/notifications/index.js Normal file
View file

@ -0,0 +1,61 @@
import loading from 'loading';
import globalize from 'globalize';
import 'listViewStyle';
import 'emby-button';
function reload(page) {
loading.show();
ApiClient.getJSON(ApiClient.getUrl('Notifications/Types')).then(function (list) {
let html = '';
let lastCategory = '';
let showHelp = true;
html += list.map(function (notification) {
let itemHtml = '';
if (notification.Category !== lastCategory) {
lastCategory = notification.Category;
if (lastCategory) {
itemHtml += '</div>';
itemHtml += '</div>';
}
itemHtml += '<div class="verticalSection verticalSection-extrabottompadding">';
itemHtml += '<div class="sectionTitleContainer" style="margin-bottom:1em;">';
itemHtml += '<h2 class="sectionTitle">';
itemHtml += notification.Category;
itemHtml += '</h2>';
if (showHelp) {
showHelp = false;
itemHtml += '<a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/notifications.html">';
itemHtml += globalize.translate('Help');
itemHtml += '</a>';
}
itemHtml += '</div>';
itemHtml += '<div class="paperList">';
}
itemHtml += '<a class="listItem listItem-border" is="emby-linkbutton" data-ripple="false" href="notificationsetting.html?type=' + notification.Type + '">';
if (notification.Enabled) {
itemHtml += '<span class="listItemIcon material-icons notifications_active"></span>';
} else {
itemHtml += '<span class="listItemIcon material-icons notifications_off" style="background-color:#999;"></span>';
}
itemHtml += '<div class="listItemBody">';
itemHtml += '<div class="listItemBodyText">' + notification.Name + '</div>';
itemHtml += '</div>';
itemHtml += '<button type="button" is="paper-icon-button-light"><span class="material-icons mode_edit"></span></button>';
itemHtml += '</a>';
return itemHtml;
}).join('');
if (list.length) {
html += '</div>';
html += '</div>';
}
page.querySelector('.notificationList').innerHTML = html;
loading.hide();
});
}
export default function (view, params) {
view.addEventListener('viewshow', function () {
reload(view);
});
}

30
src/controllers/dashboard/playback.html Normal file
View file

@ -0,0 +1,30 @@
<div id="playbackConfigurationPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs">
<div>
<div class="content-primary">
<form class="playbackConfigurationForm">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${ButtonResume}</h2>
</div>
<div class="inputContainer">
<input is="emby-input" type="number" id="txtMinResumePct" name="txtMinResumePct" pattern="[0-9]*" required min="0" max="100" label="${LabelMinResumePercentage}"></input>
<div class="fieldDescription">
${LabelMinResumePercentageHelp}
</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="number" id="txtMaxResumePct" name="txtMaxResumePct" pattern="[0-9]*" required min="1" max="100" label="${LabelMaxResumePercentage}"></input>
<div class="fieldDescription">
${LabelMaxResumePercentageHelp}
</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="number" id="txtMinResumeDuration" name="txtMinResumeDuration" pattern="[0-9]*" required min="0" label="${LabelMinResumeDuration}"></input>
<div class="fieldDescription">
${LabelMinResumeDurationHelp}
</div>
</div>
<div><button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button></div>
</form>
</div>
</div>
</div>

17
src/controllers/dashboard/playback.js
View file

@ -1,5 +1,9 @@
define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, libraryMenu, globalize) {
'use strict';
import $ from 'jQuery';
import loading from 'loading';
import libraryMenu from 'libraryMenu';
import globalize from 'globalize';
/* eslint-disable indent */
function loadPage(page, config) {
$('#txtMinResumePct', page).val(config.MinResumePct);
@ -10,7 +14,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
function onSubmit() {
loading.show();
var form = this;
const form = this;
ApiClient.getServerConfiguration().then(function (config) {
config.MinResumePct = $('#txtMinResumePct', form).val();
config.MaxResumePct = $('#txtMaxResumePct', form).val();
@ -28,7 +32,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
name: globalize.translate('Transcoding')
}, {
href: 'playbackconfiguration.html',
name: globalize.translate('TabResumeSettings')
name: globalize.translate('ButtonResume')
}, {
href: 'streamingsettings.html',
name: globalize.translate('TabStreaming')
@ -40,9 +44,10 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
}).on('pageshow', '#playbackConfigurationPage', function () {
loading.show();
libraryMenu.setTabs('playback', 1, getTabs);
var page = this;
const page = this;
ApiClient.getServerConfiguration().then(function (config) {
loadPage(page, config);
});
});
});
/* eslint-enable indent */

143
src/controllers/dashboard/plugins/add.js
View file

@ -1,143 +0,0 @@
define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'emby-button'], function ($, loading, libraryMenu, globalize, connectionManager) {
'use strict';
function populateHistory(packageInfo, page) {
var html = '';
var length = Math.min(packageInfo.versions.length, 10);
for (var i = 0; i < length; i++) {
var version = packageInfo.versions[i];
html += '<h2 style="margin:.5em 0;">' + version.version + '</h2>';
html += '<div style="margin-bottom:1.5em;">' + version.changelog + '</div>';
}
$('#revisionHistory', page).html(html);
}
function populateVersions(packageInfo, page, installedPlugin) {
var html = '';
for (var i = 0; i < packageInfo.versions.length; i++) {
var version = packageInfo.versions[i];
html += '<option value="' + version.version + '">' + version.version + '</option>';
}
var selectmenu = $('#selectVersion', page).html(html);
if (!installedPlugin) {
$('#pCurrentVersion', page).hide().html('');
}
var packageVersion = packageInfo.versions[0];
if (packageVersion) {
selectmenu.val(packageVersion.version);
}
}
function renderPackage(pkg, installedPlugins, page) {
var installedPlugin = installedPlugins.filter(function (ip) {
return ip.Name == pkg.name;
})[0];
populateVersions(pkg, page, installedPlugin);
populateHistory(pkg, page);
$('.pluginName', page).html(pkg.name);
$('#btnInstallDiv', page).removeClass('hide');
$('#pSelectVersion', page).removeClass('hide');
if (pkg.overview) {
$('#overview', page).show().html(pkg.overview);
} else {
$('#overview', page).hide();
}
$('#description', page).html(pkg.description);
$('#developer', page).html(pkg.owner);
if (installedPlugin) {
var currentVersionText = globalize.translate('MessageYouHaveVersionInstalled', '<strong>' + installedPlugin.Version + '</strong>');
$('#pCurrentVersion', page).show().html(currentVersionText);
} else {
$('#pCurrentVersion', page).hide().html('');
}
loading.hide();
}
function alertText(options) {
require(['alert'], function (alert) {
alert(options);
});
}
function performInstallation(page, name, guid, version) {
var developer = $('#developer', page).html().toLowerCase();
var alertCallback = function () {
loading.show();
page.querySelector('#btnInstall').disabled = true;
ApiClient.installPlugin(name, guid, version).then(function () {
loading.hide();
alertText(globalize.translate('PluginInstalledMessage'));
});
};
if (developer !== 'jellyfin') {
loading.hide();
var msg = globalize.translate('MessagePluginInstallDisclaimer');
msg += '<br/>';
msg += '<br/>';
msg += globalize.translate('PleaseConfirmPluginInstallation');
require(['confirm'], function (confirm) {
confirm(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () {
alertCallback();
}, function () {
console.debug('plugin not installed');
});
});
} else {
alertCallback();
}
}
return function (view, params) {
$('.addPluginForm', view).on('submit', function () {
loading.show();
var page = $(this).parents('#addPluginPage')[0];
var name = params.name;
var guid = params.guid;
ApiClient.getInstalledPlugins().then(function (plugins) {
var installedPlugin = plugins.filter(function (plugin) {
return plugin.Name == name;
})[0];
var version = $('#selectVersion', page).val();
if (installedPlugin) {
if (installedPlugin.Version === version) {
loading.hide();
Dashboard.alert({
message: globalize.translate('MessageAlreadyInstalled'),
title: globalize.translate('HeaderPluginInstallation')
});
}
} else {
performInstallation(page, name, guid, version);
}
});
return false;
});
view.addEventListener('viewshow', function () {
var page = this;
loading.show();
var name = params.name;
var guid = params.guid;
var promise1 = ApiClient.getPackageInfo(name, guid);
var promise2 = ApiClient.getInstalledPlugins();
Promise.all([promise1, promise2]).then(function (responses) {
renderPackage(responses[0], responses[1], page);
});
});
};
});

49
src/controllers/dashboard/plugins/add/index.html Normal file
View file

@ -0,0 +1,49 @@
<div id="addPluginPage" data-role="page" class="page type-interior pluginConfigurationPage" data-backbutton="true">
<div>
<div class="content-primary">
<div class="readOnlyContent">
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h1 class="sectionTitle pluginName"></h1>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/plugins/index.html">${Help}</a>
</div>
<p id="overview" style="font-style: italic;"></p>
<p id="description"></p>
</div>
<div class="verticalSection">
<h2 class="sectionTitle">${HeaderInstall}</h2>
<form class="addPluginForm">
<p id="pCurrentVersion"></p>
<div id="pSelectVersion" class="hide selectContainer">
<select id="selectVersion" name="selectVersion" is="emby-select" label="${LabelSelectVersionToInstall}"></select>
</div>
<div id="btnInstallDiv" class="hide">
<button is="emby-button" type="submit" id="btnInstall" class="raised button-submit block">
<span>${Install}</span>
</button>
<div class="fieldDescription">${ServerRestartNeededAfterPluginInstall}</div>
</div>
</form>
</div>
</div>
<br />
<div class="readOnlyContent">
<div is="emby-collapse" title="${HeaderDeveloperInfo}">
<div class="collapseContent">
<p id="developer"></p>
</div>
</div>
<div is="emby-collapse" title="${HeaderRevisionHistory}">
<div class="collapseContent">
<div id="revisionHistory"></div>
</div>
</div>
</div>
</div>
</div>
</div>

146
src/controllers/dashboard/plugins/add/index.js Normal file
View file

@ -0,0 +1,146 @@
import $ from 'jQuery';
import loading from 'loading';
import globalize from 'globalize';
import 'emby-button';
function populateHistory(packageInfo, page) {
let html = '';
const length = Math.min(packageInfo.versions.length, 10);
for (let i = 0; i < length; i++) {
const version = packageInfo.versions[i];
html += '<h2 style="margin:.5em 0;">' + version.version + '</h2>';
html += '<div style="margin-bottom:1.5em;">' + version.changelog + '</div>';
}
$('#revisionHistory', page).html(html);
}
function populateVersions(packageInfo, page, installedPlugin) {
let html = '';
for (let i = 0; i < packageInfo.versions.length; i++) {
const version = packageInfo.versions[i];
html += '<option value="' + version.version + '">' + version.version + '</option>';
}
const selectmenu = $('#selectVersion', page).html(html);
if (!installedPlugin) {
$('#pCurrentVersion', page).hide().html('');
}
const packageVersion = packageInfo.versions[0];
if (packageVersion) {
selectmenu.val(packageVersion.version);
}
}
function renderPackage(pkg, installedPlugins, page) {
const installedPlugin = installedPlugins.filter(function (ip) {
return ip.Name == pkg.name;
})[0];
populateVersions(pkg, page, installedPlugin);
populateHistory(pkg, page);
$('.pluginName', page).html(pkg.name);
$('#btnInstallDiv', page).removeClass('hide');
$('#pSelectVersion', page).removeClass('hide');
if (pkg.overview) {
$('#overview', page).show().html(pkg.overview);
} else {
$('#overview', page).hide();
}
$('#description', page).html(pkg.description);
$('#developer', page).html(pkg.owner);
if (installedPlugin) {
const currentVersionText = globalize.translate('MessageYouHaveVersionInstalled', '<strong>' + installedPlugin.Version + '</strong>');
$('#pCurrentVersion', page).show().html(currentVersionText);
} else {
$('#pCurrentVersion', page).hide().html('');
}
loading.hide();
}
function alertText(options) {
import('alert').then(({default: alert}) => {
alert(options);
});
}
function performInstallation(page, name, guid, version) {
const developer = $('#developer', page).html().toLowerCase();
const alertCallback = function () {
loading.show();
page.querySelector('#btnInstall').disabled = true;
ApiClient.installPlugin(name, guid, version).then(() => {
loading.hide();
alertText(globalize.translate('MessagePluginInstalled'));
}).catch(() => {
alertText(globalize.translate('MessagePluginInstallError'));
});
};
if (developer !== 'jellyfin') {
loading.hide();
let msg = globalize.translate('MessagePluginInstallDisclaimer');
msg += '<br/>';
msg += '<br/>';
msg += globalize.translate('PleaseConfirmPluginInstallation');
import('confirm').then(({default: confirm}) => {
confirm(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () {
alertCallback();
}).catch(() => {
console.debug('plugin not installed');
});
});
} else {
alertCallback();
}
}
export default function(view, params) {
$('.addPluginForm', view).on('submit', function () {
loading.show();
const page = $(this).parents('#addPluginPage')[0];
const name = params.name;
const guid = params.guid;
ApiClient.getInstalledPlugins().then(function (plugins) {
const installedPlugin = plugins.filter(function (plugin) {
return plugin.Name == name;
})[0];
const version = $('#selectVersion', page).val();
if (installedPlugin && installedPlugin.Version === version) {
loading.hide();
Dashboard.alert({
message: globalize.translate('MessageAlreadyInstalled'),
title: globalize.translate('HeaderPluginInstallation')
});
} else {
performInstallation(page, name, guid, version);
}
}).catch(() => {
alertText(globalize.translate('MessageGetInstalledPluginsError'));
});
return false;
});
view.addEventListener('viewshow', function () {
const page = this;
loading.show();
const name = params.name;
const guid = params.guid;
const promise1 = ApiClient.getPackageInfo(name, guid);
const promise2 = ApiClient.getInstalledPlugins();
Promise.all([promise1, promise2]).then(function (responses) {
renderPackage(responses[0], responses[1], page);
});
});
}

139
src/controllers/dashboard/plugins/available.js
View file

@ -1,139 +0,0 @@
define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby-checkbox', 'emby-select'], function (loading, libraryMenu, globalize) {
'use strict';
function reloadList(page) {
loading.show();
var promise1 = ApiClient.getAvailablePlugins();
var promise2 = ApiClient.getInstalledPlugins();
Promise.all([promise1, promise2]).then(function (responses) {
populateList({
catalogElement: page.querySelector('#pluginTiles'),
noItemsElement: page.querySelector('#noPlugins'),
availablePlugins: responses[0],
installedPlugins: responses[1]
});
});
}
function getHeaderText(category) {
category = category.replace(' ', '');
if ('Channel' === category) {
category = 'Channels';
} else if ('Theme' === category) {
category = 'Themes';
} else if ('LiveTV' === category) {
category = 'HeaderLiveTV';
} else if ('ScreenSaver' === category) {
category = 'HeaderScreenSavers';
}
return globalize.translate(category);
}
function populateList(options) {
var availablePlugins = options.availablePlugins;
var installedPlugins = options.installedPlugins;
var categories = [];
availablePlugins.forEach(function (plugin, index, array) {
plugin.category = plugin.category || 'General';
plugin.categoryDisplayName = getHeaderText(plugin.category);
array[index] = plugin;
});
availablePlugins.sort(function (a, b) {
if (a.category > b.category) {
return 1;
} else if (b.category > a.category) {
return -1;
}
if (a.name > b.name) {
return 1;
} else if (b.name > a.name) {
return -1;
}
return 0;
});
var currentCategory = null;
var html = '';
for (var i = 0; i < availablePlugins.length; i++) {
var plugin = availablePlugins[i];
var category = plugin.categoryDisplayName;
if (category != currentCategory) {
if (currentCategory) {
html += '</div>';
html += '</div>';
}
html += '<div class="verticalSection">';
html += '<h2 class="sectionTitle sectionTitle-cards">' + category + '</h2>';
html += '<div class="itemsContainer vertical-wrap">';
currentCategory = category;
}
html += getPluginHtml(plugin, options, installedPlugins);
}
html += '</div>';
html += '</div>';
if (!availablePlugins.length && options.noItemsElement) {
options.noItemsElement.classList.remove('hide');
}
options.catalogElement.innerHTML = html;
loading.hide();
}
function getPluginHtml(plugin, options, installedPlugins) {
var html = '';
var href = plugin.externalUrl ? plugin.externalUrl : 'addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;
if (options.context) {
href += '&context=' + options.context;
}
var target = plugin.externalUrl ? ' target="_blank"' : '';
html += "<div class='card backdropCard'>";
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + '>';
html += '<span class="cardImageIcon material-icons folder"></span>';
html += '</a>';
html += '</div>';
html += '<div class="cardFooter">';
html += "<div class='cardText'>";
html += plugin.name;
html += '</div>';
var installedPlugin = installedPlugins.filter(function (ip) {
return ip.Id == plugin.guid;
})[0];
html += "<div class='cardText cardText-secondary'>";
html += installedPlugin ? globalize.translate('LabelVersionInstalled', installedPlugin.Version) : '&nbsp;';
html += '</div>';
html += '</div>';
html += '</div>';
return html += '</div>';
}
function getTabs() {
return [{
href: 'installedplugins.html',
name: globalize.translate('TabMyPlugins')
}, {
href: 'availableplugins.html',
name: globalize.translate('TabCatalog')
}];
}
window.PluginCatalog = {
renderCatalog: populateList
};
return function (view, params) {
view.addEventListener('viewshow', function () {
libraryMenu.setTabs('plugins', 1, getTabs);
reloadList(this);
});
};
});

8
src/controllers/dashboard/plugins/available/index.html Normal file
View file

@ -0,0 +1,8 @@
<div id="pluginCatalogPage" data-role="page" class="page type-interior pluginConfigurationPage withTabs fullWidthContent">
<div>
<div class="content-primary">
<div id="noPlugins" class="hide">${MessageNoAvailablePlugins}</div>
<div id="pluginTiles" style="text-align:left;"></div>
</div>
</div>
</div>

142
src/controllers/dashboard/plugins/available/index.js Normal file
View file

@ -0,0 +1,142 @@
import loading from 'loading';
import libraryMenu from 'libraryMenu';
import globalize from 'globalize';
import 'cardStyle';
import 'emby-button';
import 'emby-checkbox';
import 'emby-select';
function reloadList(page) {
loading.show();
const promise1 = ApiClient.getAvailablePlugins();
const promise2 = ApiClient.getInstalledPlugins();
Promise.all([promise1, promise2]).then(function (responses) {
populateList({
catalogElement: page.querySelector('#pluginTiles'),
noItemsElement: page.querySelector('#noPlugins'),
availablePlugins: responses[0],
installedPlugins: responses[1]
});
});
}
function getHeaderText(category) {
category = category.replace(' ', '');
// TODO: Replace with switch
if (category === 'Channel') {
category = 'Channels';
} else if (category === 'Theme') {
category = 'Themes';
} else if (category === 'LiveTV') {
category = 'LiveTV';
} else if (category === 'ScreenSaver') {
category = 'HeaderScreenSavers';
}
return globalize.translate(category);
}
function populateList(options) {
const availablePlugins = options.availablePlugins;
const installedPlugins = options.installedPlugins;
availablePlugins.forEach(function (plugin, index, array) {
plugin.category = plugin.category || 'General';
plugin.categoryDisplayName = getHeaderText(plugin.category);
array[index] = plugin;
});
availablePlugins.sort(function (a, b) {
if (a.category > b.category) {
return 1;
} else if (b.category > a.category) {
return -1;
}
if (a.name > b.name) {
return 1;
} else if (b.name > a.name) {
return -1;
}
return 0;
});
let currentCategory = null;
let html = '';
for (let i = 0; i < availablePlugins.length; i++) {
const plugin = availablePlugins[i];
const category = plugin.categoryDisplayName;
if (category != currentCategory) {
if (currentCategory) {
html += '</div>';
html += '</div>';
}
html += '<div class="verticalSection">';
html += '<h2 class="sectionTitle sectionTitle-cards">' + category + '</h2>';
html += '<div class="itemsContainer vertical-wrap">';
currentCategory = category;
}
html += getPluginHtml(plugin, options, installedPlugins);
}
html += '</div>';
html += '</div>';
if (!availablePlugins.length && options.noItemsElement) {
options.noItemsElement.classList.remove('hide');
}
options.catalogElement.innerHTML = html;
loading.hide();
}
function getPluginHtml(plugin, options, installedPlugins) {
let html = '';
let href = plugin.externalUrl ? plugin.externalUrl : 'addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;
if (options.context) {
href += '&context=' + options.context;
}
const target = plugin.externalUrl ? ' target="_blank"' : '';
html += "<div class='card backdropCard'>";
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + '>';
html += '<span class="cardImageIcon material-icons folder"></span>';
html += '</a>';
html += '</div>';
html += '<div class="cardFooter">';
html += "<div class='cardText'>";
html += plugin.name;
html += '</div>';
const installedPlugin = installedPlugins.filter(function (ip) {
return ip.Id == plugin.guid;
})[0];
html += "<div class='cardText cardText-secondary'>";
html += installedPlugin ? globalize.translate('LabelVersionInstalled', installedPlugin.Version) : '&nbsp;';
html += '</div>';
html += '</div>';
html += '</div>';
return html += '</div>';
}
function getTabs() {
return [{
href: 'installedplugins.html',
name: globalize.translate('TabMyPlugins')
}, {
href: 'availableplugins.html',
name: globalize.translate('TabCatalog')
}, {
href: 'repositories.html',
name: globalize.translate('TabRepositories')
}];
}
export default function (view) {
view.addEventListener('viewshow', function () {
libraryMenu.setTabs('plugins', 1, getTabs);
reloadList(this);
});
}

180
src/controllers/dashboard/plugins/installed.js
View file

@ -1,180 +0,0 @@
define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'], function (loading, libraryMenu, dom, globalize) {
'use strict';
function deletePlugin(page, uniqueid, name) {
var msg = globalize.translate('UninstallPluginConfirmation', name);
require(['confirm'], function (confirm) {
confirm({
title: globalize.translate('UninstallPluginHeader'),
text: msg,
primary: 'delete',
confirmText: globalize.translate('UninstallPluginHeader')
}).then(function () {
loading.show();
ApiClient.uninstallPlugin(uniqueid).then(function () {
reloadList(page);
});
});
});
}
function showNoConfigurationMessage() {
Dashboard.alert({
message: globalize.translate('NoPluginConfigurationMessage')
});
}
function showConnectMessage() {
Dashboard.alert({
message: globalize.translate('MessagePluginConfigurationRequiresLocalAccess')
});
}
function getPluginCardHtml(plugin, pluginConfigurationPages) {
var configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
return pluginConfigurationPage.PluginId == plugin.Id;
})[0];
var configPageUrl = configPage ? Dashboard.getConfigurationPageUrl(configPage.Name) : null;
var html = '';
html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' class='card backdropCard'>";
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += configPageUrl ? '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + configPageUrl + '">' : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer">';
html += '<span class="cardImageIcon material-icons folder"></span>';
html += configPageUrl ? '</a>' : '</div>';
html += '</div>';
html += '<div class="cardFooter">';
html += '<div style="text-align:right; float:right;padding-top:5px;">';
html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert"></span></button>';
html += '</div>';
html += "<div class='cardText'>";
html += configPage.DisplayName || plugin.Name;
html += '</div>';
html += "<div class='cardText cardText-secondary'>";
html += plugin.Version;
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
return html;
}
function renderPlugins(page, plugins) {
ApiClient.getJSON(ApiClient.getUrl('web/configurationpages') + '?pageType=PluginConfiguration').then(function (configPages) {
populateList(page, plugins, configPages);
});
}
function populateList(page, plugins, pluginConfigurationPages) {
plugins = plugins.sort(function (plugin1, plugin2) {
if (plugin1.Name > plugin2.Name) {
return 1;
}
return -1;
});
var html = plugins.map(function (p) {
return getPluginCardHtml(p, pluginConfigurationPages);
}).join('');
var installedPluginsElement = page.querySelector('.installedPlugins');
installedPluginsElement.removeEventListener('click', onInstalledPluginsClick);
installedPluginsElement.addEventListener('click', onInstalledPluginsClick);
if (plugins.length) {
installedPluginsElement.classList.add('itemsContainer');
installedPluginsElement.classList.add('vertical-wrap');
} else {
html += '<div class="centerMessage">';
html += '<h1>' + globalize.translate('MessageNoPluginsInstalled') + '</h1>';
html += '<p><a is="emby-linkbutton" class="button-link" href="availableplugins.html">';
html += globalize.translate('BrowsePluginCatalogMessage');
html += '</a></p>';
html += '</div>';
}
installedPluginsElement.innerHTML = html;
loading.hide();
}
function showPluginMenu(page, elem) {
var card = dom.parentWithClass(elem, 'card');
var id = card.getAttribute('data-id');
var name = card.getAttribute('data-name');
var configHref = card.querySelector('.cardContent').getAttribute('href');
var menuItems = [];
if (configHref) {
menuItems.push({
name: globalize.translate('ButtonSettings'),
id: 'open',
icon: 'mode_edit'
});
}
menuItems.push({
name: globalize.translate('ButtonUninstall'),
id: 'delete',
icon: 'delete'
});
require(['actionsheet'], function (actionsheet) {
actionsheet.show({
items: menuItems,
positionTo: elem,
callback: function (resultId) {
switch (resultId) {
case 'open':
Dashboard.navigate(configHref);
break;
case 'delete':
deletePlugin(page, id, name);
break;
}
}
});
});
}
function reloadList(page) {
loading.show();
ApiClient.getInstalledPlugins().then(function (plugins) {
renderPlugins(page, plugins);
});
}
function getTabs() {
return [{
href: 'installedplugins.html',
name: globalize.translate('TabMyPlugins')
}, {
href: 'availableplugins.html',
name: globalize.translate('TabCatalog')
}];
}
function onInstalledPluginsClick(e) {
if (dom.parentWithClass(e.target, 'noConfigPluginCard')) {
showNoConfigurationMessage();
} else if (dom.parentWithClass(e.target, 'connectModePluginCard')) {
showConnectMessage();
} else {
var btnCardMenu = dom.parentWithClass(e.target, 'btnCardMenu');
if (btnCardMenu) {
showPluginMenu(dom.parentWithClass(btnCardMenu, 'page'), btnCardMenu);
}
}
}
pageIdOn('pageshow', 'pluginsPage', function () {
libraryMenu.setTabs('plugins', 0, getTabs);
reloadList(this);
});
window.PluginsPage = {
renderPlugins: renderPlugins
};
});

7
src/controllers/dashboard/plugins/installed/index.html Normal file
View file

@ -0,0 +1,7 @@
<div id="pluginsPage" data-role="page" class="page type-interior pluginConfigurationPage withTabs fullWidthContent">
<div>
<div class="content-primary">
<div class="installedPlugins"></div>
</div>
</div>
</div>

193
src/controllers/dashboard/plugins/installed/index.js Normal file
View file

@ -0,0 +1,193 @@
import loading from 'loading';
import libraryMenu from 'libraryMenu';
import dom from 'dom';
import globalize from 'globalize';
import 'cardStyle';
import 'emby-button';
function deletePlugin(page, uniqueid, name) {
const msg = globalize.translate('UninstallPluginConfirmation', name);
import('confirm').then(({default: confirm}) => {
confirm.default({
title: globalize.translate('HeaderUninstallPlugin'),
text: msg,
primary: 'delete',
confirmText: globalize.translate('HeaderUninstallPlugin')
}).then(function () {
loading.show();
ApiClient.uninstallPlugin(uniqueid).then(function () {
reloadList(page);
});
});
});
}
function showNoConfigurationMessage() {
Dashboard.alert({
message: globalize.translate('MessageNoPluginConfiguration')
});
}
function showConnectMessage() {
Dashboard.alert({
message: globalize.translate('MessagePluginConfigurationRequiresLocalAccess')
});
}
function getPluginCardHtml(plugin, pluginConfigurationPages) {
const configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
return pluginConfigurationPage.PluginId == plugin.Id;
})[0];
const configPageUrl = configPage ? Dashboard.getPluginUrl(configPage.Name) : null;
let html = '';
html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' data-removable='" + plugin.CanUninstall + "' class='card backdropCard'>";
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += configPageUrl ? '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + configPageUrl + '">' : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer emby-button">';
html += '<span class="cardImageIcon material-icons folder"></span>';
html += configPageUrl ? '</a>' : '</div>';
html += '</div>';
html += '<div class="cardFooter">';
if (configPage || plugin.CanUninstall) {
html += '<div style="text-align:right; float:right;padding-top:5px;">';
html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert"></span></button>';
html += '</div>';
}
html += "<div class='cardText'>";
html += configPage && configPage.DisplayName ? configPage.DisplayName : plugin.Name;
html += '</div>';
html += "<div class='cardText cardText-secondary'>";
html += plugin.Version;
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
return html;
}
function renderPlugins(page, plugins) {
ApiClient.getJSON(ApiClient.getUrl('web/configurationpages') + '?pageType=PluginConfiguration').then(function (configPages) {
populateList(page, plugins, configPages);
});
}
function populateList(page, plugins, pluginConfigurationPages) {
plugins = plugins.sort(function (plugin1, plugin2) {
if (plugin1.Name > plugin2.Name) {
return 1;
}
return -1;
});
let html = plugins.map(function (p) {
return getPluginCardHtml(p, pluginConfigurationPages);
}).join('');
const installedPluginsElement = page.querySelector('.installedPlugins');
installedPluginsElement.removeEventListener('click', onInstalledPluginsClick);
installedPluginsElement.addEventListener('click', onInstalledPluginsClick);
if (plugins.length) {
installedPluginsElement.classList.add('itemsContainer');
installedPluginsElement.classList.add('vertical-wrap');
} else {
html += '<div class="centerMessage">';
html += '<h1>' + globalize.translate('MessageNoPluginsInstalled') + '</h1>';
html += '<p><a is="emby-linkbutton" class="button-link" href="availableplugins.html">';
html += globalize.translate('MessageBrowsePluginCatalog');
html += '</a></p>';
html += '</div>';
}
installedPluginsElement.innerHTML = html;
loading.hide();
}
function showPluginMenu(page, elem) {
const card = dom.parentWithClass(elem, 'card');
const id = card.getAttribute('data-id');
const name = card.getAttribute('data-name');
const removable = card.getAttribute('data-removable');
const configHref = card.querySelector('.cardContent').getAttribute('href');
const menuItems = [];
if (configHref) {
menuItems.push({
name: globalize.translate('Settings'),
id: 'open',
icon: 'mode_edit'
});
}
if (removable === 'true') {
menuItems.push({
name: globalize.translate('ButtonUninstall'),
id: 'delete',
icon: 'delete'
});
}
import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({
items: menuItems,
positionTo: elem,
callback: function (resultId) {
switch (resultId) {
case 'open':
Dashboard.navigate(configHref);
break;
case 'delete':
deletePlugin(page, id, name);
break;
}
}
});
});
}
function reloadList(page) {
loading.show();
ApiClient.getInstalledPlugins().then(function (plugins) {
renderPlugins(page, plugins);
});
}
function getTabs() {
return [{
href: 'installedplugins.html',
name: globalize.translate('TabMyPlugins')
}, {
href: 'availableplugins.html',
name: globalize.translate('TabCatalog')
}, {
href: 'repositories.html',
name: globalize.translate('TabRepositories')
}];
}
function onInstalledPluginsClick(e) {
if (dom.parentWithClass(e.target, 'noConfigPluginCard')) {
showNoConfigurationMessage();
} else if (dom.parentWithClass(e.target, 'connectModePluginCard')) {
showConnectMessage();
} else {
const btnCardMenu = dom.parentWithClass(e.target, 'btnCardMenu');
if (btnCardMenu) {
showPluginMenu(dom.parentWithClass(btnCardMenu, 'page'), btnCardMenu);
}
}
}
pageIdOn('pageshow', 'pluginsPage', function () {
libraryMenu.setTabs('plugins', 0, getTabs);
reloadList(this);
});
window.PluginsPage = {
renderPlugins: renderPlugins
};

19
src/controllers/dashboard/plugins/repositories/index.html Normal file
View file

@ -0,0 +1,19 @@
<div id="repositories" data-role="page" class="page type-interior withTabs fullWidthContent">
<div>
<div class="content-primary">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${TabRepositories}</h2>
<button is="emby-button" type="button" class="fab btnNewRepository submit" style="margin-left:1em;" title="${Add}">
<span class="material-icons add" aria-hidden="true"></span>
</button>
</div>
<div id="repositories"></div>
<div id="none" class="noItemsMessage centerMessage hide">
<h1>${MessageNoRepositories}</h1>
<p>${MessageAddRepository}</p>
</div>
</div>
</div>
</div>

153
src/controllers/dashboard/plugins/repositories/index.js Normal file
View file

@ -0,0 +1,153 @@
import loading from 'loading';
import libraryMenu from 'libraryMenu';
import globalize from 'globalize';
import dialogHelper from 'dialogHelper';
import 'emby-button';
import 'emby-checkbox';
import 'emby-select';
import 'formDialogStyle';
import 'listViewStyle';
let repositories = [];
function reloadList(page) {
loading.show();
ApiClient.getJSON(ApiClient.getUrl('Repositories')).then(list => {
repositories = list;
populateList({
listElement: page.querySelector('#repositories'),
noneElement: page.querySelector('#none'),
repositories: repositories
});
}).catch(error => {
console.error('error loading repositories');
page.querySelector('#none').classList.remove('hide');
loading.hide();
});
}
function saveList(page) {
loading.show();
ApiClient.ajax({
type: 'POST',
url: ApiClient.getUrl('Repositories'),
data: JSON.stringify(repositories),
contentType: 'application/json'
}).then(response => {
reloadList(page);
}).catch(error => {
console.error('error saving repositories');
loading.hide();
});
}
function populateList(options) {
var html = '';
html += '<div class="paperList">';
for (var i = 0; i < options.repositories.length; i++) {
html += getRepositoryHtml(options.repositories[i]);
}
html += '</div>';
if (!options.repositories.length) {
options.noneElement.classList.remove('hide');
}
options.listElement.innerHTML = html;
loading.hide();
}
function getRepositoryHtml(repository) {
var html = '';
html += '<div class="listItem listItem-border">';
html += `<a is="emby-linkbutton" style="margin:0;padding:0" class="clearLink listItemIconContainer" href="${repository.Url}">`;
html += '<span class="material-icons listItemIcon open_in_new"></span>';
html += '</a>';
html += '<div class="listItemBody two-line">';
html += `<h3 class="listItemBodyText">${repository.Name}</h3>`;
html += `<div class="listItemBodyText secondary">${repository.Url}</div>`;
html += '</div>';
html += `<button type="button" is="paper-icon-button-light" id="${repository.Url}" class="btnDelete" title="${globalize.translate('Delete')}"><span class="material-icons delete"></span></button>`;
html += '</div>';
return html;
}
function getTabs() {
return [{
href: 'installedplugins.html',
name: globalize.translate('TabMyPlugins')
}, {
href: 'availableplugins.html',
name: globalize.translate('TabCatalog')
}, {
href: 'repositories.html',
name: globalize.translate('TabRepositories')
}];
}
export default function(view, params) {
view.addEventListener('viewshow', function () {
libraryMenu.setTabs('plugins', 2, getTabs);
reloadList(this);
var save = this;
$('#repositories', view).on('click', '.btnDelete', function() {
var button = this;
repositories = repositories.filter(function (r) {
return r.Url !== button.id;
});
saveList(save);
});
});
view.querySelector('.btnNewRepository').addEventListener('click', () => {
const dialog = dialogHelper.createDialog({
scrollY: false,
size: 'large',
modal: false,
removeOnClose: true
});
let html = '';
html += '<div class="formDialogHeader">';
html += '<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += `<h3 class="formDialogHeaderTitle">${globalize.translate('HeaderNewRepository')}</h3>`;
html += '</div>';
html += '<form class="newPluginForm" style="margin:4em">';
html += '<div class="inputContainer">';
html += `<input is="emby-input" id="txtRepositoryName" label="${globalize.translate('LabelRepositoryName')}" type="text" required />`;
html += `<div class="fieldDescription">${globalize.translate('LabelRepositoryNameHelp')}</div>`;
html += '</div>';
html += '<div class="inputContainer">';
html += `<input is="emby-input" id="txtRepositoryUrl" label="${globalize.translate('LabelRepositoryUrl')}" type="url" required />`;
html += `<div class="fieldDescription">${globalize.translate('LabelRepositoryUrlHelp')}</div>`;
html += '</div>';
html += `<button is="emby-button" type="submit" class="raised button-submit block"><span>${globalize.translate('Save')}</span></button>`;
html += '</div>';
html += '</form>';
dialog.innerHTML = html;
dialog.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dialog);
});
dialog.querySelector('.newPluginForm').addEventListener('submit', () => {
repositories.push({
Name: dialog.querySelector('#txtRepositoryName').value,
Url: dialog.querySelector('#txtRepositoryUrl').value,
Enabled: true
});
saveList(view);
dialogHelper.close(dialog);
return false;
});
dialogHelper.open(dialog);
});
}

85
src/controllers/dashboard/scheduledtasks/scheduledtask.html Normal file
View file

@ -0,0 +1,85 @@
<div id="scheduledTaskPage" data-role="page" class="page type-interior scheduledTasksConfigurationPage">
<div>
<div class="content-primary">
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle taskName"></h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/tasks.html">${Help}</a>
</div>
<p id="pTaskDescription"></p>
</div>
<div class="readOnlyContent">
<div>
<h2 style="vertical-align: middle; display: inline-block;">${HeaderTaskTriggers}</h2>
<button is="emby-button" type="button" class="fab fab-mini btnAddTrigger submit" style="margin-left: 1em;" title="${ButtonAddScheduledTaskTrigger}">
<span class="material-icons add"></span>
</button>
</div>
<div class="taskTriggers"></div>
</div>
</div>
</div>
<div data-role="popup" id="popupAddTrigger" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="addTriggerForm" style="padding:1em;">
<div class="ui-bar-a">
<h3>${ButtonAddScheduledTaskTrigger}</h3>
</div>
<div data-role="content">
<div class="selectContainer">
<select is="emby-select" id="selectTriggerType" class="selectTriggerType" label="${LabelTriggerType}">
<option value="DailyTrigger">${OptionDaily}</option>
<option value="WeeklyTrigger">${OptionWeekly}</option>
<option value="IntervalTrigger">${OptionOnInterval}</option>
<option value="StartupTrigger">${OnApplicationStartup}</option>
</select>
</div>
<div id="fldDayOfWeek" class="selectContainer">
<select is="emby-select" id="selectDayOfWeek" name="selectDayOfWeek" label="${LabelDay}">
<option value="Sunday">${Sunday}</option>
<option value="Monday">${Monday}</option>
<option value="Tuesday">${Tuesday}</option>
<option value="Wednesday">${Wednesday}</option>
<option value="Thursday">${Thursday}</option>
<option value="Friday">${Friday}</option>
<option value="Saturday">${Saturday}</option>
</select>
</div>
<div id="fldTimeOfDay" class="selectContainer">
<select is="emby-select" id="selectTimeOfDay" label="${LabelTime}"></select>
</div>
<div id="fldSelectSystemEvent" class="selectContainer">
<select is="emby-select" id="selectSystemEvent" name="selectSystemEvent" label="${LabelEvent}">
<option value="WakeFromSleep">${OptionWakeFromSleep}</option>
</select>
</div>
<div id="fldSelectInterval" class="selectContainer">
<select is="emby-select" id="selectInterval" label="${LabelEveryXMinutes}">
<option value="9000000000">15 minutes</option>
<option value="18000000000">30 minutes</option>
<option value="27000000000">45 minutes</option>
<option value="36000000000">1 hour</option>
<option value="72000000000">2 hours</option>
<option value="108000000000">3 hours</option>
<option value="144000000000">4 hours</option>
<option value="216000000000">6 hours</option>
<option value="288000000000">8 hours</option>
<option value="432000000000">12 hours</option>
<option value="864000000000">24 hours</option>
</select>
</div>
<div class="inputContainer">
<input is="emby-input" id="txtTimeLimit" type="number" pattern="[0-9]*" min="1" step=".5" label="${LabelTimeLimitHours}" />
</div>
<div>
<button is="emby-button" type="submit" class="raised button-submit block" data-icon="check">
<span>${Add}</span>
</button>
<button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');">
<span>${ButtonCancel}</span>
</button>
</div>
</div>
</form>
</div>
</div>

67
src/controllers/dashboard/scheduledtasks/scheduledtask.js
View file

@ -1,11 +1,18 @@
define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby-button', 'emby-select'], function ($, loading, datetime, dom, globalize) {
'use strict';
import $ from 'jQuery';
import loading from 'loading';
import datetime from 'datetime';
import dom from 'dom';
import globalize from 'globalize';
import 'emby-input';
import 'emby-button';
import 'emby-select';
/* eslint-disable indent */
function fillTimeOfDay(select) {
const options = [];
var options = [];
for (var i = 0; i < 86400000; i += 900000) {
for (let i = 0; i < 86400000; i += 900000) {
options.push({
name: ScheduledTaskPage.getDisplayTime(i * 10000),
value: i * 10000
@ -18,15 +25,15 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
}
Array.prototype.remove = function (from, to) {
var rest = this.slice((to || from) + 1 || this.length);
const rest = this.slice((to || from) + 1 || this.length);
this.length = from < 0 ? this.length + from : from;
return this.push.apply(this, rest);
};
var ScheduledTaskPage = {
const ScheduledTaskPage = {
refreshScheduledTask: function (view) {
loading.show();
var id = getParameterByName('id');
const id = getParameterByName('id');
ApiClient.getScheduledTask(id).then(function (task) {
ScheduledTaskPage.loadScheduledTask(view, task);
});
@ -35,18 +42,18 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
$('.taskName', view).html(task.Name);
$('#pTaskDescription', view).html(task.Description);
require(['listViewStyle'], function () {
import('listViewStyle').then(() => {
ScheduledTaskPage.loadTaskTriggers(view, task);
});
loading.hide();
},
loadTaskTriggers: function (context, task) {
var html = '';
let html = '';
html += '<div class="paperList">';
for (var i = 0, length = task.Triggers.length; i < length; i++) {
var trigger = task.Triggers[i];
for (let i = 0, length = task.Triggers.length; i < length; i++) {
const trigger = task.Triggers[i];
html += '<div class="listItem listItem-border">';
html += '<span class="material-icons listItemIcon schedule"></span>';
@ -58,7 +65,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
html += "<div class='listItemBodyText'>" + ScheduledTaskPage.getTriggerFriendlyName(trigger) + '</div>';
if (trigger.MaxRuntimeMs) {
html += '<div class="listItemBodyText secondary">';
var hours = trigger.MaxRuntimeTicks / 36e9;
const hours = trigger.MaxRuntimeTicks / 36e9;
if (hours == 1) {
html += globalize.translate('ValueTimeLimitSingleHour');
} else {
@ -68,7 +75,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
}
html += '</div>';
html += '<button class="btnDeleteTrigger" data-index="' + i + '" type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonDelete') + '"><span class="material-icons delete"></span></button>';
html += '<button class="btnDeleteTrigger" data-index="' + i + '" type="button" is="paper-icon-button-light" title="' + globalize.translate('Delete') + '"><span class="material-icons delete"></span></button>';
html += '</div>';
}
@ -77,22 +84,21 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
},
// TODO: Replace this mess with date-fns and remove datetime completely
getTriggerFriendlyName: function (trigger) {
if ('DailyTrigger' == trigger.Type) {
if (trigger.Type == 'DailyTrigger') {
return globalize.translate('DailyAt', ScheduledTaskPage.getDisplayTime(trigger.TimeOfDayTicks));
}
if ('WeeklyTrigger' == trigger.Type) {
if (trigger.Type == 'WeeklyTrigger') {
// TODO: The day of week isn't localised as well
return globalize.translate('WeeklyAt', trigger.DayOfWeek, ScheduledTaskPage.getDisplayTime(trigger.TimeOfDayTicks));
}
if ('SystemEventTrigger' == trigger.Type && 'WakeFromSleep' == trigger.SystemEvent) {
if (trigger.Type == 'SystemEventTrigger' && trigger.SystemEvent == 'WakeFromSleep') {
return globalize.translate('OnWakeFromSleep');
}
if (trigger.Type == 'IntervalTrigger') {
var hours = trigger.IntervalTicks / 36e9;
const hours = trigger.IntervalTicks / 36e9;
if (hours == 0.25) {
return globalize.translate('EveryXMinutes', '15');
@ -117,8 +123,8 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
return trigger.Type;
},
getDisplayTime: function (ticks) {
var ms = ticks / 1e4;
var now = new Date();
const ms = ticks / 1e4;
const now = new Date();
now.setHours(0, 0, 0, 0);
now.setTime(now.getTime() + ms);
return datetime.getDisplayTime(now);
@ -129,7 +135,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
$('#popupAddTrigger', view).removeClass('hide');
},
confirmDeleteTrigger: function (view, index) {
require(['confirm'], function (confirm) {
import('confirm').then(({default: confirm}) => {
confirm(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () {
ScheduledTaskPage.deleteTrigger(view, index);
});
@ -137,7 +143,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
},
deleteTrigger: function (view, index) {
loading.show();
var id = getParameterByName('id');
const id = getParameterByName('id');
ApiClient.getScheduledTask(id).then(function (task) {
task.Triggers.remove(index);
ApiClient.updateScheduledTaskTriggers(task.Id, task.Triggers).then(function () {
@ -179,7 +185,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
}
},
getTriggerToAdd: function (page) {
var trigger = {
const trigger = {
Type: $('#selectTriggerType', page).val()
};
@ -194,7 +200,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
trigger.IntervalTicks = $('#selectInterval', page).val();
}
var timeLimit = $('#txtTimeLimit', page).val() || '0';
let timeLimit = $('#txtTimeLimit', page).val() || '0';
timeLimit = parseFloat(timeLimit) * 3600000;
trigger.MaxRuntimeMs = timeLimit || null;
@ -202,10 +208,10 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
return trigger;
}
};
return function (view, params) {
export default function (view, params) {
function onSubmit(e) {
loading.show();
var id = getParameterByName('id');
const id = getParameterByName('id');
ApiClient.getScheduledTask(id).then(function (task) {
task.Triggers.push(ScheduledTaskPage.getTriggerToAdd(view));
ApiClient.updateScheduledTaskTriggers(task.Id, task.Triggers).then(function () {
@ -226,7 +232,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
ScheduledTaskPage.showAddTriggerPopup(view);
});
view.addEventListener('click', function (e) {
var btnDeleteTrigger = dom.parentWithClass(e.target, 'btnDeleteTrigger');
const btnDeleteTrigger = dom.parentWithClass(e.target, 'btnDeleteTrigger');
if (btnDeleteTrigger) {
ScheduledTaskPage.confirmDeleteTrigger(view, parseInt(btnDeleteTrigger.getAttribute('data-index')));
@ -235,5 +241,6 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
view.addEventListener('viewshow', function () {
ScheduledTaskPage.refreshScheduledTask(view);
});
};
});
}
/* eslint-enable indent */

20
src/controllers/dashboard/scheduledtasks/scheduledtasks.html Normal file
View file

@ -0,0 +1,20 @@
<div id="scheduledTasksPage" data-role="page" class="page type-interior scheduledTasksConfigurationPage">
<style>
.taskProgressOuter {
height: 6px;
background: #eee;
border-radius: 2px;
}
.taskProgressInner {
border-radius: 2px;
height: 100%;
background: #00a4dc;
}
</style>
<div>
<div class="content-primary">
<div class="divScheduledTasks readOnlyContent"></div>
</div>
</div>
</div>

54
src/controllers/dashboard/scheduledtasks/scheduledtasks.js
View file

@ -1,5 +1,14 @@
define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date-fns', 'dfnshelper', 'listViewStyle', 'emby-button'], function ($, loading, events, globalize, serverNotifications, datefns, dfnshelper) {
'use strict';
import $ from 'jQuery';
import loading from 'loading';
import events from 'events';
import globalize from 'globalize';
import serverNotifications from 'serverNotifications';
import * as datefns from 'date-fns';
import dfnshelper from 'dfnshelper';
import 'listViewStyle';
import 'emby-button';
/* eslint-disable indent */
function reloadList(page) {
ApiClient.getScheduledTasks({
@ -17,10 +26,10 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
return a == b ? 0 : a < b ? -1 : 1;
});
var currentCategory;
var html = '';
for (var i = 0; i < tasks.length; i++) {
var task = tasks[i];
let currentCategory;
let html = '';
for (let i = 0; i < tasks.length; i++) {
const task = tasks[i];
if (task.Category != currentCategory) {
currentCategory = task.Category;
if (currentCategory) {
@ -63,11 +72,11 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
}
function getTaskProgressHtml(task) {
var html = '';
let html = '';
if (task.State === 'Idle') {
if (task.LastExecutionResult) {
var endtime = Date.parse(task.LastExecutionResult.EndTimeUtc);
var starttime = Date.parse(task.LastExecutionResult.StartTimeUtc);
const endtime = Date.parse(task.LastExecutionResult.EndTimeUtc);
const starttime = Date.parse(task.LastExecutionResult.StartTimeUtc);
html += globalize.translate('LabelScheduledTaskLastRan', datefns.formatDistanceToNow(endtime, dfnshelper.localeWithSuffix),
datefns.formatDistance(starttime, endtime, { locale: dfnshelper.getLocale() }));
if (task.LastExecutionResult.Status === 'Failed') {
@ -79,7 +88,7 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
}
}
} else if (task.State === 'Running') {
var progress = (task.CurrentProgressPercentage || 0).toFixed(1);
const progress = (task.CurrentProgressPercentage || 0).toFixed(1);
html += '<div style="display:flex;align-items:center;">';
html += '<div class="taskProgressOuter" title="' + progress + '%" style="flex-grow:1;">';
html += '<div class="taskProgressInner" style="width:' + progress + '%;">';
@ -94,7 +103,7 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
}
function setTaskButtonIcon(button, icon) {
var inner = button.querySelector('.material-icons');
const inner = button.querySelector('.material-icons');
inner.classList.remove('stop', 'play_arrow');
inner.classList.add(icon);
}
@ -114,10 +123,10 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
$(elem).parents('.listItem')[0].setAttribute('data-status', state);
}
return function(view, params) {
export default function(view, params) {
function updateTasks(tasks) {
for (var i = 0; i < tasks.length; i++) {
var task = tasks[i];
for (let i = 0; i < tasks.length; i++) {
const task = tasks[i];
view.querySelector('#taskProgress' + task.Id).innerHTML = getTaskProgressHtml(task);
updateTaskButton(view.querySelector('#btnTask' + task.Id), task.State);
}
@ -146,12 +155,12 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
pollInterval && clearInterval(pollInterval);
}
var pollInterval;
var serverId = ApiClient.serverId();
let pollInterval;
const serverId = ApiClient.serverId();
$('.divScheduledTasks', view).on('click', '.btnStartTask', function() {
var button = this;
var id = button.getAttribute('data-taskid');
const button = this;
const id = button.getAttribute('data-taskid');
ApiClient.startScheduledTask(id).then(function() {
updateTaskButton(button, 'Running');
reloadList(view);
@ -159,8 +168,8 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
});
$('.divScheduledTasks', view).on('click', '.btnStopTask', function() {
var button = this;
var id = button.getAttribute('data-taskid');
const button = this;
const id = button.getAttribute('data-taskid');
ApiClient.stopScheduledTask(id).then(function() {
updateTaskButton(button, '');
reloadList(view);
@ -178,5 +187,6 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
reloadList(view);
events.on(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate);
});
};
});
}
/* eslint-enable indent */

12
src/controllers/dashboard/serveractivity.html Normal file
View file

@ -0,0 +1,12 @@
<div id="serverActivityPage" data-role="page" class="page type-interior serverActivityPage noSecondaryNavPage" data-title="${HeaderActivity}">
<div>
<div class="content-primary">
<div class="verticalSection">
<h2 class="sectionTitle"></h2>
</div>
<div class="readOnlyContent">
<div class="paperList activityItems" data-activitylimit="100"></div>
</div>
</div>
</div>
</div>

15
src/controllers/dashboard/serveractivity.js
View file

@ -1,8 +1,10 @@
define(['components/activitylog', 'globalize'], function (ActivityLog, globalize) {
'use strict';
import ActivityLog from 'components/activitylog';
import globalize from 'globalize';
return function (view, params) {
var activityLog;
/* eslint-disable indent */
export default function (view, params) {
let activityLog;
if (params.useractivity !== 'false') {
view.querySelector('.activityItems').setAttribute('data-useractivity', 'true');
@ -27,5 +29,6 @@ define(['components/activitylog', 'globalize'], function (ActivityLog, globalize
activityLog = null;
});
};
});
}
/* eslint-enable indent */

20
src/controllers/dashboard/streaming.html Normal file
View file

@ -0,0 +1,20 @@
<div id="streamingSettingsPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs">
<div>
<div class="content-primary">
<form class="streamingSettingsForm">
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${TabStreaming}</h2>
</div>
<div class="inputContainer">
<input is="emby-input" type="number" id="txtRemoteClientBitrateLimit" pattern="[0-9]*" min="0" step=".25" label="${LabelRemoteClientBitrateLimit}" />
<div class="fieldDescription">${LabelRemoteClientBitrateLimitHelp}</div>
</div>
</div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
</form>
</div>
</div>
</div>

17
src/controllers/dashboard/streaming.js
View file

@ -1,5 +1,9 @@
define(['jQuery', 'libraryMenu', 'loading', 'globalize'], function ($, libraryMenu, loading, globalize) {
'use strict';
import $ from 'jQuery';
import libraryMenu from 'libraryMenu';
import loading from 'loading';
import globalize from 'globalize';
/* eslint-disable indent */
function loadPage(page, config) {
$('#txtRemoteClientBitrateLimit', page).val(config.RemoteClientBitrateLimit / 1e6 || '');
@ -8,7 +12,7 @@ define(['jQuery', 'libraryMenu', 'loading', 'globalize'], function ($, libraryMe
function onSubmit() {
loading.show();
var form = this;
const form = this;
ApiClient.getServerConfiguration().then(function (config) {
config.RemoteClientBitrateLimit = parseInt(1e6 * parseFloat($('#txtRemoteClientBitrateLimit', form).val() || '0'));
ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult);
@ -23,7 +27,7 @@ define(['jQuery', 'libraryMenu', 'loading', 'globalize'], function ($, libraryMe
name: globalize.translate('Transcoding')
}, {
href: 'playbackconfiguration.html',
name: globalize.translate('TabResumeSettings')
name: globalize.translate('ButtonResume')
}, {
href: 'streamingsettings.html',
name: globalize.translate('TabStreaming')
@ -35,9 +39,10 @@ define(['jQuery', 'libraryMenu', 'loading', 'globalize'], function ($, libraryMe
}).on('pageshow', '#streamingSettingsPage', function () {
loading.show();
libraryMenu.setTabs('playback', 2, getTabs);
var page = this;
const page = this;
ApiClient.getServerConfiguration().then(function (config) {
loadPage(page, config);
});
});
});
/* eslint-enable indent */

205
src/controllers/dashboard/users/useredit.html Normal file
View file

@ -0,0 +1,205 @@
<div id="editUserPage" data-role="page" class="page type-interior">
<div>
<div class="content-primary">
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle username"></h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
</div>
</div>
<div data-role="controlgroup" data-type="horizontal" class="localnav" id="userProfileNavigation" data-mini="true">
<a href="#" is="emby-linkbutton" data-role="button" class="ui-btn-active">${Profile}</a>
<a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userlibraryaccess.html', true);">${TabAccess}</a>
<a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);">${TabParentalControl}</a>
<a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${HeaderPassword}</a>
</div>
<p class="lnkEditUserPreferencesContainer">
<a class="lnkEditUserPreferences button-link" href="#" is="emby-linkbutton">${ButtonEditOtherUserPreferences}</a>
</p>
<form class="editUserProfileForm">
<div class="disabledUserBanner" style="display: none;">
<div class="btn btnDarkAccent btnStatic">
<div>
${HeaderThisUserIsCurrentlyDisabled}
</div>
<div style="margin-top: 5px;">
${MessageReenableUser}
</div>
</div>
</div>
<div id="fldUserName" class="inputContainer">
<input is="emby-input" id="txtUserName" required type="text" label="${LabelName}" />
</div>
<div class="selectContainer fldSelectLoginProvider hide">
<select class="selectLoginProvider" is="emby-select" label="${LabelAuthProvider}"></select>
<div class="fieldDescription">${AuthProviderHelp}</div>
</div>
<div class="selectContainer fldSelectPasswordResetProvider hide">
<select class="selectPasswordResetProvider" is="emby-select" label="${LabelPasswordResetProvider}"></select>
<div class="fieldDescription">${PasswordResetProviderHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription fldRemoteAccess hide">
<label>
<input type="checkbox" is="emby-checkbox" id="chkRemoteAccess" />
<span>${AllowRemoteAccess}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${AllowRemoteAccessHelp}</div>
</div>
<label class="checkboxContainer">
<input type="checkbox" is="emby-checkbox" id="chkIsAdmin" />
<span>${OptionAllowUserToManageServer}</span>
</label>
<div id="featureAccessFields" class="verticalSection">
<h2 class="paperListLabel">${HeaderFeatureAccess}</h2>
<div class="checkboxList paperList" style="padding:.5em 1em;">
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableLiveTvAccess" />
<span>${OptionAllowBrowsingLiveTv}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkManageLiveTv" />
<span>${OptionAllowManageLiveTv}</span>
</label>
</div>
</div>
<div class="verticalSection">
<h2 class="paperListLabel">${HeaderPlayback}</h2>
<div class="checkboxList paperList" style="padding:.5em 1em;">
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableMediaPlayback" />
<span>${OptionAllowMediaPlayback}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableAudioPlaybackTranscoding" />
<span>${OptionAllowAudioPlaybackTranscoding}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableVideoPlaybackTranscoding" />
<span>${OptionAllowVideoPlaybackTranscoding}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableVideoPlaybackRemuxing" />
<span>${OptionAllowVideoPlaybackRemuxing}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkForceRemoteSourceTranscoding" />
<span>${OptionForceRemoteSourceTranscoding}</span>
</label>
</div>
<div class="fieldDescription">${OptionAllowMediaPlaybackTranscodingHelp}</div>
</div>
<br />
<div class="verticalSection">
<div class="inputContainer">
<input is="emby-input" type="number" id="txtRemoteClientBitrateLimit" pattern="[0-9]*" min="0" step=".25" label="${LabelRemoteClientBitrateLimit}" />
<div class="fieldDescription">${LabelRemoteClientBitrateLimitHelp}</div>
<div class="fieldDescription">${LabelUserRemoteClientBitrateLimitHelp}</div>
</div>
</div>
<div class="verticalSection">
<div class="selectContainer fldSelectSyncPlayAccess">
<select class="selectSyncPlayAccess" is="emby-select" id="selectSyncPlayAccess" label="${LabelSyncPlayAccess}">
<option value="CreateAndJoinGroups">${LabelSyncPlayAccessCreateAndJoinGroups}</option>
<option value="JoinGroups">${LabelSyncPlayAccessJoinGroups}</option>
<option value="None">${LabelSyncPlayAccessNone}</option>
</select>
<div class="fieldDescription">${SyncPlayAccessHelp}</div>
</div>
</div>
<div class="verticalSection">
<h2 class="checkboxListLabel" style="margin-bottom:1em;">${HeaderAllowMediaDeletionFrom}</h2>
<div class="checkboxList paperList checkboxList-paperList">
<label class="checkboxContainer">
<input type="checkbox" is="emby-checkbox" id="chkEnableDeleteAllFolders" />
<span>${AllLibraries}</span>
</label>
<div class="deleteAccess">
</div>
</div>
</div>
<div class="verticalSection">
<h2 class="checkboxListLabel">${HeaderRemoteControl}</h2>
<div class="checkboxList paperList" style="padding:.5em 1em;">
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableRemoteControlOtherUsers" />
<span>${OptionAllowRemoteControlOthers}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkRemoteControlSharedDevices" />
<span>${OptionAllowRemoteSharedDevices}</span>
</label>
</div>
<div class="fieldDescription">${OptionAllowRemoteSharedDevicesHelp}</div>
</div>
<div class="verticalSection">
<h2 class="checkboxListLabel">${HeaderDownloadSync}</h2>
<div class="checkboxList paperList" style="padding:.5em 1em;">
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableDownloading" />
<span>${OptionAllowContentDownloading}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableSyncTranscoding" />
<span>${OptionAllowSyncTranscoding}</span>
</label>
</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableConversion" />
<span>${AllowMediaConversion}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${AllowMediaConversionHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableSharing" />
<span>${OptionAllowLinkSharing}</span>
</label>
<div class="fieldDescription checkboxFieldDescription sharingHelp"></div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription" id="fldIsEnabled">
<label>
<input type="checkbox" is="emby-checkbox" id="chkDisabled" />
<span>${OptionDisableUser}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${OptionDisableUserHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription" id="fldIsHidden">
<label>
<input type="checkbox" is="emby-checkbox" id="chkIsHidden" />
<span>${OptionHideUser}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${OptionHideUserFromLoginHelp}</div>
</div>
<br/>
<div class=verticalSection>
<div class="inputContainer" id="fldLoginAttemptsBeforeLockout">
<input is="emby-input" type="number" id="txtLoginAttemptsBeforeLockout" min="-1" step="1" label="${LabelUserLoginAttemptsBeforeLockout}"/>
<div class="fieldDescription">${OptionLoginAttemptsBeforeLockout}</div>
<div class="fieldDescription">${OptionLoginAttemptsBeforeLockoutHelp}</div>
</div>
</div>
<br />
<div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
<button is="emby-button" type="button" class="raised button-cancel block btnCancel" onclick="history.back();">
<span>${ButtonCancel}</span>
</button>
</div>
</form>
</div>
</div>
</div>

128
src/controllers/dashboard/users/useredit.js
View file

@ -1,33 +1,32 @@
define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function ($, loading, libraryMenu, globalize) {
'use strict';
import $ from 'jQuery';
import loading from 'loading';
import libraryMenu from 'libraryMenu';
import globalize from 'globalize';
/* eslint-disable indent */
function loadDeleteFolders(page, user, mediaFolders) {
ApiClient.getJSON(ApiClient.getUrl('Channels', {
SupportsMediaDeletion: true
})).then(function (channelsResult) {
var i;
var length;
var folder;
var isChecked;
var checkedAttribute;
var html = '';
let isChecked;
let checkedAttribute;
let html = '';
for (i = 0, length = mediaFolders.length; i < length; i++) {
folder = mediaFolders[i];
isChecked = user.Policy.EnableContentDeletion || -1 != user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id);
for (const folder of mediaFolders) {
isChecked = user.Policy.EnableContentDeletion || user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id) != -1;
checkedAttribute = isChecked ? ' checked="checked"' : '';
html += '<label><input type="checkbox" is="emby-checkbox" class="chkFolder" data-id="' + folder.Id + '" ' + checkedAttribute + '><span>' + folder.Name + '</span></label>';
}
for (i = 0, length = channelsResult.Items.length; i < length; i++) {
folder = channelsResult.Items[i];
isChecked = user.Policy.EnableContentDeletion || -1 != user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id);
for (const folder of channelsResult.Items) {
isChecked = user.Policy.EnableContentDeletion || user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id) != -1;
checkedAttribute = isChecked ? ' checked="checked"' : '';
html += '<label><input type="checkbox" is="emby-checkbox" class="chkFolder" data-id="' + folder.Id + '" ' + checkedAttribute + '><span>' + folder.Name + '</span></label>';
}
$('.deleteAccess', page).html(html).trigger('create');
$('#chkEnableDeleteAllFolders', page).checked(user.Policy.EnableContentDeletion).trigger('change');
$('#chkEnableDeleteAllFolders', page).prop('checked', user.Policy.EnableContentDeletion);
});
}
@ -38,9 +37,9 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
page.querySelector('.fldSelectLoginProvider').classList.add('hide');
}
var currentProviderId = user.Policy.AuthenticationProviderId;
const currentProviderId = user.Policy.AuthenticationProviderId;
page.querySelector('.selectLoginProvider').innerHTML = providers.map(function (provider) {
var selected = provider.Id === currentProviderId || providers.length < 2 ? ' selected' : '';
const selected = provider.Id === currentProviderId || providers.length < 2 ? ' selected' : '';
return '<option value="' + provider.Id + '"' + selected + '>' + provider.Name + '</option>';
});
}
@ -52,15 +51,14 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
page.querySelector('.fldSelectPasswordResetProvider').classList.add('hide');
}
var currentProviderId = user.Policy.PasswordResetProviderId;
const currentProviderId = user.Policy.PasswordResetProviderId;
page.querySelector('.selectPasswordResetProvider').innerHTML = providers.map(function (provider) {
var selected = provider.Id === currentProviderId || providers.length < 2 ? ' selected' : '';
const selected = provider.Id === currentProviderId || providers.length < 2 ? ' selected' : '';
return '<option value="' + provider.Id + '"' + selected + '>' + provider.Name + '</option>';
});
}
function loadUser(page, user) {
currentUser = user;
ApiClient.getJSON(ApiClient.getUrl('Auth/Providers')).then(function (providers) {
loadAuthProviders(page, user, providers);
});
@ -85,26 +83,28 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
libraryMenu.setTitle(user.Name);
page.querySelector('.username').innerHTML = user.Name;
$('#txtUserName', page).val(user.Name);
$('#chkIsAdmin', page).checked(user.Policy.IsAdministrator);
$('#chkDisabled', page).checked(user.Policy.IsDisabled);
$('#chkIsHidden', page).checked(user.Policy.IsHidden);
$('#chkRemoteControlSharedDevices', page).checked(user.Policy.EnableSharedDeviceControl);
$('#chkEnableRemoteControlOtherUsers', page).checked(user.Policy.EnableRemoteControlOfOtherUsers);
$('#chkEnableDownloading', page).checked(user.Policy.EnableContentDownloading);
$('#chkManageLiveTv', page).checked(user.Policy.EnableLiveTvManagement);
$('#chkEnableLiveTvAccess', page).checked(user.Policy.EnableLiveTvAccess);
$('#chkEnableMediaPlayback', page).checked(user.Policy.EnableMediaPlayback);
$('#chkEnableAudioPlaybackTranscoding', page).checked(user.Policy.EnableAudioPlaybackTranscoding);
$('#chkEnableVideoPlaybackTranscoding', page).checked(user.Policy.EnableVideoPlaybackTranscoding);
$('#chkEnableVideoPlaybackRemuxing', page).checked(user.Policy.EnablePlaybackRemuxing);
$('#chkForceRemoteSourceTranscoding', page).checked(user.Policy.ForceRemoteSourceTranscoding);
$('#chkRemoteAccess', page).checked(null == user.Policy.EnableRemoteAccess || user.Policy.EnableRemoteAccess);
$('#chkEnableSyncTranscoding', page).checked(user.Policy.EnableSyncTranscoding);
$('#chkEnableConversion', page).checked(user.Policy.EnableMediaConversion || false);
$('#chkEnableSharing', page).checked(user.Policy.EnablePublicSharing);
$('#chkIsAdmin', page).prop('checked', user.Policy.IsAdministrator);
$('#chkDisabled', page).prop('checked', user.Policy.IsDisabled);
$('#chkIsHidden', page).prop('checked', user.Policy.IsHidden);
$('#chkRemoteControlSharedDevices', page).prop('checked', user.Policy.EnableSharedDeviceControl);
$('#chkEnableRemoteControlOtherUsers', page).prop('checked', user.Policy.EnableRemoteControlOfOtherUsers);
$('#chkEnableDownloading', page).prop('checked', user.Policy.EnableContentDownloading);
$('#chkManageLiveTv', page).prop('checked', user.Policy.EnableLiveTvManagement);
$('#chkEnableLiveTvAccess', page).prop('checked', user.Policy.EnableLiveTvAccess);
$('#chkEnableMediaPlayback', page).prop('checked', user.Policy.EnableMediaPlayback);
$('#chkEnableAudioPlaybackTranscoding', page).prop('checked', user.Policy.EnableAudioPlaybackTranscoding);
$('#chkEnableVideoPlaybackTranscoding', page).prop('checked', user.Policy.EnableVideoPlaybackTranscoding);
$('#chkEnableVideoPlaybackRemuxing', page).prop('checked', user.Policy.EnablePlaybackRemuxing);
$('#chkForceRemoteSourceTranscoding', page).prop('checked', user.Policy.ForceRemoteSourceTranscoding);
$('#chkRemoteAccess', page).prop('checked', user.Policy.EnableRemoteAccess == null || user.Policy.EnableRemoteAccess);
$('#chkEnableSyncTranscoding', page).prop('checked', user.Policy.EnableSyncTranscoding);
$('#chkEnableConversion', page).prop('checked', user.Policy.EnableMediaConversion || false);
$('#chkEnableSharing', page).prop('checked', user.Policy.EnablePublicSharing);
$('#txtRemoteClientBitrateLimit', page).val(user.Policy.RemoteClientBitrateLimit / 1e6 || '');
$('#txtLoginAttemptsBeforeLockout', page).val(user.Policy.LoginAttemptsBeforeLockout || '0');
$('#selectSyncPlayAccess').val(user.Policy.SyncPlayAccess);
if (ApiClient.isMinServerVersion('10.6.0')) {
$('#selectSyncPlayAccess').val(user.Policy.SyncPlayAccess);
}
loading.hide();
}
@ -112,41 +112,43 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
Dashboard.navigate('userprofiles.html');
loading.hide();
require(['toast'], function (toast) {
import('toast').then(({default: toast}) => {
toast(globalize.translate('SettingsSaved'));
});
}
function saveUser(user, page) {
user.Name = $('#txtUserName', page).val();
user.Policy.IsAdministrator = $('#chkIsAdmin', page).checked();
user.Policy.IsHidden = $('#chkIsHidden', page).checked();
user.Policy.IsDisabled = $('#chkDisabled', page).checked();
user.Policy.EnableRemoteControlOfOtherUsers = $('#chkEnableRemoteControlOtherUsers', page).checked();
user.Policy.EnableLiveTvManagement = $('#chkManageLiveTv', page).checked();
user.Policy.EnableLiveTvAccess = $('#chkEnableLiveTvAccess', page).checked();
user.Policy.EnableSharedDeviceControl = $('#chkRemoteControlSharedDevices', page).checked();
user.Policy.EnableMediaPlayback = $('#chkEnableMediaPlayback', page).checked();
user.Policy.EnableAudioPlaybackTranscoding = $('#chkEnableAudioPlaybackTranscoding', page).checked();
user.Policy.EnableVideoPlaybackTranscoding = $('#chkEnableVideoPlaybackTranscoding', page).checked();
user.Policy.EnablePlaybackRemuxing = $('#chkEnableVideoPlaybackRemuxing', page).checked();
user.Policy.ForceRemoteSourceTranscoding = $('#chkForceRemoteSourceTranscoding', page).checked();
user.Policy.EnableContentDownloading = $('#chkEnableDownloading', page).checked();
user.Policy.EnableSyncTranscoding = $('#chkEnableSyncTranscoding', page).checked();
user.Policy.EnableMediaConversion = $('#chkEnableConversion', page).checked();
user.Policy.EnablePublicSharing = $('#chkEnableSharing', page).checked();
user.Policy.EnableRemoteAccess = $('#chkRemoteAccess', page).checked();
user.Policy.IsAdministrator = $('#chkIsAdmin', page).is(':checked');
user.Policy.IsHidden = $('#chkIsHidden', page).is(':checked');
user.Policy.IsDisabled = $('#chkDisabled', page).is(':checked');
user.Policy.EnableRemoteControlOfOtherUsers = $('#chkEnableRemoteControlOtherUsers', page).is(':checked');
user.Policy.EnableLiveTvManagement = $('#chkManageLiveTv', page).is(':checked');
user.Policy.EnableLiveTvAccess = $('#chkEnableLiveTvAccess', page).is(':checked');
user.Policy.EnableSharedDeviceControl = $('#chkRemoteControlSharedDevices', page).is(':checked');
user.Policy.EnableMediaPlayback = $('#chkEnableMediaPlayback', page).is(':checked');
user.Policy.EnableAudioPlaybackTranscoding = $('#chkEnableAudioPlaybackTranscoding', page).is(':checked');
user.Policy.EnableVideoPlaybackTranscoding = $('#chkEnableVideoPlaybackTranscoding', page).is(':checked');
user.Policy.EnablePlaybackRemuxing = $('#chkEnableVideoPlaybackRemuxing', page).is(':checked');
user.Policy.ForceRemoteSourceTranscoding = $('#chkForceRemoteSourceTranscoding', page).is(':checked');
user.Policy.EnableContentDownloading = $('#chkEnableDownloading', page).is(':checked');
user.Policy.EnableSyncTranscoding = $('#chkEnableSyncTranscoding', page).is(':checked');
user.Policy.EnableMediaConversion = $('#chkEnableConversion', page).is(':checked');
user.Policy.EnablePublicSharing = $('#chkEnableSharing', page).is(':checked');
user.Policy.EnableRemoteAccess = $('#chkRemoteAccess', page).is(':checked');
user.Policy.RemoteClientBitrateLimit = parseInt(1e6 * parseFloat($('#txtRemoteClientBitrateLimit', page).val() || '0'));
user.Policy.LoginAttemptsBeforeLockout = parseInt($('#txtLoginAttemptsBeforeLockout', page).val() || '0');
user.Policy.AuthenticationProviderId = page.querySelector('.selectLoginProvider').value;
user.Policy.PasswordResetProviderId = page.querySelector('.selectPasswordResetProvider').value;
user.Policy.EnableContentDeletion = $('#chkEnableDeleteAllFolders', page).checked();
user.Policy.EnableContentDeletion = $('#chkEnableDeleteAllFolders', page).is(':checked');
user.Policy.EnableContentDeletionFromFolders = user.Policy.EnableContentDeletion ? [] : $('.chkFolder', page).get().filter(function (c) {
return c.checked;
}).map(function (c) {
return c.getAttribute('data-id');
});
user.Policy.SyncPlayAccess = page.querySelector('#selectSyncPlayAccess').value;
if (ApiClient.isMinServerVersion('10.6.0')) {
user.Policy.SyncPlayAccess = page.querySelector('#selectSyncPlayAccess').value;
}
ApiClient.updateUser(user).then(function () {
ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
onSaveComplete(page, user);
@ -155,7 +157,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
}
function onSubmit() {
var page = $(this).parents('.page')[0];
const page = $(this).parents('.page')[0];
loading.show();
getUser().then(function (result) {
saveUser(result, page);
@ -164,7 +166,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
}
function getUser() {
var userId = getParameterByName('userId');
const userId = getParameterByName('userId');
return ApiClient.getUser(userId);
}
@ -175,11 +177,10 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
});
}
var currentUser;
$(document).on('pageinit', '#editUserPage', function () {
$('.editUserProfileForm').off('submit', onSubmit).on('submit', onSubmit);
this.querySelector('.sharingHelp').innerHTML = globalize.translate('OptionAllowLinkSharingHelp', 30);
var page = this;
const page = this;
$('#chkEnableDeleteAllFolders', this).on('change', function () {
if (this.checked) {
$('.deleteAccess', page).hide();
@ -197,4 +198,5 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
}).on('pagebeforeshow', '#editUserPage', function () {
loadData(this);
});
});
/* eslint-enable indent */

68
src/controllers/dashboard/users/userlibraryaccess.html Normal file
View file

@ -0,0 +1,68 @@
<div id="userLibraryAccessPage" data-role="page" class="page type-interior">
<div>
<div class="content-primary">
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle username"></h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
</div>
</div>
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('useredit.html', true);">${Profile}</a>
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userlibraryaccess.html', true);" class="ui-btn-active">${TabAccess}</a>
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);">${TabParentalControl}</a>
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${HeaderPassword}</a>
</div>
<form class="userLibraryAccessForm">
<div class="folderAccessContainer">
<h2>${HeaderLibraryAccess}</h2>
<label class="checkboxContainer">
<input type="checkbox" is="emby-checkbox" id="chkEnableAllFolders" />
<span>${OptionEnableAccessToAllLibraries}</span>
</label>
<div class="folderAccessListContainer">
<div class="folderAccess">
</div>
<div class="fieldDescription">${LibraryAccessHelp}</div>
</div>
</div>
<div class="channelAccessContainer" style="display:none;">
<h2>${HeaderChannelAccess}</h2>
<label class="checkboxContainer">
<input type="checkbox" is="emby-checkbox" id="chkEnableAllChannels" />
<span>${OptionEnableAccessToAllChannels}</span>
</label>
<div class="channelAccessListContainer">
<div class="channelAccess">
</div>
<div class="fieldDescription">${ChannelAccessHelp}</div>
</div>
</div>
<br />
<div class="deviceAccessContainer hide">
<h2>${HeaderDeviceAccess}</h2>
<label class="checkboxContainer">
<input type="checkbox" is="emby-checkbox" id="chkEnableAllDevices" />
<span>${OptionEnableAccessFromAllDevices}</span>
</label>
<div class="deviceAccessListContainer">
<div class="deviceAccess">
</div>
<div class="fieldDescription">${DeviceAccessHelp}</div>
</div>
<br />
</div>
<br />
<div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
</div>
</form>
</div>
</div>
</div>

79
src/controllers/dashboard/users/userlibraryaccess.js
View file

@ -1,40 +1,44 @@
define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function ($, loading, libraryMenu, globalize) {
'use strict';
import $ from 'jQuery';
import loading from 'loading';
import libraryMenu from 'libraryMenu';
import globalize from 'globalize';
/* eslint-disable indent */
function triggerChange(select) {
var evt = document.createEvent('HTMLEvents');
const evt = document.createEvent('HTMLEvents');
evt.initEvent('change', false, true);
select.dispatchEvent(evt);
}
function loadMediaFolders(page, user, mediaFolders) {
var html = '';
let html = '';
html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderLibraries') + '</h3>';
html += '<div class="checkboxList paperList checkboxList-paperList">';
for (var i = 0, length = mediaFolders.length; i < length; i++) {
var folder = mediaFolders[i];
var isChecked = user.Policy.EnableAllFolders || -1 != user.Policy.EnabledFolders.indexOf(folder.Id);
var checkedAttribute = isChecked ? ' checked="checked"' : '';
for (let i = 0, length = mediaFolders.length; i < length; i++) {
const folder = mediaFolders[i];
const isChecked = user.Policy.EnableAllFolders || user.Policy.EnabledFolders.indexOf(folder.Id) != -1;
const checkedAttribute = isChecked ? ' checked="checked"' : '';
html += '<label><input type="checkbox" is="emby-checkbox" class="chkFolder" data-id="' + folder.Id + '" ' + checkedAttribute + '><span>' + folder.Name + '</span></label>';
}
html += '</div>';
page.querySelector('.folderAccess').innerHTML = html;
var chkEnableAllFolders = page.querySelector('#chkEnableAllFolders');
const chkEnableAllFolders = page.querySelector('#chkEnableAllFolders');
chkEnableAllFolders.checked = user.Policy.EnableAllFolders;
triggerChange(chkEnableAllFolders);
}
function loadChannels(page, user, channels) {
var html = '';
html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderChannels') + '</h3>';
let html = '';
html += '<h3 class="checkboxListLabel">' + globalize.translate('Channels') + '</h3>';
html += '<div class="checkboxList paperList checkboxList-paperList">';
for (var i = 0, length = channels.length; i < length; i++) {
var folder = channels[i];
var isChecked = user.Policy.EnableAllChannels || -1 != user.Policy.EnabledChannels.indexOf(folder.Id);
var checkedAttribute = isChecked ? ' checked="checked"' : '';
for (let i = 0, length = channels.length; i < length; i++) {
const folder = channels[i];
const isChecked = user.Policy.EnableAllChannels || user.Policy.EnabledChannels.indexOf(folder.Id) != -1;
const checkedAttribute = isChecked ? ' checked="checked"' : '';
html += '<label><input type="checkbox" is="emby-checkbox" class="chkChannel" data-id="' + folder.Id + '" ' + checkedAttribute + '><span>' + folder.Name + '</span></label>';
}
@ -47,23 +51,23 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
$('.channelAccessContainer', page).hide();
}
$('#chkEnableAllChannels', page).checked(user.Policy.EnableAllChannels).trigger('change');
$('#chkEnableAllChannels', page).prop('checked', user.Policy.EnableAllChannels);
}
function loadDevices(page, user, devices) {
var html = '';
let html = '';
html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderDevices') + '</h3>';
html += '<div class="checkboxList paperList checkboxList-paperList">';
for (var i = 0, length = devices.length; i < length; i++) {
var device = devices[i];
var checkedAttribute = user.Policy.EnableAllDevices || -1 != user.Policy.EnabledDevices.indexOf(device.Id) ? ' checked="checked"' : '';
for (let i = 0, length = devices.length; i < length; i++) {
const device = devices[i];
const checkedAttribute = user.Policy.EnableAllDevices || user.Policy.EnabledDevices.indexOf(device.Id) != -1 ? ' checked="checked"' : '';
html += '<label><input type="checkbox" is="emby-checkbox" class="chkDevice" data-id="' + device.Id + '" ' + checkedAttribute + '><span>' + device.Name + ' - ' + device.AppName + '</span></label>';
}
html += '</div>';
$('.deviceAccess', page).show().html(html);
$('#chkEnableAllDevices', page).checked(user.Policy.EnableAllDevices).trigger('change');
$('#chkEnableAllDevices', page).prop('checked', user.Policy.EnableAllDevices);
if (user.Policy.IsAdministrator) {
page.querySelector('.deviceAccessContainer').classList.add('hide');
@ -84,25 +88,25 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
function onSaveComplete(page) {
loading.hide();
require(['toast'], function (toast) {
import('toast').then(({default: toast}) => {
toast(globalize.translate('SettingsSaved'));
});
}
function saveUser(user, page) {
user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).checked();
user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).is(':checked');
user.Policy.EnabledFolders = user.Policy.EnableAllFolders ? [] : $('.chkFolder', page).get().filter(function (c) {
return c.checked;
}).map(function (c) {
return c.getAttribute('data-id');
});
user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).checked();
user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).is(':checked');
user.Policy.EnabledChannels = user.Policy.EnableAllChannels ? [] : $('.chkChannel', page).get().filter(function (c) {
return c.checked;
}).map(function (c) {
return c.getAttribute('data-id');
});
user.Policy.EnableAllDevices = $('#chkEnableAllDevices', page).checked();
user.Policy.EnableAllDevices = $('#chkEnableAllDevices', page).is(':checked');
user.Policy.EnabledDevices = user.Policy.EnableAllDevices ? [] : $('.chkDevice', page).get().filter(function (c) {
return c.checked;
}).map(function (c) {
@ -116,9 +120,9 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
}
function onSubmit() {
var page = $(this).parents('.page');
const page = $(this).parents('.page');
loading.show();
var userId = getParameterByName('userId');
const userId = getParameterByName('userId');
ApiClient.getUser(userId).then(function (result) {
saveUser(result, page);
});
@ -126,7 +130,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
}
$(document).on('pageinit', '#userLibraryAccessPage', function () {
var page = this;
const page = this;
$('#chkEnableAllDevices', page).on('change', function () {
if (this.checked) {
$('.deviceAccessListContainer', page).hide();
@ -150,29 +154,30 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
});
$('.userLibraryAccessForm').off('submit', onSubmit).on('submit', onSubmit);
}).on('pageshow', '#userLibraryAccessPage', function () {
var page = this;
const page = this;
loading.show();
var promise1;
var userId = getParameterByName('userId');
let promise1;
const userId = getParameterByName('userId');
if (userId) {
promise1 = ApiClient.getUser(userId);
} else {
var deferred = $.Deferred();
const deferred = $.Deferred();
deferred.resolveWith(null, [{
Configuration: {}
}]);
promise1 = deferred.promise();
}
var promise2 = Dashboard.getCurrentUser();
var promise4 = ApiClient.getJSON(ApiClient.getUrl('Library/MediaFolders', {
const promise2 = Dashboard.getCurrentUser();
const promise4 = ApiClient.getJSON(ApiClient.getUrl('Library/MediaFolders', {
IsHidden: false
}));
var promise5 = ApiClient.getJSON(ApiClient.getUrl('Channels'));
var promise6 = ApiClient.getJSON(ApiClient.getUrl('Devices'));
const promise5 = ApiClient.getJSON(ApiClient.getUrl('Channels'));
const promise6 = ApiClient.getJSON(ApiClient.getUrl('Devices'));
Promise.all([promise1, promise2, promise4, promise5, promise6]).then(function (responses) {
loadUser(page, responses[0], responses[1], responses[2].Items, responses[3].Items, responses[4].Items);
});
});
});
/* eslint-enable indent */

62
src/controllers/dashboard/users/usernew.html Normal file
View file

@ -0,0 +1,62 @@
<div id="newUserPage" data-role="page" class="page type-interior">
<div>
<div class="content-primary">
<form class="newUserProfileForm">
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${ButtonAddUser}</h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
</div>
<div class="inputContainer">
<input is="emby-input" id="txtUsername" required type="text" label="${LabelName}" />
</div>
<div class="inputContainer">
<input is="emby-input" id="txtPassword" type="password" label="${LabelPassword}" />
</div>
</div>
<div class="folderAccessContainer verticalSection">
<h2 class="sectionTitle">${HeaderLibraryAccess}</h2>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableAllFolders" />
<span>${OptionEnableAccessToAllLibraries}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LibraryAccessHelp}</div>
</div>
<div class="folderAccessListContainer">
<div class="folderAccess">
</div>
</div>
</div>
<div class="channelAccessContainer verticalSection verticalSection-extrabottompadding" style="display:none;">
<h2 class="sectionTitle">${HeaderChannelAccess}</h2>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkEnableAllChannels" />
<span>${OptionEnableAccessToAllChannels}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${ChannelAccessHelp}</div>
</div>
<div class="channelAccessListContainer">
<div class="channelAccess">
</div>
</div>
</div>
<div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
<button is="emby-button" type="button" class="raised button-cancel block btnCancel" onclick="history.back();">
<span>${ButtonCancel}</span>
</button>
</div>
</form>
</div>
</div>
</div>

47
src/controllers/dashboard/users/usernew.js
View file

@ -1,28 +1,32 @@
define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], function ($, loading, globalize) {
'use strict';
import $ from 'jQuery';
import loading from 'loading';
import globalize from 'globalize';
import 'emby-checkbox';
/* eslint-disable indent */
function loadMediaFolders(page, mediaFolders) {
var html = '';
let html = '';
html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderLibraries') + '</h3>';
html += '<div class="checkboxList paperList" style="padding:.5em 1em;">';
for (var i = 0; i < mediaFolders.length; i++) {
var folder = mediaFolders[i];
for (let i = 0; i < mediaFolders.length; i++) {
const folder = mediaFolders[i];
html += '<label><input type="checkbox" is="emby-checkbox" class="chkFolder" data-id="' + folder.Id + '"/><span>' + folder.Name + '</span></label>';
}
html += '</div>';
$('.folderAccess', page).html(html).trigger('create');
$('#chkEnableAllFolders', page).checked(false).trigger('change');
$('#chkEnableAllFolders', page).prop('checked', false);
}
function loadChannels(page, channels) {
var html = '';
html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderChannels') + '</h3>';
let html = '';
html += '<h3 class="checkboxListLabel">' + globalize.translate('Channels') + '</h3>';
html += '<div class="checkboxList paperList" style="padding:.5em 1em;">';
for (var i = 0; i < channels.length; i++) {
var folder = channels[i];
for (let i = 0; i < channels.length; i++) {
const folder = channels[i];
html += '<label><input type="checkbox" is="emby-checkbox" class="chkChannel" data-id="' + folder.Id + '"/><span>' + folder.Name + '</span></label>';
}
@ -35,17 +39,17 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], functio
$('.channelAccessContainer', page).hide();
}
$('#chkEnableAllChannels', page).checked(false).trigger('change');
$('#chkEnableAllChannels', page).prop('checked', false);
}
function loadUser(page) {
$('#txtUsername', page).val('');
$('#txtPassword', page).val('');
loading.show();
var promiseFolders = ApiClient.getJSON(ApiClient.getUrl('Library/MediaFolders', {
const promiseFolders = ApiClient.getJSON(ApiClient.getUrl('Library/MediaFolders', {
IsHidden: false
}));
var promiseChannels = ApiClient.getJSON(ApiClient.getUrl('Channels'));
const promiseChannels = ApiClient.getJSON(ApiClient.getUrl('Channels'));
Promise.all([promiseFolders, promiseChannels]).then(function (responses) {
loadMediaFolders(page, responses[0].Items);
loadChannels(page, responses[1].Items);
@ -54,11 +58,11 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], functio
}
function saveUser(page) {
var user = {};
const user = {};
user.Name = $('#txtUsername', page).val();
user.Password = $('#txtPassword', page).val();
ApiClient.createUser(user).then(function (user) {
user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).checked();
user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).is(':checked');
user.Policy.EnabledFolders = [];
if (!user.Policy.EnableAllFolders) {
@ -69,7 +73,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], functio
});
}
user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).checked();
user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).is(':checked');
user.Policy.EnabledChannels = [];
if (!user.Policy.EnableAllChannels) {
@ -84,8 +88,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], functio
Dashboard.navigate('useredit.html?userId=' + user.Id);
});
}, function (response) {
require(['toast'], function (toast) {
toast(globalize.translate('DefaultErrorMessage'));
import('toast').then(({default: toast}) => {
toast(globalize.translate('ErrorDefault'));
});
loading.hide();
@ -93,7 +97,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], functio
}
function onSubmit() {
var page = $(this).parents('.page')[0];
const page = $(this).parents('.page')[0];
loading.show();
saveUser(page);
return false;
@ -104,7 +108,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], functio
}
$(document).on('pageinit', '#newUserPage', function () {
var page = this;
const page = this;
$('#chkEnableAllChannels', page).on('change', function () {
if (this.checked) {
$('.channelAccessListContainer', page).hide();
@ -123,4 +127,5 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], functio
}).on('pageshow', '#newUserPage', function () {
loadData(this);
});
});
/* eslint-enable indent */

60
src/controllers/dashboard/users/userparentalcontrol.html Normal file
View file

@ -0,0 +1,60 @@
<div id="userParentalControlPage" data-role="page" class="page type-interior">
<div>
<div class="content-primary">
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle username"></h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
</div>
</div>
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('useredit.html', true);">${Profile}</a>
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userlibraryaccess.html', true);">${TabAccess}</a>
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);" class="ui-btn-active">${TabParentalControl}</a>
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${HeaderPassword}</a>
</div>
<form class="userParentalControlForm">
<div class="selectContainer">
<select is="emby-select" id="selectMaxParentalRating" label="${LabelMaxParentalRating}"></select>
<div class="fieldDescription">${MaxParentalRatingHelp}</div>
</div>
<div>
<div class="blockUnratedItems"></div>
</div>
<br />
<div class="verticalSection" style="margin-bottom:2em;">
<div class="detailSectionHeader sectionTitleContainer">
<h2 class="sectionTitle">${LabelBlockContentWithTags}</h2>
<button is="emby-button" type="button" class="fab btnAddBlockedTag submit" style="margin-left:1em;" title="${Add}">
<span class="material-icons add"></span>
</button>
</div>
<div class="blockedTags" style="margin-top:.5em;"></div>
</div>
<div class="accessScheduleSection verticalSection" style="margin-bottom:2em;">
<div class="sectionTitleContainer">
<h2 class="sectionTitle">${HeaderAccessSchedule}</h2>
<button is="emby-button" type="button" class="fab btnAddSchedule submit" style="margin-left:1em;" title="${Add}">
<span class="material-icons add"></span>
</button>
</div>
<p>${HeaderAccessScheduleHelp}</p>
<div class="accessScheduleList paperList"></div>
</div>
<div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
</div>
</form>
</div>
</div>
</div>

109
src/controllers/dashboard/users/userparentalcontrol.js
View file

@ -1,17 +1,22 @@
define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewStyle', 'paper-icon-button-light'], function ($, datetime, loading, libraryMenu, globalize) {
'use strict';
import $ from 'jQuery';
import datetime from 'datetime';
import loading from 'loading';
import libraryMenu from 'libraryMenu';
import globalize from 'globalize';
import 'listViewStyle';
import 'paper-icon-button-light';
/* eslint-disable indent */
function populateRatings(allParentalRatings, page) {
var html = '';
let html = '';
html += "<option value=''></option>";
var i;
var length;
var rating;
var ratings = [];
let rating;
const ratings = [];
for (i = 0, length = allParentalRatings.length; i < length; i++) {
for (let i = 0, length = allParentalRatings.length; i < length; i++) {
if (rating = allParentalRatings[i], ratings.length) {
var lastRating = ratings[ratings.length - 1];
const lastRating = ratings[ratings.length - 1];
if (lastRating.Value === rating.Value) {
lastRating.Name += '/' + rating.Name;
@ -25,7 +30,7 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
});
}
for (i = 0, length = ratings.length; i < length; i++) {
for (let i = 0, length = ratings.length; i < length; i++) {
rating = ratings[i];
html += "<option value='" + rating.Value + "'>" + rating.Name + '</option>';
}
@ -34,35 +39,35 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
}
function loadUnratedItems(page, user) {
var items = [{
name: globalize.translate('OptionBlockBooks'),
const items = [{
name: globalize.translate('Books'),
value: 'Book'
}, {
name: globalize.translate('OptionBlockChannelContent'),
name: globalize.translate('Channels'),
value: 'ChannelContent'
}, {
name: globalize.translate('OptionBlockLiveTvChannels'),
name: globalize.translate('LiveTV'),
value: 'LiveTvChannel'
}, {
name: globalize.translate('OptionBlockMovies'),
name: globalize.translate('Movies'),
value: 'Movie'
}, {
name: globalize.translate('OptionBlockMusic'),
name: globalize.translate('Music'),
value: 'Music'
}, {
name: globalize.translate('OptionBlockTrailers'),
name: globalize.translate('Trailers'),
value: 'Trailer'
}, {
name: globalize.translate('OptionBlockTvShows'),
name: globalize.translate('Shows'),
value: 'Series'
}];
var html = '';
let html = '';
html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderBlockItemsWithNoRating') + '</h3>';
html += '<div class="checkboxList paperList checkboxList-paperList">';
for (var i = 0, length = items.length; i < length; i++) {
var item = items[i];
var checkedAttribute = -1 != user.Policy.BlockUnratedItems.indexOf(item.value) ? ' checked="checked"' : '';
for (let i = 0, length = items.length; i < length; i++) {
const item = items[i];
const checkedAttribute = user.Policy.BlockUnratedItems.indexOf(item.value) != -1 ? ' checked="checked"' : '';
html += '<label><input type="checkbox" is="emby-checkbox" class="chkUnratedItem" data-itemtype="' + item.value + '" type="checkbox"' + checkedAttribute + '><span>' + item.name + '</span></label>';
}
@ -76,11 +81,11 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
loadUnratedItems(page, user);
loadBlockedTags(page, user.Policy.BlockedTags);
populateRatings(allParentalRatings, page);
var ratingValue = '';
let ratingValue = '';
if (user.Policy.MaxParentalRating) {
for (var i = 0, length = allParentalRatings.length; i < length; i++) {
var rating = allParentalRatings[i];
for (let i = 0, length = allParentalRatings.length; i < length; i++) {
const rating = allParentalRatings[i];
if (user.Policy.MaxParentalRating >= rating.Value) {
ratingValue = rating.Value;
@ -101,8 +106,8 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
}
function loadBlockedTags(page, tags) {
var html = tags.map(function (h) {
var li = '<div class="listItem">';
let html = tags.map(function (h) {
let li = '<div class="listItem">';
li += '<div class="listItemBody">';
li += '<h3 class="listItemBodyText">';
li += h;
@ -116,10 +121,10 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
html = '<div class="paperList">' + html + '</div>';
}
var elem = $('.blockedTags', page).html(html).trigger('create');
const elem = $('.blockedTags', page).html(html).trigger('create');
$('.btnDeleteTag', elem).on('click', function () {
var tag = this.getAttribute('data-tag');
var newTags = tags.filter(function (t) {
const tag = this.getAttribute('data-tag');
const newTags = tags.filter(function (t) {
return t != tag;
});
loadBlockedTags(page, newTags);
@ -132,10 +137,10 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
}
function renderAccessSchedule(page, schedules) {
var html = '';
var index = 0;
let html = '';
let index = 0;
html += schedules.map(function (a) {
var itemHtml = '';
let itemHtml = '';
itemHtml += '<div class="liSchedule listItem" data-day="' + a.DayOfWeek + '" data-start="' + a.StartHour + '" data-end="' + a.EndHour + '">';
itemHtml += '<div class="listItemBody two-line">';
itemHtml += '<h3 class="listItemBodyText">';
@ -148,7 +153,7 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
index++;
return itemHtml;
}).join('');
var accessScheduleList = page.querySelector('.accessScheduleList');
const accessScheduleList = page.querySelector('.accessScheduleList');
accessScheduleList.innerHTML = html;
$('.btnDelete', accessScheduleList).on('click', function () {
deleteAccessSchedule(page, schedules, parseInt(this.getAttribute('data-index')));
@ -158,7 +163,7 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
function onSaveComplete(page) {
loading.hide();
require(['toast'], function (toast) {
import('toast').then(({default: toast}) => {
toast(globalize.translate('SettingsSaved'));
});
}
@ -178,8 +183,8 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
}
function getDisplayTime(hours) {
var minutes = 0;
var pct = hours % 1;
let minutes = 0;
const pct = hours % 1;
if (pct) {
minutes = parseInt(60 * pct);
@ -190,14 +195,13 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
function showSchedulePopup(page, schedule, index) {
schedule = schedule || {};
require(['components/accessSchedule/accessSchedule'], function (accessschedule) {
import('components/accessSchedule/accessSchedule').then(({default: accessschedule}) => {
accessschedule.show({
schedule: schedule
}).then(function (updatedSchedule) {
var schedules = getSchedulesFromPage(page);
const schedules = getSchedulesFromPage(page);
if (-1 == index) {
if (index == -1) {
index = schedules.length;
}
@ -224,13 +228,13 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
}
function showBlockedTagPopup(page) {
require(['prompt'], function (prompt) {
import('prompt').then(({default: prompt}) => {
prompt({
label: globalize.translate('LabelTag')
}).then(function (value) {
var tags = getBlockedTagsFromPage(page);
const tags = getBlockedTagsFromPage(page);
if (-1 == tags.indexOf(value)) {
if (tags.indexOf(value) == -1) {
tags.push(value);
loadBlockedTags(page, tags);
}
@ -240,9 +244,9 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
window.UserParentalControlPage = {
onSubmit: function () {
var page = $(this).parents('.page');
const page = $(this).parents('.page');
loading.show();
var userId = getParameterByName('userId');
const userId = getParameterByName('userId');
ApiClient.getUser(userId).then(function (result) {
saveUser(result, page);
});
@ -250,7 +254,7 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
}
};
$(document).on('pageinit', '#userParentalControlPage', function () {
var page = this;
const page = this;
$('.btnAddSchedule', page).on('click', function () {
showSchedulePopup(page, {}, -1);
});
@ -259,13 +263,14 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
});
$('.userParentalControlForm').off('submit', UserParentalControlPage.onSubmit).on('submit', UserParentalControlPage.onSubmit);
}).on('pageshow', '#userParentalControlPage', function () {
var page = this;
const page = this;
loading.show();
var userId = getParameterByName('userId');
var promise1 = ApiClient.getUser(userId);
var promise2 = ApiClient.getParentalRatings();
const userId = getParameterByName('userId');
const promise1 = ApiClient.getUser(userId);
const promise2 = ApiClient.getParentalRatings();
Promise.all([promise1, promise2]).then(function (responses) {
loadUser(page, responses[0], responses[1]);
});
});
});
/* eslint-enable indent */

72
src/controllers/dashboard/users/userpassword.html Normal file
View file

@ -0,0 +1,72 @@
<div id="userPasswordPage" data-role="page" class="page type-interior userPasswordPage">
<div>
<div class="content-primary">
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle username"></h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
</div>
</div>
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('useredit.html', true);">${Profile}</a>
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userlibraryaccess.html', true);">${TabAccess}</a>
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);">${TabParentalControl}</a>
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);" class="ui-btn-active">${HeaderPassword}</a>
</div>
<div class="readOnlyContent">
<form class="updatePasswordForm passwordSection hide" style="margin: 0 auto 2em;">
<div class="detailSection">
<div id="fldCurrentPassword" class="inputContainer hide">
<input is="emby-input" type="password" id="txtCurrentPassword" label="${LabelCurrentPassword}" autocomplete="off" />
</div>
<div class="inputContainer">
<input is="emby-input" type="password" id="txtNewPassword" label="${LabelNewPassword}" autocomplete="off" />
</div>
<div class="inputContainer">
<input is="emby-input" type="password" id="txtNewPasswordConfirm" label="${LabelNewPasswordConfirm}" autocomplete="off" />
</div>
<br />
<div>
<button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button>
<button is="emby-button" type="button" id="btnResetPassword" class="raised button-cancel block hide">
<span>${ResetPassword}</span>
</button>
</div>
</div>
</form>
<br />
<form class="localAccessForm localAccessSection" style="margin: 0 auto;">
<div class="detailSection">
<div class="detailSectionHeader">
${HeaderEasyPinCode}
</div>
<br />
<div>${EasyPasswordHelp}</div>
<br />
<div class="inputContainer">
<input is="emby-input" type="number" id="txtEasyPassword" label="${LabelEasyPinCode}" autocomplete="off" pattern="[0-9]*" step="1" maxlength="5" />
</div>
<br />
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" class="chkEnableLocalEasyPassword" />
<span>${LabelInNetworkSignInWithEasyPassword}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelInNetworkSignInWithEasyPasswordHelp}</div>
</div>
<div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
<button is="emby-button" type="button" id="btnResetEasyPassword" class="raised button-cancel block hide">
<span>${ButtonResetEasyPassword}</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

64
src/controllers/dashboard/users/userpasswordpage.js
View file

@ -1,16 +1,20 @@
define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading, libraryMenu, globalize) {
'use strict';
import loading from 'loading';
import libraryMenu from 'libraryMenu';
import globalize from 'globalize';
import 'emby-button';
/* eslint-disable indent */
function loadUser(page, params) {
var userid = params.userId;
const userid = params.userId;
ApiClient.getUser(userid).then(function (user) {
Dashboard.getCurrentUser().then(function (loggedInUser) {
libraryMenu.setTitle(user.Name);
page.querySelector('.username').innerHTML = user.Name;
var showPasswordSection = true;
var showLocalAccessSection = false;
let showPasswordSection = true;
let showLocalAccessSection = false;
if ('Guest' == user.ConnectLinkType) {
if (user.ConnectLinkType == 'Guest') {
page.querySelector('.localAccessSection').classList.add('hide');
showPasswordSection = false;
} else if (user.HasConfiguredPassword) {
@ -34,7 +38,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
page.querySelector('.localAccessSection').classList.add('hide');
}
var txtEasyPassword = page.querySelector('#txtEasyPassword');
const txtEasyPassword = page.querySelector('#txtEasyPassword');
txtEasyPassword.value = '';
if (user.HasConfiguredEasyPassword) {
@ -48,7 +52,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
page.querySelector('.chkEnableLocalEasyPassword').checked = user.Configuration.EnableLocalPassword;
require(['autoFocuser'], function (autoFocuser) {
import('autoFocuser').then(({default: autoFocuser}) => {
autoFocuser.autoFocus(page);
});
});
@ -58,10 +62,10 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
page.querySelector('#txtNewPasswordConfirm').value = '';
}
return function (view, params) {
export default function (view, params) {
function saveEasyPassword() {
var userId = params.userId;
var easyPassword = view.querySelector('#txtEasyPassword').value;
const userId = params.userId;
const easyPassword = view.querySelector('#txtEasyPassword').value;
if (easyPassword) {
ApiClient.updateEasyPassword(userId, easyPassword).then(function () {
@ -78,8 +82,8 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
ApiClient.updateUserConfiguration(user.Id, user.Configuration).then(function () {
loading.hide();
require(['toast'], function (toast) {
toast(globalize.translate('MessageSettingsSaved'));
import('toast').then(({default: toast}) => {
toast(globalize.translate('SettingsSaved'));
});
loadUser(view, params);
@ -88,9 +92,9 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
}
function savePassword() {
var userId = params.userId;
var currentPassword = view.querySelector('#txtCurrentPassword').value;
var newPassword = view.querySelector('#txtNewPassword').value;
const userId = params.userId;
let currentPassword = view.querySelector('#txtCurrentPassword').value;
const newPassword = view.querySelector('#txtNewPassword').value;
if (view.querySelector('#fldCurrentPassword').classList.contains('hide')) {
// Firefox does not respect autocomplete=off, so clear it if the field is supposed to be hidden (and blank)
@ -101,7 +105,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
ApiClient.updateUserPassword(userId, currentPassword, newPassword).then(function () {
loading.hide();
require(['toast'], function (toast) {
import('toast').then(({default: toast}) => {
toast(globalize.translate('PasswordSaved'));
});
@ -116,10 +120,10 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
}
function onSubmit(e) {
var form = this;
const form = this;
if (form.querySelector('#txtNewPassword').value != form.querySelector('#txtNewPasswordConfirm').value) {
require(['toast'], function (toast) {
import('toast').then(({default: toast}) => {
toast(globalize.translate('PasswordMatchError'));
});
} else {
@ -139,17 +143,16 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
}
function resetPassword() {
var msg = globalize.translate('PasswordResetConfirmation');
require(['confirm'], function (confirm) {
confirm(msg, globalize.translate('PasswordResetHeader')).then(function () {
var userId = params.userId;
const msg = globalize.translate('PasswordResetConfirmation');
import('confirm').then(({default: confirm}) => {
confirm(msg, globalize.translate('ResetPassword')).then(function () {
const userId = params.userId;
loading.show();
ApiClient.resetUserPassword(userId).then(function () {
loading.hide();
Dashboard.alert({
message: globalize.translate('PasswordResetComplete'),
title: globalize.translate('PasswordResetHeader')
title: globalize.translate('ResetPassword')
});
loadUser(view, params);
});
@ -158,11 +161,11 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
}
function resetEasyPassword() {
var msg = globalize.translate('PinCodeResetConfirmation');
const msg = globalize.translate('PinCodeResetConfirmation');
require(['confirm'], function (confirm) {
import('confirm').then(({default: confirm}) => {
confirm(msg, globalize.translate('HeaderPinCodeReset')).then(function () {
var userId = params.userId;
const userId = params.userId;
loading.show();
ApiClient.resetEasyPassword(userId).then(function () {
loading.hide();
@ -183,5 +186,6 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
view.addEventListener('viewshow', function () {
loadUser(view, params);
});
};
});
}
/* eslint-enable indent */

16
src/controllers/dashboard/users/userprofiles.html Normal file
View file

@ -0,0 +1,16 @@
<div id="userProfilesPage" data-role="page" class="page type-interior userProfilesPage fullWidthContent">
<div>
<div class="content-primary">
<div class="verticalSection verticalSection-extrabottompadding">
<div class="sectionTitleContainer sectionTitleContainer-cards">
<h2 class="sectionTitle sectionTitle-cards">${HeaderUsers}</h2>
<button is="emby-button" type="button" class="fab btnAddUser submit sectionTitleButton" style="margin-left:1em;" title="${ButtonAddUser}">
<span class="material-icons add"></span>
</button>
<a is="emby-linkbutton" rel="noopener noreferrer" style="margin-left:2em!important;" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/adding-managing-users.html">${Help}</a>
</div>
<div class="localUsers itemsContainer vertical-wrap"></div>
</div>
</div>
</div>
</div>

149
src/controllers/dashboard/users/userprofilespage.js
View file

@ -1,14 +1,24 @@
define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-button-light', 'cardStyle', 'emby-button', 'indicators', 'flexStyles'], function (loading, dom, globalize, datefns, dfnshelper) {
'use strict';
import loading from 'loading';
import dom from 'dom';
import globalize from 'globalize';
import * as datefns from 'date-fns';
import dfnshelper from 'dfnshelper';
import 'paper-icon-button-light';
import 'cardStyle';
import 'emby-button';
import 'indicators';
import 'flexStyles';
/* eslint-disable indent */
function deleteUser(page, id) {
var msg = globalize.translate('DeleteUserConfirmation');
const msg = globalize.translate('DeleteUserConfirmation');
require(['confirm'], function (confirm) {
import('confirm').then(({default: confirm}) => {
confirm({
title: globalize.translate('DeleteUser'),
text: msg,
confirmText: globalize.translate('ButtonDelete'),
confirmText: globalize.translate('Delete'),
primary: 'delete'
}).then(function () {
loading.show();
@ -20,10 +30,10 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but
}
function showUserMenu(elem) {
var card = dom.parentWithClass(elem, 'card');
var page = dom.parentWithClass(card, 'page');
var userId = card.getAttribute('data-userid');
var menuItems = [];
const card = dom.parentWithClass(elem, 'card');
const page = dom.parentWithClass(card, 'page');
const userId = card.getAttribute('data-userid');
const menuItems = [];
menuItems.push({
name: globalize.translate('ButtonOpen'),
id: 'open',
@ -40,12 +50,12 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but
icon: 'person'
});
menuItems.push({
name: globalize.translate('ButtonDelete'),
name: globalize.translate('Delete'),
id: 'delete',
icon: 'delete'
});
require(['actionsheet'], function (actionsheet) {
import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({
items: menuItems,
positionTo: card,
@ -72,8 +82,8 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but
}
function getUserHtml(user, addConnectIndicator) {
var html = '';
var cssClass = 'card squareCard scalableCard squareCard-scalable';
let html = '';
let cssClass = 'card squareCard scalableCard squareCard-scalable';
if (user.Policy.IsDisabled) {
cssClass += ' grayscale';
@ -84,7 +94,7 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-square"></div>';
html += '<a is="emby-linkbutton" class="cardContent" href="useredit.html?userId=' + user.Id + '">';
var imgUrl;
let imgUrl;
if (user.PrimaryImageTag) {
imgUrl = ApiClient.getUserImageUrl(user.Id, {
@ -94,7 +104,7 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but
});
}
var imageClass = 'cardImage';
let imageClass = 'cardImage';
if (user.Policy.IsDisabled) {
imageClass += ' disabledUser';
@ -118,8 +128,8 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but
html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu flex-shrink-zero"><span class="material-icons more_vert"></span></button>';
html += '</div>';
html += '<div class="cardText cardText-secondary">';
var lastSeen = getLastSeenText(user.LastActivityDate);
html += '' != lastSeen ? lastSeen : '&nbsp;';
const lastSeen = getLastSeenText(user.LastActivityDate);
html += lastSeen != '' ? lastSeen : '&nbsp;';
html += '</div>';
html += '</div>';
html += '</div>';
@ -145,125 +155,30 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but
page.querySelector('.localUsers').innerHTML = getUserSectionHtml(users, true);
}
function showPendingUserMenu(elem) {
var menuItems = [];
menuItems.push({
name: globalize.translate('ButtonCancel'),
id: 'delete',
icon: 'delete'
});
require(['actionsheet'], function (actionsheet) {
var card = dom.parentWithClass(elem, 'card');
var page = dom.parentWithClass(card, 'page');
var id = card.getAttribute('data-id');
actionsheet.show({
items: menuItems,
positionTo: card,
callback: function (menuItemId) {
switch (menuItemId) {
case 'delete':
cancelAuthorization(page, id);
}
}
});
});
}
function getPendingUserHtml(user) {
var html = '';
html += "<div data-id='" + user.Id + "' class='card squareCard scalableCard squareCard-scalable'>";
html += '<div class="cardBox cardBox-bottompadded visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-square"></div>';
html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="#">';
if (user.ImageUrl) {
html += '<div class="cardImage" style="background-image:url(\'' + user.ImageUrl + "');\">";
html += '</div>';
} else {
html += '<span class="cardImageIcon material-icons person"></span>';
}
html += '</a>';
html += '</div>';
html += '<div class="cardFooter visualCardBox-cardFooter">';
html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu"><span class="material-icons more_vert"></span></button>';
html += '</div>';
html += '<div class="cardText" style="padding-top:10px;padding-bottom:10px;">';
html += user.UserName;
html += '</div>';
html += '</div>';
html += '</div>';
return html + '</div>';
}
function renderPendingGuests(page, users) {
if (users.length) {
page.querySelector('.sectionPendingGuests').classList.remove('hide');
} else {
page.querySelector('.sectionPendingGuests').classList.add('hide');
}
page.querySelector('.pending').innerHTML = users.map(getPendingUserHtml).join('');
}
// TODO cvium: maybe reuse for invitation system
function cancelAuthorization(page, id) {
loading.show();
ApiClient.ajax({
type: 'DELETE',
url: ApiClient.getUrl('Connect/Pending', {
Id: id
})
}).then(function () {
loadData(page);
});
}
function loadData(page) {
loading.show();
ApiClient.getUsers().then(function (users) {
renderUsers(page, users);
loading.hide();
});
// TODO cvium
renderPendingGuests(page, []);
// ApiClient.getJSON(ApiClient.getUrl("Connect/Pending")).then(function (pending) {
//
// });
}
function showInvitePopup(page) {
require(['components/guestinviter/guestinviter'], function (guestinviter) {
guestinviter.show().then(function () {
loadData(page);
});
});
}
pageIdOn('pageinit', 'userProfilesPage', function () {
var page = this;
const page = this;
page.querySelector('.btnAddUser').addEventListener('click', function() {
Dashboard.navigate('usernew.html');
});
page.querySelector('.localUsers').addEventListener('click', function (e__e) {
var btnUserMenu = dom.parentWithClass(e__e.target, 'btnUserMenu');
const btnUserMenu = dom.parentWithClass(e__e.target, 'btnUserMenu');
if (btnUserMenu) {
showUserMenu(btnUserMenu);
}
});
page.querySelector('.pending').addEventListener('click', function (e__r) {
var btnUserMenu = dom.parentWithClass(e__r.target, 'btnUserMenu');
if (btnUserMenu) {
showPendingUserMenu(btnUserMenu);
}
});
});
pageIdOn('pagebeforeshow', 'userProfilesPage', function () {
loadData(this);
});
});
/* eslint-enable indent */

17
src/controllers/edititemmetadata.html Normal file
View file

@ -0,0 +1,17 @@
<div id="editItemMetadataPage" data-role="page" class="page libraryPage metadataEditorPage noSecondaryNavPage" data-title="${MetadataManager}">
<style>
#editItemMetadataPage .editMetadataForm {
max-width: 100%;
}
</style>
<div class="editPageSidebar" style="overflow:auto;">
<div class="libraryTree">
<ul></ul>
</div>
</div>
<div>
<div class="editPageInnerContent padded-top padded-bottom-page">
</div>
</div>
</div>

51
src/controllers/edititemmetadata.js
View file

@ -1,31 +1,30 @@
define(['loading', 'scripts/editorsidebar'], function (loading) {
'use strict';
import loading from 'loading';
import 'scripts/editorsidebar';
function reload(context, itemId) {
loading.show();
function reload(context, itemId) {
loading.show();
if (itemId) {
require(['metadataEditor'], function (metadataEditor) {
metadataEditor.embed(context.querySelector('.editPageInnerContent'), itemId, ApiClient.serverInfo().Id);
});
} else {
context.querySelector('.editPageInnerContent').innerHTML = '';
loading.hide();
}
if (itemId) {
import('metadataEditor').then(({ default: metadataEditor }) => {
metadataEditor.embed(context.querySelector('.editPageInnerContent'), itemId, ApiClient.serverInfo().Id);
});
} else {
context.querySelector('.editPageInnerContent').innerHTML = '';
loading.hide();
}
}
return function (view, params) {
view.addEventListener('viewshow', function () {
reload(this, MetadataEditor.getCurrentItemId());
});
MetadataEditor.setCurrentItemId(null);
view.querySelector('.libraryTree').addEventListener('itemclicked', function (event) {
var data = event.detail;
export default function (view, params) {
view.addEventListener('viewshow', function () {
reload(this, MetadataEditor.getCurrentItemId());
});
MetadataEditor.setCurrentItemId(null);
view.querySelector('.libraryTree').addEventListener('itemclicked', function (event) {
var data = event.detail;
if (data.id != MetadataEditor.getCurrentItemId()) {
MetadataEditor.setCurrentItemId(data.id);
reload(view, data.id);
}
});
};
});
if (data.id != MetadataEditor.getCurrentItemId()) {
MetadataEditor.setCurrentItemId(data.id);
reload(view, data.id);
}
});
}

134
src/controllers/favorites.js
View file

@ -1,5 +1,14 @@
define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'apphost', 'layoutManager', 'focusManager', 'emby-itemscontainer', 'emby-scroller'], function (appRouter, cardBuilder, dom, globalize, connectionManager, appHost, layoutManager, focusManager) {
'use strict';
import appRouter from 'appRouter';
import cardBuilder from 'cardBuilder';
import dom from 'dom';
import globalize from 'globalize';
import appHost from 'apphost';
import layoutManager from 'layoutManager';
import focusManager from 'focusManager';
import 'emby-itemscontainer';
import 'emby-scroller';
/* eslint-disable indent */
function enableScrollX() {
return true;
@ -19,7 +28,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
function getSections() {
return [{
name: 'HeaderFavoriteMovies',
name: 'Movies',
types: 'Movie',
shape: getPosterShape(),
showTitle: true,
@ -28,7 +37,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
overlayText: false,
centerText: true
}, {
name: 'HeaderFavoriteShows',
name: 'Shows',
types: 'Series',
shape: getPosterShape(),
showTitle: true,
@ -37,7 +46,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
overlayText: false,
centerText: true
}, {
name: 'HeaderFavoriteEpisodes',
name: 'Episodes',
types: 'Episode',
shape: getThumbShape(),
preferThumb: false,
@ -47,7 +56,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
overlayText: false,
centerText: true
}, {
name: 'HeaderFavoriteVideos',
name: 'Videos',
types: 'Video',
shape: getThumbShape(),
preferThumb: true,
@ -56,7 +65,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
overlayText: false,
centerText: true
}, {
name: 'HeaderFavoriteCollections',
name: 'Collections',
types: 'BoxSet',
shape: getPosterShape(),
showTitle: true,
@ -64,7 +73,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
overlayText: false,
centerText: true
}, {
name: 'HeaderFavoritePlaylists',
name: 'Playlists',
types: 'Playlist',
shape: getSquareShape(),
preferThumb: false,
@ -75,7 +84,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
overlayPlayButton: true,
coverImage: true
}, {
name: 'HeaderFavoritePeople',
name: 'People',
types: 'Person',
shape: getPosterShape(),
preferThumb: false,
@ -86,7 +95,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
overlayPlayButton: true,
coverImage: true
}, {
name: 'HeaderFavoriteArtists',
name: 'Artists',
types: 'MusicArtist',
shape: getSquareShape(),
preferThumb: false,
@ -97,7 +106,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
overlayPlayButton: true,
coverImage: true
}, {
name: 'HeaderFavoriteAlbums',
name: 'Albums',
types: 'MusicAlbum',
shape: getSquareShape(),
preferThumb: false,
@ -108,7 +117,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
overlayPlayButton: true,
coverImage: true
}, {
name: 'HeaderFavoriteSongs',
name: 'Songs',
types: 'Audio',
shape: getSquareShape(),
preferThumb: false,
@ -120,7 +129,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
action: 'instantmix',
coverImage: true
}, {
name: 'HeaderFavoriteBooks',
name: 'Books',
types: 'Book',
shape: getPosterShape(),
showTitle: true,
@ -133,8 +142,8 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
function getFetchDataFn(section) {
return function () {
var apiClient = this.apiClient;
var options = {
const apiClient = this.apiClient;
const options = {
SortBy: (section.types, 'SeriesName,SortName'),
SortOrder: 'Ascending',
Filters: 'IsFavorite',
@ -145,13 +154,13 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
EnableTotalRecordCount: false
};
options.Limit = 20;
var userId = apiClient.getCurrentUserId();
const userId = apiClient.getCurrentUserId();
if ('MusicArtist' === section.types) {
if (section.types === 'MusicArtist') {
return apiClient.getArtists(userId, options);
}
if ('Person' === section.types) {
if (section.types === 'Person') {
return apiClient.getPeople(userId, options);
}
@ -170,17 +179,16 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
function getItemsHtmlFn(section) {
return function (items) {
var supportsImageAnalysis = appHost.supports('imageanalysis');
var cardLayout = (appHost.preferVisualCards || supportsImageAnalysis) && section.autoCardLayout && section.showTitle;
let cardLayout = appHost.preferVisualCards && section.autoCardLayout && section.showTitle;
cardLayout = false;
var serverId = this.apiClient.serverId();
var leadingButtons = layoutManager.tv ? [{
const serverId = this.apiClient.serverId();
const leadingButtons = layoutManager.tv ? [{
name: globalize.translate('All'),
id: 'more',
icon: 'favorite',
routeUrl: getRouteUrl(section, serverId)
}] : null;
var lines = 0;
let lines = 0;
if (section.showTitle) {
lines++;
@ -199,7 +207,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
preferThumb: section.preferThumb,
shape: section.shape,
centerText: section.centerText && !cardLayout,
overlayText: false !== section.overlayText,
overlayText: section.overlayText !== false,
showTitle: section.showTitle,
showYear: section.showYear,
showParentTitle: section.showParentTitle,
@ -216,23 +224,12 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
};
}
function FavoritesTab(view, params) {
this.view = view;
this.params = params;
this.apiClient = connectionManager.currentApiClient();
this.sectionsContainer = view.querySelector('.sections');
createSections(this, this.sectionsContainer, this.apiClient);
}
function createSections(instance, elem, apiClient) {
var i;
var length;
var sections = getSections();
var html = '';
const sections = getSections();
let html = '';
for (i = 0, length = sections.length; i < length; i++) {
var section = sections[i];
var sectionClass = 'verticalSection';
for (const section of sections) {
let sectionClass = 'verticalSection';
if (!section.showTitle) {
sectionClass += ' verticalSection-extrabottompadding';
@ -258,23 +255,32 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
}
elem.innerHTML = html;
var elems = elem.querySelectorAll('.itemsContainer');
const elems = elem.querySelectorAll('.itemsContainer');
for (i = 0, length = elems.length; i < length; i++) {
var itemsContainer = elems[i];
for (let i = 0, length = elems.length; i < length; i++) {
const itemsContainer = elems[i];
itemsContainer.fetchData = getFetchDataFn(sections[i]).bind(instance);
itemsContainer.getItemsHtml = getItemsHtmlFn(sections[i]).bind(instance);
itemsContainer.parentContainer = dom.parentWithClass(itemsContainer, 'verticalSection');
}
}
FavoritesTab.prototype.onResume = function (options) {
var promises = (this.apiClient, []);
var view = this.view;
var elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
class FavoritesTab {
constructor(view, params) {
this.view = view;
this.params = params;
this.apiClient = window.connectionManager.currentApiClient();
this.sectionsContainer = view.querySelector('.sections');
createSections(this, this.sectionsContainer, this.apiClient);
}
for (var i = 0, length = elems.length; i < length; i++) {
promises.push(elems[i].resume(options));
onResume(options) {
const promises = (this.apiClient, []);
const view = this.view;
const elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
for (const elem of elems) {
promises.push(elem.resume(options));
}
Promise.all(promises).then(function () {
@ -282,30 +288,32 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
focusManager.autoFocus(view);
}
});
};
}
FavoritesTab.prototype.onPause = function () {
var elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
onPause() {
const elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
for (var i = 0, length = elems.length; i < length; i++) {
elems[i].pause();
for (const elem of elems) {
elem.pause();
}
};
}
FavoritesTab.prototype.destroy = function () {
destroy() {
this.view = null;
this.params = null;
this.apiClient = null;
var elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
const elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
for (var i = 0, length = elems.length; i < length; i++) {
elems[i].fetchData = null;
elems[i].getItemsHtml = null;
elems[i].parentContainer = null;
for (const elem of elems) {
elem.fetchData = null;
elem.getItemsHtml = null;
elem.parentContainer = null;
}
this.sectionsContainer = null;
};
}
}
return FavoritesTab;
});
export default FavoritesTab;
/* eslint-enable indent */

9
src/controllers/home.html Normal file
View file

@ -0,0 +1,9 @@
<div id="indexPage" style="outline: none;" data-role="page" data-dom-cache="true" class="page homePage libraryPage allLibraryPage backdropPage pageWithAbsoluteTabs withTabs" data-backdroptype="movie,series,book">
<div class="tabContent pageTabContent" id="homeTab" data-index="0">
<div class="sections"></div>
</div>
<div class="tabContent pageTabContent" id="favoritesTab" data-index="1">
<div class="sections"></div>
</div>
</div>

85
src/controllers/home.js
View file

@ -1,7 +1,33 @@
define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-scroller'], function (TabbedView, globalize, require) {
'use strict';
import TabbedView from 'tabbedView';
import globalize from 'globalize';
import 'emby-tabs';
import 'emby-button';
import 'emby-scroller';
function getTabs() {
class HomeView extends TabbedView {
constructor(view, params) {
super(view, params);
}
setTitle() {
Emby.Page.setTitle(null);
}
onPause() {
super.onPause(this);
document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
}
onResume(options) {
super.onResume(this, options);
document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
}
getDefaultTabIndex() {
return 0;
}
getTabs() {
return [{
name: globalize.translate('Home')
}, {
@ -9,35 +35,25 @@ define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-
}];
}
function getDefaultTabIndex() {
return 0;
}
function getRequirePromise(deps) {
return new Promise(function (resolve, reject) {
require(deps, resolve);
});
}
function getTabController(index) {
if (null == index) {
getTabController(index) {
if (index == null) {
throw new Error('index cannot be null');
}
var depends = [];
let depends = '';
switch (index) {
case 0:
depends.push('controllers/hometab');
depends = 'controllers/hometab';
break;
case 1:
depends.push('controllers/favorites');
depends = 'controllers/favorites';
}
var instance = this;
return getRequirePromise(depends).then(function (controllerFactory) {
var controller = instance.tabControllers[index];
const instance = this;
return import(depends).then(({ default: controllerFactory }) => {
let controller = instance.tabControllers[index];
if (!controller) {
controller = new controllerFactory(instance.view.querySelector(".tabContent[data-index='" + index + "']"), instance.params);
@ -47,29 +63,6 @@ define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-
return controller;
});
}
}
function HomeView(view, params) {
TabbedView.call(this, view, params);
}
Object.assign(HomeView.prototype, TabbedView.prototype);
HomeView.prototype.getTabs = getTabs;
HomeView.prototype.getDefaultTabIndex = getDefaultTabIndex;
HomeView.prototype.getTabController = getTabController;
HomeView.prototype.setTitle = function () {
Emby.Page.setTitle(null);
};
HomeView.prototype.onPause = function () {
TabbedView.prototype.onPause.call(this);
document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
};
HomeView.prototype.onResume = function (options) {
TabbedView.prototype.onResume.call(this, options);
document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
};
return HomeView;
});
export default HomeView;

66
src/controllers/hometab.js
View file

@ -1,27 +1,20 @@
define(['userSettings', 'loading', 'connectionManager', 'apphost', 'layoutManager', 'focusManager', 'homeSections', 'emby-itemscontainer'], function (userSettings, loading, connectionManager, appHost, layoutManager, focusManager, homeSections) {
'use strict';
import * as userSettings from 'userSettings';
import loading from 'loading';
import focusManager from 'focusManager';
import homeSections from 'homeSections';
import 'emby-itemscontainer';
function HomeTab(view, params) {
class HomeTab {
constructor(view, params) {
this.view = view;
this.params = params;
this.apiClient = connectionManager.currentApiClient();
this.apiClient = window.connectionManager.currentApiClient();
this.sectionsContainer = view.querySelector('.sections');
view.querySelector('.sections').addEventListener('settingschange', onHomeScreenSettingsChanged.bind(this));
}
function onHomeScreenSettingsChanged() {
this.sectionsRendered = false;
if (!this.paused) {
this.onResume({
refresh: true
});
}
}
HomeTab.prototype.onResume = function (options) {
onResume(options) {
if (this.sectionsRendered) {
var sectionsContainer = this.sectionsContainer;
const sectionsContainer = this.sectionsContainer;
if (sectionsContainer) {
return homeSections.resume(sectionsContainer, options);
@ -31,8 +24,8 @@ define(['userSettings', 'loading', 'connectionManager', 'apphost', 'layoutManage
}
loading.show();
var view = this.view;
var apiClient = this.apiClient;
const view = this.view;
const apiClient = this.apiClient;
this.destroyHomeSections();
this.sectionsRendered = true;
return apiClient.getCurrentUser().then(function (user) {
@ -44,31 +37,38 @@ define(['userSettings', 'loading', 'connectionManager', 'apphost', 'layoutManage
loading.hide();
});
});
};
HomeTab.prototype.onPause = function () {
var sectionsContainer = this.sectionsContainer;
}
onPause() {
const sectionsContainer = this.sectionsContainer;
if (sectionsContainer) {
homeSections.pause(sectionsContainer);
}
};
HomeTab.prototype.destroy = function () {
}
destroy() {
this.view = null;
this.params = null;
this.apiClient = null;
this.destroyHomeSections();
this.sectionsContainer = null;
};
HomeTab.prototype.destroyHomeSections = function () {
var sectionsContainer = this.sectionsContainer;
}
destroyHomeSections() {
const sectionsContainer = this.sectionsContainer;
if (sectionsContainer) {
homeSections.destroySections(sectionsContainer);
}
};
}
}
return HomeTab;
});
function onHomeScreenSettingsChanged() {
this.sectionsRendered = false;
if (!this.paused) {
this.onResume({
refresh: true
});
}
}
export default HomeTab;

2153
src/controllers/itemDetails.js
View file

File diff suppressed because it is too large Load diff

237
src/controllers/itemDetails/index.html Normal file
View file

@ -0,0 +1,237 @@
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-backbutton="true">
<div id="itemBackdrop" class="itemBackdrop">
</div>
<div class="detailLogo"></div>
<div class="detailPageWrapperContainer">
<div class="detailPagePrimaryContainer padded-left padded-right">
<div class="infoWrapper infoText">
<div class="nameContainer"></div>
<div class="itemMiscInfo itemMiscInfo-primary" style="margin-bottom: 0.6em;"></div>
<div class="itemMiscInfo itemMiscInfo-secondary" style="margin-bottom: 0.6em;"></div>
</div>
<div class="mainDetailButtons focuscontainer-x">
<button is="emby-button" type="button" class="button-flat btnResume hide detailButton" title="${ButtonResume}" data-mode="resume">
<div class="detailButton-content">
<span class="material-icons detailButton-icon play_arrow"></span>
</div>
</button>
<button is="emby-button" type="button" class="button-flat btnPlay hide detailButton" title="${Play}" data-mode="play">
<div class="detailButton-content">
<span class="material-icons detailButton-icon play_arrow"></span>
</div>
</button>
<button is="emby-button" type="button" class="button-flat btnDownload hide detailButton" title="${Download}">
<div class="detailButton-content">
<span class="material-icons detailButton-icon get_app"></span>
</div>
</button>
<button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton" title="${ButtonTrailer}">
<div class="detailButton-content">
<span class="material-icons detailButton-icon theaters"></span>
</div>
</button>
<button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton" title="${HeaderInstantMix}">
<div class="detailButton-content">
<span class="material-icons detailButton-icon explore"></span>
</div>
</button>
<button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton" title="${Shuffle}">
<div class="detailButton-content">
<span class="material-icons detailButton-icon shuffle"></span>
</div>
</button>
<button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton" title="${CancelSeries}">
<div class="detailButton-content">
<span class="material-icons detailButton-icon delete"></span>
</div>
</button>
<button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton" title="${StopRecording}">
<div class="detailButton-content">
<span class="material-icons detailButton-icon stop"></span>
</div>
</button>
<button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton" title="">
<div class="detailButton-content">
<span class="material-icons detailButton-icon check"></span>
</div>
</button>
<button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton" title="${Rate}">
<div class="detailButton-content">
<span class="material-icons detailButton-icon favorite"></span>
</div>
</button>
<button is="emby-button" type="button" class="button-flat btnSplitVersions hide detailButton" title="${ButtonSplit}">
<div class="detailButton-content">
<span class="material-icons detailButton-icon call_split"></span>
</div>
</button>
<button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton" title="${ButtonMore}">
<div class="detailButton-content">
<span class="material-icons detailButton-icon more_vert"></span>
</div>
</button>
</div>
</div>
<div class="detailPageSecondaryContainer">
<div class="detailImageContainer padded-left"></div>
<div class="detailPageContent">
<div class="detailPagePrimaryContent padded-right">
<div class="detailSection">
<div class="itemMiscInfo nativeName hide"></div>
<div class="itemDetailsGroup">
<div class="detailsGroupItem genresGroup hide">
<div class="genresLabel label"></div>
<div class="genres content focuscontainer-x"></div>
</div>
<div class="detailsGroupItem directorsGroup hide">
<div class="directorsLabel label"></div>
<div class="directors content focuscontainer-x"></div>
</div>
<div class="detailsGroupItem writersGroup hide">
<div class="writersLabel label"></div>
<div class="writers content focuscontainer-x"></div>
</div>
</div>
<form class="trackSelections hide focuscontainer-x">
<div class="selectContainer selectSourceContainer hide trackSelectionFieldContainer flex-shrink-zero">
<select is="emby-select" class="selectSource detailTrackSelect" label=""></select>
</div>
<div class="selectContainer selectVideoContainer hide trackSelectionFieldContainer flex-shrink-zero">
<select is="emby-select" class="selectVideo detailTrackSelect" label=""></select>
</div>
<div class="selectContainer selectAudioContainer hide trackSelectionFieldContainer flex-shrink-zero">
<select is="emby-select" class="selectAudio detailTrackSelect" label=""></select>
</div>
<div class="selectContainer selectSubtitlesContainer hide trackSelectionFieldContainer flex-shrink-zero">
<select is="emby-select" class="selectSubtitles detailTrackSelect" label=""></select>
</div>
</form>
<div class="recordingFields hide" style="margin: 0.5em 0 1.5em;"></div>
<div class="detailSectionContent">
<div class="itemLastPlayed hide"></div>
<p class="itemGenres"></p>
<h3 class="tagline"></h3>
<p class="overview"></p>
<div class="overview-controls">
<a class="overview-expand hide" is="emby-linkbutton" href="#">${ShowMore}</a>
</div>
<p id="itemBirthday"></p>
<p id="itemBirthLocation"></p>
<p id="itemDeathDate"></p>
<p id="seriesAirTime"></p>
<div class="itemTags focuscontainer-x hide" style="margin: 0.7em 0; font-size: 92%;"></div>
<div class="itemExternalLinks focuscontainer-x hide" style="margin: 0.7em 0; font-size: 92%;"></div>
<div class="seriesRecordingEditor"></div>
</div>
</div>
</div>
<div class="seriesTimerScheduleSection verticalSection detailVerticalSection hide" style="margin-top: -3em;">
<h2 class="sectionTitle">${Schedule}</h2>
<div class="seriesTimerSchedule padded-right"></div>
</div>
<div class="collectionItems hide"></div>
<div class="nextUpSection verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards">${NextUp}</h2>
<div is="emby-itemscontainer" class="nextUpItems vertical-wrap padded-right"></div>
</div>
<div class="programGuideSection hide verticalSection detailVerticalSection">
<div class="programGuide"></div>
</div>
<div id="childrenCollapsible" class="hide verticalSection detailVerticalSection">
<h2 class="childrenSectionHeader sectionTitle sectionTitle-cards hide">
<span id="childrenTitle"></span>
</h2>
<div id="childrenContent">
<div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer padded-right" style="text-align: left;"></div>
</div>
</div>
<div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderAdditionalParts}</h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div id="additionalPartsContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div>
</div>
<div class="verticalSection detailVerticalSection moreFromSeasonSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div>
</div>
<div class="verticalSection detailVerticalSection moreFromArtistSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div>
</div>
<div id="castCollapsible" class="verticalSection detailVerticalSection hide">
<h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-right">${HeaderCastAndCrew}</h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div>
</div>
<div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle padded-right">${HeaderUpcomingOnTV}</h2>
<div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list padded-right"></div>
</div>
<div id="specialsCollapsible" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-right">${SpecialFeatures}</h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div id="specialsContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div>
</div>
<div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-right">${MusicVideos}</h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div id="musicVideosContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div>
</div>
<div id="scenesCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding hide">
<h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderScenes}</h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div>
</div>
<div id="similarCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding hide">
<h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderMoreLikeThis}</h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
</div>
</div>
</div>
</div>
</div>
</div>

2061
src/controllers/itemDetails/index.js Normal file
View file

File diff suppressed because it is too large Load diff

54
src/controllers/list.html Normal file
View file

@ -0,0 +1,54 @@
<div data-role="page" class="view flex flex-direction-column page libraryPage noSecondaryNavPage" data-backbutton="true">
<div class="alphaPicker alphaPicker-vertical alphaPicker-fixed focuscontainer-y hide">
</div>
<div class="flex-grow padded-left padded-right pageContainerTopPadding">
<div class="flex align-items-center focuscontainer-x itemsViewSettingsContainer padded-top padded-bottom flex-wrap-wrap">
<button is="emby-button" class="btnPlay button-flat hide listTextButton-autohide">
<span>${HeaderPlayAll}</span>
</button>
<button is="paper-icon-button-light" class="btnPlay listIconButton-autohide">
<span class="material-icons play_arrow"></span>
</button>
<button is="emby-button" class="btnQueue button-flat hide listTextButton-autohide">
<span>${Queue}</span>
</button>
<button is="paper-icon-button-light" class="btnQueue hide listIconButton-autohide">
<span class="material-icons playlist_add"></span>
</button>
<button is="emby-button" class="btnShuffle button-flat hide listTextButton-autohide">
<span>${Shuffle}</span>
</button>
<button is="paper-icon-button-light" class="btnShuffle hide listIconButton-autohide">
<span class="material-icons shuffle"></span>
</button>
<button is="emby-button" class="btnNewItem hide button-flat listTextButton-autohide">
<span>${New}</span>
</button>
<button is="paper-icon-button-light" class="btnNewItem hide listIconButton-autohide">
<span class="material-icons add"></span>
</button>
<button is="emby-button" class="btnSort hide button-flat listTextButton-autohide">
<span class="btnSortText"></span>
<span class="material-icons btnSortIcon arrow_upward"></span>
</button>
<button is="paper-icon-button-light" class="btnSort hide listIconButton-autohide">
<span class="material-icons sort"></span>
</button>
<button is="emby-button" class="btnFilter button-flat listTextButton-autohide">
<span>${Filter}</span>
</button>
<button is="paper-icon-button-light" class="btnFilter listIconButton-autohide" data-ripple="false" style="overflow:visible;">
<span class="material-icons filter_list"></span>
</button>
<button is="emby-button" class="btnViewSettings button-flat listTextButton-autohide">
<span class="material-icons more_vert"></span>
</button>
<button is="paper-icon-button-light" class="btnViewSettings listIconButton-autohide">
<span class="material-icons more_vert"></span>
</button>
</div>
<div is="emby-itemscontainer" class="vertical-wrap itemsContainer centered" style="padding: 0 0 10vh 0;">
</div>
</div>
</div>

499
src/controllers/list.js
View file

File diff suppressed because it is too large Load diff

97
src/controllers/livetv.html Normal file
View file

@ -0,0 +1,97 @@
<div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs withTabs" data-title="${LiveTV}" data-backdroptype="series,movie">
<div class="liveTvContainer">
<div class="pageTabContent" id="suggestionsTab" data-index="0">
<div id="activePrograms" class="verticalSection">
<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
<a href="list.html?type=Programs&IsAiring=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
<h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${HeaderOnNow}</h2>
<span class="material-icons chevron_right"></span>
</a>
</div>
<div is="emby-itemscontainer" class="activeProgramItems itemsContainer padded-left padded-right"></div>
</div>
<div id="upcomingEpisodes" class="verticalSection">
<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
<a href="list.html?type=Programs&IsSeries=true&IsMovie=false&IsNews=false" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
<h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${Shows}</h2>
<span class="material-icons chevron_right"></span>
</a>
</div>
<div is="emby-itemscontainer" class="upcomingEpisodeItems itemsContainer padded-left padded-right"></div>
</div>
<div id="upcomingTvMovies" class="verticalSection">
<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
<a href="list.html?type=Programs&IsMovie=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
<h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${Movies}</h2>
<span class="material-icons chevron_right"></span>
</a>
</div>
<div is="emby-itemscontainer" class="upcomingTvMovieItems itemsContainer padded-left padded-right"></div>
</div>
<div id="upcomingSports" class="verticalSection">
<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
<a href="list.html?type=Programs&IsSports=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
<h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${Sports}</h2>
<span class="material-icons chevron_right"></span>
</a>
</div>
<div is="emby-itemscontainer" class="upcomingSportsItems itemsContainer padded-left padded-right"></div>
</div>
<div id="upcomingKids" class="verticalSection">
<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
<a href="list.html?type=Programs&IsKids=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
<h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${HeaderForKids}</h2>
<span class="material-icons chevron_right"></span>
</a>
</div>
<div is="emby-itemscontainer" class="upcomingKidsItems itemsContainer padded-left padded-right"></div>
</div>
<div id="upcomingNews" class="verticalSection">
<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
<a href="list.html?type=Programs&IsNews=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
<h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${News}</h2>
<span class="material-icons chevron_right"></span>
</a>
</div>
<div is="emby-itemscontainer" class="upcomingNewsItems itemsContainer padded-left padded-right"></div>
</div>
</div>
<div class="pageTabContent flexPageTabContent absolutePageTabContent" id="guideTab" data-index="1" style="width:auto;padding-top:0; padding-bottom: 0!important;">
</div>
<div class="pageTabContent" id="channelsTab" data-index="2">
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div>
<button is="paper-icon-button-light" class="btnFilter sectionTitleButton" title="${Filter}"><span class="material-icons filter_list"></span></button>
</div>
<div is="emby-itemscontainer" id="items" class="itemsContainer vertical-wrap padded-left padded-right"></div>
</div>
<div class="pageTabContent" id="recordingsTab" data-index="3">
<div id="latestRecordings" class="verticalSection hide">
<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
<button type="button" is="emby-button" class="button-flat button-flat-mini sectionTitleTextButton more" data-type="latest">
<h2 class="sectionTitle sectionTitle-cards">${HeaderLatestRecordings}</h2>
<span class="material-icons chevron_right"></span>
</button>
</div>
<div is="emby-itemscontainer" class="recordingItems itemsContainer padded-left padded-right"></div>
</div>
</div>
<div class="pageTabContent" id="scheduleTab" data-index="4">
<div id="activeRecordings" class="verticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderActiveRecordings}</h2>
<div is="emby-itemscontainer" class="recordingItems itemsContainer padded-left padded-right"></div>
</div>
<div id="upcomingRecordings" class="hide">
<div class="recordingItems"></div>
</div>
</div>
<div class="pageTabContent padded-top" id="seriesTab" data-index="5">
<div is="emby-itemscontainer" class="vertical-wrap itemsContainer centered padded-left padded-right" id="items"></div>
</div>
<div class="pageTabContent" data-index="6">
</div>
</div>
</div>

240
src/controllers/livetv/livetvchannels.js
View file

@ -1,130 +1,134 @@
define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'userSettings', 'emby-itemscontainer'], function (cardBuilder, imageLoader, libraryBrowser, loading, events, userSettings) {
'use strict';
import cardBuilder from 'cardBuilder';
import imageLoader from 'imageLoader';
import libraryBrowser from 'libraryBrowser';
import loading from 'loading';
import events from 'events';
import * as userSettings from 'userSettings';
import 'emby-itemscontainer';
return function (view, params, tabContent) {
function getPageData() {
if (!pageData) {
pageData = {
query: {
StartIndex: 0,
Fields: 'PrimaryImageAspectRatio'
}
};
export default function (view, params, tabContent) {
function getPageData() {
if (!pageData) {
pageData = {
query: {
StartIndex: 0,
Fields: 'PrimaryImageAspectRatio'
}
};
}
if (userSettings.libraryPageSize() > 0) {
pageData.query['Limit'] = userSettings.libraryPageSize();
}
return pageData;
}
function getQuery() {
return getPageData().query;
}
function getChannelsHtml(channels) {
return cardBuilder.getCardsHtml({
items: channels,
shape: 'square',
showTitle: true,
lazy: true,
cardLayout: true,
showDetailsMenu: true,
showCurrentProgram: true,
showCurrentProgramTime: true
});
}
function renderChannels(context, result) {
function onNextPageClick() {
if (isLoading) {
return;
}
if (userSettings.libraryPageSize() > 0) {
pageData.query['Limit'] = userSettings.libraryPageSize();
query.StartIndex += query.Limit;
}
reloadItems(context);
}
function onPreviousPageClick() {
if (isLoading) {
return;
}
return pageData;
}
function getQuery() {
return getPageData().query;
}
function getChannelsHtml(channels) {
return cardBuilder.getCardsHtml({
items: channels,
shape: 'square',
showTitle: true,
lazy: true,
cardLayout: true,
showDetailsMenu: true,
showCurrentProgram: true,
showCurrentProgramTime: true
});
}
function renderChannels(context, result) {
function onNextPageClick() {
if (isLoading) {
return;
}
if (userSettings.libraryPageSize() > 0) {
query.StartIndex += query.Limit;
}
reloadItems(context);
}
function onPreviousPageClick() {
if (isLoading) {
return;
}
if (userSettings.libraryPageSize() > 0) {
query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
}
reloadItems(context);
}
var query = getQuery();
context.querySelector('.paging').innerHTML = libraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex,
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
showLimit: false,
updatePageSizeSetting: false,
filterButton: false
});
var html = getChannelsHtml(result.Items);
var elem = context.querySelector('#items');
elem.innerHTML = html;
imageLoader.lazyChildren(elem);
var i;
var length;
var elems;
for (elems = context.querySelectorAll('.btnNextPage'), i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onNextPageClick);
}
for (elems = context.querySelectorAll('.btnPreviousPage'), i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onPreviousPageClick);
if (userSettings.libraryPageSize() > 0) {
query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
}
reloadItems(context);
}
function showFilterMenu(context) {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
var filterDialog = new filterDialogFactory({
query: getQuery(),
mode: 'livetvchannels',
serverId: ApiClient.serverId()
});
events.on(filterDialog, 'filterchange', function () {
reloadItems(context);
});
filterDialog.show();
});
}
function reloadItems(context, save) {
loading.show();
isLoading = true;
var query = getQuery();
var apiClient = ApiClient;
query.UserId = apiClient.getCurrentUserId();
apiClient.getLiveTvChannels(query).then(function (result) {
renderChannels(context, result);
loading.hide();
isLoading = false;
require(['autoFocuser'], function (autoFocuser) {
autoFocuser.autoFocus(view);
});
});
}
var pageData;
var self = this;
var isLoading = false;
tabContent.querySelector('.btnFilter').addEventListener('click', function () {
showFilterMenu(tabContent);
const query = getQuery();
context.querySelector('.paging').innerHTML = libraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex,
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
showLimit: false,
updatePageSizeSetting: false,
filterButton: false
});
const html = getChannelsHtml(result.Items);
const elem = context.querySelector('#items');
elem.innerHTML = html;
imageLoader.lazyChildren(elem);
let i;
let length;
let elems;
self.renderTab = function () {
reloadItems(tabContent);
};
for (elems = context.querySelectorAll('.btnNextPage'), i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onNextPageClick);
}
for (elems = context.querySelectorAll('.btnPreviousPage'), i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onPreviousPageClick);
}
}
function showFilterMenu(context) {
import(['components/filterdialog/filterdialog']).then(({default: FilterDialog}) => {
const filterDialog = new FilterDialog({
query: getQuery(),
mode: 'livetvchannels',
serverId: ApiClient.serverId()
});
events.on(filterDialog, 'filterchange', function () {
reloadItems(context);
});
filterDialog.show();
});
}
function reloadItems(context, save) {
loading.show();
isLoading = true;
const query = getQuery();
const apiClient = ApiClient;
query.UserId = apiClient.getCurrentUserId();
apiClient.getLiveTvChannels(query).then(function (result) {
renderChannels(context, result);
loading.hide();
isLoading = false;
import('autoFocuser').then(({default: autoFocuser}) => {
autoFocuser.autoFocus(view);
});
});
}
let pageData;
const self = this;
let isLoading = false;
tabContent.querySelector('.btnFilter').addEventListener('click', function () {
showFilterMenu(tabContent);
});
self.renderTab = function () {
reloadItems(tabContent);
};
});
}

50
src/controllers/livetv/livetvguide.js
View file

@ -1,29 +1,27 @@
define(['tvguide'], function (tvguide) {
'use strict';
import tvguide from 'tvguide';
return function (view, params, tabContent) {
var guideInstance;
var self = this;
export default function (view, params, tabContent) {
let guideInstance;
const self = this;
self.renderTab = function () {
if (!guideInstance) {
guideInstance = new tvguide({
element: tabContent,
serverId: ApiClient.serverId()
});
}
};
self.onShow = function () {
if (guideInstance) {
guideInstance.resume();
}
};
self.onHide = function () {
if (guideInstance) {
guideInstance.pause();
}
};
self.renderTab = function () {
if (!guideInstance) {
guideInstance = new tvguide({
element: tabContent,
serverId: ApiClient.serverId()
});
}
};
});
self.onShow = function () {
if (guideInstance) {
guideInstance.resume();
}
};
self.onHide = function () {
if (guideInstance) {
guideInstance.pause();
}
};
}

198
src/controllers/livetv/livetvrecordings.js
View file

@ -1,110 +1,112 @@
define(['layoutManager', 'loading', 'cardBuilder', 'apphost', 'imageLoader', 'scripts/livetvcomponents', 'listViewStyle', 'emby-itemscontainer'], function (layoutManager, loading, cardBuilder, appHost, imageLoader) {
'use strict';
import loading from 'loading';
import cardBuilder from 'cardBuilder';
import imageLoader from 'imageLoader';
import 'scripts/livetvcomponents';
import 'listViewStyle';
import 'emby-itemscontainer';
function renderRecordings(elem, recordings, cardOptions, scrollX) {
if (!elem) {
return;
}
if (recordings.length) {
elem.classList.remove('hide');
} else {
elem.classList.add('hide');
}
var recordingItems = elem.querySelector('.recordingItems');
if (scrollX) {
recordingItems.classList.add('scrollX');
recordingItems.classList.add('hiddenScrollX');
recordingItems.classList.remove('vertical-wrap');
} else {
recordingItems.classList.remove('scrollX');
recordingItems.classList.remove('hiddenScrollX');
recordingItems.classList.add('vertical-wrap');
}
appHost.supports('imageanalysis');
recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
items: recordings,
shape: scrollX ? 'autooverflow' : 'auto',
defaultShape: scrollX ? 'overflowBackdrop' : 'backdrop',
showTitle: true,
showParentTitle: true,
coverImage: true,
cardLayout: false,
centerText: true,
allowBottomPadding: !scrollX,
preferThumb: 'auto',
overlayText: false
}, cardOptions || {}));
imageLoader.lazyChildren(recordingItems);
function renderRecordings(elem, recordings, cardOptions, scrollX) {
if (!elem) {
return;
}
function renderLatestRecordings(context, promise) {
promise.then(function (result) {
renderRecordings(context.querySelector('#latestRecordings'), result.Items, {
showYear: true,
lines: 2
}, false);
loading.hide();
});
if (recordings.length) {
elem.classList.remove('hide');
} else {
elem.classList.add('hide');
}
function renderRecordingFolders(context, promise) {
promise.then(function (result) {
renderRecordings(context.querySelector('#recordingFolders'), result.Items, {
showYear: false,
showParentTitle: false
}, false);
});
const recordingItems = elem.querySelector('.recordingItems');
if (scrollX) {
recordingItems.classList.add('scrollX');
recordingItems.classList.add('hiddenScrollX');
recordingItems.classList.remove('vertical-wrap');
} else {
recordingItems.classList.remove('scrollX');
recordingItems.classList.remove('hiddenScrollX');
recordingItems.classList.add('vertical-wrap');
}
function onMoreClick(e) {
var type = this.getAttribute('data-type');
var serverId = ApiClient.serverId();
recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
items: recordings,
shape: scrollX ? 'autooverflow' : 'auto',
defaultShape: scrollX ? 'overflowBackdrop' : 'backdrop',
showTitle: true,
showParentTitle: true,
coverImage: true,
cardLayout: false,
centerText: true,
allowBottomPadding: !scrollX,
preferThumb: 'auto',
overlayText: false
}, cardOptions || {}));
imageLoader.lazyChildren(recordingItems);
}
switch (type) {
case 'latest':
Dashboard.navigate('list.html?type=Recordings&serverId=' + serverId);
}
function renderLatestRecordings(context, promise) {
promise.then(function (result) {
renderRecordings(context.querySelector('#latestRecordings'), result.Items, {
showYear: true,
lines: 2
}, false);
loading.hide();
});
}
function renderRecordingFolders(context, promise) {
promise.then(function (result) {
renderRecordings(context.querySelector('#recordingFolders'), result.Items, {
showYear: false,
showParentTitle: false
}, false);
});
}
function onMoreClick(e) {
const type = this.getAttribute('data-type');
const serverId = ApiClient.serverId();
switch (type) {
case 'latest':
Dashboard.navigate('list.html?type=Recordings&serverId=' + serverId);
}
}
export default function (view, params, tabContent) {
function enableFullRender() {
return new Date().getTime() - lastFullRender > 300000;
}
return function (view, params, tabContent) {
function enableFullRender() {
return new Date().getTime() - lastFullRender > 300000;
let foldersPromise;
let latestPromise;
const self = this;
let lastFullRender = 0;
const moreButtons = tabContent.querySelectorAll('.more');
for (let i = 0, length = moreButtons.length; i < length; i++) {
moreButtons[i].addEventListener('click', onMoreClick);
}
self.preRender = function () {
if (enableFullRender()) {
latestPromise = ApiClient.getLiveTvRecordings({
UserId: Dashboard.getCurrentUserId(),
Limit: 12,
Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
EnableTotalRecordCount: false,
EnableImageTypes: 'Primary,Thumb,Backdrop'
});
foldersPromise = ApiClient.getRecordingFolders(Dashboard.getCurrentUserId());
}
var foldersPromise;
var latestPromise;
var self = this;
var lastFullRender = 0;
var moreButtons = tabContent.querySelectorAll('.more');
for (var i = 0, length = moreButtons.length; i < length; i++) {
moreButtons[i].addEventListener('click', onMoreClick);
}
self.preRender = function () {
if (enableFullRender()) {
latestPromise = ApiClient.getLiveTvRecordings({
UserId: Dashboard.getCurrentUserId(),
Limit: 12,
Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
EnableTotalRecordCount: false,
EnableImageTypes: 'Primary,Thumb,Backdrop'
});
foldersPromise = ApiClient.getRecordingFolders(Dashboard.getCurrentUserId());
}
};
self.renderTab = function () {
if (enableFullRender()) {
loading.show();
renderLatestRecordings(tabContent, latestPromise);
renderRecordingFolders(tabContent, foldersPromise);
lastFullRender = new Date().getTime();
}
};
};
});
self.renderTab = function () {
if (enableFullRender()) {
loading.show();
renderLatestRecordings(tabContent, latestPromise);
renderRecordingFolders(tabContent, foldersPromise);
lastFullRender = new Date().getTime();
}
};
}

219
src/controllers/livetv/livetvschedule.js
View file

@ -1,123 +1,124 @@
define(['layoutManager', 'cardBuilder', 'apphost', 'imageLoader', 'loading', 'scripts/livetvcomponents', 'emby-button', 'emby-itemscontainer'], function (layoutManager, cardBuilder, appHost, imageLoader, loading) {
'use strict';
import layoutManager from 'layoutManager';
import cardBuilder from 'cardBuilder';
import imageLoader from 'imageLoader';
import loading from 'loading';
import 'scripts/livetvcomponents';
import 'emby-button';
import 'emby-itemscontainer';
function enableScrollX() {
return !layoutManager.desktop;
function enableScrollX() {
return !layoutManager.desktop;
}
function renderRecordings(elem, recordings, cardOptions) {
if (recordings.length) {
elem.classList.remove('hide');
} else {
elem.classList.add('hide');
}
function renderRecordings(elem, recordings, cardOptions) {
if (recordings.length) {
const recordingItems = elem.querySelector('.recordingItems');
if (enableScrollX()) {
recordingItems.classList.add('scrollX');
if (layoutManager.tv) {
recordingItems.classList.add('smoothScrollX');
}
recordingItems.classList.add('hiddenScrollX');
recordingItems.classList.remove('vertical-wrap');
} else {
recordingItems.classList.remove('scrollX');
recordingItems.classList.remove('smoothScrollX');
recordingItems.classList.remove('hiddenScrollX');
recordingItems.classList.add('vertical-wrap');
}
recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
items: recordings,
shape: enableScrollX() ? 'autooverflow' : 'auto',
showTitle: true,
showParentTitle: true,
coverImage: true,
cardLayout: false,
centerText: true,
allowBottomPadding: !enableScrollX(),
preferThumb: 'auto'
}, cardOptions || {}));
imageLoader.lazyChildren(recordingItems);
}
function getBackdropShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
function renderActiveRecordings(context, promise) {
promise.then(function (result) {
renderRecordings(context.querySelector('#activeRecordings'), result.Items, {
shape: enableScrollX() ? 'autooverflow' : 'auto',
defaultShape: getBackdropShape(),
showParentTitle: false,
showParentTitleOrTitle: true,
showTitle: false,
showAirTime: true,
showAirEndTime: true,
showChannelName: true,
coverImage: true,
overlayText: false,
overlayMoreButton: true
});
});
}
function renderTimers(context, timers, options) {
LiveTvHelpers.getTimersHtml(timers, options).then(function (html) {
const elem = context;
if (html) {
elem.classList.remove('hide');
} else {
elem.classList.add('hide');
}
var recordingItems = elem.querySelector('.recordingItems');
elem.querySelector('.recordingItems').innerHTML = html;
imageLoader.lazyChildren(elem);
});
}
if (enableScrollX()) {
recordingItems.classList.add('scrollX');
function renderUpcomingRecordings(context, promise) {
promise.then(function (result) {
renderTimers(context.querySelector('#upcomingRecordings'), result.Items);
loading.hide();
});
}
if (layoutManager.tv) {
recordingItems.classList.add('smoothScrollX');
}
export default function (view, params, tabContent) {
let activeRecordingsPromise;
let upcomingRecordingsPromise;
const self = this;
tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () {
self.preRender();
self.renderTab();
});
recordingItems.classList.add('hiddenScrollX');
recordingItems.classList.remove('vertical-wrap');
} else {
recordingItems.classList.remove('scrollX');
recordingItems.classList.remove('smoothScrollX');
recordingItems.classList.remove('hiddenScrollX');
recordingItems.classList.add('vertical-wrap');
}
var supportsImageAnalysis = appHost.supports('imageanalysis');
var cardLayout = appHost.preferVisualCards || supportsImageAnalysis;
cardLayout = false;
recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
items: recordings,
shape: enableScrollX() ? 'autooverflow' : 'auto',
showTitle: true,
showParentTitle: true,
coverImage: true,
cardLayout: cardLayout,
centerText: !cardLayout,
allowBottomPadding: !enableScrollX(),
preferThumb: 'auto'
}, cardOptions || {}));
imageLoader.lazyChildren(recordingItems);
}
function getBackdropShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
function renderActiveRecordings(context, promise) {
promise.then(function (result) {
renderRecordings(context.querySelector('#activeRecordings'), result.Items, {
shape: enableScrollX() ? 'autooverflow' : 'auto',
defaultShape: getBackdropShape(),
showParentTitle: false,
showParentTitleOrTitle: true,
showTitle: false,
showAirTime: true,
showAirEndTime: true,
showChannelName: true,
coverImage: true,
overlayText: false,
overlayMoreButton: true
});
self.preRender = function () {
activeRecordingsPromise = ApiClient.getLiveTvRecordings({
UserId: Dashboard.getCurrentUserId(),
IsInProgress: true,
Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
EnableTotalRecordCount: false,
EnableImageTypes: 'Primary,Thumb,Backdrop'
});
}
function renderTimers(context, timers, options) {
LiveTvHelpers.getTimersHtml(timers, options).then(function (html) {
var elem = context;
if (html) {
elem.classList.remove('hide');
} else {
elem.classList.add('hide');
}
elem.querySelector('.recordingItems').innerHTML = html;
imageLoader.lazyChildren(elem);
upcomingRecordingsPromise = ApiClient.getLiveTvTimers({
IsActive: false,
IsScheduled: true
});
}
function renderUpcomingRecordings(context, promise) {
promise.then(function (result) {
renderTimers(context.querySelector('#upcomingRecordings'), result.Items);
loading.hide();
});
}
return function (view, params, tabContent) {
var activeRecordingsPromise;
var upcomingRecordingsPromise;
var self = this;
tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () {
self.preRender();
self.renderTab();
});
self.preRender = function () {
activeRecordingsPromise = ApiClient.getLiveTvRecordings({
UserId: Dashboard.getCurrentUserId(),
IsInProgress: true,
Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
EnableTotalRecordCount: false,
EnableImageTypes: 'Primary,Thumb,Backdrop'
});
upcomingRecordingsPromise = ApiClient.getLiveTvTimers({
IsActive: false,
IsScheduled: true
});
};
self.renderTab = function () {
loading.show();
renderActiveRecordings(tabContent, activeRecordingsPromise);
renderUpcomingRecordings(tabContent, upcomingRecordingsPromise);
};
};
});
self.renderTab = function () {
loading.show();
renderActiveRecordings(tabContent, activeRecordingsPromise);
renderUpcomingRecordings(tabContent, upcomingRecordingsPromise);
};
}

91
src/controllers/livetv/livetvseriestimers.js
View file

@ -1,51 +1,52 @@
define(['datetime', 'cardBuilder', 'imageLoader', 'apphost', 'loading', 'paper-icon-button-light', 'emby-button'], function (datetime, cardBuilder, imageLoader, appHost, loading) {
'use strict';
import cardBuilder from 'cardBuilder';
import imageLoader from 'imageLoader';
import loading from 'loading';
import 'paper-icon-button-light';
import 'emby-button';
function renderTimers(context, timers) {
var html = '';
appHost.supports('imageanalysis');
html += cardBuilder.getCardsHtml({
items: timers,
shape: 'auto',
defaultShape: 'portrait',
showTitle: true,
cardLayout: false,
preferThumb: 'auto',
coverImage: true,
overlayText: false,
showSeriesTimerTime: true,
showSeriesTimerChannel: true,
centerText: true,
overlayMoreButton: true,
lines: 3
});
var elem = context.querySelector('#items');
elem.innerHTML = html;
imageLoader.lazyChildren(elem);
loading.hide();
}
function renderTimers(context, timers) {
const html = cardBuilder.getCardsHtml({
items: timers,
shape: 'auto',
defaultShape: 'portrait',
showTitle: true,
cardLayout: false,
preferThumb: 'auto',
coverImage: true,
overlayText: false,
showSeriesTimerTime: true,
showSeriesTimerChannel: true,
centerText: true,
overlayMoreButton: true,
lines: 3
});
const elem = context.querySelector('#items');
elem.innerHTML = html;
imageLoader.lazyChildren(elem);
loading.hide();
}
function reload(context, promise) {
loading.show();
promise.then(function (result) {
renderTimers(context, result.Items);
});
}
function reload(context, promise) {
loading.show();
promise.then(function (result) {
renderTimers(context, result.Items);
});
}
var query = {
SortBy: 'SortName',
SortOrder: 'Ascending'
const query = {
SortBy: 'SortName',
SortOrder: 'Ascending'
};
export default function (view, params, tabContent) {
let timersPromise;
const self = this;
self.preRender = function () {
timersPromise = ApiClient.getLiveTvSeriesTimers(query);
};
return function (view, params, tabContent) {
var timersPromise;
var self = this;
self.preRender = function () {
timersPromise = ApiClient.getLiveTvSeriesTimers(query);
};
self.renderTab = function () {
reload(tabContent, timersPromise);
};
self.renderTab = function () {
reload(tabContent, timersPromise);
};
});
}

706
src/controllers/livetv/livetvsuggested.js
View file

@ -1,393 +1,397 @@
define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize', 'libraryBrowser', 'mainTabsManager', 'cardBuilder', 'apphost', 'imageLoader', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (layoutManager, userSettings, inputManager, loading, globalize, libraryBrowser, mainTabsManager, cardBuilder, appHost, imageLoader) {
'use strict';
import layoutManager from 'layoutManager';
import * as userSettings from 'userSettings';
import inputManager from 'inputManager';
import loading from 'loading';
import globalize from 'globalize';
import * as mainTabsManager from 'mainTabsManager';
import cardBuilder from 'cardBuilder';
import imageLoader from 'imageLoader';
import 'scrollStyles';
import 'emby-itemscontainer';
import 'emby-tabs';
import 'emby-button';
function enableScrollX() {
return !layoutManager.desktop;
function enableScrollX() {
return !layoutManager.desktop;
}
function getBackdropShape() {
if (enableScrollX()) {
return 'overflowBackdrop';
}
return 'backdrop';
}
function getPortraitShape() {
if (enableScrollX()) {
return 'overflowPortrait';
}
return 'portrait';
}
function getLimit() {
if (enableScrollX()) {
return 12;
}
function getBackdropShape() {
if (enableScrollX()) {
return 'overflowBackdrop';
}
return 'backdrop';
return 9;
}
function loadRecommendedPrograms(page) {
loading.show();
let limit = getLimit();
if (enableScrollX()) {
limit *= 2;
}
function getPortraitShape() {
if (enableScrollX()) {
return 'overflowPortrait';
}
return 'portrait';
}
ApiClient.getLiveTvRecommendedPrograms({
userId: Dashboard.getCurrentUserId(),
IsAiring: true,
limit: limit,
ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Thumb,Backdrop',
EnableTotalRecordCount: false,
Fields: 'ChannelInfo,PrimaryImageAspectRatio'
}).then(function (result) {
renderItems(page, result.Items, 'activeProgramItems', 'play', {
showAirDateTime: false,
showAirEndTime: true
});
loading.hide();
function getLimit() {
if (enableScrollX()) {
return 12;
}
import('autoFocuser').then(({default: autoFocuser}) => {
autoFocuser.autoFocus(page);
});
});
}
return 9;
}
function loadRecommendedPrograms(page) {
loading.show();
var limit = getLimit();
if (enableScrollX()) {
limit *= 2;
}
ApiClient.getLiveTvRecommendedPrograms({
function reload(page, enableFullRender) {
if (enableFullRender) {
loadRecommendedPrograms(page);
ApiClient.getLiveTvPrograms({
userId: Dashboard.getCurrentUserId(),
IsAiring: true,
limit: limit,
ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Thumb,Backdrop',
HasAired: false,
limit: getLimit(),
IsMovie: false,
IsSports: false,
IsKids: false,
IsNews: false,
IsSeries: true,
EnableTotalRecordCount: false,
Fields: 'ChannelInfo,PrimaryImageAspectRatio'
Fields: 'ChannelInfo,PrimaryImageAspectRatio',
EnableImageTypes: 'Primary,Thumb'
}).then(function (result) {
renderItems(page, result.Items, 'activeProgramItems', 'play', {
showAirDateTime: false,
showAirEndTime: true
renderItems(page, result.Items, 'upcomingEpisodeItems');
});
ApiClient.getLiveTvPrograms({
userId: Dashboard.getCurrentUserId(),
HasAired: false,
limit: getLimit(),
IsMovie: true,
EnableTotalRecordCount: false,
Fields: 'ChannelInfo',
EnableImageTypes: 'Primary,Thumb'
}).then(function (result) {
renderItems(page, result.Items, 'upcomingTvMovieItems', null, {
shape: getPortraitShape(),
preferThumb: null,
showParentTitle: false
});
loading.hide();
require(['autoFocuser'], function (autoFocuser) {
autoFocuser.autoFocus(page);
});
ApiClient.getLiveTvPrograms({
userId: Dashboard.getCurrentUserId(),
HasAired: false,
limit: getLimit(),
IsSports: true,
EnableTotalRecordCount: false,
Fields: 'ChannelInfo,PrimaryImageAspectRatio',
EnableImageTypes: 'Primary,Thumb'
}).then(function (result) {
renderItems(page, result.Items, 'upcomingSportsItems');
});
ApiClient.getLiveTvPrograms({
userId: Dashboard.getCurrentUserId(),
HasAired: false,
limit: getLimit(),
IsKids: true,
EnableTotalRecordCount: false,
Fields: 'ChannelInfo,PrimaryImageAspectRatio',
EnableImageTypes: 'Primary,Thumb'
}).then(function (result) {
renderItems(page, result.Items, 'upcomingKidsItems');
});
ApiClient.getLiveTvPrograms({
userId: Dashboard.getCurrentUserId(),
HasAired: false,
limit: getLimit(),
IsNews: true,
EnableTotalRecordCount: false,
Fields: 'ChannelInfo,PrimaryImageAspectRatio',
EnableImageTypes: 'Primary,Thumb'
}).then(function (result) {
renderItems(page, result.Items, 'upcomingNewsItems', null, {
showParentTitleOrTitle: true,
showTitle: false,
showParentTitle: false
});
});
}
}
function reload(page, enableFullRender) {
if (enableFullRender) {
loadRecommendedPrograms(page);
ApiClient.getLiveTvPrograms({
userId: Dashboard.getCurrentUserId(),
HasAired: false,
limit: getLimit(),
IsMovie: false,
IsSports: false,
IsKids: false,
IsNews: false,
IsSeries: true,
EnableTotalRecordCount: false,
Fields: 'ChannelInfo,PrimaryImageAspectRatio',
EnableImageTypes: 'Primary,Thumb'
}).then(function (result) {
renderItems(page, result.Items, 'upcomingEpisodeItems');
});
ApiClient.getLiveTvPrograms({
userId: Dashboard.getCurrentUserId(),
HasAired: false,
limit: getLimit(),
IsMovie: true,
EnableTotalRecordCount: false,
Fields: 'ChannelInfo',
EnableImageTypes: 'Primary,Thumb'
}).then(function (result) {
renderItems(page, result.Items, 'upcomingTvMovieItems', null, {
shape: getPortraitShape(),
preferThumb: null,
showParentTitle: false
});
});
ApiClient.getLiveTvPrograms({
userId: Dashboard.getCurrentUserId(),
HasAired: false,
limit: getLimit(),
IsSports: true,
EnableTotalRecordCount: false,
Fields: 'ChannelInfo,PrimaryImageAspectRatio',
EnableImageTypes: 'Primary,Thumb'
}).then(function (result) {
renderItems(page, result.Items, 'upcomingSportsItems');
});
ApiClient.getLiveTvPrograms({
userId: Dashboard.getCurrentUserId(),
HasAired: false,
limit: getLimit(),
IsKids: true,
EnableTotalRecordCount: false,
Fields: 'ChannelInfo,PrimaryImageAspectRatio',
EnableImageTypes: 'Primary,Thumb'
}).then(function (result) {
renderItems(page, result.Items, 'upcomingKidsItems');
});
ApiClient.getLiveTvPrograms({
userId: Dashboard.getCurrentUserId(),
HasAired: false,
limit: getLimit(),
IsNews: true,
EnableTotalRecordCount: false,
Fields: 'ChannelInfo,PrimaryImageAspectRatio',
EnableImageTypes: 'Primary,Thumb'
}).then(function (result) {
renderItems(page, result.Items, 'upcomingNewsItems', null, {
showParentTitleOrTitle: true,
showTitle: false,
showParentTitle: false
});
});
function renderItems(page, items, sectionClass, overlayButton, cardOptions) {
const html = cardBuilder.getCardsHtml(Object.assign({
items: items,
preferThumb: 'auto',
inheritThumb: false,
shape: enableScrollX() ? 'autooverflow' : 'auto',
defaultShape: getBackdropShape(),
showParentTitle: true,
showTitle: true,
centerText: true,
coverImage: true,
overlayText: false,
lazy: true,
overlayPlayButton: overlayButton === 'play',
overlayMoreButton: overlayButton === 'more',
overlayInfoButton: overlayButton === 'info',
allowBottomPadding: !enableScrollX(),
showAirTime: true,
showAirDateTime: true
}, cardOptions || {}));
const elem = page.querySelector('.' + sectionClass);
elem.innerHTML = html;
imageLoader.lazyChildren(elem);
}
function getTabs() {
return [{
name: globalize.translate('Programs')
}, {
name: globalize.translate('Guide')
}, {
name: globalize.translate('Channels')
}, {
name: globalize.translate('Recordings')
}, {
name: globalize.translate('Schedule')
}, {
name: globalize.translate('Series')
}];
}
function setScrollClasses(elem, scrollX) {
if (scrollX) {
elem.classList.add('hiddenScrollX');
if (layoutManager.tv) {
elem.classList.add('smoothScrollX');
}
elem.classList.add('scrollX');
elem.classList.remove('vertical-wrap');
} else {
elem.classList.remove('hiddenScrollX');
elem.classList.remove('smoothScrollX');
elem.classList.remove('scrollX');
elem.classList.add('vertical-wrap');
}
}
function getDefaultTabIndex(folderId) {
if (userSettings.get('landing-' + folderId) === 'guide') {
return 1;
}
function renderItems(page, items, sectionClass, overlayButton, cardOptions) {
var html = cardBuilder.getCardsHtml(Object.assign({
items: items,
preferThumb: 'auto',
inheritThumb: false,
shape: enableScrollX() ? 'autooverflow' : 'auto',
defaultShape: getBackdropShape(),
showParentTitle: true,
showTitle: true,
centerText: true,
coverImage: true,
overlayText: false,
lazy: true,
overlayPlayButton: 'play' === overlayButton,
overlayMoreButton: 'more' === overlayButton,
overlayInfoButton: 'info' === overlayButton,
allowBottomPadding: !enableScrollX(),
showAirTime: true,
showAirDateTime: true
}, cardOptions || {}));
var elem = page.querySelector('.' + sectionClass);
elem.innerHTML = html;
imageLoader.lazyChildren(elem);
return 0;
}
export default function (view, params) {
function enableFullRender() {
return new Date().getTime() - lastFullRender > 3e5;
}
function getTabs() {
return [{
name: globalize.translate('Programs')
}, {
name: globalize.translate('TabGuide')
}, {
name: globalize.translate('TabChannels')
}, {
name: globalize.translate('TabRecordings')
}, {
name: globalize.translate('HeaderSchedule')
}, {
name: globalize.translate('TabSeries')
}, {
name: globalize.translate('ButtonSearch'),
cssClass: 'searchTabButton'
}];
function onBeforeTabChange(evt) {
preLoadTab(view, parseInt(evt.detail.selectedTabIndex));
}
function setScrollClasses(elem, scrollX) {
if (scrollX) {
elem.classList.add('hiddenScrollX');
function onTabChange(evt) {
const previousTabController = tabControllers[parseInt(evt.detail.previousIndex)];
if (layoutManager.tv) {
elem.classList.add('smoothScrollX');
if (previousTabController && previousTabController.onHide) {
previousTabController.onHide();
}
loadTab(view, parseInt(evt.detail.selectedTabIndex));
}
function getTabContainers() {
return view.querySelectorAll('.pageTabContent');
}
function initTabs() {
mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange);
}
function getTabController(page, index, callback) {
let depends;
// TODO int is a little hard to read
switch (index) {
case 0:
depends = 'controllers/livetv/livetvsuggested';
break;
case 1:
depends = 'controllers/livetv/livetvguide';
break;
case 2:
depends = 'controllers/livetv/livetvchannels';
break;
case 3:
depends = 'controllers/livetv/livetvrecordings';
break;
case 4:
depends = 'controllers/livetv/livetvschedule';
break;
case 5:
depends = 'controllers/livetv/livetvseriestimers';
break;
}
import(depends).then(({default: controllerFactory}) => {
let tabContent;
if (index === 0) {
tabContent = view.querySelector(`.pageTabContent[data-index="${index}"]`);
self.tabContent = tabContent;
}
elem.classList.add('scrollX');
elem.classList.remove('vertical-wrap');
} else {
elem.classList.remove('hiddenScrollX');
elem.classList.remove('smoothScrollX');
elem.classList.remove('scrollX');
elem.classList.add('vertical-wrap');
}
}
let controller = tabControllers[index];
function getDefaultTabIndex(folderId) {
if (userSettings.get('landing-' + folderId) === 'guide') {
return 1;
}
if (!controller) {
tabContent = view.querySelector(`.pageTabContent[data-index="${index}"]`);
return 0;
}
return function (view, params) {
function enableFullRender() {
return new Date().getTime() - lastFullRender > 3e5;
}
function onBeforeTabChange(evt) {
preLoadTab(view, parseInt(evt.detail.selectedTabIndex));
}
function onTabChange(evt) {
var previousTabController = tabControllers[parseInt(evt.detail.previousIndex)];
if (previousTabController && previousTabController.onHide) {
previousTabController.onHide();
}
loadTab(view, parseInt(evt.detail.selectedTabIndex));
}
function getTabContainers() {
return view.querySelectorAll('.pageTabContent');
}
function initTabs() {
mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange);
}
function getTabController(page, index, callback) {
var depends = [];
// TODO int is a little hard to read
switch (index) {
case 0:
break;
case 1:
depends.push('controllers/livetv/livetvguide');
break;
case 2:
depends.push('controllers/livetv/livetvchannels');
break;
case 3:
depends.push('controllers/livetv/livetvrecordings');
break;
case 4:
depends.push('controllers/livetv/livetvschedule');
break;
case 5:
depends.push('controllers/livetv/livetvseriestimers');
break;
case 6:
depends.push('scripts/searchtab');
}
require(depends, function (controllerFactory) {
var tabContent;
if (0 == index) {
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
self.tabContent = tabContent;
if (index === 0) {
controller = self;
} else if (index === 6) {
controller = new controllerFactory(view, tabContent, {
collectionType: 'livetv'
});
} else {
controller = new controllerFactory(view, params, tabContent);
}
var controller = tabControllers[index];
tabControllers[index] = controller;
if (!controller) {
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
if (controller.initTab) {
controller.initTab();
}
}
if (0 === index) {
controller = self;
} else if (6 === index) {
controller = new controllerFactory(view, tabContent, {
collectionType: 'livetv'
});
} else {
controller = new controllerFactory(view, params, tabContent);
}
callback(controller);
});
}
tabControllers[index] = controller;
function preLoadTab(page, index) {
getTabController(page, index, function (controller) {
if (renderedTabs.indexOf(index) === -1 && controller.preRender) {
controller.preRender();
}
});
}
if (controller.initTab) {
controller.initTab();
}
function loadTab(page, index) {
currentTabIndex = index;
getTabController(page, index, function (controller) {
initialTabIndex = null;
if (renderedTabs.indexOf(index) === -1) {
if (index === 1) {
renderedTabs.push(index);
}
callback(controller);
});
controller.renderTab();
} else if (controller.onShow) {
controller.onShow();
}
currentTabController = controller;
});
}
function onInputCommand(evt) {
if (evt.detail.command === 'search') {
evt.preventDefault();
Dashboard.navigate('search.html?collectionType=livetv');
}
}
function preLoadTab(page, index) {
getTabController(page, index, function (controller) {
if (renderedTabs.indexOf(index) === -1 && controller.preRender) {
controller.preRender();
}
});
let isViewRestored;
const self = this;
let currentTabIndex = parseInt(params.tab || getDefaultTabIndex('livetv'));
let initialTabIndex = currentTabIndex;
let lastFullRender = 0;
[].forEach.call(view.querySelectorAll('.sectionTitleTextButton-programs'), function (link) {
const href = link.href;
if (href) {
link.href = href + '&serverId=' + ApiClient.serverId();
}
});
function loadTab(page, index) {
currentTabIndex = index;
getTabController(page, index, function (controller) {
initialTabIndex = null;
self.initTab = function () {
const tabContent = view.querySelector('.pageTabContent[data-index="0"]');
const containers = tabContent.querySelectorAll('.itemsContainer');
if (-1 == renderedTabs.indexOf(index)) {
if (1 === index) {
renderedTabs.push(index);
}
controller.renderTab();
} else if (controller.onShow) {
controller.onShow();
}
currentTabController = controller;
});
for (let i = 0, length = containers.length; i < length; i++) {
setScrollClasses(containers[i], enableScrollX());
}
function onInputCommand(evt) {
if (evt.detail.command === 'search') {
evt.preventDefault();
Dashboard.navigate('search.html?collectionType=livetv');
}
}
var isViewRestored;
var self = this;
var currentTabIndex = parseInt(params.tab || getDefaultTabIndex('livetv'));
var initialTabIndex = currentTabIndex;
var lastFullRender = 0;
[].forEach.call(view.querySelectorAll('.sectionTitleTextButton-programs'), function (link) {
var href = link.href;
if (href) {
link.href = href + '&serverId=' + ApiClient.serverId();
}
});
self.initTab = function () {
var tabContent = view.querySelector(".pageTabContent[data-index='0']");
var containers = tabContent.querySelectorAll('.itemsContainer');
for (var i = 0, length = containers.length; i < length; i++) {
setScrollClasses(containers[i], enableScrollX());
}
};
self.renderTab = function () {
var tabContent = view.querySelector(".pageTabContent[data-index='0']");
if (enableFullRender()) {
reload(tabContent, true);
lastFullRender = new Date().getTime();
} else {
reload(tabContent);
}
};
var currentTabController;
var tabControllers = [];
var renderedTabs = [];
view.addEventListener('viewbeforeshow', function (evt) {
isViewRestored = evt.detail.isRestored;
initTabs();
});
view.addEventListener('viewshow', function (evt) {
isViewRestored = evt.detail.isRestored;
if (!isViewRestored) {
mainTabsManager.selectedTabIndex(initialTabIndex);
}
inputManager.on(window, onInputCommand);
});
view.addEventListener('viewbeforehide', function (e) {
if (currentTabController && currentTabController.onHide) {
currentTabController.onHide();
}
inputManager.off(window, onInputCommand);
});
view.addEventListener('viewdestroy', function (evt) {
tabControllers.forEach(function (tabController) {
if (tabController.destroy) {
tabController.destroy();
}
});
});
};
});
self.renderTab = function () {
const tabContent = view.querySelector('.pageTabContent[data-index="0"]');
if (enableFullRender()) {
reload(tabContent, true);
lastFullRender = new Date().getTime();
} else {
reload(tabContent);
}
};
let currentTabController;
const tabControllers = [];
const renderedTabs = [];
view.addEventListener('viewbeforeshow', function (evt) {
isViewRestored = evt.detail.isRestored;
initTabs();
});
view.addEventListener('viewshow', function (evt) {
isViewRestored = evt.detail.isRestored;
if (!isViewRestored) {
mainTabsManager.selectedTabIndex(initialTabIndex);
}
inputManager.on(window, onInputCommand);
});
view.addEventListener('viewbeforehide', function () {
if (currentTabController && currentTabController.onHide) {
currentTabController.onHide();
}
inputManager.off(window, onInputCommand);
});
view.addEventListener('viewdestroy', function () {
tabControllers.forEach(function (tabController) {
if (tabController.destroy) {
tabController.destroy();
}
});
});
}

7
src/controllers/livetvguideprovider.html Normal file
View file

@ -0,0 +1,7 @@
<div id="liveTvGuideProviderPage" data-role="page" class="page type-interior liveTvSettingsPage">
<div>
<div class="content-primary">
<div class="readOnlyContent providerTemplate" style="margin-top: 2em;"></div>
</div>
</div>
</div>

50
src/controllers/livetvguideprovider.js
View file

@ -1,30 +1,30 @@
define(['events', 'loading', 'globalize'], function (events, loading, globalize) {
'use strict';
import events from 'events';
import loading from 'loading';
import globalize from 'globalize';
function onListingsSubmitted() {
Dashboard.navigate('livetvstatus.html');
}
function onListingsSubmitted() {
Dashboard.navigate('livetvstatus.html');
}
function init(page, type, providerId) {
var url = 'components/tvproviders/' + type + '.js';
function init(page, type, providerId) {
const url = 'components/tvproviders/' + type + '.js';
require([url], function (factory) {
var instance = new factory(page, providerId, {});
events.on(instance, 'submitted', onListingsSubmitted);
instance.init();
});
}
function loadTemplate(page, type, providerId) {
require(['text!./components/tvproviders/' + type + '.template.html'], function (html) {
page.querySelector('.providerTemplate').innerHTML = globalize.translateDocument(html);
init(page, type, providerId);
});
}
pageIdOn('pageshow', 'liveTvGuideProviderPage', function () {
loading.show();
var providerId = getParameterByName('id');
loadTemplate(this, getParameterByName('type'), providerId);
import(url).then(({default: factory}) => {
const instance = new factory(page, providerId, {});
events.on(instance, 'submitted', onListingsSubmitted);
instance.init();
});
}
function loadTemplate(page, type, providerId) {
import('text!./../components/tvproviders/' + type + '.template.html').then(({default: html}) => {
page.querySelector('.providerTemplate').innerHTML = globalize.translateHtml(html);
init(page, type, providerId);
});
}
pageIdOn('pageshow', 'liveTvGuideProviderPage', function () {
loading.show();
const providerId = getParameterByName('id');
loadTemplate(this, getParameterByName('type'), providerId);
});

102
src/controllers/livetvsettings.html Normal file
View file

@ -0,0 +1,102 @@
<div id="liveTvSettingsPage" data-role="page" class="page type-interior liveTvPage">
<div>
<div class="content-primary">
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">${HeaderDVR}</h2>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/live-tv/index.html">${Help}</a>
</div>
</div>
<form class="liveTvSettingsForm">
<div class="selectContainer">
<select is="emby-select" id="selectGuideDays" label="${LabelNumberOfGuideDays}">
<option value="">${Auto}</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
<div class="fieldDescription">${LabelNumberOfGuideDaysHelp}</div>
</div>
<div class="inputContainer">
<div style="display: flex; align-items: center;">
<div style="flex-grow:1;">
<input is="emby-input" id="txtRecordingPath" label="${LabelRecordingPath}" autocomplete="off" />
</div>
<button type="button" is="paper-icon-button-light" id="btnSelectRecordingPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
</div>
<div class="fieldDescription">${LabelRecordingPathHelp}</div>
</div>
<div class="inputContainer">
<div style="display: flex; align-items: center;">
<div style="flex-grow:1;">
<input is="emby-input" id="txtMovieRecordingPath" label="${LabelMovieRecordingPath}" autocomplete="off" />
</div>
<button type="button" is="paper-icon-button-light" id="btnSelectMovieRecordingPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
</div>
</div>
<div class="inputContainer">
<div style="display: flex; align-items: center;">
<div style="flex-grow:1;">
<input is="emby-input" id="txtSeriesRecordingPath" label="${LabelSeriesRecordingPath}" autocomplete="off" />
</div>
<button type="button" is="paper-icon-button-light" id="btnSelectSeriesRecordingPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
</div>
</div>
<div class="verticalSection">
<h2 class="sectionTitle">${HeaderDefaultRecordingSettings}</h2>
<div class="inputContainer">
<div style="display: flex; align-items: center;">
<div style="flex-grow: 1;">
<input is="emby-input" type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelStartWhenPossible}" />
</div>
<div class="fieldDescription" style="margin-left:.5em;font-size:90%;margin-top:1.3em;">
${MinutesBefore}
</div>
</div>
</div>
<div class="inputContainer">
<div style="display: flex; align-items: center;">
<div style="flex-grow: 1;">
<input is="emby-input" type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelStopWhenPossible}" />
</div>
<div class="fieldDescription" style="margin-left:.5em;font-size:90%;margin-top:1.3em;">
${MinutesAfter}
</div>
</div>
</div>
</div>
<div class="verticalSection">
<h2 class="sectionTitle">${HeaderRecordingPostProcessing}</h2>
<div class="inputContainer">
<div style="display: flex; align-items: center;">
<div style="flex-grow:1;">
<input is="emby-input" type="text" id="txtPostProcessor" label="${LabelPostProcessor}" />
</div>
<button type="button" is="paper-icon-button-light" id="btnSelectPostProcessorPath" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtPostProcessorArguments" label="${LabelPostProcessorArguments}" />
<div class="fieldDescription">${LabelPostProcessorArgumentsHelp}</div>
</div>
</div>
<br />
<div>
<button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button>
</div>
</form>
</div>
</div>
</div>

123
src/controllers/livetvsettings.js
View file

@ -1,65 +1,68 @@
define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-button'], function ($, loading, globalize) {
'use strict';
import $ from 'jQuery';
import loading from 'loading';
import globalize from 'globalize';
import 'emby-button';
function loadPage(page, config) {
$('.liveTvSettingsForm', page).show();
$('.noLiveTvServices', page).hide();
$('#selectGuideDays', page).val(config.GuideDays || '');
$('#txtPrePaddingMinutes', page).val(config.PrePaddingSeconds / 60);
$('#txtPostPaddingMinutes', page).val(config.PostPaddingSeconds / 60);
page.querySelector('#txtRecordingPath').value = config.RecordingPath || '';
page.querySelector('#txtMovieRecordingPath').value = config.MovieRecordingPath || '';
page.querySelector('#txtSeriesRecordingPath').value = config.SeriesRecordingPath || '';
page.querySelector('#txtPostProcessor').value = config.RecordingPostProcessor || '';
page.querySelector('#txtPostProcessorArguments').value = config.RecordingPostProcessorArguments || '';
loading.hide();
}
function loadPage(page, config) {
$('.liveTvSettingsForm', page).show();
$('.noLiveTvServices', page).hide();
$('#selectGuideDays', page).val(config.GuideDays || '');
$('#txtPrePaddingMinutes', page).val(config.PrePaddingSeconds / 60);
$('#txtPostPaddingMinutes', page).val(config.PostPaddingSeconds / 60);
page.querySelector('#txtRecordingPath').value = config.RecordingPath || '';
page.querySelector('#txtMovieRecordingPath').value = config.MovieRecordingPath || '';
page.querySelector('#txtSeriesRecordingPath').value = config.SeriesRecordingPath || '';
page.querySelector('#txtPostProcessor').value = config.RecordingPostProcessor || '';
page.querySelector('#txtPostProcessorArguments').value = config.RecordingPostProcessorArguments || '';
loading.hide();
}
function onSubmit() {
loading.show();
var form = this;
ApiClient.getNamedConfiguration('livetv').then(function (config) {
config.GuideDays = $('#selectGuideDays', form).val() || null;
var recordingPath = form.querySelector('#txtRecordingPath').value || null;
var movieRecordingPath = form.querySelector('#txtMovieRecordingPath').value || null;
var seriesRecordingPath = form.querySelector('#txtSeriesRecordingPath').value || null;
var recordingPathChanged = recordingPath != config.RecordingPath || movieRecordingPath != config.MovieRecordingPath || seriesRecordingPath != config.SeriesRecordingPath;
config.RecordingPath = recordingPath;
config.MovieRecordingPath = movieRecordingPath;
config.SeriesRecordingPath = seriesRecordingPath;
config.RecordingEncodingFormat = 'mkv';
config.PrePaddingSeconds = 60 * $('#txtPrePaddingMinutes', form).val();
config.PostPaddingSeconds = 60 * $('#txtPostPaddingMinutes', form).val();
config.RecordingPostProcessor = $('#txtPostProcessor', form).val();
config.RecordingPostProcessorArguments = $('#txtPostProcessorArguments', form).val();
ApiClient.updateNamedConfiguration('livetv', config).then(function () {
Dashboard.processServerConfigurationUpdateResult();
showSaveMessage(recordingPathChanged);
});
function onSubmit() {
loading.show();
const form = this;
ApiClient.getNamedConfiguration('livetv').then(function (config) {
config.GuideDays = $('#selectGuideDays', form).val() || null;
const recordingPath = form.querySelector('#txtRecordingPath').value || null;
const movieRecordingPath = form.querySelector('#txtMovieRecordingPath').value || null;
const seriesRecordingPath = form.querySelector('#txtSeriesRecordingPath').value || null;
const recordingPathChanged = recordingPath != config.RecordingPath || movieRecordingPath != config.MovieRecordingPath || seriesRecordingPath != config.SeriesRecordingPath;
config.RecordingPath = recordingPath;
config.MovieRecordingPath = movieRecordingPath;
config.SeriesRecordingPath = seriesRecordingPath;
config.RecordingEncodingFormat = 'mkv';
config.PrePaddingSeconds = 60 * $('#txtPrePaddingMinutes', form).val();
config.PostPaddingSeconds = 60 * $('#txtPostPaddingMinutes', form).val();
config.RecordingPostProcessor = $('#txtPostProcessor', form).val();
config.RecordingPostProcessorArguments = $('#txtPostProcessorArguments', form).val();
ApiClient.updateNamedConfiguration('livetv', config).then(function () {
Dashboard.processServerConfigurationUpdateResult();
showSaveMessage(recordingPathChanged);
});
return false;
});
return false;
}
function showSaveMessage(recordingPathChanged) {
let msg = '';
if (recordingPathChanged) {
msg += globalize.translate('MessageChangeRecordingPath');
}
function showSaveMessage(recordingPathChanged) {
var msg = '';
if (recordingPathChanged) {
msg += globalize.translate('RecordingPathChangeMessage');
}
if (msg) {
require(['alert'], function (alert) {
alert(msg);
});
}
if (msg) {
import('alert').then(({default: alert}) => {
alert(msg);
});
}
}
export default function () {
$(document).on('pageinit', '#liveTvSettingsPage', function () {
var page = this;
const page = this;
$('.liveTvSettingsForm').off('submit', onSubmit).on('submit', onSubmit);
$('#btnSelectRecordingPath', page).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser();
import('directorybrowser').then(({default: directoryBrowser}) => {
const picker = new directoryBrowser();
picker.show({
callback: function (path) {
if (path) {
@ -73,8 +76,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-button'], function
});
});
$('#btnSelectMovieRecordingPath', page).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser();
import('directorybrowser').then(({default: directoryBrowser}) => {
const picker = new directoryBrowser();
picker.show({
callback: function (path) {
if (path) {
@ -88,8 +91,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-button'], function
});
});
$('#btnSelectSeriesRecordingPath', page).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser();
import('directorybrowser').then(({default: directoryBrowser}) => {
const picker = new directoryBrowser();
picker.show({
callback: function (path) {
if (path) {
@ -103,8 +106,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-button'], function
});
});
$('#btnSelectPostProcessorPath', page).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser();
import('directorybrowser').then(({default: directoryBrowser}) => {
const picker = new directoryBrowser();
picker.show({
includeFiles: true,
callback: function (path) {
@ -119,9 +122,9 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-button'], function
});
}).on('pageshow', '#liveTvSettingsPage', function () {
loading.show();
var page = this;
const page = this;
ApiClient.getNamedConfiguration('livetv').then(function (config) {
loadPage(page, config);
});
});
});
}

41
src/controllers/livetvstatus.html Normal file
View file

@ -0,0 +1,41 @@
<div id="liveTvStatusPage" data-role="page" class="page type-interior liveTvSettingsPage">
<div>
<div class="content-primary">
<div class="verticalSection verticalSection-extrabottompadding">
<div class="verticalSection verticalSection-extrabottompadding">
<div class="sectionTitleContainer sectionTitleContainer-cards">
<h2 class="sectionTitle sectionTitle-cards">
<span>${HeaderTunerDevices}</span>
</h2>
<button is="emby-button" type="button" class="fab btnAddDevice submit sectionTitleButton" style="margin-left:1em;" title="${Add}">
<span class="material-icons add"></span>
</button>
<a is="emby-linkbutton" rel="noopener noreferrer" style="margin-left:2em!important;" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/live-tv/index.html">${Help}</a>
</div>
<div class="devicesList itemsContainer vertical-wrap" data-hovermenu="false" data-multiselect="false" style="margin-top: .5em;"></div>
</div>
</div>
<div class="readOnlyContent">
<div class="verticalSection">
<div class="sectionTitleContainer">
<h2 class="sectionTitle">${HeaderGuideProviders}</h2>
<button is="emby-button" type="button" class="fab btnAddProvider submit" style="margin-left:1em;" title="${Add}">
<span class="material-icons add"></span>
</button>
</div>
<div class="providerList">
</div>
<div>
<button is="emby-button" type="button" class="raised btnRefresh block button-cancel">
<span>${ButtonRefreshGuideData}</span>
</button>
<progress max="100" min="0" style="width: 100%;" class="refreshGuideProgress"></progress>
</div>
</div>
</div>
</div>
</div>
</div>

537
src/controllers/livetvstatus.js
View file

@ -1,294 +1,303 @@
define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layoutManager', 'loading', 'browser', 'listViewStyle', 'flexStyles', 'emby-itemscontainer', 'cardStyle', 'material-icons', 'emby-button'], function ($, globalize, taskButton, dom, libraryMenu, layoutManager, loading, browser) {
'use strict';
import $ from 'jQuery';
import globalize from 'globalize';
import taskButton from 'scripts/taskbutton';
import dom from 'dom';
import layoutManager from 'layoutManager';
import loading from 'loading';
import browser from 'browser';
import 'listViewStyle';
import 'flexStyles';
import 'emby-itemscontainer';
import 'cardStyle';
import 'material-icons';
import 'emby-button';
var enableFocusTransform = !browser.slow && !browser.edge;
const enableFocusTransform = !browser.slow && !browser.edge;
function getDeviceHtml(device) {
var padderClass;
var html = '';
var cssClass = 'card scalableCard';
var cardBoxCssClass = 'cardBox visualCardBox';
cssClass += ' backdropCard backdropCard-scalable';
padderClass = 'cardPadder-backdrop';
function getDeviceHtml(device) {
const padderClass = 'cardPadder-backdrop';
let cssClass = 'card scalableCard backdropCard backdropCard-scalable';
const cardBoxCssClass = 'cardBox visualCardBox';
let html = '';
// TODO move card creation code to Card component
// TODO move card creation code to Card component
if (layoutManager.tv) {
cssClass += ' show-focus';
if (layoutManager.tv) {
cssClass += ' show-focus';
if (enableFocusTransform) {
cssClass += ' show-animation';
}
if (enableFocusTransform) {
cssClass += ' show-animation';
}
html += '<div type="button" class="' + cssClass + '" data-id="' + device.Id + '">';
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 += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><span class="material-icons more_vert"></span></button>';
html += '<div class="cardText">' + (device.FriendlyName || getTunerName(device.Type)) + '</div>';
html += '<div class="cardText cardText-secondary">';
html += device.Url || '&nbsp;';
html += '</div>';
html += '</div>';
html += '</div>';
return html += '</div>';
}
function renderDevices(page, devices) {
var html = devices.map(getDeviceHtml).join('');
page.querySelector('.devicesList').innerHTML = html;
}
html += '<div type="button" class="' + cssClass + '" data-id="' + device.Id + '">';
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 += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><span class="material-icons more_vert"></span></button>';
html += '<div class="cardText">' + (device.FriendlyName || getTunerName(device.Type)) + '</div>';
html += '<div class="cardText cardText-secondary">';
html += device.Url || '&nbsp;';
html += '</div>';
html += '</div>';
html += '</div>';
return html += '</div>';
}
function deleteDevice(page, id) {
var message = globalize.translate('MessageConfirmDeleteTunerDevice');
function renderDevices(page, devices) {
page.querySelector('.devicesList').innerHTML = devices.map(getDeviceHtml).join('');
}
require(['confirm'], function (confirm) {
confirm(message, globalize.translate('HeaderDeleteDevice')).then(function () {
loading.show();
ApiClient.ajax({
type: 'DELETE',
url: ApiClient.getUrl('LiveTv/TunerHosts', {
Id: id
})
}).then(function () {
reload(page);
});
function deleteDevice(page, id) {
const message = globalize.translate('MessageConfirmDeleteTunerDevice');
import('confirm').then(({default: confirm}) => {
confirm(message, globalize.translate('HeaderDeleteDevice')).then(function () {
loading.show();
ApiClient.ajax({
type: 'DELETE',
url: ApiClient.getUrl('LiveTv/TunerHosts', {
Id: id
})
}).then(function () {
reload(page);
});
});
}
});
}
function reload(page) {
loading.show();
ApiClient.getNamedConfiguration('livetv').then(function (config) {
renderDevices(page, config.TunerHosts);
renderProviders(page, config.ListingProviders);
function reload(page) {
loading.show();
ApiClient.getNamedConfiguration('livetv').then(function (config) {
renderDevices(page, config.TunerHosts);
renderProviders(page, config.ListingProviders);
});
loading.hide();
}
function submitAddDeviceForm(page) {
page.querySelector('.dlgAddDevice').close();
loading.show();
ApiClient.ajax({
type: 'POST',
url: ApiClient.getUrl('LiveTv/TunerHosts'),
data: JSON.stringify({
Type: $('#selectTunerDeviceType', page).val(),
Url: $('#txtDevicePath', page).val()
}),
contentType: 'application/json'
}).then(function () {
reload(page);
}, function () {
Dashboard.alert({
message: globalize.translate('ErrorAddingTunerDevice')
});
loading.hide();
}
});
}
function submitAddDeviceForm(page) {
page.querySelector('.dlgAddDevice').close();
loading.show();
ApiClient.ajax({
type: 'POST',
url: ApiClient.getUrl('LiveTv/TunerHosts'),
data: JSON.stringify({
Type: $('#selectTunerDeviceType', page).val(),
Url: $('#txtDevicePath', page).val()
}),
contentType: 'application/json'
}).then(function () {
reload(page);
}, function () {
Dashboard.alert({
message: globalize.translate('ErrorAddingTunerDevice')
});
});
}
function renderProviders(page, providers) {
let html = '';
function renderProviders(page, providers) {
var html = '';
if (providers.length) {
html += '<div class="paperList">';
for (var i = 0, length = providers.length; i < length; i++) {
var provider = providers[i];
html += '<div class="listItem">';
html += '<span class="listItemIcon material-icons dvr"></span>';
html += '<div class="listItemBody two-line">';
html += '<a is="emby-linkbutton" style="display:block;padding:0;margin:0;text-align:left;" class="clearLink" href="' + getProviderConfigurationUrl(provider.Type) + '&id=' + provider.Id + '">';
html += '<h3 class="listItemBodyText">';
html += getProviderName(provider.Type);
html += '</h3>';
html += '<div class="listItemBodyText secondary">';
html += provider.Path || provider.ListingsId || '';
html += '</div>';
html += '</a>';
html += '</div>';
html += '<button type="button" is="paper-icon-button-light" class="btnOptions" data-id="' + provider.Id + '"><span class="material-icons listItemAside more_vert"></span></button>';
html += '</div>';
}
if (providers.length) {
html += '<div class="paperList">';
for (let i = 0, length = providers.length; i < length; i++) {
const provider = providers[i];
html += '<div class="listItem">';
html += '<span class="listItemIcon material-icons dvr"></span>';
html += '<div class="listItemBody two-line">';
html += '<a is="emby-linkbutton" style="display:block;padding:0;margin:0;text-align:left;" class="clearLink" href="' + getProviderConfigurationUrl(provider.Type) + '&id=' + provider.Id + '">';
html += '<h3 class="listItemBodyText">';
html += getProviderName(provider.Type);
html += '</h3>';
html += '<div class="listItemBodyText secondary">';
html += provider.Path || provider.ListingsId || '';
html += '</div>';
html += '</a>';
html += '</div>';
html += '<button type="button" is="paper-icon-button-light" class="btnOptions" data-id="' + provider.Id + '"><span class="material-icons listItemAside more_vert"></span></button>';
html += '</div>';
}
var elem = $('.providerList', page).html(html);
$('.btnOptions', elem).on('click', function () {
var id = this.getAttribute('data-id');
showProviderOptions(page, id, this);
});
html += '</div>';
}
function showProviderOptions(page, providerId, button) {
var items = [];
items.push({
name: globalize.translate('ButtonDelete'),
id: 'delete'
});
items.push({
name: globalize.translate('MapChannels'),
id: 'map'
});
const elem = $('.providerList', page).html(html);
$('.btnOptions', elem).on('click', function () {
const id = this.getAttribute('data-id');
showProviderOptions(page, id, this);
});
}
require(['actionsheet'], function (actionsheet) {
actionsheet.show({
items: items,
positionTo: button
}).then(function (id) {
switch (id) {
case 'delete':
deleteProvider(page, providerId);
break;
function showProviderOptions(page, providerId, button) {
const items = [];
items.push({
name: globalize.translate('Delete'),
id: 'delete'
});
items.push({
name: globalize.translate('MapChannels'),
id: 'map'
});
case 'map':
mapChannels(page, providerId);
}
});
});
}
import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({
items: items,
positionTo: button
}).then(function (id) {
switch (id) {
case 'delete':
deleteProvider(page, providerId);
break;
function mapChannels(page, providerId) {
require(['components/channelMapper/channelMapper'], function (channelmapper) {
new channelmapper({
serverId: ApiClient.serverInfo().Id,
providerId: providerId
}).show();
});
}
function deleteProvider(page, id) {
var message = globalize.translate('MessageConfirmDeleteGuideProvider');
require(['confirm'], function (confirm) {
confirm(message, globalize.translate('HeaderDeleteProvider')).then(function () {
loading.show();
ApiClient.ajax({
type: 'DELETE',
url: ApiClient.getUrl('LiveTv/ListingProviders', {
Id: id
})
}).then(function () {
reload(page);
}, function () {
reload(page);
});
});
});
}
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 getProviderName(providerId) {
switch (providerId = providerId.toLowerCase()) {
case 'schedulesdirect':
return 'Schedules Direct';
case 'xmltv':
return 'XMLTV';
default:
return 'Unknown';
}
}
function getProviderConfigurationUrl(providerId) {
switch (providerId = providerId.toLowerCase()) {
case 'xmltv':
return 'livetvguideprovider.html?type=xmltv';
case 'schedulesdirect':
return 'livetvguideprovider.html?type=schedulesdirect';
}
}
function addProvider(button) {
var menuItems = [];
menuItems.push({
name: 'Schedules Direct',
id: 'SchedulesDirect'
});
menuItems.push({
name: 'XMLTV',
id: 'xmltv'
});
require(['actionsheet'], function (actionsheet) {
actionsheet.show({
items: menuItems,
positionTo: button,
callback: function (id) {
Dashboard.navigate(getProviderConfigurationUrl(id));
}
});
});
}
function addDevice(button) {
Dashboard.navigate('livetvtuner.html');
}
function showDeviceMenu(button, tunerDeviceId) {
var items = [];
items.push({
name: globalize.translate('ButtonDelete'),
id: 'delete'
});
items.push({
name: globalize.translate('ButtonEdit'),
id: 'edit'
});
require(['actionsheet'], function (actionsheet) {
actionsheet.show({
items: items,
positionTo: button
}).then(function (id) {
switch (id) {
case 'delete':
deleteDevice(dom.parentWithClass(button, 'page'), tunerDeviceId);
break;
case 'edit':
Dashboard.navigate('livetvtuner.html?id=' + tunerDeviceId);
}
});
});
}
function onDevicesListClick(e) {
var card = dom.parentWithClass(e.target, 'card');
if (card) {
var id = card.getAttribute('data-id');
var btnCardOptions = dom.parentWithClass(e.target, 'btnCardOptions');
if (btnCardOptions) {
showDeviceMenu(btnCardOptions, id);
} else {
Dashboard.navigate('livetvtuner.html?id=' + id);
case 'map':
mapChannels(page, providerId);
}
});
});
}
function mapChannels(page, providerId) {
import('components/channelMapper/channelMapper').then(({default: channelMapper}) => {
new channelMapper({
serverId: ApiClient.serverInfo().Id,
providerId: providerId
}).show();
});
}
function deleteProvider(page, id) {
const message = globalize.translate('MessageConfirmDeleteGuideProvider');
import('confirm').then(({default: confirm}) => {
confirm(message, globalize.translate('HeaderDeleteProvider')).then(function () {
loading.show();
ApiClient.ajax({
type: 'DELETE',
url: ApiClient.getUrl('LiveTv/ListingProviders', {
Id: id
})
}).then(function () {
reload(page);
}, function () {
reload(page);
});
});
});
}
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 getProviderName(providerId) {
switch (providerId = providerId.toLowerCase()) {
case 'schedulesdirect':
return 'Schedules Direct';
case 'xmltv':
return 'XMLTV';
default:
return 'Unknown';
}
}
function getProviderConfigurationUrl(providerId) {
switch (providerId = providerId.toLowerCase()) {
case 'xmltv':
return 'livetvguideprovider.html?type=xmltv';
case 'schedulesdirect':
return 'livetvguideprovider.html?type=schedulesdirect';
}
}
function addProvider(button) {
const menuItems = [];
menuItems.push({
name: 'Schedules Direct',
id: 'SchedulesDirect'
});
menuItems.push({
name: 'XMLTV',
id: 'xmltv'
});
import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({
items: menuItems,
positionTo: button,
callback: function (id) {
Dashboard.navigate(getProviderConfigurationUrl(id));
}
});
});
}
function addDevice(button) {
Dashboard.navigate('livetvtuner.html');
}
function showDeviceMenu(button, tunerDeviceId) {
const items = [];
items.push({
name: globalize.translate('Delete'),
id: 'delete'
});
items.push({
name: globalize.translate('Edit'),
id: 'edit'
});
import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({
items: items,
positionTo: button
}).then(function (id) {
switch (id) {
case 'delete':
deleteDevice(dom.parentWithClass(button, 'page'), tunerDeviceId);
break;
case 'edit':
Dashboard.navigate('livetvtuner.html?id=' + tunerDeviceId);
}
});
});
}
function onDevicesListClick(e) {
const card = dom.parentWithClass(e.target, 'card');
if (card) {
const id = card.getAttribute('data-id');
const btnCardOptions = dom.parentWithClass(e.target, 'btnCardOptions');
if (btnCardOptions) {
showDeviceMenu(btnCardOptions, id);
} else {
Dashboard.navigate('livetvtuner.html?id=' + id);
}
}
}
export default function () {
$(document).on('pageinit', '#liveTvStatusPage', function () {
var page = this;
const page = this;
$('.btnAddDevice', page).on('click', function () {
addDevice(this);
});
@ -301,7 +310,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
});
page.querySelector('.devicesList').addEventListener('click', onDevicesListClick);
}).on('pageshow', '#liveTvStatusPage', function () {
var page = this;
const page = this;
reload(page);
taskButton({
mode: 'on',
@ -310,7 +319,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
button: page.querySelector('.btnRefresh')
});
}).on('pagehide', '#liveTvStatusPage', function () {
var page = this;
const page = this;
taskButton({
mode: 'off',
progressElem: page.querySelector('.refreshGuideProgress'),
@ -318,4 +327,4 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
button: page.querySelector('.btnRefresh')
});
});
});
}

79
src/controllers/livetvtuner.html Normal file
View file

@ -0,0 +1,79 @@
<div id="liveTvTunerPage" data-role="page" class="page type-interior liveTvSettingsPage">
<div>
<div class="content-primary">
<form>
<div class="verticalSection">
<div class="sectionTitleContainer flex align-items-center">
<h1 class="sectionTitle">${HeaderLiveTvTunerSetup}</h1>
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/live-tv/index.html">${Help}</a>
</div>
</div>
<div class="selectContainer">
<select is="emby-select" class="selectType" label="${LabelTunerType}" required="required"></select>
</div>
<button is="emby-button" type="button" class="raised button-cancel block btnDetect hide" style="margin-bottom:3em;">${HeaderDetectMyDevices}</button>
<div class="inputContainer fldFriendlyName hide">
<input is="emby-input" type="text" class="txtFriendlyName" label="${LabelFriendlyName}" autocomplete="off" />
</div>
<div class="inputContainer fldPath hide">
<div style="display: flex; align-items: center;">
<div style="flex-grow: 1;">
<input is="emby-input" type="text" class="txtDevicePath" label="${LabelFileOrUrl}" required="required" autocomplete="off" />
</div>
<button type="button" is="paper-icon-button-light" class="btnSelectPath hide emby-input-iconbutton"><span class="material-icons search"></span></button>
</div>
</div>
<div class="inputContainer fldUserAgent hide">
<input is="emby-input" type="text" class="txtUserAgent" label="${LabelUserAgent}" autocomplete="off" />
<div class="fieldDescription">${UserAgentHelp}</div>
</div>
<div class="inputContainer fldTunerCount hide">
<input is="emby-input" type="number" pattern="[0-9]*" required="required" min="0" step="1" class="txtTunerCount" label="${LabelSimultaneousConnectionLimit}" autocomplete="off" value="0" />
<div class="fieldDescription">${SimultaneousConnectionLimitHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription fldFavorites hide">
<label>
<input type="checkbox" is="emby-checkbox" class="chkFavorite" />
<span>${LabelImportOnlyFavoriteChannels}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${ImportFavoriteChannelsHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription fldTranscode hide">
<label>
<input type="checkbox" is="emby-checkbox" class="chkTranscode" />
<span>${LabelAllowHWTranscoding}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${AllowHWTranscodingHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription fldStreamLoop hide">
<label>
<input type="checkbox" is="emby-checkbox" class="chkStreamLoop" />
<span>${EnableStreamLooping}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${EnableStreamLoopingHelp}</div>
</div>
<p class="drmMessage hide">${DrmChannelsNotImported}</p>
<br />
<input type="hidden" class="fldDeviceId" />
<div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Save}</span>
</button>
<button is="emby-button" type="button" class="raised button-cancel block btnCancel" onclick="history.back();">
<span>${ButtonCancel}</span>
</button>
</div>
</form>
</div>
</div>
</div>

436
src/controllers/livetvtuner.js
View file

@ -1,232 +1,228 @@
define(['globalize', 'loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button', 'emby-checkbox', 'emby-select'], function (globalize, loading, libraryMenu, dom) {
'use strict';
import globalize from 'globalize';
import loading from 'loading';
import dom from 'dom';
import 'emby-input';
import 'emby-button';
import 'emby-checkbox';
import 'emby-select';
function isM3uVariant(type) {
return ['nextpvr'].indexOf(type || '') !== -1;
}
function isM3uVariant(type) {
return ['nextpvr'].indexOf(type || '') !== -1;
}
function fillTypes(view, currentId) {
return ApiClient.getJSON(ApiClient.getUrl('LiveTv/TunerHosts/Types')).then(function (types) {
var selectType = view.querySelector('.selectType');
var html = '';
html += types.map(function (tuner) {
return '<option value="' + tuner.Id + '">' + tuner.Name + '</option>';
}).join('');
html += '<option value="other">';
html += globalize.translate('TabOther');
html += '</option>';
selectType.innerHTML = html;
selectType.disabled = null != currentId;
selectType.value = '';
onTypeChange.call(selectType);
});
}
function reload(view, providerId) {
view.querySelector('.txtDevicePath').value = '';
view.querySelector('.chkFavorite').checked = false;
view.querySelector('.txtDevicePath').value = '';
if (providerId) {
ApiClient.getNamedConfiguration('livetv').then(function (config) {
var info = config.TunerHosts.filter(function (i) {
return i.Id === providerId;
})[0];
fillTunerHostInfo(view, info);
});
}
}
function fillTunerHostInfo(view, info) {
var selectType = view.querySelector('.selectType');
var type = info.Type || '';
if (info.Source && isM3uVariant(info.Source)) {
type = info.Source;
}
selectType.value = type;
function fillTypes(view, currentId) {
return ApiClient.getJSON(ApiClient.getUrl('LiveTv/TunerHosts/Types')).then(function (types) {
const selectType = view.querySelector('.selectType');
let html = '';
html += types.map(function (tuner) {
return '<option value="' + tuner.Id + '">' + tuner.Name + '</option>';
}).join('');
html += '<option value="other">';
html += globalize.translate('TabOther');
html += '</option>';
selectType.innerHTML = html;
selectType.disabled = currentId != null;
selectType.value = '';
onTypeChange.call(selectType);
view.querySelector('.txtDevicePath').value = info.Url || '';
view.querySelector('.txtFriendlyName').value = info.FriendlyName || '';
view.querySelector('.txtUserAgent').value = info.UserAgent || '';
view.querySelector('.fldDeviceId').value = info.DeviceId || '';
view.querySelector('.chkFavorite').checked = info.ImportFavoritesOnly;
view.querySelector('.chkTranscode').checked = info.AllowHWTranscoding;
view.querySelector('.chkStreamLoop').checked = info.EnableStreamLooping;
view.querySelector('.txtTunerCount').value = info.TunerCount || '0';
}
});
}
function submitForm(page) {
loading.show();
var info = {
Type: page.querySelector('.selectType').value,
Url: page.querySelector('.txtDevicePath').value || null,
UserAgent: page.querySelector('.txtUserAgent').value || null,
FriendlyName: page.querySelector('.txtFriendlyName').value || null,
DeviceId: page.querySelector('.fldDeviceId').value || null,
TunerCount: page.querySelector('.txtTunerCount').value || 0,
ImportFavoritesOnly: page.querySelector('.chkFavorite').checked,
AllowHWTranscoding: page.querySelector('.chkTranscode').checked,
EnableStreamLooping: page.querySelector('.chkStreamLoop').checked
};
function reload(view, providerId) {
view.querySelector('.txtDevicePath').value = '';
view.querySelector('.chkFavorite').checked = false;
view.querySelector('.txtDevicePath').value = '';
if (isM3uVariant(info.Type)) {
info.Source = info.Type;
info.Type = 'm3u';
}
var id = getParameterByName('id');
if (id) {
info.Id = id;
}
ApiClient.ajax({
type: 'POST',
url: ApiClient.getUrl('LiveTv/TunerHosts'),
data: JSON.stringify(info),
contentType: 'application/json'
}).then(function (result) {
Dashboard.processServerConfigurationUpdateResult();
Dashboard.navigate('livetvstatus.html');
}, function () {
loading.hide();
Dashboard.alert({
message: globalize.translate('ErrorSavingTvProvider')
});
if (providerId) {
ApiClient.getNamedConfiguration('livetv').then(function (config) {
const info = config.TunerHosts.filter(function (i) {
return i.Id === providerId;
})[0];
fillTunerHostInfo(view, info);
});
}
}
function getRequirePromise(deps) {
return new Promise(function (resolve, reject) {
require(deps, resolve);
});
function fillTunerHostInfo(view, info) {
const selectType = view.querySelector('.selectType');
let type = info.Type || '';
if (info.Source && isM3uVariant(info.Source)) {
type = info.Source;
}
function getDetectedDevice() {
return getRequirePromise(['tunerPicker']).then(function (tunerPicker) {
return new tunerPicker().show({
serverId: ApiClient.serverId()
});
});
}
selectType.value = type;
onTypeChange.call(selectType);
view.querySelector('.txtDevicePath').value = info.Url || '';
view.querySelector('.txtFriendlyName').value = info.FriendlyName || '';
view.querySelector('.txtUserAgent').value = info.UserAgent || '';
view.querySelector('.fldDeviceId').value = info.DeviceId || '';
view.querySelector('.chkFavorite').checked = info.ImportFavoritesOnly;
view.querySelector('.chkTranscode').checked = info.AllowHWTranscoding;
view.querySelector('.chkStreamLoop').checked = info.EnableStreamLooping;
view.querySelector('.txtTunerCount').value = info.TunerCount || '0';
}
function onTypeChange() {
var value = this.value;
var view = dom.parentWithClass(this, 'page');
var mayIncludeUnsupportedDrmChannels = 'hdhomerun' === value;
var supportsTranscoding = 'hdhomerun' === value;
var supportsFavorites = 'hdhomerun' === value;
var supportsTunerIpAddress = 'hdhomerun' === value;
var supportsTunerFileOrUrl = 'm3u' === value;
var supportsStreamLooping = 'm3u' === value;
var supportsTunerCount = 'm3u' === value;
var supportsUserAgent = 'm3u' === value;
var suppportsSubmit = 'other' !== value;
var supportsSelectablePath = supportsTunerFileOrUrl;
var txtDevicePath = view.querySelector('.txtDevicePath');
if (supportsTunerIpAddress) {
txtDevicePath.label(globalize.translate('LabelTunerIpAddress'));
view.querySelector('.fldPath').classList.remove('hide');
} else if (supportsTunerFileOrUrl) {
txtDevicePath.label(globalize.translate('LabelFileOrUrl'));
view.querySelector('.fldPath').classList.remove('hide');
} else {
view.querySelector('.fldPath').classList.add('hide');
}
if (supportsSelectablePath) {
view.querySelector('.btnSelectPath').classList.remove('hide');
view.querySelector('.txtDevicePath').setAttribute('required', 'required');
} else {
view.querySelector('.btnSelectPath').classList.add('hide');
view.querySelector('.txtDevicePath').removeAttribute('required');
}
if (supportsUserAgent) {
view.querySelector('.fldUserAgent').classList.remove('hide');
} else {
view.querySelector('.fldUserAgent').classList.add('hide');
}
if (supportsFavorites) {
view.querySelector('.fldFavorites').classList.remove('hide');
} else {
view.querySelector('.fldFavorites').classList.add('hide');
}
if (supportsTranscoding) {
view.querySelector('.fldTranscode').classList.remove('hide');
} else {
view.querySelector('.fldTranscode').classList.add('hide');
}
if (supportsStreamLooping) {
view.querySelector('.fldStreamLoop').classList.remove('hide');
} else {
view.querySelector('.fldStreamLoop').classList.add('hide');
}
if (supportsTunerCount) {
view.querySelector('.fldTunerCount').classList.remove('hide');
view.querySelector('.txtTunerCount').setAttribute('required', 'required');
} else {
view.querySelector('.fldTunerCount').classList.add('hide');
view.querySelector('.txtTunerCount').removeAttribute('required');
}
if (mayIncludeUnsupportedDrmChannels) {
view.querySelector('.drmMessage').classList.remove('hide');
} else {
view.querySelector('.drmMessage').classList.add('hide');
}
if (suppportsSubmit) {
view.querySelector('.button-submit').classList.remove('hide');
} else {
view.querySelector('.button-submit').classList.add('hide');
}
}
return function (view, params) {
if (!params.id) {
view.querySelector('.btnDetect').classList.remove('hide');
}
view.addEventListener('viewshow', function () {
var currentId = params.id;
fillTypes(view, currentId).then(function () {
reload(view, currentId);
});
});
view.querySelector('form').addEventListener('submit', function (e) {
submitForm(view);
e.preventDefault();
e.stopPropagation();
return false;
});
view.querySelector('.selectType').addEventListener('change', onTypeChange);
view.querySelector('.btnDetect').addEventListener('click', function () {
getDetectedDevice().then(function (info) {
fillTunerHostInfo(view, info);
});
});
view.querySelector('.btnSelectPath').addEventListener('click', function () {
require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser();
picker.show({
includeFiles: true,
callback: function (path) {
if (path) {
view.querySelector('.txtDevicePath').value = path;
}
picker.close();
}
});
});
});
function submitForm(page) {
loading.show();
const info = {
Type: page.querySelector('.selectType').value,
Url: page.querySelector('.txtDevicePath').value || null,
UserAgent: page.querySelector('.txtUserAgent').value || null,
FriendlyName: page.querySelector('.txtFriendlyName').value || null,
DeviceId: page.querySelector('.fldDeviceId').value || null,
TunerCount: page.querySelector('.txtTunerCount').value || 0,
ImportFavoritesOnly: page.querySelector('.chkFavorite').checked,
AllowHWTranscoding: page.querySelector('.chkTranscode').checked,
EnableStreamLooping: page.querySelector('.chkStreamLoop').checked
};
});
if (isM3uVariant(info.Type)) {
info.Source = info.Type;
info.Type = 'm3u';
}
if (getParameterByName('id')) {
info.Id = getParameterByName('id');
}
ApiClient.ajax({
type: 'POST',
url: ApiClient.getUrl('LiveTv/TunerHosts'),
data: JSON.stringify(info),
contentType: 'application/json'
}).then(function (result) {
Dashboard.processServerConfigurationUpdateResult();
Dashboard.navigate('livetvstatus.html');
}, function () {
loading.hide();
Dashboard.alert({
message: globalize.translate('ErrorSavingTvProvider')
});
});
}
function getDetectedDevice() {
return import('tunerPicker').then(({default: tunerPicker}) => {
return new tunerPicker().show({
serverId: ApiClient.serverId()
});
});
}
function onTypeChange() {
const value = this.value;
const view = dom.parentWithClass(this, 'page');
const mayIncludeUnsupportedDrmChannels = value === 'hdhomerun';
const supportsTranscoding = value === 'hdhomerun';
const supportsFavorites = value === 'hdhomerun';
const supportsTunerIpAddress = value === 'hdhomerun';
const supportsTunerFileOrUrl = value === 'm3u';
const supportsStreamLooping = value === 'm3u';
const supportsTunerCount = value === 'm3u';
const supportsUserAgent = value === 'm3u';
const suppportsSubmit = value !== 'other';
const supportsSelectablePath = supportsTunerFileOrUrl;
const txtDevicePath = view.querySelector('.txtDevicePath');
if (supportsTunerIpAddress) {
txtDevicePath.label(globalize.translate('LabelTunerIpAddress'));
view.querySelector('.fldPath').classList.remove('hide');
} else if (supportsTunerFileOrUrl) {
txtDevicePath.label(globalize.translate('LabelFileOrUrl'));
view.querySelector('.fldPath').classList.remove('hide');
} else {
view.querySelector('.fldPath').classList.add('hide');
}
if (supportsSelectablePath) {
view.querySelector('.btnSelectPath').classList.remove('hide');
view.querySelector('.txtDevicePath').setAttribute('required', 'required');
} else {
view.querySelector('.btnSelectPath').classList.add('hide');
view.querySelector('.txtDevicePath').removeAttribute('required');
}
if (supportsUserAgent) {
view.querySelector('.fldUserAgent').classList.remove('hide');
} else {
view.querySelector('.fldUserAgent').classList.add('hide');
}
if (supportsFavorites) {
view.querySelector('.fldFavorites').classList.remove('hide');
} else {
view.querySelector('.fldFavorites').classList.add('hide');
}
if (supportsTranscoding) {
view.querySelector('.fldTranscode').classList.remove('hide');
} else {
view.querySelector('.fldTranscode').classList.add('hide');
}
if (supportsStreamLooping) {
view.querySelector('.fldStreamLoop').classList.remove('hide');
} else {
view.querySelector('.fldStreamLoop').classList.add('hide');
}
if (supportsTunerCount) {
view.querySelector('.fldTunerCount').classList.remove('hide');
view.querySelector('.txtTunerCount').setAttribute('required', 'required');
} else {
view.querySelector('.fldTunerCount').classList.add('hide');
view.querySelector('.txtTunerCount').removeAttribute('required');
}
if (mayIncludeUnsupportedDrmChannels) {
view.querySelector('.drmMessage').classList.remove('hide');
} else {
view.querySelector('.drmMessage').classList.add('hide');
}
if (suppportsSubmit) {
view.querySelector('.button-submit').classList.remove('hide');
} else {
view.querySelector('.button-submit').classList.add('hide');
}
}
export default function (view, params) {
if (!params.id) {
view.querySelector('.btnDetect').classList.remove('hide');
}
view.addEventListener('viewshow', function () {
const currentId = params.id;
fillTypes(view, currentId).then(function () {
reload(view, currentId);
});
});
view.querySelector('form').addEventListener('submit', function (e) {
submitForm(view);
e.preventDefault();
e.stopPropagation();
return false;
});
view.querySelector('.selectType').addEventListener('change', onTypeChange);
view.querySelector('.btnDetect').addEventListener('click', function () {
getDetectedDevice().then(function (info) {
fillTunerHostInfo(view, info);
});
});
view.querySelector('.btnSelectPath').addEventListener('click', function () {
import('directorybrowser').then(({default: directorybrowser}) => {
const picker = new directorybrowser();
picker.show({
includeFiles: true,
callback: function (path) {
if (path) {
view.querySelector('.txtDevicePath').value = path;
}
picker.close();
}
});
});
});
}

106
src/controllers/movies/moviecollections.js
View file

@ -1,10 +1,18 @@
define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings, globalize) {
'use strict';
import loading from 'loading';
import libraryBrowser from 'libraryBrowser';
import imageLoader from 'imageLoader';
import listView from 'listView';
import cardBuilder from 'cardBuilder';
import * as userSettings from 'userSettings';
import globalize from 'globalize';
import 'emby-itemscontainer';
return function (view, params, tabContent) {
/* eslint-disable indent */
export default function (view, params, tabContent) {
function getPageData(context) {
var key = getSavedQueryKey(context);
var pageData = data[key];
const key = getSavedQueryKey(context);
let pageData = data[key];
if (!pageData) {
pageData = data[key] = {
@ -44,11 +52,11 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
return context.savedQueryKey;
}
function onViewStyleChange() {
var viewStyle = self.getCurrentViewStyle();
var itemsContainer = tabContent.querySelector('.itemsContainer');
const onViewStyleChange = () => {
const viewStyle = this.getCurrentViewStyle();
const itemsContainer = tabContent.querySelector('.itemsContainer');
if ('List' == viewStyle) {
if (viewStyle == 'List') {
itemsContainer.classList.add('vertical-list');
itemsContainer.classList.remove('vertical-wrap');
} else {
@ -57,13 +65,13 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
}
itemsContainer.innerHTML = '';
}
};
function reloadItems(page) {
const reloadItems = (page) => {
loading.show();
isLoading = true;
var query = getQuery(page);
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
const query = getQuery(page);
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
function onNextPageClick() {
if (isLoading) {
return;
@ -87,8 +95,8 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
}
window.scrollTo(0, 0);
var html;
var pagingHtml = libraryBrowser.getQueryPagingHtml({
let html;
const pagingHtml = libraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex,
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
@ -98,7 +106,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
sortButton: false,
filterButton: false
});
var viewStyle = self.getCurrentViewStyle();
const viewStyle = this.getCurrentViewStyle();
if (viewStyle == 'Thumb') {
html = cardBuilder.getCardsHtml({
items: result.Items,
@ -152,54 +160,57 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
showTitle: true
});
}
var i;
var length;
var elems = tabContent.querySelectorAll('.paging');
for (i = 0, length = elems.length; i < length; i++) {
elems[i].innerHTML = pagingHtml;
let elems = tabContent.querySelectorAll('.paging');
for (const elem of elems) {
elem.innerHTML = pagingHtml;
}
elems = tabContent.querySelectorAll('.btnNextPage');
for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onNextPageClick);
for (const elem of elems) {
elem.addEventListener('click', onNextPageClick);
}
elems = tabContent.querySelectorAll('.btnPreviousPage');
for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onPreviousPageClick);
for (const elem of elems) {
elem.addEventListener('click', onPreviousPageClick);
}
if (!result.Items.length) {
html = '<p style="text-align:center;">' + globalize.translate('MessageNoCollectionsAvailable') + '</p>';
html = '';
html += '<div class="noItemsMessage centerMessage">';
html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
html += '<p>' + globalize.translate('MessageNoCollectionsAvailable') + '</p>';
html += '</div>';
}
var itemsContainer = tabContent.querySelector('.itemsContainer');
const itemsContainer = tabContent.querySelector('.itemsContainer');
itemsContainer.innerHTML = html;
imageLoader.lazyChildren(itemsContainer);
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
loading.hide();
isLoading = false;
require(['autoFocuser'], function (autoFocuser) {
import('autoFocuser').then(({default: autoFocuser}) => {
autoFocuser.autoFocus(page);
});
});
}
};
var self = this;
var data = {};
var isLoading = false;
const data = {};
let isLoading = false;
self.getCurrentViewStyle = function () {
this.getCurrentViewStyle = function () {
return getPageData(tabContent).view;
};
function initPage(tabContent) {
const initPage = (tabContent) => {
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
libraryBrowser.showSortMenu({
items: [{
name: globalize.translate('OptionNameSort'),
name: globalize.translate('Name'),
id: 'SortName'
}, {
name: globalize.translate('OptionImdbRating'),
@ -222,36 +233,37 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
button: e.target
});
});
var btnSelectView = tabContent.querySelector('.btnSelectView');
const btnSelectView = tabContent.querySelector('.btnSelectView');
btnSelectView.addEventListener('click', function (e) {
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
});
btnSelectView.addEventListener('layoutchange', function (e) {
var viewStyle = e.detail.viewStyle;
const viewStyle = e.detail.viewStyle;
getPageData(tabContent).view = viewStyle;
libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
getQuery(tabContent).StartIndex = 0;
onViewStyleChange();
reloadItems(tabContent);
});
tabContent.querySelector('.btnNewCollection').addEventListener('click', function () {
require(['collectionEditor'], function (collectionEditor) {
var serverId = ApiClient.serverInfo().Id;
new collectionEditor().show({
tabContent.querySelector('.btnNewCollection').addEventListener('click', () => {
import('collectionEditor').then(({default: collectionEditor}) => {
const serverId = ApiClient.serverInfo().Id;
new collectionEditor.showEditor({
items: [],
serverId: serverId
});
});
});
}
};
initPage(tabContent);
onViewStyleChange();
self.renderTab = function () {
this.renderTab = function () {
reloadItems(tabContent);
};
self.destroy = function () {};
};
});
this.destroy = function () {};
}
/* eslint-enable indent */

91
src/controllers/movies/moviegenres.js
View file

@ -1,10 +1,18 @@
define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost', 'globalize', 'appRouter', 'dom', 'emby-button'], function (layoutManager, loading, libraryBrowser, cardBuilder, lazyLoader, appHost, globalize, appRouter, dom) {
'use strict';
import layoutManager from 'layoutManager';
import loading from 'loading';
import libraryBrowser from 'libraryBrowser';
import cardBuilder from 'cardBuilder';
import lazyLoader from 'lazyLoader';
import globalize from 'globalize';
import appRouter from 'appRouter';
import 'emby-button';
return function (view, params, tabContent) {
/* eslint-disable indent */
export default function (view, params, tabContent) {
function getPageData() {
var key = getSavedQueryKey();
var pageData = data[key];
const key = getSavedQueryKey();
let pageData = data[key];
if (!pageData) {
pageData = data[key] = {
@ -34,7 +42,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
function getPromise() {
loading.show();
var query = getQuery();
const query = getQuery();
return ApiClient.getGenres(ApiClient.getCurrentUserId(), query);
}
@ -50,18 +58,18 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
return enableScrollX() ? 'overflowPortrait' : 'portrait';
}
function fillItemsContainer(entry) {
var elem = entry.target;
var id = elem.getAttribute('data-id');
var viewStyle = self.getCurrentViewStyle();
var limit = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 5 : 9;
const fillItemsContainer = (entry) => {
const elem = entry.target;
const id = elem.getAttribute('data-id');
const viewStyle = this.getCurrentViewStyle();
let limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;
if (enableScrollX()) {
limit = 10;
}
var enableImageTypes = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 'Primary,Backdrop,Thumb' : 'Primary';
var query = {
const enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary';
const query = {
SortBy: 'SortName',
SortOrder: 'Ascending',
IncludeItemTypes: 'Movie',
@ -75,8 +83,6 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
ParentId: params.topParentId
};
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
var supportsImageAnalysis = appHost.supports('imageanalysis');
if (viewStyle == 'Thumb') {
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
@ -125,17 +131,17 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
tabContent.querySelector('.btnMoreFromGenre' + id + ' .material-icons').classList.remove('hide');
}
});
}
};
function reloadItems(context, promise) {
var query = getQuery();
const query = getQuery();
promise.then(function (result) {
var elem = context.querySelector('#items');
var html = '';
var items = result.Items;
const elem = context.querySelector('#items');
let html = '';
const items = result.Items;
for (var i = 0, length = items.length; i < length; i++) {
var item = items[i];
for (let i = 0, length = items.length; i < length; i++) {
const item = items[i];
html += '<div class="verticalSection">';
html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
@ -150,7 +156,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
html += '</a>';
html += '</div>';
if (enableScrollX()) {
var scrollXClass = 'scrollX hiddenScrollX';
let scrollXClass = 'scrollX hiddenScrollX';
if (layoutManager.tv) {
scrollXClass += 'smoothScrollX padded-top-focusscale padded-bottom-focusscale';
@ -165,6 +171,15 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
html += '</div>';
}
if (!result.Items.length) {
html = '';
html += '<div class="noItemsMessage centerMessage">';
html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
html += '<p>' + globalize.translate('MessageNoGenresAvailable') + '</p>';
html += '</div>';
}
elem.innerHTML = html;
lazyLoader.lazyChildren(elem, fillItemsContainer);
libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
@ -172,37 +187,37 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
});
}
function fullyReload() {
self.preRender();
self.renderTab();
}
const fullyReload = () => {
this.preRender();
this.renderTab();
};
var self = this;
var data = {};
const data = {};
self.getViewStyles = function () {
this.getViewStyles = function () {
return 'Poster,PosterCard,Thumb,ThumbCard'.split(',');
};
self.getCurrentViewStyle = function () {
this.getCurrentViewStyle = function () {
return getPageData().view;
};
self.setCurrentViewStyle = function (viewStyle) {
this.setCurrentViewStyle = function (viewStyle) {
getPageData().view = viewStyle;
libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
fullyReload();
};
self.enableViewSelection = true;
var promise;
this.enableViewSelection = true;
let promise;
self.preRender = function () {
this.preRender = function () {
promise = getPromise();
};
self.renderTab = function () {
this.renderTab = function () {
reloadItems(tabContent, promise);
};
};
});
}
/* eslint-enable indent */

93
src/controllers/movies/movies.html Normal file
View file

@ -0,0 +1,93 @@
<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs" data-backdroptype="movie">
<div class="pageTabContent" data-index="0">
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div>
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
<button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list"></span></button>
</div>
<div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
</div>
<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
</div>
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div>
</div>
</div>
<div class="pageTabContent" data-index="1">
<div id="resumableSection" class="verticalSection hide">
<div class="sectionTitleContainer sectionTitleContainer-cards">
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderContinueWatching}</h2>
</div>
<div is="emby-itemscontainer" id="resumableItems" class="itemsContainer padded-left padded-right">
</div>
</div>
<div class="verticalSection">
<div class="sectionTitleContainer sectionTitleContainer-cards">
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderLatestMovies}</h2>
</div>
<div is="emby-itemscontainer" id="recentlyAddedItems" class="itemsContainer padded-left padded-right">
</div>
</div>
<div class="recommendations">
</div>
<div class="noItemsMessage hide padded-left padded-right">
<br />
<p>${MessageNoMovieSuggestionsAvailable}</p>
</div>
</div>
<div class="pageTabContent" data-index="2">
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div>
<button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list"></span></button>
</div>
<div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical">
</div>
<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">
</div>
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div>
</div>
</div>
<div class="pageTabContent" data-index="3">
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div>
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
</div>
<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
</div>
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div>
</div>
</div>
<div class="pageTabContent" data-index="4">
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div>
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
<button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>
<button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize"><span class="material-icons add"></span></button>
</div>
<div is="emby-itemscontainer" class="itemsContainer vertical-wrap centered padded-left padded-right" style="text-align:center;">
</div>
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div>
</div>
</div>
<div class="pageTabContent" data-index="5">
<div id="items"></div>
</div>
<div class="pageTabContent" data-index="6">
</div>
</div>

118
src/controllers/movies/movies.js
View file

@ -1,9 +1,18 @@
define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, alphaPicker, listView, cardBuilder, globalize) {
'use strict';
import loading from 'loading';
import * as userSettings from 'userSettings';
import events from 'events';
import libraryBrowser from 'libraryBrowser';
import AlphaPicker from 'alphaPicker';
import listView from 'listView';
import cardBuilder from 'cardBuilder';
import globalize from 'globalize';
import 'emby-itemscontainer';
return function (view, params, tabContent, options) {
function onViewStyleChange() {
if (self.getCurrentViewStyle() == 'List') {
/* eslint-disable indent */
export default function (view, params, tabContent, options) {
const onViewStyleChange = () => {
if (this.getCurrentViewStyle() == 'List') {
itemsContainer.classList.add('vertical-list');
itemsContainer.classList.remove('vertical-wrap');
} else {
@ -12,13 +21,13 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
}
itemsContainer.innerHTML = '';
}
};
function updateFilterControls() {
if (self.alphaPicker) {
self.alphaPicker.value(query.NameStartsWithOrGreater);
const updateFilterControls = () => {
if (this.alphaPicker) {
this.alphaPicker.value(query.NameStartsWithOrGreater);
}
}
};
function fetchData() {
isLoading = true;
@ -51,7 +60,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
window.scrollTo(0, 0);
updateFilterControls();
var pagingHtml = libraryBrowser.getQueryPagingHtml({
const pagingHtml = libraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex,
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
@ -61,35 +70,30 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
sortButton: false,
filterButton: false
});
var i;
var length;
var elems = tabContent.querySelectorAll('.paging');
for (i = 0, length = elems.length; i < length; i++) {
elems[i].innerHTML = pagingHtml;
for (const elem of tabContent.querySelectorAll('.paging')) {
elem.innerHTML = pagingHtml;
}
elems = tabContent.querySelectorAll('.btnNextPage');
for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onNextPageClick);
for (const elem of tabContent.querySelectorAll('.btnNextPage')) {
elem.addEventListener('click', onNextPageClick);
}
elems = tabContent.querySelectorAll('.btnPreviousPage');
for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onPreviousPageClick);
for (const elem of tabContent.querySelectorAll('.btnPreviousPage')) {
elem.addEventListener('click', onPreviousPageClick);
}
isLoading = false;
loading.hide();
require(['autoFocuser'], function (autoFocuser) {
import('autoFocuser').then(({default: autoFocuser}) => {
autoFocuser.autoFocus(tabContent);
});
}
function getItemsHtml(items) {
var html;
var viewStyle = self.getCurrentViewStyle();
const getItemsHtml = (items) => {
let html;
const viewStyle = this.getCurrentViewStyle();
if (viewStyle == 'Thumb') {
html = cardBuilder.getCardsHtml({
@ -153,22 +157,22 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
}
return html;
}
};
function initPage(tabContent) {
const initPage = (tabContent) => {
itemsContainer.fetchData = fetchData;
itemsContainer.getItemsHtml = getItemsHtml;
itemsContainer.afterRefresh = afterRefresh;
var alphaPickerElement = tabContent.querySelector('.alphaPicker');
let alphaPickerElement = tabContent.querySelector('.alphaPicker');
if (alphaPickerElement) {
alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
var newValue = e.detail.value;
let newValue = e.detail.value;
query.NameStartsWithOrGreater = newValue;
query.StartIndex = 0;
itemsContainer.refreshItems();
});
self.alphaPicker = new alphaPicker({
this.alphaPicker = new AlphaPicker({
element: alphaPickerElement,
valueChangeEvent: 'click'
});
@ -178,20 +182,20 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
itemsContainer.classList.add('padded-right-withalphapicker');
}
var btnFilter = tabContent.querySelector('.btnFilter');
const btnFilter = tabContent.querySelector('.btnFilter');
if (btnFilter) {
btnFilter.addEventListener('click', function () {
self.showFilterMenu();
btnFilter.addEventListener('click', () => {
this.showFilterMenu();
});
}
var btnSort = tabContent.querySelector('.btnSort');
const btnSort = tabContent.querySelector('.btnSort');
if (btnSort) {
btnSort.addEventListener('click', function (e) {
libraryBrowser.showSortMenu({
items: [{
name: globalize.translate('OptionNameSort'),
name: globalize.translate('Name'),
id: 'SortName,ProductionYear'
}, {
name: globalize.translate('OptionImdbRating'),
@ -215,7 +219,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
name: globalize.translate('OptionReleaseDate'),
id: 'PremiereDate,SortName,ProductionYear'
}, {
name: globalize.translate('OptionRuntime'),
name: globalize.translate('Runtime'),
id: 'Runtime,SortName,ProductionYear'
}],
callback: function () {
@ -228,24 +232,23 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
});
});
}
var btnSelectView = tabContent.querySelector('.btnSelectView');
const btnSelectView = tabContent.querySelector('.btnSelectView');
btnSelectView.addEventListener('click', function (e) {
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle, 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
});
btnSelectView.addEventListener('layoutchange', function (e) {
var viewStyle = e.detail.viewStyle;
let viewStyle = e.detail.viewStyle;
userSettings.set(savedViewKey, viewStyle);
query.StartIndex = 0;
onViewStyleChange();
itemsContainer.refreshItems();
});
}
};
var self = this;
var itemsContainer = tabContent.querySelector('.itemsContainer');
var savedQueryKey = params.topParentId + '-' + options.mode;
var savedViewKey = savedQueryKey + '-view';
var query = {
let itemsContainer = tabContent.querySelector('.itemsContainer');
const savedQueryKey = params.topParentId + '-' + options.mode;
const savedViewKey = savedQueryKey + '-view';
let query = {
SortBy: 'SortName,ProductionYear',
SortOrder: 'Ascending',
IncludeItemTypes: 'Movie',
@ -261,7 +264,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
query['Limit'] = userSettings.libraryPageSize();
}
var isLoading = false;
let isLoading = false;
if (options.mode === 'favorites') {
query.IsFavorite = true;
@ -269,14 +272,14 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
query = userSettings.loadQuerySettings(savedQueryKey, query);
self.showFilterMenu = function () {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
var filterDialog = new filterDialogFactory({
this.showFilterMenu = function () {
import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
let filterDialog = new filterDialogFactory({
query: query,
mode: 'movies',
serverId: ApiClient.serverId()
});
events.on(filterDialog, 'filterchange', function () {
events.on(filterDialog, 'filterchange', () => {
query.StartIndex = 0;
itemsContainer.refreshItems();
});
@ -284,22 +287,23 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
});
};
self.getCurrentViewStyle = function () {
this.getCurrentViewStyle = function () {
return userSettings.get(savedViewKey) || 'Poster';
};
self.initTab = function () {
this.initTab = function () {
initPage(tabContent);
onViewStyleChange();
};
self.renderTab = function () {
this.renderTab = function () {
itemsContainer.refreshItems();
updateFilterControls();
};
self.destroy = function () {
this.destroy = function () {
itemsContainer = null;
};
};
});
}
/* eslint-enable indent */

158
src/controllers/movies/moviesrecommended.js
View file

@ -1,5 +1,20 @@
define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu', 'mainTabsManager', 'cardBuilder', 'dom', 'imageLoader', 'playbackManager', 'globalize', 'emby-scroller', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager, globalize) {
'use strict';
import events from 'events';
import layoutManager from 'layoutManager';
import inputManager from 'inputManager';
import * as userSettings from 'userSettings';
import libraryMenu from 'libraryMenu';
import * as mainTabsManager from 'mainTabsManager';
import cardBuilder from 'cardBuilder';
import dom from 'dom';
import imageLoader from 'imageLoader';
import playbackManager from 'playbackManager';
import globalize from 'globalize';
import 'emby-scroller';
import 'emby-itemscontainer';
import 'emby-tabs';
import 'emby-button';
/* eslint-disable indent */
function enableScrollX() {
return !layoutManager.desktop;
@ -14,7 +29,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
}
function loadLatest(page, userId, parentId) {
var options = {
const options = {
IncludeItemTypes: 'Movie',
Limit: 18,
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
@ -24,8 +39,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
EnableTotalRecordCount: false
};
ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
var allowBottomPadding = !enableScrollX();
var container = page.querySelector('#recentlyAddedItems');
const allowBottomPadding = !enableScrollX();
const container = page.querySelector('#recentlyAddedItems');
cardBuilder.buildCards(items, {
itemsContainer: container,
shape: getPortraitShape(),
@ -43,8 +58,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
}
function loadResume(page, userId, parentId) {
var screenWidth = dom.getWindowSize().innerWidth;
var options = {
let screenWidth = dom.getWindowSize().innerWidth;
const options = {
SortBy: 'DatePlayed',
SortOrder: 'Descending',
IncludeItemTypes: 'Movie',
@ -65,8 +80,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
page.querySelector('#resumableSection').classList.add('hide');
}
var allowBottomPadding = !enableScrollX();
var container = page.querySelector('#resumableItems');
const allowBottomPadding = !enableScrollX();
const container = page.querySelector('#resumableItems');
cardBuilder.buildCards(result.Items, {
itemsContainer: container,
preferThumb: true,
@ -86,8 +101,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
}
function getRecommendationHtml(recommendation) {
var html = '';
var title = '';
let html = '';
let title = '';
switch (recommendation.RecommendationType) {
case 'SimilarToRecentlyPlayed':
@ -111,7 +126,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
html += '<div class="verticalSection">';
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>';
var allowBottomPadding = true;
const allowBottomPadding = true;
if (enableScrollX()) {
html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
@ -139,8 +154,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
}
function loadSuggestions(page, userId, parentId) {
var screenWidth = dom.getWindowSize().innerWidth;
var url = ApiClient.getUrl('Movies/Recommendations', {
let screenWidth = dom.getWindowSize().innerWidth;
let url = ApiClient.getUrl('Movies/Recommendations', {
userId: userId,
categoryLimit: 6,
ItemLimit: screenWidth >= 1920 ? 8 : screenWidth >= 1600 ? 8 : screenWidth >= 1200 ? 6 : 5,
@ -155,9 +170,9 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
return;
}
var html = recommendations.map(getRecommendationHtml).join('');
const html = recommendations.map(getRecommendationHtml).join('');
page.querySelector('.noItemsMessage').classList.add('hide');
var recs = page.querySelector('.recommendations');
let recs = page.querySelector('.recommendations');
recs.innerHTML = html;
imageLoader.lazyChildren(recs);
@ -167,7 +182,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
}
function autoFocus(page) {
require(['autoFocuser'], function (autoFocuser) {
import('autoFocuser').then(({default: autoFocuser}) => {
autoFocuser.autoFocus(page);
});
}
@ -193,17 +208,16 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
}
function initSuggestedTab(page, tabContent) {
var containers = tabContent.querySelectorAll('.itemsContainer');
const containers = tabContent.querySelectorAll('.itemsContainer');
for (var i = 0, length = containers.length; i < length; i++) {
setScrollClasses(containers[i], enableScrollX());
for (const container of containers) {
setScrollClasses(container, enableScrollX());
}
}
function loadSuggestionsTab(view, params, tabContent) {
var parentId = params.topParentId;
var userId = ApiClient.getCurrentUserId();
console.debug('loadSuggestionsTab');
const parentId = params.topParentId;
const userId = ApiClient.getCurrentUserId();
loadResume(tabContent, userId, parentId);
loadLatest(tabContent, userId, parentId);
loadSuggestions(tabContent, userId, parentId);
@ -213,18 +227,15 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
return [{
name: globalize.translate('Movies')
}, {
name: globalize.translate('TabSuggestions')
name: globalize.translate('Suggestions')
}, {
name: globalize.translate('TabTrailers')
name: globalize.translate('Trailers')
}, {
name: globalize.translate('TabFavorites')
name: globalize.translate('Favorites')
}, {
name: globalize.translate('TabCollections')
name: globalize.translate('Collections')
}, {
name: globalize.translate('TabGenres')
}, {
name: globalize.translate('ButtonSearch'),
cssClass: 'searchTabButton'
name: globalize.translate('Genres')
}];
}
@ -247,13 +258,13 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
}
}
return function (view, params) {
export default function (view, params) {
function onBeforeTabChange(e) {
preLoadTab(view, parseInt(e.detail.selectedTabIndex));
}
function onTabChange(e) {
var newIndex = parseInt(e.detail.selectedTabIndex);
const newIndex = parseInt(e.detail.selectedTabIndex);
loadTab(view, newIndex);
}
@ -265,52 +276,50 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange);
}
function getTabController(page, index, callback) {
var depends = [];
const getTabController = (page, index, callback) => {
let depends = '';
switch (index) {
case 0:
depends.push('controllers/movies/movies');
depends = 'controllers/movies/movies';
break;
case 1:
depends = 'controllers/movies/moviesrecommended.js';
break;
case 2:
depends.push('controllers/movies/movietrailers');
depends = 'controllers/movies/movietrailers';
break;
case 3:
depends.push('controllers/movies/movies');
depends = 'controllers/movies/movies';
break;
case 4:
depends.push('controllers/movies/moviecollections');
depends = 'controllers/movies/moviecollections';
break;
case 5:
depends.push('controllers/movies/moviegenres');
depends = 'controllers/movies/moviegenres';
break;
case 6:
depends.push('scripts/searchtab');
}
require(depends, function (controllerFactory) {
var tabContent;
import(depends).then(({default: controllerFactory}) => {
let tabContent;
if (index === suggestionsTabIndex) {
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
self.tabContent = tabContent;
this.tabContent = tabContent;
}
var controller = tabControllers[index];
let controller = tabControllers[index];
if (!controller) {
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
if (index === suggestionsTabIndex) {
controller = self;
controller = this;
} else if (index === 6) {
controller = new controllerFactory(view, tabContent, {
collectionType: 'movies',
@ -333,7 +342,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
callback(controller);
});
}
};
function preLoadTab(page, index) {
getTabController(page, index, function (controller) {
@ -345,14 +354,12 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
function loadTab(page, index) {
currentTabIndex = index;
getTabController(page, index, function (controller) {
initialTabIndex = null;
getTabController(page, index, ((controller) => {
if (renderedTabs.indexOf(index) == -1) {
renderedTabs.push(index);
controller.renderTab();
}
});
}));
}
function onPlaybackStop(e, state) {
@ -370,26 +377,24 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
}
}
var isViewRestored;
var self = this;
var currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
var initialTabIndex = currentTabIndex;
var suggestionsTabIndex = 1;
let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
const suggestionsTabIndex = 1;
self.initTab = function () {
var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
this.initTab = function () {
let tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
initSuggestedTab(view, tabContent);
};
self.renderTab = function () {
var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
this.renderTab = function () {
let tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
loadSuggestionsTab(view, params, tabContent);
};
var tabControllers = [];
var renderedTabs = [];
let tabControllers = [];
let renderedTabs = [];
view.addEventListener('viewshow', function (e) {
if (isViewRestored = e.detail.isRestored, initTabs(), !view.getAttribute('data-title')) {
initTabs();
if (!view.getAttribute('data-title')) {
var parentId = params.topParentId;
if (parentId) {
@ -398,23 +403,22 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
libraryMenu.setTitle(item.Name);
});
} else {
view.setAttribute('data-title', globalize.translate('TabMovies'));
libraryMenu.setTitle(globalize.translate('TabMovies'));
view.setAttribute('data-title', globalize.translate('Movies'));
libraryMenu.setTitle(globalize.translate('Movies'));
}
}
events.on(playbackManager, 'playbackstop', onPlaybackStop);
inputManager.on(window, onInputCommand);
});
view.addEventListener('viewbeforehide', function (e) {
view.addEventListener('viewbeforehide', function () {
inputManager.off(window, onInputCommand);
});
view.addEventListener('viewdestroy', function (e) {
tabControllers.forEach(function (t) {
if (t.destroy) {
t.destroy();
}
});
});
};
});
for (const tabController of tabControllers) {
if (tabController.destroy) {
tabController.destroy();
}
}
}
/* eslint-enable indent */

Some files were not shown because too many files have changed in this diff Show more