diff -r 02c04d2c8fd8 -r ac1eacb3aa33 src/widgets/SlidePreview.js
--- a/src/widgets/SlidePreview.js	Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/SlidePreview.js	Wed Sep 04 17:32:50 2024 +0200
@@ -1,38 +1,50 @@
-IriSP.Widgets.SlidePreview = function(player, config) {
-    IriSP.Widgets.Widget.call(this, player, config);
-}
+import Mustache from "mustache";
+import slidePreviewStyles from "./SlidePreview.module.css";
+import jQuery from "jquery";
 
-IriSP.Widgets.SlidePreview.prototype = new IriSP.Widgets.Widget();
+const SlidePreview = function (ns) {
+  return class extends ns.Widgets.Widget {
+    constructor(player, config) {
+      super(player, config);
+    }
 
-IriSP.Widgets.SlidePreview.prototype.defaults = {
-    annotation_type: "Slides"
-}
+    static defaults = {
+      annotation_type: "Slides",
+    };
+
+    static template =
+      '<div class="Ldt-SlidePreview-Container"><div class="Ldt-SlidePreview-Slides"></div></div>';
 
-IriSP.Widgets.SlidePreview.prototype.template = '<div class="Ldt-SlidePreview-Container"><div class="Ldt-SlidePreview-Slides"></div></div>';
+    static annotationTemplate =
+      '<div data-id="{{ id }}" data-timecode="{{ ms }}" class="Ldt-SlidePreview-Item"><img title="{{ begin }} - {{ atitle }}" class="Ldt-AnnotationsList-Thumbnail" src="{{ thumbnail }}"></div>';
 
-IriSP.Widgets.SlidePreview.prototype.annotationTemplate = '<div data-id="{{ id }}" data-timecode="{{ ms }}" class="Ldt-SlidePreview-Item"><img title="{{ begin }} - {{ atitle }}" class="Ldt-AnnotationsList-Thumbnail" src="{{ thumbnail }}"></div>';
-
-IriSP.Widgets.SlidePreview.prototype.draw = function() {
-    var _annotations = this.getWidgetAnnotations().sortBy(function(_annotation) {
+    draw() {
+      var _annotations = this.getWidgetAnnotations().sortBy(function (
+        _annotation
+      ) {
         return _annotation.begin;
-    });
-    var _this = this;
-    _this.renderTemplate();
-    var content = _this.$.find('.Ldt-SlidePreview-Slides');
+      });
+      var _this = this;
+      _this.renderTemplate();
+      var content = _this.$.find(".Ldt-SlidePreview-Slides");
 
-    this.getWidgetAnnotations().forEach(function(_a) {
+      this.getWidgetAnnotations().forEach(function (_a) {
         var _data = {
-            id : _a.id,
-            content : IriSP.textFieldHtml(_a.title),
-            begin : _a.begin.toString(),
-            ms: _a.begin.milliseconds,
-            thumbnail: _a.thumbnail
-            };
-        var _html = Mustache.to_html(_this.annotationTemplate, _data);
-        var _el = IriSP.jQuery(_html);
+          id: _a.id,
+          content: ns.textFieldHtml(_a.title),
+          begin: _a.begin.toString(),
+          ms: _a.begin.milliseconds,
+          thumbnail: _a.thumbnail,
+        };
+        var _html = Mustache.render(_this.annotationTemplate, _data);
+        var _el = jQuery(_html);
         content.append(_el);
-    });
-    _this.$.on("click", ".Ldt-SlidePreview-Item", function () {
+      });
+      _this.$.on("click", ".Ldt-SlidePreview-Item", function () {
         _this.media.setCurrentTime(Number(this.dataset.timecode));
-    });
+      });
+    }
+  };
 };
+
+export { SlidePreview, slidePreviewStyles };