Merge pull request #5582 from daily-co/eng-4927-add-hook-to-get-local-participant

ENG-4927 Implement useLocalSessionId hook

Author: Regaddi

src/hooks/useLocalSessionId.ts

@@ -0,0 +1,11 @@
+import { useRecoilValue } from 'recoil';
+
+import { localIdState } from '../DailyParticipants';
+
+/**
+ * Returns the local participant's session_id or null,
+ * if the local participant doesn't exist.
+ */
+export const useLocalSessionId = () => {
+  return useRecoilValue(localIdState) || null;
+};

src/hooks/useRecording.ts

@@ -15,7 +15,7 @@ import {
 
 import { useDaily } from './useDaily';
 import { useDailyEvent } from './useDailyEvent';
-import { useLocalParticipant } from './useLocalParticipant';
+import { useLocalSessionId } from './useLocalSessionId';
 import { useParticipantIds } from './useParticipantIds';
 
 interface UseRecordingArgs {
@@ -85,7 +85,7 @@ export const useRecording = ({
   const state = useRecoilValue(recordingState);
   const setState = useSetRecoilState(recordingState);
 
-  const localParticipant = useLocalParticipant();
+  const localSessionId = useLocalSessionId();
 
   const recordingParticipantIds = useParticipantIds({
     filter: 'record',
@@ -96,7 +96,7 @@ export const useRecording = ({
   useEffect(() => {
     const hasRecordingParticipants = recordingParticipantIds.length > 0;
     const isLocalParticipantRecording = recordingParticipantIds.includes(
-      localParticipant?.session_id ?? 'local'
+      localSessionId ?? 'local'
     );
     setState((s) => ({
       ...s,
@@ -119,7 +119,7 @@ export const useRecording = ({
        */
       type: hasRecordingParticipants ? 'local' : s?.type,
     }));
-  }, [localParticipant?.session_id, recordingParticipantIds, setState]);
+  }, [localSessionId, recordingParticipantIds, setState]);
 
   useDailyEvent(
     'recording-started',
@@ -131,9 +131,9 @@ export const useRecording = ({
             case 'cloud-beta':
             case 'cloud': {
               if (
-                localParticipant &&
+                localSessionId &&
                 ev.layout?.preset === 'single-participant' &&
-                ev.layout.session_id !== localParticipant?.session_id
+                ev.layout.session_id !== localSessionId
               ) {
                 isLocalParticipantRecorded = false;
               }
@@ -153,7 +153,7 @@ export const useRecording = ({
           });
           setTimeout(() => onRecordingStarted?.(ev), 0);
         },
-      [localParticipant, onRecordingStarted]
+      [localSessionId, onRecordingStarted]
     )
   );
   useDailyEvent(

src/index.ts

@@ -9,6 +9,7 @@ export { StatefulDevice, useDevices } from './hooks/useDevices';
 export { useInputSettings } from './hooks/useInputSettings';
 export { useLiveStreaming } from './hooks/useLiveStreaming';
 export { useLocalParticipant } from './hooks/useLocalParticipant';
+export { useLocalSessionId } from './hooks/useLocalSessionId';
 export { useMediaTrack } from './hooks/useMediaTrack';
 export { useNetwork } from './hooks/useNetwork';
 export { useParticipant } from './hooks/useParticipant';

test/hooks/useLocalSessionId.test.tsx

@@ -0,0 +1,50 @@
+/// <reference types="@types/jest" />
+
+import DailyIframe, { DailyCall } from '@daily-co/daily-js';
+import { renderHook } from '@testing-library/react-hooks';
+import React from 'react';
+
+import { DailyProvider } from '../../src/DailyProvider';
+import { useLocalSessionId } from '../../src/hooks/useLocalSessionId';
+
+/**
+ * Mock DailyRoom.
+ * It's not required for useLocalSessionId and causes unwanted state updates.
+ */
+jest.mock('../../src/DailyRoom', () => ({
+  DailyRoom: (({ children }) => <>{children}</>) as React.FC,
+}));
+
+const createWrapper =
+  (callObject: DailyCall = DailyIframe.createCallObject()): React.FC =>
+  ({ children }) =>
+    <DailyProvider callObject={callObject}>{children}</DailyProvider>;
+
+describe('useLocalSessionId', () => {
+  it('returns null, if daily.participants() does not contain local user yet', async () => {
+    const daily = DailyIframe.createCallObject();
+    (daily.participants as jest.Mock).mockImplementation(() => ({}));
+    const { result, waitFor } = renderHook(() => useLocalSessionId(), {
+      wrapper: createWrapper(daily),
+    });
+    await waitFor(() => {
+      expect(result.current).toBeNull();
+    });
+  });
+  it('returns local user session_id', async () => {
+    const daily = DailyIframe.createCallObject();
+    (daily.participants as jest.Mock).mockImplementation(() => ({
+      local: {
+        local: true,
+        session_id: 'local',
+        user_name: '',
+      },
+    }));
+    const { result, waitFor } = renderHook(() => useLocalSessionId(), {
+      wrapper: createWrapper(daily),
+    });
+    await waitFor(() => {
+      expect(result.current).toEqual('local');
+    });
+  });
+});

test/hooks/useRecording.test.tsx

@@ -24,8 +24,8 @@ jest.mock('../../src/DailyRoom', () => ({
 
 const localId = faker.datatype.uuid();
 
-jest.mock('../../src/hooks/useLocalParticipant', () => ({
-  useLocalParticipant: () => ({ session_id: localId }),
+jest.mock('../../src/hooks/useLocalSessionId', () => ({
+  useLocalSessionId: () => localId,
 }));
 
 const createWrapper =