Current build 022522 #17

Merged
innocuous-symmetry merged 5 commits from current-build-022522 into master 2022-02-25 20:11:11 +00:00
2 changed files with 13 additions and 20 deletions
Showing only changes of commit b72db28c43 - Show all commits

View File

@@ -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);
}

View File

@@ -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 (
<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" controls src={url}>
This video is not supported by your browser.
</video>
</>
:
:
<>
<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={url ? url : null}>
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>
);