conditional handling for videos without audio

src/features/video/VideoPlayer.js

@@ -1,11 +1,12 @@
 import { useState, useEffect, useRef } from 'react';
 
 export default function VideoPlayer({data, src}) {
+    const vidControls = useRef();
     const vid = useRef();
     const aud = useRef();        // identifies location of video/audio in DOM
     
     const [playing, setPlaying] = useState(false);      // handles play/pause logic
-    const [error, setError] = useState(null);
+    const [audio, setAudio] = useState(null);
     
     const crossPostSrc = src;
 
@@ -13,48 +14,69 @@ export default function VideoPlayer({data, src}) {
         (data.url ? data.url : null);                   // location within reddit response
 
 
-    useEffect(() => {
+    useEffect(() => {                                       // checks the endpoint where audio may be found
-        const req = new XMLHttpRequest();
+        let checking = true;                                // if the fetch request throws an error, audio is set to null;
-        req.open('HEAD', `${url}/DASH_audio.mp4`, true);
+        const checkForAudio = async() => {                  // otherwise, audio is set to the endpoint, which is evaluated
-        req.send();
+            try {                                           // below as truthy, and rendered in the page
-        if (req.status === 404) {
+                await fetch(`${url}/DASH_audio.mp4`)
-            setError(true);
+                .then((response) => {
+                    let status = response.status;
+                    if (status > 400) {
+                        setAudio(null);
+                    } else {
+                        setAudio(`${url}/DASH_audio.mp4`);
+                    }
+                });
+            } catch(e) {
+                console.log(e);
+            }
         }
-        if (req.status === 403) {
-            setError(true);
-        }
-    }, [url]);
 
-    useEffect(() => {                         // synchronizes play/pause between two components
+        if (checking) {
-        if (playing) {                        // according to section of state
+            checkForAudio();
-            vid.current.play();
+            checking = false;
-            vid.current.currentTime = aud.current.currentTime;
+        }
+
+        return () => {
+            checking = false;
+        }
+    }, [url, audio]);
+
+    useEffect(() => {                    // this section handles simultaneous playback of audio and video
+        if (!audio) {
+            return;
+        }
+
+        if (playing) {
+            vid.current.play();                                         // synchronizes play/pause between two components
+            vid.current.currentTime = aud.current.currentTime;          // according to section of state
         } else if (!playing) {
             vid.current.pause();
         }
-    }, [playing, aud, vid]);
+    }, [playing, audio, aud, vid]);
 
     return (
         <div className="video-player">
 
             {
-                !error ? 
+                !audio ? 
 
                 <>
-                <video id="post-video" ref={vid} autoPlay={playing ? true : false} src={`${url}/DASH_1080.mp4`}>
+                <video id="post-video-no-audio" ref={vidControls} controls src={`${url}/DASH_1080.mp4` || `${url}/DASH_1080.mp4?source=fallback`}>
-                    This video is not supported by your browser.
-                </video>
-                <video id="post-audio" ref={aud} controls onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} src={`${url}/DASH_audio.mp4`}>
                     This video is not supported by your browser.
                 </video>
                 </>
 
                 :
 
-                <video id="post-video" ref={vid} controls src={`${url}/DASH_1080.mp4`}>
+                <>
+                <video id="post-video" ref={vid} autoPlay={playing ? true : false} src={`${url}/DASH_1080.mp4`}>
                     This video is not supported by your browser.
                 </video>
-
+                <video id="post-audio" ref={aud} controls onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} src={audio}>
+                    This video is not supported by your browser.
+                </video>
+                </>
 
             }
         </div>