Text search nav

src/components/Transcript/Transcript.js

@@ -41,15 +41,23 @@ const TranscriptLine = ({
   autoScrollEnabled,
   showNotes,
   transcriptContainerRef,
-  isNonTimedText
+  isNonTimedText,
+  focusedMatchIndex,
 }) => {
   const itemRef = React.useRef(null);
   const isFocused = item.id === focusedMatchId;
   const wasFocusedRef = React.useRef(isFocused);
   const wasActiveRef = React.useRef(isActive);
+  // React ref to store previous focusedMatchIndex
+  const prevFocusedIndexRef = React.useRef(-1);
+  // React ref to store previous focusedMatchId
+  const prevFocusedIdRef = React.useRef(-1);
+  // React ref to iterate through multiple hits within a focused cue
+  const activeRelativeCountRef = React.useRef(0);
 
   React.useEffect(() => {
     let doScroll = false;
+    const prevFocused = prevFocusedIdRef.current;
     if (isActive && !wasActiveRef.current) {
       if (autoScrollEnabled) {
         wasActiveRef.current = true;
@@ -67,14 +75,53 @@ const TranscriptLine = ({
     if (doScroll && itemRef.current) {
       autoScroll(itemRef.current, transcriptContainerRef, true);
     }
+
+    // Update relative count and match id refs within the component when navigating results
+    if (prevFocused < focusedMatchId || prevFocused < 0 || !prevFocused) {
+      activeRelativeCountRef.current = -1;
+    } else {
+      activeRelativeCountRef.current = item.matchCount;
+    }
+    prevFocusedIdRef.current = focusedMatchId;
   }, [autoScrollEnabled, isActive, isFocused, itemRef.current]);
 
+  /**
+   * Add a border highlight to the current focused search hit when using search
+   * result navigation, when there are multiple hits within a focused cue
+   */
+  React.useEffect(() => {
+    if (itemRef.current && isFocused) {
+      // Find all highlights within the focused cue
+      const highlights = itemRef.current.querySelectorAll('.ramp--transcript_highlight');
+      // Clean classList from previous navigations
+      highlights.forEach(h => h.classList.remove('current-hit'));
+
+      // Read previously focused match index
+      const prevFocusedIndex = prevFocusedIndexRef.current;
+      // Adjust the relative focus index within the focused cue
+      activeRelativeCountRef.current = focusedMatchIndex > prevFocusedIndex
+        ? activeRelativeCountRef.current + 1
+        : activeRelativeCountRef.current <= 0 ? 0 : activeRelativeCountRef.current - 1;
+
+      // If exists add a border to the current focused hit within the cue
+      if (activeRelativeCountRef.current > -1) {
+        const currentHighlight = highlights[activeRelativeCountRef.current];
+        if (currentHighlight != undefined) {
+          currentHighlight.classList.add('current-hit');
+          autoScroll(currentHighlight, transcriptContainerRef, true);
+        }
+      }
+      // Update the ref for focused match index in the component
+      prevFocusedIndexRef.current = focusedMatchIndex;
+    }
+  }, [focusedMatchIndex]);
+
   const onClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
     if (item.match && focusedMatchId !== item.id) {
       setFocusedMatchId(item.id);
-    } else if (focusedMatchId !== null) {
+    } else if (focusedMatchId !== null && item.tag === TRANSCRIPT_CUE_TYPES.timedCue) {
       autoScroll(itemRef.current, transcriptContainerRef, true);
     }
     goToItem(item);
@@ -127,14 +174,20 @@ const TranscriptLine = ({
       </a>
     );
   } else if (item.tag === TRANSCRIPT_CUE_TYPES.nonTimedLine) {
-    return <p
+    return <a
+      href="#"
       ref={itemRef}
+      role="listitem"
+      onClick={onClick}
       className={cx(
         'ramp--transcript_item',
+        isActive && 'active',
         isFocused && 'focused'
       )}
-      dangerouslySetInnerHTML={{ __html: buildSpeakerText(item, isNonTimedText) }} >
-    </p>;
+      data-testid="transcript_untimed_text">
+      <p className="ramp--transcript_untimed_item" dangerouslySetInnerHTML={{ __html: buildSpeakerText(item, isNonTimedText) }}></p>
+
+    </a>;
   } else {
     return null;
   }
@@ -158,7 +211,8 @@ const TranscriptList = ({
   setFocusedMatchId,
   autoScrollEnabled,
   showNotes,
-  transcriptContainerRef
+  transcriptContainerRef,
+  focusedMatchIndex,
 }) => {
   const [manuallyActivatedItemId, setManuallyActivatedItem] = React.useState(null);
   const goToItem = React.useCallback((item) => {
@@ -215,6 +269,7 @@ const TranscriptList = ({
                 showNotes={showNotes}
                 transcriptContainerRef={transcriptContainerRef}
                 isNonTimedText={true}
+                focusedMatchIndex={focusedMatchIndex}
               />
             ))
           }
@@ -534,6 +589,7 @@ const Transcript = ({ playerID, manifestUrl, showNotes = false, search = {}, tra
             autoScrollEnabled={autoScrollEnabledRef.current && searchQuery === null}
             showNotes={showNotes}
             transcriptContainerRef={transcriptContainerRef}
+            focusedMatchIndex={focusedMatchIndex}
           />
         </div>
       </div>

src/components/Transcript/Transcript.scss

@@ -36,12 +36,8 @@
   }
 }
 
-p.ramp--transcript_item {
-  &.focused,
-  &.focused:hover,
-  &.focused:focus {
-    background-color: $primaryGreenSemiLight;
-  }
+p.ramp--transcript_untimed_item {
+  margin: 0;
 }
 
 a.ramp--transcript_item {
@@ -70,6 +66,13 @@ a.ramp--transcript_item {
     background-color: $primaryGreenSemiLight;
   }
 
+  &.focused {
+    .ramp--transcript_highlight.current-hit {
+      border: 1px solid;
+      text-decoration: none;
+    }
+  }
+
   .ramp--transcript_time {
     margin-right: 15px;
     color: $primaryGreenDark;

src/services/search.js

@@ -170,7 +170,7 @@ export function useFilteredTranscripts({
   }, [matcher, query, enabled, sorter, matchesOnly, showMarkers, playerDispatch, selectedTranscript]);
 
   const callSearchFactory = () => {
-    clearTimeout(debounceTimerRef.current);
+    if (!debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
 
     const abortController = new AbortController();
     abortControllerRef.current = abortController;
@@ -343,5 +343,11 @@ export const useFocusedMatch = ({ searchResults }) => {
     }
   }, [searchResults.matchingIds, focusedMatchIndex]);
 
+  useEffect(() => {
+    if (searchResults.matchingIds.length && focusedMatchIndex > 0) {
+      setFocusedMatchIndex(null);
+    }
+  }, [searchResults.matchingIds]);
+
   return { focusedMatchId, setFocusedMatchId, focusedMatchIndex, setFocusedMatchIndex };
 };