feat: add playback rate example to the demo

This example shows how to configure the player's playback rate. - add playback rate to showcase page - add html page and css containing playback rate - fix a typo in countdown.html page
SRGSSR · Jan 24, 2025 · 0e79cfc · 0e79cfc
1 parent 304fc62
commit 0e79cfc
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 1 deletion.
diff --git a/src/layout/content/showcase/showcase-page.js b/src/layout/content/showcase/showcase-page.js
@@ -12,6 +12,7 @@ import rawSkipCreditsExample from '../../../../static/showcases/skip-credits.htm
 import rawPlaylistExample from '../../../../static/showcases/playlist.html?raw';
 import rawqualityMenuExample from '../../../../static/showcases/quality-menu.html?raw';
 import rawCountdown from '../../../../static/showcases/countdown.html?raw';
+import rawPlaybackRate from '../../../../static/showcases/playback-rate.html?raw';
 import { getTextFromHTML } from './example-parser.js';
 
 const startTimeExampleTxt = getTextFromHTML(rawStartTimeExample);
@@ -24,6 +25,7 @@ const skipCreditsExampleTxt = getTextFromHTML(rawSkipCreditsExample);
 const playlistExampleTxt = getTextFromHTML(rawPlaylistExample);
 const qualityMenuExampleTxt = getTextFromHTML(rawqualityMenuExample);
 const countdownExampleTxt = getTextFromHTML(rawCountdown);
+const playbackRateExampleTxt = getTextFromHTML(rawPlaybackRate);
 
 export class ShowCasePage extends LitElement {
   static styles = [theme, animations, unsafeCSS(showcasePageCss)];
@@ -38,6 +40,7 @@ export class ShowCasePage extends LitElement {
       ${this.#renderPlaylist()}
       ${this.#renderQualityMenu()}
       ${this.#renderCountdown()}
+      ${this.#renderPlaybackRate()}
     `;
   }
 
@@ -202,6 +205,24 @@ export class ShowCasePage extends LitElement {
       </div>
     `;
   }
+
+  #renderPlaybackRate() {
+    return html`
+      <div class="fade-in"
+           @animationend="${e => e.target.classList.remove('fade-in')}">
+        <showcase-component href="playback-rate.html">
+          <h2 slot="title">Playback Rate</h2>
+          <p slot="description">
+            In this showcase, we'll demonstrate how to display the playback rate compoment.
+          </p>
+          <code-block slot="code" language="javascript">${playbackRateExampleTxt}</code-block>
+        </showcase-component>
+        <a part="showcase-link" href="./static/showcases/playback-rate.html" target="_blank">
+          Open this showcase
+        </a>
+      </div>
+    `;
+  }
 }
 
 customElements.define('showcase-page', ShowCasePage);

diff --git a/static/showcases/countdown.html b/static/showcases/countdown.html
@@ -162,7 +162,7 @@ <h2>Display Countdown</h2>
       // Register Countdown component
       pillarbox.registerComponent('Countdown', Countdown);
 
-      // Create a pillarbox player instance with the currentChapter plugin
+      // Create a pillarbox player instance with the countdown component
       const player = pillarbox(
         'video-element-id',
         {

diff --git a/static/showcases/playback-rate.html b/static/showcases/playback-rate.html
@@ -0,0 +1,56 @@
+<!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 - Playback Rate</title>
+    <link rel="icon" type="image/x-icon" href="../../img/favicon.ico">
+    <link rel="stylesheet" href="./playback-rate.scss" />
+  </head>
+
+  <body>
+    <core-demo-header></core-demo-header>
+    <div class="showcase-content">
+      <h2>Playback Rate</h2>
+      <div class="video-container">
+        <video-js id="video-element-id" class="pillarbox-js" controls></video-js>
+      </div>
+
+      <button class="showcase-btn" id="close-btn">Close this window</button>
+    </div>
+
+    <script type="module" data-implementation>
+      // Import the pillarbox library
+      import pillarbox from '@srgssr/pillarbox-web';
+
+      const player = pillarbox(
+        'video-element-id',
+        {
+          fill: true,
+          muted: true,
+          // Add the playback rate component to the player
+          playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
+        }
+      );
+
+      player.src({ src: 'urn:rts:video:9883196', type: 'srgssr/urn' });
+
+      window.player = player;
+    </script>
+
+    <script type="module">
+      import pillarbox from '@srgssr/pillarbox-web';
+      import '../../src/layout/header/core-demo-header-component.js';
+
+      document.querySelector('#close-btn').addEventListener('click', () => {
+        window.close();
+      });
+
+      window.pillarbox = pillarbox;
+    </script>
+
+  </body>
+
+</html>
diff --git a/static/showcases/playback-rate.scss b/static/showcases/playback-rate.scss
@@ -0,0 +1 @@
+@import './static-showcase';