src/widgets/DailymotionPlayer.js
changeset 1072 ac1eacb3aa33
parent 1068 7623f9af9272
--- a/src/widgets/DailymotionPlayer.js	Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/DailymotionPlayer.js	Wed Sep 04 17:32:50 2024 +0200
@@ -1,150 +1,182 @@
-IriSP.Widgets.DailymotionPlayer = function(player, config) {
-    IriSP.Widgets.Widget.call(this, player, config);
-};
-
-IriSP.Widgets.DailymotionPlayer.prototype = new IriSP.Widgets.Widget();
+// DailymotionPlayer
+import Mustache from "mustache";
 
-IriSP.Widgets.DailymotionPlayer.prototype.defaults = {
-    aspect_ratio: 14/9
-};
-
-IriSP.Widgets.DailymotionPlayer.prototype.draw = function() {
-
-    if (typeof this.video === "undefined") {
-        this.video = this.media.video;
+const DailymotionPlayer = function (ns) {
+  return class extends ns.Widgets.Widget {
+    constructor(player, config) {
+      super(player, config);
     }
 
-    this.height = this.height || Math.floor(this.width / this.aspect_ratio);
+    static defaults = {
+      aspect_ratio: 14 / 9,
+    };
 
-    var _media = this.media,
+    draw = function () {
+      if (typeof this.video === "undefined") {
+        this.video = this.media.video;
+      }
+
+      this.height = this.height || Math.floor(this.width / this.aspect_ratio);
+
+      var _media = this.media,
         videoid = null,
         _this = this,
         state = {
-            pause: true,
-            apiready: false,
-            volume: 0,
-            time: 0,
-            duration: 0
+          pause: true,
+          apiready: false,
+          volume: 0,
+          time: 0,
+          duration: 0,
         };
 
-    var m = this.video.match(/www.dailymotion.com\/video\/(.+)/);
-    if (m) {
+      var m = this.video.match(/www.dailymotion.com\/video\/(.+)/);
+      if (m) {
         videoid = m[1];
-    }
+      }
+
+      var player_url = Mustache.render(
+        "{{ protocol }}//www.dailymotion.com/embed/video/{{ videoid }}",
+        {
+          protocol:
+            document.location.protocol.search("http") == 0
+              ? document.location.protocol
+              : "http:",
+          videoid: videoid,
+        }
+      );
+      var params = {
+        api: "postMessage",
+        chromeless: 1,
+        id: "dm_player",
+        related: 0,
+        autoplay: 1,
+      };
 
-    var player_url = Mustache.to_html('{{ protocol }}//www.dailymotion.com/embed/video/{{ videoid }}', {
-        protocol: document.location.protocol.search('http') == 0 ? document.location.protocol : 'http:',
-        videoid: videoid
-    });
-    var params = {
-        'api': 'postMessage',
-        'chromeless': 1,
-        'id': 'dm_player',
-        'related': 0,
-        'autoplay': 1
-    };
+      _this.$.html(
+        Mustache.render(
+          '<iframe id="{{ id }}" src="{{ player_url }}?{{ params }}" width="{{ width }}" height="{{ height }}" frameborder="0"></iframe>',
+          {
+            player_url: player_url,
+            params: Object.keys(params)
+              .reduce(function (a, k) {
+                a.push(k + "=" + encodeURIComponent(params[k]));
+                return a;
+              }, [])
+              .join("&"),
+            width: this.width,
+            height: this.height,
+            id: params.id,
+          }
+        )
+      );
 
-    _this.$.html(Mustache.to_html('<iframe id="{{ id }}" src="{{ player_url }}?{{ params }}" width="{{ width }}" height="{{ height }}" frameborder="0"></iframe>', {
-        player_url: player_url,
-        params: Object.keys(params).reduce(function(a,k){a.push(k+'='+encodeURIComponent(params[k]));return a;},[]).join('&'),
-        width: this.width,
-        height: this.height,
-        id: params.id
-    }));
-
-    function setup_media_methods () {
+      function setup_media_methods() {
         var dest = _this.$.find("#" + params.id)[0].contentWindow;
-        var execute = function(c, v) {
-            if (v !== undefined)
-                c = c + "=" + v;
-            dest.postMessage(c, "*");
+        var execute = function (c, v) {
+          if (v !== undefined) c = c + "=" + v;
+          dest.postMessage(c, "*");
         };
 
-        _media.getCurrentTime = function() {
-            return state.time;
+        _media.getCurrentTime = function () {
+          return state.time;
         };
-        _media.getVolume = function() {
-            return state.volume;
+        _media.getVolume = function () {
+          return state.volume;
         };
-        _media.getPaused = function() {
-            return state.pause;
+        _media.getPaused = function () {
+          return state.pause;
         };
-        _media.getMuted = function() {
-            return state.muted;
+        _media.getMuted = function () {
+          return state.muted;
+        };
+        _media.setCurrentTime = function (_milliseconds) {
+          execute("seek", _milliseconds / 1000);
         };
-        _media.setCurrentTime = function(_milliseconds) {
-            execute("seek", _milliseconds / 1000);
+        _media.setVolume = function (_vol) {
+          execute("volume", _vol * 100);
         };
-        _media.setVolume = function(_vol) {
-            execute("volume", _vol * 100);
+        _media.mute = function () {
+          execute("muted", 1);
         };
-        _media.mute = function() {
-            execute("muted", 1);
+        _media.unmute = function () {
+          execute("muted", 0);
         };
-        _media.unmute = function() {
-            execute("muted", 0);
+        _media.play = function () {
+          execute("play");
+        };
+        _media.pause = function () {
+          execute("pause");
         };
-        _media.play = function() {
-            execute("play");
-        };
-        _media.pause = function() {
-            execute("pause");
-        };
-    };
+      }
 
-    window.addEventListener("message", function (event) {
-        // Parse event.data (query-string for to object)
+      window.addEventListener(
+        "message",
+        function (event) {
+          // Parse event.data (query-string for to object)
+
+          // Duck-checking if event.data is a string
+          if (event.data.split === undefined) return;
 
-        // Duck-checking if event.data is a string
-        if (event.data.split === undefined)
-            return;
-
-        var info = event.data.split("&").map( function(s) { return s.split("="); }).reduce( function(o, v) { o[v[0]] = decodeURIComponent(v[1]); return o; }, {});
+          var info = event.data
+            .split("&")
+            .map(function (s) {
+              return s.split("=");
+            })
+            .reduce(function (o, v) {
+              o[v[0]] = decodeURIComponent(v[1]);
+              return o;
+            }, {});
 
-        switch (info.event) {
-        case "apiready":
-            state.apiready = true;
-            setup_media_methods();
-            break;
-        //case "canplay":
-        //    break;
-        case "durationchange":
-            if (info.duration.slice(-2) == "sc") {
+          switch (info.event) {
+            case "apiready":
+              state.apiready = true;
+              setup_media_methods();
+              break;
+            //case "canplay":
+            //    break;
+            case "durationchange":
+              if (info.duration.slice(-2) == "sc") {
                 state.duration = 1000 * Number(info.duration.slice(0, -2));
                 _media.setDuration(state.duration);
-            }
-            break;
-        case "ended":
-            state.pause = true;
-            break;
-        case "loadedmetadata":
-            _media.trigger("loadedmetadata");
-            break;
-        case "pause":
-            state.pause = true;
-            _media.trigger("pause");
-            break;
-        case "play":
-            state.pause = false;
-            _media.trigger("play");
-            break;
+              }
+              break;
+            case "ended":
+              state.pause = true;
+              break;
+            case "loadedmetadata":
+              _media.trigger("loadedmetadata");
+              break;
+            case "pause":
+              state.pause = true;
+              _media.trigger("pause");
+              break;
+            case "play":
+              state.pause = false;
+              _media.trigger("play");
+              break;
             //case "playing":
             //    break;
             //case "progress":
             //  Loading progress
             //    break;
-        case "seeked":
-            state.time = new IriSP.Model.Time(1000 * Number(info.time));
-            _media.trigger("seeked");            
-            break;
-        case "timeupdate":
-            state.time = new IriSP.Model.Time(1000 * Number(info.time));
-            _media.trigger("timeupdate", state.time);
-            break;
-        case "volumechange":
-            state.muted = (info.muted == "true");
-            state.volume = Number(info.volume) / 100;
-            break;
-        }
-    }, false);
+            case "seeked":
+              state.time = new ns.Model.Time(1000 * Number(info.time));
+              _media.trigger("seeked");
+              break;
+            case "timeupdate":
+              state.time = new ns.Model.Time(1000 * Number(info.time));
+              _media.trigger("timeupdate", state.time);
+              break;
+            case "volumechange":
+              state.muted = info.muted == "true";
+              state.volume = Number(info.volume) / 100;
+              break;
+          }
+        },
+        false
+      );
+    };
+  };
 };
+
+export { DailymotionPlayer };