Migration of viewManager to ES6 module

package.json

@@ -158,6 +158,7 @@
           "src/components/syncPlay/playbackPermissionManager.js",
           "src/components/syncPlay/syncPlayManager.js",
           "src/components/syncPlay/timeSyncManager.js",
+          "src/components/viewManager/viewManager.js",
           "src/controllers/session/addServer/index.js",
           "src/controllers/session/forgotPassword/index.js",
           "src/controllers/session/redeemPassword/index.js",

src/components/appRouter.js

@@ -1,6 +1,8 @@
 define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdrop', 'browser', 'page', 'appSettings', 'apphost', 'connectionManager'], function (loading, globalize, events, viewManager, skinManager, backdrop, browser, page, appSettings, appHost, connectionManager) {
     'use strict';
 
+    viewManager = viewManager.default || viewManager;
+
     var appRouter = {
         showLocalLogin: function (serverId, manualLogin) {
             var pageName = manualLogin ? 'manuallogin' : 'login';

src/components/viewManager/viewManager.js

@@ -1,20 +1,22 @@
-define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], function (viewContainer, focusManager, queryString, layoutManager) {
-    'use strict';
+import viewContainer from 'viewContainer';
+import focusManager from 'focusManager';
+import queryString from 'queryString';
+import layoutManager from 'layoutManager';
 
-    var currentView;
-    var dispatchPageEvents;
+let currentView;
+let dispatchPageEvents;
 
-    viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
-        var lastView = currentView;
+viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
+    const lastView = currentView;
     if (lastView) {
-            var beforeHideResult = dispatchViewEvent(lastView, null, 'viewbeforehide', true);
+        const beforeHideResult = dispatchViewEvent(lastView, null, 'viewbeforehide', true);
 
         if (!beforeHideResult) {
             // todo: cancel
         }
     }
 
-        var eventDetail = getViewEventDetail(newView, options, isRestored);
+    const eventDetail = getViewEventDetail(newView, options, isRestored);
 
     if (!newView.initComplete) {
         newView.initComplete = true;
@@ -31,17 +33,17 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
     }
 
     dispatchViewEvent(newView, eventDetail, 'viewbeforeshow');
-    });
+});
 
-    function onViewChange(view, options, isRestore) {
-        var lastView = currentView;
+function onViewChange(view, options, isRestore) {
+    const lastView = currentView;
     if (lastView) {
         dispatchViewEvent(lastView, null, 'viewhide');
     }
 
     currentView = view;
 
-        var eventDetail = getViewEventDetail(view, options, isRestore);
+    const eventDetail = getViewEventDetail(view, options, isRestore);
 
     if (!isRestore) {
         if (options.autoFocus !== false) {
@@ -60,19 +62,19 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
     if (dispatchPageEvents) {
         view.dispatchEvent(new CustomEvent('pageshow', eventDetail));
     }
-    }
+}
 
-    function getProperties(view) {
-        var props = view.getAttribute('data-properties');
+function getProperties(view) {
+    const props = view.getAttribute('data-properties');
 
     if (props) {
         return props.split(',');
     }
 
     return [];
-    }
+}
 
-    function dispatchViewEvent(view, eventInfo, eventName, isCancellable) {
+function dispatchViewEvent(view, eventInfo, eventName, isCancellable) {
     if (!eventInfo) {
         eventInfo = {
             detail: {
@@ -86,7 +88,7 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
 
     eventInfo.cancelable = isCancellable || false;
 
-        var eventResult = view.dispatchEvent(new CustomEvent(eventName, eventInfo));
+    const eventResult = view.dispatchEvent(new CustomEvent(eventName, eventInfo));
 
     if (dispatchPageEvents) {
         eventInfo.cancelable = false;
@@ -94,12 +96,12 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
     }
 
     return eventResult;
-    }
+}
 
-    function getViewEventDetail(view, options, isRestore) {
-        var url = options.url;
-        var index = url.indexOf('?');
-        var params = index === -1 ? {} : queryString.parse(url.substring(index + 1));
+function getViewEventDetail(view, options, isRestore) {
+    const url = options.url;
+    const index = url.indexOf('?');
+    const params = index === -1 ? {} : queryString.parse(url.substring(index + 1));
 
     return {
         detail: {
@@ -115,20 +117,21 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
         bubbles: true,
         cancelable: false
     };
-    }
+}
 
-    function resetCachedViews() {
+function resetCachedViews() {
     // Reset all cached views whenever the skin changes
     viewContainer.reset();
+}
+
+document.addEventListener('skinunload', resetCachedViews);
+
+class ViewManager {
+    constructor() {
     }
 
-    document.addEventListener('skinunload', resetCachedViews);
-
-    function ViewManager() {
-    }
-
-    ViewManager.prototype.loadView = function (options) {
-        var lastView = currentView;
+    loadView(options) {
+        const lastView = currentView;
 
         // Record the element that has focus
         if (lastView) {
@@ -142,9 +145,9 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
         viewContainer.loadView(options).then(function (view) {
             onViewChange(view, options);
         });
-    };
+    }
 
-    ViewManager.prototype.tryRestoreView = function (options, onViewChanging) {
+    tryRestoreView(options, onViewChanging) {
         if (options.cancel) {
             return Promise.reject({ cancelled: true });
         }
@@ -158,15 +161,15 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
             onViewChanging();
             onViewChange(view, options, true);
         });
-    };
+    }
 
-    ViewManager.prototype.currentView = function () {
+    currentView() {
         return currentView;
-    };
+    }
 
-    ViewManager.prototype.dispatchPageEvents = function (value) {
+    dispatchPageEvents(value) {
         dispatchPageEvents = value;
-    };
+    }
+}
 
-    return new ViewManager();
-});
+export default new ViewManager();

src/scripts/libraryMenu.js

@@ -1,6 +1,8 @@
 define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', 'viewManager', 'libraryBrowser', 'appRouter', 'apphost', 'playbackManager', 'syncPlayManager', 'groupSelectionMenu', 'browser', 'globalize', 'scripts/imagehelper', 'paper-icon-button-light', 'material-icons', 'scrollStyles', 'flexStyles'], function (dom, layoutManager, inputManager, connectionManager, events, viewManager, libraryBrowser, appRouter, appHost, playbackManager, syncPlayManager, groupSelectionMenu, browser, globalize, imageHelper) {
     'use strict';
 
+    viewManager = viewManager.default || viewManager;
+
     function renderHeader() {
         var html = '';
         html += '<div class="flex align-items-center flex-grow headerTop">';

src/scripts/site.js

@@ -827,8 +827,8 @@ function initClient() {
         define('tvguide', [componentsPath + '/guide/guide'], returnFirstDependency);
         define('guide-settings-dialog', [componentsPath + '/guide/guide-settings'], returnFirstDependency);
         define('viewManager', [componentsPath + '/viewManager/viewManager'], function (viewManager) {
-            window.ViewManager = viewManager;
-            viewManager.dispatchPageEvents(true);
+            window.ViewManager = viewManager.default;
+            viewManager.default.dispatchPageEvents(true);
             return viewManager;
         });
         define('slideshow', [componentsPath + '/slideshow/slideshow'], returnFirstDependency);