From c0e9ecee7e0d06ddc7599f767daed5a7bc81136e Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 25 Jul 2023 00:19:06 +0800
Subject: [PATCH] feat: add leave pre room when join new room

---
 .../src/components/ActiveRoom.tsx               | 17 ++++++++++++++++-
 .../src/components/LivekitView.tsx              |  4 +++-
 .../src/store/useLivekitState.ts                | 15 ++++++++++++---
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/ActiveRoom.tsx b/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/ActiveRoom.tsx
index a24951e3..0c25d334 100644
--- a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/ActiveRoom.tsx
+++ b/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/ActiveRoom.tsx
@@ -3,13 +3,26 @@ import {
   formatChatMessageLinks,
   LiveKitRoom,
   LocalUserChoices,
+  useRoomContext,
 } from '@livekit/components-react';
 import { RoomOptions, VideoPresets } from 'livekit-client';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { useLivekitState } from '../store/useLivekitState';
 import { useServerUrl } from '../utils/useServerUrl';
 import { useToken } from '../utils/useToken';
 import { VideoConference } from './lib/VideoConference';
 
+const UpdateRoom: React.FC = React.memo(() => {
+  const room = useRoomContext();
+
+  useEffect(() => {
+    useLivekitState.setState({ activeRoom: room });
+  }, [room]);
+
+  return null;
+});
+UpdateRoom.displayName = 'UpdateRoom';
+
 type ActiveRoomProps = {
   userChoices: LocalUserChoices;
   roomName: string;
@@ -55,6 +68,8 @@ export const ActiveRoom: React.FC<ActiveRoomProps> = React.memo((props) => {
           onDisconnected={onLeave}
         >
           <VideoConference chatMessageFormatter={formatChatMessageLinks} />
+
+          <UpdateRoom />
         </LiveKitRoom>
       ) : (
         <LoadingSpinner />
diff --git a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/LivekitView.tsx b/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/LivekitView.tsx
index 1e3fde57..d26bab47 100644
--- a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/LivekitView.tsx
+++ b/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/LivekitView.tsx
@@ -22,7 +22,9 @@ const _LivekitView: React.FC<LivekitViewProps> = React.memo((props) => {
     console.log('error while setting up prejoin', err);
   });
 
-  const handleJoin = useEvent((userChoices: LocalUserChoices) => {
+  const handleJoin = useEvent(async (userChoices: LocalUserChoices) => {
+    await setDeactive(); // 先退出之前的房间
+
     setPreJoinChoices(userChoices);
     setActive(props.url);
   });
diff --git a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/store/useLivekitState.ts b/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/store/useLivekitState.ts
index 404bbf89..34dcf4c5 100644
--- a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/store/useLivekitState.ts
+++ b/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/store/useLivekitState.ts
@@ -1,27 +1,36 @@
+import type { Room } from 'livekit-client';
 import { create } from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 
 interface LivekitState {
   isActive: boolean;
   url: string;
+  activeRoom: Room | null;
   setActive: (url: string) => void;
-  setDeactive: () => void;
+  setDeactive: () => Promise<void>;
 }
 
 export const useLivekitState = create<LivekitState>()(
-  immer((set) => ({
+  immer((set, get) => ({
     isActive: false,
     url: '',
+    activeRoom: null,
     setActive(url) {
       set((state) => {
         state.isActive = true;
         state.url = url;
       });
     },
-    setDeactive() {
+    async setDeactive() {
+      const { activeRoom } = get();
+      if (activeRoom) {
+        await activeRoom.disconnect(true);
+      }
+
       set((state) => {
         state.isActive = false;
         state.url = '';
+        state.activeRoom = null;
       });
     },
   }))