feat(cxl-ui): cxl-jw-player add scroll to feature when pressing enter

https://app.clickup.com/t/apru1v?comment=90140065274148
conversionxl · Oct 2, 2024 · dc20c6a · dc20c6a
1 parent 036bd53
commit dc20c6a
Showing 1 changed file with 28 additions and 4 deletions.
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
@@ -9,6 +9,10 @@ export function TranscriptMixin(BaseClass) {
 
     _mark;
 
+    _searchIndex = 0;
+
+    _searchResults = [];
+
     @property({ reflect: true, type: Boolean }) captions = false;
 
     @property({ attribute: 'has-captions', reflect: true, type: Boolean }) hasCaptions = false;
@@ -97,17 +101,21 @@ export function TranscriptMixin(BaseClass) {
         if (start <= position && end >= position) {
           if (this.shouldScroll) {
             const el = this.renderRoot.querySelector(`[data-index="${index}"]`);
-            if (el) {
-              const container = this.renderRoot.querySelector('.captions');
-              container.scrollTop = el.offsetTop - container.offsetTop;
-            }
+            this._scrollTo(el);
           }
 
           this._currentTrack = index;
         }
       });
     }
 
+    _scrollTo(element) {
+      if (this.shouldScroll) {
+        const container = this.renderRoot.querySelector('.captions');
+        container.scrollTop = element.offsetTop - container.offsetTop;
+      }
+    }
+
     _search() {
       this._mark.unmark();
 
@@ -123,6 +131,8 @@ export function TranscriptMixin(BaseClass) {
       } else {
         this._isSearchMinimumLength = false;
       }
+
+      this._searchResults = this.shadowRoot.querySelectorAll('mark');
     }
 
     async _setup() {
@@ -131,6 +141,20 @@ export function TranscriptMixin(BaseClass) {
       this._setupTranscript();
 
       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) {
+              this._searchIndex = 0;
+            }
+
+            this._scrollTo(this._searchResults[this._searchIndex]);
+
+            this._searchIndex++;
+          }
+        }
+      });
     }
 
     async _setupTranscript() {