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

Merge pull request #1768 from Camc314/migrate-to-ES6-63

Browse source 
Migration of sortmenu and slideshow to ES6 modules
This commit is contained in:
Anthony Lavado 2020-08-08 14:06:23 -04:00 • committed by GitHub
commit c7c96f7c5d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 696 additions and 689 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

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

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

@ -2,12 +2,17 @@
* Image viewer component
* @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) {
'use strict';
browser = browser.default || browser;
layoutManager = layoutManager.default || layoutManager;
focusManager = focusManager.default || focusManager;
import dialogHelper from 'dialogHelper';
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';
/**
* Name of transition event.
@ -80,8 +85,8 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* @returns {string} URL of the item's image.
*/
function getImgUrl(item, user) {
var apiClient = connectionManager.getApiClient(item.ServerId);
var imageOptions = {};
const apiClient = connectionManager.getApiClient(item.ServerId);
const imageOptions = {};
if (item.BackdropImageTags && item.BackdropImageTags.length) {
return getBackdropImageUrl(item, imageOptions, apiClient);
@ -103,7 +108,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* @returns {string} The HTML markup of the button.
*/
function getIcon(icon, cssClass, canFocus, autoFocus) {
var tabIndex = canFocus ? '' : ' tabindex="-1"';
const tabIndex = canFocus ? '' : ' tabindex="-1"';
autoFocus = autoFocus ? ' autofocus' : '';
return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><span class="material-icons slideshowButtonIcon ' + icon + '"></span></button>';
}
@ -120,18 +125,18 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
}
}
return function (options) {
var self = this;
export default function (options) {
const self = this;
/** Initialized instance of Swiper. */
var swiperInstance;
let swiperInstance;
/** Initialized instance of the dialog containing the Swiper instance. */
var dialog;
let dialog;
/** Options of the slideshow components */
var currentOptions;
let currentOptions;
/** ID of the timeout used to hide the OSD. */
var hideTimeout;
let hideTimeout;
/** Last coordinates of the mouse pointer. */
var lastMouseMoveData;
let lastMouseMoveData;
/**
* Creates the HTML markup for the dialog and the OSD.
@ -151,12 +156,12 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
dialog.classList.add('slideshowDialog');
var html = '';
let html = '';
html += '<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>';
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_right', 'btnSlideshowNext slideshowButton hide-mouse-idle-tv', false);
@ -197,17 +202,17 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
dialogHelper.close(dialog);
});
var btnPause = dialog.querySelector('.btnSlideshowPause');
const btnPause = dialog.querySelector('.btnSlideshowPause');
if (btnPause) {
btnPause.addEventListener('click', playPause);
}
var btnDownload = dialog.querySelector('.btnDownload');
const btnDownload = dialog.querySelector('.btnDownload');
if (btnDownload) {
btnDownload.addEventListener('click', download);
}
var btnShare = dialog.querySelector('.btnShare');
const btnShare = dialog.querySelector('.btnShare');
if (btnShare) {
btnShare.addEventListener('click', share);
}
@ -232,7 +237,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Handles OSD changes when the autoplay is started.
*/
function onAutoplayStart() {
var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
const btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
if (btnSlideshowPause) {
btnSlideshowPause.classList.replace('play_arrow', 'pause');
}
@ -242,7 +247,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Handles OSD changes when the autoplay is stopped.
*/
function onAutoplayStop() {
var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
const btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
if (btnSlideshowPause) {
btnSlideshowPause.classList.replace('pause', 'play_arrow');
}
@ -289,14 +294,14 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* @param {Object} options - Options used to initialize the Swiper instance.
*/
function loadSwiper(dialog, options) {
var slides;
let slides;
if (currentOptions.slides) {
slides = currentOptions.slides;
} else {
slides = currentOptions.items;
}
require(['swiper'], function (Swiper) {
import('swiper').then(({default: Swiper}) => {
swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), {
direction: 'horizontal',
// Loop is disabled due to the virtual slides option not supporting it.
@ -370,7 +375,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* @returns {string} The HTML markup of the slide.
*/
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-zoom-container">';
if (useFakeZoomImage) {
@ -405,7 +410,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
*/
function getCurrentImageInfo() {
if (swiperInstance) {
var slide = document.querySelector('.swiper-slide-active');
const slide = document.querySelector('.swiper-slide-active');
if (slide) {
return {
@ -425,9 +430,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Starts a download for the currently displayed slide.
*/
function download() {
var imageInfo = getCurrentImageInfo();
const imageInfo = getCurrentImageInfo();
require(['fileDownloader'], function (fileDownloader) {
import('fileDownloader').then(({default: fileDownloader}) => {
fileDownloader.download([imageInfo]);
});
}
@ -436,7 +441,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Shares the currently displayed slide using the browser's built-in sharing feature.
*/
function share() {
var imageInfo = getCurrentImageInfo();
const imageInfo = getCurrentImageInfo();
navigator.share({
url: imageInfo.shareUrl
@ -465,7 +470,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Toggles the autoplay feature of the Swiper instance.
*/
function playPause() {
var paused = !dialog.querySelector('.btnSlideshowPause .material-icons').classList.contains('pause');
const paused = !dialog.querySelector('.btnSlideshowPause .material-icons').classList.contains('pause');
if (paused) {
play();
} else {
@ -477,7 +482,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Closes the dialog and destroys the Swiper instance.
*/
function onDialogClosed() {
var swiper = swiperInstance;
const swiper = swiperInstance;
if (swiper) {
swiper.destroy(true, true);
swiperInstance = null;
@ -495,7 +500,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Shows the OSD.
*/
function showOsd() {
var bottom = dialog.querySelector('.slideshowBottomBar');
const bottom = dialog.querySelector('.slideshowBottomBar');
if (bottom) {
slideUpToShow(bottom);
startHideTimer();
@ -506,7 +511,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Hides the OSD.
*/
function hideOsd() {
var bottom = dialog.querySelector('.slideshowBottomBar');
const bottom = dialog.querySelector('.slideshowBottomBar');
if (bottom) {
slideDownToHide(bottom);
}
@ -541,7 +546,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
element.classList.remove('hide');
var onFinish = function () {
const onFinish = function () {
focusManager.focus(element.querySelector('.btnSlideshowPause'));
};
@ -551,11 +556,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
}
requestAnimationFrame(function () {
var keyframes = [
const keyframes = [
{ 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' };
const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
element.animate(keyframes, timing).onfinish = onFinish;
});
}
@ -569,7 +574,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
return;
}
var onFinish = function () {
const onFinish = function () {
element.classList.add('hide');
};
@ -579,11 +584,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
}
requestAnimationFrame(function () {
var keyframes = [
const keyframes = [
{ transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
{ 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;
});
}
@ -593,13 +598,13 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* @param {Event} event - Pointer movement event.
*/
function onPointerMove(event) {
var pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
const pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
if (pointerType === 'mouse') {
var eventX = event.screenX || 0;
var eventY = event.screenY || 0;
const eventX = event.screenX || 0;
const eventY = event.screenY || 0;
var obj = lastMouseMoveData;
const obj = lastMouseMoveData;
if (!obj) {
lastMouseMoveData = {
x: eventX,
@ -665,5 +670,4 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
dialogHelper.close(dialog);
}
};
};
});
}

49
src/components/sortmenu/sortmenu.js
View file

@ -1,8 +1,13 @@
define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'globalize', 'userSettings', 'emby-select', 'paper-icon-button-light', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dom, focusManager, dialogHelper, loading, layoutManager, connectionManager, globalize, userSettings) {
'use strict';
layoutManager = layoutManager.default || layoutManager;
focusManager = focusManager.default || focusManager;
import dialogHelper from 'dialogHelper';
import layoutManager from 'layoutManager';
import globalize from 'globalize';
import * as userSettings from 'userSettings';
import 'emby-select';
import 'paper-icon-button-light';
import 'material-icons';
import 'css!./../formdialog';
import 'emby-button';
import 'flexStyles';
function onSubmit(e) {
e.preventDefault();
@ -17,34 +22,30 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
}
function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) {
scrollHelper = scrollHelper.default || scrollHelper;
var fn = on ? 'on' : 'off';
import('scrollHelper').then(({default: scrollHelper}) => {
const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
});
}
function fillSortBy(context, options) {
var selectSortBy = context.querySelector('.selectSortBy');
const selectSortBy = context.querySelector('.selectSortBy');
selectSortBy.innerHTML = options.map(function (o) {
return '<option value="' + o.value + '">' + o.name + '</option>';
}).join('');
}
function saveValues(context, settings, settingsKey) {
function saveValues(context, settingsKey) {
userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
}
function SortMenu() {
}
SortMenu.prototype.show = function (options) {
class SortMenu {
show(options) {
return new Promise(function (resolve, reject) {
require(['text!./sortmenu.template.html'], function (template) {
var dialogOptions = {
import('text!./sortmenu.template.html').then(({default: template}) => {
const dialogOptions = {
removeOnClose: true,
scrollY: false
};
@ -55,11 +56,11 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
dialogOptions.size = 'small';
}
var dlg = dialogHelper.createDialog(dialogOptions);
const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
var html = '';
let html = '';
html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
@ -82,7 +83,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
centerFocus(dlg.querySelector('.formDialogContent'), false, true);
}
var submitted;
let submitted;
dlg.querySelector('form').addEventListener('change', function () {
submitted = true;
@ -94,7 +95,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
}
if (submitted) {
saveValues(dlg, options.settings, options.settingsKey);
saveValues(dlg, options.settingsKey);
resolve();
return;
}
@ -103,7 +104,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
});
});
});
};
}
}
return SortMenu;
});
export default SortMenu;