From 0e79cfc34704859c199b776c7200b1fcfc42a0ca Mon Sep 17 00:00:00 2001 From: amtins Date: Sat, 11 Jan 2025 21:20:42 +0100 Subject: [PATCH] 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 --- src/layout/content/showcase/showcase-page.js | 21 ++++++++ static/showcases/countdown.html | 2 +- static/showcases/playback-rate.html | 56 ++++++++++++++++++++ static/showcases/playback-rate.scss | 1 + 4 files changed, 79 insertions(+), 1 deletion(-) create mode 100644 static/showcases/playback-rate.html create mode 100644 static/showcases/playback-rate.scss diff --git a/src/layout/content/showcase/showcase-page.js b/src/layout/content/showcase/showcase-page.js index bee97ea..1500409 100644 --- 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 { `; } + + #renderPlaybackRate() { + return html` +
+ +

Playback Rate

+

+ In this showcase, we'll demonstrate how to display the playback rate compoment. +

+ ${playbackRateExampleTxt} + + + Open this showcase + +
+ `; + } } customElements.define('showcase-page', ShowCasePage); diff --git a/static/showcases/countdown.html b/static/showcases/countdown.html index 0aadd2b..2de259a 100644 --- a/static/showcases/countdown.html +++ b/static/showcases/countdown.html @@ -162,7 +162,7 @@

Display Countdown

// 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 new file mode 100644 index 0000000..8b60431 --- /dev/null +++ b/static/showcases/playback-rate.html @@ -0,0 +1,56 @@ + + + + + + + + Pillarbox Demo - Playback Rate + + + + + + +
+

Playback Rate

+
+ +
+ + +
+ + + + + + + + diff --git a/static/showcases/playback-rate.scss b/static/showcases/playback-rate.scss new file mode 100644 index 0000000..3a40e84 --- /dev/null +++ b/static/showcases/playback-rate.scss @@ -0,0 +1 @@ +@import './static-showcase';