From 186170fb4aadac2190bb2c02ba6ea8e7447993f3 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Mon, 7 Feb 2022 18:09:10 -0600
Subject: [PATCH] built out custom video player component

---
 src/features/posts/Post.js        | 13 +++----------
 src/features/video/VideoPlayer.js | 30 ++++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 10 deletions(-)
 create mode 100644 src/features/video/VideoPlayer.js

diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js
index 2b38497..6aa6fd1 100644
--- a/src/features/posts/Post.js
+++ b/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>
diff --git a/src/features/video/VideoPlayer.js b/src/features/video/VideoPlayer.js
new file mode 100644
index 0000000..ad9198e
--- /dev/null
+++ b/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>
+    );
+}
\ No newline at end of file