From 3f24b0b5f3a37ef0eac396254f7ba8e05fbc9b0d Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?=
 <Jeremy@imac-de-jeremy.fritz.box>
Date: Thu, 8 Sep 2016 16:45:11 +0200
Subject: [PATCH] Added video players in sliders (such wow, so cute), begin
 audio playlists implementation

---
 app/static/src/js/index.js                    |   2 +
 app/static/src/js/modules/audio.js            |  74 +++++++++++
 .../src/js/modules/lightsliderpage-init.js    |  20 ++-
 app/static/src/sass/config/_variables.scss    |   2 +-
 app/static/src/sass/modules/_all.scss         |   3 +
 .../sass/modules/medias/_audio-playlist.scss  |  19 +++
 .../sass/modules/sliders/_slider-page.scss    |  14 ++
 app/static/src/sass/vendors/_all.scss         |   2 +
 app/static/src/sass/vendors/_audiojs.scss     |   3 +
 app/static/src/sass/vendors/_videojs.scss     | 124 ++++++++++++++++++
 app/templates/base.html                       |   1 +
 app/templates/core/inc/audio.html             |  50 ++++---
 app/templates/core/inc/slider.html            |  18 ++-
 app/templates/includes/footer_scripts.html    |   3 +
 app/templates/pages/custompage.html           |  10 +-
 app/templates/pages/departmentpage.html       |  10 +-
 app/templates/pages/page.html                 |   4 +-
 app/templates/pages/teampage.html             |   8 +-
 18 files changed, 320 insertions(+), 47 deletions(-)
 create mode 100644 app/static/src/js/modules/audio.js
 create mode 100644 app/static/src/sass/modules/medias/_audio-playlist.scss
 create mode 100644 app/static/src/sass/vendors/_audiojs.scss
 create mode 100644 app/static/src/sass/vendors/_videojs.scss

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index f33b70e6..9c5f49b0 100644
--- a/app/static/src/js/index.js
+++ b/app/static/src/js/index.js
@@ -13,6 +13,7 @@ var StickyKitInit = require('./modules/sticky-kit-init');
 var LightSliderPageInit = require('./modules/lightsliderpage-init');
 var LightSliderHomeInit = require('./modules/lightsliderhome-init');
 var HomeMenu = require('./modules/home-menu');
+var Audio = require('./modules/audio');
 
 //
 // Init all the modules
@@ -29,3 +30,4 @@ window[StickyKitInit] = new StickyKitInit();
 window[LightSliderPageInit] = new LightSliderPageInit();
 window[LightSliderHomeInit] = new LightSliderHomeInit();
 window[HomeMenu] = new HomeMenu();
+window[Audio] = new Audio();
diff --git a/app/static/src/js/modules/audio.js b/app/static/src/js/modules/audio.js
new file mode 100644
index 00000000..2c4badf1
--- /dev/null
+++ b/app/static/src/js/modules/audio.js
@@ -0,0 +1,74 @@
+var Audio = function() {
+
+    //
+    // Init
+    //
+    this.init();
+
+    this.audios = [];
+    this.playlists = [];
+
+};
+
+Audio.prototype.init = function() {
+
+    var that = this,
+        as, i, playlist;
+
+    audiojs.events.ready(function() {
+
+        as = audiojs.createAll();
+
+        for(i = 0; i<as.length; i++) {
+
+            playlist = $(as[i].element).parent().next('.audio-playlist');
+
+            //
+            // Future refs
+            //
+            that.audios.push(as[i]);
+            that.playlists.push(playlist[0]);
+
+            //
+            // Set the trackEnded function
+            //
+            as[i].settings.trackEnded = function() {
+
+                var idx, next, playlist;
+
+                idx = that.audios.indexOf(this);
+                playlist = that.playlists[idx];
+
+                var next = playlist.find('li.playing').next();
+                if (!next.length) next = playlist.find('li').first();
+                next.addClass('playing').siblings().removeClass('playing');
+                this.load($('a', next).attr('data-src'));
+                this.play();
+
+            };
+
+            //
+            // Load the first audio
+            //
+            var first = playlist.find('li a').attr('data-src');
+            playlist.find('li').first().addClass('playing');
+            as[i].load(first);
+
+            playlist.find('li').bind('click', function(e) {
+
+                var idx = that.playlists.indexOf($(this).parent().get(0));
+
+                e.preventDefault();
+                $(this).addClass('playing').siblings().removeClass('playing');
+                that.audios[idx].load($('a', this).attr('data-src'));
+                that.audios[idx].play();
+
+            });
+
+        }
+
+    });
+
+};
+
+module.exports = Audio;
diff --git a/app/static/src/js/modules/lightsliderpage-init.js b/app/static/src/js/modules/lightsliderpage-init.js
index 2dde54c8..9ed84de5 100644
--- a/app/static/src/js/modules/lightsliderpage-init.js
+++ b/app/static/src/js/modules/lightsliderpage-init.js
@@ -30,10 +30,16 @@ LightSliderPageInit.prototype.init = function() {
                         breakpoint: 752,
                         settings: {
                             autoWidth: false,
+                            adaptiveHeight: true,
                             item: 1
                         }
                     }
-                ]
+                ],
+                onBeforeSlide: function(el) {
+                    $(el).find('video').each(function(i) {
+                        this.pause();
+                    });
+                }
             }
         };
 
@@ -61,8 +67,16 @@ LightSliderPageInit.prototype.windowResize = function(e) {
         element = that.elements[i];
         totalWidth = 0;
 
-        element.$element.find('li').each(function() {
-            totalWidth += $(this).find('img').get(0).naturalWidth;
+        element.$element.find('li.slider-page__slide').each(function() {
+
+            var img =  $(this).find('img').get(0);
+
+            if(img) {
+                totalWidth += img.naturalWidth;
+            } else {
+                totalWidth += 905;
+            }
+
         });
 
         if(totalWidth > windowWidth) {
diff --git a/app/static/src/sass/config/_variables.scss b/app/static/src/sass/config/_variables.scss
index 7a9f2a8f..fb3a6d9b 100755
--- a/app/static/src/sass/config/_variables.scss
+++ b/app/static/src/sass/config/_variables.scss
@@ -7,7 +7,7 @@ $use-responsive-grid: true;
 // Grid system
 
 $breakpoints: (
-	xxs: 0,
+	xxs: 0px,
 	xs: 752px,
 	sm: 972px,
 	md: 1072px,
diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index 6e3f15db..4aa7e7ff 100755
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -5,6 +5,9 @@
 @import "navs/nav-tree";
 @import "sidebar";
 
+// Medias
+@import "medias/audio-playlist";
+
 // Boxes
 @import 'boxes/article-box';
 @import 'boxes/page-box';
diff --git a/app/static/src/sass/modules/medias/_audio-playlist.scss b/app/static/src/sass/modules/medias/_audio-playlist.scss
new file mode 100644
index 00000000..edc878b0
--- /dev/null
+++ b/app/static/src/sass/modules/medias/_audio-playlist.scss
@@ -0,0 +1,19 @@
+$module: ".audio-playlist";
+
+#{$module} {
+
+    &__item {
+
+        &.playing {
+            color: red;
+        }
+
+        >a  {
+
+
+
+        }
+
+    }
+
+}
diff --git a/app/static/src/sass/modules/sliders/_slider-page.scss b/app/static/src/sass/modules/sliders/_slider-page.scss
index 1428293f..200d0a85 100644
--- a/app/static/src/sass/modules/sliders/_slider-page.scss
+++ b/app/static/src/sass/modules/sliders/_slider-page.scss
@@ -92,4 +92,18 @@ $module: ".slider-page";
 
     }
 
+    &__video {
+
+        margin-bottom: 5px;
+        @include fluid-aspect(905 520);
+        width: 905px;
+
+        @include mq($until: xs) {
+
+            width: 100%;
+
+        }
+
+    }
+
 }
diff --git a/app/static/src/sass/vendors/_all.scss b/app/static/src/sass/vendors/_all.scss
index 258794df..2897231b 100755
--- a/app/static/src/sass/vendors/_all.scss
+++ b/app/static/src/sass/vendors/_all.scss
@@ -1,3 +1,5 @@
 @import "slick";
 @import "lightslider";
 @import "pushy";
+@import "audiojs";
+@import "videojs";
diff --git a/app/static/src/sass/vendors/_audiojs.scss b/app/static/src/sass/vendors/_audiojs.scss
new file mode 100644
index 00000000..ac0e4138
--- /dev/null
+++ b/app/static/src/sass/vendors/_audiojs.scss
@@ -0,0 +1,3 @@
+.audiojs .play-pause {
+    width: 37px;
+}
diff --git a/app/static/src/sass/vendors/_videojs.scss b/app/static/src/sass/vendors/_videojs.scss
new file mode 100644
index 00000000..0fe309c4
--- /dev/null
+++ b/app/static/src/sass/vendors/_videojs.scss
@@ -0,0 +1,124 @@
+/*
+  Player Skin Designer for Video.js
+  http://videojs.com
+
+  To customize the player skin edit
+  the CSS below. Click "details"
+  below to add comments or questions.
+  This file uses some SCSS. Learn more
+  at http://sass-lang.com/guide)
+
+  This designer can be linked to at:
+  http://codepen.io/heff/pen/EarCt/left/?editors=010
+*/
+
+// The following are SCSS variables to automate some of the values.
+// But don't feel limited by them. Change/replace whatever you want.
+
+// The color of icons, text, and the big play button border.
+// Try changing to #0f0
+$primary-foreground-color: $color-main; // #fff default
+
+// The default color of control backgrounds is mostly black but with a little
+// bit of blue so it can still be seen on all-black video frames, which are common.
+// Try changing to #900
+$primary-background-color: #000000;  // #2B333F default
+
+// Try changing to true
+$center-big-play-button: true; // true default
+
+.video-js {
+  /* The base font size controls the size of everything, not just text.
+     All dimensions use em-based sizes so that the scale along with the font size.
+     Try increasing it to 15px and see what happens. */
+  font-size: 10px;
+
+  /* The main font color changes the ICON COLORS as well as the text */
+  color: $primary-foreground-color;
+}
+
+/* The "Big Play Button" is the play button that shows before the video plays.
+   To center it set the align values to center and middle. The typical location
+   of the button is the center, but there is trend towards moving it to a corner
+   where it gets out of the way of valuable content in the poster image.*/
+.vjs-ircam-skin .vjs-big-play-button {
+  /* The font size is what makes the big play button...big.
+     All width/height values use ems, which are a multiple of the font size.
+     If the .video-js font-size is 10px, then 3em equals 30px.*/
+  font-size: 3em;
+
+  /* We're using SCSS vars here because the values are used in multiple places.
+     Now that font size is set, the following em values will be a multiple of the
+     new font size. If the font-size is 3em (30px), then setting any of
+     the following values to 3em would equal 30px. 3 * font-size. */
+  $big-play-width: 3em;
+  /* 1.5em = 45px default */
+  $big-play-height: 3em;
+
+  line-height: $big-play-height;
+  height: $big-play-height;
+  width: $big-play-width;
+
+  /* 0.06666em = 2px default */
+  border: 0.06666em solid $primary-foreground-color;
+  /* 0.3em = 9px default */
+  border-radius: $big-play-width;
+
+  @if $center-big-play-button {
+    /* Align center */
+    left: 50%;
+    top: 50%;
+    margin-left: -($big-play-width / 2);
+    margin-top: -($big-play-height / 2);
+  } @else {
+    /* Align top left. 0.5em = 15px default */
+    left: 0.5em;
+    top: 0.5em;
+  }
+}
+
+/* The default color of control backgrounds is mostly black but with a little
+   bit of blue so it can still be seen on all-black video frames, which are common. */
+.video-js .vjs-control-bar,
+.video-js .vjs-big-play-button,
+.video-js .vjs-menu-button .vjs-menu-content {
+  /* IE8 - has no alpha support */
+  background-color: $primary-background-color;
+  /* Opacity: 1.0 = 100%, 0.0 = 0% */
+  background-color: rgba($primary-background-color, 0.7);
+}
+
+// Make a slightly lighter version of the main background
+// for the slider background.
+$slider-bg-color: lighten($primary-background-color, 33%);
+
+/* Slider - used for Volume bar and Progress bar */
+.video-js .vjs-slider {
+  background-color: $slider-bg-color;
+  background-color: rgba($slider-bg-color, 0.5);
+}
+
+/* The slider bar color is used for the progress bar and the volume bar
+   (the first two can be removed after a fix that's coming) */
+.video-js .vjs-volume-level,
+.video-js .vjs-play-progress,
+.video-js .vjs-slider-bar {
+  background: $primary-foreground-color;
+}
+
+/* The main progress bar also has a bar that shows how much has been loaded. */
+.video-js .vjs-load-progress {
+  /* For IE8 we'll lighten the color */
+  background: ligthen($slider-bg-color, 25%);
+  /* Otherwise we'll rely on stacked opacities */
+  background: rgba($slider-bg-color, 0.5);
+}
+
+/* The load progress bar also has internal divs that represent
+   smaller disconnected loaded time ranges */
+.video-js .vjs-load-progress div {
+  /* For IE8 we'll lighten the color */
+  background: ligthen($slider-bg-color, 50%);
+  /* Otherwise we'll rely on stacked opacities */
+  background: rgba($slider-bg-color, 0.75);
+}
diff --git a/app/templates/base.html b/app/templates/base.html
index 95c3bc29..bef11655 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -35,6 +35,7 @@
     <link rel="stylesheet" href="{% static "vendors/font-awesome/css/font-awesome.css" %}">
     <link rel="stylesheet" href="{% static "vendors/lightslider/dist/css/lightslider.css" %}">
     <link rel="stylesheet" href="{% static "vendors/pushy/css/pushy.css" %}">
+    <link rel="stylesheet" href="{% static "vendors/video.js/dist/video-js.css" %}">
     <link rel="stylesheet" href="{% static "css/index.min.css" %}">
     {% endcompress %}
 
diff --git a/app/templates/core/inc/audio.html b/app/templates/core/inc/audio.html
index d75db913..4b6b8036 100644
--- a/app/templates/core/inc/audio.html
+++ b/app/templates/core/inc/audio.html
@@ -1,16 +1,34 @@
-{% for audio in audios %}
-  {# audio.title #}<br>
-  {# audio.open_source_mime_type #}<br>
-  {# audio.closed_source_mime_type #}<br>
-  {# audio.category #}<br>
-  {# audio.media_id #}<br>
-  {# audio.open_source_url #}<br>
-  {# audio.closed_source_url #}<br>
-  {# audio.poster_url #}<br>
-
-  <audio controls>
-    <source src="{{ audio.open_source_url }}" type="{{ audio.open_source_mime_type }}">
-    <source src="{{ audio.closed_source_mime_type }}" type="{{ audio.closed_source_url }}">
-    Your browser does not support the audio element.
-  </audio>
-{% endfor %}
+{% if audios %}
+
+    <audio preload="true"></audio>
+    <ol class="audio-playlist">
+
+        {% for audio in audios %}
+
+        <li class="audio-playlist__item">
+            <a href="#" data-src="{{ audio.open_source_url }}">{{ audio.title }}</a>
+        </li>
+        
+        {% comment %}
+
+            {# audio.title #}<br>
+            {# audio.open_source_mime_type #}<br>
+            {# audio.closed_source_mime_type #}<br>
+            {# audio.category #}<br>
+            {# audio.media_id #}<br>
+            {# audio.open_source_url #}<br>
+            {# audio.closed_source_url #}<br>
+            {# audio.poster_url #}<br>
+            <audio>
+                <source src="{{ audio.open_source_url }}" type="{{ audio.open_source_mime_type }}">
+                <source src="{{ audio.closed_source_mime_type }}" type="{{ audio.closed_source_url }}">
+                Your browser does not support the audio element.
+            </audio>
+
+        {% endcomment %}
+
+        {% endfor %}
+
+    </ol>
+
+{% endif %}
diff --git a/app/templates/core/inc/slider.html b/app/templates/core/inc/slider.html
index e824742e..39993ce5 100644
--- a/app/templates/core/inc/slider.html
+++ b/app/templates/core/inc/slider.html
@@ -4,7 +4,7 @@
         {% for image in slider_images %}
             <li class="slider-page__slide">
                 <div class="slider-page__wrapper">
-                    <img title="{{ image.title }}" alt="{{ image.title }} {{ image.description }} {{ image.credits }}" class="slider-page__img" src="{{ MEDIA_URL}}{% thumbnail image.file 0 520 %}" alt="" /><br />
+                    <img title="{{ image.title }}" alt="{{ image.title }} {{ image.description }} {{ image.credits }}" class="slider-page__img" src="{{ MEDIA_URL}}{% thumbnail image.file 0 520 %}" alt="" />
                     <div class="slider-page__caption">
                         {{ image.title }}
                         {% if image.description %}
@@ -17,5 +17,21 @@
                 </div>
             </li>
         {% endfor %}
+        {% for video in videos %}
+            <li class="slider-page__slide">
+                <div class="slider-page__wrapper">
+                    <div class="slider-page__video">
+                        <video controls class="video-js vjs-ircam-skin" data-setup='{"aspectRatio":"905:520"}' {% if video.poster_url %}poster="{{ video.poster_url }}"{% endif %}>
+                            <source src="{{ video.closed_source_url }}" type="{{ video.closed_source_mime_type }}">
+                            <source src="{{ video.open_source_url }}" type="{{ video.open_source_mime_type }}">
+                            Your browser does not support the video tag.
+                        </video>
+                    </div>
+                    <div class="slider-page__caption">
+                        {{ video.title }}
+                    </div>
+                </div>
+            </li>
+        {% endfor %}
     </ul>
 </div>
diff --git a/app/templates/includes/footer_scripts.html b/app/templates/includes/footer_scripts.html
index 5889acc5..fce37b29 100644
--- a/app/templates/includes/footer_scripts.html
+++ b/app/templates/includes/footer_scripts.html
@@ -8,6 +8,9 @@
     <script src="{% static "vendors/lightslider/dist/js/lightslider.js" %}"></script>
     <script src="{% static "vendors/imagesloaded/imagesloaded.pkgd.js" %}"></script>
     <script src="{% static "vendors/pushy/js/pushy.js" %}"></script>
+    <script src="{% static "vendors/video.js/dist/video.js" %}"></script>
+    <script src="{% static "vendors/videojs-playlist/dist/videojs-playlist.js" %}"></script>
+    <script src="{% static "vendors/audiojs/audiojs/audio.js" %}"></script>
     <script src="{% static "js/index.min.js" %}"></script>
 {% block extra_js %}{% endblock %}
 {% editable_loader %}
diff --git a/app/templates/pages/custompage.html b/app/templates/pages/custompage.html
index 0791cd7f..de79eb92 100644
--- a/app/templates/pages/custompage.html
+++ b/app/templates/pages/custompage.html
@@ -68,18 +68,12 @@
 
 {% block page_slider %}
   {% with page.custompage.images.all|get_type:'page_slider' as slider_images %}
+  {% with page.custompage.videos.all as videos %}
     {% if slider_images %}
       {% include 'core/inc/slider.html' %}
     {% endif %}
   {% endwith %}
-{% endblock %}
-
-{% block page_video %}
-    {% with page.custompage.videos.all as videos %}
-      {% if videos %}
-        {% include 'core/inc/video.html' %}
-      {% endif %}
-    {% endwith %}
+  {% endwith %}
 {% endblock %}
 
 {% block page_sub_content %}
diff --git a/app/templates/pages/departmentpage.html b/app/templates/pages/departmentpage.html
index 8b856ff2..1715a7e6 100644
--- a/app/templates/pages/departmentpage.html
+++ b/app/templates/pages/departmentpage.html
@@ -61,18 +61,12 @@
 
 {% block page_slider %}
 {% with page.departmentpage.images.all|get_type:'page_slider' as slider_images %}
+{% with page.departmentpage.videos.all as videos %}
   {% if slider_images %}
     {% include 'core/inc/slider.html' %}
   {% endif %}
 {% endwith %}
-{% endblock %}
-
-{% block page_video %}
-    {% with page.departmentpage.videos.all as videos %}
-      {% if videos %}
-        {% include 'core/inc/video.html' %}
-      {% endif %}
-    {% endwith %}
+{% endwith %}
 {% endblock %}
 
 {% block page_sub_content %}
diff --git a/app/templates/pages/page.html b/app/templates/pages/page.html
index 3ff43f79..f353fbda 100644
--- a/app/templates/pages/page.html
+++ b/app/templates/pages/page.html
@@ -59,11 +59,9 @@
             </div>
 
         </div>
-        {% block page_audio %}
-        {% endblock %}
         {% block page_slider %}
         {% endblock %}
-        {% block page_video %}
+        {% block page_audio %}
         {% endblock %}
         {% block page_sub_content %}
         {% endblock %}
diff --git a/app/templates/pages/teampage.html b/app/templates/pages/teampage.html
index 4a73d11f..da260abb 100644
--- a/app/templates/pages/teampage.html
+++ b/app/templates/pages/teampage.html
@@ -70,17 +70,11 @@
 
 {% block page_slider %}
     {% with page.teampage.images.all|get_type:'page_slider' as slider_images %}
+    {% with page.teampage.videos.all as videos %}
       {% if slider_images %}
         {% include 'core/inc/slider.html' %}
       {% endif %}
     {% endwith %}
-{% endblock %}
-
-{% block page_video %}
-    {% with page.teampage.videos.all as videos %}
-      {% if videos %}
-        {% include 'core/inc/video.html' %}
-      {% endif %}
     {% endwith %}
 {% endblock %}
 
-- 
2.39.5