Merge pull request #1654 from Camc314/migrate-to-ES6-42

Migration of toast and upnextdialog to ES6 modules

package.json

@@ -166,6 +166,8 @@
           "src/components/syncPlay/playbackPermissionManager.js",
           "src/components/syncPlay/syncPlayManager.js",
           "src/components/syncPlay/timeSyncManager.js",
+          "src/components/toast/toast.js",
+          "src/components/upnextdialog/upnextdialog.js",
           "src/components/viewContainer.js",
           "src/controllers/session/addServer/index.js",
           "src/controllers/session/forgotPassword/index.js",

src/components/imageeditor/imageeditor.js

@@ -59,8 +59,8 @@ import 'css!./imageeditor';
         currentItem = item;
 
         apiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) {
-            const btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages');
+            var btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages');
-            for (let i = 0, length = btnBrowseAllImages.length; i < length; i++) {
+            for (var i = 0, length = btnBrowseAllImages.length; i < length; i++) {
                 if (providers.length) {
                     btnBrowseAllImages[i].classList.remove('hide');
                 } else {

src/components/toast/toast.js

@@ -1,36 +1,34 @@
-define(['css!./toast'], function () {
+import 'css!./toast';
-    'use strict';
 
-    function remove(elem) {
+function remove(elem) {
-        setTimeout(function () {
+    setTimeout(function () {
-            elem.parentNode.removeChild(elem);
+        elem.parentNode.removeChild(elem);
-        }, 300);
+    }, 300);
+}
+
+function animateRemove(elem) {
+    setTimeout(function () {
+        elem.classList.remove('toastVisible');
+        remove(elem);
+    }, 3300);
+}
+
+export default function (options) {
+    if (typeof options === 'string') {
+        options = {
+            text: options
+        };
     }
 
-    function animateRemove(elem) {
+    const elem = document.createElement('div');
-        setTimeout(function () {
+    elem.classList.add('toast');
-            elem.classList.remove('toastVisible');
+    elem.innerHTML = options.text;
-            remove(elem);
-        }, 3300);
-    }
 
-    return function (options) {
+    document.body.appendChild(elem);
-        if (typeof options === 'string') {
-            options = {
-                text: options
-            };
-        }
 
-        var elem = document.createElement('div');
+    setTimeout(function () {
-        elem.classList.add('toast');
+        elem.classList.add('toastVisible');
-        elem.innerHTML = options.text;
 
-        document.body.appendChild(elem);
+        animateRemove(elem);
-
+    }, 300);
-        setTimeout(function () {
+}
-            elem.classList.add('toastVisible');
-
-            animateRemove(elem);
-        }, 300);
-    };
-});

src/components/upnextdialog/upnextdialog.js

@@ -1,9 +1,19 @@
-define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'layoutManager', 'focusManager', 'globalize', 'itemHelper', 'css!./upnextdialog', 'emby-button', 'flexStyles'], function (dom, playbackManager, connectionManager, events, mediaInfo, layoutManager, focusManager, globalize, itemHelper) {
+import dom from 'dom';
-    'use strict';
+import playbackManager from 'playbackManager';
+import connectionManager from 'connectionManager';
+import events from 'events';
+import mediaInfo from 'mediaInfo';
+import layoutManager from 'layoutManager';
+import focusManager from 'focusManager';
+import globalize from 'globalize';
+import itemHelper from 'itemHelper';
+import 'css!./upnextdialog';
+import 'emby-button';
+import 'flexStyles';
 
-    playbackManager = playbackManager.default || playbackManager;
+/* eslint-disable indent */
 
-    var transitionEndEventName = dom.whichTransitionEvent();
+    const transitionEndEventName = dom.whichTransitionEvent();
 
     function seriesImageUrl(item, options) {
         if (item.Type !== 'Episode') {
@@ -58,7 +68,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
 
     function setPoster(osdPoster, item, secondaryItem) {
         if (item) {
-            var imgUrl = seriesImageUrl(item, { type: 'Primary' }) ||
+            let imgUrl = seriesImageUrl(item, { type: 'Primary' }) ||
                 seriesImageUrl(item, { type: 'Thumb' }) ||
                 imageUrl(item, { type: 'Primary' });
 
@@ -78,7 +88,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function getHtml() {
-        var html = '';
+        let html = '';
 
         html += '<div class="upNextDialog-poster">';
         html += '</div>';
@@ -114,17 +124,17 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function setNextVideoText() {
-        var instance = this;
+        const instance = this;
 
-        var elem = instance.options.parent;
+        const elem = instance.options.parent;
 
-        var secondsRemaining = Math.max(Math.round(getTimeRemainingMs(instance) / 1000), 0);
+        const secondsRemaining = Math.max(Math.round(getTimeRemainingMs(instance) / 1000), 0);
 
         console.debug('up next seconds remaining: ' + secondsRemaining);
 
-        var timeText = '<span class="upNextDialog-countdownText">' + globalize.translate('HeaderSecondsValue', secondsRemaining) + '</span>';
+        const timeText = '<span class="upNextDialog-countdownText">' + globalize.translate('HeaderSecondsValue', secondsRemaining) + '</span>';
 
-        var nextVideoText = instance.itemType === 'Episode' ?
+        const nextVideoText = instance.itemType === 'Episode' ?
             globalize.translate('HeaderNextEpisodePlayingInValue', timeText) :
             globalize.translate('HeaderNextVideoPlayingInValue', timeText);
 
@@ -132,9 +142,9 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function fillItem(item) {
-        var instance = this;
+        const instance = this;
 
-        var elem = instance.options.parent;
+        const elem = instance.options.parent;
 
         setPoster(elem.querySelector('.upNextDialog-poster'), item);
 
@@ -143,7 +153,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
         elem.querySelector('.upNextDialog-mediainfo').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(item, {
         });
 
-        var title = itemHelper.getDisplayName(item);
+        let title = itemHelper.getDisplayName(item);
         if (item.SeriesName) {
             title = item.SeriesName + ' - ' + title;
         }
@@ -163,10 +173,10 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function onStartNowClick() {
-        var options = this.options;
+        const options = this.options;
 
         if (options) {
-            var player = options.player;
+            const player = options.player;
 
             this.hide();
 
@@ -188,7 +198,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function clearHideAnimationEventListeners(instance, elem) {
-        var fn = instance._onHideAnimationComplete;
+        const fn = instance._onHideAnimationComplete;
 
         if (fn) {
             dom.removeEventListener(elem, transitionEndEventName, fn, {
@@ -198,8 +208,8 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function onHideAnimationComplete(e) {
-        var instance = this;
+        const instance = this;
-        var elem = e.target;
+        const elem = e.target;
 
         elem.classList.add('hide');
 
@@ -208,14 +218,14 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function hideComingUpNext() {
-        var instance = this;
+        const instance = this;
         clearCountdownTextTimeout(this);
 
         if (!instance.options) {
             return;
         }
 
-        var elem = instance.options.parent;
+        const elem = instance.options.parent;
 
         if (!elem) {
             return;
@@ -232,7 +242,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
 
         elem.classList.add('upNextDialog-hidden');
 
-        var fn = onHideAnimationComplete.bind(instance);
+        const fn = onHideAnimationComplete.bind(instance);
         instance._onHideAnimationComplete = fn;
 
         dom.addEventListener(elem, transitionEndEventName, fn, {
@@ -241,12 +251,12 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function getTimeRemainingMs(instance) {
-        var options = instance.options;
+        const options = instance.options;
         if (options) {
-            var runtimeTicks = playbackManager.duration(options.player);
+            const runtimeTicks = playbackManager.duration(options.player);
 
             if (runtimeTicks) {
-                var timeRemainingTicks = runtimeTicks - playbackManager.currentTime(options.player);
+                const timeRemainingTicks = runtimeTicks - playbackManager.currentTime(options.player);
 
                 return Math.round(timeRemainingTicks / 10000);
             }
@@ -256,7 +266,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
     }
 
     function startComingUpNextHideTimer(instance) {
-        var timeRemainingMs = getTimeRemainingMs(instance);
+        const timeRemainingMs = getTimeRemainingMs(instance);
 
         if (timeRemainingMs <= 0) {
             return;
@@ -268,14 +278,14 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
         instance._countdownTextTimeout = setInterval(setNextVideoText.bind(instance), 400);
     }
 
-    function UpNextDialog(options) {
+class UpNextDialog {
+    constructor(options) {
         this.options = options;
 
         init(this, options);
     }
-
+    show() {
-    UpNextDialog.prototype.show = function () {
+        const elem = this.options.parent;
-        var elem = this.options.parent;
 
         clearHideAnimationEventListeners(this, elem);
 
@@ -293,18 +303,18 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
         }
 
         startComingUpNextHideTimer(this);
-    };
+    }
-
+    hide() {
-    UpNextDialog.prototype.hide = function () {
         hideComingUpNext.call(this);
-    };
+    }
-
+    destroy() {
-    UpNextDialog.prototype.destroy = function () {
         hideComingUpNext.call(this);
 
         this.options = null;
         this.itemType = null;
-    };
+    }
+}
 
-    return UpNextDialog;
+export default UpNextDialog;
-});
+
+/* eslint-enable indent */

src/scripts/site.js

@@ -152,13 +152,13 @@ var Dashboard = {
     processPluginConfigurationUpdateResult: function () {
         require(['loading', 'toast'], function (loading, toast) {
             loading.hide();
-            toast(Globalize.translate('MessageSettingsSaved'));
+            toast.default(Globalize.translate('MessageSettingsSaved'));
         });
     },
     processServerConfigurationUpdateResult: function (result) {
         require(['loading', 'toast'], function (loading, toast) {
             loading.hide();
-            toast(Globalize.translate('MessageSettingsSaved'));
+            toast.default(Globalize.translate('MessageSettingsSaved'));
         });
     },
     processErrorResponse: function (response) {
@@ -180,7 +180,7 @@ var Dashboard = {
     alert: function (options) {
         if (typeof options == 'string') {
             return void require(['toast'], function (toast) {
-                toast({
+                toast.default({
                     text: options
                 });
             });