src/App.js

@@ -8,18 +8,9 @@ function App() {
     <div className="App">
       <Navbar />
       <div className="content-container">
-
         <div className="feed">
           <Feed />
         </div>
-        
-        <div className="about-the-site">
-          {/* To do: add mutable state to class name for this div, */}
-          {/* determining whether or not it's active based on the state of */}
-          {/* The action dispatched from the searchbar slice(?) */}
-          {/* Do I need a searchbar slice? */}
-        </div>
-
       </div>
     </div>
   );

src/App.test.js

@@ -4,14 +4,14 @@ import { Provider } from 'react-redux';
 import { store } from './app/store';
 import App from './App';
 
-test('renders text', () => {
+test('renders a title', () => {
   const { getByText } = render(
     <Provider store={store}>
       <App />
     </Provider>
   );
 
-  expect(getByText(/Stuff/)).toBeInTheDocument();
+  expect(getAllByText(/cat/)).toBeInTheDocument();
 });
 
 test('store is not empty or falsy', () => {

src/features/posts/Post.css

@@ -99,6 +99,7 @@ img, video {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
+    max-width: 60%;
 }
 
 #post-audio {

src/features/posts/Post.js

@@ -95,7 +95,9 @@ export default function Post({data, key}) {
         <div className="post-body" key={key}>
 
             {title ?
-                <a className="title" href={`https://reddit.com${permalink}`}>{title}</a>
+            
+            <a className="title" href={`https://reddit.com${permalink}`}>{title}</a>
+            
             : <p>[untitled]</p>}
 
             {media ? <img alt={title} src={media} /> : null}

src/features/video/VideoPlayer.js

@@ -7,6 +7,7 @@ export default function VideoPlayer({data, src}) {
     
     const [playing, setPlaying] = useState(false);      // handles play/pause logic
     const [audio, setAudio] = useState(null);
+    const [video, setVideo] = useState(null);
     
     const crossPostSrc = src;
 
@@ -38,18 +39,34 @@ export default function VideoPlayer({data, src}) {
             }
         }
 
+        const checkForVideo = async(source) => {
+            try {
+                await fetch(source)
+                .then((response) => {
+                    if (response.status > 400) {
+                        setVideo(null);
+                    } else {
+                        setVideo(source);
+                    }
+                });
+            } catch(e) {
+                console.log(e);
+            }
+        }
+
         if (checking) {
             checkForAudio();
+            checkForVideo(data.media.reddit_video.fallback_url);
             checking = false;
         }
 
         return () => {
             checking = false;
         }
-    }, [url, audio]);
+    }, [url, video, data, audio]);
 
     useEffect(() => {                    // this section handles simultaneous playback of audio and video
-        if (!audio) {
+        if (!audio || !video) {
             return;
         }
 
@@ -59,16 +76,18 @@ export default function VideoPlayer({data, src}) {
         } else if (!playing) {
             vid.current.pause();
         }
-    }, [playing, audio, aud, vid]);
+    }, [playing, video, audio, aud, vid]);
 
     return (
+        <>
+        {!video ? null :
         <div className="video-player">
 
             {
                 !audio ? 
 
                 <>
-                <video id="post-video-no-audio" ref={vidControls} controls src={`${url}/DASH_1080.mp4` || `${url}/DASH_1080.mp4?source=fallback`}>
+                <video id="post-video-no-audio" ref={vidControls} controls src={video}>
                     This video is not supported by your browser.
                 </video>
                 </>
@@ -76,7 +95,7 @@ export default function VideoPlayer({data, src}) {
                 :
 
                 <>
-                <video id="post-video" ref={vid} autoPlay={playing ? true : false} src={`${url}/DASH_1080.mp4`}>
+                <video id="post-video" ref={vid} autoPlay={playing ? true : false} src={video}>
                     This video is not supported by your browser.
                 </video>
                 <video id="post-audio" ref={aud} controls onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} src={audio}>
@@ -86,5 +105,7 @@ export default function VideoPlayer({data, src}) {
 
             }
         </div>
+        }
+        </>
     );
 }