--- a/integration/js/editor.js Fri Nov 09 18:56:29 2012 +0100
+++ b/integration/js/editor.js Fri Nov 16 19:23:20 2012 +0100
@@ -10,7 +10,8 @@
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) {
@@ -24,22 +25,24 @@
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 %>" />'
- + '<span class="video-info"><span class="title-video"><%= title %></span><span class="author"><%= description %></span>'
- + '<span class="time-length"><%= IriSP.hc_messages.Duration_ %> <span><%= duration.toString() %></span></span></span></li>'),
+ mediatemplate = _.template('<li class="item-video media" data-media-id="<%= id %>"><div class="media-count-wrap"><span class="media-count"></span></div>'
+ + '<img 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></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 %>" />'
- + '<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>'
- + '<span class="subtitle"><%= annotation.title %></span><span class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</span>'
+ + '<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><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></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);
@@ -112,6 +115,47 @@
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 */
@@ -170,6 +214,8 @@
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);
@@ -301,6 +347,7 @@
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 = "";
@@ -339,7 +386,7 @@
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) {
@@ -362,40 +409,59 @@
$(".self-media-segments").hide();
}
$(".self-media-segments .media-segments-list").html(html);
-
- $(".other-media-segments").hide();
- 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);
- }
- });
+ showOtherSegments();
+ project.trigger("mouseout-annotation");
}
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() {
@@ -405,6 +471,11 @@
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();
@@ -482,7 +553,7 @@
$(".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") {
@@ -604,10 +675,11 @@
/* Click on current segment in Preview */
$(".mashup-description .edit").click(function() {
- if (mashupCurrentAnnotation) {
- currentSegment = mashupCurrentAnnotation.annotation;
- setMedia(mashupCurrentAnnotation.getMedia());
+ if (mashup.currentAnnotation) {
+ currentSegment = mashup.currentAnnotation.annotation;
+ setMedia(mashup.currentAnnotation.getMedia());
}
+ return false;
});
/* Handling related segments */
@@ -619,22 +691,18 @@
}).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);
@@ -644,37 +712,67 @@
$(".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() {
- window.setTimeout(function() {
- mashup.keywords = $("#segment-tags").tagit("assignedTags");
- }, 0);
- }
+ $("#hashcut-form").submit(function() {
+ $(".update-title").hide();
+ return false;
+ })
/* 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";
- annotations.forEach(function(_a) {
- _a.setAnnotationType(anntype.id);
+ 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);
});
- postproject.addList("media",mashup.getMedias());
- postproject.addList("annotationType",[anntype]);
+ annotations.forEach(function(_a) {
+ _a.setAnnotationType(
+ postproject.getAnnotationTypes().filter(
+ function(_at) { return _at.media === _a.getMedia() }
+ )[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 = "IRI";
+ postproject.creator = "admin";
+ 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,
@@ -682,12 +780,13 @@
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");