From 75bd96ff94397194d083a5ca9ea854e6a1805e2d Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Tue, 6 Feb 2024 13:34:23 +0100
Subject: [PATCH] poster on load, hide on play

---
 app/static/js/VideoElement.js |  3 ---
 app/static/js/VideoPlayer.js  | 12 ++++++++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/static/js/VideoElement.js b/app/static/js/VideoElement.js
index ae2b0e8..8238d95 100644
--- a/app/static/js/VideoElement.js
+++ b/app/static/js/VideoElement.js
@@ -301,9 +301,6 @@ window.VideoElement = function(options) {
         } else {
             video = document.createElement('video');
         }
-        if (self.options.poster) {
-            video.poster = self.options.poster
-        }
         video.playsinline = true
         video.setAttribute('playsinline', 'playsinline')
         video.setAttribute('webkit-playsinline', 'webkit-playsinline')
diff --git a/app/static/js/VideoPlayer.js b/app/static/js/VideoPlayer.js
index 93e4a2f..3004dde 100644
--- a/app/static/js/VideoPlayer.js
+++ b/app/static/js/VideoPlayer.js
@@ -18,6 +18,9 @@ window.VideoPlayer = function(options) {
 
     self.controls = document.createElement('div')
     self.controls.classList.add('mx-controls')
+    if (options.poster) {
+        self.controls.classList.add('poster')
+    }
     //self.controls.style.display = "none"
     if (self.options.controls) {
         var ratio = `aspect-ratio: ${self.options.aspectratio};`
@@ -45,6 +48,12 @@ window.VideoPlayer = function(options) {
                     margin: auto;
                 }
 
+                .mx-controls.poster {
+                    background-image: url(${self.options.poster});
+                    background-repeat: no-repeat;
+                    background-size: contain;
+                }
+
                 .mx-controls .toggle {
                     display: flex;
                     flex: 1;
@@ -160,6 +169,7 @@ window.VideoPlayer = function(options) {
             event.preventDefault()
             event.stopPropagation()
             if (that.paused) {
+                self.controls.classList.remove('poster')
                 that.play()
             } else {
                 that.pause()
@@ -193,6 +203,7 @@ window.VideoPlayer = function(options) {
                     })
                 }
                 if (that.paused && !failed) {
+                    self.controls.classList.remove('poster')
                     that.play()
                 }
             } else {
@@ -314,6 +325,7 @@ window.VideoPlayer = function(options) {
             toggle.querySelector('div').innerHTML = icon.pause
             self.controls.style.opacity = '0'
             unblock.remove()
+            self.controls.classList.remove('poster')
             that.play()
         }
     })