feat(cxl-ui): tweak chapter navigation mixin

conversionxl · Dec 1, 2022 · db18a25 · db18a25
1 parent b21649b
commit db18a25
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 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
@@ -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
@@ -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() {