using audio tag for audio playback

net/web/src/context/useUploadContext.hook.js

@@ -188,7 +188,7 @@ async function upload(entry, update, complete) {
         });
         entry.assets.push({
           audio: {
-            label: asset.label,
+            label: file.label,
             full: asset.data.find(item => item.transform === 'acopy;audio').assetId,
           }
         });

net/web/src/session/conversation/addTopic/AddTopic.jsx

@@ -16,6 +16,8 @@ export function AddTopic({ cardId, channelId }) {
   const attachVideo = useRef(null);
   const msg = useRef();
 
+console.log(state);
+
   const keyDown = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       msg.current.blur();
@@ -58,7 +60,7 @@ export function AddTopic({ cardId, channelId }) {
       return <img style={{ height: 128, objectFit: 'contain' }} src={item.url} alt="" />
     }
     if (item.audio) {
-      return <AudioFile onLabel={(label) => actions.setLabel(index, label)}/>
+      return <AudioFile onLabel={(label) => actions.setLabel(index, label)} url={item.url} />
     }
     if (item.video) {
       return <VideoFile onPosition={(pos) => actions.setPosition(index, pos)} url={item.url} />

net/web/src/session/conversation/addTopic/audioFile/AudioFile.jsx

@@ -1,31 +1,56 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
+import { Spin, Input } from 'antd';
 import ReactResizeDetector from 'react-resize-detector';
-import { SoundOutlined } from '@ant-design/icons';
-import { AudioFileWrapper, LabelInput } from './AudioFile.styled';
+import { PlayCircleOutlined, MinusCircleOutlined, SoundOutlined } from '@ant-design/icons';
+import { AudioFileWrapper } from './AudioFile.styled';
 
-export function AudioFile({ onLabel }) {
+import background from 'images/audio.png';
 
-  const [state, setState] = useState({ height: 0 });
+export function AudioFile({ url, onLabel }) {
 
-  const updateState = (value) => {
-    setState((s) => ({ ...s, ...value }));
+  const [width, setWidth] = useState(0);
+  const [playing, setPlaying] = useState(false);
+
+  const audio = useRef(null);
+
+  const play = (on) => {
+    setPlaying(on);
+    if (on) {
+      audio.current.play();
+    }
+    else {
+      audio.current.pause();
+    }
   }
 
   return (
     <AudioFileWrapper>
       <ReactResizeDetector handleWidth={false} handleHeight={true}>
         {({ height }) => {
-          if (height != state.height) {
-            updateState({ height });
+          if (height != width) {
+            setWidth(height);
           }
-          return (
-            <div class="square" style={{ width: state.height }}>
-              <SoundOutlined style={{ fontSize: 32, color: '#eeeeee' }} />
-              <LabelInput placeholder="Label" bordered={false} onChange={(e) => onLabel(e.target.value)}/>;
-            </div>
-          )
+          return <div style={{ height: '100%', width: width }} />
         }}
       </ReactResizeDetector>
+      <div class="player" style={{ width: width, height: width }}>
+        <div class="control">
+          { playing && (
+            <div onClick={() => play(false)}>
+              <MinusCircleOutlined style={{ fontSize: 32, color: '#eeeeee', cursor: 'pointer' }} />
+            </div>
+          )}
+          { !playing && (
+            <div onClick={() => play(true)}>
+              <PlayCircleOutlined style={{ fontSize: 32, color: '#eeeeee', cursor: 'pointer' }} />
+            </div>
+          )}
+          <audio style={{ position: 'absolute', top: 0, visibility: 'hidden' }} src={url} ref={audio} />
+        </div>
+        <div class="label">
+          <Input bordered={false} size="small" onChange={(e) => onLabel(e.target.value)} />
+        </div>
+      </div>
     </AudioFileWrapper>
   )
 }

net/web/src/session/conversation/addTopic/audioFile/AudioFile.styled.js

@@ -1,24 +1,45 @@
 import styled from 'styled-components';
-import { Input } from 'antd';
+import Colors from 'constants/Colors';
 
 export const AudioFileWrapper = styled.div`
   position: relative;
   height: 100%;
 
-  .square {
+  .player {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #aaaaaa;
+  }
+
+  .background {
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .label {
+    bottom: 0;
+    position: absolute;
+    width: 100%;
+    overflow: hidden;
+    text-align: center;
+    color: white;
+    background-color: #cccccc;
+  }
+
+  .control {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
     height: 100%;
     display: flex;
-    justify-content: center;
     align-items: center;
-    background-color: #444444;
+    justify-content: center;
   }
 `;
 
-export const LabelInput = styled(Input)`
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-  text-align: center;
-  color: white;
-`
 

net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx

@@ -1,75 +1,82 @@
-import React, { useEffect, useState } from 'react';
-import { Button } from 'antd';
-import ReactPlayer from 'react-player'
+import React, { useEffect, useState, useRef } from 'react';
+import { Spin } from 'antd';
 import ReactResizeDetector from 'react-resize-detector';
 import { PlayCircleOutlined, MinusCircleOutlined, SoundOutlined } from '@ant-design/icons';
 import { AudioAssetWrapper } from './AudioAsset.styled';
 
+import background from 'images/audio.png';
+
 export function AudioAsset({ label, audioUrl }) {
 
   const [active, setActive] = useState(false);
-  const [dimension, setDimension] = useState({});
-  const [playing, setPlaying] = useState(true);
+  const [width, setWidth] = useState(0);
   const [ready, setReady] = useState(false);
+  const [playing, setPlaying] = useState(true);
   const [url, setUrl] = useState(null);
 
+  const audio = useRef(null);
+
   useEffect(() => {
     setActive(false);
-    setPlaying(false);
+    setReady(false);
+    setPlaying(true);
     setUrl(null);
   }, [label, audioUrl]);
 
-  const onReady = () => {
-    if (!ready) {
-      setReady(true);
-      setPlaying(false);
-    }
-  }
-
   const onActivate = () => {
     setUrl(audioUrl);
     setActive(true);
   }
 
-  const Control = () => {
-    if (!ready) {
-      return <></>
+  const onReady = () => {
+    setReady(true);
+  }
+
+  const play = (on) => {
+    setPlaying(on);
+    if (on) {
+      audio.current.play();
     }
-    if (playing) {
-      return (
-        <div onClick={() => setPlaying(false)}>
-          <MinusCircleOutlined style={{ fontSize: 48, color: '#eeeeee', cursor: 'pointer' }} />
-        </div>
-      )
+    else {
+      audio.current.pause();
     }
-    return (
-      <div onClick={() => setPlaying(true)}>
-        <PlayCircleOutlined style={{ fontSize: 48, color: '#eeeeee', cursor: 'pointer' }} />
-      </div>
-    )
   }
 
   return (
     <AudioAssetWrapper>
       <ReactResizeDetector handleWidth={false} handleHeight={true}>
         {({ height }) => {
-          if (height != dimension.height) {
-            setDimension({ height });
+          if (height != width) {
+            setWidth(height);
           }
-          return <div style={{ height: '100%', borderRadius: 4, width: dimension.height, backgroundColor: '#444444' }} />
+          return <div style={{ height: '100%', width: width }} />
         }}
       </ReactResizeDetector>
-      <div class="player" style={{ width: dimension.height, height: dimension.height }}>
+      <div class="player" style={{ width: width, height: width }}>
+        <img class="background" src={background} alt="audio background" />
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
           { !active && (
-            <div onClick={() => onActivate()}>
+            <div class="control" onClick={() => onActivate()}>
               <SoundOutlined style={{ fontSize: 32, color: '#eeeeee', cursor: 'pointer' }} />
             </div>
           )}
-          { active && (
-            <Control />
+          { active && !ready && (
+            <div class="control">
+              <Spin />
+            </div>
           )}
-          <ReactPlayer style={{ position: 'absolute', top: 0, visibility: 'hidden' }} playing={playing} height="100%" width="100%" controls="true" url={url} onReady={onReady} />
+          { active && ready && playing && (
+            <div class="control" onClick={() => play(false)}>
+              <MinusCircleOutlined style={{ fontSize: 32, color: '#eeeeee', cursor: 'pointer' }} />
+            </div>
+          )}
+          { active && ready && !playing && (
+            <div class="control" onClick={() => play(true)}>
+              <PlayCircleOutlined style={{ fontSize: 32, color: '#eeeeee', cursor: 'pointer' }} />
+            </div>
+          )}
+          <audio style={{ position: 'absolute', top: 0, visibility: 'hidden' }} autoplay="true"
+            src={url} type="audio/mpeg" ref={audio} onPlay={onReady} />
         </div>
       </div>
       <div class="label">{ label }</div>

net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js

@@ -1,26 +1,43 @@
 import styled from 'styled-components';
+import Colors from 'constants/Colors';
 
 export const AudioAssetWrapper = styled.div`
   position: relative;
   height: 100%;
 
   .player {
-    top: 0;
     position: absolute;
+    top: 0;
+    left: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    background-color: #aaaaaa;
+  }
+
+  .background {
+    height: 100%;
+    object-fit: contain;
   }
 
   .label {
-    bottom: 0;
+    top: 0;
     position: absolute;
     width: 100%;
     overflow: hidden;
     text-align: center;
     color: white;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  }
+
+  .control {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 `;