diff -r 02c04d2c8fd8 -r ac1eacb3aa33 src/widgets/SlideVideoPlayer.js
--- a/src/widgets/SlideVideoPlayer.js	Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/SlideVideoPlayer.js	Wed Sep 04 17:32:50 2024 +0200
@@ -1,86 +1,112 @@
-IriSP.Widgets.SlideVideoPlayer = function(player, config) {
-    IriSP.loadCss(IriSP.getLib("cssSplitter"));
-    IriSP.Widgets.Widget.call(this, player, config);
-};
+import slideVideoPlayerStyles from "./SlideVideoPlayer.module.css";
 
-IriSP.Widgets.SlideVideoPlayer.prototype = new IriSP.Widgets.Widget();
-
+const SlideVideoPlayer = function (ns) {
+  return class extends ns.Widgets.Widget {
+    constructor(player, config) {
+      //IriSP.loadCss(IriSP.getLib("cssSplitter"));
+      super(player, config);
+    }
 
-IriSP.Widgets.SlideVideoPlayer.prototype.defaults = {
-    playerModule: "HtmlPlayer",
-    // mode is either "sidebyside" or "pip"
-    mode: "sidebyside"
-};
+    static defaults = {
+      playerModule: "HtmlPlayer",
+      // mode is either "sidebyside" or "pip"
+      mode: "sidebyside",
+    };
 
-IriSP.Widgets.SlideVideoPlayer.prototype.template = '<div class="Ldt-SlideVideoPlayer">\
+    template =
+      '<div class="Ldt-SlideVideoPlayer">\
   <div class="Ldt-SlideVideoPlayer-slide Ldt-SlideVideoPlayer-panel">\
   </div>\
   <div class="Ldt-SlideVideoPlayer-video Ldt-SlideVideoPlayer-panel">\
   </div>\
 </div>';
 
-IriSP.Widgets.SlideVideoPlayer.prototype.draw = function() {
-    var _this = this;
+    draw() {
+      var _this = this;
 
-    _this.renderTemplate();
-    this.insertSubwidget(
+      _this.renderTemplate();
+      this.insertSubwidget(
         _this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide"),
-            {
-                type: "ImageDisplay",
-                annotation_type: _this.annotation_type
-            },
-            "slide"
-        );
-    this.insertSubwidget(
+        {
+          type: "ImageDisplay",
+          annotation_type: _this.annotation_type,
+        },
+        "slide"
+      );
+      this.insertSubwidget(
         _this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video"),
-            {
-                type: _this.playerModule,
-                video: _this.video,
-                width: '100%',
-                url_transform: _this.url_transform
-            },
-            "player"
-    );
+        {
+          type: _this.playerModule,
+          video: _this.video,
+          width: "100%",
+          url_transform: _this.url_transform,
+        },
+        "player"
+      );
 
-    if (_this.mode == 'pip') {
-        _this.$.find(".Ldt-SlideVideoPlayer-panel").append('<div class="Ldt-SlideVideoPlayer-pip-menu"><div class="Ldt-SlideVideoPlayer-pip-menu-toggle"></div></div>');
-        _this.$.on("click", ".Ldt-SlideVideoPlayer-pip-menu-toggle", function () {
+      if (_this.mode == "pip") {
+        _this.$.find(".Ldt-SlideVideoPlayer-panel").append(
+          '<div class="Ldt-SlideVideoPlayer-pip-menu"><div class="Ldt-SlideVideoPlayer-pip-menu-toggle"></div></div>'
+        );
+        _this.$.on(
+          "click",
+          ".Ldt-SlideVideoPlayer-pip-menu-toggle",
+          function () {
             _this.toggleMainDisplay();
-        });
+          }
+        );
         window.setTimeout(function () {
-            _this.setMainDisplay('video');
+          _this.setMainDisplay("video");
         }, 1500);
-    } else {
+      } else {
         // Default : side by side
         // FIXME: this should be better implemented through a signal sent
         // when widgets are ready (and not just loaded)
         window.setTimeout(function () {
-            _this.$.find(".Ldt-SlideVideoPlayer").touchSplit({ orientation: (screen.height > screen.width) ? 'vertical' : 'horizontal',
-                                                               leftMin: 20,
-                                                               topMin: 20
-                                                             });
+          _this.$.find(".Ldt-SlideVideoPlayer").touchSplit({
+            orientation:
+              screen.height > screen.width ? "vertical" : "horizontal",
+            leftMin: 20,
+            topMin: 20,
+          });
         }, 1500);
+      }
     }
-};
 
-IriSP.Widgets.SlideVideoPlayer.prototype.toggleMainDisplay = function() {
-    if (this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video").hasClass("Ldt-SlideVideoPlayer-pip-main")) {
-        this.setMainDisplay('slides');
-    } else {
-        this.setMainDisplay('video');
+    toggleMainDisplay() {
+      if (
+        this.$.find(
+          ".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video"
+        ).hasClass("Ldt-SlideVideoPlayer-pip-main")
+      ) {
+        this.setMainDisplay("slides");
+      } else {
+        this.setMainDisplay("video");
+      }
     }
-};
 
-// Set main display (in case of a "switch" display mode)
-// main is either 'video' or 'slides'
-IriSP.Widgets.SlideVideoPlayer.prototype.setMainDisplay = function(video_or_slides) {
-    var main = this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video");
-    var pip = this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide");
-    if (video_or_slides == 'slides') {
+    // Set main display (in case of a "switch" display mode)
+    // main is either 'video' or 'slides'
+    setMainDisplay(video_or_slides) {
+      var main = this.$.find(
+        ".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video"
+      );
+      var pip = this.$.find(
+        ".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide"
+      );
+      if (video_or_slides == "slides") {
         var temp = main;
         main = pip;
         pip = temp;
-    };
-    main.removeClass('Ldt-SlideVideoPlayer-pip-pip').addClass('Ldt-SlideVideoPlayer-pip-main');
-    pip.removeClass('Ldt-SlideVideoPlayer-pip-main').addClass('Ldt-SlideVideoPlayer-pip-pip');
-}
+      }
+      main
+        .removeClass("Ldt-SlideVideoPlayer-pip-pip")
+        .addClass("Ldt-SlideVideoPlayer-pip-main");
+      pip
+        .removeClass("Ldt-SlideVideoPlayer-pip-main")
+        .addClass("Ldt-SlideVideoPlayer-pip-pip");
+    }
+  };
+};
+
+export { SlideVideoPlayer, slideVideoPlayerStyles };