From 9bd2baee3b5e7d737eb82456f770bae279bc3f3d Mon Sep 17 00:00:00 2001 From: amtins Date: Thu, 23 Jan 2025 14:04:25 +0100 Subject: [PATCH] feat: add a chapter selection example to the demo Resolves #52 by providing a code snippet to inspire a developer to create their own chapter selection UI. - add chapter selection to showcase page - add html page and css containing chapter selection --- src/layout/content/showcase/showcase-page.js | 21 +++ static/showcases/chapter-selection.html | 129 +++++++++++++++++++ static/showcases/chapter-selection.scss | 53 ++++++++ 3 files changed, 203 insertions(+) create mode 100644 static/showcases/chapter-selection.html create mode 100644 static/showcases/chapter-selection.scss diff --git a/src/layout/content/showcase/showcase-page.js b/src/layout/content/showcase/showcase-page.js index 1500409..a73fb7e 100644 --- a/src/layout/content/showcase/showcase-page.js +++ b/src/layout/content/showcase/showcase-page.js @@ -13,6 +13,7 @@ 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 rawChapterSelection from '../../../../static/showcases/chapter-selection.html?raw'; import { getTextFromHTML } from './example-parser.js'; const startTimeExampleTxt = getTextFromHTML(rawStartTimeExample); @@ -26,6 +27,7 @@ const playlistExampleTxt = getTextFromHTML(rawPlaylistExample); const qualityMenuExampleTxt = getTextFromHTML(rawqualityMenuExample); const countdownExampleTxt = getTextFromHTML(rawCountdown); const playbackRateExampleTxt = getTextFromHTML(rawPlaybackRate); +const chapterSelectionExampleTxt = getTextFromHTML(rawChapterSelection); export class ShowCasePage extends LitElement { static styles = [theme, animations, unsafeCSS(showcasePageCss)]; @@ -41,6 +43,7 @@ export class ShowCasePage extends LitElement { ${this.#renderQualityMenu()} ${this.#renderCountdown()} ${this.#renderPlaybackRate()} + ${this.#renderChapterSelection()} `; } @@ -223,6 +226,24 @@ export class ShowCasePage extends LitElement { `; } + + #renderChapterSelection() { + return html` +
+ +

Chapter Selection

+

+ In this showcase, we'll demonstrate how to display a chapter selector. +

+ ${chapterSelectionExampleTxt} + + + Open this showcase + +
+ `; + } } customElements.define('showcase-page', ShowCasePage); diff --git a/static/showcases/chapter-selection.html b/static/showcases/chapter-selection.html new file mode 100644 index 0000000..9c55dad --- /dev/null +++ b/static/showcases/chapter-selection.html @@ -0,0 +1,129 @@ + + + + + + + Pillarbox Demo - Chapter Selection + + + + + + +
+

Chapter Selection

+
+ +
+ + +
+ + + + + + + diff --git a/static/showcases/chapter-selection.scss b/static/showcases/chapter-selection.scss new file mode 100644 index 0000000..159d3e1 --- /dev/null +++ b/static/showcases/chapter-selection.scss @@ -0,0 +1,53 @@ +@import './static-showcase'; + +#chapter-selector { + display: grid; + gap: var(--size-2); +} + +.chapter { + display: inline-block; + padding: var(--size-3); + color: var(--color-4); + text-decoration: none; + background: var(--color-10); + border-radius: var(--size-2); +} + +.chapter-selected { + background: var(--red-11); +} + +.chapter:hover:not(.chapter-selected) { + background: var(--color-9); +} + +.chapter figure { + display: grid; + grid-template-columns: var(--size-12) 1fr; + gap: var(--size-5); + margin: 0; +} + +.chapter figcaption { + display: grid; +} + +.chapter img { + width: 100%; + border-radius: var(--size-2); +} + +.chapter p { + margin: 0; +} + +.chapter span { + justify-self: end; + float: right; + margin-top: var(--size-4); + padding: var(--size-1); + background-color: var(--color-8); + border-color: var(--color-9); + border-radius: var(--radius-2); +}