--- a/src/widgets/MediaList.js	Tue Jun 12 19:44:20 2012 +0200
+++ b/src/widgets/MediaList.js	Wed Jun 20 14:45:30 2012 +0200
@@ -20,7 +20,8 @@
 
 IriSP.Widgets.MediaList.prototype.defaults = {
     default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
-    media_url_template : "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/"
+    media_url_template : "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/",
+    default_color : "#000080"
 };
 
 IriSP.Widgets.MediaList.prototype.template =
@@ -29,14 +30,19 @@
     + '<div class="Ldt-MediaList-Now-ThumbContainer"><a href="" target="_blank">'
     + '<img class="Ldt-MediaList-Now-Thumbnail" src="" /></a></div>'
     + '<h3 class="Ldt-MediaList-Now-Title"><a href="" target="_blank"></a></h3>'
-    + '<p class="Ldt-MediaList-Now-Description"></p></div></div>'
+    + '<p class="Ldt-MediaList-Now-Description"></p><div class="Ldt-MediaList-Now-MediaView"></div></div></div>'
     + '<div class="Ldt-MediaList-Other"><h2></h2><hr /><ul class="Ldt-MediaList-OtherList"></ul></div>';
 
+IriSP.Widgets.MediaList.prototype.mediaViewTemplate =
+    '<div class="Ldt-MediaList-MediaView-Background"></div>{{#segments}}<div class="Ldt-MediaList-Segment" style="background: {{color}}; left: {{left}}px; width: {{width}}px;"></div>{{/segments}}';
+
 IriSP.Widgets.MediaList.prototype.mediaTemplate =
     '<li class="Ldt-MediaList-OtherList-li"><div class="Ldt-MediaList-Other-ThumbContainer"><a href="{{url}}" target="_blank">'
     + '<img class="Ldt-MediaList-Other-Thumbnail" src="{{thumbnail}}" /></a></div>'
     + '<h3 class="Ldt-MediaList-Other-Title"><a href="{{url}}" target="_blank">{{title}}</a></h3>'
-    + '<p class="Ldt-MediaList-Other-Description">{{description}}</p></li>'
+    + '<p class="Ldt-MediaList-Other-Description">{{description}}</p><div class="Ldt-MediaList-Other-MediaView">'
+    + IriSP.Widgets.MediaList.prototype.mediaViewTemplate + '</div></li>';
+
 
 IriSP.Widgets.MediaList.prototype.onSearch = function(searchString) {
     this.searchString = typeof searchString !== "undefined" ? searchString : '';
@@ -57,6 +63,23 @@
     this.redraw();
 };
 
+IriSP.Widgets.MediaList.prototype.getSegments = function(_media) {
+    var _this = this,
+        _scale = this.$.width()/_media.duration.milliseconds;
+    return this.getWidgetAnnotations()
+        .filter(function(_annotation) {
+            return _annotation.getMedia().id == _media.id;
+        })
+        .map(function(_a) {
+            var _annotation = ( _a.type = "mashedAnnotation" ? _a.annotation : _a );
+            return {
+                left: _scale * _annotation.begin,
+                width: _scale * (_annotation.end - _annotation.begin),
+                color: ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.default_color )
+            }
+        })
+}
+
 IriSP.Widgets.MediaList.prototype.redraw = function(_media) {
     if (typeof _media !== "undefined") {
         this.$.find('.Ldt-MediaList-Other h2').html(this.l10n.other_media);
@@ -69,6 +92,10 @@
                     media: _media.id
                 });
         this.$.find('.Ldt-MediaList-NowContainer a').attr("href", _url);
+        var _mediaView = Mustache.to_html( this.mediaViewTemplate, {
+            segments: this.getSegments(_media)
+        });
+        this.$.find('.Ldt-MediaList-Now-MediaView').html(_mediaView);
     } else {
         this.$.find('.Ldt-MediaList-Other h2').html(this.l10n.all_media);
         this.$.find('.Ldt-MediaList-NowPlaying').hide();
@@ -87,7 +114,8 @@
                         media: _media.id
                     }),
                 title: _media.title,
-                description: _media.description
+                description: _media.description,
+                segments: _this.getSegments(_media)
             })
         }).join("");
         this.$.find('.Ldt-MediaList-OtherList').html(_html);