feat(cxl-ui): [cxl-jw-player] add ability to save playlist index

conversionxl · Mar 7, 2023 · 5fe476c · 5fe476c
1 parent e4c8edb
commit 5fe476c
Showing 1 changed file with 16 additions and 7 deletions.
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
@@ -20,36 +20,45 @@ export function StateMixin(BaseClass) {
     }
 
     _playbackRate() {
-      const playbackRate = localStorage.getItem(`jw-player-playback-rate`);
+      const playbackRate = localStorage.getItem(`cxl-jw-player-playback-rate`);
 
       if (playbackRate) {
         this._jwPlayer.setPlaybackRate(Number(playbackRate));
       }
 
       this._jwPlayer.on('playbackRateChanged', ({ playbackRate }) => {
-        localStorage.setItem(`jw-player-playback-rate`, playbackRate);
+        localStorage.setItem(`cxl-jw-player-playback-rate`, playbackRate);
       });
     }
 
     _position() {
       const mediaId = this.mediaId || this._jwPlayer.getPlaylistItem().mediaId;
 
-      const position = localStorage.getItem(`jw-player-${mediaId}-position`);
+      const position = localStorage.getItem(`cxl-jw-player-${mediaId}-position`);
 
       if (position) {
         if (this.mediaId) {
           this._setPosition(position);
         } else {
-          this._jwPlayer.on('playlistItem', () => {
-            this._setPosition(position);
+          this._jwPlayer.on('playlistItem', ({ index }) => {
+            localStorage.setItem(`cxl-jw-player-${this.playlistId}-index`, index);
+
+            // Wait for the player to load the new playlist item
+            setTimeout(() => {
+              this._setPosition(position);
+            }, 1000);
           });
 
-          this._jwPlayer.playlistItem(this._jwPlayer.getPlaylistIndex());
+          const index =
+            localStorage.getItem(`cxl-jw-player-${this.playlistId}-index`) ||
+            this._jwPlayer.getPlaylistIndex();
+
+          this._jwPlayer.playlistItem(index);
         }
       }
 
       this._jwPlayer.on('seek time', ({ position }) => {
-        localStorage.setItem(`jw-player-${mediaId}-position`, position);
+        localStorage.setItem(`cxl-jw-player-${mediaId}-position`, position);
       });
     }