Merge pull request #1650 from Camc314/migrate-to-ES6-41

Migration of favorites, homeTab and editItemMetadata to ES6 modules

package.json

@@ -205,6 +205,11 @@
           "src/controllers/dashboard/users/userparentalcontrol.js",
           "src/controllers/dashboard/users/userpasswordpage.js",
           "src/controllers/dashboard/users/userprofilespage.js",
+          "src/controllers/edititemmetadata.js",
+          "src/controllers/favorites.js",
+          "src/controllers/hometab.js",
+          "src/controllers/playback/nowplaying.js",
+          "src/controllers/playback/videoosd.js",
           "src/controllers/itemDetails/index.js",
           "src/controllers/playback/queue/index.js",
           "src/controllers/playback/video/index.js",

src/controllers/edititemmetadata.js

@@ -1,33 +1,30 @@
-define(['loading', 'scripts/editorsidebar'], function (loading) {
+import loading from 'loading';
-    'use strict';
+import 'scripts/editorsidebar';
 
-    loading = loading.default || loading;
+function reload(context, itemId) {
+    loading.show();
 
-    function reload(context, itemId) {
+    if (itemId) {
-        loading.show();
+        import('metadataEditor').then(({ default: metadataEditor }) => {
-
+            metadataEditor.embed(context.querySelector('.editPageInnerContent'), itemId, ApiClient.serverInfo().Id);
-        if (itemId) {
+        });
-            require(['metadataEditor'], function ({default: metadataEditor}) {
+    } else {
-                metadataEditor.embed(context.querySelector('.editPageInnerContent'), itemId, ApiClient.serverInfo().Id);
+        context.querySelector('.editPageInnerContent').innerHTML = '';
-            });
+        loading.hide();
-        } else {
-            context.querySelector('.editPageInnerContent').innerHTML = '';
-            loading.hide();
-        }
     }
+}
 
-    return function (view, params) {
+export default function (view, params) {
-        view.addEventListener('viewshow', function () {
+    view.addEventListener('viewshow', function () {
-            reload(this, MetadataEditor.getCurrentItemId());
+        reload(this, MetadataEditor.getCurrentItemId());
-        });
+    });
-        MetadataEditor.setCurrentItemId(null);
+    MetadataEditor.setCurrentItemId(null);
-        view.querySelector('.libraryTree').addEventListener('itemclicked', function (event) {
+    view.querySelector('.libraryTree').addEventListener('itemclicked', function (event) {
-            var data = event.detail;
+        var data = event.detail;
 
-            if (data.id != MetadataEditor.getCurrentItemId()) {
+        if (data.id != MetadataEditor.getCurrentItemId()) {
-                MetadataEditor.setCurrentItemId(data.id);
+            MetadataEditor.setCurrentItemId(data.id);
-                reload(view, data.id);
+            reload(view, data.id);
-            }
+        }
-        });
+    });
-    };
+}
-});

src/controllers/favorites.js

@@ -1,5 +1,15 @@
-define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'apphost', 'layoutManager', 'focusManager', 'emby-itemscontainer', 'emby-scroller'], function (appRouter, cardBuilder, dom, globalize, connectionManager, appHost, layoutManager, focusManager) {
+import appRouter from 'appRouter';
-    'use strict';
+import cardBuilder from 'cardBuilder';
+import dom from 'dom';
+import globalize from 'globalize';
+import connectionManager from 'connectionManager';
+import appHost from 'apphost';
+import layoutManager from 'layoutManager';
+import focusManager from 'focusManager';
+import 'emby-itemscontainer';
+import 'emby-scroller';
+
+/* eslint-disable indent */
 
     function enableScrollX() {
         return true;
@@ -133,8 +143,8 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
 
     function getFetchDataFn(section) {
         return function () {
-            var apiClient = this.apiClient;
+            const apiClient = this.apiClient;
-            var options = {
+            const options = {
                 SortBy: (section.types, 'SeriesName,SortName'),
                 SortOrder: 'Ascending',
                 Filters: 'IsFavorite',
@@ -145,7 +155,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
                 EnableTotalRecordCount: false
             };
             options.Limit = 20;
-            var userId = apiClient.getCurrentUserId();
+            const userId = apiClient.getCurrentUserId();
 
             if (section.types === 'MusicArtist') {
                 return apiClient.getArtists(userId, options);
@@ -170,16 +180,16 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
 
     function getItemsHtmlFn(section) {
         return function (items) {
-            var cardLayout = appHost.preferVisualCards && section.autoCardLayout && section.showTitle;
+            let cardLayout = appHost.preferVisualCards && section.autoCardLayout && section.showTitle;
             cardLayout = false;
-            var serverId = this.apiClient.serverId();
+            const serverId = this.apiClient.serverId();
-            var leadingButtons = layoutManager.tv ? [{
+            const leadingButtons = layoutManager.tv ? [{
                 name: globalize.translate('All'),
                 id: 'more',
                 icon: 'favorite',
                 routeUrl: getRouteUrl(section, serverId)
             }] : null;
-            var lines = 0;
+            let lines = 0;
 
             if (section.showTitle) {
                 lines++;
@@ -215,23 +225,12 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
         };
     }
 
-    function FavoritesTab(view, params) {
-        this.view = view;
-        this.params = params;
-        this.apiClient = connectionManager.currentApiClient();
-        this.sectionsContainer = view.querySelector('.sections');
-        createSections(this, this.sectionsContainer, this.apiClient);
-    }
-
     function createSections(instance, elem, apiClient) {
-        var i;
+        const sections = getSections();
-        var length;
+        let html = '';
-        var sections = getSections();
-        var html = '';
 
-        for (i = 0, length = sections.length; i < length; i++) {
+        for (const section of sections) {
-            var section = sections[i];
+            let sectionClass = 'verticalSection';
-            var sectionClass = 'verticalSection';
 
             if (!section.showTitle) {
                 sectionClass += ' verticalSection-extrabottompadding';
@@ -257,23 +256,32 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
         }
 
         elem.innerHTML = html;
-        var elems = elem.querySelectorAll('.itemsContainer');
+        const elems = elem.querySelectorAll('.itemsContainer');
 
-        for (i = 0, length = elems.length; i < length; i++) {
+        for (let i = 0, length = elems.length; i < length; i++) {
-            var itemsContainer = elems[i];
+            const itemsContainer = elems[i];
             itemsContainer.fetchData = getFetchDataFn(sections[i]).bind(instance);
             itemsContainer.getItemsHtml = getItemsHtmlFn(sections[i]).bind(instance);
             itemsContainer.parentContainer = dom.parentWithClass(itemsContainer, 'verticalSection');
         }
     }
 
-    FavoritesTab.prototype.onResume = function (options) {
+class FavoritesTab {
-        var promises = (this.apiClient, []);
+    constructor(view, params) {
-        var view = this.view;
+        this.view = view;
-        var elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
+        this.params = params;
+        this.apiClient = connectionManager.currentApiClient();
+        this.sectionsContainer = view.querySelector('.sections');
+        createSections(this, this.sectionsContainer, this.apiClient);
+    }
 
-        for (var i = 0, length = elems.length; i < length; i++) {
+    onResume(options) {
-            promises.push(elems[i].resume(options));
+        const promises = (this.apiClient, []);
+        const view = this.view;
+        const elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
+
+        for (const elem of elems) {
+            promises.push(elem.resume(options));
         }
 
         Promise.all(promises).then(function () {
@@ -281,30 +289,32 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
                 focusManager.autoFocus(view);
             }
         });
-    };
+    }
 
-    FavoritesTab.prototype.onPause = function () {
+    onPause() {
-        var elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
+        const elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
 
-        for (var i = 0, length = elems.length; i < length; i++) {
+        for (const elem of elems) {
-            elems[i].pause();
+            elem.pause();
         }
-    };
+    }
 
-    FavoritesTab.prototype.destroy = function () {
+    destroy() {
         this.view = null;
         this.params = null;
         this.apiClient = null;
-        var elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
+        const elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
 
-        for (var i = 0, length = elems.length; i < length; i++) {
+        for (const elem of elems) {
-            elems[i].fetchData = null;
+            elem.fetchData = null;
-            elems[i].getItemsHtml = null;
+            elem.getItemsHtml = null;
-            elems[i].parentContainer = null;
+            elem.parentContainer = null;
         }
 
         this.sectionsContainer = null;
-    };
+    }
+}
 
-    return FavoritesTab;
+export default FavoritesTab;
-});
+
+/* eslint-enable indent */

src/controllers/home.js

@@ -40,7 +40,7 @@ define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-
             var controller = instance.tabControllers[index];
 
             if (!controller) {
-                controller = new controllerFactory(instance.view.querySelector(".tabContent[data-index='" + index + "']"), instance.params);
+                controller = new controllerFactory.default(instance.view.querySelector(".tabContent[data-index='" + index + "']"), instance.params);
                 instance.tabControllers[index] = controller;
             }
 

src/controllers/hometab.js

@@ -1,29 +1,21 @@
-define(['userSettings', 'loading', 'connectionManager', 'apphost', 'layoutManager', 'focusManager', 'homeSections', 'emby-itemscontainer'], function (userSettings, loading, connectionManager, appHost, layoutManager, focusManager, homeSections) {
+import * as userSettings from 'userSettings';
-    'use strict';
+import loading from 'loading';
+import connectionManager from 'connectionManager';
+import focusManager from 'focusManager';
+import homeSections from 'homeSections';
+import 'emby-itemscontainer';
 
-    loading = loading.default || loading;
+class HomeTab {
-
+    constructor(view, params) {
-    function HomeTab(view, params) {
         this.view = view;
         this.params = params;
         this.apiClient = connectionManager.currentApiClient();
         this.sectionsContainer = view.querySelector('.sections');
         view.querySelector('.sections').addEventListener('settingschange', onHomeScreenSettingsChanged.bind(this));
     }
-
+    onResume(options) {
-    function onHomeScreenSettingsChanged() {
-        this.sectionsRendered = false;
-
-        if (!this.paused) {
-            this.onResume({
-                refresh: true
-            });
-        }
-    }
-
-    HomeTab.prototype.onResume = function (options) {
         if (this.sectionsRendered) {
-            var sectionsContainer = this.sectionsContainer;
+            const sectionsContainer = this.sectionsContainer;
 
             if (sectionsContainer) {
                 return homeSections.resume(sectionsContainer, options);
@@ -33,8 +25,8 @@ define(['userSettings', 'loading', 'connectionManager', 'apphost', 'layoutManage
         }
 
         loading.show();
-        var view = this.view;
+        const view = this.view;
-        var apiClient = this.apiClient;
+        const apiClient = this.apiClient;
         this.destroyHomeSections();
         this.sectionsRendered = true;
         return apiClient.getCurrentUser().then(function (user) {
@@ -46,31 +38,38 @@ define(['userSettings', 'loading', 'connectionManager', 'apphost', 'layoutManage
                 loading.hide();
             });
         });
-    };
+    }
-
+    onPause() {
-    HomeTab.prototype.onPause = function () {
+        const sectionsContainer = this.sectionsContainer;
-        var sectionsContainer = this.sectionsContainer;
 
         if (sectionsContainer) {
             homeSections.pause(sectionsContainer);
         }
-    };
+    }
-
+    destroy() {
-    HomeTab.prototype.destroy = function () {
         this.view = null;
         this.params = null;
         this.apiClient = null;
         this.destroyHomeSections();
         this.sectionsContainer = null;
-    };
+    }
-
+    destroyHomeSections() {
-    HomeTab.prototype.destroyHomeSections = function () {
+        const sectionsContainer = this.sectionsContainer;
-        var sectionsContainer = this.sectionsContainer;
 
         if (sectionsContainer) {
             homeSections.destroySections(sectionsContainer);
         }
-    };
+    }
+}
 
-    return HomeTab;
+function onHomeScreenSettingsChanged() {
-});
+    this.sectionsRendered = false;
+
+    if (!this.paused) {
+        this.onResume({
+            refresh: true
+        });
+    }
+}
+
+export default HomeTab;