--- a/src/metadatacomposer/static/metadatacomposer/css/styles_player.css	Fri Jun 21 17:16:45 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/css/styles_player.css	Fri Jun 21 18:40:32 2013 +0200
@@ -628,7 +628,7 @@
 }
 
 .timeline {
-    background: #303030; height: 10px; position: relative; cursor: pointer;
+    background: #303030; height: 10px; position: relative; cursor: pointer; overflow: hidden;
 }
 
 .annotation-onscreen .timeline {
@@ -815,4 +815,12 @@
     background: #B8155F; display: none;
 }
 
+.media-duration, .media-position, .time-at-mouse {
+    text-align: right; color: #e0e0e0; line-height: 10px; font-size: 10px; position: absolute; right: 2px; top: 0;
+}
+
+.time-at-mouse {
+    color: #db8aaf; padding-right: 1px;
+}
+
 /* */

--- a/src/metadatacomposer/static/metadatacomposer/js/player.js	Fri Jun 21 17:16:45 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/player.js	Fri Jun 21 18:40:32 2013 +0200
@@ -44,7 +44,9 @@
     function showAtMousePos(evt) {
         var pos = evt.pageX - $(".timeline").offset().left;
         $(".mouse-progress-indicator").css("left", pos);
-        return pos;
+        var t = new IriSP.Model.Time(pos * myMedia.duration / $(".timeline").width());
+        $(".time-at-mouse").text(t);
+        return t;
     }
     
     $(".timeline").mouseenter(function(e) {
@@ -54,7 +56,7 @@
         $(".mouse-progress-indicator").hide();
     }).mousemove(showAtMousePos)
     .click(function(e) {
-        myMedia.setCurrentTime( showAtMousePos(e) * myMedia.duration / $(".timeline").width());
+        myMedia.setCurrentTime( showAtMousePos(e) );
     });
     
     var tags = myProject.getTags().sortBy(function(t) {
@@ -522,8 +524,6 @@
                     case "html":
                         annotationDiv.find(".text-contents").html(text);
                         
-                        //annotationDiv.find(".text-contents [style]").attr("style","");
-
                         var ps = annotationDiv.find(".text-contents>p"),
                             groups = [],
                             last, group;
@@ -659,10 +659,14 @@
     $(window).resize(repositionElements);
     
     $(document).keydown(function(e) {
-        if (e.keyCode === 122) {
+        if (e.keyCode === 122) { // F11
             fullScreen();
             return false;
         }
+        if (e.keyCode === 32) { // Space
+            myMedia[myMedia.paused ? "play" : "pause"]();
+            return false;
+        }
     });
       
 });

--- a/src/metadatacomposer/templates/partial/metadatacomposer_partial_player.html	Fri Jun 21 17:16:45 2013 +0200
+++ b/src/metadatacomposer/templates/partial/metadatacomposer_partial_player.html	Fri Jun 21 18:40:32 2013 +0200
@@ -21,9 +21,14 @@
             </div>
             <div class="timelines">
                 <div class="timeline">
-                    <div class="elapsed"></div>
+                    <div class="media-duration">00:00</div>
+                    <div class="elapsed">
+                        <div class="media-position">00:00</div>
+                    </div>
                     <div class="progress-indicator"></div>
-                    <div class="mouse-progress-indicator"></div>
+                    <div class="mouse-progress-indicator">
+                        <div class="time-at-mouse">00:00</div>
+                    </div>
                 </div>
                 <div class="chapters-bar">
                     <ul class="chapters-list"></ul>