Develop

apps/metamigo-frontend/components/voice/voicelines/MicInput.tsx

@@ -1,150 +0,0 @@
-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 = 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;