--- a/src/widgets/MultiSegments.js Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/MultiSegments.js Wed Sep 04 17:32:50 2024 +0200
@@ -1,124 +1,127 @@
-IriSP.Widgets.MultiSegments = function(player, config) {
- IriSP.Widgets.Widget.call(this, player, config);
-};
+import _ from "lodash";
+import jQuery from "jquery";
-IriSP.Widgets.MultiSegments.prototype = new IriSP.Widgets.Widget();
+const MultiSegments = function (ns) {
+ return class extends ns.Widgets.Widget {
+ constructor(player, config) {
+ super(player, config);
+ }
-IriSP.Widgets.MultiSegments.prototype.defaults = {
- annotation_show_arrow: true,
- annotation_start_minimized: false,
- annotation_show_annotation_type: true,
- show_all: false
-};
+ static defaults = {
+ annotation_show_arrow: true,
+ annotation_start_minimized: false,
+ annotation_show_annotation_type: true,
+ show_all: false,
+ };
-IriSP.Widgets.MultiSegments.prototype.draw = function() {
- var _this = this,
+ draw() {
+ var _this = this,
lines = [],
currentLine = null,
segmentsopts = {},
annotationopts = {};
- IriSP._(this).each(function(_v,_k) {
+ _(this).each(function (_v, _k) {
if (/^segments_/.test(_k)) {
- segmentsopts[_k.replace(/^segments_/,"")] = _v;
+ segmentsopts[_k.replace(/^segments_/, "")] = _v;
}
if (/^annotation_/.test(_k)) {
- annotationopts[_k.replace(/^annotation_/,"")] = _v;
+ annotationopts[_k.replace(/^annotation_/, "")] = _v;
}
- });
- this.source.getAnnotationTypes().forEach(function(_anntype) {
- var segments = _anntype.getAnnotations().filter(function(_ann) {
- return _ann.getDuration() > 0 && _ann.getMedia().id == _this.media.id;
+ });
+ this.source.getAnnotationTypes().forEach(function (_anntype) {
+ var segments = _anntype.getAnnotations().filter(function (_ann) {
+ return _ann.getDuration() > 0 && _ann.getMedia().id == _this.media.id;
});
if (segments.length) {
-
- var visible = false;
-
- var line = {
- segmentWidget: IriSP.jQuery("<div>"),
- annotationWidget: IriSP.jQuery("<div>"),
- hasSegmentsNow: function() {
- var _time = _this.media.getCurrentTime();
- return !!segments.filter(function(_annotation) {
- return _annotation.begin <= _time && _annotation.end > _time;
- }).length;
- },
- hide: function() {
- if (visible) {
- visible = false;
- this.annotationWidget.slideUp();
- }
- },
- show: function() {
- if (!visible) {
- visible = true;
- this.annotationWidget.slideDown();
- }
- }
- };
-
-
- line.segmentWidget
- .addClass("Ldt-MultiSegments-Segment")
- .appendTo(_this.$);
-
- if (!_this.show_all) {
- line.segmentWidget.mouseenter(function() {
- if (line.hasSegmentsNow()) {
- currentLine = line;
- checkVisibilities();
- }
- });
- }
-
- line.annotationWidget
- .addClass("Ldt-MultiSegments-Annotation")
- .appendTo(_this.$)
- .hide();
-
- _this.insertSubwidget(
- line.segmentWidget,
- IriSP._({
- type: "Segments",
- annotation_type: _anntype,
- width: '100%'
- }).extend(segmentsopts)
- );
-
- _this.insertSubwidget(
- line.annotationWidget,
- IriSP._({
- type: "Annotation",
- annotation_type: _anntype,
- width: '100%'
- }).extend(annotationopts)
- );
-
- lines.push(line);
+ var visible = false;
+
+ var line = {
+ segmentWidget: jQuery("<div>"),
+ annotationWidget: jQuery("<div>"),
+ hasSegmentsNow: function () {
+ var _time = _this.media.getCurrentTime();
+ return !!segments.filter(function (_annotation) {
+ return _annotation.begin <= _time && _annotation.end > _time;
+ }).length;
+ },
+ hide: function () {
+ if (visible) {
+ visible = false;
+ this.annotationWidget.slideUp();
+ }
+ },
+ show: function () {
+ if (!visible) {
+ visible = true;
+ this.annotationWidget.slideDown();
+ }
+ },
+ };
+
+ line.segmentWidget
+ .addClass("Ldt-MultiSegments-Segment")
+ .appendTo(_this.$);
+
+ if (!_this.show_all) {
+ line.segmentWidget.on("mouseenter", function () {
+ if (line.hasSegmentsNow()) {
+ currentLine = line;
+ checkVisibilities();
+ }
+ });
+ }
+
+ line.annotationWidget
+ .addClass("Ldt-MultiSegments-Annotation")
+ .appendTo(_this.$)
+ .hide();
+
+ _this.insertSubwidget(
+ line.segmentWidget,
+ _({
+ type: "Segments",
+ annotation_type: _anntype,
+ width: "100%",
+ }).extend(segmentsopts).value()
+ );
+
+ _this.insertSubwidget(
+ line.annotationWidget,
+ _({
+ type: "Annotation",
+ annotation_type: _anntype,
+ width: "100%",
+ }).extend(annotationopts).value()
+ );
+
+ lines.push(line);
}
- });
-
- // open line on segment click
- IriSP.jQuery(document).on("click",".Ldt-Segments-Segment",function(e){
- if (!_this.show_all && currentLine && !currentLine.hasSegmentsNow()) {
- currentLine = undefined;
+ });
+
+ // open line on segment click
+ jQuery(document).on("click", ".Ldt-Segments-Segment", function (e) {
+ if (!_this.show_all && currentLine && !currentLine.hasSegmentsNow()) {
+ currentLine = undefined;
}
- IriSP._(lines).each(function(line) {
- if(IriSP.jQuery(e.target).parent().parent()[0]==line.segmentWidget[0]){
- currentLine = line;
- line.show();
- } else {
- line.hide();
- }
+ _(lines).each(function (line) {
+ if (
+ jQuery(e.target).parent().parent()[0] == line.segmentWidget[0]
+ ) {
+ currentLine = line;
+ line.show();
+ } else {
+ line.hide();
+ }
});
- });
-
- //var _annotationWidgets = _this.$.find(".Ldt-MultiSegments-Annotation");
-
- function checkVisibilities(_time) {
+ });
+
+ //var _annotationWidgets = _this.$.find(".Ldt-MultiSegments-Annotation");
+
+ function checkVisibilities(_time) {
/*if (!_this.show_all && currentLine && !currentLine.hasSegmentsNow()) {
currentLine = undefined;
}
- IriSP._(lines).each(function(line) {
+ _(lines).each(function(line) {
if (line.hasSegmentsNow()) {
if (!_this.show_all && !currentLine) {
currentLine = line;
@@ -132,5 +135,9 @@
line.hide();
}
});*/
+ }
}
+ };
};
+
+export { MultiSegments };