mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-16 02:18:16 -07:00
Merge branch 'es6' into migrate-to-ES6-14
This commit is contained in:
Cameron
GitHub
commit
92ccdb8709
15
package.json
15
package.json
@ -92,16 +92,21 @@
|
||||
"test": [
|
||||
"src/components/accessSchedule/accessSchedule.js",
|
||||
"src/components/actionSheet/actionSheet.js",
|
||||
"src/components/alphaPicker/alphaPicker.js",
|
||||
"src/components/autoFocuser.js",
|
||||
"src/components/cardbuilder/cardBuilder.js",
|
||||
"src/components/cardbuilder/chaptercardbuilder.js",
|
||||
"src/components/cardbuilder/peoplecardbuilder.js",
|
||||
"src/components/directorybrowser/directorybrowser.js",
|
||||
"src/components/collectionEditor/collectionEditor.js",
|
||||
"src/components/dialog/dialog.js",
|
||||
"src/components/dialogHelper/dialogHelper.js",
|
||||
"src/components/channelMapper/channelMapper.js",
|
||||
"src/components/images/imageLoader.js",
|
||||
"src/components/imageUploader/imageUploader.js",
|
||||
"src/components/indicators/indicators.js",
|
||||
"src/components/itemidentifier/itemidentifier.js",
|
||||
"src/components/itemMediaInfo/itemMediaInfo.js",
|
||||
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
|
||||
"src/components/mediaLibraryCreator/mediaLibraryCreator.js",
|
||||
"src/components/mediaLibraryEditor/mediaLibraryEditor.js",
|
||||
@ -134,6 +139,16 @@
|
||||
"src/controllers/dashboard/plugins/repositories.js",
|
||||
"src/controllers/dashboard/devices/devices.js",
|
||||
"src/controllers/dashboard/devices/device.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/tableOfContents.js",
|
||||
"src/plugins/photoPlayer/plugin.js",
|
||||
|
||||
@ -1,11 +1,22 @@
|
||||
define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-button-light', 'material-icons'], function (focusManager, layoutManager, dom) {
|
||||
'use strict';
|
||||
/* eslint-disable indent */
|
||||
|
||||
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() {
|
||||
var scope = this;
|
||||
var selected = scope.querySelector('.' + selectedButtonClass);
|
||||
const scope = this;
|
||||
const selected = scope.querySelector(`.${selectedButtonClass}`);
|
||||
|
||||
if (selected) {
|
||||
focusManager.focus(selected);
|
||||
@ -16,7 +27,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
|
||||
|
||||
function getAlphaPickerButtonClassName(vertical) {
|
||||
|
||||
var alphaPickerButtonClassName = 'alphaPickerButton';
|
||||
let alphaPickerButtonClassName = 'alphaPickerButton';
|
||||
|
||||
if (layoutManager.tv) {
|
||||
alphaPickerButtonClassName += ' alphaPickerButton-tv';
|
||||
@ -30,12 +41,12 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
|
||||
}
|
||||
|
||||
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) {
|
||||
|
||||
return letters.map(function (l) {
|
||||
return letters.map(l => {
|
||||
return getLetterButton(l, vertical);
|
||||
});
|
||||
}
|
||||
@ -48,26 +59,26 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
|
||||
element.classList.add('alphaPicker-tv');
|
||||
}
|
||||
|
||||
var vertical = element.classList.contains('alphaPicker-vertical');
|
||||
const vertical = element.classList.contains('alphaPicker-vertical');
|
||||
|
||||
if (!vertical) {
|
||||
element.classList.add('focuscontainer-x');
|
||||
}
|
||||
|
||||
var html = '';
|
||||
var letters;
|
||||
let html = '';
|
||||
let letters;
|
||||
|
||||
var alphaPickerButtonClassName = getAlphaPickerButtonClassName(vertical);
|
||||
const alphaPickerButtonClassName = getAlphaPickerButtonClassName(vertical);
|
||||
|
||||
var rowClassName = 'alphaPickerRow';
|
||||
let rowClassName = 'alphaPickerRow';
|
||||
|
||||
if (vertical) {
|
||||
rowClassName += ' alphaPickerRow-vertical';
|
||||
}
|
||||
|
||||
html += '<div class="' + rowClassName + '">';
|
||||
html += `<div class="${rowClassName}">`;
|
||||
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 {
|
||||
letters = ['#'];
|
||||
html += mapLetters(letters, vertical).join('');
|
||||
@ -77,11 +88,11 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
|
||||
html += mapLetters(letters, vertical).join('');
|
||||
|
||||
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>';
|
||||
|
||||
letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
|
||||
html += '<div class="' + rowClassName + '">';
|
||||
html += `<div class="${rowClassName}">`;
|
||||
html += '<br/>';
|
||||
html += mapLetters(letters, vertical).join('');
|
||||
html += '</div>';
|
||||
@ -95,227 +106,228 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
|
||||
element.focus = focus;
|
||||
}
|
||||
|
||||
function AlphaPicker(options) {
|
||||
export class AlphaPicker {
|
||||
constructor(options) {
|
||||
|
||||
var self = this;
|
||||
this.options = options;
|
||||
this.options = options;
|
||||
|
||||
var element = options.element;
|
||||
var itemsContainer = options.itemsContainer;
|
||||
var itemClass = options.itemClass;
|
||||
const element = options.element;
|
||||
const itemsContainer = options.itemsContainer;
|
||||
const itemClass = options.itemClass;
|
||||
|
||||
var itemFocusValue;
|
||||
var itemFocusTimeout;
|
||||
let itemFocusValue;
|
||||
let itemFocusTimeout;
|
||||
|
||||
function onItemFocusTimeout() {
|
||||
itemFocusTimeout = null;
|
||||
self.value(itemFocusValue);
|
||||
}
|
||||
|
||||
var alphaFocusedElement;
|
||||
var alphaFocusTimeout;
|
||||
|
||||
function onAlphaFocusTimeout() {
|
||||
|
||||
alphaFocusTimeout = null;
|
||||
|
||||
if (document.activeElement === alphaFocusedElement) {
|
||||
var value = alphaFocusedElement.getAttribute('data-value');
|
||||
self.value(value, true);
|
||||
function onItemFocusTimeout() {
|
||||
itemFocusTimeout = null;
|
||||
this.value(itemFocusValue);
|
||||
}
|
||||
}
|
||||
|
||||
function onAlphaPickerInKeyboardModeClick(e) {
|
||||
let alphaFocusedElement;
|
||||
let alphaFocusTimeout;
|
||||
|
||||
var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
|
||||
function onAlphaFocusTimeout() {
|
||||
|
||||
if (alphaPickerButton) {
|
||||
var value = alphaPickerButton.getAttribute('data-value');
|
||||
|
||||
element.dispatchEvent(new CustomEvent('alphavalueclicked', {
|
||||
cancelable: false,
|
||||
detail: {
|
||||
value: value
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
function onAlphaPickerClick(e) {
|
||||
|
||||
var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
|
||||
|
||||
if (alphaPickerButton) {
|
||||
var value = alphaPickerButton.getAttribute('data-value');
|
||||
if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) {
|
||||
self.value(null, true);
|
||||
} else {
|
||||
self.value(value, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onAlphaPickerFocusIn(e) {
|
||||
|
||||
if (alphaFocusTimeout) {
|
||||
clearTimeout(alphaFocusTimeout);
|
||||
alphaFocusTimeout = null;
|
||||
|
||||
if (document.activeElement === alphaFocusedElement) {
|
||||
const value = alphaFocusedElement.getAttribute('data-value');
|
||||
this.value(value, true);
|
||||
}
|
||||
}
|
||||
|
||||
var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
|
||||
function onAlphaPickerInKeyboardModeClick(e) {
|
||||
|
||||
if (alphaPickerButton) {
|
||||
alphaFocusedElement = alphaPickerButton;
|
||||
alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 600);
|
||||
const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
|
||||
|
||||
if (alphaPickerButton) {
|
||||
const value = alphaPickerButton.getAttribute('data-value');
|
||||
|
||||
element.dispatchEvent(new CustomEvent('alphavalueclicked', {
|
||||
cancelable: false,
|
||||
detail: {
|
||||
value
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onItemsFocusIn(e) {
|
||||
function onAlphaPickerClick(e) {
|
||||
|
||||
var item = dom.parentWithClass(e.target, itemClass);
|
||||
const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
|
||||
|
||||
if (item) {
|
||||
var prefix = item.getAttribute('data-prefix');
|
||||
if (prefix && prefix.length) {
|
||||
|
||||
itemFocusValue = prefix[0];
|
||||
if (itemFocusTimeout) {
|
||||
clearTimeout(itemFocusTimeout);
|
||||
if (alphaPickerButton) {
|
||||
const value = alphaPickerButton.getAttribute('data-value');
|
||||
if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) {
|
||||
this.value(null, true);
|
||||
} else {
|
||||
this.value(value, true);
|
||||
}
|
||||
itemFocusTimeout = setTimeout(onItemFocusTimeout, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
self.enabled = function (enabled) {
|
||||
function onAlphaPickerFocusIn(e) {
|
||||
|
||||
if (enabled) {
|
||||
|
||||
if (itemsContainer) {
|
||||
itemsContainer.addEventListener('focus', onItemsFocusIn, true);
|
||||
if (alphaFocusTimeout) {
|
||||
clearTimeout(alphaFocusTimeout);
|
||||
alphaFocusTimeout = null;
|
||||
}
|
||||
|
||||
if (options.mode === 'keyboard') {
|
||||
element.addEventListener('click', onAlphaPickerInKeyboardModeClick);
|
||||
}
|
||||
const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
|
||||
|
||||
if (alphaPickerButton) {
|
||||
alphaFocusedElement = alphaPickerButton;
|
||||
alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 600);
|
||||
}
|
||||
}
|
||||
|
||||
function onItemsFocusIn(e) {
|
||||
|
||||
const item = dom.parentWithClass(e.target, itemClass);
|
||||
|
||||
if (item) {
|
||||
const prefix = item.getAttribute('data-prefix');
|
||||
if (prefix && prefix.length) {
|
||||
|
||||
itemFocusValue = prefix[0];
|
||||
if (itemFocusTimeout) {
|
||||
clearTimeout(itemFocusTimeout);
|
||||
}
|
||||
itemFocusTimeout = setTimeout(onItemFocusTimeout, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.enabled = function (enabled) {
|
||||
|
||||
if (enabled) {
|
||||
|
||||
if (itemsContainer) {
|
||||
itemsContainer.addEventListener('focus', onItemsFocusIn, true);
|
||||
}
|
||||
|
||||
if (options.mode === 'keyboard') {
|
||||
element.addEventListener('click', onAlphaPickerInKeyboardModeClick);
|
||||
}
|
||||
|
||||
if (options.valueChangeEvent !== 'click') {
|
||||
element.addEventListener('focus', onAlphaPickerFocusIn, true);
|
||||
} else {
|
||||
element.addEventListener('click', onAlphaPickerClick.bind(this));
|
||||
}
|
||||
|
||||
if (options.valueChangeEvent !== 'click') {
|
||||
element.addEventListener('focus', onAlphaPickerFocusIn, true);
|
||||
} else {
|
||||
element.addEventListener('click', onAlphaPickerClick.bind(this));
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if (itemsContainer) {
|
||||
itemsContainer.removeEventListener('focus', onItemsFocusIn, true);
|
||||
}
|
||||
|
||||
element.removeEventListener('click', onAlphaPickerInKeyboardModeClick);
|
||||
element.removeEventListener('focus', onAlphaPickerFocusIn, true);
|
||||
element.removeEventListener('click', onAlphaPickerClick.bind(this));
|
||||
}
|
||||
};
|
||||
|
||||
render(element, options);
|
||||
|
||||
this.enabled(true);
|
||||
this.visible(true);
|
||||
}
|
||||
|
||||
AlphaPicker.prototype.value = function (value, applyValue) {
|
||||
|
||||
var element = this.options.element;
|
||||
var btn;
|
||||
var selected;
|
||||
|
||||
if (value !== undefined) {
|
||||
if (value != null) {
|
||||
|
||||
value = value.toUpperCase();
|
||||
this._currentValue = value;
|
||||
|
||||
if (this.options.mode !== 'keyboard') {
|
||||
selected = element.querySelector('.' + selectedButtonClass);
|
||||
|
||||
try {
|
||||
btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']');
|
||||
} catch (err) {
|
||||
console.error('error in querySelector: ' + err);
|
||||
if (itemsContainer) {
|
||||
itemsContainer.removeEventListener('focus', onItemsFocusIn, true);
|
||||
}
|
||||
|
||||
if (btn && btn !== selected) {
|
||||
btn.classList.add(selectedButtonClass);
|
||||
element.removeEventListener('click', onAlphaPickerInKeyboardModeClick);
|
||||
element.removeEventListener('focus', onAlphaPickerFocusIn, true);
|
||||
element.removeEventListener('click', onAlphaPickerClick.bind(this));
|
||||
}
|
||||
};
|
||||
|
||||
render(element, options);
|
||||
|
||||
this.enabled(true);
|
||||
this.visible(true);
|
||||
}
|
||||
|
||||
value(value, applyValue) {
|
||||
|
||||
const element = this.options.element;
|
||||
let btn;
|
||||
let selected;
|
||||
|
||||
if (value !== undefined) {
|
||||
if (value != null) {
|
||||
|
||||
value = value.toUpperCase();
|
||||
this._currentValue = value;
|
||||
|
||||
if (this.options.mode !== 'keyboard') {
|
||||
selected = element.querySelector(`.${selectedButtonClass}`);
|
||||
|
||||
try {
|
||||
btn = element.querySelector(`.alphaPickerButton[data-value='${value}']`);
|
||||
} catch (err) {
|
||||
console.error('error in querySelector:', err);
|
||||
}
|
||||
|
||||
if (btn && btn !== selected) {
|
||||
btn.classList.add(selectedButtonClass);
|
||||
}
|
||||
if (selected && selected !== btn) {
|
||||
selected.classList.remove(selectedButtonClass);
|
||||
}
|
||||
}
|
||||
if (selected && selected !== btn) {
|
||||
} else {
|
||||
this._currentValue = value;
|
||||
|
||||
selected = element.querySelector(`.${selectedButtonClass}`);
|
||||
if (selected) {
|
||||
selected.classList.remove(selectedButtonClass);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this._currentValue = value;
|
||||
|
||||
selected = element.querySelector('.' + selectedButtonClass);
|
||||
if (selected) {
|
||||
selected.classList.remove(selectedButtonClass);
|
||||
}
|
||||
}
|
||||
|
||||
if (applyValue) {
|
||||
element.dispatchEvent(new CustomEvent('alphavaluechanged', {
|
||||
cancelable: false,
|
||||
detail: {
|
||||
value
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
return this._currentValue;
|
||||
}
|
||||
|
||||
if (applyValue) {
|
||||
element.dispatchEvent(new CustomEvent('alphavaluechanged', {
|
||||
cancelable: false,
|
||||
detail: {
|
||||
value: value
|
||||
}
|
||||
}));
|
||||
on(name, fn) {
|
||||
const element = this.options.element;
|
||||
element.addEventListener(name, fn);
|
||||
}
|
||||
|
||||
return this._currentValue;
|
||||
};
|
||||
|
||||
AlphaPicker.prototype.on = function (name, fn) {
|
||||
var element = this.options.element;
|
||||
element.addEventListener(name, fn);
|
||||
};
|
||||
|
||||
AlphaPicker.prototype.off = function (name, fn) {
|
||||
var element = this.options.element;
|
||||
element.removeEventListener(name, fn);
|
||||
};
|
||||
|
||||
AlphaPicker.prototype.visible = function (visible) {
|
||||
|
||||
var element = this.options.element;
|
||||
element.style.visibility = visible ? 'visible' : 'hidden';
|
||||
};
|
||||
|
||||
AlphaPicker.prototype.values = function () {
|
||||
|
||||
var element = this.options.element;
|
||||
var elems = element.querySelectorAll('.alphaPickerButton');
|
||||
var values = [];
|
||||
for (var i = 0, length = elems.length; i < length; i++) {
|
||||
|
||||
values.push(elems[i].getAttribute('data-value'));
|
||||
|
||||
off(name, fn) {
|
||||
const element = this.options.element;
|
||||
element.removeEventListener(name, fn);
|
||||
}
|
||||
|
||||
return values;
|
||||
};
|
||||
visible(visible) {
|
||||
|
||||
AlphaPicker.prototype.focus = function () {
|
||||
const element = this.options.element;
|
||||
element.style.visibility = visible ? 'visible' : 'hidden';
|
||||
}
|
||||
|
||||
var element = this.options.element;
|
||||
focusManager.autoFocus(element, true);
|
||||
};
|
||||
values() {
|
||||
|
||||
AlphaPicker.prototype.destroy = function () {
|
||||
const element = this.options.element;
|
||||
const elems = element.querySelectorAll('.alphaPickerButton');
|
||||
const values = [];
|
||||
for (let i = 0, length = elems.length; i < length; i++) {
|
||||
|
||||
var element = this.options.element;
|
||||
this.enabled(false);
|
||||
element.classList.remove('focuscontainer-x');
|
||||
this.options = null;
|
||||
};
|
||||
values.push(elems[i].getAttribute('data-value'));
|
||||
|
||||
return AlphaPicker;
|
||||
});
|
||||
}
|
||||
|
||||
return values;
|
||||
}
|
||||
|
||||
focus() {
|
||||
|
||||
const element = this.options.element;
|
||||
focusManager.autoFocus(element, true);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
const element = this.options.element;
|
||||
this.enabled(false);
|
||||
element.classList.remove('focuscontainer-x');
|
||||
this.options = null;
|
||||
}
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
export default AlphaPicker;
|
||||
|
||||
@ -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) {
|
||||
'use strict';
|
||||
import loading from 'loading';
|
||||
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() {
|
||||
return systemInfo ? Promise.resolve(systemInfo) : ApiClient.getPublicSystemInfo().then(
|
||||
function(info) {
|
||||
info => {
|
||||
systemInfo = info;
|
||||
return info;
|
||||
}
|
||||
@ -21,9 +31,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
|
||||
|
||||
loading.show();
|
||||
|
||||
var promises = [];
|
||||
const promises = [];
|
||||
|
||||
if ('Network' === path) {
|
||||
if (path === 'Network') {
|
||||
promises.push(ApiClient.getNetworkDevices());
|
||||
} else {
|
||||
if (path) {
|
||||
@ -35,10 +45,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
|
||||
}
|
||||
|
||||
Promise.all(promises).then(
|
||||
function(responses) {
|
||||
var folders = responses[0];
|
||||
var parentPath = responses[1] || '';
|
||||
var html = '';
|
||||
responses => {
|
||||
const folders = responses[0];
|
||||
const parentPath = responses[1] || '';
|
||||
let html = '';
|
||||
|
||||
page.querySelector('.results').scrollTop = 0;
|
||||
page.querySelector('#txtDirectoryPickerPath').value = path || '';
|
||||
@ -46,9 +56,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
|
||||
if (path) {
|
||||
html += getItem('lnkPath lnkDirectory', '', parentPath, '...');
|
||||
}
|
||||
for (var i = 0, length = folders.length; i < length; i++) {
|
||||
var folder = folders[i];
|
||||
var cssClass = 'File' === folder.Type ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory';
|
||||
for (let i = 0, length = folders.length; i < length; i++) {
|
||||
const folder = folders[i];
|
||||
const cssClass = folder.Type === 'File' ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory';
|
||||
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;
|
||||
loading.hide();
|
||||
}, function() {
|
||||
}, () => {
|
||||
if (updatePathOnError) {
|
||||
page.querySelector('#txtDirectoryPickerPath').value = '';
|
||||
page.querySelector('.results').innerHTML = '';
|
||||
@ -69,8 +79,8 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
|
||||
}
|
||||
|
||||
function getItem(cssClass, type, path, name) {
|
||||
var html = '';
|
||||
html += '<div class="listItem listItem-border ' + cssClass + '" data-type="' + type + '" data-path="' + path + '">';
|
||||
let html = '';
|
||||
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="listItemBodyText">';
|
||||
html += name;
|
||||
@ -82,19 +92,19 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
|
||||
}
|
||||
|
||||
function getEditorHtml(options, systemInfo) {
|
||||
var html = '';
|
||||
let html = '';
|
||||
html += '<div class="formDialogContent scrollY">';
|
||||
html += '<div class="dialogContentInner dialog-content-centered" style="padding-top:2em;">';
|
||||
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 += instruction;
|
||||
if ('bsd' === systemInfo.OperatingSystem.toLowerCase()) {
|
||||
if (systemInfo.OperatingSystem.toLowerCase() === 'bsd') {
|
||||
html += '<br/>';
|
||||
html += '<br/>';
|
||||
html += globalize.translate('MessageDirectoryPickerBSDInstruction');
|
||||
html += '<br/>';
|
||||
} else if ('linux' === systemInfo.OperatingSystem.toLowerCase()) {
|
||||
} else if (systemInfo.OperatingSystem.toLowerCase() === 'linux') {
|
||||
html += '<br/>';
|
||||
html += '<br/>';
|
||||
html += globalize.translate('MessageDirectoryPickerLinuxInstruction');
|
||||
@ -105,17 +115,17 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
|
||||
html += '<form style="margin:auto;">';
|
||||
html += '<div class="inputContainer" style="display: flex; align-items: center;">';
|
||||
html += '<div style="flex-grow:1;">';
|
||||
var labelKey;
|
||||
let labelKey;
|
||||
if (options.includeFiles !== true) {
|
||||
labelKey = 'LabelFolder';
|
||||
} else {
|
||||
labelKey = 'LabelPath';
|
||||
}
|
||||
var readOnlyAttribute = options.pathReadOnly ? ' readonly' : '';
|
||||
html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ' + readOnlyAttribute + ' label="' + globalize.translate(labelKey) + '"/>';
|
||||
const readOnlyAttribute = options.pathReadOnly ? ' readonly' : '';
|
||||
html += `<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ${readOnlyAttribute} label="${globalize.translate(labelKey)}"/>`;
|
||||
html += '</div>';
|
||||
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>';
|
||||
if (!readOnlyAttribute) {
|
||||
@ -123,14 +133,14 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
|
||||
}
|
||||
if (options.enableNetworkSharePath) {
|
||||
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 += globalize.translate('LabelOptionalNetworkPathHelp', '<b>\\\\server</b>', '<b>\\\\192.168.1.101</b>');
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
}
|
||||
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 += '</form>';
|
||||
html += '</div>';
|
||||
@ -147,7 +157,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
|
||||
}
|
||||
|
||||
function alertTextWithOptions(options) {
|
||||
require(['alert'], function(alert) {
|
||||
require(['alert'], alert => {
|
||||
alert(options);
|
||||
});
|
||||
}
|
||||
@ -160,7 +170,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
|
||||
ValidateWriteable: validateWriteable,
|
||||
Path: path
|
||||
}
|
||||
}).catch(function(response) {
|
||||
}).catch(response => {
|
||||
if (response) {
|
||||
if (response.status === 404) {
|
||||
alertText(globalize.translate('PathNotFound'));
|
||||
@ -180,10 +190,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
|
||||
}
|
||||
|
||||
function initEditor(content, options, fileOptions) {
|
||||
content.addEventListener('click', function(e) {
|
||||
var lnkPath = dom.parentWithClass(e.target, 'lnkPath');
|
||||
content.addEventListener('click', e => {
|
||||
const lnkPath = dom.parentWithClass(e.target, 'lnkPath');
|
||||
if (lnkPath) {
|
||||
var path = lnkPath.getAttribute('data-path');
|
||||
const path = lnkPath.getAttribute('data-path');
|
||||
if (lnkPath.classList.contains('lnkFile')) {
|
||||
content.querySelector('#txtDirectoryPickerPath').value = path;
|
||||
} 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')) {
|
||||
var path = content.querySelector('#txtDirectoryPickerPath').value;
|
||||
const path = content.querySelector('#txtDirectoryPickerPath').value;
|
||||
refreshDirectoryBrowser(content, path, fileOptions);
|
||||
}
|
||||
});
|
||||
|
||||
content.addEventListener('change', function(e) {
|
||||
var txtDirectoryPickerPath = dom.parentWithTag(e.target, 'INPUT');
|
||||
if (txtDirectoryPickerPath && 'txtDirectoryPickerPath' === txtDirectoryPickerPath.id) {
|
||||
content.addEventListener('change', e => {
|
||||
const txtDirectoryPickerPath = dom.parentWithTag(e.target, 'INPUT');
|
||||
if (txtDirectoryPickerPath && txtDirectoryPickerPath.id === 'txtDirectoryPickerPath') {
|
||||
refreshDirectoryBrowser(content, txtDirectoryPickerPath.value, fileOptions);
|
||||
}
|
||||
});
|
||||
|
||||
content.querySelector('form').addEventListener('submit', function(e) {
|
||||
if (options.callback) {
|
||||
var networkSharePath = this.querySelector('#txtNetworkPath');
|
||||
let networkSharePath = this.querySelector('#txtNetworkPath');
|
||||
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));
|
||||
}
|
||||
e.preventDefault();
|
||||
@ -224,77 +234,79 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
|
||||
return Promise.resolve(options.path);
|
||||
} else {
|
||||
return ApiClient.getJSON(ApiClient.getUrl('Environment/DefaultDirectoryBrowser')).then(
|
||||
function(result) {
|
||||
result => {
|
||||
return result.Path || '';
|
||||
}, function() {
|
||||
}, () => {
|
||||
return '';
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function directoryBrowser() {
|
||||
var currentDialog;
|
||||
var self = this;
|
||||
self.show = function(options) {
|
||||
options = options || {};
|
||||
var fileOptions = {
|
||||
includeDirectories: true
|
||||
};
|
||||
if (options.includeDirectories != null) {
|
||||
fileOptions.includeDirectories = options.includeDirectories;
|
||||
}
|
||||
if (options.includeFiles != null) {
|
||||
fileOptions.includeFiles = options.includeFiles;
|
||||
}
|
||||
Promise.all([getSystemInfo(), getDefaultPath(options)]).then(
|
||||
function(responses) {
|
||||
var systemInfo = responses[0];
|
||||
var initialPath = responses[1];
|
||||
var dlg = dialogHelper.createDialog({
|
||||
size: 'small',
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
});
|
||||
dlg.classList.add('ui-body-a');
|
||||
dlg.classList.add('background-theme-a');
|
||||
dlg.classList.add('directoryPicker');
|
||||
dlg.classList.add('formDialog');
|
||||
|
||||
var html = '';
|
||||
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 += '<h3 class="formDialogHeaderTitle">';
|
||||
html += options.header || globalize.translate('HeaderSelectPath');
|
||||
html += '</h3>';
|
||||
html += '</div>';
|
||||
html += getEditorHtml(options, systemInfo);
|
||||
dlg.innerHTML = html;
|
||||
initEditor(dlg, options, fileOptions);
|
||||
dlg.addEventListener('close', onDialogClosed);
|
||||
dialogHelper.open(dlg);
|
||||
dlg.querySelector('.btnCloseDialog').addEventListener('click', function() {
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
currentDialog = dlg;
|
||||
dlg.querySelector('#txtDirectoryPickerPath').value = initialPath;
|
||||
var txtNetworkPath = dlg.querySelector('#txtNetworkPath');
|
||||
if (txtNetworkPath) {
|
||||
txtNetworkPath.value = options.networkSharePath || '';
|
||||
}
|
||||
if (!options.pathReadOnly) {
|
||||
refreshDirectoryBrowser(dlg, initialPath, fileOptions, true);
|
||||
}
|
||||
class directoryBrowser {
|
||||
constructor() {
|
||||
let currentDialog;
|
||||
this.show = options => {
|
||||
options = options || {};
|
||||
const fileOptions = {
|
||||
includeDirectories: true
|
||||
};
|
||||
if (options.includeDirectories != null) {
|
||||
fileOptions.includeDirectories = options.includeDirectories;
|
||||
}
|
||||
);
|
||||
};
|
||||
self.close = function() {
|
||||
if (currentDialog) {
|
||||
dialogHelper.close(currentDialog);
|
||||
}
|
||||
};
|
||||
if (options.includeFiles != null) {
|
||||
fileOptions.includeFiles = options.includeFiles;
|
||||
}
|
||||
Promise.all([getSystemInfo(), getDefaultPath(options)]).then(
|
||||
responses => {
|
||||
const systemInfo = responses[0];
|
||||
const initialPath = responses[1];
|
||||
const dlg = dialogHelper.createDialog({
|
||||
size: 'small',
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
});
|
||||
dlg.classList.add('ui-body-a');
|
||||
dlg.classList.add('background-theme-a');
|
||||
dlg.classList.add('directoryPicker');
|
||||
dlg.classList.add('formDialog');
|
||||
|
||||
let html = '';
|
||||
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 += '<h3 class="formDialogHeaderTitle">';
|
||||
html += options.header || globalize.translate('HeaderSelectPath');
|
||||
html += '</h3>';
|
||||
html += '</div>';
|
||||
html += getEditorHtml(options, systemInfo);
|
||||
dlg.innerHTML = html;
|
||||
initEditor(dlg, options, fileOptions);
|
||||
dlg.addEventListener('close', onDialogClosed);
|
||||
dialogHelper.open(dlg);
|
||||
dlg.querySelector('.btnCloseDialog').addEventListener('click', () => {
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
currentDialog = dlg;
|
||||
dlg.querySelector('#txtDirectoryPickerPath').value = initialPath;
|
||||
const txtNetworkPath = dlg.querySelector('#txtNetworkPath');
|
||||
if (txtNetworkPath) {
|
||||
txtNetworkPath.value = options.networkSharePath || '';
|
||||
}
|
||||
if (!options.pathReadOnly) {
|
||||
refreshDirectoryBrowser(dlg, initialPath, fileOptions, true);
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
this.close = () => {
|
||||
if (currentDialog) {
|
||||
dialogHelper.close(currentDialog);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
var systemInfo;
|
||||
return directoryBrowser;
|
||||
});
|
||||
let systemInfo;
|
||||
|
||||
/* eslint-enable indent */
|
||||
export default directoryBrowser;
|
||||
|
||||
@ -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) {
|
||||
'use strict';
|
||||
/* eslint-disable indent */
|
||||
|
||||
var currentItemId;
|
||||
var currentServerId;
|
||||
var currentFile;
|
||||
var hasChanges = false;
|
||||
/**
|
||||
* Module for imageUploader.
|
||||
* @module components/imageUploader/imageUploader
|
||||
*/
|
||||
|
||||
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) {
|
||||
|
||||
@ -12,14 +28,14 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
||||
|
||||
switch (evt.target.error.code) {
|
||||
case evt.target.error.NOT_FOUND_ERR:
|
||||
require(['toast'], function (toast) {
|
||||
import('toast').then(({default: toast}) => {
|
||||
toast(globalize.translate('MessageFileReadError'));
|
||||
});
|
||||
break;
|
||||
case evt.target.error.ABORT_ERR:
|
||||
break; // noop
|
||||
default:
|
||||
require(['toast'], function (toast) {
|
||||
import('toast').then(({default: toast}) => {
|
||||
toast(globalize.translate('MessageFileReadError'));
|
||||
});
|
||||
break;
|
||||
@ -28,7 +44,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
||||
|
||||
function setFiles(page, files) {
|
||||
|
||||
var file = files[0];
|
||||
const file = files[0];
|
||||
|
||||
if (!file || !file.type.match('image.*')) {
|
||||
page.querySelector('#imageOutput').innerHTML = '';
|
||||
@ -39,23 +55,23 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
||||
|
||||
currentFile = file;
|
||||
|
||||
var reader = new FileReader();
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onerror = onFileReaderError;
|
||||
reader.onloadstart = function () {
|
||||
reader.onloadstart = () => {
|
||||
page.querySelector('#fldUpload').classList.add('hide');
|
||||
};
|
||||
reader.onabort = function () {
|
||||
reader.onabort = () => {
|
||||
loading.hide();
|
||||
console.debug('File read cancelled');
|
||||
};
|
||||
|
||||
// Closure to capture the file information.
|
||||
reader.onload = (function (theFile) {
|
||||
return function (e) {
|
||||
reader.onload = (theFile => {
|
||||
return e => {
|
||||
|
||||
// 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('#dropImageText').classList.add('hide');
|
||||
@ -69,14 +85,14 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
||||
|
||||
function onSubmit(e) {
|
||||
|
||||
var file = currentFile;
|
||||
const file = currentFile;
|
||||
|
||||
if (!file) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!file.type.startsWith('image/')) {
|
||||
require(['toast'], function (toast) {
|
||||
import('toast').then(({default: toast}) => {
|
||||
toast(globalize.translate('MessageImageFileTypeAllowed'));
|
||||
});
|
||||
e.preventDefault();
|
||||
@ -85,18 +101,18 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
||||
|
||||
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') {
|
||||
require(['toast'], function(toast) {
|
||||
import('toast').then(({default: toast}) => {
|
||||
toast(globalize.translate('MessageImageTypeNotSelected'));
|
||||
});
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(function () {
|
||||
connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => {
|
||||
|
||||
dlg.querySelector('#uploadImage').value = '';
|
||||
|
||||
@ -117,21 +133,21 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
||||
setFiles(page, this.files);
|
||||
});
|
||||
|
||||
page.querySelector('.btnBrowse').addEventListener('click', function () {
|
||||
page.querySelector('.btnBrowse').addEventListener('click', () => {
|
||||
page.querySelector('#uploadImage').click();
|
||||
});
|
||||
}
|
||||
|
||||
function showEditor(options, resolve, reject) {
|
||||
function showEditor(options, resolve) {
|
||||
|
||||
options = options || {};
|
||||
|
||||
require(['text!./imageUploader.template.html'], function (template) {
|
||||
return import('text!./imageUploader.template.html').then(({default: template}) => {
|
||||
|
||||
currentItemId = options.itemId;
|
||||
currentServerId = options.serverId;
|
||||
|
||||
var dialogOptions = {
|
||||
const dialogOptions = {
|
||||
removeOnClose: true
|
||||
};
|
||||
|
||||
@ -141,7 +157,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
||||
dialogOptions.size = 'small';
|
||||
}
|
||||
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
const dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
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()
|
||||
dlg.addEventListener('close', function () {
|
||||
dlg.addEventListener('close', () => {
|
||||
|
||||
if (layoutManager.tv) {
|
||||
scrollHelper.centerFocus.off(dlg, false);
|
||||
@ -168,22 +184,24 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
||||
|
||||
dlg.querySelector('#selectImageType').value = options.imageType || 'Primary';
|
||||
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', () => {
|
||||
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
show: function (options) {
|
||||
export function show(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
|
||||
};
|
||||
|
||||
@ -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) {
|
||||
'use strict';
|
||||
/* eslint-disable indent */
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
var html = item.MediaSources.map(function (version) {
|
||||
let html = item.MediaSources.map(version => {
|
||||
return getMediaSourceHtml(user, item, version);
|
||||
}).join('<div style="border-top:1px solid #444;margin: 1em 0;"></div>');
|
||||
if (item.MediaSources.length > 1) {
|
||||
html = '<br/>' + html;
|
||||
html = `<br/>${html}`;
|
||||
}
|
||||
var mediaInfoContent = page.querySelector('#mediaInfoContent');
|
||||
const mediaInfoContent = page.querySelector('#mediaInfoContent');
|
||||
mediaInfoContent.innerHTML = html;
|
||||
}
|
||||
|
||||
function getMediaSourceHtml(user, item, version) {
|
||||
var html = '';
|
||||
let html = '';
|
||||
if (version.Name) {
|
||||
html += '<div><h2 class="mediaInfoStreamType">' + version.Name + '</h2></div>';
|
||||
html += `<div><h2 class="mediaInfoStreamType">${version.Name}</h2></div>`;
|
||||
}
|
||||
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) {
|
||||
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) {
|
||||
html += createAttribute(globalize.translate('MediaInfoPath'), version.Path) + '<br/>';
|
||||
html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path)}<br/>`;
|
||||
}
|
||||
if (version.Size) {
|
||||
var size = (version.Size / (1024 * 1024)).toFixed(0) + ' MB';
|
||||
html += createAttribute(globalize.translate('MediaInfoSize'), size) + '<br/>';
|
||||
const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`;
|
||||
html += `${createAttribute(globalize.translate('MediaInfoSize'), size)}<br/>`;
|
||||
}
|
||||
for (var i = 0, length = version.MediaStreams.length; i < length; i++) {
|
||||
var stream = version.MediaStreams[i];
|
||||
for (let i = 0, length = version.MediaStreams.length; i < length; i++) {
|
||||
const stream = version.MediaStreams[i];
|
||||
if (stream.Type === 'Data') {
|
||||
continue;
|
||||
}
|
||||
html += '<div class="mediaInfoStream">';
|
||||
var displayType = globalize.translate('MediaInfoStreamType' + stream.Type);
|
||||
html += '<h2 class="mediaInfoStreamType">' + displayType + '</h2>';
|
||||
var attributes = [];
|
||||
const displayType = globalize.translate(`MediaInfoStreamType${stream.Type}`);
|
||||
html += `<h2 class="mediaInfoStreamType">${displayType}</h2>`;
|
||||
const attributes = [];
|
||||
if (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));
|
||||
}
|
||||
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') {
|
||||
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));
|
||||
}
|
||||
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') {
|
||||
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) {
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), stream.SampleRate + ' Hz'));
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), `${stream.SampleRate} Hz`));
|
||||
}
|
||||
if (stream.BitDepth) {
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), stream.BitDepth + ' bit'));
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), `${stream.BitDepth} bit`));
|
||||
}
|
||||
if (stream.PixelFormat) {
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoPixelFormat'), stream.PixelFormat));
|
||||
@ -116,13 +133,13 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
|
||||
}
|
||||
|
||||
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) {
|
||||
var apiClient = connectionManager.getApiClient(serverId);
|
||||
return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
|
||||
var dialogOptions = {
|
||||
function loadMediaInfo(itemId, serverId, template) {
|
||||
const apiClient = connectionManager.getApiClient(serverId);
|
||||
return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
|
||||
const dialogOptions = {
|
||||
size: 'small',
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
@ -130,35 +147,35 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
|
||||
if (layoutManager.tv) {
|
||||
dialogOptions.size = 'fullscreen';
|
||||
}
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
const dlg = dialogHelper.createDialog(dialogOptions);
|
||||
dlg.classList.add('formDialog');
|
||||
var html = '';
|
||||
let html = '';
|
||||
html += globalize.translateDocument(template, 'core');
|
||||
dlg.innerHTML = html;
|
||||
if (layoutManager.tv) {
|
||||
dlg.querySelector('.formDialogContent');
|
||||
}
|
||||
dialogHelper.open(dlg);
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', () => {
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
apiClient.getCurrentUser().then(function (user) {
|
||||
apiClient.getCurrentUser().then(user => {
|
||||
setMediaInfo(user, dlg, item);
|
||||
});
|
||||
loading.hide();
|
||||
});
|
||||
}
|
||||
|
||||
function showMediaInfo(itemId, serverId) {
|
||||
export function show(itemId, serverId) {
|
||||
loading.show();
|
||||
return new Promise(function (resolve, reject) {
|
||||
require(['text!./itemMediaInfo.template.html'], function (template) {
|
||||
showMediaInfoMore(itemId, serverId, template).then(resolve, reject);
|
||||
return import('text!./itemMediaInfo.template.html').then(({default: template}) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
loadMediaInfo(itemId, serverId, template).then(resolve, reject);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
show: showMediaInfo
|
||||
};
|
||||
});
|
||||
/* eslint-enable indent */
|
||||
export default {
|
||||
show: show
|
||||
};
|
||||
|
||||
@ -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) {
|
||||
'use strict';
|
||||
/* eslint-disable indent */
|
||||
|
||||
var enableFocusTransform = !browser.slow && !browser.edge;
|
||||
/**
|
||||
* Module for itemidentifier media item.
|
||||
* @module components/itemidentifier/itemidentifier
|
||||
*/
|
||||
|
||||
var currentItem;
|
||||
var currentItemType;
|
||||
var currentServerId;
|
||||
var currentResolve;
|
||||
var currentReject;
|
||||
var hasChanges = false;
|
||||
var currentSearchResult;
|
||||
import dialogHelper from 'dialogHelper';
|
||||
import loading from 'loading';
|
||||
import connectionManager from 'connectionManager';
|
||||
import globalize from 'globalize';
|
||||
import scrollHelper from 'scrollHelper';
|
||||
import layoutManager from 'layoutManager';
|
||||
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() {
|
||||
return connectionManager.getApiClient(currentServerId);
|
||||
@ -17,14 +36,14 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
|
||||
function searchForIdentificationResults(page) {
|
||||
|
||||
var lookupInfo = {
|
||||
let lookupInfo = {
|
||||
ProviderIds: {}
|
||||
};
|
||||
|
||||
var i;
|
||||
var length;
|
||||
var identifyField = page.querySelectorAll('.identifyField');
|
||||
var value;
|
||||
let i;
|
||||
let length;
|
||||
const identifyField = page.querySelectorAll('.identifyField');
|
||||
let value;
|
||||
for (i = 0, length = identifyField.length; i < length; i++) {
|
||||
|
||||
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++) {
|
||||
|
||||
value = txtLookupId[i].value;
|
||||
@ -53,7 +72,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
}
|
||||
|
||||
if (!hasId && !lookupInfo.Name) {
|
||||
require(['toast'], function (toast) {
|
||||
import('toast').then(({default: toast}) => {
|
||||
toast(globalize.translate('PleaseEnterNameOrId'));
|
||||
});
|
||||
return;
|
||||
@ -71,16 +90,16 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
|
||||
loading.show();
|
||||
|
||||
var apiClient = getApiClient();
|
||||
const apiClient = getApiClient();
|
||||
|
||||
apiClient.ajax({
|
||||
type: 'POST',
|
||||
url: apiClient.getUrl('Items/RemoteSearch/' + currentItemType),
|
||||
url: apiClient.getUrl(`Items/RemoteSearch/${currentItemType}`),
|
||||
data: JSON.stringify(lookupInfo),
|
||||
contentType: 'application/json',
|
||||
dataType: 'json'
|
||||
|
||||
}).then(function (results) {
|
||||
}).then(results => {
|
||||
|
||||
loading.hide();
|
||||
showIdentificationSearchResults(page, results);
|
||||
@ -89,29 +108,29 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
|
||||
function showIdentificationSearchResults(page, results) {
|
||||
|
||||
var identificationSearchResults = page.querySelector('.identificationSearchResults');
|
||||
const identificationSearchResults = page.querySelector('.identificationSearchResults');
|
||||
|
||||
page.querySelector('.popupIdentifyForm').classList.add('hide');
|
||||
identificationSearchResults.classList.remove('hide');
|
||||
page.querySelector('.identifyOptionsForm').classList.add('hide');
|
||||
page.querySelector('.dialogContentInner').classList.remove('dialog-content-centered');
|
||||
|
||||
var html = '';
|
||||
var i;
|
||||
var length;
|
||||
let html = '';
|
||||
let i;
|
||||
let length;
|
||||
for (i = 0, length = results.length; i < length; i++) {
|
||||
|
||||
var result = results[i];
|
||||
const result = results[i];
|
||||
html += getSearchResultHtml(result, i);
|
||||
}
|
||||
|
||||
var elem = page.querySelector('.identificationSearchResultList');
|
||||
const elem = page.querySelector('.identificationSearchResultList');
|
||||
elem.innerHTML = html;
|
||||
|
||||
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) {
|
||||
|
||||
@ -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++) {
|
||||
|
||||
searchImages[i].addEventListener('click', onSearchImageClick);
|
||||
@ -143,7 +162,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
|
||||
function showIdentifyOptions(page, identifyResult) {
|
||||
|
||||
var identifyOptionsForm = page.querySelector('.identifyOptionsForm');
|
||||
const identifyOptionsForm = page.querySelector('.identifyOptionsForm');
|
||||
|
||||
page.querySelector('.popupIdentifyForm').classList.add('hide');
|
||||
page.querySelector('.identificationSearchResults').classList.add('hide');
|
||||
@ -153,19 +172,19 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
|
||||
currentSearchResult = identifyResult;
|
||||
|
||||
var lines = [];
|
||||
const lines = [];
|
||||
lines.push(identifyResult.Name);
|
||||
|
||||
if (identifyResult.ProductionYear) {
|
||||
lines.push(identifyResult.ProductionYear);
|
||||
}
|
||||
|
||||
var resultHtml = lines.join('<br/>');
|
||||
let resultHtml = lines.join('<br/>');
|
||||
|
||||
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;
|
||||
@ -177,10 +196,10 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
|
||||
// TODO move card creation code to Card component
|
||||
|
||||
var html = '';
|
||||
var cssClass = 'card scalableCard';
|
||||
var cardBoxCssClass = 'cardBox';
|
||||
var padderClass;
|
||||
let html = '';
|
||||
let cssClass = 'card scalableCard';
|
||||
let cardBoxCssClass = 'cardBox';
|
||||
let padderClass;
|
||||
|
||||
if (currentItemType === 'Episode') {
|
||||
cssClass += ' backdropCard backdropCard-scalable';
|
||||
@ -203,30 +222,30 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
|
||||
cardBoxCssClass += ' cardBox-bottompadded';
|
||||
|
||||
html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
|
||||
html += '<div class="' + cardBoxCssClass + '">';
|
||||
html += `<button type="button" class="${cssClass}" data-index="${index}">`;
|
||||
html += `<div class="${cardBoxCssClass}">`;
|
||||
html += '<div class="cardScalable">';
|
||||
html += '<div class="' + padderClass + '"></div>';
|
||||
html += `<div class="${padderClass}"></div>`;
|
||||
|
||||
html += '<div class="cardContent searchImage">';
|
||||
|
||||
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 {
|
||||
|
||||
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>';
|
||||
|
||||
var numLines = 2;
|
||||
let numLines = 2;
|
||||
if (currentItemType === 'MusicAlbum') {
|
||||
numLines++;
|
||||
}
|
||||
|
||||
var lines = [result.Name];
|
||||
const lines = [result.Name];
|
||||
|
||||
if (result.AlbumArtist) {
|
||||
lines.push(result.AlbumArtist.Name);
|
||||
@ -235,7 +254,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
lines.push(result.ProductionYear);
|
||||
}
|
||||
|
||||
for (var i = 0; i < numLines; i++) {
|
||||
for (let i = 0; i < numLines; i++) {
|
||||
|
||||
if (i === 0) {
|
||||
html += '<div class="cardText cardText-first cardTextCentered">';
|
||||
@ -252,7 +271,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
}
|
||||
|
||||
function getSearchImageDisplayUrl(url, provider) {
|
||||
var apiClient = getApiClient();
|
||||
const apiClient = getApiClient();
|
||||
|
||||
return apiClient.getUrl('Items/RemoteSearch/Image', { imageUrl: url, ProviderName: provider });
|
||||
}
|
||||
@ -261,26 +280,26 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
|
||||
loading.show();
|
||||
|
||||
var options = {
|
||||
const options = {
|
||||
ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked
|
||||
};
|
||||
|
||||
var apiClient = getApiClient();
|
||||
const apiClient = getApiClient();
|
||||
|
||||
apiClient.ajax({
|
||||
type: 'POST',
|
||||
url: apiClient.getUrl('Items/RemoteSearch/Apply/' + currentItem.Id, options),
|
||||
url: apiClient.getUrl(`Items/RemoteSearch/Apply/${currentItem.Id}`, options),
|
||||
data: JSON.stringify(currentSearchResult),
|
||||
contentType: 'application/json'
|
||||
|
||||
}).then(function () {
|
||||
}).then(() => {
|
||||
|
||||
hasChanges = true;
|
||||
loading.hide();
|
||||
|
||||
dialogHelper.close(page);
|
||||
|
||||
}, function () {
|
||||
}, () => {
|
||||
|
||||
loading.hide();
|
||||
|
||||
@ -290,28 +309,28 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
|
||||
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">';
|
||||
|
||||
var fullName = idInfo.Name;
|
||||
let fullName = idInfo.Name;
|
||||
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>';
|
||||
}
|
||||
@ -338,16 +357,16 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
|
||||
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;
|
||||
currentItemType = currentItem.Type;
|
||||
|
||||
var dialogOptions = {
|
||||
const dialogOptions = {
|
||||
size: 'small',
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
@ -357,12 +376,12 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
dialogOptions.size = 'fullscreen';
|
||||
}
|
||||
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
const dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
dlg.classList.add('recordingDialog');
|
||||
|
||||
var html = '';
|
||||
let html = '';
|
||||
html += globalize.translateDocument(template, 'core');
|
||||
|
||||
dlg.innerHTML = html;
|
||||
@ -384,21 +403,21 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
|
||||
dialogHelper.open(dlg);
|
||||
|
||||
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) {
|
||||
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => {
|
||||
|
||||
e.preventDefault();
|
||||
searchForIdentificationResults(dlg);
|
||||
return false;
|
||||
});
|
||||
|
||||
dlg.querySelector('.identifyOptionsForm').addEventListener('submit', function (e) {
|
||||
dlg.querySelector('.identifyOptionsForm').addEventListener('submit', e => {
|
||||
|
||||
e.preventDefault();
|
||||
submitIdentficationResult(dlg);
|
||||
return false;
|
||||
});
|
||||
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', () => {
|
||||
|
||||
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) {
|
||||
|
||||
currentItem = null;
|
||||
currentItemType = itemType;
|
||||
|
||||
require(['text!./itemidentifier.template.html'], function (template) {
|
||||
return import('text!./itemidentifier.template.html').then(({default: template}) => {
|
||||
|
||||
var dialogOptions = {
|
||||
const dialogOptions = {
|
||||
size: 'small',
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
@ -438,12 +458,12 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
dialogOptions.size = 'fullscreen';
|
||||
}
|
||||
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
const dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
dlg.classList.add('recordingDialog');
|
||||
|
||||
var html = '';
|
||||
let html = '';
|
||||
html += globalize.translateDocument(template, 'core');
|
||||
|
||||
dlg.innerHTML = html;
|
||||
@ -454,22 +474,22 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
|
||||
dialogHelper.open(dlg);
|
||||
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', () => {
|
||||
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
|
||||
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) {
|
||||
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => {
|
||||
|
||||
e.preventDefault();
|
||||
searchForIdentificationResults(dlg);
|
||||
return false;
|
||||
});
|
||||
|
||||
dlg.addEventListener('close', function () {
|
||||
dlg.addEventListener('close', () => {
|
||||
|
||||
loading.hide();
|
||||
var foundItem = hasChanges ? currentSearchResult : null;
|
||||
const foundItem = hasChanges ? currentSearchResult : null;
|
||||
|
||||
resolveFunc(foundItem);
|
||||
});
|
||||
@ -498,29 +518,32 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
||||
dlg.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('Search');
|
||||
}
|
||||
|
||||
return {
|
||||
show: function (itemId, serverId) {
|
||||
export function show(itemId, serverId) {
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
currentResolve = resolve;
|
||||
currentReject = reject;
|
||||
currentServerId = serverId;
|
||||
hasChanges = false;
|
||||
currentResolve = resolve;
|
||||
currentReject = reject;
|
||||
currentServerId = serverId;
|
||||
hasChanges = false;
|
||||
|
||||
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;
|
||||
|
||||
hasChanges = false;
|
||||
showEditorFindNew(itemName, itemYear, itemType, resolve);
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
hasChanges = false;
|
||||
showEditorFindNew(itemName, itemYear, itemType, resolve);
|
||||
});
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
export default {
|
||||
show: show,
|
||||
showFindNew: showFindNew
|
||||
};
|
||||
|
||||
@ -43,7 +43,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
|
||||
|
||||
function initAlphaPicker(alphaPickerElement, instance) {
|
||||
|
||||
instance.alphaPicker = new AlphaPicker({
|
||||
instance.alphaPicker = new AlphaPicker.default({
|
||||
element: alphaPickerElement,
|
||||
mode: 'keyboard'
|
||||
});
|
||||
|
||||
@ -51,7 +51,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
|
||||
|
||||
instance.itemsContainer = view.querySelector('.itemsContainer');
|
||||
|
||||
instance.alphaPicker = new AlphaPicker({
|
||||
instance.alphaPicker = new AlphaPicker.default({
|
||||
element: instance.alphaPickerElement,
|
||||
itemsContainer: instance.itemsContainer,
|
||||
itemClass: 'card'
|
||||
|
||||
@ -139,7 +139,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
|
||||
var page = $(e.target).parents('.xmltvForm')[0];
|
||||
|
||||
require(['directorybrowser'], function (directoryBrowser) {
|
||||
var picker = new directoryBrowser();
|
||||
var picker = new directoryBrowser.default();
|
||||
picker.show({
|
||||
includeFiles: true,
|
||||
callback: function (path) {
|
||||
|
||||
@ -151,7 +151,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
|
||||
});
|
||||
$('#btnSelectEncoderPath', page).on('click.selectDirectory', function () {
|
||||
require(['directorybrowser'], function (directoryBrowser) {
|
||||
var picker = new directoryBrowser();
|
||||
var picker = new directoryBrowser.default();
|
||||
picker.show({
|
||||
includeFiles: true,
|
||||
callback: function (path) {
|
||||
@ -166,7 +166,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
|
||||
});
|
||||
$('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () {
|
||||
require(['directorybrowser'], function (directoryBrowser) {
|
||||
var picker = new directoryBrowser();
|
||||
var picker = new directoryBrowser.default();
|
||||
picker.show({
|
||||
callback: function (path) {
|
||||
if (path) {
|
||||
|
||||
@ -59,7 +59,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-textarea', 'emb
|
||||
return function (view, params) {
|
||||
$('#btnSelectCachePath', view).on('click.selectDirectory', function () {
|
||||
require(['directorybrowser'], function (directoryBrowser) {
|
||||
var picker = new directoryBrowser();
|
||||
var picker = new directoryBrowser.default();
|
||||
picker.show({
|
||||
callback: function (path) {
|
||||
if (path) {
|
||||
@ -76,7 +76,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-textarea', 'emb
|
||||
});
|
||||
$('#btnSelectMetadataPath', view).on('click.selectDirectory', function () {
|
||||
require(['directorybrowser'], function (directoryBrowser) {
|
||||
var picker = new directoryBrowser();
|
||||
var picker = new directoryBrowser.default();
|
||||
picker.show({
|
||||
path: $('#txtMetadataPath', view).val(),
|
||||
networkSharePath: $('#txtMetadataNetworkPath', view).val(),
|
||||
|
||||
@ -136,7 +136,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
|
||||
});
|
||||
view.querySelector('#btnSelectCertPath').addEventListener('click', function () {
|
||||
require(['directorybrowser'], function (directoryBrowser) {
|
||||
var picker = new directoryBrowser();
|
||||
var picker = new directoryBrowser.default();
|
||||
picker.show({
|
||||
includeFiles: true,
|
||||
includeDirectories: true,
|
||||
|
||||
@ -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';
|
||||
|
||||
function getInitialLiveTvQuery(instance, params) {
|
||||
@ -544,7 +544,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
|
||||
alphaPickerElement.classList.add('focuscontainer-right');
|
||||
self.itemsContainer.parentNode.classList.add('padded-right-withalphapicker');
|
||||
|
||||
self.alphaPicker = new alphaPicker({
|
||||
self.alphaPicker = new AlphaPicker.default({
|
||||
element: alphaPickerElement,
|
||||
itemsContainer: layoutManager.tv ? self.itemsContainer : null,
|
||||
itemClass: 'card',
|
||||
|
||||
@ -59,7 +59,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading,
|
||||
$('.liveTvSettingsForm').off('submit', onSubmit).on('submit', onSubmit);
|
||||
$('#btnSelectRecordingPath', page).on('click.selectDirectory', function () {
|
||||
require(['directorybrowser'], function (directoryBrowser) {
|
||||
var picker = new directoryBrowser();
|
||||
var picker = new directoryBrowser.default();
|
||||
picker.show({
|
||||
callback: function (path) {
|
||||
if (path) {
|
||||
@ -74,7 +74,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading,
|
||||
});
|
||||
$('#btnSelectMovieRecordingPath', page).on('click.selectDirectory', function () {
|
||||
require(['directorybrowser'], function (directoryBrowser) {
|
||||
var picker = new directoryBrowser();
|
||||
var picker = new directoryBrowser.default();
|
||||
picker.show({
|
||||
callback: function (path) {
|
||||
if (path) {
|
||||
@ -89,7 +89,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading,
|
||||
});
|
||||
$('#btnSelectSeriesRecordingPath', page).on('click.selectDirectory', function () {
|
||||
require(['directorybrowser'], function (directoryBrowser) {
|
||||
var picker = new directoryBrowser();
|
||||
var picker = new directoryBrowser.default();
|
||||
picker.show({
|
||||
callback: function (path) {
|
||||
if (path) {
|
||||
@ -104,7 +104,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading,
|
||||
});
|
||||
$('#btnSelectPostProcessorPath', page).on('click.selectDirectory', function () {
|
||||
require(['directorybrowser'], function (directoryBrowser) {
|
||||
var picker = new directoryBrowser();
|
||||
var picker = new directoryBrowser.default();
|
||||
picker.show({
|
||||
includeFiles: true,
|
||||
callback: function (path) {
|
||||
|
||||
@ -215,7 +215,7 @@ define(['globalize', 'loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button
|
||||
});
|
||||
view.querySelector('.btnSelectPath').addEventListener('click', function () {
|
||||
require(['directorybrowser'], function (directoryBrowser) {
|
||||
var picker = new directoryBrowser();
|
||||
var picker = new directoryBrowser.default();
|
||||
picker.show({
|
||||
includeFiles: true,
|
||||
callback: function (path) {
|
||||
|
||||
@ -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';
|
||||
|
||||
return function (view, params, tabContent, options) {
|
||||
@ -168,7 +168,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
|
||||
query.StartIndex = 0;
|
||||
itemsContainer.refreshItems();
|
||||
});
|
||||
self.alphaPicker = new alphaPicker({
|
||||
self.alphaPicker = new AlphaPicker.default({
|
||||
element: alphaPickerElement,
|
||||
valueChangeEvent: 'click'
|
||||
});
|
||||
|
||||
@ -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';
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
@ -213,7 +213,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
|
||||
query.StartIndex = 0;
|
||||
reloadItems();
|
||||
});
|
||||
self.alphaPicker = new alphaPicker({
|
||||
self.alphaPicker = new AlphaPicker.default({
|
||||
element: alphaPickerElement,
|
||||
valueChangeEvent: 'click'
|
||||
});
|
||||
|
||||
@ -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';
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
@ -215,7 +215,7 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
|
||||
query.StartIndex = 0;
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
self.alphaPicker = new alphaPicker({
|
||||
self.alphaPicker = new AlphaPicker.default({
|
||||
element: alphaPickerElement,
|
||||
valueChangeEvent: 'click'
|
||||
});
|
||||
|
||||
@ -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';
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
@ -199,7 +199,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
|
||||
query.StartIndex = 0;
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
self.alphaPicker = new alphaPicker({
|
||||
self.alphaPicker = new AlphaPicker.default({
|
||||
element: alphaPickerElement,
|
||||
valueChangeEvent: 'click'
|
||||
});
|
||||
|
||||
@ -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';
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
@ -226,7 +226,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
|
||||
query.StartIndex = 0;
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
self.alphaPicker = new alphaPicker({
|
||||
self.alphaPicker = new AlphaPicker.default({
|
||||
element: alphaPickerElement,
|
||||
valueChangeEvent: 'click'
|
||||
});
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (browser, dom) {
|
||||
'use strict';
|
||||
import browser from 'browser';
|
||||
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) {
|
||||
// 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) {
|
||||
var elem = this.parentNode;
|
||||
let elem = this.parentNode;
|
||||
|
||||
elem.style.webkitAnimationName = 'repaintChrome';
|
||||
elem.style.webkitAnimationDelay = (loading === true ? '500ms' : '');
|
||||
@ -43,22 +47,22 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
|
||||
|
||||
this.classList.add('emby-checkbox');
|
||||
|
||||
var labelElement = this.parentNode;
|
||||
const labelElement = this.parentNode;
|
||||
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) {
|
||||
outlineClass += ' ' + customClass;
|
||||
}
|
||||
|
||||
var checkedIcon = this.getAttribute('data-checkedicon') || 'check';
|
||||
var uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
|
||||
var checkHtml = '<span class="material-icons checkboxIcon checkboxIcon-checked ' + checkedIcon + '"></span>';
|
||||
var uncheckedHtml = '<span class="material-icons checkboxIcon checkboxIcon-unchecked ' + uncheckedIcon + '"></span>';
|
||||
const checkedIcon = this.getAttribute('data-checkedicon') || 'check';
|
||||
const uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
|
||||
const checkHtml = '<span class="material-icons checkboxIcon checkboxIcon-checked ' + checkedIcon + '"></span>';
|
||||
const uncheckedHtml = '<span class="material-icons checkboxIcon checkboxIcon-unchecked ' + uncheckedIcon + '"></span>';
|
||||
labelElement.insertAdjacentHTML('beforeend', '<span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>');
|
||||
|
||||
labelTextElement.classList.add('checkboxLabel');
|
||||
@ -103,4 +107,5 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
|
||||
prototype: EmbyCheckboxPrototype,
|
||||
extends: 'input'
|
||||
});
|
||||
});
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
||||
@ -1,16 +1,21 @@
|
||||
define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerElement'], function (EmbyProgressRing, dom, serverNotifications, events) {
|
||||
'use strict';
|
||||
import EmbyProgressRing from 'emby-progressring';
|
||||
import dom from 'dom';
|
||||
import serverNotifications from 'serverNotifications';
|
||||
import events from 'events';
|
||||
import 'registerElement';
|
||||
|
||||
/* eslint-disable indent */
|
||||
|
||||
function addNotificationEvent(instance, name, handler) {
|
||||
|
||||
var localHandler = handler.bind(instance);
|
||||
const localHandler = handler.bind(instance);
|
||||
events.on(serverNotifications, name, localHandler);
|
||||
instance[name] = localHandler;
|
||||
}
|
||||
|
||||
function removeNotificationEvent(instance, name) {
|
||||
|
||||
var handler = instance[name];
|
||||
const handler = instance[name];
|
||||
if (handler) {
|
||||
events.off(serverNotifications, name, handler);
|
||||
instance[name] = null;
|
||||
@ -19,7 +24,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
|
||||
|
||||
function onRefreshProgress(e, apiClient, info) {
|
||||
|
||||
var indicator = this;
|
||||
const indicator = this;
|
||||
|
||||
if (!indicator.itemId) {
|
||||
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) {
|
||||
|
||||
var progress = parseFloat(info.Progress);
|
||||
const progress = parseFloat(info.Progress);
|
||||
|
||||
if (progress && progress < 100) {
|
||||
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 () {
|
||||
|
||||
@ -74,4 +79,5 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
|
||||
prototype: EmbyItemRefreshIndicatorPrototype,
|
||||
extends: 'div'
|
||||
});
|
||||
});
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
define([], function() {
|
||||
'use strict';
|
||||
/* eslint-disable indent */
|
||||
|
||||
var ProgressBarPrototype = Object.create(HTMLDivElement.prototype);
|
||||
let ProgressBarPrototype = Object.create(HTMLDivElement.prototype);
|
||||
|
||||
function onAutoTimeProgress() {
|
||||
var start = parseInt(this.getAttribute('data-starttime'));
|
||||
var end = parseInt(this.getAttribute('data-endtime'));
|
||||
const start = parseInt(this.getAttribute('data-starttime'));
|
||||
const end = parseInt(this.getAttribute('data-endtime'));
|
||||
|
||||
var now = new Date().getTime();
|
||||
var total = end - start;
|
||||
var pct = 100 * ((now - start) / total);
|
||||
const now = new Date().getTime();
|
||||
const total = end - start;
|
||||
let pct = 100 * ((now - start) / total);
|
||||
|
||||
pct = Math.min(100, pct);
|
||||
pct = Math.max(0, pct);
|
||||
|
||||
var itemProgressBarForeground = this.querySelector('.itemProgressBarForeground');
|
||||
const itemProgressBarForeground = this.querySelector('.itemProgressBarForeground');
|
||||
itemProgressBarForeground.style.width = pct + '%';
|
||||
}
|
||||
|
||||
@ -39,4 +38,5 @@ define([], function() {
|
||||
prototype: ProgressBarPrototype,
|
||||
extends: 'div'
|
||||
});
|
||||
});
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
define(['require', 'css!./emby-progressring', 'registerElement'], function (require) {
|
||||
'use strict';
|
||||
import require from 'require';
|
||||
import 'css!./emby-progressring';
|
||||
import 'webcomponents';
|
||||
|
||||
var EmbyProgressRing = Object.create(HTMLDivElement.prototype);
|
||||
/* eslint-disable indent */
|
||||
|
||||
let EmbyProgressRing = Object.create(HTMLDivElement.prototype);
|
||||
|
||||
EmbyProgressRing.createdCallback = function () {
|
||||
|
||||
this.classList.add('progressring');
|
||||
var instance = this;
|
||||
const instance = this;
|
||||
|
||||
require(['text!./emby-progressring.template.html'], function (template) {
|
||||
instance.innerHTML = template;
|
||||
@ -37,7 +40,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
|
||||
|
||||
progress = Math.floor(progress);
|
||||
|
||||
var angle;
|
||||
let angle;
|
||||
|
||||
if (progress < 25) {
|
||||
angle = -90 + (progress / 100) * 360;
|
||||
@ -82,7 +85,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
|
||||
|
||||
EmbyProgressRing.detachedCallback = function () {
|
||||
|
||||
var observer = this.observer;
|
||||
let observer = this.observer;
|
||||
|
||||
if (observer) {
|
||||
// later, you can stop observing
|
||||
@ -97,5 +100,6 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
|
||||
extends: 'div'
|
||||
});
|
||||
|
||||
return EmbyProgressRing;
|
||||
});
|
||||
export default EmbyProgressRing;
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) {
|
||||
'use strict';
|
||||
import layoutManager from 'layoutManager';
|
||||
import 'css!./emby-radio';
|
||||
import 'registerElement';
|
||||
|
||||
var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
|
||||
/* eslint-disable indent */
|
||||
|
||||
let EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
|
||||
|
||||
function onKeyDown(e) {
|
||||
|
||||
@ -23,7 +26,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
|
||||
}
|
||||
|
||||
EmbyRadioPrototype.attachedCallback = function () {
|
||||
var showFocus = !layoutManager.mobile;
|
||||
const showFocus = !layoutManager.mobile;
|
||||
|
||||
if (this.getAttribute('data-radio') === 'true') {
|
||||
return;
|
||||
@ -33,7 +36,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
|
||||
|
||||
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');
|
||||
labelElement.classList.add('mdl-js-radio');
|
||||
@ -42,12 +45,12 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
|
||||
labelElement.classList.add('show-focus');
|
||||
}
|
||||
|
||||
var labelTextElement = labelElement.querySelector('span');
|
||||
let labelTextElement = labelElement.querySelector('span');
|
||||
|
||||
labelTextElement.classList.add('radioButtonLabel');
|
||||
labelTextElement.classList.add('mdl-radio__label');
|
||||
|
||||
var html = '';
|
||||
let html = '';
|
||||
|
||||
html += '<div class="mdl-radio__circles">';
|
||||
|
||||
@ -76,4 +79,5 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
|
||||
prototype: EmbyRadioPrototype,
|
||||
extends: 'input'
|
||||
});
|
||||
});
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
||||
@ -1,7 +1,15 @@
|
||||
define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'browser', 'registerElement', 'css!./emby-scroller'], function (scroller, dom, layoutManager, inputManager, focusManager, browser) {
|
||||
'use strict';
|
||||
import scroller from 'scroller';
|
||||
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 () {
|
||||
this.classList.add('emby-scroller');
|
||||
@ -9,7 +17,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
|
||||
|
||||
function initCenterFocus(elem, scrollerInstance) {
|
||||
dom.addEventListener(elem, 'focus', function (e) {
|
||||
var focused = focusManager.focusableParent(e.target);
|
||||
const focused = focusManager.focusableParent(e.target);
|
||||
if (focused) {
|
||||
scrollerInstance.toCenter(focused);
|
||||
}
|
||||
@ -80,7 +88,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
|
||||
};
|
||||
|
||||
function onInputCommand(e) {
|
||||
var cmd = e.detail.command;
|
||||
const cmd = e.detail.command;
|
||||
if (cmd === 'end') {
|
||||
focusManager.focusLast(this, '.' + this.getAttribute('data-navcommands'));
|
||||
e.preventDefault();
|
||||
@ -101,18 +109,18 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
|
||||
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) {
|
||||
slider.style['white-space'] = 'nowrap';
|
||||
}
|
||||
|
||||
var scrollFrame = this;
|
||||
var enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false';
|
||||
const scrollFrame = this;
|
||||
const enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false';
|
||||
|
||||
var options = {
|
||||
const options = {
|
||||
horizontal: horizontal,
|
||||
mouseDragging: 1,
|
||||
mouseWheel: this.getAttribute('data-mousewheel') !== 'false',
|
||||
@ -154,14 +162,14 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
|
||||
}
|
||||
|
||||
ScrollerPrototype.pause = function () {
|
||||
var headroom = this.headroom;
|
||||
const headroom = this.headroom;
|
||||
if (headroom) {
|
||||
headroom.pause();
|
||||
}
|
||||
};
|
||||
|
||||
ScrollerPrototype.resume = function () {
|
||||
var headroom = this.headroom;
|
||||
const headroom = this.headroom;
|
||||
if (headroom) {
|
||||
headroom.resume();
|
||||
}
|
||||
@ -172,13 +180,13 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
|
||||
inputManager.off(this, onInputCommand);
|
||||
}
|
||||
|
||||
var headroom = this.headroom;
|
||||
const headroom = this.headroom;
|
||||
if (headroom) {
|
||||
headroom.destroy();
|
||||
this.headroom = null;
|
||||
}
|
||||
|
||||
var scrollerInstance = this.scroller;
|
||||
const scrollerInstance = this.scroller;
|
||||
if (scrollerInstance) {
|
||||
scrollerInstance.destroy();
|
||||
this.scroller = null;
|
||||
@ -189,4 +197,5 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
|
||||
prototype: ScrollerPrototype,
|
||||
extends: 'div'
|
||||
});
|
||||
});
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
||||
@ -1,15 +1,22 @@
|
||||
define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager, keyboardnavigation) {
|
||||
'use strict';
|
||||
import browser from 'browser';
|
||||
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) {
|
||||
|
||||
var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
|
||||
const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
|
||||
// descriptor returning null in webos
|
||||
if (descriptor && descriptor.configurable) {
|
||||
supportsValueSetOverride = true;
|
||||
@ -24,14 +31,14 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
* @return {number} slider fraction
|
||||
*/
|
||||
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
|
||||
var valueRange = range.max - range.min;
|
||||
const valueRange = range.max - range.min;
|
||||
if (range.step !== 'any' && valueRange !== 0) {
|
||||
var step = (range.step || 1) / valueRange;
|
||||
const step = (range.step || 1) / valueRange;
|
||||
fraction = Math.round(fraction / step) * step;
|
||||
}
|
||||
|
||||
@ -46,7 +53,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
* @return {number} slider value
|
||||
*/
|
||||
function mapFractionToValue(range, fraction) {
|
||||
var value = (range.max - range.min) * fraction;
|
||||
let value = (range.max - range.min) * fraction;
|
||||
|
||||
// Snap to step
|
||||
if (range.step !== 'any') {
|
||||
@ -67,8 +74,8 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
* @return {number} slider fraction
|
||||
*/
|
||||
function mapValueToFraction(range, value) {
|
||||
var valueRange = range.max - range.min;
|
||||
var fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0;
|
||||
const valueRange = range.max - range.min;
|
||||
const fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0;
|
||||
return Math.min(Math.max(fraction, 0), 1);
|
||||
}
|
||||
|
||||
@ -84,18 +91,18 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
return;
|
||||
}
|
||||
|
||||
var range = this;
|
||||
var value = range.value;
|
||||
const range = this;
|
||||
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
|
||||
// Keep only one per slider frame request
|
||||
cancelAnimationFrame(range.updateValuesFrame);
|
||||
range.updateValuesFrame = requestAnimationFrame(function () {
|
||||
|
||||
var backgroundLower = range.backgroundLower;
|
||||
let backgroundLower = range.backgroundLower;
|
||||
|
||||
if (backgroundLower) {
|
||||
var fraction = (value - range.min) / (range.max - range.min);
|
||||
let fraction = (value - range.min) / (range.max - range.min);
|
||||
|
||||
if (enableWidthWithTransform) {
|
||||
backgroundLower.style.transform = 'scaleX(' + (fraction) + ')';
|
||||
@ -110,10 +117,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
function updateBubble(range, value, bubble, bubbleText) {
|
||||
|
||||
requestAnimationFrame(function () {
|
||||
var bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect();
|
||||
var bubbleRect = bubble.getBoundingClientRect();
|
||||
const bubbleTrackRect = range.sliderBubbleTrack.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);
|
||||
|
||||
bubble.style.left = bubblePos + 'px';
|
||||
@ -158,10 +165,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
this.classList.add('show-focus');
|
||||
}
|
||||
|
||||
var containerElement = this.parentNode;
|
||||
const containerElement = this.parentNode;
|
||||
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">';
|
||||
@ -187,9 +194,9 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
this.sliderBubbleTrack = containerElement.querySelector('.sliderBubbleTrack');
|
||||
this.backgroundLower = containerElement.querySelector('.mdl-slider-background-lower');
|
||||
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) {
|
||||
this.dragging = true;
|
||||
@ -198,7 +205,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
updateValues.call(this);
|
||||
}
|
||||
|
||||
var bubbleValue = mapValueToFraction(this, this.value) * 100;
|
||||
const bubbleValue = mapValueToFraction(this, this.value) * 100;
|
||||
updateBubble(this, bubbleValue, sliderBubble);
|
||||
|
||||
if (hasHideClass) {
|
||||
@ -223,10 +230,11 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
passive: true
|
||||
});
|
||||
|
||||
/* eslint-disable-next-line compat/compat */
|
||||
dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) {
|
||||
|
||||
if (!this.dragging) {
|
||||
var bubbleValue = mapClientToFraction(this, e.clientX) * 100;
|
||||
const bubbleValue = mapClientToFraction(this, e.clientX) * 100;
|
||||
|
||||
updateBubble(this, bubbleValue, sliderBubble);
|
||||
|
||||
@ -240,6 +248,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
passive: true
|
||||
});
|
||||
|
||||
/* eslint-disable-next-line compat/compat */
|
||||
dom.addEventListener(this, (window.PointerEvent ? 'pointerleave' : 'mouseleave'), function () {
|
||||
sliderBubble.classList.add('hide');
|
||||
hasHideClass = true;
|
||||
@ -256,7 +265,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
|
||||
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.dispatchEvent(new Event('input', {
|
||||
@ -276,7 +285,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
return;
|
||||
}
|
||||
|
||||
var fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
|
||||
const fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
|
||||
this.value = mapFractionToValue(this, fraction);
|
||||
|
||||
this.dispatchEvent(new Event('input', {
|
||||
@ -288,7 +297,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
});
|
||||
|
||||
dom.addEventListener(this, 'touchend', function (e) {
|
||||
var range = this;
|
||||
const range = this;
|
||||
|
||||
setTimeout(function () {
|
||||
range.touched = false;
|
||||
@ -314,12 +323,12 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
* Keyboard dragging timeout.
|
||||
* After this delay "change" event will be fired.
|
||||
*/
|
||||
var KeyboardDraggingTimeout = 1000;
|
||||
const KeyboardDraggingTimeout = 1000;
|
||||
|
||||
/**
|
||||
* Keyboard dragging timer.
|
||||
*/
|
||||
var keyboardDraggingTimer;
|
||||
let keyboardDraggingTimer;
|
||||
|
||||
/**
|
||||
* Start keyboard dragging.
|
||||
@ -346,7 +355,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
|
||||
elem.keyboardDragging = false;
|
||||
|
||||
var event = new Event('change', {
|
||||
const event = new Event('change', {
|
||||
bubbles: true,
|
||||
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));
|
||||
|
||||
var event = new Event('input', {
|
||||
const event = new Event('input', {
|
||||
bubbles: true,
|
||||
cancelable: false
|
||||
});
|
||||
@ -414,10 +423,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
|
||||
function setRange(elem, startPercent, endPercent) {
|
||||
|
||||
var style = elem.style;
|
||||
const style = elem.style;
|
||||
style.left = Math.max(startPercent, 0) + '%';
|
||||
|
||||
var widthPercent = endPercent - startPercent;
|
||||
const widthPercent = endPercent - startPercent;
|
||||
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) {
|
||||
|
||||
var elem = this.backgroundUpper;
|
||||
const elem = this.backgroundUpper;
|
||||
if (!elem) {
|
||||
return;
|
||||
}
|
||||
@ -449,9 +458,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
position = (position / runtime) * 100;
|
||||
}
|
||||
|
||||
for (var i = 0, length = ranges.length; i < length; i++) {
|
||||
|
||||
var range = ranges[i];
|
||||
for (const range in ranges) {
|
||||
|
||||
if (position != null) {
|
||||
if (position >= range.end) {
|
||||
@ -468,7 +475,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
|
||||
EmbySliderPrototype.setIsClear = function (isClear) {
|
||||
|
||||
var backgroundLower = this.backgroundLower;
|
||||
const backgroundLower = this.backgroundLower;
|
||||
if (backgroundLower) {
|
||||
if (isClear) {
|
||||
backgroundLower.classList.add('mdl-slider-background-lower-clear');
|
||||
@ -479,7 +486,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
};
|
||||
|
||||
function startInterval(range) {
|
||||
var interval = range.interval;
|
||||
const interval = range.interval;
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
@ -488,7 +495,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
|
||||
EmbySliderPrototype.detachedCallback = function () {
|
||||
|
||||
var interval = this.interval;
|
||||
const interval = this.interval;
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
@ -501,4 +508,5 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
prototype: EmbySliderPrototype,
|
||||
extends: 'input'
|
||||
});
|
||||
});
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
||||
@ -1,9 +1,17 @@
|
||||
define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'registerElement', 'css!./emby-tabs', 'scrollStyles'], function (dom, scroller, browser, layoutManager, focusManager) {
|
||||
'use strict';
|
||||
import dom from 'dom';
|
||||
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);
|
||||
var buttonClass = 'emby-tab-button';
|
||||
var activeButtonClass = buttonClass + '-active';
|
||||
/* eslint-disable indent */
|
||||
|
||||
let EmbyTabs = Object.create(HTMLDivElement.prototype);
|
||||
const buttonClass = 'emby-tab-button';
|
||||
const activeButtonClass = buttonClass + '-active';
|
||||
|
||||
function setActiveTabButton(tabs, newButton, oldButton, animate) {
|
||||
|
||||
@ -16,14 +24,14 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||
}
|
||||
|
||||
function removeActivePanelClass(tabs, index) {
|
||||
var tabPanel = getTabPanel(tabs, index);
|
||||
let tabPanel = getTabPanel(tabs, index);
|
||||
if (tabPanel) {
|
||||
tabPanel.classList.remove('is-active');
|
||||
}
|
||||
}
|
||||
|
||||
function addActivePanelClass(tabs, index) {
|
||||
var tabPanel = getTabPanel(tabs, index);
|
||||
let tabPanel = getTabPanel(tabs, index);
|
||||
if (tabPanel) {
|
||||
tabPanel.classList.add('is-active');
|
||||
}
|
||||
@ -31,9 +39,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||
|
||||
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: '1', transform: 'none', offset: 1 }];
|
||||
|
||||
@ -56,7 +64,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||
removeActivePanelClass(tabs, previousIndex);
|
||||
}
|
||||
|
||||
var newPanel = getTabPanel(tabs, index);
|
||||
let newPanel = getTabPanel(tabs, index);
|
||||
|
||||
if (newPanel) {
|
||||
// animate new panel ?
|
||||
@ -70,10 +78,10 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||
|
||||
function onClick(e) {
|
||||
|
||||
var tabs = this;
|
||||
const tabs = this;
|
||||
|
||||
var current = tabs.querySelector('.' + activeButtonClass);
|
||||
var tabButton = dom.parentWithClass(e.target, buttonClass);
|
||||
const current = tabs.querySelector('.' + activeButtonClass);
|
||||
const tabButton = dom.parentWithClass(e.target, buttonClass);
|
||||
|
||||
if (tabButton && tabButton !== current) {
|
||||
|
||||
@ -81,11 +89,11 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||
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);
|
||||
|
||||
var index = parseInt(tabButton.getAttribute('data-index'));
|
||||
const index = parseInt(tabButton.getAttribute('data-index'));
|
||||
|
||||
triggerBeforeTabChange(tabs, index, previousIndex);
|
||||
|
||||
@ -115,7 +123,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||
return;
|
||||
}
|
||||
|
||||
var contentScrollSlider = tabs.querySelector('.emby-tabs-slider');
|
||||
const contentScrollSlider = tabs.querySelector('.emby-tabs-slider');
|
||||
if (contentScrollSlider) {
|
||||
tabs.scroller = new scroller(tabs, {
|
||||
horizontal: 1,
|
||||
@ -160,7 +168,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||
|
||||
EmbyTabs.focus = function () {
|
||||
|
||||
var selected = this.querySelector('.' + activeButtonClass);
|
||||
const selected = this.querySelector('.' + activeButtonClass);
|
||||
|
||||
if (selected) {
|
||||
focusManager.focus(selected);
|
||||
@ -180,16 +188,16 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||
|
||||
initScroller(this);
|
||||
|
||||
var current = this.querySelector('.' + activeButtonClass);
|
||||
var currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0');
|
||||
const current = this.querySelector('.' + activeButtonClass);
|
||||
const currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0');
|
||||
|
||||
if (currentIndex !== -1) {
|
||||
|
||||
this.selectedTabIndex = currentIndex;
|
||||
|
||||
var tabButtons = this.querySelectorAll('.' + buttonClass);
|
||||
const tabButtons = this.querySelectorAll('.' + buttonClass);
|
||||
|
||||
var newTabButton = tabButtons[currentIndex];
|
||||
const newTabButton = tabButtons[currentIndex];
|
||||
|
||||
if (newTabButton) {
|
||||
setActiveTabButton(this, newTabButton, current, false);
|
||||
@ -221,18 +229,18 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||
|
||||
EmbyTabs.selectedIndex = function (selected, triggerEvent) {
|
||||
|
||||
var tabs = this;
|
||||
const tabs = this;
|
||||
|
||||
if (selected == null) {
|
||||
|
||||
return tabs.selectedTabIndex || 0;
|
||||
}
|
||||
|
||||
var current = tabs.selectedIndex();
|
||||
const current = tabs.selectedIndex();
|
||||
|
||||
tabs.selectedTabIndex = selected;
|
||||
|
||||
var tabButtons = tabs.querySelectorAll('.' + buttonClass);
|
||||
const tabButtons = tabs.querySelectorAll('.' + buttonClass);
|
||||
|
||||
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);
|
||||
|
||||
if (current !== selected && currentTabButton) {
|
||||
@ -262,7 +270,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||
|
||||
function getSibling(elem, method) {
|
||||
|
||||
var sibling = elem[method];
|
||||
let sibling = elem[method];
|
||||
|
||||
while (sibling) {
|
||||
if (sibling.classList.contains(buttonClass)) {
|
||||
@ -280,9 +288,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||
|
||||
EmbyTabs.selectNext = function () {
|
||||
|
||||
var current = getSelectedTabButton(this);
|
||||
const current = getSelectedTabButton(this);
|
||||
|
||||
var sibling = getSibling(current, 'nextSibling');
|
||||
const sibling = getSibling(current, 'nextSibling');
|
||||
|
||||
if (sibling) {
|
||||
onClick.call(this, {
|
||||
@ -293,9 +301,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||
|
||||
EmbyTabs.selectPrevious = function () {
|
||||
|
||||
var current = getSelectedTabButton(this);
|
||||
const current = getSelectedTabButton(this);
|
||||
|
||||
var sibling = getSibling(current, 'previousSibling');
|
||||
const sibling = getSibling(current, 'previousSibling');
|
||||
|
||||
if (sibling) {
|
||||
onClick.call(this, {
|
||||
@ -306,14 +314,14 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||
|
||||
EmbyTabs.triggerBeforeTabChange = function (selected) {
|
||||
|
||||
var tabs = this;
|
||||
const tabs = this;
|
||||
|
||||
triggerBeforeTabChange(tabs, tabs.selectedIndex());
|
||||
};
|
||||
|
||||
EmbyTabs.triggerTabChange = function (selected) {
|
||||
|
||||
var tabs = this;
|
||||
const tabs = this;
|
||||
|
||||
tabs.dispatchEvent(new CustomEvent('tabchange', {
|
||||
detail: {
|
||||
@ -324,8 +332,8 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||
|
||||
EmbyTabs.setTabEnabled = function (index, enabled) {
|
||||
|
||||
var tabs = this;
|
||||
var btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
|
||||
const tabs = this;
|
||||
const btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
|
||||
|
||||
if (enabled) {
|
||||
btn.classList.remove('hide');
|
||||
@ -338,4 +346,5 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||
prototype: EmbyTabs,
|
||||
extends: 'div'
|
||||
});
|
||||
});
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'emby-input'], function (layoutManager, browser) {
|
||||
'use strict';
|
||||
import layoutManager from 'layoutManager';
|
||||
import browser from 'browser';
|
||||
import 'css!./emby-textarea';
|
||||
import 'registerElement';
|
||||
import 'emby-input';
|
||||
|
||||
/* eslint-disable indent */
|
||||
|
||||
function autoGrow(textarea, maxLines) {
|
||||
var self = this;
|
||||
const self = this;
|
||||
|
||||
if (maxLines === undefined) {
|
||||
maxLines = 999;
|
||||
@ -14,17 +19,17 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
|
||||
* @returns {number}
|
||||
*/
|
||||
self.getOffset = function (textarea) {
|
||||
var style = window.getComputedStyle(textarea, null);
|
||||
var props = ['paddingTop', 'paddingBottom'];
|
||||
var offset = 0;
|
||||
const style = window.getComputedStyle(textarea, null);
|
||||
const props = ['paddingTop', 'paddingBottom'];
|
||||
let offset = 0;
|
||||
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
for (let i = 0; i < props.length; i++) {
|
||||
offset += parseInt(style[props[i]]);
|
||||
}
|
||||
return offset;
|
||||
};
|
||||
|
||||
var offset;
|
||||
let offset;
|
||||
function reset() {
|
||||
textarea.rows = 1;
|
||||
offset = self.getOffset(textarea);
|
||||
@ -43,8 +48,8 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
|
||||
textarea.rows = 3;
|
||||
return;
|
||||
}
|
||||
var newHeight = 0;
|
||||
var hasGrown = false;
|
||||
let newHeight = 0;
|
||||
let hasGrown = false;
|
||||
|
||||
if ((textarea.scrollHeight - offset) > self.maxAllowedHeight) {
|
||||
textarea.style.overflowY = 'scroll';
|
||||
@ -67,17 +72,17 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
|
||||
autogrowFn();
|
||||
}
|
||||
|
||||
var EmbyTextAreaPrototype = Object.create(HTMLTextAreaElement.prototype);
|
||||
const EmbyTextAreaPrototype = Object.create(HTMLTextAreaElement.prototype);
|
||||
|
||||
var elementId = 0;
|
||||
let elementId = 0;
|
||||
|
||||
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
|
||||
|
||||
var descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
|
||||
const descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
|
||||
|
||||
// descriptor returning null in webos
|
||||
if (descriptor && descriptor.configurable) {
|
||||
var baseSetMethod = descriptor.set;
|
||||
const baseSetMethod = descriptor.set;
|
||||
descriptor.set = function (value) {
|
||||
baseSetMethod.call(this, value);
|
||||
|
||||
@ -108,8 +113,8 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
|
||||
this.rows = 1;
|
||||
this.classList.add('emby-textarea');
|
||||
|
||||
var parentNode = this.parentNode;
|
||||
var label = this.ownerDocument.createElement('label');
|
||||
const parentNode = this.parentNode;
|
||||
const label = this.ownerDocument.createElement('label');
|
||||
label.innerHTML = this.getAttribute('label') || '';
|
||||
label.classList.add('textareaLabel');
|
||||
|
||||
@ -136,4 +141,5 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
|
||||
prototype: EmbyTextAreaPrototype,
|
||||
extends: 'textarea'
|
||||
});
|
||||
});
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
define(['css!./emby-toggle', 'registerElement'], function () {
|
||||
'use strict';
|
||||
import 'css!./emby-toggle';
|
||||
import 'registerElement';
|
||||
|
||||
var EmbyTogglePrototype = Object.create(HTMLInputElement.prototype);
|
||||
/* eslint-disable indent */
|
||||
|
||||
const EmbyTogglePrototype = Object.create(HTMLInputElement.prototype);
|
||||
|
||||
function onKeyDown(e) {
|
||||
|
||||
@ -29,11 +31,11 @@ define(['css!./emby-toggle', 'registerElement'], function () {
|
||||
|
||||
this.classList.add('mdl-switch__input');
|
||||
|
||||
var labelElement = this.parentNode;
|
||||
const labelElement = this.parentNode;
|
||||
labelElement.classList.add('mdl-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>');
|
||||
|
||||
@ -47,4 +49,5 @@ define(['css!./emby-toggle', 'registerElement'], function () {
|
||||
prototype: EmbyTogglePrototype,
|
||||
extends: 'input'
|
||||
});
|
||||
});
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user