From 95c589df4fdc7dbaeaa45ba29d31fc3df29b70d8 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Sat, 22 Jul 2023 20:56:18 +0800 Subject: [PATCH] feat: add navbar icon which can jump to active panel --- .../plugins/com.msgbyte.music/src/index.tsx | 8 ++--- .../modals/GroupDetail/Role/tabs/member.tsx | 2 +- pnpm-lock.yaml | 3 ++ .../plugins/com.msgbyte.livekit/package.json | 3 +- .../src/group/LivekitPanel.tsx | 30 +++++++++---------- .../plugins/com.msgbyte.livekit/src/index.tsx | 22 ++++++++++++-- .../src/navbar/redirect.tsx | 17 +++++++++++ .../src/navbar/useIconIsShow.ts | 5 ++++ .../src/store/useLivekitState.ts | 28 +++++++++++++++++ .../com.msgbyte.livekit/src/translate.ts | 4 +++ 10 files changed, 99 insertions(+), 23 deletions(-) create mode 100644 server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/navbar/redirect.tsx create mode 100644 server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/navbar/useIconIsShow.ts create mode 100644 server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/store/useLivekitState.ts diff --git a/client/web/plugins/com.msgbyte.music/src/index.tsx b/client/web/plugins/com.msgbyte.music/src/index.tsx index cd5425f1..50cc8bcd 100644 --- a/client/web/plugins/com.msgbyte.music/src/index.tsx +++ b/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`, } ), }); diff --git a/client/web/src/components/modals/GroupDetail/Role/tabs/member.tsx b/client/web/src/components/modals/GroupDetail/Role/tabs/member.tsx index 2102d7ca..857cdcb4 100644 --- a/client/web/src/components/modals/GroupDetail/Role/tabs/member.tsx +++ b/client/web/src/components/modals/GroupDetail/Role/tabs/member.tsx @@ -38,7 +38,7 @@ export const RoleMember: React.FC = 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(() => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 60d5d5e2..d0f9b8bc 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/package.json b/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/package.json index 902a5cd1..1dde3db2 100644 --- a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/package.json +++ b/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", diff --git a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/group/LivekitPanel.tsx b/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/group/LivekitPanel.tsx index eb12bba0..2bb3d4ea 100644 --- a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/group/LivekitPanel.tsx +++ b/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(() => { { - setPreJoinChoices(undefined); - }} + onLeave={handleLeave} /> ) : (
{ videoEnabled: false, audioEnabled: false, }} - onSubmit={(values) => { - console.log('Joining with: ', values); - setPreJoinChoices(values); - }} + onSubmit={handleJoin} />
)} diff --git a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/index.tsx b/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/index.tsx index 0f627313..f283b3df 100644 --- a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/index.tsx +++ b/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, +}); diff --git a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/navbar/redirect.tsx b/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/navbar/redirect.tsx new file mode 100644 index 00000000..13b8e23a --- /dev/null +++ b/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
Redirect...
; +}); +LivekitNavbarRedirect.displayName = 'LivekitNavbarRedirect'; diff --git a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/navbar/useIconIsShow.ts b/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/navbar/useIconIsShow.ts new file mode 100644 index 00000000..bf509038 --- /dev/null +++ b/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; +} 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 new file mode 100644 index 00000000..404bbf89 --- /dev/null +++ b/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()( + immer((set) => ({ + isActive: false, + url: '', + setActive(url) { + set((state) => { + state.isActive = true; + state.url = url; + }); + }, + setDeactive() { + set((state) => { + state.isActive = false; + state.url = ''; + }); + }, + })) +); diff --git a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/translate.ts b/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/translate.ts index 2d906da4..e9cfe476 100644 --- a/server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/translate.ts +++ b/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', + }), };