From e499fdea95d40e67376da37a700d545551297125 Mon Sep 17 00:00:00 2001
From: abirc8010 <abirc8010@gmail.com>
Date: Tue, 24 Dec 2024 17:19:51 +0530
Subject: [PATCH 1/2] Fix permission issues for video and audio message

---
 .../views/ChatInput/AudioMessageRecorder.js   | 19 ++++++++++++++++---
 .../views/ChatInput/VideoMessageRecoder.js    | 14 ++++++++++----
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/views/ChatInput/AudioMessageRecorder.js b/packages/react/src/views/ChatInput/AudioMessageRecorder.js
index caef86e700..5d09ee7def 100644
--- a/packages/react/src/views/ChatInput/AudioMessageRecorder.js
+++ b/packages/react/src/views/ChatInput/AudioMessageRecorder.js
@@ -5,7 +5,13 @@ import React, {
   useContext,
   useRef,
 } from 'react';
-import { Box, Icon, ActionButton, useTheme } from '@embeddedchat/ui-elements';
+import {
+  Box,
+  Icon,
+  ActionButton,
+  useTheme,
+  useToastBarDispatch,
+} from '@embeddedchat/ui-elements';
 import { useMediaRecorder } from '../../hooks/useMediaRecorder';
 import RCContext from '../../context/RCInstance';
 import useMessageStore from '../../store/messageStore';
@@ -26,6 +32,7 @@ const AudioMessageRecorder = () => {
   const [file, setFile] = useState(null);
   const [isRecorded, setIsRecorded] = useState(false);
   const threadId = useMessageStore((_state) => _state.threadMainMessage?._id);
+  const dispatchToastMessage = useToastBarDispatch();
   const onStop = (audioChunks) => {
     const audioBlob = new Blob(audioChunks, { type: 'audio/mpeg' });
     const fileName = 'Audio record.mp3';
@@ -48,9 +55,11 @@ const AudioMessageRecorder = () => {
     setRecordState('idle');
   };
 
-  const handleRecordButtonClick = () => {
-    setRecordState('recording');
+  const handleRecordButtonClick = async () => {
     try {
+      await navigator.mediaDevices.getUserMedia({ audio: true });
+
+      setRecordState('recording');
       start();
       toogleRecordingMessage();
       const startTime = new Date();
@@ -70,6 +79,10 @@ const AudioMessageRecorder = () => {
       );
     } catch (error) {
       console.log(error);
+      dispatchToastMessage({
+        type: 'error',
+        message: 'Unable to access the microphone. Please grant permissions.',
+      });
       setRecordState('idle');
     }
   };
diff --git a/packages/react/src/views/ChatInput/VideoMessageRecoder.js b/packages/react/src/views/ChatInput/VideoMessageRecoder.js
index 4d5b00810d..71d2f16fcd 100644
--- a/packages/react/src/views/ChatInput/VideoMessageRecoder.js
+++ b/packages/react/src/views/ChatInput/VideoMessageRecoder.js
@@ -12,6 +12,7 @@ import {
   ActionButton,
   Modal,
   useTheme,
+  useToastBarDispatch,
 } from '@embeddedchat/ui-elements';
 import { useMediaRecorder } from '../../hooks/useMediaRecorder';
 import RCContext from '../../context/RCInstance';
@@ -34,7 +35,7 @@ const VideoMessageRecorder = () => {
   const [file, setFile] = useState(null);
   const [isRecorded, setIsRecorded] = useState(false);
   const threadId = useMessageStore((_state) => _state.threadMainMessage?._id);
-
+  const dispatchToastMessage = useToastBarDispatch();
   const onStop = (videoChunks) => {
     const videoBlob = new Blob(videoChunks, { type: 'video/mp4' });
     const fileName = 'Video record.mp4';
@@ -57,9 +58,10 @@ const VideoMessageRecorder = () => {
     setRecordState('idle');
   };
 
-  const handleRecordButtonClick = () => {
-    setRecordState('recording');
+  const handleRecordButtonClick = async () => {
     try {
+      await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
+      setRecordState('recording');
       start(videoRef.current);
       toogleRecordingMessage();
       const startTime = new Date();
@@ -78,7 +80,11 @@ const VideoMessageRecorder = () => {
         }, 1000)
       );
     } catch (error) {
-      console.log(error);
+      dispatchToastMessage({
+        type: 'error',
+        message:
+          'Unable to access microphone or camera. Please grant permissions.',
+      });
       setRecordState('idle');
     }
   };

From 7e34a80b875ad5ff790bc217a270ef44aef21706 Mon Sep 17 00:00:00 2001
From: abirc8010 <abirc8010@gmail.com>
Date: Mon, 6 Jan 2025 19:48:40 +0530
Subject: [PATCH 2/2] run prettier

---
 packages/react/src/views/ChatInput/AudioMessageRecorder.js | 4 +---
 packages/react/src/views/ChatInput/VideoMessageRecoder.js  | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/views/ChatInput/AudioMessageRecorder.js b/packages/react/src/views/ChatInput/AudioMessageRecorder.js
index ed740b9b55..aa0566ce3f 100644
--- a/packages/react/src/views/ChatInput/AudioMessageRecorder.js
+++ b/packages/react/src/views/ChatInput/AudioMessageRecorder.js
@@ -54,10 +54,8 @@ const AudioMessageRecorder = ({ disabled }) => {
     setRecordState('idle');
   };
 
-
-  const handleRecordButtonClick = async() => {
+  const handleRecordButtonClick = async () => {
     if (disabled) return;
-    setRecordState('recording');
     try {
       await navigator.mediaDevices.getUserMedia({ audio: true });
 
diff --git a/packages/react/src/views/ChatInput/VideoMessageRecoder.js b/packages/react/src/views/ChatInput/VideoMessageRecoder.js
index 042540b3e7..6fa398dbba 100644
--- a/packages/react/src/views/ChatInput/VideoMessageRecoder.js
+++ b/packages/react/src/views/ChatInput/VideoMessageRecoder.js
@@ -56,10 +56,8 @@ const VideoMessageRecorder = ({ disabled }) => {
     setRecordState('idle');
   };
 
-
-  const handleRecordButtonClick = async() => {
+  const handleRecordButtonClick = async () => {
     if (disabled) return;
-    setRecordState('recording');
     try {
       await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
       setRecordState('recording');