Skip to content

Commit

Permalink
fix: add workaround for issue with restoreel option in video.js
Browse files Browse the repository at this point in the history
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
  • Loading branch information
jboix committed Apr 11, 2024
1 parent f667be6 commit 36d6f2d
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 10 deletions.
28 changes: 19 additions & 9 deletions src/components/preview-box.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { html, LitElement } from 'lit';
import { css, html, LitElement } from 'lit';
import pillarbox from '@srgssr/pillarbox-web';

/**
Expand All @@ -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');
Expand All @@ -52,7 +62,7 @@ class PreviewBox extends LitElement {
});

this.player.src({
src: this.src,
src: this.mediaSrc,
type: this.type,
disableTrackers: true
});
Expand Down
2 changes: 1 addition & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,6 @@ sourceInput.addEventListener('keyup', (event) => {
const src = event.target.value;

if (event.key === 'Enter' && src) {
preview.src = src;
preview.mediaSrc = src;
}
});

0 comments on commit 36d6f2d

Please sign in to comment.