diff --git a/src/controllers/shows/tvrecommended.js b/src/controllers/shows/tvrecommended.js
index 4aab69e978..585449d0c0 100644
--- a/src/controllers/shows/tvrecommended.js
+++ b/src/controllers/shows/tvrecommended.js
@@ -30,9 +30,6 @@ import 'emby-button';
name: globalize.translate('TabNetworks')
}, {
name: globalize.translate('TabEpisodes')
- }, {
- name: globalize.translate('ButtonSearch'),
- cssClass: 'searchTabButton'
}];
}
@@ -217,10 +214,6 @@ import 'emby-button';
case 6:
depends = 'controllers/shows/episodes';
break;
-
- case 7:
- depends = 'scripts/searchtab';
- break;
}
import(depends).then(({default: controllerFactory}) => {
diff --git a/src/wizardlibrary.html b/src/controllers/wizard/library.html
similarity index 100%
rename from src/wizardlibrary.html
rename to src/controllers/wizard/library.html
diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index 7661895f15..01221b6cae 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -230,3 +230,18 @@
margin: 0;
padding: 0.5em 0.75em;
}
+
+/* FIXME: 'sliderContainer' is used to wrap slider's pieces */
+.sliderContainer-settings {
+ margin-bottom: 1.8em;
+ position: relative;
+}
+
+.sliderContainer-settings .mdl-slider-container {
+ height: 2.83em; /* similar to emby-input with its 110% font-size */
+}
+
+.sliderLabel {
+ display: block;
+ margin-bottom: 0.25em;
+}
diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index 2439331144..b39e24f5e4 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -150,6 +150,16 @@ import 'emby-input';
this.classList.add('show-focus');
}
+ const topContainer = dom.parentWithClass(this, 'sliderContainer-settings');
+
+ if (topContainer && this.getAttribute('label')) {
+ const label = this.ownerDocument.createElement('label');
+ label.innerHTML = this.getAttribute('label');
+ label.classList.add('sliderLabel');
+ label.htmlFor = this.id;
+ topContainer.insertBefore(label, topContainer.firstChild);
+ }
+
const containerElement = this.parentNode;
containerElement.classList.add('mdl-slider-container');
diff --git a/src/index.html b/src/index.html
index a135079a7d..c689a42f30 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,13 +1,11 @@
-
-
@@ -15,10 +13,9 @@
-
-
+
+
-
@@ -64,7 +61,6 @@
-
Jellyfin
@@ -141,8 +137,7 @@
}
@media screen
- and (min-device-width: 992px)
- and (-webkit-min-device-pixel-ratio: 1) {
+ and (min-device-width: 992px) {
.splashLogo {
background-image: url(assets/img/banner-light.png);
}
diff --git a/src/libraries/navdrawer/navdrawer.js b/src/libraries/navdrawer/navdrawer.js
index d9c246b406..965b68aee4 100644
--- a/src/libraries/navdrawer/navdrawer.js
+++ b/src/libraries/navdrawer/navdrawer.js
@@ -1,352 +1,357 @@
-define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, dom) {
- "use strict";
+/* Cleaning this file properly is not neecessary, since it's an outdated library
+ * and will be replaced soon by a Vue component.
+ */
- return function (options) {
- function getTouches(e) {
- return e.changedTouches || e.targetTouches || e.touches;
+import browser from 'browser';
+import dom from 'dom';
+import 'css!./navdrawer';
+import 'scrollStyles';
+
+export default function (options) {
+ function getTouches(e) {
+ return e.changedTouches || e.targetTouches || e.touches;
+ }
+
+ function onMenuTouchStart(e) {
+ options.target.classList.remove('transition');
+ var touches = getTouches(e);
+ var touch = touches[0] || {};
+ menuTouchStartX = touch.clientX;
+ menuTouchStartY = touch.clientY;
+ menuTouchStartTime = new Date().getTime();
+ }
+
+ function setVelocity(deltaX) {
+ var time = new Date().getTime() - (menuTouchStartTime || 0);
+ velocity = Math.abs(deltaX) / time;
+ }
+
+ function onMenuTouchMove(e) {
+ var isOpen = self.visible;
+ var touches = getTouches(e);
+ var touch = touches[0] || {};
+ var endX = touch.clientX || 0;
+ var endY = touch.clientY || 0;
+ var deltaX = endX - (menuTouchStartX || 0);
+ var deltaY = endY - (menuTouchStartY || 0);
+ setVelocity(deltaX);
+
+ if (isOpen && dragMode !== 1 && deltaX > 0) {
+ dragMode = 2;
}
- function onMenuTouchStart(e) {
- options.target.classList.remove("transition");
- var touches = getTouches(e);
- var touch = touches[0] || {};
- menuTouchStartX = touch.clientX;
- menuTouchStartY = touch.clientY;
- menuTouchStartTime = new Date().getTime();
+ if (dragMode === 0 && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
+ dragMode = 1;
+ scrollContainer.addEventListener('scroll', disableEvent);
+ self.showMask();
+ } else if (dragMode === 0 && Math.abs(deltaY) >= 5) {
+ dragMode = 2;
}
- function setVelocity(deltaX) {
- var time = new Date().getTime() - (menuTouchStartTime || 0);
- velocity = Math.abs(deltaX) / time;
+ if (dragMode === 1) {
+ newPos = currentPos + deltaX;
+ self.changeMenuPos();
}
+ }
- function onMenuTouchMove(e) {
- var isOpen = self.visible;
- var touches = getTouches(e);
- var touch = touches[0] || {};
- var endX = touch.clientX || 0;
- var endY = touch.clientY || 0;
- var deltaX = endX - (menuTouchStartX || 0);
- var deltaY = endY - (menuTouchStartY || 0);
- setVelocity(deltaX);
+ function onMenuTouchEnd(e) {
+ options.target.classList.add('transition');
+ scrollContainer.removeEventListener('scroll', disableEvent);
+ dragMode = 0;
+ var touches = getTouches(e);
+ var touch = touches[0] || {};
+ var endX = touch.clientX || 0;
+ var endY = touch.clientY || 0;
+ var deltaX = endX - (menuTouchStartX || 0);
+ var deltaY = endY - (menuTouchStartY || 0);
+ currentPos = deltaX;
+ self.checkMenuState(deltaX, deltaY);
+ }
- if (isOpen && 1 !== dragMode && deltaX > 0) {
- dragMode = 2;
- }
+ function onEdgeTouchStart(e) {
+ if (isPeeking) {
+ onMenuTouchMove(e);
+ } else {
+ if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
+ isPeeking = true;
- if (0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
- dragMode = 1;
- scrollContainer.addEventListener("scroll", disableEvent);
- self.showMask();
- } else if (0 === dragMode && Math.abs(deltaY) >= 5) {
- dragMode = 2;
- }
-
- if (1 === dragMode) {
- newPos = currentPos + deltaX;
- self.changeMenuPos();
- }
- }
-
- function onMenuTouchEnd(e) {
- options.target.classList.add("transition");
- scrollContainer.removeEventListener("scroll", disableEvent);
- dragMode = 0;
- var touches = getTouches(e);
- var touch = touches[0] || {};
- var endX = touch.clientX || 0;
- var endY = touch.clientY || 0;
- var deltaX = endX - (menuTouchStartX || 0);
- var deltaY = endY - (menuTouchStartY || 0);
- currentPos = deltaX;
- self.checkMenuState(deltaX, deltaY);
- }
-
- function onEdgeTouchStart(e) {
- if (isPeeking) {
- onMenuTouchMove(e);
- } else {
- if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
- isPeeking = true;
-
- if (e.type === "touchstart") {
- dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
- dom.addEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
- }
-
- onMenuTouchStart(e);
+ if (e.type === 'touchstart') {
+ dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
+ dom.addEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
}
+
+ onMenuTouchStart(e);
}
}
+ }
- function onEdgeTouchMove(e) {
- e.preventDefault();
- e.stopPropagation();
- onEdgeTouchStart(e);
+ function onEdgeTouchMove(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ onEdgeTouchStart(e);
+ }
+
+ function onEdgeTouchEnd(e) {
+ if (isPeeking) {
+ isPeeking = false;
+ dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
+ onMenuTouchEnd(e);
}
+ }
- function onEdgeTouchEnd(e) {
- if (isPeeking) {
- isPeeking = false;
- dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
- onMenuTouchEnd(e);
- }
- }
+ function disableEvent(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
- function disableEvent(e) {
- e.preventDefault();
- e.stopPropagation();
- }
+ function onBackgroundTouchStart(e) {
+ var touches = getTouches(e);
+ var touch = touches[0] || {};
+ backgroundTouchStartX = touch.clientX;
+ backgroundTouchStartTime = new Date().getTime();
+ }
- function onBackgroundTouchStart(e) {
- var touches = getTouches(e);
- var touch = touches[0] || {};
- backgroundTouchStartX = touch.clientX;
- backgroundTouchStartTime = new Date().getTime();
- }
+ function onBackgroundTouchMove(e) {
+ var touches = getTouches(e);
+ var touch = touches[0] || {};
+ var endX = touch.clientX || 0;
- function onBackgroundTouchMove(e) {
- var touches = getTouches(e);
- var touch = touches[0] || {};
- var endX = touch.clientX || 0;
-
- if (endX <= options.width && self.isVisible) {
- countStart++;
- var deltaX = endX - (backgroundTouchStartX || 0);
-
- if (countStart == 1) {
- startPoint = deltaX;
- }
- if (deltaX < 0 && dragMode !== 2) {
- dragMode = 1;
- newPos = deltaX - startPoint + options.width;
- self.changeMenuPos();
- var time = new Date().getTime() - (backgroundTouchStartTime || 0);
- velocity = Math.abs(deltaX) / time;
- }
- }
-
- e.preventDefault();
- e.stopPropagation();
- }
-
- function onBackgroundTouchEnd(e) {
- var touches = getTouches(e);
- var touch = touches[0] || {};
- var endX = touch.clientX || 0;
+ if (endX <= options.width && self.isVisible) {
+ countStart++;
var deltaX = endX - (backgroundTouchStartX || 0);
- self.checkMenuState(deltaX);
- countStart = 0;
- }
- function onMaskTransitionEnd() {
- var classList = mask.classList;
-
- if (!classList.contains("backdrop")) {
- classList.add("hide");
+ if (countStart == 1) {
+ startPoint = deltaX;
+ }
+ if (deltaX < 0 && dragMode !== 2) {
+ dragMode = 1;
+ newPos = deltaX - startPoint + options.width;
+ self.changeMenuPos();
+ var time = new Date().getTime() - (backgroundTouchStartTime || 0);
+ velocity = Math.abs(deltaX) / time;
}
}
- var self;
- var defaults;
- var mask;
- var newPos = 0;
- var currentPos = 0;
- var startPoint = 0;
- var countStart = 0;
- var velocity = 0;
- options.target.classList.add("transition");
- var dragMode = 0;
- var scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer");
- scrollContainer.classList.add("scrollY");
+ e.preventDefault();
+ e.stopPropagation();
+ }
- var TouchMenuLA = function () {
- self = this;
- defaults = {
- width: 260,
- handleSize: 10,
- disableMask: false,
- maxMaskOpacity: 0.5
- };
- this.isVisible = false;
- this.initialize();
+ function onBackgroundTouchEnd(e) {
+ var touches = getTouches(e);
+ var touch = touches[0] || {};
+ var endX = touch.clientX || 0;
+ var deltaX = endX - (backgroundTouchStartX || 0);
+ self.checkMenuState(deltaX);
+ countStart = 0;
+ }
+
+ function onMaskTransitionEnd() {
+ var classList = mask.classList;
+
+ if (!classList.contains('backdrop')) {
+ classList.add('hide');
+ }
+ }
+
+ var self;
+ var defaults;
+ var mask;
+ var newPos = 0;
+ var currentPos = 0;
+ var startPoint = 0;
+ var countStart = 0;
+ var velocity = 0;
+ options.target.classList.add('transition');
+ var dragMode = 0;
+ var scrollContainer = options.target.querySelector('.mainDrawer-scrollContainer');
+ scrollContainer.classList.add('scrollY');
+
+ var TouchMenuLA = function () {
+ self = this;
+ defaults = {
+ width: 260,
+ handleSize: 10,
+ disableMask: false,
+ maxMaskOpacity: 0.5
};
+ this.isVisible = false;
+ this.initialize();
+ };
- TouchMenuLA.prototype.initElements = function () {
- options.target.classList.add("touch-menu-la");
- options.target.style.width = options.width + "px";
- options.target.style.left = -options.width + "px";
+ TouchMenuLA.prototype.initElements = function () {
+ options.target.classList.add('touch-menu-la');
+ options.target.style.width = options.width + 'px';
+ options.target.style.left = -options.width + 'px';
- if (!options.disableMask) {
- mask = document.createElement("div");
- mask.className = "tmla-mask hide";
- document.body.appendChild(mask);
- dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, {
- passive: true
- });
- }
- };
-
- var menuTouchStartX;
- var menuTouchStartY;
- var menuTouchStartTime;
- var edgeContainer = document.querySelector(".mainDrawerHandle");
- var isPeeking = false;
-
- TouchMenuLA.prototype.animateToPosition = function (pos) {
- requestAnimationFrame(function () {
- options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none";
+ if (!options.disableMask) {
+ mask = document.createElement('div');
+ mask.className = 'tmla-mask hide';
+ document.body.appendChild(mask);
+ dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, {
+ passive: true
});
- };
+ }
+ };
- TouchMenuLA.prototype.changeMenuPos = function () {
- if (newPos <= options.width) {
- this.animateToPosition(newPos);
- }
- };
+ var menuTouchStartX;
+ var menuTouchStartY;
+ var menuTouchStartTime;
+ var edgeContainer = document.querySelector('.mainDrawerHandle');
+ var isPeeking = false;
- TouchMenuLA.prototype.clickMaskClose = function () {
- mask.addEventListener("click", function () {
+ TouchMenuLA.prototype.animateToPosition = function (pos) {
+ requestAnimationFrame(function () {
+ options.target.style.transform = pos ? 'translateX(' + pos + 'px)' : 'none';
+ });
+ };
+
+ TouchMenuLA.prototype.changeMenuPos = function () {
+ if (newPos <= options.width) {
+ this.animateToPosition(newPos);
+ }
+ };
+
+ TouchMenuLA.prototype.clickMaskClose = function () {
+ mask.addEventListener('click', function () {
+ self.close();
+ });
+ };
+
+ TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) {
+ if (velocity >= 0.4) {
+ if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) {
+ self.open();
+ } else {
self.close();
- });
- };
-
- TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) {
- if (velocity >= 0.4) {
- if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) {
- self.open();
- } else {
+ }
+ } else {
+ if (newPos >= 100) {
+ self.open();
+ } else {
+ if (newPos) {
self.close();
}
- } else {
- if (newPos >= 100) {
- self.open();
- } else {
- if (newPos) {
- self.close();
- }
- }
}
- };
-
- TouchMenuLA.prototype.open = function () {
- this.animateToPosition(options.width);
- currentPos = options.width;
- this.isVisible = true;
- options.target.classList.add("drawer-open");
- self.showMask();
- self.invoke(options.onChange);
- };
-
- TouchMenuLA.prototype.close = function () {
- this.animateToPosition(0);
- currentPos = 0;
- self.isVisible = false;
- options.target.classList.remove("drawer-open");
- self.hideMask();
- self.invoke(options.onChange);
- };
-
- TouchMenuLA.prototype.toggle = function () {
- if (self.isVisible) {
- self.close();
- } else {
- self.open();
- }
- };
-
- var backgroundTouchStartX;
- var backgroundTouchStartTime;
-
- TouchMenuLA.prototype.showMask = function () {
- mask.classList.remove("hide");
- mask.classList.add("backdrop");
- };
-
- TouchMenuLA.prototype.hideMask = function () {
- mask.classList.add("hide");
- mask.classList.remove("backdrop");
- };
-
- TouchMenuLA.prototype.invoke = function (fn) {
- if (fn) {
- fn.apply(self);
- }
- };
-
- var _edgeSwipeEnabled;
-
- TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) {
- if (!options.disableEdgeSwipe) {
- if (browser.touch) {
- if (enabled) {
- if (!_edgeSwipeEnabled) {
- _edgeSwipeEnabled = true;
- dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
- passive: true
- });
- dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
- passive: true
- });
- dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
- passive: true
- });
- }
- } else {
- if (_edgeSwipeEnabled) {
- _edgeSwipeEnabled = false;
- dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
- passive: true
- });
- dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
- passive: true
- });
- dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
- passive: true
- });
- }
- }
- }
- }
- };
-
- TouchMenuLA.prototype.initialize = function () {
- options = Object.assign(defaults, options || {});
-
- if (browser.edge) {
- options.disableEdgeSwipe = true;
- }
-
- self.initElements();
-
- if (browser.touch) {
- dom.addEventListener(options.target, "touchstart", onMenuTouchStart, {
- passive: true
- });
- dom.addEventListener(options.target, "touchmove", onMenuTouchMove, {
- passive: true
- });
- dom.addEventListener(options.target, "touchend", onMenuTouchEnd, {
- passive: true
- });
- dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, {
- passive: true
- });
- dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, {
- passive: true
- });
- dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {});
- dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, {
- passive: true
- });
- dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, {
- passive: true
- });
- }
-
- self.clickMaskClose();
- };
-
- return new TouchMenuLA();
+ }
};
-});
+
+ TouchMenuLA.prototype.open = function () {
+ this.animateToPosition(options.width);
+ currentPos = options.width;
+ this.isVisible = true;
+ options.target.classList.add('drawer-open');
+ self.showMask();
+ self.invoke(options.onChange);
+ };
+
+ TouchMenuLA.prototype.close = function () {
+ this.animateToPosition(0);
+ currentPos = 0;
+ self.isVisible = false;
+ options.target.classList.remove('drawer-open');
+ self.hideMask();
+ self.invoke(options.onChange);
+ };
+
+ TouchMenuLA.prototype.toggle = function () {
+ if (self.isVisible) {
+ self.close();
+ } else {
+ self.open();
+ }
+ };
+
+ var backgroundTouchStartX;
+ var backgroundTouchStartTime;
+
+ TouchMenuLA.prototype.showMask = function () {
+ mask.classList.remove('hide');
+ mask.classList.add('backdrop');
+ };
+
+ TouchMenuLA.prototype.hideMask = function () {
+ mask.classList.add('hide');
+ mask.classList.remove('backdrop');
+ };
+
+ TouchMenuLA.prototype.invoke = function (fn) {
+ if (fn) {
+ fn.apply(self);
+ }
+ };
+
+ var _edgeSwipeEnabled;
+
+ TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) {
+ if (!options.disableEdgeSwipe) {
+ if (browser.touch) {
+ if (enabled) {
+ if (!_edgeSwipeEnabled) {
+ _edgeSwipeEnabled = true;
+ dom.addEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
+ passive: true
+ });
+ dom.addEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
+ passive: true
+ });
+ dom.addEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
+ passive: true
+ });
+ }
+ } else {
+ if (_edgeSwipeEnabled) {
+ _edgeSwipeEnabled = false;
+ dom.removeEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
+ passive: true
+ });
+ dom.removeEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
+ passive: true
+ });
+ dom.removeEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
+ passive: true
+ });
+ }
+ }
+ }
+ }
+ };
+
+ TouchMenuLA.prototype.initialize = function () {
+ options = Object.assign(defaults, options || {});
+
+ if (browser.edge) {
+ options.disableEdgeSwipe = true;
+ }
+
+ self.initElements();
+
+ if (browser.touch) {
+ dom.addEventListener(options.target, 'touchstart', onMenuTouchStart, {
+ passive: true
+ });
+ dom.addEventListener(options.target, 'touchmove', onMenuTouchMove, {
+ passive: true
+ });
+ dom.addEventListener(options.target, 'touchend', onMenuTouchEnd, {
+ passive: true
+ });
+ dom.addEventListener(options.target, 'touchcancel', onMenuTouchEnd, {
+ passive: true
+ });
+ dom.addEventListener(mask, 'touchstart', onBackgroundTouchStart, {
+ passive: true
+ });
+ dom.addEventListener(mask, 'touchmove', onBackgroundTouchMove, {});
+ dom.addEventListener(mask, 'touchend', onBackgroundTouchEnd, {
+ passive: true
+ });
+ dom.addEventListener(mask, 'touchcancel', onBackgroundTouchEnd, {
+ passive: true
+ });
+ }
+
+ self.clickMaskClose();
+ };
+
+ return new TouchMenuLA();
+}
diff --git a/src/libraries/screensavermanager.js b/src/libraries/screensavermanager.js
index b9d7082850..5c24ec63d0 100644
--- a/src/libraries/screensavermanager.js
+++ b/src/libraries/screensavermanager.js
@@ -1,132 +1,128 @@
-define(["events", "playbackManager", "pluginManager", "inputManager", "connectionManager", "userSettings"], function (events, playbackManager, pluginManager, inputManager, connectionManager, userSettings) {
- "use strict";
+import events from 'events';
+import playbackManager from 'playbackManager';
+import pluginManager from 'pluginManager';
+import inputManager from 'inputManager';
+import connectionManager from 'connectionManager';
+import * as userSettings from 'userSettings';
- function getMinIdleTime() {
- // Returns the minimum amount of idle time required before the screen saver can be displayed
- //time units used Millisecond
- return 180000;
+function getMinIdleTime() {
+ // Returns the minimum amount of idle time required before the screen saver can be displayed
+ //time units used Millisecond
+ return 180000;
+}
+
+let lastFunctionalEvent = 0;
+
+function getFunctionalEventIdleTime() {
+ return new Date().getTime() - lastFunctionalEvent;
+}
+
+events.on(playbackManager, 'playbackstop', function (e, stopInfo) {
+ const state = stopInfo.state;
+ if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
+ lastFunctionalEvent = new Date().getTime();
}
-
- var lastFunctionalEvent = 0;
-
- function getFunctionalEventIdleTime() {
- return new Date().getTime() - lastFunctionalEvent;
- }
-
- events.on(playbackManager, "playbackstop", function (e, stopInfo) {
- var state = stopInfo.state;
- if (state.NowPlayingItem && state.NowPlayingItem.MediaType == "Video") {
- lastFunctionalEvent = new Date().getTime();
- }
- });
-
- function getScreensaverPlugin(isLoggedIn) {
-
- var option;
- try {
- option = userSettings.get("screensaver", false);
- } catch (err) {
- option = isLoggedIn ? "backdropscreensaver" : "logoscreensaver";
- }
-
- var plugins = pluginManager.ofType("screensaver");
-
- for (var i = 0, length = plugins.length; i < length; i++) {
- var plugin = plugins[i];
-
- if (plugin.id === option) {
- return plugin;
- }
- }
-
- return null;
- }
-
- function ScreenSaverManager() {
-
- var self = this;
- var activeScreenSaver;
-
- function showScreenSaver(screensaver) {
-
- if (activeScreenSaver) {
- throw new Error("An existing screensaver is already active.");
- }
-
- console.debug("Showing screensaver " + screensaver.name);
-
- screensaver.show();
- activeScreenSaver = screensaver;
-
- if (screensaver.hideOnClick !== false) {
- window.addEventListener("click", hide, true);
- }
- if (screensaver.hideOnMouse !== false) {
- window.addEventListener("mousemove", hide, true);
- }
- if (screensaver.hideOnKey !== false) {
- window.addEventListener("keydown", hide, true);
- }
- }
-
- function hide() {
- if (activeScreenSaver) {
- console.debug("Hiding screensaver");
- activeScreenSaver.hide();
- activeScreenSaver = null;
- }
-
- window.removeEventListener("click", hide, true);
- window.removeEventListener("mousemove", hide, true);
- window.removeEventListener("keydown", hide, true);
- }
-
- self.isShowing = function () {
- return activeScreenSaver != null;
- };
-
- self.show = function () {
- var isLoggedIn;
- var apiClient = connectionManager.currentApiClient();
-
- if (apiClient && apiClient.isLoggedIn()) {
- isLoggedIn = true;
- }
-
- var screensaver = getScreensaverPlugin(isLoggedIn);
-
- if (screensaver) {
- showScreenSaver(screensaver);
- }
- };
-
- self.hide = function () {
- hide();
- };
-
- function onInterval() {
-
- if (self.isShowing()) {
- return;
- }
-
- if (inputManager.idleTime() < getMinIdleTime()) {
- return;
- }
-
- if (getFunctionalEventIdleTime < getMinIdleTime()) {
- return;
- }
-
- if (playbackManager.isPlayingVideo()) {
- return;
- }
-
- self.show();
- }
-
- setInterval(onInterval, 10000);
- }
-
- return new ScreenSaverManager();
});
+
+function getScreensaverPlugin(isLoggedIn) {
+ let option;
+ try {
+ option = userSettings.get('screensaver', false);
+ } catch (err) {
+ option = isLoggedIn ? 'backdropscreensaver' : 'logoscreensaver';
+ }
+
+ const plugins = pluginManager.ofType('screensaver');
+
+ for (const plugin of plugins) {
+ if (plugin.id === option) {
+ return plugin;
+ }
+ }
+
+ return null;
+}
+
+function ScreenSaverManager() {
+ let activeScreenSaver;
+
+ function showScreenSaver(screensaver) {
+ if (activeScreenSaver) {
+ throw new Error('An existing screensaver is already active.');
+ }
+
+ console.debug('Showing screensaver ' + screensaver.name);
+
+ screensaver.show();
+ activeScreenSaver = screensaver;
+
+ if (screensaver.hideOnClick !== false) {
+ window.addEventListener('click', hide, true);
+ }
+ if (screensaver.hideOnMouse !== false) {
+ window.addEventListener('mousemove', hide, true);
+ }
+ if (screensaver.hideOnKey !== false) {
+ window.addEventListener('keydown', hide, true);
+ }
+ }
+
+ function hide() {
+ if (activeScreenSaver) {
+ console.debug('Hiding screensaver');
+ activeScreenSaver.hide();
+ activeScreenSaver = null;
+ }
+
+ window.removeEventListener('click', hide, true);
+ window.removeEventListener('mousemove', hide, true);
+ window.removeEventListener('keydown', hide, true);
+ }
+
+ this.isShowing = () => {
+ return activeScreenSaver != null;
+ };
+
+ this.show = function () {
+ let isLoggedIn;
+ const apiClient = connectionManager.currentApiClient();
+
+ if (apiClient && apiClient.isLoggedIn()) {
+ isLoggedIn = true;
+ }
+
+ const screensaver = getScreensaverPlugin(isLoggedIn);
+
+ if (screensaver) {
+ showScreenSaver(screensaver);
+ }
+ };
+
+ this.hide = function () {
+ hide();
+ };
+
+ const onInterval = () => {
+ if (this.isShowing()) {
+ return;
+ }
+
+ if (inputManager.idleTime() < getMinIdleTime()) {
+ return;
+ }
+
+ if (getFunctionalEventIdleTime < getMinIdleTime()) {
+ return;
+ }
+
+ if (playbackManager.isPlayingVideo()) {
+ return;
+ }
+
+ this.show();
+ };
+
+ setInterval(onInterval, 10000);
+}
+
+export default new ScreenSaverManager;
diff --git a/src/libraries/scroller.js b/src/libraries/scroller.js
index 645a8ea85c..c460ec5b2c 100644
--- a/src/libraries/scroller.js
+++ b/src/libraries/scroller.js
@@ -1,925 +1,886 @@
-define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'scrollStyles'], function (browser, layoutManager, dom, focusManager, ResizeObserver) {
- 'use strict';
+/* Cleaning this file properly is not neecessary, since it's an outdated library
+ * and will be replaced soon by a Vue component.
+ */
- /**
+import browser from 'browser';
+import layoutManager from 'layoutManager';
+import dom from 'dom';
+import focusManager from 'focusManager';
+import ResizeObserver from 'ResizeObserver';
+import 'scrollStyles';
+
+/**
* Return type of the value.
*
* @param {Mixed} value
*
* @return {String}
*/
- function type(value) {
- if (value == null) {
- return String(value);
- }
-
- if (typeof value === 'object' || typeof value === 'function') {
- return Object.prototype.toString.call(value).match(/\s([a-z]+)/i)[1].toLowerCase() || 'object';
- }
-
- return typeof value;
+function type(value) {
+ if (value == null) {
+ return String(value);
}
- /**
- * Disables an event it was triggered on and unbinds itself.
- *
- * @param {Event} event
- *
- * @return {Void}
- */
- function disableOneEvent(event) {
- /*jshint validthis:true */
- event.preventDefault();
- event.stopPropagation();
- this.removeEventListener(event.type, disableOneEvent);
+ if (typeof value === 'object' || typeof value === 'function') {
+ return Object.prototype.toString.call(value).match(/\s([a-z]+)/i)[1].toLowerCase() || 'object';
}
- /**
- * Make sure that number is within the limits.
- *
- * @param {Number} number
- * @param {Number} min
- * @param {Number} max
- *
- * @return {Number}
- */
- function within(number, min, max) {
- return number < min ? min : number > max ? max : number;
+ return typeof value;
+}
+
+/**
+ * Disables an event it was triggered on and unbinds itself.
+ *
+ * @param {Event} event
+ *
+ * @return {Void}
+ */
+function disableOneEvent(event) {
+ /*jshint validthis:true */
+ event.preventDefault();
+ event.stopPropagation();
+ this.removeEventListener(event.type, disableOneEvent);
+}
+
+/**
+ * Make sure that number is within the limits.
+ *
+ * @param {Number} number
+ * @param {Number} min
+ * @param {Number} max
+ *
+ * @return {Number}
+ */
+function within(number, min, max) {
+ return number < min ? min : number > max ? max : number;
+}
+
+// Other global values
+var dragMouseEvents = ['mousemove', 'mouseup'];
+var dragTouchEvents = ['touchmove', 'touchend'];
+var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
+var interactiveElements = ['INPUT', 'SELECT', 'TEXTAREA'];
+
+var scrollerFactory = function (frame, options) {
+ // Extend options
+ var o = Object.assign({}, {
+ slidee: null, // Selector, DOM element, or jQuery object with DOM element representing SLIDEE.
+ horizontal: false, // Switch to horizontal mode.
+
+ // Scrolling
+ mouseWheel: true,
+ scrollBy: 0, // Pixels or items to move per one mouse scroll. 0 to disable scrolling
+
+ // Dragging
+ dragSource: null, // Selector or DOM element for catching dragging events. Default is FRAME.
+ mouseDragging: 1, // Enable navigation by dragging the SLIDEE with mouse cursor.
+ touchDragging: 1, // Enable navigation by dragging the SLIDEE with touch events.
+ dragThreshold: 3, // Distance in pixels before Sly recognizes dragging.
+ intervactive: null, // Selector for special interactive elements.
+
+ // Mixed options
+ speed: 0 // Animations speed in milliseconds. 0 to disable animations.
+
+ }, options);
+
+ var isSmoothScrollSupported = 'scrollBehavior' in document.documentElement.style;
+
+ // native scroll is a must with touch input
+ // also use native scroll when scrolling vertically in desktop mode - excluding horizontal because the mouse wheel support is choppy at the moment
+ // in cases with firefox, if the smooth scroll api is supported then use that because their implementation is very good
+ if (options.allowNativeScroll === false) {
+ options.enableNativeScroll = false;
+ } else if (isSmoothScrollSupported && ((browser.firefox && !layoutManager.tv) || options.allowNativeSmoothScroll)) {
+ // native smooth scroll
+ options.enableNativeScroll = true;
+ } else if (options.requireAnimation && (browser.animate || browser.supportsCssAnimation())) {
+ // transform is the only way to guarantee animation
+ options.enableNativeScroll = false;
+ } else if (!layoutManager.tv || !browser.animate) {
+ options.enableNativeScroll = true;
}
- // Other global values
- var dragMouseEvents = ['mousemove', 'mouseup'];
- var dragTouchEvents = ['touchmove', 'touchend'];
- var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
- var interactiveElements = ['INPUT', 'SELECT', 'TEXTAREA'];
- var tmpArray = [];
- var time;
-
- // Math shorthands
- var abs = Math.abs;
- var sqrt = Math.sqrt;
- var pow = Math.pow;
- var round = Math.round;
- var max = Math.max;
- var min = Math.min;
-
- var scrollerFactory = function (frame, options) {
-
- // Extend options
- var o = Object.assign({}, {
- slidee: null, // Selector, DOM element, or jQuery object with DOM element representing SLIDEE.
- horizontal: false, // Switch to horizontal mode.
-
- // Scrolling
- mouseWheel: true,
- scrollBy: 0, // Pixels or items to move per one mouse scroll. 0 to disable scrolling
-
- // Dragging
- dragSource: null, // Selector or DOM element for catching dragging events. Default is FRAME.
- mouseDragging: 1, // Enable navigation by dragging the SLIDEE with mouse cursor.
- touchDragging: 1, // Enable navigation by dragging the SLIDEE with touch events.
- dragThreshold: 3, // Distance in pixels before Sly recognizes dragging.
- intervactive: null, // Selector for special interactive elements.
-
- // Mixed options
- speed: 0 // Animations speed in milliseconds. 0 to disable animations.
-
- }, options);
-
- var isSmoothScrollSupported = 'scrollBehavior' in document.documentElement.style;
-
- // native scroll is a must with touch input
- // also use native scroll when scrolling vertically in desktop mode - excluding horizontal because the mouse wheel support is choppy at the moment
- // in cases with firefox, if the smooth scroll api is supported then use that because their implementation is very good
- if (options.allowNativeScroll === false) {
- options.enableNativeScroll = false;
- } else if (isSmoothScrollSupported && ((browser.firefox && !layoutManager.tv) || options.allowNativeSmoothScroll)) {
- // native smooth scroll
- options.enableNativeScroll = true;
- } else if (options.requireAnimation && (browser.animate || browser.supportsCssAnimation())) {
-
- // transform is the only way to guarantee animation
- options.enableNativeScroll = false;
- } else if (!layoutManager.tv || !browser.animate) {
-
- options.enableNativeScroll = true;
- }
-
- // Need this for the magic wheel. With the animated scroll the magic wheel will run off of the screen
- if (browser.web0s) {
- options.enableNativeScroll = true;
- }
-
- // Private variables
- var self = this;
- self.options = o;
-
- // Frame
- var slideeElement = o.slidee ? o.slidee : sibling(frame.firstChild)[0];
- self._pos = {
- start: 0,
- center: 0,
- end: 0,
- cur: 0,
- dest: 0
- };
-
- var transform = !options.enableNativeScroll;
-
- // Miscellaneous
- var scrollSource = frame;
- var dragSourceElement = o.dragSource ? o.dragSource : frame;
- var dragging = {
- released: 1
- };
- var scrolling = {
- last: 0,
- delta: 0,
- resetTime: 200
- };
-
- // Expose properties
- self.initialized = 0;
- self.slidee = slideeElement;
- self.options = o;
- self.dragging = dragging;
-
- var nativeScrollElement = frame;
-
- function sibling(n, elem) {
- var matched = [];
-
- for (; n; n = n.nextSibling) {
- if (n.nodeType === 1 && n !== elem) {
- matched.push(n);
- }
- }
- return matched;
- }
-
- var requiresReflow = true;
-
- var frameSize = 0;
- var slideeSize = 0;
- function ensureSizeInfo() {
-
- if (requiresReflow) {
-
- requiresReflow = false;
-
- // Reset global variables
- frameSize = o.horizontal ? (frame).offsetWidth : (frame).offsetHeight;
-
- slideeSize = o.scrollWidth || Math.max(slideeElement[o.horizontal ? 'offsetWidth' : 'offsetHeight'], slideeElement[o.horizontal ? 'scrollWidth' : 'scrollHeight']);
-
- // Set position limits & relativess
- self._pos.end = max(slideeSize - frameSize, 0);
- }
- }
-
- /**
- * Loading function.
- *
- * Populate arrays, set sizes, bind events, ...
- *
- * @param {Boolean} [isInit] Whether load is called from within self.init().
- * @return {Void}
- */
- function load(isInit) {
-
- requiresReflow = true;
-
- if (!isInit) {
-
- ensureSizeInfo();
-
- // Fix possible overflowing
- var pos = self._pos;
- self.slideTo(within(pos.dest, pos.start, pos.end));
- }
- }
-
- function initFrameResizeObserver() {
-
- var observerOptions = {};
-
- self.frameResizeObserver = new ResizeObserver(onResize, observerOptions);
-
- self.frameResizeObserver.observe(frame);
- }
-
- self.reload = function () {
- load();
- };
-
- self.getScrollEventName = function () {
- return transform ? 'scrollanimate' : 'scroll';
- };
-
- self.getScrollSlider = function () {
- return slideeElement;
- };
-
- self.getScrollFrame = function () {
- return frame;
- };
-
- function nativeScrollTo(container, pos, immediate) {
-
- if (container.scroll) {
- if (o.horizontal) {
-
- container.scroll({
- left: pos,
- behavior: immediate ? 'instant' : 'smooth'
- });
- } else {
-
- container.scroll({
- top: pos,
- behavior: immediate ? 'instant' : 'smooth'
- });
- }
- } else if (!immediate && container.scrollTo) {
- if (o.horizontal) {
- container.scrollTo(Math.round(pos), 0);
- } else {
- container.scrollTo(0, Math.round(pos));
- }
- } else {
- if (o.horizontal) {
- container.scrollLeft = Math.round(pos);
- } else {
- container.scrollTop = Math.round(pos);
- }
- }
- }
-
- var lastAnimate;
-
- /**
- * Animate to a position.
- *
- * @param {Int} newPos New position.
- * @param {Bool} immediate Reposition immediately without an animation.
- *
- * @return {Void}
- */
- self.slideTo = function (newPos, immediate, fullItemPos) {
-
- ensureSizeInfo();
- var pos = self._pos;
-
- newPos = within(newPos, pos.start, pos.end);
-
- if (!transform) {
-
- nativeScrollTo(nativeScrollElement, newPos, immediate);
- return;
- }
-
- // Update the animation object
- var from = pos.cur;
- immediate = immediate || dragging.init || !o.speed;
-
- var now = new Date().getTime();
-
- if (o.autoImmediate) {
- if (!immediate && (now - (lastAnimate || 0)) <= 50) {
- immediate = true;
- }
- }
-
- if (!immediate && o.skipSlideToWhenVisible && fullItemPos && fullItemPos.isVisible) {
-
- return;
- }
-
- // Start animation rendering
- // NOTE the dependency was modified here to fix a scrollbutton issue
- pos.dest = newPos;
- renderAnimateWithTransform(from, newPos, immediate);
- lastAnimate = now;
- };
-
- function setStyleProperty(elem, name, value, speed, resetTransition) {
-
- var style = elem.style;
-
- if (resetTransition || browser.edge) {
- style.transition = 'none';
- void elem.offsetWidth;
- }
-
- style.transition = 'transform ' + speed + 'ms ease-out';
- style[name] = value;
- }
-
- function dispatchScrollEventIfNeeded() {
- if (o.dispatchScrollEvent) {
- frame.dispatchEvent(new CustomEvent(self.getScrollEventName(), {
- bubbles: true,
- cancelable: false
- }));
- }
- }
-
- function renderAnimateWithTransform(fromPosition, toPosition, immediate) {
-
- var speed = o.speed;
-
- if (immediate) {
- speed = o.immediateSpeed || 50;
- }
-
- if (o.horizontal) {
- setStyleProperty(slideeElement, 'transform', 'translateX(' + (-round(toPosition)) + 'px)', speed);
- } else {
- setStyleProperty(slideeElement, 'transform', 'translateY(' + (-round(toPosition)) + 'px)', speed);
- }
- self._pos.cur = toPosition;
-
- dispatchScrollEventIfNeeded();
- }
-
- function getBoundingClientRect(elem) {
-
- // Support: BlackBerry 5, iOS 3 (original iPhone)
- // If we don't have gBCR, just use 0,0 rather than error
- if (elem.getBoundingClientRect) {
- return elem.getBoundingClientRect();
- } else {
- return { top: 0, left: 0 };
- }
- }
-
- /**
- * Returns the position object.
- *
- * @param {Mixed} item
- *
- * @return {Object}
- */
- self.getPos = function (item) {
-
- var scrollElement = transform ? slideeElement : nativeScrollElement;
- var slideeOffset = getBoundingClientRect(scrollElement);
- var itemOffset = getBoundingClientRect(item);
-
- var slideeStartPos = o.horizontal ? slideeOffset.left : slideeOffset.top;
- var slideeEndPos = o.horizontal ? slideeOffset.right : slideeOffset.bottom;
-
- var offset = o.horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
-
- var size = o.horizontal ? itemOffset.width : itemOffset.height;
- if (!size && size !== 0) {
- size = item[o.horizontal ? 'offsetWidth' : 'offsetHeight'];
- }
-
- var centerOffset = o.centerOffset || 0;
-
- if (!transform) {
- centerOffset = 0;
- if (o.horizontal) {
- offset += nativeScrollElement.scrollLeft;
- } else {
- offset += nativeScrollElement.scrollTop;
- }
- }
-
- ensureSizeInfo();
-
- var currentStart = self._pos.cur;
- var currentEnd = currentStart + frameSize;
-
- console.debug('offset:' + offset + ' currentStart:' + currentStart + ' currentEnd:' + currentEnd);
- var isVisible = offset >= currentStart && (offset + size) <= currentEnd;
-
- return {
- start: offset,
- center: offset + centerOffset - (frameSize / 2) + (size / 2),
- end: offset - frameSize + size,
- size: size,
- isVisible: isVisible
- };
- };
-
- self.getCenterPosition = function (item) {
-
- ensureSizeInfo();
-
- var pos = self.getPos(item);
- return within(pos.center, pos.start, pos.end);
- };
-
- function dragInitSlidee(event) {
- var isTouch = event.type === 'touchstart';
-
- // Ignore when already in progress, or interactive element in non-touch navivagion
- if (dragging.init || !isTouch && isInteractive(event.target)) {
- return;
- }
-
- // SLIDEE dragging conditions
- if (!(isTouch ? o.touchDragging : o.mouseDragging && event.which < 2)) {
- return;
- }
-
- if (!isTouch) {
- // prevents native image dragging in Firefox
- event.preventDefault();
- }
-
- // Reset dragging object
- dragging.released = 0;
-
- // Properties used in dragHandler
- dragging.init = 0;
- dragging.source = event.target;
- dragging.touch = isTouch;
- var pointer = isTouch ? event.touches[0] : event;
- dragging.initX = pointer.pageX;
- dragging.initY = pointer.pageY;
- dragging.initPos = self._pos.cur;
- dragging.start = +new Date();
- dragging.time = 0;
- dragging.path = 0;
- dragging.delta = 0;
- dragging.locked = 0;
- dragging.pathToLock = isTouch ? 30 : 10;
-
- // Bind dragging events
- if (transform) {
-
- if (isTouch) {
- dragTouchEvents.forEach(function (eventName) {
- dom.addEventListener(document, eventName, dragHandler, {
- passive: true
- });
- });
- } else {
- dragMouseEvents.forEach(function (eventName) {
- dom.addEventListener(document, eventName, dragHandler, {
- passive: true
- });
- });
- }
- }
- }
-
- /**
- * Handler for dragging scrollbar handle or SLIDEE.
- *
- * @param {Event} event
- *
- * @return {Void}
- */
- function dragHandler(event) {
- dragging.released = event.type === 'mouseup' || event.type === 'touchend';
- var pointer = dragging.touch ? event[dragging.released ? 'changedTouches' : 'touches'][0] : event;
- dragging.pathX = pointer.pageX - dragging.initX;
- dragging.pathY = pointer.pageY - dragging.initY;
- dragging.path = sqrt(pow(dragging.pathX, 2) + pow(dragging.pathY, 2));
- dragging.delta = o.horizontal ? dragging.pathX : dragging.pathY;
-
- if (!dragging.released && dragging.path < 1) {
- return;
- }
-
- // We haven't decided whether this is a drag or not...
- if (!dragging.init) {
- // If the drag path was very short, maybe it's not a drag?
- if (dragging.path < o.dragThreshold) {
- // If the pointer was released, the path will not become longer and it's
- // definitely not a drag. If not released yet, decide on next iteration
- return dragging.released ? dragEnd() : undefined;
- } else {
- // If dragging path is sufficiently long we can confidently start a drag
- // if drag is in different direction than scroll, ignore it
- if (o.horizontal ? abs(dragging.pathX) > abs(dragging.pathY) : abs(dragging.pathX) < abs(dragging.pathY)) {
- dragging.init = 1;
- } else {
- return dragEnd();
- }
- }
- }
-
- //event.preventDefault();
-
- // Disable click on a source element, as it is unwelcome when dragging
- if (!dragging.locked && dragging.path > dragging.pathToLock) {
- dragging.locked = 1;
- dragging.source.addEventListener('click', disableOneEvent);
- }
-
- // Cancel dragging on release
- if (dragging.released) {
- dragEnd();
- }
-
- self.slideTo(round(dragging.initPos - dragging.delta));
- }
-
- /**
- * Stops dragging and cleans up after it.
- *
- * @return {Void}
- */
- function dragEnd() {
- dragging.released = true;
-
- dragTouchEvents.forEach(function (eventName) {
- dom.removeEventListener(document, eventName, dragHandler, {
- passive: true
- });
- });
-
- dragMouseEvents.forEach(function (eventName) {
- dom.removeEventListener(document, eventName, dragHandler, {
- passive: true
- });
- });
-
- // Make sure that disableOneEvent is not active in next tick.
- setTimeout(function () {
- dragging.source.removeEventListener('click', disableOneEvent);
- });
-
- dragging.init = 0;
- }
-
- /**
- * Check whether element is interactive.
- *
- * @return {Boolean}
- */
- function isInteractive(element) {
-
- while (element) {
-
- if (interactiveElements.indexOf(element.tagName) !== -1) {
- return true;
- }
-
- element = element.parentNode;
- }
- return false;
- }
-
- /**
- * Mouse wheel delta normalization.
- *
- * @param {Event} event
- *
- * @return {Int}
- */
- function normalizeWheelDelta(event) {
- // JELLYFIN MOD: Only use deltaX for horizontal scroll and remove IE8 support
- scrolling.curDelta = o.horizontal ? event.deltaX : event.deltaY;
- // END JELLYFIN MOD
-
- if (transform) {
- scrolling.curDelta /= event.deltaMode === 1 ? 3 : 100;
- }
- return scrolling.curDelta;
- }
-
- /**
- * Mouse scrolling handler.
- *
- * @param {Event} event
- *
- * @return {Void}
- */
- function scrollHandler(event) {
-
- ensureSizeInfo();
- var pos = self._pos;
- // Ignore if there is no scrolling to be done
- if (!o.scrollBy || pos.start === pos.end) {
- return;
- }
- var delta = normalizeWheelDelta(event);
-
- if (transform) {
- // Trap scrolling only when necessary and/or requested
- if (delta > 0 && pos.dest < pos.end || delta < 0 && pos.dest > pos.start) {
- //stopDefault(event, 1);
- }
-
- self.slideBy(o.scrollBy * delta);
- } else {
-
- if (isSmoothScrollSupported) {
- delta *= 12;
- }
-
- if (o.horizontal) {
- nativeScrollElement.scrollLeft += delta;
- } else {
- nativeScrollElement.scrollTop += delta;
- }
- }
- }
-
- /**
- * Destroys instance and everything it created.
- *
- * @return {Void}
- */
- self.destroy = function () {
-
- if (self.frameResizeObserver) {
- self.frameResizeObserver.disconnect();
- self.frameResizeObserver = null;
- }
-
- // Reset native FRAME element scroll
- dom.removeEventListener(frame, 'scroll', resetScroll, {
- passive: true
- });
-
- dom.removeEventListener(scrollSource, wheelEvent, scrollHandler, {
- passive: true
- });
-
- dom.removeEventListener(dragSourceElement, 'touchstart', dragInitSlidee, {
- passive: true
- });
-
- dom.removeEventListener(frame, 'click', onFrameClick, {
- passive: true,
- capture: true
- });
-
- dom.removeEventListener(dragSourceElement, 'mousedown', dragInitSlidee, {
- //passive: true
- });
-
- // Reset initialized status and return the instance
- self.initialized = 0;
- return self;
- };
-
- var contentRect = {};
-
- function onResize(entries) {
-
- var entry = entries[0];
-
- if (entry) {
-
- var newRect = entry.contentRect;
-
- // handle element being hidden
- if (newRect.width === 0 || newRect.height === 0) {
- return;
- }
-
- if (newRect.width !== contentRect.width || newRect.height !== contentRect.height) {
-
- contentRect = newRect;
-
- load(false);
- }
- }
- }
-
- function resetScroll() {
- if (o.horizontal) {
- this.scrollLeft = 0;
- } else {
- this.scrollTop = 0;
- }
- }
-
- function onFrameClick(e) {
- if (e.which === 1) {
- var focusableParent = focusManager.focusableParent(e.target);
- if (focusableParent && focusableParent !== document.activeElement) {
- focusableParent.focus();
- }
- }
- }
-
- self.getScrollPosition = function () {
-
- if (transform) {
- return self._pos.cur;
- }
-
- if (o.horizontal) {
- return nativeScrollElement.scrollLeft;
- } else {
- return nativeScrollElement.scrollTop;
- }
- };
-
- self.getScrollSize = function () {
-
- if (transform) {
- return slideeSize;
- }
-
- if (o.horizontal) {
- return nativeScrollElement.scrollWidth;
- } else {
- return nativeScrollElement.scrollHeight;
- }
- };
-
- /**
- * Initialize.
- *
- * @return {Object}
- */
- self.init = function () {
- if (self.initialized) {
- return;
- }
-
- if (!transform) {
- if (o.horizontal) {
- if (layoutManager.desktop && !o.hideScrollbar) {
- nativeScrollElement.classList.add('scrollX');
- } else {
- nativeScrollElement.classList.add('scrollX');
- nativeScrollElement.classList.add('hiddenScrollX');
-
- if (layoutManager.tv && o.allowNativeSmoothScroll !== false) {
- nativeScrollElement.classList.add('smoothScrollX');
- }
- }
-
- if (o.forceHideScrollbars) {
- nativeScrollElement.classList.add('hiddenScrollX-forced');
- }
- } else {
- if (layoutManager.desktop && !o.hideScrollbar) {
- nativeScrollElement.classList.add('scrollY');
- } else {
- nativeScrollElement.classList.add('scrollY');
- nativeScrollElement.classList.add('hiddenScrollY');
-
- if (layoutManager.tv && o.allowNativeSmoothScroll !== false) {
- nativeScrollElement.classList.add('smoothScrollY');
- }
- }
-
- if (o.forceHideScrollbars) {
- nativeScrollElement.classList.add('hiddenScrollY-forced');
- }
- }
- } else {
- frame.style.overflow = 'hidden';
- slideeElement.style['will-change'] = 'transform';
- slideeElement.style.transition = 'transform ' + o.speed + 'ms ease-out';
-
- if (o.horizontal) {
- slideeElement.classList.add('animatedScrollX');
- } else {
- slideeElement.classList.add('animatedScrollY');
- }
- }
-
- if (transform || layoutManager.tv) {
- // This can prevent others from being able to listen to mouse events
- dom.addEventListener(dragSourceElement, 'mousedown', dragInitSlidee, {
- //passive: true
- });
- }
-
- initFrameResizeObserver();
-
- if (transform) {
-
- dom.addEventListener(dragSourceElement, 'touchstart', dragInitSlidee, {
- passive: true
- });
-
- if (!o.horizontal) {
- dom.addEventListener(frame, 'scroll', resetScroll, {
- passive: true
- });
- }
-
- if (o.mouseWheel) {
- // Scrolling navigation
- dom.addEventListener(scrollSource, wheelEvent, scrollHandler, {
- passive: true
- });
- }
-
- } else if (o.horizontal) {
-
- // Don't bind to mouse events with vertical scroll since the mouse wheel can handle this natively
-
- if (o.mouseWheel) {
- // Scrolling navigation
- dom.addEventListener(scrollSource, wheelEvent, scrollHandler, {
- passive: true
- });
- }
- }
-
- dom.addEventListener(frame, 'click', onFrameClick, {
- passive: true,
- capture: true
- });
-
- // Mark instance as initialized
- self.initialized = 1;
-
- // Load
- load(true);
-
- // Return instance
- return self;
- };
+ // Need this for the magic wheel. With the animated scroll the magic wheel will run off of the screen
+ if (browser.web0s) {
+ options.enableNativeScroll = true;
+ }
+
+ // Private variables
+ var self = this;
+ self.options = o;
+
+ // Frame
+ var slideeElement = o.slidee ? o.slidee : sibling(frame.firstChild)[0];
+ self._pos = {
+ start: 0,
+ center: 0,
+ end: 0,
+ cur: 0,
+ dest: 0
};
+ var transform = !options.enableNativeScroll;
+
+ // Miscellaneous
+ var scrollSource = frame;
+ var dragSourceElement = o.dragSource ? o.dragSource : frame;
+ var dragging = {
+ released: 1
+ };
+ var scrolling = {
+ last: 0,
+ delta: 0,
+ resetTime: 200
+ };
+
+ // Expose properties
+ self.initialized = 0;
+ self.slidee = slideeElement;
+ self.options = o;
+ self.dragging = dragging;
+
+ var nativeScrollElement = frame;
+
+ function sibling(n, elem) {
+ var matched = [];
+
+ for (; n; n = n.nextSibling) {
+ if (n.nodeType === 1 && n !== elem) {
+ matched.push(n);
+ }
+ }
+ return matched;
+ }
+
+ var requiresReflow = true;
+
+ var frameSize = 0;
+ var slideeSize = 0;
+ function ensureSizeInfo() {
+ if (requiresReflow) {
+ requiresReflow = false;
+
+ // Reset global variables
+ frameSize = o.horizontal ? (frame).offsetWidth : (frame).offsetHeight;
+
+ slideeSize = o.scrollWidth || Math.max(slideeElement[o.horizontal ? 'offsetWidth' : 'offsetHeight'], slideeElement[o.horizontal ? 'scrollWidth' : 'scrollHeight']);
+
+ // Set position limits & relativess
+ self._pos.end = Math.max(slideeSize - frameSize, 0);
+ }
+ }
+
/**
- * Slide SLIDEE by amount of pixels.
+ * Loading function.
*
- * @param {Int} delta Pixels/Items. Positive means forward, negative means backward.
- * @param {Bool} immediate Reposition immediately without an animation.
+ * Populate arrays, set sizes, bind events, ...
*
+ * @param {Boolean} [isInit] Whether load is called from within self.init().
* @return {Void}
*/
- scrollerFactory.prototype.slideBy = function (delta, immediate) {
- if (!delta) {
+ function load(isInit) {
+ requiresReflow = true;
+
+ if (!isInit) {
+ ensureSizeInfo();
+
+ // Fix possible overflowing
+ var pos = self._pos;
+ self.slideTo(within(pos.dest, pos.start, pos.end));
+ }
+ }
+
+ function initFrameResizeObserver() {
+ var observerOptions = {};
+
+ self.frameResizeObserver = new ResizeObserver(onResize, observerOptions);
+
+ self.frameResizeObserver.observe(frame);
+ }
+
+ self.reload = function () {
+ load();
+ };
+
+ self.getScrollEventName = function () {
+ return transform ? 'scrollanimate' : 'scroll';
+ };
+
+ self.getScrollSlider = function () {
+ return slideeElement;
+ };
+
+ self.getScrollFrame = function () {
+ return frame;
+ };
+
+ function nativeScrollTo(container, pos, immediate) {
+ if (container.scroll) {
+ if (o.horizontal) {
+ container.scroll({
+ left: pos,
+ behavior: immediate ? 'instant' : 'smooth'
+ });
+ } else {
+ container.scroll({
+ top: pos,
+ behavior: immediate ? 'instant' : 'smooth'
+ });
+ }
+ } else if (!immediate && container.scrollTo) {
+ if (o.horizontal) {
+ container.scrollTo(Math.round(pos), 0);
+ } else {
+ container.scrollTo(0, Math.round(pos));
+ }
+ } else {
+ if (o.horizontal) {
+ container.scrollLeft = Math.round(pos);
+ } else {
+ container.scrollTop = Math.round(pos);
+ }
+ }
+ }
+
+ var lastAnimate;
+
+ /**
+ * Animate to a position.
+ *
+ * @param {Int} newPos New position.
+ * @param {Bool} immediate Reposition immediately without an animation.
+ *
+ * @return {Void}
+ */
+ self.slideTo = function (newPos, immediate, fullItemPos) {
+ ensureSizeInfo();
+ var pos = self._pos;
+
+ newPos = within(newPos, pos.start, pos.end);
+
+ if (!transform) {
+ nativeScrollTo(nativeScrollElement, newPos, immediate);
return;
}
- this.slideTo(this._pos.dest + delta, immediate);
- };
- /**
- * Core method for handling `toLocation` methods.
- *
- * @param {String} location
- * @param {Mixed} item
- * @param {Bool} immediate
- *
- * @return {Void}
- */
- scrollerFactory.prototype.to = function (location, item, immediate) {
- // Optional arguments logic
- if (type(item) === 'boolean') {
- immediate = item;
- item = undefined;
- }
+ // Update the animation object
+ var from = pos.cur;
+ immediate = immediate || dragging.init || !o.speed;
- if (item === undefined) {
- this.slideTo(this._pos[location], immediate);
- } else {
- var itemPos = this.getPos(item);
+ var now = new Date().getTime();
- if (itemPos) {
- this.slideTo(itemPos[location], immediate, itemPos);
+ if (o.autoImmediate) {
+ if (!immediate && (now - (lastAnimate || 0)) <= 50) {
+ immediate = true;
}
}
+
+ if (!immediate && o.skipSlideToWhenVisible && fullItemPos && fullItemPos.isVisible) {
+ return;
+ }
+
+ // Start animation rendering
+ // NOTE the dependency was modified here to fix a scrollbutton issue
+ pos.dest = newPos;
+ renderAnimateWithTransform(from, newPos, immediate);
+ lastAnimate = now;
};
+ function setStyleProperty(elem, name, value, speed, resetTransition) {
+ var style = elem.style;
+
+ if (resetTransition || browser.edge) {
+ style.transition = 'none';
+ void elem.offsetWidth;
+ }
+
+ style.transition = 'transform ' + speed + 'ms ease-out';
+ style[name] = value;
+ }
+
+ function dispatchScrollEventIfNeeded() {
+ if (o.dispatchScrollEvent) {
+ frame.dispatchEvent(new CustomEvent(self.getScrollEventName(), {
+ bubbles: true,
+ cancelable: false
+ }));
+ }
+ }
+
+ function renderAnimateWithTransform(fromPosition, toPosition, immediate) {
+ var speed = o.speed;
+
+ if (immediate) {
+ speed = o.immediateSpeed || 50;
+ }
+
+ if (o.horizontal) {
+ setStyleProperty(slideeElement, 'transform', 'translateX(' + (-Math.round(toPosition)) + 'px)', speed);
+ } else {
+ setStyleProperty(slideeElement, 'transform', 'translateY(' + (-Math.round(toPosition)) + 'px)', speed);
+ }
+ self._pos.cur = toPosition;
+
+ dispatchScrollEventIfNeeded();
+ }
+
+ function getBoundingClientRect(elem) {
+ // Support: BlackBerry 5, iOS 3 (original iPhone)
+ // If we don't have gBCR, just use 0,0 rather than error
+ if (elem.getBoundingClientRect) {
+ return elem.getBoundingClientRect();
+ } else {
+ return { top: 0, left: 0 };
+ }
+ }
+
/**
- * Animate element or the whole SLIDEE to the start of the frame.
+ * Returns the position object.
*
- * @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE.
- * @param {Bool} immediate Reposition immediately without an animation.
+ * @param {Mixed} item
+ *
+ * @return {Object}
+ */
+ self.getPos = function (item) {
+ var scrollElement = transform ? slideeElement : nativeScrollElement;
+ var slideeOffset = getBoundingClientRect(scrollElement);
+ var itemOffset = getBoundingClientRect(item);
+
+ var offset = o.horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
+
+ var size = o.horizontal ? itemOffset.width : itemOffset.height;
+ if (!size && size !== 0) {
+ size = item[o.horizontal ? 'offsetWidth' : 'offsetHeight'];
+ }
+
+ var centerOffset = o.centerOffset || 0;
+
+ if (!transform) {
+ centerOffset = 0;
+ if (o.horizontal) {
+ offset += nativeScrollElement.scrollLeft;
+ } else {
+ offset += nativeScrollElement.scrollTop;
+ }
+ }
+
+ ensureSizeInfo();
+
+ var currentStart = self._pos.cur;
+ var currentEnd = currentStart + frameSize;
+
+ console.debug('offset:' + offset + ' currentStart:' + currentStart + ' currentEnd:' + currentEnd);
+ var isVisible = offset >= currentStart && (offset + size) <= currentEnd;
+
+ return {
+ start: offset,
+ center: offset + centerOffset - (frameSize / 2) + (size / 2),
+ end: offset - frameSize + size,
+ size: size,
+ isVisible: isVisible
+ };
+ };
+
+ self.getCenterPosition = function (item) {
+ ensureSizeInfo();
+
+ var pos = self.getPos(item);
+ return within(pos.center, pos.start, pos.end);
+ };
+
+ function dragInitSlidee(event) {
+ var isTouch = event.type === 'touchstart';
+
+ // Ignore when already in progress, or interactive element in non-touch navivagion
+ if (dragging.init || !isTouch && isInteractive(event.target)) {
+ return;
+ }
+
+ // SLIDEE dragging conditions
+ if (!(isTouch ? o.touchDragging : o.mouseDragging && event.which < 2)) {
+ return;
+ }
+
+ if (!isTouch) {
+ // prevents native image dragging in Firefox
+ event.preventDefault();
+ }
+
+ // Reset dragging object
+ dragging.released = 0;
+
+ // Properties used in dragHandler
+ dragging.init = 0;
+ dragging.source = event.target;
+ dragging.touch = isTouch;
+ var pointer = isTouch ? event.touches[0] : event;
+ dragging.initX = pointer.pageX;
+ dragging.initY = pointer.pageY;
+ dragging.initPos = self._pos.cur;
+ dragging.start = +new Date();
+ dragging.time = 0;
+ dragging.path = 0;
+ dragging.delta = 0;
+ dragging.locked = 0;
+ dragging.pathToLock = isTouch ? 30 : 10;
+
+ // Bind dragging events
+ if (transform) {
+ if (isTouch) {
+ dragTouchEvents.forEach(function (eventName) {
+ dom.addEventListener(document, eventName, dragHandler, {
+ passive: true
+ });
+ });
+ } else {
+ dragMouseEvents.forEach(function (eventName) {
+ dom.addEventListener(document, eventName, dragHandler, {
+ passive: true
+ });
+ });
+ }
+ }
+ }
+
+ /**
+ * Handler for dragging scrollbar handle or SLIDEE.
+ *
+ * @param {Event} event
*
* @return {Void}
*/
- scrollerFactory.prototype.toStart = function (item, immediate) {
- this.to('start', item, immediate);
- };
+ function dragHandler(event) {
+ dragging.released = event.type === 'mouseup' || event.type === 'touchend';
+ var pointer = dragging.touch ? event[dragging.released ? 'changedTouches' : 'touches'][0] : event;
+ dragging.pathX = pointer.pageX - dragging.initX;
+ dragging.pathY = pointer.pageY - dragging.initY;
+ dragging.path = Math.sqrt(Math.pow(dragging.pathX, 2) + Math.pow(dragging.pathY, 2));
+ dragging.delta = o.horizontal ? dragging.pathX : dragging.pathY;
+
+ if (!dragging.released && dragging.path < 1) {
+ return;
+ }
+
+ // We haven't decided whether this is a drag or not...
+ if (!dragging.init) {
+ // If the drag path was very short, maybe it's not a drag?
+ if (dragging.path < o.dragThreshold) {
+ // If the pointer was released, the path will not become longer and it's
+ // definitely not a drag. If not released yet, decide on next iteration
+ return dragging.released ? dragEnd() : undefined;
+ } else {
+ // If dragging path is sufficiently long we can confidently start a drag
+ // if drag is in different direction than scroll, ignore it
+ if (o.horizontal ? Math.abs(dragging.pathX) > Math.abs(dragging.pathY) : Math.abs(dragging.pathX) < Math.abs(dragging.pathY)) {
+ dragging.init = 1;
+ } else {
+ return dragEnd();
+ }
+ }
+ }
+
+ //event.preventDefault();
+
+ // Disable click on a source element, as it is unwelcome when dragging
+ if (!dragging.locked && dragging.path > dragging.pathToLock) {
+ dragging.locked = 1;
+ dragging.source.addEventListener('click', disableOneEvent);
+ }
+
+ // Cancel dragging on release
+ if (dragging.released) {
+ dragEnd();
+ }
+
+ self.slideTo(Math.round(dragging.initPos - dragging.delta));
+ }
/**
- * Animate element or the whole SLIDEE to the end of the frame.
- *
- * @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE.
- * @param {Bool} immediate Reposition immediately without an animation.
+ * Stops dragging and cleans up after it.
*
* @return {Void}
*/
- scrollerFactory.prototype.toEnd = function (item, immediate) {
- this.to('end', item, immediate);
- };
+ function dragEnd() {
+ dragging.released = true;
+
+ dragTouchEvents.forEach(function (eventName) {
+ dom.removeEventListener(document, eventName, dragHandler, {
+ passive: true
+ });
+ });
+
+ dragMouseEvents.forEach(function (eventName) {
+ dom.removeEventListener(document, eventName, dragHandler, {
+ passive: true
+ });
+ });
+
+ // Make sure that disableOneEvent is not active in next tick.
+ setTimeout(function () {
+ dragging.source.removeEventListener('click', disableOneEvent);
+ });
+
+ dragging.init = 0;
+ }
/**
- * Animate element or the whole SLIDEE to the center of the frame.
+ * Check whether element is interactive.
*
- * @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE.
- * @param {Bool} immediate Reposition immediately without an animation.
+ * @return {Boolean}
+ */
+ function isInteractive(element) {
+ while (element) {
+ if (interactiveElements.indexOf(element.tagName) !== -1) {
+ return true;
+ }
+
+ element = element.parentNode;
+ }
+ return false;
+ }
+
+ /**
+ * Mouse wheel delta normalization.
+ *
+ * @param {Event} event
+ *
+ * @return {Int}
+ */
+ function normalizeWheelDelta(event) {
+ // JELLYFIN MOD: Only use deltaX for horizontal scroll and remove IE8 support
+ scrolling.curDelta = o.horizontal ? event.deltaX : event.deltaY;
+ // END JELLYFIN MOD
+
+ if (transform) {
+ scrolling.curDelta /= event.deltaMode === 1 ? 3 : 100;
+ }
+ return scrolling.curDelta;
+ }
+
+ /**
+ * Mouse scrolling handler.
+ *
+ * @param {Event} event
*
* @return {Void}
*/
- scrollerFactory.prototype.toCenter = function (item, immediate) {
- this.to('center', item, immediate);
+ function scrollHandler(event) {
+ ensureSizeInfo();
+ var pos = self._pos;
+ // Ignore if there is no scrolling to be done
+ if (!o.scrollBy || pos.start === pos.end) {
+ return;
+ }
+ var delta = normalizeWheelDelta(event);
+
+ if (transform) {
+ // Trap scrolling only when necessary and/or requested
+ if (delta > 0 && pos.dest < pos.end || delta < 0 && pos.dest > pos.start) {
+ //stopDefault(event, 1);
+ }
+
+ self.slideBy(o.scrollBy * delta);
+ } else {
+ if (isSmoothScrollSupported) {
+ delta *= 12;
+ }
+
+ if (o.horizontal) {
+ nativeScrollElement.scrollLeft += delta;
+ } else {
+ nativeScrollElement.scrollTop += delta;
+ }
+ }
+ }
+
+ /**
+ * Destroys instance and everything it created.
+ *
+ * @return {Void}
+ */
+ self.destroy = function () {
+ if (self.frameResizeObserver) {
+ self.frameResizeObserver.disconnect();
+ self.frameResizeObserver = null;
+ }
+
+ // Reset native FRAME element scroll
+ dom.removeEventListener(frame, 'scroll', resetScroll, {
+ passive: true
+ });
+
+ dom.removeEventListener(scrollSource, wheelEvent, scrollHandler, {
+ passive: true
+ });
+
+ dom.removeEventListener(dragSourceElement, 'touchstart', dragInitSlidee, {
+ passive: true
+ });
+
+ dom.removeEventListener(frame, 'click', onFrameClick, {
+ passive: true,
+ capture: true
+ });
+
+ dom.removeEventListener(dragSourceElement, 'mousedown', dragInitSlidee, {
+ //passive: true
+ });
+
+ // Reset initialized status and return the instance
+ self.initialized = 0;
+ return self;
};
- scrollerFactory.create = function (frame, options) {
- var instance = new scrollerFactory(frame, options);
- return Promise.resolve(instance);
+ var contentRect = {};
+
+ function onResize(entries) {
+ var entry = entries[0];
+
+ if (entry) {
+ var newRect = entry.contentRect;
+
+ // handle element being hidden
+ if (newRect.width === 0 || newRect.height === 0) {
+ return;
+ }
+
+ if (newRect.width !== contentRect.width || newRect.height !== contentRect.height) {
+ contentRect = newRect;
+
+ load(false);
+ }
+ }
+ }
+
+ function resetScroll() {
+ if (o.horizontal) {
+ this.scrollLeft = 0;
+ } else {
+ this.scrollTop = 0;
+ }
+ }
+
+ function onFrameClick(e) {
+ if (e.which === 1) {
+ var focusableParent = focusManager.focusableParent(e.target);
+ if (focusableParent && focusableParent !== document.activeElement) {
+ focusableParent.focus();
+ }
+ }
+ }
+
+ self.getScrollPosition = function () {
+ if (transform) {
+ return self._pos.cur;
+ }
+
+ if (o.horizontal) {
+ return nativeScrollElement.scrollLeft;
+ } else {
+ return nativeScrollElement.scrollTop;
+ }
};
- return scrollerFactory;
-});
+ self.getScrollSize = function () {
+ if (transform) {
+ return slideeSize;
+ }
+
+ if (o.horizontal) {
+ return nativeScrollElement.scrollWidth;
+ } else {
+ return nativeScrollElement.scrollHeight;
+ }
+ };
+
+ /**
+ * Initialize.
+ *
+ * @return {Object}
+ */
+ self.init = function () {
+ if (self.initialized) {
+ return;
+ }
+
+ if (!transform) {
+ if (o.horizontal) {
+ if (layoutManager.desktop && !o.hideScrollbar) {
+ nativeScrollElement.classList.add('scrollX');
+ } else {
+ nativeScrollElement.classList.add('scrollX');
+ nativeScrollElement.classList.add('hiddenScrollX');
+
+ if (layoutManager.tv && o.allowNativeSmoothScroll !== false) {
+ nativeScrollElement.classList.add('smoothScrollX');
+ }
+ }
+
+ if (o.forceHideScrollbars) {
+ nativeScrollElement.classList.add('hiddenScrollX-forced');
+ }
+ } else {
+ if (layoutManager.desktop && !o.hideScrollbar) {
+ nativeScrollElement.classList.add('scrollY');
+ } else {
+ nativeScrollElement.classList.add('scrollY');
+ nativeScrollElement.classList.add('hiddenScrollY');
+
+ if (layoutManager.tv && o.allowNativeSmoothScroll !== false) {
+ nativeScrollElement.classList.add('smoothScrollY');
+ }
+ }
+
+ if (o.forceHideScrollbars) {
+ nativeScrollElement.classList.add('hiddenScrollY-forced');
+ }
+ }
+ } else {
+ frame.style.overflow = 'hidden';
+ slideeElement.style['will-change'] = 'transform';
+ slideeElement.style.transition = 'transform ' + o.speed + 'ms ease-out';
+
+ if (o.horizontal) {
+ slideeElement.classList.add('animatedScrollX');
+ } else {
+ slideeElement.classList.add('animatedScrollY');
+ }
+ }
+
+ if (transform || layoutManager.tv) {
+ // This can prevent others from being able to listen to mouse events
+ dom.addEventListener(dragSourceElement, 'mousedown', dragInitSlidee, {
+ //passive: true
+ });
+ }
+
+ initFrameResizeObserver();
+
+ if (transform) {
+ dom.addEventListener(dragSourceElement, 'touchstart', dragInitSlidee, {
+ passive: true
+ });
+
+ if (!o.horizontal) {
+ dom.addEventListener(frame, 'scroll', resetScroll, {
+ passive: true
+ });
+ }
+
+ if (o.mouseWheel) {
+ // Scrolling navigation
+ dom.addEventListener(scrollSource, wheelEvent, scrollHandler, {
+ passive: true
+ });
+ }
+ } else if (o.horizontal) {
+ // Don't bind to mouse events with vertical scroll since the mouse wheel can handle this natively
+
+ if (o.mouseWheel) {
+ // Scrolling navigation
+ dom.addEventListener(scrollSource, wheelEvent, scrollHandler, {
+ passive: true
+ });
+ }
+ }
+
+ dom.addEventListener(frame, 'click', onFrameClick, {
+ passive: true,
+ capture: true
+ });
+
+ // Mark instance as initialized
+ self.initialized = 1;
+
+ // Load
+ load(true);
+
+ // Return instance
+ return self;
+ };
+};
+
+/**
+ * Slide SLIDEE by amount of pixels.
+ *
+ * @param {Int} delta Pixels/Items. Positive means forward, negative means backward.
+ * @param {Bool} immediate Reposition immediately without an animation.
+ *
+ * @return {Void}
+ */
+scrollerFactory.prototype.slideBy = function (delta, immediate) {
+ if (!delta) {
+ return;
+ }
+ this.slideTo(this._pos.dest + delta, immediate);
+};
+
+/**
+ * Core method for handling `toLocation` methods.
+ *
+ * @param {String} location
+ * @param {Mixed} item
+ * @param {Bool} immediate
+ *
+ * @return {Void}
+ */
+scrollerFactory.prototype.to = function (location, item, immediate) {
+ // Optional arguments logic
+ if (type(item) === 'boolean') {
+ immediate = item;
+ item = undefined;
+ }
+
+ if (item === undefined) {
+ this.slideTo(this._pos[location], immediate);
+ } else {
+ var itemPos = this.getPos(item);
+
+ if (itemPos) {
+ this.slideTo(itemPos[location], immediate, itemPos);
+ }
+ }
+};
+
+/**
+ * Animate element or the whole SLIDEE to the start of the frame.
+ *
+ * @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE.
+ * @param {Bool} immediate Reposition immediately without an animation.
+ *
+ * @return {Void}
+ */
+scrollerFactory.prototype.toStart = function (item, immediate) {
+ this.to('start', item, immediate);
+};
+
+/**
+ * Animate element or the whole SLIDEE to the end of the frame.
+ *
+ * @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE.
+ * @param {Bool} immediate Reposition immediately without an animation.
+ *
+ * @return {Void}
+ */
+scrollerFactory.prototype.toEnd = function (item, immediate) {
+ this.to('end', item, immediate);
+};
+
+/**
+ * Animate element or the whole SLIDEE to the center of the frame.
+ *
+ * @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE.
+ * @param {Bool} immediate Reposition immediately without an animation.
+ *
+ * @return {Void}
+ */
+scrollerFactory.prototype.toCenter = function (item, immediate) {
+ this.to('center', item, immediate);
+};
+
+scrollerFactory.create = function (frame, options) {
+ var instance = new scrollerFactory(frame, options);
+ return Promise.resolve(instance);
+};
+
+export default scrollerFactory;
diff --git a/src/manifest.json b/src/manifest.json
index fed1177e24..5b5ecd5516 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,6 +1,6 @@
{
"name": "Jellyfin",
- "description": "Jellyfin: the Free Software Media System.",
+ "description": "The Free Software Media System",
"lang": "en-US",
"short_name": "Jellyfin",
"start_url": "index.html#!/home.html",
diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js
index be5beb98ed..c167046cb9 100644
--- a/src/plugins/bookPlayer/plugin.js
+++ b/src/plugins/bookPlayer/plugin.js
@@ -2,6 +2,7 @@ import connectionManager from 'connectionManager';
import loading from 'loading';
import keyboardnavigation from 'keyboardnavigation';
import dialogHelper from 'dialogHelper';
+import dom from 'dom';
import events from 'events';
import 'css!./style';
import 'material-icons';
@@ -93,23 +94,22 @@ export class BookPlayer {
onWindowKeyUp(e) {
let key = keyboardnavigation.getKeyName(e);
- let rendition = this._rendition;
+
+ // TODO: depending on the event this can be the document or the rendition itself
+ let rendition = this._rendition || this;
let book = rendition.book;
+ if (this._loaded === false) return;
switch (key) {
case 'l':
case 'ArrowRight':
case 'Right':
- if (this._loaded) {
- book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next();
- }
+ book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next();
break;
case 'j':
case 'ArrowLeft':
case 'Left':
- if (this._loaded) {
- book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev();
- }
+ book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev();
break;
case 'Escape':
if (this._tocElement) {
@@ -123,6 +123,25 @@ export class BookPlayer {
}
}
+ onTouchStart(e) {
+ // TODO: depending on the event this can be the document or the rendition itself
+ let rendition = this._rendition || this;
+ let book = rendition.book;
+
+ // check that the event is from the book or the document
+ if (!book || this._loaded === false) return;
+
+ // epubjs stores pages off the screen or something for preloading
+ // get the modulus of the touch event to account for the increased width
+ if (!e.touches || e.touches.length === 0) return;
+ let touch = e.touches[0].clientX % dom.getWindowSize().innerWidth;
+ if (touch < dom.getWindowSize().innerWidth / 2) {
+ book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev();
+ } else {
+ book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next();
+ }
+ }
+
onDialogClosed() {
this.stop();
}
@@ -139,8 +158,11 @@ export class BookPlayer {
this.bindMediaElementEvents();
document.addEventListener('keyup', this.onWindowKeyUp);
+ document.addEventListener('touchstart', this.onTouchStart);
+
// FIXME: I don't really get why document keyup event is not triggered when epub is in focus
this._rendition.on('keyup', this.onWindowKeyUp);
+ this._rendition.on('touchstart', this.onTouchStart);
}
unbindMediaElementEvents() {
@@ -155,9 +177,13 @@ export class BookPlayer {
if (this._mediaElement) {
this.unbindMediaElementEvents();
}
+
document.removeEventListener('keyup', this.onWindowKeyUp);
+ document.removeEventListener('touchstart', this.onTouchStart);
+
if (this._rendition) {
this._rendition.off('keyup', this.onWindowKeyUp);
+ this._rendition.off('touchstart', this.onTouchStart);
}
}
@@ -169,13 +195,11 @@ export class BookPlayer {
createMediaElement() {
let elem = this._mediaElement;
-
if (elem) {
return elem;
}
elem = document.getElementById('bookPlayer');
-
if (!elem) {
elem = dialogHelper.createDialog({
exitAnimationDuration: 400,
@@ -185,6 +209,7 @@ export class BookPlayer {
exitAnimation: 'fadeout',
removeOnClose: true
});
+
elem.id = 'bookPlayer';
let html = '';
@@ -230,6 +255,7 @@ export class BookPlayer {
let cancellationToken = {
shouldCancel: false
};
+
this._cancellationToken = cancellationToken;
return rendition.display().then(() => {
@@ -253,7 +279,6 @@ export class BookPlayer {
epubElem.style.display = 'block';
rendition.on('relocated', (locations) => {
this._progress = book.locations.percentageFromCfi(locations.start.cfi);
-
events.trigger(this, 'timeupdate');
});
@@ -262,7 +287,7 @@ export class BookPlayer {
return resolve();
});
}, () => {
- console.error('Failed to display epub');
+ console.error('failed to display epub');
return reject();
});
});
diff --git a/src/plugins/chromecastPlayer/chromecastHelpers.js b/src/plugins/chromecastPlayer/chromecastHelper.js
similarity index 100%
rename from src/plugins/chromecastPlayer/chromecastHelpers.js
rename to src/plugins/chromecastPlayer/chromecastHelper.js
diff --git a/src/plugins/chromecastPlayer/plugin.js b/src/plugins/chromecastPlayer/plugin.js
index f4acc6d8b3..b7e6d05969 100644
--- a/src/plugins/chromecastPlayer/plugin.js
+++ b/src/plugins/chromecastPlayer/plugin.js
@@ -1,64 +1,71 @@
-define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', 'globalize', 'events', 'require', 'castSenderApiLoader'], function (appSettings, userSettings, playbackManager, connectionManager, globalize, events, require, castSenderApiLoader) {
- 'use strict';
+import appSettings from 'appSettings';
+import * as userSettings from 'userSettings';
+import playbackManager from 'playbackManager';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
+import events from 'events';
+import castSenderApiLoader from 'castSenderApiLoader';
- // Based on https://github.com/googlecast/CastVideos-chrome/blob/master/CastVideos.js
- var currentResolve;
- var currentReject;
+// Based on https://github.com/googlecast/CastVideos-chrome/blob/master/CastVideos.js
- var PlayerName = 'Google Cast';
+let currentResolve;
+let currentReject;
- function sendConnectionResult(isOk) {
- var resolve = currentResolve;
- var reject = currentReject;
+const PlayerName = 'Google Cast';
- currentResolve = null;
- currentReject = null;
+function sendConnectionResult(isOk) {
+ const resolve = currentResolve;
+ const reject = currentReject;
- if (isOk) {
- if (resolve) {
- resolve();
- }
+ currentResolve = null;
+ currentReject = null;
+
+ if (isOk) {
+ if (resolve) {
+ resolve();
+ }
+ } else {
+ if (reject) {
+ reject();
} else {
- if (reject) {
- reject();
- } else {
- playbackManager.removeActivePlayer(PlayerName);
- }
+ playbackManager.removeActivePlayer(PlayerName);
}
}
+}
- /**
- * Constants of states for Chromecast device
- **/
- var DEVICE_STATE = {
- 'IDLE': 0,
- 'ACTIVE': 1,
- 'WARNING': 2,
- 'ERROR': 3
- };
+/**
+ * Constants of states for Chromecast device
+ **/
+const DEVICE_STATE = {
+ 'IDLE': 0,
+ 'ACTIVE': 1,
+ 'WARNING': 2,
+ 'ERROR': 3
+};
- /**
- * Constants of states for CastPlayer
- **/
- var PLAYER_STATE = {
- 'IDLE': 'IDLE',
- 'LOADING': 'LOADING',
- 'LOADED': 'LOADED',
- 'PLAYING': 'PLAYING',
- 'PAUSED': 'PAUSED',
- 'STOPPED': 'STOPPED',
- 'SEEKING': 'SEEKING',
- 'ERROR': 'ERROR'
- };
+/**
+ * Constants of states for CastPlayer
+ **/
+const PLAYER_STATE = {
+ 'IDLE': 'IDLE',
+ 'LOADING': 'LOADING',
+ 'LOADED': 'LOADED',
+ 'PLAYING': 'PLAYING',
+ 'PAUSED': 'PAUSED',
+ 'STOPPED': 'STOPPED',
+ 'SEEKING': 'SEEKING',
+ 'ERROR': 'ERROR'
+};
- // production version registered with google
- // replace this value if you want to test changes on another instance
- var applicationStable = 'F007D354';
- var applicationUnstable = '6F511C87';
+// production version registered with google
+// replace this value if you want to test changes on another instance
+const applicationStable = 'F007D354';
+const applicationUnstable = '6F511C87';
- var messageNamespace = 'urn:x-cast:com.connectsdk';
+const messageNamespace = 'urn:x-cast:com.connectsdk';
- var CastPlayer = function () {
+class CastPlayer {
+ constructor() {
/* device variables */
// @type {DEVICE_STATE} A state for device
this.deviceState = DEVICE_STATE.IDLE;
@@ -79,7 +86,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
this.mediaStatusUpdateHandler = this.onMediaStatusUpdate.bind(this);
this.initializeCastPlayer();
- };
+ }
/**
* Initialize Cast media player
@@ -87,8 +94,8 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
* invoked once the API has finished initialization. The sessionListener and
* receiverListener may be invoked at any time afterwards, and possibly more than once.
*/
- CastPlayer.prototype.initializeCastPlayer = function () {
- var chrome = window.chrome;
+ initializeCastPlayer() {
+ const chrome = window.chrome;
if (!chrome) {
return;
}
@@ -98,35 +105,35 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
return;
}
- var applicationID = applicationStable;
+ let applicationID = applicationStable;
if (userSettings.chromecastVersion() === 'unstable') {
applicationID = applicationUnstable;
}
// request session
- var sessionRequest = new chrome.cast.SessionRequest(applicationID);
- var apiConfig = new chrome.cast.ApiConfig(sessionRequest,
+ const sessionRequest = new chrome.cast.SessionRequest(applicationID);
+ const apiConfig = new chrome.cast.ApiConfig(sessionRequest,
this.sessionListener.bind(this),
this.receiverListener.bind(this));
console.debug('chromecast.initialize');
chrome.cast.initialize(apiConfig, this.onInitSuccess.bind(this), this.errorHandler);
- };
+ }
/**
* Callback function for init success
*/
- CastPlayer.prototype.onInitSuccess = function () {
+ onInitSuccess() {
this.isInitialized = true;
console.debug('chromecast init success');
- };
+ }
/**
* Generic error callback function
*/
- CastPlayer.prototype.onError = function () {
+ onError() {
console.debug('chromecast error');
- };
+ }
/**
* @param {!Object} e A new session
@@ -135,7 +142,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
* join existing session and occur in Cast mode and media
* status gets synced up with current media of the session
*/
- CastPlayer.prototype.sessionListener = function (e) {
+ sessionListener(e) {
this.session = e;
if (this.session) {
if (this.session.media[0]) {
@@ -144,24 +151,15 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
this.onSessionConnected(e);
}
- };
-
- function alertText(text, title) {
- require(['alert'], function (alert) {
- alert.default({
- text: text,
- title: title
- });
- });
}
- CastPlayer.prototype.messageListener = function (namespace, message) {
+ messageListener(namespace, message) {
if (typeof (message) === 'string') {
message = JSON.parse(message);
}
if (message.type === 'playbackerror') {
- var errorCode = message.data;
+ const errorCode = message.data;
setTimeout(function () {
alertText(globalize.translate('MessagePlaybackError' + errorCode), globalize.translate('HeaderPlaybackError'));
}, 300);
@@ -172,14 +170,14 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
} else if (message.type) {
events.trigger(this, message.type, [message.data]);
}
- };
+ }
/**
* @param {string} e Receiver availability
* This indicates availability of receivers but
* does not provide a list of device IDs
*/
- CastPlayer.prototype.receiverListener = function (e) {
+ receiverListener(e) {
if (e === 'available') {
console.debug('chromecast receiver found');
this.hasReceivers = true;
@@ -187,12 +185,12 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
console.debug('chromecast receiver list empty');
this.hasReceivers = false;
}
- };
+ }
/**
* session update listener
*/
- CastPlayer.prototype.sessionUpdateListener = function (isAlive) {
+ sessionUpdateListener(isAlive) {
if (isAlive) {
console.debug('sessionUpdateListener: already alive');
} else {
@@ -207,28 +205,28 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
sendConnectionResult(false);
}
- };
+ }
/**
* Requests that a receiver application session be created or joined. By default, the SessionRequest
* passed to the API at initialization time is used; this may be overridden by passing a different
* session request in opt_sessionRequest.
*/
- CastPlayer.prototype.launchApp = function () {
+ launchApp() {
console.debug('chromecast launching app...');
chrome.cast.requestSession(this.onRequestSessionSuccess.bind(this), this.onLaunchError.bind(this));
- };
+ }
/**
* Callback function for request session success
* @param {Object} e A chrome.cast.Session object
*/
- CastPlayer.prototype.onRequestSessionSuccess = function (e) {
+ onRequestSessionSuccess(e) {
console.debug('chromecast session success: ' + e.sessionId);
this.onSessionConnected(e);
- };
+ }
- CastPlayer.prototype.onSessionConnected = function (session) {
+ onSessionConnected(session) {
this.session = session;
this.deviceState = DEVICE_STATE.ACTIVE;
@@ -244,46 +242,38 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
options: {},
command: 'Identify'
});
- };
-
- function onVolumeUpKeyDown() {
- playbackManager.volumeUp();
- }
-
- function onVolumeDownKeyDown() {
- playbackManager.volumeDown();
}
/**
* session update listener
*/
- CastPlayer.prototype.sessionMediaListener = function (e) {
+ sessionMediaListener(e) {
this.currentMediaSession = e;
this.currentMediaSession.addUpdateListener(this.mediaStatusUpdateHandler);
- };
+ }
/**
* Callback function for launch error
*/
- CastPlayer.prototype.onLaunchError = function () {
+ onLaunchError() {
console.debug('chromecast launch error');
this.deviceState = DEVICE_STATE.ERROR;
sendConnectionResult(false);
- };
+ }
/**
* Stops the running receiver application associated with the session.
*/
- CastPlayer.prototype.stopApp = function () {
+ stopApp() {
if (this.session) {
this.session.stop(this.onStopAppSuccess.bind(this, 'Session stopped'), this.errorHandler);
}
- };
+ }
/**
* Callback function for stop app success
*/
- CastPlayer.prototype.onStopAppSuccess = function (message) {
+ onStopAppSuccess(message) {
console.debug(message);
this.deviceState = DEVICE_STATE.IDLE;
@@ -292,13 +282,13 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
document.removeEventListener('volumedownbutton', onVolumeDownKeyDown, false);
this.currentMediaSession = null;
- };
+ }
/**
* Loads media into a running receiver application
* @param {Number} mediaIndex An index number to indicate current media content
*/
- CastPlayer.prototype.loadMedia = function (options, command) {
+ loadMedia(options, command) {
if (!this.session) {
console.debug('no session');
return Promise.reject();
@@ -320,20 +310,20 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
options: options,
command: command
});
- };
+ }
- CastPlayer.prototype.sendMessage = function (message) {
- var player = this;
+ sendMessage(message) {
+ const player = this;
- var receiverName = null;
+ let receiverName = null;
- var session = player.session;
+ const session = player.session;
if (session && session.receiver && session.receiver.friendlyName) {
receiverName = session.receiver.friendlyName;
}
- var apiClient;
+ let apiClient;
if (message.options && message.options.ServerId) {
apiClient = connectionManager.getApiClient(message.options.ServerId);
} else if (message.options && message.options.items && message.options.items.length) {
@@ -352,7 +342,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
receiverName: receiverName
});
- var bitrateSetting = appSettings.maxChromecastBitrate();
+ const bitrateSetting = appSettings.maxChromecastBitrate();
if (bitrateSetting) {
message.maxBitrate = bitrateSetting;
}
@@ -363,31 +353,31 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
}
return new Promise(function (resolve, reject) {
- require(['chromecastHelper'], function (chromecastHelper) {
+ import('./chromecastHelper').then(({ default: chromecastHelper }) => {
chromecastHelper.getServerAddress(apiClient).then(function (serverAddress) {
message.serverAddress = serverAddress;
player.sendMessageInternal(message).then(resolve, reject);
}, reject);
});
});
- };
+ }
- CastPlayer.prototype.sendMessageInternal = function (message) {
+ sendMessageInternal(message) {
message = JSON.stringify(message);
this.session.sendMessage(messageNamespace, message, this.onPlayCommandSuccess.bind(this), this.errorHandler);
return Promise.resolve();
- };
+ }
- CastPlayer.prototype.onPlayCommandSuccess = function () {
+ onPlayCommandSuccess() {
console.debug('Message was sent to receiver ok.');
- };
+ }
/**
* Callback function for loadMedia success
* @param {Object} mediaSession A new media object.
*/
- CastPlayer.prototype.onMediaDiscovered = function (how, mediaSession) {
+ onMediaDiscovered(how, mediaSession) {
console.debug('chromecast new media session ID:' + mediaSession.mediaSessionId + ' (' + how + ')');
this.currentMediaSession = mediaSession;
@@ -400,24 +390,24 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
}
this.currentMediaSession.addUpdateListener(this.mediaStatusUpdateHandler);
- };
+ }
/**
* Callback function for media status update from receiver
* @param {!Boolean} e true/false
*/
- CastPlayer.prototype.onMediaStatusUpdate = function (e) {
+ onMediaStatusUpdate(e) {
console.debug('chromecast updating media: ' + e);
if (e === false) {
this.castPlayerState = PLAYER_STATE.IDLE;
}
- };
+ }
/**
* Set media volume in Cast mode
* @param {Boolean} mute A boolean
*/
- CastPlayer.prototype.setReceiverVolume = function (mute, vol) {
+ setReceiverVolume(mute, vol) {
if (!this.currentMediaSession) {
console.debug('this.currentMediaSession is null');
return;
@@ -432,142 +422,161 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
this.mediaCommandSuccessCallback.bind(this),
this.errorHandler);
}
- };
+ }
/**
* Mute CC
*/
- CastPlayer.prototype.mute = function () {
+ mute() {
this.setReceiverVolume(true);
- };
+ }
/**
* Callback function for media command success
*/
- CastPlayer.prototype.mediaCommandSuccessCallback = function (info, e) {
+ mediaCommandSuccessCallback(info, e) {
console.debug(info);
- };
+ }
+}
- function normalizeImages(state) {
- if (state && state.NowPlayingItem) {
- var item = state.NowPlayingItem;
+function alertText(text, title) {
+ import('alert').then(({default: alert}) => {
+ alert({
+ text: text,
+ title: title
+ });
+ });
+}
- if (!item.ImageTags || !item.ImageTags.Primary) {
- if (item.PrimaryImageTag) {
- item.ImageTags = item.ImageTags || {};
- item.ImageTags.Primary = item.PrimaryImageTag;
- }
- }
- if (item.BackdropImageTag && item.BackdropItemId === item.Id) {
- item.BackdropImageTags = [item.BackdropImageTag];
- }
- if (item.BackdropImageTag && item.BackdropItemId !== item.Id) {
- item.ParentBackdropImageTags = [item.BackdropImageTag];
- item.ParentBackdropItemId = item.BackdropItemId;
+function onVolumeUpKeyDown() {
+ playbackManager.volumeUp();
+}
+
+function onVolumeDownKeyDown() {
+ playbackManager.volumeDown();
+}
+
+function normalizeImages(state) {
+ if (state && state.NowPlayingItem) {
+ const item = state.NowPlayingItem;
+
+ if (!item.ImageTags || !item.ImageTags.Primary) {
+ if (item.PrimaryImageTag) {
+ item.ImageTags = item.ImageTags || {};
+ item.ImageTags.Primary = item.PrimaryImageTag;
}
}
+ if (item.BackdropImageTag && item.BackdropItemId === item.Id) {
+ item.BackdropImageTags = [item.BackdropImageTag];
+ }
+ if (item.BackdropImageTag && item.BackdropItemId !== item.Id) {
+ item.ParentBackdropImageTags = [item.BackdropImageTag];
+ item.ParentBackdropItemId = item.BackdropItemId;
+ }
}
+}
- function getItemsForPlayback(apiClient, query) {
- var userId = apiClient.getCurrentUserId();
+function getItemsForPlayback(apiClient, query) {
+ const userId = apiClient.getCurrentUserId();
- if (query.Ids && query.Ids.split(',').length === 1) {
- return apiClient.getItem(userId, query.Ids.split(',')).then(function (item) {
- return {
- Items: [item],
- TotalRecordCount: 1
- };
- });
+ if (query.Ids && query.Ids.split(',').length === 1) {
+ return apiClient.getItem(userId, query.Ids.split(',')).then(function (item) {
+ return {
+ Items: [item],
+ TotalRecordCount: 1
+ };
+ });
+ } else {
+ query.Limit = query.Limit || 100;
+ query.ExcludeLocationTypes = 'Virtual';
+ query.EnableTotalRecordCount = false;
+
+ return apiClient.getItems(userId, query);
+ }
+}
+
+function bindEventForRelay(instance, eventName) {
+ events.on(instance._castPlayer, eventName, function (e, data) {
+ console.debug('cc: ' + eventName);
+ const state = instance.getPlayerStateInternal(data);
+
+ events.trigger(instance, eventName, [state]);
+ });
+}
+
+function initializeChromecast() {
+ const instance = this;
+ instance._castPlayer = new CastPlayer();
+
+ // To allow the native android app to override
+ document.dispatchEvent(new CustomEvent('chromecastloaded', {
+ detail: {
+ player: instance
+ }
+ }));
+
+ events.on(instance._castPlayer, 'connect', function (e) {
+ if (currentResolve) {
+ sendConnectionResult(true);
} else {
- query.Limit = query.Limit || 100;
- query.ExcludeLocationTypes = 'Virtual';
- query.EnableTotalRecordCount = false;
-
- return apiClient.getItems(userId, query);
+ playbackManager.setActivePlayer(PlayerName, instance.getCurrentTargetInfo());
}
- }
- function bindEventForRelay(instance, eventName) {
- events.on(instance._castPlayer, eventName, function (e, data) {
- console.debug('cc: ' + eventName);
- var state = instance.getPlayerStateInternal(data);
+ console.debug('cc: connect');
+ // Reset this so that statechange will fire
+ instance.lastPlayerData = null;
+ });
- events.trigger(instance, eventName, [state]);
- });
- }
+ events.on(instance._castPlayer, 'playbackstart', function (e, data) {
+ console.debug('cc: playbackstart');
- function initializeChromecast() {
- var instance = this;
- instance._castPlayer = new CastPlayer();
+ instance._castPlayer.initializeCastPlayer();
- // To allow the native android app to override
- document.dispatchEvent(new CustomEvent('chromecastloaded', {
- detail: {
- player: instance
- }
- }));
+ const state = instance.getPlayerStateInternal(data);
+ events.trigger(instance, 'playbackstart', [state]);
+ });
- events.on(instance._castPlayer, 'connect', function (e) {
- if (currentResolve) {
- sendConnectionResult(true);
- } else {
- playbackManager.setActivePlayer(PlayerName, instance.getCurrentTargetInfo());
- }
+ events.on(instance._castPlayer, 'playbackstop', function (e, data) {
+ console.debug('cc: playbackstop');
+ let state = instance.getPlayerStateInternal(data);
- console.debug('cc: connect');
- // Reset this so that statechange will fire
- instance.lastPlayerData = null;
- });
+ events.trigger(instance, 'playbackstop', [state]);
- events.on(instance._castPlayer, 'playbackstart', function (e, data) {
- console.debug('cc: playbackstart');
+ state = instance.lastPlayerData.PlayState || {};
+ const volume = state.VolumeLevel || 0.5;
+ const mute = state.IsMuted || false;
- instance._castPlayer.initializeCastPlayer();
+ // Reset this so the next query doesn't make it appear like content is playing.
+ instance.lastPlayerData = {};
+ instance.lastPlayerData.PlayState = {};
+ instance.lastPlayerData.PlayState.VolumeLevel = volume;
+ instance.lastPlayerData.PlayState.IsMuted = mute;
+ });
- var state = instance.getPlayerStateInternal(data);
- events.trigger(instance, 'playbackstart', [state]);
- });
+ events.on(instance._castPlayer, 'playbackprogress', function (e, data) {
+ console.debug('cc: positionchange');
+ const state = instance.getPlayerStateInternal(data);
- events.on(instance._castPlayer, 'playbackstop', function (e, data) {
- console.debug('cc: playbackstop');
- var state = instance.getPlayerStateInternal(data);
+ events.trigger(instance, 'timeupdate', [state]);
+ });
- events.trigger(instance, 'playbackstop', [state]);
+ bindEventForRelay(instance, 'timeupdate');
+ bindEventForRelay(instance, 'pause');
+ bindEventForRelay(instance, 'unpause');
+ bindEventForRelay(instance, 'volumechange');
+ bindEventForRelay(instance, 'repeatmodechange');
+ bindEventForRelay(instance, 'shufflequeuemodechange');
- state = instance.lastPlayerData.PlayState || {};
- var volume = state.VolumeLevel || 0.5;
- var mute = state.IsMuted || false;
+ events.on(instance._castPlayer, 'playstatechange', function (e, data) {
+ console.debug('cc: playstatechange');
+ const state = instance.getPlayerStateInternal(data);
- // Reset this so the next query doesn't make it appear like content is playing.
- instance.lastPlayerData = {};
- instance.lastPlayerData.PlayState = {};
- instance.lastPlayerData.PlayState.VolumeLevel = volume;
- instance.lastPlayerData.PlayState.IsMuted = mute;
- });
+ events.trigger(instance, 'pause', [state]);
+ });
+}
- events.on(instance._castPlayer, 'playbackprogress', function (e, data) {
- console.debug('cc: positionchange');
- var state = instance.getPlayerStateInternal(data);
-
- events.trigger(instance, 'timeupdate', [state]);
- });
-
- bindEventForRelay(instance, 'timeupdate');
- bindEventForRelay(instance, 'pause');
- bindEventForRelay(instance, 'unpause');
- bindEventForRelay(instance, 'volumechange');
- bindEventForRelay(instance, 'repeatmodechange');
- bindEventForRelay(instance, 'shufflequeuemodechange');
-
- events.on(instance._castPlayer, 'playstatechange', function (e, data) {
- console.debug('cc: playstatechange');
- var state = instance.getPlayerStateInternal(data);
-
- events.trigger(instance, 'pause', [state]);
- });
- }
-
- function ChromecastPlayer() {
+class ChromecastPlayer {
+ constructor() {
// playbackManager needs this
this.name = PlayerName;
this.type = 'mediaplayer';
@@ -575,11 +584,11 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
this.isLocalPlayer = false;
this.lastPlayerData = {};
- castSenderApiLoader.load().then(initializeChromecast.bind(this));
+ new castSenderApiLoader().load().then(initializeChromecast.bind(this));
}
- ChromecastPlayer.prototype.tryPair = function (target) {
- var castPlayer = this._castPlayer;
+ tryPair(target) {
+ const castPlayer = this._castPlayer;
if (castPlayer.deviceState !== DEVICE_STATE.ACTIVE && castPlayer.isInitialized) {
return new Promise(function (resolve, reject) {
@@ -593,23 +602,23 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
return Promise.reject();
}
- };
+ }
- ChromecastPlayer.prototype.getTargets = function () {
- var targets = [];
+ getTargets() {
+ const targets = [];
if (this._castPlayer && this._castPlayer.hasReceivers) {
targets.push(this.getCurrentTargetInfo());
}
return Promise.resolve(targets);
- };
+ }
// This is a privately used method
- ChromecastPlayer.prototype.getCurrentTargetInfo = function () {
- var appName = null;
+ getCurrentTargetInfo() {
+ let appName = null;
- var castPlayer = this._castPlayer;
+ const castPlayer = this._castPlayer;
if (castPlayer.session && castPlayer.session.receiver && castPlayer.session.receiver.friendlyName) {
appName = castPlayer.session.receiver.friendlyName;
@@ -640,10 +649,10 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
'PlayTrailers'
]
};
- };
+ }
- ChromecastPlayer.prototype.getPlayerStateInternal = function (data) {
- var triggerStateChange = false;
+ getPlayerStateInternal(data) {
+ let triggerStateChange = false;
if (data && !this.lastPlayerData) {
triggerStateChange = true;
}
@@ -660,12 +669,12 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
}
return data;
- };
+ }
- ChromecastPlayer.prototype.playWithCommand = function (options, command) {
+ playWithCommand(options, command) {
if (!options.items) {
- var apiClient = connectionManager.getApiClient(options.serverId);
- var instance = this;
+ const apiClient = connectionManager.getApiClient(options.serverId);
+ const instance = this;
return apiClient.getItem(apiClient.getCurrentUserId(), options.ids[0]).then(function (item) {
options.items = [item];
@@ -681,9 +690,9 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
}
return this._castPlayer.loadMedia(options, command);
- };
+ }
- ChromecastPlayer.prototype.seek = function (position) {
+ seek(position) {
position = parseInt(position);
position = position / 10000000;
@@ -694,55 +703,55 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
},
command: 'Seek'
});
- };
+ }
- ChromecastPlayer.prototype.setAudioStreamIndex = function (index) {
+ setAudioStreamIndex(index) {
this._castPlayer.sendMessage({
options: {
index: index
},
command: 'SetAudioStreamIndex'
});
- };
+ }
- ChromecastPlayer.prototype.setSubtitleStreamIndex = function (index) {
+ setSubtitleStreamIndex(index) {
this._castPlayer.sendMessage({
options: {
index: index
},
command: 'SetSubtitleStreamIndex'
});
- };
+ }
- ChromecastPlayer.prototype.setMaxStreamingBitrate = function (options) {
+ setMaxStreamingBitrate(options) {
this._castPlayer.sendMessage({
options: options,
command: 'SetMaxStreamingBitrate'
});
- };
+ }
- ChromecastPlayer.prototype.isFullscreen = function () {
- var state = this.lastPlayerData || {};
+ isFullscreen() {
+ let state = this.lastPlayerData || {};
state = state.PlayState || {};
return state.IsFullscreen;
- };
+ }
- ChromecastPlayer.prototype.nextTrack = function () {
+ nextTrack() {
this._castPlayer.sendMessage({
options: {},
command: 'NextTrack'
});
- };
+ }
- ChromecastPlayer.prototype.previousTrack = function () {
+ previousTrack() {
this._castPlayer.sendMessage({
options: {},
command: 'PreviousTrack'
});
- };
+ }
- ChromecastPlayer.prototype.volumeDown = function () {
- var vol = this._castPlayer.session.receiver.volume.level;
+ volumeDown() {
+ let vol = this._castPlayer.session.receiver.volume.level;
if (vol == null) {
vol = 0.5;
}
@@ -750,20 +759,20 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
vol = Math.max(vol, 0);
this._castPlayer.session.setReceiverVolumeLevel(vol);
- };
+ }
- ChromecastPlayer.prototype.endSession = function () {
- var instance = this;
+ endSession() {
+ const instance = this;
this.stop().then(function () {
setTimeout(function () {
instance._castPlayer.stopApp();
}, 1000);
});
- };
+ }
- ChromecastPlayer.prototype.volumeUp = function () {
- var vol = this._castPlayer.session.receiver.volume.level;
+ volumeUp() {
+ let vol = this._castPlayer.session.receiver.volume.level;
if (vol == null) {
vol = 0.5;
}
@@ -771,53 +780,53 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
vol = Math.min(vol, 1);
this._castPlayer.session.setReceiverVolumeLevel(vol);
- };
+ }
- ChromecastPlayer.prototype.setVolume = function (vol) {
+ setVolume(vol) {
vol = Math.min(vol, 100);
vol = Math.max(vol, 0);
vol = vol / 100;
this._castPlayer.session.setReceiverVolumeLevel(vol);
- };
+ }
- ChromecastPlayer.prototype.unpause = function () {
+ unpause() {
this._castPlayer.sendMessage({
options: {},
command: 'Unpause'
});
- };
+ }
- ChromecastPlayer.prototype.playPause = function () {
+ playPause() {
this._castPlayer.sendMessage({
options: {},
command: 'PlayPause'
});
- };
+ }
- ChromecastPlayer.prototype.pause = function () {
+ pause() {
this._castPlayer.sendMessage({
options: {},
command: 'Pause'
});
- };
+ }
- ChromecastPlayer.prototype.stop = function () {
+ stop() {
return this._castPlayer.sendMessage({
options: {},
command: 'Stop'
});
- };
+ }
- ChromecastPlayer.prototype.displayContent = function (options) {
+ displayContent(options) {
this._castPlayer.sendMessage({
options: options,
command: 'DisplayContent'
});
- };
+ }
- ChromecastPlayer.prototype.setMute = function (isMuted) {
- var castPlayer = this._castPlayer;
+ setMute(isMuted) {
+ const castPlayer = this._castPlayer;
if (isMuted) {
castPlayer.sendMessage({
@@ -830,21 +839,21 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
command: 'Unmute'
});
}
- };
+ }
- ChromecastPlayer.prototype.getRepeatMode = function () {
- var state = this.lastPlayerData || {};
+ getRepeatMode() {
+ let state = this.lastPlayerData || {};
state = state.PlayState || {};
return state.RepeatMode;
- };
+ }
- ChromecastPlayer.prototype.getQueueShuffleMode = function () {
- var state = this.lastPlayerData || {};
+ getQueueShuffleMode() {
+ let state = this.lastPlayerData || {};
state = state.PlayState || {};
return state.ShuffleMode;
- };
+ }
- ChromecastPlayer.prototype.playTrailers = function (item) {
+ playTrailers(item) {
this._castPlayer.sendMessage({
options: {
ItemId: item.Id,
@@ -852,177 +861,173 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
},
command: 'PlayTrailers'
});
- };
+ }
- ChromecastPlayer.prototype.setRepeatMode = function (mode) {
+ setRepeatMode(mode) {
this._castPlayer.sendMessage({
options: {
RepeatMode: mode
},
command: 'SetRepeatMode'
});
- };
+ }
- ChromecastPlayer.prototype.setQueueShuffleMode = function (value) {
+ setQueueShuffleMode(value) {
this._castPlayer.sendMessage({
options: {
ShuffleMode: value
},
command: 'SetShuffleQueue'
});
- };
+ }
- ChromecastPlayer.prototype.toggleMute = function () {
+ toggleMute() {
this._castPlayer.sendMessage({
options: {},
command: 'ToggleMute'
});
- };
+ }
- ChromecastPlayer.prototype.audioTracks = function () {
- var state = this.lastPlayerData || {};
+ audioTracks() {
+ let state = this.lastPlayerData || {};
state = state.NowPlayingItem || {};
- var streams = state.MediaStreams || [];
+ const streams = state.MediaStreams || [];
return streams.filter(function (s) {
return s.Type === 'Audio';
});
- };
+ }
- ChromecastPlayer.prototype.getAudioStreamIndex = function () {
- var state = this.lastPlayerData || {};
+ getAudioStreamIndex() {
+ let state = this.lastPlayerData || {};
state = state.PlayState || {};
return state.AudioStreamIndex;
- };
+ }
- ChromecastPlayer.prototype.subtitleTracks = function () {
- var state = this.lastPlayerData || {};
+ subtitleTracks() {
+ let state = this.lastPlayerData || {};
state = state.NowPlayingItem || {};
- var streams = state.MediaStreams || [];
+ const streams = state.MediaStreams || [];
return streams.filter(function (s) {
return s.Type === 'Subtitle';
});
- };
+ }
- ChromecastPlayer.prototype.getSubtitleStreamIndex = function () {
- var state = this.lastPlayerData || {};
+ getSubtitleStreamIndex() {
+ let state = this.lastPlayerData || {};
state = state.PlayState || {};
return state.SubtitleStreamIndex;
- };
+ }
- ChromecastPlayer.prototype.getMaxStreamingBitrate = function () {
- var state = this.lastPlayerData || {};
+ getMaxStreamingBitrate() {
+ let state = this.lastPlayerData || {};
state = state.PlayState || {};
return state.MaxStreamingBitrate;
- };
+ }
- ChromecastPlayer.prototype.getVolume = function () {
- var state = this.lastPlayerData || {};
+ getVolume() {
+ let state = this.lastPlayerData || {};
state = state.PlayState || {};
return state.VolumeLevel == null ? 100 : state.VolumeLevel;
- };
+ }
- ChromecastPlayer.prototype.isPlaying = function () {
- var state = this.lastPlayerData || {};
+ isPlaying() {
+ const state = this.lastPlayerData || {};
return state.NowPlayingItem != null;
- };
+ }
- ChromecastPlayer.prototype.isPlayingVideo = function () {
- var state = this.lastPlayerData || {};
+ isPlayingVideo() {
+ let state = this.lastPlayerData || {};
state = state.NowPlayingItem || {};
return state.MediaType === 'Video';
- };
+ }
- ChromecastPlayer.prototype.isPlayingAudio = function () {
- var state = this.lastPlayerData || {};
+ isPlayingAudio() {
+ let state = this.lastPlayerData || {};
state = state.NowPlayingItem || {};
return state.MediaType === 'Audio';
- };
+ }
- ChromecastPlayer.prototype.currentTime = function (val) {
+ currentTime(val) {
if (val != null) {
return this.seek(val);
}
- var state = this.lastPlayerData || {};
+ let state = this.lastPlayerData || {};
state = state.PlayState || {};
return state.PositionTicks;
- };
+ }
- ChromecastPlayer.prototype.duration = function () {
- var state = this.lastPlayerData || {};
+ duration() {
+ let state = this.lastPlayerData || {};
state = state.NowPlayingItem || {};
return state.RunTimeTicks;
- };
+ }
- ChromecastPlayer.prototype.getBufferedRanges = function () {
- var state = this.lastPlayerData || {};
+ getBufferedRanges() {
+ let state = this.lastPlayerData || {};
state = state.PlayState || {};
return state.BufferedRanges || [];
- };
+ }
- ChromecastPlayer.prototype.paused = function () {
- var state = this.lastPlayerData || {};
+ paused() {
+ let state = this.lastPlayerData || {};
state = state.PlayState || {};
return state.IsPaused;
- };
+ }
- ChromecastPlayer.prototype.isMuted = function () {
- var state = this.lastPlayerData || {};
+ isMuted() {
+ let state = this.lastPlayerData || {};
state = state.PlayState || {};
return state.IsMuted;
- };
+ }
- ChromecastPlayer.prototype.shuffle = function (item) {
- var apiClient = connectionManager.getApiClient(item.ServerId);
- var userId = apiClient.getCurrentUserId();
+ shuffle(item) {
+ const apiClient = connectionManager.getApiClient(item.ServerId);
+ const userId = apiClient.getCurrentUserId();
- var instance = this;
+ const instance = this;
apiClient.getItem(userId, item.Id).then(function (item) {
instance.playWithCommand({
-
items: [item]
-
}, 'Shuffle');
});
- };
+ }
- ChromecastPlayer.prototype.instantMix = function (item) {
- var apiClient = connectionManager.getApiClient(item.ServerId);
- var userId = apiClient.getCurrentUserId();
+ instantMix(item) {
+ const apiClient = connectionManager.getApiClient(item.ServerId);
+ const userId = apiClient.getCurrentUserId();
- var instance = this;
+ const instance = this;
apiClient.getItem(userId, item.Id).then(function (item) {
instance.playWithCommand({
-
items: [item]
-
}, 'InstantMix');
});
- };
+ }
- ChromecastPlayer.prototype.canPlayMediaType = function (mediaType) {
+ canPlayMediaType(mediaType) {
mediaType = (mediaType || '').toLowerCase();
return mediaType === 'audio' || mediaType === 'video';
- };
+ }
- ChromecastPlayer.prototype.canQueueMediaType = function (mediaType) {
+ canQueueMediaType(mediaType) {
return this.canPlayMediaType(mediaType);
- };
+ }
- ChromecastPlayer.prototype.queue = function (options) {
+ queue(options) {
this.playWithCommand(options, 'PlayLast');
- };
+ }
- ChromecastPlayer.prototype.queueNext = function (options) {
+ queueNext(options) {
this.playWithCommand(options, 'PlayNext');
- };
+ }
- ChromecastPlayer.prototype.play = function (options) {
+ play(options) {
if (options.items) {
return this.playWithCommand(options, 'PlayNow');
} else {
@@ -1030,50 +1035,48 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
throw new Error('serverId required!');
}
- var instance = this;
- var apiClient = connectionManager.getApiClient(options.serverId);
+ const instance = this;
+ const apiClient = connectionManager.getApiClient(options.serverId);
return getItemsForPlayback(apiClient, {
-
Ids: options.ids.join(',')
-
}).then(function (result) {
options.items = result.Items;
return instance.playWithCommand(options, 'PlayNow');
});
}
- };
+ }
- ChromecastPlayer.prototype.toggleFullscreen = function () {
+ toggleFullscreen() {
// not supported
- };
+ }
- ChromecastPlayer.prototype.beginPlayerUpdates = function () {
+ beginPlayerUpdates() {
// Setup polling here
- };
+ }
- ChromecastPlayer.prototype.endPlayerUpdates = function () {
+ endPlayerUpdates() {
// Stop polling here
- };
+ }
- ChromecastPlayer.prototype.getPlaylist = function () {
+ getPlaylist() {
return Promise.resolve([]);
- };
+ }
- ChromecastPlayer.prototype.getCurrentPlaylistItemId = function () {
- };
+ getCurrentPlaylistItemId() {
+ }
- ChromecastPlayer.prototype.setCurrentPlaylistItem = function (playlistItemId) {
+ setCurrentPlaylistItem(playlistItemId) {
return Promise.resolve();
- };
+ }
- ChromecastPlayer.prototype.removeFromPlaylist = function (playlistItemIds) {
+ removeFromPlaylist(playlistItemIds) {
return Promise.resolve();
- };
+ }
- ChromecastPlayer.prototype.getPlayerState = function () {
+ getPlayerState() {
return this.getPlayerStateInternal() || {};
- };
+ }
+}
- return ChromecastPlayer;
-});
+export default ChromecastPlayer;
diff --git a/src/plugins/htmlAudioPlayer/plugin.js b/src/plugins/htmlAudioPlayer/plugin.js
index 16fce8c9d1..acce15df88 100644
--- a/src/plugins/htmlAudioPlayer/plugin.js
+++ b/src/plugins/htmlAudioPlayer/plugin.js
@@ -1,91 +1,92 @@
-define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelper'], function (events, browser, require, appHost, appSettings, htmlMediaHelper) {
- 'use strict';
+import events from 'events';
+import browser from 'browser';
+import appHost from 'apphost';
+import * as htmlMediaHelper from 'htmlMediaHelper';
- function getDefaultProfile() {
- return new Promise(function (resolve, reject) {
- require(['browserdeviceprofile'], function (profileBuilder) {
- resolve(profileBuilder({}));
- });
+function getDefaultProfile() {
+ return import('browserdeviceprofile').then(({ default: profileBuilder }) => {
+ return profileBuilder({});
+ });
+}
+
+let fadeTimeout;
+function fade(instance, elem, startingVolume) {
+ instance._isFadingOut = true;
+
+ // Need to record the starting volume on each pass rather than querying elem.volume
+ // This is due to iOS safari not allowing volume changes and always returning the system volume value
+ const newVolume = Math.max(0, startingVolume - 0.15);
+ console.debug('fading volume to ' + newVolume);
+ elem.volume = newVolume;
+
+ if (newVolume <= 0) {
+ instance._isFadingOut = false;
+ return Promise.resolve();
+ }
+
+ return new Promise(function (resolve, reject) {
+ cancelFadeTimeout();
+ fadeTimeout = setTimeout(function () {
+ fade(instance, elem, newVolume).then(resolve, reject);
+ }, 100);
+ });
+}
+
+function cancelFadeTimeout() {
+ const timeout = fadeTimeout;
+ if (timeout) {
+ clearTimeout(timeout);
+ fadeTimeout = null;
+ }
+}
+
+function supportsFade() {
+ if (browser.tv) {
+ // Not working on tizen.
+ // We could possibly enable on other tv's, but all smart tv browsers tend to be pretty primitive
+ return false;
+ }
+
+ return true;
+}
+
+function requireHlsPlayer(callback) {
+ import('hlsjs').then(({ default: hls }) => {
+ window.Hls = hls;
+ callback();
+ });
+}
+
+function enableHlsPlayer(url, item, mediaSource, mediaType) {
+ if (!htmlMediaHelper.enableHlsJsPlayer(mediaSource.RunTimeTicks, mediaType)) {
+ return Promise.reject();
+ }
+
+ if (url.indexOf('.m3u8') !== -1) {
+ return Promise.resolve();
+ }
+
+ // issue head request to get content type
+ return new Promise(function (resolve, reject) {
+ import('fetchHelper').then((fetchHelper) => {
+ fetchHelper.ajax({
+ url: url,
+ type: 'HEAD'
+ }).then(function (response) {
+ const contentType = (response.headers.get('Content-Type') || '').toLowerCase();
+ if (contentType === 'application/x-mpegurl') {
+ resolve();
+ } else {
+ reject();
+ }
+ }, reject);
});
- }
+ });
+}
- var fadeTimeout;
- function fade(instance, elem, startingVolume) {
- instance._isFadingOut = true;
-
- // Need to record the starting volume on each pass rather than querying elem.volume
- // This is due to iOS safari not allowing volume changes and always returning the system volume value
- var newVolume = Math.max(0, startingVolume - 0.15);
- console.debug('fading volume to ' + newVolume);
- elem.volume = newVolume;
-
- if (newVolume <= 0) {
- instance._isFadingOut = false;
- return Promise.resolve();
- }
-
- return new Promise(function (resolve, reject) {
- cancelFadeTimeout();
- fadeTimeout = setTimeout(function () {
- fade(instance, elem, newVolume).then(resolve, reject);
- }, 100);
- });
- }
-
- function cancelFadeTimeout() {
- var timeout = fadeTimeout;
- if (timeout) {
- clearTimeout(timeout);
- fadeTimeout = null;
- }
- }
-
- function supportsFade() {
- if (browser.tv) {
- // Not working on tizen.
- // We could possibly enable on other tv's, but all smart tv browsers tend to be pretty primitive
- return false;
- }
-
- return true;
- }
-
- function requireHlsPlayer(callback) {
- require(['hlsjs'], function (hls) {
- window.Hls = hls;
- callback();
- });
- }
-
- function enableHlsPlayer(url, item, mediaSource, mediaType) {
- if (!htmlMediaHelper.enableHlsJsPlayer(mediaSource.RunTimeTicks, mediaType)) {
- return Promise.reject();
- }
-
- if (url.indexOf('.m3u8') !== -1) {
- return Promise.resolve();
- }
-
- // issue head request to get content type
- return new Promise(function (resolve, reject) {
- require(['fetchHelper'], function (fetchHelper) {
- fetchHelper.ajax({
- url: url,
- type: 'HEAD'
- }).then(function (response) {
- var contentType = (response.headers.get('Content-Type') || '').toLowerCase();
- if (contentType === 'application/x-mpegurl') {
- resolve();
- } else {
- reject();
- }
- }, reject);
- });
- });
- }
-
- function HtmlAudioPlayer() {
- var self = this;
+class HtmlAudioPlayer {
+ constructor() {
+ const self = this;
self.name = 'Html Audio Player';
self.type = 'mediaplayer';
@@ -99,7 +100,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
self._timeUpdated = false;
self._currentTime = null;
- var elem = createMediaElement();
+ const elem = createMediaElement();
return setCurrentSrc(elem, options);
};
@@ -109,11 +110,11 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
unBindEvents(elem);
bindEvents(elem);
- var val = options.url;
+ let val = options.url;
console.debug('playing url: ' + val);
// Convert to seconds
- var seconds = (options.playerStartPositionTicks || 0) / 10000000;
+ const seconds = (options.playerStartPositionTicks || 0) / 10000000;
if (seconds) {
val += '#t=' + seconds;
}
@@ -122,7 +123,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
self._currentPlayOptions = options;
- var crossOrigin = htmlMediaHelper.getCrossOriginValue(options.mediaSource);
+ const crossOrigin = htmlMediaHelper.getCrossOriginValue(options.mediaSource);
if (crossOrigin) {
elem.crossOrigin = crossOrigin;
}
@@ -130,9 +131,9 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
return enableHlsPlayer(val, options.item, options.mediaSource, 'Audio').then(function () {
return new Promise(function (resolve, reject) {
requireHlsPlayer(function () {
- var hls = new Hls({
+ const hls = new Hls({
manifestLoadingTimeOut: 20000,
- xhrSetup: function(xhr, url) {
+ xhrSetup: function (xhr, url) {
xhr.withCredentials = true;
}
});
@@ -183,8 +184,8 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
self.stop = function (destroyPlayer) {
cancelFadeTimeout();
- var elem = self._mediaElement;
- var src = self._currentSrc;
+ const elem = self._mediaElement;
+ const src = self._currentSrc;
if (elem && src) {
if (!destroyPlayer || !supportsFade()) {
@@ -198,7 +199,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
return Promise.resolve();
}
- var originalVolume = elem.volume;
+ const originalVolume = elem.volume;
return fade(self, elem, elem.volume).then(function () {
elem.pause();
@@ -219,7 +220,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
};
function createMediaElement() {
- var elem = self._mediaElement;
+ let elem = self._mediaElement;
if (elem) {
return elem;
@@ -248,7 +249,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
function onTimeUpdate() {
// Get the player position + the transcoding offset
- var time = this.currentTime;
+ const time = this.currentTime;
// Don't trigger events after user stop
if (!self._isFadingOut) {
@@ -287,11 +288,11 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
}
function onError() {
- var errorCode = this.error ? (this.error.code || 0) : 0;
- var errorMessage = this.error ? (this.error.message || '') : '';
+ const errorCode = this.error ? (this.error.code || 0) : 0;
+ const errorMessage = this.error ? (this.error.message || '') : '';
console.error('media element error: ' + errorCode.toString() + ' ' + errorMessage);
- var type;
+ let type;
switch (errorCode) {
case 1:
@@ -325,59 +326,59 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
}
}
- HtmlAudioPlayer.prototype.currentSrc = function () {
+ currentSrc() {
return this._currentSrc;
- };
+ }
- HtmlAudioPlayer.prototype.canPlayMediaType = function (mediaType) {
+ canPlayMediaType(mediaType) {
return (mediaType || '').toLowerCase() === 'audio';
- };
+ }
- HtmlAudioPlayer.prototype.getDeviceProfile = function (item) {
+ getDeviceProfile(item) {
if (appHost.getDeviceProfile) {
return appHost.getDeviceProfile(item);
}
return getDefaultProfile();
- };
+ }
// Save this for when playback stops, because querying the time at that point might return 0
- HtmlAudioPlayer.prototype.currentTime = function (val) {
- var mediaElement = this._mediaElement;
+ currentTime(val) {
+ const mediaElement = this._mediaElement;
if (mediaElement) {
if (val != null) {
mediaElement.currentTime = val / 1000;
return;
}
- var currentTime = this._currentTime;
+ const currentTime = this._currentTime;
if (currentTime) {
return currentTime * 1000;
}
return (mediaElement.currentTime || 0) * 1000;
}
- };
+ }
- HtmlAudioPlayer.prototype.duration = function (val) {
- var mediaElement = this._mediaElement;
+ duration(val) {
+ const mediaElement = this._mediaElement;
if (mediaElement) {
- var duration = mediaElement.duration;
+ const duration = mediaElement.duration;
if (htmlMediaHelper.isValidDuration(duration)) {
return duration * 1000;
}
}
return null;
- };
+ }
- HtmlAudioPlayer.prototype.seekable = function () {
- var mediaElement = this._mediaElement;
+ seekable() {
+ const mediaElement = this._mediaElement;
if (mediaElement) {
- var seekable = mediaElement.seekable;
+ const seekable = mediaElement.seekable;
if (seekable && seekable.length) {
- var start = seekable.start(0);
- var end = seekable.end(0);
+ let start = seekable.start(0);
+ let end = seekable.end(0);
if (!htmlMediaHelper.isValidDuration(start)) {
start = 0;
@@ -391,124 +392,120 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
return false;
}
- };
+ }
- HtmlAudioPlayer.prototype.getBufferedRanges = function () {
- var mediaElement = this._mediaElement;
+ getBufferedRanges() {
+ const mediaElement = this._mediaElement;
if (mediaElement) {
return htmlMediaHelper.getBufferedRanges(this, mediaElement);
}
return [];
- };
+ }
- HtmlAudioPlayer.prototype.pause = function () {
- var mediaElement = this._mediaElement;
+ pause() {
+ const mediaElement = this._mediaElement;
if (mediaElement) {
mediaElement.pause();
}
- };
+ }
// This is a retry after error
- HtmlAudioPlayer.prototype.resume = function () {
- var mediaElement = this._mediaElement;
+ resume() {
+ const mediaElement = this._mediaElement;
if (mediaElement) {
mediaElement.play();
}
- };
+ }
- HtmlAudioPlayer.prototype.unpause = function () {
- var mediaElement = this._mediaElement;
+ unpause() {
+ const mediaElement = this._mediaElement;
if (mediaElement) {
mediaElement.play();
}
- };
+ }
- HtmlAudioPlayer.prototype.paused = function () {
- var mediaElement = this._mediaElement;
+ paused() {
+ const mediaElement = this._mediaElement;
if (mediaElement) {
return mediaElement.paused;
}
return false;
- };
+ }
- HtmlAudioPlayer.prototype.setPlaybackRate = function (value) {
- var mediaElement = this._mediaElement;
+ setPlaybackRate(value) {
+ const mediaElement = this._mediaElement;
if (mediaElement) {
mediaElement.playbackRate = value;
}
- };
+ }
- HtmlAudioPlayer.prototype.getPlaybackRate = function () {
- var mediaElement = this._mediaElement;
+ getPlaybackRate() {
+ const mediaElement = this._mediaElement;
if (mediaElement) {
return mediaElement.playbackRate;
}
return null;
- };
+ }
- HtmlAudioPlayer.prototype.setVolume = function (val) {
- var mediaElement = this._mediaElement;
+ setVolume(val) {
+ const mediaElement = this._mediaElement;
if (mediaElement) {
mediaElement.volume = val / 100;
}
- };
+ }
- HtmlAudioPlayer.prototype.getVolume = function () {
- var mediaElement = this._mediaElement;
+ getVolume() {
+ const mediaElement = this._mediaElement;
if (mediaElement) {
return Math.min(Math.round(mediaElement.volume * 100), 100);
}
- };
+ }
- HtmlAudioPlayer.prototype.volumeUp = function () {
+ volumeUp() {
this.setVolume(Math.min(this.getVolume() + 2, 100));
- };
+ }
- HtmlAudioPlayer.prototype.volumeDown = function () {
+ volumeDown() {
this.setVolume(Math.max(this.getVolume() - 2, 0));
- };
+ }
- HtmlAudioPlayer.prototype.setMute = function (mute) {
- var mediaElement = this._mediaElement;
+ setMute(mute) {
+ const mediaElement = this._mediaElement;
if (mediaElement) {
mediaElement.muted = mute;
}
- };
+ }
- HtmlAudioPlayer.prototype.isMuted = function () {
- var mediaElement = this._mediaElement;
+ isMuted() {
+ const mediaElement = this._mediaElement;
if (mediaElement) {
return mediaElement.muted;
}
return false;
- };
-
- HtmlAudioPlayer.prototype.destroy = function () {
-
- };
-
- var supportedFeatures;
-
- function getSupportedFeatures() {
- var list = [];
- var audio = document.createElement('audio');
-
- if (typeof audio.playbackRate === 'number') {
- list.push('PlaybackRate');
- }
-
- return list;
}
- HtmlAudioPlayer.prototype.supports = function (feature) {
+ supports(feature) {
if (!supportedFeatures) {
supportedFeatures = getSupportedFeatures();
}
return supportedFeatures.indexOf(feature) !== -1;
- };
+ }
+}
- return HtmlAudioPlayer;
-});
+let supportedFeatures;
+
+function getSupportedFeatures() {
+ const list = [];
+ const audio = document.createElement('audio');
+
+ if (typeof audio.playbackRate === 'number') {
+ list.push('PlaybackRate');
+ }
+
+ return list;
+}
+
+export default HtmlAudioPlayer;
diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js
index d52f0eb5b3..525372ac88 100644
--- a/src/plugins/htmlVideoPlayer/plugin.js
+++ b/src/plugins/htmlVideoPlayer/plugin.js
@@ -1132,7 +1132,7 @@ function tryRemoveElement(elem) {
*/
getCueCss(appearance, selector) {
return `${selector}::cue {
- ${appearance.text.map((s) => `${s.name}:${s.value}!important;`).join('')}
+ ${appearance.text.map((s) => s.value !== undefined && s.value !== '' ? `${s.name}:${s.value}!important;` : '').join('')}
}`;
}
@@ -1150,7 +1150,7 @@ function tryRemoveElement(elem) {
document.getElementsByTagName('head')[0].appendChild(styleElem);
}
- styleElem.innerHTML = this.getCueCss(subtitleAppearanceHelper.getStyles(userSettings.getSubtitleAppearanceSettings(), true), '.htmlvideoplayer');
+ styleElem.innerHTML = this.getCueCss(subtitleAppearanceHelper.getStyles(userSettings.getSubtitleAppearanceSettings()), '.htmlvideoplayer');
});
}
@@ -1195,17 +1195,28 @@ function tryRemoveElement(elem) {
// download the track json
this.fetchSubtitles(track, item).then(function (data) {
- // show in ui
- console.debug(`downloaded ${data.TrackEvents.length} track events`);
- // add some cues to show the text
- // in safari, the cues need to be added before setting the track mode to showing
- for (const trackEvent of data.TrackEvents) {
- const trackCueObject = window.VTTCue || window.TextTrackCue;
- const cue = new trackCueObject(trackEvent.StartPositionTicks / 10000000, trackEvent.EndPositionTicks / 10000000, normalizeTrackEventText(trackEvent.Text, false));
+ import('userSettings').then((userSettings) => {
+ // show in ui
+ console.debug(`downloaded ${data.TrackEvents.length} track events`);
- trackElement.addCue(cue);
- }
- trackElement.mode = 'showing';
+ const subtitleAppearance = userSettings.getSubtitleAppearanceSettings();
+ const cueLine = parseInt(subtitleAppearance.verticalPosition, 10);
+
+ // add some cues to show the text
+ // in safari, the cues need to be added before setting the track mode to showing
+ for (const trackEvent of data.TrackEvents) {
+ const trackCueObject = window.VTTCue || window.TextTrackCue;
+ const cue = new trackCueObject(trackEvent.StartPositionTicks / 10000000, trackEvent.EndPositionTicks / 10000000, normalizeTrackEventText(trackEvent.Text, false));
+
+ if (cue.line === 'auto') {
+ cue.line = cueLine;
+ }
+
+ trackElement.addCue(cue);
+ }
+
+ trackElement.mode = 'showing';
+ });
});
}
diff --git a/src/plugins/htmlVideoPlayer/style.css b/src/plugins/htmlVideoPlayer/style.css
index b83a7816f5..880ea86743 100644
--- a/src/plugins/htmlVideoPlayer/style.css
+++ b/src/plugins/htmlVideoPlayer/style.css
@@ -33,16 +33,22 @@ video::-webkit-media-controls {
text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1);
-webkit-font-smoothing: antialiased;
font-family: inherit;
+ line-height: normal; /* Restore value. See -webkit-media-text-track-container 'line-height' */
}
-.htmlvideoplayer-moveupsubtitles::-webkit-media-text-track-display {
- /* style the text itself */
- margin-top: -2em;
+.htmlvideoplayer::-webkit-media-text-track-container {
+ font-size: 170% !important; /* Override element inline style */
+ line-height: 50%; /* Child element cannot set line height smaller than its parent has. This allow smaller values for children */
+}
+
+.htmlvideoplayer::-webkit-media-text-track-display {
+ max-width: 70%;
+ margin-left: 15%;
}
.videoSubtitles {
position: fixed;
- bottom: 10%;
+ bottom: 0;
text-align: center;
left: 0;
right: 0;
@@ -53,7 +59,6 @@ video::-webkit-media-controls {
.videoSubtitlesInner {
max-width: 70%;
background-color: rgba(0, 0, 0, 0.8);
- padding: 0.25em;
margin: auto;
display: inline-block;
}
diff --git a/src/plugins/logoScreensaver/plugin.js b/src/plugins/logoScreensaver/plugin.js
index bdd1d34e79..61b8f8a6d6 100644
--- a/src/plugins/logoScreensaver/plugin.js
+++ b/src/plugins/logoScreensaver/plugin.js
@@ -1,165 +1,165 @@
-define(['pluginManager'], function (pluginManager) {
- return function () {
- var self = this;
+import pluginManager from 'pluginManager';
- self.name = 'Logo ScreenSaver';
- self.type = 'screensaver';
- self.id = 'logoscreensaver';
- self.supportsAnonymous = true;
+export default function () {
+ const self = this;
- var interval;
+ self.name = 'Logo ScreenSaver';
+ self.type = 'screensaver';
+ self.id = 'logoscreensaver';
+ self.supportsAnonymous = true;
- function animate() {
- var animations = [
+ let interval;
- bounceInLeft,
- bounceInRight,
- swing,
- tada,
- wobble,
- rotateIn,
- rotateOut
- ];
+ function animate() {
+ const animations = [
- var elem = document.querySelector('.logoScreenSaverImage');
+ bounceInLeft,
+ bounceInRight,
+ swing,
+ tada,
+ wobble,
+ rotateIn,
+ rotateOut
+ ];
- if (elem && elem.animate) {
- var random = getRandomInt(0, animations.length - 1);
+ const elem = document.querySelector('.logoScreenSaverImage');
- animations[random](elem, 1);
+ if (elem && elem.animate) {
+ const random = getRandomInt(0, animations.length - 1);
+
+ animations[random](elem, 1);
+ }
+ }
+
+ function getRandomInt(min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ function bounceInLeft(elem, iterations) {
+ const keyframes = [
+ { transform: 'translate3d(-3000px, 0, 0)', opacity: '0', offset: 0 },
+ { transform: 'translate3d(25px, 0, 0)', opacity: '1', offset: 0.6 },
+ { transform: 'translate3d(-100px, 0, 0)', offset: 0.75 },
+ { transform: 'translate3d(5px, 0, 0)', offset: 0.9 },
+ { transform: 'none', opacity: '1', offset: 1 }];
+ const timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
+ return elem.animate(keyframes, timing);
+ }
+
+ function bounceInRight(elem, iterations) {
+ const keyframes = [
+ { transform: 'translate3d(3000px, 0, 0)', opacity: '0', offset: 0 },
+ { transform: 'translate3d(-25px, 0, 0)', opacity: '1', offset: 0.6 },
+ { transform: 'translate3d(100px, 0, 0)', offset: 0.75 },
+ { transform: 'translate3d(-5px, 0, 0)', offset: 0.9 },
+ { transform: 'none', opacity: '1', offset: 1 }];
+ const timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
+ return elem.animate(keyframes, timing);
+ }
+
+ function swing(elem, iterations) {
+ const keyframes = [
+ { transform: 'translate(0%)', offset: 0 },
+ { transform: 'rotate3d(0, 0, 1, 15deg)', offset: 0.2 },
+ { transform: 'rotate3d(0, 0, 1, -10deg)', offset: 0.4 },
+ { transform: 'rotate3d(0, 0, 1, 5deg)', offset: 0.6 },
+ { transform: 'rotate3d(0, 0, 1, -5deg)', offset: 0.8 },
+ { transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1 }];
+ const timing = { duration: 900, iterations: iterations };
+ return elem.animate(keyframes, timing);
+ }
+
+ function tada(elem, iterations) {
+ const keyframes = [
+ { transform: 'scale3d(1, 1, 1)', offset: 0 },
+ { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)', offset: 0.1 },
+ { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)', offset: 0.2 },
+ { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.3 },
+ { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.4 },
+ { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.5 },
+ { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.6 },
+ { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.7 },
+ { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.8 },
+ { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.9 },
+ { transform: 'scale3d(1, 1, 1)', offset: 1 }];
+ const timing = { duration: 900, iterations: iterations };
+ return elem.animate(keyframes, timing);
+ }
+
+ function wobble(elem, iterations) {
+ const keyframes = [
+ { transform: 'translate(0%)', offset: 0 },
+ { transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)', offset: 0.15 },
+ { transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)', offset: 0.45 },
+ { transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)', offset: 0.6 },
+ { transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)', offset: 0.75 },
+ { transform: 'translateX(0%)', offset: 1 }];
+ const timing = { duration: 900, iterations: iterations };
+ return elem.animate(keyframes, timing);
+ }
+
+ function rotateIn(elem, iterations) {
+ const keyframes = [{ transform: 'rotate3d(0, 0, 1, -200deg)', opacity: '0', transformOrigin: 'center', offset: 0 },
+ { transform: 'none', opacity: '1', transformOrigin: 'center', offset: 1 }];
+ const timing = { duration: 900, iterations: iterations };
+ return elem.animate(keyframes, timing);
+ }
+
+ function rotateOut(elem, iterations) {
+ const keyframes = [{ transform: 'none', opacity: '1', transformOrigin: 'center', offset: 0 },
+ { transform: 'rotate3d(0, 0, 1, 200deg)', opacity: '0', transformOrigin: 'center', offset: 1 }];
+ const timing = { duration: 900, iterations: iterations };
+ return elem.animate(keyframes, timing);
+ }
+
+ function fadeOut(elem, iterations) {
+ const keyframes = [
+ { opacity: '1', offset: 0 },
+ { opacity: '0', offset: 1 }];
+ const timing = { duration: 400, iterations: iterations };
+ return elem.animate(keyframes, timing);
+ }
+
+ function stopInterval() {
+ if (interval) {
+ clearInterval(interval);
+ interval = null;
+ }
+ }
+
+ self.show = function () {
+ import('css!' + pluginManager.mapPath(self, 'style.css')).then(() => {
+ let elem = document.querySelector('.logoScreenSaver');
+
+ if (!elem) {
+ elem = document.createElement('div');
+ elem.classList.add('logoScreenSaver');
+ document.body.appendChild(elem);
+
+ elem.innerHTML = '
';
}
- }
- function getRandomInt(min, max) {
- return Math.floor(Math.random() * (max - min + 1)) + min;
- }
-
- function bounceInLeft(elem, iterations) {
- var keyframes = [
- { transform: 'translate3d(-3000px, 0, 0)', opacity: '0', offset: 0 },
- { transform: 'translate3d(25px, 0, 0)', opacity: '1', offset: 0.6 },
- { transform: 'translate3d(-100px, 0, 0)', offset: 0.75 },
- { transform: 'translate3d(5px, 0, 0)', offset: 0.9 },
- { transform: 'none', opacity: '1', offset: 1 }];
- var timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
- return elem.animate(keyframes, timing);
- }
-
- function bounceInRight(elem, iterations) {
- var keyframes = [
- { transform: 'translate3d(3000px, 0, 0)', opacity: '0', offset: 0 },
- { transform: 'translate3d(-25px, 0, 0)', opacity: '1', offset: 0.6 },
- { transform: 'translate3d(100px, 0, 0)', offset: 0.75 },
- { transform: 'translate3d(-5px, 0, 0)', offset: 0.9 },
- { transform: 'none', opacity: '1', offset: 1 }];
- var timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
- return elem.animate(keyframes, timing);
- }
-
- function swing(elem, iterations) {
- var keyframes = [
- { transform: 'translate(0%)', offset: 0 },
- { transform: 'rotate3d(0, 0, 1, 15deg)', offset: 0.2 },
- { transform: 'rotate3d(0, 0, 1, -10deg)', offset: 0.4 },
- { transform: 'rotate3d(0, 0, 1, 5deg)', offset: 0.6 },
- { transform: 'rotate3d(0, 0, 1, -5deg)', offset: 0.8 },
- { transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1 }];
- var timing = { duration: 900, iterations: iterations };
- return elem.animate(keyframes, timing);
- }
-
- function tada(elem, iterations) {
- var keyframes = [
- { transform: 'scale3d(1, 1, 1)', offset: 0 },
- { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)', offset: 0.1 },
- { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)', offset: 0.2 },
- { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.3 },
- { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.4 },
- { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.5 },
- { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.6 },
- { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.7 },
- { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.8 },
- { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.9 },
- { transform: 'scale3d(1, 1, 1)', offset: 1 }];
- var timing = { duration: 900, iterations: iterations };
- return elem.animate(keyframes, timing);
- }
-
- function wobble(elem, iterations) {
- var keyframes = [
- { transform: 'translate(0%)', offset: 0 },
- { transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)', offset: 0.15 },
- { transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)', offset: 0.45 },
- { transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)', offset: 0.6 },
- { transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)', offset: 0.75 },
- { transform: 'translateX(0%)', offset: 1 }];
- var timing = { duration: 900, iterations: iterations };
- return elem.animate(keyframes, timing);
- }
-
- function rotateIn(elem, iterations) {
- var keyframes = [{ transform: 'rotate3d(0, 0, 1, -200deg)', opacity: '0', transformOrigin: 'center', offset: 0 },
- { transform: 'none', opacity: '1', transformOrigin: 'center', offset: 1 }];
- var timing = { duration: 900, iterations: iterations };
- return elem.animate(keyframes, timing);
- }
-
- function rotateOut(elem, iterations) {
- var keyframes = [{ transform: 'none', opacity: '1', transformOrigin: 'center', offset: 0 },
- { transform: 'rotate3d(0, 0, 1, 200deg)', opacity: '0', transformOrigin: 'center', offset: 1 }];
- var timing = { duration: 900, iterations: iterations };
- return elem.animate(keyframes, timing);
- }
-
- function fadeOut(elem, iterations) {
- var keyframes = [
- { opacity: '1', offset: 0 },
- { opacity: '0', offset: 1 }];
- var timing = { duration: 400, iterations: iterations };
- return elem.animate(keyframes, timing);
- }
-
- function stopInterval() {
- if (interval) {
- clearInterval(interval);
- interval = null;
- }
- }
-
- self.show = function () {
- require(['css!' + pluginManager.mapPath(self, 'style.css')], function () {
- var elem = document.querySelector('.logoScreenSaver');
-
- if (!elem) {
- elem = document.createElement('div');
- elem.classList.add('logoScreenSaver');
- document.body.appendChild(elem);
-
- elem.innerHTML = '
';
- }
-
- stopInterval();
- interval = setInterval(animate, 3000);
- });
- };
-
- self.hide = function () {
stopInterval();
-
- var elem = document.querySelector('.logoScreenSaver');
-
- if (elem) {
- var onAnimationFinish = function () {
- elem.parentNode.removeChild(elem);
- };
-
- if (elem.animate) {
- var animation = fadeOut(elem, 1);
- animation.onfinish = onAnimationFinish;
- } else {
- onAnimationFinish();
- }
- }
- };
+ interval = setInterval(animate, 3000);
+ });
};
-});
+
+ self.hide = function () {
+ stopInterval();
+
+ const elem = document.querySelector('.logoScreenSaver');
+
+ if (elem) {
+ const onAnimationFinish = function () {
+ elem.parentNode.removeChild(elem);
+ };
+
+ if (elem.animate) {
+ const animation = fadeOut(elem, 1);
+ animation.onfinish = onAnimationFinish;
+ } else {
+ onAnimationFinish();
+ }
+ }
+ };
+}
diff --git a/src/plugins/playAccessValidation/plugin.js b/src/plugins/playAccessValidation/plugin.js
index 5148d2b821..a9fbeda9a9 100644
--- a/src/plugins/playAccessValidation/plugin.js
+++ b/src/plugins/playAccessValidation/plugin.js
@@ -1,33 +1,26 @@
-define(['connectionManager', 'globalize'], function (connectionManager, globalize) {
- 'use strict';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
- function getRequirePromise(deps) {
- return new Promise(function (resolve, reject) {
- require(deps, resolve);
- });
- }
+function showErrorMessage() {
+ return import('alert').then(({default: alert}) => {
+ return alert(globalize.translate('MessagePlayAccessRestricted'));
+ });
+}
- function showErrorMessage() {
- return getRequirePromise(['alert']).then(function (alert) {
- return alert(globalize.translate('MessagePlayAccessRestricted')).then(function () {
- return Promise.reject();
- });
- });
- }
-
- function PlayAccessValidation() {
+class PlayAccessValidation {
+ constructor() {
this.name = 'Playback validation';
this.type = 'preplayintercept';
this.id = 'playaccessvalidation';
this.order = -2;
}
- PlayAccessValidation.prototype.intercept = function (options) {
- var item = options.item;
+ intercept(options) {
+ const item = options.item;
if (!item) {
return Promise.resolve();
}
- var serverId = item.ServerId;
+ const serverId = item.ServerId;
if (!serverId) {
return Promise.resolve();
}
@@ -44,7 +37,7 @@ define(['connectionManager', 'globalize'], function (connectionManager, globaliz
return showErrorMessage();
});
- };
+ }
+}
- return PlayAccessValidation;
-});
+export default PlayAccessValidation;
diff --git a/src/plugins/sessionPlayer/plugin.js b/src/plugins/sessionPlayer/plugin.js
index 89a18a96cc..c68e0d7a4a 100644
--- a/src/plugins/sessionPlayer/plugin.js
+++ b/src/plugins/sessionPlayer/plugin.js
@@ -1,6 +1,9 @@
define(['playbackManager', 'events', 'serverNotifications', 'connectionManager'], function (playbackManager, events, serverNotifications, connectionManager) {
'use strict';
+ serverNotifications = serverNotifications.default || serverNotifications;
+ playbackManager = playbackManager.default || playbackManager;
+
function getActivePlayerId() {
var info = playbackManager.getPlayerInfo();
return info ? info.id : null;
diff --git a/src/scripts/autoThemes.js b/src/scripts/autoThemes.js
new file mode 100644
index 0000000000..dad8c10322
--- /dev/null
+++ b/src/scripts/autoThemes.js
@@ -0,0 +1,8 @@
+import * as userSettings from 'userSettings';
+import skinManager from 'skinManager';
+import connectionManager from 'connectionManager';
+import events from 'events';
+
+events.on(connectionManager, 'localusersignedin', function (e, user) {
+ skinManager.setTheme(userSettings.theme());
+});
diff --git a/src/scripts/browserDeviceProfile.js b/src/scripts/browserDeviceProfile.js
index 382ffbed1a..5befcb1df5 100644
--- a/src/scripts/browserDeviceProfile.js
+++ b/src/scripts/browserDeviceProfile.js
@@ -1,6 +1,8 @@
define(['browser'], function (browser) {
'use strict';
+ browser = browser.default || browser;
+
function canPlayH264(videoTestElement) {
return !!(videoTestElement.canPlayType && videoTestElement.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
}
diff --git a/src/scripts/inputManager.js b/src/scripts/inputManager.js
index aa2c2945c0..3432c9e351 100644
--- a/src/scripts/inputManager.js
+++ b/src/scripts/inputManager.js
@@ -35,6 +35,7 @@ import appHost from 'apphost';
if (eventListenerCount) {
eventListenerCount--;
}
+
dom.removeEventListener(scope, 'command', fn, {});
}
diff --git a/src/scripts/itembynamedetailpage.js b/src/scripts/itembynamedetailpage.js
index eaeecba275..f464f3b9e9 100644
--- a/src/scripts/itembynamedetailpage.js
+++ b/src/scripts/itembynamedetailpage.js
@@ -1,369 +1,374 @@
-define(['connectionManager', 'listView', 'cardBuilder', 'imageLoader', 'libraryBrowser', 'globalize', 'emby-itemscontainer', 'emby-button'], function (connectionManager, listView, cardBuilder, imageLoader, libraryBrowser, globalize) {
- 'use strict';
+import connectionManager from 'connectionManager';
+import listView from 'listView';
+import cardBuilder from 'cardBuilder';
+import imageLoader from 'imageLoader';
+import globalize from 'globalize';
+import 'emby-itemscontainer';
+import 'emby-button';
- function renderItems(page, item) {
- var sections = [];
+function renderItems(page, item) {
+ const sections = [];
- if (item.ArtistCount) {
- sections.push({
- name: globalize.translate('TabArtists'),
- type: 'MusicArtist'
- });
- }
-
- if (item.ProgramCount && item.Type == 'Person') {
- sections.push({
- name: globalize.translate('HeaderUpcomingOnTV'),
- type: 'Program'
- });
- }
-
- if (item.MovieCount) {
- sections.push({
- name: globalize.translate('TabMovies'),
- type: 'Movie'
- });
- }
-
- if (item.SeriesCount) {
- sections.push({
- name: globalize.translate('TabShows'),
- type: 'Series'
- });
- }
-
- if (item.EpisodeCount) {
- sections.push({
- name: globalize.translate('TabEpisodes'),
- type: 'Episode'
- });
- }
-
- if (item.TrailerCount) {
- sections.push({
- name: globalize.translate('TabTrailers'),
- type: 'Trailer'
- });
- }
-
- if (item.AlbumCount) {
- sections.push({
- name: globalize.translate('TabAlbums'),
- type: 'MusicAlbum'
- });
- }
-
- if (item.MusicVideoCount) {
- sections.push({
- name: globalize.translate('TabMusicVideos'),
- type: 'MusicVideo'
- });
- }
-
- var elem = page.querySelector('#childrenContent');
- elem.innerHTML = sections.map(function (section) {
- var html = '';
- var sectionClass = 'verticalSection';
-
- if (section.type === 'Audio') {
- sectionClass += ' verticalSection-extrabottompadding';
- }
-
- html += '
';
- html += '
';
- html += '
';
- html += '
';
- return html += '
';
- }).join('');
- var sectionElems = elem.querySelectorAll('.verticalSection');
-
- for (var i = 0, length = sectionElems.length; i < length; i++) {
- renderSection(page, item, sectionElems[i], sectionElems[i].getAttribute('data-type'));
- }
- }
-
- function renderSection(page, item, element, type) {
- switch (type) {
- case 'Program':
- loadItems(element, item, type, {
- MediaTypes: '',
- IncludeItemTypes: 'Program',
- PersonTypes: '',
- ArtistIds: '',
- AlbumArtistIds: '',
- Limit: 10,
- SortBy: 'StartDate'
- }, {
- shape: 'overflowBackdrop',
- showTitle: true,
- centerText: true,
- overlayMoreButton: true,
- preferThumb: true,
- overlayText: false,
- showAirTime: true,
- showAirDateTime: true,
- showChannelName: true
- });
- break;
-
- case 'Movie':
- loadItems(element, item, type, {
- MediaTypes: '',
- IncludeItemTypes: 'Movie',
- PersonTypes: '',
- ArtistIds: '',
- AlbumArtistIds: '',
- Limit: 10,
- SortBy: 'SortName'
- }, {
- shape: 'overflowPortrait',
- showTitle: true,
- centerText: true,
- overlayMoreButton: true,
- overlayText: false,
- showYear: true
- });
- break;
-
- case 'MusicVideo':
- loadItems(element, item, type, {
- MediaTypes: '',
- IncludeItemTypes: 'MusicVideo',
- PersonTypes: '',
- ArtistIds: '',
- AlbumArtistIds: '',
- Limit: 10,
- SortBy: 'SortName'
- }, {
- shape: 'overflowPortrait',
- showTitle: true,
- centerText: true,
- overlayPlayButton: true
- });
- break;
-
- case 'Trailer':
- loadItems(element, item, type, {
- MediaTypes: '',
- IncludeItemTypes: 'Trailer',
- PersonTypes: '',
- ArtistIds: '',
- AlbumArtistIds: '',
- Limit: 10,
- SortBy: 'SortName'
- }, {
- shape: 'overflowPortrait',
- showTitle: true,
- centerText: true,
- overlayPlayButton: true
- });
- break;
-
- case 'Series':
- loadItems(element, item, type, {
- MediaTypes: '',
- IncludeItemTypes: 'Series',
- PersonTypes: '',
- ArtistIds: '',
- AlbumArtistIds: '',
- Limit: 10,
- SortBy: 'SortName'
- }, {
- shape: 'overflowPortrait',
- showTitle: true,
- centerText: true,
- overlayMoreButton: true
- });
- break;
-
- case 'MusicAlbum':
- loadItems(element, item, type, {
- MediaTypes: '',
- IncludeItemTypes: 'MusicAlbum',
- PersonTypes: '',
- ArtistIds: '',
- AlbumArtistIds: '',
- SortOrder: 'Descending',
- SortBy: 'ProductionYear,Sortname'
- }, {
- shape: 'overflowSquare',
- playFromHere: true,
- showTitle: true,
- showYear: true,
- coverImage: true,
- centerText: true,
- overlayPlayButton: true
- });
- break;
-
- case 'MusicArtist':
- loadItems(element, item, type, {
- MediaTypes: '',
- IncludeItemTypes: 'MusicArtist',
- PersonTypes: '',
- ArtistIds: '',
- AlbumArtistIds: '',
- Limit: 8,
- SortBy: 'SortName'
- }, {
- shape: 'overflowSquare',
- playFromHere: true,
- showTitle: true,
- showParentTitle: true,
- coverImage: true,
- centerText: true,
- overlayPlayButton: true
- });
- break;
-
- case 'Episode':
- loadItems(element, item, type, {
- MediaTypes: '',
- IncludeItemTypes: 'Episode',
- PersonTypes: '',
- ArtistIds: '',
- AlbumArtistIds: '',
- Limit: 6,
- SortBy: 'SortName'
- }, {
- shape: 'overflowBackdrop',
- showTitle: true,
- showParentTitle: true,
- centerText: true,
- overlayPlayButton: true
- });
- break;
-
- case 'Audio':
- loadItems(element, item, type, {
- MediaTypes: '',
- IncludeItemTypes: 'Audio',
- PersonTypes: '',
- ArtistIds: '',
- AlbumArtistIds: '',
- SortBy: 'AlbumArtist,Album,SortName'
- }, {
- playFromHere: true,
- action: 'playallfromhere',
- smallIcon: true,
- artist: true
- });
- }
- }
-
- function loadItems(element, item, type, query, listOptions) {
- query = getQuery(query, item);
- getItemsFunction(query, item)(query.StartIndex, query.Limit, query.Fields).then(function (result) {
- var html = '';
-
- if (query.Limit && result.TotalRecordCount > query.Limit) {
- var link = element.querySelector('a');
- link.classList.remove('hide');
- link.setAttribute('href', getMoreItemsHref(item, type));
- } else {
- element.querySelector('a').classList.add('hide');
- }
-
- listOptions.items = result.Items;
- var itemsContainer = element.querySelector('.itemsContainer');
-
- if (type == 'Audio') {
- html = listView.getListViewHtml(listOptions);
- itemsContainer.classList.remove('vertical-wrap');
- itemsContainer.classList.add('vertical-list');
- } else {
- html = cardBuilder.getCardsHtml(listOptions);
- itemsContainer.classList.add('vertical-wrap');
- itemsContainer.classList.remove('vertical-list');
- }
-
- itemsContainer.innerHTML = html;
- imageLoader.lazyChildren(itemsContainer);
+ if (item.ArtistCount) {
+ sections.push({
+ name: globalize.translate('TabArtists'),
+ type: 'MusicArtist'
});
}
- function getMoreItemsHref(item, type) {
- if (item.Type == 'Genre') {
- return 'list.html?type=' + type + '&genreId=' + item.Id + '&serverId=' + item.ServerId;
- }
-
- if (item.Type == 'MusicGenre') {
- return 'list.html?type=' + type + '&musicGenreId=' + item.Id + '&serverId=' + item.ServerId;
- }
-
- if (item.Type == 'Studio') {
- return 'list.html?type=' + type + '&studioId=' + item.Id + '&serverId=' + item.ServerId;
- }
-
- if (item.Type == 'MusicArtist') {
- return 'list.html?type=' + type + '&artistId=' + item.Id + '&serverId=' + item.ServerId;
- }
-
- if (item.Type == 'Person') {
- return 'list.html?type=' + type + '&personId=' + item.Id + '&serverId=' + item.ServerId;
- }
-
- return 'list.html?type=' + type + '&parentId=' + item.Id + '&serverId=' + item.ServerId;
+ if (item.ProgramCount && item.Type === 'Person') {
+ sections.push({
+ name: globalize.translate('HeaderUpcomingOnTV'),
+ type: 'Program'
+ });
}
- function addCurrentItemToQuery(query, item) {
- if (item.Type == 'Person') {
- query.PersonIds = item.Id;
- } else if (item.Type == 'Genre') {
- query.Genres = item.Name;
- } else if (item.Type == 'MusicGenre') {
- query.Genres = item.Name;
- } else if (item.Type == 'GameGenre') {
- query.Genres = item.Name;
- } else if (item.Type == 'Studio') {
- query.StudioIds = item.Id;
- } else if (item.Type == 'MusicArtist') {
- query.AlbumArtistIds = item.Id;
+ if (item.MovieCount) {
+ sections.push({
+ name: globalize.translate('TabMovies'),
+ type: 'Movie'
+ });
+ }
+
+ if (item.SeriesCount) {
+ sections.push({
+ name: globalize.translate('TabShows'),
+ type: 'Series'
+ });
+ }
+
+ if (item.EpisodeCount) {
+ sections.push({
+ name: globalize.translate('TabEpisodes'),
+ type: 'Episode'
+ });
+ }
+
+ if (item.TrailerCount) {
+ sections.push({
+ name: globalize.translate('TabTrailers'),
+ type: 'Trailer'
+ });
+ }
+
+ if (item.AlbumCount) {
+ sections.push({
+ name: globalize.translate('TabAlbums'),
+ type: 'MusicAlbum'
+ });
+ }
+
+ if (item.MusicVideoCount) {
+ sections.push({
+ name: globalize.translate('TabMusicVideos'),
+ type: 'MusicVideo'
+ });
+ }
+
+ const elem = page.querySelector('#childrenContent');
+ elem.innerHTML = sections.map(function (section) {
+ let html = '';
+ let sectionClass = 'verticalSection';
+
+ if (section.type === 'Audio') {
+ sectionClass += ' verticalSection-extrabottompadding';
}
+
+ html += '
';
+ html += '
';
+ html += '
';
+ html += '
';
+ html += '
';
+ return html;
+ }).join('');
+ const sectionElems = elem.querySelectorAll('.verticalSection');
+
+ for (let i = 0, length = sectionElems.length; i < length; i++) {
+ renderSection(page, item, sectionElems[i], sectionElems[i].getAttribute('data-type'));
+ }
+}
+
+function renderSection(page, item, element, type) {
+ switch (type) {
+ case 'Program':
+ loadItems(element, item, type, {
+ MediaTypes: '',
+ IncludeItemTypes: 'Program',
+ PersonTypes: '',
+ ArtistIds: '',
+ AlbumArtistIds: '',
+ Limit: 10,
+ SortBy: 'StartDate'
+ }, {
+ shape: 'overflowBackdrop',
+ showTitle: true,
+ centerText: true,
+ overlayMoreButton: true,
+ preferThumb: true,
+ overlayText: false,
+ showAirTime: true,
+ showAirDateTime: true,
+ showChannelName: true
+ });
+ break;
+
+ case 'Movie':
+ loadItems(element, item, type, {
+ MediaTypes: '',
+ IncludeItemTypes: 'Movie',
+ PersonTypes: '',
+ ArtistIds: '',
+ AlbumArtistIds: '',
+ Limit: 10,
+ SortBy: 'SortName'
+ }, {
+ shape: 'overflowPortrait',
+ showTitle: true,
+ centerText: true,
+ overlayMoreButton: true,
+ overlayText: false,
+ showYear: true
+ });
+ break;
+
+ case 'MusicVideo':
+ loadItems(element, item, type, {
+ MediaTypes: '',
+ IncludeItemTypes: 'MusicVideo',
+ PersonTypes: '',
+ ArtistIds: '',
+ AlbumArtistIds: '',
+ Limit: 10,
+ SortBy: 'SortName'
+ }, {
+ shape: 'overflowPortrait',
+ showTitle: true,
+ centerText: true,
+ overlayPlayButton: true
+ });
+ break;
+
+ case 'Trailer':
+ loadItems(element, item, type, {
+ MediaTypes: '',
+ IncludeItemTypes: 'Trailer',
+ PersonTypes: '',
+ ArtistIds: '',
+ AlbumArtistIds: '',
+ Limit: 10,
+ SortBy: 'SortName'
+ }, {
+ shape: 'overflowPortrait',
+ showTitle: true,
+ centerText: true,
+ overlayPlayButton: true
+ });
+ break;
+
+ case 'Series':
+ loadItems(element, item, type, {
+ MediaTypes: '',
+ IncludeItemTypes: 'Series',
+ PersonTypes: '',
+ ArtistIds: '',
+ AlbumArtistIds: '',
+ Limit: 10,
+ SortBy: 'SortName'
+ }, {
+ shape: 'overflowPortrait',
+ showTitle: true,
+ centerText: true,
+ overlayMoreButton: true
+ });
+ break;
+
+ case 'MusicAlbum':
+ loadItems(element, item, type, {
+ MediaTypes: '',
+ IncludeItemTypes: 'MusicAlbum',
+ PersonTypes: '',
+ ArtistIds: '',
+ AlbumArtistIds: '',
+ SortOrder: 'Descending',
+ SortBy: 'ProductionYear,Sortname'
+ }, {
+ shape: 'overflowSquare',
+ playFromHere: true,
+ showTitle: true,
+ showYear: true,
+ coverImage: true,
+ centerText: true,
+ overlayPlayButton: true
+ });
+ break;
+
+ case 'MusicArtist':
+ loadItems(element, item, type, {
+ MediaTypes: '',
+ IncludeItemTypes: 'MusicArtist',
+ PersonTypes: '',
+ ArtistIds: '',
+ AlbumArtistIds: '',
+ Limit: 8,
+ SortBy: 'SortName'
+ }, {
+ shape: 'overflowSquare',
+ playFromHere: true,
+ showTitle: true,
+ showParentTitle: true,
+ coverImage: true,
+ centerText: true,
+ overlayPlayButton: true
+ });
+ break;
+
+ case 'Episode':
+ loadItems(element, item, type, {
+ MediaTypes: '',
+ IncludeItemTypes: 'Episode',
+ PersonTypes: '',
+ ArtistIds: '',
+ AlbumArtistIds: '',
+ Limit: 6,
+ SortBy: 'SortName'
+ }, {
+ shape: 'overflowBackdrop',
+ showTitle: true,
+ showParentTitle: true,
+ centerText: true,
+ overlayPlayButton: true
+ });
+ break;
+
+ case 'Audio':
+ loadItems(element, item, type, {
+ MediaTypes: '',
+ IncludeItemTypes: 'Audio',
+ PersonTypes: '',
+ ArtistIds: '',
+ AlbumArtistIds: '',
+ SortBy: 'AlbumArtist,Album,SortName'
+ }, {
+ playFromHere: true,
+ action: 'playallfromhere',
+ smallIcon: true,
+ artist: true
+ });
+ }
+}
+
+function loadItems(element, item, type, query, listOptions) {
+ query = getQuery(query, item);
+ getItemsFunction(query, item)(query.StartIndex, query.Limit, query.Fields).then(function (result) {
+ let html = '';
+
+ if (query.Limit && result.TotalRecordCount > query.Limit) {
+ const link = element.querySelector('a');
+ link.classList.remove('hide');
+ link.setAttribute('href', getMoreItemsHref(item, type));
+ } else {
+ element.querySelector('a').classList.add('hide');
+ }
+
+ listOptions.items = result.Items;
+ const itemsContainer = element.querySelector('.itemsContainer');
+
+ if (type === 'Audio') {
+ html = listView.getListViewHtml(listOptions);
+ itemsContainer.classList.remove('vertical-wrap');
+ itemsContainer.classList.add('vertical-list');
+ } else {
+ html = cardBuilder.getCardsHtml(listOptions);
+ itemsContainer.classList.add('vertical-wrap');
+ itemsContainer.classList.remove('vertical-list');
+ }
+
+ itemsContainer.innerHTML = html;
+ imageLoader.lazyChildren(itemsContainer);
+ });
+}
+
+function getMoreItemsHref(item, type) {
+ if (item.Type === 'Genre') {
+ return 'list.html?type=' + type + '&genreId=' + item.Id + '&serverId=' + item.ServerId;
}
- function getQuery(options, item) {
- var query = {
- SortOrder: 'Ascending',
- IncludeItemTypes: '',
- Recursive: true,
- Fields: 'AudioInfo,SeriesInfo,ParentId,PrimaryImageAspectRatio,BasicSyncInfo',
- Limit: 100,
- StartIndex: 0,
- CollapseBoxSetItems: false
- };
- query = Object.assign(query, options || {});
- addCurrentItemToQuery(query, item);
- return query;
+ if (item.Type === 'MusicGenre') {
+ return 'list.html?type=' + type + '&musicGenreId=' + item.Id + '&serverId=' + item.ServerId;
}
- function getItemsFunction(options, item) {
- var query = getQuery(options, item);
- return function (index, limit, fields) {
- query.StartIndex = index;
- query.Limit = limit;
-
- if (fields) {
- query.Fields += ',' + fields;
- }
-
- var apiClient = connectionManager.getApiClient(item.ServerId);
-
- if (query.IncludeItemTypes === 'MusicArtist') {
- query.IncludeItemTypes = null;
- return apiClient.getAlbumArtists(apiClient.getCurrentUserId(), query);
- }
-
- return apiClient.getItems(apiClient.getCurrentUserId(), query);
- };
+ if (item.Type === 'Studio') {
+ return 'list.html?type=' + type + '&studioId=' + item.Id + '&serverId=' + item.ServerId;
}
- window.ItemsByName = {
- renderItems: renderItems
+ if (item.Type === 'MusicArtist') {
+ return 'list.html?type=' + type + '&artistId=' + item.Id + '&serverId=' + item.ServerId;
+ }
+
+ if (item.Type === 'Person') {
+ return 'list.html?type=' + type + '&personId=' + item.Id + '&serverId=' + item.ServerId;
+ }
+
+ return 'list.html?type=' + type + '&parentId=' + item.Id + '&serverId=' + item.ServerId;
+}
+
+function addCurrentItemToQuery(query, item) {
+ if (item.Type === 'Person') {
+ query.PersonIds = item.Id;
+ } else if (item.Type === 'Genre') {
+ query.Genres = item.Name;
+ } else if (item.Type === 'MusicGenre') {
+ query.Genres = item.Name;
+ } else if (item.Type === 'GameGenre') {
+ query.Genres = item.Name;
+ } else if (item.Type === 'Studio') {
+ query.StudioIds = item.Id;
+ } else if (item.Type === 'MusicArtist') {
+ query.AlbumArtistIds = item.Id;
+ }
+}
+
+function getQuery(options, item) {
+ let query = {
+ SortOrder: 'Ascending',
+ IncludeItemTypes: '',
+ Recursive: true,
+ Fields: 'AudioInfo,SeriesInfo,ParentId,PrimaryImageAspectRatio,BasicSyncInfo',
+ Limit: 100,
+ StartIndex: 0,
+ CollapseBoxSetItems: false
};
-});
+ query = Object.assign(query, options || {});
+ addCurrentItemToQuery(query, item);
+ return query;
+}
+
+function getItemsFunction(options, item) {
+ const query = getQuery(options, item);
+ return function (index, limit, fields) {
+ query.StartIndex = index;
+ query.Limit = limit;
+
+ if (fields) {
+ query.Fields += ',' + fields;
+ }
+
+ const apiClient = connectionManager.getApiClient(item.ServerId);
+
+ if (query.IncludeItemTypes === 'MusicArtist') {
+ query.IncludeItemTypes = null;
+ return apiClient.getAlbumArtists(apiClient.getCurrentUserId(), query);
+ }
+
+ return apiClient.getItems(apiClient.getCurrentUserId(), query);
+ };
+}
+
+window.ItemsByName = {
+ renderItems: renderItems
+};
diff --git a/src/scripts/libraryBrowser.js b/src/scripts/libraryBrowser.js
index 46cda51e55..83d683a690 100644
--- a/src/scripts/libraryBrowser.js
+++ b/src/scripts/libraryBrowser.js
@@ -119,7 +119,10 @@ export function getQueryPagingHtml (options) {
}
export function showSortMenu (options) {
- require(['dialogHelper', 'emby-radio'], function (dialogHelper) {
+ Promise.all([
+ import('dialogHelper'),
+ import('emby-radio')
+ ]).then(([{default: dialogHelper}]) => {
function onSortByChange() {
var newValue = this.value;
diff --git a/src/scripts/libraryMenu.js b/src/scripts/libraryMenu.js
index d2a68cd6e3..ec572752b9 100644
--- a/src/scripts/libraryMenu.js
+++ b/src/scripts/libraryMenu.js
@@ -1,8 +1,26 @@
-define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', 'viewManager', 'libraryBrowser', 'appRouter', 'apphost', 'playbackManager', 'syncPlayManager', 'groupSelectionMenu', 'browser', 'globalize', 'scripts/imagehelper', 'paper-icon-button-light', 'material-icons', 'scrollStyles', 'flexStyles'], function (dom, layoutManager, inputManager, connectionManager, events, viewManager, libraryBrowser, appRouter, appHost, playbackManager, syncPlayManager, groupSelectionMenu, browser, globalize, imageHelper) {
- 'use strict';
+import dom from 'dom';
+import layoutManager from 'layoutManager';
+import inputManager from 'inputManager';
+import connectionManager from 'connectionManager';
+import events from 'events';
+import viewManager from 'viewManager';
+import appRouter from 'appRouter';
+import appHost from 'apphost';
+import playbackManager from 'playbackManager';
+import syncPlayManager from 'syncPlayManager';
+import groupSelectionMenu from 'groupSelectionMenu';
+import browser from 'browser';
+import globalize from 'globalize';
+import imageHelper from 'scripts/imagehelper';
+import 'paper-icon-button-light';
+import 'material-icons';
+import 'scrollStyles';
+import 'flexStyles';
+
+/* eslint-disable indent */
function renderHeader() {
- var html = '';
+ let html = '';
html += '