Merge pull request #9680 from daily-co/pre-1037

PRE-1037 Remove useRecoilTransactionObserver, simplify screen share state & simplify custom useParticipantIds

Author: markbackman

src/DailyParticipants.tsx

@@ -15,6 +15,7 @@ import {
 import { useThrottledDailyEvent } from './hooks/useThrottledDailyEvent';
 import { RECOIL_PREFIX } from './lib/constants';
 import { customDeepEqual } from './lib/customDeepEqual';
+import { equalSelector } from './lib/recoil-custom';
 import { getParticipantPaths } from './utils/getParticipantPaths';
 import { resolveParticipantPaths } from './utils/resolveParticipantPaths';
 
@@ -97,8 +98,9 @@ export const waitingParticipantState = atomFamily<
 /**
  * Returns all waiting participant objects in an array.
  */
-export const allWaitingParticipantsSelector = selector({
+export const allWaitingParticipantsSelector = equalSelector({
   key: RECOIL_PREFIX + 'waitingParticipantsSelector',
+  equals: customDeepEqual,
   get: ({ get }) => {
     const ids = get(waitingParticipantsState);
     return ids.map((id) => get(waitingParticipantState(id)));
@@ -205,9 +207,8 @@ export const DailyParticipants: React.FC<React.PropsWithChildren<{}>> = ({
             evts.forEach((ev) => {
               switch (ev.action) {
                 case 'active-speaker-change': {
-                  const sessionId = ev.activeSpeaker.peerId;
-                  set(activeIdState, sessionId);
-                  set(participantState(sessionId), (prev) => {
+                  set(activeIdState, ev.activeSpeaker.peerId);
+                  set(participantState(ev.activeSpeaker.peerId), (prev) => {
                     if (!prev) return null;
                     return {
                       ...prev,

src/DailyProvider.tsx

@@ -16,7 +16,6 @@ import { DailyNetwork } from './DailyNetwork';
 import { DailyParticipants } from './DailyParticipants';
 import { DailyRecordings } from './DailyRecordings';
 import { DailyRoom } from './DailyRoom';
-import { DailyScreenShares } from './DailyScreenShares';
 import { customDeepEqual } from './lib/customDeepEqual';
 
 type BaseProps =
@@ -212,13 +211,11 @@ export const DailyProvider: React.FC<React.PropsWithChildren<Props>> = ({
             <DailyMeeting>
               <DailyNetwork>
                 <DailyParticipants>
-                  <DailyScreenShares>
-                    <DailyRecordings>
-                      <DailyLiveStreaming>
-                        <DailyDevices>{children}</DailyDevices>
-                      </DailyLiveStreaming>
-                    </DailyRecordings>
-                  </DailyScreenShares>
+                  <DailyRecordings>
+                    <DailyLiveStreaming>
+                      <DailyDevices>{children}</DailyDevices>
+                    </DailyLiveStreaming>
+                  </DailyRecordings>
                 </DailyParticipants>
               </DailyNetwork>
             </DailyMeeting>

src/DailyScreenShares.tsx

@@ -280,7 +280,8 @@ export const DailyAudio = memo(
             });
           },
           [assignSpeaker, localSessionId, removeSpeaker]
-        )
+        ),
+        200
       );
 
       const rmpAudioIds = useParticipantIds({

src/components/DailyAudio.tsx

@@ -1,11 +1,6 @@
 import { DailyEventObject, DailyParticipant } from '@daily-co/daily-js';
 import { useCallback, useEffect, useState } from 'react';
-import {
-  selectorFamily,
-  useRecoilCallback,
-  useRecoilTransactionObserver_UNSTABLE,
-  useRecoilValue,
-} from 'recoil';
+import { useRecoilCallback, useRecoilValue } from 'recoil';
 
 import {
   ExtendedDailyParticipant,
@@ -14,6 +9,7 @@ import {
 } from '../DailyParticipants';
 import { RECOIL_PREFIX } from '../lib/constants';
 import { customDeepEqual } from '../lib/customDeepEqual';
+import { equalSelectorFamily } from '../lib/recoil-custom';
 import { isTrackOff } from '../utils/isTrackOff';
 import {
   participantPropertiesState,
@@ -50,14 +46,15 @@ type SortParticipants = SerializableSortParticipants | SortParticipantsFunction;
 /**
  * Short-cut state selector for useParticipantIds({ filter: 'local' })
  */
-export const participantIdsFilteredAndSortedState = selectorFamily<
+export const participantIdsFilteredAndSortedState = equalSelectorFamily<
   string[],
   {
     filter: SerializableFilterParticipants | null;
     sort: SerializableSortParticipants | null;
   }
 >({
   key: RECOIL_PREFIX + 'participant-ids-filtered-sorted',
+  equals: customDeepEqual,
   get:
     ({ filter, sort }) =>
     ({ get }) => {
@@ -153,69 +150,55 @@ export const useParticipantIds = ({
     })
   );
 
-  /**
-   * For custom filter and/or sort, we need to calculate the returned ids manually.
-   */
-  const [customIds, setCustomIds] = useState<string[]>([]);
-  /**
-   * Loads participant state from Recoil store and updates custom ids state,
-   * in case resulting set of ids is different.
-   */
-  const maybeUpdateCustomIds = useRecoilCallback(
+  const getCustomFilteredIds = useRecoilCallback(
     ({ snapshot }) =>
-      async () => {
+      () => {
         if (
           // Ignore if both filter and sort are not functions.
           typeof filter !== 'function' &&
           typeof sort !== 'function'
         )
-          return;
+          return [];
 
-        const participants: ExtendedDailyParticipant[] = await Promise.all(
+        const participants: ExtendedDailyParticipant[] =
           preFilteredSortedIds.map(
-            async (id) =>
-              (await snapshot.getPromise(
-                participantState(id)
-              )) as ExtendedDailyParticipant
-          )
-        );
-        const newCustomIds = participants
-          // Make sure we don't accidentally try to filter/sort `null` participants
-          // This can happen when a participant's id is already present in store
-          // but the participant object is not stored, yet.
-          .filter(Boolean)
-          // Run custom filter, if it's a function. Otherwise don't filter any participants.
-          .filter(typeof filter === 'function' ? filter : () => true)
-          // Run custom sort, if it's a function. Otherwise don't sort.
-          .sort(typeof sort === 'function' ? sort : () => 0)
-          // Map back to session_id.
-          .map((p) => p.session_id)
-          // Filter any potential null/undefined ids.
-          // This shouldn't really happen, but better safe than sorry.
-          .filter(Boolean);
+            (id) =>
+              snapshot.getLoadable(participantState(id))
+                .contents as ExtendedDailyParticipant
+          );
 
-        // Finally compare the new list of ids with the current one.
-        if (customDeepEqual(customIds, newCustomIds)) return;
-
-        setCustomIds(newCustomIds);
+        return (
+          participants
+            // Make sure we don't accidentally try to filter/sort `null` participants
+            // This can happen when a participant's id is already present in store
+            // but the participant object is not stored, yet.
+            .filter(Boolean)
+            // Run custom filter, if it's a function. Otherwise don't filter any participants.
+            .filter(typeof filter === 'function' ? filter : () => true)
+            // Run custom sort, if it's a function. Otherwise don't sort.
+            .sort(typeof sort === 'function' ? sort : () => 0)
+            // Map back to session_id.
+            .map((p) => p.session_id)
+            // Filter any potential null/undefined ids.
+            // This shouldn't really happen, but better safe than sorry.
+            .filter(Boolean)
+        );
       },
-    [customIds, filter, preFilteredSortedIds, sort]
+    [filter, preFilteredSortedIds, sort]
   );
 
-  /**
-   * Initialize state.
-   */
+  const [customIds, setCustomIds] = useState<string[]>([]);
+
+  const maybeUpdateCustomIds = useCallback(() => {
+    const newIds = getCustomFilteredIds();
+    if (customDeepEqual(newIds, customIds)) return;
+    setCustomIds(newIds);
+  }, [customIds, getCustomFilteredIds]);
+
   useEffect(() => {
     maybeUpdateCustomIds();
   }, [maybeUpdateCustomIds]);
 
-  /**
-   * Wires up this instance to the Recoil store.
-   */
-  useRecoilTransactionObserver_UNSTABLE(() => {
-    maybeUpdateCustomIds();
-  });
-
   useThrottledDailyEvent(
     [
       'participant-joined',
@@ -242,8 +225,10 @@ export const useParticipantIds = ({
               break;
           }
         });
+        maybeUpdateCustomIds();
       },
       [
+        maybeUpdateCustomIds,
         onActiveSpeakerChange,
         onParticipantJoined,
         onParticipantLeft,

src/hooks/useParticipantIds.ts

@@ -4,11 +4,16 @@ import {
   DailyTrackState,
 } from '@daily-co/daily-js';
 import { useCallback } from 'react';
+import { useRecoilValue } from 'recoil';
 
-import { useScreenSharesContext } from '../DailyScreenShares';
+import { RECOIL_PREFIX } from '../lib/constants';
+import { customDeepEqual } from '../lib/customDeepEqual';
+import { equalSelector } from '../lib/recoil-custom';
 import { Reconstruct } from '../types/Reconstruct';
 import { useDaily } from './useDaily';
 import { useDailyEvent } from './useDailyEvent';
+import { participantIdsFilteredAndSortedState } from './useParticipantIds';
+import { participantPropertyState } from './useParticipantProperty';
 
 export interface ScreenShare {
   local: boolean;
@@ -18,6 +23,29 @@ export interface ScreenShare {
   session_id: string;
 }
 
+const screenSharesState = equalSelector({
+  key: RECOIL_PREFIX + 'screen-shares',
+  equals: customDeepEqual,
+  get: ({ get }) => {
+    const screenIds = get(
+      participantIdsFilteredAndSortedState({ filter: 'screen', sort: null })
+    );
+    return screenIds.map<ScreenShare>((id) => {
+      return {
+        local: get(participantPropertyState({ id, property: 'local' })),
+        screenAudio: get(
+          participantPropertyState({ id, property: 'tracks.screenAudio' })
+        ),
+        screenVideo: get(
+          participantPropertyState({ id, property: 'tracks.screenVideo' })
+        ),
+        screenId: `${id}-screen`,
+        session_id: id,
+      };
+    });
+  },
+});
+
 type DailyEventObjectScreenShareError = Reconstruct<
   DailyEventObjectNonFatalError,
   'type',
@@ -79,7 +107,7 @@ export const useScreenShare = ({
     )
   );
 
-  const { screens } = useScreenSharesContext();
+  const screens = useRecoilValue(screenSharesState);
 
   return {
     isSharingScreen: screens.some((s) => s.local),