Merge pull request #305 from samvera-labs/blank-canvas-transcript

Change canvas change trigger from a mutation observer to an event listener
samvera-labs · Dec 14, 2023 · ef986a0 · ef986a0
2 parents 7ca2109 + b0f8eca
commit ef986a0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 47 deletions.
diff --git a/src/components/Transcript/Transcript.js b/src/components/Transcript/Transcript.js
@@ -16,10 +16,10 @@ const INVALID_URL_MSG = 'Invalid URL for transcript, please check again.';
 const NO_SUPPORT = 'Transcript format is not supported, please check again.';
 
 /**
- * 
+ *
  * @param {String} param0 ID of the HTML element for the player on page
  * @param {Object} param1 transcripts resource
- * @returns 
+ * @returns
  */
 const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
   const [transcriptsList, setTranscriptsList] = React.useState([]);
@@ -40,8 +40,6 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
   // Store transcript data in state to avoid re-requesting file contents
   const [cachedTranscripts, setCachedTranscripts] = React.useState([]);
 
-  let player = null;
-
   let isMouseOver = false;
   // Setup refs to access state information within
   // event handler function
@@ -71,8 +69,15 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
     _setTranscript(t);
   };
 
+  let playerInterval;
+  let player = React.useRef();
+
+  /**
+   * Start an interval at the start of the component to poll the
+   * canvasindex attribute changes in the player on the page
+   */
   React.useEffect(() => {
-    setTimeout(function () {
+    playerInterval = setInterval(() => {
       const domPlayer = document.getElementById(playerID);
       if (!domPlayer) {
         console.error(
@@ -81,15 +86,12 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
           "' on page. Transcript synchronization is disabled."
         );
       } else {
-        player = domPlayer.children[0];
+        player.current = domPlayer.children[0];
       }
-      if (player) {
-        observeCanvasChange(player);
-        player.dataset['canvasindex']
-          ? setCanvasIndex(player.dataset['canvasindex'])
-          : setCanvasIndex(0);
+      if (player.current && player.current.dataset['canvasindex'] != canvasIndexRef.current) {
+        setCanvasIndex(player.current.dataset['canvasindex']);
 
-        player.addEventListener('timeupdate', function (e) {
+        player.current.addEventListener('timeupdate', function (e) {
           if (e == null || e.target == null) {
             return;
           }
@@ -108,8 +110,8 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
           });
         });
       }
-    });
-  });
+    }, 500);
+  }, []);
 
   React.useEffect(() => {
     // Clean up state when the component unmounts
@@ -123,6 +125,7 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
       setCachedTranscripts([]);
       player = null;
       isMouseOver = false;
+      clearInterval(playerInterval);
     };
   }, []);
 
@@ -178,35 +181,6 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
     setIsLoading(false);
   };
 
-  const observeCanvasChange = () => {
-    // Select the node that will be observed for mutations
-    const targetNode = player;
-
-    // Options for the observer (which mutations to observe)
-    const config = { attributes: true, childList: true, subtree: true };
-
-    // Callback function to execute when mutations are observed
-    const callback = function (mutationsList, observer) {
-      // Use traditional 'for loops' for IE 11
-      for (const mutation of mutationsList) {
-        if (mutation.attributeName?.includes('src')) {
-          const p =
-            document.querySelector('video') || document.querySelector('audio');
-          if (p) {
-            setIsLoading(true);
-            setCanvasIndex(parseInt(p.dataset['canvasindex']));
-          }
-        }
-      }
-    };
-
-    // Create an observer instance linked to the callback function
-    const observer = new MutationObserver(callback);
-
-    // Start observing the target node for configured mutations
-    observer.observe(targetNode, config);
-  };
-
   const selectTranscript = (selectedId) => {
     setTimedText([]);
     const selectedTranscript = canvasTranscripts.filter(function (tr) {
@@ -359,8 +333,8 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
     // const isClickable = getIsClickable(parentEle);
 
     // if (isClickable) {
-    if (player) {
-      player.currentTime = e.currentTarget.getAttribute('starttime');
+    if (player.current) {
+      player.current.currentTime = e.currentTarget.getAttribute('starttime');
     }
 
     textRefs.current.map((tr) => {

diff --git a/src/services/transcript-parser.js b/src/services/transcript-parser.js
@@ -125,7 +125,7 @@ export async function sanitizeTranscripts(transcripts) {
           items.map(async (item, index) => {
             const { title, url } = item;
             // For each item in the list check if it is a manifest and parse
-            // the it to identify any supplementing annotations in the 
+            // the it to identify any supplementing annotations in the
             // manifest for each canvas
             const manifestTranscripts = await getSupplementingAnnotations(url, title);
             let { isMachineGen, labelText } = identifyMachineGen(title);
@@ -139,7 +139,7 @@ export async function sanitizeTranscripts(transcripts) {
               allTranscripts = groupedTrs;
             }
 
-            // if manifest doesn't have canvases or 
+            // if manifest doesn't have canvases or
             // supplementing annotations add original transcript from props
             if (manifestTranscripts.length === 0 || manifestItems.length === 0) {
               return {