hashcut: comparison integration/js/editor.js

Mercurial Mercurial > hashcut / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

integration/js/editor.js

changeset 29	5ce5e26091ea
parent 27	b2d068afdbd8
child 32	47f9a2d63a0a

equal deleted inserted replaced

-:2100ddc308f0
+:5ce5e26091ea
 + '<span class="video-info"><span class="title-video"><%= annotation.getMedia().title %></span>'
 + '<span class="subtitle"><%= annotation.title %></span><span class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</span>'
 + '<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 */
 project.onLoad(function() {
 var html = '';
 mashup.on("change",updateMashupUI);
 /* Slider */
 var timeSlider = $(".Ldt-Slider"),
+timeSliderContainer = $(".Ldt-Slider-Container"),
 slidersRange = 920;
 timeSlider.slider({
 range: "min",
 value: 0,
 min: 0,
 timeSliderMinimizedHeight = 4,
 timeSliderMaximizedHeight = 10,
 timeSliderTimeoutDuration = 1500,
 timeTooltip = $(".Ldt-Slider-Time");
-timeSlider.css(calculateSliderCss(timeSliderMinimizedHeight));
+timeSliderContainer.css(calculateSliderCss(timeSliderMinimizedHeight));
 timeSliderHandle.css(calculateHandleCss(timeSliderMinimizedHeight));
 function timeSliderMouseOver() {
 if (timeSliderTimeoutId) {
 window.clearTimeout(timeSliderTimeoutId);
 }
 timeSliderTimeoutId = false;
 }, timeSliderTimeoutDuration);
 }
-timeSlider
+timeSliderContainer
 .mouseover(function() {
 timeTooltip.show();
 timeSliderMouseOver();
 })
-.mouseout(timeSliderMouseOut)
+.mouseout(timeSliderMouseOut);
-.mousemove(function(_e) {
+timeSlider.mousemove(function(_e) {
 var _x = _e.pageX - timeSlider.offset().left,
 _t = new IriSP.Model.Time(
 currentMedia ? currentMedia.duration * _x / timeSlider.width() : 0
 );
 timeTooltip.text(_t.toString()).css("left",_x);
 });
 $(".Ldt-Ctrl").mouseover(timeSliderMouseOver).mouseout(timeSliderMouseOut);
 function timeSliderAnimateToHeight(_height) {
-timeSlider.stop().animate(
+timeSliderContainer.stop().animate(
 calculateSliderCss(_height),
 500,
 function() {
 IriSP.jQuery(this).css("overflow","visible");
 });
 end = currentSegment.end,
 dur = currentSegment.getDuration(),
 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) + "%"
+})
 }
 }
 var addMode;
 function setMedia(media) {
 $(".col-left .item-video").removeClass("active");
 $(".tutorial").hide();
+//TODO: Show Tutorial when Hashcut is empty
 if (currentMedia) {
 currentMedia.pause();
 }
 currentMedia = media;
 if (currentMedia.elementType == "media") {
 $(".annotation-end").text(this.end.toString());
 $(".annotation-media-title").text(this.getMedia().title);
 $(".annotation-description").text(this.description);
 setPointerToCurrentAnnotation();
 }
-})
+});
 }
 if (currentMedia.loaded) {
 currentMedia.setCurrentTime(currentSegment.begin);
 }
 $(".add-segment").val(addMode ? "Ajouter au Hashcut" : "Sauvegarder");
 updateSliderAndTangles();
 media.show();
 $("#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();
 }
 $(".Ldt-Ctrl-Time-Total").text(currentMedia.duration.toString());
 currentSegment = undefined;
 setMedia(mashup);
 if (segment) {
 mashup.setCurrentTime(segment.begin);
 }
+return false;
 })
 /* Click on media items */
 $(".col-left").on("click", ".item-video", function() {
 if (currentMedia && currentSegment) {
 currentSegment.setDuration(val);
 }
 });
+/* 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;
+});
 }

hashcut