diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css index 4c74da3..ac7f8d5 100644 --- a/src/features/posts/Post.css +++ b/src/features/posts/Post.css @@ -97,10 +97,14 @@ img, video { .video-player { display: inline-flex; + flex-direction: column; + align-items: center; } -.post-audio, .post-video { - position: absolute; +#post-audio { + position: relative; + height: 3.5rem; + width: 60%; } /* Handles comment styles on toggle */ diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js index 6a96035..e27d6a5 100644 --- a/src/features/video/VideoPlayer.js +++ b/src/features/video/VideoPlayer.js @@ -5,14 +5,28 @@ export default function VideoPlayer({data, src}) { const aud = useRef(); // identifies location of video/audio in DOM const [playing, setPlaying] = useState(false); // handles play/pause logic - + const [error, setError] = useState(null); + const crossPostSrc = src; let url = crossPostSrc ? crossPostSrc : // sets video source according to applicable (data.url ? data.url : null); // location within reddit response - useEffect(() => { // synchronizes play/pause between two components - if (playing) { // according to section of state + + useEffect(() => { + const req = new XMLHttpRequest(); + req.open('HEAD', `${url}/DASH_audio.mp4`, true); + req.send(); + if (req.status === 404) { + setError(true); + } + if (req.status === 403) { + setError(true); + } + }, [url]); + + useEffect(() => { // synchronizes play/pause between two components + if (playing) { // according to section of state vid.current.play(); vid.current.currentTime = aud.current.currentTime; } else if (!playing) { @@ -22,12 +36,27 @@ export default function VideoPlayer({data, src}) { return (
- - + + { + !error ? + + <> + + + + + : + + + + + }
); } \ No newline at end of file