diff --git a/src/App.css b/src/App.css index 9563cf1..af19ee1 100644 --- a/src/App.css +++ b/src/App.css @@ -130,9 +130,11 @@ display: inline-flex; position: relative; flex-direction: column; + position: relative; align-items: center; top: 5rem; width: 90vw; + top: 5rem; } /* Page handling */ diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index f6847b2..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { Provider } from 'react-redux'; -import { store } from './app/store'; -import App from './App'; - -test('renders text', () => { - const { getByText } = render( - - - - ); - - expect(getByText(/Stuff/)).toBeInTheDocument(); -}); - -test('store is not empty or falsy', () => { - expect(store).not.toBeNull(); -}) \ No newline at end of file diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css index ac7f8d5..8b4eca5 100644 --- a/src/features/posts/Post.css +++ b/src/features/posts/Post.css @@ -3,7 +3,8 @@ .post-body { display: inline-flex; flex-direction: column; - width: 75%; + align-items: center; + width: 85%; padding: 1rem 2rem; border-radius: 10px; background-color: rgb(29, 4, 39); @@ -28,6 +29,7 @@ img, video { max-height: 45rem; + max-width: 95%; object-fit: contain; } @@ -35,6 +37,7 @@ img, video { .post-metadata { display: inline-flex; + width: 90%; margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid gray; @@ -99,6 +102,7 @@ img, video { display: inline-flex; flex-direction: column; align-items: center; + max-width: 80%; } #post-audio { diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js index f8cb10f..5421762 100644 --- a/src/features/posts/Post.js +++ b/src/features/posts/Post.js @@ -91,11 +91,12 @@ export default function Post({data, key}) { // before the fetch requests' promises are fulfilled. return ( - <>
{title ? - {title} + + {title} + :

[untitled]

} {media ? {title} : null} @@ -129,8 +130,6 @@ export default function Post({data, key}) {
-
- ); } \ No newline at end of file diff --git a/src/features/reddit/redditSlice.test.js b/src/features/reddit/redditSlice.test.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/features/sidebar/Sidebar.js b/src/features/sidebar/Sidebar.js index b64c2c2..4ee9cba 100644 --- a/src/features/sidebar/Sidebar.js +++ b/src/features/sidebar/Sidebar.js @@ -1,5 +1,5 @@ -import React, { useRef, useState } from "react"; -import { useSelector, /* useDispatch */ } from "react-redux"; +import React from "react"; +import { useSelector } from "react-redux"; import { selectAllSubs } from "../reddit/redditSlice"; import { v4 } from 'uuid'; import SidebarItem from "./SidebarItem"; @@ -9,41 +9,17 @@ export default function Sidebar({isCollapsed}) { const allSubs = useSelector(selectAllSubs); let arrayOfSubs = Object.keys(allSubs); - // const [subs, setSubs] = useState(arrayOfSubs); // this piece of state to be used to modify state based on a dispatched action - const [searchSubs, setSearchSubs] = useState(''); // from sidebaritems when the visibility of a sub is toggled on/off - - const searchWindowStyle = useRef('search-inactive'); // this ref allows us to access and modify the class of the search window container from another part of the render function - - const handleChange = (e) => { - e.preventDefault(); - if (e.target.value) { // this logic locally stores the search term in searchSubs, - searchWindowStyle.current = 'search-active'; // and will dispatch a search action from the reddit slice - setSearchSubs(e.target.value); // based on the provided term - } else if (e.target.value === '') { - searchWindowStyle.current = 'search-inactive'; - setSearchSubs(''); - } - } - return ( - <> - {/* isCollapsed is passed from the parent component, and is mutable within the navbar */} + // isCollapsed is passed from the parent component, and is mutable within the navbar +
- { // arrayOfSubs will become subs from useState on implementation of useState - arrayOfSubs.map((sub) => { // Maps each sub to its own line within the sidebar, along with a button that toggles its "isSelected" property + { + arrayOfSubs.map((sub) => { return ( ) }) } -
- - {/* displays subreddit search results */} -
-

Search Results for: {searchSubs}

-

(results here)

-
- ); } \ No newline at end of file diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js index b316f3b..c9e284a 100644 --- a/src/features/video/VideoPlayer.js +++ b/src/features/video/VideoPlayer.js @@ -6,6 +6,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; @@ -36,18 +37,38 @@ 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; } +<<<<<<< HEAD }, [url, data, audio]); +======= + }, [url, video, data, audio]); +>>>>>>> origin/master useEffect(() => { // this section handles simultaneous playback of audio and video - if (!audio) { + if (!audio || !video) { return; } @@ -57,15 +78,21 @@ 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 ? <> +<<<<<<< HEAD
+ } + ); } \ No newline at end of file