migrate emby-progressbar, itemrefreshindicator, progressring and slider to ES6 modules

package.json

@@ -132,6 +132,10 @@
           "src/controllers/dashboard/logs.js",
           "src/controllers/user/subtitles.js",
           "src/controllers/dashboard/plugins/repositories.js",
+          "src/elements/emby-progressbar/emby-progressbar.js",
+          "src/elements/emby-progressring/emby-progressring.js",
+          "src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js",
+          "src/elements/emby-slider/emby-slider.js",
           "src/plugins/bookPlayer/plugin.js",
           "src/plugins/bookPlayer/tableOfContents.js",
           "src/plugins/photoPlayer/plugin.js",

src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js

@@ -1,16 +1,21 @@
-define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerElement'], function (EmbyProgressRing, dom, serverNotifications, events) {
+import EmbyProgressRing from 'emby-progressring';
-    'use strict';
+import dom from 'dom';
+import serverNotifications from 'serverNotifications';
+import events from 'events';
+import 'registerElement';
+
+/* eslint-disable indent */
 
     function addNotificationEvent(instance, name, handler) {
 
-        var localHandler = handler.bind(instance);
+        const localHandler = handler.bind(instance);
         events.on(serverNotifications, name, localHandler);
         instance[name] = localHandler;
     }
 
     function removeNotificationEvent(instance, name) {
 
-        var handler = instance[name];
+        const handler = instance[name];
         if (handler) {
             events.off(serverNotifications, name, handler);
             instance[name] = null;
@@ -19,7 +24,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
 
     function onRefreshProgress(e, apiClient, info) {
 
-        var indicator = this;
+        const indicator = this;
 
         if (!indicator.itemId) {
             indicator.itemId = dom.parentWithAttribute(indicator, 'data-id').getAttribute('data-id');
@@ -27,7 +32,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
 
         if (info.ItemId === indicator.itemId) {
 
-            var progress = parseFloat(info.Progress);
+            const progress = parseFloat(info.Progress);
 
             if (progress && progress < 100) {
                 this.classList.remove('hide');
@@ -39,7 +44,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
         }
     }
 
-    var EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing);
+    let EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing);
 
     EmbyItemRefreshIndicatorPrototype.createdCallback = function () {
 
@@ -74,4 +79,5 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
         prototype: EmbyItemRefreshIndicatorPrototype,
         extends: 'div'
     });
-});
+
+/* eslint-enable indent */

src/elements/emby-progressbar/emby-progressbar.js

@@ -1,20 +1,19 @@
-define([], function() {
+/* eslint-disable indent */
-    'use strict';
 
-    var ProgressBarPrototype = Object.create(HTMLDivElement.prototype);
+    let ProgressBarPrototype = Object.create(HTMLDivElement.prototype);
 
     function onAutoTimeProgress() {
-        var start = parseInt(this.getAttribute('data-starttime'));
+        const start = parseInt(this.getAttribute('data-starttime'));
-        var end = parseInt(this.getAttribute('data-endtime'));
+        const end = parseInt(this.getAttribute('data-endtime'));
 
-        var now = new Date().getTime();
+        const now = new Date().getTime();
-        var total = end - start;
+        const total = end - start;
-        var pct = 100 * ((now - start) / total);
+        let pct = 100 * ((now - start) / total);
 
         pct = Math.min(100, pct);
         pct = Math.max(0, pct);
 
-        var itemProgressBarForeground = this.querySelector('.itemProgressBarForeground');
+        const itemProgressBarForeground = this.querySelector('.itemProgressBarForeground');
         itemProgressBarForeground.style.width = pct + '%';
     }
 
@@ -39,4 +38,5 @@ define([], function() {
         prototype: ProgressBarPrototype,
         extends: 'div'
     });
-});
+
+/* eslint-enable indent */

src/elements/emby-progressring/emby-progressring.js

@@ -1,12 +1,15 @@
-define(['require', 'css!./emby-progressring', 'registerElement'], function (require) {
+import require from 'require';
-    'use strict';
+import 'css!./emby-progressring';
+import 'webcomponents';
 
-    var EmbyProgressRing = Object.create(HTMLDivElement.prototype);
+/* eslint-disable indent */
+
+    let EmbyProgressRing = Object.create(HTMLDivElement.prototype);
 
     EmbyProgressRing.createdCallback = function () {
 
         this.classList.add('progressring');
-        var instance = this;
+        const instance = this;
 
         require(['text!./emby-progressring.template.html'], function (template) {
             instance.innerHTML = template;
@@ -37,7 +40,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
 
         progress = Math.floor(progress);
 
-        var angle;
+        let angle;
 
         if (progress < 25) {
             angle = -90 + (progress / 100) * 360;
@@ -82,7 +85,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
 
     EmbyProgressRing.detachedCallback = function () {
 
-        var observer = this.observer;
+        let observer = this.observer;
 
         if (observer) {
             // later, you can stop observing
@@ -97,5 +100,6 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
         extends: 'div'
     });
 
-    return EmbyProgressRing;
+    export default EmbyProgressRing;
-});
+
+/* eslint-enable indent */

src/elements/emby-slider/emby-slider.js

@@ -1,15 +1,22 @@
-define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager, keyboardnavigation) {
+import browser from 'browser';
-    'use strict';
+import dom from 'dom';
+import layoutManager from 'layoutManager';
+import keyboardnavigation from 'keyboardnavigation';
+import 'css!./emby-slider';
+import 'webcomponents';
+import 'emby-input';
 
-    var EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
+/* eslint-disable indent */
 
-    var supportsValueSetOverride = false;
+    let EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
 
-    var enableWidthWithTransform;
+    let supportsValueSetOverride = false;
+
+    let enableWidthWithTransform;
 
     if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
 
-        var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+        const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
         // descriptor returning null in webos
         if (descriptor && descriptor.configurable) {
             supportsValueSetOverride = true;
@@ -24,14 +31,14 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
      * @return {number} slider fraction
      */
     function mapClientToFraction(range, clientX) {
-        var rect = range.sliderBubbleTrack.getBoundingClientRect();
+        const rect = range.sliderBubbleTrack.getBoundingClientRect();
 
-        var fraction = (clientX - rect.left) / rect.width;
+        let fraction = (clientX - rect.left) / rect.width;
 
         // Snap to step
-        var valueRange = range.max - range.min;
+        const valueRange = range.max - range.min;
         if (range.step !== 'any' && valueRange !== 0) {
-            var step = (range.step || 1) / valueRange;
+            const step = (range.step || 1) / valueRange;
             fraction = Math.round(fraction / step) * step;
         }
 
@@ -46,7 +53,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
      * @return {number} slider value
      */
     function mapFractionToValue(range, fraction) {
-        var value = (range.max - range.min) * fraction;
+        let value = (range.max - range.min) * fraction;
 
         // Snap to step
         if (range.step !== 'any') {
@@ -67,8 +74,8 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
      * @return {number} slider fraction
      */
     function mapValueToFraction(range, value) {
-        var valueRange = range.max - range.min;
+        const valueRange = range.max - range.min;
-        var fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0;
+        const fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0;
         return Math.min(Math.max(fraction, 0), 1);
     }
 
@@ -84,18 +91,18 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             return;
         }
 
-        var range = this;
+        const range = this;
-        var value = range.value;
+        const value = range.value;
 
         // put this on a callback. Doing it within the event sometimes causes the slider to get hung up and not respond
         // Keep only one per slider frame request
         cancelAnimationFrame(range.updateValuesFrame);
         range.updateValuesFrame = requestAnimationFrame(function () {
 
-            var backgroundLower = range.backgroundLower;
+            let backgroundLower = range.backgroundLower;
 
             if (backgroundLower) {
-                var fraction = (value - range.min) / (range.max - range.min);
+                let fraction = (value - range.min) / (range.max - range.min);
 
                 if (enableWidthWithTransform) {
                     backgroundLower.style.transform = 'scaleX(' + (fraction) + ')';
@@ -110,10 +117,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
     function updateBubble(range, value, bubble, bubbleText) {
 
         requestAnimationFrame(function () {
-            var bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect();
+            const bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect();
-            var bubbleRect = bubble.getBoundingClientRect();
+            const bubbleRect = bubble.getBoundingClientRect();
 
-            var bubblePos = bubbleTrackRect.width * value / 100;
+            let bubblePos = bubbleTrackRect.width * value / 100;
             bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2);
 
             bubble.style.left = bubblePos + 'px';
@@ -158,10 +165,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             this.classList.add('show-focus');
         }
 
-        var containerElement = this.parentNode;
+        const containerElement = this.parentNode;
         containerElement.classList.add('mdl-slider-container');
 
-        var htmlToInsert = '';
+        let htmlToInsert = '';
 
         htmlToInsert += '<div class="mdl-slider-background-flex-container">';
         htmlToInsert += '<div class="mdl-slider-background-flex">';
@@ -187,9 +194,9 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         this.sliderBubbleTrack = containerElement.querySelector('.sliderBubbleTrack');
         this.backgroundLower = containerElement.querySelector('.mdl-slider-background-lower');
         this.backgroundUpper = containerElement.querySelector('.mdl-slider-background-upper');
-        var sliderBubble = containerElement.querySelector('.sliderBubble');
+        const sliderBubble = containerElement.querySelector('.sliderBubble');
 
-        var hasHideClass = sliderBubble.classList.contains('hide');
+        let hasHideClass = sliderBubble.classList.contains('hide');
 
         dom.addEventListener(this, 'input', function (e) {
             this.dragging = true;
@@ -198,7 +205,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
                 updateValues.call(this);
             }
 
-            var bubbleValue = mapValueToFraction(this, this.value) * 100;
+            const bubbleValue = mapValueToFraction(this, this.value) * 100;
             updateBubble(this, bubbleValue, sliderBubble);
 
             if (hasHideClass) {
@@ -223,10 +230,11 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             passive: true
         });
 
+        /* eslint-disable-next-line compat/compat */
         dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) {
 
             if (!this.dragging) {
-                var bubbleValue = mapClientToFraction(this, e.clientX) * 100;
+                const bubbleValue = mapClientToFraction(this, e.clientX) * 100;
 
                 updateBubble(this, bubbleValue, sliderBubble);
 
@@ -240,6 +248,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             passive: true
         });
 
+        /* eslint-disable-next-line compat/compat */
         dom.addEventListener(this, (window.PointerEvent ? 'pointerleave' : 'mouseleave'), function () {
             sliderBubble.classList.add('hide');
             hasHideClass = true;
@@ -256,7 +265,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
                 this.touched = true;
 
-                var fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
+                const fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
                 this.value = mapFractionToValue(this, fraction);
 
                 this.dispatchEvent(new Event('input', {
@@ -276,7 +285,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
                     return;
                 }
 
-                var fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
+                const fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
                 this.value = mapFractionToValue(this, fraction);
 
                 this.dispatchEvent(new Event('input', {
@@ -288,7 +297,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             });
 
             dom.addEventListener(this, 'touchend', function (e) {
-                var range = this;
+                const range = this;
 
                 setTimeout(function () {
                     range.touched = false;
@@ -314,12 +323,12 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
      * Keyboard dragging timeout.
      * After this delay "change" event will be fired.
      */
-    var KeyboardDraggingTimeout = 1000;
+    const KeyboardDraggingTimeout = 1000;
 
     /**
      * Keyboard dragging timer.
      */
-    var keyboardDraggingTimer;
+    let keyboardDraggingTimer;
 
     /**
      * Start keyboard dragging.
@@ -346,7 +355,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
         elem.keyboardDragging = false;
 
-        var event = new Event('change', {
+        const event = new Event('change', {
             bubbles: true,
             cancelable: false
         });
@@ -364,7 +373,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
         elem.value = Math.max(elem.min, Math.min(elem.max, parseFloat(elem.value) + delta));
 
-        var event = new Event('input', {
+        const event = new Event('input', {
             bubbles: true,
             cancelable: false
         });
@@ -414,10 +423,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
     function setRange(elem, startPercent, endPercent) {
 
-        var style = elem.style;
+        const style = elem.style;
         style.left = Math.max(startPercent, 0) + '%';
 
-        var widthPercent = endPercent - startPercent;
+        const widthPercent = endPercent - startPercent;
         style.width = Math.max(Math.min(widthPercent, 100), 0) + '%';
     }
 
@@ -438,7 +447,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
     EmbySliderPrototype.setBufferedRanges = function (ranges, runtime, position) {
 
-        var elem = this.backgroundUpper;
+        const elem = this.backgroundUpper;
         if (!elem) {
             return;
         }
@@ -449,9 +458,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             position = (position / runtime) * 100;
         }
 
-        for (var i = 0, length = ranges.length; i < length; i++) {
+        for (const range in ranges) {
-
-            var range = ranges[i];
 
             if (position != null) {
                 if (position >= range.end) {
@@ -468,7 +475,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
     EmbySliderPrototype.setIsClear = function (isClear) {
 
-        var backgroundLower = this.backgroundLower;
+        const backgroundLower = this.backgroundLower;
         if (backgroundLower) {
             if (isClear) {
                 backgroundLower.classList.add('mdl-slider-background-lower-clear');
@@ -479,7 +486,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
     };
 
     function startInterval(range) {
-        var interval = range.interval;
+        const interval = range.interval;
         if (interval) {
             clearInterval(interval);
         }
@@ -488,7 +495,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
     EmbySliderPrototype.detachedCallback = function () {
 
-        var interval = this.interval;
+        const interval = this.interval;
         if (interval) {
             clearInterval(interval);
         }
@@ -501,4 +508,5 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         prototype: EmbySliderPrototype,
         extends: 'input'
     });
-});
+
+/* eslint-enable indent */