# HG changeset patch
# User veltr
# Date 1339433750 -7200
# Node ID c9c34daf1fe6141e61de521a1da36a229fbab363
# Parent  1c68ad1ea60f56755adfe750da3db3765dda9500
improvements in interactions

diff -r 1c68ad1ea60f -r c9c34daf1fe6 crea/integration/css/musitag.css
--- a/crea/integration/css/musitag.css	Mon Jun 11 17:59:51 2012 +0200
+++ b/crea/integration/css/musitag.css	Mon Jun 11 18:55:50 2012 +0200
@@ -83,7 +83,7 @@
 }
 
 .home-media {
-    float: left; width: 440px; height: 130px; padding: 25px; background: url(../img/home-media-box.png);
+    float: left; width: 440px; height: 130px; padding: 25px; background: url(../img/home-media-box.png); cursor: pointer;
 }
 
 .home-media-image {
@@ -134,14 +134,6 @@
     left: 2px; top: 2px; background-position: -200px -50px;
 }
 
-.tag-container-50:hover .tag-shadow {
-    left: 0; top: 0;
-}
-
-.tag-container-50:hover .tag-color, .tag-container-50:hover .tag-emoticon {
-    left: 2px; top: 2px;
-}
-
 .tag-container-50 .tag-yellow {
     background-position: -50px 0;
 }
diff -r 1c68ad1ea60f -r c9c34daf1fe6 crea/integration/metadataplayer/LdtPlayer-core.css
--- a/crea/integration/metadataplayer/LdtPlayer-core.css	Mon Jun 11 17:59:51 2012 +0200
+++ b/crea/integration/metadataplayer/LdtPlayer-core.css	Mon Jun 11 18:55:50 2012 +0200
@@ -1,7 +1,7 @@
 /* Base classes */
 
-.Ldt-Loader {
-    text-indent: -9999px;
+h3.Ldt-Loader {
+    display: none;
 }
 
 .Musitag-container-50 {
diff -r 1c68ad1ea60f -r c9c34daf1fe6 crea/integration/metadataplayer/MusitagAnnotations.js
--- a/crea/integration/metadataplayer/MusitagAnnotations.js	Mon Jun 11 17:59:51 2012 +0200
+++ b/crea/integration/metadataplayer/MusitagAnnotations.js	Mon Jun 11 18:55:50 2012 +0200
@@ -58,9 +58,6 @@
         height: 1,
         provider: "rtmp",
         events: {
-            onPlay: function() {
-                _this.setPlayState(true);
-            },
             onPause: function() {
                 _this.setPlayState(false);
             },
@@ -70,16 +67,20 @@
         }
     });
     this.current_audio = false;
-    this.playing = false;
+    this.annotation_playing = false;
+    this.media_playing = !this.player.popcorn.media.paused;
     this.redraw();
 }
 
 IriSP.Widgets.MusitagAnnotations.prototype.setPlayState = function(_playState) {
-    this.playing = _playState;
+    this.annotation_playing = _playState;
     if (_playState) {
         this.$main.find(".Musitag-Annotations-Balloon").addClass("pause");
     } else {
         this.$main.find(".Musitag-Annotations-Balloon").removeClass("pause");
+        if (this.media_playing) {
+            this.player.popcorn.play();
+        }
     }
 }
 
@@ -136,13 +137,17 @@
     this.$main.find('.Musitag-Annotations-Balloon').click(function() {
         var _el = IriSP.jQuery(this),
             _audiofile = _el.attr("audio-url").replace(_this.rtmp_streamer,"");
-        if (_this.playing) {
+        if (_this.annotation_playing) {
             _this.jwplayer.pause();
             _this.loadAudio(_audiofile);
         } else {
             _this.loadAudio(_audiofile);
             _this.jwplayer.play();
             _this.setPlayState(true);
+            _this.media_playing = !_this.player.popcorn.media.paused;
+            if (_this.media_playing) {
+                _this.player.popcorn.pause();
+            }
         }
     });
 }
diff -r 1c68ad1ea60f -r c9c34daf1fe6 web/tralalere/static/tralalere/css/musitag.css
--- a/web/tralalere/static/tralalere/css/musitag.css	Mon Jun 11 17:59:51 2012 +0200
+++ b/web/tralalere/static/tralalere/css/musitag.css	Mon Jun 11 18:55:50 2012 +0200
@@ -83,7 +83,7 @@
 }
 
 .home-media {
-    float: left; width: 440px; height: 130px; padding: 25px; background: url(../img/home-media-box.png);
+    float: left; width: 440px; height: 130px; padding: 25px; background: url(../img/home-media-box.png); cursor: pointer;
 }
 
 .home-media-image {
@@ -134,14 +134,6 @@
     left: 2px; top: 2px; background-position: -200px -50px;
 }
 
-.tag-container-50:hover .tag-shadow {
-    left: 0; top: 0;
-}
-
-.tag-container-50:hover .tag-color, .tag-container-50:hover .tag-emoticon {
-    left: 2px; top: 2px;
-}
-
 .tag-container-50 .tag-yellow {
     background-position: -50px 0;
 }
@@ -174,6 +166,12 @@
     background-position: -150px -50px;
 }
 
+/* PLAYER.HTML */
+
+.Ldt-Loader {
+    display: none;
+}
+
 .player-header {
     width: 980px; height: 220px;
 }
diff -r 1c68ad1ea60f -r c9c34daf1fe6 web/tralalere/static/tralalere/metadataplayer/LdtPlayer-core.css
--- a/web/tralalere/static/tralalere/metadataplayer/LdtPlayer-core.css	Mon Jun 11 17:59:51 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/LdtPlayer-core.css	Mon Jun 11 18:55:50 2012 +0200
@@ -1,7 +1,7 @@
 /* Base classes */
 
-.Ldt-Loader {
-    text-indent: -9999px;
+h3.Ldt-Loader {
+    display: none;
 }
 
 .Musitag-container-50 {
diff -r 1c68ad1ea60f -r c9c34daf1fe6 web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.js
--- a/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.js	Mon Jun 11 17:59:51 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.js	Mon Jun 11 18:55:50 2012 +0200
@@ -58,9 +58,6 @@
         height: 1,
         provider: "rtmp",
         events: {
-            onPlay: function() {
-                _this.setPlayState(true);
-            },
             onPause: function() {
                 _this.setPlayState(false);
             },
@@ -70,16 +67,20 @@
         }
     });
     this.current_audio = false;
-    this.playing = false;
+    this.annotation_playing = false;
+    this.media_playing = !this.player.popcorn.media.paused;
     this.redraw();
 }
 
 IriSP.Widgets.MusitagAnnotations.prototype.setPlayState = function(_playState) {
-    this.playing = _playState;
+    this.annotation_playing = _playState;
     if (_playState) {
         this.$main.find(".Musitag-Annotations-Balloon").addClass("pause");
     } else {
         this.$main.find(".Musitag-Annotations-Balloon").removeClass("pause");
+        if (this.media_playing) {
+            this.player.popcorn.play();
+        }
     }
 }
 
@@ -136,13 +137,17 @@
     this.$main.find('.Musitag-Annotations-Balloon').click(function() {
         var _el = IriSP.jQuery(this),
             _audiofile = _el.attr("audio-url").replace(_this.rtmp_streamer,"");
-        if (_this.playing) {
+        if (_this.annotation_playing) {
             _this.jwplayer.pause();
             _this.loadAudio(_audiofile);
         } else {
             _this.loadAudio(_audiofile);
             _this.jwplayer.play();
             _this.setPlayState(true);
+            _this.media_playing = !_this.player.popcorn.media.paused;
+            if (_this.media_playing) {
+                _this.player.popcorn.pause();
+            }
         }
     });
 }
diff -r 1c68ad1ea60f -r c9c34daf1fe6 web/tralalere/templates/home.html
--- a/web/tralalere/templates/home.html	Mon Jun 11 17:59:51 2012 +0200
+++ b/web/tralalere/templates/home.html	Mon Jun 11 18:55:50 2012 +0200
@@ -1,8 +1,19 @@
 {% extends "base.html" %}
-{% block main_content %}
 {% load thumbnail %}
 {% load i18n %}
 {% load l10n %}
+{% block js_import %} 
+        <script type="text/javascript" src="{{STATIC_URL}}tralalere/js/jquery.min.js"></script>
+        <script type="text/javascript">
+            $(function() {
+                $(".home-media").click(function() {
+                    document.location.href = $(this).find("a").attr("href");
+                    return false;
+                });
+            });
+        </script>
+{% endblock %}
+{% block main_content %}
             <div class="home-header">
                 <h1>Musitag</h1>
                 <h2>{% trans "Mets tes couleurs, tes émotions<br />et ta voix sur la musique !" %}</h2>
@@ -23,7 +34,7 @@
                 {% if content.tags_stats.colors %}
                 <ul class="home-dataviz home-dataviz-colors">
                 {% for tag in content.tags_stats.colors %}
-                    <li style="width: {{tag.width}}px" title="{% trans tag.tag %}">
+                    <li style="width: {{tag.width}}px" title="{{tag.score}}x {% trans tag.tag %}">
                     {% if tag.scale == 1 %}
                         <div class="tag-container-50" >
                     {% else %}
@@ -39,7 +50,7 @@
                 {% if content.tags_stats.emoticons %}
                 <ul class="home-dataviz home-dataviz-emoticon">
                 {% for tag in content.tags_stats.emoticons %}
-                    <li style="width: {{tag.width}}px" title="{% trans tag.tag %}">
+                    <li style="width: {{tag.width}}px" title="{{tag.score}}x {% trans tag.tag %}">
                     {% if tag.scale == 1 %}
                         <div class="tag-container-50">
                     {% else %}