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: videojs/video.js#8679

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
  });

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;
  }
 });