refactor: agora settings and functions

2023-04-23 11:14:31 +08:00
parent 9f0b419f43
commit 9dc6bcd483
7 changed files with 53 additions and 46 deletions
@@ -116,26 +116,8 @@ export const serverApi = createApi({
    getAgoraConfig: builder.query<AgoraConfig, void>({
      query: () => ({ url: `/admin/agora/config` })
    }),
-    updateAgoraConfig: builder.mutation<void, AgoraConfig>({
-      query: (data) => ({
-        url: `/admin/agora/config`,
-        method: "POST",
-        body: data
-      })
-    }),
-    getAgoraToken: builder.query<AgoraTokenResponse, number>({
-      query: (id) => ({
-        url: `group/${id}/agora_token`,
-      })
-    }),
-    // tmp API
-    getAgoraVoicingList: builder.query<AgoraVoicingListResponse, { appid: string, key: string, secret: string }>({
-      query: ({ appid, key, secret }) => ({
-        headers: {
-          Authorization: `Basic ${btoa(`${key}:${secret}`)}`
-        },
-        url: `https://api.agora.io/dev/v1/channel/${appid}`,
-      }),
+    getAgoraChannels: builder.query<AgoraVoicingListResponse, { page_no: number, page_size: number }>({
+      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<void, AgoraConfig>({
+      query: (data) => ({
+        url: `/admin/agora/config`,
+        method: "POST",
+        body: data
+      })
+    }),
+    getAgoraStatus: builder.query<boolean, void>({
+      query: () => ({ url: `/admin/agora/enabled` })
+    }),
+    getAgoraToken: builder.query<AgoraTokenResponse, number>({
+      query: (id) => ({
+        url: `group/${id}/agora_token`,
+      })
+    }),
    getSystemCommon: builder.query<SystemCommon, void>({
      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
@@ -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();
@@ -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) {
            </li>
          </Tippy>
        </Tooltip>
-        {/* 音频 暂时只有admin有入口 */}
-        <VoiceChat context={`channel`} id={cid} />
+        <ServerVersionChecker version="0.3.5" empty={true}>
+          <VoiceChat context={`channel`} id={cid} />
+        </ServerVersionChecker>
        <Tooltip tip={t("fav")} placement="left">
          <Tippy
            placement="left-start"
@@ -8,7 +8,7 @@ import { useAppSelector } from '../../../app/store';
 import IconHeadphone from '../../../assets/icons/headphone.svg';
 import Tooltip from '../../../common/component/Tooltip';
 import { useVoice } from '../../../common/component/Voice';
-import { useGetAgoraConfigQuery } from '../../../app/services/server';
+import { useGetAgoraStatusQuery } from '../../../app/services/server';

 type Props = {
    context?: "channel" | "dm"
@@ -26,7 +26,7 @@ const VoiceChat = ({ id, context = "channel" }: Props) => {
            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 `;
@@ -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 && <ReLoginModal />}
      {!guest && <UnreadTabTip />}
-      {!guest && isAdmin && <Voice />}
+      {!guest && <ServerVersionChecker empty={true} version="0.3.5">
+        <Voice />
+      </ServerVersionChecker>}
      <Manifest />
      {!guest && <Notification />}
      <div className={`vocechat-container flex w-screen h-screen bg-gray-200 dark:bg-gray-900`}>
@@ -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<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -32,7 +36,7 @@ export default function ConfigAgora() {
    customer_secret,
    enabled = false
  } = values as AgoraConfig;
-
+  const _url = url || "https://api.agora.io";
  return (
    <div className="setting-container">
      <div className="inputs">
@@ -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"
          />
@@ -39,7 +39,9 @@ const navs = [
    items: [
      {
        name: "bot",
-        component: <ServerVersionChecker version="0.3.2"><BotConfig /></ServerVersionChecker>,
+        component: <ServerVersionChecker version="0.3.2">
+          <BotConfig />
+        </ServerVersionChecker>,
        admin: true
      },
      {
@@ -48,7 +50,9 @@ const navs = [
      },
      {
        name: "agora",
-        component: <ConfigAgora />
+        component: <ServerVersionChecker version="0.3.5">
+          <ConfigAgora />
+        </ServerVersionChecker>
      },
      {
        name: "smtp",