Noissue - Abstracted embedded video for use in blog

static/js/video.js

Index: static/js/video.js
===================================================================
new file mode 100644
--- /dev/null
+++ b/static/js/video.js
@@ -0,0 +1,91 @@
+/**
+ * Creats a GDPR compatible video
+ * @constructor
+ * @param {Element} parent - video parent / container
+ * @example
+ * <div id="example-video" class="video-parent">
+ *   <a
+ *     class="video-link"
+ *     target="_blank"
+ *     href="http://example.com/iframe/video/src">
+ *     <img
+ *       class="video-thumbnail"
+ *       alt="Short description of video"
+ *       src="/img/video-thumbnail.png" />
+ *     <img
+ *       class="video-play"
+ *       alt="Open video in separate window""
+ *       src="/img/video-link.png" />
+ *   </a>
+ *   <p class="video-disclaimer">Disclaimer text</p>
+ * </div>
+ *
+ * <script>new Video(document.getElementById('example-video'));</script>
+ */
+function Video(parent)
+{
+  /**
+   * Video parent / container element
+   * @member {Element}
+   */
+  this.parent = parent;
+
+  /**
+   * The last time that the play button was clicked
+   * @member {number}
+   */
+  this.lastClicked = 0;
+
+  var videoLink = parent.querySelector(".video-link");
+
+  /**
+   * The iframe video src url
+   * @member {string}
+   */
+  this.src = videoLink.getAttribute("href");
+
+  //change external link icon into play button icon
+  parent.querySelector(".video-play")
+    .setAttribute("src", "/img/video-play.png");
+
+  //show disclaimer or replace thumbnail with video on click
+  videoLink.addEventListener("click", function(event)

[ire, 2018/02/22 09:25:41]

NIT: Move this logic to it's own function instead of having it here?

[juliandoucette, 2018/02/23 13:31:08]

Done.

+  {
+    event.preventDefault();
+
+    if (this.parent.classList.contains("contains-disclaimer") === false)

[ire, 2018/02/22 09:25:41]

NIT:

I prefer:

if (!condition)

Over:

if (condition === false)

[juliandoucette, 2018/02/23 13:31:08]

Good catch. Done.

+    {
+      this.toggleDisclaimer();
+    }
+    else if (new Date().getTime() - this.lastClicked > 600)
+    {
+      this.insertVideo();
+    }
+  }.bind(this));
+}
+
+Video.prototype = {
+
+  /** Toggle video disclaimer */
+  toggleDisclaimer: function()

[ire, 2018/02/22 09:25:41]

The .contains-disclaimer class still shows even when the iframe is visible and
the disclaimer is no longer visible

[juliandoucette, 2018/02/23 13:31:08]

Good catch. ~Done. (I changed the approach from "contains-disclaimer" to
"hide-disclaimer".)

+  {
+    this.parent.classList.toggle("contains-disclaimer");
+    this.lastClicked = new Date().getTime();
+  },
+
+  /** Replace video thumbnail with video iframe */
+  insertVideo: function()
+  {
+    this.parent.classList.add("contains-iframe");
+
+    //replace static thumbnail with iframe video
+    this.parent.innerHTML =
+      "<iframe " +
+        "class='video-iframe' " +
+        "frameborder=0 " +
+        "allowfullscreen " +
+        "src='" + this.src + "'>" +
+      "</iframe>";
+  }
+
+};