mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge branch 'es6' into migrate-to-ES6-10
This commit is contained in:
commit
57dcda9294
16 changed files with 433 additions and 358 deletions
16
package.json
16
package.json
|
@ -94,6 +94,7 @@
|
||||||
"src/components/actionSheet/actionSheet.js",
|
"src/components/actionSheet/actionSheet.js",
|
||||||
"src/components/alphaPicker/alphaPicker.js",
|
"src/components/alphaPicker/alphaPicker.js",
|
||||||
"src/components/autoFocuser.js",
|
"src/components/autoFocuser.js",
|
||||||
|
"src/components/backdrop/backdrop.js",
|
||||||
"src/components/cardbuilder/cardBuilder.js",
|
"src/components/cardbuilder/cardBuilder.js",
|
||||||
"src/components/cardbuilder/chaptercardbuilder.js",
|
"src/components/cardbuilder/chaptercardbuilder.js",
|
||||||
"src/components/cardbuilder/peoplecardbuilder.js",
|
"src/components/cardbuilder/peoplecardbuilder.js",
|
||||||
|
@ -105,9 +106,11 @@
|
||||||
"src/components/images/imageLoader.js",
|
"src/components/images/imageLoader.js",
|
||||||
"src/components/imageUploader/imageUploader.js",
|
"src/components/imageUploader/imageUploader.js",
|
||||||
"src/components/indicators/indicators.js",
|
"src/components/indicators/indicators.js",
|
||||||
|
"src/components/itemContextMenu.js",
|
||||||
"src/components/itemidentifier/itemidentifier.js",
|
"src/components/itemidentifier/itemidentifier.js",
|
||||||
"src/components/itemMediaInfo/itemMediaInfo.js",
|
"src/components/itemMediaInfo/itemMediaInfo.js",
|
||||||
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
|
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
|
||||||
|
"src/components/maintabsmanager.js",
|
||||||
"src/components/mediaLibraryCreator/mediaLibraryCreator.js",
|
"src/components/mediaLibraryCreator/mediaLibraryCreator.js",
|
||||||
"src/components/mediaLibraryEditor/mediaLibraryEditor.js",
|
"src/components/mediaLibraryEditor/mediaLibraryEditor.js",
|
||||||
"src/components/listview/listview.js",
|
"src/components/listview/listview.js",
|
||||||
|
@ -134,6 +137,9 @@
|
||||||
"src/components/syncPlay/playbackPermissionManager.js",
|
"src/components/syncPlay/playbackPermissionManager.js",
|
||||||
"src/components/syncPlay/syncPlayManager.js",
|
"src/components/syncPlay/syncPlayManager.js",
|
||||||
"src/components/syncPlay/timeSyncManager.js",
|
"src/components/syncPlay/timeSyncManager.js",
|
||||||
|
"src/controllers/dashboard/apikeys.js",
|
||||||
|
"src/controllers/dashboard/dashboard.js",
|
||||||
|
"src/controllers/dashboard/encodingsettings.js",
|
||||||
"src/controllers/dashboard/logs.js",
|
"src/controllers/dashboard/logs.js",
|
||||||
"src/controllers/user/subtitles.js",
|
"src/controllers/user/subtitles.js",
|
||||||
"src/controllers/dashboard/mediaLibrary.js",
|
"src/controllers/dashboard/mediaLibrary.js",
|
||||||
|
@ -144,11 +150,17 @@
|
||||||
"src/elements/emby-tabs/emby-tabs.js",
|
"src/elements/emby-tabs/emby-tabs.js",
|
||||||
"src/elements/emby-scroller/emby-scroller.js",
|
"src/elements/emby-scroller/emby-scroller.js",
|
||||||
"src/elements/emby-radio/emby-radio.js",
|
"src/elements/emby-radio/emby-radio.js",
|
||||||
|
"src/elements/emby-checkbox/emby-checkbox.js",
|
||||||
|
"src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js",
|
||||||
"src/elements/emby-progressbar/emby-progressbar.js",
|
"src/elements/emby-progressbar/emby-progressbar.js",
|
||||||
"src/elements/emby-progressring/emby-progressring.js",
|
"src/elements/emby-progressring/emby-progressring.js",
|
||||||
"src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js",
|
"src/elements/emby-radio/emby-radio.js",
|
||||||
|
"src/elements/emby-ratingbutton/emby-ratingbutton.js",
|
||||||
|
"src/elements/emby-scrollbuttons/emby-scrollbuttons.js",
|
||||||
|
"src/elements/emby-scroller/emby-scroller.js",
|
||||||
|
"src/elements/emby-select/emby-select.js",
|
||||||
"src/elements/emby-slider/emby-slider.js",
|
"src/elements/emby-slider/emby-slider.js",
|
||||||
"src/elements/emby-checkbox/emby-checkbox.js",
|
"src/elements/emby-tabs/emby-tabs.js",
|
||||||
"src/elements/emby-textarea/emby-textarea.js",
|
"src/elements/emby-textarea/emby-textarea.js",
|
||||||
"src/elements/emby-toggle/emby-toggle.js",
|
"src/elements/emby-toggle/emby-toggle.js",
|
||||||
"src/plugins/bookPlayer/plugin.js",
|
"src/plugins/bookPlayer/plugin.js",
|
||||||
|
|
|
@ -21,7 +21,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
|
||||||
};
|
};
|
||||||
|
|
||||||
function beginConnectionWizard() {
|
function beginConnectionWizard() {
|
||||||
backdrop.clear();
|
backdrop.clearBackdrop();
|
||||||
loading.show();
|
loading.show();
|
||||||
connectionManager.connect({
|
connectionManager.connect({
|
||||||
enableAutoLogin: appSettings.enableAutoLogin()
|
enableAutoLogin: appSettings.enableAutoLogin()
|
||||||
|
@ -657,7 +657,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
|
||||||
}
|
}
|
||||||
|
|
||||||
if (level === 'full' || level === 2) {
|
if (level === 'full' || level === 2) {
|
||||||
backdrop.clear(true);
|
backdrop.clearBackdrop(true);
|
||||||
document.documentElement.classList.add('transparentDocument');
|
document.documentElement.classList.add('transparentDocument');
|
||||||
backgroundContainer.classList.add('backgroundContainer-transparent');
|
backgroundContainer.classList.add('backgroundContainer-transparent');
|
||||||
backdropContainer.classList.add('hide');
|
backdropContainer.classList.add('hide');
|
||||||
|
|
|
@ -1,5 +1,11 @@
|
||||||
define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings', 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom, userSettings) {
|
import browser from 'browser';
|
||||||
'use strict';
|
import connectionManager from 'connectionManager';
|
||||||
|
import playbackManager from 'playbackManager';
|
||||||
|
import dom from 'dom';
|
||||||
|
import * as userSettings from 'userSettings';
|
||||||
|
import 'css!./backdrop';
|
||||||
|
|
||||||
|
/* eslint-disable indent */
|
||||||
|
|
||||||
function enableAnimation(elem) {
|
function enableAnimation(elem) {
|
||||||
if (browser.slow) {
|
if (browser.slow) {
|
||||||
|
@ -22,71 +28,70 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function Backdrop() {
|
class Backdrop {
|
||||||
}
|
load(url, parent, existingBackdropImage) {
|
||||||
|
const img = new Image();
|
||||||
|
const self = this;
|
||||||
|
|
||||||
Backdrop.prototype.load = function (url, parent, existingBackdropImage) {
|
img.onload = () => {
|
||||||
var img = new Image();
|
if (self.isDestroyed) {
|
||||||
var self = this;
|
return;
|
||||||
|
|
||||||
img.onload = function () {
|
|
||||||
if (self.isDestroyed) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var backdropImage = document.createElement('div');
|
|
||||||
backdropImage.classList.add('backdropImage');
|
|
||||||
backdropImage.classList.add('displayingBackdropImage');
|
|
||||||
backdropImage.style.backgroundImage = "url('" + url + "')";
|
|
||||||
backdropImage.setAttribute('data-url', url);
|
|
||||||
|
|
||||||
backdropImage.classList.add('backdropImageFadeIn');
|
|
||||||
parent.appendChild(backdropImage);
|
|
||||||
|
|
||||||
if (!enableAnimation(backdropImage)) {
|
|
||||||
if (existingBackdropImage && existingBackdropImage.parentNode) {
|
|
||||||
existingBackdropImage.parentNode.removeChild(existingBackdropImage);
|
|
||||||
}
|
}
|
||||||
internalBackdrop(true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var onAnimationComplete = function () {
|
const backdropImage = document.createElement('div');
|
||||||
dom.removeEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
|
backdropImage.classList.add('backdropImage');
|
||||||
|
backdropImage.classList.add('displayingBackdropImage');
|
||||||
|
backdropImage.style.backgroundImage = `url('${url}')`;
|
||||||
|
backdropImage.setAttribute('data-url', url);
|
||||||
|
|
||||||
|
backdropImage.classList.add('backdropImageFadeIn');
|
||||||
|
parent.appendChild(backdropImage);
|
||||||
|
|
||||||
|
if (!enableAnimation(backdropImage)) {
|
||||||
|
if (existingBackdropImage && existingBackdropImage.parentNode) {
|
||||||
|
existingBackdropImage.parentNode.removeChild(existingBackdropImage);
|
||||||
|
}
|
||||||
|
internalBackdrop(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const onAnimationComplete = () => {
|
||||||
|
dom.removeEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
if (backdropImage === self.currentAnimatingElement) {
|
||||||
|
self.currentAnimatingElement = null;
|
||||||
|
}
|
||||||
|
if (existingBackdropImage && existingBackdropImage.parentNode) {
|
||||||
|
existingBackdropImage.parentNode.removeChild(existingBackdropImage);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
dom.addEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
|
||||||
once: true
|
once: true
|
||||||
});
|
});
|
||||||
if (backdropImage === self.currentAnimatingElement) {
|
|
||||||
self.currentAnimatingElement = null;
|
internalBackdrop(true);
|
||||||
}
|
|
||||||
if (existingBackdropImage && existingBackdropImage.parentNode) {
|
|
||||||
existingBackdropImage.parentNode.removeChild(existingBackdropImage);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
dom.addEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
|
img.src = url;
|
||||||
once: true
|
|
||||||
});
|
|
||||||
|
|
||||||
internalBackdrop(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
img.src = url;
|
|
||||||
};
|
|
||||||
|
|
||||||
Backdrop.prototype.cancelAnimation = function () {
|
|
||||||
var elem = this.currentAnimatingElement;
|
|
||||||
if (elem) {
|
|
||||||
elem.classList.remove('backdropImageFadeIn');
|
|
||||||
this.currentAnimatingElement = null;
|
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
Backdrop.prototype.destroy = function () {
|
cancelAnimation() {
|
||||||
this.isDestroyed = true;
|
const elem = this.currentAnimatingElement;
|
||||||
this.cancelAnimation();
|
if (elem) {
|
||||||
};
|
elem.classList.remove('backdropImageFadeIn');
|
||||||
|
this.currentAnimatingElement = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
var backdropContainer;
|
destroy() {
|
||||||
|
this.isDestroyed = true;
|
||||||
|
this.cancelAnimation();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let backdropContainer;
|
||||||
function getBackdropContainer() {
|
function getBackdropContainer() {
|
||||||
if (!backdropContainer) {
|
if (!backdropContainer) {
|
||||||
backdropContainer = document.querySelector('.backdropContainer');
|
backdropContainer = document.querySelector('.backdropContainer');
|
||||||
|
@ -101,7 +106,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
|
||||||
return backdropContainer;
|
return backdropContainer;
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearBackdrop(clearAll) {
|
export function clearBackdrop(clearAll) {
|
||||||
clearRotation();
|
clearRotation();
|
||||||
|
|
||||||
if (currentLoadingBackdrop) {
|
if (currentLoadingBackdrop) {
|
||||||
|
@ -109,7 +114,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
|
||||||
currentLoadingBackdrop = null;
|
currentLoadingBackdrop = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
var elem = getBackdropContainer();
|
const elem = getBackdropContainer();
|
||||||
elem.innerHTML = '';
|
elem.innerHTML = '';
|
||||||
|
|
||||||
if (clearAll) {
|
if (clearAll) {
|
||||||
|
@ -119,7 +124,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
|
||||||
internalBackdrop(false);
|
internalBackdrop(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
var backgroundContainer;
|
let backgroundContainer;
|
||||||
function getBackgroundContainer() {
|
function getBackgroundContainer() {
|
||||||
if (!backgroundContainer) {
|
if (!backgroundContainer) {
|
||||||
backgroundContainer = document.querySelector('.backgroundContainer');
|
backgroundContainer = document.querySelector('.backgroundContainer');
|
||||||
|
@ -135,31 +140,27 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var hasInternalBackdrop;
|
let hasInternalBackdrop;
|
||||||
function internalBackdrop(enabled) {
|
function internalBackdrop(enabled) {
|
||||||
hasInternalBackdrop = enabled;
|
hasInternalBackdrop = enabled;
|
||||||
setBackgroundContainerBackgroundEnabled();
|
setBackgroundContainerBackgroundEnabled();
|
||||||
}
|
}
|
||||||
|
|
||||||
var hasExternalBackdrop;
|
let hasExternalBackdrop;
|
||||||
function externalBackdrop(enabled) {
|
export function externalBackdrop(enabled) {
|
||||||
hasExternalBackdrop = enabled;
|
hasExternalBackdrop = enabled;
|
||||||
setBackgroundContainerBackgroundEnabled();
|
setBackgroundContainerBackgroundEnabled();
|
||||||
}
|
}
|
||||||
|
|
||||||
function getRandom(min, max) {
|
let currentLoadingBackdrop;
|
||||||
return Math.floor(Math.random() * (max - min) + min);
|
|
||||||
}
|
|
||||||
|
|
||||||
var currentLoadingBackdrop;
|
|
||||||
function setBackdropImage(url) {
|
function setBackdropImage(url) {
|
||||||
if (currentLoadingBackdrop) {
|
if (currentLoadingBackdrop) {
|
||||||
currentLoadingBackdrop.destroy();
|
currentLoadingBackdrop.destroy();
|
||||||
currentLoadingBackdrop = null;
|
currentLoadingBackdrop = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
var elem = getBackdropContainer();
|
const elem = getBackdropContainer();
|
||||||
var existingBackdropImage = elem.querySelector('.displayingBackdropImage');
|
const existingBackdropImage = elem.querySelector('.displayingBackdropImage');
|
||||||
|
|
||||||
if (existingBackdropImage && existingBackdropImage.getAttribute('data-url') === url) {
|
if (existingBackdropImage && existingBackdropImage.getAttribute('data-url') === url) {
|
||||||
if (existingBackdropImage.getAttribute('data-url') === url) {
|
if (existingBackdropImage.getAttribute('data-url') === url) {
|
||||||
|
@ -168,7 +169,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
|
||||||
existingBackdropImage.classList.remove('displayingBackdropImage');
|
existingBackdropImage.classList.remove('displayingBackdropImage');
|
||||||
}
|
}
|
||||||
|
|
||||||
var instance = new Backdrop();
|
const instance = new Backdrop();
|
||||||
instance.load(url, elem, existingBackdropImage);
|
instance.load(url, elem, existingBackdropImage);
|
||||||
currentLoadingBackdrop = instance;
|
currentLoadingBackdrop = instance;
|
||||||
}
|
}
|
||||||
|
@ -176,9 +177,9 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
|
||||||
function getItemImageUrls(item, imageOptions) {
|
function getItemImageUrls(item, imageOptions) {
|
||||||
imageOptions = imageOptions || {};
|
imageOptions = imageOptions || {};
|
||||||
|
|
||||||
var apiClient = connectionManager.getApiClient(item.ServerId);
|
const apiClient = connectionManager.getApiClient(item.ServerId);
|
||||||
if (item.BackdropImageTags && item.BackdropImageTags.length > 0) {
|
if (item.BackdropImageTags && item.BackdropImageTags.length > 0) {
|
||||||
return item.BackdropImageTags.map(function (imgTag, index) {
|
return item.BackdropImageTags.map((imgTag, index) => {
|
||||||
return apiClient.getScaledImageUrl(item.BackdropItemId || item.Id, Object.assign(imageOptions, {
|
return apiClient.getScaledImageUrl(item.BackdropItemId || item.Id, Object.assign(imageOptions, {
|
||||||
type: 'Backdrop',
|
type: 'Backdrop',
|
||||||
tag: imgTag,
|
tag: imgTag,
|
||||||
|
@ -189,7 +190,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
|
if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
|
||||||
return item.ParentBackdropImageTags.map(function (imgTag, index) {
|
return item.ParentBackdropImageTags.map((imgTag, index) => {
|
||||||
return apiClient.getScaledImageUrl(item.ParentBackdropItemId, Object.assign(imageOptions, {
|
return apiClient.getScaledImageUrl(item.ParentBackdropItemId, Object.assign(imageOptions, {
|
||||||
type: 'Backdrop',
|
type: 'Backdrop',
|
||||||
tag: imgTag,
|
tag: imgTag,
|
||||||
|
@ -203,13 +204,13 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
|
||||||
}
|
}
|
||||||
|
|
||||||
function getImageUrls(items, imageOptions) {
|
function getImageUrls(items, imageOptions) {
|
||||||
var list = [];
|
const list = [];
|
||||||
var onImg = function (img) {
|
const onImg = img => {
|
||||||
list.push(img);
|
list.push(img);
|
||||||
};
|
};
|
||||||
|
|
||||||
for (var i = 0, length = items.length; i < length; i++) {
|
for (let i = 0, length = items.length; i < length; i++) {
|
||||||
var itemImages = getItemImageUrls(items[i], imageOptions);
|
const itemImages = getItemImageUrls(items[i], imageOptions);
|
||||||
itemImages.forEach(onImg);
|
itemImages.forEach(onImg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -229,7 +230,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
|
||||||
|
|
||||||
// If you don't care about the order of the elements inside
|
// If you don't care about the order of the elements inside
|
||||||
// the array, you should sort both arrays here.
|
// the array, you should sort both arrays here.
|
||||||
for (var i = 0; i < a.length; ++i) {
|
for (let i = 0; i < a.length; ++i) {
|
||||||
if (a[i] !== b[i]) {
|
if (a[i] !== b[i]) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
@ -242,12 +243,12 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
|
||||||
return userSettings.enableBackdrops();
|
return userSettings.enableBackdrops();
|
||||||
}
|
}
|
||||||
|
|
||||||
var rotationInterval;
|
let rotationInterval;
|
||||||
var currentRotatingImages = [];
|
let currentRotatingImages = [];
|
||||||
var currentRotationIndex = -1;
|
let currentRotationIndex = -1;
|
||||||
function setBackdrops(items, imageOptions, enableImageRotation) {
|
export function setBackdrops(items, imageOptions, enableImageRotation) {
|
||||||
if (enabled()) {
|
if (enabled()) {
|
||||||
var images = getImageUrls(items, imageOptions);
|
const images = getImageUrls(items, imageOptions);
|
||||||
|
|
||||||
if (images.length) {
|
if (images.length) {
|
||||||
startRotation(images, enableImageRotation);
|
startRotation(images, enableImageRotation);
|
||||||
|
@ -279,7 +280,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var newIndex = currentRotationIndex + 1;
|
let newIndex = currentRotationIndex + 1;
|
||||||
if (newIndex >= currentRotatingImages.length) {
|
if (newIndex >= currentRotatingImages.length) {
|
||||||
newIndex = 0;
|
newIndex = 0;
|
||||||
}
|
}
|
||||||
|
@ -289,7 +290,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearRotation() {
|
function clearRotation() {
|
||||||
var interval = rotationInterval;
|
const interval = rotationInterval;
|
||||||
if (interval) {
|
if (interval) {
|
||||||
clearInterval(interval);
|
clearInterval(interval);
|
||||||
}
|
}
|
||||||
|
@ -299,7 +300,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
|
||||||
currentRotationIndex = -1;
|
currentRotationIndex = -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
function setBackdrop(url, imageOptions) {
|
export function setBackdrop(url, imageOptions) {
|
||||||
if (url && typeof url !== 'string') {
|
if (url && typeof url !== 'string') {
|
||||||
url = getImageUrls([url], imageOptions)[0];
|
url = getImageUrls([url], imageOptions)[0];
|
||||||
}
|
}
|
||||||
|
@ -312,10 +313,11 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
/* eslint-enable indent */
|
||||||
setBackdrops: setBackdrops,
|
|
||||||
setBackdrop: setBackdrop,
|
export default {
|
||||||
clear: clearBackdrop,
|
setBackdrops: setBackdrops,
|
||||||
externalBackdrop: externalBackdrop
|
setBackdrop: setBackdrop,
|
||||||
};
|
clearBackdrop: clearBackdrop,
|
||||||
});
|
externalBackdrop: externalBackdrop
|
||||||
|
};
|
||||||
|
|
|
@ -1,14 +1,24 @@
|
||||||
define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', 'playbackManager', 'loading', 'appSettings', 'browser', 'actionsheet'], function (appHost, globalize, connectionManager, itemHelper, appRouter, playbackManager, loading, appSettings, browser, actionsheet) {
|
import appHost from 'apphost';
|
||||||
'use strict';
|
import globalize from 'globalize';
|
||||||
|
import connectionManager from 'connectionManager';
|
||||||
|
import itemHelper from 'itemHelper';
|
||||||
|
import appRouter from 'appRouter';
|
||||||
|
import playbackManager from 'playbackManager';
|
||||||
|
import loading from 'loading';
|
||||||
|
import appSettings from 'appSettings';
|
||||||
|
import browser from 'browser';
|
||||||
|
import actionsheet from 'actionsheet';
|
||||||
|
|
||||||
function getCommands(options) {
|
/* eslint-disable indent */
|
||||||
var item = options.item;
|
|
||||||
var user = options.user;
|
|
||||||
|
|
||||||
var canPlay = playbackManager.canPlay(item);
|
export function getCommands(options) {
|
||||||
var restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
|
const item = options.item;
|
||||||
|
const user = options.user;
|
||||||
|
|
||||||
var commands = [];
|
const canPlay = playbackManager.canPlay(item);
|
||||||
|
const restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
|
||||||
|
|
||||||
|
let commands = [];
|
||||||
|
|
||||||
if (canPlay && item.MediaType !== 'Photo') {
|
if (canPlay && item.MediaType !== 'Photo') {
|
||||||
if (options.play !== false) {
|
if (options.play !== false) {
|
||||||
|
@ -161,10 +171,10 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
var canEdit = itemHelper.canEdit(user, item);
|
const canEdit = itemHelper.canEdit(user, item);
|
||||||
if (canEdit) {
|
if (canEdit) {
|
||||||
if (options.edit !== false && item.Type !== 'SeriesTimer') {
|
if (options.edit !== false && item.Type !== 'SeriesTimer') {
|
||||||
var text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata');
|
const text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata');
|
||||||
commands.push({
|
commands.push({
|
||||||
name: text,
|
name: text,
|
||||||
id: 'edit',
|
id: 'edit',
|
||||||
|
@ -311,31 +321,31 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
}
|
}
|
||||||
|
|
||||||
function executeCommand(item, id, options) {
|
function executeCommand(item, id, options) {
|
||||||
var itemId = item.Id;
|
const itemId = item.Id;
|
||||||
var serverId = item.ServerId;
|
const serverId = item.ServerId;
|
||||||
var apiClient = connectionManager.getApiClient(serverId);
|
const apiClient = connectionManager.getApiClient(serverId);
|
||||||
|
|
||||||
return new Promise(function (resolve, reject) {
|
return new Promise(function (resolve, reject) {
|
||||||
switch (id) {
|
switch (id) {
|
||||||
case 'addtocollection':
|
case 'addtocollection':
|
||||||
require(['collectionEditor'], function (collectionEditor) {
|
import('collectionEditor').then(({default: collectionEditor}) => {
|
||||||
new collectionEditor.showEditor({
|
new collectionEditor({
|
||||||
items: [itemId],
|
items: [itemId],
|
||||||
serverId: serverId
|
serverId: serverId
|
||||||
}).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
|
}).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 'addtoplaylist':
|
case 'addtoplaylist':
|
||||||
require(['playlistEditor'], function (playlistEditor) {
|
import('playlistEditor').then(({default: playlistEditor}) => {
|
||||||
new playlistEditor.showEditor({
|
new playlistEditor({
|
||||||
items: [itemId],
|
items: [itemId],
|
||||||
serverId: serverId
|
serverId: serverId
|
||||||
}).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
|
}).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 'download':
|
case 'download':
|
||||||
require(['fileDownloader'], function (fileDownloader) {
|
import('fileDownloader').then(({default: fileDownloader}) => {
|
||||||
var downloadHref = apiClient.getItemDownloadUrl(itemId);
|
const downloadHref = apiClient.getItemDownloadUrl(itemId);
|
||||||
fileDownloader.download([{
|
fileDownloader.download([{
|
||||||
url: downloadHref,
|
url: downloadHref,
|
||||||
itemId: itemId,
|
itemId: itemId,
|
||||||
|
@ -346,17 +356,17 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
getResolveFunction(getResolveFunction(resolve, id), id)();
|
getResolveFunction(getResolveFunction(resolve, id), id)();
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 'copy-stream':
|
case 'copy-stream': {
|
||||||
var downloadHref = apiClient.getItemDownloadUrl(itemId);
|
const downloadHref = apiClient.getItemDownloadUrl(itemId);
|
||||||
var textAreaCopy = function () {
|
const textAreaCopy = function () {
|
||||||
var textArea = document.createElement('textarea');
|
let textArea = document.createElement('textarea');
|
||||||
textArea.value = downloadHref;
|
textArea.value = downloadHref;
|
||||||
document.body.appendChild(textArea);
|
document.body.appendChild(textArea);
|
||||||
textArea.focus();
|
textArea.focus();
|
||||||
textArea.select();
|
textArea.select();
|
||||||
|
|
||||||
if (document.execCommand('copy')) {
|
if (document.execCommand('copy')) {
|
||||||
require(['toast'], function (toast) {
|
import('toast').then(({default: toast}) => {
|
||||||
toast(globalize.translate('CopyStreamURLSuccess'));
|
toast(globalize.translate('CopyStreamURLSuccess'));
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
@ -371,7 +381,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
} else {
|
} else {
|
||||||
/* eslint-disable-next-line compat/compat */
|
/* eslint-disable-next-line compat/compat */
|
||||||
navigator.clipboard.writeText(downloadHref).then(function () {
|
navigator.clipboard.writeText(downloadHref).then(function () {
|
||||||
require(['toast'], function (toast) {
|
import('toast').then(({default: toast}) => {
|
||||||
toast(globalize.translate('CopyStreamURLSuccess'));
|
toast(globalize.translate('CopyStreamURLSuccess'));
|
||||||
});
|
});
|
||||||
}).catch(function () {
|
}).catch(function () {
|
||||||
|
@ -380,8 +390,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
}
|
}
|
||||||
getResolveFunction(resolve, id)();
|
getResolveFunction(resolve, id)();
|
||||||
break;
|
break;
|
||||||
|
}
|
||||||
case 'editsubtitles':
|
case 'editsubtitles':
|
||||||
require(['subtitleEditor'], function (subtitleEditor) {
|
import('subtitleEditor').then(({default: subtitleEditor}) => {
|
||||||
subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
|
subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
|
@ -389,7 +400,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
|
editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
|
||||||
break;
|
break;
|
||||||
case 'editimages':
|
case 'editimages':
|
||||||
require(['imageEditor'], function (imageEditor) {
|
import('imageEditor').then(({default: imageEditor}) => {
|
||||||
imageEditor.show({
|
imageEditor.show({
|
||||||
itemId: itemId,
|
itemId: itemId,
|
||||||
serverId: serverId
|
serverId: serverId
|
||||||
|
@ -397,12 +408,12 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 'identify':
|
case 'identify':
|
||||||
require(['itemIdentifier'], function (itemIdentifier) {
|
import('itemIdentifier').then(({default: itemIdentifier}) => {
|
||||||
itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
|
itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 'moremediainfo':
|
case 'moremediainfo':
|
||||||
require(['itemMediaInfo'], function (itemMediaInfo) {
|
import('itemMediaInfo').then(({default: itemMediaInfo}) => {
|
||||||
itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id));
|
itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id));
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
|
@ -431,7 +442,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
getResolveFunction(resolve, id)();
|
getResolveFunction(resolve, id)();
|
||||||
break;
|
break;
|
||||||
case 'record':
|
case 'record':
|
||||||
require(['recordingCreator'], function (recordingCreator) {
|
import('recordingCreator').then(({default: recordingCreator}) => {
|
||||||
recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
|
recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
|
@ -502,8 +513,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
}
|
}
|
||||||
|
|
||||||
function deleteTimer(apiClient, item, resolve, command) {
|
function deleteTimer(apiClient, item, resolve, command) {
|
||||||
require(['recordingHelper'], function (recordingHelper) {
|
import('recordingHelper').then(({default: recordingHelper}) => {
|
||||||
var timerId = item.TimerId || item.Id;
|
const timerId = item.TimerId || item.Id;
|
||||||
recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () {
|
recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () {
|
||||||
getResolveFunction(resolve, command, true)();
|
getResolveFunction(resolve, command, true)();
|
||||||
});
|
});
|
||||||
|
@ -511,7 +522,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
}
|
}
|
||||||
|
|
||||||
function deleteSeriesTimer(apiClient, item, resolve, command) {
|
function deleteSeriesTimer(apiClient, item, resolve, command) {
|
||||||
require(['recordingHelper'], function (recordingHelper) {
|
import('recordingHelper').then(({default: recordingHelper}) => {
|
||||||
recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () {
|
recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () {
|
||||||
getResolveFunction(resolve, command, true)();
|
getResolveFunction(resolve, command, true)();
|
||||||
});
|
});
|
||||||
|
@ -519,9 +530,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
}
|
}
|
||||||
|
|
||||||
function play(item, resume, queue, queueNext) {
|
function play(item, resume, queue, queueNext) {
|
||||||
var method = queue ? (queueNext ? 'queueNext' : 'queue') : 'play';
|
const method = queue ? (queueNext ? 'queueNext' : 'queue') : 'play';
|
||||||
|
|
||||||
var startPosition = 0;
|
let startPosition = 0;
|
||||||
if (resume && item.UserData && item.UserData.PlaybackPositionTicks) {
|
if (resume && item.UserData && item.UserData.PlaybackPositionTicks) {
|
||||||
startPosition = item.UserData.PlaybackPositionTicks;
|
startPosition = item.UserData.PlaybackPositionTicks;
|
||||||
}
|
}
|
||||||
|
@ -542,18 +553,18 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
|
|
||||||
function editItem(apiClient, item) {
|
function editItem(apiClient, item) {
|
||||||
return new Promise(function (resolve, reject) {
|
return new Promise(function (resolve, reject) {
|
||||||
var serverId = apiClient.serverInfo().Id;
|
const serverId = apiClient.serverInfo().Id;
|
||||||
|
|
||||||
if (item.Type === 'Timer') {
|
if (item.Type === 'Timer') {
|
||||||
require(['recordingEditor'], function (recordingEditor) {
|
import('recordingEditor').then(({default: recordingEditor}) => {
|
||||||
recordingEditor.show(item.Id, serverId).then(resolve, reject);
|
recordingEditor.show(item.Id, serverId).then(resolve, reject);
|
||||||
});
|
});
|
||||||
} else if (item.Type === 'SeriesTimer') {
|
} else if (item.Type === 'SeriesTimer') {
|
||||||
require(['seriesRecordingEditor'], function (recordingEditor) {
|
import('seriesRecordingEditor').then(({default: recordingEditor}) => {
|
||||||
recordingEditor.show(item.Id, serverId).then(resolve, reject);
|
recordingEditor.show(item.Id, serverId).then(resolve, reject);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
require(['metadataEditor'], function (metadataEditor) {
|
import('metadataEditor').then(({default: metadataEditor}) => {
|
||||||
metadataEditor.show(item.Id, serverId).then(resolve, reject);
|
metadataEditor.show(item.Id, serverId).then(resolve, reject);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -562,7 +573,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
|
|
||||||
function deleteItem(apiClient, item) {
|
function deleteItem(apiClient, item) {
|
||||||
return new Promise(function (resolve, reject) {
|
return new Promise(function (resolve, reject) {
|
||||||
require(['deleteHelper'], function (deleteHelper) {
|
import('deleteHelper').then(({default: deleteHelper}) => {
|
||||||
deleteHelper.deleteItem({
|
deleteHelper.deleteItem({
|
||||||
item: item,
|
item: item,
|
||||||
navigate: false
|
navigate: false
|
||||||
|
@ -574,7 +585,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
}
|
}
|
||||||
|
|
||||||
function refresh(apiClient, item) {
|
function refresh(apiClient, item) {
|
||||||
require(['refreshDialog'], function (refreshDialog) {
|
import('refreshDialog').then(({default: refreshDialog}) => {
|
||||||
new refreshDialog({
|
new refreshDialog({
|
||||||
itemIds: [item.Id],
|
itemIds: [item.Id],
|
||||||
serverId: apiClient.serverInfo().Id,
|
serverId: apiClient.serverInfo().Id,
|
||||||
|
@ -583,8 +594,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function show(options) {
|
export function show(options) {
|
||||||
var commands = getCommands(options);
|
const commands = getCommands(options);
|
||||||
if (!commands.length) {
|
if (!commands.length) {
|
||||||
return Promise.reject();
|
return Promise.reject();
|
||||||
}
|
}
|
||||||
|
@ -598,8 +609,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
/* eslint-enable indent */
|
||||||
getCommands: getCommands,
|
|
||||||
show: show
|
export default {
|
||||||
};
|
getCommands: getCommands,
|
||||||
});
|
show: show
|
||||||
|
};
|
||||||
|
|
|
@ -1,11 +1,16 @@
|
||||||
define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, browser, events) {
|
import dom from 'dom';
|
||||||
'use strict';
|
import browser from 'browser';
|
||||||
|
import events from 'events';
|
||||||
|
import 'emby-tabs';
|
||||||
|
import 'emby-button';
|
||||||
|
|
||||||
var tabOwnerView;
|
/* eslint-disable indent */
|
||||||
var queryScope = document.querySelector('.skinHeader');
|
|
||||||
var footerTabsContainer;
|
let tabOwnerView;
|
||||||
var headerTabsContainer;
|
const queryScope = document.querySelector('.skinHeader');
|
||||||
var tabsElem;
|
let footerTabsContainer;
|
||||||
|
let headerTabsContainer;
|
||||||
|
let tabsElem;
|
||||||
|
|
||||||
function enableTabsInFooter() {
|
function enableTabsInFooter() {
|
||||||
return false;
|
return false;
|
||||||
|
@ -44,7 +49,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
var classList = elem.classList;
|
const classList = elem.classList;
|
||||||
if (classList) {
|
if (classList) {
|
||||||
return !classList.contains('scrollX') && !classList.contains('animatedScrollX');
|
return !classList.contains('scrollX') && !classList.contains('animatedScrollX');
|
||||||
}
|
}
|
||||||
|
@ -52,7 +57,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
var parent = target;
|
let parent = target;
|
||||||
while (parent != null) {
|
while (parent != null) {
|
||||||
if (!allowSwipeOn(parent)) {
|
if (!allowSwipeOn(parent)) {
|
||||||
return false;
|
return false;
|
||||||
|
@ -70,22 +75,22 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
|
||||||
}
|
}
|
||||||
|
|
||||||
// implement without hammer
|
// implement without hammer
|
||||||
var pageCount = getTabContainersFn().length;
|
const pageCount = getTabContainersFn().length;
|
||||||
var onSwipeLeft = function (e, target) {
|
const onSwipeLeft = function (e, target) {
|
||||||
if (allowSwipe(target) && view.contains(target)) {
|
if (allowSwipe(target) && view.contains(target)) {
|
||||||
tabsElem.selectNext();
|
tabsElem.selectNext();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var onSwipeRight = function (e, target) {
|
const onSwipeRight = function (e, target) {
|
||||||
if (allowSwipe(target) && view.contains(target)) {
|
if (allowSwipe(target) && view.contains(target)) {
|
||||||
tabsElem.selectPrevious();
|
tabsElem.selectPrevious();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
require(['touchHelper'], function (TouchHelper) {
|
import('touchHelper').then(({default: TouchHelper}) => {
|
||||||
|
|
||||||
var touchHelper = new TouchHelper(view.parentNode.parentNode);
|
const touchHelper = new TouchHelper(view.parentNode.parentNode);
|
||||||
|
|
||||||
events.on(touchHelper, 'swipeleft', onSwipeLeft);
|
events.on(touchHelper, 'swipeleft', onSwipeLeft);
|
||||||
events.on(touchHelper, 'swiperight', onSwipeRight);
|
events.on(touchHelper, 'swiperight', onSwipeRight);
|
||||||
|
@ -96,9 +101,9 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function setTabs(view, selectedIndex, getTabsFn, getTabContainersFn, onBeforeTabChange, onTabChange, setSelectedIndex) {
|
export function setTabs(view, selectedIndex, getTabsFn, getTabContainersFn, onBeforeTabChange, onTabChange, setSelectedIndex) {
|
||||||
|
|
||||||
var enableInFooter = enableTabsInFooter();
|
const enableInFooter = enableTabsInFooter();
|
||||||
|
|
||||||
if (!view) {
|
if (!view) {
|
||||||
if (tabOwnerView) {
|
if (tabOwnerView) {
|
||||||
|
@ -129,7 +134,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
|
||||||
|
|
||||||
ensureElements(enableInFooter);
|
ensureElements(enableInFooter);
|
||||||
|
|
||||||
var tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer;
|
const tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer;
|
||||||
|
|
||||||
if (!tabOwnerView) {
|
if (!tabOwnerView) {
|
||||||
tabsContainerElem.classList.remove('hide');
|
tabsContainerElem.classList.remove('hide');
|
||||||
|
@ -137,18 +142,18 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
|
||||||
|
|
||||||
if (tabOwnerView !== view) {
|
if (tabOwnerView !== view) {
|
||||||
|
|
||||||
var index = 0;
|
let index = 0;
|
||||||
|
|
||||||
var indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"');
|
const indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"');
|
||||||
var tabsHtml = '<div is="emby-tabs"' + indexAttribute + ' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">' + getTabsFn().map(function (t) {
|
const tabsHtml = '<div is="emby-tabs"' + indexAttribute + ' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">' + getTabsFn().map(function (t) {
|
||||||
|
|
||||||
var tabClass = 'emby-tab-button';
|
let tabClass = 'emby-tab-button';
|
||||||
|
|
||||||
if (t.enabled === false) {
|
if (t.enabled === false) {
|
||||||
tabClass += ' hide';
|
tabClass += ' hide';
|
||||||
}
|
}
|
||||||
|
|
||||||
var tabHtml;
|
let tabHtml;
|
||||||
|
|
||||||
if (t.cssClass) {
|
if (t.cssClass) {
|
||||||
tabClass += ' ' + t.cssClass;
|
tabClass += ' ' + t.cssClass;
|
||||||
|
@ -177,16 +182,16 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
|
||||||
|
|
||||||
tabsElem.addEventListener('beforetabchange', function (e) {
|
tabsElem.addEventListener('beforetabchange', function (e) {
|
||||||
|
|
||||||
var tabContainers = getTabContainersFn();
|
const tabContainers = getTabContainersFn();
|
||||||
if (e.detail.previousIndex != null) {
|
if (e.detail.previousIndex != null) {
|
||||||
|
|
||||||
var previousPanel = tabContainers[e.detail.previousIndex];
|
const previousPanel = tabContainers[e.detail.previousIndex];
|
||||||
if (previousPanel) {
|
if (previousPanel) {
|
||||||
previousPanel.classList.remove('is-active');
|
previousPanel.classList.remove('is-active');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var newPanel = tabContainers[e.detail.selectedTabIndex];
|
const newPanel = tabContainers[e.detail.selectedTabIndex];
|
||||||
|
|
||||||
//if (e.detail.previousIndex != null && e.detail.previousIndex != e.detail.selectedTabIndex) {
|
//if (e.detail.previousIndex != null && e.detail.previousIndex != e.detail.selectedTabIndex) {
|
||||||
// if (newPanel.animate && (animateTabs || []).indexOf(e.detail.selectedTabIndex) != -1) {
|
// if (newPanel.animate && (animateTabs || []).indexOf(e.detail.selectedTabIndex) != -1) {
|
||||||
|
@ -241,9 +246,9 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectedTabIndex(index) {
|
export function selectedTabIndex(index) {
|
||||||
|
|
||||||
var tabsContainerElem = headerTabsContainer;
|
const tabsContainerElem = headerTabsContainer;
|
||||||
|
|
||||||
if (!tabsElem) {
|
if (!tabsElem) {
|
||||||
tabsElem = tabsContainerElem.querySelector('[is="emby-tabs"]');
|
tabsElem = tabsContainerElem.querySelector('[is="emby-tabs"]');
|
||||||
|
@ -256,13 +261,8 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTabsElement() {
|
export function getTabsElement() {
|
||||||
return document.querySelector('.tabs-viewmenubar');
|
return document.querySelector('.tabs-viewmenubar');
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
/* eslint-enable indent */
|
||||||
setTabs: setTabs,
|
|
||||||
getTabsElement: getTabsElement,
|
|
||||||
selectedTabIndex: selectedTabIndex
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
|
@ -175,7 +175,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
|
||||||
context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><span class="material-icons favorite"></span></button>';
|
context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><span class="material-icons favorite"></span></button>';
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
backdrop.clear();
|
backdrop.clearBackdrop();
|
||||||
context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '';
|
context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -84,7 +84,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'backdrop', 'globalize',
|
||||||
currentSound = null;
|
currentSound = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
backdrop.clear();
|
backdrop.clearBackdrop();
|
||||||
}
|
}
|
||||||
|
|
||||||
function onThemeLoaded() {
|
function onThemeLoaded() {
|
||||||
|
|
|
@ -95,7 +95,7 @@ define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (
|
||||||
TabbedView.prototype.onResume = function (options) {
|
TabbedView.prototype.onResume = function (options) {
|
||||||
|
|
||||||
this.setTitle();
|
this.setTitle();
|
||||||
backdrop.clear();
|
backdrop.clearBackdrop();
|
||||||
|
|
||||||
var currentTabController = this.currentTabController;
|
var currentTabController = this.currentTabController;
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,14 @@
|
||||||
define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button'], function (datetime, loading, libraryMenu, dom, globalize) {
|
import datetime from 'datetime';
|
||||||
'use strict';
|
import loading from 'loading';
|
||||||
|
import libraryMenu from 'libraryMenu';
|
||||||
|
import dom from 'dom';
|
||||||
|
import globalize from 'globalize';
|
||||||
|
import 'emby-button';
|
||||||
|
|
||||||
|
/* eslint-disable indent */
|
||||||
|
|
||||||
function revoke(page, key) {
|
function revoke(page, key) {
|
||||||
require(['confirm'], function (confirm) {
|
import('confirm').then(({default: confirm}) => {
|
||||||
confirm(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () {
|
confirm(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () {
|
||||||
loading.show();
|
loading.show();
|
||||||
ApiClient.ajax({
|
ApiClient.ajax({
|
||||||
|
@ -16,8 +22,8 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderKeys(page, keys) {
|
function renderKeys(page, keys) {
|
||||||
var rows = keys.map(function (item) {
|
const rows = keys.map(function (item) {
|
||||||
var html = '';
|
let html = '';
|
||||||
html += '<tr class="detailTableBodyRow detailTableBodyRow-shaded">';
|
html += '<tr class="detailTableBodyRow detailTableBodyRow-shaded">';
|
||||||
html += '<td class="detailTableBodyCell">';
|
html += '<td class="detailTableBodyCell">';
|
||||||
html += '<button type="button" is="emby-button" data-token="' + item.AccessToken + '" class="raised raised-mini btnRevoke" data-mini="true" title="' + globalize.translate('ButtonRevoke') + '" style="margin:0;">' + globalize.translate('ButtonRevoke') + '</button>';
|
html += '<button type="button" is="emby-button" data-token="' + item.AccessToken + '" class="raised raised-mini btnRevoke" data-mini="true" title="' + globalize.translate('ButtonRevoke') + '" style="margin:0;">' + globalize.translate('ButtonRevoke') + '</button>';
|
||||||
|
@ -29,7 +35,7 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
|
||||||
html += item.AppName || '';
|
html += item.AppName || '';
|
||||||
html += '</td>';
|
html += '</td>';
|
||||||
html += '<td class="detailTableBodyCell" style="vertical-align:middle;">';
|
html += '<td class="detailTableBodyCell" style="vertical-align:middle;">';
|
||||||
var date = datetime.parseISO8601Date(item.DateCreated, true);
|
const date = datetime.parseISO8601Date(item.DateCreated, true);
|
||||||
html += datetime.toLocaleDateString(date) + ' ' + datetime.getDisplayTime(date);
|
html += datetime.toLocaleDateString(date) + ' ' + datetime.getDisplayTime(date);
|
||||||
html += '</td>';
|
html += '</td>';
|
||||||
return html += '</tr>';
|
return html += '</tr>';
|
||||||
|
@ -46,7 +52,7 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
|
||||||
}
|
}
|
||||||
|
|
||||||
function showNewKeyPrompt(page) {
|
function showNewKeyPrompt(page) {
|
||||||
require(['prompt'], function (prompt) {
|
import('prompt').then(({default: prompt}) => {
|
||||||
prompt({
|
prompt({
|
||||||
title: globalize.translate('HeaderNewApiKey'),
|
title: globalize.translate('HeaderNewApiKey'),
|
||||||
label: globalize.translate('LabelAppName'),
|
label: globalize.translate('LabelAppName'),
|
||||||
|
@ -65,12 +71,12 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
|
||||||
}
|
}
|
||||||
|
|
||||||
pageIdOn('pageinit', 'apiKeysPage', function () {
|
pageIdOn('pageinit', 'apiKeysPage', function () {
|
||||||
var page = this;
|
const page = this;
|
||||||
page.querySelector('.btnNewKey').addEventListener('click', function () {
|
page.querySelector('.btnNewKey').addEventListener('click', function () {
|
||||||
showNewKeyPrompt(page);
|
showNewKeyPrompt(page);
|
||||||
});
|
});
|
||||||
page.querySelector('.tblApiKeys').addEventListener('click', function (e) {
|
page.querySelector('.tblApiKeys').addEventListener('click', function (e) {
|
||||||
var btnRevoke = dom.parentWithClass(e.target, 'btnRevoke');
|
const btnRevoke = dom.parentWithClass(e.target, 'btnRevoke');
|
||||||
|
|
||||||
if (btnRevoke) {
|
if (btnRevoke) {
|
||||||
revoke(page, btnRevoke.getAttribute('data-token'));
|
revoke(page, btnRevoke.getAttribute('data-token'));
|
||||||
|
@ -80,4 +86,5 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
|
||||||
pageIdOn('pagebeforeshow', 'apiKeysPage', function () {
|
pageIdOn('pagebeforeshow', 'apiKeysPage', function () {
|
||||||
loadData(this);
|
loadData(this);
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -1,11 +1,31 @@
|
||||||
define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'loading', 'connectionManager', 'playMethodHelper', 'cardBuilder', 'imageLoader', 'components/activitylog', 'scripts/imagehelper', 'indicators', 'listViewStyle', 'emby-button', 'flexStyles', 'emby-button', 'emby-itemscontainer'], function (datetime, events, itemHelper, serverNotifications, dom, globalize, datefns, dfnshelper, loading, connectionManager, playMethodHelper, cardBuilder, imageLoader, ActivityLog, imageHelper, indicators) {
|
import datetime from 'datetime';
|
||||||
'use strict';
|
import events from 'events';
|
||||||
|
import itemHelper from 'itemHelper';
|
||||||
|
import serverNotifications from 'serverNotifications';
|
||||||
|
import dom from 'dom';
|
||||||
|
import globalize from 'globalize';
|
||||||
|
import * as datefns from 'date-fns';
|
||||||
|
import dfnshelper from 'dfnshelper';
|
||||||
|
import loading from 'loading';
|
||||||
|
import connectionManager from 'connectionManager';
|
||||||
|
import playMethodHelper from 'playMethodHelper';
|
||||||
|
import cardBuilder from 'cardBuilder';
|
||||||
|
import imageLoader from 'imageLoader';
|
||||||
|
import ActivityLog from 'components/activitylog';
|
||||||
|
import imageHelper from 'scripts/imagehelper';
|
||||||
|
import indicators from 'indicators';
|
||||||
|
import 'listViewStyle';
|
||||||
|
import 'emby-button';
|
||||||
|
import 'flexStyles';
|
||||||
|
import 'emby-itemscontainer';
|
||||||
|
|
||||||
|
/* eslint-disable indent */
|
||||||
|
|
||||||
function showPlaybackInfo(btn, session) {
|
function showPlaybackInfo(btn, session) {
|
||||||
require(['alert'], function (alert) {
|
import('alert').then(({default: alert}) => {
|
||||||
var title;
|
let title;
|
||||||
var text = [];
|
let text = [];
|
||||||
var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
|
const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
|
||||||
|
|
||||||
if (displayPlayMethod === 'DirectStream') {
|
if (displayPlayMethod === 'DirectStream') {
|
||||||
title = globalize.translate('DirectStreaming');
|
title = globalize.translate('DirectStreaming');
|
||||||
|
@ -33,7 +53,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
}
|
}
|
||||||
|
|
||||||
function showSendMessageForm(btn, session) {
|
function showSendMessageForm(btn, session) {
|
||||||
require(['prompt'], function (prompt) {
|
import('prompt').then(({default: prompt}) => {
|
||||||
prompt({
|
prompt({
|
||||||
title: globalize.translate('HeaderSendMessage'),
|
title: globalize.translate('HeaderSendMessage'),
|
||||||
label: globalize.translate('LabelMessageText'),
|
label: globalize.translate('LabelMessageText'),
|
||||||
|
@ -50,8 +70,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
}
|
}
|
||||||
|
|
||||||
function showOptionsMenu(btn, session) {
|
function showOptionsMenu(btn, session) {
|
||||||
require(['actionsheet'], function (actionsheet) {
|
import('actionsheet').then(({default: actionsheet}) => {
|
||||||
var menuItems = [];
|
const menuItems = [];
|
||||||
|
|
||||||
if (session.ServerId && session.DeviceId !== connectionManager.deviceId()) {
|
if (session.ServerId && session.DeviceId !== connectionManager.deviceId()) {
|
||||||
menuItems.push({
|
menuItems.push({
|
||||||
|
@ -84,14 +104,14 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
}
|
}
|
||||||
|
|
||||||
function onActiveDevicesClick(evt) {
|
function onActiveDevicesClick(evt) {
|
||||||
var btn = dom.parentWithClass(evt.target, 'sessionCardButton');
|
const btn = dom.parentWithClass(evt.target, 'sessionCardButton');
|
||||||
|
|
||||||
if (btn) {
|
if (btn) {
|
||||||
var card = dom.parentWithClass(btn, 'card');
|
const card = dom.parentWithClass(btn, 'card');
|
||||||
|
|
||||||
if (card) {
|
if (card) {
|
||||||
var sessionId = card.id;
|
const sessionId = card.id;
|
||||||
var session = (DashboardPage.sessionsList || []).filter(function (dashboardSession) {
|
const session = (DashboardPage.sessionsList || []).filter(function (dashboardSession) {
|
||||||
return 'session' + dashboardSession.Id === sessionId;
|
return 'session' + dashboardSession.Id === sessionId;
|
||||||
})[0];
|
})[0];
|
||||||
|
|
||||||
|
@ -113,11 +133,11 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
}
|
}
|
||||||
|
|
||||||
function filterSessions(sessions) {
|
function filterSessions(sessions) {
|
||||||
var list = [];
|
const list = [];
|
||||||
var minActiveDate = new Date().getTime() - 9e5;
|
const minActiveDate = new Date().getTime() - 9e5;
|
||||||
|
|
||||||
for (var i = 0, length = sessions.length; i < length; i++) {
|
for (let i = 0, length = sessions.length; i < length; i++) {
|
||||||
var session = sessions[i];
|
const session = sessions[i];
|
||||||
|
|
||||||
if (!session.NowPlayingItem && !session.UserId) {
|
if (!session.NowPlayingItem && !session.UserId) {
|
||||||
continue;
|
continue;
|
||||||
|
@ -139,7 +159,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
EnableTotalRecordCount: false,
|
EnableTotalRecordCount: false,
|
||||||
EnableImageTypes: 'Primary,Thumb,Backdrop'
|
EnableImageTypes: 'Primary,Thumb,Backdrop'
|
||||||
}).then(function (result) {
|
}).then(function (result) {
|
||||||
var itemsContainer = view.querySelector('.activeRecordingItems');
|
const itemsContainer = view.querySelector('.activeRecordingItems');
|
||||||
|
|
||||||
if (!result.Items.length) {
|
if (!result.Items.length) {
|
||||||
view.querySelector('.activeRecordingsSection').classList.add('hide');
|
view.querySelector('.activeRecordingsSection').classList.add('hide');
|
||||||
|
@ -169,7 +189,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
function reloadSystemInfo(view, apiClient) {
|
function reloadSystemInfo(view, apiClient) {
|
||||||
apiClient.getSystemInfo().then(function (systemInfo) {
|
apiClient.getSystemInfo().then(function (systemInfo) {
|
||||||
view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName);
|
view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName);
|
||||||
var localizedVersion = globalize.translate('DashboardVersionNumber', systemInfo.Version);
|
let localizedVersion = globalize.translate('DashboardVersionNumber', systemInfo.Version);
|
||||||
|
|
||||||
if (systemInfo.SystemUpdateLevel !== 'Release') {
|
if (systemInfo.SystemUpdateLevel !== 'Release') {
|
||||||
localizedVersion += ' ' + systemInfo.SystemUpdateLevel;
|
localizedVersion += ' ' + systemInfo.SystemUpdateLevel;
|
||||||
|
@ -205,31 +225,31 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderActiveConnections(view, sessions) {
|
function renderActiveConnections(view, sessions) {
|
||||||
var html = '';
|
let html = '';
|
||||||
DashboardPage.sessionsList = sessions;
|
DashboardPage.sessionsList = sessions;
|
||||||
var parentElement = view.querySelector('.activeDevices');
|
const parentElement = view.querySelector('.activeDevices');
|
||||||
var cardElem = parentElement.querySelector('.card');
|
const cardElem = parentElement.querySelector('.card');
|
||||||
|
|
||||||
if (cardElem) {
|
if (cardElem) {
|
||||||
cardElem.classList.add('deadSession');
|
cardElem.classList.add('deadSession');
|
||||||
}
|
}
|
||||||
|
|
||||||
for (var i = 0, length = sessions.length; i < length; i++) {
|
for (let i = 0, length = sessions.length; i < length; i++) {
|
||||||
var session = sessions[i];
|
const session = sessions[i];
|
||||||
var rowId = 'session' + session.Id;
|
const rowId = 'session' + session.Id;
|
||||||
var elem = view.querySelector('#' + rowId);
|
const elem = view.querySelector('#' + rowId);
|
||||||
|
|
||||||
if (elem) {
|
if (elem) {
|
||||||
DashboardPage.updateSession(elem, session);
|
DashboardPage.updateSession(elem, session);
|
||||||
} else {
|
} else {
|
||||||
var nowPlayingItem = session.NowPlayingItem;
|
const nowPlayingItem = session.NowPlayingItem;
|
||||||
var className = 'scalableCard card activeSession backdropCard backdropCard-scalable';
|
const className = 'scalableCard card activeSession backdropCard backdropCard-scalable';
|
||||||
html += '<div class="' + className + '" id="' + rowId + '">';
|
html += '<div class="' + className + '" id="' + rowId + '">';
|
||||||
html += '<div class="cardBox visualCardBox">';
|
html += '<div class="cardBox visualCardBox">';
|
||||||
html += '<div class="cardScalable visualCardBox-cardScalable">';
|
html += '<div class="cardScalable visualCardBox-cardScalable">';
|
||||||
html += '<div class="cardPadder cardPadder-backdrop"></div>';
|
html += '<div class="cardPadder cardPadder-backdrop"></div>';
|
||||||
html += '<div class="cardContent">';
|
html += '<div class="cardContent">';
|
||||||
var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
|
const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
|
||||||
|
|
||||||
if (imgUrl) {
|
if (imgUrl) {
|
||||||
html += '<div class="sessionNowPlayingContent sessionNowPlayingContent-withbackground"';
|
html += '<div class="sessionNowPlayingContent sessionNowPlayingContent-withbackground"';
|
||||||
|
@ -240,7 +260,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
|
|
||||||
html += '<div class="sessionNowPlayingInnerContent">';
|
html += '<div class="sessionNowPlayingInnerContent">';
|
||||||
html += '<div class="sessionAppInfo">';
|
html += '<div class="sessionAppInfo">';
|
||||||
var clientImage = DashboardPage.getClientImage(session);
|
const clientImage = DashboardPage.getClientImage(session);
|
||||||
|
|
||||||
if (clientImage) {
|
if (clientImage) {
|
||||||
html += clientImage;
|
html += clientImage;
|
||||||
|
@ -253,7 +273,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '<div class="sessionNowPlayingDetails">';
|
html += '<div class="sessionNowPlayingDetails">';
|
||||||
var nowPlayingName = DashboardPage.getNowPlayingName(session);
|
const nowPlayingName = DashboardPage.getNowPlayingName(session);
|
||||||
html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">';
|
html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">';
|
||||||
html += nowPlayingName.html;
|
html += nowPlayingName.html;
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
@ -261,7 +281,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
|
if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
|
||||||
var percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
|
const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
|
||||||
html += indicators.getProgressHtml(percent, {
|
html += indicators.getProgressHtml(percent, {
|
||||||
containerClass: 'playbackProgress'
|
containerClass: 'playbackProgress'
|
||||||
});
|
});
|
||||||
|
@ -273,7 +293,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
}
|
}
|
||||||
|
|
||||||
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
|
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
|
||||||
var percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
|
const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
|
||||||
html += indicators.getProgressHtml(percent, {
|
html += indicators.getProgressHtml(percent, {
|
||||||
containerClass: 'transcodingProgress'
|
containerClass: 'transcodingProgress'
|
||||||
});
|
});
|
||||||
|
@ -290,7 +310,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
html += '<div class="sessionCardFooter cardFooter">';
|
html += '<div class="sessionCardFooter cardFooter">';
|
||||||
html += '<div class="sessionCardButtons flex align-items-center justify-content-center">';
|
html += '<div class="sessionCardButtons flex align-items-center justify-content-center">';
|
||||||
|
|
||||||
var btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? '' : ' hide';
|
let btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? '' : ' hide';
|
||||||
const playIcon = session.PlayState.IsPaused ? 'pause' : 'play_arrow';
|
const playIcon = session.PlayState.IsPaused ? 'pause' : 'play_arrow';
|
||||||
|
|
||||||
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><span class="material-icons ' + playIcon + '"></span></button>';
|
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><span class="material-icons ' + playIcon + '"></span></button>';
|
||||||
|
@ -308,7 +328,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '<div class="flex align-items-center justify-content-center">';
|
html += '<div class="flex align-items-center justify-content-center">';
|
||||||
var userImage = DashboardPage.getUserImage(session);
|
const userImage = DashboardPage.getUserImage(session);
|
||||||
html += userImage ? '<div class="activitylogUserPhoto" style="background-image:url(\'' + userImage + "');\"></div>" : '<div style="height:1.71em;"></div>';
|
html += userImage ? '<div class="activitylogUserPhoto" style="background-image:url(\'' + userImage + "');\"></div>" : '<div style="height:1.71em;"></div>';
|
||||||
html += '<div class="sessionUserName">';
|
html += '<div class="sessionUserName">';
|
||||||
html += DashboardPage.getUsersHtml(session);
|
html += DashboardPage.getUsersHtml(session);
|
||||||
|
@ -322,7 +342,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
}
|
}
|
||||||
|
|
||||||
parentElement.insertAdjacentHTML('beforeend', html);
|
parentElement.insertAdjacentHTML('beforeend', html);
|
||||||
var deadSessionElem = parentElement.querySelector('.deadSession');
|
const deadSessionElem = parentElement.querySelector('.deadSession');
|
||||||
|
|
||||||
if (deadSessionElem) {
|
if (deadSessionElem) {
|
||||||
deadSessionElem.parentNode.removeChild(deadSessionElem);
|
deadSessionElem.parentNode.removeChild(deadSessionElem);
|
||||||
|
@ -330,7 +350,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderRunningTasks(view, tasks) {
|
function renderRunningTasks(view, tasks) {
|
||||||
var html = '';
|
let html = '';
|
||||||
tasks = tasks.filter(function (task) {
|
tasks = tasks.filter(function (task) {
|
||||||
if ('Idle' != task.State) {
|
if ('Idle' != task.State) {
|
||||||
return !task.IsHidden;
|
return !task.IsHidden;
|
||||||
|
@ -345,13 +365,13 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
view.querySelector('.runningTasksContainer').classList.add('hide');
|
view.querySelector('.runningTasksContainer').classList.add('hide');
|
||||||
}
|
}
|
||||||
|
|
||||||
for (var i = 0, length = tasks.length; i < length; i++) {
|
for (let i = 0, length = tasks.length; i < length; i++) {
|
||||||
var task = tasks[i];
|
const task = tasks[i];
|
||||||
html += '<p>';
|
html += '<p>';
|
||||||
html += task.Name + '<br/>';
|
html += task.Name + '<br/>';
|
||||||
|
|
||||||
if (task.State === 'Running') {
|
if (task.State === 'Running') {
|
||||||
var progress = (task.CurrentProgressPercentage || 0).toFixed(1);
|
const progress = (task.CurrentProgressPercentage || 0).toFixed(1);
|
||||||
html += '<progress max="100" value="' + progress + '" title="' + progress + '%">';
|
html += '<progress max="100" value="' + progress + '" title="' + progress + '%">';
|
||||||
html += progress + '%';
|
html += progress + '%';
|
||||||
html += '</progress>';
|
html += '</progress>';
|
||||||
|
@ -377,9 +397,9 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
apiClient.sendMessage('ScheduledTasksInfoStop');
|
apiClient.sendMessage('ScheduledTasksInfoStop');
|
||||||
},
|
},
|
||||||
getSessionNowPlayingStreamInfo: function (session) {
|
getSessionNowPlayingStreamInfo: function (session) {
|
||||||
var html = '';
|
let html = '';
|
||||||
var showTranscodingInfo = false;
|
let showTranscodingInfo = false;
|
||||||
var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
|
const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
|
||||||
|
|
||||||
if (displayPlayMethod === 'DirectStream') {
|
if (displayPlayMethod === 'DirectStream') {
|
||||||
html += globalize.translate('DirectStreaming');
|
html += globalize.translate('DirectStreaming');
|
||||||
|
@ -396,7 +416,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
}
|
}
|
||||||
|
|
||||||
if (showTranscodingInfo) {
|
if (showTranscodingInfo) {
|
||||||
var line = [];
|
const line = [];
|
||||||
|
|
||||||
if (session.TranscodingInfo) {
|
if (session.TranscodingInfo) {
|
||||||
if (session.TranscodingInfo.Bitrate) {
|
if (session.TranscodingInfo.Bitrate) {
|
||||||
|
@ -428,8 +448,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
return html;
|
return html;
|
||||||
},
|
},
|
||||||
getSessionNowPlayingTime: function (session) {
|
getSessionNowPlayingTime: function (session) {
|
||||||
var nowPlayingItem = session.NowPlayingItem;
|
const nowPlayingItem = session.NowPlayingItem;
|
||||||
var html = '';
|
let html = '';
|
||||||
|
|
||||||
if (nowPlayingItem) {
|
if (nowPlayingItem) {
|
||||||
if (session.PlayState.PositionTicks) {
|
if (session.PlayState.PositionTicks) {
|
||||||
|
@ -453,8 +473,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
return session.Client + ' ' + session.ApplicationVersion;
|
return session.Client + ' ' + session.ApplicationVersion;
|
||||||
},
|
},
|
||||||
getNowPlayingName: function (session) {
|
getNowPlayingName: function (session) {
|
||||||
var imgUrl = '';
|
let imgUrl = '';
|
||||||
var nowPlayingItem = session.NowPlayingItem;
|
const nowPlayingItem = session.NowPlayingItem;
|
||||||
// FIXME: It seems that, sometimes, server sends date in the future, so date-fns displays messages like 'in less than a minute'. We should fix
|
// FIXME: It seems that, sometimes, server sends date in the future, so date-fns displays messages like 'in less than a minute'. We should fix
|
||||||
// how dates are returned by the server when the session is active and show something like 'Active now', instead of past/future sentences
|
// how dates are returned by the server when the session is active and show something like 'Active now', instead of past/future sentences
|
||||||
if (!nowPlayingItem) {
|
if (!nowPlayingItem) {
|
||||||
|
@ -464,8 +484,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
var topText = itemHelper.getDisplayName(nowPlayingItem);
|
let topText = itemHelper.getDisplayName(nowPlayingItem);
|
||||||
var bottomText = '';
|
let bottomText = '';
|
||||||
|
|
||||||
if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
|
if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
|
||||||
bottomText = topText;
|
bottomText = topText;
|
||||||
|
@ -505,13 +525,13 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
getUsersHtml: function (session) {
|
getUsersHtml: function (session) {
|
||||||
var html = [];
|
const html = [];
|
||||||
|
|
||||||
if (session.UserId) {
|
if (session.UserId) {
|
||||||
html.push(session.UserName);
|
html.push(session.UserName);
|
||||||
}
|
}
|
||||||
|
|
||||||
for (var i = 0, length = session.AdditionalUsers.length; i < length; i++) {
|
for (let i = 0, length = session.AdditionalUsers.length; i < length; i++) {
|
||||||
html.push(session.AdditionalUsers[i].UserName);
|
html.push(session.AdditionalUsers[i].UserName);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -529,7 +549,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
},
|
},
|
||||||
updateSession: function (row, session) {
|
updateSession: function (row, session) {
|
||||||
row.classList.remove('deadSession');
|
row.classList.remove('deadSession');
|
||||||
var nowPlayingItem = session.NowPlayingItem;
|
const nowPlayingItem = session.NowPlayingItem;
|
||||||
|
|
||||||
if (nowPlayingItem) {
|
if (nowPlayingItem) {
|
||||||
row.classList.add('playingSession');
|
row.classList.add('playingSession');
|
||||||
|
@ -549,7 +569,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
row.querySelector('.btnSessionInfo').classList.add('hide');
|
row.querySelector('.btnSessionInfo').classList.add('hide');
|
||||||
}
|
}
|
||||||
|
|
||||||
var btnSessionPlayPause = row.querySelector('.btnSessionPlayPause');
|
const btnSessionPlayPause = row.querySelector('.btnSessionPlayPause');
|
||||||
|
|
||||||
if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== connectionManager.deviceId()) {
|
if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== connectionManager.deviceId()) {
|
||||||
btnSessionPlayPause.classList.remove('hide');
|
btnSessionPlayPause.classList.remove('hide');
|
||||||
|
@ -567,18 +587,18 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
row.querySelector('.sessionNowPlayingTime').innerHTML = DashboardPage.getSessionNowPlayingTime(session);
|
row.querySelector('.sessionNowPlayingTime').innerHTML = DashboardPage.getSessionNowPlayingTime(session);
|
||||||
row.querySelector('.sessionUserName').innerHTML = DashboardPage.getUsersHtml(session);
|
row.querySelector('.sessionUserName').innerHTML = DashboardPage.getUsersHtml(session);
|
||||||
row.querySelector('.sessionAppSecondaryText').innerHTML = DashboardPage.getAppSecondaryText(session);
|
row.querySelector('.sessionAppSecondaryText').innerHTML = DashboardPage.getAppSecondaryText(session);
|
||||||
var nowPlayingName = DashboardPage.getNowPlayingName(session);
|
const nowPlayingName = DashboardPage.getNowPlayingName(session);
|
||||||
var nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo');
|
const nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo');
|
||||||
|
|
||||||
if (!(nowPlayingName.image && nowPlayingName.image == nowPlayingInfoElem.getAttribute('data-imgsrc'))) {
|
if (!(nowPlayingName.image && nowPlayingName.image == nowPlayingInfoElem.getAttribute('data-imgsrc'))) {
|
||||||
nowPlayingInfoElem.innerHTML = nowPlayingName.html;
|
nowPlayingInfoElem.innerHTML = nowPlayingName.html;
|
||||||
nowPlayingInfoElem.setAttribute('data-imgsrc', nowPlayingName.image || '');
|
nowPlayingInfoElem.setAttribute('data-imgsrc', nowPlayingName.image || '');
|
||||||
}
|
}
|
||||||
|
|
||||||
var playbackProgressElem = row.querySelector('.playbackProgress');
|
const playbackProgressElem = row.querySelector('.playbackProgress');
|
||||||
|
|
||||||
if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
|
if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
|
||||||
var percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
|
const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
|
||||||
playbackProgressElem.outerHTML = indicators.getProgressHtml(percent, {
|
playbackProgressElem.outerHTML = indicators.getProgressHtml(percent, {
|
||||||
containerClass: 'playbackProgress'
|
containerClass: 'playbackProgress'
|
||||||
});
|
});
|
||||||
|
@ -588,10 +608,10 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
var transcodingProgress = row.querySelector('.transcodingProgress');
|
const transcodingProgress = row.querySelector('.transcodingProgress');
|
||||||
|
|
||||||
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
|
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
|
||||||
var percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
|
const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
|
||||||
transcodingProgress.outerHTML = indicators.getProgressHtml(percent, {
|
transcodingProgress.outerHTML = indicators.getProgressHtml(percent, {
|
||||||
containerClass: 'transcodingProgress'
|
containerClass: 'transcodingProgress'
|
||||||
});
|
});
|
||||||
|
@ -601,8 +621,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';
|
const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';
|
||||||
var imgElem = row.querySelector('.sessionNowPlayingContent');
|
const imgElem = row.querySelector('.sessionNowPlayingContent');
|
||||||
|
|
||||||
if (imgUrl != imgElem.getAttribute('data-src')) {
|
if (imgUrl != imgElem.getAttribute('data-src')) {
|
||||||
imgElem.style.backgroundImage = imgUrl ? "url('" + imgUrl + "')" : '';
|
imgElem.style.backgroundImage = imgUrl ? "url('" + imgUrl + "')" : '';
|
||||||
|
@ -616,7 +636,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getClientImage: function (connection) {
|
getClientImage: function (connection) {
|
||||||
var iconUrl = imageHelper.getDeviceIcon(connection);
|
const iconUrl = imageHelper.getDeviceIcon(connection);
|
||||||
return "<img src='" + iconUrl + "' />";
|
return "<img src='" + iconUrl + "' />";
|
||||||
},
|
},
|
||||||
getNowPlayingImageUrl: function (item) {
|
getNowPlayingImageUrl: function (item) {
|
||||||
|
@ -646,7 +666,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
var imageTags = (item || {}).ImageTags || {};
|
const imageTags = (item || {}).ImageTags || {};
|
||||||
|
|
||||||
if (item && imageTags.Thumb) {
|
if (item && imageTags.Thumb) {
|
||||||
return ApiClient.getScaledImageUrl(item.Id, {
|
return ApiClient.getScaledImageUrl(item.Id, {
|
||||||
|
@ -700,20 +720,20 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
},
|
},
|
||||||
systemUpdateTaskKey: 'SystemUpdateTask',
|
systemUpdateTaskKey: 'SystemUpdateTask',
|
||||||
stopTask: function (btn, id) {
|
stopTask: function (btn, id) {
|
||||||
var page = dom.parentWithClass(btn, 'page');
|
const page = dom.parentWithClass(btn, 'page');
|
||||||
ApiClient.stopScheduledTask(id).then(function () {
|
ApiClient.stopScheduledTask(id).then(function () {
|
||||||
pollForInfo(page, ApiClient);
|
pollForInfo(page, ApiClient);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
restart: function (btn) {
|
restart: function (btn) {
|
||||||
require(['confirm'], function (confirm) {
|
import('confirm').then(({default: confirm}) => {
|
||||||
confirm({
|
confirm({
|
||||||
title: globalize.translate('HeaderRestart'),
|
title: globalize.translate('HeaderRestart'),
|
||||||
text: globalize.translate('MessageConfirmRestart'),
|
text: globalize.translate('MessageConfirmRestart'),
|
||||||
confirmText: globalize.translate('ButtonRestart'),
|
confirmText: globalize.translate('ButtonRestart'),
|
||||||
primary: 'delete'
|
primary: 'delete'
|
||||||
}).then(function () {
|
}).then(function () {
|
||||||
var page = dom.parentWithClass(btn, 'page');
|
const page = dom.parentWithClass(btn, 'page');
|
||||||
page.querySelector('#btnRestartServer').disabled = true;
|
page.querySelector('#btnRestartServer').disabled = true;
|
||||||
page.querySelector('#btnShutdown').disabled = true;
|
page.querySelector('#btnShutdown').disabled = true;
|
||||||
ApiClient.restartServer();
|
ApiClient.restartServer();
|
||||||
|
@ -721,14 +741,14 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
shutdown: function (btn) {
|
shutdown: function (btn) {
|
||||||
require(['confirm'], function (confirm) {
|
import('confirm').then(({default: confirm}) => {
|
||||||
confirm({
|
confirm({
|
||||||
title: globalize.translate('HeaderShutdown'),
|
title: globalize.translate('HeaderShutdown'),
|
||||||
text: globalize.translate('MessageConfirmShutdown'),
|
text: globalize.translate('MessageConfirmShutdown'),
|
||||||
confirmText: globalize.translate('ButtonShutdown'),
|
confirmText: globalize.translate('ButtonShutdown'),
|
||||||
primary: 'delete'
|
primary: 'delete'
|
||||||
}).then(function () {
|
}).then(function () {
|
||||||
var page = dom.parentWithClass(btn, 'page');
|
const page = dom.parentWithClass(btn, 'page');
|
||||||
page.querySelector('#btnRestartServer').disabled = true;
|
page.querySelector('#btnRestartServer').disabled = true;
|
||||||
page.querySelector('#btnShutdown').disabled = true;
|
page.querySelector('#btnShutdown').disabled = true;
|
||||||
ApiClient.shutdownServer();
|
ApiClient.shutdownServer();
|
||||||
|
@ -736,7 +756,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
return function (view, params) {
|
export default function (view, params) {
|
||||||
function onRestartRequired(evt, apiClient) {
|
function onRestartRequired(evt, apiClient) {
|
||||||
console.debug('onRestartRequired not implemented', evt, apiClient);
|
console.debug('onRestartRequired not implemented', evt, apiClient);
|
||||||
}
|
}
|
||||||
|
@ -775,11 +795,11 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var serverId = ApiClient.serverId();
|
const serverId = ApiClient.serverId();
|
||||||
view.querySelector('.activeDevices').addEventListener('click', onActiveDevicesClick);
|
view.querySelector('.activeDevices').addEventListener('click', onActiveDevicesClick);
|
||||||
view.addEventListener('viewshow', function () {
|
view.addEventListener('viewshow', function () {
|
||||||
var page = this;
|
const page = this;
|
||||||
var apiClient = ApiClient;
|
const apiClient = ApiClient;
|
||||||
|
|
||||||
if (apiClient) {
|
if (apiClient) {
|
||||||
loading.show();
|
loading.show();
|
||||||
|
@ -816,7 +836,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
view.addEventListener('viewbeforehide', function () {
|
view.addEventListener('viewbeforehide', function () {
|
||||||
var apiClient = ApiClient;
|
const apiClient = ApiClient;
|
||||||
events.off(serverNotifications, 'RestartRequired', onRestartRequired);
|
events.off(serverNotifications, 'RestartRequired', onRestartRequired);
|
||||||
events.off(serverNotifications, 'ServerShuttingDown', onServerShuttingDown);
|
events.off(serverNotifications, 'ServerShuttingDown', onServerShuttingDown);
|
||||||
events.off(serverNotifications, 'ServerRestarting', onServerRestarting);
|
events.off(serverNotifications, 'ServerRestarting', onServerRestarting);
|
||||||
|
@ -830,18 +850,19 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
view.addEventListener('viewdestroy', function () {
|
view.addEventListener('viewdestroy', function () {
|
||||||
var page = this;
|
const page = this;
|
||||||
var userActivityLog = page.userActivityLog;
|
const userActivityLog = page.userActivityLog;
|
||||||
|
|
||||||
if (userActivityLog) {
|
if (userActivityLog) {
|
||||||
userActivityLog.destroy();
|
userActivityLog.destroy();
|
||||||
}
|
}
|
||||||
|
|
||||||
var serverActivityLog = page.serverActivityLog;
|
const serverActivityLog = page.serverActivityLog;
|
||||||
|
|
||||||
if (serverActivityLog) {
|
if (serverActivityLog) {
|
||||||
serverActivityLog.destroy();
|
serverActivityLog.destroy();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -1,5 +1,10 @@
|
||||||
define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, loading, globalize, dom, libraryMenu) {
|
import $ from 'jQuery';
|
||||||
'use strict';
|
import loading from 'loading';
|
||||||
|
import globalize from 'globalize';
|
||||||
|
import dom from 'dom';
|
||||||
|
import libraryMenu from 'libraryMenu';
|
||||||
|
|
||||||
|
/* eslint-disable indent */
|
||||||
|
|
||||||
function loadPage(page, config, systemInfo) {
|
function loadPage(page, config, systemInfo) {
|
||||||
Array.prototype.forEach.call(page.querySelectorAll('.chkDecodeCodec'), function (c) {
|
Array.prototype.forEach.call(page.querySelectorAll('.chkDecodeCodec'), function (c) {
|
||||||
|
@ -27,10 +32,10 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
|
||||||
|
|
||||||
function onSaveEncodingPathFailure(response) {
|
function onSaveEncodingPathFailure(response) {
|
||||||
loading.hide();
|
loading.hide();
|
||||||
var msg = '';
|
let msg = '';
|
||||||
msg = globalize.translate('FFmpegSavePathNotFound');
|
msg = globalize.translate('FFmpegSavePathNotFound');
|
||||||
|
|
||||||
require(['alert'], function (alert) {
|
import('alert').then(({default: alert}) => {
|
||||||
alert(msg);
|
alert(msg);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -49,9 +54,9 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSubmit() {
|
function onSubmit() {
|
||||||
var form = this;
|
const form = this;
|
||||||
|
|
||||||
var onDecoderConfirmed = function () {
|
const onDecoderConfirmed = function () {
|
||||||
loading.show();
|
loading.show();
|
||||||
ApiClient.getNamedConfiguration('encoding').then(function (config) {
|
ApiClient.getNamedConfiguration('encoding').then(function (config) {
|
||||||
config.DownMixAudioBoost = $('#txtDownMixAudioBoost', form).val();
|
config.DownMixAudioBoost = $('#txtDownMixAudioBoost', form).val();
|
||||||
|
@ -75,7 +80,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
|
||||||
ApiClient.updateNamedConfiguration('encoding', config).then(function () {
|
ApiClient.updateNamedConfiguration('encoding', config).then(function () {
|
||||||
updateEncoder(form);
|
updateEncoder(form);
|
||||||
}, function () {
|
}, function () {
|
||||||
require(['alert'], function (alert) {
|
import('alert').then(({default: alert}) => {
|
||||||
alert(globalize.translate('DefaultErrorMessage'));
|
alert(globalize.translate('DefaultErrorMessage'));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -85,7 +90,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
|
||||||
};
|
};
|
||||||
|
|
||||||
if ($('#selectVideoDecoder', form).val()) {
|
if ($('#selectVideoDecoder', form).val()) {
|
||||||
require(['alert'], function (alert) {
|
import('alert').then(({default: alert}) => {
|
||||||
alert({
|
alert({
|
||||||
title: globalize.translate('TitleHardwareAcceleration'),
|
title: globalize.translate('TitleHardwareAcceleration'),
|
||||||
text: globalize.translate('HardwareAccelerationWarning')
|
text: globalize.translate('HardwareAccelerationWarning')
|
||||||
|
@ -100,7 +105,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
|
||||||
|
|
||||||
function setDecodingCodecsVisible(context, value) {
|
function setDecodingCodecsVisible(context, value) {
|
||||||
value = value || '';
|
value = value || '';
|
||||||
var any;
|
let any;
|
||||||
Array.prototype.forEach.call(context.querySelectorAll('.chkDecodeCodec'), function (c) {
|
Array.prototype.forEach.call(context.querySelectorAll('.chkDecodeCodec'), function (c) {
|
||||||
if (-1 === c.getAttribute('data-types').split(',').indexOf(value)) {
|
if (-1 === c.getAttribute('data-types').split(',').indexOf(value)) {
|
||||||
dom.parentWithTag(c, 'LABEL').classList.add('hide');
|
dom.parentWithTag(c, 'LABEL').classList.add('hide');
|
||||||
|
@ -131,7 +136,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).on('pageinit', '#encodingSettingsPage', function () {
|
$(document).on('pageinit', '#encodingSettingsPage', function () {
|
||||||
var page = this;
|
const page = this;
|
||||||
page.querySelector('#selectVideoDecoder').addEventListener('change', function () {
|
page.querySelector('#selectVideoDecoder').addEventListener('change', function () {
|
||||||
if ('vaapi' == this.value) {
|
if ('vaapi' == this.value) {
|
||||||
page.querySelector('.fldVaapiDevice').classList.remove('hide');
|
page.querySelector('.fldVaapiDevice').classList.remove('hide');
|
||||||
|
@ -150,8 +155,8 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
|
||||||
setDecodingCodecsVisible(page, this.value);
|
setDecodingCodecsVisible(page, this.value);
|
||||||
});
|
});
|
||||||
$('#btnSelectEncoderPath', page).on('click.selectDirectory', function () {
|
$('#btnSelectEncoderPath', page).on('click.selectDirectory', function () {
|
||||||
require(['directorybrowser'], function (directoryBrowser) {
|
import('directorybrowser').then(({default: directoryBrowser}) => {
|
||||||
var picker = new directoryBrowser.default();
|
const picker = new directoryBrowser();
|
||||||
picker.show({
|
picker.show({
|
||||||
includeFiles: true,
|
includeFiles: true,
|
||||||
callback: function (path) {
|
callback: function (path) {
|
||||||
|
@ -165,8 +170,8 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
$('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () {
|
$('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () {
|
||||||
require(['directorybrowser'], function (directoryBrowser) {
|
import('directorybrowser').then(({default: directoryBrowser}) => {
|
||||||
var picker = new directoryBrowser.default();
|
const picker = new directoryBrowser();
|
||||||
picker.show({
|
picker.show({
|
||||||
callback: function (path) {
|
callback: function (path) {
|
||||||
if (path) {
|
if (path) {
|
||||||
|
@ -185,11 +190,12 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
|
||||||
}).on('pageshow', '#encodingSettingsPage', function () {
|
}).on('pageshow', '#encodingSettingsPage', function () {
|
||||||
loading.show();
|
loading.show();
|
||||||
libraryMenu.setTabs('playback', 0, getTabs);
|
libraryMenu.setTabs('playback', 0, getTabs);
|
||||||
var page = this;
|
const page = this;
|
||||||
ApiClient.getNamedConfiguration('encoding').then(function (config) {
|
ApiClient.getNamedConfiguration('encoding').then(function (config) {
|
||||||
ApiClient.getSystemInfo().then(function (systemInfo) {
|
ApiClient.getSystemInfo().then(function (systemInfo) {
|
||||||
loadPage(page, config, systemInfo);
|
loadPage(page, config, systemInfo);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -462,7 +462,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
|
||||||
if (dom.getWindowSize().innerWidth >= 1000) {
|
if (dom.getWindowSize().innerWidth >= 1000) {
|
||||||
backdrop.setBackdrops([item]);
|
backdrop.setBackdrops([item]);
|
||||||
} else {
|
} else {
|
||||||
backdrop.clear();
|
backdrop.clearBackdrop();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,16 +1,21 @@
|
||||||
define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby-button'], function (connectionManager, serverNotifications, events, globalize, EmbyButtonPrototype) {
|
import connectionManager from 'connectionManager';
|
||||||
'use strict';
|
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) {
|
function addNotificationEvent(instance, name, handler) {
|
||||||
|
|
||||||
var localHandler = handler.bind(instance);
|
const localHandler = handler.bind(instance);
|
||||||
events.on(serverNotifications, name, localHandler);
|
events.on(serverNotifications, name, localHandler);
|
||||||
instance[name] = localHandler;
|
instance[name] = localHandler;
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeNotificationEvent(instance, name) {
|
function removeNotificationEvent(instance, name) {
|
||||||
|
|
||||||
var handler = instance[name];
|
const handler = instance[name];
|
||||||
if (handler) {
|
if (handler) {
|
||||||
events.off(serverNotifications, name, handler);
|
events.off(serverNotifications, name, handler);
|
||||||
instance[name] = null;
|
instance[name] = null;
|
||||||
|
@ -24,13 +29,13 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
|
||||||
|
|
||||||
function onClick(e) {
|
function onClick(e) {
|
||||||
|
|
||||||
var button = this;
|
const button = this;
|
||||||
var id = button.getAttribute('data-id');
|
const id = button.getAttribute('data-id');
|
||||||
var serverId = button.getAttribute('data-serverid');
|
const serverId = button.getAttribute('data-serverid');
|
||||||
var apiClient = connectionManager.getApiClient(serverId);
|
const apiClient = connectionManager.getApiClient(serverId);
|
||||||
|
|
||||||
var likes = this.getAttribute('data-likes');
|
let likes = this.getAttribute('data-likes');
|
||||||
var isFavorite = this.getAttribute('data-isfavorite') === 'true';
|
const isFavorite = this.getAttribute('data-isfavorite') === 'true';
|
||||||
if (likes === 'true') {
|
if (likes === 'true') {
|
||||||
likes = true;
|
likes = true;
|
||||||
} else if (likes === 'false') {
|
} else if (likes === 'false') {
|
||||||
|
@ -47,7 +52,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
|
||||||
|
|
||||||
function onUserDataChanged(e, apiClient, userData) {
|
function onUserDataChanged(e, apiClient, userData) {
|
||||||
|
|
||||||
var button = this;
|
const button = this;
|
||||||
|
|
||||||
if (userData.ItemId === button.getAttribute('data-id')) {
|
if (userData.ItemId === button.getAttribute('data-id')) {
|
||||||
|
|
||||||
|
@ -57,7 +62,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
|
||||||
|
|
||||||
function setState(button, likes, isFavorite, updateAttribute) {
|
function setState(button, likes, isFavorite, updateAttribute) {
|
||||||
|
|
||||||
var icon = button.querySelector('.material-icons');
|
const icon = button.querySelector('.material-icons');
|
||||||
|
|
||||||
if (isFavorite) {
|
if (isFavorite) {
|
||||||
|
|
||||||
|
@ -106,7 +111,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
|
||||||
function setTitle(button) {
|
function setTitle(button) {
|
||||||
button.title = globalize.translate('Favorite');
|
button.title = globalize.translate('Favorite');
|
||||||
|
|
||||||
var text = button.querySelector('.button-text');
|
const text = button.querySelector('.button-text');
|
||||||
if (text) {
|
if (text) {
|
||||||
text.innerHTML = button.title;
|
text.innerHTML = button.title;
|
||||||
}
|
}
|
||||||
|
@ -126,7 +131,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
|
||||||
addNotificationEvent(button, 'UserDataChanged', onUserDataChanged);
|
addNotificationEvent(button, 'UserDataChanged', onUserDataChanged);
|
||||||
}
|
}
|
||||||
|
|
||||||
var EmbyRatingButtonPrototype = Object.create(EmbyButtonPrototype);
|
const EmbyRatingButtonPrototype = Object.create(EmbyButtonPrototype);
|
||||||
|
|
||||||
EmbyRatingButtonPrototype.createdCallback = function () {
|
EmbyRatingButtonPrototype.createdCallback = function () {
|
||||||
|
|
||||||
|
@ -143,12 +148,12 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
|
||||||
EmbyButtonPrototype.attachedCallback.call(this);
|
EmbyButtonPrototype.attachedCallback.call(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
var itemId = this.getAttribute('data-id');
|
const itemId = this.getAttribute('data-id');
|
||||||
var serverId = this.getAttribute('data-serverid');
|
const serverId = this.getAttribute('data-serverid');
|
||||||
if (itemId && serverId) {
|
if (itemId && serverId) {
|
||||||
|
|
||||||
var likes = this.getAttribute('data-likes');
|
let likes = this.getAttribute('data-likes');
|
||||||
var isFavorite = this.getAttribute('data-isfavorite') === 'true';
|
const isFavorite = this.getAttribute('data-isfavorite') === 'true';
|
||||||
if (likes === 'true') {
|
if (likes === 'true') {
|
||||||
likes = true;
|
likes = true;
|
||||||
} else if (likes === 'false') {
|
} else if (likes === 'false') {
|
||||||
|
@ -181,7 +186,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
|
||||||
this.setAttribute('data-id', item.Id);
|
this.setAttribute('data-id', item.Id);
|
||||||
this.setAttribute('data-serverid', item.ServerId);
|
this.setAttribute('data-serverid', item.ServerId);
|
||||||
|
|
||||||
var userData = item.UserData || {};
|
const userData = item.UserData || {};
|
||||||
setState(this, userData.Likes, userData.IsFavorite);
|
setState(this, userData.Likes, userData.IsFavorite);
|
||||||
bindEvents(this);
|
bindEvents(this);
|
||||||
|
|
||||||
|
@ -199,4 +204,5 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
|
||||||
prototype: EmbyRatingButtonPrototype,
|
prototype: EmbyRatingButtonPrototype,
|
||||||
extends: 'button'
|
extends: 'button'
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -1,13 +1,18 @@
|
||||||
define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', 'paper-icon-button-light'], function (layoutManager, dom) {
|
import layoutManager from 'layoutManager';
|
||||||
'use strict';
|
import dom from 'dom';
|
||||||
|
import 'css!./emby-scrollbuttons';
|
||||||
|
import 'registerElement';
|
||||||
|
import 'paper-icon-button-light';
|
||||||
|
|
||||||
var EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
|
/* eslint-disable indent */
|
||||||
|
|
||||||
|
const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
|
||||||
|
|
||||||
EmbyScrollButtonsPrototype.createdCallback = function () {};
|
EmbyScrollButtonsPrototype.createdCallback = function () {};
|
||||||
|
|
||||||
function getScrollButtonHtml(direction) {
|
function getScrollButtonHtml(direction) {
|
||||||
var html = '';
|
let html = '';
|
||||||
var icon = direction === 'left' ? 'chevron_left' : 'chevron_right';
|
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 += '<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>';
|
html += '<span class="material-icons ' + icon + '"></span>';
|
||||||
|
@ -45,7 +50,7 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
|
||||||
scrollButtons.scrollButtonsLeft.disabled = true;
|
scrollButtons.scrollButtonsLeft.disabled = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
var scrollPosEnd = scrollPos + scrollSize;
|
const scrollPosEnd = scrollPos + scrollSize;
|
||||||
if (scrollWidth > 0 && scrollPosEnd >= scrollWidth) {
|
if (scrollWidth > 0 && scrollPosEnd >= scrollWidth) {
|
||||||
scrollButtons.scrollButtonsRight.disabled = true;
|
scrollButtons.scrollButtonsRight.disabled = true;
|
||||||
} else {
|
} else {
|
||||||
|
@ -54,18 +59,18 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function onScroll(e) {
|
function onScroll(e) {
|
||||||
var scrollButtons = this;
|
const scrollButtons = this;
|
||||||
var scroller = this.scroller;
|
const scroller = this.scroller;
|
||||||
|
|
||||||
var scrollSize = getScrollSize(scroller);
|
const scrollSize = getScrollSize(scroller);
|
||||||
var scrollPos = getScrollPosition(scroller);
|
const scrollPos = getScrollPosition(scroller);
|
||||||
var scrollWidth = getScrollWidth(scroller);
|
const scrollWidth = getScrollWidth(scroller);
|
||||||
|
|
||||||
updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth);
|
updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getStyleValue(style, name) {
|
function getStyleValue(style, name) {
|
||||||
var value = style.getPropertyValue(name);
|
let value = style.getPropertyValue(name);
|
||||||
if (!value) {
|
if (!value) {
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
|
@ -84,20 +89,20 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function getScrollSize(elem) {
|
function getScrollSize(elem) {
|
||||||
var scrollSize = elem.offsetWidth;
|
let scrollSize = elem.offsetWidth;
|
||||||
var style = window.getComputedStyle(elem, null);
|
let style = window.getComputedStyle(elem, null);
|
||||||
|
|
||||||
var paddingLeft = getStyleValue(style, 'padding-left');
|
let paddingLeft = getStyleValue(style, 'padding-left');
|
||||||
if (paddingLeft) {
|
if (paddingLeft) {
|
||||||
scrollSize -= paddingLeft;
|
scrollSize -= paddingLeft;
|
||||||
}
|
}
|
||||||
|
|
||||||
var paddingRight = getStyleValue(style, 'padding-right');
|
let paddingRight = getStyleValue(style, 'padding-right');
|
||||||
if (paddingRight) {
|
if (paddingRight) {
|
||||||
scrollSize -= paddingRight;
|
scrollSize -= paddingRight;
|
||||||
}
|
}
|
||||||
|
|
||||||
var slider = elem.getScrollSlider();
|
const slider = elem.getScrollSlider();
|
||||||
style = window.getComputedStyle(slider, null);
|
style = window.getComputedStyle(slider, null);
|
||||||
|
|
||||||
paddingLeft = getStyleValue(style, 'padding-left');
|
paddingLeft = getStyleValue(style, 'padding-left');
|
||||||
|
@ -114,14 +119,14 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function onScrollButtonClick(e) {
|
function onScrollButtonClick(e) {
|
||||||
var scroller = this.parentNode.nextSibling;
|
let scroller = this.parentNode.nextSibling;
|
||||||
|
|
||||||
var direction = this.getAttribute('data-direction');
|
const direction = this.getAttribute('data-direction');
|
||||||
var scrollSize = getScrollSize(scroller);
|
const scrollSize = getScrollSize(scroller);
|
||||||
var scrollPos = getScrollPosition(scroller);
|
const scrollPos = getScrollPosition(scroller);
|
||||||
var scrollWidth = getScrollWidth(scroller);
|
const scrollWidth = getScrollWidth(scroller);
|
||||||
|
|
||||||
var newPos;
|
let newPos;
|
||||||
if (direction === 'left') {
|
if (direction === 'left') {
|
||||||
newPos = Math.max(0, scrollPos - scrollSize);
|
newPos = Math.max(0, scrollPos - scrollSize);
|
||||||
} else {
|
} else {
|
||||||
|
@ -132,21 +137,21 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
|
||||||
}
|
}
|
||||||
|
|
||||||
EmbyScrollButtonsPrototype.attachedCallback = function () {
|
EmbyScrollButtonsPrototype.attachedCallback = function () {
|
||||||
var scroller = this.nextSibling;
|
const scroller = this.nextSibling;
|
||||||
this.scroller = scroller;
|
this.scroller = scroller;
|
||||||
|
|
||||||
var parent = this.parentNode;
|
const parent = this.parentNode;
|
||||||
parent.classList.add('emby-scroller-container');
|
parent.classList.add('emby-scroller-container');
|
||||||
|
|
||||||
this.innerHTML = getScrollButtonHtml('left') + getScrollButtonHtml('right');
|
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[0].addEventListener('click', onScrollButtonClick);
|
||||||
buttons[1].addEventListener('click', onScrollButtonClick);
|
buttons[1].addEventListener('click', onScrollButtonClick);
|
||||||
this.scrollButtonsLeft = buttons[0];
|
this.scrollButtonsLeft = buttons[0];
|
||||||
this.scrollButtonsRight = buttons[1];
|
this.scrollButtonsRight = buttons[1];
|
||||||
|
|
||||||
var scrollHandler = onScroll.bind(this);
|
const scrollHandler = onScroll.bind(this);
|
||||||
this.scrollHandler = scrollHandler;
|
this.scrollHandler = scrollHandler;
|
||||||
scroller.addScrollEventListener(scrollHandler, {
|
scroller.addScrollEventListener(scrollHandler, {
|
||||||
capture: false,
|
capture: false,
|
||||||
|
@ -155,10 +160,10 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
|
||||||
};
|
};
|
||||||
|
|
||||||
EmbyScrollButtonsPrototype.detachedCallback = function () {
|
EmbyScrollButtonsPrototype.detachedCallback = function () {
|
||||||
var parent = this.scroller;
|
const parent = this.scroller;
|
||||||
this.scroller = null;
|
this.scroller = null;
|
||||||
|
|
||||||
var scrollHandler = this.scrollHandler;
|
let scrollHandler = this.scrollHandler;
|
||||||
if (parent && scrollHandler) {
|
if (parent && scrollHandler) {
|
||||||
parent.removeScrollEventListener(scrollHandler, {
|
parent.removeScrollEventListener(scrollHandler, {
|
||||||
capture: false,
|
capture: false,
|
||||||
|
@ -175,4 +180,5 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
|
||||||
prototype: EmbyScrollButtonsPrototype,
|
prototype: EmbyScrollButtonsPrototype,
|
||||||
extends: 'div'
|
extends: 'div'
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -1,7 +1,12 @@
|
||||||
define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registerElement'], function (layoutManager, browser, actionsheet) {
|
import layoutManager from 'layoutManager';
|
||||||
'use strict';
|
import browser from 'browser';
|
||||||
|
import actionsheet from 'actionsheet';
|
||||||
|
import 'css!./emby-select';
|
||||||
|
import 'registerElement';
|
||||||
|
|
||||||
var EmbySelectPrototype = Object.create(HTMLSelectElement.prototype);
|
/* eslint-disable indent */
|
||||||
|
|
||||||
|
const EmbySelectPrototype = Object.create(HTMLSelectElement.prototype);
|
||||||
|
|
||||||
function enableNativeMenu() {
|
function enableNativeMenu() {
|
||||||
|
|
||||||
|
@ -27,7 +32,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
|
||||||
}
|
}
|
||||||
|
|
||||||
function triggerChange(select) {
|
function triggerChange(select) {
|
||||||
var evt = document.createEvent('HTMLEvents');
|
const evt = document.createEvent('HTMLEvents');
|
||||||
evt.initEvent('change', false, true);
|
evt.initEvent('change', false, true);
|
||||||
select.dispatchEvent(evt);
|
select.dispatchEvent(evt);
|
||||||
}
|
}
|
||||||
|
@ -39,8 +44,8 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
|
||||||
|
|
||||||
function showActionSheet(select) {
|
function showActionSheet(select) {
|
||||||
|
|
||||||
var labelElem = getLabel(select);
|
const labelElem = getLabel(select);
|
||||||
var title = labelElem ? (labelElem.textContent || labelElem.innerText) : null;
|
const title = labelElem ? (labelElem.textContent || labelElem.innerText) : null;
|
||||||
|
|
||||||
actionsheet.show({
|
actionsheet.show({
|
||||||
items: select.options,
|
items: select.options,
|
||||||
|
@ -54,7 +59,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
|
||||||
}
|
}
|
||||||
|
|
||||||
function getLabel(select) {
|
function getLabel(select) {
|
||||||
var elem = select.previousSibling;
|
let elem = select.previousSibling;
|
||||||
while (elem && elem.tagName !== 'LABEL') {
|
while (elem && elem.tagName !== 'LABEL') {
|
||||||
elem = elem.previousSibling;
|
elem = elem.previousSibling;
|
||||||
}
|
}
|
||||||
|
@ -62,21 +67,20 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
|
||||||
}
|
}
|
||||||
|
|
||||||
function onFocus(e) {
|
function onFocus(e) {
|
||||||
var label = getLabel(this);
|
const label = getLabel(this);
|
||||||
if (label) {
|
if (label) {
|
||||||
label.classList.add('selectLabelFocused');
|
label.classList.add('selectLabelFocused');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onBlur(e) {
|
function onBlur(e) {
|
||||||
var label = getLabel(this);
|
const label = getLabel(this);
|
||||||
if (label) {
|
if (label) {
|
||||||
label.classList.remove('selectLabelFocused');
|
label.classList.remove('selectLabelFocused');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMouseDown(e) {
|
function onMouseDown(e) {
|
||||||
|
|
||||||
// e.button=0 for primary (left) mouse button click
|
// e.button=0 for primary (left) mouse button click
|
||||||
if (!e.button && !enableNativeMenu()) {
|
if (!e.button && !enableNativeMenu()) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
@ -85,9 +89,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
|
||||||
}
|
}
|
||||||
|
|
||||||
function onKeyDown(e) {
|
function onKeyDown(e) {
|
||||||
|
|
||||||
switch (e.keyCode) {
|
switch (e.keyCode) {
|
||||||
|
|
||||||
case 13:
|
case 13:
|
||||||
if (!enableNativeMenu()) {
|
if (!enableNativeMenu()) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
@ -107,7 +109,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var inputId = 0;
|
let inputId = 0;
|
||||||
|
|
||||||
EmbySelectPrototype.createdCallback = function () {
|
EmbySelectPrototype.createdCallback = function () {
|
||||||
|
|
||||||
|
@ -137,7 +139,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
|
||||||
|
|
||||||
this.classList.add('emby-select');
|
this.classList.add('emby-select');
|
||||||
|
|
||||||
var label = this.ownerDocument.createElement('label');
|
const label = this.ownerDocument.createElement('label');
|
||||||
label.innerHTML = this.getAttribute('label') || '';
|
label.innerHTML = this.getAttribute('label') || '';
|
||||||
label.classList.add('selectLabel');
|
label.classList.add('selectLabel');
|
||||||
label.htmlFor = this.id;
|
label.htmlFor = this.id;
|
||||||
|
@ -150,7 +152,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
|
||||||
|
|
||||||
EmbySelectPrototype.setLabel = function (text) {
|
EmbySelectPrototype.setLabel = function (text) {
|
||||||
|
|
||||||
var label = this.parentNode.querySelector('label');
|
const label = this.parentNode.querySelector('label');
|
||||||
|
|
||||||
label.innerHTML = text;
|
label.innerHTML = text;
|
||||||
};
|
};
|
||||||
|
@ -159,4 +161,5 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
|
||||||
prototype: EmbySelectPrototype,
|
prototype: EmbySelectPrototype,
|
||||||
extends: 'select'
|
extends: 'select'
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -50,7 +50,7 @@ define(['backdrop', 'userSettings', 'libraryMenu'], function (backdrop, userSett
|
||||||
return i;
|
return i;
|
||||||
}));
|
}));
|
||||||
} else {
|
} else {
|
||||||
backdrop.clear();
|
backdrop.clearBackdrop();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -67,10 +67,10 @@ define(['backdrop', 'userSettings', 'libraryMenu'], function (backdrop, userSett
|
||||||
showBackdrop(type, parentId);
|
showBackdrop(type, parentId);
|
||||||
} else {
|
} else {
|
||||||
page.classList.remove('backdropPage');
|
page.classList.remove('backdropPage');
|
||||||
backdrop.clear();
|
backdrop.clearBackdrop();
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
backdrop.clear();
|
backdrop.clearBackdrop();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue