Merge pull request #1780 from Camc314/migrate-to-ES6-70

Migration of tunerPicker and userdatabuttons to ES6 modules

package.json

@@ -194,7 +194,9 @@
           "src/components/tvproviders/schedulesdirect.js",
           "src/components/tvproviders/xmltv.js",
           "src/components/toast/toast.js",
+          "src/components/tunerPicker.js",
           "src/components/upnextdialog/upnextdialog.js",
+          "src/components/userdatabuttons/userdatabuttons.js",
           "src/components/viewContainer.js",
           "src/components/viewSettings/viewSettings.js",
           "src/components/castSenderApi.js",

src/components/tunerPicker.js

@@ -1,16 +1,22 @@
-define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize', 'loading', 'browser', 'focusManager', 'scrollHelper', 'material-icons', 'formDialogStyle', 'emby-button', 'emby-itemscontainer', 'cardStyle'], function (dialogHelper, dom, layoutManager, connectionManager, globalize, loading, browser, focusManager, scrollHelper) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import dom from 'dom';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
+import loading from 'loading';
+import browser from 'browser';
+import focusManager from 'focusManager';
+import scrollHelper from 'scrollHelper';
+import 'material-icons';
+import 'formDialogStyle';
+import 'emby-button';
+import 'emby-itemscontainer';
+import 'cardStyle';
 
-    browser = browser.default || browser;
+const enableFocusTransform = !browser.slow && !browser.edge;
-    loading = loading.default || loading;
-    layoutManager = layoutManager.default || layoutManager;
-    focusManager = focusManager.default || focusManager;
-    scrollHelper = scrollHelper.default || scrollHelper;
 
-    var enableFocusTransform = !browser.slow && !browser.edge;
+function getEditorHtml() {
-
+    let html = '';
-    function getEditorHtml() {
-        var html = '';
     html += '<div class="formDialogContent scrollY">';
     html += '<div class="dialogContentInner dialog-content-centered">';
     html += '<div class="loadingContent hide">';
@@ -22,15 +28,13 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
     html += '</div>';
     html += '</div>';
     return html += '</div>';
-    }
+}
 
-    function getDeviceHtml(device) {
+function getDeviceHtml(device) {
-        var padderClass;
+    let html = '';
-        var html = '';
+    let cssClass = 'card scalableCard backdropCard backdropCard-scalable';
-        var cssClass = 'card scalableCard';
+    const cardBoxCssClass = 'cardBox visualCardBox';
-        var cardBoxCssClass = 'cardBox visualCardBox';
+    const padderClass = 'cardPadder-backdrop';
-        cssClass += ' backdropCard backdropCard-scalable';
-        padderClass = 'cardPadder-backdrop';
 
     // TODO move card creation code to Card component
 
@@ -59,9 +63,9 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
     html += '</div>';
     html += '</div>';
     return html += '</button>';
-    }
+}
 
-    function getTunerName(providerId) {
+function getTunerName(providerId) {
     switch (providerId = providerId.toLowerCase()) {
         case 'm3u':
             return 'M3U';
@@ -78,14 +82,12 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
         default:
             return 'Unknown';
     }
-    }
+}
 
-    function renderDevices(view, devices) {
+function renderDevices(view, devices) {
-        var i;
+    let html = '';
-        var length;
-        var html = '';
 
-        for (i = 0, length = devices.length; i < length; i++) {
+    for (let i = 0, length = devices.length; i < length; i++) {
         html += getDeviceHtml(devices[i]);
     }
 
@@ -96,15 +98,15 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
         view.querySelector('.devicesHeader').classList.add('hide');
     }
 
-        var elem = view.querySelector('.results');
+    const elem = view.querySelector('.results');
     elem.innerHTML = html;
 
     if (layoutManager.tv) {
         focusManager.autoFocus(elem);
     }
-    }
+}
 
-    function discoverDevices(view, apiClient) {
+function discoverDevices(view, apiClient) {
     loading.show();
     view.querySelector('.loadingContent').classList.remove('hide');
     return ApiClient.getJSON(ApiClient.getUrl('LiveTv/Tuners/Discvover', {
@@ -115,11 +117,11 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
         view.querySelector('.loadingContent').classList.add('hide');
         loading.hide();
     });
-    }
+}
 
-    function tunerPicker() {
+function tunerPicker() {
     this.show = function (options) {
-            var dialogOptions = {
+        const dialogOptions = {
             removeOnClose: true,
             scrollY: false
         };
@@ -130,9 +132,9 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
             dialogOptions.size = 'small';
         }
 
-            var dlg = dialogHelper.createDialog(dialogOptions);
+        const dlg = dialogHelper.createDialog(dialogOptions);
         dlg.classList.add('formDialog');
-            var html = '';
+        let html = '';
         html += '<div class="formDialogHeader">';
         html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
         html += '<h3 class="formDialogHeaderTitle">';
@@ -144,12 +146,12 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
         dlg.querySelector('.btnCancel').addEventListener('click', function () {
             dialogHelper.close(dlg);
         });
-            var deviceResult;
+        let deviceResult;
         dlg.querySelector('.results').addEventListener('click', function (e) {
-                var tunerCard = dom.parentWithClass(e.target, 'card');
+            const tunerCard = dom.parentWithClass(e.target, 'card');
 
             if (tunerCard) {
-                    var deviceId = tunerCard.getAttribute('data-id');
+                const deviceId = tunerCard.getAttribute('data-id');
                 deviceResult = currentDevices.filter(function (d) {
                     return d.DeviceId === deviceId;
                 })[0];
@@ -161,7 +163,7 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
             scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
         }
 
-            var apiClient = connectionManager.getApiClient(options.serverId);
+        const apiClient = connectionManager.getApiClient(options.serverId);
         discoverDevices(dlg, apiClient);
 
         if (layoutManager.tv) {
@@ -176,8 +178,8 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
             return Promise.reject();
         });
     };
-    }
+}
 
-    var currentDevices = [];
+let currentDevices = [];
-    return tunerPicker;
+
-});
+export default tunerPicker;

src/components/userdatabuttons/userdatabuttons.js

@@ -1,21 +1,27 @@
-define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-button-light', 'material-icons', 'emby-button', 'css!./userdatabuttons'], function (connectionManager, globalize, dom, itemHelper) {
+import connectionManager from 'connectionManager';
-    'use strict';
+import globalize from 'globalize';
+import dom from 'dom';
+import itemHelper from 'itemHelper';
+import 'paper-icon-button-light';
+import 'material-icons';
+import 'emby-button';
+import 'css!./userdatabuttons';
 
-    var userDataMethods = {
+const userDataMethods = {
     markPlayed: markPlayed,
     markDislike: markDislike,
     markLike: markLike,
     markFavorite: markFavorite
-    };
+};
 
-    function getUserDataButtonHtml(method, itemId, serverId, buttonCssClass, iconCssClass, icon, tooltip, style) {
+function getUserDataButtonHtml(method, itemId, serverId, buttonCssClass, iconCssClass, icon, tooltip, style) {
     if (style === 'fab-mini') {
         style = 'fab';
         buttonCssClass = buttonCssClass ? (buttonCssClass + ' mini') : 'mini';
     }
 
-        var is = style === 'fab' ? 'emby-button' : 'paper-icon-button-light';
+    const is = style === 'fab' ? 'emby-button' : 'paper-icon-button-light';
-        var className = style === 'fab' ? 'autoSize fab' : 'autoSize';
+    let className = style === 'fab' ? 'autoSize fab' : 'autoSize';
 
     if (buttonCssClass) {
         className += ' ' + buttonCssClass;
@@ -30,21 +36,21 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
     iconCssClass += 'material-icons';
 
     return '<button title="' + tooltip + '" data-itemid="' + itemId + '" data-serverid="' + serverId + '" is="' + is + '" data-method="' + method + '" class="' + className + '"><span class="' + iconCssClass + ' ' + icon + '"></span></button>';
-    }
+}
 
-    function onContainerClick(e) {
+function onContainerClick(e) {
-        var btnUserData = dom.parentWithClass(e.target, 'btnUserData');
+    const btnUserData = dom.parentWithClass(e.target, 'btnUserData');
 
     if (!btnUserData) {
         return;
     }
 
-        var method = btnUserData.getAttribute('data-method');
+    const method = btnUserData.getAttribute('data-method');
     userDataMethods[method](btnUserData);
-    }
+}
 
-    function fill(options) {
+function fill(options) {
-        var html = getIconsHtml(options);
+    const html = getIconsHtml(options);
 
     if (options.fillMode === 'insertAdjacent') {
         options.element.insertAdjacentHTML(options.insertLocation || 'beforeend', html);
@@ -59,44 +65,44 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
     dom.addEventListener(options.element, 'click', onContainerClick, {
         passive: true
     });
-    }
+}
 
-    function destroy(options) {
+function destroy(options) {
     options.element.innerHTML = '';
 
     dom.removeEventListener(options.element, 'click', onContainerClick, {
         passive: true
     });
-    }
+}
 
-    function getIconsHtml(options) {
+function getIconsHtml(options) {
-        var item = options.item;
+    const item = options.item;
-        var includePlayed = options.includePlayed;
+    const includePlayed = options.includePlayed;
-        var cssClass = options.cssClass;
+    const cssClass = options.cssClass;
-        var style = options.style;
+    const style = options.style;
 
-        var html = '';
+    let html = '';
 
-        var userData = item.UserData || {};
+    const userData = item.UserData || {};
 
-        var itemId = item.Id;
+    const itemId = item.Id;
 
     if (itemHelper.isLocalItem(item)) {
         return html;
     }
 
-        var btnCssClass = 'btnUserData';
+    let btnCssClass = 'btnUserData';
 
     if (cssClass) {
         btnCssClass += ' ' + cssClass;
     }
 
-        var iconCssClass = options.iconCssClass;
+    const iconCssClass = options.iconCssClass;
 
-        var serverId = item.ServerId;
+    const serverId = item.ServerId;
 
     if (includePlayed !== false) {
-            var tooltipPlayed = globalize.translate('MarkPlayed');
+        const tooltipPlayed = globalize.translate('MarkPlayed');
 
         if (itemHelper.canMarkPlayed(item)) {
             if (userData.Played) {
@@ -107,7 +113,7 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
         }
     }
 
-        var tooltipFavorite = globalize.translate('Favorite');
+    const tooltipFavorite = globalize.translate('Favorite');
     if (userData.IsFavorite) {
         html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData btnUserDataOn', iconCssClass, 'favorite', tooltipFavorite, style);
     } else {
@@ -115,13 +121,13 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
     }
 
     return html;
-    }
+}
 
-    function markFavorite(link) {
+function markFavorite(link) {
-        var id = link.getAttribute('data-itemid');
+    const id = link.getAttribute('data-itemid');
-        var serverId = link.getAttribute('data-serverid');
+    const serverId = link.getAttribute('data-serverid');
 
-        var markAsFavorite = !link.classList.contains('btnUserDataOn');
+    const markAsFavorite = !link.classList.contains('btnUserDataOn');
 
     favorite(id, serverId, markAsFavorite);
 
@@ -130,11 +136,11 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
     } else {
         link.classList.remove('btnUserDataOn');
     }
-    }
+}
 
-    function markLike(link) {
+function markLike(link) {
-        var id = link.getAttribute('data-itemid');
+    const id = link.getAttribute('data-itemid');
-        var serverId = link.getAttribute('data-serverid');
+    const serverId = link.getAttribute('data-serverid');
 
     if (!link.classList.contains('btnUserDataOn')) {
         likes(id, serverId, true);
@@ -147,11 +153,11 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
     }
 
     link.parentNode.querySelector('.btnDislike').classList.remove('btnUserDataOn');
-    }
+}
 
-    function markDislike(link) {
+function markDislike(link) {
-        var id = link.getAttribute('data-itemid');
+    const id = link.getAttribute('data-itemid');
-        var serverId = link.getAttribute('data-serverid');
+    const serverId = link.getAttribute('data-serverid');
 
     if (!link.classList.contains('btnUserDataOn')) {
         likes(id, serverId, false);
@@ -164,11 +170,11 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
     }
 
     link.parentNode.querySelector('.btnLike').classList.remove('btnUserDataOn');
-    }
+}
 
-    function markPlayed(link) {
+function markPlayed(link) {
-        var id = link.getAttribute('data-itemid');
+    const id = link.getAttribute('data-itemid');
-        var serverId = link.getAttribute('data-serverid');
+    const serverId = link.getAttribute('data-serverid');
 
     if (!link.classList.contains('btnUserDataOn')) {
         played(id, serverId, true);
@@ -179,36 +185,35 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
 
         link.classList.remove('btnUserDataOn');
     }
-    }
+}
 
-    function likes(id, serverId, isLiked) {
+function likes(id, serverId, isLiked) {
-        var apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = connectionManager.getApiClient(serverId);
     return apiClient.updateUserItemRating(apiClient.getCurrentUserId(), id, isLiked);
-    }
+}
 
-    function played(id, serverId, isPlayed) {
+function played(id, serverId, isPlayed) {
-        var apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = connectionManager.getApiClient(serverId);
 
-        var method = isPlayed ? 'markPlayed' : 'markUnplayed';
+    const method = isPlayed ? 'markPlayed' : 'markUnplayed';
 
     return apiClient[method](apiClient.getCurrentUserId(), id, new Date());
-    }
+}
 
-    function favorite(id, serverId, isFavorite) {
+function favorite(id, serverId, isFavorite) {
-        var apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = connectionManager.getApiClient(serverId);
 
     return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), id, isFavorite);
-    }
+}
 
-    function clearLike(id, serverId) {
+function clearLike(id, serverId) {
-        var apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = connectionManager.getApiClient(serverId);
 
     return apiClient.clearUserItemRating(apiClient.getCurrentUserId(), id);
-    }
+}
 
-    return {
+export default {
     fill: fill,
     destroy: destroy,
     getIconsHtml: getIconsHtml
-    };
+};
-});