updating audio asset

net/web/src/User/Conversation/TopicItem/AudioAsset/AudioAsset.jsx

@@ -1,8 +1,50 @@
 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 { AudioAssetWrapper } from './AudioAsset.styled';
 
 export function AudioAsset({ label, audioUrl }) {
 
-  return <ReactPlayer height="100%" width="auto" controls="true" url={audioUrl} />
+  const [active, setActive] = useState(false);
+  const [dimension, setDimension] = useState({});
+  const [playing, setPlaying] = useState(false);
+
+  useEffect(() => {
+    setActive(false);
+    setPlaying(false);
+  }, [label, audioUrl]);
+
+  const onReady = () => {
+    setPlaying(true);
+  }
+
+  const Player = () => {
+    if (!active) {
+      return (
+        <div onClick={() => setActive(true)}>
+          <SoundOutlined style={{ fontSize: 48, color: '#eeeeee', cursor: 'pointer' }} />
+        </div>
+      )
+    }
+    return <ReactPlayer style={{ visibility: 'hidden' }} playing={playing} height="100%" width="100%" controls="true" url={audioUrl} onReady={onReady} />
+  }
+
+  return (
+    <AudioAssetWrapper>
+      <ReactResizeDetector handleWidth={false} handleHeight={true}>
+        {({ height }) => {
+          if (height != dimension.height) {
+            setDimension({ height });
+          }
+          return <div style={{ height: '100%', width: dimension.height, backgroundColor: 'black' }} />
+        }}
+      </ReactResizeDetector>
+      <div class="player" style={{ width: dimension.height, height: dimension.height }}>
+        <Player />
+      </div>
+    </AudioAssetWrapper>
+  )
 }
 

net/web/src/User/Conversation/TopicItem/AudioAsset/AudioAsset.styled.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const AudioAssetWrapper = styled.div`
+  position: relative;
+  height: 100%;
+
+  .player {
+    top: 0;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+
+

net/web/src/User/Conversation/TopicItem/VideoAsset/VideoAsset.jsx

@@ -19,10 +19,13 @@ export function VideoAsset({ thumbUrl, videoUrl }) {
   }, [thumbUrl, videoUrl]);
 
   const onReady = () => {
-    setVisibility('visible');
     setPlaying(true);
   }
 
+  const onPlay = () => {
+    setVisibility('visible');
+  }
+
   if (!thumbUrl) {
     return <ReactPlayer height="100%" width="auto" controls="true" url={videoUrl} />
   }
@@ -35,7 +38,7 @@ export function VideoAsset({ thumbUrl, videoUrl }) {
         </div>
       )
     }
-    return <ReactPlayer style={{ visibility }} playing={playing} height="100%" width="100%" controls="true" url={videoUrl} onReady={onReady} />
+    return <ReactPlayer style={{ visibility }} playing={playing} height="100%" width="100%" controls="true" url={videoUrl} onReady={onReady} onPlay={onPlay} />
   }
 
   return (