New audio player

diff --git a/app/static/src/js/modules/audio.js b/app/static/src/js/modules/audio.js
index 2c4badf1d905a27e4e2946798eff833130578fb6..6e807085ba47f26d3e0619b81d2cc15575119bef 100644 (file)
--- a/app/static/src/js/modules/audio.js
+++ b/app/static/src/js/modules/audio.js
@@ -23,6 +23,9 @@ Audio.prototype.init = function() {
 
             playlist = $(as[i].element).parent().next('.audio-playlist');
 
+            as[i].title = $('<div class="title"></div>');
+            $(as[i].wrapper).append(as[i].title);
+
             //
             // Future refs
             //
@@ -52,6 +55,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 a').text());
             as[i].load(first);
 
             playlist.find('li').bind('click', function(e) {
@@ -62,6 +66,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());
 
             });
 
@@ -71,4 +76,20 @@ Audio.prototype.init = function() {
 
 };
 
+Audio.prototype.setTitle = function(audio, title) {
+
+    var split = title.split(",");
+    var html = '';
+
+    if(split[0]) {
+        html += split[0];
+    }
+    if(split[1]) {
+        html += '<br/><span>'+split[1]+'</span>'
+    }
+
+    audio.title.html(html);
+
+};
+
 module.exports = Audio;

diff --git a/app/static/src/sass/global/_wysiwyg.scss b/app/static/src/sass/global/_wysiwyg.scss
index 4e43fc062d94c83ae6ff607ddbabd2df251abd7b..846040110c8a6610737c1cb53336b127ea5bcf48 100644 (file)
--- a/app/static/src/sass/global/_wysiwyg.scss
+++ b/app/static/src/sass/global/_wysiwyg.scss
@@ -8,7 +8,7 @@
         }
     }
 
-    @include margin(1);
+    @include margin(0 .5 0 0);
 
 }
 
@@ -23,7 +23,7 @@
         }
     }
 
-    @include margin(1);
+    @include margin(0 .5 0 0);
 
 }
 
@@ -38,7 +38,7 @@
         }
     }
 
-    @include margin(1);
+    @include margin(0 .5 0 0);
 
 }
 
@@ -54,7 +54,7 @@
         }
     }
 
-    @include margin(1);
+    @include margin(0 .5 0 0);
 
 }
 
@@ -71,7 +71,7 @@
         }
     }
 
-    @include margin(1);
+    @include margin(0 .5 0 0);
 
 }
 
@@ -88,7 +88,7 @@
         }
     }
 
-    @include margin(1);
+    @include margin(0 .5 0 0);
 
 }
 
@@ -104,7 +104,7 @@
         }
     }
 
-    @include margin(1);
+    @include margin(0 .5 0 0);
 
 }
 
@@ -121,7 +121,7 @@
         }
     }
 
-    @include margin(1);
+    @include margin(0 .5 0 0);
 
 }
 
@@ -138,7 +138,7 @@
         }
     }
 
-    @include margin(1);
+    @include margin(0 .5 0 0);
 
 }
 

diff --git a/app/static/src/sass/vendors/_audiojs.scss b/app/static/src/sass/vendors/_audiojs.scss
index 32a381dae6b3fb8929330329b8e3c68f29c4b0ff..c3e40aa943f61037a2082bc5adc4e185064b00de 100644 (file)
--- a/app/static/src/sass/vendors/_audiojs.scss
+++ b/app/static/src/sass/vendors/_audiojs.scss
@@ -1,37 +1,152 @@
 .audiojs {
-    background: $color-black;
+    background: white;
+    position: relative;
     box-shadow: none;
     width: 100%;
+    height: 123px;
+    border: 1px solid #E6E6E6;
 
     .play-pause {
-        width: 37px;
+        position: absolute;
+        width: 56px;
+        height: 56px;
+        border-right: 0;
+        top: 30px;
+        left: 30px;
+        border-radius: 56px;
+        background: $color-black;
+        padding: 0;
     }
 
     .scrubber {
-        width: calc(80% - 37px);
+        width: 100%;
+        height: 7px;
+        margin: 0;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background: #EBEBEB;
+        border: 0;
+    }
+
+    .title {
+
+        position: absolute;
+        height: 56px;
+        left: 116px;
+        top: 30px;
+
+        @include font-size(m);
+        @include typeface(serif);
+        font-weight: weight(bold);
+
+        span {
+            @include font-size(m);
+            @include typeface(serif);
+            font-weight: weight(regular);
+            font-style: italic;
+        }
+
     }
 
     .time {
-        width: calc(20% - 37px);
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+
         @include font-size(xs);
-        @include typeface(sans-serif);
+        @include typeface(serif);
+        font-weight: weight(light);
+
+        text-shadow: none;
+        color: $color-black;
+
+        border: 0;
+
+        .played {
+            color: $color-black;
+        }
     }
 
     .progress {
-        background: $color-main;
+        background: $color-black;
     }
 
     .loaded {
-        background: $color-gray;
+        background: #EBEBEB;
     }
 
-    @include mq($until: xs) {
-        width: 100%;
-        .scrubber {
-            width: calc(60% - 37px);
+
+    .play {
+
+        width: 56px;
+        height: 56px;
+        position: relative;
+        background: 0;
+
+        &:after {
+            position: absolute;
+            top: 0;
+            left: 3px;
+            width: 100%;
+            height: 100%;
+            content: "\f04b";
+            font-family: FontAwesome;
+            color: white;
+            font-size: 30px;
+            display: block;
+            text-align: center;
+            line-height: 56px;
         }
-        .time {
-            width: calc(40% - 37px);
+
+    }
+
+    .pause {
+
+        width: 56px;
+        height: 56px;
+        position: relative;
+        background: 0;
+
+        &:after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            content: "\f04c";
+            font-family: FontAwesome;
+            color: white;
+            font-size: 30px;
+            display: block;
+            text-align: center;
+            line-height: 56px;
         }
+
     }
+
+    .loading {
+
+        width: 56px;
+        height: 56px;
+        position: relative;
+        background: 0;
+
+        &:after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            content: "\f110";
+            font-family: FontAwesome;
+            color: white;
+            font-size: 30px;
+            display: block;
+            text-align: center;
+            line-height: 56px;
+        }
+
+    }
+
 }

diff --git a/app/templates/core/inc/audio.html b/app/templates/core/inc/audio.html
index 8c31aa45b9279fc5d58de0d857f57a95b15c6676..d9f8faf9a16e57f4ee5d5c4529abaee37931c02f 100644 (file)
--- a/app/templates/core/inc/audio.html
+++ b/app/templates/core/inc/audio.html
@@ -6,7 +6,13 @@
         {% for audio in audios %}
 
         <li class="audio-playlist__item">
-            <a href="#" data-src="{{ audio.open_source_url }}">{{ audio.title }}</a>
+            <a href="#" data-src="{{ audio.open_source_url }}">{{ audio.title }} 1</a>
+        </li>
+        <li class="audio-playlist__item">
+            <a href="#" data-src="{{ audio.open_source_url }}">{{ audio.title }} 2</a>
+        </li>
+        <li class="audio-playlist__item">
+            <a href="#" data-src="{{ audio.open_source_url }}">{{ audio.title }} 3</a>
         </li>
 
         {% comment %}