xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix active speaker and speaking

Browse source
This commit is contained in:
Robert Long 2021-09-10 16:05:57 -07:00
parent d813509541
commit 01d2a7136c
3 changed files with 15 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/ConferenceCallManagerHooks.js
View file

@ -328,7 +328,6 @@ export function useGroupCall(client, roomId) {
useEffect(() => { useEffect(() => {
function onParticipantsChanged(...args) { function onParticipantsChanged(...args) {
console.log(...args);
updateState({ participants: getParticipants(groupCallRef.current) }); updateState({ participants: getParticipants(groupCallRef.current) });
} }
@ -348,8 +347,8 @@ export function useGroupCall(client, roomId) {
groupCall.on("participants_changed", onParticipantsChanged); groupCall.on("participants_changed", onParticipantsChanged);
groupCall.on("speaking", onParticipantsChanged); groupCall.on("speaking", onParticipantsChanged);
groupCall.on("mute_state_changed", onParticipantsChanged); groupCall.on("mute_state_changed", onParticipantsChanged);
groupCall.on("participant_call_replaced", onParticipantsChanged); groupCall.on("call_replaced", onParticipantsChanged);
groupCall.on("participant_call_feeds_changed", onParticipantsChanged); groupCall.on("call_feeds_changed", onParticipantsChanged);
groupCall.on("local_mute_state_changed", onLocalMuteStateChanged); groupCall.on("local_mute_state_changed", onLocalMuteStateChanged);
updateState({ updateState({
@ -368,14 +367,8 @@ export function useGroupCall(client, roomId) {
groupCall.removeListener("participants_changed", onParticipantsChanged); groupCall.removeListener("participants_changed", onParticipantsChanged);
groupCall.removeListener("speaking", onParticipantsChanged); groupCall.removeListener("speaking", onParticipantsChanged);
groupCall.removeListener("mute_state_changed", onParticipantsChanged); groupCall.removeListener("mute_state_changed", onParticipantsChanged);
groupCall.removeListener( groupCall.removeListener("call_replaced", onParticipantsChanged);
"participant_call_replaced", groupCall.removeListener("call_feeds_changed", onParticipantsChanged);
onParticipantsChanged
);
groupCall.removeListener(
"participant_call_feeds_changed",
onParticipantsChanged
);
groupCall.removeListener( groupCall.removeListener(
"local_mute_state_changed", "local_mute_state_changed",
onLocalMuteStateChanged onLocalMuteStateChanged

9
src/Room.jsx
View file

@ -167,6 +167,10 @@ export function EnteringRoomView() {
} }
export function LoadingErrorView({ error }) { export function LoadingErrorView({ error }) {
useEffect(() => {
console.error(error);
}, [error]);
return ( return (
<> <>
<div className={styles.centerMessage}> <div className={styles.centerMessage}>
@ -190,7 +194,6 @@ function RoomSetupView({
localVideoMuted, localVideoMuted,
toggleLocalVideoMuted, toggleLocalVideoMuted,
toggleMicrophoneMuted, toggleMicrophoneMuted,
groupCall,
}) { }) {
const videoRef = useRef(); const videoRef = useRef();
const [permissionState, setPermissionState] = useState( const [permissionState, setPermissionState] = useState(
@ -206,7 +209,9 @@ function RoomSetupView({
setPermissionState(PermissionState.Granted); setPermissionState(PermissionState.Granted);
} }
}) })
.catch(() => { .catch((error) => {
console.error(error);
if (videoRef.current) { if (videoRef.current) {
setPermissionState(PermissionState.Denied); setPermissionState(PermissionState.Denied);
} }

8
src/VideoGrid.jsx
View file

@ -436,7 +436,7 @@ export function VideoGrid({ participants, layout }) {
let presenter; let presenter;
if (layout === "spotlight") { if (layout === "spotlight") {
presenter = participant.activeSpeaker; presenter = participant.isActiveSpeaker();
} else { } else {
presenter = layout === lastLayoutRef.current ? tile.presenter : false; presenter = layout === lastLayoutRef.current ? tile.presenter : false;
} }
@ -459,7 +459,7 @@ export function VideoGrid({ participants, layout }) {
key: participant.member.userId, key: participant.member.userId,
participant, participant,
remove: false, remove: false,
presenter: layout === "spotlight" && participant.activeSpeaker, presenter: layout === "spotlight" && participant.isActiveSpeaker(),
}); });
} }
@ -740,10 +740,10 @@ function ParticipantTile({ style, participant, remove, presenter, ...rest }) {
<animated.div className={styles.participantTile} style={style} {...rest}> <animated.div className={styles.participantTile} style={style} {...rest}>
<div <div
className={classNames(styles.participantName, { className={classNames(styles.participantName, {
[styles.speaking]: participant.usermediaStream?.speaking, [styles.speaking]: participant.usermediaFeed?.isSpeaking(),
})} })}
> >
{participant.usermediaStream?.speaking ? ( {participant.usermediaFeed?.isSpeaking() ? (
<MicIcon /> <MicIcon />
) : participant.isAudioMuted() ? ( ) : participant.isAudioMuted() ? (
<MuteMicIcon className={styles.muteMicIcon} /> <MuteMicIcon className={styles.muteMicIcon} />