feat(cxl-ui): cxl-jw-player transcript only highlight active search r…

…esult https://app.clickup.com/t/apru1v?comment=90140065274148&threadedComment=90140065514123
conversionxl · Oct 3, 2024 · 464df2f · 464df2f
1 parent e179515
commit 464df2f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-shadow.scss b/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-shadow.scss
@@ -1,5 +1,5 @@
 @use '~@conversionxl/cxl-lumo-styles/scss/mixins';
-@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+@use '~@conversionxl/cxl-lumo-styles/scss/mq';
 
 :host {
   background-color: var(--wp--preset--color--white);
@@ -41,12 +41,15 @@
 
   mark {
     color: #fff;
-    background-color: var(--lumo-primary-color);
+    background-color: var(--lumo-shade-50pct);
+
+    &.search-active {
+      background-color: var(--lumo-primary-color);
+    }
   }
 
   span {
     padding: var(--lumo-space-xs) calc(var(--lumo-space-xs) / 2);
-    border-radius: var(--lumo-space-xs);
   }
 }
 

diff --git a/packages/cxl-ui/src/components/cxl-jw-player/mixins/TranscriptMixin.js b/packages/cxl-ui/src/components/cxl-jw-player/mixins/TranscriptMixin.js
@@ -132,6 +132,17 @@ export function TranscriptMixin(BaseClass) {
       }
 
       this._searchResults = this.shadowRoot.querySelectorAll('mark');
+
+      this._setActive(this._searchResults[0]);
+
+      this._searchIndex++;
+    }
+
+    _setActive(el) {
+      this._searchResults.forEach((el) => el.classList.remove('search-active'));
+      el.classList.add('search-active');
+
+      this._scrollTo(el);
     }
 
     async _setup() {
@@ -142,13 +153,13 @@ export function TranscriptMixin(BaseClass) {
       this._jwPlayer.on('playlistItem', this._setupTranscript.bind(this));
 
       this.shadowRoot.querySelector('vaadin-text-field').addEventListener('keyup', (e) => {
-        if(e.key === 'Enter') {
-          if(this._searchResults.length) {
-            if(this._searchIndex === this._searchResults.length - 1) {
+        if ('Enter' === e.key) {
+          if (this._searchResults.length) {
+            if (this._searchIndex === this._searchResults.length - 1) {
               this._searchIndex = 0;
             }
 
-            this._scrollTo(this._searchResults[this._searchIndex]);
+            this._setActive(this._searchResults[this._searchIndex]);
 
             this._searchIndex++;
           }