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 39	d3d8a88878ed
parent 32	47f9a2d63a0a
child 41	3ec2343f2b85

equal deleted inserted replaced

-:2cae82a5bdc2
+:d3d8a88878ed
 IriSP.hc_messages = {
-duration_ : "Durée :",
+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"
+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"
 }
 IriSP.Hashcut = function(options) {
 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"><%= IriSP.hc_messages.duration_ %> <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>'
++ '<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>'
 + '<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>'),
 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">'
-+ '<h3><%= annotation.title %></h3><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>">Cloner le segment</a>'
++ '<h3><%= annotation.title %></h3><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.hc_messages.clone_segment %></a>'
-+ '<p>De: <span><%= annotation.begin.toString() %></span> à <span><%= annotation.end.toString() %></span> (durée: <span><%= annotation.getDuration().toString() %></span>)</p>'
++ '<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>');
+/* Validation of segments and mashup */
+var segmentcritical = [
+{
+validate: function(_s) {
+var _d = _s.getDuration();
+return (_d > 1000 && _d < 180000);
+},
+message: "La durée du segment doit être comprise entre 1 seconde et trois minutes"
+},
+{
+validate: function(_s) {
+return (!!_s.title && _s.title !== IriSP.hc_messages.segment_title_placeholder);
+},
+message: "Un titre doit être donné au segment"
+}
+];
+var segmentwarning = [
+{
+validate: function(_s) {
+return (_s.description);
+},
+message: "Il est recommandé de donner une description au segment"
+}
+];
+var mashupcritical = [
+{
+validate: function(_m) {
+return _m.segments.length > 2;
+},
+message: "Un hashcut doit être composé d'au moins trois segments"
+},
+{
+validate: function(_m) {
+return (!!_m.title && _m.title !== IriSP.hc_messages.mashup_title_placeholder);
+},
+message: "Un titre doit être donné au hashcut"
+}
+];
+var mashupwarning = [
+{
+validate: function(_m) {
+return !!_m.description
+},
+message: "Il est recommandé de donner une description au hashcut"
+}
+];
 /* Fill left column with Media List */
 project.onLoad(function() {
 var html = '';
 }
 }
 function updateMashupUI() {
 var listhtml = '', vizhtml = '', t = 0, k = mashup.duration ? (100 / mashup.duration) : 0;
+var critical = false, warning = false, messages = [];
 mashup.segments.forEach(function(_s) {
 listhtml += segmenttemplate(_s);
 var vizdata = {
 left: k * t,
 width: k * _s.duration,
 color: _s.getMedia().color,
 segmentid: _s.annotation.id
 }
 vizhtml += viztemplate(vizdata);
+if (_s.annotation.status === "critical") {
+critical = true;
+}
 t += _s.duration.milliseconds;
 });
+if (critical) {
+messages.push("Certains segments ne sont pas valides");
+}
+_(mashupcritical).each(function(sc) {
+if (!sc.validate(mashup)) {
+critical = true;
+messages.push(sc.message);
+}
+});
+_(mashupwarning).each(function(sc) {
+if (!sc.validate(mashup)) {
+warning = true;
+messages.push(sc.message);
+}
+});
+mashup.status = critical ? "critical" : (warning ? "warning" : "valid");
+if (!messages.length) {
+messages.push("Le hashcut est valide !");
+}
+$(".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>");
 var intervals = [ 1000, 2000, 5000, 10000, 30000, 60000, 120000, 300000, 600000, 900000, 1800000, 3600000, 7200000 ];
 function createIntervals(maxn) {
 for (var i = 0; i < intervals.length; i++) {
 /* Set current Media */
 var currentMedia, currentSegment;
-function updateSliderAndTangles() {
+function updateSegmentUI() {
 if (currentMedia && currentSegment) {
 var start = currentSegment.begin,
 end = currentSegment.end,
 dur = currentSegment.getDuration(),
 f = slidersRange / currentMedia.duration,
 p = k * (start + end) / 2;
 sliceSlider.slider( "values", [ f * start, f * end ] );
 tangleStart.text(start.toString(tangleStart.hasClass("active"))).attr("data-milliseconds",start.milliseconds);
 tangleEnd.text(end.toString(tangleEnd.hasClass("active"))).attr("data-milliseconds",end.milliseconds);
 tangleDuration.text(dur.toString(tangleDuration.hasClass("active"))).attr("data-milliseconds",dur.milliseconds);
-$(".segment-info .pointer").css("left", p + "%");
+$(".segmentation .pointer").css("left", p + "%");
 $(".media-current-section").css({
 left: (k * start) + "%",
 width: (k * dur) + "%"
-})
+});
+var messages = [],
+critical = false,
+warning = false;
+_(segmentcritical).each(function(sc) {
+if (!sc.validate(currentSegment)) {
+critical = true;
+messages.push(sc.message);
+}
+});
+_(segmentwarning).each(function(sc) {
+if (!sc.validate(currentSegment)) {
+warning = true;
+messages.push(sc.message);
+}
+});
+currentSegment.status = critical ? "critical" : (warning ? "warning" : "valid");
+if (!messages.length) {
+messages.push("Le segment est valide !")
+}
+currentSegment.status_messages = messages;
+$(".segmentation .validate").removeClass("critical warning valid").addClass(currentSegment.status);
+$(".segmentation .validate-tooltip").html("<ul><li>" + currentSegment.status_messages.join("</li><li>")+"</li></ul>");
 }
 }
 var addMode;
 if (!currentSegment) {
 currentSegment = new IriSP.Model.Annotation(false, project);
 currentSegment.setMedia(currentMedia.id);
 currentSegment.setBegin(0);
 currentSegment.setEnd(currentMedia.duration);
-currentSegment.title = "Segment sans titre";
+currentSegment.title = IriSP.hc_messages.segment_title_placeholder;
-currentSegment.description = "Extrait de « " + currentMedia.title + " »";
+currentSegment.description = "";
 currentSegment.on("change-begin", function() {
 if (currentMedia && currentSegment === this) {
 currentMedia.setCurrentTime(this.begin);
-updateSliderAndTangles();
+updateSegmentUI();
 }
 });
 currentSegment.on("change-end", function() {
 if (currentMedia && currentSegment === this) {
 currentMedia.setCurrentTime(this.end);
-updateSliderAndTangles();
+updateSegmentUI();
 }
 });
 currentSegment.on("enter", function() {
 if (currentMedia === mashup) {
 $(".annotation-title").text(this.title);
 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");
-updateSliderAndTangles();
+updateSegmentUI();
 media.show();
 $("#segment-title").val(currentSegment.title);
 $("#segment-description").val(currentSegment.description);
 $("#segment-tags").val("");
 var relatedSegments = mashup.segments.filter(function(_s) {
 /* Segment Form interaction */
 $("#segment-title").on("keyup change input paste", function() {
 if (currentMedia && currentSegment) {
 currentSegment.title = $(this).val();
+updateSegmentUI();
 updateMashupUI();
 }
 });
 $("#segment-description").on("keyup change input paste", function() {
 if (currentMedia && currentSegment) {
 currentSegment.description = $(this).val();
+updateSegmentUI();
 }
 });
 $("#segment-form").submit(function() {
 if (addMode) {
 mashup.addAnnotation(currentSegment);
 currentSegment.setEnd(s.end);
 return false;
 });
 /* Changing Hashcut Title and description */
+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);
-});
+updateMashupUI();
+});
+$("#hashcut-description").on("keyup change input paste", function() {
+mashup.description = $(this).val();
+updateMashupUI();
+});
+updateMashupUI();
 }

hashcut