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 {
{ this.drmSettings.licenseUrl = e.target.value; }}">
+ placeholder="Enter the license uri..."
+ .value="${this.drmSettings.licenseUri}"
+ @input="${e => { this.drmSettings.licenseUri = e.target.value; }}">
{ this.drmSettings.certificateUrl = 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(