--- a/integration/css/common.css	Wed Nov 28 15:46:05 2012 +0100
+++ b/integration/css/common.css	Wed Nov 28 17:21:26 2012 +0100
@@ -463,7 +463,7 @@
 	margin-right: 4px;
 	max-width: 80px;
 	max-height: 60px;
-	box-shadow: 2px 2px 2px #333333;
+	box-shadow: 1px 1px 2px #808080;
 }
 .item-video .video-info{
     margin-left: 88px;
@@ -486,13 +486,13 @@
 	color: #de2500;
 }
 .item-video .media-count-wrap {
+    display: none;
+    height: 15px;
+    left: 66px;
+    position: absolute;
+    text-align: right;
+    top: 45px;
     width: 30px;
-	text-align: center;
-	position: absolute;
-  	top: 45px;
-  	left: 75px;
-	height: 15px;
-	display: none;
 }
 .item-video .media-count{
 	color: #FFF;
@@ -502,8 +502,9 @@
 	-webkit-border-radius: 4px;
   	-moz-border-radius: 4px;
   	border-radius: 4px;
-  	padding: 0 3px;
-  	border: 1px solid #DE2500;
+  	padding: 0 2px;
+  	border: 1px solid #C81000;
+  	text-shadow: 1px 1px 1px #330000;
 }
 .item-video .subtitle{
 	margin-bottom: 2px;
@@ -629,15 +630,22 @@
 	background: #333333;
 	position: relative;
 }
-.video-wait  {
-    display: none;
-    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
+.video-wait, .full-wait {
+    left: 0; top: 0; width: 100%; height: 100%;
     background-color: rgba(120, 120, 140, .6);
     background-image: url(../img/reel.gif);
     background-position: center;
     background-repeat: no-repeat;
-    z-index: 3;
+}
+
+.video-wait {
+    position: absolute; display: none; z-index: 3;
 }
+
+.full-wait {
+    position: fixed; z-index: 300;
+}
+
 .widget {
     position: relative; 
 }

--- a/integration/css/edition.css	Wed Nov 28 15:46:05 2012 +0100
+++ b/integration/css/edition.css	Wed Nov 28 17:21:26 2012 +0100
@@ -42,7 +42,7 @@
 }
 .col-middle-header{
 	height: 35px;
-	font-size: 16px;
+	font-size: 15px;
 	clear: both;
 }
 /* Tabs */
@@ -243,9 +243,6 @@
 .tutorial ol{
 	padding-left: 22px;
 }
-.tutorial li:first-child{
-	width: 324px;
-}
 .tutorial li{
 	list-style: decimal;
 	font-size: 14px;
@@ -269,7 +266,7 @@
 	padding-top: 8px;
 	margin-bottom: 12px;
 	color: #30036d;
-	font-size: 16px;
+	font-size: 15px;
 	font-weight: 600;
 }
 .left-head input {
@@ -311,7 +308,7 @@
  	text-align: right;
  	color: #30036D;
 	font-weight: 600;
-	font-size: 16px;
+	font-size: 15px;
 	margin-bottom: 12px;
 	padding-top: 8px;
 }

--- a/integration/edition.html	Wed Nov 28 15:46:05 2012 +0100
+++ b/integration/edition.html	Wed Nov 28 17:21:26 2012 +0100
@@ -149,7 +149,7 @@
                         
                         <div class="col-middle-header">
                             <a href="#" class="tab tab-segment">Segmenter <span class="tab-media-title"></span></a>
-                            <a href="#" class="tab tab-pvw">Prévisualiser</a>
+                            <a href="#" class="tab tab-pvw">Prévisualiser et publier</a>
                         </div>
                         
                         <div class="video">

Binary file integration/img/apercu-video.jpg has changed

Binary file integration/img/bg-degrade.png has changed

Binary file integration/img/border-right-segment.png has changed

Binary file integration/img/visuel-player-bar.jpg has changed

Binary file integration/img/visuel-segment.png has changed

--- a/integration/js/editor.js	Wed Nov 28 15:46:05 2012 +0100
+++ b/integration/js/editor.js	Wed Nov 28 17:21:26 2012 +0100
@@ -9,11 +9,6 @@
             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>'
@@ -655,6 +650,21 @@
         return false;
     });
     
+    $(".mashup-frise").click(function(evt) {
+        if (!mashup.duration.milliseconds) {
+            return;
+        }
+        var el = $(this), t = ( evt.pageX - el.offset().left ) * mashup.duration / el.width(), segment = mashup.getAnnotationAtTime(t);
+        if (segment) {
+            if (currentMedia === mashup) {
+                project.trigger("click-annotation", segment.annotation);
+            } else {
+                currentSegment = segment.annotation;
+                setMedia(currentSegment.getMedia());
+            }
+        }
+    });
+    
     /* Tangles */
     var tangleMsPerPixel = 100,
         activeTangle,
@@ -858,6 +868,8 @@
         postproject.modified = new Date();
         postproject.title = mashup.title;
         postproject.description = mashup.description;
+        var waitscreen = $('<div class="full-wait">');
+        waitscreen.appendTo('body');
         $.ajax({
             type: "POST",
             url: IriSP.endpoints.project,
@@ -874,11 +886,10 @@
                 document.location.href = destination;
             },
             error: function(jqXHR, textStatus, errorThrown){
-                console.log(arguments);
                 alert(IriSP.translate("Server error\nYour hashcut couldn't be published"));
+                waitscreen.remove();
             }
         });
-        //TODO: ADD WAITING SCREEN
         
         return false;
     });

--- a/integration/js/mashupcore.js	Wed Nov 28 15:46:05 2012 +0100
+++ b/integration/js/mashupcore.js	Wed Nov 28 17:21:26 2012 +0100
@@ -648,15 +648,6 @@
         project.trigger("mouseout-annotation");
         mouseoverSegment = undefined;
     })
-    .click(function(evt) {
-        if (!mashup.duration.milliseconds) {
-            return;
-        }
-        var el = $(this), t = ( evt.pageX - el.offset().left ) * mashup.duration / el.width(), segment = mashup.getAnnotationAtTime(t);
-        if (segment) {
-            project.trigger("click-annotation", segment.annotation);
-        }
-    });
     
     mashup.trigger("add");
     

--- a/integration/js/mashupplayer.js	Wed Nov 28 15:46:05 2012 +0100
+++ b/integration/js/mashupplayer.js	Wed Nov 28 17:21:26 2012 +0100
@@ -81,7 +81,18 @@
         })
         .on("mouseout", ".item-video", function() {
             project.trigger("mouseout-annotation");
-        })
+        });
+        
+        $(".mashup-frise")
+        .click(function(evt) {
+            if (!mashup.duration.milliseconds) {
+                return;
+            }
+            var el = $(this), t = ( evt.pageX - el.offset().left ) * mashup.duration / el.width(), segment = mashup.getAnnotationAtTime(t);
+            if (segment) {
+                project.trigger("click-annotation", segment.annotation);
+            }
+        });
         
         
     });

--- a/integration/js/medialist-serializer.js	Wed Nov 28 15:46:05 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,19 +0,0 @@
-IriSP.serializers.medialist = {
-    deSerialize : function(_data, _source) {
-        var _medialist = new IriSP.Model.List(_source.directory);
-        _data = IriSP._(_data).shuffle();
-        IriSP._(_data).each(function(_m, i) {
-            var _media = new IriSP.Model.Media(_m.id, _source);
-            _media.video = _m.video;
-            _media.title = _m.title;
-            _media.description = "par " + _m.author;
-            _media.setDuration(_m.duration);
-            _media.thumbnail = _m.thumbnail;
-            _media.color = IriSP.vizcolors[i % IriSP.vizcolors.length];
-            _medialist.push(_media);
-        });
-        _source.addList("media", _medialist);
-    }
-}
-
-/* END medialist-serializer.js */

--- a/src/hashcut/static/hashcut/iri/css/common.css	Wed Nov 28 15:46:05 2012 +0100
+++ b/src/hashcut/static/hashcut/iri/css/common.css	Wed Nov 28 17:21:26 2012 +0100
@@ -463,7 +463,7 @@
 	margin-right: 4px;
 	max-width: 80px;
 	max-height: 60px;
-	box-shadow: 2px 2px 2px #333333;
+	box-shadow: 1px 1px 2px #808080;
 }
 .item-video .video-info{
     margin-left: 88px;
@@ -486,13 +486,13 @@
 	color: #de2500;
 }
 .item-video .media-count-wrap {
+    display: none;
+    height: 15px;
+    left: 66px;
+    position: absolute;
+    text-align: right;
+    top: 45px;
     width: 30px;
-	text-align: center;
-	position: absolute;
-  	top: 45px;
-  	left: 75px;
-	height: 15px;
-	display: none;
 }
 .item-video .media-count{
 	color: #FFF;
@@ -502,8 +502,9 @@
 	-webkit-border-radius: 4px;
   	-moz-border-radius: 4px;
   	border-radius: 4px;
-  	padding: 0 3px;
-  	border: 1px solid #DE2500;
+  	padding: 0 2px;
+  	border: 1px solid #C81000;
+  	text-shadow: 1px 1px 1px #330000;
 }
 .item-video .subtitle{
 	margin-bottom: 2px;
@@ -629,15 +630,22 @@
 	background: #333333;
 	position: relative;
 }
-.video-wait  {
-    display: none;
-    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
+.video-wait, .full-wait {
+    left: 0; top: 0; width: 100%; height: 100%;
     background-color: rgba(120, 120, 140, .6);
     background-image: url(../img/reel.gif);
     background-position: center;
     background-repeat: no-repeat;
-    z-index: 3;
+}
+
+.video-wait {
+    position: absolute; display: none; z-index: 3;
 }
+
+.full-wait {
+    position: fixed; z-index: 300;
+}
+
 .widget {
     position: relative; 
 }

--- a/src/hashcut/static/hashcut/iri/css/edition.css	Wed Nov 28 15:46:05 2012 +0100
+++ b/src/hashcut/static/hashcut/iri/css/edition.css	Wed Nov 28 17:21:26 2012 +0100
@@ -42,7 +42,7 @@
 }
 .col-middle-header{
 	height: 35px;
-	font-size: 16px;
+	font-size: 15px;
 	clear: both;
 }
 /* Tabs */
@@ -243,9 +243,6 @@
 .tutorial ol{
 	padding-left: 22px;
 }
-.tutorial li:first-child{
-	width: 324px;
-}
 .tutorial li{
 	list-style: decimal;
 	font-size: 14px;
@@ -269,7 +266,7 @@
 	padding-top: 8px;
 	margin-bottom: 12px;
 	color: #30036d;
-	font-size: 16px;
+	font-size: 15px;
 	font-weight: 600;
 }
 .left-head input {
@@ -311,7 +308,7 @@
  	text-align: right;
  	color: #30036D;
 	font-weight: 600;
-	font-size: 16px;
+	font-size: 15px;
 	margin-bottom: 12px;
 	padding-top: 8px;
 }

Binary file src/hashcut/static/hashcut/iri/img/apercu-video.jpg has changed

Binary file src/hashcut/static/hashcut/iri/img/bg-degrade.png has changed

Binary file src/hashcut/static/hashcut/iri/img/border-right-segment.png has changed

Binary file src/hashcut/static/hashcut/iri/img/visuel-home-last.jpg has changed

Binary file src/hashcut/static/hashcut/iri/img/visuel-home-news.jpg has changed

Binary file src/hashcut/static/hashcut/iri/img/visuel-player-bar.jpg has changed

Binary file src/hashcut/static/hashcut/iri/img/visuel-segment.png has changed

--- a/src/hashcut/static/hashcut/js/hashcut.js	Wed Nov 28 15:46:05 2012 +0100
+++ b/src/hashcut/static/hashcut/js/hashcut.js	Wed Nov 28 17:21:26 2012 +0100
@@ -2222,15 +2222,6 @@
         project.trigger("mouseout-annotation");
         mouseoverSegment = undefined;
     })
-    .click(function(evt) {
-        if (!mashup.duration.milliseconds) {
-            return;
-        }
-        var el = $(this), t = ( evt.pageX - el.offset().left ) * mashup.duration / el.width(), segment = mashup.getAnnotationAtTime(t);
-        if (segment) {
-            project.trigger("click-annotation", segment.annotation);
-        }
-    });
     
     mashup.trigger("add");
     
@@ -2249,11 +2240,6 @@
             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>'
@@ -2895,6 +2881,21 @@
         return false;
     });
     
+    $(".mashup-frise").click(function(evt) {
+        if (!mashup.duration.milliseconds) {
+            return;
+        }
+        var el = $(this), t = ( evt.pageX - el.offset().left ) * mashup.duration / el.width(), segment = mashup.getAnnotationAtTime(t);
+        if (segment) {
+            if (currentMedia === mashup) {
+                project.trigger("click-annotation", segment.annotation);
+            } else {
+                currentSegment = segment.annotation;
+                setMedia(currentSegment.getMedia());
+            }
+        }
+    });
+    
     /* Tangles */
     var tangleMsPerPixel = 100,
         activeTangle,
@@ -3098,6 +3099,8 @@
         postproject.modified = new Date();
         postproject.title = mashup.title;
         postproject.description = mashup.description;
+        var waitscreen = $('<div class="full-wait">');
+        waitscreen.appendTo('body');
         $.ajax({
             type: "POST",
             url: IriSP.endpoints.project,
@@ -3114,11 +3117,10 @@
                 document.location.href = destination;
             },
             error: function(jqXHR, textStatus, errorThrown){
-                console.log(arguments);
                 alert(IriSP.translate("Server error\nYour hashcut couldn't be published"));
+                waitscreen.remove();
             }
         });
-        //TODO: ADD WAITING SCREEN
         
         return false;
     });
@@ -3210,7 +3212,18 @@
         })
         .on("mouseout", ".item-video", function() {
             project.trigger("mouseout-annotation");
-        })
+        });
+        
+        $(".mashup-frise")
+        .click(function(evt) {
+            if (!mashup.duration.milliseconds) {
+                return;
+            }
+            var el = $(this), t = ( evt.pageX - el.offset().left ) * mashup.duration / el.width(), segment = mashup.getAnnotationAtTime(t);
+            if (segment) {
+                project.trigger("click-annotation", segment.annotation);
+            }
+        });
         
         
     });