feat(showcase): add multi-player showcase

Resolves #3 by introducing a new showcase that displays multiple players on the same page. A button has been added to allow the user to toggle the mute state for both players. Note: only one player can have active tracking at a time, an issue has been created to provide documentation for this limitation, see: SRGSSR/pillarbox-web#208.
SRGSSR · Feb 16, 2024 · 85bc5c1 · 85bc5c1
1 parent 4049414
commit 85bc5c1
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 34 deletions.
diff --git a/src/layout/content/showcase/examples/multi-player-example.txt b/src/layout/content/showcase/examples/multi-player-example.txt
@@ -0,0 +1,18 @@
+import pillarbox from '@srgssr/pillarbox-web';
+
+// Initialize the Main Player
+const mainPlayer = pillarbox('main-player', { fill: true, debug: true });
+mainPlayer.src({ src: 'urn:rts:video:6820736', type: 'srgssr/urn' });
+
+// Initialize the Second Player
+const secondPlayer = pillarbox('second-player', { fill: true, muted: true, debug: true });
+// Tracking is disabled for this source, only one source can be tracked at a time.
+secondPlayer.src({ src: 'urn:rts:video:6735513', type: 'srgssr/urn', disableTrackers: true });
+
+// Add an event listener to a button with the id 'toggle-player'
+document.querySelector('#toggle-player').addEventListener('click', () => {
+  // Toggle the mute state for both mainPlayer and secondPlayer
+  pillarbox.getAllPlayers().forEach(player => {
+    player.muted(!player.muted());
+  });
+});
diff --git a/src/layout/content/showcase/showcase-page.js b/src/layout/content/showcase/showcase-page.js
@@ -5,13 +5,20 @@ import './showcase-component.js';
 import '../../../components/code-block/code-block';
 import showcasePageCss from './showcase-page.scss?inline';
 import startTimeExampleTxt from './examples/starttime-example.txt?raw';
+import multiPlayerExample from './examples/multi-player-example.txt?raw';
 
 export class ShowCasePage extends LitElement {
   static styles = [theme, animations, unsafeCSS(showcasePageCss)];
 
   render() {
     return html`
-      <!-- List of showcases -->
+        ${this.#renderStartTime()}
+        ${this.#renderMultiplePlayers()}
+    `;
+  }
+
+  #renderStartTime() {
+    return html`
       <div class="fade-in"
            @animationend="${e => e.target.classList.remove('fade-in')}">
         <showcase-component>
@@ -23,15 +30,34 @@ export class ShowCasePage extends LitElement {
             watching a video from a predefined timestamp. To achieve this
             functionality, follow the code snippet below:
           </p>
-          <code-block slot="code" language="javascript">${startTimeExampleTxt}
-          </code-block>
+          <code-block slot="code" language="javascript">${startTimeExampleTxt}</code-block>
         </showcase-component>
         <a href="./static/showcases/start-time.html" target="_blank">
           Open this showcase
         </a>
       </div>
     `;
   }
+
+  #renderMultiplePlayers() {
+    return html`
+      <div class="fade-in" @animationend="${e => e.target.classList.remove('fade-in')}">
+      <showcase-component>
+        <h2 slot="title">Multiple Players</h2>
+        <p slot="description">
+          This example demonstrates how to incorporate multiple video players
+          on a webpage.In this showcase, two players are initialized, each
+          with its own configuration, a button allows to toggle the mute state
+          for both players.
+        </p>
+        <code-block slot="code" language="javascript">${multiPlayerExample}</code-block>
+      </showcase-component>
+      <a href="./static/showcases/multi-player.html" target="_blank">
+        Open this showcase
+      </a>
+    </div>
+    `;
+  }
 }
 
 customElements.define('showcase-page', ShowCasePage);

diff --git a/static/showcases/multi-player.html b/static/showcases/multi-player.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Pillarbox Demo - Multi Player Showcase</title>
+  <link rel="icon" type="image/x-icon" href="../../img/favicon.ico">
+  <link rel="stylesheet" href="./static-showcase.scss"/>
+</head>
+
+<body>
+<div class="showcase-content">
+  <h2>Multiple players</h2>
+
+  <div class="video-container">
+    <video-js id="main-player" class="pillarbox-js" controls crossorigin="anonymous"></video-js>
+  </div>
+
+  <button class="showcase-btn" id="toggle-player">Toggle main player</button>
+
+  <div class="video-container">
+    <video-js id="second-player" class="pillarbox-js" controls crossorigin="anonymous"></video-js>
+  </div>
+
+  <button class="showcase-btn" id="close-btn">Close this window</button>
+</div>
+<script type="module">
+  import pillarbox from '@srgssr/pillarbox-web';
+
+  // Initialize the Main Player
+  const mainPlayer = pillarbox('main-player', { fill: true, debug: true });
+  mainPlayer.src({ src: 'urn:rts:video:6820736', type: 'srgssr/urn' });
+
+  // Initialize the Second Player
+  const secondPlayer = pillarbox('second-player', { fill: true, muted: true, debug: true });
+  // Tracking is disabled for this source, only one source can be tracked at a time.
+  secondPlayer.src({ src: 'urn:rts:video:6735513', type: 'srgssr/urn', disableTrackers: true });
+
+  // Add an event listener to a button with the id 'toggle-player'
+  document.querySelector('#toggle-player').addEventListener('click', () => {
+    // Toggle the mute state for both mainPlayer and secondPlayer
+    pillarbox.getAllPlayers().forEach(player => {
+      player.muted(!player.muted());
+    });
+  });
+</script>
+
+<script type="module">
+  import pillarbox from '@srgssr/pillarbox-web';
+
+  document.querySelector('#close-btn').addEventListener('click', () => {
+    window.close();
+  });
+
+  window.pillarbox = pillarbox;
+</script>
+
+</body>
+</html>
diff --git a/static/showcases/start-time.html b/static/showcases/start-time.html
@@ -6,35 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Pillarbox Demo - Start Time Showcase</title>
   <link rel="icon" type="image/x-icon" href="../../img/favicon.ico">
-  <link rel="stylesheet" href="../../scss/index.scss"/>
-  <link rel="stylesheet" href="../../src/theme/theme.scss"/>
-  <style>
-    .showcase-content {
-      border: 1px solid var(--color-7);
-      border-radius: var(--radius-3);
-      padding: 0;
-      margin-top: var(--size-8);
-    }
-
-    .video-container {
-      width: 100%;
-      height: auto;
-      aspect-ratio: var(--ratio-widescreen);
-      padding: 0;
-    }
-
-    h2 {
-      padding-left: var(--size-2);
-    }
-
-    #close-btn {
-      width: 100%;
-      padding: var(--size-4) var(--size-3);
-      border: 0;
-      border-radius: 0 0 var(--radius-3) var(--radius-3);
-    }
-  </style>
-  <!-- End Single Page Apps for GitHub Pages -->
+  <link rel="stylesheet" href="./static-showcase.scss"/>
 </head>
 
 <body>
@@ -44,7 +16,7 @@ <h2>Start the player at a given position</h2>
     <video-js id="video-element-id" class="pillarbox-js" controls crossorigin="anonymous"></video-js>
   </div>
 
-  <button id="close-btn">Close this window</button>
+  <button class="showcase-btn" id="close-btn">Close this window</button>
 </div>
 
 <script type="module">
@@ -63,10 +35,14 @@ <h2>Start the player at a given position</h2>
   });
 </script>
 
-<script>
+<script type="module">
+  import pillarbox from '@srgssr/pillarbox-web';
+
   document.querySelector('#close-btn').addEventListener('click', () => {
     window.close();
   });
+
+  window.pillarbox = pillarbox;
 </script>
 
 </body>

diff --git a/static/showcases/static-showcase.scss b/static/showcases/static-showcase.scss
@@ -0,0 +1,47 @@
+@import '../../scss/index';
+
+body {
+  max-width: var(--size-sm);
+}
+
+.showcase-content {
+  margin-top: var(--size-8);
+  padding: 0;
+  border: 1px solid var(--color-7);
+  border-radius: var(--radius-3);
+}
+
+.video-container {
+  width: 100%;
+  height: auto;
+  aspect-ratio: var(--ratio-widescreen);
+  padding: 0;
+}
+
+h2 {
+  padding-left: var(--size-2);
+  font-size: var(--size-4);
+}
+
+.showcase-btn {
+  width: 100%;
+  padding: var(--size-4) var(--size-3);
+  color: var(--color-0);
+  font-weight: var(--font-weight-6);
+  font-size: var(--size-3);
+  text-align: center;
+  text-decoration: none;
+  background-color: var(--color-9);
+  border: 0;
+  cursor: pointer;
+  transition: background-color 0.4s, border-color 0.4s;
+}
+
+.showcase-btn:hover {
+  background-color: var(--color-8);
+  border-color: var(--color-9);
+}
+
+.showcase-btn:last-child {
+  border-radius: 0 0 var(--radius-3) var(--radius-3);
+}