} nodes - The array of nodes to search.
+ * @param {string} str - The string representation of the node to find.
+ *
+ * @returns {number} - The index of the node.
+ */
+ #findNodeIndex(nodes, str) {
+ const normalizedStr = str.toLowerCase();
+
+ return nodes
+ .map(n => (n.urn || n.id || n.toString()).toLowerCase())
+ .findIndex(n => n === normalizedStr);
+ }
+}
+
+export default ListsPageStateManager;
diff --git a/src/layout/content/lists/lists-page.js b/src/layout/content/lists/lists-page.js
new file mode 100644
index 0000000..264e85c
--- /dev/null
+++ b/src/layout/content/lists/lists-page.js
@@ -0,0 +1,260 @@
+import { html, LitElement, unsafeCSS } from 'lit';
+import { animations, theme } from '../../../theme/theme';
+import router from '../../../router/router';
+import componentCSS from './lists-page.scss?inline';
+import '../../../components/spinner/spinner-component';
+import '../../../components/intersection-observer/intersection-observer-component';
+import '../../../components/scroll-to-top/scroll-to-top-component';
+import { map } from 'lit/directives/map.js';
+import { when } from 'lit/directives/when.js';
+import ListsPageStateManager from './lists-page-state-manager';
+import { listsSections } from './lists-sections';
+import Pillarbox from 'video.js';
+
+export class ListsPage extends LitElement {
+ static properties = {
+ loading: { state: true, type: Boolean },
+ stack: { state: true, type: Array },
+ level: { state: true, type: Object },
+ nextPage: { state: true, type: Function }
+ };
+
+ static styles = [
+ theme, animations, unsafeCSS(componentCSS)
+ ];
+
+ /**
+ * The abort controller for handling search cancellation.
+ *
+ * @private
+ * @type {AbortController}
+ */
+ #abortController = new AbortController();
+ /**
+ * Keeps track of the state of the list page : the current level in display, as
+ * well as the traversal stack.
+ *
+ * @private
+ * @type {ListsPageStateManager}
+ */
+ #stateManager;
+ /**
+ * The reference to the query params changed event handler.
+ *
+ * @private
+ * @type {Function}
+ */
+ #onQueryParamsChanged;
+
+ constructor() {
+ super();
+
+ this.loading = false;
+ this.#stateManager = new ListsPageStateManager(listsSections);
+ this.#updateState();
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ this.#onQueryParamsChanged = async(event) => {
+ if (!event.detail.popstate) return;
+
+ this.abortFetch();
+ const manager = new ListsPageStateManager(this.#stateManager.root);
+ const { section, bu, nodes } = event.detail.queryParams;
+
+ this.loading = true;
+ try {
+ await manager.initialize(section, bu, nodes);
+ this.#stateManager = manager;
+ this.#updateState();
+ } finally {
+ this.loading = false;
+ }
+ };
+ router.addEventListener('queryparams', this.#onQueryParamsChanged);
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ this.abortFetch();
+ router.removeEventListener('queryparams', this.#onQueryParamsChanged);
+ }
+
+ firstUpdated(_changedProperties) {
+ super.firstUpdated(_changedProperties);
+ this.#onQueryParamsChanged(
+ { detail: { popstate: true, queryParams: router.queryParams } }
+ );
+ }
+
+ #updateState() {
+ this.stack = [...this.#stateManager.stack];
+ this.level = [...this.#stateManager.level];
+ }
+
+ /**
+ * Navigates to the specified section and node in the content tree.
+ *
+ * @param {number} sectionIndex - The index of the section.
+ * @param {number} nodeIndex - The index of the node.
+ */
+ async navigateTo(sectionIndex, nodeIndex) {
+ if (!this.#stateManager.isLeafSection(sectionIndex)) {
+ this.abortFetch();
+ this.loading = true;
+ try {
+ await this.#stateManager.fetchNextState(sectionIndex, nodeIndex);
+ this.#updateState();
+ } finally {
+ this.loading = false;
+ }
+ }
+ }
+
+ /**
+ * Aborts the previous fetch by cancelling the associated abort signal and
+ * creates a new abort controller for the next fetch.
+ *
+ * @returns {AbortSignal} - The abort signal associated with the new fetch.
+ */
+ abortFetch() {
+ this.#abortController?.abort('New search launched');
+ this.#abortController = new AbortController();
+
+ return this.#abortController.signal;
+ }
+
+ #toMediaButtonParams(node) {
+ return new URLSearchParams({ ...router.queryParams, src: node.urn, type: 'srgssr/urn' }).toString();
+ }
+
+ #renderMediaButton(node) {
+ const date = new Intl.DateTimeFormat('fr-CH').format(new Date(node.date));
+ const duration = Pillarbox.formatTime(node.duration / 1000);
+
+ return html`
+
+
+ ${node.mediaType === 'VIDEO' ? 'movie' : 'audiotrack'}
+ | ${date} | ${duration}
+
+
+ `;
+ }
+
+ #toLevelParams(sectionIdx, nodeIdx) {
+ const params = this.#stateManager.paramsAt(sectionIdx, nodeIdx);
+
+ return new URLSearchParams(params).toString();
+ }
+
+ #renderLevelButton(node, sectionIdx, nodeIdx) {
+ return html`
+
+
+ `;
+ }
+
+ async #nextPage(section) {
+ const signal = this.abortFetch();
+
+ await section.fetchNext(signal);
+ this.#updateState();
+ }
+
+ #renderNodes(nodes, sectionIdx) {
+ const firstSection = this.level[0];
+ const hasIntesectionObserver = this.level.length === 1 && firstSection.next;
+
+ return html`
+ ${map(nodes, (node, idx) => html`
+ ${when(node.mediaType, () => this.#renderMediaButton(node, idx), () => this.#renderLevelButton(node, sectionIdx, idx))}
+ `)}
+ ${when(hasIntesectionObserver, () => html`
+
+
+ `)}
+ `;
+ }
+
+ async #onSectionsClicked(e) {
+ const button = e.target.closest('content-link');
+
+ if (this.loading || !('nodeIdx' in button.dataset)) return;
+
+ const sectionIndex = button.dataset.sectionIdx;
+ const nodeIndex = button.dataset.nodeIdx;
+
+ await this.navigateTo(sectionIndex, nodeIndex);
+ }
+
+ #renderResults() {
+ return html`
+
+ ${map(this.level, (section, idx) => html`
+
+ ${section.title}
+ ${this.#renderNodes(section.nodes, idx)}
+
+ `)}
+
+ `;
+ }
+
+ #renderSpinner() {
+ return html`
+
+
+ `;
+ }
+
+ #renderScrollToTopBtn() {
+ return html`
+
+ ${when(this.stack.length > 0, () => html`
+ Home
+ `)}
+ ${map(this.stack.slice(1), (step, idx) => html`
+ chevron_right
+
+ ${step.level[step.sectionIndex].title}
+
+ `)}
+
+ `;
+ }
+
+ render() {
+ const renderScrollBtn = this.level.length === 1 && this.level[0].next;
+
+ return html`
+ ${this.#renderNavigation()}
+ ${when(this.loading, this.#renderSpinner.bind(this), this.#renderResults.bind(this))}
+ ${when(renderScrollBtn, this.#renderScrollToTopBtn.bind(this))}
+ `;
+ }
+}
+
+customElements.define('lists-page', ListsPage);
+router.addRoute('lists', 'lists-page');
diff --git a/src/layout/content/lists/lists-page.scss b/src/layout/content/lists/lists-page.scss
new file mode 100644
index 0000000..43c59b5
--- /dev/null
+++ b/src/layout/content/lists/lists-page.scss
@@ -0,0 +1,29 @@
+.tree-navigation-container {
+ display: flex;
+ align-items: end;
+
+ & button {
+ padding: 0;
+ color: var(--color-6);
+ background: transparent;
+ border: none;
+
+ &:hover {
+ color: inherit;
+ }
+ }
+
+ i {
+ font-size: var(--size-3);
+ }
+}
+
+intersection-observer::part(sentinel) {
+ width: 100%;
+ height: var(--size-9);
+ margin-top: var(--size-4);
+ background-color: var(--color-9);
+ border: 1px solid var(--color-10);
+ border-radius: var(--radius-3);
+ animation: var(--animation-blink);
+}
diff --git a/src/layout/content/lists/lists-sections.js b/src/layout/content/lists/lists-sections.js
new file mode 100644
index 0000000..47c45f6
--- /dev/null
+++ b/src/layout/content/lists/lists-sections.js
@@ -0,0 +1,152 @@
+import ilProvider from '../../../utils/il-provider';
+
+/**
+ * A section within the content hierarchy.
+ *
+ * @property {string} title - The title of the section node.
+ * @property {string[]} values - An array of values associated with the section.
+ * @property {function} resolve - A function that, when defined, resolves the next level
+ * of the hierarchy asynchronously.
+ */
+class Section {
+ /**
+ * Creates an instance of Section.
+ *
+ * @param {Object} options - The options for creating the section.
+ * @param {string} options.title - The title of the section.
+ * @param {string[]} options.nodes - An array of nodes associated with the section.
+ * @param {function} [options.resolve] - (Optional) A function that, when defined, resolves the next level
+ * of the hierarchy asynchronously.
+ * @param {function} [options.next] - (Optional) A function that, when defined, resolves the next level
+ * of the hierarchy asynchronously.
+ */
+ constructor({
+ title,
+ nodes,
+ resolve = undefined,
+ next = undefined
+ }) {
+ this.title = title;
+ this.nodes = nodes;
+ this.resolve = resolve;
+ this.next = next;
+ }
+
+ /**
+ * Checks if the node is a leaf node (i.e., has no further levels to resolve).
+ *
+ * @returns {boolean} True if the node is a leaf node, false otherwise.
+ */
+ isLeaf() {
+ return !this.resolve;
+ }
+
+ /**
+ * Fetch more nodes from the next function if available.
+ * @param signal
+ * @returns {Promise<*>}
+ */
+ async fetchNext(signal = undefined) {
+ if (!this.next) return;
+ const data = await this.next(signal);
+
+ this.next = data.next;
+ this.nodes.push(...data.results);
+
+ return data.results;
+ }
+}
+
+const toNodesAndNext = (data) => ({
+ nodes: data.results,
+ next: data.next
+});
+
+/**
+ * An asynchronous tree-like structure that allows traversing the SRG SSR content
+ * by category in a hierarchical fashion.
+ *
+ * @type {Section[]}
+ */
+export const listsSections = [
+ new Section({
+ title: 'TV Topics',
+ nodes: ['RSI', 'RTR', 'RTS', 'SRF', 'SWI'],
+ resolve: async(bu) => new Section({
+ title: `${bu} TV Topics`,
+ nodes: await ilProvider.topics(bu),
+ resolve: async(topic) => new Section({
+ title: topic.title,
+ ...toNodesAndNext(await ilProvider.latestByTopic(topic.urn))
+ })
+ })
+ }),
+ new Section({
+ title: 'TV Shows',
+ nodes: ['RSI', 'RTR', 'RTS', 'SRF', 'SWI'],
+ resolve: async(bu) => new Section({
+ title: `${bu} TV Shows`,
+ nodes: await ilProvider.shows(bu),
+ resolve: async(show) => new Section({
+ title: show.title,
+ ...toNodesAndNext(await ilProvider.latestByShow(show.urn))
+ })
+ })
+ }),
+ new Section({
+ title: 'TV Latest Videos',
+ nodes: ['RSI', 'RTR', 'RTS', 'SRF'],
+ resolve: async(bu) => new Section({
+ title: `${bu} TV Latest Videos`,
+ ...toNodesAndNext(await ilProvider.editorial(bu))
+ })
+ }),
+ new Section({
+ title: 'TV Livestreams',
+ nodes: ['RSI', 'RTR', 'RTS', 'SRF'],
+ resolve: async(bu) => new Section({
+ title: `${bu} TV Livestreams`,
+ nodes: await ilProvider.livestreams(bu)
+ })
+ }),
+ new Section({
+ title: 'Live web',
+ nodes: ['RSI', 'RTR', 'RTS', 'SRF'],
+ resolve: async(bu) => new Section({
+ title: `${bu} Live web`,
+ ...toNodesAndNext(await ilProvider.scheduledLivestream(bu))
+ })
+ }),
+ new Section({
+ title: 'Live center',
+ nodes: ['RSI', 'RTR', 'RTS', 'SRF'],
+ resolve: async(bu) => new Section({
+ title: `${bu} Live center`,
+ nodes: await ilProvider.livecenter(bu)
+ })
+ }),
+ new Section({
+ title: 'Radio Shows',
+ nodes: ['RSI', 'RTR', 'RTS', 'SRF'],
+ resolve: async(bu) => new Section({
+ title: `${bu} Radio Channels`,
+ nodes: await ilProvider.channels(bu),
+ resolve: async(channel) => new Section({
+ title: `${channel.title} Radio shows`,
+ nodes: await ilProvider.radioShowByChannel(bu, channel.id),
+ resolve: async(show) => new Section({
+ title: show.title,
+ ...toNodesAndNext(await ilProvider.latestByShow(show.urn))
+ })
+ })
+ })
+ }),
+ new Section({
+ title: 'Radio Livestreams',
+ nodes: ['RSI', 'RTR', 'RTS', 'SRF'],
+ resolve: async(bu) => new Section({
+ title: `${bu} Radio Livestreams`,
+ nodes: await ilProvider.livestreams(bu, 'audio')
+ })
+ })
+];
diff --git a/src/layout/content/search/search-bar-component.js b/src/layout/content/search/search-bar-component.js
new file mode 100644
index 0000000..225057e
--- /dev/null
+++ b/src/layout/content/search/search-bar-component.js
@@ -0,0 +1,90 @@
+import { html, LitElement, unsafeCSS } from 'lit';
+import { animations, theme } from '../../../theme/theme';
+import componentCSS from './search-bar-component.scss?inline';
+import Pillarbox from 'video.js';
+
+const DEFAULT_BU = 'rsi';
+
+/**
+ * A search bar component for filtering content based on a query and business unit.
+ *
+ * @element search-bar
+ *
+ * @fires SearchBarComponent#change - Dispatched when the value of the search bar changes.
+ */
+export class SearchBarComponent extends LitElement {
+ static properties = {
+ bu: { type: String },
+ query: { type: String }
+ };
+
+ static styles = [theme, animations, unsafeCSS(componentCSS)];
+
+ constructor() {
+ super();
+ this.bu = DEFAULT_BU;
+ this.query = '';
+ }
+
+ #handleSearchBarKeyUp() {
+ this.query = this.renderRoot.querySelector('input').value;
+ }
+
+ #handleSelectChange(e) {
+ this.bu = e.target.value;
+ }
+
+ updated(_changedProperties) {
+ super.updated(_changedProperties);
+
+ if (['bu', 'query'].some(property => _changedProperties.has(property))) {
+ const query = this.query ?? '';
+ const bu = this.bu ?? DEFAULT_BU;
+
+ /**
+ * Custom event dispatched by SearchBarComponent when the value of the bar changes.
+ *
+ * @event SearchBarComponent#change
+ * @type {CustomEvent}
+ * @property {Object} detail - The event detail object.
+ * @property {string} detail.query - The query on the search bar.a
+ * @property {string} detail.bu - The selected bu.
+ */
+ this.dispatchEvent(new CustomEvent('change', {
+ detail: { query, bu }
+ }));
+ }
+ }
+
+ #clearSearchBar() {
+ this.query = '';
+ this.renderRoot.querySelector('input').value = '';
+ }
+
+ render() {
+ return html`
+
+
+ RSI
+ RTR
+ RTS
+ SRF
+ SWI
+
+
+ close
+
+
+ `;
+ }
+}
+
+customElements.define('search-bar', SearchBarComponent);
diff --git a/src/layout/content/search/search-bar-component.scss b/src/layout/content/search/search-bar-component.scss
new file mode 100644
index 0000000..012ad37
--- /dev/null
+++ b/src/layout/content/search/search-bar-component.scss
@@ -0,0 +1,19 @@
+.search-bar-container {
+ display: flex;
+ align-items: center;
+ margin: 0 0 var(--size-1) 0;
+ padding: 0 var(--size-2);
+ background-color: var(--color-8);
+ border-radius: var(--radius-2);
+
+ input {
+ width: 90%;
+ }
+
+ button {
+ display: flex;
+ align-items: center;
+ background-color: var(--color-8);
+ border: 0;
+ }
+}
diff --git a/src/layout/content/search/search-page.js b/src/layout/content/search/search-page.js
new file mode 100644
index 0000000..4676b2c
--- /dev/null
+++ b/src/layout/content/search/search-page.js
@@ -0,0 +1,217 @@
+import { html, LitElement, unsafeCSS } from 'lit';
+import { animations, theme } from '../../../theme/theme';
+import router from '../../../router/router';
+import componentCSS from './search-page.scss?inline';
+import './search-bar-component';
+import ilProvider from '../../../utils/il-provider';
+import '../../../components/spinner/spinner-component';
+import '../../../components/intersection-observer/intersection-observer-component';
+import '../../../components/scroll-to-top/scroll-to-top-component';
+import '../../../components/content-link/content-link-component';
+import { map } from 'lit/directives/map.js';
+import Pillarbox from 'video.js';
+import { when } from 'lit/directives/when.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+export class SearchPage extends LitElement {
+ static properties = {
+ loading: {
+ state: true,
+ type: Boolean
+ },
+ results: {
+ state: true,
+ type: Array
+ },
+ nextPage: {
+ state: true,
+ type: Function
+ }
+ };
+
+ static styles = [
+ theme, animations, unsafeCSS(componentCSS)
+ ];
+
+ /**
+ * The abort controller for handling search cancellation.
+ *
+ * @private
+ * @type {AbortController}
+ */
+ #abortController = new AbortController();
+ /**
+ * The reference to the query params changed event handler.
+ *
+ * @private
+ * @type {Function}
+ */
+ #onQueryParamsChanged;
+
+ constructor() {
+ super();
+
+ this.loading = false;
+ this.results = null;
+ this.nextPage = null;
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ this.#onQueryParamsChanged = () => {
+ const searchBar = this.renderRoot.querySelector('search-bar');
+
+ searchBar.query = router.queryParams.query ?? '';
+ searchBar.bu = router.queryParams.bu ?? 'rsi';
+ };
+ router.addEventListener('queryparams', this.#onQueryParamsChanged);
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ this.abortSearch();
+ router.removeEventListener('queryparams', this.#onQueryParamsChanged);
+ }
+
+ async firstUpdated(_changedProperties) {
+ super.firstUpdated(_changedProperties);
+ const searchBar = this.renderRoot.querySelector('search-bar');
+
+ this.#onQueryParamsChanged();
+ await this.#search(searchBar.bu, searchBar.query);
+ }
+
+ async #onSearchBarChanged(bu, query) {
+ router.updateState({ bu, ...(query ? { query } : {}) });
+ await this.#search(bu, query);
+ }
+
+ /**
+ * Performs a search based on the specified business unit and query. Performing
+ * a new search will abort the previous search if it's ongoing and display a
+ * loading spinner for the asynchronous operation.
+ *
+ * @param {string} bu - The selected business unit.
+ * @param {string} query - The search query.
+ *
+ * @throws {Promise} - A rejected promise with the response object if
+ * the fetch request for the search results fails.
+ */
+ async #search(bu, query) {
+ const signal = this.abortSearch();
+
+ if (!query) {
+ [this.results, this.nextPage] = [null, null];
+
+ return;
+ }
+
+ this.loading = true;
+ try {
+ const data = await ilProvider.search(bu, query, signal);
+
+ [this.results, this.nextPage] = [data.results, data.next];
+ } finally {
+ this.loading = false;
+ }
+ }
+
+ /**
+ * Advances to the next page of search results and updates the UI accordingly.
+ *
+ * @throws {Promise} - A rejected promise with the response object if
+ * the fetch request for the next page fails.
+ */
+ async #fetchNextPage() {
+ const signal = this.abortSearch();
+ const data = await this.nextPage(signal);
+
+ this.nextPage = data.next;
+ this.results = [...this.results, ...data.results];
+ }
+
+ /**
+ * Aborts the previous search by cancelling the associated abort signal and
+ * creates a new abort controller for the next search.
+ *
+ * @returns {AbortSignal} - The abort signal associated with the new search.
+ */
+ abortSearch() {
+ this.#abortController?.abort('New search launched');
+ this.#abortController = new AbortController();
+
+ return this.#abortController.signal;
+ }
+
+ #toQueryParams(r) {
+ return new URLSearchParams({
+ ...router.queryParams,
+ src: r.urn,
+ type: 'srgssr/urn'
+ }).toString();
+ }
+
+ #renderButton(r) {
+ const date = new Intl.DateTimeFormat('fr-CH').format(new Date(r.date));
+ const duration = Pillarbox.formatTime(r.duration / 1000);
+
+ return html`
+
+
+ ${r.mediaType === 'VIDEO' ? 'movie' : 'audiotrack'}
+ | ${date} | ${duration}
+
+
+ `;
+ }
+
+ #renderResults() {
+ const resultsClassMap = {
+ empty: this.results == null,
+ 'no-results': this.results && this.results.length === 0,
+ 'material-icons': !this.results || this.results.length === 0
+ };
+
+ return html`
+
+ ${map(this.results ?? [], this.#renderButton.bind(this))}
+ ${when(this.nextPage, () => html`
+
+
+ `)}
+
+ `;
+ }
+
+ #renderSpinner() {
+ return html`
+
+
+ `;
+ }
+
+ #renderScrollToTopBtn() {
+ return html`
+
+
+
+
+ ${when(this.loading, this.#renderSpinner.bind(this), this.#renderResults.bind(this))}
+ ${when(this.results?.length > 0, this.#renderScrollToTopBtn.bind(this))}
+ `;
+ }
+}
+
+customElements.define('search-page', SearchPage);
+router.addRoute('search', 'search-page');
diff --git a/src/layout/content/search/search-page.scss b/src/layout/content/search/search-page.scss
new file mode 100644
index 0000000..0edd960
--- /dev/null
+++ b/src/layout/content/search/search-page.scss
@@ -0,0 +1,53 @@
+$material-icons-font-path: '../../../../node_modules/material-icons/iconfont/';
+
+@import 'material-icons/iconfont/material-icons';
+@import 'material-icons/css/material-icons';
+
+.results-container {
+ display: flex;
+ flex-direction: column;
+ margin-top: var(--size-3);
+}
+
+.results-container.empty, .results-container.no-results {
+ gap: var(--size-3);
+ align-items: center;
+ justify-content: center;
+ min-height: var(--size-12);
+ margin-top: var(--size-10);
+ color: var(--gray-8);
+
+ &::before {
+ font-size: var(--size-9);
+ }
+
+ &::after {
+ font-family: var(--font-sans);
+ }
+}
+
+.results-container.empty {
+ @include material-icon('search');
+
+ &::after {
+ content: "Enter something to search";
+ }
+}
+
+.results-container.no-results {
+ @include material-icon('do_not_disturb_alt');
+
+ &::after {
+ content: "No results";
+ }
+}
+
+intersection-observer::part(sentinel) {
+ width: 100%;
+ height: var(--size-9);
+ margin-top: var(--size-4);
+ background-color: var(--color-9);
+ border: 1px solid var(--color-10);
+ border-radius: var(--radius-3);
+ animation: var(--animation-blink);
+}
diff --git a/src/layout/content/settings/preferences-provider.js b/src/layout/content/settings/preferences-provider.js
new file mode 100644
index 0000000..c236aa6
--- /dev/null
+++ b/src/layout/content/settings/preferences-provider.js
@@ -0,0 +1,29 @@
+/**
+ * Utility class for loading and saving preferences to local storage.
+ *
+ * @class PreferencesProvider
+ */
+class PreferencesProvider {
+ /**
+ * Load preferences from local storage.
+ *
+ * @static
+ * @returns {Object} An object representing the loaded preferences.
+ */
+ static loadPreferences() {
+ return JSON.parse(localStorage.getItem('preferences')) || {};
+ }
+
+ /**
+ * Save preferences to local storage.
+ *
+ * @static
+ * @param {Object} preferences - An object representing the preferences to be saved.
+ * @returns {void}
+ */
+ static savePreferences(preferences) {
+ localStorage.setItem('preferences', JSON.stringify(preferences));
+ }
+}
+
+export default PreferencesProvider;
diff --git a/src/layout/content/settings/settings-page.js b/src/layout/content/settings/settings-page.js
new file mode 100644
index 0000000..d2a0a8b
--- /dev/null
+++ b/src/layout/content/settings/settings-page.js
@@ -0,0 +1,74 @@
+import router from '../../../router/router';
+import { html, LitElement, unsafeCSS } from 'lit';
+import { animations, theme } from '../../../theme/theme';
+import '../../../components/toggle-switch/toggle-switch-component.js';
+import PreferencesProvider from './preferences-provider';
+import componentCss from './settings-page.scss?inline';
+
+/**
+ * A web component that represents the settings page.
+ *
+ * @element settings-page
+ */
+export class SettingsPage extends LitElement {
+ static properties = {
+ autoplay: { type: Boolean, state: true },
+ muted: { type: Boolean, state: true },
+ debug: { type: Boolean, state: true }
+ };
+
+ static styles = [theme, animations, unsafeCSS(componentCss)];
+
+ constructor() {
+ super();
+ const preferences = PreferencesProvider.loadPreferences();
+
+ this.autoplay = preferences.autoplay ?? false;
+ this.muted = preferences.muted ?? true;
+ this.debug = preferences.debug ?? false;
+ }
+
+ updated(_changedProperties) {
+ super.updated(_changedProperties);
+
+ const preferences = PreferencesProvider.loadPreferences();
+
+ [..._changedProperties.keys()]
+ .filter(property => ['autoplay', 'muted', 'debug'].includes(property))
+ .forEach((property) => { preferences[property] = this[property]; });
+
+ PreferencesProvider.savePreferences(preferences);
+
+ if (_changedProperties.has('debug')) {
+ router.replaceState(this.debug ? { debug: 'true' } : {});
+ }
+ }
+
+ #renderToggle(property, label) {
+ return html`
+
+ ${label}
+
+
+
+ `;
+ }
+
+ render() {
+ return html`
+
+ Player Settings
+ ${this.#renderToggle('autoplay', 'Autoplay')}
+ ${this.#renderToggle('muted', 'Player starts muted')}
+ ${this.#renderToggle('debug', 'Enable debug mode')}
+
+ `;
+ }
+}
+
+customElements.define('settings-page', SettingsPage);
+router.addRoute('settings', 'settings-page');
diff --git a/src/layout/content/settings/settings-page.scss b/src/layout/content/settings/settings-page.scss
new file mode 100644
index 0000000..08f3f1f
--- /dev/null
+++ b/src/layout/content/settings/settings-page.scss
@@ -0,0 +1,40 @@
+[part="title"] {
+ margin: 0;
+ padding: var(--size-3) 0;
+}
+
+[part="toggle-container"] {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin: 0;
+ color: var(--color-0);
+ font-weight: var(--font-weight-6);
+ font-size: var(--size-3);
+ text-align: justify;
+ background-color: var(--color-9);
+ border: 1px solid var(--color-10);
+
+ &:first-of-type {
+ border-radius: var(--radius-3) var(--radius-3) 0 0;
+ }
+
+ &:last-of-type {
+ border-radius: 0 0 var(--radius-3) var(--radius-3);
+ }
+}
+
+[part="label"] {
+ flex: 1;
+ line-height: var(--size-8);
+ cursor: pointer;
+ padding-inline: var(--size-3);
+}
+
+
+[part="toggle-switch"] {
+ display: flex;
+ align-items: center;
+ height: var(--size-8);
+ padding-inline: var(--size-3);
+}
diff --git a/src/layout/content/showcase/showcase-component.js b/src/layout/content/showcase/showcase-component.js
new file mode 100644
index 0000000..2730d3c
--- /dev/null
+++ b/src/layout/content/showcase/showcase-component.js
@@ -0,0 +1,54 @@
+import { css, html, LitElement } from 'lit';
+import '../../../components/code-block/code-block';
+import { theme } from '../../../theme/theme';
+
+export class ShowcaseComponent extends LitElement {
+ static styles = [theme, css`
+ ::slotted([slot='demo']) {
+ aspect-ratio: var(--ratio-widescreen);
+ }
+
+ ::slotted([slot='description']) {
+ padding-left: var(--size-2);
+ color: var(--color-4);
+ font-weight: var(--font-weight-1);
+ font-size: var(--font-size-1);
+ text-align: justify;
+ border-left: 3px solid var(--color-5);
+ }
+
+ .hidden {
+ display: none;
+ }
+ `];
+
+ static properties = {
+ hasCodeExample: { type: Boolean, state: true },
+ exampleLanguage: { type: String }
+ };
+
+ connectedCallback() {
+ super.connectedCallback();
+ this.shadowRoot.addEventListener('slotchange', () => {
+ this.hasCodeExample = this.#hasSlot('code');
+ });
+ }
+
+ #hasSlot(name) {
+ return this.shadowRoot.querySelector(`slot[name="${name}"]`).assignedNodes().length > 0;
+ }
+
+ render() {
+ return html`
+
+
Implementation
+
+
+ `;
+ }
+}
+
+customElements.define('showcase-page', ShowCasePage);
+router.addRoute('showcase', 'showcase-page');
diff --git a/src/layout/content/showcase/start-time-showcase.js b/src/layout/content/showcase/start-time-showcase.js
new file mode 100644
index 0000000..c786ca1
--- /dev/null
+++ b/src/layout/content/showcase/start-time-showcase.js
@@ -0,0 +1,75 @@
+import { css, html, LitElement } from 'lit';
+import { theme } from '../../../theme/theme';
+import exampleTxt from './starttime-example.txt?raw';
+import './showcase-component';
+import { openPlayerModal } from '../../../components/player/player';
+
+/**
+ * This component allows to showcase videos with a specified start time.
+ *
+ * @element starttime-showcase
+ *
+ * @prop {Number} starttime - The start time of the video playback in seconds. Default value: 300.
+ *
+ * @prop {String} src - The source URL of the video. Default value: 'urn:swi:video:48115940'.
+ *
+ * @prop {String} type - The MIME type of the video. It defines the media type of the video file
+ * specified in the `src` property. Default value: 'srsgssr/urn'.
+ *
+ * @example
+ * ```html
+ *
+ Start the player at a given position
+
+ In this showcase, we'll demonstrate how to load a video source and
+ start playback at a specific position using Pillarbox. This can be
+ useful when you want to provide users with the option to begin
+ watching a video from a predefined timestamp. To achieve this
+ functionality, follow the code snippet below:
+
+ ${exampleTxt}
+
+ Run the demo
+ `;
+ }
+}
+
+customElements.define('starttime-showcase', StartTimeShowcase);
diff --git a/src/layout/content/showcase/starttime-example.txt b/src/layout/content/showcase/starttime-example.txt
new file mode 100644
index 0000000..7803149
--- /dev/null
+++ b/src/layout/content/showcase/starttime-example.txt
@@ -0,0 +1,11 @@
+// Create by referencing the video element with its unique ID
+const player = new Pillarbox('video-element-id')
+
+// Load the video source
+player.src({src: 'urn:swi:video:48115940', type: 'srgssr/urn'});
+
+// Listen for the 'loadeddata' event, indicating that the video data has loaded
+player.on('loadeddata', () => {
+ // Set the desired start position in seconds (e.g., start at 5 minutes)
+ player.currentTime(300);
+});
diff --git a/src/layout/header/header-component.js b/src/layout/header/header-component.js
new file mode 100644
index 0000000..8e11567
--- /dev/null
+++ b/src/layout/header/header-component.js
@@ -0,0 +1,95 @@
+import githubLogoSvg from '../../../img/github-logo.svg?raw';
+import srgssrLogo from '../../../img/srgssr-logo.png';
+// import Pillarbox from '../../../../src/pillarbox';
+import { html, LitElement, unsafeCSS } from 'lit';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import '../../router/route-link-component';
+import { theme } from '../../theme/theme';
+import headerCSS from './header-component.scss?inline';
+import router from '../../router/router';
+
+/**
+ * A web component that represents the header element of the demo page.
+ *
+ * @element pbw-header
+ */
+export class DemoHeaderElement extends LitElement {
+ static properties = {
+ debug: { type: Boolean, state: true }
+ };
+
+ static styles = [theme, unsafeCSS(headerCSS)];
+
+ #onRouteUpdated = ({ detail: { queryParams } }) => {
+ this.debug = queryParams.debug === 'true';
+ };
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ this.debug = router.queryParams.debug === 'true';
+ router.addEventListener('routechanged', this.#onRouteUpdated);
+ router.addEventListener('queryparams', this.#onRouteUpdated);
+ }
+
+ disconnectedCallback() {
+ router.removeEventListener('routechanged', this.#onRouteUpdated);
+ router.removeEventListener('queryparams', this.#onRouteUpdated);
+ }
+
+ render() {
+ return html`
+ ${this.#renderHeaderElement()}
+ ${this.#renderNavElement()}
+ `;
+ }
+
+ #renderHeaderElement() {
+ return html`
+
+
+ Pillarbox
+
+
+
+ `;
+ }
+
+ #renderNavElement() {
+ return html`
+
+
+
+
+ Examples
+
+
+
+ Search
+
+
+
+ Lists
+
+
+
+
+ Showcase
+
+
+
+ `;
+ }
+}
+
+customElements.define('demo-header', DemoHeaderElement);
diff --git a/src/layout/header/header-component.scss b/src/layout/header/header-component.scss
new file mode 100644
index 0000000..5074847
--- /dev/null
+++ b/src/layout/header/header-component.scss
@@ -0,0 +1,94 @@
+ul, li {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+li {
+ display: inline-block;
+}
+
+header {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ margin: var(--size-4) 0;
+
+ h1 {
+ display: flex;
+ gap: .15em;
+ align-items: center;
+ margin: 0;
+ }
+}
+
+.pbw-logo {
+ height: var(--size-7);
+}
+
+.version-txt {
+ align-self: flex-end;
+ color: var(--color-6);
+ font-weight: var(--font-weight-4);
+ font-size: var(--size-3);
+ line-height: var(--size-5);
+}
+
+.github-link {
+ display: flex;
+ align-items: center;
+}
+
+.github-icon {
+ fill: var(--color-5);
+
+ &:hover {
+ fill: var(--color-2);
+ }
+}
+
+route-link::part(a) {
+ padding: var(--size-1) var(--size-1);
+ font-size: var(--size-4);
+ border-radius: var(--radius-3);
+ transition: background-color 0.4s, color 0.4s;
+}
+
+route-link::part(a active) {
+ color: var(--color-8);
+ text-decoration: none;
+ background-color: var(--color-5);
+ cursor: default;
+ transition: background-color 0.8s, color 0.4s;
+}
+
+.header-end {
+ display: flex;
+ align-items: center;
+
+ route-link {
+ margin-left: var(--size-2);
+ }
+
+ route-link::part(a) {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ }
+
+ .material-icons-outlined {
+ font-size: var(--size-7);
+ }
+}
+
+nav ul {
+ margin-bottom: var(--size-4);
+
+ li {
+ margin-right: var(--size-1);
+ }
+
+ li:last-child {
+ margin: 0;
+ }
+}
diff --git a/src/router/route-link-component.js b/src/router/route-link-component.js
new file mode 100644
index 0000000..45360f6
--- /dev/null
+++ b/src/router/route-link-component.js
@@ -0,0 +1,61 @@
+import router from './router';
+import { html, LitElement } from 'lit';
+import { animations, theme } from '../theme/theme';
+
+export class RouteLinkCompenent extends LitElement {
+ static properties = {
+ href: { type: String },
+ title: { type: String },
+ selected: { type: Boolean, state: true }
+ };
+
+ static styles = [theme, animations];
+
+ #updateSelected() {
+ const url = new URL(`${window.location.origin}/${this.href}`);
+
+ this.selected = router.isActiveRoute(url.pathname);
+ }
+
+ constructor() {
+ super();
+
+ router.addEventListener('routechanged', () => {
+ this.#updateSelected();
+ });
+ }
+
+ #onClick = (event) => {
+ event.preventDefault();
+
+ const url = new URL(`${window.location.origin}/${this.href}`);
+ const queryParams = Object.fromEntries(url.searchParams.entries());
+
+ router.navigateTo(url.pathname, queryParams);
+ };
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ this.#updateSelected();
+ this.addEventListener('click', this.#onClick);
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ this.removeEventListener('click', this.#onClick);
+ }
+
+ render() {
+ return html`
+
+
+ `;
+ }
+}
+
+customElements.define('route-link', RouteLinkCompenent);
diff --git a/src/router/route-outlet-component.js b/src/router/route-outlet-component.js
new file mode 100644
index 0000000..f9663fd
--- /dev/null
+++ b/src/router/route-outlet-component.js
@@ -0,0 +1,25 @@
+import router from './router';
+import { LitElement } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+export class RouteOutletComponent extends LitElement {
+ static properties = {
+ route: { state: true }
+ };
+
+ constructor() {
+ super();
+
+ this.route = router.currentRoute;
+ router.addEventListener('routechanged', ({ detail: { route } }) => {
+ this.route?.destroy();
+ this.route = route;
+ });
+ }
+
+ render() {
+ return unsafeHTML(`<${this.route.component}>`);
+ }
+}
+
+customElements.define('route-outlet', RouteOutletComponent);
diff --git a/src/router/router.js b/src/router/router.js
new file mode 100644
index 0000000..c706bef
--- /dev/null
+++ b/src/router/router.js
@@ -0,0 +1,268 @@
+import { Minimatch } from 'minimatch';
+
+/**
+ * Router class for managing client-side navigation in a Single Page Application (SPA).
+ * This class enables the creation of a simple client-side router to handle navigation within an SPA,
+ * allowing developers to define routes and associated actions.
+ *
+ * ## Usage:
+ * 1. Import the router in your project:
+ * ```javascript
+ * import router from './path/to/Router';
+ * ```
+ * 2. Define routes by using the `addRoute` method:
+ * ```javascript
+ * router.addRoute('/', 'home-component', () => {
+ * // Function to execute when navigating to the root path
+ * console.log('Navigated to the root path');
+ * }, () => {
+ * // Function to execute when navigating away from the root path
+ * console.log('Navigated away from the root path');
+ * });
+ * ```
+ * 3. Integrate with an `` tag using the `href` attribute:
+ * ```html
+ * Home
+ * About
+ * ```
+ * Clicking on these links will trigger the router to navigate to the specified paths.
+ * 4. Define a route outlet where the component associated with the route will be rendered :
+ * ```html
+ * } - A rejected promise with the response object if the fetch request fails.
+ */
+ async search(bu, query, signal = undefined) {
+ const data = await this.#fetch(
+ `/${bu.toLowerCase()}/searchResultMediaList`,
+ { ...DEFAULT_SEARCH_PARAMS, q: query },
+ signal
+ );
+ const toResults = (data) => data.searchResultMediaList.map(toMedia);
+
+ return {
+ results: toResults(data),
+ next: data.next ? this.#nextProvider(data.next, toResults) : undefined
+ };
+ }
+
+ /**
+ * Retrieves a list of topics for the specified business unit and transmission type.
+ *
+ * @param {string} bu - The business unit for which to retrieve topics (rsi, rtr, rts, srf, or swi).
+ * @param {string} [transmission='tv'] - The transmission type ('tv' or 'radio').
+ *
+ * @returns {Promise>} - A promise that resolves to an array
+ * of objects containing the title and URN of the topics.
+ *
+ * @throws {Promise} - A rejected promise with the response object if the fetch request fails.
+ */
+ async topics(bu, transmission = 'tv') {
+ const data = await this.#fetch(`/${bu.toLowerCase()}/topicList/${transmission}`);
+
+ return data.topicList.map(
+ ({ title, urn }) => ({ title, urn })
+ );
+ }
+
+ /**
+ * Retrieves the latest media content for a specific topic.
+ *
+ * @param {string} topicUrn - The URN (Unique Resource Name) of the topic.
+ * @param {number} [pageSize=30] - The maximum number of episodes to retrieve.
+ *
+ * @returns {Promise<{ results: Array<{ title: string, urn: string }>, next: function }>} - A promise
+ * that resolves to an object containing :
+ * - `results`: An array of objects containing the title, URN, media type, date, and duration of the medias.
+ * - `next`: A function that, when called, retrieves the next set of data and returns a new object with updated results and the next function.
+ *
+ * @throws {Promise} - A rejected promise with the response object if the fetch request fails.
+ */
+ async latestByTopic(topicUrn, pageSize = 30) {
+ const data = await this.#fetch(`/mediaList/latest/byTopicUrn/${topicUrn}`, { pageSize });
+
+ const toResults = (data) => data.mediaList.map(toMedia);
+
+ return {
+ results: toResults(data),
+ next: data.next ? this.#nextProvider(data.next, toResults) : undefined
+ };
+ }
+
+ /**
+ * Retrieves a list of shows for the specified business unit, transmission type, and ordering.
+ *
+ * @param {string} bu - The business unit for which to retrieve shows (rsi, rtr, rts, srf, or swi).
+ * @param {string} [pageSize='unlimited'] - The maximum number of shows to retrieve. Use 'unlimited' for all shows.
+ * @param {string} [transmission='tv'] - The transmission type ('tv' or 'radio').
+ *
+ * @returns {Promise>} - A promise that resolves to an array
+ * of objects containing the title and URN of the shows.
+ *
+ * @throws {Promise} - A rejected promise with the response object if the fetch request fails.
+ */
+ async shows(bu, pageSize = 'unlimited', transmission = 'tv') {
+ const data = await this.#fetch(
+ `/${bu.toLowerCase()}/showList/${transmission}/alphabetical`,
+ { ...DEFAULT_SHOWLIST_PARAMS, pageSize }
+ );
+
+ return data.showList.map(
+ ({ title, urn }) => ({ title, urn })
+ );
+ }
+
+ /**
+ * Retrieves the latest media content for a specific show.
+ *
+ * @param {string} showUrn - The URN (Unique Resource Name) of the show.
+ * @param {number} [pageSize=30] - The maximum number of episodes to retrieve.
+ *
+ * @returns {Promise<{ results: Array<{ title: string, urn: string }>, next: function }>} - A promise
+ * that resolves to an object containing :
+ * - `results`: An array of objects containing the title, URN, media type, date, and duration of the medias.
+ * - `next`: A function that, when called, retrieves the next set of data and returns a new object with updated results and the next function.
+ *
+ * @throws {Promise} - A rejected promise with the response object if the fetch request fails.
+ */
+ async latestByShow(showUrn, pageSize = 30) {
+ const data = await this.#fetch(
+ `/episodeComposition/latestByShow/byUrn/${showUrn}`,
+ { ...DEFAULT_QUERY_PARAMS, pageSize }
+ );
+
+ const toResults = (data) => data.episodeList
+ .map(({ mediaList }) => mediaList[0])
+ .map(toMedia);
+
+ return {
+ results: toResults(data),
+ next: data.next ? this.#nextProvider(data.next, toResults) : undefined
+ };
+ }
+
+ /**
+ * Retrieves editorial media content for the specified business unit.
+ *
+ * @param {string} bu - The business unit for which to retrieve editorial media (rsi, rtr, rts, srf, or swi).
+ * @param {number} [pageSize=30] - The maximum number of editorial media items to retrieve.
+ *
+ * @returns {Promise<{ results: Array<{ title: string, urn: string }>, next: function }>} - A promise
+ * that resolves to an object containing :
+ * - `results`: An array of objects containing the title, URN, media type, date, and duration of the medias.
+ * - `next`: A function that, when called, retrieves the next set of data and returns a new object with updated results and the next function.
+ *
+ * @throws {Promise} - A rejected promise with the response object if the fetch request fails.
+ */
+ async editorial(bu, pageSize = 30) {
+ const data = await this.#fetch(
+ `/${bu.toLowerCase()}/mediaList/video/editorial`,
+ { ...DEFAULT_QUERY_PARAMS, pageSize }
+ );
+
+ const toResults = (data) => data.mediaList.map(toMedia);
+
+ return {
+ results: toResults(data),
+ next: data.next ? this.#nextProvider(data.next, toResults) : undefined
+ };
+ }
+
+ /**
+ * Retrieves livestream media content for the specified business unit and media type.
+ *
+ * @param {string} bu - The business unit for which to retrieve livestreams (rsi, rtr, rts, srf, or swi).
+ * @param {string} [mediaType='video'] - The media type ('video' or 'audio').
+ *
+ * @returns {Promise>} - A promise that resolves to an array
+ * of objects containing the title and URN of the livestream media content.
+ *
+ * @throws {Promise} - A rejected promise with the response object if the fetch request fails.
+ */
+ async livestreams(bu, mediaType = 'video') {
+ const data = await this.#fetch(`/${bu.toLowerCase()}/mediaList/${mediaType}/livestreams`);
+
+ return data.mediaList.map(toMedia);
+ }
+
+ /**
+ * Retrieves scheduled livestream media content for the specified business unit.
+ *
+ * @param {string} bu - The business unit for which to retrieve scheduled livestreams (rsi, rtr, rts, srf, or swi).
+ * @param {number} [pageSize=10] - The maximum number of scheduled livestreams to retrieve.
+ *
+ * @returns {Promise<{ results: Array<{ title: string, urn: string }>, next: function }>} - A promise
+ * that resolves to an object containing :
+ * - `results`: An array of objects containing the title, URN, media type, date, and duration of the medias.
+ * - `next`: A function that, when called, retrieves the next set of data and returns a new object with updated results and the next function.
+ *
+ * @throws {Promise} - A rejected promise with the response object if the fetch request fails.
+ */
+ async scheduledLivestream(bu, pageSize = 10) {
+ const data = await this.#fetch(
+ `/${bu.toLowerCase()}/mediaList/video/scheduledLivestreams`,
+ { ...DEFAULT_QUERY_PARAMS, pageSize }
+ );
+ const toResults = (data) => data.mediaList.map(toMedia);
+
+ return {
+ results: toResults(data),
+ next: data.next ? this.#nextProvider(data.next, toResults) : undefined
+ };
+ }
+
+ /**
+ * Retrieves media content for the livecenter for the specified business unit.
+ *
+ * @param {string} bu - The business unit for which to retrieve livecenter media (rsi, rtr, rts, srf, or swi).
+ * @param {number} [pageSize=10] - The maximum number of livecenter media items to retrieve.
+ *
+ * @returns {Promise<{ results: Array<{ title: string, urn: string }>, next: function }>} - A promise
+ * that resolves to an object containing :
+ * - `results`: An array of objects containing the title, URN, media type, date, and duration of the medias.
+ * - `next`: A function that, when called, retrieves the next set of data and returns a new object with updated results and the next function.
+ *
+ * @throws {Promise} - A rejected promise with the response object if the fetch request fails.
+ */
+ async livecenter(bu, pageSize = 10) {
+ const data = await this.#fetch(
+ `/${bu.toLowerCase()}/mediaList/video/scheduledLivestreams/livecenter`,
+ { ...DEFAULT_QUERY_PARAMS, pageSize }
+ );
+ const toResults = (data) => data.mediaList.map(toMedia);
+
+ return {
+ results: toResults(data),
+ next: data.next ? this.#nextProvider(data.next, toResults) : undefined
+ };
+ }
+
+ /**
+ * Retrieves a list of channels for the specified business unit and transmission type.
+ *
+ * @param {string} bu - The business unit for which to retrieve channels (rsi, rtr, rts, srf, or swi).
+ * @param {string} [transmission='radio'] - The transmission type ('tv' or 'radio').
+ *
+ * @returns {Promise>} - A promise that resolves to an array
+ * of objects containing the title and ID of the channels.
+ *
+ * @throws {Promise} - A rejected promise with the response object if the fetch request fails.
+ */
+ async channels(bu, transmission = 'radio') {
+ const data = await this.#fetch(`/${bu.toLowerCase()}/channelList/${transmission}`);
+
+ return data.channelList.map(
+ ({ title, id }) => ({ title, id })
+ );
+ }
+
+ /**
+ * Retrieves radio shows for the specified business unit and channel.
+ *
+ * @param {string} bu - The business unit for which to retrieve radio shows (rsi, rtr, rts, srf, or swi).
+ * @param {string} channelId - The ID of the channel.
+ * @param {string} [pageSize='unlimited'] - The maximum number of radio shows to retrieve. Use 'unlimited' for all shows.
+ *
+ * @returns {Promise>} - A promise that resolves to an array
+ * of objects containing the title and URN of the radio shows.
+ *
+ * @throws {Promise} - A rejected promise with the response object if the fetch request fails.
+ */
+ async radioShowByChannel(bu, channelId, pageSize = 'unlimited') {
+ const data = await this.#fetch(
+ `/${bu.toLowerCase()}/showList/radio/alphabeticalByChannel/${channelId}`,
+ { ...DEFAULT_QUERY_PARAMS, pageSize }
+ );
+
+ return data.showList.map(
+ ({ title, urn }) => ({ title, urn })
+ );
+ }
+
+ /**
+ * Asynchronously fetches data from the IL for the specified path and parameters.
+ *
+ * @private
+ * @param {string} path - The path to fetch data from.
+ * @param {Object} [params=DEFAULT_QUERY_PARAMS] - (Optional) parameters for the request.
+ * @param {AbortSignal} [signal=undefined] - (Optional) AbortSignal to abort the request.
+ *
+ * @returns {Promise<*>} A Promise that resolves to the JSON response data.
+ *
+ * @throws {Response} If the HTTP response is not ok (status code other than 2xx).
+ * @throws {Error} If the fetch operation fails for any other reason.
+ */
+ async #fetch(path, params = DEFAULT_QUERY_PARAMS, signal = undefined) {
+ const queryParams = new URLSearchParams(params).toString();
+ const url = `https://${this.baseUrl}/${path.replace(/^\/+/, '')}?${queryParams}`;
+
+ return fetch(url, { signal }).then(response => {
+ if (!response.ok) {
+ return Promise.reject(response);
+ }
+
+ return response.json();
+ }).catch((reason) => {
+ return Promise.reject(reason);
+ });
+ }
+
+ /**
+ * Generates a function that, when called, retrieves the next set of data and
+ * returns a new object with updated results and the next function.
+ *
+ * @private
+ * @template T - The type of data returned by the resultMapper function.
+ *
+ * @param {string} nextUrl - The URL for fetching the next set of data.
+ * @param {(data: any) => T} resultMapper - A function to map the raw data to the desired format.
+ *
+ * @returns {(signal?: AbortSignal) => Promise<{ results: T, next: function }>} - A function that,
+ * when called, retrieves the next set of data and returns a new object with updated results and the next function.
+ */
+ #nextProvider(nextUrl, resultMapper) {
+ return async(signal = undefined) => {
+ const nextData = await fetch(nextUrl, { signal }).then(response => {
+ if (!response.ok) {
+ return Promise.reject(response);
+ }
+
+ return response.json();
+ }).catch((reason) => {
+ return Promise.reject(reason);
+ });
+
+ const nextResults = resultMapper(nextData);
+
+ return {
+ results: nextResults,
+ next: this.#nextProvider(nextData.next, resultMapper)
+ };
+ };
+ }
+}
+
+export default new ILProvider();
diff --git a/src/utils/string-utils.js b/src/utils/string-utils.js
new file mode 100644
index 0000000..d1ee987
--- /dev/null
+++ b/src/utils/string-utils.js
@@ -0,0 +1,16 @@
+/**
+ * Converts a given string to kebab case, spaces are replaced with hyphens
+ * and all letters are converted to lowercase.
+ *
+ * @param {string} str - The input string to be converted to kebab case.
+ * @returns {string} - The input string converted to kebab case.
+ *
+ * @example
+ * const result = toKebabCase("Hello World");
+ * console.log(result); // Output: "hello-world"
+ *
+ * @example
+ * const result = toKebabCase("CamelCase Example");
+ * console.log(result); // Output: "camelcase-example"
+ */
+export const toKebabCase = (str) => str.replace(/\s+/g, '-').toLowerCase();
+ Pillarbox
+
+