--- a/integration/js/editor.js Thu Nov 22 18:45:06 2012 +0100
+++ b/integration/js/editor.js Fri Nov 23 19:13:50 2012 +0100
@@ -1,19 +1,3 @@
-
-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 */
@@ -21,30 +5,36 @@
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>'
- + '<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>'
+ + '<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.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>'
- + '<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>'
+ + '<h3><%= annotation.title %></h3><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.translate("Clone segment") %></a>'
+ + '<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(
@@ -53,7 +43,7 @@
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(
@@ -73,19 +63,19 @@
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 = [
@@ -93,13 +83,13 @@
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"
}
];
@@ -108,13 +98,13 @@
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 = [
@@ -122,7 +112,7 @@
validate: function(_m) {
return !!_m.description
},
- message: "Il est recommandé de donner une description au hashcut"
+ message: "A hashcut should have a description"
}
];
@@ -136,7 +126,7 @@
$(".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
@@ -238,7 +228,7 @@
}
});
if (critical) {
- messages.push("Certains segments ne sont pas valides");
+ messages.push("One or more segments are invalid");
}
_(mashupcritical).each(function(sc) {
@@ -255,9 +245,9 @@
});
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);
@@ -360,9 +350,9 @@
});
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>");
@@ -388,7 +378,7 @@
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();
@@ -410,8 +400,8 @@
if (currentMedia.loaded) {
currentMedia.setCurrentTime(currentSegment.begin);
}
- $(".add-segment").val(addMode ? "Ajouter au Hashcut" : "Sauvegarder");
- $(".create-or-edit").text(addMode ? "Créer un nouveau segment" : "Modifier le segment");
+ $(".add-segment").val(IriSP.translate(addMode ? "Add segment to hashcut" : "Save 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);
@@ -514,7 +504,7 @@
}
});
$("#segment-title").on("focus click", function() {
- if ($(this).val() === IriSP.hc_messages.segment_title_placeholder) {
+ if ($(this).val() === IriSP.translate("Untitled segment")) {
$(this).val("");
}
});
@@ -531,6 +521,7 @@
setMedia(currentMedia);
} else {
mashup.trigger("change");
+ var segment = mashup.getAnnotation(currentSegment);
currentSegment = undefined;
setMedia(mashup);
if (segment) {
@@ -735,7 +726,7 @@
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;
@@ -763,6 +754,12 @@
}).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() {
@@ -775,7 +772,7 @@
});
/* 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);
@@ -785,7 +782,7 @@
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("");
}
});
@@ -802,9 +799,15 @@
/* 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(),
@@ -847,17 +850,24 @@
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;
});