martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 20:49:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixing audio restart on message issue

Browse Source
This commit is contained in:
Roland Osborne 2022-07-20 22:18:21 -07:00
parent 9914a9d600
commit b4c019abf8
1 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
net/web/src/User/Conversation/TopicItem/AudioAsset/AudioAsset.jsx
View File

@ -11,10 +11,12 @@ export function AudioAsset({ label, audioUrl }) {
const [dimension, setDimension] = useState({}); const [dimension, setDimension] = useState({});
const [playing, setPlaying] = useState(true); const [playing, setPlaying] = useState(true);
const [ready, setReady] = useState(false); const [ready, setReady] = useState(false);
const [url, setUrl] = useState(null);
useEffect(() => { useEffect(() => {
setActive(false); setActive(false);
setPlaying(false); setPlaying(false);
setUrl(null);
}, [label, audioUrl]); }, [label, audioUrl]);
const onReady = () => { const onReady = () => {
@ -24,6 +26,11 @@ export function AudioAsset({ label, audioUrl }) {
} }
} }
const onActivate = () => {
setUrl(audioUrl);
setActive(true);
}
const Control = () => { const Control = () => {
if (!ready) { if (!ready) {
return <></> return <></>
@ -42,22 +49,6 @@ export function AudioAsset({ label, audioUrl }) {
) )
} }
const Player = () => {
if (!active) {
return (
<div onClick={() => setActive(true)}>
<SoundOutlined style={{ fontSize: 32, color: '#eeeeee', cursor: 'pointer' }} />
</div>
)
}
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 ( return (
<AudioAssetWrapper> <AudioAssetWrapper>
<ReactResizeDetector handleWidth={false} handleHeight={true}> <ReactResizeDetector handleWidth={false} handleHeight={true}>
@ -69,7 +60,17 @@ export function AudioAsset({ label, audioUrl }) {
}} }}
</ReactResizeDetector> </ReactResizeDetector>
<div class="player" style={{ width: dimension.height, height: dimension.height }}> <div class="player" style={{ width: dimension.height, height: dimension.height }}>
<Player /> <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
{ !active && (
<div onClick={() => onActivate()}>
<SoundOutlined style={{ fontSize: 32, color: '#eeeeee', cursor: 'pointer' }} />
</div>
)}
{ active && (
<Control />
)}
<ReactPlayer style={{ position: 'absolute', top: 0, visibility: 'hidden' }} playing={playing} height="100%" width="100%" controls="true" url={url} onReady={onReady} />
</div>
</div> </div>
<div class="label">{ label }</div> <div class="label">{ label }</div>
</AudioAssetWrapper> </AudioAssetWrapper>