feat(showcase): add playlist example

Introduces a playlist example using the `@srgssr/pillarbox-playlist` plugin. In the example player is configured with the playlist plugins, and showcases how to fetch the media data fetches media data for a set of predefined video sources, loading them into the player's playlist with metadata.
SRGSSR · May 30, 2024 · 8d9f5f7 · 8d9f5f7
1 parent c690979
commit 8d9f5f7
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "vite": "^5.2.11"
   },
   "dependencies": {
+    "@srgssr/pillarbox-playlist": "^1.0.0",
     "@srgssr/pillarbox-web": "^1.12.1",
     "highlight.js": "^11.9.0",
     "lit": "^3.1.3",

diff --git a/src/layout/content/showcase/showcase-page.js b/src/layout/content/showcase/showcase-page.js
@@ -9,6 +9,7 @@ import rawMultiPlayerExample from '../../../../static/showcases/multi-player.htm
 import rawDetectBlockedSegmentsExample from '../../../../static/showcases/blocked-segment.html?raw';
 import rawDisplayCurrentChapterExample from '../../../../static/showcases/chapters.html?raw';
 import rawSkipCreditsExample from '../../../../static/showcases/skip-credits.html?raw';
+import rawPlaylistExample from '../../../../static/showcases/playlist.html?raw';
 import { getTextFromHTML } from './example-parser.js';
 
 const startTimeExampleTxt = getTextFromHTML(rawStartTimeExample);
@@ -18,6 +19,7 @@ const detectBlockedSegmentsExampleTxt =
 const displayCurrentChapterExampleTxt =
   getTextFromHTML(rawDisplayCurrentChapterExample);
 const skipCreditsExampleTxt = getTextFromHTML(rawSkipCreditsExample);
+const playlistExampleTxt = getTextFromHTML(rawPlaylistExample);
 
 export class ShowCasePage extends LitElement {
   static styles = [theme, animations, unsafeCSS(showcasePageCss)];
@@ -29,6 +31,7 @@ export class ShowCasePage extends LitElement {
       ${this.#renderDetectBlockedSegments()}
       ${this.#renderDisplayCurrentChapter()}
       ${this.#renderSkipCredits()}
+      ${this.#renderPlaylist()}
     `;
   }
 
@@ -134,6 +137,26 @@ export class ShowCasePage extends LitElement {
       </div>
     `;
   }
+
+  #renderPlaylist() {
+    return html`
+      <div class="fade-in"
+           @animationend="${e => e.target.classList.remove('fade-in')}">
+        <showcase-component href="playlist.html">
+          <h2 slot="title">Playlist</h2>
+          <p slot="description">
+            This example show how to fetch media data for a set of video sources 
+            and load them into the <a href="https://github.com/SRGSSR/pillarbox-web-suite/tree/main/packages/pillarbox-playlist#readme" target="_blank">Pillarbox Playlist plugin</a>
+            with metadata such as title and duration.
+          </p>
+          <code-block slot="code" language="javascript">${playlistExampleTxt}</code-block>
+        </showcase-component>
+        <a part="showcase-link" href="./static/showcases/playlist.html" target="_blank">
+          Open this showcase
+        </a>
+      </div>
+    `;
+  }
 }
 
 customElements.define('showcase-page', ShowCasePage);

diff --git a/src/layout/content/showcase/showcase-page.scss b/src/layout/content/showcase/showcase-page.scss
@@ -26,3 +26,11 @@ a {
 div {
   margin-top: var(--size-7);
 }
+
+div:last-child {
+  margin-bottom: var(--size-7);
+}
+
+.showcase-link {
+  font-size: inherit;
+}
diff --git a/static/showcases/playlist-showcase.scss b/static/showcases/playlist-showcase.scss
@@ -0,0 +1 @@
+@import '@srgssr/pillarbox-playlist/dist/pillarbox-playlist.min.css';
diff --git a/static/showcases/playlist.html b/static/showcases/playlist.html
@@ -0,0 +1,84 @@
+<!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 - Skip Credits</title>
+  <link rel="icon" type="image/x-icon" href="../../img/favicon.ico">
+  <link rel="stylesheet" href="./static-showcase.scss"/>
+  <link rel="stylesheet" href="./playlist-showcase.scss"/>
+</head>
+
+<body>
+<core-demo-header></core-demo-header>
+<div class="showcase-content">
+  <h2>Playlist</h2>
+  <div class="video-container">
+    <video-js id="video-element-id" class="pillarbox-js" controls crossorigin="anonymous"></video-js>
+  </div>
+
+  <button class="showcase-btn" id="close-btn">Close this window</button>
+</div>
+
+<script type="module" data-implementation>
+  // Import the pillarbox library and the SrgSsr utility class
+  import { default as pillarbox, SrgSsr } from '@srgssr/pillarbox-web';
+  // Import the playlist plugin for pillarbox
+  import '@srgssr/pillarbox-playlist';
+  // Import the playlist UI plugin for pillarbox
+  import '@srgssr/pillarbox-playlist/ui';
+
+  // Create a pillarbox player instance with the playlist plugin
+  const player = pillarbox('video-element-id', {
+    // Activate autoplay to automatically start the next element
+    autoplay: true,
+    plugins: {
+      // Configure the playlist plugin
+      pillarboxPlaylist: { autoadvance: true, repeat: true },
+      // Configure the playlist UI plugin and specify where to insert it in the UI
+      pillarboxPlaylistUI: { insertChildBefore: 'fullscreenToggle' }
+    }
+  });
+
+  // Define an array of video sources
+  const sources = [
+    'urn:rts:video:14827742',
+    'urn:srf:video:05457f66-fd67-4131-8e0a-6d85743efc39',
+    'urn:rtr:video:33136b80-bec6-40cd-a771-b8954c805098',
+    'urn:rts:video:9883196',
+  ];
+
+  Promise.all(sources.map(async urn => {
+    // Fetch the media composition data for each URN
+    const mediaComposition = await SrgSsr.getMediaComposition(urn, SrgSsr.dataProvider(player));
+    // Get the main chapter of the media composition
+    const mainChapter = mediaComposition.getMainChapter();
+
+    return {
+      // Define the sources of this playlist item URL and type
+      sources: [{ src: urn, type: 'srgssr/urn' }],
+      // Define the title and duration in seconds
+      data: { title: mainChapter.title, duration: mainChapter.duration / 1000 },
+      // Define the poster image
+      poster: mainChapter.imageUrl
+    };
+  })).then(playlist => {
+    // Load the playlist
+    player.pillarboxPlaylist().load(playlist);
+  });
+</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>