diff -r 02c04d2c8fd8 -r ac1eacb3aa33 src/widgets/Arrow.js
--- a/src/widgets/Arrow.js	Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/Arrow.js	Wed Sep 04 17:32:50 2024 +0200
@@ -1,88 +1,145 @@
-IriSP.Widgets.Arrow = function(player, config) {
-    IriSP.Widgets.Widget.call(this, player, config);
-    this.current_pilot_widget = this.pilot_widget
-};
+import Raphael from "raphael";
 
-IriSP.Widgets.Arrow.prototype = new IriSP.Widgets.Widget();
+// Arrow
+const Arrow = function (ns) {
+  return class extends ns.Widgets.Widget {
+    constructor(player, config) {
+      super(player, config);
+      this.current_pilot_widget = this.pilot_widget;
+    }
 
-IriSP.Widgets.Arrow.prototype.defaults = {
-    arrow_height : 12,
-    arrow_width : 20,
-    base_height : 0,
-    base_curve : 0,
-    fill_url: IriSP.widgetsDir + '/img/pinstripe.png',
-    fill_color: "#ffffff", //Gradients can be used, e.g. "90-#000-#fff" for vertical white-to-black
-    stroke_color: "#b7b7b7",
-    stroke_width: 1.5,
-    animation_speed: 20
-};
+    static defaults = {
+      arrow_height: 12,
+      arrow_width: 20,
+      base_height: 0,
+      base_curve: 0,
+      fill_url: ns.widgetsDir + "/img/pinstripe.png",
+      fill_color: "#ffffff", //Gradients can be used, e.g. "90-#000-#fff" for vertical white-to-black
+      stroke_color: "#b7b7b7",
+      stroke_width: 1.5,
+      animation_speed: 20,
+    };
 
-IriSP.Widgets.Arrow.prototype.draw = function() {
-    this.height = this.arrow_height + this.base_height;
-    this.$.addClass("Ldt-Arrow").css({
-        height: (1+this.height) + "px",
+    draw() {
+      this.height = this.arrow_height + this.base_height;
+      this.$.addClass("Ldt-Arrow").css({
+        height: 1 + this.height + "px",
         "margin-top": "1px",
-        overflow: "hidden"
-    });
-    this.paper = new Raphael(this.container, this.width, 1+this.height );
-    window.myArrow = this;
-    this.svgArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height);
-    this.svgArrow.attr({
+        overflow: "hidden",
+      });
+      this.paper = new Raphael(this.container, this.width, 1 + this.height);
+      window.myArrow = this;
+      this.svgArrow = this.paper.path(
+        "M0," + this.height + "L" + this.width + "," + this.height
+      );
+      this.svgArrow.attr({
         stroke: this.stroke_color,
         "stroke-width": this.stroke_width,
-        fill: this.fill_url ? ( 'url(' + this.fill_url + ')' ) : this.fill_color
-    });
-    this.moveToX(0);
+        fill: this.fill_url ? "url(" + this.fill_url + ")" : this.fill_color,
+      });
+      this.moveToX(0);
+    }
+
+    drawAt(_x) {
+      _x = Math.max(0, Math.min(_x, this.width));
+      var _d =
+        "M0," +
+        this.height +
+        "L0," +
+        Math.min(this.height, this.arrow_height + this.base_curve) +
+        "Q0," +
+        this.arrow_height +
+        " " +
+        Math.max(0, Math.min(this.base_curve, _x - this.arrow_width / 2)) +
+        "," +
+        this.arrow_height +
+        "L" +
+        Math.max(0, _x - this.arrow_width / 2) +
+        "," +
+        this.arrow_height +
+        "L" +
+        Math.max(0, _x - this.arrow_width / 2) +
+        "," +
+        Math.min(
+          this.arrow_height,
+          (2 * this.arrow_height * _x) / this.arrow_width
+        ) +
+        "L" +
+        _x +
+        ",0" +
+        "L" +
+        Math.min(this.width, _x + this.arrow_width / 2) +
+        "," +
+        Math.min(
+          this.arrow_height,
+          (2 * this.arrow_height * (this.width - _x)) / this.arrow_width
+        ) +
+        "L" +
+        Math.min(this.width, _x + this.arrow_width / 2) +
+        "," +
+        this.arrow_height +
+        "L" +
+        Math.min(
+          this.width,
+          Math.max(this.width - this.base_curve, _x + this.arrow_width / 2)
+        ) +
+        "," +
+        this.arrow_height +
+        "Q" +
+        this.width +
+        "," +
+        this.arrow_height +
+        " " +
+        this.width +
+        "," +
+        Math.min(this.height, this.arrow_height + this.base_curve) +
+        "L" +
+        this.width +
+        "," +
+        this.height;
+      this.svgArrow.attr({
+        path: _d,
+      });
+    }
+
+    moveToX(_x) {
+      this.targetX = Math.max(0, Math.min(_x, this.width));
+      if (typeof this.animInterval === "undefined") {
+        this.animInterval = window.setInterval(
+          this.functionWrapper("increment"),
+          40
+        );
+      }
+      this.increment();
+    }
+
+    moveToTime(_t) {
+      this.moveToX((this.width * _t) / this.media.duration);
+    }
+
+    increment() {
+      if (typeof this.currentX === "undefined") {
+        this.currentX = this.targetX;
+      }
+      if (this.currentX < this.targetX) {
+        this.currentX = Math.min(
+          this.targetX,
+          this.currentX + this.animation_speed
+        );
+      }
+      if (this.currentX > this.targetX) {
+        this.currentX = Math.max(
+          this.targetX,
+          this.currentX - this.animation_speed
+        );
+      }
+      if (this.currentX === this.targetX) {
+        window.clearInterval(this.animInterval);
+        this.animInterval = undefined;
+      }
+      this.drawAt(this.currentX);
+    }
+  };
 };
 
-IriSP.Widgets.Arrow.prototype.drawAt = function(_x) {
-    _x = Math.max(0, Math.min(_x, this.width));
-    var _d = 'M0,' + this.height
-        + 'L0,' + Math.min( this.height, this.arrow_height + this.base_curve)
-        + 'Q0,' + this.arrow_height
-        + ' ' + Math.max(0, Math.min(this.base_curve, _x - this.arrow_width / 2)) + ',' + this.arrow_height
-        + 'L' + Math.max(0, _x - this.arrow_width / 2) + ',' + this.arrow_height
-        + 'L' + Math.max(0, _x - this.arrow_width / 2) + ',' + Math.min(this.arrow_height, 2 * this.arrow_height * _x / this.arrow_width)
-        + 'L' + _x + ',0'
-        + 'L' + Math.min(this.width, _x + this.arrow_width / 2) + ',' + Math.min(this.arrow_height, 2 * this.arrow_height * ( this.width - _x ) / this.arrow_width)
-        + 'L' + Math.min(this.width, _x + this.arrow_width / 2) + ',' + this.arrow_height
-        + 'L' + Math.min(this.width, Math.max(this.width - this.base_curve, _x + this.arrow_width / 2)) + ',' + this.arrow_height
-        + 'Q' + this.width + ',' + this.arrow_height
-        + ' ' + this.width + ',' + Math.min( this.height, this.arrow_height + this.base_curve)
-        + 'L' + this.width + ',' + this.height;
-    this.svgArrow.attr({
-        path: _d
-    });
-};
-
-IriSP.Widgets.Arrow.prototype.moveToX = function(_x) {
-    this.targetX = Math.max(0, Math.min(_x, this.width));
-    if (typeof this.animInterval === "undefined") {
-        this.animInterval = window.setInterval(
-            this.functionWrapper("increment"),
-            40
-        );
-    }
-    this.increment();
-};
-
-IriSP.Widgets.Arrow.prototype.moveToTime = function(_t) {
-    this.moveToX(this.width * _t / this.media.duration);
-};
-
-IriSP.Widgets.Arrow.prototype.increment = function() {
-    if (typeof this.currentX === "undefined") {
-        this.currentX = this.targetX;
-    }
-    if (this.currentX < this.targetX) {
-        this.currentX = Math.min(this.targetX, this.currentX + this.animation_speed);
-    }
-    if (this.currentX > this.targetX) {
-        this.currentX = Math.max(this.targetX, this.currentX - this.animation_speed);
-    }
-    if (this.currentX === this.targetX) {
-        window.clearInterval(this.animInterval);
-        this.animInterval = undefined;
-    }
-    this.drawAt(this.currentX);
-};
+export { Arrow };