chore: optimize

packages/agora-rtc-react-ui/src/components/CameraControl.tsx

@@ -1,4 +1,4 @@
-import "./UserControl.css";
+import "../assets/UserControl.css";
 
 import type { ButtonHTMLAttributes, MouseEvent } from "react";
 import { useCallback } from "react";

packages/agora-rtc-react-ui/src/components/CameraVideoTrack.tsx

@@ -1,6 +1,6 @@
 import type { LocalVideoTrackProps } from "agora-rtc-react";
 import { LocalVideoTrack, useAwaited } from "agora-rtc-react";
-import type { MaybePromiseOrNull } from "agora-rtc-react/src/utils";
+import type { MaybePromiseOrNull } from "agora-rtc-react/src/misc/utils";
 import type { ICameraVideoTrack } from "agora-rtc-sdk-ng";
 import { useEffect } from "react";
 

packages/agora-rtc-react-ui/src/components/LocalMicrophoneAndCameraUser.tsx

@@ -1,10 +1,10 @@
-import { UserCover } from "agora-rtc-react/src/components/UserCover";
 import {
   FloatBoxStyle,
   VideoTrackWrapperStyle,
   useMergedStyle,
-} from "agora-rtc-react/src/components/styles";
-import type { MaybePromiseOrNull } from "agora-rtc-react/src/utils";
+} from "agora-rtc-react/src/assets/styles";
+import { UserCover } from "agora-rtc-react/src/components/UserCover";
+import type { MaybePromiseOrNull } from "agora-rtc-react/src/misc/utils";
 import type { ICameraVideoTrack, IMicrophoneAudioTrack } from "agora-rtc-sdk-ng";
 import type { HTMLProps, ReactNode } from "react";
 

packages/agora-rtc-react-ui/src/components/MicControl.tsx

@@ -1,4 +1,4 @@
-import "./UserControl.css";
+import "../assets/UserControl.css";
 
 import { useVolumeLevel } from "agora-rtc-react";
 import type { ILocalAudioTrack, IRemoteAudioTrack } from "agora-rtc-sdk-ng";

packages/agora-rtc-react-ui/src/components/MicrophoneAudioTrack.tsx

@@ -1,6 +1,6 @@
 import type { LocalAudioTrackProps } from "agora-rtc-react";
 import { LocalAudioTrack, useAwaited } from "agora-rtc-react";
-import type { MaybePromiseOrNull } from "agora-rtc-react/src/utils";
+import type { MaybePromiseOrNull } from "agora-rtc-react/src/misc/utils";
 import type { IMicrophoneAudioTrack } from "agora-rtc-sdk-ng";
 import type { ReactNode } from "react";
 import { useEffect } from "react";

packages/agora-rtc-react-ui/src/components/RemoteVideoPlayer.tsx

@@ -1,10 +1,10 @@
 import { RemoteVideoTrack, useRTCClient } from "agora-rtc-react";
-import { UserCover } from "agora-rtc-react/src/components/UserCover";
 import {
   FloatBoxStyle,
   VideoTrackWrapperStyle,
   useMergedStyle,
-} from "agora-rtc-react/src/components/styles";
+} from "agora-rtc-react/src/assets/styles";
+import { UserCover } from "agora-rtc-react/src/components/UserCover";
 import type { IAgoraRTCClient, IRemoteVideoTrack } from "agora-rtc-sdk-ng";
 import type { HTMLProps, ReactNode } from "react";
 

packages/agora-rtc-react-ui/src/components/CameraControl.stories.tsx → packages/agora-rtc-react-ui/src/stories/CameraControl.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import type { CameraControlProps } from "./CameraControl";
-import { CameraControl } from "./CameraControl";
+import type { CameraControlProps } from "../components";
+import { CameraControl } from "../components";
 
 const meta: Meta<CameraControlProps> = {
   title: "Controls/CameraControl",

packages/agora-rtc-react-ui/src/components/CameraVideoTrack.stories.tsx → packages/agora-rtc-react-ui/src/stories/CameraVideoTrack.stories.tsx

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { FakeCameraVideoTrack } from "fake-agora-rtc";
 import { useState } from "react";
 
-import type { CameraVideoTrackProps } from "./CameraVideoTrack";
-import { CameraVideoTrack } from "./CameraVideoTrack";
+import type { CameraVideoTrackProps } from "../components";
+import { CameraVideoTrack } from "../components";
 
 const meta: Meta<CameraVideoTrackProps> = {
   title: "Track/CameraVideoTrack",

packages/agora-rtc-react-ui/src/components/LocalMicrophoneAndCameraUser.stories.tsx → packages/agora-rtc-react-ui/src/stories/LocalMicrophoneAndCameraUser.stories.tsx

@@ -4,8 +4,8 @@ import { AgoraRTCProvider } from "agora-rtc-react/src/hooks";
 import { FakeCameraVideoTrack, FakeMicrophoneAudioTrack, FakeRTCClient } from "fake-agora-rtc";
 import { useEffect, useMemo, useState } from "react";
 
-import type { LocalMicrophoneAndCameraUserProps } from "./LocalMicrophoneAndCameraUser";
-import { LocalMicrophoneAndCameraUser } from "./LocalMicrophoneAndCameraUser";
+import type { LocalMicrophoneAndCameraUserProps } from "../components";
+import { LocalMicrophoneAndCameraUser } from "../components";
 
 const meta: Meta<LocalMicrophoneAndCameraUserProps> = {
   title: "User/LocalMicrophoneAndCameraUser",

packages/agora-rtc-react-ui/src/components/MicControl.stories.tsx → packages/agora-rtc-react-ui/src/stories/MicControl.stories.tsx

@@ -3,8 +3,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { FakeLocalAudioTrack, FakeRemoteAudioTrack } from "fake-agora-rtc";
 import { useEffect } from "react";
 
-import type { MicControlProps } from "./MicControl";
-import { MicControl } from "./MicControl";
+import type { MicControlProps } from "../components";
+import { MicControl } from "../components";
 
 const meta: Meta<MicControlProps> = {
   title: "Controls/MicControl",

packages/agora-rtc-react-ui/src/components/MicrophoneAudioTrack.stories.tsx → packages/agora-rtc-react-ui/src/stories/MicrophoneAudioTrack.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { FakeMicrophoneAudioTrack } from "fake-agora-rtc";
 
-import type { MicrophoneAudioTrackProps } from "./MicrophoneAudioTrack";
-import { MicrophoneAudioTrack } from "./MicrophoneAudioTrack";
+import type { MicrophoneAudioTrackProps } from "../components";
+import { MicrophoneAudioTrack } from "../components";
 
 const meta: Meta<MicrophoneAudioTrackProps> = {
   title: "Track/MicrophoneAudioTrack",

packages/agora-rtc-react-ui/src/components/RemoteVideoPlayer.stories.tsx → packages/agora-rtc-react-ui/src/stories/RemoteVideoPlayer.stories.tsx

@@ -3,8 +3,8 @@ import { AgoraRTCProvider } from "agora-rtc-react/src/hooks";
 import { FakeRTCClient, FakeRemoteVideoTrack } from "fake-agora-rtc";
 import { useState } from "react";
 
-import type { RemoteVideoPlayerProps } from "./RemoteVideoPlayer";
-import { RemoteVideoPlayer } from "./RemoteVideoPlayer";
+import type { RemoteVideoPlayerProps } from "../components";
+import { RemoteVideoPlayer } from "../components";
 
 const meta: Meta<RemoteVideoPlayerProps> = {
   title: "Video/RemoteVideoPlayer",

packages/agora-rtc-react-ui/test/CameraVideoTrack.test.tsx

@@ -7,8 +7,7 @@ import type { Mock } from "vitest";
 import { describe, expect, test, vi } from "vitest";
 
 import { CameraVideoTrack } from "../src/components";
-import * as stories from "../src/components/CameraVideoTrack.stories";
-
+import * as stories from "../src/stories/CameraVideoTrack.stories";
 const { Enabled, EmptyTrack } = composeStories(stories);
 
 vi.mock("agora-rtc-react/src/hooks", () => ({

packages/agora-rtc-react-ui/test/LocalMicrophoneAndCameraUser.test.tsx

@@ -5,8 +5,7 @@ import { FakeMicrophoneAudioTrack } from "fake-agora-rtc";
 import { describe, expect, test, vi } from "vitest";
 
 import { LocalMicrophoneAndCameraUser } from "../src/components";
-import * as stories from "../src/components/LocalMicrophoneAndCameraUser.stories";
-
+import * as stories from "../src/stories/LocalMicrophoneAndCameraUser.stories";
 const { Overview } = composeStories(stories);
 
 describe("LocalMicrophoneAndCameraUser component", () => {

packages/agora-rtc-react-ui/test/MicrophoneAudioTrack.test.tsx

@@ -2,13 +2,11 @@ import { composeStories } from "@storybook/react";
 import { render } from "@testing-library/react";
 import { useAwaited } from "agora-rtc-react";
 import type { IMicrophoneAudioTrack } from "agora-rtc-sdk-ng";
-import React from "react";
 import type { Mock } from "vitest";
 import { describe, expect, test, vi } from "vitest";
 
 import { MicrophoneAudioTrack } from "../src/components";
-import * as stories from "../src/components/MicrophoneAudioTrack.stories";
-
+import * as stories from "../src/stories/MicrophoneAudioTrack.stories";
 const { Enabled } = composeStories(stories);
 
 vi.mock("agora-rtc-react/src/hooks", () => ({

packages/agora-rtc-react-ui/test/RemoteVideoPlayer.test.tsx

@@ -4,7 +4,7 @@ import { FakeRTCClient } from "fake-agora-rtc";
 import { describe, expect, test, vi } from "vitest";
 
 import { RemoteVideoPlayer } from "../src/components";
-import * as stories from "../src/components/RemoteVideoPlayer.stories";
+import * as stories from "../src/stories/RemoteVideoPlayer.stories";
 const { Overview, WithCover } = composeStories(stories);
 
 vi.mock("agora-rtc-react/src/components/TrackBoundary", () => ({

packages/agora-rtc-react/src/components/LocalAudioTrack.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 import { useEffect } from "react";
 
 import { useAwaited } from "../hooks";
-import type { MaybePromiseOrNull } from "../utils";
+import type { MaybePromiseOrNull } from "../misc/utils";
 
 import { useAutoPlayAudioTrack } from "./TrackBoundary";
 

packages/agora-rtc-react/src/components/LocalUser.tsx

@@ -1,12 +1,12 @@
 import type { ILocalAudioTrack, ILocalVideoTrack } from "agora-rtc-sdk-ng";
 import type { HTMLProps, ReactNode } from "react";
 
-import type { MaybePromiseOrNull } from "../utils";
+import { FloatBoxStyle, VideoTrackWrapperStyle, useMergedStyle } from "../assets/styles";
+import type { MaybePromiseOrNull } from "../misc/utils";
 
 import { LocalAudioTrack } from "./LocalAudioTrack";
 import { LocalVideoTrack } from "./LocalVideoTrack";
 import { UserCover } from "./UserCover";
-import { FloatBoxStyle, VideoTrackWrapperStyle, useMergedStyle } from "./styles";
 
 export interface LocalUserProps extends HTMLProps<HTMLDivElement> {
   /**

packages/agora-rtc-react/src/components/LocalVideoTrack.tsx

@@ -2,11 +2,11 @@ import type { ILocalVideoTrack } from "agora-rtc-sdk-ng";
 import type { HTMLProps } from "react";
 import { useEffect, useState } from "react";
 
+import { VideoTrackStyle, useMergedStyle } from "../assets/styles";
 import { useAwaited } from "../hooks";
-import type { MaybePromiseOrNull } from "../utils";
+import type { MaybePromiseOrNull } from "../misc/utils";
 
 import { useAutoPlayVideoTrack } from "./TrackBoundary";
-import { VideoTrackStyle, useMergedStyle } from "./styles";
 
 export interface LocalVideoTrackProps extends HTMLProps<HTMLDivElement> {
   /**

packages/agora-rtc-react/src/components/RemoteAudioTrack.tsx

@@ -2,7 +2,7 @@ import type { IRemoteAudioTrack } from "agora-rtc-sdk-ng";
 import type { ReactNode } from "react";
 import { useEffect } from "react";
 
-import type { Nullable } from "../utils";
+import type { Nullable } from "../misc/utils";
 
 import { useAutoPlayAudioTrack } from "./TrackBoundary";
 

packages/agora-rtc-react/src/components/RemoteUser.tsx

@@ -1,12 +1,12 @@
 import type { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
 import type { HTMLProps, ReactNode } from "react";
 
+import { FloatBoxStyle, VideoTrackWrapperStyle, useMergedStyle } from "../assets/styles";
 import { useRemoteUserTrack } from "../hooks";
 
 import { RemoteAudioTrack } from "./RemoteAudioTrack";
 import { RemoteVideoTrack } from "./RemoteVideoTrack";
 import { UserCover } from "./UserCover";
-import { FloatBoxStyle, VideoTrackWrapperStyle, useMergedStyle } from "./styles";
 
 export interface RemoteUserProps extends HTMLProps<HTMLDivElement> {
   /**

packages/agora-rtc-react/src/components/RemoteVideoTrack.tsx

@@ -2,10 +2,10 @@ import type { IRemoteVideoTrack } from "agora-rtc-sdk-ng";
 import type { HTMLProps } from "react";
 import { useState } from "react";
 
-import type { Nullable } from "../utils";
+import { VideoTrackStyle, useMergedStyle } from "../assets/styles";
+import type { Nullable } from "../misc/utils";
 
 import { useAutoPlayVideoTrack } from "./TrackBoundary";
-import { VideoTrackStyle, useMergedStyle } from "./styles";
 
 export interface RemoteVideoTrackProps extends HTMLProps<HTMLDivElement> {
   /**

packages/agora-rtc-react/src/components/TrackBoundary.tsx

@@ -9,8 +9,8 @@ import type { PropsWithChildren } from "react";
 import { createContext, useContext, useEffect, useState } from "react";
 
 import { useIsomorphicLayoutEffect } from "../hooks/tools";
-import type { Nullable } from "../utils";
-import { timeout } from "../utils";
+import type { Nullable } from "../misc/utils";
+import { timeout } from "../misc/utils";
 
 interface TrackBoundaryController {
   onMount: (track: ITrack) => void;

packages/agora-rtc-react/src/components/UserCover.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode } from "react";
 
-import { FloatBoxStyle } from "./styles";
+import { FloatBoxStyle } from "../assets/styles";
 
 const CoverBlurStyle: CSSProperties = {
   width: "100%",

packages/agora-rtc-react/src/error.ts

@@ -1,19 +1,19 @@
-import type { AgoraRTCError } from "./listen";
+import type { IAgoraRTCError } from "agora-rtc-sdk-ng";
 
 type printType = "log" | "warn" | "error" | "info";
 
 interface IAgoraRTCReactError extends Error {
   readonly rtcMethod: string;
-  readonly rtcError: AgoraRTCError | string;
+  readonly rtcError: IAgoraRTCError | string;
   log: (type: printType) => void;
 }
 
 export class AgoraRTCReactError extends Error implements IAgoraRTCReactError {
   public readonly rtcMethod: string;
-  public readonly rtcError: AgoraRTCError | string;
+  public readonly rtcError: IAgoraRTCError | string;
   public override readonly name: string = "AgoraRTCReactException";
 
-  public constructor(rtcMethod: string, rtcError: AgoraRTCError | string) {
+  public constructor(rtcMethod: string, rtcError: IAgoraRTCError | string) {
     if (typeof rtcError === "string") {
       super(rtcError);
     } else {

packages/agora-rtc-react/src/hooks/client.ts

@@ -1,10 +1,10 @@
-import type { ConnectionState, IAgoraRTCClient, UID } from "agora-rtc-sdk-ng";
+import type { ConnectionState, IAgoraRTCClient, IAgoraRTCError, UID } from "agora-rtc-sdk-ng";
 import { useEffect, useState } from "react";
 
 import { AgoraRTCReactError } from "../error";
-import type { AgoraRTCError } from "../listen";
-import { listen } from "../listen";
-import { joinDisposers, timeout } from "../utils";
+import { listen } from "../misc/listen";
+import { joinDisposers, timeout } from "../misc/utils";
+import type { FetchArgs, NetworkQuality } from "../types";
 
 import { useRTCClient } from "./context";
 import { useAsyncEffect, useIsUnmounted } from "./tools";
@@ -88,41 +88,6 @@ export function useCurrentUID(client?: IAgoraRTCClient | null): UID | undefined
   return uid;
 }
 
-export interface NetworkQuality {
-  /**
-   * The uplink network quality.
-   *
-   * It is calculated based on the uplink transmission bitrate, uplink packet loss rate, RTT (round-trip time) and jitter.
-   *
-   * - 0: The quality is unknown.
-   * - 1: The quality is excellent.
-   * - 2: The quality is good, but the bitrate is less than optimal.
-   * - 3: Users experience slightly impaired communication.
-   * - 4: Users can communicate with each other, but not very smoothly.
-   * - 5: The quality is so poor that users can barely communicate.
-   * - 6: The network is disconnected and users cannot communicate.
-   */
-  uplink: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  /**
-   * The downlink network quality.
-   *
-   * It is calculated based on the uplink transmission bitrate, uplink packet loss rate, RTT (round-trip time) and jitter.
-   *
-   * - 0: The quality is unknown.
-   * - 1: The quality is excellent.
-   * - 2: The quality is good, but the bitrate is less than optimal.
-   * - 3: Users experience slightly impaired communication.
-   * - 4: Users can communicate with each other, but not very smoothly.
-   * - 5: The quality is so poor that users can barely communicate.
-   * - 6: The network is disconnected and users cannot communicate.
-   */
-  downlink: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  /**
-   * RTT (Round-Trip Time) between the SDK and Agora's edge server, in ms.
-   */
-  delay: number;
-}
-
 const initQuality = (): NetworkQuality => ({
   uplink: 0,
   downlink: 0,
@@ -155,15 +120,6 @@ export function useNetworkQuality(client?: IAgoraRTCClient | null): NetworkQuali
   return networkQuality;
 }
 
-export interface JoinOptions {
-  appid: string;
-  channel: string;
-  token: string | null;
-  uid?: UID | null;
-}
-
-export type FetchArgs = (() => Promise<JoinOptions>) | JoinOptions;
-
 /**
  * a hook to join rtc channel
  * unmount will leave channel and close all tracks
@@ -205,7 +161,7 @@ export function useJoin(
       } catch (err) {
         console.error(err);
         if (!isUnmountRef.current) {
-          setError(new AgoraRTCReactError("IAgoraRTCClient.join", err as AgoraRTCError));
+          setError(new AgoraRTCReactError("IAgoraRTCClient.join", err as IAgoraRTCError));
         }
       }
       if (!isUnmountRef.current) {