refactor: add exit fullscreen to voice operations

src/components/Voice/Operations.tsx

@@ -14,6 +14,7 @@ import IconCallOff from "@/assets/icons/call.off.svg";
 import IconCameraOff from "@/assets/icons/camera.off.svg";
 import IconCamera from "@/assets/icons/camera.svg";
 import IconCheck from "@/assets/icons/check.sign.svg";
+import IconExitFullscreen from "@/assets/icons/fullscreen.exit.svg";
 import IconFullscreen from "@/assets/icons/fullscreen.svg";
 import IconMicOff from "@/assets/icons/mic.off.svg";
 import IconMic from "@/assets/icons/mic.on.svg";
@@ -161,7 +162,9 @@ type Props = {
 const Operations = ({ id, context, mode = "channel" }: Props) => {
   const [panelVisible, setPanelVisible] = useState<VisibleType>("");
   const {
+    exitFullscreen,
     enterFullscreen,
+    fullscreen,
     voicingInfo,
     leave,
     setMute,
@@ -260,13 +263,22 @@ const Operations = ({ id, context, mode = "channel" }: Props) => {
           />
         </button>
       </Tooltip>
-      {mode !== "fullscreen" && (
-        <Tooltip tip={"Fullscreen"} placement="top">
-          <button onClick={enterFullscreen.bind(null, undefined)} className={baseButtonClass}>
+      <Tooltip tip={"Fullscreen"} placement="top">
+        <button
+          onClick={
+            fullscreen
+              ? exitFullscreen.bind(null, undefined)
+              : enterFullscreen.bind(null, undefined)
+          }
+          className={baseButtonClass}
+        >
+          {fullscreen ? (
+            <IconExitFullscreen className={baseIconClass} />
+          ) : (
             <IconFullscreen className={baseIconClass} />
-          </button>
-        </Tooltip>
-      )}
+          )}
+        </button>
+      </Tooltip>
       {mode !== "dm" && (
         <Tooltip tip={t("leave_voice")} placement="top">
           <button

src/components/Voice/useVoice.ts

@@ -30,9 +30,14 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => {
     videoInputDevices,
     audioInputDeviceId,
     audioOutputDeviceId,
-    videoInputDeviceId
+    videoInputDeviceId,
+    fullscreen
   } = useAppSelector((store) => {
     return {
+      fullscreen:
+        context == "channel"
+          ? store.footprint.channelAsides[id] == "voice_fullscreen"
+          : store.footprint.dmAsides[id] == "voice_fullscreen",
       loginUid: store.authData.user?.uid ?? 0,
       voicingInfo: store.voice.voicing,
       audioInputDevices: store.voice.devices.filter((d) => d.kind == "audioinput") ?? [],
@@ -309,6 +314,7 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => {
     stopShareScreen,
     enterFullscreen,
     exitFullscreen,
+    fullscreen,
     audioInputDevices,
     audioOutputDevices,
     videoInputDevices,

src/routes/chat/VoiceFullscreen.tsx

@@ -3,7 +3,6 @@ import { useDispatch } from "react-redux";
 import clsx from "clsx";
 
 import Operations from "@/components/Voice/Operations";
-import IconExitScreen from "@/assets/icons/fullscreen.exit.svg";
 import IconMicOff from "@/assets/icons/mic.off.svg";
 import IconMic from "@/assets/icons/mic.on.svg";
 import IconPin from "@/assets/icons/pin.svg";
@@ -11,7 +10,6 @@ import { updatePin } from "../../app/slices/voice";
 import { useAppSelector } from "../../app/store";
 import Avatar from "../../components/Avatar";
 import Tooltip from "../../components/Tooltip";
-import { useVoice } from "../../components/Voice";
 import { ChatContext } from "../../types/common";
 import { playAgoraVideo } from "../../utils";
 
@@ -23,7 +21,6 @@ type Props = {
 const VoiceFullscreen = ({ id, context }: Props) => {
   const dispatch = useDispatch();
   const [speakingUid, setSpeakingUid] = useState(0);
-  const { voicingInfo, exitFullscreen } = useVoice({ id, context });
   const { name, userData, voicingMembers } = useAppSelector((store) => {
     return {
       userData: store.users.byId,
@@ -59,7 +56,7 @@ const VoiceFullscreen = ({ id, context }: Props) => {
       dispatch(updatePin({ uid: +uid, action: "pin" }));
     }
   };
-  if (!voicingInfo) return null;
+  // if (!voicingInfo) return null;
   const pinUid = voicingMembers.pin;
   const _name = context == "channel" ? `# ${name}` : `@ ${name}`;
   const members = voicingMembers.ids;
@@ -70,9 +67,6 @@ const VoiceFullscreen = ({ id, context }: Props) => {
       {/* top */}
       <div className="px-7 py-6 flex justify-between">
         <span className="text-sm font-semibold">{_name}</span>
-        <div className="flex gap-4">
-          <IconExitScreen role="button" onClick={exitFullscreen} className="fill-gray-200" />
-        </div>
       </div>
       {/* middle */}
       <ul className="flex grow justify-center items-end relative gap-2">