From aef5313b53b29733164ef67ebfab4b496160ba5b Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= <Jeremy@iMac-de-Jeremy.local>
Date: Thu, 20 Oct 2016 15:37:56 +0200
Subject: [PATCH] Medias first implementation (shutter, list, details)

---
 app/static/src/js/index.js                    |  2 +
 app/static/src/js/modules/audio.js            |  2 +-
 app/static/src/js/modules/video.js            | 65 +++++++++++++++++++
 app/static/src/sass/modules/_all.scss         |  1 +
 .../sass/modules/medias/_video-playlist.scss  | 38 +++++++++++
 app/templates/index.html                      |  3 +-
 .../media/inc/playlist_audio_detail.html      |  4 +-
 app/templates/media/inc/playlist_shutter.html | 39 ++++++++---
 .../media/inc/playlist_video_detail.html      | 22 ++++---
 app/templates/media/playlist_detail.html      | 36 ++++++++--
 app/templates/media/playlist_list.html        |  1 -
 11 files changed, 184 insertions(+), 29 deletions(-)
 create mode 100644 app/static/src/js/modules/video.js
 create mode 100644 app/static/src/sass/modules/medias/_video-playlist.scss

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index 23167785..705525cf 100644
--- a/app/static/src/js/index.js
+++ b/app/static/src/js/index.js
@@ -17,6 +17,7 @@ var LightSliderNetworkInit = require('./modules/lightslidernetwork-init');
 var LazyLoadInit = require('./modules/lazyload-init');
 var HomeMenu = require('./modules/home-menu');
 var Audio = require('./modules/audio');
+var Video = require('./modules/video');
 
 //
 // Init all the modules
@@ -37,3 +38,4 @@ window[LightSliderNetworkInit] = new LightSliderNetworkInit();
 window[LazyLoadInit] = new LazyLoadInit();
 window[HomeMenu] = new HomeMenu();
 window[Audio] = new Audio();
+window[Video] = new Video();
diff --git a/app/static/src/js/modules/audio.js b/app/static/src/js/modules/audio.js
index 8b8ab8fb..b315dbf6 100644
--- 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 a').text());
+            that.setTitle(as[i], playlist.find('li:first-child a').text());
             as[i].load(first);
 
             playlist.find('li').bind('click', function(e) {
diff --git a/app/static/src/js/modules/video.js b/app/static/src/js/modules/video.js
new file mode 100644
index 00000000..4cb68fcf
--- /dev/null
+++ b/app/static/src/js/modules/video.js
@@ -0,0 +1,65 @@
+var Video = function() {
+
+    this.player = null;
+
+    //
+    // Init
+    //
+    this.init();
+
+};
+
+Video.prototype.init = function() {
+
+    var that = this;
+
+    that.player = videojs('video-js-playlist', {
+        aspectRatio:"905:520"
+    });
+
+    var playlist = [];
+    $('.video-playlist li a').each(function(idx) {
+
+        var elem = $(this);
+
+        var srcs = elem.attr('data-src').split(',');
+        var mimes = elem.attr('data-mime').split(',');
+        var obj = {
+            sources: [],
+            poster: elem.attr('data-poster')
+        };
+
+        for(var i=0; i<srcs.length; i++) {
+            obj.sources.push({
+                src: srcs[i],
+                type: mimes[i]
+            });
+        }
+
+        playlist.push(obj);
+
+        elem.click(function(e) {
+            e.preventDefault();
+
+            $('.video-playlist li').removeClass('playing');
+            $(this).parent().addClass('playing');
+            that.player.playlist.currentItem($(this).parent().index());
+            that.player.play();
+
+            return false;
+        });
+
+    });
+    console.log(playlist);
+
+    that.player.playlist(playlist);
+
+};
+
+Video.prototype.open = function(e) {
+
+
+
+}
+
+module.exports = Video;
diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index e5aee2ab..19d493c3 100755
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -7,6 +7,7 @@
 
 // Medias
 @import "medias/audio-playlist";
+@import "medias/video-playlist";
 
 // Boxes
 @import 'boxes/article-box';
diff --git a/app/static/src/sass/modules/medias/_video-playlist.scss b/app/static/src/sass/modules/medias/_video-playlist.scss
new file mode 100644
index 00000000..6d1a560e
--- /dev/null
+++ b/app/static/src/sass/modules/medias/_video-playlist.scss
@@ -0,0 +1,38 @@
+$module: ".video-playlist";
+
+#{$module} {
+
+    margin-top: 0;
+    padding: 0;
+    background: $color-black-light;
+    list-style-type: none;
+
+    &__item {
+
+        @include padding(0.25 1);
+        @include font-size(xs);
+        @include typeface(sans-serif);
+        @include transition(all 0.25s ease-in-out);
+        color: white;
+
+        &.playing {
+
+            background: $color-main;
+            color: $color-black-light;
+
+            >a {
+                color: $color-black-light;
+            }
+
+        }
+
+        >a  {
+
+            @include transition(all 0.25s ease-in-out);
+            color: white;
+
+        }
+
+    }
+
+}
diff --git a/app/templates/index.html b/app/templates/index.html
index 5a0097c4..c46666a4 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -46,13 +46,12 @@
           </div>
       </li>
       <li class="home__menu-item">
-          <a href="#" title="{% trans "Media" %}">{% trans "Medias" %}</a>
+          <a href="{% url 'organization-playlist-list' %}" title="{% trans "Media" %}">{% trans "Medias" %}</a>
           <div class="home__shutter">
               <div class="home__shutter-content">
                   <div class="container-fluid tal">
                       {% include "media/inc/playlist_shutter.html" %}
                   </div>
-                  <div><a href="{% url 'organization-playlist-list' %}" title="">{% trans 'See more media >' %}</a></div>
               </div>
           </div>
       </li>
diff --git a/app/templates/media/inc/playlist_audio_detail.html b/app/templates/media/inc/playlist_audio_detail.html
index f622fa19..cbbf9086 100644
--- a/app/templates/media/inc/playlist_audio_detail.html
+++ b/app/templates/media/inc/playlist_audio_detail.html
@@ -7,7 +7,9 @@
         <li class="audio-playlist__item">
             {% with media.media as media %}
                 {% for transcoded in media.transcoded.all %}
-                    <a href="#" data-src="{{ transcoded.url }}">{{ media.title }}</a>
+                    {% if transcoded.mime_type == "audio/mp4" or transcoded.mime_type == "audio/mp3" %}
+                        <a href="#" data-src="{{ transcoded.url }}">{{ media.title }}</a>
+                    {% endif %}
                 {% endfor %}
             {% endwith %}
         </li>
diff --git a/app/templates/media/inc/playlist_shutter.html b/app/templates/media/inc/playlist_shutter.html
index 13835371..cff1a334 100644
--- a/app/templates/media/inc/playlist_shutter.html
+++ b/app/templates/media/inc/playlist_shutter.html
@@ -1,18 +1,41 @@
 {% load mezzanine_tags keyword_tags i18n organization_tags %}
+
+<div class="col-xs-3">
+    <div class="home__shutter-item">
+        <h2><a href="{% url 'organization-playlist-list' %}" title="">{% trans 'Audios' %}</a></h2>
+        <p>{% trans 'View all the audio medias' %}</p>
+        <a href="{% url 'organization-playlist-list' %}" title="">{% trans 'See all audios >' %}</a>
+    </div>
+</div>
+
+<div class="col-xs-3">
+    <div class="home__shutter-item">
+        <h2><a href="{% url 'organization-playlist-list' %}" title="">{% trans 'Videos' %}</a></h2>
+        <p>{% trans 'View all the video medias' %}</p>
+        <a href="{% url 'organization-playlist-list' %}" title="">{% trans 'See all videos >' %}</a>
+    </div>
+</div>
+
+
 {% for media in home.dynamic_content_home_media.all|slice:":3" %}
     <div class="col-xs-3">
         <div class="home__shutter-item">
-            <h2>{{ media.content_object.title }}</h2>
+            <h2><a href="{{ media.content_object.get_absolute_url }}" title="">{{ media.content_object.title }}</a></h2>
+
             {% if media.content_object.description %}
                 <p>{{ media.content_object.description|truncatechars:100 }}</p>
             {% endif %}
-            {% if media.content_object.poster_url %}
-                <img src="{% thumbnail media.content_object.poster_url 203 140 %}">
-            {% endif %}
-            {% if media.content_type.model == 'video' %}
-                <a href="{# media.content_object.get_absolute_url #}" title="">{% trans 'See the video' %}</a>
-            {% elif media.content_type.model == 'audio' %}
-                <a href="{# media.content_object.get_absolute_url #}" title="">{% trans 'Hear the sound' %}</a>
+
+            {% comment %}
+                {% if media.content_object.poster_url %}
+                    <img src="{% thumbnail media.content_object.poster_url 203 140 %}">
+                {% endif %}
+            {% endcomment %}
+
+            {% if media.content_object.type == 'video' %}
+                <a href="{{ media.content_object.get_absolute_url }}" title="">{% trans 'See the video' %}</a>
+            {% elif media.content_object.type == 'audio' %}
+                <a href="{{ media.content_object.get_absolute_url }}" title="">{% trans 'Hear the sound' %}</a>
             {% endif %}
         </div>
     </div>
diff --git a/app/templates/media/inc/playlist_video_detail.html b/app/templates/media/inc/playlist_video_detail.html
index 7632f2d5..0d8b4fc7 100644
--- a/app/templates/media/inc/playlist_video_detail.html
+++ b/app/templates/media/inc/playlist_video_detail.html
@@ -1,19 +1,21 @@
 {% load mezzanine_tags keyword_tags i18n organization_tags %}
 
+<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 %}>
+        {% for transcoded in media.transcoded.all %}
+           <source src="{{ transcoded.url }}" type="{{ transcoded.mime_type }}" />
+        {% endfor %}
+        Your browser does not support the video tag.
+    </video>
+</div>
 {% for media in playlist.medias.all %}
   {% with media.media as media %}
     {% if forloop.first %}
-        <div class="embed-responsive">
-        	<video width="100%" poster="{{ media.poster_url }}" controls data-title="{{ media.title }}" preload="none">
-                {% for transcoded in media.transcoded.all %}
-        	       <source src="{{ transcoded.url }}" type="{{ transcoded.mime_type }}" />
-                {% endfor %}
-        	</video>
-        </div>
-        <ol>
-    {% else %}
-        <li><a href="#" data-src="{{ media.url }}">>{{ media.title }}</a></li>
+        <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>
+        {% endspaceless %}
     {% if forloop.last %}
         </ol>
     {% endif %}
diff --git a/app/templates/media/playlist_detail.html b/app/templates/media/playlist_detail.html
index c3237d3b..e686912f 100644
--- a/app/templates/media/playlist_detail.html
+++ b/app/templates/media/playlist_detail.html
@@ -12,12 +12,15 @@
 {% endmetablock %}{% endblock %}
 
 {% block page_class %}
-    person
+    playlist
 {% endblock %}
 
 {% block breadcrumb_menu %}
     {{ block.super }}
-    <li class="breadcrumb__item active">{% trans "Media" %}</li>
+    <li class="breadcrumb__item">
+        <a class="breadcrumb__link" href="{% url 'organization-playlist-list' %}" title="{% trans "Media" %}">{% trans "Media" %}</a>
+    </li>
+    <li class="breadcrumb__item active">{{ playlist.title }}</li>
 {% endblock %}
 
 {% block page_title %}
@@ -26,7 +29,32 @@
     {% endeditable %}
 {% endblock %}
 
+{% block page_sidebar %}
+
+    <div class="page__meta" data-sticky data-sticky-parent="row" data-sticky-offset="100" data-sticky-detach-at="971">
+        {% editable playlist.publish_date %}
+            <div class="page__meta-date">
+                {{ playlist.publish_date|date:"DATE_FORMAT" }}
+            </div>
+        {% endeditable %}
+
+        <div class="page__meta-separator">
+
+        </div>
+
+        <div class="page__meta-text">
+            <strong>{{playlist.type}}</strong>
+        </div>
+
+        {% with playlist as object %}
+            {% include "includes/share_buttons.html" %}
+        {% endwith %}
+    </div>
+
+{% endblock %}
+
 {% block page_content %}
+
     {% with playlist.type as type %}
         {% with "media/inc/playlist_"|add:type|add:"_detail.html" as template %}
             {% include template %}
@@ -37,8 +65,4 @@
         {{ playlist.content|safe }}
     </div>
 
-    {% with playlist as object %}
-      {% include "includes/share_buttons.html" %}
-    {% endwith %}
-
 {% endblock %}
diff --git a/app/templates/media/playlist_list.html b/app/templates/media/playlist_list.html
index 505b6d13..15ced91c 100644
--- a/app/templates/media/playlist_list.html
+++ b/app/templates/media/playlist_list.html
@@ -21,5 +21,4 @@
         {% endwith %}
         <br>
     {% endfor %}
-
 {% endblock %}
-- 
2.39.5