Migrated livestatus.js to es6 module

package.json

@@ -201,6 +201,7 @@
           "src/controllers/playback/video/index.js",
           "src/controllers/searchpage.js",
           "src/controllers/livetvtuner.js",
+          "src/controllers/livetvstatus.js",
           "src/controllers/shows/episodes.js",
           "src/controllers/shows/tvgenres.js",
           "src/controllers/shows/tvlatest.js",

src/controllers/livetvstatus.js

@@ -1,294 +1,307 @@
-define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layoutManager', 'loading', 'browser', 'listViewStyle', 'flexStyles', 'emby-itemscontainer', 'cardStyle', 'material-icons', 'emby-button'], function ($, globalize, taskButton, dom, libraryMenu, layoutManager, loading, browser) {
+'use strict';
-    'use strict';
 
-    var enableFocusTransform = !browser.slow && !browser.edge;
+import $ from 'jQuery';
+import globalize from 'globalize';
+import taskButton from 'scripts/taskbutton';
+import dom from 'dom';
+import layoutManager from 'layoutManager';
+import loading from 'loading';
+import browser from 'browser';
+import 'listViewStyle';
+import 'flexStyles';
+import 'emby-itemscontainer';
+import 'cardStyle';
+import 'material-icons';
+import 'emby-button';
 
-    function getDeviceHtml(device) {
+const enableFocusTransform = !browser.slow && !browser.edge;
-        var padderClass;
-        var html = '';
-        var cssClass = 'card scalableCard';
-        var cardBoxCssClass = 'cardBox visualCardBox';
-        cssClass += ' backdropCard backdropCard-scalable';
-        padderClass = 'cardPadder-backdrop';
 
-        // TODO move card creation code to Card component
+function getDeviceHtml(device) {
+    let padderClass;
+    let html = '';
+    let cssClass = 'card scalableCard';
+    let cardBoxCssClass = 'cardBox visualCardBox';
+    cssClass += ' backdropCard backdropCard-scalable';
+    padderClass = 'cardPadder-backdrop';
 
-        if (layoutManager.tv) {
+    // TODO move card creation code to Card component
-            cssClass += ' show-focus';
 
-            if (enableFocusTransform) {
+    if (layoutManager.tv) {
-                cssClass += ' show-animation';
+        cssClass += ' show-focus';
-            }
+
+        if (enableFocusTransform) {
+            cssClass += ' show-animation';
         }
-
-        html += '<div type="button" class="' + cssClass + '" data-id="' + device.Id + '">';
-        html += '<div class="' + cardBoxCssClass + '">';
-        html += '<div class="cardScalable visualCardBox-cardScalable">';
-        html += '<div class="' + padderClass + '"></div>';
-        html += '<div class="cardContent searchImage">';
-        html += '<div class="cardImageContainer coveredImage"><span class="cardImageIcon material-icons dvr"></span></div>';
-        html += '</div>';
-        html += '</div>';
-        html += '<div class="cardFooter visualCardBox-cardFooter">';
-        html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><span class="material-icons more_vert"></span></button>';
-        html += '<div class="cardText">' + (device.FriendlyName || getTunerName(device.Type)) + '</div>';
-        html += '<div class="cardText cardText-secondary">';
-        html += device.Url || '&nbsp;';
-        html += '</div>';
-        html += '</div>';
-        html += '</div>';
-        return html += '</div>';
     }
 
-    function renderDevices(page, devices) {
+    html += '<div type="button" class="' + cssClass + '" data-id="' + device.Id + '">';
-        var html = devices.map(getDeviceHtml).join('');
+    html += '<div class="' + cardBoxCssClass + '">';
-        page.querySelector('.devicesList').innerHTML = html;
+    html += '<div class="cardScalable visualCardBox-cardScalable">';
-    }
+    html += '<div class="' + padderClass + '"></div>';
+    html += '<div class="cardContent searchImage">';
+    html += '<div class="cardImageContainer coveredImage"><span class="cardImageIcon material-icons dvr"></span></div>';
+    html += '</div>';
+    html += '</div>';
+    html += '<div class="cardFooter visualCardBox-cardFooter">';
+    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><span class="material-icons more_vert"></span></button>';
+    html += '<div class="cardText">' + (device.FriendlyName || getTunerName(device.Type)) + '</div>';
+    html += '<div class="cardText cardText-secondary">';
+    html += device.Url || '&nbsp;';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    return html += '</div>';
+}
 
-    function deleteDevice(page, id) {
+function renderDevices(page, devices) {
-        var message = globalize.translate('MessageConfirmDeleteTunerDevice');
+    page.querySelector('.devicesList').innerHTML = devices.map(getDeviceHtml).join('');
+}
 
-        require(['confirm'], function (confirm) {
+function deleteDevice(page, id) {
-            confirm.default(message, globalize.translate('HeaderDeleteDevice')).then(function () {
+    const message = globalize.translate('MessageConfirmDeleteTunerDevice');
-                loading.show();
+
-                ApiClient.ajax({
+    import('confirm').then(({default: confirm}) => {
-                    type: 'DELETE',
+        confirm(message, globalize.translate('HeaderDeleteDevice')).then(function () {
-                    url: ApiClient.getUrl('LiveTv/TunerHosts', {
+            loading.show();
-                        Id: id
+            ApiClient.ajax({
-                    })
+                type: 'DELETE',
-                }).then(function () {
+                url: ApiClient.getUrl('LiveTv/TunerHosts', {
-                    reload(page);
+                    Id: id
-                });
+                })
+            }).then(function () {
+                reload(page);
             });
         });
-    }
+    });
+}
 
-    function reload(page) {
+function reload(page) {
-        loading.show();
+    loading.show();
-        ApiClient.getNamedConfiguration('livetv').then(function (config) {
+    ApiClient.getNamedConfiguration('livetv').then(function (config) {
-            renderDevices(page, config.TunerHosts);
+        renderDevices(page, config.TunerHosts);
-            renderProviders(page, config.ListingProviders);
+        renderProviders(page, config.ListingProviders);
+    });
+    loading.hide();
+}
+
+function submitAddDeviceForm(page) {
+    page.querySelector('.dlgAddDevice').close();
+    loading.show();
+    ApiClient.ajax({
+        type: 'POST',
+        url: ApiClient.getUrl('LiveTv/TunerHosts'),
+        data: JSON.stringify({
+            Type: $('#selectTunerDeviceType', page).val(),
+            Url: $('#txtDevicePath', page).val()
+        }),
+        contentType: 'application/json'
+    }).then(function () {
+        reload(page);
+    }, function () {
+        Dashboard.alert({
+            message: globalize.translate('ErrorAddingTunerDevice')
         });
-        loading.hide();
+    });
-    }
+}
 
-    function submitAddDeviceForm(page) {
+function renderProviders(page, providers) {
-        page.querySelector('.dlgAddDevice').close();
+    let html = '';
-        loading.show();
-        ApiClient.ajax({
-            type: 'POST',
-            url: ApiClient.getUrl('LiveTv/TunerHosts'),
-            data: JSON.stringify({
-                Type: $('#selectTunerDeviceType', page).val(),
-                Url: $('#txtDevicePath', page).val()
-            }),
-            contentType: 'application/json'
-        }).then(function () {
-            reload(page);
-        }, function () {
-            Dashboard.alert({
-                message: globalize.translate('ErrorAddingTunerDevice')
-            });
-        });
-    }
 
-    function renderProviders(page, providers) {
+    if (providers.length) {
-        var html = '';
+        html += '<div class="paperList">';
-
-        if (providers.length) {
-            html += '<div class="paperList">';
-
-            for (var i = 0, length = providers.length; i < length; i++) {
-                var provider = providers[i];
-                html += '<div class="listItem">';
-                html += '<span class="listItemIcon material-icons dvr"></span>';
-                html += '<div class="listItemBody two-line">';
-                html += '<a is="emby-linkbutton" style="display:block;padding:0;margin:0;text-align:left;" class="clearLink" href="' + getProviderConfigurationUrl(provider.Type) + '&id=' + provider.Id + '">';
-                html += '<h3 class="listItemBodyText">';
-                html += getProviderName(provider.Type);
-                html += '</h3>';
-                html += '<div class="listItemBodyText secondary">';
-                html += provider.Path || provider.ListingsId || '';
-                html += '</div>';
-                html += '</a>';
-                html += '</div>';
-                html += '<button type="button" is="paper-icon-button-light" class="btnOptions" data-id="' + provider.Id + '"><span class="material-icons listItemAside more_vert"></span></button>';
-                html += '</div>';
-            }
 
+        for (let i = 0, length = providers.length; i < length; i++) {
+            const provider = providers[i];
+            html += '<div class="listItem">';
+            html += '<span class="listItemIcon material-icons dvr"></span>';
+            html += '<div class="listItemBody two-line">';
+            html += '<a is="emby-linkbutton" style="display:block;padding:0;margin:0;text-align:left;" class="clearLink" href="' + getProviderConfigurationUrl(provider.Type) + '&id=' + provider.Id + '">';
+            html += '<h3 class="listItemBodyText">';
+            html += getProviderName(provider.Type);
+            html += '</h3>';
+            html += '<div class="listItemBodyText secondary">';
+            html += provider.Path || provider.ListingsId || '';
+            html += '</div>';
+            html += '</a>';
+            html += '</div>';
+            html += '<button type="button" is="paper-icon-button-light" class="btnOptions" data-id="' + provider.Id + '"><span class="material-icons listItemAside more_vert"></span></button>';
             html += '</div>';
         }
 
-        var elem = $('.providerList', page).html(html);
+        html += '</div>';
-        $('.btnOptions', elem).on('click', function () {
-            var id = this.getAttribute('data-id');
-            showProviderOptions(page, id, this);
-        });
     }
 
-    function showProviderOptions(page, providerId, button) {
+    const elem = $('.providerList', page).html(html);
-        var items = [];
+    $('.btnOptions', elem).on('click', function () {
-        items.push({
+        var id = this.getAttribute('data-id');
-            name: globalize.translate('ButtonDelete'),
+        showProviderOptions(page, id, this);
-            id: 'delete'
+    });
-        });
+}
-        items.push({
-            name: globalize.translate('MapChannels'),
-            id: 'map'
-        });
 
-        require(['actionsheet'], function (actionsheet) {
+function showProviderOptions(page, providerId, button) {
-            actionsheet.show({
+    const items = [];
-                items: items,
+    items.push({
-                positionTo: button
+        name: globalize.translate('ButtonDelete'),
-            }).then(function (id) {
+        id: 'delete'
-                switch (id) {
+    });
-                    case 'delete':
+    items.push({
-                        deleteProvider(page, providerId);
+        name: globalize.translate('MapChannels'),
-                        break;
+        id: 'map'
+    });
 
-                    case 'map':
+    import('actionsheet').then(({default: actionsheet}) => {
-                        mapChannels(page, providerId);
+        actionsheet.show({
-                }
+            items: items,
-            });
+            positionTo: button
-        });
+        }).then(function (id) {
-    }
+            switch (id) {
+                case 'delete':
+                    deleteProvider(page, providerId);
+                    break;
 
-    function mapChannels(page, providerId) {
+                case 'map':
-        require(['components/channelMapper/channelMapper'], function (channelMapper) {
+                    mapChannels(page, providerId);
-            new channelMapper.default({
-                serverId: ApiClient.serverInfo().Id,
-                providerId: providerId
-            }).show();
-        });
-    }
-
-    function deleteProvider(page, id) {
-        var message = globalize.translate('MessageConfirmDeleteGuideProvider');
-
-        require(['confirm'], function (confirm) {
-            confirm.default(message, globalize.translate('HeaderDeleteProvider')).then(function () {
-                loading.show();
-                ApiClient.ajax({
-                    type: 'DELETE',
-                    url: ApiClient.getUrl('LiveTv/ListingProviders', {
-                        Id: id
-                    })
-                }).then(function () {
-                    reload(page);
-                }, function () {
-                    reload(page);
-                });
-            });
-        });
-    }
-
-    function getTunerName(providerId) {
-        switch (providerId = providerId.toLowerCase()) {
-            case 'm3u':
-                return 'M3U';
-            case 'hdhomerun':
-                return 'HDHomeRun';
-            case 'hauppauge':
-                return 'Hauppauge';
-            case 'satip':
-                return 'DVB';
-            default:
-                return 'Unknown';
-        }
-    }
-
-    function getProviderName(providerId) {
-        switch (providerId = providerId.toLowerCase()) {
-            case 'schedulesdirect':
-                return 'Schedules Direct';
-            case 'xmltv':
-                return 'XMLTV';
-            default:
-                return 'Unknown';
-        }
-    }
-
-    function getProviderConfigurationUrl(providerId) {
-        switch (providerId = providerId.toLowerCase()) {
-            case 'xmltv':
-                return 'livetvguideprovider.html?type=xmltv';
-            case 'schedulesdirect':
-                return 'livetvguideprovider.html?type=schedulesdirect';
-        }
-    }
-
-    function addProvider(button) {
-        var menuItems = [];
-        menuItems.push({
-            name: 'Schedules Direct',
-            id: 'SchedulesDirect'
-        });
-        menuItems.push({
-            name: 'XMLTV',
-            id: 'xmltv'
-        });
-
-        require(['actionsheet'], function (actionsheet) {
-            actionsheet.show({
-                items: menuItems,
-                positionTo: button,
-                callback: function (id) {
-                    Dashboard.navigate(getProviderConfigurationUrl(id));
-                }
-            });
-        });
-    }
-
-    function addDevice(button) {
-        Dashboard.navigate('livetvtuner.html');
-    }
-
-    function showDeviceMenu(button, tunerDeviceId) {
-        var items = [];
-        items.push({
-            name: globalize.translate('ButtonDelete'),
-            id: 'delete'
-        });
-        items.push({
-            name: globalize.translate('ButtonEdit'),
-            id: 'edit'
-        });
-
-        require(['actionsheet'], function (actionsheet) {
-            actionsheet.show({
-                items: items,
-                positionTo: button
-            }).then(function (id) {
-                switch (id) {
-                    case 'delete':
-                        deleteDevice(dom.parentWithClass(button, 'page'), tunerDeviceId);
-                        break;
-
-                    case 'edit':
-                        Dashboard.navigate('livetvtuner.html?id=' + tunerDeviceId);
-                }
-            });
-        });
-    }
-
-    function onDevicesListClick(e) {
-        var card = dom.parentWithClass(e.target, 'card');
-
-        if (card) {
-            var id = card.getAttribute('data-id');
-            var btnCardOptions = dom.parentWithClass(e.target, 'btnCardOptions');
-
-            if (btnCardOptions) {
-                showDeviceMenu(btnCardOptions, id);
-            } else {
-                Dashboard.navigate('livetvtuner.html?id=' + id);
             }
+        });
+    });
+}
+
+function mapChannels(page, providerId) {
+    import('components/channelMapper/channelMapper').then(({default: channelMapper}) => {
+        new channelMapper({
+            serverId: ApiClient.serverInfo().Id,
+            providerId: providerId
+        }).show();
+    });
+}
+
+function deleteProvider(page, id) {
+    const message = globalize.translate('MessageConfirmDeleteGuideProvider');
+
+    import('confirm').then(({default: confirm}) => {
+        confirm(message, globalize.translate('HeaderDeleteProvider')).then(function () {
+            loading.show();
+            ApiClient.ajax({
+                type: 'DELETE',
+                url: ApiClient.getUrl('LiveTv/ListingProviders', {
+                    Id: id
+                })
+            }).then(function () {
+                reload(page);
+            }, function () {
+                reload(page);
+            });
+        });
+    });
+}
+
+function getTunerName(providerId) {
+    switch (providerId = providerId.toLowerCase()) {
+        case 'm3u':
+            return 'M3U';
+        case 'hdhomerun':
+            return 'HDHomeRun';
+        case 'hauppauge':
+            return 'Hauppauge';
+        case 'satip':
+            return 'DVB';
+        default:
+            return 'Unknown';
+    }
+}
+
+function getProviderName(providerId) {
+    switch (providerId = providerId.toLowerCase()) {
+        case 'schedulesdirect':
+            return 'Schedules Direct';
+        case 'xmltv':
+            return 'XMLTV';
+        default:
+            return 'Unknown';
+    }
+}
+
+function getProviderConfigurationUrl(providerId) {
+    switch (providerId = providerId.toLowerCase()) {
+        case 'xmltv':
+            return 'livetvguideprovider.html?type=xmltv';
+        case 'schedulesdirect':
+            return 'livetvguideprovider.html?type=schedulesdirect';
+    }
+}
+
+function addProvider(button) {
+    const menuItems = [];
+    menuItems.push({
+        name: 'Schedules Direct',
+        id: 'SchedulesDirect'
+    });
+    menuItems.push({
+        name: 'XMLTV',
+        id: 'xmltv'
+    });
+
+    import('actionsheet').then(({default: actionsheet}) => {
+        actionsheet.show({
+            items: menuItems,
+            positionTo: button,
+            callback: function (id) {
+                Dashboard.navigate(getProviderConfigurationUrl(id));
+            }
+        });
+    });
+}
+
+function addDevice(button) {
+    Dashboard.navigate('livetvtuner.html');
+}
+
+function showDeviceMenu(button, tunerDeviceId) {
+    var items = [];
+    items.push({
+        name: globalize.translate('ButtonDelete'),
+        id: 'delete'
+    });
+    items.push({
+        name: globalize.translate('ButtonEdit'),
+        id: 'edit'
+    });
+
+    require(['actionsheet'], function (actionsheet) {
+        actionsheet.show({
+            items: items,
+            positionTo: button
+        }).then(function (id) {
+            switch (id) {
+                case 'delete':
+                    deleteDevice(dom.parentWithClass(button, 'page'), tunerDeviceId);
+                    break;
+
+                case 'edit':
+                    Dashboard.navigate('livetvtuner.html?id=' + tunerDeviceId);
+            }
+        });
+    });
+}
+
+function onDevicesListClick(e) {
+    const card = dom.parentWithClass(e.target, 'card');
+
+    if (card) {
+        const id = card.getAttribute('data-id');
+        const btnCardOptions = dom.parentWithClass(e.target, 'btnCardOptions');
+
+        if (btnCardOptions) {
+            showDeviceMenu(btnCardOptions, id);
+        } else {
+            Dashboard.navigate('livetvtuner.html?id=' + id);
         }
     }
+}
 
+export default function () {
     $(document).on('pageinit', '#liveTvStatusPage', function () {
-        var page = this;
+        const page = this;
         $('.btnAddDevice', page).on('click', function () {
             addDevice(this);
         });
@@ -301,21 +314,21 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
         });
         page.querySelector('.devicesList').addEventListener('click', onDevicesListClick);
     }).on('pageshow', '#liveTvStatusPage', function () {
-        var page = this;
+        const page = this;
         reload(page);
-        taskButton.default({
+        taskButton({
             mode: 'on',
             progressElem: page.querySelector('.refreshGuideProgress'),
             taskKey: 'RefreshGuide',
             button: page.querySelector('.btnRefresh')
         });
     }).on('pagehide', '#liveTvStatusPage', function () {
-        var page = this;
+        const page = this;
-        taskButton.default({
+        taskButton({
             mode: 'off',
             progressElem: page.querySelector('.refreshGuideProgress'),
             taskKey: 'RefreshGuide',
             button: page.querySelector('.btnRefresh')
         });
     });
-});
+}