Replace pointer handlers for transcript auto-scroll check with a checkbox

src/components/Transcript/Transcript.js

@@ -42,13 +42,9 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
   // Store transcript data in state to avoid re-requesting file contents
   const [cachedTranscripts, setCachedTranscripts] = React.useState([]);
 
-  let isMouseOver = false;
-  // Setup refs to access state information within
-  // event handler function
-  const isMouseOverRef = React.useRef(isMouseOver);
-  const setIsMouseOver = (state) => {
-    isMouseOverRef.current = state;
-    isMouseOver = state;
+  const autoScrollRef = React.useRef(true);
+  const setAutoScrollRef = (state) => {
+    autoScrollRef.current = state;
   };
 
   const isEmptyRef = React.useRef(true);
@@ -134,7 +130,7 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
       setTimedText([]);
       setCachedTranscripts([]);
       player = null;
-      isMouseOver = false;
+      autoScrollRef.current = true;
       clearInterval(playerInterval);
     };
   }, []);
@@ -269,9 +265,8 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
       tr.classList.remove('active');
     }
 
-    // When using the transcript panel to scroll/select text
-    // return without auto scrolling
-    if (isMouseOverRef.current) {
+    // When auto-scroll is not checked return without auto scrolling
+    if (!autoScrollRef.current) {
       return;
     }
 
@@ -346,11 +341,11 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
   };
 
   /**
-   * Update state based on mouse events - hover or not hover
-   * @param {Boolean} state flag identifying mouse event
+   * Update ref based on auto-scroll checkbox state
+   * @param {Boolean} state flag identifying auto-scroll state
    */
-  const handleMouseOver = (state) => {
-    setIsMouseOver(state);
+  const setAutoScroll = (state) => {
+    setAutoScrollRef(state);
   };
 
   const buildSpeakerText = (t) => {
@@ -447,8 +442,6 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
         className="ramp--transcript_nav"
         data-testid="transcript_nav"
         key={transcriptInfo.title}
-        onMouseOver={() => handleMouseOver(true)}
-        onMouseLeave={() => handleMouseOver(false)}
       >
         {!isEmptyRef.current && (
           <div className="transcript_menu">
@@ -457,6 +450,7 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
               transcriptData={canvasTranscripts}
               transcriptInfo={transcriptInfo}
               noTranscript={transcriptInfo.tError?.length > 0 && transcriptInfo.tError != NO_SUPPORT}
+              setAutoScroll={(a) => setAutoScroll(a)}
             />
           </div>
         )}

src/components/Transcript/Transcript.scss

@@ -107,6 +107,15 @@ a.ramp--transcript_item {
   margin: 0;
 }
 
+.ramp--transcript_auto_scroll_check {
+  flex-basis: 100%;
+  margin: 0;
+
+  label {
+    margin-left: 0.25em;
+  }
+}
+
 /* TranscriptDownloader styling */
 .ramp--transcript_downloader {
   margin: 0;
@@ -247,4 +256,4 @@ a.ramp--transcript_item {
   100% {
     opacity: 0;
   }
-}
+}

src/components/Transcript/TranscriptMenu/TranscriptSelector.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TranscriptDownloader from './TranscriptDownloader';
+import { TRANSCRIPT_TYPES } from '@Services/transcript-parser';
 
 const MACHINE_GEN_MESSAGE = 'Machine-generated transcript may contain errors.';
 
@@ -9,13 +10,25 @@ const TanscriptSelector = ({
   transcriptData,
   transcriptInfo,
   noTranscript,
+  setAutoScroll
 }) => {
-  const { title, filename, id, tUrl, tFileExt, isMachineGen } = transcriptInfo;
+  const { filename, id, tUrl, tFileExt, tType, isMachineGen } = transcriptInfo;
+
+  const [autoScrollCheck, setAutoScrollCheck] = React.useState(true);
 
   const selectItem = (event) => {
     selectTranscript(event.target.value);
   };
 
+  /**
+   * Event handler for auto-scroll check box status changes
+   */
+  const handleOnChange = () => {
+    const checkValue = !autoScrollCheck;
+    setAutoScrollCheck(checkValue);
+    setAutoScroll(checkValue);
+  };
+
   if (transcriptData) {
     return (
       <div
@@ -51,6 +64,20 @@ const TanscriptSelector = ({
             {MACHINE_GEN_MESSAGE}
           </p>
         }
+        {tType === TRANSCRIPT_TYPES.timedText && (
+          <div className="ramp--transcript_auto_scroll_check"
+            data-testid="transcript-auto-scroll-check">
+            <input
+              type="checkbox"
+              id="auto-scroll-check"
+              name="autoscrollcheck"
+              aria-checked={autoScrollCheck}
+              checked={autoScrollCheck}
+              onChange={handleOnChange}
+            />
+            <label htmlFor="auto-scroll-check">Auto-scroll with media</label>
+          </div>)
+        }
       </div>
     );
   } else {
@@ -69,6 +96,7 @@ TanscriptSelector.propTypes = {
     isMachineGen: PropTypes.bool
   }).isRequired,
   noTranscript: PropTypes.bool.isRequired,
+  setAutoScroll: PropTypes.func.isRequired,
 };
 
 export default TanscriptSelector;

src/components/Transcript/TranscriptMenu/TranscriptSelector.test.js

@@ -52,6 +52,7 @@ describe('TranscriptSelector component', () => {
       tFileExt: 'json'
     },
     noTranscript: false,
+    setAutoScroll: jest.fn()
   };
   describe('with default props', () => {
     beforeEach(() => {
@@ -96,4 +97,32 @@ describe('TranscriptSelector component', () => {
       "Machine-generated transcript may contain errors."
     );
   });
+
+  test('with time synced transcript content', () => {
+    let updatedProps = {
+      ...props,
+      transcriptInfo: {
+        ...props.transcriptInfo,
+        tType: 1,
+      }
+    };
+    render(<TranscriptSelector {...updatedProps} />);
+    expect(screen.getByTestId('transcript-selector')).toBeInTheDocument();
+    expect(screen.getByTestId('transcript-downloader')).toBeInTheDocument();
+    expect(screen.queryByTestId('transcript-auto-scroll-check')).toBeInTheDocument();
+  });
+
+  test('without time synced transcript content', () => {
+    let updatedProps = {
+      ...props,
+      transcriptInfo: {
+        ...props.transcriptInfo,
+        tType: 3,
+      }
+    };
+    render(<TranscriptSelector {...updatedProps} />);
+    expect(screen.getByTestId('transcript-selector')).toBeInTheDocument();
+    expect(screen.getByTestId('transcript-downloader')).toBeInTheDocument();
+    expect(screen.queryByTestId('transcript-auto-scroll-check')).not.toBeInTheDocument();
+  });
 });