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 branch 'es6' into migrate-to-ES6-19

Browse source
This commit is contained in:
Cameron 2020-07-17 07:46:06 +01:00 • committed by GitHub
commit 3c1d162a41
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 370 additions and 269 deletions
Download patch file Download diff file Expand all files Collapse all files

13
package.json
View file

@ -134,6 +134,9 @@
"src/components/syncPlay/playbackPermissionManager.js", "src/components/syncPlay/playbackPermissionManager.js",
"src/components/syncPlay/syncPlayManager.js", "src/components/syncPlay/syncPlayManager.js",
"src/components/syncPlay/timeSyncManager.js", "src/components/syncPlay/timeSyncManager.js",
"src/controllers/dashboard/apikeys.js",
"src/controllers/dashboard/dashboard.js",
"src/controllers/dashboard/encodingsettings.js",
"src/controllers/dashboard/logs.js", "src/controllers/dashboard/logs.js",
"src/controllers/user/subtitles.js", "src/controllers/user/subtitles.js",
"src/controllers/dashboard/plugins/repositories.js", "src/controllers/dashboard/plugins/repositories.js",
@ -144,6 +147,16 @@
"src/controllers/shows/tvshows.js", "src/controllers/shows/tvshows.js",
"src/controllers/shows/tvstudios.js", "src/controllers/shows/tvstudios.js",
"src/controllers/shows/tvupcoming.js", "src/controllers/shows/tvupcoming.js",
"src/elements/emby-tabs/emby-tabs.js",
"src/elements/emby-scroller/emby-scroller.js",
"src/elements/emby-radio/emby-radio.js",
"src/elements/emby-progressbar/emby-progressbar.js",
"src/elements/emby-progressring/emby-progressring.js",
"src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js",
"src/elements/emby-slider/emby-slider.js",
"src/elements/emby-checkbox/emby-checkbox.js",
"src/elements/emby-textarea/emby-textarea.js",
"src/elements/emby-toggle/emby-toggle.js",
"src/plugins/bookPlayer/plugin.js", "src/plugins/bookPlayer/plugin.js",
"src/plugins/bookPlayer/tableOfContents.js", "src/plugins/bookPlayer/tableOfContents.js",
"src/plugins/photoPlayer/plugin.js", "src/plugins/photoPlayer/plugin.js",

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

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

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

@ -1,11 +1,31 @@
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) { import datetime from 'datetime';
'use strict'; 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 connectionManager from 'connectionManager';
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) { function showPlaybackInfo(btn, session) {
require(['alert'], function (alert) { import('alert').then(({default: alert}) => {
var title; let title;
var text = []; let text = [];
var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session); const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
if (displayPlayMethod === 'DirectStream') { if (displayPlayMethod === 'DirectStream') {
title = globalize.translate('DirectStreaming'); title = globalize.translate('DirectStreaming');
@ -33,7 +53,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
function showSendMessageForm(btn, session) { function showSendMessageForm(btn, session) {
require(['prompt'], function (prompt) { import('prompt').then(({default: prompt}) => {
prompt({ prompt({
title: globalize.translate('HeaderSendMessage'), title: globalize.translate('HeaderSendMessage'),
label: globalize.translate('LabelMessageText'), label: globalize.translate('LabelMessageText'),
@ -50,8 +70,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
function showOptionsMenu(btn, session) { function showOptionsMenu(btn, session) {
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({default: actionsheet}) => {
var menuItems = []; const menuItems = [];
if (session.ServerId && session.DeviceId !== connectionManager.deviceId()) { if (session.ServerId && session.DeviceId !== connectionManager.deviceId()) {
menuItems.push({ menuItems.push({
@ -84,14 +104,14 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
function onActiveDevicesClick(evt) { function onActiveDevicesClick(evt) {
var btn = dom.parentWithClass(evt.target, 'sessionCardButton'); const btn = dom.parentWithClass(evt.target, 'sessionCardButton');
if (btn) { if (btn) {
var card = dom.parentWithClass(btn, 'card'); const card = dom.parentWithClass(btn, 'card');
if (card) { if (card) {
var sessionId = card.id; const sessionId = card.id;
var session = (DashboardPage.sessionsList || []).filter(function (dashboardSession) { const session = (DashboardPage.sessionsList || []).filter(function (dashboardSession) {
return 'session' + dashboardSession.Id === sessionId; return 'session' + dashboardSession.Id === sessionId;
})[0]; })[0];
@ -113,11 +133,11 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
function filterSessions(sessions) { function filterSessions(sessions) {
var list = []; const list = [];
var minActiveDate = new Date().getTime() - 9e5; const minActiveDate = new Date().getTime() - 9e5;
for (var i = 0, length = sessions.length; i < length; i++) { for (let i = 0, length = sessions.length; i < length; i++) {
var session = sessions[i]; const session = sessions[i];
if (!session.NowPlayingItem && !session.UserId) { if (!session.NowPlayingItem && !session.UserId) {
continue; continue;
@ -139,7 +159,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
EnableTotalRecordCount: false, EnableTotalRecordCount: false,
EnableImageTypes: 'Primary,Thumb,Backdrop' EnableImageTypes: 'Primary,Thumb,Backdrop'
}).then(function (result) { }).then(function (result) {
var itemsContainer = view.querySelector('.activeRecordingItems'); const itemsContainer = view.querySelector('.activeRecordingItems');
if (!result.Items.length) { if (!result.Items.length) {
view.querySelector('.activeRecordingsSection').classList.add('hide'); view.querySelector('.activeRecordingsSection').classList.add('hide');
@ -169,7 +189,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
function reloadSystemInfo(view, apiClient) { function reloadSystemInfo(view, apiClient) {
apiClient.getSystemInfo().then(function (systemInfo) { apiClient.getSystemInfo().then(function (systemInfo) {
view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName); view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName);
var localizedVersion = globalize.translate('DashboardVersionNumber', systemInfo.Version); let localizedVersion = globalize.translate('DashboardVersionNumber', systemInfo.Version);
if (systemInfo.SystemUpdateLevel !== 'Release') { if (systemInfo.SystemUpdateLevel !== 'Release') {
localizedVersion += ' ' + systemInfo.SystemUpdateLevel; localizedVersion += ' ' + systemInfo.SystemUpdateLevel;
@ -205,31 +225,31 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
function renderActiveConnections(view, sessions) { function renderActiveConnections(view, sessions) {
var html = ''; let html = '';
DashboardPage.sessionsList = sessions; DashboardPage.sessionsList = sessions;
var parentElement = view.querySelector('.activeDevices'); const parentElement = view.querySelector('.activeDevices');
var cardElem = parentElement.querySelector('.card'); const cardElem = parentElement.querySelector('.card');
if (cardElem) { if (cardElem) {
cardElem.classList.add('deadSession'); cardElem.classList.add('deadSession');
} }
for (var i = 0, length = sessions.length; i < length; i++) { for (let i = 0, length = sessions.length; i < length; i++) {
var session = sessions[i]; const session = sessions[i];
var rowId = 'session' + session.Id; const rowId = 'session' + session.Id;
var elem = view.querySelector('#' + rowId); const elem = view.querySelector('#' + rowId);
if (elem) { if (elem) {
DashboardPage.updateSession(elem, session); DashboardPage.updateSession(elem, session);
} else { } else {
var nowPlayingItem = session.NowPlayingItem; const nowPlayingItem = session.NowPlayingItem;
var className = 'scalableCard card activeSession backdropCard backdropCard-scalable'; const className = 'scalableCard card activeSession backdropCard backdropCard-scalable';
html += '<div class="' + className + '" id="' + rowId + '">'; html += '<div class="' + className + '" id="' + rowId + '">';
html += '<div class="cardBox visualCardBox">'; html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">'; html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>'; html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += '<div class="cardContent">'; html += '<div class="cardContent">';
var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem); const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
if (imgUrl) { if (imgUrl) {
html += '<div class="sessionNowPlayingContent sessionNowPlayingContent-withbackground"'; html += '<div class="sessionNowPlayingContent sessionNowPlayingContent-withbackground"';
@ -240,7 +260,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
html += '<div class="sessionNowPlayingInnerContent">'; html += '<div class="sessionNowPlayingInnerContent">';
html += '<div class="sessionAppInfo">'; html += '<div class="sessionAppInfo">';
var clientImage = DashboardPage.getClientImage(session); const clientImage = DashboardPage.getClientImage(session);
if (clientImage) { if (clientImage) {
html += clientImage; html += clientImage;
@ -253,7 +273,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
html += '</div>'; html += '</div>';
html += '<div class="sessionNowPlayingDetails">'; html += '<div class="sessionNowPlayingDetails">';
var nowPlayingName = DashboardPage.getNowPlayingName(session); const nowPlayingName = DashboardPage.getNowPlayingName(session);
html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">'; html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">';
html += nowPlayingName.html; html += nowPlayingName.html;
html += '</div>'; html += '</div>';
@ -261,7 +281,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
html += '</div>'; html += '</div>';
if (nowPlayingItem && nowPlayingItem.RunTimeTicks) { 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, { html += indicators.getProgressHtml(percent, {
containerClass: 'playbackProgress' containerClass: 'playbackProgress'
}); });
@ -273,7 +293,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) { if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
var percent = session.TranscodingInfo.CompletionPercentage.toFixed(1); const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
html += indicators.getProgressHtml(percent, { html += indicators.getProgressHtml(percent, {
containerClass: 'transcodingProgress' containerClass: 'transcodingProgress'
}); });
@ -290,7 +310,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
html += '<div class="sessionCardFooter cardFooter">'; html += '<div class="sessionCardFooter cardFooter">';
html += '<div class="sessionCardButtons flex align-items-center justify-content-center">'; 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'; 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>'; html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><span class="material-icons ' + playIcon + '"></span></button>';
@ -308,7 +328,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
html += '</div>'; html += '</div>';
html += '<div class="flex align-items-center justify-content-center">'; 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 += userImage ? '<div class="activitylogUserPhoto" style="background-image:url(\'' + userImage + "');\"></div>" : '<div style="height:1.71em;"></div>';
html += '<div class="sessionUserName">'; html += '<div class="sessionUserName">';
html += DashboardPage.getUsersHtml(session); html += DashboardPage.getUsersHtml(session);
@ -322,7 +342,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
parentElement.insertAdjacentHTML('beforeend', html); parentElement.insertAdjacentHTML('beforeend', html);
var deadSessionElem = parentElement.querySelector('.deadSession'); const deadSessionElem = parentElement.querySelector('.deadSession');
if (deadSessionElem) { if (deadSessionElem) {
deadSessionElem.parentNode.removeChild(deadSessionElem); deadSessionElem.parentNode.removeChild(deadSessionElem);
@ -330,7 +350,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
function renderRunningTasks(view, tasks) { function renderRunningTasks(view, tasks) {
var html = ''; let html = '';
tasks = tasks.filter(function (task) { tasks = tasks.filter(function (task) {
if ('Idle' != task.State) { if ('Idle' != task.State) {
return !task.IsHidden; return !task.IsHidden;
@ -345,13 +365,13 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
view.querySelector('.runningTasksContainer').classList.add('hide'); view.querySelector('.runningTasksContainer').classList.add('hide');
} }
for (var i = 0, length = tasks.length; i < length; i++) { for (let i = 0, length = tasks.length; i < length; i++) {
var task = tasks[i]; const task = tasks[i];
html += '<p>'; html += '<p>';
html += task.Name + '<br/>'; html += task.Name + '<br/>';
if (task.State === 'Running') { 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 max="100" value="' + progress + '" title="' + progress + '%">';
html += progress + '%'; html += progress + '%';
html += '</progress>'; html += '</progress>';
@ -377,9 +397,9 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
apiClient.sendMessage('ScheduledTasksInfoStop'); apiClient.sendMessage('ScheduledTasksInfoStop');
}, },
getSessionNowPlayingStreamInfo: function (session) { getSessionNowPlayingStreamInfo: function (session) {
var html = ''; let html = '';
var showTranscodingInfo = false; let showTranscodingInfo = false;
var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session); const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
if (displayPlayMethod === 'DirectStream') { if (displayPlayMethod === 'DirectStream') {
html += globalize.translate('DirectStreaming'); html += globalize.translate('DirectStreaming');
@ -396,7 +416,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
if (showTranscodingInfo) { if (showTranscodingInfo) {
var line = []; const line = [];
if (session.TranscodingInfo) { if (session.TranscodingInfo) {
if (session.TranscodingInfo.Bitrate) { if (session.TranscodingInfo.Bitrate) {
@ -428,8 +448,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
return html; return html;
}, },
getSessionNowPlayingTime: function (session) { getSessionNowPlayingTime: function (session) {
var nowPlayingItem = session.NowPlayingItem; const nowPlayingItem = session.NowPlayingItem;
var html = ''; let html = '';
if (nowPlayingItem) { if (nowPlayingItem) {
if (session.PlayState.PositionTicks) { if (session.PlayState.PositionTicks) {
@ -453,8 +473,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
return session.Client + ' ' + session.ApplicationVersion; return session.Client + ' ' + session.ApplicationVersion;
}, },
getNowPlayingName: function (session) { getNowPlayingName: function (session) {
var imgUrl = ''; let imgUrl = '';
var nowPlayingItem = session.NowPlayingItem; 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 // 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 // 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) { if (!nowPlayingItem) {
@ -464,8 +484,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}; };
} }
var topText = itemHelper.getDisplayName(nowPlayingItem); let topText = itemHelper.getDisplayName(nowPlayingItem);
var bottomText = ''; let bottomText = '';
if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) { if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
bottomText = topText; bottomText = topText;
@ -505,13 +525,13 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}; };
}, },
getUsersHtml: function (session) { getUsersHtml: function (session) {
var html = []; const html = [];
if (session.UserId) { if (session.UserId) {
html.push(session.UserName); 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); html.push(session.AdditionalUsers[i].UserName);
} }
@ -529,7 +549,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}, },
updateSession: function (row, session) { updateSession: function (row, session) {
row.classList.remove('deadSession'); row.classList.remove('deadSession');
var nowPlayingItem = session.NowPlayingItem; const nowPlayingItem = session.NowPlayingItem;
if (nowPlayingItem) { if (nowPlayingItem) {
row.classList.add('playingSession'); row.classList.add('playingSession');
@ -549,7 +569,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
row.querySelector('.btnSessionInfo').classList.add('hide'); 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 !== connectionManager.deviceId()) {
btnSessionPlayPause.classList.remove('hide'); btnSessionPlayPause.classList.remove('hide');
@ -567,18 +587,18 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
row.querySelector('.sessionNowPlayingTime').innerHTML = DashboardPage.getSessionNowPlayingTime(session); row.querySelector('.sessionNowPlayingTime').innerHTML = DashboardPage.getSessionNowPlayingTime(session);
row.querySelector('.sessionUserName').innerHTML = DashboardPage.getUsersHtml(session); row.querySelector('.sessionUserName').innerHTML = DashboardPage.getUsersHtml(session);
row.querySelector('.sessionAppSecondaryText').innerHTML = DashboardPage.getAppSecondaryText(session); row.querySelector('.sessionAppSecondaryText').innerHTML = DashboardPage.getAppSecondaryText(session);
var nowPlayingName = DashboardPage.getNowPlayingName(session); const nowPlayingName = DashboardPage.getNowPlayingName(session);
var nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo'); const nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo');
if (!(nowPlayingName.image && nowPlayingName.image == nowPlayingInfoElem.getAttribute('data-imgsrc'))) { if (!(nowPlayingName.image && nowPlayingName.image == nowPlayingInfoElem.getAttribute('data-imgsrc'))) {
nowPlayingInfoElem.innerHTML = nowPlayingName.html; nowPlayingInfoElem.innerHTML = nowPlayingName.html;
nowPlayingInfoElem.setAttribute('data-imgsrc', nowPlayingName.image || ''); nowPlayingInfoElem.setAttribute('data-imgsrc', nowPlayingName.image || '');
} }
var playbackProgressElem = row.querySelector('.playbackProgress'); const playbackProgressElem = row.querySelector('.playbackProgress');
if (nowPlayingItem && nowPlayingItem.RunTimeTicks) { 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, { playbackProgressElem.outerHTML = indicators.getProgressHtml(percent, {
containerClass: 'playbackProgress' containerClass: 'playbackProgress'
}); });
@ -588,10 +608,10 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}); });
} }
var transcodingProgress = row.querySelector('.transcodingProgress'); const transcodingProgress = row.querySelector('.transcodingProgress');
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) { 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, { transcodingProgress.outerHTML = indicators.getProgressHtml(percent, {
containerClass: 'transcodingProgress' containerClass: 'transcodingProgress'
}); });
@ -601,8 +621,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}); });
} }
var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || ''; const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';
var imgElem = row.querySelector('.sessionNowPlayingContent'); const imgElem = row.querySelector('.sessionNowPlayingContent');
if (imgUrl != imgElem.getAttribute('data-src')) { if (imgUrl != imgElem.getAttribute('data-src')) {
imgElem.style.backgroundImage = imgUrl ? "url('" + imgUrl + "')" : ''; imgElem.style.backgroundImage = imgUrl ? "url('" + imgUrl + "')" : '';
@ -616,7 +636,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
}, },
getClientImage: function (connection) { getClientImage: function (connection) {
var iconUrl = imageHelper.getDeviceIcon(connection); const iconUrl = imageHelper.getDeviceIcon(connection);
return "<img src='" + iconUrl + "' />"; return "<img src='" + iconUrl + "' />";
}, },
getNowPlayingImageUrl: function (item) { getNowPlayingImageUrl: function (item) {
@ -646,7 +666,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}); });
} }
var imageTags = (item || {}).ImageTags || {}; const imageTags = (item || {}).ImageTags || {};
if (item && imageTags.Thumb) { if (item && imageTags.Thumb) {
return ApiClient.getScaledImageUrl(item.Id, { return ApiClient.getScaledImageUrl(item.Id, {
@ -700,20 +720,20 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}, },
systemUpdateTaskKey: 'SystemUpdateTask', systemUpdateTaskKey: 'SystemUpdateTask',
stopTask: function (btn, id) { stopTask: function (btn, id) {
var page = dom.parentWithClass(btn, 'page'); const page = dom.parentWithClass(btn, 'page');
ApiClient.stopScheduledTask(id).then(function () { ApiClient.stopScheduledTask(id).then(function () {
pollForInfo(page, ApiClient); pollForInfo(page, ApiClient);
}); });
}, },
restart: function (btn) { restart: function (btn) {
require(['confirm'], function (confirm) { import('confirm').then(({default: confirm}) => {
confirm({ confirm({
title: globalize.translate('HeaderRestart'), title: globalize.translate('HeaderRestart'),
text: globalize.translate('MessageConfirmRestart'), text: globalize.translate('MessageConfirmRestart'),
confirmText: globalize.translate('ButtonRestart'), confirmText: globalize.translate('ButtonRestart'),
primary: 'delete' primary: 'delete'
}).then(function () { }).then(function () {
var page = dom.parentWithClass(btn, 'page'); const page = dom.parentWithClass(btn, 'page');
page.querySelector('#btnRestartServer').disabled = true; page.querySelector('#btnRestartServer').disabled = true;
page.querySelector('#btnShutdown').disabled = true; page.querySelector('#btnShutdown').disabled = true;
ApiClient.restartServer(); ApiClient.restartServer();
@ -721,14 +741,14 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}); });
}, },
shutdown: function (btn) { shutdown: function (btn) {
require(['confirm'], function (confirm) { import('confirm').then(({default: confirm}) => {
confirm({ confirm({
title: globalize.translate('HeaderShutdown'), title: globalize.translate('HeaderShutdown'),
text: globalize.translate('MessageConfirmShutdown'), text: globalize.translate('MessageConfirmShutdown'),
confirmText: globalize.translate('ButtonShutdown'), confirmText: globalize.translate('ButtonShutdown'),
primary: 'delete' primary: 'delete'
}).then(function () { }).then(function () {
var page = dom.parentWithClass(btn, 'page'); const page = dom.parentWithClass(btn, 'page');
page.querySelector('#btnRestartServer').disabled = true; page.querySelector('#btnRestartServer').disabled = true;
page.querySelector('#btnShutdown').disabled = true; page.querySelector('#btnShutdown').disabled = true;
ApiClient.shutdownServer(); ApiClient.shutdownServer();
@ -736,7 +756,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}); });
} }
}; };
return function (view, params) { export default function (view, params) {
function onRestartRequired(evt, apiClient) { function onRestartRequired(evt, apiClient) {
console.debug('onRestartRequired not implemented', evt, apiClient); console.debug('onRestartRequired not implemented', evt, apiClient);
} }
@ -775,11 +795,11 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
} }
var serverId = ApiClient.serverId(); const serverId = ApiClient.serverId();
view.querySelector('.activeDevices').addEventListener('click', onActiveDevicesClick); view.querySelector('.activeDevices').addEventListener('click', onActiveDevicesClick);
view.addEventListener('viewshow', function () { view.addEventListener('viewshow', function () {
var page = this; const page = this;
var apiClient = ApiClient; const apiClient = ApiClient;
if (apiClient) { if (apiClient) {
loading.show(); loading.show();
@ -816,7 +836,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
}); });
view.addEventListener('viewbeforehide', function () { view.addEventListener('viewbeforehide', function () {
var apiClient = ApiClient; const apiClient = ApiClient;
events.off(serverNotifications, 'RestartRequired', onRestartRequired); events.off(serverNotifications, 'RestartRequired', onRestartRequired);
events.off(serverNotifications, 'ServerShuttingDown', onServerShuttingDown); events.off(serverNotifications, 'ServerShuttingDown', onServerShuttingDown);
events.off(serverNotifications, 'ServerRestarting', onServerRestarting); events.off(serverNotifications, 'ServerRestarting', onServerRestarting);
@ -830,18 +850,19 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
}); });
view.addEventListener('viewdestroy', function () { view.addEventListener('viewdestroy', function () {
var page = this; const page = this;
var userActivityLog = page.userActivityLog; const userActivityLog = page.userActivityLog;
if (userActivityLog) { if (userActivityLog) {
userActivityLog.destroy(); userActivityLog.destroy();
} }
var serverActivityLog = page.serverActivityLog; const serverActivityLog = page.serverActivityLog;
if (serverActivityLog) { if (serverActivityLog) {
serverActivityLog.destroy(); serverActivityLog.destroy();
} }
}); });
}; }
});
/* eslint-enable indent */

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

@ -1,5 +1,10 @@
define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, loading, globalize, dom, libraryMenu) { import $ from 'jQuery';
'use strict'; import loading from 'loading';
import globalize from 'globalize';
import dom from 'dom';
import libraryMenu from 'libraryMenu';
/* eslint-disable indent */
function loadPage(page, config, systemInfo) { function loadPage(page, config, systemInfo) {
Array.prototype.forEach.call(page.querySelectorAll('.chkDecodeCodec'), function (c) { Array.prototype.forEach.call(page.querySelectorAll('.chkDecodeCodec'), function (c) {
@ -27,10 +32,10 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
function onSaveEncodingPathFailure(response) { function onSaveEncodingPathFailure(response) {
loading.hide(); loading.hide();
var msg = ''; let msg = '';
msg = globalize.translate('FFmpegSavePathNotFound'); msg = globalize.translate('FFmpegSavePathNotFound');
require(['alert'], function (alert) { import('alert').then(({default: alert}) => {
alert(msg); alert(msg);
}); });
} }
@ -49,9 +54,9 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
} }
function onSubmit() { function onSubmit() {
var form = this; const form = this;
var onDecoderConfirmed = function () { const onDecoderConfirmed = function () {
loading.show(); loading.show();
ApiClient.getNamedConfiguration('encoding').then(function (config) { ApiClient.getNamedConfiguration('encoding').then(function (config) {
config.DownMixAudioBoost = $('#txtDownMixAudioBoost', form).val(); config.DownMixAudioBoost = $('#txtDownMixAudioBoost', form).val();
@ -75,7 +80,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
ApiClient.updateNamedConfiguration('encoding', config).then(function () { ApiClient.updateNamedConfiguration('encoding', config).then(function () {
updateEncoder(form); updateEncoder(form);
}, function () { }, function () {
require(['alert'], function (alert) { import('alert').then(({default: alert}) => {
alert(globalize.translate('DefaultErrorMessage')); alert(globalize.translate('DefaultErrorMessage'));
}); });
@ -85,7 +90,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
}; };
if ($('#selectVideoDecoder', form).val()) { if ($('#selectVideoDecoder', form).val()) {
require(['alert'], function (alert) { import('alert').then(({default: alert}) => {
alert({ alert({
title: globalize.translate('TitleHardwareAcceleration'), title: globalize.translate('TitleHardwareAcceleration'),
text: globalize.translate('HardwareAccelerationWarning') text: globalize.translate('HardwareAccelerationWarning')
@ -100,7 +105,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
function setDecodingCodecsVisible(context, value) { function setDecodingCodecsVisible(context, value) {
value = value || ''; value = value || '';
var any; let any;
Array.prototype.forEach.call(context.querySelectorAll('.chkDecodeCodec'), function (c) { Array.prototype.forEach.call(context.querySelectorAll('.chkDecodeCodec'), function (c) {
if (-1 === c.getAttribute('data-types').split(',').indexOf(value)) { if (-1 === c.getAttribute('data-types').split(',').indexOf(value)) {
dom.parentWithTag(c, 'LABEL').classList.add('hide'); dom.parentWithTag(c, 'LABEL').classList.add('hide');
@ -131,7 +136,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
} }
$(document).on('pageinit', '#encodingSettingsPage', function () { $(document).on('pageinit', '#encodingSettingsPage', function () {
var page = this; const page = this;
page.querySelector('#selectVideoDecoder').addEventListener('change', function () { page.querySelector('#selectVideoDecoder').addEventListener('change', function () {
if ('vaapi' == this.value) { if ('vaapi' == this.value) {
page.querySelector('.fldVaapiDevice').classList.remove('hide'); page.querySelector('.fldVaapiDevice').classList.remove('hide');
@ -150,8 +155,8 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
setDecodingCodecsVisible(page, this.value); setDecodingCodecsVisible(page, this.value);
}); });
$('#btnSelectEncoderPath', page).on('click.selectDirectory', function () { $('#btnSelectEncoderPath', page).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) { import('directorybrowser').then(({default: directoryBrowser}) => {
var picker = new directoryBrowser.default(); const picker = new directoryBrowser();
picker.show({ picker.show({
includeFiles: true, includeFiles: true,
callback: function (path) { callback: function (path) {
@ -165,8 +170,8 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
}); });
}); });
$('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () { $('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) { import('directorybrowser').then(({default: directoryBrowser}) => {
var picker = new directoryBrowser.default(); const picker = new directoryBrowser();
picker.show({ picker.show({
callback: function (path) { callback: function (path) {
if (path) { if (path) {
@ -185,11 +190,12 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
}).on('pageshow', '#encodingSettingsPage', function () { }).on('pageshow', '#encodingSettingsPage', function () {
loading.show(); loading.show();
libraryMenu.setTabs('playback', 0, getTabs); libraryMenu.setTabs('playback', 0, getTabs);
var page = this; const page = this;
ApiClient.getNamedConfiguration('encoding').then(function (config) { ApiClient.getNamedConfiguration('encoding').then(function (config) {
ApiClient.getSystemInfo().then(function (systemInfo) { ApiClient.getSystemInfo().then(function (systemInfo) {
loadPage(page, config, systemInfo); loadPage(page, config, systemInfo);
}); });
}); });
}); });
});
/* eslint-enable indent */

33
src/elements/emby-checkbox/emby-checkbox.js
View file

@ -1,7 +1,11 @@
define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (browser, dom) { import browser from 'browser';
'use strict'; import dom from 'dom';
import 'css!./emby-checkbox';
import 'registerElement';
var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype); /* eslint-disable indent */
let EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype);
function onKeyDown(e) { function onKeyDown(e) {
// Don't submit form on enter // Don't submit form on enter
@ -19,10 +23,10 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
} }
} }
var enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false; const enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false;
function forceRefresh(loading) { function forceRefresh(loading) {
var elem = this.parentNode; let elem = this.parentNode;
elem.style.webkitAnimationName = 'repaintChrome'; elem.style.webkitAnimationName = 'repaintChrome';
elem.style.webkitAnimationDelay = (loading === true ? '500ms' : ''); elem.style.webkitAnimationDelay = (loading === true ? '500ms' : '');
@ -43,22 +47,22 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
this.classList.add('emby-checkbox'); this.classList.add('emby-checkbox');
var labelElement = this.parentNode; const labelElement = this.parentNode;
labelElement.classList.add('emby-checkbox-label'); labelElement.classList.add('emby-checkbox-label');
var labelTextElement = labelElement.querySelector('span'); const labelTextElement = labelElement.querySelector('span');
var outlineClass = 'checkboxOutline'; let outlineClass = 'checkboxOutline';
var customClass = this.getAttribute('data-outlineclass'); const customClass = this.getAttribute('data-outlineclass');
if (customClass) { if (customClass) {
outlineClass += ' ' + customClass; outlineClass += ' ' + customClass;
} }
var checkedIcon = this.getAttribute('data-checkedicon') || 'check'; const checkedIcon = this.getAttribute('data-checkedicon') || 'check';
var uncheckedIcon = this.getAttribute('data-uncheckedicon') || ''; const uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
var checkHtml = '<span class="material-icons checkboxIcon checkboxIcon-checked ' + checkedIcon + '"></span>'; const checkHtml = '<span class="material-icons checkboxIcon checkboxIcon-checked ' + checkedIcon + '"></span>';
var uncheckedHtml = '<span class="material-icons checkboxIcon checkboxIcon-unchecked ' + uncheckedIcon + '"></span>'; const uncheckedHtml = '<span class="material-icons checkboxIcon checkboxIcon-unchecked ' + uncheckedIcon + '"></span>';
labelElement.insertAdjacentHTML('beforeend', '<span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>'); labelElement.insertAdjacentHTML('beforeend', '<span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>');
labelTextElement.classList.add('checkboxLabel'); labelTextElement.classList.add('checkboxLabel');
@ -103,4 +107,5 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
prototype: EmbyCheckboxPrototype, prototype: EmbyCheckboxPrototype,
extends: 'input' extends: 'input'
}); });
});
/* eslint-enable indent */

22
src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js
View file

@ -1,16 +1,21 @@
define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerElement'], function (EmbyProgressRing, dom, serverNotifications, events) { import EmbyProgressRing from 'emby-progressring';
'use strict'; import dom from 'dom';
import serverNotifications from 'serverNotifications';
import events from 'events';
import 'registerElement';
/* eslint-disable indent */
function addNotificationEvent(instance, name, handler) { function addNotificationEvent(instance, name, handler) {
var localHandler = handler.bind(instance); const localHandler = handler.bind(instance);
events.on(serverNotifications, name, localHandler); events.on(serverNotifications, name, localHandler);
instance[name] = localHandler; instance[name] = localHandler;
} }
function removeNotificationEvent(instance, name) { function removeNotificationEvent(instance, name) {
var handler = instance[name]; const handler = instance[name];
if (handler) { if (handler) {
events.off(serverNotifications, name, handler); events.off(serverNotifications, name, handler);
instance[name] = null; instance[name] = null;
@ -19,7 +24,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
function onRefreshProgress(e, apiClient, info) { function onRefreshProgress(e, apiClient, info) {
var indicator = this; const indicator = this;
if (!indicator.itemId) { if (!indicator.itemId) {
indicator.itemId = dom.parentWithAttribute(indicator, 'data-id').getAttribute('data-id'); indicator.itemId = dom.parentWithAttribute(indicator, 'data-id').getAttribute('data-id');
@ -27,7 +32,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
if (info.ItemId === indicator.itemId) { if (info.ItemId === indicator.itemId) {
var progress = parseFloat(info.Progress); const progress = parseFloat(info.Progress);
if (progress && progress < 100) { if (progress && progress < 100) {
this.classList.remove('hide'); this.classList.remove('hide');
@ -39,7 +44,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
} }
} }
var EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing); let EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing);
EmbyItemRefreshIndicatorPrototype.createdCallback = function () { EmbyItemRefreshIndicatorPrototype.createdCallback = function () {
@ -74,4 +79,5 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
prototype: EmbyItemRefreshIndicatorPrototype, prototype: EmbyItemRefreshIndicatorPrototype,
extends: 'div' extends: 'div'
}); });
});
/* eslint-enable indent */

20
src/elements/emby-progressbar/emby-progressbar.js
View file

@ -1,20 +1,19 @@
define([], function() { /* eslint-disable indent */
'use strict';
var ProgressBarPrototype = Object.create(HTMLDivElement.prototype); let ProgressBarPrototype = Object.create(HTMLDivElement.prototype);
function onAutoTimeProgress() { function onAutoTimeProgress() {
var start = parseInt(this.getAttribute('data-starttime')); const start = parseInt(this.getAttribute('data-starttime'));
var end = parseInt(this.getAttribute('data-endtime')); const end = parseInt(this.getAttribute('data-endtime'));
var now = new Date().getTime(); const now = new Date().getTime();
var total = end - start; const total = end - start;
var pct = 100 * ((now - start) / total); let pct = 100 * ((now - start) / total);
pct = Math.min(100, pct); pct = Math.min(100, pct);
pct = Math.max(0, pct); pct = Math.max(0, pct);
var itemProgressBarForeground = this.querySelector('.itemProgressBarForeground'); const itemProgressBarForeground = this.querySelector('.itemProgressBarForeground');
itemProgressBarForeground.style.width = pct + '%'; itemProgressBarForeground.style.width = pct + '%';
} }
@ -39,4 +38,5 @@ define([], function() {
prototype: ProgressBarPrototype, prototype: ProgressBarPrototype,
extends: 'div' extends: 'div'
}); });
});
/* eslint-enable indent */

20
src/elements/emby-progressring/emby-progressring.js
View file

@ -1,12 +1,15 @@
define(['require', 'css!./emby-progressring', 'registerElement'], function (require) { import require from 'require';
'use strict'; import 'css!./emby-progressring';
import 'webcomponents';
var EmbyProgressRing = Object.create(HTMLDivElement.prototype); /* eslint-disable indent */
let EmbyProgressRing = Object.create(HTMLDivElement.prototype);
EmbyProgressRing.createdCallback = function () { EmbyProgressRing.createdCallback = function () {
this.classList.add('progressring'); this.classList.add('progressring');
var instance = this; const instance = this;
require(['text!./emby-progressring.template.html'], function (template) { require(['text!./emby-progressring.template.html'], function (template) {
instance.innerHTML = template; instance.innerHTML = template;
@ -37,7 +40,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
progress = Math.floor(progress); progress = Math.floor(progress);
var angle; let angle;
if (progress < 25) { if (progress < 25) {
angle = -90 + (progress / 100) * 360; angle = -90 + (progress / 100) * 360;
@ -82,7 +85,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
EmbyProgressRing.detachedCallback = function () { EmbyProgressRing.detachedCallback = function () {
var observer = this.observer; let observer = this.observer;
if (observer) { if (observer) {
// later, you can stop observing // later, you can stop observing
@ -97,5 +100,6 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
extends: 'div' extends: 'div'
}); });
return EmbyProgressRing; export default EmbyProgressRing;
});
/* eslint-enable indent */

20
src/elements/emby-radio/emby-radio.js
View file

@ -1,7 +1,10 @@
define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) { import layoutManager from 'layoutManager';
'use strict'; import 'css!./emby-radio';
import 'registerElement';
var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype); /* eslint-disable indent */
let EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
function onKeyDown(e) { function onKeyDown(e) {
@ -23,7 +26,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
} }
EmbyRadioPrototype.attachedCallback = function () { EmbyRadioPrototype.attachedCallback = function () {
var showFocus = !layoutManager.mobile; const showFocus = !layoutManager.mobile;
if (this.getAttribute('data-radio') === 'true') { if (this.getAttribute('data-radio') === 'true') {
return; return;
@ -33,7 +36,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
this.classList.add('mdl-radio__button'); this.classList.add('mdl-radio__button');
var labelElement = this.parentNode; let labelElement = this.parentNode;
//labelElement.classList.add('"mdl-radio mdl-js-radio mdl-js-ripple-effect'); //labelElement.classList.add('"mdl-radio mdl-js-radio mdl-js-ripple-effect');
labelElement.classList.add('mdl-radio'); labelElement.classList.add('mdl-radio');
labelElement.classList.add('mdl-js-radio'); labelElement.classList.add('mdl-js-radio');
@ -42,12 +45,12 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
labelElement.classList.add('show-focus'); labelElement.classList.add('show-focus');
} }
var labelTextElement = labelElement.querySelector('span'); let labelTextElement = labelElement.querySelector('span');
labelTextElement.classList.add('radioButtonLabel'); labelTextElement.classList.add('radioButtonLabel');
labelTextElement.classList.add('mdl-radio__label'); labelTextElement.classList.add('mdl-radio__label');
var html = ''; let html = '';
html += '<div class="mdl-radio__circles">'; html += '<div class="mdl-radio__circles">';
@ -76,4 +79,5 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
prototype: EmbyRadioPrototype, prototype: EmbyRadioPrototype,
extends: 'input' extends: 'input'
}); });
});
/* eslint-enable indent */

39
src/elements/emby-scroller/emby-scroller.js
View file

@ -1,7 +1,15 @@
define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'browser', 'registerElement', 'css!./emby-scroller'], function (scroller, dom, layoutManager, inputManager, focusManager, browser) { import scroller from 'scroller';
'use strict'; import dom from 'dom';
import layoutManager from 'layoutManager';
import inputManager from 'inputManager';
import focusManager from 'focusManager';
import browser from 'browser';
import 'registerElement';
import 'css!./emby-scroller';
var ScrollerPrototype = Object.create(HTMLDivElement.prototype); /* eslint-disable indent */
let ScrollerPrototype = Object.create(HTMLDivElement.prototype);
ScrollerPrototype.createdCallback = function () { ScrollerPrototype.createdCallback = function () {
this.classList.add('emby-scroller'); this.classList.add('emby-scroller');
@ -9,7 +17,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
function initCenterFocus(elem, scrollerInstance) { function initCenterFocus(elem, scrollerInstance) {
dom.addEventListener(elem, 'focus', function (e) { dom.addEventListener(elem, 'focus', function (e) {
var focused = focusManager.focusableParent(e.target); const focused = focusManager.focusableParent(e.target);
if (focused) { if (focused) {
scrollerInstance.toCenter(focused); scrollerInstance.toCenter(focused);
} }
@ -80,7 +88,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
}; };
function onInputCommand(e) { function onInputCommand(e) {
var cmd = e.detail.command; const cmd = e.detail.command;
if (cmd === 'end') { if (cmd === 'end') {
focusManager.focusLast(this, '.' + this.getAttribute('data-navcommands')); focusManager.focusLast(this, '.' + this.getAttribute('data-navcommands'));
e.preventDefault(); e.preventDefault();
@ -101,18 +109,18 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
inputManager.on(this, onInputCommand); inputManager.on(this, onInputCommand);
} }
var horizontal = this.getAttribute('data-horizontal') !== 'false'; const horizontal = this.getAttribute('data-horizontal') !== 'false';
var slider = this.querySelector('.scrollSlider'); const slider = this.querySelector('.scrollSlider');
if (horizontal) { if (horizontal) {
slider.style['white-space'] = 'nowrap'; slider.style['white-space'] = 'nowrap';
} }
var scrollFrame = this; const scrollFrame = this;
var enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false'; const enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false';
var options = { const options = {
horizontal: horizontal, horizontal: horizontal,
mouseDragging: 1, mouseDragging: 1,
mouseWheel: this.getAttribute('data-mousewheel') !== 'false', mouseWheel: this.getAttribute('data-mousewheel') !== 'false',
@ -154,14 +162,14 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
} }
ScrollerPrototype.pause = function () { ScrollerPrototype.pause = function () {
var headroom = this.headroom; const headroom = this.headroom;
if (headroom) { if (headroom) {
headroom.pause(); headroom.pause();
} }
}; };
ScrollerPrototype.resume = function () { ScrollerPrototype.resume = function () {
var headroom = this.headroom; const headroom = this.headroom;
if (headroom) { if (headroom) {
headroom.resume(); headroom.resume();
} }
@ -172,13 +180,13 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
inputManager.off(this, onInputCommand); inputManager.off(this, onInputCommand);
} }
var headroom = this.headroom; const headroom = this.headroom;
if (headroom) { if (headroom) {
headroom.destroy(); headroom.destroy();
this.headroom = null; this.headroom = null;
} }
var scrollerInstance = this.scroller; const scrollerInstance = this.scroller;
if (scrollerInstance) { if (scrollerInstance) {
scrollerInstance.destroy(); scrollerInstance.destroy();
this.scroller = null; this.scroller = null;
@ -189,4 +197,5 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
prototype: ScrollerPrototype, prototype: ScrollerPrototype,
extends: 'div' extends: 'div'
}); });
});
/* eslint-enable indent */

94
src/elements/emby-slider/emby-slider.js
View file

@ -1,15 +1,22 @@
define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager, keyboardnavigation) { import browser from 'browser';
'use strict'; import dom from 'dom';
import layoutManager from 'layoutManager';
import keyboardnavigation from 'keyboardnavigation';
import 'css!./emby-slider';
import 'webcomponents';
import 'emby-input';
var EmbySliderPrototype = Object.create(HTMLInputElement.prototype); /* eslint-disable indent */
var supportsValueSetOverride = false; let EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
var enableWidthWithTransform; let supportsValueSetOverride = false;
let enableWidthWithTransform;
if (Object.getOwnPropertyDescriptor && Object.defineProperty) { if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value'); const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
// descriptor returning null in webos // descriptor returning null in webos
if (descriptor && descriptor.configurable) { if (descriptor && descriptor.configurable) {
supportsValueSetOverride = true; supportsValueSetOverride = true;
@ -24,14 +31,14 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
* @return {number} slider fraction * @return {number} slider fraction
*/ */
function mapClientToFraction(range, clientX) { function mapClientToFraction(range, clientX) {
var rect = range.sliderBubbleTrack.getBoundingClientRect(); const rect = range.sliderBubbleTrack.getBoundingClientRect();
var fraction = (clientX - rect.left) / rect.width; let fraction = (clientX - rect.left) / rect.width;
// Snap to step // Snap to step
var valueRange = range.max - range.min; const valueRange = range.max - range.min;
if (range.step !== 'any' && valueRange !== 0) { if (range.step !== 'any' && valueRange !== 0) {
var step = (range.step || 1) / valueRange; const step = (range.step || 1) / valueRange;
fraction = Math.round(fraction / step) * step; fraction = Math.round(fraction / step) * step;
} }
@ -46,7 +53,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
* @return {number} slider value * @return {number} slider value
*/ */
function mapFractionToValue(range, fraction) { function mapFractionToValue(range, fraction) {
var value = (range.max - range.min) * fraction; let value = (range.max - range.min) * fraction;
// Snap to step // Snap to step
if (range.step !== 'any') { if (range.step !== 'any') {
@ -67,8 +74,8 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
* @return {number} slider fraction * @return {number} slider fraction
*/ */
function mapValueToFraction(range, value) { function mapValueToFraction(range, value) {
var valueRange = range.max - range.min; const valueRange = range.max - range.min;
var fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0; const fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0;
return Math.min(Math.max(fraction, 0), 1); return Math.min(Math.max(fraction, 0), 1);
} }
@ -84,18 +91,18 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
return; return;
} }
var range = this; const range = this;
var value = range.value; const value = range.value;
// put this on a callback. Doing it within the event sometimes causes the slider to get hung up and not respond // put this on a callback. Doing it within the event sometimes causes the slider to get hung up and not respond
// Keep only one per slider frame request // Keep only one per slider frame request
cancelAnimationFrame(range.updateValuesFrame); cancelAnimationFrame(range.updateValuesFrame);
range.updateValuesFrame = requestAnimationFrame(function () { range.updateValuesFrame = requestAnimationFrame(function () {
var backgroundLower = range.backgroundLower; let backgroundLower = range.backgroundLower;
if (backgroundLower) { if (backgroundLower) {
var fraction = (value - range.min) / (range.max - range.min); let fraction = (value - range.min) / (range.max - range.min);
if (enableWidthWithTransform) { if (enableWidthWithTransform) {
backgroundLower.style.transform = 'scaleX(' + (fraction) + ')'; backgroundLower.style.transform = 'scaleX(' + (fraction) + ')';
@ -110,10 +117,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
function updateBubble(range, value, bubble, bubbleText) { function updateBubble(range, value, bubble, bubbleText) {
requestAnimationFrame(function () { requestAnimationFrame(function () {
var bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect(); const bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect();
var bubbleRect = bubble.getBoundingClientRect(); const bubbleRect = bubble.getBoundingClientRect();
var bubblePos = bubbleTrackRect.width * value / 100; let bubblePos = bubbleTrackRect.width * value / 100;
bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2); bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2);
bubble.style.left = bubblePos + 'px'; bubble.style.left = bubblePos + 'px';
@ -158,10 +165,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
this.classList.add('show-focus'); this.classList.add('show-focus');
} }
var containerElement = this.parentNode; const containerElement = this.parentNode;
containerElement.classList.add('mdl-slider-container'); containerElement.classList.add('mdl-slider-container');
var htmlToInsert = ''; let htmlToInsert = '';
htmlToInsert += '<div class="mdl-slider-background-flex-container">'; htmlToInsert += '<div class="mdl-slider-background-flex-container">';
htmlToInsert += '<div class="mdl-slider-background-flex">'; htmlToInsert += '<div class="mdl-slider-background-flex">';
@ -187,9 +194,9 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
this.sliderBubbleTrack = containerElement.querySelector('.sliderBubbleTrack'); this.sliderBubbleTrack = containerElement.querySelector('.sliderBubbleTrack');
this.backgroundLower = containerElement.querySelector('.mdl-slider-background-lower'); this.backgroundLower = containerElement.querySelector('.mdl-slider-background-lower');
this.backgroundUpper = containerElement.querySelector('.mdl-slider-background-upper'); this.backgroundUpper = containerElement.querySelector('.mdl-slider-background-upper');
var sliderBubble = containerElement.querySelector('.sliderBubble'); const sliderBubble = containerElement.querySelector('.sliderBubble');
var hasHideClass = sliderBubble.classList.contains('hide'); let hasHideClass = sliderBubble.classList.contains('hide');
dom.addEventListener(this, 'input', function (e) { dom.addEventListener(this, 'input', function (e) {
this.dragging = true; this.dragging = true;
@ -198,7 +205,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
updateValues.call(this); updateValues.call(this);
} }
var bubbleValue = mapValueToFraction(this, this.value) * 100; const bubbleValue = mapValueToFraction(this, this.value) * 100;
updateBubble(this, bubbleValue, sliderBubble); updateBubble(this, bubbleValue, sliderBubble);
if (hasHideClass) { if (hasHideClass) {
@ -223,10 +230,11 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
passive: true passive: true
}); });
/* eslint-disable-next-line compat/compat */
dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) { dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) {
if (!this.dragging) { if (!this.dragging) {
var bubbleValue = mapClientToFraction(this, e.clientX) * 100; const bubbleValue = mapClientToFraction(this, e.clientX) * 100;
updateBubble(this, bubbleValue, sliderBubble); updateBubble(this, bubbleValue, sliderBubble);
@ -240,6 +248,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
passive: true passive: true
}); });
/* eslint-disable-next-line compat/compat */
dom.addEventListener(this, (window.PointerEvent ? 'pointerleave' : 'mouseleave'), function () { dom.addEventListener(this, (window.PointerEvent ? 'pointerleave' : 'mouseleave'), function () {
sliderBubble.classList.add('hide'); sliderBubble.classList.add('hide');
hasHideClass = true; hasHideClass = true;
@ -256,7 +265,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
this.touched = true; this.touched = true;
var fraction = mapClientToFraction(this, e.targetTouches[0].clientX); const fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
this.value = mapFractionToValue(this, fraction); this.value = mapFractionToValue(this, fraction);
this.dispatchEvent(new Event('input', { this.dispatchEvent(new Event('input', {
@ -276,7 +285,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
return; return;
} }
var fraction = mapClientToFraction(this, e.targetTouches[0].clientX); const fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
this.value = mapFractionToValue(this, fraction); this.value = mapFractionToValue(this, fraction);
this.dispatchEvent(new Event('input', { this.dispatchEvent(new Event('input', {
@ -288,7 +297,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
}); });
dom.addEventListener(this, 'touchend', function (e) { dom.addEventListener(this, 'touchend', function (e) {
var range = this; const range = this;
setTimeout(function () { setTimeout(function () {
range.touched = false; range.touched = false;
@ -314,12 +323,12 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
* Keyboard dragging timeout. * Keyboard dragging timeout.
* After this delay "change" event will be fired. * After this delay "change" event will be fired.
*/ */
var KeyboardDraggingTimeout = 1000; const KeyboardDraggingTimeout = 1000;
/** /**
* Keyboard dragging timer. * Keyboard dragging timer.
*/ */
var keyboardDraggingTimer; let keyboardDraggingTimer;
/** /**
* Start keyboard dragging. * Start keyboard dragging.
@ -346,7 +355,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
elem.keyboardDragging = false; elem.keyboardDragging = false;
var event = new Event('change', { const event = new Event('change', {
bubbles: true, bubbles: true,
cancelable: false cancelable: false
}); });
@ -364,7 +373,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
elem.value = Math.max(elem.min, Math.min(elem.max, parseFloat(elem.value) + delta)); elem.value = Math.max(elem.min, Math.min(elem.max, parseFloat(elem.value) + delta));
var event = new Event('input', { const event = new Event('input', {
bubbles: true, bubbles: true,
cancelable: false cancelable: false
}); });
@ -414,10 +423,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
function setRange(elem, startPercent, endPercent) { function setRange(elem, startPercent, endPercent) {
var style = elem.style; const style = elem.style;
style.left = Math.max(startPercent, 0) + '%'; style.left = Math.max(startPercent, 0) + '%';
var widthPercent = endPercent - startPercent; const widthPercent = endPercent - startPercent;
style.width = Math.max(Math.min(widthPercent, 100), 0) + '%'; style.width = Math.max(Math.min(widthPercent, 100), 0) + '%';
} }
@ -438,7 +447,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
EmbySliderPrototype.setBufferedRanges = function (ranges, runtime, position) { EmbySliderPrototype.setBufferedRanges = function (ranges, runtime, position) {
var elem = this.backgroundUpper; const elem = this.backgroundUpper;
if (!elem) { if (!elem) {
return; return;
} }
@ -449,9 +458,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
position = (position / runtime) * 100; position = (position / runtime) * 100;
} }
for (var i = 0, length = ranges.length; i < length; i++) { for (const range in ranges) {
var range = ranges[i];
if (position != null) { if (position != null) {
if (position >= range.end) { if (position >= range.end) {
@ -468,7 +475,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
EmbySliderPrototype.setIsClear = function (isClear) { EmbySliderPrototype.setIsClear = function (isClear) {
var backgroundLower = this.backgroundLower; const backgroundLower = this.backgroundLower;
if (backgroundLower) { if (backgroundLower) {
if (isClear) { if (isClear) {
backgroundLower.classList.add('mdl-slider-background-lower-clear'); backgroundLower.classList.add('mdl-slider-background-lower-clear');
@ -479,7 +486,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
}; };
function startInterval(range) { function startInterval(range) {
var interval = range.interval; const interval = range.interval;
if (interval) { if (interval) {
clearInterval(interval); clearInterval(interval);
} }
@ -488,7 +495,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
EmbySliderPrototype.detachedCallback = function () { EmbySliderPrototype.detachedCallback = function () {
var interval = this.interval; const interval = this.interval;
if (interval) { if (interval) {
clearInterval(interval); clearInterval(interval);
} }
@ -501,4 +508,5 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
prototype: EmbySliderPrototype, prototype: EmbySliderPrototype,
extends: 'input' extends: 'input'
}); });
});
/* eslint-enable indent */

79
src/elements/emby-tabs/emby-tabs.js
View file

@ -1,9 +1,17 @@
define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'registerElement', 'css!./emby-tabs', 'scrollStyles'], function (dom, scroller, browser, layoutManager, focusManager) { import dom from 'dom';
'use strict'; import scroller from 'scroller';
import browser from 'browser';
import layoutManager from 'layoutManager';
import focusManager from 'focusManager';
import 'registerElement';
import 'css!./emby-tabs';
import 'scrollStyles';
var EmbyTabs = Object.create(HTMLDivElement.prototype); /* eslint-disable indent */
var buttonClass = 'emby-tab-button';
var activeButtonClass = buttonClass + '-active'; let EmbyTabs = Object.create(HTMLDivElement.prototype);
const buttonClass = 'emby-tab-button';
const activeButtonClass = buttonClass + '-active';
function setActiveTabButton(tabs, newButton, oldButton, animate) { function setActiveTabButton(tabs, newButton, oldButton, animate) {
@ -16,14 +24,14 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
} }
function removeActivePanelClass(tabs, index) { function removeActivePanelClass(tabs, index) {
var tabPanel = getTabPanel(tabs, index); let tabPanel = getTabPanel(tabs, index);
if (tabPanel) { if (tabPanel) {
tabPanel.classList.remove('is-active'); tabPanel.classList.remove('is-active');
} }
} }
function addActivePanelClass(tabs, index) { function addActivePanelClass(tabs, index) {
var tabPanel = getTabPanel(tabs, index); let tabPanel = getTabPanel(tabs, index);
if (tabPanel) { if (tabPanel) {
tabPanel.classList.add('is-active'); tabPanel.classList.add('is-active');
} }
@ -31,9 +39,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
function fadeInRight(elem) { function fadeInRight(elem) {
var pct = browser.mobile ? '4%' : '0.5%'; const pct = browser.mobile ? '4%' : '0.5%';
var keyframes = [ const keyframes = [
{ opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 }, { opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 },
{ opacity: '1', transform: 'none', offset: 1 }]; { opacity: '1', transform: 'none', offset: 1 }];
@ -56,7 +64,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
removeActivePanelClass(tabs, previousIndex); removeActivePanelClass(tabs, previousIndex);
} }
var newPanel = getTabPanel(tabs, index); let newPanel = getTabPanel(tabs, index);
if (newPanel) { if (newPanel) {
// animate new panel ? // animate new panel ?
@ -70,10 +78,10 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
function onClick(e) { function onClick(e) {
var tabs = this; const tabs = this;
var current = tabs.querySelector('.' + activeButtonClass); const current = tabs.querySelector('.' + activeButtonClass);
var tabButton = dom.parentWithClass(e.target, buttonClass); const tabButton = dom.parentWithClass(e.target, buttonClass);
if (tabButton && tabButton !== current) { if (tabButton && tabButton !== current) {
@ -81,11 +89,11 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
current.classList.remove(activeButtonClass); current.classList.remove(activeButtonClass);
} }
var previousIndex = current ? parseInt(current.getAttribute('data-index')) : null; const previousIndex = current ? parseInt(current.getAttribute('data-index')) : null;
setActiveTabButton(tabs, tabButton, current, true); setActiveTabButton(tabs, tabButton, current, true);
var index = parseInt(tabButton.getAttribute('data-index')); const index = parseInt(tabButton.getAttribute('data-index'));
triggerBeforeTabChange(tabs, index, previousIndex); triggerBeforeTabChange(tabs, index, previousIndex);
@ -115,7 +123,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
return; return;
} }
var contentScrollSlider = tabs.querySelector('.emby-tabs-slider'); const contentScrollSlider = tabs.querySelector('.emby-tabs-slider');
if (contentScrollSlider) { if (contentScrollSlider) {
tabs.scroller = new scroller(tabs, { tabs.scroller = new scroller(tabs, {
horizontal: 1, horizontal: 1,
@ -160,7 +168,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
EmbyTabs.focus = function () { EmbyTabs.focus = function () {
var selected = this.querySelector('.' + activeButtonClass); const selected = this.querySelector('.' + activeButtonClass);
if (selected) { if (selected) {
focusManager.focus(selected); focusManager.focus(selected);
@ -180,16 +188,16 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
initScroller(this); initScroller(this);
var current = this.querySelector('.' + activeButtonClass); const current = this.querySelector('.' + activeButtonClass);
var currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0'); const currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0');
if (currentIndex !== -1) { if (currentIndex !== -1) {
this.selectedTabIndex = currentIndex; this.selectedTabIndex = currentIndex;
var tabButtons = this.querySelectorAll('.' + buttonClass); const tabButtons = this.querySelectorAll('.' + buttonClass);
var newTabButton = tabButtons[currentIndex]; const newTabButton = tabButtons[currentIndex];
if (newTabButton) { if (newTabButton) {
setActiveTabButton(this, newTabButton, current, false); setActiveTabButton(this, newTabButton, current, false);
@ -221,18 +229,18 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
EmbyTabs.selectedIndex = function (selected, triggerEvent) { EmbyTabs.selectedIndex = function (selected, triggerEvent) {
var tabs = this; const tabs = this;
if (selected == null) { if (selected == null) {
return tabs.selectedTabIndex || 0; return tabs.selectedTabIndex || 0;
} }
var current = tabs.selectedIndex(); const current = tabs.selectedIndex();
tabs.selectedTabIndex = selected; tabs.selectedTabIndex = selected;
var tabButtons = tabs.querySelectorAll('.' + buttonClass); const tabButtons = tabs.querySelectorAll('.' + buttonClass);
if (current === selected || triggerEvent === false) { if (current === selected || triggerEvent === false) {
@ -244,7 +252,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
} }
})); }));
var currentTabButton = tabButtons[current]; let currentTabButton = tabButtons[current];
setActiveTabButton(tabs, tabButtons[selected], currentTabButton, false); setActiveTabButton(tabs, tabButtons[selected], currentTabButton, false);
if (current !== selected && currentTabButton) { if (current !== selected && currentTabButton) {
@ -262,7 +270,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
function getSibling(elem, method) { function getSibling(elem, method) {
var sibling = elem[method]; let sibling = elem[method];
while (sibling) { while (sibling) {
if (sibling.classList.contains(buttonClass)) { if (sibling.classList.contains(buttonClass)) {
@ -280,9 +288,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
EmbyTabs.selectNext = function () { EmbyTabs.selectNext = function () {
var current = getSelectedTabButton(this); const current = getSelectedTabButton(this);
var sibling = getSibling(current, 'nextSibling'); const sibling = getSibling(current, 'nextSibling');
if (sibling) { if (sibling) {
onClick.call(this, { onClick.call(this, {
@ -293,9 +301,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
EmbyTabs.selectPrevious = function () { EmbyTabs.selectPrevious = function () {
var current = getSelectedTabButton(this); const current = getSelectedTabButton(this);
var sibling = getSibling(current, 'previousSibling'); const sibling = getSibling(current, 'previousSibling');
if (sibling) { if (sibling) {
onClick.call(this, { onClick.call(this, {
@ -306,14 +314,14 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
EmbyTabs.triggerBeforeTabChange = function (selected) { EmbyTabs.triggerBeforeTabChange = function (selected) {
var tabs = this; const tabs = this;
triggerBeforeTabChange(tabs, tabs.selectedIndex()); triggerBeforeTabChange(tabs, tabs.selectedIndex());
}; };
EmbyTabs.triggerTabChange = function (selected) { EmbyTabs.triggerTabChange = function (selected) {
var tabs = this; const tabs = this;
tabs.dispatchEvent(new CustomEvent('tabchange', { tabs.dispatchEvent(new CustomEvent('tabchange', {
detail: { detail: {
@ -324,8 +332,8 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
EmbyTabs.setTabEnabled = function (index, enabled) { EmbyTabs.setTabEnabled = function (index, enabled) {
var tabs = this; const tabs = this;
var btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]'); const btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
if (enabled) { if (enabled) {
btn.classList.remove('hide'); btn.classList.remove('hide');
@ -338,4 +346,5 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
prototype: EmbyTabs, prototype: EmbyTabs,
extends: 'div' extends: 'div'
}); });
});
/* eslint-enable indent */

40
src/elements/emby-textarea/emby-textarea.js
View file

@ -1,8 +1,13 @@
define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'emby-input'], function (layoutManager, browser) { import layoutManager from 'layoutManager';
'use strict'; import browser from 'browser';
import 'css!./emby-textarea';
import 'registerElement';
import 'emby-input';
/* eslint-disable indent */
function autoGrow(textarea, maxLines) { function autoGrow(textarea, maxLines) {
var self = this; const self = this;
if (maxLines === undefined) { if (maxLines === undefined) {
maxLines = 999; maxLines = 999;
@ -14,17 +19,17 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
* @returns {number} * @returns {number}
*/ */
self.getOffset = function (textarea) { self.getOffset = function (textarea) {
var style = window.getComputedStyle(textarea, null); const style = window.getComputedStyle(textarea, null);
var props = ['paddingTop', 'paddingBottom']; const props = ['paddingTop', 'paddingBottom'];
var offset = 0; let offset = 0;
for (var i = 0; i < props.length; i++) { for (let i = 0; i < props.length; i++) {
offset += parseInt(style[props[i]]); offset += parseInt(style[props[i]]);
} }
return offset; return offset;
}; };
var offset; let offset;
function reset() { function reset() {
textarea.rows = 1; textarea.rows = 1;
offset = self.getOffset(textarea); offset = self.getOffset(textarea);
@ -43,8 +48,8 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
textarea.rows = 3; textarea.rows = 3;
return; return;
} }
var newHeight = 0; let newHeight = 0;
var hasGrown = false; let hasGrown = false;
if ((textarea.scrollHeight - offset) > self.maxAllowedHeight) { if ((textarea.scrollHeight - offset) > self.maxAllowedHeight) {
textarea.style.overflowY = 'scroll'; textarea.style.overflowY = 'scroll';
@ -67,17 +72,17 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
autogrowFn(); autogrowFn();
} }
var EmbyTextAreaPrototype = Object.create(HTMLTextAreaElement.prototype); const EmbyTextAreaPrototype = Object.create(HTMLTextAreaElement.prototype);
var elementId = 0; let elementId = 0;
if (Object.getOwnPropertyDescriptor && Object.defineProperty) { if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
var descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value'); const descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
// descriptor returning null in webos // descriptor returning null in webos
if (descriptor && descriptor.configurable) { if (descriptor && descriptor.configurable) {
var baseSetMethod = descriptor.set; const baseSetMethod = descriptor.set;
descriptor.set = function (value) { descriptor.set = function (value) {
baseSetMethod.call(this, value); baseSetMethod.call(this, value);
@ -108,8 +113,8 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
this.rows = 1; this.rows = 1;
this.classList.add('emby-textarea'); this.classList.add('emby-textarea');
var parentNode = this.parentNode; const parentNode = this.parentNode;
var label = this.ownerDocument.createElement('label'); const label = this.ownerDocument.createElement('label');
label.innerHTML = this.getAttribute('label') || ''; label.innerHTML = this.getAttribute('label') || '';
label.classList.add('textareaLabel'); label.classList.add('textareaLabel');
@ -136,4 +141,5 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
prototype: EmbyTextAreaPrototype, prototype: EmbyTextAreaPrototype,
extends: 'textarea' extends: 'textarea'
}); });
});
/* eslint-enable indent */

15
src/elements/emby-toggle/emby-toggle.js
View file

@ -1,7 +1,9 @@
define(['css!./emby-toggle', 'registerElement'], function () { import 'css!./emby-toggle';
'use strict'; import 'registerElement';
var EmbyTogglePrototype = Object.create(HTMLInputElement.prototype); /* eslint-disable indent */
const EmbyTogglePrototype = Object.create(HTMLInputElement.prototype);
function onKeyDown(e) { function onKeyDown(e) {
@ -29,11 +31,11 @@ define(['css!./emby-toggle', 'registerElement'], function () {
this.classList.add('mdl-switch__input'); this.classList.add('mdl-switch__input');
var labelElement = this.parentNode; const labelElement = this.parentNode;
labelElement.classList.add('mdl-switch'); labelElement.classList.add('mdl-switch');
labelElement.classList.add('mdl-js-switch'); labelElement.classList.add('mdl-js-switch');
var labelTextElement = labelElement.querySelector('span'); const labelTextElement = labelElement.querySelector('span');
labelElement.insertAdjacentHTML('beforeend', '<div class="mdl-switch__trackContainer"><div class="mdl-switch__track"></div><div class="mdl-switch__thumb"><span class="mdl-switch__focus-helper"></span></div></div>'); labelElement.insertAdjacentHTML('beforeend', '<div class="mdl-switch__trackContainer"><div class="mdl-switch__track"></div><div class="mdl-switch__thumb"><span class="mdl-switch__focus-helper"></span></div></div>');
@ -47,4 +49,5 @@ define(['css!./emby-toggle', 'registerElement'], function () {
prototype: EmbyTogglePrototype, prototype: EmbyTogglePrototype,
extends: 'input' extends: 'input'
}); });
});
/* eslint-enable indent */