// TODO: Trigger ns.SegmentsWidget.click
import Mustache from "mustache";
import _ from "lodash";
import jQuery from "jquery";
import segmentsStyles from "./Segments.module.css";
const Segments = function (ns) {
return class extends ns.Widgets.Widget {
constructor(player, config) {
super(player, config);
}
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,
};
static template =
'<div class="Ldt-Segments-List"></div>' +
'<div class="Ldt-Segments-Position"></div>' +
'<div class="Ldt-Segments-Tooltip"></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>';
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;
}),
_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 ? "<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.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, 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)/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.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("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");
});
});
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.$.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",
});
}
};
};
export { Segments, segmentsStyles };