mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge remote-tracking branch 'upstream/master' into fix-subtitle-line-spacing

Browse source 
Conflicts:
	src/components/subtitlesettings/subtitleappearancehelper.js
	src/components/subtitlesettings/subtitlesettings.js
	src/elements/emby-slider/emby-slider.js
This commit is contained in:
Dmitry Lyzo 2020-07-26 13:35:17 +03:00
commit 450807ff14
244 changed files with 7938 additions and 6524 deletions
Download patch file Download diff file Expand all files Collapse all files

114
src/elements/emby-button/emby-button.js
View file

@ -1,70 +1,74 @@
define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css!./emby-button', 'webcomponents'], function (browser, dom, layoutManager, shell, appRouter, appHost) {
'use strict';
import dom from 'dom';
import layoutManager from 'layoutManager';
import shell from 'shell';
import appRouter from 'appRouter';
import appHost from 'apphost';
import 'css!./emby-button';
import 'webcomponents';
var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
var EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype);
const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
const EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype);
function onAnchorClick(e) {
var href = this.getAttribute('href') || '';
if (href !== '#') {
if (this.getAttribute('target')) {
if (!appHost.supports('targetblank')) {
e.preventDefault();
shell.openUrl(href);
}
} else {
appRouter.handleAnchorClick(e);
function onAnchorClick(e) {
const href = this.getAttribute('href') || '';
if (href !== '#') {
if (this.getAttribute('target')) {
if (!appHost.supports('targetblank')) {
e.preventDefault();
shell.openUrl(href);
}
} else {
e.preventDefault();
appRouter.handleAnchorClick(e);
}
} else {
e.preventDefault();
}
}
EmbyButtonPrototype.createdCallback = function () {
if (this.classList.contains('emby-button')) {
return;
}
EmbyButtonPrototype.createdCallback = function () {
if (this.classList.contains('emby-button')) {
return;
}
this.classList.add('emby-button');
// TODO replace all instances of element-showfocus with this method
if (layoutManager.tv) {
// handles all special css for tv layout
// this method utilizes class chaining
this.classList.add('show-focus');
}
};
this.classList.add('emby-button');
// TODO replace all instances of element-showfocus with this method
if (layoutManager.tv) {
// handles all special css for tv layout
// this method utilizes class chaining
this.classList.add('show-focus');
}
};
EmbyButtonPrototype.attachedCallback = function () {
if (this.tagName === 'A') {
dom.removeEventListener(this, 'click', onAnchorClick, {});
dom.addEventListener(this, 'click', onAnchorClick, {});
EmbyButtonPrototype.attachedCallback = function () {
if (this.tagName === 'A') {
dom.removeEventListener(this, 'click', onAnchorClick, {});
dom.addEventListener(this, 'click', onAnchorClick, {});
if (this.getAttribute('data-autohide') === 'true') {
if (appHost.supports('externallinks')) {
this.classList.remove('hide');
} else {
this.classList.add('hide');
}
if (this.getAttribute('data-autohide') === 'true') {
if (appHost.supports('externallinks')) {
this.classList.remove('hide');
} else {
this.classList.add('hide');
}
}
};
}
};
EmbyButtonPrototype.detachedCallback = function () {
dom.removeEventListener(this, 'click', onAnchorClick, {});
};
EmbyButtonPrototype.detachedCallback = function () {
dom.removeEventListener(this, 'click', onAnchorClick, {});
};
EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback;
EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback;
EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback;
EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback;
document.registerElement('emby-button', {
prototype: EmbyButtonPrototype,
extends: 'button'
});
document.registerElement('emby-linkbutton', {
prototype: EmbyLinkButtonPrototype,
extends: 'a'
});
return EmbyButtonPrototype;
document.registerElement('emby-button', {
prototype: EmbyButtonPrototype,
extends: 'button'
});
document.registerElement('emby-linkbutton', {
prototype: EmbyLinkButtonPrototype,
extends: 'a'
});
export default EmbyButtonPrototype;

26
src/elements/emby-button/paper-icon-button-light.js
View file

@ -1,18 +1,18 @@
define(['layoutManager', 'css!./emby-button', 'webcomponents'], function (layoutManager) {
'use strict';
import layoutManager from 'layoutManager';
import 'css!./emby-button';
import 'webcomponents';
var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
EmbyButtonPrototype.createdCallback = function () {
this.classList.add('paper-icon-button-light');
EmbyButtonPrototype.createdCallback = function () {
this.classList.add('paper-icon-button-light');
if (layoutManager.tv) {
this.classList.add('show-focus');
}
};
if (layoutManager.tv) {
this.classList.add('show-focus');
}
};
document.registerElement('paper-icon-button-light', {
prototype: EmbyButtonPrototype,
extends: 'button'
});
document.registerElement('paper-icon-button-light', {
prototype: EmbyButtonPrototype,
extends: 'button'
});

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

@ -1,7 +1,11 @@
define(['browser', 'dom', 'css!./emby-checkbox', 'webcomponents'], function (browser, dom) {
'use strict';
import browser from 'browser';
import dom from 'dom';
import 'css!./emby-checkbox';
import 'webcomponents';
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', 'webcomponents'], function (bro
}
}
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', 'webcomponents'], function (bro
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', 'webcomponents'], function (bro
prototype: EmbyCheckboxPrototype,
extends: 'input'
});
});
/* eslint-enable indent */

34
src/elements/emby-collapse/emby-collapse.js
View file

@ -1,18 +1,21 @@
define(['browser', 'css!./emby-collapse', 'webcomponents', 'emby-button'], function (browser) {
'use strict';
import 'css!./emby-collapse';
import 'webcomponents';
import 'emby-button';
var EmbyButtonPrototype = Object.create(HTMLDivElement.prototype);
/* eslint-disable indent */
const EmbyButtonPrototype = Object.create(HTMLDivElement.prototype);
function slideDownToShow(button, elem) {
elem.classList.remove('hide');
elem.classList.add('expanded');
elem.style.height = 'auto';
var height = elem.offsetHeight + 'px';
const height = elem.offsetHeight + 'px';
elem.style.height = '0';
// trigger reflow
var newHeight = elem.offsetHeight;
const newHeight = elem.offsetHeight;
elem.style.height = height;
setTimeout(function () {
@ -24,7 +27,7 @@ define(['browser', 'css!./emby-collapse', 'webcomponents', 'emby-button'], funct
elem.style.height = 'auto';
}, 300);
var icon = button.querySelector('.material-icons');
const icon = button.querySelector('.material-icons');
//icon.innerHTML = 'expand_less';
icon.classList.add('emby-collapse-expandIconExpanded');
}
@ -33,7 +36,7 @@ define(['browser', 'css!./emby-collapse', 'webcomponents', 'emby-button'], funct
elem.style.height = elem.offsetHeight + 'px';
// trigger reflow
var newHeight = elem.offsetHeight;
const newHeight = elem.offsetHeight;
elem.classList.remove('expanded');
elem.style.height = '0';
@ -46,15 +49,15 @@ define(['browser', 'css!./emby-collapse', 'webcomponents', 'emby-button'], funct
}
}, 300);
var icon = button.querySelector('.material-icons');
const icon = button.querySelector('.material-icons');
//icon.innerHTML = 'expand_more';
icon.classList.remove('emby-collapse-expandIconExpanded');
}
function onButtonClick(e) {
var button = this;
var collapseContent = button.parentNode.querySelector('.collapseContent');
const button = this;
const collapseContent = button.parentNode.querySelector('.collapseContent');
if (collapseContent.expanded) {
collapseContent.expanded = false;
@ -73,18 +76,18 @@ define(['browser', 'css!./emby-collapse', 'webcomponents', 'emby-button'], funct
this.classList.add('emby-collapse');
var collapseContent = this.querySelector('.collapseContent');
const collapseContent = this.querySelector('.collapseContent');
if (collapseContent) {
collapseContent.classList.add('hide');
}
var title = this.getAttribute('title');
const title = this.getAttribute('title');
var html = '<button is="emby-button" type="button" on-click="toggleExpand" id="expandButton" class="emby-collapsible-button iconRight"><h3 class="emby-collapsible-title" title="' + title + '">' + title + '</h3><span class="material-icons emby-collapse-expandIcon expand_more"></span></button>';
const html = '<button is="emby-button" type="button" on-click="toggleExpand" id="expandButton" class="emby-collapsible-button iconRight"><h3 class="emby-collapsible-title" title="' + title + '">' + title + '</h3><span class="material-icons emby-collapse-expandIcon expand_more"></span></button>';
this.insertAdjacentHTML('afterbegin', html);
var button = this.querySelector('.emby-collapsible-button');
const button = this.querySelector('.emby-collapsible-button');
button.addEventListener('click', onButtonClick);
@ -97,4 +100,5 @@ define(['browser', 'css!./emby-collapse', 'webcomponents', 'emby-button'], funct
prototype: EmbyButtonPrototype,
extends: 'div'
});
});
/* eslint-enable indent */

31
src/elements/emby-input/emby-input.js
View file

@ -1,18 +1,22 @@
define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'webcomponents'], function (layoutManager, browser, dom) {
'use strict';
import browser from 'browser';
import dom from 'dom';
import 'css!./emby-input';
import 'webcomponents';
var EmbyInputPrototype = Object.create(HTMLInputElement.prototype);
/* eslint-disable indent */
var inputId = 0;
var supportsFloatingLabel = false;
const EmbyInputPrototype = Object.create(HTMLInputElement.prototype);
let inputId = 0;
let supportsFloatingLabel = false;
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) {
var baseSetMethod = descriptor.set;
const baseSetMethod = descriptor.set;
descriptor.set = function (value) {
baseSetMethod.call(this, value);
@ -39,9 +43,9 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'webcomponents'],
this.classList.add('emby-input');
var parentNode = this.parentNode;
var document = this.ownerDocument;
var label = document.createElement('label');
const parentNode = this.parentNode;
const document = this.ownerDocument;
const label = document.createElement('label');
label.innerHTML = this.getAttribute('label') || '';
label.classList.add('inputLabel');
label.classList.add('inputLabelUnfocused');
@ -95,12 +99,12 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'webcomponents'],
function onChange() {
var label = this.labelElement;
const label = this.labelElement;
if (this.value) {
label.classList.remove('inputLabel-float');
} else {
var instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time';
const instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time';
if (instanceSupportsFloat) {
label.classList.add('inputLabel-float');
@ -121,4 +125,5 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'webcomponents'],
prototype: EmbyInputPrototype,
extends: 'input'
});
});
/* eslint-enable indent */

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

@ -1,16 +1,21 @@
define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'webcomponents'], 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 'webcomponents';
/* 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', 'webcompone
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', 'webcompone
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', 'webcompone
}
}
var EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing);
let EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing);
EmbyItemRefreshIndicatorPrototype.createdCallback = function () {
@ -74,4 +79,5 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'webcompone
prototype: EmbyItemRefreshIndicatorPrototype,
extends: 'div'
});
});
/* eslint-enable indent */

131
src/elements/emby-itemscontainer/emby-itemscontainer.js
View file

@ -1,12 +1,25 @@
define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', 'imageLoader', 'layoutManager', 'browser', 'dom', 'loading', 'focusManager', 'serverNotifications', 'events', 'webcomponents'], function (itemShortcuts, inputManager, connectionManager, playbackManager, imageLoader, layoutManager, browser, dom, loading, focusManager, serverNotifications, events) {
'use strict';
import itemShortcuts from 'itemShortcuts';
import inputManager from 'inputManager';
import connectionManager from 'connectionManager';
import playbackManager from 'playbackManager';
import imageLoader from 'imageLoader';
import layoutManager from 'layoutManager';
import browser from 'browser';
import dom from 'dom';
import loading from 'loading';
import focusManager from 'focusManager';
import serverNotifications from 'serverNotifications';
import events from 'events';
import 'webcomponents';
var ItemsContainerPrototype = Object.create(HTMLDivElement.prototype);
/* eslint-disable indent */
const ItemsContainerPrototype = Object.create(HTMLDivElement.prototype);
function onClick(e) {
var itemsContainer = this;
var target = e.target;
var multiSelect = itemsContainer.multiSelect;
const itemsContainer = this;
const target = e.target;
let multiSelect = itemsContainer.multiSelect;
if (multiSelect) {
if (multiSelect.onContainerClick.call(itemsContainer, e) === false) {
@ -24,13 +37,12 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
}
function onContextMenu(e) {
var itemsContainer = this;
var target = e.target;
var card = dom.parentWithAttribute(target, 'data-id');
const target = e.target;
const card = dom.parentWithAttribute(target, 'data-id');
// check for serverId, it won't be present on selectserver
if (card && card.getAttribute('data-serverid')) {
inputManager.trigger('menu', {
inputManager.handleCommand('menu', {
sourceElement: card
});
@ -47,7 +59,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
}
ItemsContainerPrototype.enableMultiSelect = function (enabled) {
var current = this.multiSelect;
const current = this.multiSelect;
if (!enabled) {
if (current) {
@ -61,8 +73,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
return;
}
var self = this;
require(['multiSelect'], function (MultiSelect) {
const self = this;
import('multiSelect').then(({default: MultiSelect}) => {
self.multiSelect = new MultiSelect({
container: self,
bindOnClick: false
@ -71,14 +83,14 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
};
function onDrop(evt, itemsContainer) {
var el = evt.item;
const el = evt.item;
var newIndex = evt.newIndex;
var itemId = el.getAttribute('data-playlistitemid');
var playlistId = el.getAttribute('data-playlistid');
const newIndex = evt.newIndex;
const itemId = el.getAttribute('data-playlistitemid');
const playlistId = el.getAttribute('data-playlistid');
if (!playlistId) {
var oldIndex = evt.oldIndex;
const oldIndex = evt.oldIndex;
el.dispatchEvent(new CustomEvent('itemdrop', {
detail: {
oldIndex: oldIndex,
@ -91,8 +103,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
return;
}
var serverId = el.getAttribute('data-serverid');
var apiClient = connectionManager.getApiClient(serverId);
const serverId = el.getAttribute('data-serverid');
const apiClient = connectionManager.getApiClient(serverId);
loading.show();
@ -108,7 +120,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
}
ItemsContainerPrototype.enableDragReordering = function (enabled) {
var current = this.sortable;
const current = this.sortable;
if (!enabled) {
if (current) {
current.destroy();
@ -121,8 +133,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
return;
}
var self = this;
require(['sortable'], function (Sortable) {
const self = this;
import('sortable').then(({default: Sortable}) => {
self.sortable = new Sortable(self, {
draggable: '.listItem',
handle: '.listViewDragHandle',
@ -137,13 +149,13 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
function onUserDataChanged(e, apiClient, userData) {
var itemsContainer = this;
const itemsContainer = this;
require(['cardBuilder'], function (cardBuilder) {
import('cardBuilder').then(({default: cardBuilder}) => {
cardBuilder.onUserDataChanged(userData, itemsContainer);
});
var eventsToMonitor = getEventsToMonitor(itemsContainer);
const eventsToMonitor = getEventsToMonitor(itemsContainer);
// TODO: Check user data change reason?
if (eventsToMonitor.indexOf('markfavorite') !== -1) {
@ -154,7 +166,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
}
function getEventsToMonitor(itemsContainer) {
var monitor = itemsContainer.getAttribute('data-monitor');
let monitor = itemsContainer.getAttribute('data-monitor');
if (monitor) {
return monitor.split(',');
}
@ -164,24 +176,24 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
function onTimerCreated(e, apiClient, data) {
var itemsContainer = this;
const itemsContainer = this;
if (getEventsToMonitor(itemsContainer).indexOf('timers') !== -1) {
itemsContainer.notifyRefreshNeeded();
return;
}
var programId = data.ProgramId;
const programId = data.ProgramId;
// This could be null, not supported by all tv providers
var newTimerId = data.Id;
const newTimerId = data.Id;
require(['cardBuilder'], function (cardBuilder) {
import('cardBuilder').then(({default: cardBuilder}) => {
cardBuilder.onTimerCreated(programId, newTimerId, itemsContainer);
});
}
function onSeriesTimerCreated(e, apiClient, data) {
var itemsContainer = this;
const itemsContainer = this;
if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) {
itemsContainer.notifyRefreshNeeded();
return;
@ -189,49 +201,49 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
}
function onTimerCancelled(e, apiClient, data) {
var itemsContainer = this;
const itemsContainer = this;
if (getEventsToMonitor(itemsContainer).indexOf('timers') !== -1) {
itemsContainer.notifyRefreshNeeded();
return;
}
require(['cardBuilder'], function (cardBuilder) {
import('cardBuilder').then(({default: cardBuilder}) => {
cardBuilder.onTimerCancelled(data.Id, itemsContainer);
});
}
function onSeriesTimerCancelled(e, apiClient, data) {
var itemsContainer = this;
const itemsContainer = this;
if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) {
itemsContainer.notifyRefreshNeeded();
return;
}
require(['cardBuilder'], function (cardBuilder) {
import('cardBuilder').then(({default: cardBuilder}) => {
cardBuilder.onSeriesTimerCancelled(data.Id, itemsContainer);
});
}
function onLibraryChanged(e, apiClient, data) {
var itemsContainer = this;
const itemsContainer = this;
var eventsToMonitor = getEventsToMonitor(itemsContainer);
const eventsToMonitor = getEventsToMonitor(itemsContainer);
if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) {
// yes this is an assumption
return;
}
var itemsAdded = data.ItemsAdded || [];
var itemsRemoved = data.ItemsRemoved || [];
const itemsAdded = data.ItemsAdded || [];
const itemsRemoved = data.ItemsRemoved || [];
if (!itemsAdded.length && !itemsRemoved.length) {
return;
}
var parentId = itemsContainer.getAttribute('data-parentid');
const parentId = itemsContainer.getAttribute('data-parentid');
if (parentId) {
var foldersAddedTo = data.FoldersAddedTo || [];
var foldersRemovedFrom = data.FoldersRemovedFrom || [];
var collectionFolders = data.CollectionFolders || [];
const foldersAddedTo = data.FoldersAddedTo || [];
const foldersRemovedFrom = data.FoldersRemovedFrom || [];
const collectionFolders = data.CollectionFolders || [];
if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) {
return;
@ -242,10 +254,10 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
}
function onPlaybackStopped(e, stopInfo) {
var itemsContainer = this;
var state = stopInfo.state;
const itemsContainer = this;
const state = stopInfo.state;
var eventsToMonitor = getEventsToMonitor(itemsContainer);
const eventsToMonitor = getEventsToMonitor(itemsContainer);
if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') {
if (eventsToMonitor.indexOf('videoplayback') !== -1) {
itemsContainer.notifyRefreshNeeded(true);
@ -260,14 +272,14 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
}
function addNotificationEvent(instance, name, handler, owner) {
var localHandler = handler.bind(instance);
const localHandler = handler.bind(instance);
owner = owner || serverNotifications;
events.on(owner, name, localHandler);
instance['event_' + name] = localHandler;
}
function removeNotificationEvent(instance, name, owner) {
var handler = instance['event_' + name];
const handler = instance['event_' + name];
if (handler) {
owner = owner || serverNotifications;
events.off(owner, name, handler);
@ -347,10 +359,10 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
ItemsContainerPrototype.resume = function (options) {
this.paused = false;
var refreshIntervalEndTime = this.refreshIntervalEndTime;
let refreshIntervalEndTime = this.refreshIntervalEndTime;
if (refreshIntervalEndTime) {
var remainingMs = refreshIntervalEndTime - new Date().getTime();
const remainingMs = refreshIntervalEndTime - new Date().getTime();
if (remainingMs > 0 && !this.needsRefresh) {
resetRefreshInterval(this, remainingMs);
} else {
@ -387,7 +399,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
return;
}
var timeout = this.refreshTimeout;
let timeout = this.refreshTimeout;
if (timeout) {
clearTimeout(timeout);
}
@ -424,9 +436,9 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
}
function onDataFetched(result) {
var items = result.Items || result;
const items = result.Items || result;
var parentContainer = this.parentContainer;
let parentContainer = this.parentContainer;
if (parentContainer) {
if (items.length) {
parentContainer.classList.remove('hide');
@ -435,9 +447,9 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
}
}
var activeElement = document.activeElement;
var focusId;
var hasActiveElement;
const activeElement = document.activeElement;
let focusId;
let hasActiveElement;
if (this.contains(activeElement)) {
hasActiveElement = true;
@ -461,7 +473,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
function setFocus(itemsContainer, focusId) {
if (focusId) {
var newElement = itemsContainer.querySelector('[data-id="' + focusId + '"]');
const newElement = itemsContainer.querySelector('[data-id="' + focusId + '"]');
if (newElement) {
try {
focusManager.focus(newElement);
@ -479,4 +491,5 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
prototype: ItemsContainerPrototype,
extends: 'div'
});
});
/* eslint-enable indent */

38
src/elements/emby-playstatebutton/emby-playstatebutton.js
View file

@ -1,14 +1,19 @@
define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby-button'], function (connectionManager, serverNotifications, events, globalize, EmbyButtonPrototype) {
'use strict';
import connectionManager from 'connectionManager';
import serverNotifications from 'serverNotifications';
import events from 'events';
import globalize from 'globalize';
import EmbyButtonPrototype from 'emby-button';
/* 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;
@ -17,10 +22,10 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
function onClick(e) {
var button = this;
var id = button.getAttribute('data-id');
var serverId = button.getAttribute('data-serverid');
var apiClient = connectionManager.getApiClient(serverId);
const button = this;
const id = button.getAttribute('data-id');
const serverId = button.getAttribute('data-serverid');
const apiClient = connectionManager.getApiClient(serverId);
if (!button.classList.contains('playstatebutton-played')) {
apiClient.markPlayed(apiClient.getCurrentUserId(), id, new Date());
@ -32,14 +37,14 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
}
function onUserDataChanged(e, apiClient, userData) {
var button = this;
const button = this;
if (userData.ItemId === button.getAttribute('data-id')) {
setState(button, userData.Played);
}
}
function setState(button, played, updateAttribute) {
var icon = button.iconElement;
let icon = button.iconElement;
if (!icon) {
button.iconElement = button.querySelector('.material-icons');
icon = button.iconElement;
@ -72,7 +77,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
button.title = globalize.translate('Played');
}
var text = button.querySelector('.button-text');
let text = button.querySelector('.button-text');
if (text) {
text.innerHTML = button.title;
}
@ -92,7 +97,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
addNotificationEvent(button, 'UserDataChanged', onUserDataChanged);
}
var EmbyPlaystateButtonPrototype = Object.create(EmbyButtonPrototype);
const EmbyPlaystateButtonPrototype = Object.create(EmbyButtonPrototype);
EmbyPlaystateButtonPrototype.createdCallback = function () {
@ -109,8 +114,8 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
EmbyButtonPrototype.attachedCallback.call(this);
}
var itemId = this.getAttribute('data-id');
var serverId = this.getAttribute('data-serverid');
const itemId = this.getAttribute('data-id');
const serverId = this.getAttribute('data-serverid');
if (itemId && serverId) {
setState(this, this.getAttribute('data-played') === 'true', false);
@ -137,7 +142,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
this.setAttribute('data-id', item.Id);
this.setAttribute('data-serverid', item.ServerId);
var played = item.UserData && item.UserData.Played;
const played = item.UserData && item.UserData.Played;
setState(this, played);
bindEvents(this);
@ -156,4 +161,5 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
prototype: EmbyPlaystateButtonPrototype,
extends: 'button'
});
});
/* eslint-enable indent */

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

@ -1,16 +1,12 @@
define([], function() {
'use strict';
const ProgramCellPrototype = Object.create(HTMLButtonElement.prototype);
var ProgramCellPrototype = Object.create(HTMLButtonElement.prototype);
ProgramCellPrototype.detachedCallback = function () {
this.posLeft = null;
this.posWidth = null;
this.guideProgramName = null;
};
ProgramCellPrototype.detachedCallback = function () {
this.posLeft = null;
this.posWidth = null;
this.guideProgramName = null;
};
document.registerElement('emby-programcell', {
prototype: ProgramCellPrototype,
extends: 'button'
});
document.registerElement('emby-programcell', {
prototype: ProgramCellPrototype,
extends: 'button'
});

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

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

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

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

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

@ -1,7 +1,10 @@
define(['layoutManager', 'css!./emby-radio', 'webcomponents'], function (layoutManager) {
'use strict';
import layoutManager from 'layoutManager';
import 'css!./emby-radio';
import 'webcomponents';
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', 'webcomponents'], function (layoutM
}
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', 'webcomponents'], function (layoutM
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', 'webcomponents'], function (layoutM
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', 'webcomponents'], function (layoutM
prototype: EmbyRadioPrototype,
extends: 'input'
});
});
/* eslint-enable indent */

46
src/elements/emby-ratingbutton/emby-ratingbutton.js
View file

@ -1,16 +1,21 @@
define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby-button'], function (connectionManager, serverNotifications, events, globalize, EmbyButtonPrototype) {
'use strict';
import connectionManager from 'connectionManager';
import serverNotifications from 'serverNotifications';
import events from 'events';
import globalize from 'globalize';
import EmbyButtonPrototype from 'emby-button';
/* 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;
@ -24,13 +29,13 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
function onClick(e) {
var button = this;
var id = button.getAttribute('data-id');
var serverId = button.getAttribute('data-serverid');
var apiClient = connectionManager.getApiClient(serverId);
const button = this;
const id = button.getAttribute('data-id');
const serverId = button.getAttribute('data-serverid');
const apiClient = connectionManager.getApiClient(serverId);
var likes = this.getAttribute('data-likes');
var isFavorite = this.getAttribute('data-isfavorite') === 'true';
let likes = this.getAttribute('data-likes');
const isFavorite = this.getAttribute('data-isfavorite') === 'true';
if (likes === 'true') {
likes = true;
} else if (likes === 'false') {
@ -47,7 +52,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
function onUserDataChanged(e, apiClient, userData) {
var button = this;
const button = this;
if (userData.ItemId === button.getAttribute('data-id')) {
@ -57,7 +62,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
function setState(button, likes, isFavorite, updateAttribute) {
var icon = button.querySelector('.material-icons');
const icon = button.querySelector('.material-icons');
if (isFavorite) {
@ -106,7 +111,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
function setTitle(button) {
button.title = globalize.translate('Favorite');
var text = button.querySelector('.button-text');
const text = button.querySelector('.button-text');
if (text) {
text.innerHTML = button.title;
}
@ -126,7 +131,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
addNotificationEvent(button, 'UserDataChanged', onUserDataChanged);
}
var EmbyRatingButtonPrototype = Object.create(EmbyButtonPrototype);
const EmbyRatingButtonPrototype = Object.create(EmbyButtonPrototype);
EmbyRatingButtonPrototype.createdCallback = function () {
@ -143,12 +148,12 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
EmbyButtonPrototype.attachedCallback.call(this);
}
var itemId = this.getAttribute('data-id');
var serverId = this.getAttribute('data-serverid');
const itemId = this.getAttribute('data-id');
const serverId = this.getAttribute('data-serverid');
if (itemId && serverId) {
var likes = this.getAttribute('data-likes');
var isFavorite = this.getAttribute('data-isfavorite') === 'true';
let likes = this.getAttribute('data-likes');
const isFavorite = this.getAttribute('data-isfavorite') === 'true';
if (likes === 'true') {
likes = true;
} else if (likes === 'false') {
@ -181,7 +186,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
this.setAttribute('data-id', item.Id);
this.setAttribute('data-serverid', item.ServerId);
var userData = item.UserData || {};
const userData = item.UserData || {};
setState(this, userData.Likes, userData.IsFavorite);
bindEvents(this);
@ -199,4 +204,5 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
prototype: EmbyRatingButtonPrototype,
extends: 'button'
});
});
/* eslint-enable indent */

64
src/elements/emby-scrollbuttons/emby-scrollbuttons.js
View file

@ -1,13 +1,16 @@
define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'webcomponents', 'paper-icon-button-light'], function (layoutManager, dom) {
'use strict';
import 'css!./emby-scrollbuttons';
import 'webcomponents';
import 'paper-icon-button-light';
var EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
/* eslint-disable indent */
const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
EmbyScrollButtonsPrototype.createdCallback = function () {};
function getScrollButtonHtml(direction) {
var html = '';
var icon = direction === 'left' ? 'chevron_left' : 'chevron_right';
let html = '';
const icon = direction === 'left' ? 'chevron_left' : 'chevron_right';
html += '<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="' + direction + '" class="emby-scrollbuttons-button">';
html += '<span class="material-icons ' + icon + '"></span>';
@ -45,7 +48,7 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'webcomponents', 'pa
scrollButtons.scrollButtonsLeft.disabled = true;
}
var scrollPosEnd = scrollPos + scrollSize;
const scrollPosEnd = scrollPos + scrollSize;
if (scrollWidth > 0 && scrollPosEnd >= scrollWidth) {
scrollButtons.scrollButtonsRight.disabled = true;
} else {
@ -54,18 +57,18 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'webcomponents', 'pa
}
function onScroll(e) {
var scrollButtons = this;
var scroller = this.scroller;
const scrollButtons = this;
const scroller = this.scroller;
var scrollSize = getScrollSize(scroller);
var scrollPos = getScrollPosition(scroller);
var scrollWidth = getScrollWidth(scroller);
const scrollSize = getScrollSize(scroller);
const scrollPos = getScrollPosition(scroller);
const scrollWidth = getScrollWidth(scroller);
updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth);
}
function getStyleValue(style, name) {
var value = style.getPropertyValue(name);
let value = style.getPropertyValue(name);
if (!value) {
return 0;
}
@ -84,20 +87,20 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'webcomponents', 'pa
}
function getScrollSize(elem) {
var scrollSize = elem.offsetWidth;
var style = window.getComputedStyle(elem, null);
let scrollSize = elem.offsetWidth;
let style = window.getComputedStyle(elem, null);
var paddingLeft = getStyleValue(style, 'padding-left');
let paddingLeft = getStyleValue(style, 'padding-left');
if (paddingLeft) {
scrollSize -= paddingLeft;
}
var paddingRight = getStyleValue(style, 'padding-right');
let paddingRight = getStyleValue(style, 'padding-right');
if (paddingRight) {
scrollSize -= paddingRight;
}
var slider = elem.getScrollSlider();
const slider = elem.getScrollSlider();
style = window.getComputedStyle(slider, null);
paddingLeft = getStyleValue(style, 'padding-left');
@ -114,14 +117,14 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'webcomponents', 'pa
}
function onScrollButtonClick(e) {
var scroller = this.parentNode.nextSibling;
let scroller = this.parentNode.nextSibling;
var direction = this.getAttribute('data-direction');
var scrollSize = getScrollSize(scroller);
var scrollPos = getScrollPosition(scroller);
var scrollWidth = getScrollWidth(scroller);
const direction = this.getAttribute('data-direction');
const scrollSize = getScrollSize(scroller);
const scrollPos = getScrollPosition(scroller);
const scrollWidth = getScrollWidth(scroller);
var newPos;
let newPos;
if (direction === 'left') {
newPos = Math.max(0, scrollPos - scrollSize);
} else {
@ -132,21 +135,21 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'webcomponents', 'pa
}
EmbyScrollButtonsPrototype.attachedCallback = function () {
var scroller = this.nextSibling;
const scroller = this.nextSibling;
this.scroller = scroller;
var parent = this.parentNode;
const parent = this.parentNode;
parent.classList.add('emby-scroller-container');
this.innerHTML = getScrollButtonHtml('left') + getScrollButtonHtml('right');
var buttons = this.querySelectorAll('.emby-scrollbuttons-button');
const buttons = this.querySelectorAll('.emby-scrollbuttons-button');
buttons[0].addEventListener('click', onScrollButtonClick);
buttons[1].addEventListener('click', onScrollButtonClick);
this.scrollButtonsLeft = buttons[0];
this.scrollButtonsRight = buttons[1];
var scrollHandler = onScroll.bind(this);
const scrollHandler = onScroll.bind(this);
this.scrollHandler = scrollHandler;
scroller.addScrollEventListener(scrollHandler, {
capture: false,
@ -155,10 +158,10 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'webcomponents', 'pa
};
EmbyScrollButtonsPrototype.detachedCallback = function () {
var parent = this.scroller;
const parent = this.scroller;
this.scroller = null;
var scrollHandler = this.scrollHandler;
let scrollHandler = this.scrollHandler;
if (parent && scrollHandler) {
parent.removeScrollEventListener(scrollHandler, {
capture: false,
@ -175,4 +178,5 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'webcomponents', 'pa
prototype: EmbyScrollButtonsPrototype,
extends: 'div'
});
});
/* eslint-enable indent */

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

@ -1,7 +1,15 @@
define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'browser', 'webcomponents', '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 'webcomponents';
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',
@ -148,20 +156,20 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
};
function loadScrollButtons(scroller) {
require(['emby-scrollbuttons'], function () {
import('emby-scrollbuttons').then(() => {
scroller.insertAdjacentHTML('beforebegin', '<div is="emby-scrollbuttons" class="emby-scrollbuttons padded-right"></div>');
});
}
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 */

35
src/elements/emby-select/emby-select.js
View file

@ -1,7 +1,12 @@
define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'webcomponents'], function (layoutManager, browser, actionsheet) {
'use strict';
import layoutManager from 'layoutManager';
import browser from 'browser';
import actionsheet from 'actionsheet';
import 'css!./emby-select';
import 'webcomponents';
var EmbySelectPrototype = Object.create(HTMLSelectElement.prototype);
/* eslint-disable indent */
const EmbySelectPrototype = Object.create(HTMLSelectElement.prototype);
function enableNativeMenu() {
@ -27,7 +32,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'webcomp
}
function triggerChange(select) {
var evt = document.createEvent('HTMLEvents');
const evt = document.createEvent('HTMLEvents');
evt.initEvent('change', false, true);
select.dispatchEvent(evt);
}
@ -39,8 +44,8 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'webcomp
function showActionSheet(select) {
var labelElem = getLabel(select);
var title = labelElem ? (labelElem.textContent || labelElem.innerText) : null;
const labelElem = getLabel(select);
const title = labelElem ? (labelElem.textContent || labelElem.innerText) : null;
actionsheet.show({
items: select.options,
@ -54,7 +59,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'webcomp
}
function getLabel(select) {
var elem = select.previousSibling;
let elem = select.previousSibling;
while (elem && elem.tagName !== 'LABEL') {
elem = elem.previousSibling;
}
@ -62,21 +67,20 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'webcomp
}
function onFocus(e) {
var label = getLabel(this);
const label = getLabel(this);
if (label) {
label.classList.add('selectLabelFocused');
}
}
function onBlur(e) {
var label = getLabel(this);
const label = getLabel(this);
if (label) {
label.classList.remove('selectLabelFocused');
}
}
function onMouseDown(e) {
// e.button=0 for primary (left) mouse button click
if (!e.button && !enableNativeMenu()) {
e.preventDefault();
@ -85,9 +89,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'webcomp
}
function onKeyDown(e) {
switch (e.keyCode) {
case 13:
if (!enableNativeMenu()) {
e.preventDefault();
@ -107,7 +109,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'webcomp
}
}
var inputId = 0;
let inputId = 0;
EmbySelectPrototype.createdCallback = function () {
@ -137,7 +139,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'webcomp
this.classList.add('emby-select');
var label = this.ownerDocument.createElement('label');
const label = this.ownerDocument.createElement('label');
label.innerHTML = this.getAttribute('label') || '';
label.classList.add('selectLabel');
label.htmlFor = this.id;
@ -150,7 +152,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'webcomp
EmbySelectPrototype.setLabel = function (text) {
var label = this.parentNode.querySelector('label');
const label = this.parentNode.querySelector('label');
label.innerHTML = text;
};
@ -159,4 +161,5 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'webcomp
prototype: EmbySelectPrototype,
extends: 'select'
});
});
/* eslint-enable indent */

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

@ -1,15 +1,22 @@
define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-slider', 'webcomponents', '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';
@ -168,10 +175,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
topContainer.insertBefore(label, topContainer.firstChild);
}
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">';
@ -197,9 +204,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;
@ -208,7 +215,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) {
@ -237,7 +244,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
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);
@ -268,7 +275,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', {
@ -288,7 +295,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', {
@ -300,7 +307,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;
@ -326,12 +333,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.
@ -358,7 +365,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
});
@ -376,7 +383,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
});
@ -426,10 +433,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) + '%';
}
@ -450,7 +457,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;
}
@ -461,9 +468,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) {
@ -480,7 +485,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');
@ -491,7 +496,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
};
function startInterval(range) {
var interval = range.interval;
const interval = range.interval;
if (interval) {
clearInterval(interval);
}
@ -500,7 +505,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
EmbySliderPrototype.detachedCallback = function () {
var interval = this.interval;
const interval = this.interval;
if (interval) {
clearInterval(interval);
}
@ -513,4 +518,5 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
prototype: EmbySliderPrototype,
extends: 'input'
});
});
/* eslint-enable indent */

5
src/elements/emby-tabs/emby-tabs.css
View file

@ -31,11 +31,6 @@
.emby-tabs-slider {
position: relative;
overflow: hidden;
}
.layout-mobile .emby-tabs-slider {
overflow: auto;
}
.tabContent:not(.is-active) {

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

@ -1,9 +1,16 @@
define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcomponents', '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 focusManager from 'focusManager';
import 'webcomponents';
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 +23,14 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
}
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 +38,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
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 +63,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
removeActivePanelClass(tabs, previousIndex);
}
var newPanel = getTabPanel(tabs, index);
let newPanel = getTabPanel(tabs, index);
if (newPanel) {
// animate new panel ?
@ -70,10 +77,10 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
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 +88,11 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
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 +122,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
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 +167,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
EmbyTabs.focus = function () {
var selected = this.querySelector('.' + activeButtonClass);
const selected = this.querySelector('.' + activeButtonClass);
if (selected) {
focusManager.focus(selected);
@ -180,16 +187,16 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
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 +228,18 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
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 +251,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
}
}));
var currentTabButton = tabButtons[current];
let currentTabButton = tabButtons[current];
setActiveTabButton(tabs, tabButtons[selected], currentTabButton, false);
if (current !== selected && currentTabButton) {
@ -262,7 +269,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
function getSibling(elem, method) {
var sibling = elem[method];
let sibling = elem[method];
while (sibling) {
if (sibling.classList.contains(buttonClass)) {
@ -280,9 +287,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
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 +300,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
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 +313,14 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
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 +331,8 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
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 +345,5 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'webcompo
prototype: EmbyTabs,
extends: 'div'
});
});
/* eslint-enable indent */

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

@ -1,8 +1,11 @@
define(['layoutManager', 'browser', 'css!./emby-textarea', 'webcomponents', 'emby-input'], function (layoutManager, browser) {
'use strict';
import 'css!./emby-textarea';
import 'webcomponents';
import 'emby-input';
/* eslint-disable indent */
function autoGrow(textarea, maxLines) {
var self = this;
const self = this;
if (maxLines === undefined) {
maxLines = 999;
@ -14,17 +17,17 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'webcomponents', 'emb
* @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 +46,8 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'webcomponents', 'emb
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 +70,17 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'webcomponents', 'emb
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 +111,8 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'webcomponents', 'emb
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 +139,5 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'webcomponents', 'emb
prototype: EmbyTextAreaPrototype,
extends: 'textarea'
});
});
/* eslint-enable indent */

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

@ -1,7 +1,9 @@
define(['css!./emby-toggle', 'webcomponents'], function () {
'use strict';
import 'css!./emby-toggle';
import 'webcomponents';
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', 'webcomponents'], 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', 'webcomponents'], function () {
prototype: EmbyTogglePrototype,
extends: 'input'
});
});
/* eslint-enable indent */