feat(cxl-ui): cxl-jw-player improve support for source url

conversionxl · Sep 28, 2024 · 69f5778 · 69f5778
1 parent 9e0a30c
commit 69f5778
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/packages/cxl-ui/src/components/cxl-jw-player/mixins/BaseMixin.js b/packages/cxl-ui/src/components/cxl-jw-player/mixins/BaseMixin.js
@@ -18,6 +18,10 @@ export function BaseMixin(BaseClass) {
 
     _jwPlayerContainer;
 
+    _mediaId
+
+    _playlistId;
+
     // Device Detector media query.
     _wideMediaQuery = '(min-width: 750px)';
 
@@ -92,7 +96,25 @@ export function BaseMixin(BaseClass) {
     }
 
     // eslint-disable-next-line class-methods-use-this, no-empty-function
-    _beforeSetup() {}
+    _beforeSetup() {
+      if(this.mediaId) {
+        this._mediaId = this.mediaId;
+      }
+
+      if(this.mediaSource) {
+        const url = new URL(this.mediaSource);
+        this._mediaId = url.pathname.split('/').pop();
+      }
+
+      if(this.playlistId) {
+        this._playlistId = this.playlistId;
+      }
+
+      if(this.playlistSource) {
+        const url = new URL(this.playlistSource);
+        this._playlistId = url.pathname.split('/').pop();
+      }
+    }
 
     async _getChapters() {
       const playlistItem = this._jwPlayer.getPlaylistItem();

diff --git a/packages/cxl-ui/src/components/cxl-jw-player/mixins/StateMixin.js b/packages/cxl-ui/src/components/cxl-jw-player/mixins/StateMixin.js
@@ -7,15 +7,15 @@ export function StateMixin(BaseClass) {
     _userId;
 
     async _index() {
-      if (this.playlistId) {
+      if (this._playlistId) {
         const index =
-          localStorage.getItem(`cxl-jw-player-${this.playlistId}-index`) ||
+          localStorage.getItem(`cxl-jw-player-${this._playlistId}-index`) ||
           this._jwPlayer.getPlaylistIndex();
 
         this._jwPlayer.playlistItem(index);
 
         this._jwPlayer.on('playlistItem', async ({ index }) => {
-          localStorage.setItem(`cxl-jw-player-${this.playlistId}-index`, index);
+          localStorage.setItem(`cxl-jw-player-${this._playlistId}-index`, index);
         });
       }
     }
@@ -49,28 +49,30 @@ export function StateMixin(BaseClass) {
     }
 
     _position() {
-      if (this.mediaId) {
+      if (this._mediaId) {
         this._setPosition();
       }
 
-      if (this.playlistId) {
+      if (this._playlistId) {
         this._jwPlayer.on('playlistItem', async ({ index }) => {
-          await jwplayer().getPlaylistItemPromise(index);
+          await this._jwPlayer.getPlaylistItemPromise(index);
           this._setPosition();
         });
       }
 
       this._jwPlayer.on('seek time', ({ position }) => {
-        const mediaId = this.mediaId || this._jwPlayer.getPlaylistItem().mediaid;
+        const mediaId = this._mediaId || this._jwPlayer.getPlaylistItem().mediaid;
         localStorage.setItem(`cxl-jw-player-${mediaId}-position`, position);
       });
     }
 
     _setPosition() {
-      const mediaId = this.mediaId || this._jwPlayer.getPlaylistItem().mediaid;
+      const mediaId = this._mediaId || this._jwPlayer.getPlaylistItem().mediaid;
       const position = localStorage.getItem(`cxl-jw-player-${mediaId}-position`);
 
-      this._jwPlayer.seek(Number(position));
+      this._jwPlayer.on('firstFrame', () => {
+        this._jwPlayer.seek(Number(position));
+      });
     }
   }