Merge pull request #1700 from matjaz321/migration-livetvstatus-to-es6-module

Migrated livetvstatus.js to es6 module

package.json

@@ -206,6 +206,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,13 +1,24 @@
-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) {
+import $ from 'jQuery';
-    'use strict';
+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';
 
-    var enableFocusTransform = !browser.slow && !browser.edge;
+const enableFocusTransform = !browser.slow && !browser.edge;
 
 function getDeviceHtml(device) {
-        var padderClass;
+    let padderClass;
-        var html = '';
+    let html = '';
-        var cssClass = 'card scalableCard';
+    let cssClass = 'card scalableCard';
-        var cardBoxCssClass = 'cardBox visualCardBox';
+    let cardBoxCssClass = 'cardBox visualCardBox';
     cssClass += ' backdropCard backdropCard-scalable';
     padderClass = 'cardPadder-backdrop';
 
@@ -41,15 +52,14 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
 }
 
 function renderDevices(page, devices) {
-        var html = devices.map(getDeviceHtml).join('');
+    page.querySelector('.devicesList').innerHTML = devices.map(getDeviceHtml).join('');
-        page.querySelector('.devicesList').innerHTML = html;
 }
 
 function deleteDevice(page, id) {
-        var message = globalize.translate('MessageConfirmDeleteTunerDevice');
+    const message = globalize.translate('MessageConfirmDeleteTunerDevice');
 
-        require(['confirm'], function (confirm) {
+    import('confirm').then(({default: confirm}) => {
-            confirm.default(message, globalize.translate('HeaderDeleteDevice')).then(function () {
+        confirm(message, globalize.translate('HeaderDeleteDevice')).then(function () {
             loading.show();
             ApiClient.ajax({
                 type: 'DELETE',
@@ -93,13 +103,13 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
 }
 
 function renderProviders(page, providers) {
-        var html = '';
+    let html = '';
 
     if (providers.length) {
         html += '<div class="paperList">';
 
-            for (var i = 0, length = providers.length; i < length; i++) {
+        for (let i = 0, length = providers.length; i < length; i++) {
-                var provider = providers[i];
+            const provider = providers[i];
             html += '<div class="listItem">';
             html += '<span class="listItemIcon material-icons dvr"></span>';
             html += '<div class="listItemBody two-line">';
@@ -119,15 +129,15 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
         html += '</div>';
     }
 
-        var elem = $('.providerList', page).html(html);
+    const elem = $('.providerList', page).html(html);
     $('.btnOptions', elem).on('click', function () {
-            var id = this.getAttribute('data-id');
+        const id = this.getAttribute('data-id');
         showProviderOptions(page, id, this);
     });
 }
 
 function showProviderOptions(page, providerId, button) {
-        var items = [];
+    const items = [];
     items.push({
         name: globalize.translate('ButtonDelete'),
         id: 'delete'
@@ -137,7 +147,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
         id: 'map'
     });
 
-        require(['actionsheet'], function (actionsheet) {
+    import('actionsheet').then(({default: actionsheet}) => {
         actionsheet.show({
             items: items,
             positionTo: button
@@ -155,8 +165,8 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
 }
 
 function mapChannels(page, providerId) {
-        require(['components/channelMapper/channelMapper'], function (channelMapper) {
+    import('components/channelMapper/channelMapper').then(({default: channelMapper}) => {
-            new channelMapper.default({
+        new channelMapper({
             serverId: ApiClient.serverInfo().Id,
             providerId: providerId
         }).show();
@@ -164,10 +174,10 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
 }
 
 function deleteProvider(page, id) {
-        var message = globalize.translate('MessageConfirmDeleteGuideProvider');
+    const message = globalize.translate('MessageConfirmDeleteGuideProvider');
 
-        require(['confirm'], function (confirm) {
+    import('confirm').then(({default: confirm}) => {
-            confirm.default(message, globalize.translate('HeaderDeleteProvider')).then(function () {
+        confirm(message, globalize.translate('HeaderDeleteProvider')).then(function () {
             loading.show();
             ApiClient.ajax({
                 type: 'DELETE',
@@ -219,7 +229,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
 }
 
 function addProvider(button) {
-        var menuItems = [];
+    const menuItems = [];
     menuItems.push({
         name: 'Schedules Direct',
         id: 'SchedulesDirect'
@@ -229,7 +239,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
         id: 'xmltv'
     });
 
-        require(['actionsheet'], function (actionsheet) {
+    import('actionsheet').then(({default: actionsheet}) => {
         actionsheet.show({
             items: menuItems,
             positionTo: button,
@@ -245,7 +255,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
 }
 
 function showDeviceMenu(button, tunerDeviceId) {
-        var items = [];
+    const items = [];
     items.push({
         name: globalize.translate('ButtonDelete'),
         id: 'delete'
@@ -255,7 +265,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
         id: 'edit'
     });
 
-        require(['actionsheet'], function (actionsheet) {
+    import('actionsheet').then(({default: actionsheet}) => {
         actionsheet.show({
             items: items,
             positionTo: button
@@ -273,11 +283,11 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
 }
 
 function onDevicesListClick(e) {
-        var card = dom.parentWithClass(e.target, 'card');
+    const card = dom.parentWithClass(e.target, 'card');
 
     if (card) {
-            var id = card.getAttribute('data-id');
+        const id = card.getAttribute('data-id');
-            var btnCardOptions = dom.parentWithClass(e.target, 'btnCardOptions');
+        const btnCardOptions = dom.parentWithClass(e.target, 'btnCardOptions');
 
         if (btnCardOptions) {
             showDeviceMenu(btnCardOptions, id);
@@ -287,8 +297,9 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
     }
 }
 
+export default function () {
     $(document).on('pageinit', '#liveTvStatusPage', function () {
-        var page = this;
+        const page = this;
         $('.btnAddDevice', page).on('click', function () {
             addDevice(this);
         });
@@ -301,21 +312,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')
         });
     });
-});
+}