From 0d0a86fd60a4f935d7c83ca90ce80cec25e2c08f Mon Sep 17 00:00:00 2001
From: harshithpabbati <pabbatiharshith@gmail.com>
Date: Thu, 7 Apr 2022 16:42:41 +0530
Subject: [PATCH] get local participant from the useDaily hook

---
 custom/shared/components/Tray/BasicTray.js    | 17 +++--------------
 custom/shared/contexts/MediaDeviceProvider.js |  5 +++--
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/custom/shared/components/Tray/BasicTray.js b/custom/shared/components/Tray/BasicTray.js
index 8bf3e77..fa89a20 100644
--- a/custom/shared/components/Tray/BasicTray.js
+++ b/custom/shared/components/Tray/BasicTray.js
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect, useMemo } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { NETWORK_ASIDE } from '@custom/shared/components/Aside/NetworkAside';
 import { PEOPLE_ASIDE } from '@custom/shared/components/Aside/PeopleAside';
 import Button from '@custom/shared/components/Button';
@@ -15,7 +15,7 @@ import { ReactComponent as IconMore } from '@custom/shared/icons/more-md.svg';
 import { ReactComponent as IconNetwork } from '@custom/shared/icons/network-md.svg';
 import { ReactComponent as IconPeople } from '@custom/shared/icons/people-md.svg';
 import { ReactComponent as IconSettings } from '@custom/shared/icons/settings-md.svg';
-import { useLocalParticipant, useDevices } from '@daily-co/daily-react-hooks';
+import { useMediaDevices } from '../../contexts/MediaDeviceProvider';
 import { Tray, TrayButton } from './Tray';
 
 export const BasicTray = () => {
@@ -24,18 +24,7 @@ export const BasicTray = () => {
   const [showMore, setShowMore] = useState(false);
   const { callObject, leave } = useCallState();
   const { customTrayComponent, openModal, toggleAside } = useUIState();
-  const localParticipant = useLocalParticipant();
-  const { hasCamError, hasMicError } = useDevices();
-
-  const isCamMuted = useMemo(() => {
-    const videoState = localParticipant?.tracks?.video?.state;
-    return videoState === 'off' || videoState === 'blocked' || hasCamError;
-  }, [hasCamError, localParticipant?.tracks?.video?.state]);
-
-  const isMicMuted = useMemo(() => {
-    const audioState = localParticipant?.tracks?.audio?.state;
-    return audioState === 'off' || audioState === 'blocked' || hasMicError;
-  }, [hasMicError, localParticipant?.tracks?.audio?.state]);
+  const { isMicMuted, isCamMuted } = useMediaDevices();
 
   const toggleCamera = (newState) => {
     if (!callObject) return false;
diff --git a/custom/shared/contexts/MediaDeviceProvider.js b/custom/shared/contexts/MediaDeviceProvider.js
index afe5a82..6230429 100644
--- a/custom/shared/contexts/MediaDeviceProvider.js
+++ b/custom/shared/contexts/MediaDeviceProvider.js
@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useMemo } from 'react';
-import { useDevices, useLocalParticipant } from '@daily-co/daily-react-hooks';
+import { useDaily, useDevices } from '@daily-co/daily-react-hooks';
 import PropTypes from 'prop-types';
 
 export const DEVICE_STATE_LOADING = 'loading';
@@ -31,7 +31,8 @@ export const MediaDeviceProvider = ({ children }) => {
     refreshDevices,
   } = useDevices();
 
-  const localParticipant = useLocalParticipant();
+  const daily = useDaily();
+  const localParticipant = daily?.participants().local;
 
   const isCamMuted = useMemo(() => {
     const videoState = localParticipant?.tracks?.video?.state;