From 85bc5c17403234d3c93a3226214c7ec61a70d104 Mon Sep 17 00:00:00 2001 From: Josep Boix Requesens Date: Fri, 16 Feb 2024 11:18:37 +0100 Subject: [PATCH] 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. --- .../examples/multi-player-example.txt | 18 ++++++ src/layout/content/showcase/showcase-page.js | 32 +++++++++- static/showcases/multi-player.html | 60 +++++++++++++++++++ static/showcases/start-time.html | 38 +++--------- static/showcases/static-showcase.scss | 47 +++++++++++++++ 5 files changed, 161 insertions(+), 34 deletions(-) create mode 100644 src/layout/content/showcase/examples/multi-player-example.txt create mode 100644 static/showcases/multi-player.html create mode 100644 static/showcases/static-showcase.scss diff --git a/src/layout/content/showcase/examples/multi-player-example.txt b/src/layout/content/showcase/examples/multi-player-example.txt new file mode 100644 index 0000000..eae19a0 --- /dev/null +++ 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 index 7a3abfd..cd3e5e7 100644 --- 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` - + ${this.#renderStartTime()} + ${this.#renderMultiplePlayers()} + `; + } + + #renderStartTime() { + return html`
@@ -23,8 +30,7 @@ export class ShowCasePage extends LitElement { watching a video from a predefined timestamp. To achieve this functionality, follow the code snippet below:

- ${startTimeExampleTxt} - + ${startTimeExampleTxt} Open this showcase @@ -32,6 +38,26 @@ export class ShowCasePage extends LitElement {
`; } + + #renderMultiplePlayers() { + return html` +
+ +

Multiple Players

+

+ 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. +

+ ${multiPlayerExample} + + + Open this showcase + +
+ `; + } } customElements.define('showcase-page', ShowCasePage); diff --git a/static/showcases/multi-player.html b/static/showcases/multi-player.html new file mode 100644 index 0000000..39c7464 --- /dev/null +++ b/static/showcases/multi-player.html @@ -0,0 +1,60 @@ + + + + + + + Pillarbox Demo - Multi Player Showcase + + + + + +
+

Multiple players

+ +
+ +
+ + + +
+ +
+ + +
+ + + + + + diff --git a/static/showcases/start-time.html b/static/showcases/start-time.html index a1093bf..3b1f0bb 100644 --- a/static/showcases/start-time.html +++ b/static/showcases/start-time.html @@ -6,35 +6,7 @@ Pillarbox Demo - Start Time Showcase - - - - + @@ -44,7 +16,7 @@

Start the player at a given position

- + - diff --git a/static/showcases/static-showcase.scss b/static/showcases/static-showcase.scss new file mode 100644 index 0000000..b2821d3 --- /dev/null +++ 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); +}