diff --git a/src/app/slices/channels.ts b/src/app/slices/channels.ts index ffde3aa9..aac1eaef 100644 --- a/src/app/slices/channels.ts +++ b/src/app/slices/channels.ts @@ -2,6 +2,8 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { isNull, omitBy } from "lodash"; import BASE_URL from "../config"; import { Channel, UpdateChannelDTO, UpdatePinnedMessageDTO } from "../../types/channel"; +import { resetAuthData } from "./auth.data"; +// import { updateVoicingInfo } from "./voice"; type ChannelAside = "members" | "voice" | null; interface StoredChannel extends Channel { @@ -117,6 +119,16 @@ const channelsSlice = createSlice({ delete state.byId[gid]; } } + }, + extraReducers: (builder) => { + builder.addCase(resetAuthData, (state) => { + // 如果有aside是voice的,就把它关掉 + Object.values(state.byId).forEach((ch) => { + if (ch.visibleAside === "voice") { + ch.visibleAside = null; + } + }); + }); } }); diff --git a/src/app/slices/voice.ts b/src/app/slices/voice.ts index fba90f45..d258e2b3 100644 --- a/src/app/slices/voice.ts +++ b/src/app/slices/voice.ts @@ -1,6 +1,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { KEY_UID } from "../config"; import { ConnectionState } from "agora-rtc-sdk-ng"; +import { resetAuthData } from "./auth.data"; export type VoiceBasicInfo = { context: "channel" | "dm" @@ -139,6 +140,19 @@ const voiceSlice = createSlice({ } } }, + extraReducers: (builder) => { + builder.addCase(resetAuthData, (state) => { + // reset voicing info + if (window.VOICE_CLIENT) { + window.VOICE_CLIENT.leave(); + } + state.voicing = null; + state.voicingMembers = { + ids: [], + byId: {} + }; + }); + } }); export const { updateConnectionState, addVoiceMember, removeVoiceMember, upsertVoiceList, updateVoicingInfo, updateVoicingNetworkQuality, updateMuteStatus, updateVoicingMember, updateDeafenStatus } = voiceSlice.actions; diff --git a/src/common/component/Voice.tsx b/src/common/component/Voice.tsx index fb5192ee..b382ac2f 100644 --- a/src/common/component/Voice.tsx +++ b/src/common/component/Voice.tsx @@ -57,11 +57,11 @@ const Voice = () => { }); //remote user leave agoraEngine.on("user-left", (user, reason) => { + console.log(user, "has left the channel"); switch (reason) { case "Quit": case "ServerTimeOut": { dispatch(removeVoiceMember(+user.uid as number)); - console.log(user, "has left the channel"); } break; default: @@ -206,6 +206,7 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => { dispatch(updateChannelVisibleAside({ id, aside: null })); + // 即时更新对应的活跃列表信息 dispatch(upsertVoiceList({ id, context, diff --git a/src/common/hook/useLogout.ts b/src/common/hook/useLogout.ts index 7788a33e..5f4ec39f 100644 --- a/src/common/hook/useLogout.ts +++ b/src/common/hook/useLogout.ts @@ -1,4 +1,3 @@ -import { useEffect } from 'react'; import { useDispatch } from "react-redux"; import { resetFootprint } from "../../app/slices/footprint"; import { resetChannels } from "../../app/slices/channels"; @@ -9,7 +8,6 @@ import { resetReactionMessage } from "../../app/slices/message.reaction"; import { resetFileMessage } from "../../app/slices/message.file"; import { resetMessage } from "../../app/slices/message"; import { useLazyLogoutQuery } from "../../app/services/auth"; -import { updateVoicingInfo } from '../../app/slices/voice'; export default function useLogout() { const dispatch = useDispatch(); const [logout, { isLoading, isSuccess }] = useLazyLogoutQuery(); @@ -24,15 +22,5 @@ export default function useLogout() { dispatch(resetFileMessage()); }; - useEffect(() => { - if (isSuccess) { - // 清理当前voicing上下文 - if (window.VOICE_CLIENT) { - window.VOICE_CLIENT.leave(); - dispatch(updateVoicingInfo(null)); - } - } - }, [isSuccess]); - return { clearLocalData, logout, exited: isSuccess, exiting: isLoading }; }