--- a/src/widgets/Slider.js	Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/Slider.js	Wed Sep 04 17:32:50 2024 +0200
@@ -1,133 +1,139 @@
 /*
  The Slider Widget fits right under the video
  */
-
-IriSP.Widgets.Slider = function(player, config) {
-    IriSP.Widgets.Widget.call(this, player, config);
-};
-
-IriSP.Widgets.Slider.prototype = new IriSP.Widgets.Widget();
+import sliderStyles from "./Slider.module.css";
+import jQuery from "jquery";
 
-IriSP.Widgets.Slider.prototype.defaults = {
-    minimized_height : 4,
-    maximized_height : 4,
-    minimize_timeout : 1500 /*  time before minimizing slider after mouseout,
-                                set to zero for fixed slider */
-};
+const Slider = function (ns) {
+  return class extends ns.Widgets.Widget {
+    constructor(player, config) {
+      super(player, config);
+    }
 
-IriSP.Widgets.Slider.prototype.template =
-    '<div class="Ldt-Slider"></div><div class="Ldt-Slider-Time">00:00</div>';
+    static defaults = {
+      minimized_height: 4,
+      maximized_height: 4,
+      minimize_timeout: 1500 /*  time before minimizing slider after mouseout,
+                                set to zero for fixed slider */,
+    };
 
-IriSP.Widgets.Slider.prototype.draw = function() {
-
-    this.renderTemplate();
+    static template =
+      '<div class="Ldt-Slider"></div><div class="Ldt-Slider-Time">00:00</div>';
 
-    this.$time = this.$.find(".Ldt-Slider-Time");
+    draw() {
+      this.renderTemplate();
 
-    this.$slider = this.$.find(".Ldt-Slider");
+      this.$time = this.$.find(".Ldt-Slider-Time");
 
-    var _this = this;
+      this.$slider = this.$.find(".Ldt-Slider");
 
-    this.$slider.slider({
+      var _this = this;
+
+      this.$slider.slider({
         range: "min",
         value: 0,
         min: 0,
         max: this.source.getDuration().milliseconds,
-        slide: function(event, ui) {
-            _this.media.setCurrentTime(ui.value);
-            _this.player.trigger("Mediafragment.setHashToTime");
-        }
-    });
+        slide: function (event, ui) {
+          _this.media.setCurrentTime(ui.value);
+          _this.player.trigger("Mediafragment.setHashToTime");
+        },
+      });
 
-    this.$handle = this.$slider.find('.ui-slider-handle');
+      this.$handle = this.$slider.find(".ui-slider-handle");
 
-    this.onMediaEvent("timeupdate","onTimeupdate");
-    this.onMdpEvent("Player.MouseOver","onMouseover");
-    this.onMdpEvent("Player.MouseOut","onMouseout");
+      this.onMediaEvent("timeupdate", "onTimeupdate");
+      this.onMdpEvent("Player.MouseOver", "onMouseover");
+      this.onMdpEvent("Player.MouseOut", "onMouseout");
 
-    if (this.minimize_timeout) {
+      if (this.minimize_timeout) {
         this.$slider.css(this.calculateSliderCss(this.minimized_height));
         this.$handle.css(this.calculateHandleCss(this.minimized_height));
 
         this.maximized = false;
         this.timeoutId = false;
-    }
+      }
 
-    this.$slider
-        .mouseover(function() {
-            _this.$time.show();
-            _this.onMouseover();
+      this.$slider
+        .mouseover(function () {
+          _this.$time.show();
+          _this.onMouseover();
         })
         .mouseout(this.functionWrapper("onMouseout"))
-        .mousemove(function(_e) {
-            var _x = _e.pageX - _this.$.offset().left,
-                _t = new IriSP.Model.Time(_this.media.duration * _x / _this.width);
-            _this.$time.text(_t.toString()).css("left",_x);
+        .mousemove(function (_e) {
+          var _x = _e.pageX - _this.$.offset().left,
+            _t = new ns.Model.Time((_this.media.duration * _x) / _this.width);
+          _this.$time.text(_t.toString()).css("left", _x);
         });
-};
+    }
 
-IriSP.Widgets.Slider.prototype.onTimeupdate = function(_time) {
-    this.$slider.slider("value",_time);
-    this.player.trigger("Arrow.updatePosition",{widget: this.type, time: _time});
-};
+    onTimeupdate(_time) {
+      this.$slider.slider("value", _time);
+      this.player.trigger("Arrow.updatePosition", {
+        widget: this.type,
+        time: _time,
+      });
+    }
 
-IriSP.Widgets.Slider.prototype.onMouseover = function() {
-    if (this.minimize_timeout) {
+    onMouseover() {
+      if (this.minimize_timeout) {
         if (this.timeoutId) {
-            window.clearTimeout(this.timeoutId);
-            this.timeoutId = false;
+          window.clearTimeout(this.timeoutId);
+          this.timeoutId = false;
         }
         if (!this.maximized) {
-           this.animateToHeight(this.maximized_height);
-           this.maximized = true;
+          this.animateToHeight(this.maximized_height);
+          this.maximized = true;
+        }
+      }
+    }
+
+    onMouseout() {
+      this.$time.hide();
+      if (this.minimize_timeout) {
+        if (this.timeoutId) {
+          window.clearTimeout(this.timeoutId);
+          this.timeoutId = false;
         }
+        var _this = this;
+        this.timeoutId = window.setTimeout(function () {
+          if (_this.maximized) {
+            _this.animateToHeight(_this.minimized_height);
+            _this.maximized = false;
+          }
+          _this.timeoutId = false;
+        }, this.minimize_timeout);
+      }
     }
+
+    animateToHeight(_height) {
+      this.$slider
+        .stop()
+        .animate(this.calculateSliderCss(_height), 500, function () {
+          jQuery(this).css("overflow", "visible");
+        });
+      this.$handle
+        .stop()
+        .animate(this.calculateHandleCss(_height), 500, function () {
+          jQuery(this).css("overflow", "visible");
+        });
+    }
+
+    calculateSliderCss(_size) {
+      return {
+        height: _size + "px",
+        "margin-top": this.minimized_height - _size + "px",
+      };
+    }
+
+    calculateHandleCss = function (_size) {
+      return {
+        height: 2 + _size + "px",
+        width: 2 + _size + "px",
+        "margin-left": -Math.ceil(2 + _size / 2) + "px",
+      };
+    };
+  };
 };
 
-IriSP.Widgets.Slider.prototype.onMouseout = function() {
-    this.$time.hide();
-    if (this.minimize_timeout) {
-        if (this.timeoutId) {
-            window.clearTimeout(this.timeoutId);
-            this.timeoutId = false;
-        }
-        var _this = this;
-        this.timeoutId = window.setTimeout(function() {
-            if (_this.maximized) {
-                _this.animateToHeight(_this.minimized_height);
-                _this.maximized = false;
-            }
-            _this.timeoutId = false;
-        }, this.minimize_timeout);
-    }
-};
-
-IriSP.Widgets.Slider.prototype.animateToHeight = function(_height) {
-    this.$slider.stop().animate(
-        this.calculateSliderCss(_height),
-        500,
-        function() {
-            IriSP.jQuery(this).css("overflow","visible");
-        });
-    this.$handle.stop().animate(
-        this.calculateHandleCss(_height),
-        500,
-        function() {
-            IriSP.jQuery(this).css("overflow","visible");
-        });
-};
-
-IriSP.Widgets.Slider.prototype.calculateSliderCss = function(_size) {
-    return {
-        height: _size + "px",
-        "margin-top": (this.minimized_height - _size) + "px"
-    };
-};
-
-IriSP.Widgets.Slider.prototype.calculateHandleCss = function(_size) {
-    return {
-        height: (2 + _size) + "px",
-        width: (2 + _size) + "px",
-        "margin-left": -Math.ceil(2 + _size / 2) + "px"
-    };
-};
+export { Slider, sliderStyles };