--- a/integration/js/editor.js Tue Oct 30 18:45:16 2012 +0100
+++ b/integration/js/editor.js Wed Oct 31 21:16:02 2012 +0100
@@ -18,7 +18,14 @@
+ '<ul class="tools"><li><a class="edit" href="#" title="Éditer le segment"></a></li><li><a class="bottom" href="#" title="Descendre le segment"></a></li>'
+ '<li><a class="top" href="#" title="Remonter le segment"></a></li><li><a class="delete" href="#" title="Supprimer le segment"></a></li></ul></span></li>'),
viztemplate = _.template('<div class="frise-segment" style="background-color:<%= color %>; left:<%= left %>%; width:<%= width %>%;"></div>'),
- intervaltemplate = _.template('<span class="frise-indication" style="left:<%= left %>%;"><%= time.toString() %></span>');
+ intervaltemplate = _.template('<span class="frise-indication" style="left:<%= left %>%;"><%= time.toString() %></span>'),
+ 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:<%= annotation.getMedia().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">'
+ + '<h3><%= annotation.title %></h3><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>">Cloner le segment</a>'
+ + '<p>De: <span><%= annotation.begin.toString() %></span> à <span><%= annotation.end.toString() %></span> (durée: <span><%= annotation.getDuration().toString() %></span>)</p>'
+ + '</div></div></div></div>');
/* Fill left column with Media List */
@@ -114,6 +121,7 @@
/* Slider */
var timeSlider = $(".Ldt-Slider"),
+ timeSliderContainer = $(".Ldt-Slider-Container"),
slidersRange = 920;
timeSlider.slider({
range: "min",
@@ -136,7 +144,7 @@
timeSliderTimeoutDuration = 1500,
timeTooltip = $(".Ldt-Slider-Time");
- timeSlider.css(calculateSliderCss(timeSliderMinimizedHeight));
+ timeSliderContainer.css(calculateSliderCss(timeSliderMinimizedHeight));
timeSliderHandle.css(calculateHandleCss(timeSliderMinimizedHeight));
function timeSliderMouseOver() {
@@ -165,13 +173,13 @@
}, timeSliderTimeoutDuration);
}
- timeSlider
+ timeSliderContainer
.mouseover(function() {
timeTooltip.show();
timeSliderMouseOver();
})
- .mouseout(timeSliderMouseOut)
- .mousemove(function(_e) {
+ .mouseout(timeSliderMouseOut);
+ timeSlider.mousemove(function(_e) {
var _x = _e.pageX - timeSlider.offset().left,
_t = new IriSP.Model.Time(
currentMedia ? currentMedia.duration * _x / timeSlider.width() : 0
@@ -182,7 +190,7 @@
$(".Ldt-Ctrl").mouseover(timeSliderMouseOver).mouseout(timeSliderMouseOut);
function timeSliderAnimateToHeight(_height) {
- timeSlider.stop().animate(
+ timeSliderContainer.stop().animate(
calculateSliderCss(_height),
500,
function() {
@@ -419,12 +427,18 @@
f = slidersRange / currentMedia.duration,
tangleStart = $(".tangle-start"),
tangleEnd = $(".tangle-end"),
- tangleDuration = $(".tangle-duration");
+ tangleDuration = $(".tangle-duration"),
+ k = 100 / currentMedia.duration,
+ p = k * (start + end) / 2;
sliceSlider.slider( "values", [ f * start, f * end ] );
tangleStart.text(start.toString(tangleStart.hasClass("active"))).attr("data-milliseconds",start.milliseconds);
tangleEnd.text(end.toString(tangleEnd.hasClass("active"))).attr("data-milliseconds",end.milliseconds);
tangleDuration.text(dur.toString(tangleDuration.hasClass("active"))).attr("data-milliseconds",dur.milliseconds);
- $(".segment-info .pointer").css("left",(parseFloat($(".Ldt-Slice-left-handle").css("left")) + parseFloat($(".Ldt-Slice-right-handle").css("left")))/2)
+ $(".segment-info .pointer").css("left", p + "%");
+ $(".media-current-section").css({
+ left: (k * start) + "%",
+ width: (k * dur) + "%"
+ })
}
}
@@ -433,6 +447,7 @@
function setMedia(media) {
$(".col-left .item-video").removeClass("active");
$(".tutorial").hide();
+ //TODO: Show Tutorial when Hashcut is empty
if (currentMedia) {
currentMedia.pause();
}
@@ -477,7 +492,7 @@
$(".annotation-description").text(this.description);
setPointerToCurrentAnnotation();
}
- })
+ });
}
if (currentMedia.loaded) {
currentMedia.setCurrentTime(currentSegment.begin);
@@ -489,7 +504,34 @@
$("#segment-title").val(currentSegment.title);
$("#segment-description").val(currentSegment.description);
$("#segment-tags").val("");
+ var relatedSegments = mashup.segments.filter(function(_s) {
+ return _s.getMedia() === currentMedia && _s.annotation !== currentSegment;
+ });
+ var html = "";
+ if (relatedSegments.length) {
+ var k = $(".Ldt-Slider").width() / currentSegment.getMedia().duration,
+ currentleft = k * currentSegment.begin,
+ currentwidth = k * currentSegment.getDuration();
+ 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);
if (currentMedia.elementType === "mashup") {
showPreview();
mashup.checkLoaded();
@@ -759,6 +801,7 @@
if (segment) {
mashup.setCurrentTime(segment.begin);
}
+ return false;
})
/* Click on media items */
@@ -903,10 +946,30 @@
}
});
+ /* Click on current segment in Preview */
+
$(".mashup-description .edit").click(function() {
if (mashupCurrentAnnotation) {
currentSegment = mashupCurrentAnnotation.annotation;
setMedia(mashupCurrentAnnotation.getMedia());
}
- })
+ });
+
+ /* Handling related segments */
+
+ $(".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 s = project.getElement($(this).attr("data-segment-id"));
+ currentSegment.title = s.title;
+ currentSegment.description = s.description;
+ $("#segment-title").val(s.title);
+ $("#segment-description").val(s.description);
+ currentSegment.setBegin(s.begin);
+ currentSegment.setEnd(s.end);
+ return false;
+ });
+
}