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

Add JSDoc comments

Browse source
This commit is contained in:
MrTimscampi 2020-03-22 15:34:34 +01:00
parent 79e664ca13
commit 18d1305ead
1 changed files with 182 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,17 @@
/**
* Image viewer component
* @module components/slideshow/slideshow
*/
define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'browser', 'apphost', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (dialogHelper, inputManager, connectionManager, layoutManager, focusManager, browser, appHost) { define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'browser', 'apphost', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (dialogHelper, inputManager, connectionManager, layoutManager, focusManager, browser, appHost) {
'use strict'; 'use strict';
/**
* Retrieves an item's image URL from the API.
* @param {object|string} item - Item used to generate the image URL.
* @param {object} options - Options of the image.
* @param {object} apiClient - API client instance used to retrieve the 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";
@ -10,7 +21,6 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
if (item.ImageTags && item.ImageTags[options.type]) { if (item.ImageTags && item.ImageTags[options.type]) {
options.tag = item.ImageTags[options.type]; options.tag = item.ImageTags[options.type];
return apiClient.getScaledImageUrl(item.Id, options); return apiClient.getScaledImageUrl(item.Id, options);
} }
@ -26,6 +36,13 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
return null; return null;
} }
/**
* Retrieves a backdrop's image URL from the API.
* @param {object} item - Item used to generate the image URL.
* @param {object} options - Options of the image.
* @param {object} apiClient - API client instance used to retrieve the image.
* @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";
@ -44,6 +61,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
return null; return null;
} }
/**
* Dispatches a request for an item's image to its respective handler.
* @param {object} item - Item used to generate the image URL.
* @returns {string} URL of the item's image.
*/
function getImgUrl(item) { function getImgUrl(item) {
var apiClient = connectionManager.getApiClient(item.ServerId); var apiClient = connectionManager.getApiClient(item.ServerId);
var imageOptions = {}; var imageOptions = {};
@ -59,12 +81,24 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
} }
/**
* Generates a button using the specified icon, classes and properties.
* @param {string} icon - Name of the material icon on the button
* @param {string} cssClass - CSS classes to assign to the button
* @param {boolean} canFocus - Flag to set the tabindex attribute on the button to -1.
* @param {boolean} autoFocus - Flag to set the autofocus attribute on 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"'; var tabIndex = canFocus ? '' : ' tabindex="-1"';
autoFocus = autoFocus ? ' autofocus' : ''; autoFocus = autoFocus ? ' autofocus' : '';
return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><i class="material-icons slideshowButtonIcon ' + icon + '"></i></button>'; return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><i class="material-icons slideshowButtonIcon ' + icon + '"></i></button>';
} }
/**
* Sets the viewport meta tag to enable or disable scaling by the user.
* @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);
@ -74,23 +108,31 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
return function (options) { return function (options) {
var self = this; var self = this;
/** Initialized instance of Swiper. */
var swiperInstance; var swiperInstance;
var dlg; /** Initialized instance of the dialog containing the Swiper instance. */
var currentTimeout; var dialog;
/** Options of the slideshow components */
var currentOptions; var currentOptions;
/** ID of the timeout used to hide the OSD. */
var hideTimeout;
/** Last coordinates of the mouse pointer. */
var lastMouseMoveData;
/** Visibility status of the OSD. */
var _osdOpen = false; var _osdOpen = false;
// small hack since this is not possible anyway // Use autoplay on Chromecast since it is non-interactive.
if (browser.chromecast) { options.interactive = !browser.chromecast;
options.interactive = false;
}
/**
* Creates the HTML markup for the dialog and the OSD.
* @param {Object} options - Options used to create the dialog and slideshow.
*/
function createElements(options) { function createElements(options) {
currentOptions = options; currentOptions = options;
dlg = dialogHelper.createDialog({ dialog = dialogHelper.createDialog({
exitAnimationDuration: options.interactive ? 400 : 800, exitAnimationDuration: options.interactive ? 400 : 800,
size: 'fullscreen', size: 'fullscreen',
autoFocus: false, autoFocus: false,
@ -99,7 +141,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
removeOnClose: true removeOnClose: true
}); });
dlg.classList.add('slideshowDialog'); dialog.classList.add('slideshowDialog');
var html = ''; var html = '';
@ -141,24 +183,24 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
html += '<div class="slideshowImage"></div><h1 class="slideshowImageText"></h1>'; html += '<div class="slideshowImage"></div><h1 class="slideshowImageText"></h1>';
} }
dlg.innerHTML = html; dialog.innerHTML = html;
if (options.interactive) { if (options.interactive) {
dlg.querySelector('.btnSlideshowExit').addEventListener('click', function (e) { dialog.querySelector('.btnSlideshowExit').addEventListener('click', function (e) {
dialogHelper.close(dlg); dialogHelper.close(dialog);
}); });
var btnPause = dlg.querySelector('.btnSlideshowPause'); var btnPause = dialog.querySelector('.btnSlideshowPause');
if (btnPause) { if (btnPause) {
btnPause.addEventListener('click', playPause); btnPause.addEventListener('click', playPause);
} }
var btnDownload = dlg.querySelector('.btnDownload'); var btnDownload = dialog.querySelector('.btnDownload');
if (btnDownload) { if (btnDownload) {
btnDownload.addEventListener('click', download); btnDownload.addEventListener('click', download);
} }
var btnShare = dlg.querySelector('.btnShare'); var btnShare = dialog.querySelector('.btnShare');
if (btnShare) { if (btnShare) {
btnShare.addEventListener('click', share); btnShare.addEventListener('click', share);
} }
@ -166,37 +208,46 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
setUserScalable(true); setUserScalable(true);
dialogHelper.open(dlg).then(function () { dialogHelper.open(dialog).then(function () {
setUserScalable(false); setUserScalable(false);
stopInterval();
}); });
inputManager.on(window, onInputCommand); inputManager.on(window, onInputCommand);
document.addEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove); document.addEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
dlg.addEventListener('close', onDialogClosed); dialog.addEventListener('close', onDialogClosed);
if (options.interactive) { if (options.interactive) {
loadSwiper(dlg); loadSwiper(dialog, options);
} }
} }
/**
* Handles OSD changes when the autoplay is started.
*/
function onAutoplayStart() { function onAutoplayStart() {
var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause i'); var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause i');
if (btnSlideshowPause) { if (btnSlideshowPause) {
btnSlideshowPause.classList.replace("play_arrow", "pause"); btnSlideshowPause.classList.replace("play_arrow", "pause");
} }
} }
/**
* Handles OSD changes when the autoplay is stopped.
*/
function onAutoplayStop() { function onAutoplayStop() {
var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause i'); var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause i');
if (btnSlideshowPause) { if (btnSlideshowPause) {
btnSlideshowPause.classList.replace("pause", "play_arrow"); btnSlideshowPause.classList.replace("pause", "play_arrow");
} }
} }
function loadSwiper(dlg) { /**
* Initializes the Swiper instance and binds the relevant events.
* @param {HTMLElement} dialog - Element containing the dialog.
* @param {Object} options - Options used to initialize the Swiper instance.
*/
function loadSwiper(dialog, options) {
var slides; var slides;
if (currentOptions.slides) { if (currentOptions.slides) {
slides = currentOptions.slides; slides = currentOptions.slides;
@ -205,12 +256,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
require(['swiper'], function (Swiper) { require(['swiper'], function (Swiper) {
swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), {
swiperInstance = new Swiper(dlg.querySelector('.slideshowSwiperContainer'), {
// Optional parameters // Optional parameters
direction: 'horizontal', direction: 'horizontal',
loop: false, loop: false,
autoplay: false, autoplay: options.interactive ? false : true,
keyboard: { keyboard: {
enabled: true enabled: true
}, },
@ -237,6 +287,12 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
}); });
} }
/**
* Renders the HTML markup of a slide for an item or a slide.
* @param {Object} item - The item used to render the slide.
* @param {number} index - The index of the item in the Swiper instance.
* @returns {string} The HTML markup of the slide.
*/
function getSwiperSlideHtml(item, index) { function getSwiperSlideHtml(item, index) {
if (currentOptions.slides) { if (currentOptions.slides) {
return getSwiperSlideHtmlFromSlide(item); return getSwiperSlideHtmlFromSlide(item);
@ -245,6 +301,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
} }
/**
* Renders the HTML markup of a slide for an item.
* @param {Object} item - Item used to generate the slide.
* @returns {string} The HTML markup of the slide.
*/
function getSwiperSlideHtmlFromItem(item) { function getSwiperSlideHtmlFromItem(item) {
return getSwiperSlideHtmlFromSlide({ return getSwiperSlideHtmlFromSlide({
imageUrl: getImgUrl(item), imageUrl: getImgUrl(item),
@ -256,6 +317,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
}); });
} }
/**
* Renders the HTML markup of a slide for a slide object.
* @param {Object} item - Slide object used to generate the slide.
* @returns {string} The HTML markup of the slide.
*/
function getSwiperSlideHtmlFromSlide(item) { function getSwiperSlideHtmlFromSlide(item) {
var html = ''; var 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 + '">';
@ -283,6 +349,10 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
return html; return html;
} }
/**
* 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() { function getCurrentImageInfo() {
if (swiperInstance) { if (swiperInstance) {
var slide = document.querySelector('.swiper-slide-active'); var slide = document.querySelector('.swiper-slide-active');
@ -301,6 +371,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
} }
/**
* Starts a download for the currently displayed slide.
*/
function download() { function download() {
var imageInfo = getCurrentImageInfo(); var imageInfo = getCurrentImageInfo();
@ -309,6 +382,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
}); });
} }
/**
* Shares the currently displayed slide using the browser's built-in sharing feature.
*/
function share() { function share() {
var imageInfo = getCurrentImageInfo(); var imageInfo = getCurrentImageInfo();
@ -317,20 +393,29 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
}); });
} }
/**
* Starts the autoplay feature of the Swiper instance.
*/
function play() { function play() {
if (swiperInstance.autoplay) { if (swiperInstance.autoplay) {
swiperInstance.autoplay.start(); swiperInstance.autoplay.start();
} }
} }
/**
* Pauses the autoplay feature of the Swiper instance;
*/
function pause() { function pause() {
if (swiperInstance.autoplay) { if (swiperInstance.autoplay) {
swiperInstance.autoplay.stop(); swiperInstance.autoplay.stop();
} }
} }
/**
* Toggles the autoplay feature of the Swiper instance.
*/
function playPause() { function playPause() {
var paused = !dlg.querySelector('.btnSlideshowPause i').classList.contains("pause"); var paused = !dialog.querySelector('.btnSlideshowPause i').classList.contains("pause");
if (paused) { if (paused) {
play(); play();
} else { } else {
@ -338,6 +423,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
} }
/**
* Closes the dialog and destroys the Swiper instance.
*/
function onDialogClosed() { function onDialogClosed() {
var swiper = swiperInstance; var swiper = swiperInstance;
if (swiper) { if (swiper) {
@ -349,32 +437,38 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove); document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
} }
function getOsdBottom() { /**
return dlg.querySelector('.slideshowBottomBar'); * Shows the OSD.
} */
function showOsd() { function showOsd() {
var bottom = getOsdBottom(); var bottom = dialog.querySelector('.slideshowBottomBar');
if (bottom) { if (bottom) {
slideUpToShow(bottom); slideUpToShow(bottom);
startHideTimer(); startHideTimer();
} }
} }
/**
* Hides the OSD.
*/
function hideOsd() { function hideOsd() {
var bottom = getOsdBottom(); var bottom = dialog.querySelector('.slideshowBottomBar');
if (bottom) { if (bottom) {
slideDownToHide(bottom); slideDownToHide(bottom);
} }
} }
var hideTimeout; /**
* Starts the timer used to automatically hide the OSD.
*/
function startHideTimer() { function startHideTimer() {
stopHideTimer(); stopHideTimer();
hideTimeout = setTimeout(hideOsd, 4000); hideTimeout = setTimeout(hideOsd, 3000);
} }
/**
* Stops the timer used to automatically hide the OSD.
*/
function stopHideTimer() { function stopHideTimer() {
if (hideTimeout) { if (hideTimeout) {
clearTimeout(hideTimeout); clearTimeout(hideTimeout);
@ -382,69 +476,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; return;
} }
_osdOpen = true; _osdOpen = true;
elem.classList.remove('hide'); element.classList.remove('hide');
var onFinish = function () { var onFinish = function () {
focusManager.focus(elem.querySelector('.btnSlideshowPause')); focusManager.focus(element.querySelector('.btnSlideshowPause'));
}; };
if (!elem.animate) { if (!element.animate) {
onFinish(); onFinish();
return; return;
} }
requestAnimationFrame(function () { requestAnimationFrame(function () {
var keyframes = [ 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 } { transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }
]; ];
var timing = { duration: 300, iterations: 1, easing: 'ease-out' }; 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; return;
} }
var onFinish = function () { var onFinish = function () {
elem.classList.add('hide'); element.classList.add('hide');
_osdOpen = false; _osdOpen = false;
}; };
if (!elem.animate) { if (!element.animate) {
onFinish(); onFinish();
return; return;
} }
requestAnimationFrame(function () { requestAnimationFrame(function () {
var keyframes = [ var keyframes = [
{ transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 }, { 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' }; var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
elem.animate(keyframes, timing).onfinish = onFinish; element.animate(keyframes, timing).onfinish = onFinish;
}); });
} }
var lastMouseMoveData; /**
* Shows the OSD when moving the mouse pointer or touching the screen.
function onPointerMove(e) { * @param {Event} event - Pointer movement event.
*/
var pointerType = e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse'); function onPointerMove(event) {
var pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
if (pointerType === 'mouse') { if (pointerType === 'mouse') {
var eventX = e.screenX || 0; var eventX = event.screenX || 0;
var eventY = e.screenY || 0; var eventY = event.screenY || 0;
var obj = lastMouseMoveData; var obj = lastMouseMoveData;
if (!obj) { if (!obj) {
@ -467,38 +568,46 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
} }
function onInputCommand(e) { /**
switch (e.detail.command) { * Dispatches keyboard inputs to their proper handlers.
* @param {Event} event - Keyboard input event.
*/
function onInputCommand(event) {
switch (event.detail.command) {
case 'up': case 'up':
case 'down': case 'down':
case 'select': case 'select':
case 'menu': case 'menu':
case 'info': case 'info':
case 'play':
case 'playpause':
case 'pause':
showOsd(); showOsd();
break; break;
case 'play':
play();
break;
case 'pause':
pause();
break;
case 'playpause':
playPause();
break;
default: default:
break; break;
} }
} }
function stopInterval() { /**
if (currentTimeout) { * Shows the slideshow component.
clearTimeout(currentTimeout); */
currentTimeout = null;
}
}
self.show = function () { self.show = function () {
createElements(options); createElements(options);
}; };
/**
* Hides the slideshow element.
*/
self.hide = function () { self.hide = function () {
var dialog = dlg; var dialog = dialog;
if (dialog) { if (dialog) {
dialogHelper.close(dialog); dialogHelper.close(dialog);
} }
}; };