Video overlay first implementation

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index 705525cff8359bdef09985d5603cb5553a6bb0af..bedd48d83ac081f76678b4650dec4d1fa6fe9ab4 100644 (file)
--- a/app/static/src/js/index.js
+++ b/app/static/src/js/index.js
@@ -18,6 +18,7 @@ var LazyLoadInit = require('./modules/lazyload-init');
 var HomeMenu = require('./modules/home-menu');
 var Audio = require('./modules/audio');
 var Video = require('./modules/video');
+var VideoOverlay = require('./modules/video-overlay');
 
 //
 // Init all the modules
@@ -38,4 +39,5 @@ window[LightSliderNetworkInit] = new LightSliderNetworkInit();
 window[LazyLoadInit] = new LazyLoadInit();
 window[HomeMenu] = new HomeMenu();
 window[Audio] = new Audio();
-window[Video] = new Video();
+window['Video'] = new Video();
+window[VideoOverlay] = new VideoOverlay();

diff --git a/app/static/src/js/modules/video-overlay.js b/app/static/src/js/modules/video-overlay.js
new file mode 100644 (file)
index 0000000..15eb72f
--- /dev/null
+++ b/app/static/src/js/modules/video-overlay.js
@@ -0,0 +1,44 @@
+var VideoOverlay = function() {
+
+    this.$overlay = $('#overlay');
+    this.$overlayContent = $('#overlayContent');
+
+    //
+    // Init
+    //
+    this.init();
+
+};
+
+VideoOverlay.prototype.init = function() {
+
+    var that = this;
+
+    $('[data-video-overlay]').click(function(e) {
+        e.preventDefault();
+
+        that.openOverlay(this.href);
+
+        return false;
+    });
+
+};
+
+VideoOverlay.prototype.openOverlay = function(url) {
+
+    var that = this;
+
+    that.$overlay.addClass('open');
+
+    that.$overlayContent.load(url, function() {
+
+        window['Video'].init();
+        setTimeout(function() {
+            that.$overlayContent.addClass('loaded');
+        }, 2000);
+
+    });
+
+};
+
+module.exports = VideoOverlay;

diff --git a/app/static/src/js/modules/video.js b/app/static/src/js/modules/video.js
index e23518a44323cb9934c5f2020766115d79f1be00..4238d58d8983eb561a58ed6d0bb62bcf791ee6b1 100644 (file)
--- a/app/static/src/js/modules/video.js
+++ b/app/static/src/js/modules/video.js
@@ -15,6 +15,10 @@ Video.prototype.init = function() {
 
     var that = this;
 
+    if(that.player) {
+        that.player.dispose();
+    }
+
     that.player = videojs('video-js-playlist', {
         aspectRatio:"905:520"
     });

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index bb234c3eb06dacd49a3369c32ff6bed1aabe78fe..0ec352f2ac0c44732a2468a90f43c89a13624408 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -67,6 +67,7 @@
 @import 'newsletter';
 @import 'tweets';
 @import 'hero';
+@import 'overlay';
 
 // Typography modules
 @import 'dashed';

diff --git a/app/static/src/sass/modules/_overlay.scss b/app/static/src/sass/modules/_overlay.scss
new file mode 100644 (file)
index 0000000..e53752b
--- /dev/null
+++ b/app/static/src/sass/modules/_overlay.scss
@@ -0,0 +1,110 @@
+$module: ".overlay";
+
+#{$module} {
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 100;
+
+    overflow: hidden;
+
+    background: rgba($color-background, .95);
+
+    display: block;
+    height: 0;
+    opacity: 0;
+
+    @include transition(opacity .5s ease-in-out, height 0s .5s);
+
+    &.open {
+
+        height: 100%;
+        display: table;
+        opacity: 1;
+        @include transition(opacity .5s ease-in-out, height 0s);
+
+    }
+
+    &__close {
+
+        position: absolute;
+        top: 2rem;
+        right: 2rem;
+        z-index: 2;
+        color: white;
+        display: block;
+
+        width: 40px;
+        height: 40px;
+
+        &:before, &:after {
+            width: 100%;
+            height: 1px;
+            content: "";
+            display: block;
+            background: white;
+
+            position: absolute;
+            top: 20px;
+            left: 0;
+
+            @include transition(all 0.5s ease-in-out);
+        }
+
+        &:before {
+            @include transform(rotate(45deg));
+        }
+        &:after {
+            @include transform(rotate(-45deg));
+        }
+
+        &:hover {
+
+            &:before {
+                background: $color-main;
+                @include transform(rotate(225deg));
+            }
+            &:after {
+                background: $color-main;
+                @include transform(rotate(-225deg));
+            }
+
+        }
+
+    }
+
+    &__container {
+
+        display: table;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+
+    }
+
+    &__content {
+
+        display: table-cell;
+        vertical-align: middle;
+
+    }
+
+    #overlayContent {
+
+        opacity: 0;
+        @include transition(opacity .5s ease-in-out, height 0s .5s);
+
+        &.loaded {
+
+            opacity: 1;
+
+        }
+
+    }
+
+}

diff --git a/app/static/src/sass/modules/_search.scss b/app/static/src/sass/modules/_search.scss
index 8b9059b35ccae8a5a4423186b04680c201ab3265..ee369ec384ed9b28feaf30888f6f63e235c1add5 100644 (file)
--- a/app/static/src/sass/modules/_search.scss
+++ b/app/static/src/sass/modules/_search.scss
@@ -28,7 +28,7 @@ $module: ".search";
     width: 100%;
     z-index: 100;
 
-    background: rgba(255,255,255, .95);
+    background: rgba($color-background, .95);
 
     display: block;
     height: 0;
@@ -49,9 +49,48 @@ $module: ".search";
     &__close {
 
         position: absolute;
-        top: 1rem;
-        right: 1rem;
+        top: 2rem;
+        right: 2rem;
         z-index: 2;
+        color: white;
+        display: block;
+
+        width: 40px;
+        height: 40px;
+
+        &:before, &:after {
+            width: 100%;
+            height: 1px;
+            content: "";
+            display: block;
+            background: white;
+
+            position: absolute;
+            top: 20px;
+            left: 0;
+
+            @include transition(all 0.5s ease-in-out);
+        }
+
+        &:before {
+            @include transform(rotate(45deg));
+        }
+        &:after {
+            @include transform(rotate(-45deg));
+        }
+
+        &:hover {
+
+            &:before {
+                background: $color-main;
+                @include transform(rotate(225deg));
+            }
+            &:after {
+                background: $color-main;
+                @include transform(rotate(-225deg));
+            }
+
+        }
 
     }
 

diff --git a/app/static/src/sass/modules/_share-links.scss b/app/static/src/sass/modules/_share-links.scss
index 4e36dfee037b21fa08f29dc579e1123459554293..e90ffc01b00f21e12014bb687faa872c463d0121 100644 (file)
--- a/app/static/src/sass/modules/_share-links.scss
+++ b/app/static/src/sass/modules/_share-links.scss
@@ -50,4 +50,16 @@ $module: ".share-links";
 
     }
 
+    .overlay & {
+
+        #{$module}__item {
+
+            display: inline-block;
+            @include margin-right(.25);
+            font-size: 1.3rem;
+
+        }
+
+    }
+
 }

diff --git a/app/static/src/sass/modules/boxes/_article-box.scss b/app/static/src/sass/modules/boxes/_article-box.scss
index ec737b727327fc9e26fe35df3bf0bd5302481a29..55cbe54941566910a11c7c0d0f0f7732c1e6ac8c 100644 (file)
--- a/app/static/src/sass/modules/boxes/_article-box.scss
+++ b/app/static/src/sass/modules/boxes/_article-box.scss
@@ -147,6 +147,7 @@ $module: ".article-box";
 
         @include margin-bottom(.5);
         @include margin-right(.5);
+
     }
 
     &__content {

diff --git a/app/static/src/sass/modules/boxes/_media-box.scss b/app/static/src/sass/modules/boxes/_media-box.scss
index 49cf366c4b3e7a88d64691039f720c7e89d1b303..fbc5d331c6227f8ff8b778d1a1c78acd40c4e8ae 100644 (file)
--- a/app/static/src/sass/modules/boxes/_media-box.scss
+++ b/app/static/src/sass/modules/boxes/_media-box.scss
@@ -64,6 +64,7 @@ $module: ".media-box";
 
     &__image-container {
         background: $color-background;
+        display: block;
         @include transition(all 0.5s ease-in-out);
     }
 
@@ -78,6 +79,7 @@ $module: ".media-box";
 
         position: relative;
         overflow: hidden;
+        display: block;
 
         @include mq($until: xs) {
             height: auto;

diff --git a/app/templates/base.html b/app/templates/base.html
index ba311048ee572dd68e03f9b7544d9bbf13ab8755..bc89735c100f9dae8237259a4e448be3e1bf8ff3 100644 (file)
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -96,6 +96,18 @@
         </footer>
     </div>
 
+    <div class="overlay" id="overlay" data-close-button-target="overlay">
+        <a href="#" data-close-button="overlay" class="overlay__close">
+        </a>
+        <div class="overlay__container">
+            <div class="overlay__content">
+                <div id="overlayContent">
+
+                </div>
+            </div>
+        </div>
+    </div>
+
     {% search_form %}
     {% include "includes/footer_scripts.html" %}
     {% endspaceless %}

diff --git a/app/templates/includes/search_form.html b/app/templates/includes/search_form.html
index 8dceb004198c8f5c987ea4ad09223a91d4038a0c..3c3f1d6f16100c944ebf0b81ace374281faaad0a 100644 (file)
--- a/app/templates/includes/search_form.html
+++ b/app/templates/includes/search_form.html
@@ -1,8 +1,7 @@
 {% load mezzanine_tags i18n %}
 <div class="search" id="search" data-open-button-target="search" data-close-button-target="search" data-close-escape>
-    <div class="search__close">
-        <a href="#" data-close-button="search" aria-hidden="true"><i class="fa fa-close"></i></a>
-    </div>
+    <a href="#" data-close-button="search" class="search__close">
+    </a>
     <div class="search__container">
         <div class="search__content">
             <div class="container">

diff --git a/app/templates/media/media/includes/media_card.html b/app/templates/media/media/includes/media_card.html
index 311b0049abf955c8ff882b33574d54c1b48151d3..a0b5e9adad898e3a5f1098c1da384a8a3c367252 100644 (file)
--- a/app/templates/media/media/includes/media_card.html
+++ b/app/templates/media/media/includes/media_card.html
@@ -1,8 +1,8 @@
 {% load mezzanine_tags keyword_tags i18n organization_tags staticfiles %}
 
 <div class="">
-    <a class="media-box media-box--{{object|get_media_type|lower}}" href="{% url 'organization-media-detail' object|get_media_type|lower object.slug %}">
-        <div class="media-box__image-container">
+    <div class="media-box media-box--{{object|get_media_type|lower}}">
+        <a class="media-box__image-container" href="{% url 'organization-media-overlay' object.slug %}" data-video-overlay>
             <figure class="media-box__image media-box__image--video">
                 {% if object.poster_url %}
                     <img src="{{ object.poster_url }}">
@@ -10,8 +10,8 @@
                     <div class="media-box__placeholder"></div>
                 {% endif %}
             </figure>
-        </div>
-        <div class="media-box__content">
+        </a>
+        <a class="media-box__content" href="{% url 'organization-media-detail' object|get_media_type|lower object.slug %}">
             <h2 class="media-box__title">{{ object.title }}</h2>
             <div class="media-box__type">
                 {{ object|get_media_type }}
@@ -21,6 +21,6 @@
                     {{ object.description|richtext_filters|safe|truncatechars_html:200 }}
                 </div>
             {% endif %}
-        </div>
-    </a>
+        </a>
+    </div>
 </div>

diff --git a/app/templates/media/overlay_detail.html b/app/templates/media/overlay_detail.html
index 1e86a0f32b0638e1cf590ca24579d2455edbd849..fa065db3bb12211988766dc1db138512d3c336ec 100644 (file)
--- a/app/templates/media/overlay_detail.html
+++ b/app/templates/media/overlay_detail.html
@@ -1,28 +1,59 @@
-{{ media.title }}
-{% if media.poster_url %}
-    {{ media.poster_url }}
-{% endif %}
-
-{{ media.publish_date|date:"j F, Y" }}
-
-{% if media.description %}
-    {{ media.description }}
-{% 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 %}
+{% load mezzanine_tags keyword_tags i18n organization_tags %}
+
+<div class="container">
+
+    <div class="row">
+
+        <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>{% if media.description %}<small> {{ media.description }}</small>{% endif %}</a></li>
+                {% endspaceless %}
+            </ol>
+
+        </div>
+
+    </div>
+
+    <div class="row">
+
+        <div class="col-md-3 page__sidebar">
+            <div style="position: relative;">
+                <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 %}
+
+                    {% with media as object %}
+                        <div class="mt1">
+                            {% include "includes/share_buttons.html" %}
+                        </div>
+                    {% endwith %}
+                </div>
+            </div>
+        </div>
+
+        <div class="col-sm-16 col-md-10 page__content" data-summary-content>
+
+            <h2 class="mt0">{{ media.title }}</h2>
+            {% if media.description %}
+                <p>
+                    {{ media.description }}
+                </p>
+            {% endif %}
+
+        </div>
+
+    </div>
+
+</div>