From 8aa9ef9ae7afac581f725c76db85bdeea06cfb0f Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Mon, 7 Feb 2022 20:03:55 -0600
Subject: [PATCH] refactored crosspost for VideoPlayer component

---
 src/features/posts/Post.css       | 4 ++++
 src/features/posts/Post.js        | 3 +--
 src/features/video/VideoPlayer.js | 7 +++++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css
index a10a34a..d2fe0f8 100644
--- a/src/features/posts/Post.css
+++ b/src/features/posts/Post.css
@@ -93,6 +93,10 @@ img, video {
     color:rgb(228, 180, 226);
 }
 
+/* Video player */
+
+
+
 /* Handles comment styles on toggle */
 
 .comments-visible {
diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js
index 330f688..f8cb10f 100644
--- a/src/features/posts/Post.js
+++ b/src/features/posts/Post.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-// import { useDispatch } from "react-redux";
 import Discussion from "../discussion/Discussion";
 import VideoPlayer from "../video/VideoPlayer";
 import './Post.css';
@@ -71,7 +70,7 @@ export default function Post({data, key}) {
         if (data.crosspost_parent_list[0].is_video) {
             return (
                 <>
-                <video controls src={data.crosspost_parent_list[0].media.reddit_video.fallback_url}>This video is not supported by your browser.</video>
+                <VideoPlayer data={data} src={data.crosspost_parent_list[0].url} />
                 <p className="crosspost-from">Crosspost from {data.crosspost_parent_list[0].subreddit_name_prefixed}</p>
                 </>
             );
diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js
index ef7649b..5af531e 100644
--- a/src/features/video/VideoPlayer.js
+++ b/src/features/video/VideoPlayer.js
@@ -1,10 +1,13 @@
 import { useState, useEffect, useRef } from 'react';
 
-export default function VideoPlayer({data}) {
+export default function VideoPlayer({data, src}) {
     const vid = useRef();
     const aud = useRef();
 
-    let url = data.url ? data.url : null;
+    const crossPostSrc = src;
+
+    let url = crossPostSrc ? crossPostSrc : 
+        (data.url ? data.url : null);
     const [playing, setPlaying] = useState(false);
 
     useEffect(() => {