From dc20c6ac81203567d096ad1f76df75dcd40eeab4 Mon Sep 17 00:00:00 2001
From: Andrew Noblet <andrewbnoblet@gmail.com>
Date: Wed, 2 Oct 2024 14:16:03 +0000
Subject: [PATCH] feat(cxl-ui): cxl-jw-player add scroll to feature when
 pressing enter

https://app.clickup.com/t/apru1v?comment=90140065274148
---
 .../cxl-jw-player/mixins/TranscriptMixin.js   | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 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
index 6a707151..c97dffd3 100644
--- 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,10 +101,7 @@ 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;
@@ -108,6 +109,13 @@ export function TranscriptMixin(BaseClass) {
       });
     }
 
+    _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() {