Add embedded videos with consent

Resolves #26

assets/css/_shared.scss

@@ -52,3 +52,16 @@ h5,
 h6 {
   font-weight: 500;
 }
+
+.btn {
+  padding: 10px;
+  border: 1px solid $text;
+  color: $text_invert;
+  cursor: pointer;
+
+  &.btn-light {
+    color: $text_invert;
+    background: $background_invert;
+    border-color: $text_invert;
+  }
+}

assets/css/app.scss

@@ -3,4 +3,5 @@
 
 // PAGES
 @import "/pages/landing";
+@import "pages/responsive-video";
 

assets/css/pages/responsive-video.scss

@@ -0,0 +1,33 @@
+.responsive-video {
+  position: relative;
+  padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
+  padding-top: 0px;
+  height: 0;
+  overflow: hidden;
+
+  iframe, .consent {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    &.hidden {
+      visibility: hidden;
+    }
+  }
+
+  .consent {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $background_invert;
+    color: $background;
+
+    .item {
+      width: 85%;
+      max-width: 800px;
+      min-width: 250px;
+    }
+  }
+}

assets/js/app.js

@@ -1 +1,6 @@
 import 'bootstrap';
+import ResponsiveVideo from './components/responsive-video';
+
+(function($) {
+	new ResponsiveVideo('.responsive-video').activate();
+})(jQuery);

assets/js/components/Cookie.js

@@ -0,0 +1,39 @@
+class Cookie {
+	constructor(name) {
+		this.cname = name;
+	}
+
+	read() {
+		let name = this.cname + "=";
+		let decodedCookie = decodeURIComponent(document.cookie);
+		let ca = decodedCookie.split(';');
+		for(let i = 0; i <ca.length; i++) {
+			let c = ca[i];
+			while (c.charAt(0) == ' ') {
+				c = c.substring(1);
+			}
+			if (c.indexOf(name) == 0) {
+				return c.substring(name.length, c.length);
+			}
+		}
+		return null;
+	}
+
+	/**
+	 * Writes the cookie value
+	 *
+	 * @param {string} cvalue The value to be written
+	 * @param {boolean|number} exdays Expiration of the cookie in days, false for session only
+	 */
+	write(cvalue, exdays = false) {
+		let d = new Date();
+		let expires = '';
+		if(exdays !== false) {
+			d.setTime(d.getTime() + (exdays*24*60*60*1000));
+			expires = `expires=${d.toUTCString()};`;
+		}
+		document.cookie = `${this.cname}=${cvalue};${expires}path=/`;
+	}
+}
+
+export default Cookie;

assets/js/components/responsive-video.js

@@ -0,0 +1,81 @@
+import jQuery from 'jquery';
+import Cookie from './Cookie';
+
+class ResponsiveVideo {
+	/**
+	 * Responsive Video with consent
+	 *
+	 * @param {string} selector jQuery Selector
+	 * @param {string} cacheName Name to save consent in localStorage/cookie
+	 */
+	constructor(selector = '.responsive-video', cacheName = 'video-consent') {
+		if(typeof selector !== 'string') {
+			throw new Error('Please provide a valid selector');
+		}
+
+		this.selector = selector;
+		this.cacheName = cacheName;
+	}
+
+	activate() {
+		if(this.hasGivenConsent()) {
+			this.switchToVideo();
+		} else {
+			this._setupConsent();
+		}
+	}
+
+	_setupConsent() {
+		jQuery.each(jQuery(this.selector)
+			.not('[data-responsive-video-activated]'), (index, element) => {
+			element = jQuery(element);
+			element.find('.consent')
+			       .removeClass('hidden');
+			element.find('.consent-btn')
+			       .on('click', event => {
+				       event.preventDefault();
+				       event.stopImmediatePropagation();
+
+				       this.giveConsent();
+			       });
+		});
+	}
+
+	hasGivenConsent() {
+		let item = null;
+
+		if(window.sessionStorage) {
+			item = window.sessionStorage.getItem(this.cacheName);
+		} else {
+			item = new Cookie(this.cacheName).read();
+		}
+
+		return item === null
+		       ? false
+		       : item;
+	}
+
+	giveConsent() {
+		if(window.sessionStorage) {
+			window.sessionStorage.setItem(this.cacheName, true);
+		} else {
+			new Cookie(this.cacheName).write('true', false);
+		}
+
+		this.switchToVideo();
+	}
+
+	switchToVideo() {
+		jQuery(this.selector)
+			.each((index, element) => {
+				element = jQuery(element);
+				element.find('iframe')
+				       .attr('src', element.data('video-src'))
+				       .removeClass('hidden');
+				element.find('.consent')
+				       .remove();
+			});
+	}
+}
+
+export default ResponsiveVideo;

docker-compose.yml

@@ -23,6 +23,8 @@ services:
     volumes:
      - .:/var/www/html
     working_dir: /var/www/html
+    environment:
+      - DOCKER=true
     networks:
      - savetheinternet
 networks:

templates/components/vimeo_video.html.twig

@@ -0,0 +1,14 @@
+<div class="vimeo-video">
+    <div class="responsive-video" data-video-src="https://player.vimeo.com/video/{{ id }}?color=e6430a">
+        <iframe class="hidden" src="" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+        <div class="consent hidden">
+            <div class="item">
+                {% block consent %}
+                    <h3>Please consent</h3>
+                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
+                {% endblock %}
+                <button class="btn btn-light consent-btn">{% block btn_consent %}I consent{% endblock %}</button>
+            </div>
+        </div>
+    </div>
+</div>

templates/index/index.html.twig

@@ -104,4 +104,13 @@
 
     </div>
 
+    <!-- embedded video -->
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
+                {% embed "components/vimeo_video.html.twig" with {'id': '70184320'} %}{% endembed %}
+            </div>
+        </div>
+    </div>
+
 {% endblock %}

webpack.config.js

@@ -29,4 +29,13 @@ Encore
     .autoProvidejQuery()
 ;
 
-module.exports = Encore.getWebpackConfig();
+let config = Encore.getWebpackConfig();
+
+if(process.env.DOCKER) {
+	config.watchOptions = {
+		aggregateTimeout: 300,
+		poll: 1000
+	};
+}
+
+module.exports = config;