--- a/integration/js/editor.js Fri Nov 16 19:23:20 2012 +0100
+++ b/integration/js/editor.js Thu Nov 22 10:52:28 2012 +0100
@@ -25,25 +25,44 @@
serializer: IriSP.serializers.medialist
}),
mashup = new IriSP.Model.Mashup(false, project),
- mediatemplate = _.template('<li class="item-video media" data-media-id="<%= id %>"><div class="media-count-wrap"><span class="media-count"></span></div>'
- + '<img src="<%= thumbnail %>" alt="<%= title %>" />'
+ mediatemplate = _.template(
+ '<li class="item-video media" data-media-id="<%= id %>"><div class="media-count-wrap"><span class="media-count"></span></div>'
+ + '<img class="thumbnail" src="<%= thumbnail %>" alt="<%= title %>" />'
+ '<div class="video-info"><h3 class="title-video"><%= title %></h3><p class="description"><%= description %></p>'
- + '<p class="time-length"><%= IriSP.hc_messages.Duration_ %> <span><%= duration.toString() %></span></p></div></li>'),
- segmenttemplate = _.template('<li class="item-video annotation" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">'
- + '<img src="<%= annotation.thumbnail %>" alt="<%= annotation.getMedia().title %>" />'
+ + '<p class="time-length"><%= IriSP.hc_messages.Duration_ %> <span><%= duration.toString() %></span></p></div><div class="media-found-segments"></div></li>'
+ ),
+ segmenttemplate = _.template(
+ '<li class="item-video annotation" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">'
+ + '<img class="thumbnail" src="<%= annotation.thumbnail %>" alt="<%= annotation.getMedia().title %>" />'
+ '<div class="validate <%= annotation.status %>"><div class="validate-tooltip"><ul><li><%= annotation.status_messages.join("</li><li>") %></li></ul></div></div><div class="video-info"><h3 class="title-video"><%= annotation.getMedia().title %></h3>'
+ '<p class="subtitle"><%= annotation.title %></p><p class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</p>'
+ '<ul class="tools"><li><a class="edit" href="#" title="<%= IriSP.hc_messages.edit_segment %>"></a></li><li><a class="bottom" href="#" title="<%= IriSP.hc_messages.segment_down %>"></a></li>'
- + '<li><a class="top" href="#" title="<%= IriSP.hc_messages.segment_up %>"></a></li><li><a class="delete" href="#" title="<%= IriSP.hc_messages.delete_segment %>"></a></li></ul></div></li>'),
- mediasegmenttemplate = _.template('<div class="media-segments-list"><div class="media-segment">'
- + '<div class="media-section media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>"></div>'
- + '<div class="media-section media-current-section" style="left:<%= currentleft %>px; width:<%= currentwidth %>px;"><div class="media-current-section-inner"></div></div>'
- + '<div class="popin media-segment-popin" style="left:<%= popleft %>px"><img style="left:<%= pointerpos %>px;" class="pointer" src="img/popin-triangle.png" alt="" /><div class="popin-content">'
+ + '<li><a class="top" href="#" title="<%= IriSP.hc_messages.segment_up %>"></a></li><li><a class="delete" href="#" title="<%= IriSP.hc_messages.delete_segment %>"></a></li></ul></div></li>'
+ ),
+ mediasegmenttemplate = _.template(
+ '<div class="media-segment">'
+ + '<div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;"></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><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.hc_messages.clone_segment %></a>'
+ '<p><%= IriSP.hc_messages.From_ %> <span><%= annotation.begin.toString() %></span> <%= IriSP.hc_messages.to_ %> <span><%= annotation.end.toString() %></span> (<%= IriSP.hc_messages.duration_ %> <span><%= annotation.getDuration().toString() %></span>)</p>'
- + '</div></div></div></div>'),
+ + '</div></div></div>'
+ ),
+ mediasegmentlisttemplate = _.template(
+ '<div class="media-segment-list" style="height: <%= height %>px"><div class="media-current-section" style="left: <%= left %>px; width: <%= width %>px;"></div><div class="media-segment-list-inner"></div><%= segments %></div>'
+ ),
+ mediafoundtemplate = _.template(
+ '<div class="media-segment"><div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;"></div>'
+ + '<div class="popin media-found-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><%= title %></h3><a href="#" class="button clone-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.hc_messages.clone_segment %></a>'
+ + '</div></div></div>'
+ ),
+ mediafoundlisttemplate = _.template(
+ '<div class="media-found-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %></div>'
+ ),
mashupstatus = '',
addMode, currentMedia, currentSegment;
+
+ var colors = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];
IriSP.mashupcore(project, mashup);
@@ -116,25 +135,6 @@
});
$(".col-left .list-video").html(html);
project.getMedias().forEach(function(_m) {
-/* var dataType = (IriSP.Model.isLocalURL(options.segment_api_endpoint) ? "json" : "jsonp");
- $.ajax({
- url: ,
- dataType: dataType,
- data: {
- format: dataType,
- iri_id: _m.id
- },
- success: function(data) {
- console.log(data);
- if (data.objects && data.objects.length) {
- var mediaid = data.objects[0].iri_id;
- mediasegmentscache[mediaid] = data.objects;
- if (currentMedia && mediaid === currentMedia.id && currentSegment) {
- showOtherSegments();
- }
- }
- }
- }); */
apidirectory.remoteSource({
url: options.segment_api_endpoint,
url_params: {
@@ -168,17 +168,60 @@
}
$(".col-left .item-video").each(function() {
var li = $(this),
- title = $(this).find(".title-video"),
- titletext = title.text();
- if (val && find.test(titletext)) {
- title.html(titletext.replace(replace, '<span style="background: yellow;">$1</span>'));
+ mediaid = li.attr("data-media-id"),
+ media = directory.getElement(mediaid);
+ if (!val) {
+ li.find(".title-video").text(media.title);
+ li.find(".description").text(media.description);
+ li.find(".media-found-segments").html("");
li.show();
} else {
- title.text(titletext);
- if (val) {
+ var apimedia = apidirectory.getElement(mediaid);
+ if (apimedia) {
+ var annotations = apimedia.getAnnotations().searchByTextFields(val);
+ } else {
+ var annotations = [];
+ }
+ var found = find.test(media.title) || find.test(media.description) || annotations.length;
+ if (found) {
+ li.find(".title-video").html(media.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'));
+ li.find(".description").html(media.description.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'));
+ var html = '',
+ k = 230 / media.duration,
+ lines = [];
+ _(annotations).each(function(_a, i) {
+ var pos = k * (_a.begin + _a.end) / 2,
+ corrpos = Math.max(76, Math.min(156, 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,
+ left : k * _a.begin,
+ width : k * _a.getDuration(),
+ top: 8 * line.index,
+ color: colors[i % colors.length],
+ title: _a.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'),
+ popleft : corrpos,
+ pointerpos : (pos - corrpos),
+ }
+ html += mediafoundtemplate(vizdata);
+ });
+ html = mediafoundlisttemplate({
+ height: 8 * lines.length,
+ segments: html
+ });
+ li.find(".media-found-segments").html(html);
+ li.show();
+ } else {
li.hide();
- } else {
- li.show();
}
}
})
@@ -343,8 +386,8 @@
if (!currentSegment) {
currentSegment = new IriSP.Model.Annotation(false, project);
currentSegment.setMedia(currentMedia.id);
- currentSegment.setBegin(0);
- currentSegment.setEnd(currentMedia.duration);
+ currentSegment.setBegin(currentMedia.getCurrentTime());
+ currentSegment.setEnd(Math.min(currentMedia.getCurrentTime() + 180000, currentMedia.duration));
currentSegment.title = IriSP.hc_messages.segment_title_placeholder;
currentSegment.color = currentMedia.color;
currentSegment.thumbnail = currentMedia.thumbnail;
@@ -385,30 +428,12 @@
var relatedSegments = mashup.segments.filter(function(_s) {
return _s.getMedia() === currentMedia && _s.annotation !== currentSegment;
});
- var html = "",
- k = $(".Ldt-Slider").width() / currentMedia.duration,
- currentleft = k * currentSegment.begin,
- currentwidth = k * currentSegment.getDuration();
if (relatedSegments.length) {
- relatedSegments.forEach(function(_s) {
- var pos = k * (_s.annotation.begin + _s.annotation.end) / 2,
- corrpos = Math.max(145, Math.min(305, pos));
- vizdata = {
- annotation : _s.annotation,
- currentleft : currentleft,
- currentwidth : currentwidth,
- popleft : corrpos,
- left : k * _s.annotation.begin,
- width : k * _s.annotation.getDuration(),
- pointerpos : (pos - corrpos)
- }
- html += mediasegmenttemplate(vizdata);
- });
$(".self-media-segments").show();
} else {
$(".self-media-segments").hide();
}
- $(".self-media-segments .media-segments-list").html(html);
+ $(".self-media-segments .media-segments-list").html(mediaSegmentList(_(relatedSegments).pluck("annotation")));
showOtherSegments();
project.trigger("mouseout-annotation");
}
@@ -417,36 +442,53 @@
}
}
+ function mediaSegmentList(_annotations) {
+ var html = '',
+ k = $(".Ldt-Slider").width() / currentMedia.duration,
+ lines = [];
+ _(_annotations).each(function(_a, i) {
+ var pos = k * (_a.begin + _a.end) / 2,
+ corrpos = Math.max(145, Math.min(305, 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: colors[i % colors.length]
+ }
+ html += mediasegmenttemplate(vizdata);
+ });
+ return mediasegmentlisttemplate({
+ height: 8 * lines.length,
+ left: k * currentSegment.begin,
+ width: k * currentSegment.getDuration(),
+ segments: html
+ });
+ }
+
/* Show Related Segments */
function showOtherSegments() {
- var annotations = mediasegmentscache[currentMedia.id]
+ var annotations = mediasegmentscache[currentMedia.id];
+ $(".other-media-segments .media-segments-list").html(mediaSegmentList(annotations));
if (annotations && annotations.length) {
- var html = "",
- k = $(".Ldt-Slider").width() / currentMedia.duration,
- currentleft = k * currentSegment.begin,
- currentwidth = k * currentSegment.getDuration();
- annotations.forEach(function(_a) {
- var pos = k * (_a.begin + _a.end) / 2,
- corrpos = Math.max(145, Math.min(305, pos));
- vizdata = {
- annotation : _a,
- currentleft : currentleft,
- currentwidth : currentwidth,
- popleft : corrpos,
- left : k * _a.begin,
- width : k * _a.getDuration(),
- pointerpos : (pos - corrpos),
- color: currentMedia.color
- }
- html += mediasegmenttemplate(vizdata);
- });
$(".other-media-segments").show();
- $(".other-media-segments .media-segments-list").html(html);
}
else {
$(".other-media-segments").hide();
- $(".other-media-segments .media-segments-list").html("");
}
}
/* Set In, Out */
@@ -485,15 +527,16 @@
$("#segment-form").submit(function() {
if (addMode) {
mashup.addAnnotation(currentSegment);
+ currentSegment = undefined;
+ setMedia(currentMedia);
} else {
mashup.trigger("change");
- }
- var segment = mashup.getAnnotation(currentSegment);
- currentSegment = undefined;
- setMedia(mashup);
- if (segment) {
- mashup.setCurrentTime(segment.begin);
- mashup.trigger("enter-annotation",segment);
+ currentSegment = undefined;
+ setMedia(mashup);
+ if (segment) {
+ mashup.setCurrentTime(segment.begin);
+ mashup.trigger("enter-annotation",segment);
+ }
}
return false;
});
@@ -684,23 +727,52 @@
/* Handling related segments */
+ function cloneSegment(sid) {
+ var s = directory.getElement(sid) || apidirectory.getElement(sid),
+ media = directory.getElement(s.getMedia().id);
+
+ currentSegment = new IriSP.Model.Annotation(false, project);
+ currentSegment.setMedia(media.id);
+ currentSegment.setBegin(s.begin);
+ currentSegment.setEnd(s.end);
+ currentSegment.title = IriSP.hc_messages.copy_of_ + s.title;
+ currentSegment.description = s.description;
+ currentSegment.keywords = s.keywords;
+ currentSegment.color = media.color;
+ currentSegment.thumbnail = media.thumbnail;
+ currentSegment.created = new Date();
+ currentSegment.on("change-begin", function() {
+ if (currentMedia && currentSegment === this) {
+ currentMedia.setCurrentTime(this.begin);
+ updateSegmentUI();
+ }
+ });
+ currentSegment.on("change-end", function() {
+ if (currentMedia && currentSegment === this) {
+ currentMedia.setCurrentTime(this.end);
+ updateSegmentUI();
+ }
+ });
+ setMedia(media);
+ }
+
$(".media-segments-list").on("mouseover", ".media-segment", function() {
$(this).find(".media-segment-popin").show();
}).on("mouseout", ".media-segment", function() {
$(this).find(".media-segment-popin").hide();
}).on("click", ".reprendre-segment", function() {
- var sid = $(this).attr("data-segment-id"),
- s = directory.getElement(sid) || apidirectory.getElement(sid);
- currentSegment.title = IriSP.hc_messages.copy_of_ + s.title;
- currentSegment.description = s.description;
- $("#segment-title").val(IriSP.hc_messages.copy_of_ + s.title);
- $("#segment-description").val(s.description);
- currentSegment.setBegin(s.begin);
- currentSegment.setEnd(s.end);
- //TODO: ET LES TAGS !
+ cloneSegment($(this).attr("data-segment-id"));
return false;
});
+ $(".col-left").on("mouseover", ".media-segment", function() {
+ $(this).find(".media-found-popin").show();
+ }).on("mouseout", ".media-segment", function() {
+ $(this).find(".media-found-popin").hide();
+ }).on("click", ".clone-segment", function() {
+ cloneSegment($(this).attr("data-segment-id"));
+ return false;
+ });
/* Changing Hashcut Title and description */
mashup.title = IriSP.hc_messages.mashup_title_placeholder;
