link-stack/apps/link/metamigo-add/_components/voice/voicelines/MicInput.tsx

"use client";

import { useInput } from "react-admin";
import React, { useState } from "react";
import dynamic from "next/dynamic";
import MicIcon from "@mui/icons-material/Mic";
import StopIcon from "@mui/icons-material/Stop";
import Button from "@mui/material/Button";
// import { useTheme } from "@mui/styles"; // makeStyles,
// import AudioPlayer from "material-ui-audio-player";
import { useStopwatch } from "react-timer-hook";
import style from "./MicInput.module.css";
// import type { ReactMicProps } from "react-mic";

const ReactMic = dynamic<any>(
  () => {
    throw new Error(
      "MIC INPUT FEATURE IS DISABLED",
    ); /* return import("react-mic").then((mod) => mod.ReactMic); */
  },
  { ssr: false },
);

const blobToDataUri = (blob: Blob) => {
  const reader = new FileReader();
  reader.readAsDataURL(blob);
  return new Promise((resolve) => {
    reader.onloadend = () => {
      resolve(reader.result);
    };
  });
};

const dataUriToObj = (dataUri: string) => {
  const [prefix, base64] = dataUri.split(",");
  const mime = prefix.slice(5, prefix.indexOf(";"));

  const result: any = {};
  result[mime] = base64;
  return result;
};

const blobToResult = async (blob: Blob) => {
  const result = dataUriToObj((await blobToDataUri(blob)) as string);
  return result;
};

/* const resultToDataUri = (result: Record<string, any>): string => {
  if (!result || !result["audio/webm"]) return "";
  const base64 = result["audio/webm"];
  const r = `data:audio/webm;base64,${base64}`;
  return r;
}; */

const MicInput = (props: any) => {
  const { seconds, minutes, hours, start, reset, pause } = useStopwatch();
  const theme: any = {}; // useTheme();
  const {
    field: { onChange }, // value
  } = useInput(props);

  const [record, setRecorder] = useState({ record: false });
  // const decodedValue = resultToDataUri(value);
  const startRecording = () => {
    setRecorder({ record: true });
    reset();
    start();
  };

  const stopRecording = () => {
    setRecorder({ record: false });
    pause();
  };

  async function onData(recordedBlob: any) {
    console.log({ recordedBlob });
  }

  async function onStop(recordedBlob: any) {
    const result = await blobToResult(recordedBlob.blob);
    onChange(result);
  }

  const isRecording = record.record;
  // const canPlay = !isRecording && decodedValue;
  const duration = `${hours.toString().padStart(2, "0")}:${minutes
    .toString()
    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;

  /*
  const useStyles = makeStyles(() => ({
    volumeIcon: {
      display: "none",
    },
    mainSlider: {
      display: "none",
    },
  }));
*/
  return (
    <div className="MuiFormControl-marginDense RaFormInput-input-40">
      <div className={style.content}>
        <div className={style.voiceWaveWrapper}>
          <ReactMic
            record={record.record}
            className={isRecording ? style.visible : style.hidden}
            onStop={onStop}
            onData={onData}
            // @ts-ignore
            strokeColor={theme.palette.primary.main}
            backgroundColor="white"
            mimeType="audio/webm"
            visualSetting="frequencyBars"
          />
        </div>
        <div>{isRecording ? <p>Recording... {duration}</p> : ""}</div>

        <div className={style.buttonWrapper}>
          {isRecording ? (
            <Button variant="contained" color="primary" onClick={stopRecording}>
              <StopIcon />
              Stop
            </Button>
          ) : (
            <Button
              variant="contained"
              color="primary"
              onClick={startRecording}
              style={{ marginRight: "20px" }}
            >
              <MicIcon />
              Record
            </Button>
          )}
        </div>
        <div className={style.playerWrapper}>
          {/* canPlay && (
            <AudioPlayer
              elevation={0}
              src={decodedValue}
              variation="secondary"
              volume={false}
              useStyles={useStyles}
            />
          ) */}
        </div>
      </div>
    </div>
  );
};

export default MicInput;