diff -r 02c04d2c8fd8 -r ac1eacb3aa33 src/widgets/Highlighter.js
--- a/src/widgets/Highlighter.js	Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/Highlighter.js	Wed Sep 04 17:32:50 2024 +0200
@@ -1,43 +1,55 @@
-IriSP.Widgets.Highlighter = function(player, config) {
-    var _this = this;
-    IriSP.Widgets.Widget.call(this, player, config);
-    this.throttledRefresh = IriSP._.throttle(function() {
+// Highlighter
+
+import highlighterStyles from "./Highlighter.module.css";
+import _ from "lodash";
+
+const Highlighter = function (ns) {
+  return class extends ns.Widgets.Widget {
+    constructor(player, config) {
+      super(player, config);
+      var _this = this;
+      this.throttledRefresh = _.throttle(function () {
         console.log("highlighter Refresh");
         _this.update();
-    }, 800);
+      }, 800);
+    }
+
+    /**
+     * Highlighter widget
+     * This widgets highlights the current annotations by setting the
+     * .activeAnnotation class on appropriate .Ldt-Highlighter-Annotation
+     * elements. These elements *must* have data-begin and data-end properties specifying their bounds (in ms) (and data-media specifying the media-id)
+     */
+
+    static defaults = {};
+
+    update() {
+      var _this = this;
+      var _currentTime = _this.media.getCurrentTime();
+      _this.$.find(".Ldt-Highlighter-Annotation", document).toggleClass(
+        "currentAnnotation",
+        function () {
+          return (
+            this.dataset.media === _this.media.id &&
+            this.dataset.begin <= _currentTime &&
+            _currentTime < this.dataset.end
+          );
+        }
+      );
+      console.log(_this.$.find(".currentAnnotation"));
+      return false;
+    }
+
+    draw() {
+      var _this = this;
+
+      var _events = ["timeupdate", "seeked", "loadedmetadata"];
+      for (var _i = 0; _i < _events.length; _i++) {
+        _this.onMediaEvent(_events[_i], _this.throttledRefresh);
+      }
+      _this.throttledRefresh();
+    }
+  };
 };
 
-/**
- * Highlighter widget
- * This widgets highlights the current annotations by setting the
- * .activeAnnotation class on appropriate .Ldt-Highlighter-Annotation
- * elements. These elements *must* have data-begin and data-end properties specifying their bounds (in ms) (and data-media specifying the media-id)
- */
-IriSP.Widgets.Highlighter.prototype = new IriSP.Widgets.Widget();
-
-IriSP.Widgets.Highlighter.prototype.defaults =  {
-}
-
-IriSP.Widgets.Highlighter.prototype.update = function() {
-    var  _this = this;
-    var _currentTime = _this.media.getCurrentTime();
-    _this.$.find(".Ldt-Highlighter-Annotation", document).toggleClass("currentAnnotation", function () {
-        return (this.dataset.media === _this.media.id && this.dataset.begin <= _currentTime && _currentTime < this.dataset.end);
-    });
-    console.log(_this.$.find(".currentAnnotation"));
-    return false;
-};
-
-IriSP.Widgets.Highlighter.prototype.draw = function() {
-    var  _this = this;
-    
-    var _events = [
-        "timeupdate",
-        "seeked",
-        "loadedmetadata"
-    ];
-    for (var _i = 0; _i < _events.length; _i++) {
-        _this.onMediaEvent(_events[_i], _this.throttledRefresh);
-    }
-    _this.throttledRefresh();
-};
+export { Highlighter, highlighterStyles };