diff -r 02c04d2c8fd8 -r ac1eacb3aa33 src/widgets/Transcript.js
--- a/src/widgets/Transcript.js	Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/Transcript.js	Wed Sep 04 17:32:50 2024 +0200
@@ -1,79 +1,100 @@
 /* This widget displays annotations as a transcript */
+import Mustache from "mustache";
+import jQuery from "jquery";
 
-IriSP.Widgets.Transcript = function(player, config) {
-    IriSP.Widgets.Widget.call(this, player, config);
-}
+import transcriptStyles from "./Transcript.module.css";
 
-IriSP.Widgets.Transcript.prototype = new IriSP.Widgets.Widget();
+const Transcript = function (ns) {
+  return class extends ns.Widgets.Widget {
+    constructor(player, config) {
+      super(player, config);
+    }
 
-IriSP.Widgets.Transcript.prototype.defaults = {
-    annotation_type: "Caption",
-    use_vtt_track: false
-}
+    static defaults = {
+      annotation_type: "Caption",
+      use_vtt_track: false,
+    };
 
-IriSP.Widgets.Transcript.prototype.template = '<div class="Ldt-TranscriptWidget"></div>';
+    static template = '<div class="Ldt-TranscriptWidget"></div>';
 
-IriSP.Widgets.Transcript.prototype.annotationTemplate = '<span data-begin="{{ begin }}" data-end="{{ end }}" data-id="{{ id }}" class="Ldt-Transcript-Annotation">{{ content }}</span>  ';
+    static annotationTemplate =
+      '<span data-begin="{{ begin }}" data-end="{{ end }}" data-id="{{ id }}" class="Ldt-Transcript-Annotation">{{ content }}</span>  ';
 
-IriSP.Widgets.Transcript.prototype.draw = function() {
-    var _annotations = this.getWidgetAnnotations();
-    var _this = this;
-    var content;
+    draw() {
+      var _annotations = this.getWidgetAnnotations();
+      var _this = this;
+      var content;
 
-    _this.renderTemplate();
-    content = _this.$.find('.Ldt-TranscriptWidget');
+      _this.renderTemplate();
+      content = _this.$.find(".Ldt-TranscriptWidget");
 
-    if (_this.use_vtt_track) {
+      if (_this.use_vtt_track) {
         // Use webvtt track. It will only work with native video player.
-        var widgets =  _this.player.widgets.filter(function (w) { return w.type == "HtmlPlayer"; });
+        var widgets = _this.player.widgets.filter(function (w) {
+          return w.type == "HtmlPlayer";
+        });
         if (widgets) {
-            var v = widgets[0].$.find("video")[0];
-            // FIXME: allow to specify the used track
-            v.addEventListener("loadedmetadata", function () {
-                var track = v.textTracks[0];
-                var cues = track.cues;
-                var i = 1;
-                Array.prototype.forEach.apply(cues, [ function(_c) {
-                    _c.id = "cue" + i;
-                    var _html = Mustache.to_html(_this.annotationTemplate, {
-                        id : _c.id,
-                        content : _c.text,
-                        begin : 1000 * _c.startTime,
-                        end : 1000 * _c.endTime
-                    });
-                    i += 1;
-                    var _el = IriSP.jQuery(_html);
-                    content.append(_el);
-                } ]);
-                track.addEventListener("cuechange", function () {
-                    var acues = track.activeCues;
-                    if (acues.length > 0) {
-                        // Update attributes for active cues
-                        _this.$.find(".Ldt-Transcript-Annotation.active").removeClass("active");
-                        Array.prototype.forEach.apply(acues, [ function(_c) {
-                            _this.$.find("#" + _c.id).addClass("active");
-                        } ]);
-                    }
-                }, false);
-                content.on("click", ".Ldt-Transcript-Annotation", function () {
-                    _this.media.setCurrentTime(this.dataset.begin);
+          var v = widgets[0].$.find("video")[0];
+          // FIXME: allow to specify the used track
+          v.addEventListener("loadedmetadata", function () {
+            var track = v.textTracks[0];
+            var cues = track.cues;
+            var i = 1;
+            Array.prototype.forEach.apply(cues, [
+              function (_c) {
+                _c.id = "cue" + i;
+                var _html = Mustache.render(_this.annotationTemplate, {
+                  id: _c.id,
+                  content: _c.text,
+                  begin: 1000 * _c.startTime,
+                  end: 1000 * _c.endTime,
                 });
+                i += 1;
+                var _el = jQuery(_html);
+                content.append(_el);
+              },
+            ]);
+            track.addEventListener(
+              "cuechange",
+              function () {
+                var acues = track.activeCues;
+                if (acues.length > 0) {
+                  // Update attributes for active cues
+                  _this.$.find(".Ldt-Transcript-Annotation.active").removeClass(
+                    "active"
+                  );
+                  Array.prototype.forEach.apply(acues, [
+                    function (_c) {
+                      _this.$.find("#" + _c.id).addClass("active");
+                    },
+                  ]);
+                }
+              },
+              false
+            );
+            content.on("click", ".Ldt-Transcript-Annotation", function () {
+              _this.media.setCurrentTime(this.dataset.begin);
             });
+          });
         } else {
-            console.log("cannot find a video object");
+          console.log("cannot find a video object");
         }
-    } else {
+      } else {
         // Populate with annotation data
-        _annotations.forEach(function(_a) {
-            var _data = {
-                id : _a.id,
-                content : IriSP.textFieldHtml(_a.title),
-                begin : _a.begin.toString(),
-                end : _a.end.toString()
-            };
-            var _html = Mustache.to_html(_this.annotationTemplate, _data);
-            var _el = IriSP.jQuery(_html);
-            content.append(_el);
+        _annotations.forEach(function (_a) {
+          var _data = {
+            id: _a.id,
+            content: ns.textFieldHtml(_a.title),
+            begin: _a.begin.toString(),
+            end: _a.end.toString(),
+          };
+          var _html = Mustache.render(_this.annotationTemplate, _data);
+          var _el = jQuery(_html);
+          content.append(_el);
         });
-    };
+      }
+    }
+  };
 };
+
+export { Transcript, transcriptStyles };