refactor: audio UX and deafen

src/app/slices/channels.ts

@@ -3,8 +3,10 @@ import { isNull, omitBy } from "lodash";
 import BASE_URL from "../config";
 import { Channel, UpdateChannelDTO, UpdatePinnedMessageDTO } from "../../types/channel";
 
+type ChannelAside = "members" | "voice" | null;
 interface StoredChannel extends Channel {
   icon?: string;
+  visibleAside: ChannelAside
 }
 
 interface State {
@@ -33,7 +35,8 @@ const channelsSlice = createSlice({
           icon:
             c.avatar_updated_at == 0
               ? ""
-              : `${BASE_URL}/resource/group_avatar?gid=${c.gid}&t=${c.avatar_updated_at}`
+              : `${BASE_URL}/resource/group_avatar?gid=${c.gid}&t=${c.avatar_updated_at}`,
+          visibleAside: "members"
         };
       });
     },
@@ -48,7 +51,8 @@ const channelsSlice = createSlice({
         icon:
           avatar_updated_at == 0
             ? ""
-            : `${BASE_URL}/resource/group_avatar?gid=${gid}&t=${avatar_updated_at}`
+            : `${BASE_URL}/resource/group_avatar?gid=${gid}&t=${avatar_updated_at}`,
+        visibleAside: "members"
       };
     },
     updateChannel(state, action: PayloadAction<UpdateChannelDTO>) {
@@ -99,6 +103,12 @@ const channelsSlice = createSlice({
         }
       }
     },
+    updateChannelVisibleAside(state, action: PayloadAction<{ id: number, aside: ChannelAside }>) {
+      const { id, aside } = action.payload;
+      if (state.byId[id]) {
+        state.byId[id].visibleAside = aside;
+      }
+    },
     removeChannel(state, action: PayloadAction<number>) {
       const gid = action.payload;
       const idx = state.ids.findIndex((i) => i == gid);
@@ -116,7 +126,8 @@ export const {
   fillChannels,
   addChannel,
   updateChannel,
-  removeChannel
+  removeChannel,
+  updateChannelVisibleAside
 } = channelsSlice.actions;
 
 export default channelsSlice.reducer;

src/app/slices/users.ts

@@ -4,10 +4,12 @@ import BASE_URL from "../config";
 import { User } from "../../types/user";
 import { UserLog, UserState } from "../../types/sse";
 
+type DMAside = "voice" | null;
 export interface StoredUser extends User {
   online?: boolean;
   voice?: boolean;
   avatar?: string;
+  visibleAside?: DMAside
 }
 
 export interface State {

src/app/slices/voice.ts

@@ -9,11 +9,13 @@ export type VoiceBasicInfo = {
 export type VoicingInfo = {
   downlinkNetworkQuality?: number,
   muted: boolean,
+  deafen: boolean
 } & VoiceBasicInfo
 
 export type VoicingMemberInfo = {
   speakingVolume?: number,
-  muted?: boolean
+  muted?: boolean,
+  deafen?: boolean
 }
 
 export type VoicingMembers = {
@@ -73,6 +75,18 @@ const voiceSlice = createSlice({
         }
       }
     },
+    updateDeafenStatus(state, { payload }: PayloadAction<boolean>) {
+      if (state.voicing) {
+        state.voicing.deafen = payload;
+        state.voicing.muted = payload;
+        // 更新登录用户在member list的状态
+        const loginUid = localStorage.getItem(KEY_UID) ?? 0;
+        const idx = state.voicingMembers.ids.findIndex((uid) => uid == loginUid);
+        if (idx > -1) {
+          state.voicingMembers.byId[+loginUid].muted = payload;
+        }
+      }
+    },
     updateVoicingNetworkQuality(state, { payload }: PayloadAction<number>) {
       if (state.voicing) {
         state.voicing.downlinkNetworkQuality = payload;
@@ -109,5 +123,5 @@ const voiceSlice = createSlice({
   },
 });
 
-export const { addVoiceMember, removeVoiceMember, updateVoiceList, updateVoicingInfo, updateVoicingNetworkQuality, updateMuteStatus, updateVoicingMember } = voiceSlice.actions;
+export const { addVoiceMember, removeVoiceMember, updateVoiceList, updateVoicingInfo, updateVoicingNetworkQuality, updateMuteStatus, updateVoicingMember, updateDeafenStatus } = voiceSlice.actions;
 export default voiceSlice.reducer;