From 7e0b136c7fc54ba42800851fa9e8667759a16ed3 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= <Jeremy@iMacdeJeremy2.fritz.box>
Date: Wed, 15 Feb 2017 13:57:36 +0100
Subject: [PATCH] Audio overlay

---
 app/static/src/js/index.js                     |  2 +-
 app/static/src/js/modules/audio.js             | 16 ++++++++++++----
 app/static/src/js/modules/video-overlay.js     | 10 +++++++++-
 app/static/src/js/modules/video.js             | 11 +++++++++--
 .../src/sass/modules/boxes/_media-box.scss     |  7 +++++++
 .../sass/modules/medias/_audio-playlist.scss   |  1 +
 app/static/src/sass/vendors/_audiojs.scss      |  1 +
 app/templates/media/audio/audio_overlay.html   | 18 ++++++++++--------
 .../media/media/includes/media_card.html       |  2 +-
 9 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index da8115fa..eae42937 100644
--- 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 adf8bbdd..bea26e0c 100644
--- 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 a95a52fd..b9f199a2 100644
--- 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 a2fc4438..9ec4175f 100644
--- 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 52dfee71..b8ae6f03 100644
--- 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 8fbe27ae..36625564 100644
--- 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 6dfab300..d393836e 100644
--- 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 e3390dd3..cf88bb94 100644
--- 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 db774cb9..6f29c2b0 100644
--- 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 %}
-- 
2.39.5