From cd683446c9cbdc76d2091884bffcc91005691f5e Mon Sep 17 00:00:00 2001
From: Josep Boix Requesens <jspboix@gmail.com>
Date: Wed, 10 Apr 2024 14:27:27 +0200
Subject: [PATCH] fix: add workaround for issue with restoreel option in
 video.js

Added a div container to ensure that the parent of the element passed to video.js is not
the shadow root directly. This workaround resolves the issue until a permanent fix is
implemented in video-js, see: https://github.com/videojs/video.js/pull/8679
---
 src/components/preview-box.js | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/preview-box.js b/src/components/preview-box.js
index 805c6d7..84f0a0c 100644
--- a/src/components/preview-box.js
+++ b/src/components/preview-box.js
@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import pillarbox from '@srgssr/pillarbox-web';
 
 /**
@@ -22,6 +22,13 @@ class PreviewBox extends LitElement {
     type: { type: String }
   };
 
+  static styles = css`
+    .player-container {
+      width: 100%;
+      height: 100%;
+    }
+  `;
+
   constructor() {
     super();
     this.src = 'urn:rts:video:14318206';
@@ -29,12 +36,15 @@ class PreviewBox extends LitElement {
   }
 
   render() {
+    // TODO Remove the player container once this is resolved: https://github.com/videojs/video.js/pull/8679
     return html`
       <style>${this.appliedCss}</style>
-      <video id="preview-player"
-             class="pillarbox-js"
-             controls crossOrigin="anonymous">
-      </video>
+      <div class="player-container">
+        <video id="preview-player"
+               class="pillarbox-js"
+               controls crossOrigin="anonymous">
+        </video>
+      </div>
     `;
   }