diff --git a/index.html b/index.html index f247153..ece16a7 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@ - + diff --git a/src/components/player/player.js b/src/components/player/player.js index 0b13d69..c20a88b 100644 --- a/src/components/player/player.js +++ b/src/components/player/player.js @@ -10,7 +10,7 @@ import router from '../../router/router'; import Pillarbox from '@srgssr/pillarbox-web'; import { IL_DEFAULT_HOST } from '../../utils/il-provider.js'; -const DEMO_PLAYER_ID = 'player'; +const DEMO_PLAYER_ID = 'demo-player'; const DEFAULT_OPTIONS = { restoreEl: true }; @@ -63,7 +63,7 @@ const toParams = (keySystems) => { return { vendor, - ...keySystems[vendor] + ...(vendor === 'com.apple.fps.1_0' ? keySystems[vendor] : { licenseUri: keySystems[vendor] }) }; }; @@ -72,12 +72,13 @@ const toKeySystem = (params) => { return undefined; } - const keySystem = {}; - const { certificateUrl, licenseUrl } = params; + const { certificateUri, licenseUri } = params; - keySystem[params.vendor] = { certificateUrl, licenseUrl }; + if (params.vendor === 'com.apple.fps.1_0') { + return { [params.vendor]: { certificateUri, licenseUri } }; + } - return keySystem; + return { [params.vendor]: licenseUri }; }; export const asQueryParams = ({ src, type, keySystems }) => { @@ -86,10 +87,14 @@ export const asQueryParams = ({ src, type, keySystems }) => { playerDialog.addEventListener('close', () => { destroyPlayer(); - router.updateState({}, ['src', 'type', 'vendor', 'certificateUrl', 'licenseUrl']); + router.updateState({}, ['src', 'type', 'vendor', 'certificateUri', 'licenseUri']); }); const loadPlayerFromRouter = (e) => { + if (window.player) { + return; + } + const params = e.detail.queryParams; if ('src' in params) { diff --git a/src/layout/content/examples/load-media-form-component.js b/src/layout/content/examples/load-media-form-component.js index e9273c9..0390c0b 100644 --- a/src/layout/content/examples/load-media-form-component.js +++ b/src/layout/content/examples/load-media-form-component.js @@ -11,7 +11,7 @@ import { classMap } from 'lit/directives/class-map.js'; * @fires LoadMediaFormComponent#submit-media - Dispatched when the user submits media with the specified details. * * @prop {String} src - The URL or URN of the media content to be loaded. - * @prop {{vendor: String, certificateUrl: String, licenseUrl: String}} drmSettings - DRM settings for the loaded media. + * @prop {{vendor: String, certificateUri: String, licenseUri: String}} drmSettings - DRM settings for the loaded media. */ export class LoadMediaFormComponent extends LitElement { static properties = { @@ -32,8 +32,8 @@ export class LoadMediaFormComponent extends LitElement { #initDrmSettings() { this.drmSettings = { vendor: '', - certificateUrl: '', - licenseUrl: '' + certificateUri: '', + licenseUri: '' }; } @@ -46,7 +46,7 @@ export class LoadMediaFormComponent extends LitElement { } #submitMedia() { - const src = this.#getSource(); + const src = this.#getSource()?.trim(); const type = src.startsWith('urn:') ? 'srgssr/urn' : undefined; const keySystems = this.#keySystems; @@ -78,14 +78,14 @@ export class LoadMediaFormComponent extends LitElement { return undefined; } - const certificateUrl = this.drmSettings.certificateUrl; - const licenseUrl = this.drmSettings.licenseUrl; + const certificateUri = this.drmSettings.certificateUri?.trim(); + const licenseUri = this.drmSettings.licenseUri?.trim(); if (this.drmSettings.vendor === 'com.apple.fps.1_0') { - return { [this.drmSettings.vendor]: { certificateUrl, licenseUrl } }; + return { [this.drmSettings.vendor]: { certificateUri, licenseUri } }; } - return { [this.drmSettings.vendor]: { licenseUrl } }; + return { [this.drmSettings.vendor]: licenseUri }; } render() { @@ -160,13 +160,13 @@ export class LoadMediaFormComponent extends LitElement { + placeholder="Enter the license uri..." + .value="${this.drmSettings.licenseUri}" + @input="${e => { this.drmSettings.licenseUri = e.target.value; }}"> + placeholder="Enter the certificate uri..." + .value="${this.drmSettings.certificateUri}" + @input="${e => { this.drmSettings.certificateUri = e.target.value; }}"> diff --git a/src/router/router.js b/src/router/router.js index c706bef..a45a3b6 100644 --- a/src/router/router.js +++ b/src/router/router.js @@ -137,7 +137,11 @@ class Router extends EventTarget { /** * Updates the state by navigating to the current path with the provided query parameters. * - * @param {Object} queryParams - The new query parameters to be merged with the current ones. + * @param {Object} queryParams The new query parameters to be merged with the current ones. + * @param {String[]} [keysToRemove=[]] (Optional) An array of keys to remove from + * the current query parameters before merging with the new parameters. + * This allows for selectively removing parameters that are + * no longer needed or should be excluded from the current state. */ updateState(queryParams, keysToRemove = []) { const filteredParams = Object.fromEntries(