From b72db28c43ac4e163f59ffe68325af372aeeaca3 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Wed, 23 Feb 2022 16:10:26 -0600 Subject: [PATCH 1/4] restored video function, app renders without crashing --- src/features/posts/Feed.js | 5 +---- src/features/video/VideoPlayer.js | 28 ++++++++++++---------------- 2 files changed, 13 insertions(+), 20 deletions(-) diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js index 1852296..5f13342 100644 --- a/src/features/posts/Feed.js +++ b/src/features/posts/Feed.js @@ -2,7 +2,6 @@ import React, { useState, useEffect } from "react"; import { fetchBySub, /* selectPosts */ } from "./postsSlice"; import { selectAllSubs } from "../reddit/redditSlice"; import { useSelector, useDispatch } from "react-redux"; -// import { updatePosts } from "./postsSlice"; import { v4 } from "uuid"; import Post from "./Post"; @@ -15,7 +14,6 @@ export default function Feed() { const [currentPage, setCurrentPage] = useState(0); // Determines current feed page; corresponds to index of feedPage array const dispatch = useDispatch(); - // const posts = useSelector(selectPosts); const subs = useSelector(selectAllSubs); // Selects subreddits from redditSlice useEffect(() => { // this useEffect loop pulls the endpoints from the selected subreddits and stores them as an array in "endpoints" @@ -82,7 +80,7 @@ export default function Feed() { let sortedPosts = extractedPosts.sort(comparePosts); // implements sorting function - console.log(sortedPosts); + // console.log(sortedPosts); let newFeed = sortedPosts.map((post) => { return ( @@ -93,7 +91,6 @@ export default function Feed() { ) }) - // dispatch(updatePosts(newFeed)); // stores current feed in state of postsSlice setFeed(newFeed); } diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js index 634c7d5..fd966d2 100644 --- a/src/features/video/VideoPlayer.js +++ b/src/features/video/VideoPlayer.js @@ -1,7 +1,6 @@ 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 @@ -13,24 +12,23 @@ export default function VideoPlayer({data, src}) { let url; // contains video source, routed accordingly by logic below if (crossPostSrc) { - url = crossPostSrc; // ... for crossposts - } else if (data.url) { - url = data.url; // ... for local posts, where the url - } else { // can be accessed at data.url - url = null; // otherwise, is null + url = crossPostSrc; + } else if (data.media.reddit_video.fallback_url) { + url = data.media.reddit_video.fallback_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; 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`) + await fetch(`${data.url}/DASH_audio.mp4`) .then((response) => { - let status = response.status; - if (status > 400) { + if (!response.ok) { setAudio(null); } else { - setAudio(`${url}/DASH_audio.mp4`); + setAudio(`${data.url}/DASH_audio.mp4`); } }); } catch(e) { @@ -53,7 +51,7 @@ export default function VideoPlayer({data, src}) { return; } - if (playing) { + if (audio && playing) { vid.current.play(); // synchronizes play/pause between two components vid.current.currentTime = aud.current.currentTime; // according to section of state } else if (!playing) { @@ -63,27 +61,25 @@ export default function VideoPlayer({data, src}) { return (
- { !audio ? <> -
); From 6c3165e9fe4472b3acc144c3135d95479acb638d Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Fri, 25 Feb 2022 13:41:02 -0600 Subject: [PATCH 2/4] added dependency to useEffect --- src/features/video/VideoPlayer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js index fd966d2..b316f3b 100644 --- a/src/features/video/VideoPlayer.js +++ b/src/features/video/VideoPlayer.js @@ -44,7 +44,7 @@ export default function VideoPlayer({data, src}) { return () => { checking = false; } - }, [url, audio]); + }, [url, data, audio]); useEffect(() => { // this section handles simultaneous playback of audio and video if (!audio) { From 84ca93ef8ee735b8e7a6722b7704eeae29dee612 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Fri, 25 Feb 2022 13:51:35 -0600 Subject: [PATCH 3/4] cleaned up formatting --- src/App.css | 9 ++---- src/App.js | 15 +-------- src/features/discussion/Discussion.js | 24 +-------------- src/features/posts/Feed.js | 44 +++++++++++++-------------- src/features/searchBar/searchBar.js | 7 ++--- 5 files changed, 28 insertions(+), 71 deletions(-) diff --git a/src/App.css b/src/App.css index 795b920..9563cf1 100644 --- a/src/App.css +++ b/src/App.css @@ -126,17 +126,12 @@ /* Feed */ -.content-container { - display: inline-flex; - position: relative; - top: 5rem; - flex-direction: row; -} - .feed { display: inline-flex; + position: relative; flex-direction: column; align-items: center; + top: 5rem; width: 90vw; } diff --git a/src/App.js b/src/App.js index bc93506..47ef29b 100644 --- a/src/App.js +++ b/src/App.js @@ -7,20 +7,7 @@ function App() { return (
-
- -
- -
- -
- {/* 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/features/discussion/Discussion.js b/src/features/discussion/Discussion.js index 89502c2..1eaabd5 100644 --- a/src/features/discussion/Discussion.js +++ b/src/features/discussion/Discussion.js @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { useDispatch, /* useSelector */ } from 'react-redux'; +import { useDispatch } from 'react-redux'; import { unwrapResult } from '@reduxjs/toolkit'; import { fetchComments } from '../posts/postsSlice'; import { v4 } from 'uuid'; @@ -27,23 +27,6 @@ export default function Discussion({permalink, isVisible}) { }, [dispatch, formattedLink, isVisible, setData]); - // if (data) { - // let commentData = data[1]; - // let commentArray = commentData.data.children; - - // let toExport = []; - // for (let comment of commentArray) { - // toExport.push( - //
- //

{'u/' + comment.data.author}

- //

{comment.data.body}

- //
- // ); - // } - - // setThread(toExport); - // } - useEffect(() => { if (data) { let commentData = data[1]; @@ -51,9 +34,6 @@ export default function Discussion({permalink, isVisible}) { const getReplies = (comment) => { if (comment.data.replies) { - console.log(comment.data.replies.data.children); - console.log(comment.data.replies.data.children[0].data.author) - return (

@@ -69,8 +49,6 @@ export default function Discussion({permalink, isVisible}) { } } - console.log(data); - setThread(comments.map((comment) => { return ( <> diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js index 5f13342..a063eda 100644 --- a/src/features/posts/Feed.js +++ b/src/features/posts/Feed.js @@ -79,8 +79,6 @@ export default function Feed() { } let sortedPosts = extractedPosts.sort(comparePosts); // implements sorting function - - // console.log(sortedPosts); let newFeed = sortedPosts.map((post) => { return ( @@ -155,27 +153,29 @@ export default function Feed() { } return ( - <> - {feedPages ? +

-
- -

Page {currentPage + 1} of {feedPages.length ? (feedPages.length + 1) : 'unknown'}

- + {feedPages ? + +
+ +

Page {currentPage + 1} of {feedPages.length ? (feedPages.length + 1) : 'unknown'}

+ +
+ + : null } + + {feedPages ? feedPages[currentPage] :

Loading cats for you...

} + {feedPages ? + +
+ +

Page {currentPage + 1} of {feedPages.length ? (feedPages.length + 1) : 'unknown'}

+ +
+ + : null } +
- - : null } - - {feedPages ? feedPages[currentPage] :

Loading cats for you...

} - {feedPages ? - -
- -

Page {currentPage + 1} of {feedPages.length ? (feedPages.length + 1) : 'unknown'}

- -
- - : null } - ); } \ No newline at end of file diff --git a/src/features/searchBar/searchBar.js b/src/features/searchBar/searchBar.js index 1a64c02..f84901b 100644 --- a/src/features/searchBar/searchBar.js +++ b/src/features/searchBar/searchBar.js @@ -1,17 +1,14 @@ import React, { useState, useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { searchByActive, /* selectSearchResults */ } from '../posts/postsSlice'; -import { selectActive, /* selectAllSubs */ } from "../reddit/redditSlice"; +import { searchByActive } from '../posts/postsSlice'; +import { selectActive } from "../reddit/redditSlice"; export default function SearchBar() { const dispatch = useDispatch(); - - // const selectedSubs = useSelector(selectAllSubs); const activeSubs = useSelector(selectActive); const [term, setTerm] = useState(''); const [results, setResults] = useState(null); - // const searchData = useSelector(selectSearchResults); const handleChange = (e) => { e.preventDefault(); From 4f13c5d00814126c4998677908fbe961182c4eed Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Fri, 25 Feb 2022 14:10:17 -0600 Subject: [PATCH 4/4] merge conflict handling --- src/features/video/VideoPlayer.js | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js index c9e284a..330ade0 100644 --- a/src/features/video/VideoPlayer.js +++ b/src/features/video/VideoPlayer.js @@ -16,7 +16,7 @@ export default function VideoPlayer({data, src}) { url = crossPostSrc; } else if (data.media.reddit_video.fallback_url) { url = data.media.reddit_video.fallback_url; - } else { + } else { url = null; } @@ -54,18 +54,14 @@ export default function VideoPlayer({data, src}) { if (checking) { checkForAudio(); - checkForVideo(data.media.reddit_video.fallback_url); + checkForVideo(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 || !video) { @@ -88,11 +84,7 @@ export default function VideoPlayer({data, src}) { !audio ? <> -<<<<<<< HEAD -