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

Migration of slideshow to ES6 module

Browse source
This commit is contained in:
Cameron 2020-08-06 08:44:04 +01:00
parent 9d822d911a
commit f3c0049982
2 changed files with 649 additions and 642 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -155,6 +155,7 @@
"src/components/refreshdialog/refreshdialog.js", "src/components/refreshdialog/refreshdialog.js",
"src/components/sanatizefilename.js", "src/components/sanatizefilename.js",
"src/components/scrollManager.js", "src/components/scrollManager.js",
"src/components/slideshow/slideshow.js",
"src/components/sortmenu/sortmenu.js", "src/components/sortmenu/sortmenu.js",
"src/plugins/htmlVideoPlayer/plugin.js", "src/plugins/htmlVideoPlayer/plugin.js",
"src/components/search/searchfields.js", "src/components/search/searchfields.js",

132
src/components/slideshow/slideshow.js
View file

@ -2,30 +2,37 @@
* Image viewer component * Image viewer component
* @module components/slideshow/slideshow * @module components/slideshow/slideshow
*/ */
define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'browser', 'apphost', 'dom', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (dialogHelper, inputManager, connectionManager, layoutManager, focusManager, browser, appHost, dom) { import dialogHelper from 'dialogHelper';
'use strict'; import inputManager from 'inputManager';
import connectionManager from 'connectionManager';
import layoutManager from 'layoutManager';
import focusManager from 'focusManager';
import browser from 'browser';
import appHost from 'apphost';
import dom from 'dom';
import 'css!./style';
import 'material-icons';
import 'paper-icon-button-light';
browser = browser.default || browser; /**
/**
* Name of transition event. * Name of transition event.
*/ */
const transitionEndEventName = dom.whichTransitionEvent(); const transitionEndEventName = dom.whichTransitionEvent();
/** /**
* Flag to use fake image to fix blurry zoomed image. * Flag to use fake image to fix blurry zoomed image.
* At least WebKit doesn't restore quality for zoomed images. * At least WebKit doesn't restore quality for zoomed images.
*/ */
const useFakeZoomImage = browser.safari; const useFakeZoomImage = browser.safari;
/** /**
* Retrieves an item's image URL from the API. * Retrieves an item's image URL from the API.
* @param {object|string} item - Item used to generate the image URL. * @param {object|string} item - Item used to generate the image URL.
* @param {object} options - Options of the image. * @param {object} options - Options of the image.
* @param {object} apiClient - API client instance used to retrieve the image. * @param {object} apiClient - API client instance used to retrieve the image.
* @returns {null|string} URL of the item's image. * @returns {null|string} URL of the item's image.
*/ */
function getImageUrl(item, options, apiClient) { function getImageUrl(item, options, apiClient) {
options = options || {}; options = options || {};
options.type = options.type || 'Primary'; options.type = options.type || 'Primary';
@ -46,16 +53,16 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
return null; return null;
} }
/** /**
* Retrieves a backdrop's image URL from the API. * Retrieves a backdrop's image URL from the API.
* @param {object} item - Item used to generate the image URL. * @param {object} item - Item used to generate the image URL.
* @param {object} options - Options of the image. * @param {object} options - Options of the image.
* @param {object} apiClient - API client instance used to retrieve the image. * @param {object} apiClient - API client instance used to retrieve the image.
* @returns {null|string} URL of the item's backdrop. * @returns {null|string} URL of the item's backdrop.
*/ */
function getBackdropImageUrl(item, options, apiClient) { function getBackdropImageUrl(item, options, apiClient) {
options = options || {}; options = options || {};
options.type = options.type || 'Backdrop'; options.type = options.type || 'Backdrop';
@ -70,16 +77,16 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
return null; return null;
} }
/** /**
* Dispatches a request for an item's image to its respective handler. * Dispatches a request for an item's image to its respective handler.
* @param {object} item - Item used to generate the image URL. * @param {object} item - Item used to generate the image URL.
* @returns {string} URL of the item's image. * @returns {string} URL of the item's image.
*/ */
function getImgUrl(item, user) { function getImgUrl(item, user) {
var apiClient = connectionManager.getApiClient(item.ServerId); const apiClient = connectionManager.getApiClient(item.ServerId);
var imageOptions = {}; const imageOptions = {};
if (item.BackdropImageTags && item.BackdropImageTags.length) { if (item.BackdropImageTags && item.BackdropImageTags.length) {
return getBackdropImageUrl(item, imageOptions, apiClient); return getBackdropImageUrl(item, imageOptions, apiClient);
@ -90,9 +97,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
imageOptions.type = 'Primary'; imageOptions.type = 'Primary';
return getImageUrl(item, imageOptions, apiClient); return getImageUrl(item, imageOptions, apiClient);
} }
} }
/** /**
* Generates a button using the specified icon, classes and properties. * Generates a button using the specified icon, classes and properties.
* @param {string} icon - Name of the material icon on the button * @param {string} icon - Name of the material icon on the button
* @param {string} cssClass - CSS classes to assign to the button * @param {string} cssClass - CSS classes to assign to the button
@ -100,36 +107,36 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* @param {boolean} autoFocus - Flag to set the autofocus attribute on the button. * @param {boolean} autoFocus - Flag to set the autofocus attribute on the button.
* @returns {string} The HTML markup of the button. * @returns {string} The HTML markup of the button.
*/ */
function getIcon(icon, cssClass, canFocus, autoFocus) { function getIcon(icon, cssClass, canFocus, autoFocus) {
var tabIndex = canFocus ? '' : ' tabindex="-1"'; const tabIndex = canFocus ? '' : ' tabindex="-1"';
autoFocus = autoFocus ? ' autofocus' : ''; autoFocus = autoFocus ? ' autofocus' : '';
return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><span class="material-icons slideshowButtonIcon ' + icon + '"></span></button>'; return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><span class="material-icons slideshowButtonIcon ' + icon + '"></span></button>';
} }
/** /**
* Sets the viewport meta tag to enable or disable scaling by the user. * Sets the viewport meta tag to enable or disable scaling by the user.
* @param {boolean} scalable - Flag to set the scalability of the viewport. * @param {boolean} scalable - Flag to set the scalability of the viewport.
*/ */
function setUserScalable(scalable) { function setUserScalable(scalable) {
try { try {
appHost.setUserScalable(scalable); appHost.setUserScalable(scalable);
} catch (err) { } catch (err) {
console.error('error in appHost.setUserScalable: ' + err); console.error('error in appHost.setUserScalable: ' + err);
} }
} }
return function (options) { export default function (options) {
var self = this; const self = this;
/** Initialized instance of Swiper. */ /** Initialized instance of Swiper. */
var swiperInstance; let swiperInstance;
/** Initialized instance of the dialog containing the Swiper instance. */ /** Initialized instance of the dialog containing the Swiper instance. */
var dialog; let dialog;
/** Options of the slideshow components */ /** Options of the slideshow components */
var currentOptions; let currentOptions;
/** ID of the timeout used to hide the OSD. */ /** ID of the timeout used to hide the OSD. */
var hideTimeout; let hideTimeout;
/** Last coordinates of the mouse pointer. */ /** Last coordinates of the mouse pointer. */
var lastMouseMoveData; let lastMouseMoveData;
/** /**
* Creates the HTML markup for the dialog and the OSD. * Creates the HTML markup for the dialog and the OSD.
@ -149,12 +156,12 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
dialog.classList.add('slideshowDialog'); dialog.classList.add('slideshowDialog');
var html = ''; let html = '';
html += '<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>'; html += '<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>';
if (options.interactive && !layoutManager.tv) { if (options.interactive && !layoutManager.tv) {
var actionButtonsOnTop = layoutManager.mobile; const actionButtonsOnTop = layoutManager.mobile;
html += getIcon('keyboard_arrow_left', 'btnSlideshowPrevious slideshowButton hide-mouse-idle-tv', false); html += getIcon('keyboard_arrow_left', 'btnSlideshowPrevious slideshowButton hide-mouse-idle-tv', false);
html += getIcon('keyboard_arrow_right', 'btnSlideshowNext slideshowButton hide-mouse-idle-tv', false); html += getIcon('keyboard_arrow_right', 'btnSlideshowNext slideshowButton hide-mouse-idle-tv', false);
@ -195,17 +202,17 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
dialogHelper.close(dialog); dialogHelper.close(dialog);
}); });
var btnPause = dialog.querySelector('.btnSlideshowPause'); const btnPause = dialog.querySelector('.btnSlideshowPause');
if (btnPause) { if (btnPause) {
btnPause.addEventListener('click', playPause); btnPause.addEventListener('click', playPause);
} }
var btnDownload = dialog.querySelector('.btnDownload'); const btnDownload = dialog.querySelector('.btnDownload');
if (btnDownload) { if (btnDownload) {
btnDownload.addEventListener('click', download); btnDownload.addEventListener('click', download);
} }
var btnShare = dialog.querySelector('.btnShare'); const btnShare = dialog.querySelector('.btnShare');
if (btnShare) { if (btnShare) {
btnShare.addEventListener('click', share); btnShare.addEventListener('click', share);
} }
@ -230,7 +237,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Handles OSD changes when the autoplay is started. * Handles OSD changes when the autoplay is started.
*/ */
function onAutoplayStart() { function onAutoplayStart() {
var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons'); const btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
if (btnSlideshowPause) { if (btnSlideshowPause) {
btnSlideshowPause.classList.replace('play_arrow', 'pause'); btnSlideshowPause.classList.replace('play_arrow', 'pause');
} }
@ -240,7 +247,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Handles OSD changes when the autoplay is stopped. * Handles OSD changes when the autoplay is stopped.
*/ */
function onAutoplayStop() { function onAutoplayStop() {
var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons'); const btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
if (btnSlideshowPause) { if (btnSlideshowPause) {
btnSlideshowPause.classList.replace('pause', 'play_arrow'); btnSlideshowPause.classList.replace('pause', 'play_arrow');
} }
@ -287,14 +294,14 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* @param {Object} options - Options used to initialize the Swiper instance. * @param {Object} options - Options used to initialize the Swiper instance.
*/ */
function loadSwiper(dialog, options) { function loadSwiper(dialog, options) {
var slides; let slides;
if (currentOptions.slides) { if (currentOptions.slides) {
slides = currentOptions.slides; slides = currentOptions.slides;
} else { } else {
slides = currentOptions.items; slides = currentOptions.items;
} }
require(['swiper'], function (Swiper) { import('swiper').then(({default: Swiper}) => {
swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), { swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), {
direction: 'horizontal', direction: 'horizontal',
// Loop is disabled due to the virtual slides option not supporting it. // Loop is disabled due to the virtual slides option not supporting it.
@ -368,7 +375,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* @returns {string} The HTML markup of the slide. * @returns {string} The HTML markup of the slide.
*/ */
function getSwiperSlideHtmlFromSlide(item) { function getSwiperSlideHtmlFromSlide(item) {
var html = ''; let html = '';
html += '<div class="swiper-slide" data-original="' + item.originalImage + '" data-itemid="' + item.Id + '" data-serverid="' + item.ServerId + '">'; html += '<div class="swiper-slide" data-original="' + item.originalImage + '" data-itemid="' + item.Id + '" data-serverid="' + item.ServerId + '">';
html += '<div class="swiper-zoom-container">'; html += '<div class="swiper-zoom-container">';
if (useFakeZoomImage) { if (useFakeZoomImage) {
@ -403,7 +410,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
*/ */
function getCurrentImageInfo() { function getCurrentImageInfo() {
if (swiperInstance) { if (swiperInstance) {
var slide = document.querySelector('.swiper-slide-active'); const slide = document.querySelector('.swiper-slide-active');
if (slide) { if (slide) {
return { return {
@ -423,9 +430,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Starts a download for the currently displayed slide. * Starts a download for the currently displayed slide.
*/ */
function download() { function download() {
var imageInfo = getCurrentImageInfo(); const imageInfo = getCurrentImageInfo();
require(['fileDownloader'], function (fileDownloader) { import('fileDownloader').then(({default: fileDownloader}) => {
fileDownloader.download([imageInfo]); fileDownloader.download([imageInfo]);
}); });
} }
@ -434,7 +441,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Shares the currently displayed slide using the browser's built-in sharing feature. * Shares the currently displayed slide using the browser's built-in sharing feature.
*/ */
function share() { function share() {
var imageInfo = getCurrentImageInfo(); const imageInfo = getCurrentImageInfo();
navigator.share({ navigator.share({
url: imageInfo.shareUrl url: imageInfo.shareUrl
@ -463,7 +470,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Toggles the autoplay feature of the Swiper instance. * Toggles the autoplay feature of the Swiper instance.
*/ */
function playPause() { function playPause() {
var paused = !dialog.querySelector('.btnSlideshowPause .material-icons').classList.contains('pause'); const paused = !dialog.querySelector('.btnSlideshowPause .material-icons').classList.contains('pause');
if (paused) { if (paused) {
play(); play();
} else { } else {
@ -475,7 +482,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Closes the dialog and destroys the Swiper instance. * Closes the dialog and destroys the Swiper instance.
*/ */
function onDialogClosed() { function onDialogClosed() {
var swiper = swiperInstance; const swiper = swiperInstance;
if (swiper) { if (swiper) {
swiper.destroy(true, true); swiper.destroy(true, true);
swiperInstance = null; swiperInstance = null;
@ -493,7 +500,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Shows the OSD. * Shows the OSD.
*/ */
function showOsd() { function showOsd() {
var bottom = dialog.querySelector('.slideshowBottomBar'); const bottom = dialog.querySelector('.slideshowBottomBar');
if (bottom) { if (bottom) {
slideUpToShow(bottom); slideUpToShow(bottom);
startHideTimer(); startHideTimer();
@ -504,7 +511,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Hides the OSD. * Hides the OSD.
*/ */
function hideOsd() { function hideOsd() {
var bottom = dialog.querySelector('.slideshowBottomBar'); const bottom = dialog.querySelector('.slideshowBottomBar');
if (bottom) { if (bottom) {
slideDownToHide(bottom); slideDownToHide(bottom);
} }
@ -539,7 +546,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
element.classList.remove('hide'); element.classList.remove('hide');
var onFinish = function () { const onFinish = function () {
focusManager.focus(element.querySelector('.btnSlideshowPause')); focusManager.focus(element.querySelector('.btnSlideshowPause'));
}; };
@ -549,11 +556,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
requestAnimationFrame(function () { requestAnimationFrame(function () {
var keyframes = [ const keyframes = [
{ transform: 'translate3d(0,' + element.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 } { transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }
]; ];
var timing = { duration: 300, iterations: 1, easing: 'ease-out' }; const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
element.animate(keyframes, timing).onfinish = onFinish; element.animate(keyframes, timing).onfinish = onFinish;
}); });
} }
@ -567,7 +574,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
return; return;
} }
var onFinish = function () { const onFinish = function () {
element.classList.add('hide'); element.classList.add('hide');
}; };
@ -577,11 +584,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
requestAnimationFrame(function () { requestAnimationFrame(function () {
var keyframes = [ const keyframes = [
{ transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 }, { transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
{ transform: 'translate3d(0,' + element.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' }; const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
element.animate(keyframes, timing).onfinish = onFinish; element.animate(keyframes, timing).onfinish = onFinish;
}); });
} }
@ -591,13 +598,13 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* @param {Event} event - Pointer movement event. * @param {Event} event - Pointer movement event.
*/ */
function onPointerMove(event) { function onPointerMove(event) {
var pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse'); const pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
if (pointerType === 'mouse') { if (pointerType === 'mouse') {
var eventX = event.screenX || 0; const eventX = event.screenX || 0;
var eventY = event.screenY || 0; const eventY = event.screenY || 0;
var obj = lastMouseMoveData; const obj = lastMouseMoveData;
if (!obj) { if (!obj) {
lastMouseMoveData = { lastMouseMoveData = {
x: eventX, x: eventX,
@ -663,5 +670,4 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
dialogHelper.close(dialog); dialogHelper.close(dialog);
} }
}; };
}; }
});