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

Created a waveform component to display the recording's waveform

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-14 16:22:48 +01:00
parent 31f2eb510e
commit f5fc85e1a7
5 changed files with 133 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/pages/test.tsx
View File

@@ -8,9 +8,10 @@ import {sessionOptions} from "@/lib/session";
import useUser from "@/hooks/useUser";
import Sidebar from "@/components/Sidebar";
import dynamic from "next/dynamic";
import {BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPlayCircle, BsPlayFill, BsTrashFill} from "react-icons/bs";
import {BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPauseFill, BsPlayCircle, BsPlayFill, BsTrashFill} from "react-icons/bs";
import {useEffect, useState} from "react";
const Waveform = dynamic(() => import("../components/Waveform"), {ssr: false});
const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), {
ssr: false,
});
@@ -38,6 +39,7 @@ 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;
@@ -78,7 +80,7 @@ export default function Page() {
<div className="flex gap-8 items-center justify-center py-8">
{status === "idle" && (
<>
{!mediaBlobUrl && <div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />}
<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
{status === "idle" && (
<BsMicFill
onClick={() => {
@@ -155,10 +157,21 @@ export default function Page() {
</div>
</>
)}
{status === "stopped" && (
{status === "stopped" && mediaBlobUrl && (
<>
<BsPlayFill className="text-mti-gray-cool cursor-pointer w-5 h-5" />
<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
{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)} />
<div className="flex gap-4 items-center">
<BsTrashFill
className="text-mti-gray-cool cursor-pointer w-5 h-5"