diff -r 02c04d2c8fd8 -r ac1eacb3aa33 src/widgets/Segments.js --- 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 = - '
' - + '
' - + '
'; + static template = + '
' + + '
' + + '
'; -IriSP.Widgets.Segments.prototype.annotationTemplate = - '
'; + static annotationTemplate = + '
'; - -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 ? ( '
' + _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 ? "
" + _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 };