From 7bf117191ba2b67ecb2b227deb09ac47efbf0052 Mon Sep 17 00:00:00 2001
From: ferferga <ferferga.fer@gmail.com>
Date: Thu, 7 May 2020 23:24:03 +0200
Subject: [PATCH 1/3] Use player backdrops everywhere

---
 src/components/htmlvideoplayer/plugin.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js
index e5c11c9879..01296878a5 100644
--- a/src/components/htmlvideoplayer/plugin.js
+++ b/src/components/htmlvideoplayer/plugin.js
@@ -1285,12 +1285,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
         function createMediaElement(options) {
 
-            if (browser.tv || browser.iOS || browser.mobile) {
-                // too slow
-                // also on iOS, the backdrop image doesn't look right
-                // on android mobile, it works, but can be slow to have the video surface fully cover the backdrop
-                options.backdropUrl = null;
-            }
             return new Promise(function (resolve, reject) {
 
                 var dlg = document.querySelector('.videoPlayerContainer');

From 7a63c0725079a98f3e71a21de0f8cab5d5fe167f Mon Sep 17 00:00:00 2001
From: ferferga <ferferga.fer@gmail.com>
Date: Fri, 8 May 2020 00:07:59 +0200
Subject: [PATCH 2/3] Set backdrops using 'poster' attribute

---
 src/components/htmlvideoplayer/plugin.js | 15 +++------------
 src/components/htmlvideoplayer/style.css | 12 ------------
 2 files changed, 3 insertions(+), 24 deletions(-)

diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js
index 01296878a5..2bdd2892e0 100644
--- a/src/components/htmlvideoplayer/plugin.js
+++ b/src/components/htmlvideoplayer/plugin.js
@@ -836,7 +836,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         function onNavigatedToOsd() {
             var dlg = videoDialog;
             if (dlg) {
-                dlg.classList.remove('videoPlayerContainer-withBackdrop');
                 dlg.classList.remove('videoPlayerContainer-onTop');
 
                 onStartedAndNavigatedToOsd();
@@ -869,7 +868,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
                 } else {
                     appRouter.setTransparency('backdrop');
-                    videoDialog.classList.remove('videoPlayerContainer-withBackdrop');
                     videoDialog.classList.remove('videoPlayerContainer-onTop');
 
                     onStartedAndNavigatedToOsd();
@@ -1299,11 +1297,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
                         dlg.classList.add('videoPlayerContainer');
 
-                        if (options.backdropUrl) {
-                            dlg.classList.add('videoPlayerContainer-withBackdrop');
-                            dlg.style.backgroundImage = "url('" + options.backdropUrl + "')";
-                        }
-
                         if (options.fullscreen) {
                             dlg.classList.add('videoPlayerContainer-onTop');
                         }
@@ -1337,6 +1330,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                         videoElement.addEventListener('play', onPlay);
                         videoElement.addEventListener('click', onClick);
                         videoElement.addEventListener('dblclick', onDblClick);
+                        if (options.backdropUrl) {
+                            videoElement.poster = options.backdropUrl;
+                        }
 
                         document.body.insertBefore(dlg, document.body.firstChild);
                         videoDialog = dlg;
@@ -1360,11 +1356,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                         }
                     });
                 } else {
-                    if (options.backdropUrl) {
-                        dlg.classList.add('videoPlayerContainer-withBackdrop');
-                        dlg.style.backgroundImage = "url('" + options.backdropUrl + "')";
-                    }
-
                     resolve(dlg.querySelector('video'));
                 }
             });
diff --git a/src/components/htmlvideoplayer/style.css b/src/components/htmlvideoplayer/style.css
index 5ecf4af66a..0d96728f28 100644
--- a/src/components/htmlvideoplayer/style.css
+++ b/src/components/htmlvideoplayer/style.css
@@ -6,20 +6,9 @@
     right: 0;
     display: flex;
     align-items: center;
-}
-
-.videoPlayerContainer:not(.videoPlayerContainer-withBackdrop) {
     background: #000 !important;
 }
 
-.videoPlayerContainer-withBackdrop {
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: cover;
-    background-attachment: fixed;
-    background-color: #000;
-}
-
 .videoPlayerContainer-onTop {
     z-index: 1000;
 }
@@ -74,7 +63,6 @@ video::-webkit-media-controls {
         transform: scale3d(0.2, 0.2, 0.2);
         opacity: 0.6;
     }
-
     to {
         transform: none;
         opacity: initial;

From b467fae109dd6d51edf4b4edd95fe2662d17d516 Mon Sep 17 00:00:00 2001
From: ferferga <ferferga.fer@gmail.com>
Date: Wed, 13 May 2020 23:01:46 +0200
Subject: [PATCH 3/3] Fix CSS linting

---
 src/components/htmlvideoplayer/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/htmlvideoplayer/style.css b/src/components/htmlvideoplayer/style.css
index 0d96728f28..b83a7816f5 100644
--- a/src/components/htmlvideoplayer/style.css
+++ b/src/components/htmlvideoplayer/style.css
@@ -63,6 +63,7 @@ video::-webkit-media-controls {
         transform: scale3d(0.2, 0.2, 0.2);
         opacity: 0.6;
     }
+
     to {
         transform: none;
         opacity: initial;