From 2e07945994b97014a634e1888c1459dee13a505d Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Sat, 23 Feb 2019 19:08:34 +0100
Subject: [PATCH] Block YouTube video by default

---
 assets/css/common/global.css       |  4 +++
 assets/css/components/posts/ui.css | 14 ++++++++
 assets/js/components/posts/ui.js   | 54 +++++++++++++++++++++++++-----
 3 files changed, 63 insertions(+), 9 deletions(-)

diff --git a/assets/css/common/global.css b/assets/css/common/global.css
index b14618ba..4a1a0fcd 100644
--- a/assets/css/common/global.css
+++ b/assets/css/common/global.css
@@ -25,6 +25,10 @@ a {
     color: #72afd2;
 }
 
+.cursor-pointer {
+    cursor: pointer;
+}
+
 /**
  * Sceditor iframe
  */
diff --git a/assets/css/components/posts/ui.css b/assets/css/components/posts/ui.css
index 93f936dd..0c00c437 100644
--- a/assets/css/components/posts/ui.css
+++ b/assets/css/components/posts/ui.css
@@ -63,6 +63,20 @@
 	text-align: center;
 }
 
+.post .post-youtube.post-youtube-placeholder {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-around;
+	background-color: #3c8dbc;
+	color: white;
+	border-radius: 5px;
+}
+
+.post .post-youtube.post-youtube-placeholder .title {
+	font-size: 150%;
+}
+
 .post .post-youtube {
 	width: 100%;
 	height: 300px;
diff --git a/assets/js/components/posts/ui.js b/assets/js/components/posts/ui.js
index f0fa71e3..50842e12 100644
--- a/assets/js/components/posts/ui.js
+++ b/assets/js/components/posts/ui.js
@@ -424,17 +424,53 @@ ComunicWeb.components.posts.ui = {
 		//In case of YouTube video
 		else if(info.kind == "youtube"){
 
-			//Create iframe
-			var youtube_iframe = createElem2({
+			//Create frame placeholder
+			var youtube_placeholder = createElem2({
 				appendTo: postRoot,
-				type: "iframe",
-				class: "post-youtube",
-				src: "https://www.youtube-nocookie.com/embed/"+info.file_path+"?rel=0"
+				type: "div",
+				class: "post-youtube post-youtube-placeholder"
+			});
+
+			//Title 
+			createElem2({
+				appendTo: youtube_placeholder,
+				type: "div",
+				class: "title",
+				innerHTML: "<i class='fa fa-youtube-play'></i> YouTube Movie"
+			});
+
+			createElem2({
+				appendTo: youtube_placeholder,
+				type: "a",
+				class: "btn btn-default",
+				innerHTML: "Open on YouTube",
+				href: "https://youtube.com/watch?v=" + info.file_path,
+			}).target = "_blank";
+
+			var openHere = createElem2({
+				appendTo: youtube_placeholder,
+				type: "div",
+				class: "cursor-pointer",
+				innerHTML: "Open here"
+			});
+
+			openHere.addEventListener("click", function(){
+
+				//Create iframe
+				var youtube_iframe = createElem2({
+					insertBefore: youtube_placeholder,
+					type: "iframe",
+					class: "post-youtube",
+					src: "https://www.youtube-nocookie.com/embed/"+info.file_path+"?rel=0"
+				});
+				youtube_iframe.setAttribute("frameborder", 0);
+				youtube_iframe.setAttribute("gesture", "media");
+				youtube_iframe.setAttribute("allow", "encrypted-media");
+				youtube_iframe.setAttribute("allowfullscreen", "");
+
+				youtube_placeholder.remove();
+
 			});
-			youtube_iframe.setAttribute("frameborder", 0);
-			youtube_iframe.setAttribute("gesture", "media");
-			youtube_iframe.setAttribute("allow", "encrypted-media");
-			youtube_iframe.setAttribute("allowfullscreen", "");
 
 		}