devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved the appearance of the Waveform

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-14 17:18:22 +01:00
parent f5fc85e1a7
commit 9cf4bf7184
2 changed files with 40 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/test.tsx
View File

@@ -39,7 +39,6 @@ export default function Page() {
const {user} = useUser({redirectTo: "/login"});
const [recordingDuration, setRecordingDuration] = useState(0);
const [isRecording, setIsRecording] = useState(false);
const [isPlaying, setIsPlaying] = useState(false);
useEffect(() => {
let recordingInterval: NodeJS.Timer | undefined = undefined;
@@ -159,19 +158,7 @@ export default function Page() {
)}
{status === "stopped" && mediaBlobUrl && (
<>
{isPlaying && (
<BsPauseFill
className="text-mti-gray-cool cursor-pointer w-5 h-5"
onClick={() => setIsPlaying(false)}
/>
)}
{!isPlaying && (
<BsPlayFill
className="text-mti-gray-cool cursor-pointer w-5 h-5"
onClick={() => setIsPlaying(true)}
/>
)}
<Waveform audio={mediaBlobUrl} isPlaying={isPlaying} onEnd={() => setIsPlaying(false)} />
<Waveform audio={mediaBlobUrl} waveColor="#FCDDEC" progressColor="#EF5DA8" />
<div className="flex gap-4 items-center">
<BsTrashFill
className="text-mti-gray-cool cursor-pointer w-5 h-5"