Merge pull request #1583 from Camc314/migrate-to-ES6-28

Migration of touchhelper and taskbuttons to ES6 modules

package.json

@@ -224,6 +224,9 @@
           "src/plugins/bookPlayer/plugin.js",
           "src/plugins/bookPlayer/tableOfContents.js",
           "src/plugins/photoPlayer/plugin.js",
+          "src/scripts/settings/appSettings.js",
+          "src/scripts/settings/userSettings.js",
+          "src/scripts/settings/webSettings.js",
           "src/scripts/datetime.js",
           "src/scripts/deleteHelper.js",
           "src/scripts/dfnshelper.js",
@@ -232,14 +235,13 @@
           "src/scripts/filesystem.js",
           "src/scripts/imagehelper.js",
           "src/scripts/inputManager.js",
+          "src/scripts/keyboardNavigation.js",
+          "src/scripts/taskbutton.js",
+          "src/scripts/touchHelper.js",
+          "src/scripts/themeLoader.js",
           "src/plugins/backdropScreensaver/plugin.js",
           "src/components/filterdialog/filterdialog.js",
-          "src/components/fetchhelper.js",
+          "src/components/fetchhelper.js"
-          "src/scripts/keyboardNavigation.js",
-          "src/scripts/settings/appSettings.js",
-          "src/scripts/settings/userSettings.js",
-          "src/scripts/themeLoader.js",
-          "src/scripts/settings/webSettings.js"
         ],
         "plugins": [
           "@babel/plugin-transform-modules-amd",

src/controllers/dashboard/mediaLibrary.js

@@ -380,6 +380,7 @@ import 'emby-itemrefreshindicator';
     });
     pageIdOn('pageshow', 'mediaLibraryPage', function () {
         libraryMenu.setTabs('librarysetup', 0, getTabs);
+
         const page = this;
         taskButton({
             mode: 'on',
@@ -389,6 +390,7 @@ import 'emby-itemrefreshindicator';
         });
     });
     pageIdOn('pagebeforehide', 'mediaLibraryPage', function () {
+
         const page = this;
         taskButton({
             mode: 'off',

src/controllers/livetvstatus.js

@@ -303,7 +303,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
     }).on('pageshow', '#liveTvStatusPage', function () {
         var page = this;
         reload(page);
-        taskButton({
+        taskButton.default({
             mode: 'on',
             progressElem: page.querySelector('.refreshGuideProgress'),
             taskKey: 'RefreshGuide',
@@ -311,7 +311,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
         });
     }).on('pagehide', '#liveTvStatusPage', function () {
         var page = this;
-        taskButton({
+        taskButton.default({
             mode: 'off',
             progressElem: page.querySelector('.refreshGuideProgress'),
             taskKey: 'RefreshGuide',

src/controllers/playback/videoosd.js

@@ -1533,7 +1533,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
         if (browser.touch) {
             (function () {
                 require(['touchHelper'], function (TouchHelper) {
-                    self.touchHelper = new TouchHelper(view, {
+                    self.touchHelper = new TouchHelper.default(view, {
                         swipeYThreshold: 30,
                         triggerOnMove: true,
                         preventDefaultOnMove: true,

src/scripts/settings/appSettings.js

@@ -28,7 +28,7 @@ import events from 'events';
     }
 
     export function enableAutomaticBitrateDetection(isInNetwork, mediaType, val) {
-        var key = 'enableautobitratebitrate-' + mediaType + '-' + isInNetwork;
+        const key = 'enableautobitratebitrate-' + mediaType + '-' + isInNetwork;
         if (val !== undefined) {
             if (isInNetwork && mediaType === 'Audio') {
                 val = true;
@@ -45,7 +45,7 @@ import events from 'events';
     }
 
     export function maxStreamingBitrate(isInNetwork, mediaType, val) {
-        var key = 'maxbitrate-' + mediaType + '-' + isInNetwork;
+        const key = 'maxbitrate-' + mediaType + '-' + isInNetwork;
         if (val !== undefined) {
             if (isInNetwork && mediaType === 'Audio') {
                 //  nothing to do, this is always a max value
@@ -67,7 +67,7 @@ import events from 'events';
             this.set('maxStaticMusicBitrate', val);
         }
 
-        var defaultValue = 320000;
+        const defaultValue = 320000;
         return parseInt(this.get('maxStaticMusicBitrate') || defaultValue.toString()) || defaultValue;
     }
 
@@ -118,7 +118,7 @@ import events from 'events';
     }
 
     export function set(name, value, userId) {
-        var currentValue = this.get(name, userId);
+        const currentValue = this.get(name, userId);
         appStorage.setItem(getKey(name, userId), value);
 
         if (currentValue !== value) {

src/scripts/settings/userSettings.js

@@ -2,7 +2,7 @@ import appSettings from 'appSettings';
 import events from 'events';
 
 function onSaveTimeout() {
-    var self = this;
+    const self = this;
     self.saveTimeout = null;
     self.currentApiClient.updateDisplayPreferences('usersettings', self.displayPrefs, self.currentUserId, 'emby');
 }
@@ -37,7 +37,7 @@ export class UserSettings {
             return Promise.resolve();
         }
 
-        var self = this;
+        const self = this;
 
         return apiClient.getDisplayPreferences('usersettings', userId, 'emby').then(function (result) {
             result.CustomPrefs = result.CustomPrefs || {};
@@ -63,9 +63,9 @@ export class UserSettings {
      * @param {boolean} enableOnServer - Flag to save preferences on server.
      */
     set(name, value, enableOnServer) {
-        var userId = this.currentUserId;
+        const userId = this.currentUserId;
-        var currentValue = this.get(name, enableOnServer);
+        const currentValue = this.get(name, enableOnServer);
-        var result = appSettings.set(name, value, userId);
+        const result = appSettings.set(name, value, userId);
 
         if (enableOnServer !== false && this.displayPrefs) {
             this.displayPrefs.CustomPrefs[name] = value == null ? value : value.toString();
@@ -86,7 +86,7 @@ export class UserSettings {
      * @return {string} Value of setting.
      */
     get(name, enableOnServer) {
-        var userId = this.currentUserId;
+        const userId = this.currentUserId;
         if (enableOnServer !== false && this.displayPrefs) {
             return this.displayPrefs.CustomPrefs[name];
         }
@@ -100,7 +100,7 @@ export class UserSettings {
      * @return {Object|Promise} Configuration or Promise.
      */
     serverConfig(config) {
-        var apiClient = this.currentApiClient;
+        const apiClient = this.currentApiClient;
         if (config) {
             return apiClient.updateUserConfiguration(this.currentUserId, config);
         }
@@ -349,7 +349,7 @@ export class UserSettings {
             return this.set('libraryPageSize', parseInt(val, 10), false);
         }
 
-        var libraryPageSize = parseInt(this.get('libraryPageSize', false), 10);
+        const libraryPageSize = parseInt(this.get('libraryPageSize', false), 10);
         if (libraryPageSize === 0) {
             // Explicitly return 0 to avoid returning 100 because 0 is falsy.
             return 0;
@@ -378,7 +378,7 @@ export class UserSettings {
      * @return {Object} Query.
      */
     loadQuerySettings(key, query) {
-        var values = this.get(key);
+        let values = this.get(key);
         if (values) {
             values = JSON.parse(values);
             return Object.assign(query, values);
@@ -393,7 +393,7 @@ export class UserSettings {
      * @param {Object} query - Query.
      */
     saveQuerySettings(key, query) {
-        var values = {};
+        const values = {};
         if (query.SortBy) {
             values.SortBy = query.SortBy;
         }

src/scripts/taskbutton.js

@@ -1,7 +1,11 @@
-define(['events', 'userSettings', 'serverNotifications', 'connectionManager', 'globalize', 'emby-button'], function (events, userSettings, serverNotifications, connectionManager, globalize) {
+import events from 'events';
-    'use strict';
+import * as userSettings from 'userSettings';
+import serverNotifications from 'serverNotifications';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
+import 'emby-button';
 
-    return function (options) {
+export default function (options) {
     function pollTasks() {
         connectionManager.getApiClient(serverId).getScheduledTasks({
             IsEnabled: true
@@ -9,7 +13,7 @@ define(['events', 'userSettings', 'serverNotifications', 'connectionManager', 'g
     }
 
     function updateTasks(tasks) {
-            var task = tasks.filter(function (t) {
+        const task = tasks.filter(function (t) {
             return t.Key == options.taskKey;
         })[0];
 
@@ -32,7 +36,7 @@ define(['events', 'userSettings', 'serverNotifications', 'connectionManager', 'g
         }
 
         button.setAttribute('data-taskid', task.Id);
-            var progress = (task.CurrentProgressPercentage || 0).toFixed(1);
+        const progress = (task.CurrentProgressPercentage || 0).toFixed(1);
 
         if (options.progressElem) {
             options.progressElem.value = progress;
@@ -45,7 +49,7 @@ define(['events', 'userSettings', 'serverNotifications', 'connectionManager', 'g
         }
 
         if (options.lastResultElem) {
-                var lastResult = task.LastExecutionResult ? task.LastExecutionResult.Status : '';
+            const lastResult = task.LastExecutionResult ? task.LastExecutionResult.Status : '';
 
             if (lastResult == 'Failed') {
                 options.lastResultElem.html('<span style="color:#FF0000;">(' + globalize.translate('LabelFailed') + ')</span>');
@@ -73,9 +77,9 @@ define(['events', 'userSettings', 'serverNotifications', 'connectionManager', 'g
         }
     }
 
-        var pollInterval;
+    let pollInterval;
-        var button = options.button;
+    const button = options.button;
-        var serverId = ApiClient.serverId();
+    const serverId = ApiClient.serverId();
 
     function onPollIntervalFired() {
         if (!connectionManager.getApiClient(serverId).isMessageChannelOpen()) {
@@ -84,7 +88,7 @@ define(['events', 'userSettings', 'serverNotifications', 'connectionManager', 'g
     }
 
     function startInterval() {
-            var apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = connectionManager.getApiClient(serverId);
 
         if (pollInterval) {
             clearInterval(pollInterval);
@@ -115,5 +119,4 @@ define(['events', 'userSettings', 'serverNotifications', 'connectionManager', 'g
         startInterval();
         events.on(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate);
     }
-    };
+}
-});

src/scripts/touchHelper.js

@@ -1,31 +1,31 @@
-define(['dom', 'events'], function (dom, events) {
+import dom from 'dom';
-    'use strict';
+import events from 'events';
 
 function getTouches(e) {
-
     return e.changedTouches || e.targetTouches || e.touches;
 }
 
-    function TouchHelper(elem, options) {
+class TouchHelper {
+    constructor(elem, options) {
 
         options = options || {};
-        var touchTarget;
+        let touchTarget;
-        var touchStartX;
+        let touchStartX;
-        var touchStartY;
+        let touchStartY;
-        var lastDeltaX;
+        let lastDeltaX;
-        var lastDeltaY;
+        let lastDeltaY;
-        var thresholdYMet;
+        let thresholdYMet;
-        var self = this;
+        const self = this;
 
-        var swipeXThreshold = options.swipeXThreshold || 50;
+        const swipeXThreshold = options.swipeXThreshold || 50;
-        var swipeYThreshold = options.swipeYThreshold || 50;
+        const swipeYThreshold = options.swipeYThreshold || 50;
-        var swipeXMaxY = 30;
+        const swipeXMaxY = 30;
 
-        var excludeTagNames = options.ignoreTagNames || [];
+        const excludeTagNames = options.ignoreTagNames || [];
 
-        var touchStart = function (e) {
+        const touchStart = function (e) {
 
-            var touch = getTouches(e)[0];
+            const touch = getTouches(e)[0];
             touchTarget = null;
             touchStartX = 0;
             touchStartY = 0;
@@ -35,7 +35,7 @@ define(['dom', 'events'], function (dom, events) {
 
             if (touch) {
 
-                var currentTouchTarget = touch.target;
+                const currentTouchTarget = touch.target;
 
                 if (dom.parentWithTag(currentTouchTarget, excludeTagNames)) {
                     return;
@@ -47,18 +47,18 @@ define(['dom', 'events'], function (dom, events) {
             }
         };
 
-        var touchEnd = function (e) {
+        const touchEnd = function (e) {
 
-            var isTouchMove = e.type === 'touchmove';
+            const isTouchMove = e.type === 'touchmove';
 
             if (touchTarget) {
-                var touch = getTouches(e)[0];
+                const touch = getTouches(e)[0];
 
-                var deltaX;
+                let deltaX;
-                var deltaY;
+                let deltaY;
 
-                var clientX;
+                let clientX;
-                var clientY;
+                let clientY;
 
                 if (touch) {
                     clientX = touch.clientX || 0;
@@ -70,8 +70,8 @@ define(['dom', 'events'], function (dom, events) {
                     deltaY = 0;
                 }
 
-                var currentDeltaX = lastDeltaX == null ? deltaX : (deltaX - lastDeltaX);
+                const currentDeltaX = lastDeltaX == null ? deltaX : (deltaX - lastDeltaX);
-                var currentDeltaY = lastDeltaY == null ? deltaY : (deltaY - lastDeltaY);
+                const currentDeltaY = lastDeltaY == null ? deltaY : (deltaY - lastDeltaY);
 
                 lastDeltaX = deltaX;
                 lastDeltaY = deltaY;
@@ -138,14 +138,13 @@ define(['dom', 'events'], function (dom, events) {
             passive: true
         });
     }
+    destroy() {
 
-    TouchHelper.prototype.destroy = function () {
+        const elem = this.elem;
-
-        var elem = this.elem;
 
         if (elem) {
-            var touchStart = this.touchStart;
+            const touchStart = this.touchStart;
-            var touchEnd = this.touchEnd;
+            const touchEnd = this.touchEnd;
 
             dom.removeEventListener(elem, 'touchstart', touchStart, {
                 passive: true
@@ -165,7 +164,7 @@ define(['dom', 'events'], function (dom, events) {
         this.touchEnd = null;
 
         this.elem = null;
-    };
+    }
+}
 
-    return TouchHelper;
+export default TouchHelper;
-});