changes made to reflect main

dailyjs/pagination/components/PaginatedVideoGrid/PaginatedVideoGrid.js

@@ -11,6 +11,7 @@ import { DEFAULT_ASPECT_RATIO } from '@dailyjs/shared/constants';
 import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
 import { useTracks } from '@dailyjs/shared/contexts/TracksProvider';
 import { useActiveSpeaker } from '@dailyjs/shared/hooks/useActiveSpeaker';
+import { useCamSubscriptions } from '@dailyjs/shared/hooks/useCamSubscriptions';
 import usePreferredLayer from '@dailyjs/shared/hooks/usePreferredLayer';
 import { ReactComponent as IconArrow } from '@dailyjs/shared/icons/raquo-md.svg';
 import sortByKey from '@dailyjs/shared/lib/sortByKey';
@@ -30,8 +31,6 @@ export const PaginatedVideoGrid = () => {
   } = useParticipants();
   const activeSpeakerId = useActiveSpeaker();
 
-  const { updateCamSubscriptions } = useTracks();
-
   // Memoized participant count (does not include screen shares)
   const displayableParticipantCount = useMemo(
     () => participantCount,
@@ -178,23 +177,10 @@ export const PaginatedVideoGrid = () => {
     };
   }, [page, pageSize, participants, visibleParticipants]);
 
-  // Update subscriptions when array of subscribed or paused participants mutates
+  useCamSubscriptions(
-  const debouncedUpdate = useCallback(
-    (subIds, pausedIds) =>
-      debounce(() => updateCamSubscriptions(subIds, pausedIds), 90),
-    [updateCamSubscriptions]
-  );
-
-  useEffect(() => {
-    debouncedUpdate(
-      camSubscriptions?.subscribedIds,
-      camSubscriptions?.pausedIds
-    );
-  }, [
     camSubscriptions?.subscribedIds,
-    camSubscriptions?.pausedIds,
+    camSubscriptions?.pausedIds
-    debouncedUpdate,
+  );
-  ]);
 
   // Set bandwidth layer based on amount of visible participants
   usePreferredLayer(visibleParticipants);

dailyjs/recording/components/RecordingModal/RecordingModal.js

@@ -5,12 +5,11 @@ import Modal from '@dailyjs/shared/components/Modal';
 import Well from '@dailyjs/shared/components/Well';
 import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
 import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
-import { enable } from 'debug';
+
 import {
   RECORDING_COUNTDOWN_1,
   RECORDING_COUNTDOWN_2,
   RECORDING_COUNTDOWN_3,
-  RECORDING_ERROR,
   RECORDING_IDLE,
   RECORDING_RECORDING,
   RECORDING_SAVED,

dailyjs/shared/contexts/TracksProvider.js

@@ -61,11 +61,14 @@ export const TracksProvider = ({ children }) => {
       isLocalId(id) ||
       isScreenId(id) ||
       rtcpeers.getCurrentType() !== 'sfu'
-    )
+    ) {
       return;
+    }
+
     if (!rtcpeers.soup.implementationIsAcceptingCalls) {
       return;
     }
+
     const consumer = rtcpeers.soup?.findConsumerForTrack(id, 'cam-video');
     if (!consumer) {
       rtcpeers.soup.setResumeOnSubscribeForTrack(id, 'cam-video', false);
@@ -169,16 +172,6 @@ export const TracksProvider = ({ children }) => {
         return { ...u, [id]: result };
       }, {});
 
-      // Fast resume already subscribed videos
-      ids
-        .filter((id) => !pausedIds.includes(id))
-        .forEach((id) => {
-          const p = callObject.participants()?.[id];
-          if (p?.tracks?.video?.subscribed) {
-            resumeVideoTrack(id);
-          }
-        });
-
       callObject.updateParticipants(updates);
     },
     [
@@ -227,6 +220,7 @@ export const TracksProvider = ({ children }) => {
         trackStoppedQueue.push([participant, track]);
       }
     };
+
     const handleParticipantLeft = ({ participant }) => {
       dispatch({
         type: REMOVE_TRACKS,
@@ -256,11 +250,9 @@ export const TracksProvider = ({ children }) => {
         }
 
         if (rtcpeers?.getCurrentType?.() === 'peer-to-peer') {
-          result.setSubscribedTracks = {
+          result.setSubscribedTracks = true;
-            ...result.setSubscribedTracks,
-            video: true,
-          };
         }
+
         return { [id]: result };
       }, {});
       callObject.updateParticipants(updates);

dailyjs/shared/hooks/useCamSubscriptions.js

@@ -0,0 +1,24 @@
+import { useDeepCompareEffect } from 'use-deep-compare';
+import { useTracks } from '../contexts/TracksProvider';
+
+/**
+ * Updates cam subscriptions based on passed ids and pausedIds.
+ * @param ids Participant ids which should be subscribed to.
+ * @param pausedIds Participant ids which should be subscribed, but paused.
+ * @param delay Throttle in milliseconds. Default: 50
+ */
+export const useCamSubscriptions = (ids, pausedIds = [], throttle = 50) => {
+  const { updateCamSubscriptions } = useTracks();
+
+  useDeepCompareEffect(() => {
+    if (!ids || !pausedIds) return false;
+    const timeout = setTimeout(() => {
+      updateCamSubscriptions(ids, pausedIds);
+    }, throttle);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [ids, pausedIds, throttle, updateCamSubscriptions]);
+};
+
+export default useCamSubscriptions;