Merge pull request #1778 from Camc314/migrate-to-ES6-66

Migration of logoScreenSaver and playAccessValidation to ES6 module

package.json

@@ -163,6 +163,8 @@
           "src/components/slideshow/slideshow.js",
           "src/components/sortmenu/sortmenu.js",
           "src/plugins/htmlVideoPlayer/plugin.js",
+          "src/plugins/logoScreensaver/plugin.js",
+          "src/plugins/playAccessValidation/plugin.js",
           "src/components/search/searchfields.js",
           "src/components/search/searchresults.js",
           "src/components/settingshelper.js",

src/plugins/logoScreensaver/plugin.js

@@ -1,16 +1,17 @@
-define(['pluginManager'], function (pluginManager) {
+import pluginManager from 'pluginManager';
-    return function () {
+
-        var self = this;
+export default function () {
+    const self = this;
 
     self.name = 'Logo ScreenSaver';
     self.type = 'screensaver';
     self.id = 'logoscreensaver';
     self.supportsAnonymous = true;
 
-        var interval;
+    let interval;
 
     function animate() {
-            var animations = [
+        const animations = [
 
             bounceInLeft,
             bounceInRight,
@@ -21,10 +22,10 @@ define(['pluginManager'], function (pluginManager) {
             rotateOut
         ];
 
-            var elem = document.querySelector('.logoScreenSaverImage');
+        const elem = document.querySelector('.logoScreenSaverImage');
 
         if (elem && elem.animate) {
-                var random = getRandomInt(0, animations.length - 1);
+            const random = getRandomInt(0, animations.length - 1);
 
             animations[random](elem, 1);
         }
@@ -35,41 +36,41 @@ define(['pluginManager'], function (pluginManager) {
     }
 
     function bounceInLeft(elem, iterations) {
-            var keyframes = [
+        const keyframes = [
             { transform: 'translate3d(-3000px, 0, 0)', opacity: '0', offset: 0 },
             { transform: 'translate3d(25px, 0, 0)', opacity: '1', offset: 0.6 },
             { transform: 'translate3d(-100px, 0, 0)', offset: 0.75 },
             { transform: 'translate3d(5px, 0, 0)', offset: 0.9 },
             { transform: 'none', opacity: '1', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
+        const timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
         return elem.animate(keyframes, timing);
     }
 
     function bounceInRight(elem, iterations) {
-            var keyframes = [
+        const keyframes = [
             { transform: 'translate3d(3000px, 0, 0)', opacity: '0', offset: 0 },
             { transform: 'translate3d(-25px, 0, 0)', opacity: '1', offset: 0.6 },
             { transform: 'translate3d(100px, 0, 0)', offset: 0.75 },
             { transform: 'translate3d(-5px, 0, 0)', offset: 0.9 },
             { transform: 'none', opacity: '1', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
+        const timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
         return elem.animate(keyframes, timing);
     }
 
     function swing(elem, iterations) {
-            var keyframes = [
+        const keyframes = [
             { transform: 'translate(0%)', offset: 0 },
             { transform: 'rotate3d(0, 0, 1, 15deg)', offset: 0.2 },
             { transform: 'rotate3d(0, 0, 1, -10deg)', offset: 0.4 },
             { transform: 'rotate3d(0, 0, 1, 5deg)', offset: 0.6 },
             { transform: 'rotate3d(0, 0, 1, -5deg)', offset: 0.8 },
             { transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
+        const timing = { duration: 900, iterations: iterations };
         return elem.animate(keyframes, timing);
     }
 
     function tada(elem, iterations) {
-            var keyframes = [
+        const keyframes = [
             { transform: 'scale3d(1, 1, 1)', offset: 0 },
             { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)', offset: 0.1 },
             { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)', offset: 0.2 },
@@ -81,41 +82,41 @@ define(['pluginManager'], function (pluginManager) {
             { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.8 },
             { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.9 },
             { transform: 'scale3d(1, 1, 1)', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
+        const timing = { duration: 900, iterations: iterations };
         return elem.animate(keyframes, timing);
     }
 
     function wobble(elem, iterations) {
-            var keyframes = [
+        const keyframes = [
             { transform: 'translate(0%)', offset: 0 },
             { transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)', offset: 0.15 },
             { transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)', offset: 0.45 },
             { transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)', offset: 0.6 },
             { transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)', offset: 0.75 },
             { transform: 'translateX(0%)', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
+        const timing = { duration: 900, iterations: iterations };
         return elem.animate(keyframes, timing);
     }
 
     function rotateIn(elem, iterations) {
-            var keyframes = [{ transform: 'rotate3d(0, 0, 1, -200deg)', opacity: '0', transformOrigin: 'center', offset: 0 },
+        const keyframes = [{ transform: 'rotate3d(0, 0, 1, -200deg)', opacity: '0', transformOrigin: 'center', offset: 0 },
             { transform: 'none', opacity: '1', transformOrigin: 'center', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
+        const timing = { duration: 900, iterations: iterations };
         return elem.animate(keyframes, timing);
     }
 
     function rotateOut(elem, iterations) {
-            var keyframes = [{ transform: 'none', opacity: '1', transformOrigin: 'center', offset: 0 },
+        const keyframes = [{ transform: 'none', opacity: '1', transformOrigin: 'center', offset: 0 },
             { transform: 'rotate3d(0, 0, 1, 200deg)', opacity: '0', transformOrigin: 'center', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
+        const timing = { duration: 900, iterations: iterations };
         return elem.animate(keyframes, timing);
     }
 
     function fadeOut(elem, iterations) {
-            var keyframes = [
+        const keyframes = [
             { opacity: '1', offset: 0 },
             { opacity: '0', offset: 1 }];
-            var timing = { duration: 400, iterations: iterations };
+        const timing = { duration: 400, iterations: iterations };
         return elem.animate(keyframes, timing);
     }
 
@@ -127,8 +128,8 @@ define(['pluginManager'], function (pluginManager) {
     }
 
     self.show = function () {
-            require(['css!' + pluginManager.mapPath(self, 'style.css')], function () {
+        import('css!' + pluginManager.mapPath(self, 'style.css')).then(() => {
-                var elem = document.querySelector('.logoScreenSaver');
+            let elem = document.querySelector('.logoScreenSaver');
 
             if (!elem) {
                 elem = document.createElement('div');
@@ -146,20 +147,19 @@ define(['pluginManager'], function (pluginManager) {
     self.hide = function () {
         stopInterval();
 
-            var elem = document.querySelector('.logoScreenSaver');
+        const elem = document.querySelector('.logoScreenSaver');
 
         if (elem) {
-                var onAnimationFinish = function () {
+            const onAnimationFinish = function () {
                 elem.parentNode.removeChild(elem);
             };
 
             if (elem.animate) {
-                    var animation = fadeOut(elem, 1);
+                const animation = fadeOut(elem, 1);
                 animation.onfinish = onAnimationFinish;
             } else {
                 onAnimationFinish();
             }
         }
     };
-    };
+}
-});

src/plugins/playAccessValidation/plugin.js

@@ -1,33 +1,26 @@
-define(['connectionManager', 'globalize'], function (connectionManager, globalize) {
+import connectionManager from 'connectionManager';
-    'use strict';
+import globalize from 'globalize';
 
-    function getRequirePromise(deps) {
+function showErrorMessage() {
-        return new Promise(function (resolve, reject) {
+    return import('alert').then(({default: alert}) => {
-            require(deps, resolve);
+        return alert(globalize.translate('MessagePlayAccessRestricted'));
     });
-    }
+}
 
-    function showErrorMessage() {
+class PlayAccessValidation {
-        return getRequirePromise(['alert']).then(function (alert) {
+    constructor() {
-            return alert(globalize.translate('MessagePlayAccessRestricted')).then(function () {
-                return Promise.reject();
-            });
-        });
-    }
-
-    function PlayAccessValidation() {
         this.name = 'Playback validation';
         this.type = 'preplayintercept';
         this.id = 'playaccessvalidation';
         this.order = -2;
     }
 
-    PlayAccessValidation.prototype.intercept = function (options) {
+    intercept(options) {
-        var item = options.item;
+        const item = options.item;
         if (!item) {
             return Promise.resolve();
         }
-        var serverId = item.ServerId;
+        const serverId = item.ServerId;
         if (!serverId) {
             return Promise.resolve();
         }
@@ -44,7 +37,7 @@ define(['connectionManager', 'globalize'], function (connectionManager, globaliz
 
             return showErrorMessage();
         });
-    };
+    }
+}
 
-    return PlayAccessValidation;
+export default PlayAccessValidation;
-});