built out custom video player component

src/features/posts/Post.js

@@ -3,8 +3,6 @@ import React, { useState, useEffect } from "react";
 import Discussion from "../discussion/Discussion";
 import './Post.css';
 
-// updating for video player
-
 export default function Post({data, key}) {
 
     let title = data.title;                 // imports from data passed in from Feed
@@ -108,16 +106,11 @@ export default function Post({data, key}) {
                 <p>View the gallery of photos corresponding to this post <a href={data.url}>here</a>.</p>
             : null}
 
-            {video ?
-                <video
-                    controls
-                    poster={data.thumbnail}
-                    preload="auto"
-                    src={video}>
-                    
+            {data.is_video ?
+                <video controls poster={data.thumbnail} preload="auto" src={`${data.url}/DASH_audio.mp4`} type="video/mp4">
                     Your video is not supported by the browser.
                 </video>
-            : ''}
+            : null}
 
             {body ?
                 <p onMouseOver={handleHover} onMouseOut={handleMouseOut}>{body}</p>

src/features/video/VideoPlayer.js

@@ -0,0 +1,30 @@
+import { useState, useRef } from 'react';
+
+export default function VideoPlayer({data}) {
+    let playerVideo = useRef();
+    let playerAudio = useRef();
+    const [playing, setPlaying] = useState(false);
+
+    let url = data.url ? data.url : null;
+
+    const handlePlay = () => {
+        setPlaying(true);
+
+        if (playing) {
+            playerAudio.current.currentTime = playerVideo.current.currentTime;
+            setPlaying(false);
+        }
+    }
+
+    const handlePause = () => {
+        playerAudio.current.pause();
+        setPlaying(false);
+    }
+
+    return (
+        <div className="video-player">
+            <video ref={playerVideo.current} src={`${url}/DASH_1080.mp4`} onPlay={handlePlay} onPause={handlePause}></video>
+            <audio ref={playerAudio.current} className="audio-hidden" src={`${url}/DASH_audio.mp4`} type="audio/mp4"></audio>
+        </div>
+    );
+}