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-12

Browse source
This commit is contained in:
Cameron 2020-07-15 09:58:26 +01:00 • committed by GitHub
commit 8549b7632f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 812 additions and 661 deletions
Download patch file Download diff file Expand all files Collapse all files

15
package.json
View file

@ -92,16 +92,21 @@
"test": [ "test": [
"src/components/accessSchedule/accessSchedule.js", "src/components/accessSchedule/accessSchedule.js",
"src/components/actionSheet/actionSheet.js", "src/components/actionSheet/actionSheet.js",
"src/components/alphaPicker/alphaPicker.js",
"src/components/autoFocuser.js", "src/components/autoFocuser.js",
"src/components/cardbuilder/cardBuilder.js", "src/components/cardbuilder/cardBuilder.js",
"src/components/cardbuilder/chaptercardbuilder.js", "src/components/cardbuilder/chaptercardbuilder.js",
"src/components/cardbuilder/peoplecardbuilder.js", "src/components/cardbuilder/peoplecardbuilder.js",
"src/components/directorybrowser/directorybrowser.js",
"src/components/collectionEditor/collectionEditor.js", "src/components/collectionEditor/collectionEditor.js",
"src/components/dialog/dialog.js", "src/components/dialog/dialog.js",
"src/components/dialogHelper/dialogHelper.js", "src/components/dialogHelper/dialogHelper.js",
"src/components/channelMapper/channelMapper.js", "src/components/channelMapper/channelMapper.js",
"src/components/images/imageLoader.js", "src/components/images/imageLoader.js",
"src/components/imageUploader/imageUploader.js",
"src/components/indicators/indicators.js", "src/components/indicators/indicators.js",
"src/components/itemidentifier/itemidentifier.js",
"src/components/itemMediaInfo/itemMediaInfo.js",
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
"src/components/mediaLibraryCreator/mediaLibraryCreator.js", "src/components/mediaLibraryCreator/mediaLibraryCreator.js",
"src/components/mediaLibraryEditor/mediaLibraryEditor.js", "src/components/mediaLibraryEditor/mediaLibraryEditor.js",
@ -135,6 +140,16 @@
"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",
"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",

158
src/components/alphaPicker/alphaPicker.js
View file

@ -1,11 +1,22 @@
define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-button-light', 'material-icons'], function (focusManager, layoutManager, dom) { /* eslint-disable indent */
'use strict';
var selectedButtonClass = 'alphaPickerButton-selected'; /**
* Module alphaPicker.
* @module components/alphaPicker/alphaPicker
*/
import focusManager from 'focusManager';
import layoutManager from 'layoutManager';
import dom from 'dom';
import 'css!./style.css';
import 'paper-icon-button-light';
import 'material-icons';
const selectedButtonClass = 'alphaPickerButton-selected';
function focus() { function focus() {
var scope = this; const scope = this;
var selected = scope.querySelector('.' + selectedButtonClass); const selected = scope.querySelector(`.${selectedButtonClass}`);
if (selected) { if (selected) {
focusManager.focus(selected); focusManager.focus(selected);
@ -16,7 +27,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
function getAlphaPickerButtonClassName(vertical) { function getAlphaPickerButtonClassName(vertical) {
var alphaPickerButtonClassName = 'alphaPickerButton'; let alphaPickerButtonClassName = 'alphaPickerButton';
if (layoutManager.tv) { if (layoutManager.tv) {
alphaPickerButtonClassName += ' alphaPickerButton-tv'; alphaPickerButtonClassName += ' alphaPickerButton-tv';
@ -30,12 +41,12 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
} }
function getLetterButton(l, vertical) { function getLetterButton(l, vertical) {
return '<button data-value="' + l + '" class="' + getAlphaPickerButtonClassName(vertical) + '">' + l + '</button>'; return `<button data-value="${l}" class="${getAlphaPickerButtonClassName(vertical)}">${l}</button>`;
} }
function mapLetters(letters, vertical) { function mapLetters(letters, vertical) {
return letters.map(function (l) { return letters.map(l => {
return getLetterButton(l, vertical); return getLetterButton(l, vertical);
}); });
} }
@ -48,26 +59,26 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
element.classList.add('alphaPicker-tv'); element.classList.add('alphaPicker-tv');
} }
var vertical = element.classList.contains('alphaPicker-vertical'); const vertical = element.classList.contains('alphaPicker-vertical');
if (!vertical) { if (!vertical) {
element.classList.add('focuscontainer-x'); element.classList.add('focuscontainer-x');
} }
var html = ''; let html = '';
var letters; let letters;
var alphaPickerButtonClassName = getAlphaPickerButtonClassName(vertical); const alphaPickerButtonClassName = getAlphaPickerButtonClassName(vertical);
var rowClassName = 'alphaPickerRow'; let rowClassName = 'alphaPickerRow';
if (vertical) { if (vertical) {
rowClassName += ' alphaPickerRow-vertical'; rowClassName += ' alphaPickerRow-vertical';
} }
html += '<div class="' + rowClassName + '">'; html += `<div class="${rowClassName}">`;
if (options.mode === 'keyboard') { if (options.mode === 'keyboard') {
html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><span class="material-icons alphaPickerButtonIcon space_bar"></span></button>'; html += `<button data-value=" " is="paper-icon-button-light" class="${alphaPickerButtonClassName}"><span class="material-icons alphaPickerButtonIcon space_bar"></span></button>`;
} else { } else {
letters = ['#']; letters = ['#'];
html += mapLetters(letters, vertical).join(''); html += mapLetters(letters, vertical).join('');
@ -77,11 +88,11 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
html += mapLetters(letters, vertical).join(''); html += mapLetters(letters, vertical).join('');
if (options.mode === 'keyboard') { if (options.mode === 'keyboard') {
html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><span class="material-icons alphaPickerButtonIcon backspace"></span></button>'; html += `<button data-value="backspace" is="paper-icon-button-light" class="${alphaPickerButtonClassName}"><span class="material-icons alphaPickerButtonIcon backspace"></span></button>`;
html += '</div>'; html += '</div>';
letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
html += '<div class="' + rowClassName + '">'; html += `<div class="${rowClassName}">`;
html += '<br/>'; html += '<br/>';
html += mapLetters(letters, vertical).join(''); html += mapLetters(letters, vertical).join('');
html += '</div>'; html += '</div>';
@ -95,47 +106,47 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
element.focus = focus; element.focus = focus;
} }
function AlphaPicker(options) { export class AlphaPicker {
constructor(options) {
var self = this;
this.options = options; this.options = options;
var element = options.element; const element = options.element;
var itemsContainer = options.itemsContainer; const itemsContainer = options.itemsContainer;
var itemClass = options.itemClass; const itemClass = options.itemClass;
var itemFocusValue; let itemFocusValue;
var itemFocusTimeout; let itemFocusTimeout;
function onItemFocusTimeout() { function onItemFocusTimeout() {
itemFocusTimeout = null; itemFocusTimeout = null;
self.value(itemFocusValue); this.value(itemFocusValue);
} }
var alphaFocusedElement; let alphaFocusedElement;
var alphaFocusTimeout; let alphaFocusTimeout;
function onAlphaFocusTimeout() { function onAlphaFocusTimeout() {
alphaFocusTimeout = null; alphaFocusTimeout = null;
if (document.activeElement === alphaFocusedElement) { if (document.activeElement === alphaFocusedElement) {
var value = alphaFocusedElement.getAttribute('data-value'); const value = alphaFocusedElement.getAttribute('data-value');
self.value(value, true); this.value(value, true);
} }
} }
function onAlphaPickerInKeyboardModeClick(e) { function onAlphaPickerInKeyboardModeClick(e) {
var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
if (alphaPickerButton) { if (alphaPickerButton) {
var value = alphaPickerButton.getAttribute('data-value'); const value = alphaPickerButton.getAttribute('data-value');
element.dispatchEvent(new CustomEvent('alphavalueclicked', { element.dispatchEvent(new CustomEvent('alphavalueclicked', {
cancelable: false, cancelable: false,
detail: { detail: {
value: value value
} }
})); }));
} }
@ -143,14 +154,14 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
function onAlphaPickerClick(e) { function onAlphaPickerClick(e) {
var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
if (alphaPickerButton) { if (alphaPickerButton) {
var value = alphaPickerButton.getAttribute('data-value'); const value = alphaPickerButton.getAttribute('data-value');
if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) { if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) {
self.value(null, true); this.value(null, true);
} else { } else {
self.value(value, true); this.value(value, true);
} }
} }
} }
@ -162,7 +173,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
alphaFocusTimeout = null; alphaFocusTimeout = null;
} }
var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
if (alphaPickerButton) { if (alphaPickerButton) {
alphaFocusedElement = alphaPickerButton; alphaFocusedElement = alphaPickerButton;
@ -172,10 +183,10 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
function onItemsFocusIn(e) { function onItemsFocusIn(e) {
var item = dom.parentWithClass(e.target, itemClass); const item = dom.parentWithClass(e.target, itemClass);
if (item) { if (item) {
var prefix = item.getAttribute('data-prefix'); const prefix = item.getAttribute('data-prefix');
if (prefix && prefix.length) { if (prefix && prefix.length) {
itemFocusValue = prefix[0]; itemFocusValue = prefix[0];
@ -187,7 +198,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
} }
} }
self.enabled = function (enabled) { this.enabled = function (enabled) {
if (enabled) { if (enabled) {
@ -223,11 +234,11 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
this.visible(true); this.visible(true);
} }
AlphaPicker.prototype.value = function (value, applyValue) { value(value, applyValue) {
var element = this.options.element; const element = this.options.element;
var btn; let btn;
var selected; let selected;
if (value !== undefined) { if (value !== undefined) {
if (value != null) { if (value != null) {
@ -236,12 +247,12 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
this._currentValue = value; this._currentValue = value;
if (this.options.mode !== 'keyboard') { if (this.options.mode !== 'keyboard') {
selected = element.querySelector('.' + selectedButtonClass); selected = element.querySelector(`.${selectedButtonClass}`);
try { try {
btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']'); btn = element.querySelector(`.alphaPickerButton[data-value='${value}']`);
} catch (err) { } catch (err) {
console.error('error in querySelector: ' + err); console.error('error in querySelector:', err);
} }
if (btn && btn !== selected) { if (btn && btn !== selected) {
@ -254,7 +265,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
} else { } else {
this._currentValue = value; this._currentValue = value;
selected = element.querySelector('.' + selectedButtonClass); selected = element.querySelector(`.${selectedButtonClass}`);
if (selected) { if (selected) {
selected.classList.remove(selectedButtonClass); selected.classList.remove(selectedButtonClass);
} }
@ -265,57 +276,58 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
element.dispatchEvent(new CustomEvent('alphavaluechanged', { element.dispatchEvent(new CustomEvent('alphavaluechanged', {
cancelable: false, cancelable: false,
detail: { detail: {
value: value value
} }
})); }));
} }
return this._currentValue; return this._currentValue;
}; }
AlphaPicker.prototype.on = function (name, fn) { on(name, fn) {
var element = this.options.element; const element = this.options.element;
element.addEventListener(name, fn); element.addEventListener(name, fn);
}; }
AlphaPicker.prototype.off = function (name, fn) { off(name, fn) {
var element = this.options.element; const element = this.options.element;
element.removeEventListener(name, fn); element.removeEventListener(name, fn);
}; }
AlphaPicker.prototype.visible = function (visible) { visible(visible) {
var element = this.options.element; const element = this.options.element;
element.style.visibility = visible ? 'visible' : 'hidden'; element.style.visibility = visible ? 'visible' : 'hidden';
}; }
AlphaPicker.prototype.values = function () { values() {
var element = this.options.element; const element = this.options.element;
var elems = element.querySelectorAll('.alphaPickerButton'); const elems = element.querySelectorAll('.alphaPickerButton');
var values = []; const values = [];
for (var i = 0, length = elems.length; i < length; i++) { for (let i = 0, length = elems.length; i < length; i++) {
values.push(elems[i].getAttribute('data-value')); values.push(elems[i].getAttribute('data-value'));
} }
return values; return values;
}; }
AlphaPicker.prototype.focus = function () { focus() {
var element = this.options.element; const element = this.options.element;
focusManager.autoFocus(element, true); focusManager.autoFocus(element, true);
}; }
AlphaPicker.prototype.destroy = function () { destroy() {
var element = this.options.element; const element = this.options.element;
this.enabled(false); this.enabled(false);
element.classList.remove('focuscontainer-x'); element.classList.remove('focuscontainer-x');
this.options = null; this.options = null;
}; }
}
return AlphaPicker; /* eslint-enable indent */
}); export default AlphaPicker;

122
src/components/directorybrowser/directorybrowser.js
View file

@ -1,9 +1,19 @@
define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-input', 'paper-icon-button-light', 'css!./directorybrowser', 'formDialogStyle', 'emby-button'], function(loading, dialogHelper, dom, globalize) { import loading from 'loading';
'use strict'; import dialogHelper from 'dialogHelper';
import dom from 'dom';
import globalize from 'globalize';
import 'listViewStyle';
import 'emby-input';
import 'paper-icon-button-light';
import 'css!./directorybrowser';
import 'formDialogStyle';
import 'emby-button';
/* eslint-disable indent */
function getSystemInfo() { function getSystemInfo() {
return systemInfo ? Promise.resolve(systemInfo) : ApiClient.getPublicSystemInfo().then( return systemInfo ? Promise.resolve(systemInfo) : ApiClient.getPublicSystemInfo().then(
function(info) { info => {
systemInfo = info; systemInfo = info;
return info; return info;
} }
@ -21,9 +31,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
loading.show(); loading.show();
var promises = []; const promises = [];
if ('Network' === path) { if (path === 'Network') {
promises.push(ApiClient.getNetworkDevices()); promises.push(ApiClient.getNetworkDevices());
} else { } else {
if (path) { if (path) {
@ -35,10 +45,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
} }
Promise.all(promises).then( Promise.all(promises).then(
function(responses) { responses => {
var folders = responses[0]; const folders = responses[0];
var parentPath = responses[1] || ''; const parentPath = responses[1] || '';
var html = ''; let html = '';
page.querySelector('.results').scrollTop = 0; page.querySelector('.results').scrollTop = 0;
page.querySelector('#txtDirectoryPickerPath').value = path || ''; page.querySelector('#txtDirectoryPickerPath').value = path || '';
@ -46,9 +56,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
if (path) { if (path) {
html += getItem('lnkPath lnkDirectory', '', parentPath, '...'); html += getItem('lnkPath lnkDirectory', '', parentPath, '...');
} }
for (var i = 0, length = folders.length; i < length; i++) { for (let i = 0, length = folders.length; i < length; i++) {
var folder = folders[i]; const folder = folders[i];
var cssClass = 'File' === folder.Type ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory'; const cssClass = folder.Type === 'File' ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory';
html += getItem(cssClass, folder.Type, folder.Path, folder.Name); html += getItem(cssClass, folder.Type, folder.Path, folder.Name);
} }
@ -58,7 +68,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
page.querySelector('.results').innerHTML = html; page.querySelector('.results').innerHTML = html;
loading.hide(); loading.hide();
}, function() { }, () => {
if (updatePathOnError) { if (updatePathOnError) {
page.querySelector('#txtDirectoryPickerPath').value = ''; page.querySelector('#txtDirectoryPickerPath').value = '';
page.querySelector('.results').innerHTML = ''; page.querySelector('.results').innerHTML = '';
@ -69,8 +79,8 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
} }
function getItem(cssClass, type, path, name) { function getItem(cssClass, type, path, name) {
var html = ''; let html = '';
html += '<div class="listItem listItem-border ' + cssClass + '" data-type="' + type + '" data-path="' + path + '">'; html += `<div class="listItem listItem-border ${cssClass}" data-type="${type}" data-path="${path}">`;
html += '<div class="listItemBody" style="padding-left:0;padding-top:.5em;padding-bottom:.5em;">'; html += '<div class="listItemBody" style="padding-left:0;padding-top:.5em;padding-bottom:.5em;">';
html += '<div class="listItemBodyText">'; html += '<div class="listItemBodyText">';
html += name; html += name;
@ -82,19 +92,19 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
} }
function getEditorHtml(options, systemInfo) { function getEditorHtml(options, systemInfo) {
var html = ''; let html = '';
html += '<div class="formDialogContent scrollY">'; html += '<div class="formDialogContent scrollY">';
html += '<div class="dialogContentInner dialog-content-centered" style="padding-top:2em;">'; html += '<div class="dialogContentInner dialog-content-centered" style="padding-top:2em;">';
if (!options.pathReadOnly) { if (!options.pathReadOnly) {
var instruction = options.instruction ? options.instruction + '<br/><br/>' : ''; const instruction = options.instruction ? `${options.instruction}<br/><br/>` : '';
html += '<div class="infoBanner" style="margin-bottom:1.5em;">'; html += '<div class="infoBanner" style="margin-bottom:1.5em;">';
html += instruction; html += instruction;
if ('bsd' === systemInfo.OperatingSystem.toLowerCase()) { if (systemInfo.OperatingSystem.toLowerCase() === 'bsd') {
html += '<br/>'; html += '<br/>';
html += '<br/>'; html += '<br/>';
html += globalize.translate('MessageDirectoryPickerBSDInstruction'); html += globalize.translate('MessageDirectoryPickerBSDInstruction');
html += '<br/>'; html += '<br/>';
} else if ('linux' === systemInfo.OperatingSystem.toLowerCase()) { } else if (systemInfo.OperatingSystem.toLowerCase() === 'linux') {
html += '<br/>'; html += '<br/>';
html += '<br/>'; html += '<br/>';
html += globalize.translate('MessageDirectoryPickerLinuxInstruction'); html += globalize.translate('MessageDirectoryPickerLinuxInstruction');
@ -105,17 +115,17 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
html += '<form style="margin:auto;">'; html += '<form style="margin:auto;">';
html += '<div class="inputContainer" style="display: flex; align-items: center;">'; html += '<div class="inputContainer" style="display: flex; align-items: center;">';
html += '<div style="flex-grow:1;">'; html += '<div style="flex-grow:1;">';
var labelKey; let labelKey;
if (options.includeFiles !== true) { if (options.includeFiles !== true) {
labelKey = 'LabelFolder'; labelKey = 'LabelFolder';
} else { } else {
labelKey = 'LabelPath'; labelKey = 'LabelPath';
} }
var readOnlyAttribute = options.pathReadOnly ? ' readonly' : ''; const readOnlyAttribute = options.pathReadOnly ? ' readonly' : '';
html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ' + readOnlyAttribute + ' label="' + globalize.translate(labelKey) + '"/>'; html += `<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ${readOnlyAttribute} label="${globalize.translate(labelKey)}"/>`;
html += '</div>'; html += '</div>';
if (!readOnlyAttribute) { if (!readOnlyAttribute) {
html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="' + globalize.translate('ButtonRefresh') + '"><span class="material-icons search"></span></button>'; html += `<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="${globalize.translate('ButtonRefresh')}"><span class="material-icons search"></span></button>`;
} }
html += '</div>'; html += '</div>';
if (!readOnlyAttribute) { if (!readOnlyAttribute) {
@ -123,14 +133,14 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
} }
if (options.enableNetworkSharePath) { if (options.enableNetworkSharePath) {
html += '<div class="inputContainer" style="margin-top:2em;">'; html += '<div class="inputContainer" style="margin-top:2em;">';
html += '<input is="emby-input" id="txtNetworkPath" type="text" label="' + globalize.translate('LabelOptionalNetworkPath') + '"/>'; html += `<input is="emby-input" id="txtNetworkPath" type="text" label="${globalize.translate('LabelOptionalNetworkPath')}"/>`;
html += '<div class="fieldDescription">'; html += '<div class="fieldDescription">';
html += globalize.translate('LabelOptionalNetworkPathHelp', '<b>\\\\server</b>', '<b>\\\\192.168.1.101</b>'); html += globalize.translate('LabelOptionalNetworkPathHelp', '<b>\\\\server</b>', '<b>\\\\192.168.1.101</b>');
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
} }
html += '<div class="formDialogFooter">'; html += '<div class="formDialogFooter">';
html += '<button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">' + globalize.translate('ButtonOk') + '</button>'; html += `<button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">${globalize.translate('ButtonOk')}</button>`;
html += '</div>'; html += '</div>';
html += '</form>'; html += '</form>';
html += '</div>'; html += '</div>';
@ -147,7 +157,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
} }
function alertTextWithOptions(options) { function alertTextWithOptions(options) {
require(['alert'], function(alert) { require(['alert'], alert => {
alert(options); alert(options);
}); });
} }
@ -160,7 +170,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
ValidateWriteable: validateWriteable, ValidateWriteable: validateWriteable,
Path: path Path: path
} }
}).catch(function(response) { }).catch(response => {
if (response) { if (response) {
if (response.status === 404) { if (response.status === 404) {
alertText(globalize.translate('PathNotFound')); alertText(globalize.translate('PathNotFound'));
@ -180,10 +190,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
} }
function initEditor(content, options, fileOptions) { function initEditor(content, options, fileOptions) {
content.addEventListener('click', function(e) { content.addEventListener('click', e => {
var lnkPath = dom.parentWithClass(e.target, 'lnkPath'); const lnkPath = dom.parentWithClass(e.target, 'lnkPath');
if (lnkPath) { if (lnkPath) {
var path = lnkPath.getAttribute('data-path'); const path = lnkPath.getAttribute('data-path');
if (lnkPath.classList.contains('lnkFile')) { if (lnkPath.classList.contains('lnkFile')) {
content.querySelector('#txtDirectoryPickerPath').value = path; content.querySelector('#txtDirectoryPickerPath').value = path;
} else { } else {
@ -192,25 +202,25 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
} }
}); });
content.addEventListener('click', function(e) { content.addEventListener('click', e => {
if (dom.parentWithClass(e.target, 'btnRefreshDirectories')) { if (dom.parentWithClass(e.target, 'btnRefreshDirectories')) {
var path = content.querySelector('#txtDirectoryPickerPath').value; const path = content.querySelector('#txtDirectoryPickerPath').value;
refreshDirectoryBrowser(content, path, fileOptions); refreshDirectoryBrowser(content, path, fileOptions);
} }
}); });
content.addEventListener('change', function(e) { content.addEventListener('change', e => {
var txtDirectoryPickerPath = dom.parentWithTag(e.target, 'INPUT'); const txtDirectoryPickerPath = dom.parentWithTag(e.target, 'INPUT');
if (txtDirectoryPickerPath && 'txtDirectoryPickerPath' === txtDirectoryPickerPath.id) { if (txtDirectoryPickerPath && txtDirectoryPickerPath.id === 'txtDirectoryPickerPath') {
refreshDirectoryBrowser(content, txtDirectoryPickerPath.value, fileOptions); refreshDirectoryBrowser(content, txtDirectoryPickerPath.value, fileOptions);
} }
}); });
content.querySelector('form').addEventListener('submit', function(e) { content.querySelector('form').addEventListener('submit', function(e) {
if (options.callback) { if (options.callback) {
var networkSharePath = this.querySelector('#txtNetworkPath'); let networkSharePath = this.querySelector('#txtNetworkPath');
networkSharePath = networkSharePath ? networkSharePath.value : null; networkSharePath = networkSharePath ? networkSharePath.value : null;
var path = this.querySelector('#txtDirectoryPickerPath').value; const path = this.querySelector('#txtDirectoryPickerPath').value;
validatePath(path, options.validateWriteable, ApiClient).then(options.callback(path, networkSharePath)); validatePath(path, options.validateWriteable, ApiClient).then(options.callback(path, networkSharePath));
} }
e.preventDefault(); e.preventDefault();
@ -224,21 +234,21 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
return Promise.resolve(options.path); return Promise.resolve(options.path);
} else { } else {
return ApiClient.getJSON(ApiClient.getUrl('Environment/DefaultDirectoryBrowser')).then( return ApiClient.getJSON(ApiClient.getUrl('Environment/DefaultDirectoryBrowser')).then(
function(result) { result => {
return result.Path || ''; return result.Path || '';
}, function() { }, () => {
return ''; return '';
} }
); );
} }
} }
function directoryBrowser() { class directoryBrowser {
var currentDialog; constructor() {
var self = this; let currentDialog;
self.show = function(options) { this.show = options => {
options = options || {}; options = options || {};
var fileOptions = { const fileOptions = {
includeDirectories: true includeDirectories: true
}; };
if (options.includeDirectories != null) { if (options.includeDirectories != null) {
@ -248,10 +258,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
fileOptions.includeFiles = options.includeFiles; fileOptions.includeFiles = options.includeFiles;
} }
Promise.all([getSystemInfo(), getDefaultPath(options)]).then( Promise.all([getSystemInfo(), getDefaultPath(options)]).then(
function(responses) { responses => {
var systemInfo = responses[0]; const systemInfo = responses[0];
var initialPath = responses[1]; const initialPath = responses[1];
var dlg = dialogHelper.createDialog({ const dlg = dialogHelper.createDialog({
size: 'small', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -261,7 +271,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
dlg.classList.add('directoryPicker'); dlg.classList.add('directoryPicker');
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
var html = ''; let html = '';
html += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>'; html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">'; html += '<h3 class="formDialogHeaderTitle">';
@ -273,12 +283,12 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
initEditor(dlg, options, fileOptions); initEditor(dlg, options, fileOptions);
dlg.addEventListener('close', onDialogClosed); dlg.addEventListener('close', onDialogClosed);
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.querySelector('.btnCloseDialog').addEventListener('click', function() { dlg.querySelector('.btnCloseDialog').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
currentDialog = dlg; currentDialog = dlg;
dlg.querySelector('#txtDirectoryPickerPath').value = initialPath; dlg.querySelector('#txtDirectoryPickerPath').value = initialPath;
var txtNetworkPath = dlg.querySelector('#txtNetworkPath'); const txtNetworkPath = dlg.querySelector('#txtNetworkPath');
if (txtNetworkPath) { if (txtNetworkPath) {
txtNetworkPath.value = options.networkSharePath || ''; txtNetworkPath.value = options.networkSharePath || '';
} }
@ -288,13 +298,15 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
} }
); );
}; };
self.close = function() { this.close = () => {
if (currentDialog) { if (currentDialog) {
dialogHelper.close(currentDialog); dialogHelper.close(currentDialog);
} }
}; };
} }
}
var systemInfo; let systemInfo;
return directoryBrowser;
}); /* eslint-enable indent */
export default directoryBrowser;

86
src/components/imageUploader/imageUploader.js
View file

@ -1,10 +1,26 @@
define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', 'layoutManager', 'globalize', 'require', 'emby-button', 'emby-select', 'formDialogStyle', 'css!./style'], function (dialogHelper, connectionManager, dom, loading, scrollHelper, layoutManager, globalize, require) { /* eslint-disable indent */
'use strict';
var currentItemId; /**
var currentServerId; * Module for imageUploader.
var currentFile; * @module components/imageUploader/imageUploader
var hasChanges = false; */
import dialogHelper from 'dialogHelper';
import connectionManager from 'connectionManager';
import dom from 'dom';
import loading from 'loading';
import scrollHelper from 'scrollHelper';
import layoutManager from 'layoutManager';
import globalize from 'globalize';
import 'emby-button';
import 'emby-select';
import 'formDialogStyle';
import 'css!./style';
let currentItemId;
let currentServerId;
let currentFile;
let hasChanges = false;
function onFileReaderError(evt) { function onFileReaderError(evt) {
@ -12,14 +28,14 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
switch (evt.target.error.code) { switch (evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR: case evt.target.error.NOT_FOUND_ERR:
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageFileReadError')); toast(globalize.translate('MessageFileReadError'));
}); });
break; break;
case evt.target.error.ABORT_ERR: case evt.target.error.ABORT_ERR:
break; // noop break; // noop
default: default:
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageFileReadError')); toast(globalize.translate('MessageFileReadError'));
}); });
break; break;
@ -28,7 +44,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
function setFiles(page, files) { function setFiles(page, files) {
var file = files[0]; const file = files[0];
if (!file || !file.type.match('image.*')) { if (!file || !file.type.match('image.*')) {
page.querySelector('#imageOutput').innerHTML = ''; page.querySelector('#imageOutput').innerHTML = '';
@ -39,23 +55,23 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
currentFile = file; currentFile = file;
var reader = new FileReader(); const reader = new FileReader();
reader.onerror = onFileReaderError; reader.onerror = onFileReaderError;
reader.onloadstart = function () { reader.onloadstart = () => {
page.querySelector('#fldUpload').classList.add('hide'); page.querySelector('#fldUpload').classList.add('hide');
}; };
reader.onabort = function () { reader.onabort = () => {
loading.hide(); loading.hide();
console.debug('File read cancelled'); console.debug('File read cancelled');
}; };
// Closure to capture the file information. // Closure to capture the file information.
reader.onload = (function (theFile) { reader.onload = (theFile => {
return function (e) { return e => {
// Render thumbnail. // Render thumbnail.
var html = ['<img style="max-width:100%;max-height:100%;" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join(''); const html = ['<img style="max-width:100%;max-height:100%;" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
page.querySelector('#imageOutput').innerHTML = html; page.querySelector('#imageOutput').innerHTML = html;
page.querySelector('#dropImageText').classList.add('hide'); page.querySelector('#dropImageText').classList.add('hide');
@ -69,14 +85,14 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
function onSubmit(e) { function onSubmit(e) {
var file = currentFile; const file = currentFile;
if (!file) { if (!file) {
return false; return false;
} }
if (!file.type.startsWith('image/')) { if (!file.type.startsWith('image/')) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageImageFileTypeAllowed')); toast(globalize.translate('MessageImageFileTypeAllowed'));
}); });
e.preventDefault(); e.preventDefault();
@ -85,18 +101,18 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
loading.show(); loading.show();
var dlg = dom.parentWithClass(this, 'dialog'); const dlg = dom.parentWithClass(this, 'dialog');
var imageType = dlg.querySelector('#selectImageType').value; const imageType = dlg.querySelector('#selectImageType').value;
if (imageType === 'None') { if (imageType === 'None') {
require(['toast'], function(toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageImageTypeNotSelected')); toast(globalize.translate('MessageImageTypeNotSelected'));
}); });
e.preventDefault(); e.preventDefault();
return false; return false;
} }
connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(function () { connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => {
dlg.querySelector('#uploadImage').value = ''; dlg.querySelector('#uploadImage').value = '';
@ -117,21 +133,21 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
setFiles(page, this.files); setFiles(page, this.files);
}); });
page.querySelector('.btnBrowse').addEventListener('click', function () { page.querySelector('.btnBrowse').addEventListener('click', () => {
page.querySelector('#uploadImage').click(); page.querySelector('#uploadImage').click();
}); });
} }
function showEditor(options, resolve, reject) { function showEditor(options, resolve) {
options = options || {}; options = options || {};
require(['text!./imageUploader.template.html'], function (template) { return import('text!./imageUploader.template.html').then(({default: template}) => {
currentItemId = options.itemId; currentItemId = options.itemId;
currentServerId = options.serverId; currentServerId = options.serverId;
var dialogOptions = { const dialogOptions = {
removeOnClose: true removeOnClose: true
}; };
@ -141,7 +157,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
@ -152,7 +168,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
} }
// Has to be assigned a z-index after the call to .open() // Has to be assigned a z-index after the call to .open()
dlg.addEventListener('close', function () { dlg.addEventListener('close', () => {
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.off(dlg, false); scrollHelper.centerFocus.off(dlg, false);
@ -168,22 +184,24 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
dlg.querySelector('#selectImageType').value = options.imageType || 'Primary'; dlg.querySelector('#selectImageType').value = options.imageType || 'Primary';
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
}); });
} }
return { export function show(options) {
show: function (options) {
return new Promise(function (resolve, reject) { return new Promise(resolve => {
hasChanges = false; hasChanges = false;
showEditor(options, resolve, reject); showEditor(options, resolve);
}); });
} }
};
}); /* eslint-enable indent */
export default {
show: show
};

95
src/components/itemMediaInfo/itemMediaInfo.js
View file

@ -1,44 +1,61 @@
define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', 'connectionManager', 'loading', 'focusManager', 'dom', 'apphost', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'emby-button', 'flexStyles'], function (dialogHelper, require, layoutManager, globalize, userSettings, connectionManager, loading, focusManager, dom, appHost) { /* eslint-disable indent */
'use strict';
/**
* Module for display media info.
* @module components/itemMediaInfo/itemMediaInfo
*/
import dialogHelper from 'dialogHelper';
import layoutManager from 'layoutManager';
import globalize from 'globalize';
import connectionManager from 'connectionManager';
import loading from 'loading';
import 'emby-select';
import 'listViewStyle';
import 'paper-icon-button-light';
import 'css!./../formdialog';
import 'material-icons';
import 'emby-button';
import 'flexStyles';
function setMediaInfo(user, page, item) { function setMediaInfo(user, page, item) {
var html = item.MediaSources.map(function (version) { let html = item.MediaSources.map(version => {
return getMediaSourceHtml(user, item, version); return getMediaSourceHtml(user, item, version);
}).join('<div style="border-top:1px solid #444;margin: 1em 0;"></div>'); }).join('<div style="border-top:1px solid #444;margin: 1em 0;"></div>');
if (item.MediaSources.length > 1) { if (item.MediaSources.length > 1) {
html = '<br/>' + html; html = `<br/>${html}`;
} }
var mediaInfoContent = page.querySelector('#mediaInfoContent'); const mediaInfoContent = page.querySelector('#mediaInfoContent');
mediaInfoContent.innerHTML = html; mediaInfoContent.innerHTML = html;
} }
function getMediaSourceHtml(user, item, version) { function getMediaSourceHtml(user, item, version) {
var html = ''; let html = '';
if (version.Name) { if (version.Name) {
html += '<div><h2 class="mediaInfoStreamType">' + version.Name + '</h2></div>'; html += `<div><h2 class="mediaInfoStreamType">${version.Name}</h2></div>`;
} }
if (version.Container) { if (version.Container) {
html += createAttribute(globalize.translate('MediaInfoContainer'), version.Container) + '<br/>'; html += `${createAttribute(globalize.translate('MediaInfoContainer'), version.Container)}<br/>`;
} }
if (version.Formats && version.Formats.length) { if (version.Formats && version.Formats.length) {
html += createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(',')) + '<br/>'; html += `${createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(','))}<br/>`;
} }
if (version.Path && user && user.Policy.IsAdministrator) { if (version.Path && user && user.Policy.IsAdministrator) {
html += createAttribute(globalize.translate('MediaInfoPath'), version.Path) + '<br/>'; html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path)}<br/>`;
} }
if (version.Size) { if (version.Size) {
var size = (version.Size / (1024 * 1024)).toFixed(0) + ' MB'; const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`;
html += createAttribute(globalize.translate('MediaInfoSize'), size) + '<br/>'; html += `${createAttribute(globalize.translate('MediaInfoSize'), size)}<br/>`;
} }
for (var i = 0, length = version.MediaStreams.length; i < length; i++) { for (let i = 0, length = version.MediaStreams.length; i < length; i++) {
var stream = version.MediaStreams[i]; const stream = version.MediaStreams[i];
if (stream.Type === 'Data') { if (stream.Type === 'Data') {
continue; continue;
} }
html += '<div class="mediaInfoStream">'; html += '<div class="mediaInfoStream">';
var displayType = globalize.translate('MediaInfoStreamType' + stream.Type); const displayType = globalize.translate(`MediaInfoStreamType${stream.Type}`);
html += '<h2 class="mediaInfoStreamType">' + displayType + '</h2>'; html += `<h2 class="mediaInfoStreamType">${displayType}</h2>`;
var attributes = []; const attributes = [];
if (stream.DisplayTitle) { if (stream.DisplayTitle) {
attributes.push(createAttribute('Title', stream.DisplayTitle)); attributes.push(createAttribute('Title', stream.DisplayTitle));
} }
@ -61,7 +78,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
attributes.push(createAttribute(globalize.translate('MediaInfoLevel'), stream.Level)); attributes.push(createAttribute(globalize.translate('MediaInfoLevel'), stream.Level));
} }
if (stream.Width || stream.Height) { if (stream.Width || stream.Height) {
attributes.push(createAttribute(globalize.translate('MediaInfoResolution'), stream.Width + 'x' + stream.Height)); attributes.push(createAttribute(globalize.translate('MediaInfoResolution'), `${stream.Width}x${stream.Height}`));
} }
if (stream.AspectRatio && stream.Codec !== 'mjpeg') { if (stream.AspectRatio && stream.Codec !== 'mjpeg') {
attributes.push(createAttribute(globalize.translate('MediaInfoAspectRatio'), stream.AspectRatio)); attributes.push(createAttribute(globalize.translate('MediaInfoAspectRatio'), stream.AspectRatio));
@ -79,16 +96,16 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
attributes.push(createAttribute(globalize.translate('MediaInfoLayout'), stream.ChannelLayout)); attributes.push(createAttribute(globalize.translate('MediaInfoLayout'), stream.ChannelLayout));
} }
if (stream.Channels) { if (stream.Channels) {
attributes.push(createAttribute(globalize.translate('MediaInfoChannels'), stream.Channels + ' ch')); attributes.push(createAttribute(globalize.translate('MediaInfoChannels'), `${stream.Channels} ch`));
} }
if (stream.BitRate && stream.Codec !== 'mjpeg') { if (stream.BitRate && stream.Codec !== 'mjpeg') {
attributes.push(createAttribute(globalize.translate('MediaInfoBitrate'), (parseInt(stream.BitRate / 1000)) + ' kbps')); attributes.push(createAttribute(globalize.translate('MediaInfoBitrate'), `${parseInt(stream.BitRate / 1000)} kbps`));
} }
if (stream.SampleRate) { if (stream.SampleRate) {
attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), stream.SampleRate + ' Hz')); attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), `${stream.SampleRate} Hz`));
} }
if (stream.BitDepth) { if (stream.BitDepth) {
attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), stream.BitDepth + ' bit')); attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), `${stream.BitDepth} bit`));
} }
if (stream.PixelFormat) { if (stream.PixelFormat) {
attributes.push(createAttribute(globalize.translate('MediaInfoPixelFormat'), stream.PixelFormat)); attributes.push(createAttribute(globalize.translate('MediaInfoPixelFormat'), stream.PixelFormat));
@ -116,13 +133,13 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
} }
function createAttribute(label, value) { function createAttribute(label, value) {
return '<span class="mediaInfoLabel">' + label + '</span><span class="mediaInfoAttribute">' + value + '</span>'; return `<span class="mediaInfoLabel">${label}</span><span class="mediaInfoAttribute">${value}</span>`;
} }
function showMediaInfoMore(itemId, serverId, template) { function loadMediaInfo(itemId, serverId, template) {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
var dialogOptions = { const dialogOptions = {
size: 'small', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -130,35 +147,35 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
var html = ''; let html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateDocument(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
if (layoutManager.tv) { if (layoutManager.tv) {
dlg.querySelector('.formDialogContent'); dlg.querySelector('.formDialogContent');
} }
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.querySelector('.btnCancel').addEventListener('click', function (e) { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
apiClient.getCurrentUser().then(function (user) { apiClient.getCurrentUser().then(user => {
setMediaInfo(user, dlg, item); setMediaInfo(user, dlg, item);
}); });
loading.hide(); loading.hide();
}); });
} }
function showMediaInfo(itemId, serverId) { export function show(itemId, serverId) {
loading.show(); loading.show();
return new Promise(function (resolve, reject) { return import('text!./itemMediaInfo.template.html').then(({default: template}) => {
require(['text!./itemMediaInfo.template.html'], function (template) { return new Promise((resolve, reject) => {
showMediaInfoMore(itemId, serverId, template).then(resolve, reject); loadMediaInfo(itemId, serverId, template).then(resolve, reject);
}); });
}); });
} }
return { /* eslint-enable indent */
show: showMediaInfo export default {
}; show: show
}); };

201
src/components/itemidentifier/itemidentifier.js
View file

@ -1,15 +1,34 @@
define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', 'scrollHelper', 'layoutManager', 'focusManager', 'browser', 'emby-input', 'emby-checkbox', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'cardStyle'], function (dialogHelper, loading, connectionManager, require, globalize, scrollHelper, layoutManager, focusManager, browser) { /* eslint-disable indent */
'use strict';
var enableFocusTransform = !browser.slow && !browser.edge; /**
* Module for itemidentifier media item.
* @module components/itemidentifier/itemidentifier
*/
var currentItem; import dialogHelper from 'dialogHelper';
var currentItemType; import loading from 'loading';
var currentServerId; import connectionManager from 'connectionManager';
var currentResolve; import globalize from 'globalize';
var currentReject; import scrollHelper from 'scrollHelper';
var hasChanges = false; import layoutManager from 'layoutManager';
var currentSearchResult; import focusManager from 'focusManager';
import browser from 'browser';
import 'emby-input';
import 'emby-checkbox';
import 'paper-icon-button-light';
import 'css!./../formdialog';
import 'material-icons';
import 'cardStyle';
const enableFocusTransform = !browser.slow && !browser.edge;
let currentItem;
let currentItemType;
let currentServerId;
let currentResolve;
let currentReject;
let hasChanges = false;
let currentSearchResult;
function getApiClient() { function getApiClient() {
return connectionManager.getApiClient(currentServerId); return connectionManager.getApiClient(currentServerId);
@ -17,14 +36,14 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
function searchForIdentificationResults(page) { function searchForIdentificationResults(page) {
var lookupInfo = { let lookupInfo = {
ProviderIds: {} ProviderIds: {}
}; };
var i; let i;
var length; let length;
var identifyField = page.querySelectorAll('.identifyField'); const identifyField = page.querySelectorAll('.identifyField');
var value; let value;
for (i = 0, length = identifyField.length; i < length; i++) { for (i = 0, length = identifyField.length; i < length; i++) {
value = identifyField[i].value; value = identifyField[i].value;
@ -39,9 +58,9 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
} }
var hasId = false; let hasId = false;
var txtLookupId = page.querySelectorAll('.txtLookupId'); const txtLookupId = page.querySelectorAll('.txtLookupId');
for (i = 0, length = txtLookupId.length; i < length; i++) { for (i = 0, length = txtLookupId.length; i < length; i++) {
value = txtLookupId[i].value; value = txtLookupId[i].value;
@ -53,7 +72,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
if (!hasId && !lookupInfo.Name) { if (!hasId && !lookupInfo.Name) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('PleaseEnterNameOrId')); toast(globalize.translate('PleaseEnterNameOrId'));
}); });
return; return;
@ -71,16 +90,16 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
loading.show(); loading.show();
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.ajax({ apiClient.ajax({
type: 'POST', type: 'POST',
url: apiClient.getUrl('Items/RemoteSearch/' + currentItemType), url: apiClient.getUrl(`Items/RemoteSearch/${currentItemType}`),
data: JSON.stringify(lookupInfo), data: JSON.stringify(lookupInfo),
contentType: 'application/json', contentType: 'application/json',
dataType: 'json' dataType: 'json'
}).then(function (results) { }).then(results => {
loading.hide(); loading.hide();
showIdentificationSearchResults(page, results); showIdentificationSearchResults(page, results);
@ -89,29 +108,29 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
function showIdentificationSearchResults(page, results) { function showIdentificationSearchResults(page, results) {
var identificationSearchResults = page.querySelector('.identificationSearchResults'); const identificationSearchResults = page.querySelector('.identificationSearchResults');
page.querySelector('.popupIdentifyForm').classList.add('hide'); page.querySelector('.popupIdentifyForm').classList.add('hide');
identificationSearchResults.classList.remove('hide'); identificationSearchResults.classList.remove('hide');
page.querySelector('.identifyOptionsForm').classList.add('hide'); page.querySelector('.identifyOptionsForm').classList.add('hide');
page.querySelector('.dialogContentInner').classList.remove('dialog-content-centered'); page.querySelector('.dialogContentInner').classList.remove('dialog-content-centered');
var html = ''; let html = '';
var i; let i;
var length; let length;
for (i = 0, length = results.length; i < length; i++) { for (i = 0, length = results.length; i < length; i++) {
var result = results[i]; const result = results[i];
html += getSearchResultHtml(result, i); html += getSearchResultHtml(result, i);
} }
var elem = page.querySelector('.identificationSearchResultList'); const elem = page.querySelector('.identificationSearchResultList');
elem.innerHTML = html; elem.innerHTML = html;
function onSearchImageClick() { function onSearchImageClick() {
var index = parseInt(this.getAttribute('data-index')); const index = parseInt(this.getAttribute('data-index'));
var currentResult = results[index]; const currentResult = results[index];
if (currentItem != null) { if (currentItem != null) {
@ -122,7 +141,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
} }
var searchImages = elem.querySelectorAll('.card'); const searchImages = elem.querySelectorAll('.card');
for (i = 0, length = searchImages.length; i < length; i++) { for (i = 0, length = searchImages.length; i < length; i++) {
searchImages[i].addEventListener('click', onSearchImageClick); searchImages[i].addEventListener('click', onSearchImageClick);
@ -143,7 +162,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
function showIdentifyOptions(page, identifyResult) { function showIdentifyOptions(page, identifyResult) {
var identifyOptionsForm = page.querySelector('.identifyOptionsForm'); const identifyOptionsForm = page.querySelector('.identifyOptionsForm');
page.querySelector('.popupIdentifyForm').classList.add('hide'); page.querySelector('.popupIdentifyForm').classList.add('hide');
page.querySelector('.identificationSearchResults').classList.add('hide'); page.querySelector('.identificationSearchResults').classList.add('hide');
@ -153,19 +172,19 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
currentSearchResult = identifyResult; currentSearchResult = identifyResult;
var lines = []; const lines = [];
lines.push(identifyResult.Name); lines.push(identifyResult.Name);
if (identifyResult.ProductionYear) { if (identifyResult.ProductionYear) {
lines.push(identifyResult.ProductionYear); lines.push(identifyResult.ProductionYear);
} }
var resultHtml = lines.join('<br/>'); let resultHtml = lines.join('<br/>');
if (identifyResult.ImageUrl) { if (identifyResult.ImageUrl) {
var displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName); const displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName);
resultHtml = '<div style="display:flex;align-items:center;"><img src="' + displayUrl + '" style="max-height:240px;" /><div style="margin-left:1em;">' + resultHtml + '</div>'; resultHtml = `<div style="display:flex;align-items:center;"><img src="${displayUrl}" style="max-height:240px;" /><div style="margin-left:1em;">${resultHtml}</div>`;
} }
page.querySelector('.selectedSearchResult').innerHTML = resultHtml; page.querySelector('.selectedSearchResult').innerHTML = resultHtml;
@ -177,10 +196,10 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
// TODO move card creation code to Card component // TODO move card creation code to Card component
var html = ''; let html = '';
var cssClass = 'card scalableCard'; let cssClass = 'card scalableCard';
var cardBoxCssClass = 'cardBox'; let cardBoxCssClass = 'cardBox';
var padderClass; let padderClass;
if (currentItemType === 'Episode') { if (currentItemType === 'Episode') {
cssClass += ' backdropCard backdropCard-scalable'; cssClass += ' backdropCard backdropCard-scalable';
@ -203,30 +222,30 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
cardBoxCssClass += ' cardBox-bottompadded'; cardBoxCssClass += ' cardBox-bottompadded';
html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">'; html += `<button type="button" class="${cssClass}" data-index="${index}">`;
html += '<div class="' + cardBoxCssClass + '">'; html += `<div class="${cardBoxCssClass}">`;
html += '<div class="cardScalable">'; html += '<div class="cardScalable">';
html += '<div class="' + padderClass + '"></div>'; html += `<div class="${padderClass}"></div>`;
html += '<div class="cardContent searchImage">'; html += '<div class="cardContent searchImage">';
if (result.ImageUrl) { if (result.ImageUrl) {
var displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName); const displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName);
html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + displayUrl + '\');"></div>'; html += `<div class="cardImageContainer coveredImage" style="background-image:url('${displayUrl}');"></div>`;
} else { } else {
html += '<div class="cardImageContainer coveredImage defaultCardBackground defaultCardBackground1"><div class="cardText cardCenteredText">' + result.Name + '</div></div>'; html += `<div class="cardImageContainer coveredImage defaultCardBackground defaultCardBackground1"><div class="cardText cardCenteredText">${result.Name}</div></div>`;
} }
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
var numLines = 2; let numLines = 2;
if (currentItemType === 'MusicAlbum') { if (currentItemType === 'MusicAlbum') {
numLines++; numLines++;
} }
var lines = [result.Name]; const lines = [result.Name];
if (result.AlbumArtist) { if (result.AlbumArtist) {
lines.push(result.AlbumArtist.Name); lines.push(result.AlbumArtist.Name);
@ -235,7 +254,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
lines.push(result.ProductionYear); lines.push(result.ProductionYear);
} }
for (var i = 0; i < numLines; i++) { for (let i = 0; i < numLines; i++) {
if (i === 0) { if (i === 0) {
html += '<div class="cardText cardText-first cardTextCentered">'; html += '<div class="cardText cardText-first cardTextCentered">';
@ -252,7 +271,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
function getSearchImageDisplayUrl(url, provider) { function getSearchImageDisplayUrl(url, provider) {
var apiClient = getApiClient(); const apiClient = getApiClient();
return apiClient.getUrl('Items/RemoteSearch/Image', { imageUrl: url, ProviderName: provider }); return apiClient.getUrl('Items/RemoteSearch/Image', { imageUrl: url, ProviderName: provider });
} }
@ -261,26 +280,26 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
loading.show(); loading.show();
var options = { const options = {
ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked
}; };
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.ajax({ apiClient.ajax({
type: 'POST', type: 'POST',
url: apiClient.getUrl('Items/RemoteSearch/Apply/' + currentItem.Id, options), url: apiClient.getUrl(`Items/RemoteSearch/Apply/${currentItem.Id}`, options),
data: JSON.stringify(currentSearchResult), data: JSON.stringify(currentSearchResult),
contentType: 'application/json' contentType: 'application/json'
}).then(function () { }).then(() => {
hasChanges = true; hasChanges = true;
loading.hide(); loading.hide();
dialogHelper.close(page); dialogHelper.close(page);
}, function () { }, () => {
loading.hide(); loading.hide();
@ -290,28 +309,28 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
function showIdentificationForm(page, item) { function showIdentificationForm(page, item) {
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.getJSON(apiClient.getUrl('Items/' + item.Id + '/ExternalIdInfos')).then(function (idList) { apiClient.getJSON(apiClient.getUrl(`Items/${item.Id}/ExternalIdInfos`)).then(idList => {
var html = ''; let html = '';
for (var i = 0, length = idList.length; i < length; i++) { for (let i = 0, length = idList.length; i < length; i++) {
var idInfo = idList[i]; const idInfo = idList[i];
var id = 'txtLookup' + idInfo.Key; const id = `txtLookup${idInfo.Key}`;
html += '<div class="inputContainer">'; html += '<div class="inputContainer">';
var fullName = idInfo.Name; let fullName = idInfo.Name;
if (idInfo.Type) { if (idInfo.Type) {
fullName = idInfo.Name + ' ' + globalize.translate(idInfo.Type); fullName = `${idInfo.Name} ${globalize.translate(idInfo.Type)}`;
} }
var idLabel = globalize.translate('LabelDynamicExternalId', fullName); const idLabel = globalize.translate('LabelDynamicExternalId', fullName);
html += '<input is="emby-input" class="txtLookupId" data-providerkey="' + idInfo.Key + '" id="' + id + '" label="' + idLabel + '"/>'; html += `<input is="emby-input" class="txtLookupId" data-providerkey="${idInfo.Key}" id="${id}" label="${idLabel}"/>`;
html += '</div>'; html += '</div>';
} }
@ -338,16 +357,16 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
loading.show(); loading.show();
require(['text!./itemidentifier.template.html'], function (template) { return import('text!./itemidentifier.template.html').then(({default: template}) => {
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
currentItem = item; currentItem = item;
currentItemType = currentItem.Type; currentItemType = currentItem.Type;
var dialogOptions = { const dialogOptions = {
size: 'small', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -357,12 +376,12 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.classList.add('recordingDialog'); dlg.classList.add('recordingDialog');
var html = ''; let html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateDocument(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
@ -384,21 +403,21 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) { dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => {
e.preventDefault(); e.preventDefault();
searchForIdentificationResults(dlg); searchForIdentificationResults(dlg);
return false; return false;
}); });
dlg.querySelector('.identifyOptionsForm').addEventListener('submit', function (e) { dlg.querySelector('.identifyOptionsForm').addEventListener('submit', e => {
e.preventDefault(); e.preventDefault();
submitIdentficationResult(dlg); submitIdentficationResult(dlg);
return false; return false;
}); });
dlg.querySelector('.btnCancel').addEventListener('click', function (e) { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
@ -421,14 +440,15 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
} }
// TODO investigate where this was used
function showEditorFindNew(itemName, itemYear, itemType, resolveFunc) { function showEditorFindNew(itemName, itemYear, itemType, resolveFunc) {
currentItem = null; currentItem = null;
currentItemType = itemType; currentItemType = itemType;
require(['text!./itemidentifier.template.html'], function (template) { return import('text!./itemidentifier.template.html').then(({default: template}) => {
var dialogOptions = { const dialogOptions = {
size: 'small', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -438,12 +458,12 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.classList.add('recordingDialog'); dlg.classList.add('recordingDialog');
var html = ''; let html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateDocument(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
@ -454,22 +474,22 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.querySelector('.btnCancel').addEventListener('click', function (e) { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) { dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => {
e.preventDefault(); e.preventDefault();
searchForIdentificationResults(dlg); searchForIdentificationResults(dlg);
return false; return false;
}); });
dlg.addEventListener('close', function () { dlg.addEventListener('close', () => {
loading.hide(); loading.hide();
var foundItem = hasChanges ? currentSearchResult : null; const foundItem = hasChanges ? currentSearchResult : null;
resolveFunc(foundItem); resolveFunc(foundItem);
}); });
@ -498,10 +518,9 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dlg.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('Search'); dlg.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('Search');
} }
return { export function show(itemId, serverId) {
show: function (itemId, serverId) {
return new Promise(function (resolve, reject) { return new Promise((resolve, reject) => {
currentResolve = resolve; currentResolve = resolve;
currentReject = reject; currentReject = reject;
@ -510,11 +529,11 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
showEditor(itemId); showEditor(itemId);
}); });
}, }
showFindNew: function (itemName, itemYear, itemType, serverId) { export function showFindNew(itemName, itemYear, itemType, serverId) {
return new Promise(function (resolve, reject) { return new Promise((resolve) => {
currentServerId = serverId; currentServerId = serverId;
@ -522,5 +541,9 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
showEditorFindNew(itemName, itemYear, itemType, resolve); showEditorFindNew(itemName, itemYear, itemType, resolve);
}); });
} }
};
}); /* eslint-enable indent */
export default {
show: show,
showFindNew: showFindNew
};

2
src/components/search/searchfields.js
View file

@ -43,7 +43,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
function initAlphaPicker(alphaPickerElement, instance) { function initAlphaPicker(alphaPickerElement, instance) {
instance.alphaPicker = new AlphaPicker({ instance.alphaPicker = new AlphaPicker.default({
element: alphaPickerElement, element: alphaPickerElement,
mode: 'keyboard' mode: 'keyboard'
}); });

2
src/components/tabbedview/itemstab.js
View file

@ -51,7 +51,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
instance.itemsContainer = view.querySelector('.itemsContainer'); instance.itemsContainer = view.querySelector('.itemsContainer');
instance.alphaPicker = new AlphaPicker({ instance.alphaPicker = new AlphaPicker.default({
element: instance.alphaPickerElement, element: instance.alphaPickerElement,
itemsContainer: instance.itemsContainer, itemsContainer: instance.itemsContainer,
itemClass: 'card' itemClass: 'card'

2
src/components/tvproviders/xmltv.js
View file

@ -139,7 +139,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
var page = $(e.target).parents('.xmltvForm')[0]; var page = $(e.target).parents('.xmltvForm')[0];
require(['directorybrowser'], function (directoryBrowser) { require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser(); var picker = new directoryBrowser.default();
picker.show({ picker.show({
includeFiles: true, includeFiles: true,
callback: function (path) { callback: function (path) {

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

@ -59,7 +59,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-textarea', 'emb
return function (view, params) { return function (view, params) {
$('#btnSelectCachePath', view).on('click.selectDirectory', function () { $('#btnSelectCachePath', view).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) { require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser(); var picker = new directoryBrowser.default();
picker.show({ picker.show({
callback: function (path) { callback: function (path) {
if (path) { if (path) {
@ -76,7 +76,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-textarea', 'emb
}); });
$('#btnSelectMetadataPath', view).on('click.selectDirectory', function () { $('#btnSelectMetadataPath', view).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) { require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser(); var picker = new directoryBrowser.default();
picker.show({ picker.show({
path: $('#txtMetadataPath', view).val(), path: $('#txtMetadataPath', view).val(),
networkSharePath: $('#txtMetadataNetworkPath', view).val(), networkSharePath: $('#txtMetadataNetworkPath', view).val(),

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

@ -136,7 +136,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
}); });
view.querySelector('#btnSelectCertPath').addEventListener('click', function () { view.querySelector('#btnSelectCertPath').addEventListener('click', function () {
require(['directorybrowser'], function (directoryBrowser) { require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser(); var picker = new directoryBrowser.default();
picker.show({ picker.show({
includeFiles: true, includeFiles: true,
includeDirectories: true, includeDirectories: true,

4
src/controllers/list.js
View file

@ -1,4 +1,4 @@
define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'scroller', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, scroller, playbackManager, alphaPicker) { define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'scroller', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, scroller, playbackManager, AlphaPicker) {
'use strict'; 'use strict';
function getInitialLiveTvQuery(instance, params) { function getInitialLiveTvQuery(instance, params) {
@ -544,7 +544,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
alphaPickerElement.classList.add('focuscontainer-right'); alphaPickerElement.classList.add('focuscontainer-right');
self.itemsContainer.parentNode.classList.add('padded-right-withalphapicker'); self.itemsContainer.parentNode.classList.add('padded-right-withalphapicker');
self.alphaPicker = new alphaPicker({ self.alphaPicker = new AlphaPicker.default({
element: alphaPickerElement, element: alphaPickerElement,
itemsContainer: layoutManager.tv ? self.itemsContainer : null, itemsContainer: layoutManager.tv ? self.itemsContainer : null,
itemClass: 'card', itemClass: 'card',

8
src/controllers/livetvsettings.js
View file

@ -59,7 +59,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading,
$('.liveTvSettingsForm').off('submit', onSubmit).on('submit', onSubmit); $('.liveTvSettingsForm').off('submit', onSubmit).on('submit', onSubmit);
$('#btnSelectRecordingPath', page).on('click.selectDirectory', function () { $('#btnSelectRecordingPath', page).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) { require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser(); var picker = new directoryBrowser.default();
picker.show({ picker.show({
callback: function (path) { callback: function (path) {
if (path) { if (path) {
@ -74,7 +74,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading,
}); });
$('#btnSelectMovieRecordingPath', page).on('click.selectDirectory', function () { $('#btnSelectMovieRecordingPath', page).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) { require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser(); var picker = new directoryBrowser.default();
picker.show({ picker.show({
callback: function (path) { callback: function (path) {
if (path) { if (path) {
@ -89,7 +89,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading,
}); });
$('#btnSelectSeriesRecordingPath', page).on('click.selectDirectory', function () { $('#btnSelectSeriesRecordingPath', page).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) { require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser(); var picker = new directoryBrowser.default();
picker.show({ picker.show({
callback: function (path) { callback: function (path) {
if (path) { if (path) {
@ -104,7 +104,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading,
}); });
$('#btnSelectPostProcessorPath', page).on('click.selectDirectory', function () { $('#btnSelectPostProcessorPath', page).on('click.selectDirectory', function () {
require(['directorybrowser'], function (directoryBrowser) { require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser(); var picker = new directoryBrowser.default();
picker.show({ picker.show({
includeFiles: true, includeFiles: true,
callback: function (path) { callback: function (path) {

2
src/controllers/livetvtuner.js
View file

@ -215,7 +215,7 @@ define(['globalize', 'loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button
}); });
view.querySelector('.btnSelectPath').addEventListener('click', function () { view.querySelector('.btnSelectPath').addEventListener('click', function () {
require(['directorybrowser'], function (directoryBrowser) { require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser(); var picker = new directoryBrowser.default();
picker.show({ picker.show({
includeFiles: true, includeFiles: true,
callback: function (path) { callback: function (path) {

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

@ -1,4 +1,4 @@
define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, alphaPicker, listView, cardBuilder, globalize) { define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, AlphaPicker, listView, cardBuilder, globalize) {
'use strict'; 'use strict';
return function (view, params, tabContent, options) { return function (view, params, tabContent, options) {
@ -168,7 +168,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
query.StartIndex = 0; query.StartIndex = 0;
itemsContainer.refreshItems(); itemsContainer.refreshItems();
}); });
self.alphaPicker = new alphaPicker({ self.alphaPicker = new AlphaPicker.default({
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: 'click' valueChangeEvent: 'click'
}); });

4
src/controllers/movies/movietrailers.js
View file

@ -1,4 +1,4 @@
define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings, globalize) { define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) {
'use strict'; 'use strict';
return function (view, params, tabContent) { return function (view, params, tabContent) {
@ -213,7 +213,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
query.StartIndex = 0; query.StartIndex = 0;
reloadItems(); reloadItems();
}); });
self.alphaPicker = new alphaPicker({ self.alphaPicker = new AlphaPicker.default({
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: 'click' valueChangeEvent: 'click'
}); });

4
src/controllers/music/musicalbums.js
View file

@ -1,4 +1,4 @@
define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings, globalize) { define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) {
'use strict'; 'use strict';
return function (view, params, tabContent) { return function (view, params, tabContent) {
@ -215,7 +215,7 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
query.StartIndex = 0; query.StartIndex = 0;
reloadItems(tabContent); reloadItems(tabContent);
}); });
self.alphaPicker = new alphaPicker({ self.alphaPicker = new AlphaPicker.default({
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: 'click' valueChangeEvent: 'click'
}); });

4
src/controllers/music/musicartists.js
View file

@ -1,4 +1,4 @@
define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'apphost', 'userSettings', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, appHost, userSettings) { define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'apphost', 'userSettings', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, appHost, userSettings) {
'use strict'; 'use strict';
return function (view, params, tabContent) { return function (view, params, tabContent) {
@ -199,7 +199,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
query.StartIndex = 0; query.StartIndex = 0;
reloadItems(tabContent); reloadItems(tabContent);
}); });
self.alphaPicker = new alphaPicker({ self.alphaPicker = new AlphaPicker.default({
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: 'click' valueChangeEvent: 'click'
}); });

4
src/controllers/shows/tvshows.js
View file

@ -1,4 +1,4 @@
define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'alphaPicker', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, listView, cardBuilder, alphaPicker, userSettings, globalize) { define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'alphaPicker', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, listView, cardBuilder, AlphaPicker, userSettings, globalize) {
'use strict'; 'use strict';
return function (view, params, tabContent) { return function (view, params, tabContent) {
@ -226,7 +226,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
query.StartIndex = 0; query.StartIndex = 0;
reloadItems(tabContent); reloadItems(tabContent);
}); });
self.alphaPicker = new alphaPicker({ self.alphaPicker = new AlphaPicker.default({
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: 'click' valueChangeEvent: 'click'
}); });

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 */