diff -r 02c04d2c8fd8 -r ac1eacb3aa33 src/widgets/HtmlMashupPlayer.js
--- a/src/widgets/HtmlMashupPlayer.js	Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/HtmlMashupPlayer.js	Wed Sep 04 17:32:50 2024 +0200
@@ -1,42 +1,42 @@
-IriSP.Widgets.HtmlMashupPlayer = function(player, config) {
-    IriSP.Widgets.Widget.call(this, player, config);
-};
+//HtmlMashupPlayer
 
-IriSP.Widgets.HtmlMashupPlayer.prototype = new IriSP.Widgets.Widget();
-
+const HtmlMashupPlayer = function (ns) {
+  return class extends ns.Widgets.Widget {
+    constructor(player, config) {
+      super(player, config);
+    }
 
-IriSP.Widgets.HtmlMashupPlayer.prototype.defaults = {
-    aspect_ratio: 14/9,
-    background: "#333333"
-};
+    static defaults = {
+      aspect_ratio: 14 / 9,
+      background: "#333333",
+    };
 
-IriSP.Widgets.HtmlMashupPlayer.prototype.draw = function() {
-    
-    if (!this.height && this.aspect_ratio) {
+    draw() {
+      if (!this.height && this.aspect_ratio) {
         this.height = this.width / this.aspect_ratio;
         this.$.css("height", this.height);
-    }
-    
-    if (this.background) {
+      }
+
+      if (this.background) {
         this.$.css("background", this.background);
-    }
-    
-    var mashup = this.media,
+      }
+
+      var mashup = this.media,
         sel = this.$,
         width = this.width,
         height = this.height,
         url_transform = this.url_transform;
-    
-    mashup.currentMedia = null;
-    mashup.currentAnnotation = null;
-    mashup.seeking = false;
-    var mashupSegmentBegin,
+
+      mashup.currentMedia = null;
+      mashup.currentAnnotation = null;
+      mashup.seeking = false;
+      var mashupSegmentBegin,
         mashupSegmentEnd,
         mashupTimecode = 0,
- //       seekdiv = $(".video-wait"),
+        //       seekdiv = $(".video-wait"),
         mashupTimedelta;
-        
-/*    
+
+      /*    
     function showSeek() {
         if (currentMedia.seeking) {
             seekdiv.show();
@@ -44,302 +44,328 @@
     }
 */
 
-    function changeCurrentAnnotation() {
+      function changeCurrentAnnotation() {
         if (mashupTimecode >= mashup.duration) {
-            if (!mashup.paused) {
-                mashup.paused = true;
-                mashup.trigger("pause");
-            }
-            mashupTimecode = 0;
+          if (!mashup.paused) {
+            mashup.paused = true;
+            mashup.trigger("pause");
+          }
+          mashupTimecode = 0;
         }
-        var _annotation = mashup.getAnnotationAtTime( mashupTimecode );
+        var _annotation = mashup.getAnnotationAtTime(mashupTimecode);
         if (typeof _annotation === "undefined") {
-            if (mashup.currentMedia) {
-                mashup.currentMedia.pause();
-                if (!mashup.paused) {
-                    mashup.paused = true;
-                    mashup.trigger("pause");
-                }
+          if (mashup.currentMedia) {
+            mashup.currentMedia.pause();
+            if (!mashup.paused) {
+              mashup.paused = true;
+              mashup.trigger("pause");
             }
-            return;
+          }
+          return;
         }
         mashup.currentAnnotation = _annotation;
-        mashupSegmentBegin = mashup.currentAnnotation.annotation.begin.milliseconds;
+        mashupSegmentBegin =
+          mashup.currentAnnotation.annotation.begin.milliseconds;
         mashupSegmentEnd = mashup.currentAnnotation.annotation.end.milliseconds;
-        mashupTimedelta = mashupSegmentBegin - mashup.currentAnnotation.begin.milliseconds;
+        mashupTimedelta =
+          mashupSegmentBegin - mashup.currentAnnotation.begin.milliseconds;
         mashup.currentMedia = mashup.currentAnnotation.getMedia();
-        mashup.getMedias().forEach(function(_media) {
-            if (_media !== mashup.currentMedia) {
-                _media.hide();
-                _media.pause();
-            } else {
-                _media.show();
-            }
+        mashup.getMedias().forEach(function (_media) {
+          if (_media !== mashup.currentMedia) {
+            _media.hide();
+            _media.pause();
+          } else {
+            _media.show();
+          }
         });
-        
-        mashup.currentMedia.setCurrentTime( mashupTimecode + mashupTimedelta);
+
+        mashup.currentMedia.setCurrentTime(mashupTimecode + mashupTimedelta);
         mashup.currentMedia.seeking = true;
-        
-        if (!mashup.paused) {
-            mashup.currentMedia.play();
-            mashup.seeking = true;
-//            setTimeout(showSeek,200);
-        }
-        mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
 
-    }
-    
-    mashup.getMedias().forEach(addMedia);
-    changeCurrentAnnotation();
-    mashup.trigger("loadedmetadata");
-    
-    function addMedia(media) {
+        if (!mashup.paused) {
+          mashup.currentMedia.play();
+          mashup.seeking = true;
+          //            setTimeout(showSeek,200);
+        }
+        mashup.trigger("timeupdate", new ns.Model.Time(mashupTimecode));
+      }
+
+      mashup.getMedias().forEach(addMedia);
+      changeCurrentAnnotation();
+      mashup.trigger("loadedmetadata");
+
+      function addMedia(media) {
         if (media.has_player) {
-            return;
+          return;
         }
         media.has_player = true;
         var videourl = media.video;
         if (typeof url_transform === "function") {
-            videourl = url_transform(media.video);
+          videourl = url_transform(media.video);
         }
         var videoid = "video_" + media.id,
-            videoElement;
-        
-        media.show = function() {
-            
-            if (document.getElementById(videoid)) {
-                return;
-            }
-            
-            media.loaded = false;
-            media.paused = true;
-            var videoSelector = $('<video>');
-            
-            videoSelector.attr({
-                id : videoid,
-                width : width,
-                height : height
-            }).css({
-                width: width,
-                height: height
-            });
-            
-            if (typeof videourl === "string") {
-                videoSelector.attr( "src", videourl );
-            } else {
-                for (var i = 0; i < videourl.length; i++) {
-                    var _srcNode = IriSP.jQuery('<source>');
-                    _srcNode.attr({
-                        src: videourl[i].src,
-                        type: videourl[i].type
-                    });
-                    videoSelector.append(_srcNode);
-                }
-            }
-            
-            sel.append(videoSelector);
-            
-            videoElement = videoSelector[0];
-            
-            // Binding DOM events to media
-            
-            function getVolume() {
-                media.muted = videoElement.muted;
-                media.volume = videoElement.volume;
-            }
-            
-            videoSelector.on("loadedmetadata", function() {
-                getVolume();
-                media.loaded = true;
-                media.trigger("loadedmetadata");
-                media.trigger("volumechange");
-            });
-            
-            videoSelector.on("timeupdate", function() {
-                media.trigger("timeupdate", new IriSP.Model.Time(1000*videoElement.currentTime));
-            });
-            
-            videoSelector.on("volumechange", function() {
-                getVolume();
-                media.trigger("volumechange");
+          videoElement;
+
+        media.show = function () {
+          if (document.getElementById(videoid)) {
+            return;
+          }
+
+          media.loaded = false;
+          media.paused = true;
+          var videoSelector = $("<video>");
+
+          videoSelector
+            .attr({
+              id: videoid,
+              width: width,
+              height: height,
+            })
+            .css({
+              width: width,
+              height: height,
             });
-            
-            videoSelector.on("play", function() {
-                media.trigger("play");
-            });
-            
-            videoSelector.on("pause", function() {
-                media.trigger("pause");
-            });
-            
-            videoSelector.on("seeking", function() {
-                media.trigger("seeking");
-            });
-            
-            videoSelector.on("seeked", function() {
-                media.trigger("seeked");
-            });
+
+          if (typeof videourl === "string") {
+            videoSelector.attr("src", videourl);
+          } else {
+            for (var i = 0; i < videourl.length; i++) {
+              var _srcNode = ns.jQuery("<source>");
+              _srcNode.attr({
+                src: videourl[i].src,
+                type: videourl[i].type,
+              });
+              videoSelector.append(_srcNode);
+            }
+          }
+
+          sel.append(videoSelector);
+
+          videoElement = videoSelector[0];
+
+          // Binding DOM events to media
+
+          function getVolume() {
+            media.muted = videoElement.muted;
+            media.volume = videoElement.volume;
+          }
+
+          videoSelector.on("loadedmetadata", function () {
+            getVolume();
+            media.loaded = true;
+            media.trigger("loadedmetadata");
+            media.trigger("volumechange");
+          });
+
+          videoSelector.on("timeupdate", function () {
+            media.trigger(
+              "timeupdate",
+              new ns.Model.Time(1000 * videoElement.currentTime)
+            );
+          });
+
+          videoSelector.on("volumechange", function () {
+            getVolume();
+            media.trigger("volumechange");
+          });
+
+          videoSelector.on("play", function () {
+            media.trigger("play");
+          });
+
+          videoSelector.on("pause", function () {
+            media.trigger("pause");
+          });
+
+          videoSelector.on("seeking", function () {
+            media.trigger("seeking");
+          });
+
+          videoSelector.on("seeked", function () {
+            media.trigger("seeked");
+          });
         };
-        
-        media.hide = function() {
-            videoElement = undefined;
-            sel.find("#" + videoid).remove();
+
+        media.hide = function () {
+          videoElement = undefined;
+          sel.find("#" + videoid).remove();
         };
-        
+
         // Binding functions to Media Element Functions
-        
+
         var deferredTime = undefined,
-            deferredPlayPause = undefined;
-        
-        media.on("setcurrenttime", function(_milliseconds) {
-            if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
-                try {
-                    videoElement.currentTime = (_milliseconds / 1000);
-                    deferredTime = undefined;
-                } catch(err) {
-                    deferredTime = _milliseconds;
-                }
-            } else {
-                deferredTime = _milliseconds;
-            }
-        });
-        
-        media.on("setvolume", function(_vol) {
-            if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
-                media.volume = _vol;
-                videoElement.volume = _vol;
+          deferredPlayPause = undefined;
+
+        media.on("setcurrenttime", function (_milliseconds) {
+          if (
+            videoElement &&
+            videoElement.readyState >= videoElement.HAVE_METADATA
+          ) {
+            try {
+              videoElement.currentTime = _milliseconds / 1000;
+              deferredTime = undefined;
+            } catch (err) {
+              deferredTime = _milliseconds;
             }
-        });
-        
-        media.on("setmuted", function(_muted) {
-            if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
-                media.muted = _muted;
-                videoElement.muted = _muted;
-            }
+          } else {
+            deferredTime = _milliseconds;
+          }
         });
-        
-        media.on("setplay", function() {
-            if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
-                try {
-                    videoElement.play();
-                    deferredPlayPause = undefined;
-                } catch(err) {
-                    deferredPlayPause = true;
-                }
-            } else {
-                deferredPlayPause = true;
-            }
+
+        media.on("setvolume", function (_vol) {
+          if (
+            videoElement &&
+            videoElement.readyState >= videoElement.HAVE_METADATA
+          ) {
+            media.volume = _vol;
+            videoElement.volume = _vol;
+          }
+        });
+
+        media.on("setmuted", function (_muted) {
+          if (
+            videoElement &&
+            videoElement.readyState >= videoElement.HAVE_METADATA
+          ) {
+            media.muted = _muted;
+            videoElement.muted = _muted;
+          }
         });
 
-        media.on("setpause", function() {
-            if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
-                try {
-                    videoElement.pause();
-                    deferredPlayPause = undefined;
-                } catch(err) {
-                    deferredPlayPause = false;
-                }
-            } else {
-                deferredPlayPause = false;
-            }
-        });
-        
-        media.on("loadedmetadata", function() {
-            if (typeof deferredTime !== "undefined") {
-                media.setCurrentTime(deferredTime);
+        media.on("setplay", function () {
+          if (
+            videoElement &&
+            videoElement.readyState >= videoElement.HAVE_METADATA
+          ) {
+            try {
+              videoElement.play();
+              deferredPlayPause = undefined;
+            } catch (err) {
+              deferredPlayPause = true;
             }
-            if (typeof deferredPlayPause !== "undefined") {
-                if (deferredPlayPause) {
-                    media.play();
-                } else {
-                    media.pause();
-                }
-            }
+          } else {
+            deferredPlayPause = true;
+          }
         });
-        
-        // Binding UI Events and Mashup Playing to Media
-        
-        media.on("play", function() {
-            if (media === mashup.currentMedia) {
-                mashup.trigger("play");
+
+        media.on("setpause", function () {
+          if (
+            videoElement &&
+            videoElement.readyState >= videoElement.HAVE_METADATA
+          ) {
+            try {
+              videoElement.pause();
+              deferredPlayPause = undefined;
+            } catch (err) {
+              deferredPlayPause = false;
             }
+          } else {
+            deferredPlayPause = false;
+          }
         });
-        
-        media.on("pause", function() {
-            if (media === mashup.currentMedia) {
-                mashup.trigger("pause");
+
+        media.on("loadedmetadata", function () {
+          if (typeof deferredTime !== "undefined") {
+            media.setCurrentTime(deferredTime);
+          }
+          if (typeof deferredPlayPause !== "undefined") {
+            if (deferredPlayPause) {
+              media.play();
+            } else {
+              media.pause();
             }
+          }
         });
-        
-        media.on("timeupdate", function(_time) {
-            if (!mashup.paused && media === mashup.currentMedia && !media.seeking) {
-                if ( _time < mashupSegmentEnd ) {
-                    if ( _time >= mashupSegmentBegin ) {
-                        mashupTimecode = _time - mashupTimedelta;
-                    } else {
-                        mashupTimecode = mashupSegmentBegin - mashupTimedelta;
-                        media.setCurrentTime(mashupSegmentBegin);
-                    }
-                } else {
-                    mashupTimecode = mashupSegmentEnd - mashupTimedelta;
-                    media.pause();
-                    changeCurrentAnnotation();
-                }
-                mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
-            }
+
+        // Binding UI Events and Mashup Playing to Media
+
+        media.on("play", function () {
+          if (media === mashup.currentMedia) {
+            mashup.trigger("play");
+          }
+        });
+
+        media.on("pause", function () {
+          if (media === mashup.currentMedia) {
+            mashup.trigger("pause");
+          }
         });
-        
-        media.on("seeked", function() {
-            media.seeking = false;
-            if (media === mashup.currentMedia && mashup.seeking) {
-                mashup.seeking = false;
+
+        media.on("timeupdate", function (_time) {
+          if (
+            !mashup.paused &&
+            media === mashup.currentMedia &&
+            !media.seeking
+          ) {
+            if (_time < mashupSegmentEnd) {
+              if (_time >= mashupSegmentBegin) {
+                mashupTimecode = _time - mashupTimedelta;
+              } else {
+                mashupTimecode = mashupSegmentBegin - mashupTimedelta;
+                media.setCurrentTime(mashupSegmentBegin);
+              }
+            } else {
+              mashupTimecode = mashupSegmentEnd - mashupTimedelta;
+              media.pause();
+              changeCurrentAnnotation();
             }
-//            seekdiv.hide();
+            mashup.trigger("timeupdate", new ns.Model.Time(mashupTimecode));
+          }
         });
-        
-        media.on("volumechange", function() {
-            mashup.muted = media.muted;
-            mashup.volume = media.volume;
-            mashup.trigger("volumechange");
+
+        media.on("seeked", function () {
+          media.seeking = false;
+          if (media === mashup.currentMedia && mashup.seeking) {
+            mashup.seeking = false;
+          }
+          //            seekdiv.hide();
         });
-        
-    }
 
-    // Mashup Events
-    
-    mashup.on("setcurrenttime", function(_milliseconds) {
+        media.on("volumechange", function () {
+          mashup.muted = media.muted;
+          mashup.volume = media.volume;
+          mashup.trigger("volumechange");
+        });
+      }
+
+      // Mashup Events
+
+      mashup.on("setcurrenttime", function (_milliseconds) {
         mashupTimecode = _milliseconds;
         changeCurrentAnnotation();
-    });
-    
-    mashup.on("setvolume", function(_vol) {
-        mashup.getMedias().forEach(function(_media) {
-            _media.setVolume(_vol);
+      });
+
+      mashup.on("setvolume", function (_vol) {
+        mashup.getMedias().forEach(function (_media) {
+          _media.setVolume(_vol);
         });
         mashup.volume = _vol;
-    });
-    
-    mashup.on("setmuted", function(_muted) {
-        mashup.getMedias().forEach(function(_media) {
-            _media.setMuted(_muted);
+      });
+
+      mashup.on("setmuted", function (_muted) {
+        mashup.getMedias().forEach(function (_media) {
+          _media.setMuted(_muted);
         });
         mashup.muted = _muted;
-    });
-    
-    mashup.on("setplay", function() {
+      });
+
+      mashup.on("setplay", function () {
         mashup.paused = false;
         changeCurrentAnnotation();
-    });
-    
-    mashup.on("setpause", function() {
+      });
+
+      mashup.on("setpause", function () {
         mashup.paused = true;
         if (mashup.currentMedia) {
-            mashup.currentMedia.pause();
+          mashup.currentMedia.pause();
         }
-    });
-    
-    mashup.on("loadedmetadata", function() {
+      });
+
+      mashup.on("loadedmetadata", function () {
         changeCurrentAnnotation();
-    });
-    
-};
\ No newline at end of file
+      });
+    }
+  };
+};
+
+export { HtmlMashupPlayer };