feat: allow media source swapping

index.html

@@ -19,7 +19,7 @@ <h1><img src="/pillarbox-logo.webp" class="logo" alt="Pillarbox logo"/> Pillarbo
 <main>
   <resizable-split-view>
     <section slot="left">
-      <div class="craft-title-container">
+      <div class="section-title-container">
         <h2>Craft your theme</h2>
         <toggle-pane-button title="Select a file to edit" id="navigation-button">
           <tree-view id="navigation"></tree-view>
@@ -31,7 +31,12 @@ <h2>Craft your theme</h2>
       <css-editor id="editor"></css-editor>
     </section>
     <section slot="right">
-      <h2>Live Canvas Preview</h2>
+      <div class="section-title-container">
+        <h2>Live Canvas Preview</h2>
+        <toggle-pane-button title="Change the media" label="Change the media" id="load-media-button">
+          <input id="src-input" type="text" placeholder="Enter a URN..." />
+        </toggle-pane-button>
+      </div>
       <preview-box id="preview"></preview-box>
     </section>
   </resizable-split-view>

scss/index.scss

@@ -7,20 +7,22 @@
 }
 
 :root {
-  color: rgb(255 255 255 / 87%);
+  color: var(--app-color);
   font-weight: 400;
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
-  background-color: #242424;
+  background-color: var(--app-background-color);
   font-synthesis: none;
   text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
   --button-background: #40729d;
   --button-hover-background: #305273;
-  --button-color: #fff;
+  --button-color: var(--app-color);
   --button-border-radius: 0.5em;
+  --app-background-color: #242424;
+  --app-color: rgb(255 255 255 / 87%);
 }
 
 html,
@@ -54,7 +56,7 @@ header p {
   margin-left: 0.5em;
   padding-left: 0.5em;
   text-align: justify;
-  border-left: 3px solid rgb(255 255 255 / 87%);
+  border-left: 3px solid var(--app-color)
 }
 
 main {
@@ -86,7 +88,7 @@ footer {
   }
 }
 
-.craft-title-container {
+.section-title-container {
   display: flex;
   gap: 1em;
   align-items: center;
@@ -118,3 +120,13 @@ footer {
 #download:hover {
   background-color: var(--button-hover-background);
 }
+
+input {
+  margin: 0;
+  padding: 0.5em 0.2em;
+  color: var(--app-color);
+  font-size: var(--size-3);
+  background-color: var(--app-background-color);
+  border: none;
+  outline: none;
+}

src/components/preview-box.js

@@ -1,5 +1,4 @@
-import { html, LitElement } from 'lit';
-import { createRef, ref } from 'lit/directives/ref.js';
+import { css, html, LitElement } from 'lit';
 import pillarbox from '@srgssr/pillarbox-web';
 
 /**
@@ -10,49 +9,64 @@ import pillarbox from '@srgssr/pillarbox-web';
  * @element preview-box
  *
  * @property {String} appliedCss CSS styles that can be applied to the video player.
+ * @property {String} [src='urn:rts:video:14318206'] The media to be loaded by the player,
+ * @property {String} [type='srgssr/urn'] The type of media to be loaded.
  *
  * @example
  * <preview-box></preview-box>
  */
 class PreviewBox extends LitElement {
   static properties = {
-    appliedCss: { type: String }
+    appliedCss: { type: String },
+    mediaSrc: { type: String },
+    type: { type: String }
   };
 
+  static styles = css`
+    .player-container {
+      width: 100%;
+      height: 100%;
+    }
+  `;
+
   constructor() {
     super();
-    this.pillarboxRef = createRef();
+    this.mediaSrc = 'urn:rts:video:14318206';
+    this.type = 'srgssr/urn';
   }
 
-  /**
-   * Renders the video player with applied custom CSS and the pillarbox library functionalities.
-   *
-   * @returns {TemplateResult} The LitElement `html` template result.
-   */
   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="main-player"
-             class="pillarbox-js"
-             controls crossOrigin="anonymous"
-             ${ref(this.pillarboxRef)}>
-      </video>
+      <div class="player-container">
+        <video id="preview-player"
+               class="pillarbox-js"
+               controls crossOrigin="anonymous">
+        </video>
+      </div>
     `;
   }
 
-  /**
-   * Lifecycle callback that is called after the component's first render.
-   * It initializes the pillarbox player with a specific video source.
-   */
-  firstUpdated(_changedProperties) {
+  updated(_changedProperties) {
     super.firstUpdated(_changedProperties);
 
-    // Initializes pillarbox with the video element and sets the video source.
-    this.player = pillarbox(this.pillarboxRef.value, { muted: true });
-    this.player.src({
-      src: 'urn:rts:video:14318206',
-      type: 'srgssr/urn'
-    });
+    if (['mediaSrc', 'type'].some(property => _changedProperties.has(property))) {
+      this.player?.dispose();
+
+      const el = this.shadowRoot.getElementById('preview-player');
+
+      this.player = pillarbox(el, {
+        muted: true,
+        restoreEl: true
+      });
+
+      this.player.src({
+        src: this.mediaSrc,
+        type: this.type,
+        disableTrackers: true
+      });
+    }
   }
 }
 

src/components/toggle-pane-button.scss

@@ -1,9 +1,9 @@
 :host {
   --button-background: #40729d;
   --button-hover-background: #305273;
-  --button-color: #fff;
+  --button-color: rgb(255 255 255 / 87%);
   --button-border-radius: 0.5em;
-  --popup-background: #333;
+  --popup-background: #242424;
   --popup-border: 1px solid #666;
   --popup-border-radius: 0.5em;
   --popup-z-index: 1;

src/components/tree-view.scss

@@ -1,6 +1,6 @@
 :host {
-  --tree-background-color: #333;
-  --tree-item-hover-color: #555;
+  --tree-background-color: #242424;
+  --tree-item-hover-color: #444;
   --tree-item-selected-color: #666;
   --tree-folder-icon: '📁';
   --tree-file-icon: '📄';

src/index.js

@@ -12,6 +12,7 @@ const navigationButton = document.getElementById('navigation-button');
 const editor = document.getElementById('editor');
 const preview = document.getElementById('preview');
 const downloadButton = document.getElementById('download');
+const sourceInput = document.getElementById('src-input');
 
 navigation.items = sassCompiler.workspace;
 navigationButton.label = currentItem.name;
@@ -31,3 +32,11 @@ editor.addEventListener('value-changed', (event) => {
 });
 
 downloadButton.addEventListener('click', () => sassCompiler.download());
+
+sourceInput.addEventListener('keyup', (event) => {
+  const src = event.target.value;
+
+  if (event.key === 'Enter' && src) {
+    preview.mediaSrc = src;
+  }
+});

src/workspace/sass-workspace-compiler.js

@@ -55,12 +55,14 @@ export class SassWorkspaceCompiler {
   /**
    * Compiles the main SCSS file into CSS.
    *
+   * @param {Boolean} [compressed=true]  whether the output css will be compressed or not.
+   *
    * @returns {string} The compiled CSS.
    */
-  compile() {
+  compile(compressed = true) {
     const opts = {
       importer: this.#importer,
-      style: 'compressed'
+      style: compressed ? 'compressed' : 'expanded'
     };
 
     return sass.compileString(this.mainScss.content, opts).css;

src/workspace/workspace.js

@@ -2,6 +2,14 @@ import pillarboxScssWorkspace from '../assets/pillarbox-scss-workspace.json';
 import videoJsStyle from 'video.js/dist/video-js.css?inline';
 import { SassWorkspaceCompiler } from './sass-workspace-compiler.js';
 
+/**
+ * Instance of `SassWorkspaceCompiler` dedicated to compiling the sass styles for pillarbox
+ *
+ * This setup includes the main Sass file (`pillarbox.scss`) that needs to be compiled along with
+ * additional static resources necessary for the compilation.
+ *
+ * @see SassWorkspaceCompiler
+ */
 export default new SassWorkspaceCompiler(
   pillarboxScssWorkspace,
   'pillarbox.scss',

test/components/preview-box.test.js

@@ -30,9 +30,12 @@ describe('PreviewBox Component', () => {
   it('initializes pillarbox with correct parameters', () => {
     const pillarboxMock = vi.mocked(pillarbox);
 
-    expect(pillarboxMock)
-      .toHaveBeenCalledWith(expect.anything(), { muted: true });
+    expect(pillarboxMock).toHaveBeenCalledWith(expect.anything(), {
+      muted: true,
+      restoreEl: true
+    });
     expect(pillarboxMock.mock.instances[0].srcSpy).toHaveBeenCalledWith({
+      disableTrackers: true,
       src: 'urn:rts:video:14318206',
       type: 'srgssr/urn'
     });