Merge pull request #1663 from Camc314/migrate-to-ES6-44

Migration of libraryBrowser and multiDownload to ES6 modules

package.json

@@ -248,6 +248,8 @@
           "src/scripts/imagehelper.js",
           "src/scripts/inputManager.js",
           "src/scripts/keyboardNavigation.js",
+          "src/scripts/libraryBrowser.js",
+          "src/scripts/multiDownload.js",
           "src/scripts/playlists.js",
           "src/scripts/settings/appSettings.js",
           "src/scripts/settings/userSettings.js",

src/controllers/livetv/livetvchannels.js

@@ -1,6 +1,8 @@
 define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'userSettings', 'emby-itemscontainer'], function (cardBuilder, imageLoader, libraryBrowser, loading, events, userSettings) {
     'use strict';
 
+    libraryBrowser = libraryBrowser.default || libraryBrowser;
+
     return function (view, params, tabContent) {
         function getPageData() {
             if (!pageData) {

src/controllers/movies/moviecollections.js

@@ -1,6 +1,8 @@
 define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings, globalize) {
     'use strict';
 
+    libraryBrowser = libraryBrowser.default || libraryBrowser;
+
     return function (view, params, tabContent) {
         function getPageData(context) {
             var key = getSavedQueryKey(context);

src/controllers/movies/moviegenres.js

@@ -1,6 +1,8 @@
 define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost', 'globalize', 'appRouter', 'dom', 'emby-button'], function (layoutManager, loading, libraryBrowser, cardBuilder, lazyLoader, appHost, globalize, appRouter, dom) {
     'use strict';
 
+    libraryBrowser = libraryBrowser.default || libraryBrowser;
+
     return function (view, params, tabContent) {
         function getPageData() {
             var key = getSavedQueryKey();

src/controllers/movies/movies.js

@@ -1,6 +1,8 @@
 define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, AlphaPicker, listView, cardBuilder, globalize) {
     'use strict';
 
+    libraryBrowser = libraryBrowser.default || libraryBrowser;
+
     return function (view, params, tabContent, options) {
         function onViewStyleChange() {
             if (self.getCurrentViewStyle() == 'List') {

src/controllers/movies/movietrailers.js

@@ -1,6 +1,8 @@
 define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) {
     'use strict';
 
+    libraryBrowser = libraryBrowser.default || libraryBrowser;
+
     return function (view, params, tabContent) {
         function getPageData(context) {
             var key = getSavedQueryKey(context);

src/controllers/music/musicalbums.js

@@ -1,6 +1,8 @@
 define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) {
     'use strict';
 
+    libraryBrowser = libraryBrowser.default || libraryBrowser;
+
     return function (view, params, tabContent) {
         function playAll() {
             ApiClient.getItem(ApiClient.getCurrentUserId(), params.topParentId).then(function (item) {

src/controllers/music/musicartists.js

@@ -1,6 +1,8 @@
 define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'apphost', 'userSettings', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, appHost, userSettings) {
     'use strict';
 
+    libraryBrowser = libraryBrowser.default || libraryBrowser;
+
     return function (view, params, tabContent) {
         function getPageData(context) {
             var key = getSavedQueryKey(context);

src/controllers/music/musicgenres.js

@@ -1,6 +1,8 @@
 define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], function (libraryBrowser, cardBuilder, appHost, imageLoader, loading) {
     'use strict';
 
+    libraryBrowser = libraryBrowser.default || libraryBrowser;
+
     return function (view, params, tabContent) {
         function getPageData() {
             var key = getSavedQueryKey();

src/controllers/music/musicplaylists.js

@@ -1,6 +1,8 @@
 define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], function (libraryBrowser, cardBuilder, appHost, imageLoader, loading) {
     'use strict';
 
+    libraryBrowser = libraryBrowser.default || libraryBrowser;
+
     return function (view, params, tabContent) {
         function getPageData() {
             var key = getSavedQueryKey();

src/controllers/music/songs.js

@@ -1,6 +1,8 @@
 define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userSettings', 'globalize', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView, loading, userSettings, globalize) {
     'use strict';
 
+    libraryBrowser = libraryBrowser.default || libraryBrowser;
+
     return function (view, params, tabContent) {
         function getPageData(context) {
             var key = getSavedQueryKey(context);

src/scripts/libraryBrowser.js

@@ -1,199 +1,216 @@
-define(['userSettings', 'globalize'], function (userSettings, globalize) {
+import * as userSettings from 'userSettings';
-    'use strict';
+import globalize from 'globalize';
 
-    var libraryBrowser = {
+export function getSavedQueryKey(modifier) {
-        getSavedQueryKey: function (modifier) {
+    return window.location.href.split('#')[0] + (modifier || '');
-            return window.location.href.split('#')[0] + (modifier || '');
+}
-        },
-        loadSavedQueryValues: function (key, query) {
-            var values = userSettings.get(key);
 
-            if (values) {
+export function loadSavedQueryValues(key, query) {
-                values = JSON.parse(values);
+    var values = userSettings.get(key);
-                return Object.assign(query, values);
-            }
 
-            return query;
+    if (values) {
-        },
+        values = JSON.parse(values);
-        saveQueryValues: function (key, query) {
+        return Object.assign(query, values);
-            var values = {};
+    }
 
-            if (query.SortBy) {
+    return query;
-                values.SortBy = query.SortBy;
+}
-            }
 
-            if (query.SortOrder) {
+export function saveQueryValues(key, query) {
-                values.SortOrder = query.SortOrder;
+    var values = {};
-            }
 
-            userSettings.set(key, JSON.stringify(values));
+    if (query.SortBy) {
-        },
+        values.SortBy = query.SortBy;
-        saveViewSetting: function (key, value) {
+    }
-            userSettings.set(key + '-_view', value);
-        },
-        getSavedView: function (key) {
-            return userSettings.get(key + '-_view');
-        },
-        showLayoutMenu: function (button, currentLayout, views) {
-            var dispatchEvent = true;
 
-            if (!views) {
+    if (query.SortOrder) {
-                dispatchEvent = false;
+        values.SortOrder = query.SortOrder;
-                views = button.getAttribute('data-layouts');
+    }
-                views = views ? views.split(',') : ['List', 'Poster', 'PosterCard', 'Thumb', 'ThumbCard'];
-            }
 
-            var menuItems = views.map(function (v) {
+    userSettings.set(key, JSON.stringify(values));
-                return {
+}
-                    name: globalize.translate('Option' + v),
-                    id: v,
-                    selected: currentLayout == v
-                };
-            });
 
-            require(['actionsheet'], function (actionsheet) {
+export function saveViewSetting (key, value) {
-                actionsheet.show({
+    userSettings.set(key + '-_view', value);
-                    items: menuItems,
+}
-                    positionTo: button,
-                    callback: function (id) {
-                        button.dispatchEvent(new CustomEvent('layoutchange', {
-                            detail: {
-                                viewStyle: id
-                            },
-                            bubbles: true,
-                            cancelable: false
-                        }));
 
-                        if (!dispatchEvent) {
+export function getSavedView (key) {
-                            if (window.$) {
+    return userSettings.get(key + '-_view');
-                                $(button).trigger('layoutchange', [id]);
+}
-                            }
-                        }
-                    }
-                });
-            });
-        },
-        getQueryPagingHtml: function (options) {
-            var startIndex = options.startIndex;
-            var limit = options.limit;
-            var totalRecordCount = options.totalRecordCount;
-            var html = '';
-            var recordsEnd = Math.min(startIndex + limit, totalRecordCount);
-            var showControls = limit < totalRecordCount;
 
-            if (html += '<div class="listPaging">', showControls) {
+export function showLayoutMenu (button, currentLayout, views) {
-                html += '<span style="vertical-align:middle;">';
+    var dispatchEvent = true;
-                html += globalize.translate('ListPaging', (totalRecordCount ? startIndex + 1 : 0), recordsEnd, totalRecordCount);
-                html += '</span>';
-            }
 
-            if (showControls || options.viewButton || options.filterButton || options.sortButton || options.addLayoutButton) {
+    if (!views) {
-                html += '<div style="display:inline-block;">';
+        dispatchEvent = false;
+        views = button.getAttribute('data-layouts');
+        views = views ? views.split(',') : ['List', 'Poster', 'PosterCard', 'Thumb', 'ThumbCard'];
+    }
 
-                if (showControls) {
+    var menuItems = views.map(function (v) {
-                    html += '<button is="paper-icon-button-light" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><span class="material-icons arrow_back"></span></button>';
+        return {
-                    html += '<button is="paper-icon-button-light" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><span class="material-icons arrow_forward"></span></button>';
+            name: globalize.translate('Option' + v),
-                }
+            id: v,
+            selected: currentLayout == v
+        };
+    });
 
-                if (options.addLayoutButton) {
+    import('actionsheet').then(({default: actionsheet}) => {
-                    html += '<button is="paper-icon-button-light" title="' + globalize.translate('ButtonSelectView') + '" class="btnChangeLayout autoSize" data-layouts="' + (options.layouts || '') + '" onclick="LibraryBrowser.showLayoutMenu(this, \'' + (options.currentLayout || '') + '\');"><span class="material-icons view_comfy"></span></button>';
+        actionsheet.show({
-                }
+            items: menuItems,
+            positionTo: button,
+            callback: function (id) {
+                button.dispatchEvent(new CustomEvent('layoutchange', {
+                    detail: {
+                        viewStyle: id
+                    },
+                    bubbles: true,
+                    cancelable: false
+                }));
 
-                if (options.sortButton) {
+                if (!dispatchEvent) {
-                    html += '<button is="paper-icon-button-light" class="btnSort autoSize" title="' + globalize.translate('ButtonSort') + '"><span class="material-icons sort_by_alpha"></span></button>';
+                    if (window.$) {
-                }
+                        $(button).trigger('layoutchange', [id]);
-
-                if (options.filterButton) {
-                    html += '<button is="paper-icon-button-light" class="btnFilter autoSize" title="' + globalize.translate('ButtonFilter') + '"><span class="material-icons filter_list"></span></button>';
-                }
-
-                html += '</div>';
-            }
-
-            return html += '</div>';
-        },
-        showSortMenu: function (options) {
-            require(['dialogHelper', 'emby-radio'], function (dialogHelper) {
-                function onSortByChange() {
-                    var newValue = this.value;
-
-                    if (this.checked) {
-                        var changed = options.query.SortBy != newValue;
-                        options.query.SortBy = newValue.replace('_', ',');
-                        options.query.StartIndex = 0;
-
-                        if (options.callback && changed) {
-                            options.callback();
-                        }
                     }
                 }
+            }
+        });
+    });
+}
 
-                function onSortOrderChange() {
+export function getQueryPagingHtml (options) {
-                    var newValue = this.value;
+    var startIndex = options.startIndex;
+    var limit = options.limit;
+    var totalRecordCount = options.totalRecordCount;
+    var html = '';
+    var recordsEnd = Math.min(startIndex + limit, totalRecordCount);
+    var showControls = limit < totalRecordCount;
 
-                    if (this.checked) {
+    if (html += '<div class="listPaging">', showControls) {
-                        var changed = options.query.SortOrder != newValue;
+        html += '<span style="vertical-align:middle;">';
-                        options.query.SortOrder = newValue;
+        html += globalize.translate('ListPaging', (totalRecordCount ? startIndex + 1 : 0), recordsEnd, totalRecordCount);
-                        options.query.StartIndex = 0;
+        html += '</span>';
+    }
 
-                        if (options.callback && changed) {
+    if (showControls || options.viewButton || options.filterButton || options.sortButton || options.addLayoutButton) {
-                            options.callback();
+        html += '<div style="display:inline-block;">';
-                        }
-                    }
-                }
 
-                var dlg = dialogHelper.createDialog({
+        if (showControls) {
-                    removeOnClose: true,
+            html += '<button is="paper-icon-button-light" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><span class="material-icons arrow_back"></span></button>';
-                    modal: false,
+            html += '<button is="paper-icon-button-light" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><span class="material-icons arrow_forward"></span></button>';
-                    entryAnimationDuration: 160,
-                    exitAnimationDuration: 200
-                });
-                dlg.classList.add('ui-body-a');
-                dlg.classList.add('background-theme-a');
-                dlg.classList.add('formDialog');
-                var html = '';
-                html += '<div style="margin:0;padding:1.25em 1.5em 1.5em;">';
-                html += '<h2 style="margin:0 0 .5em;">';
-                html += globalize.translate('HeaderSortBy');
-                html += '</h2>';
-                var i;
-                var length;
-                var isChecked;
-                html += '<div>';
-                for (i = 0, length = options.items.length; i < length; i++) {
-                    var option = options.items[i];
-                    var radioValue = option.id.replace(',', '_');
-                    isChecked = (options.query.SortBy || '').replace(',', '_') == radioValue ? ' checked' : '';
-                    html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortBy" data-id="' + option.id + '" value="' + radioValue + '" class="menuSortBy" ' + isChecked + ' /><span>' + option.name + '</span></label>';
-                }
-
-                html += '</div>';
-                html += '<h2 style="margin: 1em 0 .5em;">';
-                html += globalize.translate('HeaderSortOrder');
-                html += '</h2>';
-                html += '<div>';
-                isChecked = 'Ascending' == options.query.SortOrder ? ' checked' : '';
-                html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortOrder" value="Ascending" class="menuSortOrder" ' + isChecked + ' /><span>' + globalize.translate('OptionAscending') + '</span></label>';
-                isChecked = 'Descending' == options.query.SortOrder ? ' checked' : '';
-                html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortOrder" value="Descending" class="menuSortOrder" ' + isChecked + ' /><span>' + globalize.translate('OptionDescending') + '</span></label>';
-                html += '</div>';
-                html += '</div>';
-                dlg.innerHTML = html;
-                dialogHelper.open(dlg);
-                var sortBys = dlg.querySelectorAll('.menuSortBy');
-
-                for (i = 0, length = sortBys.length; i < length; i++) {
-                    sortBys[i].addEventListener('change', onSortByChange);
-                }
-
-                var sortOrders = dlg.querySelectorAll('.menuSortOrder');
-
-                for (i = 0, length = sortOrders.length; i < length; i++) {
-                    sortOrders[i].addEventListener('change', onSortOrderChange);
-                }
-            });
         }
-    };
+
-    window.LibraryBrowser = libraryBrowser;
+        if (options.addLayoutButton) {
-    return libraryBrowser;
+            html += '<button is="paper-icon-button-light" title="' + globalize.translate('ButtonSelectView') + '" class="btnChangeLayout autoSize" data-layouts="' + (options.layouts || '') + '" onclick="LibraryBrowser.showLayoutMenu(this, \'' + (options.currentLayout || '') + '\');"><span class="material-icons view_comfy"></span></button>';
-});
+        }
+
+        if (options.sortButton) {
+            html += '<button is="paper-icon-button-light" class="btnSort autoSize" title="' + globalize.translate('ButtonSort') + '"><span class="material-icons sort_by_alpha"></span></button>';
+        }
+
+        if (options.filterButton) {
+            html += '<button is="paper-icon-button-light" class="btnFilter autoSize" title="' + globalize.translate('ButtonFilter') + '"><span class="material-icons filter_list"></span></button>';
+        }
+
+        html += '</div>';
+    }
+
+    return html += '</div>';
+}
+
+export function showSortMenu (options) {
+    require(['dialogHelper', 'emby-radio'], function (dialogHelper) {
+        function onSortByChange() {
+            var newValue = this.value;
+
+            if (this.checked) {
+                var changed = options.query.SortBy != newValue;
+                options.query.SortBy = newValue.replace('_', ',');
+                options.query.StartIndex = 0;
+
+                if (options.callback && changed) {
+                    options.callback();
+                }
+            }
+        }
+
+        function onSortOrderChange() {
+            var newValue = this.value;
+
+            if (this.checked) {
+                var changed = options.query.SortOrder != newValue;
+                options.query.SortOrder = newValue;
+                options.query.StartIndex = 0;
+
+                if (options.callback && changed) {
+                    options.callback();
+                }
+            }
+        }
+
+        var dlg = dialogHelper.createDialog({
+            removeOnClose: true,
+            modal: false,
+            entryAnimationDuration: 160,
+            exitAnimationDuration: 200
+        });
+        dlg.classList.add('ui-body-a');
+        dlg.classList.add('background-theme-a');
+        dlg.classList.add('formDialog');
+        var html = '';
+        html += '<div style="margin:0;padding:1.25em 1.5em 1.5em;">';
+        html += '<h2 style="margin:0 0 .5em;">';
+        html += globalize.translate('HeaderSortBy');
+        html += '</h2>';
+        var i;
+        var length;
+        var isChecked;
+        html += '<div>';
+        for (i = 0, length = options.items.length; i < length; i++) {
+            var option = options.items[i];
+            var radioValue = option.id.replace(',', '_');
+            isChecked = (options.query.SortBy || '').replace(',', '_') == radioValue ? ' checked' : '';
+            html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortBy" data-id="' + option.id + '" value="' + radioValue + '" class="menuSortBy" ' + isChecked + ' /><span>' + option.name + '</span></label>';
+        }
+
+        html += '</div>';
+        html += '<h2 style="margin: 1em 0 .5em;">';
+        html += globalize.translate('HeaderSortOrder');
+        html += '</h2>';
+        html += '<div>';
+        isChecked = 'Ascending' == options.query.SortOrder ? ' checked' : '';
+        html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortOrder" value="Ascending" class="menuSortOrder" ' + isChecked + ' /><span>' + globalize.translate('OptionAscending') + '</span></label>';
+        isChecked = 'Descending' == options.query.SortOrder ? ' checked' : '';
+        html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortOrder" value="Descending" class="menuSortOrder" ' + isChecked + ' /><span>' + globalize.translate('OptionDescending') + '</span></label>';
+        html += '</div>';
+        html += '</div>';
+        dlg.innerHTML = html;
+        dialogHelper.open(dlg);
+        var sortBys = dlg.querySelectorAll('.menuSortBy');
+
+        for (i = 0, length = sortBys.length; i < length; i++) {
+            sortBys[i].addEventListener('change', onSortByChange);
+        }
+
+        var sortOrders = dlg.querySelectorAll('.menuSortOrder');
+
+        for (i = 0, length = sortOrders.length; i < length; i++) {
+            sortOrders[i].addEventListener('change', onSortOrderChange);
+        }
+    });
+}
+
+const libraryBrowser = {
+    getSavedQueryKey,
+    loadSavedQueryValues,
+    saveQueryValues,
+    saveViewSetting,
+    getSavedView,
+    showLayoutMenu,
+    getQueryPagingHtml,
+    showSortMenu
+};
+
+window.LibraryBrowser = libraryBrowser;
+
+export default libraryBrowser;

src/scripts/multiDownload.js

@@ -1,66 +1,65 @@
-define(['browser'], function (browser) {
+import browser from 'browser';
-    'use strict';
 
-    function fallback(urls) {
+function fallback(urls) {
-        var i = 0;
+    var i = 0;
 
-        (function createIframe() {
+    (function createIframe() {
-            var frame = document.createElement('iframe');
+        var frame = document.createElement('iframe');
-            frame.style.display = 'none';
+        frame.style.display = 'none';
-            frame.src = urls[i++];
+        frame.src = urls[i++];
-            document.documentElement.appendChild(frame);
+        document.documentElement.appendChild(frame);
 
-            // the download init has to be sequential otherwise IE only use the first
+        // the download init has to be sequential otherwise IE only use the first
-            var interval = setInterval(function () {
+        var interval = setInterval(function () {
-                if (frame.contentWindow.document.readyState === 'complete' || frame.contentWindow.document.readyState === 'interactive') {
+            if (frame.contentWindow.document.readyState === 'complete' || frame.contentWindow.document.readyState === 'interactive') {
-                    clearInterval(interval);
+                clearInterval(interval);
 
-                    // Safari needs a timeout
+                // Safari needs a timeout
-                    setTimeout(function () {
+                setTimeout(function () {
-                        frame.parentNode.removeChild(frame);
+                    frame.parentNode.removeChild(frame);
-                    }, 1000);
+                }, 1000);
 
-                    if (i < urls.length) {
+                if (i < urls.length) {
-                        createIframe();
+                    createIframe();
-                    }
                 }
-            }, 100);
-        })();
-    }
-
-    function sameDomain(url) {
-        var a = document.createElement('a');
-        a.href = url;
-
-        return location.hostname === a.hostname && location.protocol === a.protocol;
-    }
-
-    function download(url) {
-        var a = document.createElement('a');
-        a.download = '';
-        a.href = url;
-        // firefox doesn't support `a.click()`...
-        a.dispatchEvent(new MouseEvent('click'));
-    }
-
-    return function (urls) {
-        if (!urls) {
-            throw new Error('`urls` required');
-        }
-
-        if (typeof document.createElement('a').download === 'undefined') {
-            return fallback(urls);
-        }
-
-        var delay = 0;
-
-        urls.forEach(function (url) {
-            // the download init has to be sequential for firefox if the urls are not on the same domain
-            if (browser.firefox && !sameDomain(url)) {
-                return setTimeout(download.bind(null, url), 100 * ++delay);
             }
+        }, 100);
+    })();
+}
+
+function sameDomain(url) {
+    var a = document.createElement('a');
+    a.href = url;
+
+    return location.hostname === a.hostname && location.protocol === a.protocol;
+}
+
+function download(url) {
+    var a = document.createElement('a');
+    a.download = '';
+    a.href = url;
+    // firefox doesn't support `a.click()`...
+    a.dispatchEvent(new MouseEvent('click'));
+}
+
+export default function (urls) {
+    if (!urls) {
+        throw new Error('`urls` required');
+    }
+
+    if (typeof document.createElement('a').download === 'undefined') {
+        return fallback(urls);
+    }
+
+    var delay = 0;
+
+    urls.forEach(function (url) {
+        // the download init has to be sequential for firefox if the urls are not on the same domain
+        if (browser.firefox && !sameDomain(url)) {
+            return setTimeout(download.bind(null, url), 100 * ++delay);
+        }
+
+        download(url);
+    });
+}
 
-            download(url);
-        });
-    };
-});