From 1f28ea77a044f414ea161fb9d7fb0dd3be04b489 Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Tue, 17 Nov 2020 17:36:55 -0300
Subject: [PATCH] poder editar videos

---
 app/assets/javascripts/01-types.js  | 10 ++++++++--
 app/assets/javascripts/02-editor.js |  5 +++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/01-types.js b/app/assets/javascripts/01-types.js
index 260f8072..28a8afdd 100644
--- a/app/assets/javascripts/01-types.js
+++ b/app/assets/javascripts/01-types.js
@@ -92,7 +92,6 @@ const blocks = {
 		selector: "AUDIO",
 		createFn: editorEl => {
 			const el = document.createElement("AUDIO")
-			el.controls = true
 			return el
 		},
 	},
@@ -100,7 +99,13 @@ const blocks = {
 		selector: "VIDEO",
 		createFn: editorEl => {
 			const el = document.createElement("VIDEO")
-			el.controls = true
+			el.poster = "/public/placeholder.png"
+			// Para poder seleccionar el video tenemos que sacarle los
+			// controles, pero queremos poder verlos para reproducir el video.
+			// Al hacer click le damos los controles y al salir se los sacamos
+			// para poder hacer click de vuelta
+			el.addEventListener('click', event => event.target.controls = true)
+			el.addEventListener('focusout', event => event.target.controls = false)
 			return el
 		},
 	},
@@ -283,6 +288,7 @@ const typesWithProperties = {
 
 				const file = videoFileEl.files[0]
 
+				videoEl.poster = ""
 				videoEl.src = URL.createObjectURL(file)
 				videoEl.dataset.editorLoading = true
 				uploadFile(file)
diff --git a/app/assets/javascripts/02-editor.js b/app/assets/javascripts/02-editor.js
index e01132ef..c814896d 100644
--- a/app/assets/javascripts/02-editor.js
+++ b/app/assets/javascripts/02-editor.js
@@ -462,6 +462,11 @@ function setupEditor (editorEl) {
 	document.addEventListener(editorBtn("video"), () => setAuxiliaryToolbar(editorEl, "video"))
 	document.addEventListener(editorBtn("pdf"), () => setAuxiliaryToolbar(editorEl, "pdf"))
 
+	for (const video of document.querySelectorAll('.editor .editor-content video')) {
+		video.addEventListener('click', event => event.target.controls = true)
+		video.addEventListener('focusout', event => event.target.controls = false)
+	}
+
 	cleanContent(contentEl)
 	htmlEl.value = contentEl.innerHTML
 	fixContent(contentEl)