GSoC - Doctor Notes Enhancement

package.json

@@ -98,6 +98,7 @@
  "redux-thunk": "^2.4.2",
  "rehype-raw": "^6.1.1",
  "rescript-webapi": "^0.8.0",
+ "turndown": "^7.2.0",
  "use-keyboard-shortcut": "^1.1.6",
  "uuid": "^9.0.1",
  "xlsx": "^0.18.5"
@@ -123,6 +124,7 @@
  "@types/react-google-recaptcha": "^2.1.9",
  "@types/react-qr-reader": "^2.1.7",
  "@types/react-transition-group": "^4.4.10",
+ "@types/turndown": "^5.0.4",
  "@typescript-eslint/eslint-plugin": "^5.61.0",
  "@typescript-eslint/parser": "^5.61.0",
  "@vitejs/plugin-react-swc": "^3.6.0",

src/Components/Common/FilePreviewDialog.tsx

@@ -33,16 +33,17 @@ type FilePreviewProps = {
 };
 
 const previewExtensions = [
- ".html",
- ".htm",
- ".pdf",
- ".mp4",
- ".webm",
- ".jpg",
- ".jpeg",
- ".png",
- ".gif",
- ".webp",
+ "html",
+ "htm",
+ "pdf",
+ "mp4",
+ "mp3",
+ "webm",
+ "jpg",
+ "jpeg",
+ "png",
+ "gif",
+ "webp",
 ];
 
 const FilePreviewDialog = (props: FilePreviewProps) => {

src/Components/Common/RichTextEditor/AudioRecorder.tsx

@@ -0,0 +1,173 @@
+import CareIcon from "../../../CAREUI/icons/CareIcon";
+import useRecorder from "../../../Utils/useRecorder";
+import ButtonV2 from "../components/ButtonV2";
+import { useEffect, useState } from "react";
+
+const AudioRecorder = ({
+ setFile,
+ modalOpenForAudio,
+ setModalOpenForAudio,
+}: {
+ setFile: (file: File) => void;
+ modalOpenForAudio: boolean;
+ setModalOpenForAudio: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+ const [audioBlobExists, setAudioBlobExists] = useState(false);
+ const [resetAudioRecording, setAudioResetRecording] = useState(false);
+ const [isMicPermission, setIsMicPermission] = useState(true);
+ const [audioBlob, setAudioBlob] = useState<Blob>();
+
+ const handleAudioUpload = () => {
+ if (!audioBlob) return;
+ const f = new File([audioBlob], "audio.mp3", {
+ type: audioBlob.type,
+ });
+ setFile(f);
+ deleteAudioBlob();
+ };
+
+ useEffect(() => {
+ if (modalOpenForAudio) {
+ setAudioBlobExists(false);
+ setAudioResetRecording(true);
+ startRecording();
+ }
+ }, [modalOpenForAudio]);
+
+ const [
+ audioURL,
+ isRecording,
+ startRecording,
+ stopRecording,
+ newBlob,
+ resetRecording,
+ ] = useRecorder(setIsMicPermission);
+ const [time, setTime] = useState(0);
+ useEffect(() => {
+ setAudioBlob(newBlob);
+ let interval: number | NodeJS.Timeout | undefined;
+ if (isRecording) {
+ interval = setInterval(() => {
+ setTime((prevTime) => prevTime + 10);
+ }, 10);
+ } else {
+ clearInterval(interval);
+ setTime(0);
+ }
+ if (resetAudioRecording) {
+ resetRecording();
+ setAudioResetRecording(false);
+ }
+ return () => clearInterval(interval);
+ }, [isRecording, newBlob, resetAudioRecording]);
+
+ useEffect(() => {
+ const checkMicPermission = async () => {
+ try {
+ const permissions = await navigator.permissions.query({
+ name: "microphone" as PermissionName,
+ });
+ setIsMicPermission(permissions.state === "granted");
+ } catch (error) {
+ setIsMicPermission(false);
+ }
+ };
+
+ checkMicPermission();
+
+ return () => {
+ setIsMicPermission(true);
+ };
+ }, []);
+
+ const deleteAudioBlob = () => {
+ setAudioBlobExists(false);
+ setAudioResetRecording(true);
+ setModalOpenForAudio(false);
+ };
+
+ return (
+ <div className="flex w-full flex-col items-center justify-between gap-2 lg:flex-row">
+ {audioBlobExists && (
+ <div className="flex w-full items-center md:w-auto">
+ <ButtonV2
+ variant="danger"
+ className="w-full"
+ onClick={() => {
+ deleteAudioBlob();
+ }}
+ >
+ <CareIcon icon="l-trash" className="h-4" /> Delete
+ </ButtonV2>
+ </div>
+ )}
+ <div className="flex flex-col items-center gap-4 md:flex-row md:flex-wrap lg:flex-nowrap">
+ <div className="w-full md:w-auto">
+ <div>
+ {isRecording && (
+ <>
+ <div className="flex justify-end space-x-2">
+ <div className="flex bg-gray-100 p-2 text-primary-700">
+ <CareIcon
+ icon="l-record-audio"
+ className="mr-2 animate-pulse"
+ />
+ <div className="mx-2">
+ (
+ <span>
+ {("0" + Math.floor((time / 60000) % 60)).slice(-2)}:
+ </span>
+ <span>
+ {("0" + Math.floor((time / 1000) % 60)).slice(-2)}
+ </span>
+ )
+ </div>
+ recording...
+ </div>
+ <ButtonV2
+ onClick={() => {
+ stopRecording();
+ setAudioBlobExists(true);
+ }}
+ >
+ <CareIcon icon="l-microphone-slash" className="text-lg" />
+ stop
+ </ButtonV2>
+ </div>
+ </>
+ )}
+ </div>
+ {audioURL && audioBlobExists && (
+ <div className="my-4">
+ <audio
+ className="m-auto max-h-full max-w-full object-contain"
+ src={audioURL}
+ controls
+ />{" "}
+ </div>
+ )}
+ </div>
+
+ {!audioBlobExists && !isMicPermission && (
+ <span className="text-sm font-medium text-warning-500">
+ <CareIcon
+ icon="l-exclamation-triangle"
+ className="mr-1 text-base"
+ />
+ Please allow browser permission before you start speaking
+ </span>
+ )}
+ </div>
+ {audioBlobExists && (
+ <div className="flex w-full items-center md:w-auto">
+ <ButtonV2 onClick={handleAudioUpload} className="w-full">
+ <CareIcon icon="l-cloud-upload" className="text-xl" />
+ Save
+ </ButtonV2>
+ </div>
+ )}
+ </div>
+ );
+};
+
+export default AudioRecorder;