diff -r 02c04d2c8fd8 -r ac1eacb3aa33 src/widgets/MediaList.js
--- a/src/widgets/MediaList.js	Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/MediaList.js	Wed Sep 04 17:32:50 2024 +0200
@@ -1,130 +1,150 @@
-IriSP.Widgets.MediaList = function(player, config) {
-    IriSP.Widgets.Widget.call(this, player, config);
-    this.lastMedia = false;
-};
+import Mustache from "mustache";
+import mediaListStyles from "./MediaList.module.css";
 
-IriSP.Widgets.MediaList.prototype = new IriSP.Widgets.Widget();
+const MediaList = function (ns) {
+  return class extends ns.Widgets.Widget {
+    constructor(player, config) {
+      super(player, config);
+      this.lastMedia = false;
+    }
 
-IriSP.Widgets.MediaList.prototype.messages = {
-    "fr": {
+    static messages =  {
+      fr: {
         now_playing: "Vidéo en cours",
         all_media: "Toutes les vidéos",
-        other_media: "Autres vidéos"
-    },
-    "en": {
+        other_media: "Autres vidéos",
+      },
+      en: {
         now_playing: "Now playing",
         all_media: "All videos",
-        other_media: "Other videos"
-    }
-};
+        other_media: "Other videos",
+      },
+    };
+
+    static defaults = {
+      default_thumbnail:
+        "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
+      media_url_template:
+        "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/",
+      default_color: "#000080",
+    };
+
+    static template =
+      '<div class="Ldt-MediaList-NowPlaying"><h2>{{l10n.now_playing}}</h2><hr />' +
+      '<div class="Ldt-MediaList-NowContainer">' +
+      '<div class="Ldt-MediaList-Now-ThumbContainer"><a href="" target="_blank">' +
+      '<img class="Ldt-MediaList-Now-Thumbnail" src="" /></a></div>' +
+      '<h3 class="Ldt-MediaList-Now-Title"><a href="" target="_blank"></a></h3>' +
+      '<p class="Ldt-MediaList-Now-Description"></p><div class="Ldt-MediaList-Now-MediaView"></div></div></div>' +
+      '<div class="Ldt-MediaList-Other"><h2></h2><hr /><ul class="Ldt-MediaList-OtherList"></ul></div>';
+
+    static mediaViewTemplate =
+      '<div class="Ldt-MediaList-MediaView-Background"></div>{{#segments}}<div class="Ldt-MediaList-Segment" style="background: {{color}}; left: {{left}}px; width: {{width}}px;"></div>{{/segments}}';
 
-IriSP.Widgets.MediaList.prototype.defaults = {
-    default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
-    media_url_template : "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/",
-    default_color : "#000080"
-};
+    static mediaTemplate =
+      '<li class="Ldt-MediaList-OtherList-li"><div class="Ldt-MediaList-Other-ThumbContainer"><a href="{{url}}" target="_blank">' +
+      '<img class="Ldt-MediaList-Other-Thumbnail" src="{{thumbnail}}" /></a></div>' +
+      '<h3 class="Ldt-MediaList-Other-Title"><a href="{{url}}" target="_blank">{{title}}</a></h3>' +
+      '<p class="Ldt-MediaList-Other-Description">{{description}}</p><div class="Ldt-MediaList-Other-MediaView">' +
+      MediaList.mediaViewTemplate +
+      "</div></li>";
 
-IriSP.Widgets.MediaList.prototype.template =
-    '<div class="Ldt-MediaList-NowPlaying"><h2>{{l10n.now_playing}}</h2><hr />'
-    + '<div class="Ldt-MediaList-NowContainer">'
-    + '<div class="Ldt-MediaList-Now-ThumbContainer"><a href="" target="_blank">'
-    + '<img class="Ldt-MediaList-Now-Thumbnail" src="" /></a></div>'
-    + '<h3 class="Ldt-MediaList-Now-Title"><a href="" target="_blank"></a></h3>'
-    + '<p class="Ldt-MediaList-Now-Description"></p><div class="Ldt-MediaList-Now-MediaView"></div></div></div>'
-    + '<div class="Ldt-MediaList-Other"><h2></h2><hr /><ul class="Ldt-MediaList-OtherList"></ul></div>';
+    onSearch(searchString) {
+      this.searchString =
+        typeof searchString !== "undefined" ? searchString : "";
+      var _n = this.refresh(true);
+      if (this.searchString) {
+        if (_n) {
+          this.player.trigger("search.matchFound");
+        } else {
+          this.player.trigger("search.noMatchFound");
+        }
+      }
+    }
+
+    draw() {
+      this.$.addClass("Ldt-MediaListWidget");
+      this.renderTemplate();
+      var _this = this;
+      if (typeof this.media.getMedias === "function") {
+        this.media.on("enter-annotation", function (_a) {
+          _this.redraw(_a.getMedia());
+        });
+      }
+      this.redraw();
+    }
 
-IriSP.Widgets.MediaList.prototype.mediaViewTemplate =
-    '<div class="Ldt-MediaList-MediaView-Background"></div>{{#segments}}<div class="Ldt-MediaList-Segment" style="background: {{color}}; left: {{left}}px; width: {{width}}px;"></div>{{/segments}}';
-
-IriSP.Widgets.MediaList.prototype.mediaTemplate =
-    '<li class="Ldt-MediaList-OtherList-li"><div class="Ldt-MediaList-Other-ThumbContainer"><a href="{{url}}" target="_blank">'
-    + '<img class="Ldt-MediaList-Other-Thumbnail" src="{{thumbnail}}" /></a></div>'
-    + '<h3 class="Ldt-MediaList-Other-Title"><a href="{{url}}" target="_blank">{{title}}</a></h3>'
-    + '<p class="Ldt-MediaList-Other-Description">{{description}}</p><div class="Ldt-MediaList-Other-MediaView">'
-    + IriSP.Widgets.MediaList.prototype.mediaViewTemplate + '</div></li>';
-
+    getSegments(_media) {
+      var _this = this,
+        _scale = this.$.width() / _media.duration.milliseconds;
+      return this.getWidgetAnnotations()
+        .filter(function (_annotation) {
+          return _annotation.getMedia().id == _media.id;
+        })
+        .map(function (_a) {
+          var _annotation = (_a.type = "mashedAnnotation" ? _a.annotation : _a);
+          return {
+            left: _scale * _annotation.begin,
+            width: _scale * (_annotation.end - _annotation.begin),
+            color:
+              typeof _annotation.color !== "undefined" && _annotation.color
+                ? _annotation.color
+                : _this.default_color,
+          };
+        });
+    }
 
-IriSP.Widgets.MediaList.prototype.onSearch = function(searchString) {
-    this.searchString = typeof searchString !== "undefined" ? searchString : '';
-    var _n = this.refresh(true);
-    if (this.searchString) {
-        if (_n) {
-            this.player.trigger("search.matchFound");
-        } else {
-            this.player.trigger("search.noMatchFound");
-        }
+    redraw(_media) {
+      if (typeof _media !== "undefined") {
+        this.$.find(".Ldt-MediaList-Other h2").html(this.l10n.other_media);
+        this.$.find(".Ldt-MediaList-NowPlaying").show();
+        this.$.find(".Ldt-MediaList-Now-Thumbnail").attr(
+          "src",
+          _media.thumbnail || this.default_thumbnail
+        );
+        this.$.find(".Ldt-MediaList-Now-Title a").html(_media.title);
+        this.$.find(".Ldt-MediaList-Now-Description").html(_media.description);
+        var _url =
+          _media.url ||
+          Mustache.render(this.media_url_template, {
+            media: _media.id,
+          });
+        this.$.find(".Ldt-MediaList-NowContainer a").attr("href", _url);
+        var _mediaView = Mustache.render(this.mediaViewTemplate, {
+          segments: this.getSegments(_media),
+        });
+        this.$.find(".Ldt-MediaList-Now-MediaView").html(_mediaView);
+      } else {
+        this.$.find(".Ldt-MediaList-Other h2").html(this.l10n.all_media);
+        this.$.find(".Ldt-MediaList-NowPlaying").hide();
+      }
+      var _this = this,
+        _otherlist = this.source.getMedias().filter(function (_m) {
+          return _m.id !== _this.lastMedia;
+        });
+      if (_otherlist.length) {
+        this.$.find(".Ldt-MediaList-Other").show();
+        var _html = _otherlist
+          .map(function (_media) {
+            return Mustache.render(_this.mediaTemplate, {
+              thumbnail: _media.thumbnail || _this.default_thumbnail,
+              url:
+                _media.url ||
+                Mustache.render(_this.media_url_template, {
+                  media: _media.id,
+                }),
+              title: _media.title,
+              description: _media.description,
+              segments: _this.getSegments(_media),
+            });
+          })
+          .join("");
+        this.$.find(".Ldt-MediaList-OtherList").html(_html);
+      } else {
+        this.$.find(".Ldt-MediaList-Other").hide();
+      }
     }
+  };
 };
 
-IriSP.Widgets.MediaList.prototype.draw = function() {
-    this.$.addClass("Ldt-MediaListWidget")
-    this.renderTemplate();
-    var _this = this;
-    if (typeof this.media.getMedias === "function") {
-        this.media.on("enter-annotation", function(_a) {
-            _this.redraw(_a.getMedia());
-        });
-    }
-    this.redraw();
-};
-
-IriSP.Widgets.MediaList.prototype.getSegments = function(_media) {
-    var _this = this,
-        _scale = this.$.width()/_media.duration.milliseconds;
-    return this.getWidgetAnnotations()
-        .filter(function(_annotation) {
-            return _annotation.getMedia().id == _media.id;
-        })
-        .map(function(_a) {
-            var _annotation = ( _a.type = "mashedAnnotation" ? _a.annotation : _a );
-            return {
-                left: _scale * _annotation.begin,
-                width: _scale * (_annotation.end - _annotation.begin),
-                color: ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.default_color )
-            };
-        });
-};
-
-IriSP.Widgets.MediaList.prototype.redraw = function(_media) {
-    if (typeof _media !== "undefined") {
-        this.$.find('.Ldt-MediaList-Other h2').html(this.l10n.other_media);
-        this.$.find('.Ldt-MediaList-NowPlaying').show();
-        this.$.find('.Ldt-MediaList-Now-Thumbnail').attr("src", _media.thumbnail || this.default_thumbnail);
-        this.$.find('.Ldt-MediaList-Now-Title a').html(_media.title);
-        this.$.find('.Ldt-MediaList-Now-Description').html(_media.description);
-        var _url = _media.url || Mustache.to_html(
-                this.media_url_template, {
-                    media: _media.id
-                });
-        this.$.find('.Ldt-MediaList-NowContainer a').attr("href", _url);
-        var _mediaView = Mustache.to_html( this.mediaViewTemplate, {
-            segments: this.getSegments(_media)
-        });
-        this.$.find('.Ldt-MediaList-Now-MediaView').html(_mediaView);
-    } else {
-        this.$.find('.Ldt-MediaList-Other h2').html(this.l10n.all_media);
-        this.$.find('.Ldt-MediaList-NowPlaying').hide();
-    }
-    var _this = this,
-        _otherlist = this.source.getMedias().filter(function(_m) {
-            return (_m.id !== _this.lastMedia)
-        });
-    if (_otherlist.length) {
-        this.$.find('.Ldt-MediaList-Other').show();
-        var _html = _otherlist.map(function(_media) {
-            return Mustache.to_html(_this.mediaTemplate, {
-                thumbnail: _media.thumbnail || _this.default_thumbnail,
-                url: _media.url || Mustache.to_html(
-                    _this.media_url_template, {
-                        media: _media.id
-                    }),
-                title: _media.title,
-                description: _media.description,
-                segments: _this.getSegments(_media)
-            });
-        }).join("");
-        this.$.find('.Ldt-MediaList-OtherList').html(_html);
-    } else {
-        this.$.find('.Ldt-MediaList-Other').hide();
-    }
-};
+export { MediaList, mediaListStyles };