From eac9d6db47c45e13a4a40bb3e1ed3445018f13cf Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Mon, 7 Feb 2022 17:19:44 -0600
Subject: [PATCH 01/10] trying new method for video player

---
 src/features/posts/Post.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js
index 3882398..2b38497 100644
--- a/src/features/posts/Post.js
+++ b/src/features/posts/Post.js
@@ -3,6 +3,8 @@ import React, { useState, useEffect } from "react";
 import Discussion from "../discussion/Discussion";
 import './Post.css';
 
+// updating for video player
+
 export default function Post({data, key}) {
 
     let title = data.title;                 // imports from data passed in from Feed

From 186170fb4aadac2190bb2c02ba6ea8e7447993f3 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Mon, 7 Feb 2022 18:09:10 -0600
Subject: [PATCH 02/10] built out custom video player component

---
 src/features/posts/Post.js        | 13 +++----------
 src/features/video/VideoPlayer.js | 30 ++++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 10 deletions(-)
 create mode 100644 src/features/video/VideoPlayer.js

diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js
index 2b38497..6aa6fd1 100644
--- a/src/features/posts/Post.js
+++ b/src/features/posts/Post.js
@@ -3,8 +3,6 @@ import React, { useState, useEffect } from "react";
 import Discussion from "../discussion/Discussion";
 import './Post.css';
 
-// updating for video player
-
 export default function Post({data, key}) {
 
     let title = data.title;                 // imports from data passed in from Feed
@@ -108,16 +106,11 @@ export default function Post({data, key}) {
                 <p>View the gallery of photos corresponding to this post <a href={data.url}>here</a>.</p>
             : null}
 
-            {video ?
-                <video
-                    controls
-                    poster={data.thumbnail}
-                    preload="auto"
-                    src={video}>
-                    
+            {data.is_video ?
+                <video controls poster={data.thumbnail} preload="auto" src={`${data.url}/DASH_audio.mp4`} type="video/mp4">
                     Your video is not supported by the browser.
                 </video>
-            : ''}
+            : null}
 
             {body ?
                 <p onMouseOver={handleHover} onMouseOut={handleMouseOut}>{body}</p>
diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js
new file mode 100644
index 0000000..ad9198e
--- /dev/null
+++ b/src/features/video/VideoPlayer.js
@@ -0,0 +1,30 @@
+import { useState, useRef } from 'react';
+
+export default function VideoPlayer({data}) {
+    let playerVideo = useRef();
+    let playerAudio = useRef();
+    const [playing, setPlaying] = useState(false);
+
+    let url = data.url ? data.url : null;
+
+    const handlePlay = () => {
+        setPlaying(true);
+
+        if (playing) {
+            playerAudio.current.currentTime = playerVideo.current.currentTime;
+            setPlaying(false);
+        }
+    }
+
+    const handlePause = () => {
+        playerAudio.current.pause();
+        setPlaying(false);
+    }
+
+    return (
+        <div className="video-player">
+            <video ref={playerVideo.current} src={`${url}/DASH_1080.mp4`} onPlay={handlePlay} onPause={handlePause}></video>
+            <audio ref={playerAudio.current} className="audio-hidden" src={`${url}/DASH_audio.mp4`} type="audio/mp4"></audio>
+        </div>
+    );
+}
\ No newline at end of file

From ad230bdf0703ba7425d775c058b55f3e8e16f2c8 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Mon, 7 Feb 2022 19:05:52 -0600
Subject: [PATCH 03/10] seems to work. runs very slowly.

---
 src/features/posts/Post.css       | 13 +++++++++++
 src/features/posts/Post.js        | 21 +++++++++---------
 src/features/video/VideoPlayer.js | 37 +++++++++++++++++--------------
 3 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css
index 3395be0..a10a34a 100644
--- a/src/features/posts/Post.css
+++ b/src/features/posts/Post.css
@@ -64,6 +64,19 @@ img, video {
     color: rgb(97, 49, 95);
 }
 
+.gallery-statement {
+    color: rgb(228, 180, 226);
+}
+
+.gallery-statement a {
+    color: white;
+    text-decoration: none;
+}
+
+.gallery-statement a:active {
+    color:rgb(97, 49, 95);
+}
+
 .num-comments {
     display: inline-flex;
     background-color: #7196be;
diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js
index 6aa6fd1..330f688 100644
--- a/src/features/posts/Post.js
+++ b/src/features/posts/Post.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 // import { useDispatch } from "react-redux";
 import Discussion from "../discussion/Discussion";
+import VideoPlayer from "../video/VideoPlayer";
 import './Post.css';
 
 export default function Post({data, key}) {
@@ -14,11 +15,6 @@ export default function Post({data, key}) {
     let media = data.post_hint === 'image' && data.url;
     let permalink = data.permalink;
     let selftext = data.selftext;
-    let video = data.is_video ? `${data.url}/DASH_1080.mp4` : null;       // to do: handle media edge cases, especially video
-
-    // fallback_url: "https://v.redd.it/0rditq5l49g81/DASH_1080.mp4?source=fallback"
-    // url: "https://v.redd.it/0rditq5l49g81"
-    // id: "sm2wym"
 
     const limit = 300;
     const [body, setBody] = useState(selftext);
@@ -90,6 +86,10 @@ export default function Post({data, key}) {
             return;
         }
     }
+
+    // Render function below:
+    // Each is preceded by a conditional so the program does not throw an error
+    // before the fetch requests' promises are fulfilled.
     
     return (
         <>
@@ -99,17 +99,16 @@ export default function Post({data, key}) {
                 <a className="title" href={`https://reddit.com${permalink}`}>{title}</a>
             : <p>[untitled]</p>}
 
-            {media ? <img alt={title} src={media} /> : ''}
-            {data.crosspost_parent_list ? handleCrosspost() : ''}
+            {media ? <img alt={title} src={media} /> : null}
+
+            {data.crosspost_parent_list ? handleCrosspost() : null}
 
             {data.gallery_data ?
-                <p>View the gallery of photos corresponding to this post <a href={data.url}>here</a>.</p>
+                <p className="gallery-statement">View the gallery of photos corresponding to this post <a href={data.url}>here</a>.</p>
             : null}
 
             {data.is_video ?
-                <video controls poster={data.thumbnail} preload="auto" src={`${data.url}/DASH_audio.mp4`} type="video/mp4">
-                    Your video is not supported by the browser.
-                </video>
+                <VideoPlayer data={data} />
             : null}
 
             {body ?
diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js
index ad9198e..7309127 100644
--- a/src/features/video/VideoPlayer.js
+++ b/src/features/video/VideoPlayer.js
@@ -1,30 +1,33 @@
-import { useState, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 
 export default function VideoPlayer({data}) {
-    let playerVideo = useRef();
-    let playerAudio = useRef();
-    const [playing, setPlaying] = useState(false);
+    const vid = useRef();
+    const aud = useRef();
+
+    const vidPosition = useRef(0);
+    const audPosition = useRef(0);
 
     let url = data.url ? data.url : null;
+    const [playing, setPlaying] = useState(false);
 
-    const handlePlay = () => {
-        setPlaying(true);
-
+    useEffect(() => {
         if (playing) {
-            playerAudio.current.currentTime = playerVideo.current.currentTime;
-            setPlaying(false);
+            aud.current.play();
+            vid.current.currentTime = aud.current.currentTime;
+        } else if (!playing) {
+            aud.current.pause();
         }
-    }
-
-    const handlePause = () => {
-        playerAudio.current.pause();
-        setPlaying(false);
-    }
+    }, [playing, aud, vid]);
 
     return (
         <div className="video-player">
-            <video ref={playerVideo.current} src={`${url}/DASH_1080.mp4`} onPlay={handlePlay} onPause={handlePause}></video>
-            <audio ref={playerAudio.current} className="audio-hidden" src={`${url}/DASH_audio.mp4`} type="audio/mp4"></audio>
+            <video ref={vid} controls onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} src={`${url}/DASH_1080.mp4`}>
+                This video is not supported by your browser.
+            </video>
+            <video ref={aud} controls autoPlay={() => playing ? true : false} src={`${url}/DASH_audio.mp4`}>
+                This video is not supported by your browser.
+            </video>
+            <h1 style={{'color': 'white'}}>{playing.toString()}</h1>
         </div>
     );
 }
\ No newline at end of file

From 002b5f7c2c4d8df2d6888ac0d5f227456a456cb4 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Mon, 7 Feb 2022 20:01:08 -0600
Subject: [PATCH 04/10] passed play function to audio tag

---
 src/features/video/VideoPlayer.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js
index 7309127..ef7649b 100644
--- a/src/features/video/VideoPlayer.js
+++ b/src/features/video/VideoPlayer.js
@@ -4,30 +4,26 @@ export default function VideoPlayer({data}) {
     const vid = useRef();
     const aud = useRef();
 
-    const vidPosition = useRef(0);
-    const audPosition = useRef(0);
-
     let url = data.url ? data.url : null;
     const [playing, setPlaying] = useState(false);
 
     useEffect(() => {
         if (playing) {
-            aud.current.play();
+            vid.current.play();
             vid.current.currentTime = aud.current.currentTime;
         } else if (!playing) {
-            aud.current.pause();
+            vid.current.pause();
         }
     }, [playing, aud, vid]);
 
     return (
         <div className="video-player">
-            <video ref={vid} controls onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} 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 ref={aud} controls autoPlay={() => playing ? true : false} src={`${url}/DASH_audio.mp4`}>
+            <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>
-            <h1 style={{'color': 'white'}}>{playing.toString()}</h1>
         </div>
     );
 }
\ No newline at end of file

From 8aa9ef9ae7afac581f725c76db85bdeea06cfb0f Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Mon, 7 Feb 2022 20:03:55 -0600
Subject: [PATCH 05/10] refactored crosspost for VideoPlayer component

---
 src/features/posts/Post.css       | 4 ++++
 src/features/posts/Post.js        | 3 +--
 src/features/video/VideoPlayer.js | 7 +++++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css
index a10a34a..d2fe0f8 100644
--- a/src/features/posts/Post.css
+++ b/src/features/posts/Post.css
@@ -93,6 +93,10 @@ img, video {
     color:rgb(228, 180, 226);
 }
 
+/* Video player */
+
+
+
 /* Handles comment styles on toggle */
 
 .comments-visible {
diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js
index 330f688..f8cb10f 100644
--- a/src/features/posts/Post.js
+++ b/src/features/posts/Post.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-// import { useDispatch } from "react-redux";
 import Discussion from "../discussion/Discussion";
 import VideoPlayer from "../video/VideoPlayer";
 import './Post.css';
@@ -71,7 +70,7 @@ export default function Post({data, key}) {
         if (data.crosspost_parent_list[0].is_video) {
             return (
                 <>
-                <video controls src={data.crosspost_parent_list[0].media.reddit_video.fallback_url}>This video is not supported by your browser.</video>
+                <VideoPlayer data={data} src={data.crosspost_parent_list[0].url} />
                 <p className="crosspost-from">Crosspost from {data.crosspost_parent_list[0].subreddit_name_prefixed}</p>
                 </>
             );
diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js
index ef7649b..5af531e 100644
--- a/src/features/video/VideoPlayer.js
+++ b/src/features/video/VideoPlayer.js
@@ -1,10 +1,13 @@
 import { useState, useEffect, useRef } from 'react';
 
-export default function VideoPlayer({data}) {
+export default function VideoPlayer({data, src}) {
     const vid = useRef();
     const aud = useRef();
 
-    let url = data.url ? data.url : null;
+    const crossPostSrc = src;
+
+    let url = crossPostSrc ? crossPostSrc : 
+        (data.url ? data.url : null);
     const [playing, setPlaying] = useState(false);
 
     useEffect(() => {

From 24493767f9516edaee250f835d34f447efde0d92 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Mon, 7 Feb 2022 20:08:52 -0600
Subject: [PATCH 06/10] documentation

---
 src/features/posts/Post.css       |  6 ++++++
 src/features/video/VideoPlayer.js | 13 +++++++------
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css
index d2fe0f8..4c74da3 100644
--- a/src/features/posts/Post.css
+++ b/src/features/posts/Post.css
@@ -95,7 +95,13 @@ img, video {
 
 /* Video player */
 
+.video-player {
+    display: inline-flex;
+}
 
+.post-audio, .post-video {
+    position: absolute;
+}
 
 /* Handles comment styles on toggle */
 
diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js
index 5af531e..6a96035 100644
--- a/src/features/video/VideoPlayer.js
+++ b/src/features/video/VideoPlayer.js
@@ -2,16 +2,17 @@ import { useState, useEffect, useRef } from 'react';
 
 export default function VideoPlayer({data, src}) {
     const vid = useRef();
-    const aud = useRef();
+    const aud = useRef();        // identifies location of video/audio in DOM
+    
+    const [playing, setPlaying] = useState(false);      // handles play/pause logic
 
     const crossPostSrc = src;
 
-    let url = crossPostSrc ? crossPostSrc : 
-        (data.url ? data.url : null);
-    const [playing, setPlaying] = useState(false);
+    let url = crossPostSrc ? crossPostSrc :             // sets video source according to applicable
+        (data.url ? data.url : null);                   // location within reddit response
 
-    useEffect(() => {
-        if (playing) {
+    useEffect(() => {                   // synchronizes play/pause between two components
+        if (playing) {                  // according to section of state
             vid.current.play();
             vid.current.currentTime = aud.current.currentTime;
         } else if (!playing) {

From 05711d49de535bdd8e1abefaaa453bff9277f7de Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Mon, 7 Feb 2022 20:41:39 -0600
Subject: [PATCH 07/10] works decently well for now. a few videos do not play
 back.

---
 src/features/posts/Post.css       |  8 ++++--
 src/features/video/VideoPlayer.js | 47 +++++++++++++++++++++++++------
 2 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css
index 4c74da3..ac7f8d5 100644
--- a/src/features/posts/Post.css
+++ b/src/features/posts/Post.css
@@ -97,10 +97,14 @@ img, video {
 
 .video-player {
     display: inline-flex;
+    flex-direction: column;
+    align-items: center;
 }
 
-.post-audio, .post-video {
-    position: absolute;
+#post-audio {
+    position: relative;
+    height: 3.5rem;
+    width: 60%;
 }
 
 /* Handles comment styles on toggle */
diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js
index 6a96035..e27d6a5 100644
--- a/src/features/video/VideoPlayer.js
+++ b/src/features/video/VideoPlayer.js
@@ -5,14 +5,28 @@ export default function VideoPlayer({data, src}) {
     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 crossPostSrc = src;
 
     let url = crossPostSrc ? crossPostSrc :             // sets video source according to applicable
         (data.url ? data.url : null);                   // location within reddit response
 
-    useEffect(() => {                   // synchronizes play/pause between two components
-        if (playing) {                  // according to section of state
+
+    useEffect(() => {
+        const req = new XMLHttpRequest();
+        req.open('HEAD', `${url}/DASH_audio.mp4`, true);
+        req.send();
+        if (req.status === 404) {
+            setError(true);
+        }
+        if (req.status === 403) {
+            setError(true);
+        }
+    }, [url]);
+
+    useEffect(() => {                         // synchronizes play/pause between two components
+        if (playing) {                        // according to section of state
             vid.current.play();
             vid.current.currentTime = aud.current.currentTime;
         } else if (!playing) {
@@ -22,12 +36,27 @@ export default function VideoPlayer({data, src}) {
 
     return (
         <div className="video-player">
-            <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={`${url}/DASH_audio.mp4`}>
-                This video is not supported by your browser.
-            </video>
+
+            {
+                !error ? 
+
+                <>
+                <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={`${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`}>
+                    This video is not supported by your browser.
+                </video>
+
+
+            }
         </div>
     );
 }
\ No newline at end of file

From 4032730b9bfea720e52627329f4cc6752a9ef670 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Tue, 8 Feb 2022 11:31:57 -0600
Subject: [PATCH 08/10] conditional handling for videos without audio

---
 src/features/video/VideoPlayer.js | 68 ++++++++++++++++++++-----------
 1 file changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js
index e27d6a5..f1928e7 100644
--- a/src/features/video/VideoPlayer.js
+++ b/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(() => {
-        const req = new XMLHttpRequest();
-        req.open('HEAD', `${url}/DASH_audio.mp4`, true);
-        req.send();
-        if (req.status === 404) {
-            setError(true);
+    useEffect(() => {                                       // checks the endpoint where audio may be found
+        let checking = true;                                // if the fetch request throws an error, audio is set to null;
+        const checkForAudio = async() => {                  // otherwise, audio is set to the endpoint, which is evaluated
+            try {                                           // below as truthy, and rendered in the page
+                await fetch(`${url}/DASH_audio.mp4`)
+                .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 (playing) {                        // according to section of state
-            vid.current.play();
-            vid.current.currentTime = aud.current.currentTime;
+        if (checking) {
+            checkForAudio();
+            checking = false;
+        }
+
+        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`}>
-                    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`}>
+                <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-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>

From f4f2d5cc9f20131490992941fdd58fc57ede5eb1 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Tue, 8 Feb 2022 11:34:07 -0600
Subject: [PATCH 09/10] refactoring for legibility

---
 src/features/video/VideoPlayer.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js
index f1928e7..0267c36 100644
--- a/src/features/video/VideoPlayer.js
+++ b/src/features/video/VideoPlayer.js
@@ -10,9 +10,15 @@ export default function VideoPlayer({data, src}) {
     
     const crossPostSrc = src;
 
-    let url = crossPostSrc ? crossPostSrc :             // sets video source according to applicable
-        (data.url ? data.url : null);                   // location within reddit response
+    let url;                      // contains video source, routed accordingly by logic below
 
+    if (crossPostSrc) {
+        url = crossPostSrc;
+    } else if (data.url) {
+        url = data.url;
+    } else {
+        url = null;
+    }
 
     useEffect(() => {                                       // checks the endpoint where audio may be found
         let checking = true;                                // if the fetch request throws an error, audio is set to null;

From c507eed52105747c5058f9877a7e76e71a193147 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Tue, 8 Feb 2022 11:35:38 -0600
Subject: [PATCH 10/10] preparing to ship

---
 src/features/video/VideoPlayer.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js
index 0267c36..634c7d5 100644
--- a/src/features/video/VideoPlayer.js
+++ b/src/features/video/VideoPlayer.js
@@ -10,14 +10,14 @@ export default function VideoPlayer({data, src}) {
     
     const crossPostSrc = src;
 
-    let url;                      // contains video source, routed accordingly by logic below
+    let url;        // contains video source, routed accordingly by logic below
 
     if (crossPostSrc) {
-        url = crossPostSrc;
+        url = crossPostSrc;         // ... for crossposts
     } else if (data.url) {
-        url = data.url;
-    } else {
-        url = null;
+        url = data.url;             // ... for local posts, where the url
+    } else {                        // can be accessed at data.url
+        url = null;                 // otherwise, is null
     }
 
     useEffect(() => {                                       // checks the endpoint where audio may be found