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 32	47f9a2d63a0a
parent 29	5ce5e26091ea
child 39	d3d8a88878ed

equal deleted inserted replaced

-:1cb099921ca8
+:47f9a2d63a0a
+IriSP.hc_messages = {
+duration_ : "Durée :",
+edit_segment: "Éditer le segment",
+segment_down: "Descendre le segment",
+segment_up: "Remonter le segment",
+delete_segment: "Supprimer le segment"
+}
 IriSP.Hashcut = function(options) {
 /* Load Media List */
 var directory = new IriSP.Model.Directory(),
 project = directory.remoteSource({
 serializer: IriSP.serializers.medialist
 }),
 mashup = new IriSP.Model.Mashup(false, project),
 mediatemplate = _.template('<li class="item-video" data-media-id="<%= id %>"><img src="<%= thumbnail %>" alt="<%= title %>" />'
 + '<span class="video-info"><span class="title-video"><%= title %></span><span class="author"><%= description %></span>'
-+ '<span class="time-length">Durée : <span><%= duration.toString() %></span></span></span></li>'),
++ '<span class="time-length"><%= IriSP.hc_messages.duration_ %> <span><%= duration.toString() %></span></span></span></li>'),
 segmenttemplate = _.template('<li class="item-video" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">'
 + '<img src="<%= annotation.getMedia().thumbnail %>" alt="<%= annotation.getMedia().title %>" />'
 + '<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>'
++ '<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="Remonter le segment"></a></li><li><a class="delete" href="#" title="Supprimer le segment"></a></li></ul></span></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></span></li>'),
-viztemplate = _.template('<div class="frise-segment" style="background-color:<%= color %>; left:<%= left %>%; width:<%= width %>%;"></div>'),
+viztemplate = _.template('<div class="frise-segment" data-segment-id="<%= segmentid %>" style="background-color:<%= color %>; left:<%= left %>%; width:<%= width %>%;"></div>'),
 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">'
 mashup.segments.forEach(function(_s) {
 listhtml += segmenttemplate(_s);
 var vizdata = {
 left: k * t,
 width: k * _s.duration,
-color: _s.getMedia().color
+color: _s.getMedia().color,
+segmentid: _s.annotation.id
 }
 vizhtml += viztemplate(vizdata);
 t += _s.duration.milliseconds;
 });
 })
 .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
 );
 timeTooltip.text(_t.toString()).css("left",_x);
 });
 $(".Ldt-Ctrl").mouseover(timeSliderMouseOver).mouseout(timeSliderMouseOut);
 mashupCurrentAnnotation = null,
 mashupSegmentBegin,
 mashupSegmentEnd,
 mashupTimecode = 0,
 mashupSeeking = false,
-mashupSeekdiv,
+seekdiv = $(".video-wait"),
 mashupTimedelta;
+function showSeek() {
+if (mashupSeeking) {
+seekdiv.show();
+}
+}
 function changeCurrentAnnotation() {
 if (mashupTimecode >= mashup.duration) {
 if (!mashup.paused) {
 mashup.paused = true;
 mashup.trigger("pause");
 mashupCurrentMedia.seeking = true;
 if (!mashup.paused) {
 mashupCurrentMedia.play();
 mashupSeeking = true;
-//TODO:            _seekdiv.show();
+setTimeout(showSeek,200);
 }
 mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
 }
 }
 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") {
 $("video").hide();
-$(".col-left .item-video[data-media-id='" + currentMedia.id + "']").addClass("active");
 showSegmentation();
+if (!currentMedia.loaded) {
+seekdiv.show();
+}
 var currentvideo = $('#video_' + currentMedia.id);
 if (!currentvideo.length) {
 addMediaPlayer(currentMedia);
 }
 $(".tab-media-title").text(currentMedia.title);
 $(".annotation-begin").text(this.begin.toString());
 $(".annotation-end").text(this.end.toString());
 $(".annotation-media-title").text(this.getMedia().title);
 $(".annotation-description").text(this.description);
 setPointerToCurrentAnnotation();
+highlightCurrentSegment();
 }
 });
 }
 if (currentMedia.loaded) {
 currentMedia.setCurrentTime(currentSegment.begin);
 });
 // Binding UI Events and Mashup Playing to Media
 media.on("loadedmetadata", function() {
+if (media === currentMedia) {
+seekdiv.hide();
+}
 mashup.checkLoaded();
 });
 media.on("play", function() {
 if (media === currentMedia) {
 media.on("seeked", function() {
 media.seeking = false;
 if (mashup === currentMedia && media === mashupCurrentMedia && mashupSeeking) {
 mashupSeeking = false;
-//TODO:                _seekdiv.hide();
+seekdiv.hide();
 }
 });
 media.on("volumechange", function() {
 if (media === currentMedia) {
 }
 function showPreview() {
 $(".col-middle").removeClass("empty-mode segment-mode").addClass("pvw-mode");
 return false;
 }
+function showEmpty() {
+$("video").hide();
+$(".col-middle").removeClass("pvw-mode segment-mode").addClass("empty-mode");
+return false;
+}
 $(".tab-pvw").click(function() {
 if (mashup.segments.length) {
 setMedia(mashup);
 }
 var ids = $(".organize-segments .item-video").map(function(){return $(this).attr("data-segment-id")});
 mashup.setAnnotationsById(ids);
 }
 function highlightCurrentSegment() {
-$(".organize-segments .item-video").removeClass("active");
+$(".organize-segments .item-video, .col-left .item-video, .frise-segment").removeClass("active");
+var segmentid = undefined;
 if (currentMedia && currentSegment) {
-$(".item-video[data-segment-id='" + currentSegment.id + "']").addClass("active");
+segmentid = currentSegment.id;
 }
-}
+if (currentMedia === mashup && mashupCurrentAnnotation) {
+segmentid = mashupCurrentAnnotation.annotation.id;
-$(".organize-segments").sortable({
+}
+$(".item-video[data-segment-id='" + segmentid + "']").addClass("active");
+var mediaid = undefined;
+if (currentMedia) {
+mediaid = currentMedia.id;
+}
+if (currentMedia === mashup && mashupCurrentMedia) {
+mediaid = mashupCurrentMedia.id
+}
+$(".col-left .item-video[data-media-id='" + mediaid + "']").addClass("active");
+}
+function hoverSegment() {
+var segmentid = $(this).attr("data-segment-id");
+$(".organize-segments .item-video, .frise-segment").removeClass("active");
+$(".item-video[data-segment-id='" + segmentid + "'], .frise-segment[data-segment-id='" + segmentid + "']").addClass("active");
+}
+$(".frise")
+.on("mouseover", ".frise-segment", hoverSegment)
+.on("mouseout", ".frise-segment", highlightCurrentSegment)
+$(".organize-segments")
+.sortable({
 stop : reorganizeMashup
-});
+})
+.on("mouseover", ".item-video", hoverSegment)
-$(".organize-segments").on("click", ".item-video", function(e) {
+.on("mouseout", ".item-video", highlightCurrentSegment)
+.on("click", ".item-video", function(e) {
 var el = $(this),
 segment = mashup.getAnnotationById(el.attr("data-segment-id"));
 setMedia(mashup);
 if (segment) {
 mashup.setCurrentTime(segment.begin);
 }
 return false;
-});
+})
+.on("click", ".edit", function(e) {
-$(".organize-segments").on("click", ".edit", function(e) {
 var currentItem = $(this).parents(".item-video"),
 media = project.getElement(currentItem.attr("data-media-id")),
 segment = project.getElement(currentItem.attr("data-segment-id"));
 currentSegment = segment;
 setMedia(media);
 return false;
-});
+})
+.on("click", ".top", function(e){
-$(".organize-segments").on("click", ".top", function(e){
 var currentItem = $(this).parents(".item-video");
 currentItem.insertBefore(currentItem.prev());
 		reorganizeMashup();
 		return false;
-});
+})
+.on("click", ".bottom", function(e){
-$(".organize-segments").on("click", ".bottom", function(e){
 var currentItem = $(this).parents(".item-video");
 currentItem.insertAfter(currentItem.next());
 		reorganizeMashup();
 return false;
-});
+})
+.on("click", ".delete", function(e){
-$(".organize-segments").on("click", ".delete", function(e){
 var id = $(this).parents(".item-video").attr("data-segment-id");
 mashup.removeAnnotationById(id);
+if (!mashup.segments.length) {
+showEmpty();
+}
 return false;
 });
 /* Tangles */
 var tangleMsPerPixel = 100,
 currentSegment.setBegin(s.begin);
 currentSegment.setEnd(s.end);
 return false;
 });
+/* Changing Hashcut Title and description */
+$("#hashcut-title").on("keyup change input paste", function() {
+mashup.title = $(this).val();
+$(".title-video-wrap a").text(mashup.title);
+});
 }

hashcut