martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 11:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding audio controls

Browse Source
This commit is contained in:
Roland Osborne 2022-05-04 22:39:58 -07:00
parent be9f143df0
commit f3c1bbf54f
3 changed files with 33 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
net/web/src/User/Conversation/AddTopic/AddTopic.jsx
View File

@ -70,10 +70,10 @@ export function AddTopic() {
return <img style={{ height: '100%', objectFit: 'contain' }} src={item.url} alt="" /> return <img style={{ height: '100%', objectFit: 'contain' }} src={item.url} alt="" />
} }
if (item.audio) { 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) { if (item.video) {
return <ReactPlayer height="100%" width="auto" url={item.url} /> return <ReactPlayer controls="true" height="100%" width="auto" url={item.url} />
} }
return <></> return <></>
} }

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

@ -2,22 +2,41 @@ import React, { useEffect, useState } from 'react';
import { Button } from 'antd'; import { Button } from 'antd';
import ReactPlayer from 'react-player' import ReactPlayer from 'react-player'
import ReactResizeDetector from 'react-resize-detector'; 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'; import { AudioAssetWrapper } from './AudioAsset.styled';
export function AudioAsset({ label, audioUrl }) { export function AudioAsset({ label, audioUrl }) {
const [active, setActive] = useState(false); const [active, setActive] = useState(false);
const [dimension, setDimension] = useState({}); const [dimension, setDimension] = useState({});
const [playing, setPlaying] = useState(false); const [playing, setPlaying] = useState(true);
const [ready, setReady] = useState(false);
useEffect(() => { useEffect(() => {
setActive(false); setActive(false);
setPlaying(false); setPlaying(true);
}, [label, audioUrl]); }, [label, audioUrl]);
const onReady = () => { 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 = () => { const Player = () => {
@ -28,7 +47,12 @@ export function AudioAsset({ label, audioUrl }) {
</div> </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 ( return (
@ -38,7 +62,7 @@ export function AudioAsset({ label, audioUrl }) {
if (height != dimension.height) { if (height != dimension.height) {
setDimension({ height }); setDimension({ height });
} }
return <div style={{ height: '100%', width: dimension.height, backgroundColor: 'black' }} /> return <div style={{ height: '100%', width: dimension.height, backgroundColor: '#444444' }} />
}} }}
</ReactResizeDetector> </ReactResizeDetector>
<div class="player" style={{ width: dimension.height, height: dimension.height }}> <div class="player" style={{ width: dimension.height, height: dimension.height }}>

2
net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js
View File

@ -67,7 +67,7 @@ export function useTopicItem(topic) {
const actions = { const actions = {
getAssetUrl: (assetId) => { getAssetUrl: (assetId) => {
return conversation.actions.getAssetUrl(topic.id, assetId); return conversation.actions.getAssetUrl(topic?.id, assetId);
} }
}; };