Migrate components/playback functions to ES6 modules

package.json

@@ -89,23 +89,31 @@
     "overrides": [
       {
         "test": [
+          "src/components/actionSheet/actionSheet.js",
           "src/components/autoFocuser.js",
           "src/components/cardbuilder/cardBuilder.js",
-          "src/scripts/fileDownloader.js",
           "src/components/images/imageLoader.js",
+          "src/components/indicators/indicators.js",
           "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
+          "src/components/playback/brightnessosd.js",
           "src/components/playback/mediasession.js",
+          "src/components/playback/nowplayinghelper.js",
+          "src/components/playback/playbackorientation.js",
+          "src/components/playback/playerSelectionMenu.js",
+          "src/components/playback/playersettingsmenu.js",
+          "src/components/playback/playmethodhelper.js",
+          "src/components/playback/remotecontrolautoplay.js",
+          "src/components/playback/volumeosd.js",
+          "src/components/playmenu.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
+          "src/scripts/deleteHelper.js",
           "src/scripts/dfnshelper.js",
           "src/scripts/dom.js",
+          "src/scripts/fileDownloader.js",
           "src/scripts/filesystem.js",
           "src/scripts/imagehelper.js",
           "src/scripts/inputManager.js",
-          "src/scripts/deleteHelper.js",
-          "src/components/actionSheet/actionSheet.js",
-          "src/components/playmenu.js",
-          "src/components/indicators/indicators.js",
           "src/scripts/keyboardNavigation.js",
           "src/scripts/settings/appSettings.js",
           "src/scripts/settings/userSettings.js",

src/components/playback/brightnessosd.js

@@ -1,14 +1,18 @@
-define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'material-icons'], function (events, playbackManager, dom, browser) {
+import events from 'events';
-    'use strict';
+import playbackManager from 'playbackManager';
+import dom from 'dom';
+import browser from 'browser';
+import 'css!./iconosd';
+import 'material-icons';
 
-    var currentPlayer;
+var currentPlayer;
-    var osdElement;
+var osdElement;
-    var iconElement;
+var iconElement;
-    var progressElement;
+var progressElement;
 
-    var enableAnimation;
+var enableAnimation;
 
-    function getOsdElementHtml() {
+function getOsdElementHtml() {
     var html = '';
 
     html += '<span class="material-icons iconOsdIcon brightness_high"></span>';
@@ -16,9 +20,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner brightnessOsdProgressInner"></div></div>';
 
     return html;
-    }
+}
 
-    function ensureOsdElement() {
+function ensureOsdElement() {
 
     var elem = osdElement;
     if (!elem) {
@@ -38,14 +42,14 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
         document.body.appendChild(elem);
         osdElement = elem;
     }
-    }
+}
 
-    function onHideComplete() {
+function onHideComplete() {
     this.classList.add('hide');
-    }
+}
 
-    var hideTimeout;
+var hideTimeout;
-    function showOsd() {
+function showOsd() {
 
     clearHideTimeout();
 
@@ -65,16 +69,16 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
 
         hideTimeout = setTimeout(hideOsd, 3000);
     });
-    }
+}
 
-    function clearHideTimeout() {
+function clearHideTimeout() {
     if (hideTimeout) {
         clearTimeout(hideTimeout);
         hideTimeout = null;
     }
-    }
+}
 
-    function hideOsd() {
+function hideOsd() {
 
     clearHideTimeout();
 
@@ -96,16 +100,16 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
             onHideComplete.call(elem);
         }
     }
-    }
+}
 
-    function setIcon(iconElement, icon) {
+function setIcon(iconElement, icon) {
     iconElement.classList.remove('brightness_high');
     iconElement.classList.remove('brightness_medium');
     iconElement.classList.remove('brightness_low');
     iconElement.classList.add(icon);
-    }
+}
 
-    function updateElementsFromPlayer(brightness) {
+function updateElementsFromPlayer(brightness) {
 
     if (iconElement) {
         if (brightness >= 80) {
@@ -119,9 +123,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     if (progressElement) {
         progressElement.style.width = (brightness || 0) + '%';
     }
-    }
+}
 
-    function releaseCurrentPlayer() {
+function releaseCurrentPlayer() {
 
     var player = currentPlayer;
 
@@ -130,9 +134,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
         events.off(player, 'playbackstop', hideOsd);
         currentPlayer = null;
     }
-    }
+}
 
-    function onBrightnessChanged(e) {
+function onBrightnessChanged(e) {
 
     var player = this;
 
@@ -141,9 +145,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     updateElementsFromPlayer(playbackManager.getBrightness(player));
 
     showOsd();
-    }
+}
 
-    function bindToPlayer(player) {
+function bindToPlayer(player) {
 
     if (player === currentPlayer) {
         return;
@@ -160,12 +164,10 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     hideOsd();
     events.on(player, 'brightnesschange', onBrightnessChanged);
     events.on(player, 'playbackstop', hideOsd);
-    }
+}
 
-    events.on(playbackManager, 'playerchange', function () {
+events.on(playbackManager, 'playerchange', function () {
     bindToPlayer(playbackManager.getCurrentPlayer());
-    });
-
-    bindToPlayer(playbackManager.getCurrentPlayer());
-
 });
+
+bindToPlayer(playbackManager.getCurrentPlayer());

src/components/playback/nowplayinghelper.js

@@ -1,7 +1,4 @@
-define([], function () {
+export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
-    'use strict';
-
-    function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
 
     var topItem = nowPlayingItem;
     var bottomItem = null;
@@ -78,9 +75,8 @@ define([], function () {
     }
 
     return list;
-    }
+}
 
-    return {
+export default {
     getNowPlayingNames: getNowPlayingNames
-    };
+};
-});

src/components/playback/playbackorientation.js

@@ -1,18 +1,19 @@
-define(['playbackManager', 'layoutManager', 'events'], function (playbackManager, layoutManager, events) {
+import playbackManager from 'playbackManager';
-    'use strict';
+import layoutManager from 'layoutManager';
+import events from 'events';
 
-    var orientationLocked;
+var orientationLocked;
 
-    function onOrientationChangeSuccess() {
+function onOrientationChangeSuccess() {
     orientationLocked = true;
-    }
+}
 
-    function onOrientationChangeError(err) {
+function onOrientationChangeError(err) {
     orientationLocked = false;
     console.error('error locking orientation: ' + err);
-    }
+}
 
-    events.on(playbackManager, 'playbackstart', function (e, player, state) {
+events.on(playbackManager, 'playbackstart', function (e, player, state) {
 
     var isLocalVideo = player.isLocalPlayer && !player.isExternalPlayer && playbackManager.isPlayingVideo(player);
 
@@ -35,9 +36,9 @@ define(['playbackManager', 'layoutManager', 'events'], function (playbackManager
             }
         }
     }
-    });
+});
 
-    events.on(playbackManager, 'playbackstop', function (e, playbackStopInfo) {
+events.on(playbackManager, 'playbackstop', function (e, playbackStopInfo) {
 
     if (orientationLocked && !playbackStopInfo.nextMediaType) {
 
@@ -53,5 +54,4 @@ define(['playbackManager', 'layoutManager', 'events'], function (playbackManager
             orientationLocked = false;
         }
     }
-    });
 });

src/components/playback/playerSelectionMenu.js

@@ -1,7 +1,13 @@
-define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRouter', 'globalize', 'apphost'], function (appSettings, events, browser, loading, playbackManager, appRouter, globalize, appHost) {
+import appSettings from 'appSettings';
-    'use strict';
+import events from 'events';
+import browser from 'browser';
+import loading from 'loading';
+import playbackManager from 'playbackManager';
+import appRouter from 'appRouter';
+import globalize from 'globalize';
+import appHost from 'apphost';
 
-    function mirrorItem(info, player) {
+function mirrorItem(info, player) {
 
     var item = info.item;
 
@@ -12,9 +18,9 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
         ItemType: item.Type,
         Context: info.context
     }, player);
-    }
+}
 
-    function mirrorIfEnabled(info) {
+function mirrorIfEnabled(info) {
 
     if (info && playbackManager.enableDisplayMirroring()) {
 
@@ -26,13 +32,13 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
             }
         }
     }
-    }
+}
 
-    function emptyCallback() {
+function emptyCallback() {
     // avoid console logs about uncaught promises
-    }
+}
 
-    function getTargetSecondaryText(target) {
+function getTargetSecondaryText(target) {
 
     if (target.user) {
 
@@ -40,9 +46,9 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
     }
 
     return null;
-    }
+}
 
-    function getIcon(target) {
+function getIcon(target) {
 
     var deviceType = target.deviceType;
 
@@ -75,9 +81,9 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
         default:
             return 'tv';
     }
-    }
+}
 
-    function showPlayerSelection(button) {
+export function showPlayerSelection(button) {
 
     var currentPlayerInfo = playbackManager.getPlayerInfo();
 
@@ -144,16 +150,16 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
             }, emptyCallback);
         });
     });
-    }
+}
 
-    function showActivePlayerMenu(playerInfo) {
+function showActivePlayerMenu(playerInfo) {
 
     require(['dialogHelper', 'dialog', 'emby-checkbox', 'emby-button'], function (dialogHelper) {
         showActivePlayerMenuInternal(dialogHelper, playerInfo);
     });
-    }
+}
 
-    function disconnectFromPlayer(currentDeviceName) {
+function disconnectFromPlayer(currentDeviceName) {
 
     if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
 
@@ -196,9 +202,9 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
 
         playbackManager.setDefaultPlayerActive();
     }
-    }
+}
 
-    function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
+function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
 
     var html = '';
 
@@ -277,13 +283,13 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
             disconnectFromPlayer(currentDeviceName);
         }
     }, emptyCallback);
-    }
+}
 
-    function onMirrorChange() {
+function onMirrorChange() {
     playbackManager.enableDisplayMirroring(this.checked);
-    }
+}
 
-    document.addEventListener('viewshow', function (e) {
+document.addEventListener('viewshow', function (e) {
 
     var state = e.detail.state || {};
     var item = state.item;
@@ -294,27 +300,26 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
         });
         return;
     }
-    });
+});
 
-    events.on(appSettings, 'change', function (e, name) {
+events.on(appSettings, 'change', function (e, name) {
     if (name === 'displaymirror') {
         mirrorIfEnabled();
     }
-    });
-
-    events.on(playbackManager, 'pairing', function (e) {
-        loading.show();
-    });
-
-    events.on(playbackManager, 'paired', function (e) {
-        loading.hide();
-    });
-
-    events.on(playbackManager, 'pairerror', function (e) {
-        loading.hide();
-    });
-
-    return {
-        show: showPlayerSelection
-    };
 });
+
+events.on(playbackManager, 'pairing', function (e) {
+    loading.show();
+});
+
+events.on(playbackManager, 'paired', function (e) {
+    loading.hide();
+});
+
+events.on(playbackManager, 'pairerror', function (e) {
+    loading.hide();
+});
+
+export default {
+    show: showPlayerSelection
+};

src/components/playback/playersettingsmenu.js

@@ -1,7 +1,12 @@
-define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'globalize', 'appSettings', 'qualityoptions'], function (connectionManager, actionsheet, datetime, playbackManager, globalize, appSettings, qualityoptions) {
+import connectionManager from 'connectionManager';
-    'use strict';
+import actionsheet from 'actionsheet';
+import datetime from 'datetime';
+import playbackManager from 'playbackManager';
+import globalize from 'globalize';
+import appSettings from 'appSettings';
+import qualityoptions from 'qualityoptions';
 
-    function showQualityMenu(player, btn) {
+function showQualityMenu(player, btn) {
 
     var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
         return stream.Type === 'Video';
@@ -49,9 +54,9 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
             }, player);
         }
     });
-    }
+}
 
-    function showRepeatModeMenu(player, btn) {
+function showRepeatModeMenu(player, btn) {
     var menuItems = [];
     var currentValue = playbackManager.getRepeatMode(player);
 
@@ -81,9 +86,9 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
             playbackManager.setRepeatMode(mode, player);
         }
     });
-    }
+}
 
-    function getQualitySecondaryText(player) {
+function getQualitySecondaryText(player) {
     var state = playbackManager.getPlayerState(player);
     var isAutoEnabled = playbackManager.enableAutomaticBitrateDetection(player);
     var currentMaxBitrate = playbackManager.getMaxStreamingBitrate(player);
@@ -137,9 +142,9 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
     }
 
     return text;
-    }
+}
 
-    function showAspectRatioMenu(player, btn) {
+function showAspectRatioMenu(player, btn) {
     // each has a name and id
     var currentId = playbackManager.getAspectRatio(player);
     var menuItems = playbackManager.getSupportedAspectRatios(player).map(function (i) {
@@ -161,9 +166,9 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
 
         return Promise.reject();
     });
-    }
+}
 
-    function showWithUser(options, player, user) {
+function showWithUser(options, player, user) {
     var supportedCommands = playbackManager.getSupportedCommands(player);
     var mediaType = options.mediaType;
 
@@ -223,9 +228,9 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
     }).then(function (id) {
         return handleSelectedOption(id, options, player);
     });
-    }
+}
 
-    function show(options) {
+export function show(options) {
     var player = options.player;
     var currentItem = playbackManager.currentItem(player);
 
@@ -237,9 +242,9 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
     return apiClient.getCurrentUser().then(function (user) {
         return showWithUser(options, player, user);
     });
-    }
+}
 
-    function handleSelectedOption(id, options, player) {
+function handleSelectedOption(id, options, player) {
     switch (id) {
         case 'quality':
             return showQualityMenu(player, options.positionTo);
@@ -262,9 +267,8 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
     }
 
     return Promise.reject();
-    }
+}
 
-    return {
+export default {
     show: show
-    };
+};
-});

src/components/playback/playmethodhelper.js

@@ -1,7 +1,4 @@
-define([], function () {
+export function getDisplayPlayMethod(session) {
-    'use strict';
-
-    function getDisplayPlayMethod(session) {
 
     if (!session.NowPlayingItem) {
         return null;
@@ -16,9 +13,8 @@ define([], function () {
     } else if (session.PlayState.PlayMethod === 'DirectPlay') {
         return 'DirectPlay';
     }
-    }
+}
 
-    return {
+export default {
     getDisplayPlayMethod: getDisplayPlayMethod
-    };
+};
-});

src/components/playback/remotecontrolautoplay.js

@@ -1,7 +1,7 @@
-define(['events', 'playbackManager'], function (events, playbackManager) {
+import events from 'events';
-    'use strict';
+import playbackManager from 'playbackManager';
 
-    function transferPlayback(oldPlayer, newPlayer) {
+function transferPlayback(oldPlayer, newPlayer) {
 
     var state = playbackManager.getPlayerState(oldPlayer);
 
@@ -23,9 +23,9 @@ define(['events', 'playbackManager'], function (events, playbackManager) {
 
         }, newPlayer);
     });
-    }
+}
 
-    events.on(playbackManager, 'playerchange', function (e, newPlayer, newTarget, oldPlayer) {
+events.on(playbackManager, 'playerchange', function (e, newPlayer, newTarget, oldPlayer) {
 
     if (!oldPlayer || !newPlayer) {
         return;
@@ -42,6 +42,4 @@ define(['events', 'playbackManager'], function (events, playbackManager) {
     }
 
     transferPlayback(oldPlayer, newPlayer);
-    });
-
 });

src/components/playback/volumeosd.js

@@ -1,14 +1,18 @@
-define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'material-icons'], function (events, playbackManager, dom, browser) {
+import events from 'events';
-    'use strict';
+import playbackManager from 'playbackManager';
+import dom from 'dom';
+import browser from 'browser';
+import 'css!./iconosd';
+import 'material-icons';
 
-    var currentPlayer;
+var currentPlayer;
-    var osdElement;
+var osdElement;
-    var iconElement;
+var iconElement;
-    var progressElement;
+var progressElement;
 
-    var enableAnimation;
+var enableAnimation;
 
-    function getOsdElementHtml() {
+function getOsdElementHtml() {
     var html = '';
 
     html += '<span class="material-icons iconOsdIcon volume_up"></span>';
@@ -16,9 +20,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner"></div></div>';
 
     return html;
-    }
+}
 
-    function ensureOsdElement() {
+function ensureOsdElement() {
 
     var elem = osdElement;
     if (!elem) {
@@ -38,14 +42,14 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
         document.body.appendChild(elem);
         osdElement = elem;
     }
-    }
+}
 
-    function onHideComplete() {
+function onHideComplete() {
     this.classList.add('hide');
-    }
+}
 
-    var hideTimeout;
+var hideTimeout;
-    function showOsd() {
+function showOsd() {
 
     clearHideTimeout();
 
@@ -65,16 +69,16 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
 
         hideTimeout = setTimeout(hideOsd, 3000);
     });
-    }
+}
 
-    function clearHideTimeout() {
+function clearHideTimeout() {
     if (hideTimeout) {
         clearTimeout(hideTimeout);
         hideTimeout = null;
     }
-    }
+}
 
-    function hideOsd() {
+function hideOsd() {
 
     clearHideTimeout();
 
@@ -96,9 +100,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
             onHideComplete.call(elem);
         }
     }
-    }
+}
 
-    function updatePlayerVolumeState(isMuted, volume) {
+function updatePlayerVolumeState(isMuted, volume) {
 
     if (iconElement) {
         iconElement.classList.remove('volume_off', 'volume_up');
@@ -107,9 +111,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     if (progressElement) {
         progressElement.style.width = (volume || 0) + '%';
     }
-    }
+}
 
-    function releaseCurrentPlayer() {
+function releaseCurrentPlayer() {
 
     var player = currentPlayer;
 
@@ -118,9 +122,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
         events.off(player, 'playbackstop', hideOsd);
         currentPlayer = null;
     }
-    }
+}
 
-    function onVolumeChanged(e) {
+function onVolumeChanged(e) {
 
     var player = this;
 
@@ -129,9 +133,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     updatePlayerVolumeState(player.isMuted(), player.getVolume());
 
     showOsd();
-    }
+}
 
-    function bindToPlayer(player) {
+function bindToPlayer(player) {
 
     if (player === currentPlayer) {
         return;
@@ -148,12 +152,10 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     hideOsd();
     events.on(player, 'volumechange', onVolumeChanged);
     events.on(player, 'playbackstop', hideOsd);
-    }
+}
 
-    events.on(playbackManager, 'playerchange', function () {
+events.on(playbackManager, 'playerchange', function () {
     bindToPlayer(playbackManager.getCurrentPlayer());
-    });
-
-    bindToPlayer(playbackManager.getCurrentPlayer());
-
 });
+
+bindToPlayer(playbackManager.getCurrentPlayer());