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 49	a21b851538b2
parent 45	f39df810caab
child 50	89e152523cb6

equal deleted inserted replaced

-:2774e46c3e9d
+:a21b851538b2
-IriSP.hc_messages = {
-Duration_ : "Durée :",
-duration_ : "durée :",
-edit_segment: "Éditer le segment",
-segment_down: "Descendre le segment",
-segment_up: "Remonter le segment",
-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",
-copy_of_: "Copie de ",
-}
 IriSP.editor = function(options) {
 /* Load Media List */
 var directory = new IriSP.Model.Directory(),
 apidirectory = new IriSP.Model.Directory(),
 project = directory.remoteSource({
+url: IriSP.endpoints.content,
+url_params: _({}).extend(options.filter),
+serializer: IriSP.serializers.content
+}),
+/*        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 %>"><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><div class="media-found-segments"></div></li>'
++ '<p class="time-length"><%= IriSP.translate("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>'
++ '<ul class="tools"><li><a class="edit" href="#" title="<%= IriSP.translate("Edit segment") %>"></a></li><li><a class="bottom" href="#" title="<%= IriSP.translate("Move 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>'
++ '<li><a class="top" href="#" title="<%= IriSP.translate("Move segment up") %>"></a></li><li><a class="delete" href="#" title="<%= IriSP.translate("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="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;" data-segment-id="<%= annotation.id %>"></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>'
++ '<h3><%= annotation.title %></h3><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.translate("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>'
++ '<p><%= IriSP.translate("From:") %> <span><%= annotation.begin.toString() %></span> <%= IriSP.translate("to:") %> <span><%= annotation.end.toString() %></span> (<%= IriSP.translate("duration:") %> <span><%= annotation.getDuration().toString() %></span>)</p>'
 + '</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>'
++ '<h3><%= title %></h3><a href="#" class="button clone-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.translate("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>'
 ),
 var segmentcritical = [
 {
 validate: function(_s) {
 return (_s.getDuration() >= 1000);
 },
-message: "Le segment doit durer au moins une seconde"
+message: "A segment must be at least one second long"
 },
 {
 validate: function(_s) {
 return (_s.getDuration() < 180000);
 },
-message: "Le segment doit durer moins de trois minutes"
+message: "A segment must be at most three minutes long"
 },
 {
 validate: function(_s) {
-return (!!_s.title && _s.title !== IriSP.hc_messages.segment_title_placeholder);
+return (!!_s.title && _s.title !== IriSP.translate("Untitled segment"));
 },
-message: "Le segment doit avoir un titre"
+message: "A segment must have a title"
 }
 ];
 var segmentwarning = [
 {
 validate: function(_s) {
 return (!!_s.description);
 },
-message: "Il est recommandé de donner une description au segment"
+message: "A segment should have a description"
 },
 {
 validate: function(_s) {
 return (!!_s.keywords.length);
 },
-message: "Il est recommandé de tagguer le segment"
+message: "A segment should have tags"
 }
 ];
 var mashupcritical = [
 {
 validate: function(_m) {
 return _m.segments.length > 2;
 },
-message: "Un hashcut doit être composé d'au moins trois segments"
+message: "A hashcut must be made from at least three segments"
 },
 {
 validate: function(_m) {
-return (!!_m.title && _m.title !== IriSP.hc_messages.mashup_title_placeholder);
+return (!!_m.title && _m.title !== IriSP.translate("Untitled Hashcut"));
 },
-message: "Un titre doit être donné au hashcut"
+message: "A hashcut must have a title"
 }
 ];
 var mashupwarning = [
 {
 validate: function(_m) {
 return !!_m.description
 },
-message: "Il est recommandé de donner une description au hashcut"
+message: "A hashcut should have a description"
 }
 ];
 /* Fill left column with Media List */
 html += mediatemplate(_m);
 });
 $(".col-left .list-video").html(html);
 project.getMedias().forEach(function(_m) {
 apidirectory.remoteSource({
-url: options.segment_api_endpoint,
+url: IriSP.endpoints.segment,
 url_params: {
 iri_id: _m.id,
 limit: 0
 },
 serializer: IriSP.serializers.segmentapi
 if (_s.annotation.status === "critical") {
 critical = true;
 }
 });
 if (critical) {
-messages.push("Certains segments ne sont pas valides");
+messages.push("One or more segments are invalid");
 }
 _(mashupcritical).each(function(sc) {
 if (!sc.validate(mashup)) {
 critical = true;
 messages.push(sc.message);
 }
 });
 mashup.status = critical ? "critical" : (warning ? "warning" : "valid");
 if (!messages.length) {
-messages.push("Le hashcut est valide !");
+messages.push("Your hashcut is valid!");
 }
-mashupstatus = ' - ' + messages.join('\n - ');
+mashupstatus = ' - ' + _(messages).map(IriSP.translate).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>");
 messages.push(sc.message);
 }
 });
 currentSegment.status = critical ? "critical" : (warning ? "warning" : "valid");
 if (!messages.length) {
-messages.push("Le segment est valide !")
+messages.push("This segment is valid!")
 }
-currentSegment.status_messages = messages;
+currentSegment.status_messages = _(messages).map(IriSP.translate);
 $(".segmentation .validate").removeClass("critical warning valid").addClass(currentSegment.status);
 $(".segmentation .validate-tooltip").html("<ul><li>" + currentSegment.status_messages.join("</li><li>")+"</li></ul>");
 }
 }
 if (!currentSegment) {
 currentSegment = new IriSP.Model.Annotation(false, project);
 currentSegment.setMedia(currentMedia.id);
 currentSegment.setBegin(currentMedia.getCurrentTime());
 currentSegment.setEnd(Math.min(currentMedia.getCurrentTime() +  180000, currentMedia.duration));
-currentSegment.title = IriSP.hc_messages.segment_title_placeholder;
+currentSegment.title = IriSP.translate("Untitled segment");
 currentSegment.color = currentMedia.color;
 currentSegment.thumbnail = currentMedia.thumbnail;
 currentSegment.created = new Date();
 currentSegment.keywords = [];
 currentSegment.description = "";
 });
 }
 if (currentMedia.loaded) {
 currentMedia.setCurrentTime(currentSegment.begin);
 }
-$(".add-segment").val(addMode ? "Ajouter au Hashcut" : "Sauvegarder");
+$(".add-segment").val(IriSP.translate(addMode ? "Add segment to hashcut" : "Save segment"));
-$(".create-or-edit").text(addMode ? "Créer un nouveau segment" : "Modifier le segment");
+$(".create-or-edit").text(IriSP.translate(addMode ? "Create new segment" : "Edit existing segment"));
 media.show();
 $("#segment-title").val(currentSegment.title);
 $("#segment-description").val(currentSegment.description);
 var segment_tags = $("#segment-tags");
 segment_tags.tagit("option","onTagRemoved",function(){});
 updateSegmentUI();
 mashup.trigger("change");
 }
 });
 $("#segment-title").on("focus click", function() {
-if ($(this).val() === IriSP.hc_messages.segment_title_placeholder) {
+if ($(this).val() === IriSP.translate("Untitled segment")) {
 $(this).val("");
 }
 });
 $("#segment-description").on("keyup change input paste", function() {
 if (currentMedia && currentSegment) {
 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 = 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.title = IriSP.translate("Copy of ") + s.title;
 currentSegment.description = s.description;
 currentSegment.keywords = s.keywords;
 currentSegment.color = media.color;
 currentSegment.thumbnail = media.thumbnail;
 currentSegment.created = new Date();
 }).on("mouseout", ".media-segment", function() {
 $(this).find(".media-segment-popin").hide();
 }).on("click", ".reprendre-segment", function() {
 cloneSegment($(this).attr("data-segment-id"));
 return false;
+}).on("click", ".media-segment-section", function() {
+var sid = $(this).attr("data-segment-id"),
+s = directory.getElement(sid) || apidirectory.getElement(sid);
+if (s.media.id === currentMedia.id) {
+currentMedia.setCurrentTime(s.begin);
+}
 });
 $(".col-left").on("mouseover", ".media-segment", function() {
 $(this).find(".media-found-popin").show();
 }).on("mouseout", ".media-segment", function() {
 cloneSegment($(this).attr("data-segment-id"));
 return false;
 });
 /* Changing Hashcut Title and description */
-mashup.title = IriSP.hc_messages.mashup_title_placeholder;
+mashup.title = IriSP.translate("Untitled Hashcut");
 $(".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) {
+if ($(this).val() === IriSP.translate("Untitled Hashcut")) {
 $(this).val("");
 }
 });
 $("#hashcut-description").on("keyup change input paste", function() {
 return false;
 })
 /* Publication */
+function onLeave() {
+return IriSP.translate("You haven't published your hashcut yet.\nIf you leave this page, it will be lost");
+}
+$(window).on("beforeunload", onLeave);
 $(".publier-button").click(function() {
 if ($(this).hasClass("disable")) {
-alert("Le Mashup ne peut pas être publié pour les raisons suivantes :\n\n"+mashupstatus);
+alert(IriSP.translate("The mashup can't be published because:")+"\n\n"+mashupstatus);
 return false;
 }
 var postproject = directory.newLocalSource(),
 medias = mashup.getMedias()
 annotations = mashup.getOriginalAnnotations();
 postproject.modified = new Date();
 postproject.title = mashup.title;
 postproject.description = mashup.description;
 $.ajax({
 type: "POST",
-url: options.project_api_endpoint,
+url: IriSP.endpoints.project,
 data: IriSP.serializers.ldt.serialize(postproject),
 contentType: "application/cinelab",
 //            headers: {"X-CSRFToken": "{{csrf_token}}"},
 success: function(data, status, request){
-console.log(request.getResponseHeader("Location"));
+var location = request.getResponseHeader("Location"),
+projid = location.match(/([^/]+)\/?$/)[1],
+destination = IriSP.endpoints.hashcut_page + projid;
+$(window).off("beforeunload", onLeave);
+document.location.href = destination;
 },
 error: function(jqXHR, textStatus, errorThrown){
-alert(errorThrown);
+console.log(arguments);
-}
+alert(IriSP.translate("Server error\nYour hashcut couldn't be published"));
-});
+}
+});
+//TODO: ADD WAITING SCREEN
 return false;
 });
 mashup.trigger("change");
 }

hashcut