From f3c1bbf54f1126d72fc96413248011cddda502f0 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Wed, 4 May 2022 22:39:58 -0700
Subject: [PATCH] adding audio controls

---
 .../User/Conversation/AddTopic/AddTopic.jsx   |  4 +--
 .../TopicItem/AudioAsset/AudioAsset.jsx       | 36 +++++++++++++++----
 .../TopicItem/useTopicItem.hook.js            |  2 +-
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/net/web/src/User/Conversation/AddTopic/AddTopic.jsx b/net/web/src/User/Conversation/AddTopic/AddTopic.jsx
index 84f5a946..ec1ad572 100644
--- a/net/web/src/User/Conversation/AddTopic/AddTopic.jsx
+++ b/net/web/src/User/Conversation/AddTopic/AddTopic.jsx
@@ -70,10 +70,10 @@ export function AddTopic() {
       return <img style={{ height: '100%', objectFit: 'contain' }} src={item.url} alt="" />
     }
     if (item.audio) {
-      return <ReactPlayer height="100%" width="auto" url={item.url} />
+      return <ReactPlayer controls="true" height="100%" width="auto" url={item.url} />
     }
     if (item.video) {
-      return <ReactPlayer height="100%" width="auto" url={item.url} />
+      return <ReactPlayer controls="true" height="100%" width="auto" url={item.url} />
     }
     return <></>
   }
diff --git a/net/web/src/User/Conversation/TopicItem/AudioAsset/AudioAsset.jsx b/net/web/src/User/Conversation/TopicItem/AudioAsset/AudioAsset.jsx
index 1af945cb..481de995 100644
--- a/net/web/src/User/Conversation/TopicItem/AudioAsset/AudioAsset.jsx
+++ b/net/web/src/User/Conversation/TopicItem/AudioAsset/AudioAsset.jsx
@@ -2,22 +2,41 @@ import React, { useEffect, useState } from 'react';
 import { Button } from 'antd';
 import ReactPlayer from 'react-player'
 import ReactResizeDetector from 'react-resize-detector';
-import { SoundOutlined } from '@ant-design/icons';
+import { PlayCircleOutlined, PauseCircleOutlined, SoundOutlined } from '@ant-design/icons';
 import { AudioAssetWrapper } from './AudioAsset.styled';
 
 export function AudioAsset({ label, audioUrl }) {
 
   const [active, setActive] = useState(false);
   const [dimension, setDimension] = useState({});
-  const [playing, setPlaying] = useState(false);
+  const [playing, setPlaying] = useState(true);
+  const [ready, setReady] = useState(false);
 
   useEffect(() => {
     setActive(false);
-    setPlaying(false);
+    setPlaying(true);
   }, [label, audioUrl]);
 
   const onReady = () => {
-    setPlaying(true);
+    setReady(true);
+  }
+
+  const Control = () => {
+    if (!ready) {
+      return <></>
+    }
+    if (playing) {
+      return (
+        <div onClick={() => setPlaying(false)}>
+          <PauseCircleOutlined style={{ fontSize: 48, color: '#eeeeee', cursor: 'pointer' }} />
+        </div>
+      )
+    }
+    return (
+      <div onClick={() => setPlaying(true)}>
+        <PlayCircleOutlined style={{ fontSize: 48, color: '#eeeeee', cursor: 'pointer' }} />
+      </div>
+    )
   }
 
   const Player = () => {
@@ -28,7 +47,12 @@ export function AudioAsset({ label, audioUrl }) {
         </div>
       )
     }
-    return <ReactPlayer style={{ visibility: 'hidden' }} playing={playing} height="100%" width="100%" controls="true" url={audioUrl} onReady={onReady} />
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Control />
+        <ReactPlayer style={{ position: 'absolute', top: 0, visibility: 'hidden' }} playing={playing} height="100%" width="100%" controls="true" url={audioUrl} onReady={onReady} />
+      </div>
+    )
   }
 
   return (
@@ -38,7 +62,7 @@ export function AudioAsset({ label, audioUrl }) {
           if (height != dimension.height) {
             setDimension({ height });
           }
-          return <div style={{ height: '100%', width: dimension.height, backgroundColor: 'black' }} />
+          return <div style={{ height: '100%', width: dimension.height, backgroundColor: '#444444' }} />
         }}
       </ReactResizeDetector>
       <div class="player" style={{ width: dimension.height, height: dimension.height }}>
diff --git a/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js b/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js
index 0a7b4101..f8db4630 100644
--- a/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js
+++ b/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js
@@ -67,7 +67,7 @@ export function useTopicItem(topic) {
 
   const actions = {
     getAssetUrl: (assetId) => {
-      return conversation.actions.getAssetUrl(topic.id, assetId);
+      return conversation.actions.getAssetUrl(topic?.id, assetId);
     }
   };