From db18a25933e7d618d7a8da07f3dc33ae0ae0342c Mon Sep 17 00:00:00 2001
From: saasfreelancer <syed.sayal.shah@gmail.com>
Date: Thu, 1 Dec 2022 18:29:35 +0500
Subject: [PATCH] feat(cxl-ui): tweak chapter navigation mixin

---
 .../mixins/chapter-navigation/index.html.js        |  3 +--
 .../mixins/chapter-navigation/index.js             | 14 ++++----------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/packages/cxl-ui/src/components/cxl-jw-player/mixins/chapter-navigation/index.html.js b/packages/cxl-ui/src/components/cxl-jw-player/mixins/chapter-navigation/index.html.js
index 88b64537d..6c1cb1f4d 100644
--- a/packages/cxl-ui/src/components/cxl-jw-player/mixins/chapter-navigation/index.html.js
+++ b/packages/cxl-ui/src/components/cxl-jw-player/mixins/chapter-navigation/index.html.js
@@ -13,8 +13,7 @@ export const chapterNavigationTemplate = function (chapters) {
         theme="icon small primary"
         aria-label="Close"
       >
-        <!-- <vaadin-icon icon="lumo:close-small"></vaadin-icon> -->
-        &#10005;
+        <vaadin-icon icon="lumo:cross"></vaadin-icon>
       </vaadin-button>
     </div>
     <ul class="chapter-navigation-list">
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
index 051c4dca9..2ab998723 100644
--- 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
@@ -7,7 +7,7 @@ export function ChapterNavigationMixin(BaseClass) {
   class Mixin extends BaseClass {
     @property({ attribute: 'plugin-path', type: String }) pluginPath;
 
-    async __createChapterNavigation() {
+    async __setupChapterNavigation() {
       const chapters = await this.__getChapters();
 
       this.__chapterNavigation = document.createElement('div');
@@ -19,19 +19,13 @@ export function ChapterNavigationMixin(BaseClass) {
       this.__jwPlayerContainer.appendChild(this.__chapterNavigation);
 
       this.__jwPlayer.addButton(
-        `${this.pluginPath}images/chapter-bookmark-icon.svg`,
+        `<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',
         this.__toggleChapterNavigation.bind(this),
         'toggle-chapters'
       );
     }
 
-    __addStyle() {
-      const el = document.createElement('style');
-      render(style, el);
-      this.appendChild(el);
-    }
-
     __chapterSeek(e) {
       const index = Number(e.currentTarget.dataset.index);
       this.__jwPlayer.seek(this.__chapters[index].data.start / 1000);
@@ -40,8 +34,8 @@ export function ChapterNavigationMixin(BaseClass) {
     async __setup() {
       await super.__setup();
 
-      this.__addStyle();
-      this.__createChapterNavigation();
+      this.__addStyle(style);
+      this.__setupChapterNavigation();
     }
 
     __toggleChapterNavigation() {