Merge pull request #1653 from MrTimscampi/more-es6

Migrate shell, serverNotifications and scrollHelper to ES6 + remove searchtab

package.json

@@ -303,10 +303,13 @@
           "src/scripts/mouseManager.js",
           "src/scripts/multiDownload.js",
           "src/scripts/playlists.js",
+          "src/scripts/scrollHelper.js",
+          "src/scripts/serverNotifications.js",
           "src/scripts/routes.js",
           "src/scripts/settings/appSettings.js",
           "src/scripts/settings/userSettings.js",
           "src/scripts/settings/webSettings.js",
+          "src/scripts/shell.js",
           "src/scripts/taskbutton.js",
           "src/scripts/themeLoader.js",
           "src/scripts/touchHelper.js"

src/assets/css/librarybrowser.css

@@ -236,12 +236,6 @@
     text-align: center;
 }
 
-.layout-desktop .searchTabButton,
-.layout-mobile .searchTabButton,
-.layout-tv .headerSearchButton {
-    display: none !important;
-}
-
 .mainDrawer-scrollContainer {
     padding-bottom: 10vh;
 }

src/components/collectionEditor/collectionEditor.js

@@ -200,7 +200,7 @@ import 'flexStyles';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(scrollHelper => {
+        import('scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/dialogHelper/dialogHelper.js

@@ -354,7 +354,7 @@ import 'scrollStyles';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(scrollHelper => {
+        import('scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/filtermenu/filtermenu.js

@@ -151,6 +151,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
+            scrollHelper = scrollHelper.default || scrollHelper;
             var fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/guide/guide-settings.js

@@ -1,6 +1,8 @@
 define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'emby-radio', 'css!./../formdialog', 'material-icons'], function (dialogHelper, globalize, userSettings, layoutManager, connectionManager, require, loading, scrollHelper) {
     'use strict';
 
+    scrollHelper = scrollHelper.default || scrollHelper;
+
     function saveCategories(context, options) {
         var categories = [];
 

src/components/guide/guide.js

@@ -5,6 +5,8 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     browser = browser.default || browser;
     loading = loading.default || loading;
     focusManager = focusManager.default || focusManager;
+    scrollHelper = scrollHelper.default || scrollHelper;
+    serverNotifications = serverNotifications.default || serverNotifications;
 
     function showViewSettings(instance) {
         require(['guide-settings-dialog'], function (guideSettingsDialog) {

src/components/itemsrefresher.js

@@ -1,6 +1,7 @@
 define(['playbackManager', 'serverNotifications', 'events'], function (playbackManager, serverNotifications, events) {
     'use strict';
 
+    serverNotifications = serverNotifications.default || serverNotifications;
     playbackManager = playbackManager.default || playbackManager;
 
     function onUserDataChanged(e, apiClient, userData) {

src/components/notifications/notifications.js

@@ -2,6 +2,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     'use strict';
 
     playbackManager = playbackManager.default || playbackManager;
+    serverNotifications = serverNotifications.default || serverNotifications;
 
     function onOneDocumentClick() {
         document.removeEventListener('click', onOneDocumentClick);

src/components/playlisteditor/playlisteditor.js

@@ -210,7 +210,7 @@ import 'emby-button';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(scrollHelper => {
+        import('scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/recordingcreator/recordingcreator.js

@@ -1,6 +1,8 @@
 define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'datetime', 'imageLoader', 'recordingFields', 'events', 'emby-checkbox', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, datetime, imageLoader, recordingFields, events) {
     'use strict';
 
+    scrollHelper = scrollHelper.default || scrollHelper;
+
     var currentDialog;
     var closeAction;
     var currentRecordingFields;

src/components/recordingcreator/recordingeditor.js

@@ -1,6 +1,7 @@
 define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'scrollStyles', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader) {
     'use strict';
 
+    scrollHelper = scrollHelper.default || scrollHelper;
     loading = loading.default || loading;
 
     var currentDialog;

src/components/recordingcreator/recordingfields.js

@@ -1,6 +1,7 @@
 define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields', 'flexStyles'], function (globalize, connectionManager, serverNotifications, require, loading, appHost, dom, recordingHelper, events) {
     'use strict';
 
+    serverNotifications = serverNotifications.default || serverNotifications;
     recordingHelper = recordingHelper.default || recordingHelper;
     loading = loading.default || loading;
 

src/components/sortmenu/sortmenu.js

@@ -17,6 +17,7 @@ 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';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/subtitleeditor/subtitleeditor.js

@@ -337,6 +337,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
+            scrollHelper = scrollHelper.default || scrollHelper;
             var fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/tunerPicker.js

@@ -4,6 +4,7 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
     browser = browser.default || browser;
     loading = loading.default || loading;
     focusManager = focusManager.default || focusManager;
+    scrollHelper = scrollHelper.default || scrollHelper;
 
     var enableFocusTransform = !browser.slow && !browser.edge;
 

src/components/viewSettings/viewSettings.js

@@ -29,6 +29,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
+            scrollHelper = scrollHelper.default || scrollHelper;
             var fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/controllers/livetv/livetvsuggested.js

@@ -169,9 +169,6 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
             name: globalize.translate('HeaderSchedule')
         }, {
             name: globalize.translate('TabSeries')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
         }];
     }
 
@@ -255,9 +252,6 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
                 case 5:
                     depends.push('controllers/livetv/livetvseriestimers');
                     break;
-
-                case 6:
-                    depends.push('scripts/searchtab');
             }
 
             require(depends, function (controllerFactory) {

src/controllers/movies/moviesrecommended.js

@@ -236,9 +236,6 @@ import 'emby-button';
             name: globalize.translate('TabCollections')
         }, {
             name: globalize.translate('TabGenres')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
         }];
     }
 
@@ -306,10 +303,6 @@ import 'emby-button';
                 case 5:
                     depends = 'controllers/movies/moviegenres';
                     break;
-
-                case 6:
-                    depends = 'scripts/searchtab';
-                    break;
             }
 
             import(depends).then(({default: controllerFactory}) => {

src/controllers/music/musicrecommended.js

@@ -191,9 +191,6 @@ import 'flexStyles';
             name: globalize.translate('TabSongs')
         }, {
             name: globalize.translate('TabGenres')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
         }];
     }
 
@@ -295,10 +292,6 @@ import 'flexStyles';
                 case 6:
                     depends = 'controllers/music/musicgenres';
                     break;
-
-                case 7:
-                    depends = 'scripts/searchtab';
-                    break;
             }
 
             import(depends).then(({default: controllerFactory}) => {

src/controllers/shows/tvrecommended.js

@@ -30,9 +30,6 @@ import 'emby-button';
             name: globalize.translate('TabNetworks')
         }, {
             name: globalize.translate('TabEpisodes')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
         }];
     }
 
@@ -217,10 +214,6 @@ import 'emby-button';
                 case 6:
                     depends = 'controllers/shows/episodes';
                     break;
-
-                case 7:
-                    depends = 'scripts/searchtab';
-                    break;
             }
 
             import(depends).then(({default: controllerFactory}) => {

src/plugins/sessionPlayer/plugin.js

@@ -1,6 +1,7 @@
 define(['playbackManager', 'events', 'serverNotifications', 'connectionManager'], function (playbackManager, events, serverNotifications, connectionManager) {
     'use strict';
 
+    serverNotifications = serverNotifications.default || serverNotifications;
     playbackManager = playbackManager.default || playbackManager;
 
     function getActivePlayerId() {

src/scripts/scrollHelper.js

@@ -1,7 +1,6 @@
-define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
+import focusManager from 'focusManager';
-    'use strict';
+import dom from 'dom';
-
+import 'scrollStyles';
-    focusManager = focusManager.default || focusManager;
 
 function getBoundingClientRect(elem) {
     // Support: BlackBerry 5, iOS 3 (original iPhone)
@@ -13,25 +12,25 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
     }
 }
 
-    function getPosition(scrollContainer, item, horizontal) {
+export function getPosition(scrollContainer, item, horizontal) {
-        var slideeOffset = getBoundingClientRect(scrollContainer);
+    const slideeOffset = getBoundingClientRect(scrollContainer);
-        var itemOffset = getBoundingClientRect(item);
+    const itemOffset = getBoundingClientRect(item);
 
-        var offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
+    let offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
-        var size = horizontal ? itemOffset.width : itemOffset.height;
+    let size = horizontal ? itemOffset.width : itemOffset.height;
     if (!size && size !== 0) {
         size = item[horizontal ? 'offsetWidth' : 'offsetHeight'];
     }
 
-        var currentStart = horizontal ? scrollContainer.scrollLeft : scrollContainer.scrollTop;
+    const currentStart = horizontal ? scrollContainer.scrollLeft : scrollContainer.scrollTop;
 
     offset += currentStart;
 
-        var frameSize = horizontal ? scrollContainer.offsetWidth : scrollContainer.offsetHeight;
+    const frameSize = horizontal ? scrollContainer.offsetWidth : scrollContainer.offsetHeight;
 
-        var currentEnd = currentStart + frameSize;
+    const currentEnd = currentStart + frameSize;
 
-        var isVisible = offset >= currentStart && (offset + size) <= currentEnd;
+    const isVisible = offset >= currentStart && (offset + size) <= currentEnd;
 
     return {
         start: offset,
@@ -42,8 +41,8 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
     };
 }
 
-    function toCenter(container, elem, horizontal, skipWhenVisible) {
+export function toCenter(container, elem, horizontal, skipWhenVisible) {
-        var pos = getPosition(container, elem, horizontal);
+    const pos = getPosition(container, elem, horizontal);
 
     if (skipWhenVisible && pos.isVisible) {
         return;
@@ -64,8 +63,8 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
     }
 }
 
-    function toStart(container, elem, horizontal, skipWhenVisible) {
+export function toStart(container, elem, horizontal, skipWhenVisible) {
-        var pos = getPosition(container, elem, horizontal);
+    const pos = getPosition(container, elem, horizontal);
 
     if (skipWhenVisible && pos.isVisible) {
         return;
@@ -87,7 +86,7 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
 }
 
 function centerOnFocus(e, scrollSlider, horizontal) {
-        var focused = focusManager.focusableParent(e.target);
+    const focused = focusManager.focusableParent(e.target);
 
     if (focused) {
         toCenter(scrollSlider, focused, horizontal);
@@ -97,13 +96,12 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
 function centerOnFocusHorizontal(e) {
     centerOnFocus(e, this, true);
 }
+
 function centerOnFocusVertical(e) {
     centerOnFocus(e, this, false);
 }
 
-    return {
+export const centerFocus = {
-        getPosition: getPosition,
-        centerFocus: {
     on: function (element, horizontal) {
         if (horizontal) {
             dom.addEventListener(element, 'focus', centerOnFocusHorizontal, {
@@ -130,8 +128,11 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
             });
         }
     }
-        },
+};
+
+export default {
+    getPosition: getPosition,
+    centerFocus: centerFocus,
     toCenter: toCenter,
     toStart: toStart
 };
-});

src/scripts/searchtab.js

@@ -1,57 +0,0 @@
-define(['searchFields', 'searchResults', 'events'], function (SearchFields, SearchResults, events) {
-    'use strict';
-
-    SearchFields = SearchFields.default || SearchFields;
-    SearchResults = SearchResults.default || SearchResults;
-
-    function init(instance, tabContent, options) {
-        tabContent.innerHTML = '<div class="padded-left padded-right searchFields"></div><div class="searchResults padded-top" style="padding-top:1.5em;"></div>';
-        instance.searchFields = new SearchFields({
-            element: tabContent.querySelector('.searchFields')
-        });
-        instance.searchResults = new SearchResults({
-            element: tabContent.querySelector('.searchResults'),
-            serverId: ApiClient.serverId(),
-            parentId: options.parentId,
-            collectionType: options.collectionType
-        });
-        events.on(instance.searchFields, 'search', function (e, value) {
-            instance.searchResults.search(value);
-        });
-    }
-
-    function SearchTab(view, tabContent, options) {
-        var self = this;
-        options = options || {};
-        init(this, tabContent, options);
-
-        self.preRender = function () {};
-
-        self.renderTab = function () {
-            var searchFields = this.searchFields;
-
-            if (searchFields) {
-                searchFields.focus();
-            }
-        };
-    }
-
-    SearchTab.prototype.destroy = function () {
-        var searchFields = this.searchFields;
-
-        if (searchFields) {
-            searchFields.destroy();
-        }
-
-        this.searchFields = null;
-        var searchResults = this.searchResults;
-
-        if (searchResults) {
-            searchResults.destroy();
-        }
-
-        this.searchResults = null;
-    };
-
-    return SearchTab;
-});

src/scripts/serverNotifications.js

@@ -1,24 +1,26 @@
-define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'inputManager', 'focusManager', 'appRouter'], function (connectionManager, playbackManager, syncPlayManager, events, inputManager, focusManager, appRouter) {
+import connectionManager from 'connectionManager';
-    'use strict';
+import playbackManager from 'playbackManager';
+import syncPlayManager from 'syncPlayManager';
+import events from 'events';
+import inputManager from 'inputManager';
+import focusManager from 'focusManager';
+import appRouter from 'appRouter';
 
-    playbackManager = playbackManager.default || playbackManager;
+const serverNotifications = {};
-    focusManager = focusManager.default || focusManager;
-
-    var serverNotifications = {};
 
 function notifyApp() {
     inputManager.notify();
 }
 
 function displayMessage(cmd) {
-        var args = cmd.Arguments;
+    const args = cmd.Arguments;
     if (args.TimeoutMs) {
-            require(['toast'], function (toast) {
+        import('toast').then(({default: toast}) => {
             toast({ title: args.Header, text: args.Text });
         });
     } else {
-            require(['alert'], function (alert) {
+        import('alert').then(({default: alert}) => {
-                alert.default({ title: args.Header, text: args.Text });
+            alert({ title: args.Header, text: args.Text });
         });
     }
 }
@@ -147,10 +149,10 @@ define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'in
 }
 
 function onMessageReceived(e, msg) {
-        var apiClient = this;
+    const apiClient = this;
     if (msg.MessageType === 'Play') {
         notifyApp();
-            var serverId = apiClient.serverInfo().Id;
+        const serverId = apiClient.serverInfo().Id;
         if (msg.Data.PlayCommand === 'PlayNext') {
             playbackManager.queueNext({ ids: msg.Data.ItemIds, serverId: serverId });
         } else if (msg.Data.PlayCommand === 'PlayLast') {
@@ -185,11 +187,11 @@ define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'in
             notifyApp();
         }
     } else if (msg.MessageType === 'GeneralCommand') {
-            var cmd = msg.Data;
+        const cmd = msg.Data;
         processGeneralCommand(cmd, apiClient);
     } else if (msg.MessageType === 'UserDataChanged') {
         if (msg.Data.UserId === apiClient.getCurrentUserId()) {
-                for (var i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
+            for (let i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
                 events.trigger(serverNotifications, 'UserDataChanged', [apiClient, msg.Data.UserDataList[i]]);
             }
         }
@@ -210,5 +212,5 @@ define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'in
 events.on(connectionManager, 'apiclientcreated', function (e, newApiClient) {
     bindEvents(newApiClient);
 });
-    return serverNotifications;
+
-});
+export default serverNotifications;

src/scripts/shell.js

@@ -1,7 +1,5 @@
-define([], function () {
+// TODO: This seems like a good candidate for deprecation
-    'use strict';
+export default {
-
-    return {
     openUrl: function (url, target) {
         if (window.NativeShell) {
             window.NativeShell.openUrl(url, target);
@@ -20,4 +18,3 @@ define([], function () {
         }
     }
 };
-});