From fc8a09d9f3e3700d65653d4bb548ff871ea90283 Mon Sep 17 00:00:00 2001 From: amtins Date: Wed, 4 Dec 2024 18:53:55 +0100 Subject: [PATCH] feat: add a countdown timer example to the demo Resolves #47 by providing a code snippet to inspire a developer to create their own countdown component. - add countdown to showcase page - add html page and css containing countdown timer --- src/layout/content/showcase/showcase-page.js | 23 +- static/showcases/countdown.html | 226 +++++++++++++++++++ static/showcases/countdown.scss | 11 + 3 files changed, 259 insertions(+), 1 deletion(-) create mode 100644 static/showcases/countdown.html create mode 100644 static/showcases/countdown.scss diff --git a/src/layout/content/showcase/showcase-page.js b/src/layout/content/showcase/showcase-page.js index c3c8cd1..bee97ea 100644 --- a/src/layout/content/showcase/showcase-page.js +++ b/src/layout/content/showcase/showcase-page.js @@ -11,6 +11,7 @@ import rawDisplayCurrentChapterExample from '../../../../static/showcases/chapte import rawSkipCreditsExample from '../../../../static/showcases/skip-credits.html?raw'; 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 { getTextFromHTML } from './example-parser.js'; const startTimeExampleTxt = getTextFromHTML(rawStartTimeExample); @@ -22,6 +23,7 @@ const displayCurrentChapterExampleTxt = const skipCreditsExampleTxt = getTextFromHTML(rawSkipCreditsExample); const playlistExampleTxt = getTextFromHTML(rawPlaylistExample); const qualityMenuExampleTxt = getTextFromHTML(rawqualityMenuExample); +const countdownExampleTxt = getTextFromHTML(rawCountdown); export class ShowCasePage extends LitElement { static styles = [theme, animations, unsafeCSS(showcasePageCss)]; @@ -35,6 +37,7 @@ export class ShowCasePage extends LitElement { ${this.#renderSkipCredits()} ${this.#renderPlaylist()} ${this.#renderQualityMenu()} + ${this.#renderCountdown()} `; } @@ -149,7 +152,7 @@ export class ShowCasePage extends LitElement {

Playlist

- This example shows how to fetch media data for a set of video sources + This example shows how to fetch media data for a set of video sources and load them into the Pillarbox Playlist plugin with metadata such as title and duration.

@@ -181,6 +184,24 @@ export class ShowCasePage extends LitElement { `; } + + #renderCountdown() { + return html` +
+ +

Countdown Timer

+

+ In this showcase, we'll demonstrate how to display a countdown timer. +

+ ${countdownExampleTxt} + + + Open this showcase + +
+ `; + } } customElements.define('showcase-page', ShowCasePage); diff --git a/static/showcases/countdown.html b/static/showcases/countdown.html new file mode 100644 index 0000000..120e26e --- /dev/null +++ b/static/showcases/countdown.html @@ -0,0 +1,226 @@ + + + + + + + + Pillarbox Demo - Display Countdown + + + + + + +
+

Display Countdown

+
+ +
+ + +
+ + + + + + + + diff --git a/static/showcases/countdown.scss b/static/showcases/countdown.scss new file mode 100644 index 0000000..f19b76a --- /dev/null +++ b/static/showcases/countdown.scss @@ -0,0 +1,11 @@ +@import './static-showcase'; + + +.pillarbox-countdown .vjs-modal-dialog-content { + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: 2em; + text-align: center; +}