integration/js/editor.js
changeset 104 1b84c7b2aeee
parent 97 213e81430f7a
child 109 3034776c1f35
equal deleted inserted replaced
97:213e81430f7a 104:1b84c7b2aeee
    12         mashup = new IriSP.Model.Mashup(false, project),
    12         mashup = new IriSP.Model.Mashup(false, project),
    13         mediatemplate = _.template(
    13         mediatemplate = _.template(
    14             '<li class="item-video media" data-media-id="<%= id %>"><div class="media-count-wrap"><span class="media-count"></span></div>'
    14             '<li class="item-video media" data-media-id="<%= id %>"><div class="media-count-wrap"><span class="media-count"></span></div>'
    15             + '<img class="thumbnail" src="<%= thumbnail %>" alt="<%= title %>" />'
    15             + '<img class="thumbnail" src="<%= thumbnail %>" alt="<%= title %>" />'
    16             + '<div class="video-info"><h3 class="title-video"><%= title %></h3><p class="description"><%= description %></p>'
    16             + '<div class="video-info"><h3 class="title-video"><%= title %></h3><p class="description"><%= description %></p>'
    17             + '<p class="time-length"><%= IriSP.translate("Duration:") %> <span><%= duration.toString() %></span></p></div><div class="media-found-segments"></div></li>'
    17             + '<p class="time-length"><%= gettext("Duration:") %> <span><%= duration.toString() %></span></p></div><div class="media-found-segments"></div></li>'
    18         ),
    18         ),
    19         segmenttemplate = _.template(
    19         segmenttemplate = _.template(
    20             '<li class="item-video annotation" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">'
    20             '<li class="item-video annotation" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">'
    21             + '<img class="thumbnail" src="<%= annotation.thumbnail %>" alt="<%= annotation.getMedia().title %>" />'
    21             + '<img class="thumbnail" src="<%= annotation.thumbnail %>" alt="<%= annotation.getMedia().title %>" />'
    22             + '<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>'
    22             + '<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>'
    23             + '<p class="subtitle"><%= annotation.title %></p><p class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</p>'
    23             + '<p class="subtitle"><%= annotation.title %></p><p class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</p>'
    24             + '<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>'
    24             + '<ul class="tools"><li><a class="edit" href="#" title="<%= gettext("Edit segment") %>"></a></li><li><a class="bottom" href="#" title="<%= gettext("Move segment down") %>"></a></li>'
    25             + '<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>'
    25             + '<li><a class="top" href="#" title="<%= gettext("Move segment up") %>"></a></li><li><a class="delete" href="#" title="<%= gettext("Delete segment") %>"></a></li></ul></div></li>'
    26         ),
    26         ),
    27         mediasegmenttemplate = _.template(
    27         mediasegmenttemplate = _.template(
    28             '<div class="media-segment">'
    28             '<div class="media-segment">'
    29             + '<div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;" data-segment-id="<%= annotation.id %>"></div>'
    29             + '<div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;" data-segment-id="<%= annotation.id %>"></div>'
    30             + '<div class="popin media-segment-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">'
    30             + '<div class="popin media-segment-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">'
    31             + '<h3><%= annotation.title %></h3><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.translate("Clone segment") %></a>'
    31             + '<h3><%= annotation.title %></h3><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= gettext("Clone segment") %></a>'
    32             + '<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>'
    32             + '<p><%= gettext("From:") %> <span><%= annotation.begin.toString() %></span> <%= gettext("to:") %> <span><%= annotation.end.toString() %></span> (<%= gettext("duration:") %> <span><%= annotation.getDuration().toString() %></span>)</p>'
    33             + '</div></div></div>'
    33             + '</div></div></div>'
    34         ),
    34         ),
    35         mediasegmentlisttemplate = _.template(
    35         mediasegmentlisttemplate = _.template(
    36             '<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>'
    36             '<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>'
    37         ),
    37         ),
    38         mediafoundtemplate = _.template(
    38         mediafoundtemplate = _.template(
    39             '<div class="media-segment"><div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;"></div>'
    39             '<div class="media-segment"><div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;"></div>'
    40             + '<div class="popin media-found-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">'
    40             + '<div class="popin media-found-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">'
    41             + '<h3><%= title %></h3><a href="#" class="button clone-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.translate("Clone segment") %></a>'
    41             + '<h3><%= title %></h3><a href="#" class="button clone-segment" data-segment-id="<%= annotation.id %>"><%= gettext("Clone segment") %></a>'
    42             + '</div></div></div>'
    42             + '</div></div></div>'
    43         ),
    43         ),
    44         mediafoundlisttemplate = _.template(
    44         mediafoundlisttemplate = _.template(
    45             '<div class="media-found-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %></div>'
    45             '<div class="media-found-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %></div>'
    46         ),
    46         ),
    57     var segmentcritical = [
    57     var segmentcritical = [
    58         {
    58         {
    59             validate: function(_s) {
    59             validate: function(_s) {
    60                 return (_s.getDuration() >= 1000);
    60                 return (_s.getDuration() >= 1000);
    61             },
    61             },
    62             message: "A segment must be at least one second long"
    62             message: gettext("A segment must be at least one second long")
    63         },
    63         },
    64         {
    64         {
    65             validate: function(_s) {
    65             validate: function(_s) {
    66                 return (_s.getDuration() < 180000);
    66                 return (_s.getDuration() < 180000);
    67             },
    67             },
    68             message: "A segment must be at most three minutes long"
    68             message: gettext("A segment must be at most three minutes long")
    69         },
    69         },
    70         {
    70         {
    71             validate: function(_s) {
    71             validate: function(_s) {
    72                 return (!!_s.title && _s.title !== IriSP.translate("Untitled segment"));
    72                 return (!!_s.title && _s.title !== gettext("Untitled segment"));
    73             },
    73             },
    74             message: "A segment must have a title"
    74             message: gettext("A segment must have a title")
    75         }
    75         }
    76     ];
    76     ];
    77     var segmentwarning = [
    77     var segmentwarning = [
    78         {
    78         {
    79             validate: function(_s) {
    79             validate: function(_s) {
    80                 return (!!_s.description);
    80                 return (!!_s.description);
    81             },
    81             },
    82             message: "A segment should have a description"
    82             message: gettext("A segment should have a description")
    83         },
    83         },
    84         {
    84         {
    85             validate: function(_s) {
    85             validate: function(_s) {
    86                 return (!!_s.keywords.length);
    86                 return (!!_s.keywords.length);
    87             },
    87             },
    88             message: "A segment should have tags"
    88             message: gettext("A segment should have tags")
    89         }
    89         }
    90     ];
    90     ];
    91     
    91     
    92     var mashupcritical = [
    92     var mashupcritical = [
    93         {
    93         {
    94             validate: function(_m) {
    94             validate: function(_m) {
    95                 return _m.segments.length > 2;
    95                 return _m.segments.length > 2;
    96             },
    96             },
    97             message: "A hashcut must be made from at least three segments"
    97             message: gettext("A hashcut must be made from at least three segments")
    98         },
    98         },
    99         {
    99         {
   100             validate: function(_m) {
   100             validate: function(_m) {
   101                 return (!!_m.title && _m.title !== IriSP.translate("Untitled Hashcut"));
   101                 return (!!_m.title && _m.title !== gettext("Untitled Hashcut"));
   102             },
   102             },
   103             message: "A hashcut must have a title"
   103             message: gettext("A hashcut must have a title")
   104         }
   104         }
   105     ];
   105     ];
   106     var mashupwarning = [
   106     var mashupwarning = [
   107         {
   107         {
   108             validate: function(_m) {
   108             validate: function(_m) {
   109                 return !!_m.description
   109                 return !!_m.description
   110             },
   110             },
   111             message: "A hashcut should have a description"
   111             message: gettext("A hashcut should have a description")
   112         }
   112         }
   113     ];
   113     ];
   114 
   114 
   115     /* Fill left column with Media List */
   115     /* Fill left column with Media List */
   116 
   116 
   243         });
   243         });
   244         mashup.status = critical ? "critical" : (warning ? "warning" : "valid");
   244         mashup.status = critical ? "critical" : (warning ? "warning" : "valid");
   245         if (!messages.length) {
   245         if (!messages.length) {
   246             messages.push("Your hashcut is valid!");
   246             messages.push("Your hashcut is valid!");
   247         }
   247         }
   248         mashupstatus = ' - ' + _(messages).map(IriSP.translate).join('\n - ');
   248         mashupstatus = ' - ' + _(messages).join('\n - ');
   249         
   249         
   250         $(".publier-button").toggleClass("disable", critical);
   250         $(".publier-button").toggleClass("disable", critical);
   251         
   251         
   252         $(".liste-segment .validate").removeClass("critical warning valid").addClass(mashup.status);
   252         $(".liste-segment .validate").removeClass("critical warning valid").addClass(mashup.status);
   253         $(".liste-segment .validate-tooltip").html("<ul><li>" + messages.join("</li><li>")+"</li></ul>");
   253         $(".liste-segment .validate-tooltip").html("<ul><li>" + messages.join("</li><li>")+"</li></ul>");
   348             });
   348             });
   349             currentSegment.status = critical ? "critical" : (warning ? "warning" : "valid");
   349             currentSegment.status = critical ? "critical" : (warning ? "warning" : "valid");
   350             if (!messages.length) {
   350             if (!messages.length) {
   351                 messages.push("This segment is valid!")
   351                 messages.push("This segment is valid!")
   352             }
   352             }
   353             currentSegment.status_messages = _(messages).map(IriSP.translate);
   353             currentSegment.status_messages = _(messages);
   354             
   354             
   355             $(".segmentation .validate").removeClass("critical warning valid").addClass(currentSegment.status);
   355             $(".segmentation .validate").removeClass("critical warning valid").addClass(currentSegment.status);
   356             $(".segmentation .validate-tooltip").html("<ul><li>" + currentSegment.status_messages.join("</li><li>")+"</li></ul>");
   356             $(".segmentation .validate-tooltip").html("<ul><li>" + currentSegment.status_messages.join("</li><li>")+"</li></ul>");
   357         }
   357         }
   358     }
   358     }
   372             if (!currentSegment) {
   372             if (!currentSegment) {
   373                 currentSegment = new IriSP.Model.Annotation(false, project);
   373                 currentSegment = new IriSP.Model.Annotation(false, project);
   374                 currentSegment.setMedia(currentMedia.id);
   374                 currentSegment.setMedia(currentMedia.id);
   375                 currentSegment.setBegin(currentMedia.getCurrentTime());
   375                 currentSegment.setBegin(currentMedia.getCurrentTime());
   376                 currentSegment.setEnd(Math.min(currentMedia.getCurrentTime() +  180000, currentMedia.duration));
   376                 currentSegment.setEnd(Math.min(currentMedia.getCurrentTime() +  180000, currentMedia.duration));
   377                 currentSegment.title = IriSP.translate("Untitled segment");
   377                 currentSegment.title = gettext("Untitled segment");
   378                 currentSegment.color = currentMedia.color;
   378                 currentSegment.color = currentMedia.color;
   379                 currentSegment.thumbnail = currentMedia.thumbnail;
   379                 currentSegment.thumbnail = currentMedia.thumbnail;
   380                 currentSegment.created = new Date();
   380                 currentSegment.created = new Date();
   381                 currentSegment.keywords = [];
   381                 currentSegment.keywords = [];
   382                 currentSegment.description = "";
   382                 currentSegment.description = "";
   394                 });
   394                 });
   395             }
   395             }
   396             if (currentMedia.loaded) {
   396             if (currentMedia.loaded) {
   397                 currentMedia.setCurrentTime(currentSegment.begin);
   397                 currentMedia.setCurrentTime(currentSegment.begin);
   398             }
   398             }
   399             $(".add-segment").val(IriSP.translate(addMode ? "Add segment to hashcut" : "Save segment"));
   399             $(".add-segment").val(addMode ? gettext("Add segment to hashcut") : gettext("Save segment"));
   400             $(".create-or-edit").text(IriSP.translate(addMode ? "Create new segment" : "Edit existing segment"));
   400             $(".create-or-edit").text(addMode ? gettext("Create new segment") : gettext("Edit existing segment"));
   401             $("#segment-title").val(currentSegment.title);
   401             $("#segment-title").val(currentSegment.title);
   402             $("#segment-description").val(currentSegment.description);
   402             $("#segment-description").val(currentSegment.description);
   403             var segment_tags = $("#segment-tags");
   403             var segment_tags = $("#segment-tags");
   404             segment_tags.tagit("option","onTagRemoved",function(){});
   404             segment_tags.tagit("option","onTagRemoved",function(){});
   405             segment_tags.tagit("option","onTagAdded",function(){});
   405             segment_tags.tagit("option","onTagAdded",function(){});
   497             updateSegmentUI();
   497             updateSegmentUI();
   498             mashup.trigger("change");
   498             mashup.trigger("change");
   499         }
   499         }
   500     });
   500     });
   501     $("#segment-title").on("focus click", function() {
   501     $("#segment-title").on("focus click", function() {
   502         if ($(this).val() === IriSP.translate("Untitled segment")) {
   502         if ($(this).val() === gettext("Untitled segment")) {
   503             $(this).val("");
   503             $(this).val("");
   504         }
   504         }
   505     });
   505     });
   506     $("#segment-description").on("keyup change input paste", function() {
   506     $("#segment-description").on("keyup change input paste", function() {
   507         if (currentMedia && currentSegment) {
   507         if (currentMedia && currentSegment) {
   753         
   753         
   754         currentSegment = new IriSP.Model.Annotation(false, project);
   754         currentSegment = new IriSP.Model.Annotation(false, project);
   755         currentSegment.setMedia(media.id);
   755         currentSegment.setMedia(media.id);
   756         currentSegment.setBegin(s.begin);
   756         currentSegment.setBegin(s.begin);
   757         currentSegment.setEnd(s.end);
   757         currentSegment.setEnd(s.end);
   758         currentSegment.title = IriSP.translate("Copy of ") + s.title;
   758         currentSegment.title = gettext("Copy of ") + s.title;
   759         currentSegment.description = s.description;
   759         currentSegment.description = s.description;
   760         currentSegment.keywords = s.keywords;
   760         currentSegment.keywords = s.keywords;
   761         currentSegment.color = media.color;
   761         currentSegment.color = media.color;
   762         currentSegment.thumbnail = media.thumbnail;
   762         currentSegment.thumbnail = media.thumbnail;
   763         currentSegment.created = new Date();
   763         currentSegment.created = new Date();
   799         cloneSegment($(this).attr("data-segment-id"));
   799         cloneSegment($(this).attr("data-segment-id"));
   800         return false;
   800         return false;
   801     });
   801     });
   802     /* Changing Hashcut Title and description */
   802     /* Changing Hashcut Title and description */
   803     
   803     
   804     mashup.title = IriSP.translate("Untitled Hashcut");
   804     mashup.title = gettext("Untitled Hashcut");
   805     $(".title-video-wrap a").text(mashup.title);
   805     $(".title-video-wrap a").text(mashup.title);
   806     $("#hashcut-title").val(mashup.title);
   806     $("#hashcut-title").val(mashup.title);
   807     
   807     
   808     $("#hashcut-title").on("keyup change input paste", function() {
   808     $("#hashcut-title").on("keyup change input paste", function() {
   809         mashup.title = $(this).val();
   809         mashup.title = $(this).val();
   810         $(".title-video-wrap a").text(mashup.title);
   810         $(".title-video-wrap a").text(mashup.title);
   811         mashup.trigger("change");
   811         mashup.trigger("change");
   812     });
   812     });
   813     $("#hashcut-title").on("focus click", function() {
   813     $("#hashcut-title").on("focus click", function() {
   814         if ($(this).val() === IriSP.translate("Untitled Hashcut")) {
   814         if ($(this).val() === gettext("Untitled Hashcut")) {
   815             $(this).val("");
   815             $(this).val("");
   816         }
   816         }
   817     });
   817     });
   818     
   818     
   819     $("#hashcut-description").on("keyup change input paste", function() {
   819     $("#hashcut-description").on("keyup change input paste", function() {
   827     })
   827     })
   828     
   828     
   829     /* Publication */
   829     /* Publication */
   830    
   830    
   831     function onLeave() {
   831     function onLeave() {
   832         return IriSP.translate("You haven't published your hashcut yet.\nIf you leave this page, it will be lost");
   832         return gettext("You haven't published your hashcut yet.\nIf you leave this page, it will be lost.");
   833     }
   833     }
   834     
   834     
   835     $(window).on("beforeunload", onLeave);
   835     $(window).on("beforeunload", onLeave);
   836    
   836    
   837     $(".publier-button").click(function() {
   837     $(".publier-button").click(function() {
   838         if ($(this).hasClass("disable")) {
   838         if ($(this).hasClass("disable")) {
   839             alert(IriSP.translate("The mashup can't be published because:")+"\n\n"+mashupstatus);
   839             alert(gettext("The hashcut can't be published because:")+"\n\n"+mashupstatus);
   840             return false;
   840             return false;
   841         }
   841         }
   842         var postproject = directory.newLocalSource(),
   842         var postproject = directory.newLocalSource(),
   843             medias = mashup.getMedias()
   843             medias = mashup.getMedias()
   844             annotations = mashup.getOriginalAnnotations();
   844             annotations = mashup.getOriginalAnnotations();
   893                     destination = IriSP.endpoints.hashcut_page + projid;
   893                     destination = IriSP.endpoints.hashcut_page + projid;
   894                 $(window).off("beforeunload", onLeave);
   894                 $(window).off("beforeunload", onLeave);
   895                 document.location.href = destination;
   895                 document.location.href = destination;
   896             },
   896             },
   897             error: function(jqXHR, textStatus, errorThrown){
   897             error: function(jqXHR, textStatus, errorThrown){
   898                 alert(IriSP.translate("Server error\nYour hashcut couldn't be published"));
   898                 alert(gettext("Server error\nYour hashcut couldn't be published"));
   899                 waitscreen.remove();
   899                 waitscreen.remove();
   900             }
   900             }
   901         });
   901         });
   902         
   902         
   903         return false;
   903         return false;