';
+ html += '
';
+ html += '
';
+ html += '
';
if (item.title || item.subtitle) {
html += '';
html += '
';
@@ -290,42 +348,18 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
return html;
}
- function previousImage() {
- if (swiperInstance) {
- swiperInstance.slidePrev();
- } else {
- stopInterval();
- showNextImage(currentIndex - 1);
- }
- }
-
- function nextImage() {
- if (swiperInstance) {
-
- if (options.loop === false) {
-
- if (swiperInstance.activeIndex >= swiperInstance.slides.length - 1) {
- dialogHelper.close(dlg);
- return;
- }
- }
-
- swiperInstance.slideNext();
- } else {
- stopInterval();
- showNextImage(currentIndex + 1);
- }
- }
-
+ /**
+ * Fetches the information of the currently displayed slide.
+ * @returns {null|{itemId: string, shareUrl: string, serverId: string, url: string}} Object containing the information of the currently displayed slide.
+ */
function getCurrentImageInfo() {
-
if (swiperInstance) {
var slide = document.querySelector('.swiper-slide-active');
if (slide) {
return {
url: slide.getAttribute('data-original'),
- shareUrl: slide.getAttribute('data-imageurl'),
+ shareUrl: slide.getAttribute('data-original'),
itemId: slide.getAttribute('data-itemid'),
serverId: slide.getAttribute('data-serverid')
};
@@ -336,8 +370,10 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
}
}
+ /**
+ * Starts a download for the currently displayed slide.
+ */
function download() {
-
var imageInfo = getCurrentImageInfo();
require(['fileDownloader'], function (fileDownloader) {
@@ -345,8 +381,10 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
});
}
+ /**
+ * Shares the currently displayed slide using the browser's built-in sharing feature.
+ */
function share() {
-
var imageInfo = getCurrentImageInfo();
navigator.share({
@@ -354,20 +392,29 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
});
}
+ /**
+ * Starts the autoplay feature of the Swiper instance.
+ */
function play() {
if (swiperInstance.autoplay) {
swiperInstance.autoplay.start();
}
}
+ /**
+ * Pauses the autoplay feature of the Swiper instance;
+ */
function pause() {
if (swiperInstance.autoplay) {
swiperInstance.autoplay.stop();
}
}
+ /**
+ * Toggles the autoplay feature of the Swiper instance.
+ */
function playPause() {
- var paused = !dlg.querySelector('.btnSlideshowPause i').classList.contains("pause");
+ var paused = !dialog.querySelector('.btnSlideshowPause i').classList.contains("pause");
if (paused) {
play();
} else {
@@ -375,8 +422,10 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
}
}
+ /**
+ * Closes the dialog and destroys the Swiper instance.
+ */
function onDialogClosed() {
-
var swiper = swiperInstance;
if (swiper) {
swiper.destroy(true, true);
@@ -387,53 +436,38 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
}
- function startInterval(options) {
-
- currentOptions = options;
-
- stopInterval();
- createElements(options);
-
- if (!options.interactive) {
- currentIntervalMs = options.interval || 11000;
- showNextImage(options.startIndex || 0, true);
- }
- }
-
- var _osdOpen = false;
-
- function isOsdOpen() {
- return _osdOpen;
- }
-
- function getOsdBottom() {
- return dlg.querySelector('.slideshowBottomBar');
- }
-
+ /**
+ * Shows the OSD.
+ */
function showOsd() {
-
- var bottom = getOsdBottom();
+ var bottom = dialog.querySelector('.slideshowBottomBar');
if (bottom) {
slideUpToShow(bottom);
startHideTimer();
}
}
+ /**
+ * Hides the OSD.
+ */
function hideOsd() {
-
- var bottom = getOsdBottom();
+ var bottom = dialog.querySelector('.slideshowBottomBar');
if (bottom) {
slideDownToHide(bottom);
}
}
- var hideTimeout;
-
+ /**
+ * Starts the timer used to automatically hide the OSD.
+ */
function startHideTimer() {
stopHideTimer();
- hideTimeout = setTimeout(hideOsd, 4000);
+ hideTimeout = setTimeout(hideOsd, 3000);
}
+ /**
+ * Stops the timer used to automatically hide the OSD.
+ */
function stopHideTimer() {
if (hideTimeout) {
clearTimeout(hideTimeout);
@@ -441,71 +475,76 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
}
}
- function slideUpToShow(elem) {
-
- if (!elem.classList.contains('hide')) {
+ /**
+ * Shows the OSD by sliding it into view.
+ * @param {HTMLElement} element - Element containing the OSD.
+ */
+ function slideUpToShow(element) {
+ if (!element.classList.contains('hide')) {
return;
}
_osdOpen = true;
- elem.classList.remove('hide');
+ element.classList.remove('hide');
var onFinish = function () {
- focusManager.focus(elem.querySelector('.btnSlideshowPause'));
+ focusManager.focus(element.querySelector('.btnSlideshowPause'));
};
- if (!elem.animate) {
+ if (!element.animate) {
onFinish();
return;
}
requestAnimationFrame(function () {
-
var keyframes = [
- { transform: 'translate3d(0,' + elem.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
+ { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
{ transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }
];
var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
- elem.animate(keyframes, timing).onfinish = onFinish;
+ element.animate(keyframes, timing).onfinish = onFinish;
});
}
- function slideDownToHide(elem) {
-
- if (elem.classList.contains('hide')) {
+ /**
+ * Hides the OSD by sliding it out of view.
+ * @param {HTMLElement} element - Element containing the OSD.
+ */
+ function slideDownToHide(element) {
+ if (element.classList.contains('hide')) {
return;
}
var onFinish = function () {
- elem.classList.add('hide');
+ element.classList.add('hide');
_osdOpen = false;
};
- if (!elem.animate) {
+ if (!element.animate) {
onFinish();
return;
}
requestAnimationFrame(function () {
-
var keyframes = [
{ transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
- { transform: 'translate3d(0,' + elem.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }
+ { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }
];
var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
- elem.animate(keyframes, timing).onfinish = onFinish;
+ element.animate(keyframes, timing).onfinish = onFinish;
});
}
- var lastMouseMoveData;
-
- function onPointerMove(e) {
-
- var pointerType = e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
+ /**
+ * Shows the OSD when moving the mouse pointer or touching the screen.
+ * @param {Event} event - Pointer movement event.
+ */
+ function onPointerMove(event) {
+ var pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
if (pointerType === 'mouse') {
- var eventX = e.screenX || 0;
- var eventY = e.screenY || 0;
+ var eventX = event.screenX || 0;
+ var eventY = event.screenY || 0;
var obj = lastMouseMoveData;
if (!obj) {
@@ -528,125 +567,46 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
}
}
- function onInputCommand(e) {
-
- switch (e.detail.command) {
-
- case 'left':
- if (!isOsdOpen()) {
- e.preventDefault();
- e.stopPropagation();
- previousImage();
- }
- break;
- case 'right':
- if (!isOsdOpen()) {
- e.preventDefault();
- e.stopPropagation();
- nextImage();
- }
- break;
+ /**
+ * Dispatches keyboard inputs to their proper handlers.
+ * @param {Event} event - Keyboard input event.
+ */
+ function onInputCommand(event) {
+ switch (event.detail.command) {
case 'up':
case 'down':
case 'select':
case 'menu':
case 'info':
- case 'play':
- case 'playpause':
- case 'pause':
showOsd();
break;
+ case 'play':
+ play();
+ break;
+ case 'pause':
+ pause();
+ break;
+ case 'playpause':
+ playPause();
+ break;
default:
break;
}
}
- function showNextImage(index, skipPreload) {
-
- index = Math.max(0, index);
- if (index >= currentOptions.items.length) {
- index = 0;
- }
- currentIndex = index;
-
- var options = currentOptions;
- var items = options.items;
- var item = items[index];
- var imgUrl = getImgUrl(item);
-
- var onSrcLoaded = function () {
- var cardImageContainer = dlg.querySelector('.slideshowImage');
-
- var newCardImageContainer = document.createElement('div');
- newCardImageContainer.className = cardImageContainer.className;
-
- if (options.cover) {
- newCardImageContainer.classList.add('slideshowImage-cover');
- }
-
- newCardImageContainer.style.backgroundImage = "url('" + imgUrl + "')";
- newCardImageContainer.classList.add('hide');
- cardImageContainer.parentNode.appendChild(newCardImageContainer);
-
- if (options.showTitle) {
- dlg.querySelector('.slideshowImageText').innerHTML = item.Name;
- } else {
- dlg.querySelector('.slideshowImageText').innerHTML = '';
- }
-
- newCardImageContainer.classList.remove('hide');
- var onAnimationFinished = function () {
-
- var parentNode = cardImageContainer.parentNode;
- if (parentNode) {
- parentNode.removeChild(cardImageContainer);
- }
- };
-
- if (newCardImageContainer.animate) {
-
- var keyframes = [
- { opacity: '0', offset: 0 },
- { opacity: '1', offset: 1 }
- ];
- var timing = { duration: 1200, iterations: 1 };
- newCardImageContainer.animate(keyframes, timing).onfinish = onAnimationFinished;
- } else {
- onAnimationFinished();
- }
-
- stopInterval();
- currentTimeout = setTimeout(function () {
- showNextImage(index + 1, true);
-
- }, currentIntervalMs);
- };
-
- if (!skipPreload) {
- var img = new Image();
- img.onload = onSrcLoaded;
- img.src = imgUrl;
- } else {
- onSrcLoaded();
- }
- }
-
- function stopInterval() {
- if (currentTimeout) {
- clearTimeout(currentTimeout);
- currentTimeout = null;
- }
- }
-
+ /**
+ * Shows the slideshow component.
+ */
self.show = function () {
- startInterval(options);
+ createElements(options);
};
+ /**
+ * Hides the slideshow element.
+ */
self.hide = function () {
-
- var dialog = dlg;
+ var dialog = dialog;
if (dialog) {
-
dialogHelper.close(dialog);
}
};
diff --git a/src/scripts/site.js b/src/scripts/site.js
index 5eb3c2a346..6ffe033fa8 100644
--- a/src/scripts/site.js
+++ b/src/scripts/site.js
@@ -696,7 +696,8 @@ var AppInfo = {};
"jellyfin-noto",
"date-fns",
"page",
- "polyfill"
+ "polyfill",
+ "classlist-polyfill"
]
},
urlArgs: urlArgs,
@@ -705,6 +706,7 @@ var AppInfo = {};
});
require(["polyfill"]);
+ require(["classlist-polyfill"]);
// Expose jQuery globally
require(["jQuery"], function(jQuery) {
diff --git a/yarn.lock b/yarn.lock
index ac4a39b6ec..3c286a7d7e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2337,6 +2337,10 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
+"classlist.js@https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz":
+ version "1.2.20180112"
+ resolved "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz#9c7ab3ccdbde5c940f6f26f8fc59bfb6bc813bc4"
+
clean-css@4.2.x, clean-css@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"