feat: add navbar icon which can jump to active panel

client/web/plugins/com.msgbyte.music/src/index.tsx

@@ -2,19 +2,19 @@ import { regCustomPanel } from '@capital/common';
 import { Loadable } from '@capital/component';
 import { Translate } from './translate';
 
-const PLUGIN_NAME = 'com.msgbyte.music';
+const PLUGIN_ID = 'com.msgbyte.music';
 
-console.log(`Plugin ${PLUGIN_NAME} is loaded`);
+console.log(`Plugin ${PLUGIN_ID} is loaded`);
 
 regCustomPanel({
   position: 'navbar-more',
   icon: 'mdi:disc-player',
-  name: `${PLUGIN_NAME}/musicpanel`,
+  name: `${PLUGIN_ID}/musicpanel`,
   label: Translate.musicpanel,
   render: Loadable(
     () => import('./panels/MusicPanel').then((module) => module.MusicPanel),
     {
-      componentName: `${PLUGIN_NAME}:CustomMusicPanelRender`,
+      componentName: `${PLUGIN_ID}:CustomMusicPanelRender`,
     }
   ),
 });

client/web/src/components/modals/GroupDetail/Role/tabs/member.tsx

@@ -38,7 +38,7 @@ export const RoleMember: React.FC<RoleMemberProps> = React.memo((props) => {
     searchResult: filterMembers,
   } = useSearch({
     dataSource: userInfoList,
-    filterFn: (item, searchText) => item.nickname.includes(searchText),
+    filterFn: (item, searchText) => String(item.nickname).includes(searchText),
   });
 
   const handleAddMember = useMemoizedFn(() => {

pnpm-lock.yaml

@@ -1969,6 +1969,9 @@ importers:
       livekit-client:
         specifier: ^1.12.1
         version: 1.12.1
+      zustand:
+        specifier: 4.3.6
+        version: 4.3.6(immer@9.0.21)(react@18.2.0)
     devDependencies:
       '@types/styled-components':
         specifier: ^5.1.26

server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/package.json

@@ -11,7 +11,8 @@
     "@livekit/components-core": "^0.6.11",
     "@livekit/components-react": "^1.0.8",
     "@livekit/components-styles": "^1.0.4",
-    "livekit-client": "^1.12.1"
+    "livekit-client": "^1.12.1",
+    "zustand": "4.3.6"
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.26",

server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/group/LivekitPanel.tsx

@@ -5,29 +5,34 @@ import {
 } from '@capital/common';
 import { GroupPanelContainer } from '@capital/component';
 import React, { useState } from 'react';
-import {
-  LiveKitRoom,
-  LocalUserChoices,
-  useToken,
-  VideoConference,
-  formatChatMessageLinks,
-} from '@livekit/components-react';
-import { LogLevel, RoomOptions, VideoPresets } from 'livekit-client';
+import type { LocalUserChoices } from '@livekit/components-react';
 import { PreJoinView } from '../components/PreJoinView';
 import { LivekitContainer } from '../components/LivekitContainer';
 import { ActiveRoom } from '../components/ActiveRoom';
+import { useLivekitState } from '../store/useLivekitState';
 
 export const LivekitPanel: React.FC = React.memo(() => {
   const { groupId, panelId } = useGroupPanelContext();
   const [preJoinChoices, setPreJoinChoices] = useState<
     LocalUserChoices | undefined
   >(undefined);
+  const { setActive, setDeactive } = useLivekitState();
 
   const handleError = useEvent((err: Error) => {
     showErrorToasts('error while setting up prejoin');
     console.log('error while setting up prejoin', err);
   });
 
+  const handleJoin = useEvent((userChoices: LocalUserChoices) => {
+    setPreJoinChoices(userChoices);
+    setActive(`/main/group/${groupId}/${panelId}`);
+  });
+
+  const handleLeave = useEvent(() => {
+    setPreJoinChoices(undefined);
+    setDeactive();
+  });
+
   const roomName = `${groupId}#${panelId}`;
 
   return (
@@ -37,9 +42,7 @@ export const LivekitPanel: React.FC = React.memo(() => {
           <ActiveRoom
             roomName={roomName}
             userChoices={preJoinChoices}
-            onLeave={() => {
-              setPreJoinChoices(undefined);
-            }}
+            onLeave={handleLeave}
           />
         ) : (
           <div
@@ -51,10 +54,7 @@ export const LivekitPanel: React.FC = React.memo(() => {
                 videoEnabled: false,
                 audioEnabled: false,
               }}
-              onSubmit={(values) => {
-                console.log('Joining with: ', values);
-                setPreJoinChoices(values);
-              }}
+              onSubmit={handleJoin}
             />
           </div>
         )}

server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/index.tsx

@@ -1,10 +1,11 @@
-import { regGroupPanel } from '@capital/common';
+import { regCustomPanel, regGroupPanel } from '@capital/common';
 import { Loadable } from '@capital/component';
+import { useIconIsShow } from './navbar/useIconIsShow';
 import { Translate } from './translate';
 
 const PLUGIN_ID = 'com.msgbyte.livekit';
 
-console.log('Plugin livekit is loaded');
+console.log(`Plugin ${PLUGIN_ID} is loaded`);
 
 regGroupPanel({
   name: `${PLUGIN_ID}/livekitPanel`,
@@ -14,3 +15,20 @@ regGroupPanel({
     componentName: `${PLUGIN_ID}:LivekitPanel`,
   }),
 });
+
+regCustomPanel({
+  position: 'navbar-more',
+  icon: 'mingcute:voice-line',
+  name: `${PLUGIN_ID}/livekitNavbarIcon`,
+  label: Translate.toVoiceChannel,
+  render: Loadable(
+    () =>
+      import('./navbar/redirect').then(
+        (module) => module.LivekitNavbarRedirect
+      ),
+    {
+      componentName: `${PLUGIN_ID}:LivekitNavbarRedirect`,
+    }
+  ),
+  useIsShow: useIconIsShow,
+});

server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/navbar/redirect.tsx

@@ -0,0 +1,17 @@
+import { useNavigate } from '@capital/common';
+import React, { useEffect } from 'react';
+import { useLivekitState } from '../store/useLivekitState';
+
+export const LivekitNavbarRedirect: React.FC = React.memo(() => {
+  const navigate = useNavigate();
+  const { isActive, url } = useLivekitState();
+
+  useEffect(() => {
+    if (isActive) {
+      navigate(url);
+    }
+  }, []);
+
+  return <div>Redirect...</div>;
+});
+LivekitNavbarRedirect.displayName = 'LivekitNavbarRedirect';

server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/navbar/useIconIsShow.ts

@@ -0,0 +1,5 @@
+import { useLivekitState } from '../store/useLivekitState';
+
+export function useIconIsShow() {
+  return useLivekitState().isActive;
+}

server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/store/useLivekitState.ts

@@ -0,0 +1,28 @@
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+
+interface LivekitState {
+  isActive: boolean;
+  url: string;
+  setActive: (url: string) => void;
+  setDeactive: () => void;
+}
+
+export const useLivekitState = create<LivekitState>()(
+  immer((set) => ({
+    isActive: false,
+    url: '',
+    setActive(url) {
+      set((state) => {
+        state.isActive = true;
+        state.url = url;
+      });
+    },
+    setDeactive() {
+      set((state) => {
+        state.isActive = false;
+        state.url = '';
+      });
+    },
+  }))
+);

server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/translate.ts

@@ -17,4 +17,8 @@ export const Translate = {
     'zh-CN': '摄像头',
     'en-US': 'Camera',
   }),
+  toVoiceChannel: localTrans({
+    'zh-CN': '点击跳转到活跃频道',
+    'en-US': 'Click to Active Channel',
+  }),
 };