Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: static/js/video.js

Issue 29703633: Noissue - Abstracted embedded video for use in blog (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Moved no-js application and iframe height+width Created Feb. 20, 2018, 10:35 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« static/css/video.css ('K') | « static/js/main.js ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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
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 (condi
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 wh
juliandoucette 2018/02/23 13:31:08 Good catch. ~Done. (I changed the approach from "c
+ {
+ 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>";
+ }
+
+};
« static/css/video.css ('K') | « static/js/main.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld