Merge pull request #1589 from Camc314/migrate-to-ES6-33

Migration of alphanumericshortcuts, autobackdrops and youtubeplayer plugin to ES6 modules

package.json

@@ -224,6 +224,8 @@
           "src/plugins/bookPlayer/plugin.js",
           "src/plugins/bookPlayer/tableOfContents.js",
           "src/plugins/photoPlayer/plugin.js",
+          "src/scripts/alphanumericshortcuts.js",
+          "src/scripts/autoBackdrops.js",
           "src/scripts/settings/appSettings.js",
           "src/scripts/settings/userSettings.js",
           "src/scripts/settings/webSettings.js",
@@ -236,6 +238,7 @@
           "src/scripts/imagehelper.js",
           "src/scripts/inputManager.js",
           "src/plugins/backdropScreensaver/plugin.js",
+          "src/plugins/youtubePlayer/plugin.js",
           "src/components/filterdialog/filterdialog.js",
           "src/components/fetchhelper.js",
           "src/scripts/editorsidebar.js",

src/components/tabbedview/itemstab.js

@@ -331,7 +331,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
         }
 
         if (this.enableAlphaNumericShortcuts !== false) {
-            this.alphaNumericShortcuts = new AlphaNumericShortcuts({
+            this.alphaNumericShortcuts = new AlphaNumericShortcuts.default({
                 itemsContainer: this.itemsContainer
             });
         }
@@ -561,7 +561,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
 
         var alphaNumericShortcuts = this.alphaNumericShortcuts;
         if (alphaNumericShortcuts) {
-            alphaNumericShortcuts.destroy();
+            alphaNumericShortcuts.default.destroy();
             this.alphaNumericShortcuts = null;
         }
     };

src/controllers/list.js

@@ -803,7 +803,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
                 bindAll(view.querySelectorAll('.btnShuffle'), 'click', shuffle);
             }
 
-            this.alphaNumericShortcuts = new AlphaNumericShortcuts({
+            this.alphaNumericShortcuts = new AlphaNumericShortcuts.default({
                 itemsContainer: self.itemsContainer
             });
         });
@@ -817,7 +817,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             var alphaNumericShortcuts = self.alphaNumericShortcuts;
 
             if (alphaNumericShortcuts) {
-                alphaNumericShortcuts.destroy();
+                alphaNumericShortcuts.default.destroy();
                 self.alphaNumericShortcuts = null;
             }
         });

src/plugins/youtubePlayer/plugin.js

@@ -1,30 +1,34 @@
-define(['require', 'events', 'browser', 'appRouter', 'loading'], function (require, events, browser, appRouter, loading) {
+import require from 'require';
-    'use strict';
+import events from 'events';
-    /* globals YT */
+import browser from 'browser';
+import appRouter from 'appRouter';
+import loading from 'loading';
 
-    function zoomIn(elem, iterations) {
+/* globals YT */
-        var keyframes = [
+
+function zoomIn(elem, iterations) {
+    const keyframes = [
         { transform: 'scale3d(.2, .2, .2)  ', opacity: '.6', offset: 0 },
         { transform: 'none', opacity: '1', offset: 1 }
     ];
 
-        var timing = { duration: 240, iterations: iterations };
+    const timing = { duration: 240, iterations: iterations };
     return elem.animate(keyframes, timing);
-    }
+}
 
-    function createMediaElement(instance, options) {
+function createMediaElement(instance, options) {
 
     return new Promise(function (resolve, reject) {
 
-            var dlg = document.querySelector('.youtubePlayerContainer');
+        const dlg = document.querySelector('.youtubePlayerContainer');
 
         if (!dlg) {
 
-                require(['css!./style'], function () {
+            import('css!./style').then(() => {
 
                 loading.show();
 
-                    var dlg = document.createElement('div');
+                const dlg = document.createElement('div');
 
                 dlg.classList.add('youtubePlayerContainer');
 
@@ -33,7 +37,7 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
                 }
 
                 dlg.innerHTML = '<div id="player"></div>';
-                    var videoElement = dlg.querySelector('#player');
+                const videoElement = dlg.querySelector('#player');
 
                 document.body.insertBefore(dlg, document.body.firstChild);
                 instance.videoDialog = dlg;
@@ -52,35 +56,35 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
             resolve(dlg.querySelector('#player'));
         }
     });
-    }
+}
 
-    function onVideoResize() {
+function onVideoResize() {
-        var instance = this;
+    const instance = this;
-        var player = instance.currentYoutubePlayer;
+    const player = instance.currentYoutubePlayer;
-        var dlg = instance.videoDialog;
+    const dlg = instance.videoDialog;
     if (player && dlg) {
         player.setSize(dlg.offsetWidth, dlg.offsetHeight);
     }
-    }
+}
 
-    function clearTimeUpdateInterval(instance) {
+function clearTimeUpdateInterval(instance) {
     if (instance.timeUpdateInterval) {
         clearInterval(instance.timeUpdateInterval);
     }
     instance.timeUpdateInterval = null;
-    }
+}
 
-    function onEndedInternal(instance) {
+function onEndedInternal(instance) {
 
     clearTimeUpdateInterval(instance);
-        var resizeListener = instance.resizeListener;
+    const resizeListener = instance.resizeListener;
     if (resizeListener) {
         window.removeEventListener('resize', resizeListener);
         window.removeEventListener('orientationChange', resizeListener);
         instance.resizeListener = null;
     }
 
-        var stopInfo = {
+    const stopInfo = {
         src: instance._currentSrc
     };
 
@@ -91,19 +95,19 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
         instance.currentYoutubePlayer.destroy();
     }
     instance.currentYoutubePlayer = null;
-    }
+}
 
-    // 4. The API will call this function when the video player is ready.
+// 4. The API will call this function when the video player is ready.
-    function onPlayerReady(event) {
+function onPlayerReady(event) {
     event.target.playVideo();
-    }
+}
 
-    function onTimeUpdate(e) {
+function onTimeUpdate(e) {
 
     events.trigger(this, 'timeupdate');
-    }
+}
 
-    function onPlaying(instance, playOptions, resolve) {
+function onPlaying(instance, playOptions, resolve) {
 
     if (!instance.started) {
 
@@ -123,21 +127,21 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
             instance.videoDialog.classList.remove('onTop');
         }
 
-            require(['loading'], function (loading) {
+        import('loading').then(({default: loading}) => {
 
             loading.hide();
         });
     }
-    }
+}
 
-    function setCurrentSrc(instance, elem, options) {
+function setCurrentSrc(instance, elem, options) {
 
     return new Promise(function (resolve, reject) {
 
-            require(['queryString'], function (queryString) {
+        import('queryString').then(({default: queryString}) => {
 
             instance._currentSrc = options.url;
-                var params = queryString.parse(options.url.split('?')[1]);
+            const params = queryString.parse(options.url.split('?')[1]);
             // 3. This function creates an <iframe> (and YouTube player)
             //    after the API code downloads.
             window.onYouTubeIframeAPIReady = function () {
@@ -168,7 +172,7 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
                     }
                 });
 
-                    var resizeListener = instance.resizeListener;
+                let resizeListener = instance.resizeListener;
                 if (resizeListener) {
                     window.removeEventListener('resize', resizeListener);
                     window.addEventListener('resize', resizeListener);
@@ -181,9 +185,9 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
             };
 
             if (!window.YT) {
-                    var tag = document.createElement('script');
+                const tag = document.createElement('script');
                 tag.src = 'https://www.youtube.com/iframe_api';
-                    var firstScriptTag = document.getElementsByTagName('script')[0];
+                const firstScriptTag = document.getElementsByTagName('script')[0];
                 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
             } else {
                 window.onYouTubeIframeAPIReady();
@@ -191,9 +195,10 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
         });
 
     });
-    }
+}
 
-    function YoutubePlayer() {
+class YoutubePlayer {
+    constructor() {
 
         this.name = 'Youtube Player';
         this.type = 'mediaplayer';
@@ -202,21 +207,19 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
         // Let any players created by plugins take priority
         this.priority = 1;
     }
-
+    play(options) {
-    YoutubePlayer.prototype.play = function (options) {
 
         this.started = false;
-        var instance = this;
+        const instance = this;
 
         return createMediaElement(this, options).then(function (elem) {
 
             return setCurrentSrc(instance, elem, options);
         });
-    };
+    }
+    stop(destroyPlayer) {
 
-    YoutubePlayer.prototype.stop = function (destroyPlayer) {
+        const src = this._currentSrc;
-
-        var src = this._currentSrc;
 
         if (src) {
 
@@ -231,63 +234,52 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
         }
 
         return Promise.resolve();
-    };
+    }
-
+    destroy() {
-    YoutubePlayer.prototype.destroy = function () {
 
         appRouter.setTransparency('none');
 
-        var dlg = this.videoDialog;
+        const dlg = this.videoDialog;
         if (dlg) {
 
             this.videoDialog = null;
 
             dlg.parentNode.removeChild(dlg);
         }
-    };
+    }
-
+    canPlayMediaType(mediaType) {
-    YoutubePlayer.prototype.canPlayMediaType = function (mediaType) {
 
         mediaType = (mediaType || '').toLowerCase();
 
         return mediaType === 'audio' || mediaType === 'video';
-    };
+    }
-
+    canPlayItem(item) {
-    YoutubePlayer.prototype.canPlayItem = function (item) {
 
         // Does not play server items
         return false;
-    };
+    }
-
+    canPlayUrl(url) {
-    YoutubePlayer.prototype.canPlayUrl = function (url) {
 
         return url.toLowerCase().indexOf('youtube.com') !== -1;
-    };
+    }
-
+    getDeviceProfile() {
-    YoutubePlayer.prototype.getDeviceProfile = function () {
 
         return Promise.resolve({});
-    };
+    }
-
+    currentSrc() {
-    YoutubePlayer.prototype.currentSrc = function () {
         return this._currentSrc;
-    };
+    }
-
+    setSubtitleStreamIndex(index) {
-    YoutubePlayer.prototype.setSubtitleStreamIndex = function (index) {
+    }
-    };
+    canSetAudioStreamIndex() {
-
-    YoutubePlayer.prototype.canSetAudioStreamIndex = function () {
         return false;
-    };
+    }
-
+    setAudioStreamIndex(index) {
-    YoutubePlayer.prototype.setAudioStreamIndex = function (index) {
+    }
-
-    };
-
     // Save this for when playback stops, because querying the time at that point might return 0
-    YoutubePlayer.prototype.currentTime = function (val) {
+    currentTime(val) {
 
-        var currentYoutubePlayer = this.currentYoutubePlayer;
+        const currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             if (val != null) {
@@ -297,92 +289,84 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
 
             return currentYoutubePlayer.getCurrentTime() * 1000;
         }
-    };
+    }
+    duration(val) {
 
-    YoutubePlayer.prototype.duration = function (val) {
+        const currentYoutubePlayer = this.currentYoutubePlayer;
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             return currentYoutubePlayer.getDuration() * 1000;
         }
         return null;
-    };
+    }
+    pause() {
 
-    YoutubePlayer.prototype.pause = function () {
+        const currentYoutubePlayer = this.currentYoutubePlayer;
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             currentYoutubePlayer.pauseVideo();
 
-            var instance = this;
+            const instance = this;
 
             // This needs a delay before the youtube player will report the correct player state
             setTimeout(function () {
                 events.trigger(instance, 'pause');
             }, 200);
         }
-    };
+    }
+    unpause() {
 
-    YoutubePlayer.prototype.unpause = function () {
+        const currentYoutubePlayer = this.currentYoutubePlayer;
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             currentYoutubePlayer.playVideo();
 
-            var instance = this;
+            const instance = this;
 
             // This needs a delay before the youtube player will report the correct player state
             setTimeout(function () {
                 events.trigger(instance, 'unpause');
             }, 200);
         }
-    };
+    }
+    paused() {
 
-    YoutubePlayer.prototype.paused = function () {
+        const currentYoutubePlayer = this.currentYoutubePlayer;
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             return currentYoutubePlayer.getPlayerState() === 2;
         }
 
         return false;
-    };
+    }
-
+    volume(val) {
-    YoutubePlayer.prototype.volume = function (val) {
         if (val != null) {
             return this.setVolume(val);
         }
 
         return this.getVolume();
-    };
+    }
+    setVolume(val) {
 
-    YoutubePlayer.prototype.setVolume = function (val) {
+        const currentYoutubePlayer = this.currentYoutubePlayer;
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             if (val != null) {
                 currentYoutubePlayer.setVolume(val);
             }
         }
-    };
+    }
+    getVolume() {
 
-    YoutubePlayer.prototype.getVolume = function () {
+        const currentYoutubePlayer = this.currentYoutubePlayer;
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             return currentYoutubePlayer.getVolume();
         }
-    };
+    }
+    setMute(mute) {
 
-    YoutubePlayer.prototype.setMute = function (mute) {
+        const currentYoutubePlayer = this.currentYoutubePlayer;
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (mute) {
             if (currentYoutubePlayer) {
@@ -394,16 +378,15 @@ define(['require', 'events', 'browser', 'appRouter', 'loading'], function (requi
                 currentYoutubePlayer.unMute();
             }
         }
-    };
+    }
+    isMuted() {
 
-    YoutubePlayer.prototype.isMuted = function () {
+        const currentYoutubePlayer = this.currentYoutubePlayer;
-
-        var currentYoutubePlayer = this.currentYoutubePlayer;
 
         if (currentYoutubePlayer) {
             return currentYoutubePlayer.isMuted();
         }
-    };
+    }
+}
 
-    return YoutubePlayer;
+export default YoutubePlayer;
-});

src/scripts/alphanumericshortcuts.js

@@ -1,11 +1,11 @@
-define(['dom', 'focusManager'], function (dom, focusManager) {
+import dom from 'dom';
-    'use strict';
+import focusManager from 'focusManager';
 
-    var inputDisplayElement;
+let inputDisplayElement;
-    var currentDisplayText = '';
+let currentDisplayText = '';
-    var currentDisplayTextContainer;
+let currentDisplayTextContainer;
 
-    function onKeyDown(e) {
+function onKeyDown(e) {
 
     if (e.ctrlKey) {
         return;
@@ -17,8 +17,8 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
         return;
     }
 
-        var key = e.key;
+    const key = e.key;
-        var chr = key ? alphanumeric(key) : null;
+    let chr = key ? alphanumeric(key) : null;
 
     if (chr) {
 
@@ -29,14 +29,14 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
             onAlphanumericKeyPress(e, chr);
         }
     }
-    }
+}
 
-    function alphanumeric(value) {
+function alphanumeric(value) {
-        var letterNumber = /^[0-9a-zA-Z]+$/;
+    const letterNumber = /^[0-9a-zA-Z]+$/;
     return value.match(letterNumber);
-    }
+}
 
-    function ensureInputDisplayElement() {
+function ensureInputDisplayElement() {
     if (!inputDisplayElement) {
         inputDisplayElement = document.createElement('div');
         inputDisplayElement.classList.add('alphanumeric-shortcut');
@@ -44,21 +44,21 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
 
         document.body.appendChild(inputDisplayElement);
     }
-    }
+}
 
-    var alpanumericShortcutTimeout;
+let alpanumericShortcutTimeout;
-    function clearAlphaNumericShortcutTimeout() {
+function clearAlphaNumericShortcutTimeout() {
     if (alpanumericShortcutTimeout) {
         clearTimeout(alpanumericShortcutTimeout);
         alpanumericShortcutTimeout = null;
     }
-    }
+}
-    function resetAlphaNumericShortcutTimeout() {
+function resetAlphaNumericShortcutTimeout() {
     clearAlphaNumericShortcutTimeout();
     alpanumericShortcutTimeout = setTimeout(onAlphanumericShortcutTimeout, 2000);
-    }
+}
 
-    function onAlphanumericKeyPress(e, chr) {
+function onAlphanumericKeyPress(e, chr) {
     if (currentDisplayText.length >= 3) {
         return;
     }
@@ -67,11 +67,11 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
     inputDisplayElement.innerHTML = currentDisplayText;
     inputDisplayElement.classList.remove('hide');
     resetAlphaNumericShortcutTimeout();
-    }
+}
 
-    function onAlphanumericShortcutTimeout() {
+function onAlphanumericShortcutTimeout() {
-        var value = currentDisplayText;
+    const value = currentDisplayText;
-        var container = currentDisplayTextContainer;
+    const container = currentDisplayTextContainer;
 
     currentDisplayText = '';
     currentDisplayTextContainer = null;
@@ -79,13 +79,13 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
     inputDisplayElement.classList.add('hide');
     clearAlphaNumericShortcutTimeout();
     selectByShortcutValue(container, value);
-    }
+}
 
-    function selectByShortcutValue(container, value) {
+function selectByShortcutValue(container, value) {
 
     value = value.toUpperCase();
 
-        var focusElem;
+    let focusElem;
     if (value === '#') {
 
         focusElem = container.querySelector('*[data-prefix]');
@@ -98,13 +98,14 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
     if (focusElem) {
         focusManager.focus(focusElem);
     }
-    }
+}
 
-    function AlphaNumericShortcuts(options) {
+class AlphaNumericShortcuts {
+    constructor(options) {
 
         this.options = options;
 
-        var keyDownHandler = onKeyDown.bind(this);
+        const keyDownHandler = onKeyDown.bind(this);
 
         dom.addEventListener(window, 'keydown', keyDownHandler, {
             passive: true
@@ -112,10 +113,9 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
 
         this.keyDownHandler = keyDownHandler;
     }
+    destroy() {
 
-    AlphaNumericShortcuts.prototype.destroy = function () {
+        const keyDownHandler = this.keyDownHandler;
-
-        var keyDownHandler = this.keyDownHandler;
 
         if (keyDownHandler) {
             dom.removeEventListener(window, 'keydown', keyDownHandler, {
@@ -124,7 +124,7 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
             this.keyDownHandler = null;
         }
         this.options = null;
-    };
+    }
+}
 
-    return AlphaNumericShortcuts;
+export default AlphaNumericShortcuts;
-});

src/scripts/autoBackdrops.js

@@ -1,15 +1,16 @@
-define(['backdrop', 'userSettings', 'libraryMenu'], function (backdrop, userSettings, libraryMenu) {
+import backdrop from 'backdrop';
-    'use strict';
+import * as userSettings from 'userSettings';
+import libraryMenu from 'libraryMenu';
 
-    var cache = {};
+const cache = {};
 
-    function enabled() {
+function enabled() {
     return userSettings.enableBackdrops();
-    }
+}
 
-    function getBackdropItemIds(apiClient, userId, types, parentId) {
+function getBackdropItemIds(apiClient, userId, types, parentId) {
-        var key = `backdrops2_${userId + (types || '') + (parentId || '')}`;
+    const key = `backdrops2_${userId + (types || '') + (parentId || '')}`;
-        var data = cache[key];
+    let data = cache[key];
 
     if (data) {
         console.debug(`Found backdrop id list in cache. Key: ${key}`);
@@ -17,7 +18,7 @@ define(['backdrop', 'userSettings', 'libraryMenu'], function (backdrop, userSett
         return Promise.resolve(data);
     }
 
-        var options = {
+    const options = {
         SortBy: 'IsFavoriteOrLiked,Random',
         Limit: 20,
         Recursive: true,
@@ -27,7 +28,7 @@ define(['backdrop', 'userSettings', 'libraryMenu'], function (backdrop, userSett
         EnableTotalRecordCount: false
     };
     return apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) {
-            var images = result.Items.map(function (i) {
+        const images = result.Items.map(function (i) {
             return {
                 Id: i.Id,
                 tag: i.BackdropImageTags[0],
@@ -37,10 +38,10 @@ define(['backdrop', 'userSettings', 'libraryMenu'], function (backdrop, userSett
         cache[key] = JSON.stringify(images);
         return images;
     });
-    }
+}
 
-    function showBackdrop(type, parentId) {
+function showBackdrop(type, parentId) {
-        var apiClient = window.ApiClient;
+    const apiClient = window.ApiClient;
 
     if (apiClient) {
         getBackdropItemIds(apiClient, apiClient.getCurrentUserId(), type, parentId).then(function (images) {
@@ -54,16 +55,16 @@ define(['backdrop', 'userSettings', 'libraryMenu'], function (backdrop, userSett
             }
         });
     }
-    }
+}
 
-    pageClassOn('pageshow', 'page', function () {
+pageClassOn('pageshow', 'page', function () {
-        var page = this;
+    const page = this;
 
     if (!page.classList.contains('selfBackdropPage')) {
         if (page.classList.contains('backdropPage')) {
             if (enabled()) {
-                    var type = page.getAttribute('data-backdroptype');
+                const type = page.getAttribute('data-backdroptype');
-                    var parentId = page.classList.contains('globalBackdropPage') ? '' : libraryMenu.getTopParentId();
+                const parentId = page.classList.contains('globalBackdropPage') ? '' : libraryMenu.getTopParentId();
                 showBackdrop(type, parentId);
             } else {
                 page.classList.remove('backdropPage');
@@ -73,5 +74,5 @@ define(['backdrop', 'userSettings', 'libraryMenu'], function (backdrop, userSett
             backdrop.clearBackdrop();
         }
     }
-    });
 });
+