视频缩小

src/pages/common/RtcCallModal/RtcLayout.tsx

@@ -23,6 +23,7 @@ import { CustomType } from "@/constants";
 
 import { AuthData, InviteData } from "./data";
 import { RtcControl } from "./RtcControl";
+import { ShrinkOutlined, ArrowsAltOutlined } from '@ant-design/icons';
 
 const localVideoClasses =
   "absolute right-3 top-3 !w-[100px] !h-[150px] rounded-md z-10";
@@ -51,6 +52,7 @@ export const RtcLayout = ({
   const remoteParticipant = tracks.find((track) => !isLocal(track.participant));
   const isWaiting = !connect && !isConnected;
   const [isRemoteVideoMuted, setIsRemoteVideoMuted] = useState(false);
+  const [isShrink, setIsShrink] = useState(false);
 
   const connectState = useConnectionState();
 
@@ -75,21 +77,22 @@ export const RtcLayout = ({
     );
   };
 
+  const setShrinkStatus = () => {
+    setIsShrink(!isShrink)
+  }
+
   return (
     <Spin spinning={connectState === ConnectionState.Connecting}>
-      <div
-        className="relative"
-        style={{
-          height: `340px`,
-          width: `480px`,
-        }}
-      >
+      <div className={`rtc-modal-content ${isShrink?'small':''}`}>
         <div
           className={clsx(
             "flex h-full flex-col items-center justify-between bg-[#262729]",
             { "!bg-[#F2F8FF]": isWaiting },
           )}
         >
+          <div className="rtc-modal-scale" onClick={setShrinkStatus}>
+            {isShrink ? <ArrowsAltOutlined/> : <ShrinkOutlined/>}
+          </div>
           {renderContent()}
           <RtcControl
             isWaiting={isWaiting}
@@ -135,7 +138,7 @@ const SingleProfile = ({ isWaiting, userInfo }: ISingleProfileProps) => {
     <div className="absolute top-[10%] flex flex-col items-center">
       <OIMAvatar size={48} src={userInfo?.faceURL} text={userInfo?.nickname} />
       <div
-        className={clsx("mt-3 max-w-[120px] truncate text-white", {
+        className={clsx("mt-1 max-w-[120px] truncate text-white", {
           "!text-[var(--base-black)]": isWaiting,
         })}
       >

src/styles/global.scss

@@ -171,3 +171,23 @@ emoji-picker {
   color: var(--sub-text) !important;
   margin-bottom: 4px !important;
 }
+
+.rtc-modal-content{
+  position: relative;
+  width: 480px;
+  height: 340px;
+
+  &.small{
+    width: 130px;
+    height: 180px;
+  }
+}
+
+.rtc-modal-scale{
+  position: absolute;
+  z-index: 10000;
+  right: 10px;
+  top: 6px;
+  font-size: 20px;
+  cursor: pointer;
+}