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

Temporarily removing use of useActiveSpeaker hook

This commit is contained in:
Kimberlee Johnson 2022-01-10 11:54:46 -08:00
parent 74d308bfa2
commit fa9009e4a5
2 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
custom/shared/components/ParticipantBar/ParticipantBar.js
View File

@ -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 } =
useParticipants();
const {
currentSpeaker,
screens,
swapParticipantPosition,
} = useParticipants();
const { maxCamSubscriptions } = useTracks();
const { pinnedId, showParticipantsBar } = useUIState();
const itemHeight = useMemo(
() => width / aspectRatio + GAP,
[aspectRatio, width]
);
const paddingTop = useMemo(
() => itemHeight * fixed.length,
[fixed, itemHeight]
);
const itemHeight = useMemo(() => width / aspectRatio + GAP, [
aspectRatio,
width,
]);
const paddingTop = useMemo(() => itemHeight * fixed.length, [
fixed,
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(
() => others.slice(range[0], range[1]),
[others, range]
);
const visibleOthers = useMemo(() => others.slice(range[0], range[1]), [
others,
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)) {
ids.push(currentSpeaker?.id);
if (!ids.includes(currentSpeakerId) && !isLocalId(currentSpeakerId)) {
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) &&
!isLocalId(activeSpeakerId)
visibleOthers.every((p) => p.id !== currentSpeakerId) &&
!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,

13
custom/shared/contexts/ParticipantsProvider.js
View File

@ -43,8 +43,10 @@ export const ParticipantsProvider = ({ children }) => {
initialParticipantsState
);
const { viewMode } = useUIState();
const [participantMarkedForRemoval, setParticipantMarkedForRemoval] =
useState(null);
const [
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(
() => !!localParticipant?.isOwner,
[localParticipant]
);
const isOwner = useMemo(() => !!localParticipant?.isOwner, [
localParticipant,
]);
/**
* The participant who should be rendered prominently right now