From 90f08f80936deb452c7b7b657645e6c8c082f4b7 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Fri, 26 Aug 2022 11:54:58 -0700 Subject: [PATCH] using audio tag for audio playback --- net/web/src/context/useUploadContext.hook.js | 2 +- net/web/src/images/audio.png | Bin 0 -> 3496 bytes .../conversation/addTopic/AddTopic.jsx | 4 +- .../addTopic/audioFile/AudioFile.jsx | 55 +++++++++---- .../addTopic/audioFile/AudioFile.styled.js | 43 +++++++--- .../topicItem/audioAsset/AudioAsset.jsx | 77 ++++++++++-------- .../topicItem/audioAsset/AudioAsset.styled.js | 25 +++++- 7 files changed, 139 insertions(+), 67 deletions(-) create mode 100644 net/web/src/images/audio.png diff --git a/net/web/src/context/useUploadContext.hook.js b/net/web/src/context/useUploadContext.hook.js index 3e6be232..18ab0974 100644 --- a/net/web/src/context/useUploadContext.hook.js +++ b/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, } }); diff --git a/net/web/src/images/audio.png b/net/web/src/images/audio.png new file mode 100644 index 0000000000000000000000000000000000000000..bc4b106eecb035f215cee982ba1a91a764fb98b7 GIT binary patch literal 3496 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 literal 0 HcmV?d00001 diff --git a/net/web/src/session/conversation/addTopic/AddTopic.jsx b/net/web/src/session/conversation/addTopic/AddTopic.jsx index 6f87d910..2cd30ef4 100644 --- a/net/web/src/session/conversation/addTopic/AddTopic.jsx +++ b/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 } if (item.audio) { - return actions.setLabel(index, label)}/> + return actions.setLabel(index, label)} url={item.url} /> } if (item.video) { return actions.setPosition(index, pos)} url={item.url} /> diff --git a/net/web/src/session/conversation/addTopic/audioFile/AudioFile.jsx b/net/web/src/session/conversation/addTopic/audioFile/AudioFile.jsx index bb686dc1..5571a085 100644 --- a/net/web/src/session/conversation/addTopic/audioFile/AudioFile.jsx +++ b/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 ( {({ height }) => { - if (height != state.height) { - updateState({ height }); + if (height != width) { + setWidth(height); } - return ( -
- - onLabel(e.target.value)}/>; -
- ) + return
}} +
+
+ { playing && ( +
play(false)}> + +
+ )} + { !playing && ( +
play(true)}> + +
+ )} +
+
+ onLabel(e.target.value)} /> +
+
) } diff --git a/net/web/src/session/conversation/addTopic/audioFile/AudioFile.styled.js b/net/web/src/session/conversation/addTopic/audioFile/AudioFile.styled.js index e736c655..693bb880 100644 --- a/net/web/src/session/conversation/addTopic/audioFile/AudioFile.styled.js +++ b/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; -` diff --git a/net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx b/net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx index a61a9cba..d913a05f 100644 --- a/net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx +++ b/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 ( -
setPlaying(false)}> - -
- ) + else { + audio.current.pause(); } - return ( -
setPlaying(true)}> - -
- ) } return ( {({ height }) => { - if (height != dimension.height) { - setDimension({ height }); + if (height != width) { + setWidth(height); } - return
+ return
}} -
+
+ audio background
{ !active && ( -
onActivate()}> +
onActivate()}>
)} - { active && ( - + { active && !ready && ( +
+ +
)} - + { active && ready && playing && ( +
play(false)}> + +
+ )} + { active && ready && !playing && ( +
play(true)}> + +
+ )} +
{ label }
diff --git a/net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js b/net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js index 743493d3..50ba39d3 100644 --- a/net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js +++ b/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; } `;