# HG changeset patch
# User veltr
# Date 1353577948 -3600
# Node ID f39df810caabd1107d6818740efe99f735babbc1
# Parent  5a5024bc74e690b2d734e28cbf5befc42bf767b6
Segments show up in search engine

diff -r 5a5024bc74e6 -r f39df810caab integration/css/common.css
--- a/integration/css/common.css	Fri Nov 16 19:23:20 2012 +0100
+++ b/integration/css/common.css	Thu Nov 22 10:52:28 2012 +0100
@@ -432,7 +432,7 @@
 	display: block;
 	position: relative;
 }
-.item-video img{
+.item-video .thumbnail{
 	float: left;
 	margin-right: 4px;
 	max-width: 80px;
diff -r 5a5024bc74e6 -r f39df810caab integration/css/edition.css
--- a/integration/css/edition.css	Fri Nov 16 19:23:20 2012 +0100
+++ b/integration/css/edition.css	Thu Nov 22 10:52:28 2012 +0100
@@ -162,6 +162,8 @@
 .add-segment {
     position: absolute; right: 10px; bottom: 10px;
 }
+
+
 .media-segments h2{
     color: #30036d;
     font-size: 14px;
@@ -169,29 +171,39 @@
     margin: 10px 8px 2px;
 }
 
-.media-segment {
-    height: 8px;
-    margin: 8px 6px 0;
-    background-color: #b6b8b8;
+.media-segment-list {
+    margin: 8px 5px 0 6px;
+    padding-bottom: 1px;
     position: relative;
 }
-.media-section {
-    position: absolute;
+
+.media-found-segments {
+    clear: both; padding-top: 5px;
+}
+
+.media-found-segments .media-segment-list {
+    margin: 0;
 }
+
+.media-found-list {
+    padding-bottom: 1px; position: relative;
+}
+
+.media-segment-list-inner {
+    position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../img/bg-segments.png);
+}
+
 .media-segment-section {
-    top: 0; height: 8px;
+    position: absolute; height: 8px;
 }
 
 .media-current-section {
     background: url(../img/pinstripe-purple.png);
-    top: -2px; height: 2px;
+    top: -2px; bottom: -2px; margin-left: -1px; padding: 2px 1px;
+    position: absolute;
 }
 
-.media-current-section-inner {
-    background: url(../img/pinstripe-purple.png);
-    margin-top: 10px; height: 2px;
-}
-.media-segment .pointer{
+.media-segment-popin .pointer{
     margin-left: 140px
 }
 .media-segment-popin {
@@ -199,7 +211,7 @@
     top: 2px; width: 300px; margin-left: -151px;
     display: none;
 }
-.media-segment-popin h3{
+.media-segment-popin h3, .media-found-popin h3{
 	padding: 0;
 	color: #de2500;
 	margin-bottom: 4px;
@@ -212,6 +224,17 @@
 .media-segment-popin span{
 	color: #7628df;
 }
+
+.media-found-popin {
+    padding-top: 12px; overflow: hidden;
+    top: 2px; width: 170px; display: none;
+    margin-left: -86px;
+}
+
+.media-found-popin .pointer {
+    margin-left: 75px;
+}
+
 .reprendre-segment{
 	float: right;
 	display: block;
diff -r 5a5024bc74e6 -r f39df810caab integration/css/hashcut.css
--- a/integration/css/hashcut.css	Fri Nov 16 19:23:20 2012 +0100
+++ b/integration/css/hashcut.css	Thu Nov 22 10:52:28 2012 +0100
@@ -60,10 +60,6 @@
 .item-video .frise{
 	border:none;
 }
-.item-video a:hover img {
-    margin: 2px 0 0 2px;
-    box-shadow: -2px -2px 2px #333333;
-}
 .bloc-video{
 	padding-left: 10px;
 }
diff -r 5a5024bc74e6 -r f39df810caab integration/img/bg-segments.png
Binary file integration/img/bg-segments.png has changed
diff -r 5a5024bc74e6 -r f39df810caab integration/img/pinstripe-purple.png
Binary file integration/img/pinstripe-purple.png has changed
diff -r 5a5024bc74e6 -r f39df810caab integration/js/editor.js
--- a/integration/js/editor.js	Fri Nov 16 19:23:20 2012 +0100
+++ b/integration/js/editor.js	Thu Nov 22 10:52:28 2012 +0100
@@ -25,25 +25,44 @@
             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 src="<%= thumbnail %>" alt="<%= title %>" />'
+        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></li>'),
-        segmenttemplate = _.template('<li class="item-video annotation" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">'
-            + '<img src="<%= annotation.thumbnail %>" alt="<%= annotation.getMedia().title %>" />'
+            + '<p class="time-length"><%= IriSP.hc_messages.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>'),
-        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:<%= 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">'
+            + '<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-segment">'
+            + '<div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;"></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>'
-            + '</div></div></div></div>'),
+            + '</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>'
+            + '</div></div></div>'
+        ),
+        mediafoundlisttemplate = _.template(
+            '<div class="media-found-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %></div>'
+        ),
         mashupstatus = '',
         addMode, currentMedia, currentSegment;
+        
+        var colors = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];
     
     IriSP.mashupcore(project, mashup);
     
@@ -116,25 +135,6 @@
         });
         $(".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: {
@@ -168,17 +168,60 @@
         }
         $(".col-left .item-video").each(function() {
             var li = $(this),
-                title = $(this).find(".title-video"),
-                titletext = title.text();
-            if (val && find.test(titletext)) {
-                title.html(titletext.replace(replace, '<span style="background: yellow;">$1</span>'));
+                mediaid = li.attr("data-media-id"),
+                media = directory.getElement(mediaid);
+            if (!val) {
+                li.find(".title-video").text(media.title);
+                li.find(".description").text(media.description);
+                li.find(".media-found-segments").html("");
                 li.show();
             } else {
-                title.text(titletext);
-                if (val) {
+                var apimedia = apidirectory.getElement(mediaid);
+                if (apimedia) {
+                    var annotations = apimedia.getAnnotations().searchByTextFields(val);
+                } else {
+                    var annotations = [];
+                }   
+                var found = find.test(media.title) || find.test(media.description) || annotations.length;
+                if (found) {
+                    li.find(".title-video").html(media.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'));
+                    li.find(".description").html(media.description.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'));
+                    var html = '',
+                        k = 230 / media.duration,
+                        lines = [];
+                    _(annotations).each(function(_a, i) {
+                        var pos = k * (_a.begin + _a.end) / 2,
+                            corrpos = Math.max(76, Math.min(156, pos)),
+                            line = IriSP._(lines).find(function(line) {
+                                return !IriSP._(line.annotations).find(function(ann) {
+                                    return ann.begin < _a.end && ann.end > _a.begin
+                                });
+                            });
+                        if (!line) {
+                            line = { index: lines.length, annotations: []};
+                            lines.push(line); 
+                        }
+                        line.annotations.push(_a);
+                        vizdata = {
+                            annotation : _a,
+                            left : k * _a.begin,
+                            width : k * _a.getDuration(),
+                            top: 8 * line.index,
+                            color: colors[i % colors.length],
+                            title: _a.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'),
+                            popleft : corrpos,
+                            pointerpos : (pos - corrpos),
+                        }
+                        html += mediafoundtemplate(vizdata);
+                    });
+                    html = mediafoundlisttemplate({
+                        height: 8 * lines.length,
+                        segments: html
+                    });
+                    li.find(".media-found-segments").html(html);
+                    li.show();
+                } else {
                     li.hide();
-                } else {
-                    li.show();
                 }
             }
         })
@@ -343,8 +386,8 @@
             if (!currentSegment) {
                 currentSegment = new IriSP.Model.Annotation(false, project);
                 currentSegment.setMedia(currentMedia.id);
-                currentSegment.setBegin(0);
-                currentSegment.setEnd(currentMedia.duration);
+                currentSegment.setBegin(currentMedia.getCurrentTime());
+                currentSegment.setEnd(Math.min(currentMedia.getCurrentTime() +  180000, currentMedia.duration));
                 currentSegment.title = IriSP.hc_messages.segment_title_placeholder;
                 currentSegment.color = currentMedia.color;
                 currentSegment.thumbnail = currentMedia.thumbnail;
@@ -385,30 +428,12 @@
             var relatedSegments = mashup.segments.filter(function(_s) {
                 return _s.getMedia() === currentMedia && _s.annotation !== currentSegment;
             });
-            var html = "",
-                k = $(".Ldt-Slider").width() / currentMedia.duration,
-                currentleft = k * currentSegment.begin,
-                currentwidth = k * currentSegment.getDuration();
             if (relatedSegments.length) {
-                relatedSegments.forEach(function(_s) {
-                    var pos = k * (_s.annotation.begin + _s.annotation.end) / 2,
-                        corrpos = Math.max(145, Math.min(305, pos));
-                    vizdata = {
-                        annotation : _s.annotation,
-                        currentleft : currentleft,
-                        currentwidth : currentwidth,
-                        popleft : corrpos,
-                        left : k * _s.annotation.begin,
-                        width : k * _s.annotation.getDuration(),
-                        pointerpos : (pos - corrpos)
-                    }
-                    html += mediasegmenttemplate(vizdata);
-                });
                 $(".self-media-segments").show();
             } else {
                 $(".self-media-segments").hide();
             }
-            $(".self-media-segments .media-segments-list").html(html);
+            $(".self-media-segments .media-segments-list").html(mediaSegmentList(_(relatedSegments).pluck("annotation")));
             showOtherSegments();
             project.trigger("mouseout-annotation");
         }
@@ -417,36 +442,53 @@
         }
     }
     
+    function mediaSegmentList(_annotations) {
+        var html = '',
+            k = $(".Ldt-Slider").width() / currentMedia.duration,
+            lines = [];
+        _(_annotations).each(function(_a, i) {
+            var pos = k * (_a.begin + _a.end) / 2,
+                corrpos = Math.max(145, Math.min(305, pos)),
+                line = IriSP._(lines).find(function(line) {
+                    return !IriSP._(line.annotations).find(function(ann) {
+                        return ann.begin < _a.end && ann.end > _a.begin
+                    });
+                });
+            if (!line) {
+                line = { index: lines.length, annotations: []};
+                lines.push(line); 
+            }
+            line.annotations.push(_a);
+            vizdata = {
+                annotation : _a,
+                popleft : corrpos,
+                left : k * _a.begin,
+                width : k * _a.getDuration(),
+                height: 8,
+                top: 8 * line.index,
+                pointerpos : (pos - corrpos),
+                color: colors[i % colors.length]
+            }
+            html += mediasegmenttemplate(vizdata);
+        });
+        return mediasegmentlisttemplate({
+            height: 8 * lines.length,
+            left: k * currentSegment.begin,
+            width: k * currentSegment.getDuration(),
+            segments: html
+        });
+    }
+    
     /* Show Related Segments */
     
     function showOtherSegments() {
-        var annotations = mediasegmentscache[currentMedia.id]
+        var annotations = mediasegmentscache[currentMedia.id];
+        $(".other-media-segments .media-segments-list").html(mediaSegmentList(annotations));
         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 */
@@ -485,15 +527,16 @@
     $("#segment-form").submit(function() {
         if (addMode) {
             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 = undefined;
+            setMedia(mashup);
+            if (segment) {
+                mashup.setCurrentTime(segment.begin);
+                mashup.trigger("enter-annotation",segment);
+            }
         }
         return false;
     });
@@ -684,23 +727,52 @@
     
     /* Handling related segments */
    
+    function cloneSegment(sid) {
+        var s = directory.getElement(sid) || apidirectory.getElement(sid),
+            media = directory.getElement(s.getMedia().id);
+        
+        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.description = s.description;
+        currentSegment.keywords = s.keywords;
+        currentSegment.color = media.color;
+        currentSegment.thumbnail = media.thumbnail;
+        currentSegment.created = new Date();
+        currentSegment.on("change-begin", function() {
+            if (currentMedia && currentSegment === this) {
+                currentMedia.setCurrentTime(this.begin);
+                updateSegmentUI();
+            }
+        });
+        currentSegment.on("change-end", function() {
+            if (currentMedia && currentSegment === this) {
+                currentMedia.setCurrentTime(this.end);
+                updateSegmentUI();
+            }
+        });
+        setMedia(media);
+    }
+    
     $(".media-segments-list").on("mouseover", ".media-segment", function() {
         $(this).find(".media-segment-popin").show();
     }).on("mouseout", ".media-segment", function() {
         $(this).find(".media-segment-popin").hide();
     }).on("click", ".reprendre-segment", function() {
-        var sid = $(this).attr("data-segment-id"),
-            s = directory.getElement(sid) || apidirectory.getElement(sid);
-        currentSegment.title = IriSP.hc_messages.copy_of_ + s.title;
-        currentSegment.description = s.description;
-        $("#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 !
+        cloneSegment($(this).attr("data-segment-id"));
         return false;
     });
     
+    $(".col-left").on("mouseover", ".media-segment", function() {
+        $(this).find(".media-found-popin").show();
+    }).on("mouseout", ".media-segment", function() {
+        $(this).find(".media-found-popin").hide();
+    }).on("click", ".clone-segment", function() {
+        cloneSegment($(this).attr("data-segment-id"));
+        return false;
+    });
     /* Changing Hashcut Title and description */
     
     mashup.title = IriSP.hc_messages.mashup_title_placeholder;
diff -r 5a5024bc74e6 -r f39df810caab integration/js/mashupcore.js
--- a/integration/js/mashupcore.js	Fri Nov 16 19:23:20 2012 +0100
+++ b/integration/js/mashupcore.js	Thu Nov 22 10:52:28 2012 +0100
@@ -525,6 +525,11 @@
         }
     });
     
+    mashup.on("volumechange", function() {
+        if (mashup === currentMedia) {
+            ctrlVolumeUpdater();
+        }
+    });
     /* Mashup Events to UI */
    
     mashup.on("play", function() {
diff -r 5a5024bc74e6 -r f39df810caab integration/js/mashupplayer.js
--- a/integration/js/mashupplayer.js	Fri Nov 16 19:23:20 2012 +0100
+++ b/integration/js/mashupplayer.js	Thu Nov 22 10:52:28 2012 +0100
@@ -7,7 +7,7 @@
         }),
         mashup,
         mediatemplate = _.template('<li class="item-video media" data-media-id="<%= media.id %>">'
-            + '<a href="#"><img alt="<%= media.title %>" src="<%= media.thumbnail %>"></a><div class="video-info">'
+            + '<a href="#"><img class="thumbnail" alt="<%= media.title %>" src="<%= media.thumbnail %>"></a><div class="video-info">'
             + '<h3 class="title-video"><a href="#"><%= media.title %></a></h3><p class="description"><%= media.description %></p>'
             + '<p class="time-length">Durée : <span><%= media.duration.toString() %></span></p><div class="frise">'
             + '<div class="frise-overflow"><div class="frise-segments"><%= segments %></div></div></div></div></li>');