From: Jérémy Fabre <Jeremy@iMac-de-Jeremy-2.fritz.box>
Date: Thu, 9 Feb 2017 16:39:32 +0000 (+0100)
Subject: Update video details template
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=7d6475a3b02731586c85ba08318baa36eb49c588;p=mezzo.git

Update video details template
---

diff --git a/app/templates/media/playlist_detail.html b/app/templates/media/playlist_detail.html
index 667cc692..fa9502fd 100644
--- a/app/templates/media/playlist_detail.html
+++ b/app/templates/media/playlist_detail.html
@@ -15,17 +15,9 @@
     playlist
 {% endblock %}
 
-{% block breadcrumb_menu %}
-    {{ block.super }}
-    <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 %}
     {% editable person.title %}
-        <h1 class="dotted">{{ playlist.title }}</h1>
+        <h1 class="section-title section-title--uppercase section-title--main">{{ playlist.title }}</h1>
     {% endeditable %}
 {% endblock %}
 
diff --git a/app/templates/media/video/video_detail.html b/app/templates/media/video/video_detail.html
index 6a5d35b0..36c71bc3 100644
--- a/app/templates/media/video/video_detail.html
+++ b/app/templates/media/video/video_detail.html
@@ -15,42 +15,51 @@
     media
 {% endblock %}
 
-
 {% block page_title %}
     {% editable person.title %}
-        <h1 class="dotted">{{ media.title }}</h1>
+        <h1 class="section-title section-title--uppercase section-title--main">{{ media.title }}</h1>
     {% endeditable %}
 {% endblock %}
 
+{% block page_sidebar %}
 
+    <div class="page__meta" data-sticky data-sticky-parent="row" data-sticky-offset="100" data-sticky-detach-at="971">
+        <div class="page__meta-title">
+            {% trans 'Publish date' %}
+        </div>
+        {% editable media.publish_date %}
+            <div class="page__meta-text">
+                {{ media.publish_date|date:"DATE_FORMAT" }}
+            </div>
+        {% endeditable %}
+        <div class="page__meta-separator">
 
-{% block page_content %}
-    {{ media.title }}
-    {% if media.poster_url %}
-        {{ media.poster_url }}
-    {% endif %}
+        </div>
+        {% with media as object %}
+            <div class="">
+                {% include "includes/share_buttons.html" %}
+            </div>
+        {% endwith %}
+    </div>
 
-    {{ media.publish_date|date:"j F, Y" }}
+{% endblock %}
+
+{% block page_content %}
 
     {% if media.description %}
-        {{ media.description }}
+        <p>
+            {{ media.description }}
+        </p>
     {% endif %}
 
-    <br><br>
-
-    {% with media.transcoded.all as media_transcoded %}
-        {% if media_transcoded %}
-            {# WEBM #}
-            {{ media_transcoded.0.url }}
-            {{ media_transcoded.0.mime_type }}
-            <br><br>
-            {# MP4 #}
-            {{ media_transcoded.1.url }}
-            {{ media_transcoded.1.mime_type }}
-            <br><br>
-            {# OGG #}
-            {{ media_transcoded.2.url }}
-            {{ media_transcoded.2.mime_type }}
-        {% endif %}
-    {% endwith %}
+    <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>{% if media.description %}<small> {{ media.description }}</small>{% endif %}</a></li>
+        {% endspaceless %}
+    </ol>
+
 {% endblock %}