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 43	5a5024bc74e6
parent 42	40909e8d6855
child 45	f39df810caab

equal deleted inserted replaced

-:40909e8d6855
+:5a5024bc74e6
 delete_segment: "Supprimer le segment",
 clone_segment: "Cloner le segment",
 From_: "De :",
 to_: "à :",
 segment_title_placeholder: "Segment sans titre",
-mashup_title_placeholder: "Hashcut sans titre"
+mashup_title_placeholder: "Hashcut sans titre",
+copy_of_: "Copie de ",
 }
 IriSP.editor = function(options) {
 /* Load Media List */
 project = directory.remoteSource({
 url: options.url,
 serializer: IriSP.serializers.medialist
 }),
 mashup = new IriSP.Model.Mashup(false, project),
-mediatemplate = _.template('<li class="item-video media" data-media-id="<%= id %>"><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>'
-+ '<span class="video-info"><span class="title-video"><%= title %></span><span class="author"><%= description %></span>'
++ '<img src="<%= thumbnail %>" alt="<%= title %>" />'
-+ '<span class="time-length"><%= IriSP.hc_messages.Duration_ %> <span><%= duration.toString() %></span></span></span></li>'),
++ '<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.getMedia().thumbnail %>" alt="<%= annotation.getMedia().title %>" />'
++ '<img 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><span class="video-info"><span class="title-video"><%= annotation.getMedia().title %></span>'
++ '<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>'
-+ '<span class="subtitle"><%= annotation.title %></span><span class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</span>'
++ '<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></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></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:<%= annotation.color %>"></div>'
++ '<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">'
 + '<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>'),
+mashupstatus = '',
 addMode, currentMedia, currentSegment;
 IriSP.mashupcore(project, mashup);
 /* Validation of segments and mashup */
 var html = '';
 project.getMedias().forEach(function(_m) {
 html += mediatemplate(_m);
 });
 $(".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: {
+iri_id: _m.id,
+limit: 0
+},
+serializer: IriSP.serializers.segmentapi
+}).onLoad(function() {
+var medias = this.getMedias(),
+annotations = this.getAnnotations();
+if (medias && medias.length) {
+var mediaid = medias[0].id;
+el = $(".item-video[data-media-id='" + mediaid + "'] .media-count");
+el.text(annotations.length).parent().show();
+mediasegmentscache[mediaid] = annotations;
+if (currentMedia && mediaid === currentMedia.id && currentSegment) {
+showOtherSegments();
+}
+}
+});
+});
 });
 /* Search Media with left column form */
 $(".col-left input").on("keyup change input paste", function() {
 });
 mashup.status = critical ? "critical" : (warning ? "warning" : "valid");
 if (!messages.length) {
 messages.push("Le hashcut est valide !");
 }
+mashupstatus = ' - ' + messages.join('\n - ');
 $(".publier-button").toggleClass("disable", critical);
 $(".liste-segment .validate").removeClass("critical warning valid").addClass(mashup.status);
 $(".liste-segment .validate-tooltip").html("<ul><li>" + messages.join("</li><li>")+"</li></ul>");
 currentSegment.setMedia(currentMedia.id);
 currentSegment.setBegin(0);
 currentSegment.setEnd(currentMedia.duration);
 currentSegment.title = IriSP.hc_messages.segment_title_placeholder;
 currentSegment.color = currentMedia.color;
+currentSegment.thumbnail = currentMedia.thumbnail;
 currentSegment.created = new Date();
 currentSegment.keywords = [];
 currentSegment.description = "";
 currentSegment.on("change-begin", function() {
 if (currentMedia && currentSegment === this) {
 updateSegmentUI();
 var relatedSegments = mashup.segments.filter(function(_s) {
 return _s.getMedia() === currentMedia && _s.annotation !== currentSegment;
 });
 var html = "",
-k = $(".Ldt-Slider").width() / currentSegment.getMedia().duration,
+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,
 $(".self-media-segments").show();
 } else {
 $(".self-media-segments").hide();
 }
 $(".self-media-segments .media-segments-list").html(html);
+showOtherSegments();
-$(".other-media-segments").hide();
+project.trigger("mouseout-annotation");
-apidirectory.remoteSource({
-url: options.segment_api_endpoint + currentMedia.id + "/0/" + currentMedia.duration.milliseconds + "?format=json",
-serializer:  IriSP.serializers.ldt
-}).onLoad(function() {
-var medias = this.getMedias(),
-annotations = this.getAnnotations();
-if (medias && medias.length && medias[0].id === currentMedia.id && annotations && annotations.length ) {
-var html = "";
-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)
-}
-html += mediasegmenttemplate(vizdata);
-});
-$(".other-media-segments").show();
-$(".other-media-segments .media-segments-list").html(html);
-}
-});
 }
 if (currentMedia.elementType === "mashup") {
 showPreview();
 }
 }
+/* Show Related Segments */
+function showOtherSegments() {
+var annotations = mediasegmentscache[currentMedia.id]
+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 */
+$(".Ldt-Ctrl-SetIn").click(function() {
+if (currentMedia && currentSegment) {
+currentSegment.setBegin(currentMedia.getCurrentTime());
+}
+});
+$(".Ldt-Ctrl-SetOut").click(function() {
+if (currentMedia && currentSegment) {
+currentSegment.setEnd(currentMedia.getCurrentTime());
+}
+});
 /* Segment Form interaction */
 $("#segment-title").on("keyup change input paste", function() {
 if (currentMedia && currentSegment) {
 currentSegment.title = $(this).val();
 updateSegmentUI();
 mashup.trigger("change");
 }
 });
+$("#segment-title").on("focus click", function() {
+if ($(this).val() === IriSP.hc_messages.segment_title_placeholder) {
+$(this).val("");
+}
+});
 $("#segment-description").on("keyup change input paste", function() {
 if (currentMedia && currentSegment) {
 currentSegment.description = $(this).val();
 mashup.trigger("change");
 }
 var mediaid = annotation.getMedia().id;
 $(".media").removeClass("active");
 $(".media[data-media-id='" + mediaid + "']").addClass("active");
 });
-project.on("mouseout-annotation", function(annotation) {
+project.on("mouseout-annotation", function() {
 $(".media").removeClass("active");
 var mediaid = undefined;
 if (currentMedia && currentMedia.elementType === "media") {
 mediaid = currentMedia.id;
 if (currentSegment) {
 });
 /* Click on current segment in Preview */
 $(".mashup-description .edit").click(function() {
-if (mashupCurrentAnnotation) {
+if (mashup.currentAnnotation) {
-currentSegment = mashupCurrentAnnotation.annotation;
+currentSegment = mashup.currentAnnotation.annotation;
-setMedia(mashupCurrentAnnotation.getMedia());
+setMedia(mashup.currentAnnotation.getMedia());
 }
+return false;
 });
 /* Handling related segments */
 $(".media-segments-list").on("mouseover", ".media-segment", function() {
 }).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 = s.title;
+currentSegment.title = IriSP.hc_messages.copy_of_ + s.title;
 currentSegment.description = s.description;
-$("#segment-title").val(s.title);
+$("#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 !
 return false;
 });
 /* Changing Hashcut Title and description */
-$("#hashcut-tags").tagit({
-onTagRemoved: updateSegmentTags,
-onTagAdded: updateSegmentTags
-});
 mashup.title = IriSP.hc_messages.mashup_title_placeholder;
 $(".title-video-wrap a").text(mashup.title);
 $("#hashcut-title").val(mashup.title);
 $("#hashcut-title").on("keyup change input paste", function() {
 mashup.title = $(this).val();
 $(".title-video-wrap a").text(mashup.title);
 mashup.trigger("change");
 });
+$("#hashcut-title").on("focus click", function() {
+if ($(this).val() === IriSP.hc_messages.mashup_title_placeholder) {
+$(this).val("");
+}
+});
 $("#hashcut-description").on("keyup change input paste", function() {
 mashup.description = $(this).val();
 mashup.trigger("change");
 });
-function updateMashupTags() {
+$("#hashcut-form").submit(function() {
-window.setTimeout(function() {
+$(".update-title").hide();
-mashup.keywords = $("#segment-tags").tagit("assignedTags");
+return false;
-}, 0);
+})
-}
 /* Publication */
 $(".publier-button").click(function() {
+if ($(this).hasClass("disable")) {
+alert("Le Mashup ne peut pas être publié pour les raisons suivantes :\n\n"+mashupstatus);
+return false;
+}
 var postproject = directory.newLocalSource(),
-anntype = new IriSP.Model.AnnotationType(false, postproject),
+medias = mashup.getMedias()
 annotations = mashup.getOriginalAnnotations();
-anntype.title = "hashcut-segments";
+postproject.addList("annotationType");
+postproject.addList("tag");
+medias.forEach(function(_m) {
+var anntype = new IriSP.Model.AnnotationType(false, postproject);
+anntype.title = "Segments from " + _m.title;
+anntype.media = _m;
+postproject.getAnnotationTypes().push(anntype);
+});
 annotations.forEach(function(_a) {
-_a.setAnnotationType(anntype.id);
+_a.setAnnotationType(
-});
+postproject.getAnnotationTypes().filter(
-postproject.addList("media",mashup.getMedias());
+function(_at) { return _at.media === _a.getMedia() }
-postproject.addList("annotationType",[anntype]);
+)[0].id);
+var tagids = [];
+_(_a.keywords).each(function(keyword) {
+var tags = postproject.getTags().searchByTitle(keyword);
+if (tags.length) {
+tagids.push(tags[0].id);
+} else {
+var tag = new IriSP.Model.Tag(false, postproject);
+tag.title = tag.description = keyword;
+postproject.getTags().push(tag);
+tagids.push(tag.id);
+}
+});
+_a.setTags(tagids);
+});
 postproject.addList("annotation",annotations);
+postproject.addList("media",medias);
 postproject.addList("mashup",[mashup]);
-postproject.addList("tag");
+postproject.creator = "admin";
-postproject.creator = "IRI";
+postproject.created = new Date();
+postproject.modified = new Date();
 postproject.title = mashup.title;
 postproject.description = mashup.description;
-console.log(IriSP.serializers.ldt.serialize(postproject));
 $.ajax({
 type: "POST",
 url: options.project_api_endpoint,
 data: IriSP.serializers.ldt.serialize(postproject),
 contentType: "application/cinelab",
 //            headers: {"X-CSRFToken": "{{csrf_token}}"},
 success: function(data, status, request){
-alert("api post success");
+console.log(request.getResponseHeader("Location"));
 },
 error: function(jqXHR, textStatus, errorThrown){
 alert(errorThrown);
 }
 });
+return false;
 });
 mashup.trigger("change");
 }

hashcut