fix(example): loading media with drm

Media wasn't loading due to a typo in the properties for the key systems of a source. - Converted `licenseUrl` and `certificateUrl` to `licenseUri` and `certificateUri` respectively. - Added a condition to prevent multiple loading when the route changes but a player is already active.
SRGSSR · May 7, 2024 · 3316ab1 · 3316ab1
1 parent d4fad71
commit 3316ab1
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -36,7 +36,7 @@
 
 <body>
 <demo-dialog>
-  <video-js id="player" class="pillarbox-js" controls crossorigin="anonymous"></video-js>
+  <video-js id="demo-player" class="pillarbox-js" controls crossorigin="anonymous"></video-js>
 </demo-dialog>
 
 <demo-header></demo-header>

diff --git 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
@@ -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 {
           <option value="com.microsoft.playready">PlayReady</option>
         </select>
         <input type="text"
-               placeholder="Enter the license url..."
-               .value="${this.drmSettings.licenseUrl}"
-               @input="${e => { this.drmSettings.licenseUrl = e.target.value; }}">
+               placeholder="Enter the license uri..."
+               .value="${this.drmSettings.licenseUri}"
+               @input="${e => { this.drmSettings.licenseUri = e.target.value; }}">
         <input type="text"
-               placeholder="Enter the certificate url..."
-               .value="${this.drmSettings.certificateUrl}"
-               @input="${e => { this.drmSettings.certificateUrl = e.target.value; }}">
+               placeholder="Enter the certificate uri..."
+               .value="${this.drmSettings.certificateUri}"
+               @input="${e => { this.drmSettings.certificateUri = e.target.value; }}">
         <button class="icon-btn warning-text" type="reset">
           <i class="material-icons-outlined">delete</i>Clear Settings
         </button>

diff --git 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(