From c3d8730cd0bca753fb0b6c0315cc8f7ac4114193 Mon Sep 17 00:00:00 2001
From: jrtechs <jrtechs@hotmail.com>
Date: Wed, 19 Dec 2018 22:04:20 -0500
Subject: [PATCH] Updated blog renderer engine to lazy load youtube videos.

---
 .../musical-floppy-drive-build-log.md         |  4 +-
 includes/css/code.css                         | 60 +++++++++++++++++++
 includes/html/footer.html                     | 31 ++++++++++
 utils/renderBlogPost.js                       | 22 +++++++
 4 files changed, 116 insertions(+), 1 deletion(-)

diff --git a/blogContent/posts/projects/musical-floppy-drive-build-log.md b/blogContent/posts/projects/musical-floppy-drive-build-log.md
index 214f9fd..ed3ef1a 100644
--- a/blogContent/posts/projects/musical-floppy-drive-build-log.md
+++ b/blogContent/posts/projects/musical-floppy-drive-build-log.md
@@ -6,9 +6,11 @@ floppy drives, however, there are thousands of videos on YouTube.
 This project first started over a year ago when I connected two floppy drives to
 a Raspberry Pi to play the Star Wars theme.
 
-<iframe width="100%" height="315" src="https://www.youtube.com/embed/wcnUvPMpqjA" frameborder="0" allow="autoplay; 
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/wcnUvPMpqjA" frameborder="0" allow="autoplay;
 encrypted-media" allowfullscreen></iframe>
 
+<youtube src="wcnUvPMpqjA" />
+
 Although this was fun, there was hardly any software for playing different music
 on the Raspberry Pi. I managed to hack the software to also play Jingle Bells,
 however, that took hours to input just a single song.
diff --git a/includes/css/code.css b/includes/css/code.css
index 6d6afbc..f5cf38b 100644
--- a/includes/css/code.css
+++ b/includes/css/code.css
@@ -163,4 +163,64 @@ pre .xml .tag .title {
 }
 pre .html .tag .title {
   color: #111111;
+}
+
+
+
+.wrapper {
+  max-width: 680px;
+  margin: 60px auto;
+  padding: 0 20px;
+}
+
+.youtube {
+  background-color: #000;
+  margin-bottom: 30px;
+  position: relative;
+  padding-top: 56.25%;
+  overflow: hidden;
+  cursor: pointer;
+}
+.youtube img {
+  width: 100%;
+  top: -16.82%;
+  left: 0;
+  opacity: 0.7;
+}
+.youtube .play-button {
+  width: 90px;
+  height: 60px;
+  background-color: #333;
+  box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
+  z-index: 1;
+  opacity: 0.8;
+  border-radius: 6px;
+}
+.youtube .play-button:before {
+  content: "";
+  border-style: solid;
+  border-width: 15px 0 15px 26.0px;
+  border-color: transparent transparent transparent #fff;
+}
+.youtube img,
+.youtube .play-button {
+  cursor: pointer;
+}
+.youtube img,
+.youtube iframe,
+.youtube .play-button,
+.youtube .play-button:before {
+  position: absolute;
+}
+.youtube .play-button,
+.youtube .play-button:before {
+  top: 50%;
+  left: 50%;
+  transform: translate3d( -50%, -50%, 0 );
+}
+.youtube iframe {
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
 }
\ No newline at end of file
diff --git a/includes/html/footer.html b/includes/html/footer.html
index 3e96d4e..89e4667 100644
--- a/includes/html/footer.html
+++ b/includes/html/footer.html
@@ -62,6 +62,37 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>
 
+<script>
+    ( function() {
+
+        var youtube = document.querySelectorAll( ".youtube" );
+
+        for (var i = 0; i < youtube.length; i++) {
+
+            var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
+
+            var image = new Image();
+            image.src = source;
+            image.addEventListener( "load", function() {
+                youtube[ i ].appendChild( image );
+            }( i ) );
+
+            youtube[i].addEventListener( "click", function() {
+
+                var iframe = document.createElement( "iframe" );
+
+                iframe.setAttribute( "frameborder", "0" );
+                iframe.setAttribute( "allowfullscreen", "" );
+                iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
+
+                this.innerHTML = "";
+                this.appendChild( iframe );
+            } );
+        };
+
+    } )();
+</script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/utils/renderBlogPost.js b/utils/renderBlogPost.js
index 34d05ea..36832b2 100644
--- a/utils/renderBlogPost.js
+++ b/utils/renderBlogPost.js
@@ -112,6 +112,28 @@ module.exports=
                     //this line prevents older versions of pandoc from including invalid cdm scripts
                     result = result.split("<script src=\"https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML-full\" type=\"text/javascript\"></script>").join("");
                     result = result.split("<script src=\"https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML\" type=\"text/javascript\"></script>").join("");
+
+                    //stuff for youtube videos
+                    var re = /\<youtube .*?>/;
+
+                    //<youtube src="" />
+                    while (result.search(re) != -1)
+                    {
+                        var ytid = result.substring(result.search(re) + 14, result.search(re)+ 11 + 14);
+                        var youtubeHTML = "<div class=\"wrapper\">\n" +
+                            "\t<div class=\"youtube\" data-embed=\"" +
+                             ytid +
+                            "\" />\n" +
+                            "\t\t<div class=\"play-button\"></div>\n" +
+                            "\t</div>\n" +
+                            "</div>\n";
+
+                        var original = "<youtube src=\"" + ytid + "\" />";
+
+                        result = result.split(original).join(youtubeHTML);
+                    }
+
+
                     if(blocks == -1)
                         resolve(result);