From: Jérémy Fabre <Jeremy@iMac-de-Jeremy.local>
Date: Tue, 8 Nov 2016 10:52:57 +0000 (+0100)
Subject: Add the media description to the video and audio playlists
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=b43660499e31ea04b321dba48aa0202ffffa9893;p=mezzo.git

Add the media description to the video and audio playlists
---

diff --git a/app/static/src/js/modules/audio.js b/app/static/src/js/modules/audio.js
index b315dbf6..adf8bbdd 100644
--- a/app/static/src/js/modules/audio.js
+++ b/app/static/src/js/modules/audio.js
@@ -59,7 +59,7 @@ Audio.prototype.init = function() {
             //
             var first = playlist.find('li a').attr('data-src');
             playlist.find('li').first().addClass('playing');
-            that.setTitle(as[i], playlist.find('li:first-child a').text());
+            that.setTitle(as[i], playlist.find('li:first-child a span').text(), playlist.find('li:first-child a small').text());
             as[i].load(first);
 
             playlist.find('li').bind('click', function(e) {
@@ -70,7 +70,7 @@ Audio.prototype.init = function() {
                 $(this).addClass('playing').siblings().removeClass('playing');
                 that.audios[idx].load($('a', this).attr('data-src'));
                 that.audios[idx].play();
-                that.setTitle(that.audios[idx], $('a', this).text());
+                that.setTitle(that.audios[idx], $('a span', this).text(), $('a small', this).text());
 
             });
 
@@ -95,16 +95,22 @@ Audio.prototype.pauseAllExcept = function(audio) {
 
 };
 
-Audio.prototype.setTitle = function(audio, title) {
+Audio.prototype.setTitle = function(audio, title, subtitle) {
 
     var split = title.split(",");
     var html = '';
 
-    if(split[0]) {
+    /*if(split[0]) {
         html += split[0];
     }
     if(split[1]) {
         html += '<br/><span>'+split[1]+'</span>'
+    }*/
+
+    html += title;
+
+    if(subtitle) {
+        html += '<br/><span>'+subtitle+'</span>';
     }
 
     audio.title.html(html);
diff --git a/app/static/src/sass/modules/medias/_audio-playlist.scss b/app/static/src/sass/modules/medias/_audio-playlist.scss
index 8ecc9cca..64be7889 100644
--- a/app/static/src/sass/modules/medias/_audio-playlist.scss
+++ b/app/static/src/sass/modules/medias/_audio-playlist.scss
@@ -13,6 +13,14 @@ $module: ".audio-playlist";
         @include font-size(xs);
         @include typeface(sans-serif);
         @include transition(all 0.25s ease-in-out);
+        font-style: italic;
+
+        small {
+            font-style: normal;
+            display: inline-block;
+            margin-left: 5px;
+        }
+
         color: white;
 
         &.playing {
diff --git a/app/static/src/sass/modules/medias/_video-playlist.scss b/app/static/src/sass/modules/medias/_video-playlist.scss
index 6d1a560e..39738241 100644
--- a/app/static/src/sass/modules/medias/_video-playlist.scss
+++ b/app/static/src/sass/modules/medias/_video-playlist.scss
@@ -14,6 +14,13 @@ $module: ".video-playlist";
         @include typeface(sans-serif);
         @include transition(all 0.25s ease-in-out);
         color: white;
+        font-style: italic;
+
+        small {
+            font-style: normal;
+            display: inline-block;
+            margin-left: 5px;
+        }
 
         &.playing {
 
diff --git a/app/static/src/sass/vendors/_audiojs.scss b/app/static/src/sass/vendors/_audiojs.scss
index c3e40aa9..f40f193d 100644
--- a/app/static/src/sass/vendors/_audiojs.scss
+++ b/app/static/src/sass/vendors/_audiojs.scss
@@ -36,15 +36,25 @@
         left: 116px;
         top: 30px;
 
+        /*@include font-size(m);
+        @include typeface(serif);
+        font-weight: weight(bold);*/
+
         @include font-size(m);
         @include typeface(serif);
         font-weight: weight(bold);
+        font-style: italic;
 
         span {
-            @include font-size(m);
+            /*@include font-size(m);
             @include typeface(serif);
             font-weight: weight(regular);
-            font-style: italic;
+            font-style: italic;*/
+
+            @include font-size(s);
+            @include typeface(serif);
+            font-weight: weight(light);
+            font-style: normal;
         }
 
     }
diff --git a/app/templates/media/inc/playlist_audio_detail.html b/app/templates/media/inc/playlist_audio_detail.html
index 8b295e74..23c728e9 100644
--- a/app/templates/media/inc/playlist_audio_detail.html
+++ b/app/templates/media/inc/playlist_audio_detail.html
@@ -17,7 +17,7 @@
             {% with media.media as media %}
                 {% for transcoded in media.transcoded.all %}
                     {% if transcoded.mime_type == "audio/mp4" or transcoded.mime_type == "audio/mp3" %}
-                        <a href="#" data-src="{{ transcoded.url }}">{{ media.title }}</a>
+                        <a href="#" data-src="{{ transcoded.url }}"><span>{{ media.title }}</span>{% if media.description %}<small> {{ media.description }}</small>{% endif %}</a>
                     {% endif %}
                 {% endfor %}
             {% endwith %}
diff --git a/app/templates/media/inc/playlist_video_detail.html b/app/templates/media/inc/playlist_video_detail.html
index 977394f4..d9c65dce 100644
--- a/app/templates/media/inc/playlist_video_detail.html
+++ b/app/templates/media/inc/playlist_video_detail.html
@@ -19,7 +19,7 @@
         <ol class="video-playlist">
     {% endif %}
         {% spaceless %}
-            <li class="video-playlist__item{% if forloop.first %} playing{% endif %}"><a href="#" data-poster="{{media.poster_url }}" data-src="{% for transcoded in media.transcoded.all %}{% if forloop.first %}{% else %},{% endif %}{{ transcoded.url }}{% if forloop.last %}{% endif %}{% endfor %}" data-mime="{% for transcoded in media.transcoded.all %}{% if forloop.first %}{% else %},{% endif %}{{ transcoded.mime_type }}{% if forloop.last %}{% endif %}{% endfor %}">{{ media.title }}</a></li>
+            <li class="video-playlist__item{% if forloop.first %} playing{% endif %}"><a href="#" data-poster="{{media.poster_url }}" data-src="{% for transcoded in media.transcoded.all %}{% if forloop.first %}{% else %},{% endif %}{{ transcoded.url }}{% if forloop.last %}{% endif %}{% endfor %}" data-mime="{% for transcoded in media.transcoded.all %}{% if forloop.first %}{% else %},{% endif %}{{ transcoded.mime_type }}{% if forloop.last %}{% endif %}{% endfor %}"><span>{{ media.title }}</span>{% if media.description %}<small> {{ media.description }}</small>{% endif %}</a></li>
         {% endspaceless %}
     {% if forloop.last %}
         </ol>