From 9dc6bcd483db28fa331f39815fea30783bddf279 Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Sun, 23 Apr 2023 11:14:31 +0800 Subject: [PATCH] refactor: agora settings and functions --- src/app/services/server.ts | 40 +++++++++++++-------------- src/common/component/Voice.tsx | 21 ++++++-------- src/routes/chat/ChannelChat/index.tsx | 6 ++-- src/routes/chat/VoiceChat/index.tsx | 7 ++--- src/routes/home/index.tsx | 7 +++-- src/routes/setting/config/Agora.tsx | 10 +++++-- src/routes/setting/navs.tsx | 8 ++++-- 7 files changed, 53 insertions(+), 46 deletions(-) diff --git a/src/app/services/server.ts b/src/app/services/server.ts index 08de66c0..d40e6a66 100644 --- a/src/app/services/server.ts +++ b/src/app/services/server.ts @@ -116,26 +116,8 @@ export const serverApi = createApi({ getAgoraConfig: builder.query({ query: () => ({ url: `/admin/agora/config` }) }), - updateAgoraConfig: builder.mutation({ - query: (data) => ({ - url: `/admin/agora/config`, - method: "POST", - body: data - }) - }), - getAgoraToken: builder.query({ - query: (id) => ({ - url: `group/${id}/agora_token`, - }) - }), - // tmp API - getAgoraVoicingList: builder.query({ - query: ({ appid, key, secret }) => ({ - headers: { - Authorization: `Basic ${btoa(`${key}:${secret}`)}` - }, - url: `https://api.agora.io/dev/v1/channel/${appid}`, - }), + getAgoraChannels: builder.query({ + query: (param = { page_no: 0, page_size: 100 }) => ({ url: `/admin/agora/channel/${param.page_no}/${param.page_size}` }), async onQueryStarted(data, { dispatch, queryFulfilled }) { try { const { data: resp } = await queryFulfilled; @@ -157,6 +139,21 @@ export const serverApi = createApi({ } } }), + updateAgoraConfig: builder.mutation({ + query: (data) => ({ + url: `/admin/agora/config`, + method: "POST", + body: data + }) + }), + getAgoraStatus: builder.query({ + query: () => ({ url: `/admin/agora/enabled` }) + }), + getAgoraToken: builder.query({ + query: (id) => ({ + url: `group/${id}/agora_token`, + }) + }), getSystemCommon: builder.query({ query: () => ({ url: `/admin/system/common` }), async onQueryStarted(data, { dispatch, queryFulfilled }) { @@ -401,7 +398,8 @@ export const { useGetFrontendUrlQuery, useLazyGetAgoraTokenQuery, useGetAgoraConfigQuery, - useGetAgoraVoicingListQuery, + useGetAgoraStatusQuery, + useGetAgoraChannelsQuery, useUpdateSystemCommonMutation, useLazyGetSystemCommonQuery, useGetSystemCommonQuery diff --git a/src/common/component/Voice.tsx b/src/common/component/Voice.tsx index dc9ecfcb..8a520fce 100644 --- a/src/common/component/Voice.tsx +++ b/src/common/component/Voice.tsx @@ -1,32 +1,29 @@ import AgoraRTC, { IMicrophoneAudioTrack } from 'agora-rtc-sdk-ng'; import { memo, useEffect } from 'react'; import { useDispatch } from 'react-redux'; -import { useGetAgoraConfigQuery, useGetAgoraVoicingListQuery, useLazyGetAgoraTokenQuery } from '../../app/services/server'; +import { useGetAgoraChannelsQuery, useGetAgoraStatusQuery, useLazyGetAgoraTokenQuery } from '../../app/services/server'; import { updateChannelVisibleAside } from '../../app/slices/footprint'; import { addVoiceMember, removeVoiceMember, updateConnectionState, updateDeafenStatus, updateMuteStatus, updateVoicingInfo, updateVoicingMember, updateVoicingNetworkQuality, upsertVoiceList } from '../../app/slices/voice'; import { useAppSelector } from '../../app/store'; import AudioJoin from '../../assets/join.wav'; +// import { compareVersion } from '../utils'; // type Props = {} AgoraRTC.setLogLevel(process.env.NODE_ENV === 'development' ? 0 : 4); window.VOICE_TRACK_MAP = window.VOICE_TRACK_MAP ?? {}; // let tmpUids: number[] = []; const Voice = () => { - const { isAdmin } = useAppSelector(store => { + const { serverVersion } = useAppSelector(store => { return { - isAdmin: !!store.authData.user?.is_admin, + serverVersion: store.server.version ?? 0, // joined: !!store.voice.voicing }; }); - const { data: agoraConfig } = useGetAgoraConfigQuery(undefined, { - skip: !isAdmin - }); - useGetAgoraVoicingListQuery({ - appid: agoraConfig?.app_id ?? "", - key: agoraConfig?.customer_id ?? "", - secret: agoraConfig?.customer_secret ?? "", + console.log("serverVersion", serverVersion); - }, { - skip: !isAdmin || !agoraConfig?.enabled || !navigator.onLine, + // const skipAgoraStatusCheck = compareVersion(serverVersion, '0.3.5') >= 0; + const { data: enabled } = useGetAgoraStatusQuery(); + useGetAgoraChannelsQuery({ page_no: 0, page_size: 100 }, { + skip: !enabled || !navigator.onLine, pollingInterval: 5000 }); const dispatch = useDispatch(); diff --git a/src/routes/chat/ChannelChat/index.tsx b/src/routes/chat/ChannelChat/index.tsx index 960d9885..dccd6fc4 100644 --- a/src/routes/chat/ChannelChat/index.tsx +++ b/src/routes/chat/ChannelChat/index.tsx @@ -19,6 +19,7 @@ import Members from "./Members"; import VoiceChat from "../VoiceChat"; import { updateChannelVisibleAside } from "../../../app/slices/footprint"; import Dashboard from "../VoiceChat/Dashboard"; +import ServerVersionChecker from "../../../common/component/ServerVersionChecker"; type Props = { cid?: number; dropFiles?: File[]; @@ -90,8 +91,9 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) { - {/* 音频 暂时只有admin有入口 */} - + + + { visibleAside: context == "channel" ? store.footprint.channelAsides[id] : null, }; }); - const { data: agoraConfig } = useGetAgoraConfigQuery(undefined, { skip: !loginUser?.is_admin }); + const { data: enabled } = useGetAgoraStatusQuery(); const { t } = useTranslation("chat"); const toggleDashboard = () => { if (context == "channel") { @@ -50,8 +50,7 @@ const VoiceChat = ({ id, context = "channel" }: Props) => { })); } }; - // 只有admin才能看到入口，后续会改 - if (!loginUser || !loginUser.is_admin || !agoraConfig?.enabled) return null; + if (!loginUser || !enabled) return null; const visible = visibleAside == "voice"; const memberCount = voiceList.find((v) => v.context == context && v.id == id)?.memberCount ?? 0; const badgeClass = `absolute -top-2 -right-2 w-4 h-4 rounded-full bg-primary-400 text-white `; diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx index 996f0d84..df890036 100644 --- a/src/routes/home/index.tsx +++ b/src/routes/home/index.tsx @@ -20,6 +20,7 @@ import { updateRememberedNavs } from "../../app/slices/ui"; import UnreadTabTip from "../../common/component/UnreadTabTip"; import ReLoginModal from "../../common/component/ReLoginModal"; import Voice from "../../common/component/Voice"; +import ServerVersionChecker from "../../common/component/ServerVersionChecker"; function HomePage() { @@ -30,7 +31,7 @@ function HomePage() { const { pathname } = useLocation(); const { roleChanged, - loginUser: { uid: loginUid, is_admin: isAdmin }, + loginUser: { uid: loginUid }, guest, ui: { ready, @@ -68,7 +69,9 @@ function HomePage() { <> {roleChanged && } {!guest && } - {!guest && isAdmin && } + {!guest && + + } {!guest && }
diff --git a/src/routes/setting/config/Agora.tsx b/src/routes/setting/config/Agora.tsx index dc0657a1..5abb64d9 100644 --- a/src/routes/setting/config/Agora.tsx +++ b/src/routes/setting/config/Agora.tsx @@ -11,7 +11,11 @@ export default function ConfigAgora() { const { changed, reset, values, setValues, toggleEnable, updateConfig } = useConfig("agora"); const handleUpdate = () => { // const { token_url, description } = values; - updateConfig(values); + const _values = values as AgoraConfig; + if (!_values.url) { + _values.url = "https://api.agora.io"; + } + updateConfig(_values); }; const handleChange = (evt: ChangeEvent) => { @@ -32,7 +36,7 @@ export default function ConfigAgora() { customer_secret, enabled = false } = values as AgoraConfig; - + const _url = url || "https://api.agora.io"; return (
@@ -46,7 +50,7 @@ export default function ConfigAgora() { disabled={!enabled} data-type="url" onChange={handleChange} - value={url || "https://api.agora.io"} + value={_url} name="url" placeholder="Agora URL" /> diff --git a/src/routes/setting/navs.tsx b/src/routes/setting/navs.tsx index ec8575cb..71c04eb7 100644 --- a/src/routes/setting/navs.tsx +++ b/src/routes/setting/navs.tsx @@ -39,7 +39,9 @@ const navs = [ items: [ { name: "bot", - component: , + component: + + , admin: true }, { @@ -48,7 +50,9 @@ const navs = [ }, { name: "agora", - component: + component: + + }, { name: "smtp",