jeffemmett
/
daily-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

get local participant from the useDaily hook

This commit is contained in:
harshithpabbati 2022-04-07 16:42:41 +05:30
parent 4c2caf14fe
commit 0d0a86fd60
2 changed files with 6 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
custom/shared/components/Tray/BasicTray.js
View File

@ -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 { NETWORK_ASIDE } from '@custom/shared/components/Aside/NetworkAside';
import { PEOPLE_ASIDE } from '@custom/shared/components/Aside/PeopleAside'; import { PEOPLE_ASIDE } from '@custom/shared/components/Aside/PeopleAside';
import Button from '@custom/shared/components/Button'; 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 IconNetwork } from '@custom/shared/icons/network-md.svg';
import { ReactComponent as IconPeople } from '@custom/shared/icons/people-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 { 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'; import { Tray, TrayButton } from './Tray';
export const BasicTray = () => { export const BasicTray = () => {
@ -24,18 +24,7 @@ export const BasicTray = () => {
const [showMore, setShowMore] = useState(false); const [showMore, setShowMore] = useState(false);
const { callObject, leave } = useCallState(); const { callObject, leave } = useCallState();
const { customTrayComponent, openModal, toggleAside } = useUIState(); const { customTrayComponent, openModal, toggleAside } = useUIState();
const localParticipant = useLocalParticipant(); const { isMicMuted, isCamMuted } = useMediaDevices();
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 toggleCamera = (newState) => { const toggleCamera = (newState) => {
if (!callObject) return false; if (!callObject) return false;

5
custom/shared/contexts/MediaDeviceProvider.js
View File

@ -1,5 +1,5 @@
import React, { createContext, useContext, useMemo } from 'react'; 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'; import PropTypes from 'prop-types';
export const DEVICE_STATE_LOADING = 'loading'; export const DEVICE_STATE_LOADING = 'loading';
@ -31,7 +31,8 @@ export const MediaDeviceProvider = ({ children }) => {
refreshDevices, refreshDevices,
} = useDevices(); } = useDevices();
const localParticipant = useLocalParticipant(); const daily = useDaily();
const localParticipant = daily?.participants().local;
const isCamMuted = useMemo(() => { const isCamMuted = useMemo(() => {
const videoState = localParticipant?.tracks?.video?.state; const videoState = localParticipant?.tracks?.video?.state;