diff -r 02c04d2c8fd8 -r ac1eacb3aa33 src/widgets/LatestAnnotation.js
--- a/src/widgets/LatestAnnotation.js	Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/LatestAnnotation.js	Wed Sep 04 17:32:50 2024 +0200
@@ -1,303 +1,335 @@
 /* Widget that displays the last annotation that was posted, optionally for current segment, optionally for a given username */
+import Mustache from "mustache";
+import jQuery from "jquery";
+
+import latestAnnotationStyles from "./LatestAnnotation.module.css";
 
-IriSP.Widgets.LatestAnnotation = function(player, config){
-    IriSP.Widgets.Widget.call(this, player, config);
-};
+const LatestAnnotation = function (ns) {
+  return class extends ns.Widgets.Widget {
+    constructor(player, config) {
+      super(player, config);
+    }
 
-IriSP.Widgets.LatestAnnotation.prototype = new IriSP.Widgets.Widget();
-
-IriSP.Widgets.LatestAnnotation.prototype.defaults = {
-    pre_draw_callback: function(){
+    static defaults = {
+      pre_draw_callback: function () {
         return this.importUsers();
-    },
-    from_user: false,
-    filter_by_segment: false,
-    segments_annotation_type: "chap",
-    hide_without_segment: false,
-    annotation_type: "contribution",
-    /*
-     * Set to a username if you only want to display annotations from a given user
-     */
-    show_only_annotation_from_user: false,
-    /*
-     * Displays a button that copy currently displayed annotation into CreateAnnotation input field
-     */
-    copy_and_edit_button: false,
-    hide_annotations_list: false,
-    /*
-     * Allows clicks on an annotation from Annotations to display the annotation content into this widget
-     */
-    selectable_annotations: false,
-    empty_message: false,
-    starts_hidden: false,
-    show_header: false,
-    custom_header: false,
-    make_name_string_function: function(params){
+      },
+      from_user: false,
+      filter_by_segment: false,
+      segments_annotation_type: "chap",
+      hide_without_segment: false,
+      annotation_type: "contribution",
+      /*
+       * Set to a username if you only want to display annotations from a given user
+       */
+      show_only_annotation_from_user: false,
+      /*
+       * Displays a button that copy currently displayed annotation into CreateAnnotation input field
+       */
+      copy_and_edit_button: false,
+      hide_annotations_list: false,
+      /*
+       * Allows clicks on an annotation from Annotations to display the annotation content into this widget
+       */
+      selectable_annotations: false,
+      empty_message: false,
+      starts_hidden: false,
+      show_header: false,
+      custom_header: false,
+      make_name_string_function: function (params) {
         return params.username ? params.username : "Anonymous";
-    }, 
-};
+      },
+    };
 
-IriSP.Widgets.LatestAnnotation.prototype.messages = {
-    fr : {
+    static messages =  {
+      fr: {
         copy_and_edit: "Copier et Editer",
-        empty : "Aucune annotation à afficher",
-        header: "Dernière annotation"
-    },
-    en: {
+        empty: "Aucune annotation à afficher",
+        header: "Dernière annotation",
+      },
+      en: {
         copy_and_edit: "Copy and Edit",
         empty: "No annotation to display",
-        header: "Last annotation"
-    }
-}
-
-IriSP.Widgets.LatestAnnotation.prototype.template = 
-    "{{#show_header}}"
-    + "<p class='Ldt-LatestAnnotation-header'>"
-    +     "{{#custom_header}}{{custom_header}}{{/custom_header}}"
-    +     "{{^custom_header}}{{l10n.header}}{{/custom_header}}"
-    + "</p>"
-    + "{{/show_header}}"
-    + "<div class='Ldt-LatestAnnotation'>"
-    + "</div>";
+        header: "Last annotation",
+      },
+    };
 
-IriSP.Widgets.LatestAnnotation.prototype.annotationTemplate =
-    "<div class='Ldt-LatestAnnotation-Box'>"
-    + "{{#copy_and_edit_button}}<div class='Ldt-LatestAnnotation-CopyEditButton'>{{button_text}}</div>{{/copy_and_edit_button}}"
-    +     "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-CreationDate'>{{{annotation_created}}}</div>" 
-    +     "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Title'>{{{annotation_creator}}}{{#annotation_title}}: {{{annotation_title}}}{{/annotation_title}}</div>" 
-    +     "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Content'>"
-    +         "{{{annotation_content}}}"
-    +     "</div>"
-    + "</div>"
+    static template =
+      "{{#show_header}}" +
+      "<p class='Ldt-LatestAnnotation-header'>" +
+      "{{#custom_header}}{{custom_header}}{{/custom_header}}" +
+      "{{^custom_header}}{{l10n.header}}{{/custom_header}}" +
+      "</p>" +
+      "{{/show_header}}" +
+      "<div class='Ldt-LatestAnnotation'>" +
+      "</div>";
 
+    static annotationTemplate =
+      "<div class='Ldt-LatestAnnotation-Box'>" +
+      "{{#copy_and_edit_button}}<div class='Ldt-LatestAnnotation-CopyEditButton'>{{button_text}}</div>{{/copy_and_edit_button}}" +
+      "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-CreationDate'>{{{annotation_created}}}</div>" +
+      "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Title'>{{{annotation_creator}}}{{#annotation_title}}: {{{annotation_title}}}{{/annotation_title}}</div>" +
+      "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Content'>" +
+      "{{{annotation_content}}}" +
+      "</div>" +
+      "</div>";
 
-IriSP.Widgets.LatestAnnotation.prototype.importUsers = function(){
-    if (!this.source.users_data){
+    importUsers() {
+      if (!this.source.users_data) {
         this.usernames = Array();
         var _this = this,
-            _list = this.getWidgetAnnotations(),
-            usernames_list_string = "";
-        
-        _list.forEach(function(_annotation){
-            if(_this.usernames.indexOf(_annotation.creator) == -1){
-                _this.usernames.push(_annotation.creator);
-            }
+          _list = this.getWidgetAnnotations(),
+          usernames_list_string = "";
+
+        _list.forEach(function (_annotation) {
+          if (_this.usernames.indexOf(_annotation.creator) == -1) {
+            _this.usernames.push(_annotation.creator);
+          }
+        });
+        this.usernames.forEach(function (_username) {
+          usernames_list_string += _username + ",";
         });
-        this.usernames.forEach(function(_username){
-            usernames_list_string+=_username+","
-        })
-        usernames_list_string = usernames_list_string.substring(0, usernames_list_string.length - 1);
-        _url = Mustache.to_html(this.api_users_endpoint, {usernames_list_string: encodeURIComponent(usernames_list_string), usernames_list_length: this.usernames.length});
-        return IriSP.jQuery.ajax({
-            async: false,
-            url: _url,
-            type: "GET",
-            success: function(_data) {
-                _this.source.users_data = _data.objects
-            },
-            error: function(_xhr, _error, _thrown) {
-                console.log(_xhr)
-                console.log(_error)
-                console.log(_thrown)
-            }
-        })
+        usernames_list_string = usernames_list_string.substring(
+          0,
+          usernames_list_string.length - 1
+        );
+        _url = Mustache.render(this.api_users_endpoint, {
+          usernames_list_string: encodeURIComponent(usernames_list_string),
+          usernames_list_length: this.usernames.length,
+        });
+        return jQuery.ajax({
+          async: false,
+          url: _url,
+          type: "GET",
+          success: function (_data) {
+            _this.source.users_data = _data.objects;
+          },
+          error: function (_xhr, _error, _thrown) {
+            console.log(_xhr);
+            console.log(_error);
+            console.log(_thrown);
+          },
+        });
+      }
     }
-}
-    
-IriSP.Widgets.LatestAnnotation.prototype.draw = function(){
-    var _this = this;
-    this.renderTemplate();
-    
-    this.annotationContainer_$ = this.$.find('.Ldt-LatestAnnotation');
-    
-    if (this.selectable_annotations){
-        this.onMdpEvent("AnnotationsList.refresh", function(){
-            _this.getWidgetAnnotations().forEach(function(_annotation){
-                _annotation.off("click");
-                _annotation.on("click", function(){
-                    var _user = {},
-                        _user_display_string = "",
-                        _users = this.source.users_data.filter(function(_user_data){
-                            return _user_data.username == _annotation.creator
-                        });
-                    if (_users.length == 0){
-                        _user.username = _annotation.creator;
-                    }
-                    else {
-                        _user = _users[0];
-                    }
-                    _user_display_string = _this.make_name_string_function(_user)
-                    _html = Mustache.to_html(_this.annotationTemplate, {
-                        annotation_created: _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString(),
-                        annotation_creator: _user_display_string,
-                        annotation_title: _annotation.title,
-                        annotation_content: _annotation.description,
-                        copy_and_edit_button: _this.copy_and_edit_button,
-                        button_text: _this.l10n.copy_and_edit,
-                    });
-                    _this.annotationContainer_$.html(_html);
-                    _this.selectedAnnotation = true;
+
+    draw() {
+      var _this = this;
+      this.renderTemplate();
+
+      this.annotationContainer_$ = this.$.find(".Ldt-LatestAnnotation");
+
+      if (this.selectable_annotations) {
+        this.onMdpEvent("AnnotationsList.refresh", function () {
+          _this.getWidgetAnnotations().forEach(function (_annotation) {
+            _annotation.off("click");
+            _annotation.on("click", function () {
+              var _user = {},
+                _user_display_string = "",
+                _users = this.source.users_data.filter(function (_user_data) {
+                  return _user_data.username == _annotation.creator;
                 });
-            }); 
+              if (_users.length == 0) {
+                _user.username = _annotation.creator;
+              } else {
+                _user = _users[0];
+              }
+              _user_display_string = _this.make_name_string_function(_user);
+              _html = Mustache.render(_this.annotationTemplate, {
+                annotation_created:
+                  _annotation.created.toLocaleDateString() +
+                  ", " +
+                  _annotation.created.toLocaleTimeString(),
+                annotation_creator: _user_display_string,
+                annotation_title: _annotation.title,
+                annotation_content: _annotation.description,
+                copy_and_edit_button: _this.copy_and_edit_button,
+                button_text: _this.l10n.copy_and_edit,
+              });
+              _this.annotationContainer_$.html(_html);
+              _this.selectedAnnotation = true;
+            });
+          });
         });
-        
-        this.segments = _this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
-        this.segments.forEach(function(_segment){
-            _segment.on("click", function(){
-                _this.selectedAnnotation = false;
-            })
-        })
+
+        this.segments = _this.source.getAnnotationsByTypeTitle(
+          this.segments_annotation_type
+        );
+        this.segments.forEach(function (_segment) {
+          _segment.on("click", function () {
+            _this.selectedAnnotation = false;
+          });
+        });
         this.currentSegment = false;
-    }
-    
-    this.onMediaEvent("timeupdate", function(){
+      }
+
+      this.onMediaEvent("timeupdate", function () {
         _this.refresh();
-    });
-    this.onMediaEvent("settimerange", function(_timeRange){
+      });
+      this.onMediaEvent("settimerange", function (_timeRange) {
         _this.refresh(_timeRange);
-    })
-    
-    if (this.starts_hidden){
+      });
+
+      if (this.starts_hidden) {
         this.visible = true;
         this.hide();
-    }
-    else{
+      } else {
         this.visible = false;
         this.show();
-    }
-    
-    this.selectedAnnotation = false; // This flag tells the widget if it must display last annotation (false) or clicked annotation (true)
-    this.player.trigger("AnnotationsList.refresh");
-    this.refresh();
-}
-
+      }
 
-IriSP.Widgets.LatestAnnotation.prototype.refresh = function(_timeRange){
-    _timeRange = typeof _timeRange !== 'undefined' ? _timeRange : false ;
-    var _this = this;
-    if (this.hide_without_segment){
-        if (!_timeRange && !this.media.getTimeRange()){
-            var _currentTime = this.media.getCurrentTime();
-            var _currentSegments = this.segments.filter(function(_segment){
-                return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
-            });
-            if (_currentSegments.length == 0){
-                this.currentSegment = false;
-                this.selectedAnnotation = false;
-            }
-            else {
-                this.currentSegment = _currentSegments[0]
-            }
-        }
-        else {
-            var _segmentBegin = _timeRange? _timeRange[0] : this.media.getTimeRange()[0],
-                _segmentEnd = _timeRange? _timeRange[1] : this.media.getTimeRange()[1];
-            if ((!this.currentSegment)||(this.currentSegment.begin != _segmentBegin || this.currentSegment.end != _segmentEnd)) {
-                var _currentSegments = this.segments.filter(function(_segment){
-                    return _segment.begin == _segmentBegin && _segment.end == _segmentEnd
-                });
-                if (_currentSegments.length > 0){
-                    this.selectedAnnotation = false;
-                    this.currentSegment = _currentSegments[0];
-                }
-            }
-        }
-        if (!this.currentSegment){
-            if (this.visible){
-                this.hide();
-            }
-        }
-        else {
-            if (!this.visible){
-                this.show();
-            }
-        }
-    }
-    
-    if (this.visible && !this.selectedAnnotation){
-        var _list = this.getWidgetAnnotations();
-        
-        if(this.filter_by_segment){
-            if (!this.currentSegment) {
-                _list = _list.filter(function(_annotation){
-                    return false;
-                });
-            }
-            else {
-                _list = _list.filter(function(_annotation){
-                    _annotationTime = (_annotation.begin+_annotation.end)/2;
-                    return (_this.currentSegment.begin <= _annotationTime && _this.currentSegment.end >= _annotationTime);
-                });
-            }
-        }
-        _list = _list.sortBy(function(_annotation){
-            return _annotation.created;
-        });
-        
-        var _latestAnnotation = false,
-            _html="",
-            _user_display_string = "",
-            _user = {};
-        if (_list.length != 0){
-            _latestAnnotation = _list.pop();
-            _users = this.source.users_data.filter(function(_user_data){
-                return _user_data.username == _latestAnnotation.creator
-            })
-            if (_users.length == 0){
-                _user.username = _latestAnnotation.creator;
-            }
-            else {
-                _user = _users[0];
-            }
-            _user_display_string = this.make_name_string_function(_user)
-            _html = Mustache.to_html(this.annotationTemplate, {
-                annotation_created: _latestAnnotation.created.toLocaleDateString()+", "+_latestAnnotation.created.toLocaleTimeString(),
-                annotation_creator: _user_display_string,
-                annotation_title: _latestAnnotation.title,
-                annotation_content: _latestAnnotation.description,
-                copy_and_edit_button: this.copy_and_edit_button,
-                button_text: this.l10n.copy_and_edit,
-            });
-        }
-        else {
-            var _empty_message = this.l10n.empty
-            if (this.empty_message) {
-                _empty_message = this.empty_message
-            }
-            _html = "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-NoAnnotation'>"+_empty_message+"</div>";
-        }
-        this.annotationContainer_$.html(_html);    
+      this.selectedAnnotation = false; // This flag tells the widget if it must display last annotation (false) or clicked annotation (true)
+      this.player.trigger("AnnotationsList.refresh");
+      this.refresh();
     }
 
-    if(this.copy_and_edit_button){
-        this.copyAndEditButton_$ = this.$.find('.Ldt-LatestAnnotation-CopyEditButton');
+    refresh(_timeRange) {
+      _timeRange = typeof _timeRange !== "undefined" ? _timeRange : false;
+      var _this = this;
+      if (this.hide_without_segment) {
+        if (!_timeRange && !this.media.getTimeRange()) {
+          var _currentTime = this.media.getCurrentTime();
+          var _currentSegments = this.segments.filter(function (_segment) {
+            return (
+              _currentTime >= _segment.begin && _currentTime <= _segment.end
+            );
+          });
+          if (_currentSegments.length == 0) {
+            this.currentSegment = false;
+            this.selectedAnnotation = false;
+          } else {
+            this.currentSegment = _currentSegments[0];
+          }
+        } else {
+          var _segmentBegin = _timeRange
+              ? _timeRange[0]
+              : this.media.getTimeRange()[0],
+            _segmentEnd = _timeRange
+              ? _timeRange[1]
+              : this.media.getTimeRange()[1];
+          if (
+            !this.currentSegment ||
+            this.currentSegment.begin != _segmentBegin ||
+            this.currentSegment.end != _segmentEnd
+          ) {
+            var _currentSegments = this.segments.filter(function (_segment) {
+              return (
+                _segment.begin == _segmentBegin && _segment.end == _segmentEnd
+              );
+            });
+            if (_currentSegments.length > 0) {
+              this.selectedAnnotation = false;
+              this.currentSegment = _currentSegments[0];
+            }
+          }
+        }
+        if (!this.currentSegment) {
+          if (this.visible) {
+            this.hide();
+          }
+        } else {
+          if (!this.visible) {
+            this.show();
+          }
+        }
+      }
+
+      if (this.visible && !this.selectedAnnotation) {
+        var _list = this.getWidgetAnnotations();
+
+        if (this.filter_by_segment) {
+          if (!this.currentSegment) {
+            _list = _list.filter(function (_annotation) {
+              return false;
+            });
+          } else {
+            _list = _list.filter(function (_annotation) {
+              _annotationTime = (_annotation.begin + _annotation.end) / 2;
+              return (
+                _this.currentSegment.begin <= _annotationTime &&
+                _this.currentSegment.end >= _annotationTime
+              );
+            });
+          }
+        }
+        _list = _list.sortBy(function (_annotation) {
+          return _annotation.created;
+        });
+
+        var _latestAnnotation = false,
+          _html = "",
+          _user_display_string = "",
+          _user = {};
+        if (_list.length != 0) {
+          _latestAnnotation = _list.pop();
+          _users = this.source.users_data.filter(function (_user_data) {
+            return _user_data.username == _latestAnnotation.creator;
+          });
+          if (_users.length == 0) {
+            _user.username = _latestAnnotation.creator;
+          } else {
+            _user = _users[0];
+          }
+          _user_display_string = this.make_name_string_function(_user);
+          _html = Mustache.render(this.annotationTemplate, {
+            annotation_created:
+              _latestAnnotation.created.toLocaleDateString() +
+              ", " +
+              _latestAnnotation.created.toLocaleTimeString(),
+            annotation_creator: _user_display_string,
+            annotation_title: _latestAnnotation.title,
+            annotation_content: _latestAnnotation.description,
+            copy_and_edit_button: this.copy_and_edit_button,
+            button_text: this.l10n.copy_and_edit,
+          });
+        } else {
+          var _empty_message = this.l10n.empty;
+          if (this.empty_message) {
+            _empty_message = this.empty_message;
+          }
+          _html =
+            "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-NoAnnotation'>" +
+            _empty_message +
+            "</div>";
+        }
+        this.annotationContainer_$.html(_html);
+      }
+
+      if (this.copy_and_edit_button) {
+        this.copyAndEditButton_$ = this.$.find(
+          ".Ldt-LatestAnnotation-CopyEditButton"
+        );
         this.copyAndEditButton_$.click(this.functionWrapper("copy_and_edit"));
-    }
-}
-
-IriSP.Widgets.LatestAnnotation.prototype.copy_and_edit = function(){
-    this.player.trigger("CreateAnnotation.show");
-    if (this.hide_annotations_list){
-        this.player.trigger("AnnotationsList.hide");
+      }
     }
-    annotationText = $('.Ldt-LatestAnnotation-Content').get(0).innerHTML;
-    
-    $('.Ldt-CreateAnnotation-Description').removeClass('empty');
-    $('.Ldt-CreateAnnotation-Description').val(annotationText);
-}
 
-IriSP.Widgets.LatestAnnotation.prototype.hide = function() {
-    if (this.visible){
+    copy_and_edit() {
+      this.player.trigger("CreateAnnotation.show");
+      if (this.hide_annotations_list) {
+        this.player.trigger("AnnotationsList.hide");
+      }
+      annotationText = $(".Ldt-LatestAnnotation-Content").get(0).innerHTML;
+
+      $(".Ldt-CreateAnnotation-Description").removeClass("empty");
+      $(".Ldt-CreateAnnotation-Description").val(annotationText);
+    }
+
+    hide() {
+      if (this.visible) {
         this.visible = false;
-        this.$.find('.Ldt-LatestAnnotation-header').hide();
-        this.annotationContainer_$.hide()
+        this.$.find(".Ldt-LatestAnnotation-header").hide();
+        this.annotationContainer_$.hide();
+      }
     }
-}
 
-IriSP.Widgets.LatestAnnotation.prototype.show = function() {
-    if(!this.visible){
+    show() {
+      if (!this.visible) {
         this.visible = true;
-        this.$.find('.Ldt-LatestAnnotation-header').show();
-        this.annotationContainer_$.show()
+        this.$.find(".Ldt-LatestAnnotation-header").show();
+        this.annotationContainer_$.show();
+      }
     }
-}
+  };
+};
+
+export { LatestAnnotation, latestAnnotationStyles };