diff -r 02c04d2c8fd8 -r ac1eacb3aa33 src/widgets/Renkan.js
--- a/src/widgets/Renkan.js	Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/Renkan.js	Wed Sep 04 17:32:50 2024 +0200
@@ -1,134 +1,150 @@
-IriSP.Widgets.Renkan = function(player, config) {
-    IriSP.Widgets.Widget.call(this, player, config);
-};
+import _ from "lodash";
+import renkanStyles from "./Renkan.module.css";
 
-IriSP.Widgets.Renkan.prototype = new IriSP.Widgets.Widget();
+const Renkan = function (ns) {
+  const Rkns = global.Rkns;
+  return class extends ns.Widgets.Widget {
+    constructor(player, config) {
+      super(player, config);
+    }
 
-IriSP.Widgets.Renkan.prototype.defaults = {
-    annotation_regexp: /player\/([a-zA-Z0-9_-]+)\/.*id=([a-zA-Z0-9_-]+)/,
-    tag_regexp: /search=([^&=]+)/,
-    min_duration: 5000,
-    renkan_options: {}
-};
+    static defaults = {
+      annotation_regexp: /player\/([a-zA-Z0-9_-]+)\/.*id=([a-zA-Z0-9_-]+)/,
+      tag_regexp: /search=([^&=]+)/,
+      min_duration: 5000,
+      renkan_options: {},
+    };
 
-IriSP.Widgets.Renkan.prototype.messages = {
-    "fr": {
-    },
-    "en": {
-    }
-};
+    static messages =  {
+      fr: {},
+      en: {},
+    };
+
+    static template =
+      '<div class="Ldt-Renkan-Container"><div class="Ldt-Renkan"></div></div>';
 
-IriSP.Widgets.Renkan.prototype.template =
-    '<div class="Ldt-Renkan-Container"><div class="Ldt-Renkan"></div></div>';
-
-IriSP.Widgets.Renkan.prototype.draw = function() {
-    this.renderTemplate();
-    var _id = IriSP.Model.getUID();
-    this.$.find(".Ldt-Renkan").attr("id", _id);
-    var renkan_options = IriSP._.extend({
-        container: _id,
-        editor_mode: false,
-        show_bins: false,
-        show_top_bar: false,
-        force_resize: true,
-        language: IriSP.language
-    }, this.renkan_options);
-    this.renkan = new Rkns.Renkan(renkan_options);
-    this.node_times = [];
-    var _this = this,
+    draw() {
+      this.messages
+this.messages
+this.messages
+this.messages
+this.messagesthis.renderTemplate();
+      var _id = ns.Model.getUID();
+      this.$.find(".Ldt-Renkan").attr("id", _id);
+      var renkan_options = _.extend(
+        {
+          container: _id,
+          editor_mode: false,
+          show_bins: false,
+          show_top_bar: false,
+          force_resize: true,
+          language: ns.language,
+        },
+        this.renkan_options
+      );
+      this.renkan = new Rkns.Renkan(renkan_options);
+      this.node_times = [];
+      var _this = this,
         _list = this.getWidgetAnnotations();
-    this.renkan.project.on("add:nodes", function(_node) {
+      this.renkan.project.on("add:nodes", function (_node) {
         var _uri = _node.get("uri"),
-            _annmatch = _uri.match(_this.annotation_regexp);
+          _annmatch = _uri.match(_this.annotation_regexp);
         if (_annmatch) {
-            var _annotations = _list.filter(function(_ann) {
-                return _ann.getMedia().id == _annmatch[1] && _ann.id == _annmatch[2];
+          var _annotations = _list.filter(function (_ann) {
+            return (
+              _ann.getMedia().id == _annmatch[1] && _ann.id == _annmatch[2]
+            );
+          });
+          _annotations.forEach(function (_ann) {
+            var _duration = _ann.getDuration(),
+              _preroll =
+                +(_duration < _this.min_duration) * (_this.min_duration / 2);
+            var _nt = {
+              uri: _uri,
+              selected: false,
+              node: _node,
+              annotation: _ann,
+              begin: _ann.begin - _preroll,
+              end: _ann.end + _preroll,
+            };
+            _this.node_times.push(_nt);
+            var _annselected = false,
+              _nodeselected = false;
+            _ann.on("select", function () {
+              _annselected = true;
+              if (!_nodeselected) {
+                _node.trigger("select", true);
+              }
             });
-            _annotations.forEach(function(_ann) {
-                var _duration = _ann.getDuration(),
-                    _preroll = + ( _duration < _this.min_duration ) * ( _this.min_duration / 2);
-                var _nt = {
-                    uri: _uri,
-                    selected: false,
-                    node: _node,
-                    annotation: _ann,
-                    begin: _ann.begin - _preroll,
-                    end: _ann.end + _preroll
-                };
-                _this.node_times.push(_nt);
-                var _annselected = false,
-                    _nodeselected = false;
-                _ann.on("select", function() {
-                    _annselected = true;
-                    if (!_nodeselected) {
-                        _node.trigger("select",true);
-                    }
-                });
-                _node.on("selected", function() {
-                    _nodeselected = true;
-                    if (!_annselected) {
-                        _ann.trigger("select",true);
-                    }
-                });
-                _ann.on("unselect", function() {
-                    _annselected = false;
-                    if (_nodeselected) {
-                        _node.trigger("unselect",true);
-                    }
-                });
-                _node.on("unselected", function() {
-                    _nodeselected = false;
-                    _nt.selected = false;
-                    if (_annselected) {
-                        _ann.trigger("unselect",true);
-                    }
-                });
-                _node.on("clicked", function() {
-                    _ann.trigger("click");
-                });
+            _node.on("selected", function () {
+              _nodeselected = true;
+              if (!_annselected) {
+                _ann.trigger("select", true);
+              }
+            });
+            _ann.on("unselect", function () {
+              _annselected = false;
+              if (_nodeselected) {
+                _node.trigger("unselect", true);
+              }
             });
+            _node.on("unselected", function () {
+              _nodeselected = false;
+              _nt.selected = false;
+              if (_annselected) {
+                _ann.trigger("unselect", true);
+              }
+            });
+            _node.on("clicked", function () {
+              _ann.trigger("click");
+            });
+          });
         }
         var _tagmatch = _uri.match(_this.tag_regexp);
         if (_tagmatch) {
-            _node.on("select", function() {
-                _this.source.getAnnotations().search(_tagmatch[1]);
-            });
-            _node.on("unselect", function() {
-                _this.source.getAnnotations().search("");
-            });
+          _node.on("select", function () {
+            _this.source.getAnnotations().search(_tagmatch[1]);
+          });
+          _node.on("unselect", function () {
+            _this.source.getAnnotations().search("");
+          });
         }
-    });
-    Rkns.jsonIO(this.renkan, {
-        url: this.data
-    });
-    
-    this.onMediaEvent("timeupdate","onTimeupdate");
-    
-    this.$.find(".Rk-Editor").on("click", "a", function() {
+      });
+      Rkns.jsonIO(this.renkan, {
+        url: this.data,
+      });
+
+      this.onMediaEvent("timeupdate", "onTimeupdate");
+
+      this.$.find(".Rk-Editor").on("click", "a", function () {
         var href = this.href,
-            times = _this.node_times.filter(function(t) {
-                return t.uri == href;
-            });
+          times = _this.node_times.filter(function (t) {
+            return t.uri == href;
+          });
         if (times.length) {
-            IriSP._(times).each(function(t) {
-                t.annotation.trigger("click");
-            });
-            return false;
+          _(times).each(function (t) {
+            t.annotation.trigger("click");
+          });
+          return false;
         }
-    });
+      });
+    }
+
+    onTimeupdate(_time) {
+      _(this.node_times).each(function (_nt) {
+        if (_nt.begin <= _time && _nt.end >= _time) {
+          if (!_nt.selected) {
+            _nt.selected = true;
+            _nt.node.trigger("select");
+          }
+        } else {
+          if (_nt.selected) {
+            _nt.node.trigger("unselect");
+          }
+        }
+      });
+    }
+  };
 };
 
-IriSP.Widgets.Renkan.prototype.onTimeupdate = function(_time) {
-    IriSP._(this.node_times).each(function(_nt) {
-        if (_nt.begin <= _time && _nt.end >= _time) {
-            if (!_nt.selected) {
-                _nt.selected = true;
-                _nt.node.trigger("select");
-            }
-        } else {
-            if (_nt.selected) {
-                _nt.node.trigger("unselect");
-            }
-        }
-    });
-};
+export { Renkan, renkanStyles };