--- a/src/widgets/Segments.js Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/Segments.js Wed Sep 04 17:32:50 2024 +0200
@@ -1,241 +1,315 @@
-// TODO: Trigger IriSP.SegmentsWidget.click
+// TODO: Trigger ns.SegmentsWidget.click
+import Mustache from "mustache";
+import _ from "lodash";
+import jQuery from "jquery";
-IriSP.Widgets.Segments = function(player, config) {
- IriSP.Widgets.Widget.call(this, player, config);
-};
+import segmentsStyles from "./Segments.module.css";
-IriSP.Widgets.Segments.prototype = new IriSP.Widgets.Widget();
+const Segments = function (ns) {
+ return class extends ns.Widgets.Widget {
+ constructor(player, config) {
+ super(player, config);
+ }
-IriSP.Widgets.Segments.prototype.defaults = {
- annotation_type : "chap",
- colors: ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],
- line_height: 8,
- background: "#e0e0e0",
- overlap: .25,
- found_color: "#FF00FC",
- faded_found_color: "#ff80fc",
- selected_color: "#74d600",
- faded_selected_color: "#baf9b5",
- no_tooltip: false,
- use_timerange: false,
- scale_to_parent: true
-};
+ static defaults = {
+ annotation_type: "chap",
+ colors: [
+ "#1f77b4",
+ "#aec7e8",
+ "#ff7f0e",
+ "#ffbb78",
+ "#2ca02c",
+ "#98df8a",
+ "#d62728",
+ "#ff9896",
+ "#9467bd",
+ "#c5b0d5",
+ "#8c564b",
+ "#c49c94",
+ "#e377c2",
+ "#f7b6d2",
+ "#7f7f7f",
+ "#c7c7c7",
+ "#bcbd22",
+ "#dbdb8d",
+ "#17becf",
+ "#9edae5",
+ ],
+ line_height: 8,
+ background: "#e0e0e0",
+ overlap: 0.25,
+ found_color: "#FF00FC",
+ faded_found_color: "#ff80fc",
+ selected_color: "#74d600",
+ faded_selected_color: "#baf9b5",
+ no_tooltip: false,
+ use_timerange: false,
+ scale_to_parent: true,
+ };
-IriSP.Widgets.Segments.prototype.template =
- '<div class="Ldt-Segments-List"></div>'
- + '<div class="Ldt-Segments-Position"></div>'
- + '<div class="Ldt-Segments-Tooltip"></div>';
+ static template =
+ '<div class="Ldt-Segments-List"></div>' +
+ '<div class="Ldt-Segments-Position"></div>' +
+ '<div class="Ldt-Segments-Tooltip"></div>';
-IriSP.Widgets.Segments.prototype.annotationTemplate =
- '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}, from:{{from}}, to:{{to}}" segment-text="{{text}}"'
- + 'style="top:{{top}}px; height:{{height}}px; left:{{left}}px; width:{{width}}px; background:{{medcolor}}" data-base-color="{{color}}" data-low-color="{{lowcolor}}" data-medium-color="{{medcolor}}"></div>';
+ static annotationTemplate =
+ '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}, from:{{from}}, to:{{to}}" segment-text="{{text}}"' +
+ 'style="top:{{top}}px; height:{{height}}px; left:{{left}}px; width:{{width}}px; background:{{medcolor}}" data-base-color="{{color}}" data-low-color="{{lowcolor}}" data-medium-color="{{medcolor}}"></div>';
-
-IriSP.Widgets.Segments.prototype.do_draw = function (isRedraw) {
- if (this.width != this.$.parent().width() && this.scale_to_parent) {
+ do_draw(isRedraw) {
+ if (this.width != this.$.parent().width() && this.scale_to_parent) {
// Reset width
this.width = this.$.parent().width();
- this.$.css({ width : this.width + "px" });
- }
- var _this = this,
- _list = this.getWidgetAnnotations().filter(function(_ann) {
- return _ann.getDuration() > 0 && _ann.getMedia().id == _this.media.id;
+ this.$.css({ width: this.width + "px" });
+ }
+ var _this = this,
+ _list = this.getWidgetAnnotations().filter(function (_ann) {
+ return _ann.getDuration() > 0 && _ann.getMedia().id == _this.media.id;
}),
_scale = this.width / this.source.getDuration(),
- list_$ = this.$.find('.Ldt-Segments-List'),
+ list_$ = this.$.find(".Ldt-Segments-List"),
lines = [],
zindex = 1,
searching = false;
-
- function saturate(r, g, b, s) {
+
+ function saturate(r, g, b, s) {
function satcomp(c) {
- return Math.floor(240 * (1 - s) + c * s);
+ return Math.floor(240 * (1 - s) + c * s);
}
- var res = ( 0x10000 * satcomp(r) + 0x100 * satcomp(g) + satcomp(b)).toString(16);
+ var res = (
+ 0x10000 * satcomp(r) +
+ 0x100 * satcomp(g) +
+ satcomp(b)
+ ).toString(16);
while (res.length < 6) {
- res = "0" + res;
+ res = "0" + res;
}
return "#" + res;
- }
+ }
- if (isRedraw) {
+ if (isRedraw) {
// Remove all previous elements before recreating them. Not very efficient.
- this.$.find('.Ldt-Segments-Segment').remove();
- }
- _list.forEach(function(_annotation, _k) {
+ this.$.find(".Ldt-Segments-Segment").remove();
+ }
+ _list.forEach(function (_annotation, _k) {
var _left = _annotation.begin * _scale,
- _width = ( _annotation.getDuration() ) * _scale,
- _center = Math.floor( _left + _width / 2 ),
- _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ),
- line = IriSP._(lines).find(function(line) {
- return !IriSP._(line.annotations).find(function(a) {
- return a.begin < _annotation.end && a.end > _annotation.begin;
- });
+ _width = _annotation.getDuration() * _scale,
+ _center = Math.floor(_left + _width / 2),
+ _fulltext =
+ _annotation.title +
+ (_annotation.description ? "<br/>" + _annotation.description : ""),
+ line = _(lines).find(function (line) {
+ return !_(line.annotations).find(function (a) {
+ return a.begin < _annotation.end && a.end > _annotation.begin;
});
+ });
if (!line) {
- line = { index: lines.length, annotations: []};
- lines.push(line);
+ line = { index: lines.length, annotations: [] };
+ lines.push(line);
}
line.annotations.push(_annotation);
- var _top = ((1 - _this.overlap) * line.index) * _this.line_height,
- color = ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ),
- r = parseInt(color.substr(1,2),16),
- g = parseInt(color.substr(3,2),16),
- b = parseInt(color.substr(5,2),16),
- medcolor = saturate(r, g, b, .5),
- lowcolor = saturate(r, g, b, .2);
+ var _top = (1 - _this.overlap) * line.index * _this.line_height,
+ color =
+ typeof _annotation.color !== "undefined" && _annotation.color
+ ? _annotation.color
+ : _this.colors[_k % _this.colors.length],
+ r = parseInt(color.substr(1, 2), 16),
+ g = parseInt(color.substr(3, 2), 16),
+ b = parseInt(color.substr(5, 2), 16),
+ medcolor = saturate(r, g, b, 0.5),
+ lowcolor = saturate(r, g, b, 0.2);
var _data = {
- color : color,
- medcolor: medcolor,
- lowcolor: lowcolor,
- text: (_annotation.creator ? (_annotation.creator + " : ") : "" ) + _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'),
- left : _left,
- width : _width,
- top: _top,
- height: _this.line_height - 1,
- id : _annotation.id,
- media_id : _annotation.getMedia().id,
- from: _annotation.begin.toString(),
- to: _annotation.end.toString()
+ color: color,
+ medcolor: medcolor,
+ lowcolor: lowcolor,
+ text:
+ (_annotation.creator ? _annotation.creator + " : " : "") +
+ _fulltext
+ .replace(/(\n|\r|\r\n)/gm, " ")
+ .replace(/(^.{120,140})[\s].+$/m, "$1…"),
+ left: _left,
+ width: _width,
+ top: _top,
+ height: _this.line_height - 1,
+ id: _annotation.id,
+ media_id: _annotation.getMedia().id,
+ from: _annotation.begin.toString(),
+ to: _annotation.end.toString(),
};
- var _html = Mustache.to_html(_this.annotationTemplate, _data),
- _el = IriSP.jQuery(_html);
- _el.mouseover(function() {
- _annotation.trigger("select");
- })
- .mouseout(function() {
- _annotation.trigger("unselect");
- })
- .click(function() {
- if(_this.use_timerange){
- if(!_this.media.getTimeRange()){
- _this.media.setCurrentTime(_annotation.begin);
- _this.media.setTimeRange(_annotation.begin, _annotation.end);
- _this.media.play();
- _this.$segments.each(function(){
- var _segment = IriSP.jQuery(this);
- _segment.css("background", lowcolor).removeClass("selected");
- })
- _el.css("background", _this.selected_color).addClass("selected");
- }
- else if (_this.media.getTimeRange()[0]==_annotation.begin || _this.media.getTimeRange()[1]==_annotation.end){
- _this.media.resetTimeRange();
- _this.$segments.each(function(){
- var _segment = IriSP.jQuery(this);
- _segment.css("background", lowcolor).removeClass("selected");
- _annotation.trigger("select");
- })
- }
- else {
- _this.media.setCurrentTime(_annotation.begin);
- _this.media.setTimeRange(_annotation.begin, _annotation.end);
- _this.media.play();
- _this.$segments.each(function(){
- var _segment = IriSP.jQuery(this);
- _segment.css("background", lowcolor).removeClass("selected");
- })
- _el.css("background", _this.selected_color).addClass("selected");
- }
- }
- _annotation.trigger("click");
- })
- .appendTo(list_$);
- IriSP.attachDndData(_el, {
- title: _annotation.title,
- description: _annotation.description,
- uri: (typeof _annotation.url !== "undefined"
- ? _annotation.url
- : (document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id)),
- image: _annotation.thumbnail,
- text: '[' + _annotation.begin.toString() + '] ' + _annotation.title
+ var _html = Mustache.render(_this.constructor.annotationTemplate, _data),
+ _el = jQuery(_html);
+ _el
+ .on("mouseover", function () {
+ _annotation.trigger("select");
+ })
+ .on("mouseout", function () {
+ _annotation.trigger("unselect");
+ })
+ .on("click", function () {
+ if (_this.use_timerange) {
+ if (!_this.media.getTimeRange()) {
+ _this.media.setCurrentTime(_annotation.begin);
+ _this.media.setTimeRange(_annotation.begin, _annotation.end);
+ _this.media.play();
+ _this.$segments.each(function () {
+ var _segment = jQuery(this);
+ _segment.css("background", lowcolor).removeClass("selected");
+ });
+ _el
+ .css("background", _this.selected_color)
+ .addClass("selected");
+ } else if (
+ _this.media.getTimeRange()[0] == _annotation.begin ||
+ _this.media.getTimeRange()[1] == _annotation.end
+ ) {
+ _this.media.resetTimeRange();
+ _this.$segments.each(function () {
+ var _segment = jQuery(this);
+ _segment.css("background", lowcolor).removeClass("selected");
+ _annotation.trigger("select");
+ });
+ } else {
+ _this.media.setCurrentTime(_annotation.begin);
+ _this.media.setTimeRange(_annotation.begin, _annotation.end);
+ _this.media.play();
+ _this.$segments.each(function () {
+ var _segment = jQuery(this);
+ _segment.css("background", lowcolor).removeClass("selected");
+ });
+ _el
+ .css("background", _this.selected_color)
+ .addClass("selected");
+ }
+ }
+ _annotation.trigger("click");
+ })
+ .appendTo(list_$);
+ ns.attachDndData(_el, {
+ title: _annotation.title,
+ description: _annotation.description,
+ uri:
+ typeof _annotation.url !== "undefined"
+ ? _annotation.url
+ : document.location.href.replace(/#.*$/, "") +
+ "#id=" +
+ _annotation.id,
+ image: _annotation.thumbnail,
+ text: "[" + _annotation.begin.toString() + "] " + _annotation.title,
+ });
+ _annotation.on("select", function () {
+ _this.$segments.each(function () {
+ var _segment = jQuery(this);
+ _segment.css({
+ background: _segment.hasClass("found")
+ ? _this.faded_found_color
+ : _segment.attr("data-low-color"),
+ });
+ _segment.css({
+ background: _segment.hasClass("selected")
+ ? _this.faded_selected_color
+ : _segment.attr("data-low-color"),
+ });
+ });
+ _el.css({
+ background: _el.hasClass("found") ? _this.found_color : color,
+ background: _el.hasClass("selected") ? _this.selected_color : color,
+ "z-index": ++zindex,
+ });
+ if (_this.tooltip) {
+ _this.tooltip.show(_center, _top, _data.text, _data.color);
+ }
});
- _annotation.on("select", function() {
- _this.$segments.each(function() {
- var _segment = IriSP.jQuery(this);
- _segment.css({
- background: _segment.hasClass("found") ? _this.faded_found_color : _segment.attr("data-low-color")
- });
- _segment.css({
- background: _segment.hasClass("selected") ? _this.faded_selected_color : _segment.attr("data-low-color")
- })
- });
- _el.css({
- background: _el.hasClass("found") ? _this.found_color: color,
- background: _el.hasClass("selected") ? _this.selected_color: color,
- "z-index": ++zindex
- });
- if (_this.tooltip) {
- _this.tooltip.show( _center, _top, _data.text, _data.color );
- }
+ _annotation.on("unselect", function () {
+ if (_this.tooltip) {
+ _this.tooltip.hide();
+ }
+ _this.$segments.each(function () {
+ var _segment = jQuery(this);
+ _segment.css(
+ "background",
+ _segment.hasClass("found")
+ ? _this.found_color
+ : _segment.attr(
+ searching ? "data-low-color" : "data-medium-color"
+ )
+ );
+ _segment.css(
+ "background",
+ _segment.hasClass("selected")
+ ? _this.selected_color
+ : _segment.attr(
+ searching ? "data-low-color" : "data-medium-color"
+ )
+ );
+ });
+ });
+ _annotation.on("found", function () {
+ _el.css("background", _this.found_color).addClass("found");
+ });
+ _annotation.on("not-found", function () {
+ _el.css("background", lowcolor).removeClass("found");
+ });
+ });
+
+ this.onMediaEvent("resettimerange", function () {
+ _this.$segments.each(function () {
+ var _segment = jQuery(this);
+ _segment.removeClass("selected");
});
- _annotation.on("unselect", function() {
- if (_this.tooltip) {
- _this.tooltip.hide();
- }
- _this.$segments.each(function() {
- var _segment = IriSP.jQuery(this);
- _segment.css("background", _segment.hasClass("found") ? _this.found_color : _segment.attr(searching ? "data-low-color" : "data-medium-color"));
- _segment.css("background", _segment.hasClass("selected") ? _this.selected_color : _segment.attr(searching ? "data-low-color" : "data-medium-color"));
- });
- });
- _annotation.on("found", function() {
- _el.css("background", _this.found_color).addClass("found");
- });
- _annotation.on("not-found", function() {
- _el.css("background", lowcolor).removeClass("found");
+ });
+
+ this.$.css({
+ width: this.width + "px",
+ height:
+ ((1 - this.overlap) * lines.length + this.overlap) *
+ this.line_height +
+ "px",
+ background: this.background,
+ margin: "1px 0",
+ });
+ this.$segments = this.$.find(".Ldt-Segments-Segment");
+ }
+
+ draw() {
+ var widget = this;
+ widget.onMediaEvent("timeupdate", "onTimeupdate");
+ widget.renderTemplate();
+ widget.do_draw();
+ if (!this.no_tooltip) {
+ widget.insertSubwidget(
+ widget.$.find(".Ldt-Segments-Tooltip"),
+ {
+ type: "Tooltip",
+ min_x: 0,
+ max_x: this.width,
+ },
+ "tooltip"
+ );
+ }
+ widget.source.getAnnotations().on("search", function () {
+ searching = true;
+ });
+ widget.source.getAnnotations().on("search-cleared", function () {
+ searching = false;
+ _this.$segments.each(function () {
+ var _segment = jQuery(this);
+ _segment
+ .css("background", _segment.attr("data-medium-color"))
+ .removeClass("found");
});
- });
-
- this.onMediaEvent("resettimerange", function(){
-
- _this.$segments.each(function(){
- var _segment = IriSP.jQuery(this);
- _segment.removeClass("selected");
- })
- });
-
- this.$.css({
- width : this.width + "px",
- height : (((1 - this.overlap) * lines.length + this.overlap) * this.line_height) + "px",
- background : this.background,
- margin: "1px 0"
- });
- this.$segments = this.$.find('.Ldt-Segments-Segment');
+ });
+ this.$.on("resize", function () {
+ widget.do_draw(true);
+ });
+ }
+
+ onTimeupdate(_time) {
+ var _x = Math.floor((this.width * _time) / this.media.duration);
+ this.$.find(".Ldt-Segments-Position").css({
+ left: _x + "px",
+ });
+ }
+ };
};
-IriSP.Widgets.Segments.prototype.draw = function() {
- var widget = this;
- widget.onMediaEvent("timeupdate", "onTimeupdate");
- widget.renderTemplate();
- widget.do_draw();
- if (!this.no_tooltip) {
- widget.insertSubwidget(
- widget.$.find(".Ldt-Segments-Tooltip"),
- {
- type: "Tooltip",
- min_x: 0,
- max_x: this.width
- },
- "tooltip"
- );
- };
- widget.source.getAnnotations().on("search", function() {
- searching = true;
- });
- widget.source.getAnnotations().on("search-cleared", function() {
- searching = false;
- _this.$segments.each(function() {
- var _segment = IriSP.jQuery(this);
- _segment.css("background", _segment.attr("data-medium-color")).removeClass("found");
- });
- });
- this.$.on("resize", function () { widget.do_draw(true); });
-};
-
-IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {
- var _x = Math.floor( this.width * _time / this.media.duration);
- this.$.find('.Ldt-Segments-Position').css({
- left: _x + "px"
- });
-};
-
+export { Segments, segmentsStyles };