Issue #21, Issue #24 Improve preload and responsiveness

AnsonArgyris · Aug 16, 2016 · 5fb6abb · 5fb6abb
1 parent f86acbe
commit 5fb6abb
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 37 deletions.
diff --git a/amd/build/oembed.min.js b/amd/build/oembed.min.js
diff --git a/amd/build/preloader.min.js b/amd/build/preloader.min.js
diff --git a/amd/build/responsivecontent.min.js b/amd/build/responsivecontent.min.js
diff --git a/amd/src/oembed.js b/amd/src/oembed.js
@@ -27,27 +27,28 @@ define(['jquery', 'filter_embedrc/preloader', 'filter_embedrc/responsivecontent'
         return {
             init: function() {
                 /**
-                 * Apply a mutation observer to track oembed_content being dynamically added to the page.
+                 * Apply a mutation observer to track oembed-content being dynamically added to the page.
                  */
                 var responsiveContentOnInsert = function() {
                     /**
-                     * Does a node have the oembed_content class
+                     * Does a node have the oembed-content class
                      * @param {opbject} node (dom element)
                      * @returns {boolean}
                      */
                     var hasOembedClass = function(node) {
                         if (!node.className) {
                             return false;
                         }
-                        return $(node).is(".oembed_content,.oembed_card");
+                        return $(node).is(".oembed-content, .oembed-card-container");
                     };
 
                     var observer = new MutationObserver(function(mutations) {
                         mutations.forEach(function(mutation) {
                             for (var n in mutation.addedNodes) {
                                 var node = mutation.addedNodes[n];
                                 if (hasOembedClass(node)) {
-                                    responsiveContent.apply();
+                                    // Only apply responsive content to the newly added node for efficiency.
+                                    responsiveContent.apply($(node).find('> *:not(video):first-child, .oembed-card'));
                                 }
                             }
                         });

diff --git a/amd/src/preloader.js b/amd/src/preloader.js
@@ -26,23 +26,26 @@ define(['jquery'],
     function($) {
         return {
             apply: function() {
-                $(".oembed_card_play").on("click", function() {
-                    var card = $(this).parent('.oembed_card');
+                $(".oembed-card-play").on("click", function() {
+                    var card = $(this).parent('.oembed-card');
                     var data = $(card.data('embed'));
                     var cardwidth = $(card).width();
                     var cardheight = $(card).height();
 
-                    // Add auto play param.
+                    // Add auto play params.
+                    // Because we are using a preloader we ideally want the content to play after clicking the preloader
+                    // play button.
                     var iframe = $($(data).find('iframe')[0]);
                     var src = iframe.attr('src');
                     var paramglue = src.indexOf('?') > -1 ? '&' : '?';
                     src += paramglue + 'autoplay=1';
+                    src += '&' + 'auto_play=1';
                     iframe.attr('src', src);
 
                     // Replace card with oembed html.
                     data.attr('data-card-width', cardwidth);
                     data.attr('data-card-height', cardheight);
-                    card.replaceWith(data);
+                    card.parent('.oembed-card-container').replaceWith(data);
                 });
             }
         };

diff --git a/amd/src/responsivecontent.js b/amd/src/responsivecontent.js
@@ -29,18 +29,23 @@ define(['jquery'], function($) {
      */
     var ResponsiveContent = function() {
 
-        var self = this;
-
         /**
          * Apply to specific node / nodes or use selector.
          * @param {jQuery|null} nodes- jquery node / collection of nodes or null
          */
         this.apply = function(nodes) {
             if (!nodes){
-                nodes = $('.oembed_content > *:not(video):first-child, .oembed_card');
+                nodes = $('.oembed-content > *:not(video):first-child, .oembed-card');
             }
             // Apply aspect ratio to height for all nodes or single node.
             $(nodes).each(function() {
+
+                var parent = $(this).parent();
+                if (parent.hasClass('oembed-responsive')) {
+                    // Already processed.
+                    return;
+                }
+
                 var width,
                     height,
                     aspectratio;
@@ -80,23 +85,22 @@ define(['jquery'], function($) {
 
                 // Get width again.
                 width = parseInt(this.offsetWidth);
-                // Set height based on width and aspectratio.
-                var style = {height: (width * aspectratio) + 'px', width: '100%'};
+                // Set width;
+                var style = {width: '100%'};
                 $(this).css(style);
+
+                // Make sure parent has a padding element
+                if (!parent.find('.oembed-responsive-pad').length) {
+                    var aspectPerc = aspectratio * 100;
+                    var responsivePad = '<div class="oembed-responsive-pad" style="padding-top:' + aspectPerc + '%"></div>';
+                    parent.append(responsivePad);
+                }
+
+                // Add responsive class to parent element
+                parent.addClass('oembed-responsive');
             });
         };
 
-        // Listen for window resize for videos.
-        $(window).resize(function() {
-            var resizestamp = new Date().getTime();
-            (function(timestamp) {
-                window.setTimeout(function() {
-                    if (timestamp === resizestamp) {
-                        self.apply();
-                    }
-                }, 200); // wait 1/20th of a second before resizing
-            })(resizestamp);
-        });
     };
 
     return new ResponsiveContent();

diff --git a/classes/service/oembed.php b/classes/service/oembed.php
@@ -314,7 +314,7 @@ protected function oembed_gethtml($jsonarr, $params = '') {
             $embed = str_replace('?feature=oembed', '?feature=oembed'.htmlspecialchars($params), $embed);
         }
 
-        $output = '<div class="oembed_content">' . $embed . '</div>'; // Wrapper for responsive processing.
+        $output = '<div class="oembed-content">' . $embed . '</div>'; // Wrapper for responsive processing.
         return $output;
     }
 

diff --git a/styles.css b/styles.css
@@ -1,25 +1,27 @@
-.oembed_card {
+.oembed-card {
     position: relative;
     min-height: 10em;
     background-size: cover;
     transition: all 0.4s ease-in-out;
 }
-.oembed_card_title {
+.oembed-card-title {
+    position: absolute;
+    top: 0;
     color: #fff;
     background-color: rgba(0,0,0,0.8);
     padding: 0.5em 0.5em;
 }
-.oembed_content > *:not(video):first-child {
+.oembed-content > *:not(video):first-child {
     width: 100%;
 }
 
 /* Responsive video for HTML5 only */
-.oembed_content video {
+.oembed-content video {
     width: 100% !important;
     height: auto !important;
 }
 
-.btn.btn-link.oembed_card_play {
+.btn.btn-link.oembed-card-play {
     background-image: url([[pix:filter_embedrc|play]]);
     background-repeat: no-repeat;
     position: absolute;
@@ -35,9 +37,29 @@
     filter: drop-shadow(1px 1px 1px #666);
 }
 
-.btn.btn-link.oembed_card_play:hover {
+.btn.btn-link.oembed-card-play:hover {
     background-position: 0;
     -webkit-filter: drop-shadow(0px 0px 0px #666);
     filter: drop-shadow(0px 0px 0px #666);
     opacity: 1;
 }
+
+.oembed-responsive {
+    width: 100%;
+    display: block;
+    position: relative;
+}
+
+.oembed-responsive-pad{
+    display: block;
+}
+
+.oembed-responsive > *:not(video):first-child {
+    position: absolute !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    right: 0 !important;
+    left: 0 !important;
+    height: 100% !important;
+    width: 100% !important;
+}
diff --git a/templates/preload.mustache b/templates/preload.mustache
@@ -1,4 +1,6 @@
-<div class='oembed_card' style="background-image:url({{thumbnail_url}});" data-embed="{{embedhtml}}" {{#jshtml}}{{{jshtml}}}{{/jshtml}} >
-    <div class="oembed_card_title">{{title}}</div>
-    <button class="btn btn-link oembed_card_play" aria-label="{{#str}}playoembed, filter_embedrc{{/str}}"></button>
+<div class="oembed-card-container">
+    <div class="oembed-card" style="background-image:url({{thumbnail_url}});" data-embed="{{embedhtml}}" {{#jshtml}}{{{jshtml}}}{{/jshtml}} >
+        <div class="oembed-card-title">{{title}}</div>
+        <button class="btn btn-link oembed-card-play" aria-label="{{#str}}playoembed, filter_embedrc{{/str}}"></button>
+    </div>
 </div>