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 b315dbf683c028a9e749421af0b3d24ef0ede413..adf8bbdd968e54f64245f39245d95961299bf197 100644 (file)
--- 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 8ecc9cca0ae28e50391d3d49437e77feef9ee4b6..64be7889acef55fbf5196358b9ed5a3cd46ff0fa 100644 (file)
--- 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 6d1a560ec6c1bff768325984bd5d1186fb6bf65d..39738241d1728dc507121ba1ddde2a87895872a8 100644 (file)
--- 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 c3e40aa943f61037a2082bc5adc4e185064b00de..f40f193dad6e04b67a58e0d3b825e9ec24a06842 100644 (file)
--- 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 8b295e74279bcbcee058236bc5ed3a160d93b775..23c728e9313d9bb00fb311cddde610bf429ebe75 100644 (file)
--- 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 977394f4b4705494f6f43a010a6c5205eb260056..d9c65dce046d5d8754751d0bcbcfc350f8f2ddc3 100644 (file)
--- 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>