fix: DM video black screen

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "homepage": "https://voce.chat",
   "dependencies": {
     "@emoji-mart/react": "^1.1.1",

src/components/Voice/Operations.tsx

@@ -166,6 +166,8 @@ type Props = {
 
 const Operations = ({ id, context, mode = "channel" }: Props) => {
   const dispatch = useDispatch();
+  const loginUid = useAppSelector((store) => store.authData.user?.uid ?? 0);
+
   const [panelVisible, setPanelVisible] = useState<VisibleType>("");
   const {
     exitFullscreen,
@@ -291,8 +293,8 @@ const Operations = ({ id, context, mode = "channel" }: Props) => {
         <button
           onClick={
             fullscreen
-              ? exitFullscreen.bind(null, undefined)
-              : enterFullscreen.bind(null, undefined)
+              ? exitFullscreen
+              : enterFullscreen.bind(null, context == "dm" ? loginUid : undefined)
           }
           className={baseButtonClass}
         >

src/components/Voice/useVoice.ts

@@ -212,7 +212,7 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => {
     const localVideoTrack = window.VIDEO_TRACK_MAP[loginUid] as ICameraVideoTrack;
     if (window.VOICE_CLIENT) {
       await window.VOICE_CLIENT.leave();
-      dispatch(updateVoicingInfo(null));
+
       if (localAudioTrack) {
         localAudioTrack.close();
         window.VOICE_TRACK_MAP[loginUid] = null;
@@ -221,14 +221,19 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => {
         localVideoTrack.close();
         window.VIDEO_TRACK_MAP[loginUid] = null;
       }
+      // reset tracks
+      window.VOICE_TRACK_MAP = {};
+      window.VIDEO_TRACK_MAP = {};
+      // 重置voicingInfo
+      dispatch(updateVoicingInfo(null));
       const updateAside = context == "channel" ? updateChannelVisibleAside : updateDMVisibleAside;
-      dispatch(updateAside({ id, aside: null }));
+      dispatch(updateAside({ id, aside: context == "dm" ? "voice" : null }));
       // 即时更新对应的活跃列表信息
       dispatch(
         upsertVoiceList({
           id,
           context,
-          memberCount: 0,
+          memberCount: context == "dm" ? 1 : 0,
           // will fix it
           channelName: `vocechat:${context}:${id}`
         })

src/routes/chat/Layout/DMVoicing.tsx

@@ -1,13 +1,7 @@
-// import React from 'react'
 import { useEffect } from "react";
-// import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import clsx from "clsx";
 
-// import IconMic from '@/assets/icons/mic.on.svg';
-// import IconCamera from '@/assets/icons/camera.svg';
-// import IconCameraOff from '@/assets/icons/camera.off.svg';
-// import IconScreen from '@/assets/icons/share.screen.svg';
 import { updateCallInfo } from "@/app/slices/voice";
 import { useAppSelector } from "@/app/store";
 import Avatar from "@/components/Avatar";
@@ -81,7 +75,10 @@ const VoicingBlocks = ({ onlyToSelf, sendByMe, connected, from, to }: BlockProps
             alt="avatar"
           />
         </div>
-        <div className="z-30 absolute left-0 top-0 w-full h-full" id={`CAMERA_${id}`}>
+        <div
+          className={clsx("z-30 absolute left-0 top-0 w-full h-full", !video && "hidden")}
+          id={`CAMERA_${id}`}
+        >
           {/* camera video */}
         </div>
         {video && (
@@ -146,7 +143,10 @@ const DMVoice = ({ uid }: Props) => {
     if (sendByMe || voicingMembers.ids.length == 2 || onlyToSelf) {
       leave();
     }
-    dispatch(updateCallInfo({ from: 0, to: 0 }));
+    if (sendByMe || voicingMembers.ids.length == 1) {
+      // 立马隐掉
+      dispatch(updateCallInfo({ from: 0, to: 0 }));
+    }
   };
   const handleAnswer = () => {
     joinVoice();