--- a/integration/js/mediaplayer.js Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/mediaplayer.js Mon Nov 26 18:42:56 2012 +0100
@@ -5,14 +5,124 @@
url: IriSP.endpoints.content + options.id,
serializer: IriSP.serializers.content
}),
- apidirectory = new IriSP.Model.Directory();
+ apidirectory = new IriSP.Model.Directory(),
+ segmenttemplate = _.template(
+ '<div class="media-segment" data-mashup-id="<%= annotation.project_id %>">'
+ + '<div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;" data-segment-id="<%= annotation.id %>"></div>'
+ + '<div class="popin media-segment-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><img style="left:<%= pointerpos %>px;" class="pointer" src="img/popin-triangle.png" alt="" /><div class="popin-content">'
+ + '<h3><%= annotation.title %></h3>'
+ + '<p><%= IriSP.translate("From:") %> <span><%= annotation.begin.toString() %></span> <%= IriSP.translate("to:") %> <span><%= annotation.end.toString() %></span> (<%= IriSP.translate("duration:") %> <span><%= annotation.getDuration().toString() %></span>)</p>'
+ + '<p class="mashup-link"><%= IriSP.translate("From hashcut:") %> <a href="<%= IriSP.endpoints.hashcut_page + annotation.project_id %>"></a></p>'
+ + '</div></div></div>'
+ ),
+ segmentlisttemplate = _.template(
+ '<div class="media-segment-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %><div class="frise-position"></div></div>'
+ ),
+ projtemplate = _.template(
+ '<li class="item-video mashup" data-mashup-id="<%= ldt_id %>">'
+ + '<a href="<%= IriSP.endpoints.hashcut_page + ldt_id %>"><img class="thumbnail" alt="<%= title %>" src="<%= image %>"></a><div class="video-info">'
+ + '<h3 class="title-video"><a href="<%= IriSP.endpoints.hashcut_page + ldt_id %>"><%= title %></a></h3><p class="description"><%= description %></p>'
+ + '</p></div></li>'
+ ),
+ media;
+
+ function mediaSegmentList(_annotations) {
+ var html = '',
+ k = $(".Ldt-Slider").width() / media.duration,
+ lines = [];
+ _(_annotations).each(function(_a, i) {
+ var pos = k * (_a.begin + _a.end) / 2,
+ corrpos = Math.max(106, Math.min(516, pos)),
+ line = IriSP._(lines).find(function(line) {
+ return !IriSP._(line.annotations).find(function(ann) {
+ return ann.begin < _a.end && ann.end > _a.begin
+ });
+ });
+ if (!line) {
+ line = { index: lines.length, annotations: []};
+ lines.push(line);
+ }
+ line.annotations.push(_a);
+ vizdata = {
+ annotation : _a,
+ popleft : corrpos,
+ left : k * _a.begin,
+ width : k * _a.getDuration(),
+ height: 8,
+ top: 8 * line.index,
+ pointerpos : (pos - corrpos),
+ color: IriSP.vizcolors[i % IriSP.vizcolors.length]
+ }
+ html += segmenttemplate(vizdata);
+ });
+ return segmentlisttemplate({
+ height: 8 * lines.length,
+ segments: html
+ });
+ }
content.onLoad(function() {
IriSP.mashupcore(content, new IriSP.Model.Mashup(false, content));
- var media = content.getMedias()[0];
+ media = content.getMedias()[0];
+ apidirectory.remoteSource({
+ url: IriSP.endpoints.segment,
+ url_params: {
+ iri_id: options.id,
+ limit: 0
+ },
+ serializer: IriSP.serializers.segmentapi
+ }).onLoad(function() {
+ var medias = this.getMedias(),
+ annotations = this.getAnnotations(),
+ projlist = {};
+ $(".media-segments").html(mediaSegmentList(annotations));
+ annotations.forEach(function(a) {
+ projlist[a.project_id] = 1 + (projlist[a.project_id] || 0);
+ });
+ var projkeys = _(projlist)
+ .chain()
+ .keys()
+ .sortBy(function(v) {
+ return - projlist[v];
+ })
+ .first(8)
+ .value();
+ $.ajax({
+ url: IriSP.endpoints.project,
+ dataType: "json",
+ data: {
+ format: "json",
+ ldt_id__in: projkeys
+ },
+ traditional: true,
+ success: function(data) {
+ var proj = _(data.objects)
+ .filter(function(p) {
+ return /<inst/gm.test(p.ldt);
+ });
+ _(proj).each(function(p) {
+ $(".media-segment[data-mashup-id='" + p.ldt_id + "']").each(function() {
+ $(this)
+ .find(".mashup-link").show()
+ .find("a").text(p.title);
+ });
+ });
+ var html = _(proj)
+ .chain()
+ .sortBy(function(p) {
+ return - projlist[p.ldt_id];
+ })
+ .map(projtemplate)
+ .value()
+ .join("");
+ $(".list-video").html(html);
+ }
+ });
+ });
+
content.trigger("set-current", media);
$(".info-title a").text(media.title);
@@ -22,4 +132,28 @@
$(".info-tags td").text(media.keywords);
});
+
+ $(".media-segments").on("mouseover", ".media-segment", function() {
+ var el = $(this);
+ el.find(".media-segment-popin").show();
+ var pid = el.attr("data-mashup-id");
+ $(".item-video[data-mashup-id='" + pid + "']").addClass("active");
+ }).on("mouseout", ".media-segment", function() {
+ $(this).find(".media-segment-popin").hide();
+ $(".item-video").removeClass("active");
+ }).on("click", ".media-segment-section", function() {
+ var sid = $(this).attr("data-segment-id"),
+ s = apidirectory.getElement(sid);
+ media.setCurrentTime(s.begin);
+ });
+
+ $(".list-video").on("mouseover", ".item-video", function() {
+ var pid = $(this).attr("data-mashup-id");
+ $(".media-segment[data-mashup-id='" + pid + "']").addClass("active");
+ }).on("mouseout", ".item-video", function() {
+ $(".media-segment").removeClass("active");
+ });
}
+
+/* END mediaplayer.js */
+