diff --git a/src/App.js b/src/App.js index bc93506..81153f9 100644 --- a/src/App.js +++ b/src/App.js @@ -8,18 +8,9 @@ function App() {
-
- -
- {/* 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? */} -
-
); diff --git a/src/App.test.js b/src/App.test.js index f6847b2..58337ba 100644 --- a/src/App.test.js +++ b/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( ); - expect(getByText(/Stuff/)).toBeInTheDocument(); + expect(getAllByText(/cat/)).toBeInTheDocument(); }); test('store is not empty or falsy', () => { diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css index ac7f8d5..8600730 100644 --- a/src/features/posts/Post.css +++ b/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 { diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js index f8cb10f..84ba1a3 100644 --- a/src/features/posts/Post.js +++ b/src/features/posts/Post.js @@ -95,7 +95,9 @@ export default function Post({data, key}) {
{title ? - {title} + + {title} + :

[untitled]

} {media ? {title} : null} diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js index 634c7d5..cd7326f 100644 --- a/src/features/video/VideoPlayer.js +++ b/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 :
{ !audio ? <> -
+ } + ); } \ No newline at end of file