diff -r 7c67caaafdeb -r 761ba7426984 web/res/metadataplayer/Segments.js --- a/web/res/metadataplayer/Segments.js Mon Nov 20 18:10:58 2023 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,241 +0,0 @@ -// TODO: Trigger IriSP.SegmentsWidget.click - -IriSP.Widgets.Segments = function(player, config) { - IriSP.Widgets.Widget.call(this, player, config); -}; - -IriSP.Widgets.Segments.prototype = new IriSP.Widgets.Widget(); - -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 -}; - -IriSP.Widgets.Segments.prototype.template = - '
' - + '
' - + '
'; - -IriSP.Widgets.Segments.prototype.annotationTemplate = - '
'; - - -IriSP.Widgets.Segments.prototype.do_draw = function (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; - }), - _scale = this.width / this.source.getDuration(), - list_$ = this.$.find('.Ldt-Segments-List'), - lines = [], - zindex = 1, - searching = false; - - function saturate(r, g, b, s) { - function satcomp(c) { - return Math.floor(240 * (1 - s) + c * s); - } - var res = ( 0x10000 * satcomp(r) + 0x100 * satcomp(g) + satcomp(b)).toString(16); - while (res.length < 6) { - res = "0" + res; - } - return "#" + res; - } - - if (isRedraw) { - // Remove all previous elements before recreating them. Not very efficient. - 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; - }); - }); - if (!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 _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() - }; - 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 - }); - _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 = 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.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'); -}; - -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" - }); -}; -