diff --git a/app/assets/javascripts/01-types.js b/app/assets/javascripts/01-types.js index 260f807..28a8afd 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 e01132e..c814896 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)