Temporarily removing use of useActiveSpeaker hook

custom/shared/components/ParticipantBar/ParticipantBar.js

@@ -12,7 +12,6 @@ import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
 import { useTracks } from '@custom/shared/contexts/TracksProvider';
 import { useUIState } from '@custom/shared/contexts/UIStateProvider';
 import { isLocalId } from '@custom/shared/contexts/participantsState';
-import { useActiveSpeaker } from '@custom/shared/hooks/useActiveSpeaker';
 import { useCamSubscriptions } from '@custom/shared/hooks/useCamSubscriptions';
 import { useResize } from '@custom/shared/hooks/useResize';
 import { useScrollbarWidth } from '@custom/shared/hooks/useScrollbarWidth';
@@ -40,18 +39,21 @@ export const ParticipantBar = ({
   width,
 }) => {
   const { networkState } = useCallState();
-  const { currentSpeaker, screens, swapParticipantPosition } =
+  const {
-    useParticipants();
+    currentSpeaker,
+    screens,
+    swapParticipantPosition,
+  } = useParticipants();
   const { maxCamSubscriptions } = useTracks();
   const { pinnedId, showParticipantsBar } = useUIState();
-  const itemHeight = useMemo(
+  const itemHeight = useMemo(() => width / aspectRatio + GAP, [
-    () => width / aspectRatio + GAP,
+    aspectRatio,
-    [aspectRatio, width]
+    width,
-  );
+  ]);
-  const paddingTop = useMemo(
+  const paddingTop = useMemo(() => itemHeight * fixed.length, [
-    () => itemHeight * fixed.length,
+    fixed,
-    [fixed, itemHeight]
+    itemHeight,
-  );
+  ]);
   const scrollTop = useRef(0);
   const spaceBefore = useRef(null);
   const spaceAfter = useRef(null);
@@ -61,14 +63,13 @@ export const ParticipantBar = ({
   const [isSidebarScrollable, setIsSidebarScrollable] = useState(false);
   const blockScrolling = useBlockScrolling(scrollRef);
   const scrollbarWidth = useScrollbarWidth();
-  const activeSpeakerId = useActiveSpeaker();
-
   const hasScreenshares = useMemo(() => screens.length > 0, [screens]);
   const othersCount = useMemo(() => others.length, [others]);
-  const visibleOthers = useMemo(
+  const visibleOthers = useMemo(() => others.slice(range[0], range[1]), [
-    () => others.slice(range[0], range[1]),
+    others,
-    [others, range]
+    range,
-  );
+  ]);
+  const currentSpeakerId = useMemo(() => currentSpeaker?.id, [currentSpeaker]);
 
   /**
    * Store other ids as string to reduce amount of running useEffects below.
@@ -96,7 +97,7 @@ export const ParticipantBar = ({
       if (!showParticipantsBar) {
         setCamSubscriptions({
           subscribedIds: [
-            currentSpeaker?.id,
+            currentSpeakerId,
             pinnedId,
             ...fixedRemote.map((p) => p.id),
           ],
@@ -117,8 +118,8 @@ export const ParticipantBar = ({
       const min = Math.max(0, r[0] - buffer);
       const max = Math.min(otherIds.length, r[1] + buffer);
       const ids = otherIds.slice(min, max);
-      if (!ids.includes(currentSpeaker?.id) && !isLocalId(currentSpeaker?.id)) {
+      if (!ids.includes(currentSpeakerId) && !isLocalId(currentSpeakerId)) {
-        ids.push(currentSpeaker?.id);
+        ids.push(currentSpeakerId);
       }
       // Calculate paused participant ids by determining their tile position
       const subscribedIds = [...fixedRemote.map((p) => p.id), ...ids];
@@ -126,7 +127,7 @@ export const ParticipantBar = ({
         // ignore unrendered ids, they'll be unsubscribed instead
         if (!ids.includes(id)) return false;
         // ignore current speaker, it should never be paused
-        if (id === currentSpeaker?.id) return false;
+        if (id === currentSpeakerId) return false;
         const top = i * itemHeight;
         const fixedHeight = fixed.length * itemHeight;
         const visibleScrollHeight = scrollEl.clientHeight - fixedHeight;
@@ -143,7 +144,7 @@ export const ParticipantBar = ({
       });
     },
     [
-      currentSpeaker?.id,
+      currentSpeakerId,
       fixed,
       itemHeight,
       maxCamSubscriptions,
@@ -244,21 +245,21 @@ export const ParticipantBar = ({
 
       // Active speaker not rendered at all, promote immediately
       if (
-        visibleOthers.every((p) => p.id !== activeSpeakerId) &&
+        visibleOthers.every((p) => p.id !== currentSpeakerId) &&
-        !isLocalId(activeSpeakerId)
+        !isLocalId(currentSpeakerId)
       ) {
-        swapParticipantPosition(fixedOther.id, activeSpeakerId);
+        swapParticipantPosition(fixedOther.id, currentSpeakerId);
         return false;
       }
 
       const activeTile = othersRef.current?.querySelector(
-        `[id="${activeSpeakerId}"]`
+        `[id="${currentSpeakerId}"]`
       );
       // Ignore when active speaker is not within "others"
       if (!activeTile) return false;
 
       // Ignore when active speaker is already pinned
-      if (activeSpeakerId === pinnedId) return false;
+      if (currentSpeakerId === pinnedId) return false;
 
       const { height: tileHeight } = activeTile.getBoundingClientRect();
       const othersVisibleHeight =
@@ -273,7 +274,7 @@ export const ParticipantBar = ({
       )
         return false;
 
-      return swapParticipantPosition(fixedOther.id, activeSpeakerId);
+      return swapParticipantPosition(fixedOther.id, currentSpeakerId);
     };
     maybePromoteActiveSpeaker();
     const throttledHandler = debounce(maybePromoteActiveSpeaker, 100);
@@ -283,7 +284,7 @@ export const ParticipantBar = ({
       scrollEl?.removeEventListener('scroll', throttledHandler);
     };
   }, [
-    activeSpeakerId,
+    currentSpeakerId,
     fixed,
     hasScreenshares,
     pinnedId,

custom/shared/contexts/ParticipantsProvider.js

@@ -43,8 +43,10 @@ export const ParticipantsProvider = ({ children }) => {
     initialParticipantsState
   );
   const { viewMode } = useUIState();
-  const [participantMarkedForRemoval, setParticipantMarkedForRemoval] =
+  const [
-    useState(null);
+    participantMarkedForRemoval,
+    setParticipantMarkedForRemoval,
+  ] = useState(null);
 
   /**
    * ALL participants (incl. shared screens) in a convenient array
@@ -95,10 +97,9 @@ export const ParticipantsProvider = ({ children }) => {
     [allParticipants]
   );
 
-  const isOwner = useMemo(
+  const isOwner = useMemo(() => !!localParticipant?.isOwner, [
-    () => !!localParticipant?.isOwner,
+    localParticipant,
-    [localParticipant]
+  ]);
-  );
 
   /**
    * The participant who should be rendered prominently right now