feat(cxl-ui): [cxl-jw-player] fix chapter navigation when using playl…

…ists
conversionxl · Mar 7, 2023 · e9f39e2 · e9f39e2
1 parent 71a4554
commit e9f39e2
Showing 1 changed file with 19 additions and 9 deletions.
diff --git a/packages/cxl-ui/src/components/cxl-jw-player/mixins/chapter-navigation/index.js b/packages/cxl-ui/src/components/cxl-jw-player/mixins/chapter-navigation/index.js
@@ -5,25 +5,21 @@ import { chapterNavigationTemplate } from './index.html';
 
 export function ChapterNavigationMixin(BaseClass) {
   class Mixin extends BaseClass {
+    _chapterNavigation;
+
     @property({ attribute: 'plugin-path', type: String }) pluginPath;
 
     async _setupChapterNavigation() {
       const chapters = await this._getChapters();
 
       if (!chapters.length) {
-        this._jwPlayer.removeButton('chapter-navigation');
+        this._jwPlayer.removeButton('toggle-chapters');
 
         return;
       }
 
-      this._chapterNavigation = document.createElement('div');
-      this._chapterNavigation.classList.add('chapter-navigation');
-      this._chapterNavigation.hidden = true;
-
       render(chapterNavigationTemplate.bind(this)(chapters), this._chapterNavigation);
 
-      this._jwPlayerContainer.appendChild(this._chapterNavigation);
-
       this._jwPlayer.addButton(
         `<svg class="jw-player-button" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" aria-hidden="true" viewBox="0 0 1000 1000"><g><path d="M146 325c-42 0-67-26-67-63 0-37 25-63 67-63 42 0 67 26 67 63 0 37-25 63-67 63z m0 250c-42 0-67-26-67-63 0-37 25-63 67-63 42 0 67 26 67 63 0 37-25 63-67 63z m0 250c-42 0-67-26-67-63 0-37 25-63 67-63 42 0 67 26 67 63 0 37-25 63-67 63zM333 258c0-18 15-33 34-33h516c18 0 33 15 34 33 0 18-15 33-34 34H367c-18 0-33-15-34-34z m0 250c0-18 15-33 34-33h516c18 0 33 15 34 33s-15 33-34 34H367c-18 0-33-15-34-34z m0 250c0-18 15-33 34-33h516c18 0 33 15 34 33s-15 33-34 34H367c-18 0-33-15-34-34z"></path></g></svg>`,
         'Show Chapters',
@@ -39,9 +35,23 @@ export function ChapterNavigationMixin(BaseClass) {
 
     async _setup() {
       await super._setup();
-
+      
       this._addStyle(style);
-      this._setupChapterNavigation();
+
+      this._chapterNavigation = document.createElement('div');
+      this._chapterNavigation.classList.add('chapter-navigation');
+      this._chapterNavigation.hidden = true;
+      this._jwPlayerContainer.appendChild(this._chapterNavigation);
+
+      if (this.mediaId) {
+        this._setupChapterNavigation();
+      }
+
+      if (this.playlistId) {
+        this._jwPlayer.on('playlistItem', () => {
+          this._setupChapterNavigation();
+        });
+      }
     }
 
     _toggleChapterNavigation() {