Audio overlay

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index da8115face2b012f0df4328e9dae36023f510634..eae429374c160f57e9b0c81156f67330935deec8 100644 (file)
--- a/app/static/src/js/index.js
+++ b/app/static/src/js/index.js
@@ -43,7 +43,7 @@ window[LightSliderPersonsInit] = new LightSliderPersonsInit();
 window[LightSliderRelatedInit] = new LightSliderRelatedInit();
 window[LazyLoadInit] = new LazyLoadInit();
 window[HomeMenu] = new HomeMenu();
-window[Audio] = new Audio();
+window['Audio'] = new Audio();
 window['Video'] = new Video();
 window[VideoOverlay] = new VideoOverlay();
 window[Instagram] = new Instagram();

diff --git a/app/static/src/js/modules/audio.js b/app/static/src/js/modules/audio.js
index adf8bbdd968e54f64245f39245d95961299bf197..bea26e0c84b7218edba51190522f2d61b8249314 100644 (file)
--- a/app/static/src/js/modules/audio.js
+++ b/app/static/src/js/modules/audio.js
@@ -1,13 +1,15 @@
-var Audio = function() {
+var Audio = function(context) {
+
+    this.context = context || $('body');
+
+    this.audios = [];
+    this.playlists = [];
 
     //
     // Init
     //
     this.init();
 
-    this.audios = [];
-    this.playlists = [];
-
 };
 
 Audio.prototype.init = function() {
@@ -117,4 +119,10 @@ Audio.prototype.setTitle = function(audio, title, subtitle) {
 
 };
 
+Audio.prototype.play = function(e) {
+
+    this.audios[0].play();
+
+}
+
 module.exports = Audio;

diff --git a/app/static/src/js/modules/video-overlay.js b/app/static/src/js/modules/video-overlay.js
index a95a52fd056524d7b10f07f3249678cd711d42f1..b9f199a2067e575cfcf1072b9d76cae585b4a229 100644 (file)
--- a/app/static/src/js/modules/video-overlay.js
+++ b/app/static/src/js/modules/video-overlay.js
@@ -1,3 +1,6 @@
+var Audio = require('./audio');
+var Video = require('./video');
+
 var VideoOverlay = function() {
 
     this.$overlay = $('#overlay');
@@ -55,7 +58,12 @@ VideoOverlay.prototype.openOverlay = function(url) {
 
     that.$overlayContent.load(url, function() {
 
-        var player = window['Video'].init();
+        if($('video', that.$overlay).length > 0) {
+            var player = new Video(that.$overlay);
+        } else {
+            var player = new Audio(that.$overlay);
+        }
+
         setTimeout(function() {
             player.play();
             that.$overlayLoader.hide();

diff --git a/app/static/src/js/modules/video.js b/app/static/src/js/modules/video.js
index a2fc443895dab01215b892ea99ff62e9f21823da..9ec4175f61ece4cd608424afd9ca922af987b6ec 100644 (file)
--- a/app/static/src/js/modules/video.js
+++ b/app/static/src/js/modules/video.js
@@ -1,11 +1,12 @@
-var Video = function() {
+var Video = function(context) {
 
     this.player = null;
+    this.context = context || $('body');
 
     //
     // Init
     //
-    if($('#video-js-playlist').length > 0) {
+    if($('#video-js-playlist', this.context).length > 0) {
         this.init();
     }
 
@@ -62,6 +63,12 @@ Video.prototype.init = function() {
 
 };
 
+Video.prototype.play = function(e) {
+
+    this.player.play();
+
+}
+
 Video.prototype.open = function(e) {
 
 

diff --git a/app/static/src/sass/modules/boxes/_media-box.scss b/app/static/src/sass/modules/boxes/_media-box.scss
index 52dfee71dbf1c743fcd36777e4b8deb50376fb8b..b8ae6f03e17f3e0dbd52915f1e6fe001b7e08dae 100644 (file)
--- a/app/static/src/sass/modules/boxes/_media-box.scss
+++ b/app/static/src/sass/modules/boxes/_media-box.scss
@@ -129,6 +129,13 @@ $module: ".media-box";
             left: 50%;
 
             @include transform(translateX(-50%) translateY(-50%));
+
+        }
+
+        &--audio {
+            &:after {
+                content: "\f028";
+            }
         }
 
     }

diff --git a/app/static/src/sass/modules/medias/_audio-playlist.scss b/app/static/src/sass/modules/medias/_audio-playlist.scss
index 8fbe27ae47ca28f4b3c09f86bbd62d769ca72013..366255647392326bf1406a77c799486d557903c9 100644 (file)
--- a/app/static/src/sass/modules/medias/_audio-playlist.scss
+++ b/app/static/src/sass/modules/medias/_audio-playlist.scss
@@ -26,6 +26,7 @@ $module: ".audio-playlist";
     padding: 0;
     background: $color-black-light;
     list-style-type: none;
+    color: $color-background;
 
     &__item {
 

diff --git a/app/static/src/sass/vendors/_audiojs.scss b/app/static/src/sass/vendors/_audiojs.scss
index 6dfab300a967303cc2d059da32e1a6f093661d78..d393836ee5557b1105fb843da7b6ddc9bab42bb3 100644 (file)
--- a/app/static/src/sass/vendors/_audiojs.scss
+++ b/app/static/src/sass/vendors/_audiojs.scss
@@ -64,6 +64,7 @@
         @include typeface(serif);
         font-weight: weight(bold);
         font-style: italic;
+        color: $color-background;
 
         span {
             /*@include font-size(m);

diff --git a/app/templates/media/audio/audio_overlay.html b/app/templates/media/audio/audio_overlay.html
index e3390dd3351f1886827a6023196062ba59cb8a69..cf88bb94416b6b208b432dd6eafe0ca7eb6ef695 100644 (file)
--- a/app/templates/media/audio/audio_overlay.html
+++ b/app/templates/media/audio/audio_overlay.html
@@ -6,14 +6,16 @@
 
         <div class="mb1 col-md-10 col-md-push-3 page__content" data-summary-content>
 
-            <div class="embed-responsive">
-                <video controls id="video-js-playlist" class="video-js vjs-ircam-skin" data-title="{{ media.title }}" {% if media.poster_url %}poster="{{ media.poster_url }}"{% endif %}>
-                </video>
-            </div>
-            <ol class="video-playlist">
-                {% 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 %}"><span>{{ media.title }}</span></a></li>
-                {% endspaceless %}
+            <audio preload="true"></audio>
+
+            <ol class="audio-playlist">
+                <li class="audio-playlist__item">
+                    {% for transcoded in media.transcoded.all %}
+                        {% if transcoded.mime_type == "audio/mp4" or transcoded.mime_type == "audio/mp3" %}
+                            <a href="#" data-src="{{ transcoded.url }}"><span>{{ media.title }}</span>{% if media.description %}<small> {{ media.description }}</small>{% endif %}</a>
+                        {% endif %}
+                    {% endfor %}
+                </li>
             </ol>
 
         </div>

diff --git a/app/templates/media/media/includes/media_card.html b/app/templates/media/media/includes/media_card.html
index db774cb95850ed273000f065d67a0a9f9983e37b..6f29c2b09800ddcd13f04c669694bb15705bdc79 100644 (file)
--- a/app/templates/media/media/includes/media_card.html
+++ b/app/templates/media/media/includes/media_card.html
@@ -3,7 +3,7 @@
 <div class="">
     <div class="media-box media-box--{{object|get_media_type|lower}}">
         <a class="media-box__image-container" href="{% url 'organization-media-overlay' object.type object.slug %}" data-video-overlay>
-            <figure class="media-box__image media-box__image--video">
+            <figure class="media-box__image media-box__image--{{ object|get_media_type|lower }}">
                 {% if object.poster_url %}
                     <img src="{{ object.poster_url }}">
                 {% else %}