From 36d6f2d0ce0a3827aee0a00a3c2ec13dca7616ef 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 | 28 +++++++++++++++++++---------
 src/index.js                  |  2 +-
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/preview-box.js b/src/components/preview-box.js
index 805c6d7..cf4c042 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';
 
 /**
@@ -18,30 +18,40 @@ import pillarbox from '@srgssr/pillarbox-web';
 class PreviewBox extends LitElement {
   static properties = {
     appliedCss: { type: String },
-    src: { type: String },
+    mediaSrc: { type: String },
     type: { type: String }
   };
 
+  static styles = css`
+    .player-container {
+      width: 100%;
+      height: 100%;
+    }
+  `;
+
   constructor() {
     super();
-    this.src = 'urn:rts:video:14318206';
+    this.mediaSrc = 'urn:rts:video:14318206';
     this.type = 'srgssr/urn';
   }
 
   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>
     `;
   }
 
   updated(_changedProperties) {
     super.firstUpdated(_changedProperties);
 
-    if (['src', 'type'].some(property => _changedProperties.has(property))) {
+    if (['mediaSrc', 'type'].some(property => _changedProperties.has(property))) {
       this.player?.dispose();
 
       const el = this.shadowRoot.getElementById('preview-player');
@@ -52,7 +62,7 @@ class PreviewBox extends LitElement {
       });
 
       this.player.src({
-        src: this.src,
+        src: this.mediaSrc,
         type: this.type,
         disableTrackers: true
       });
diff --git a/src/index.js b/src/index.js
index d3db426..288b304 100644
--- a/src/index.js
+++ b/src/index.js
@@ -37,6 +37,6 @@ sourceInput.addEventListener('keyup', (event) => {
   const src = event.target.value;
 
   if (event.key === 'Enter' && src) {
-    preview.src = src;
+    preview.mediaSrc = src;
   }
 });