refactor(rtc): remove css

AgoraIO-Extensions · Mar 24, 2023 · bf3c869 · bf3c869
1 parent 5e7d0c8
commit bf3c869
Show file tree

Hide file tree

Showing 23 changed files with 307 additions and 213 deletions.
diff --git a/examples/mobx/src/components/LocalUser.tsx b/examples/mobx/src/components/LocalUser.tsx
@@ -9,17 +9,18 @@ interface LocalUserProps {
 
 export const LocalUser = observer(function LocalUser({ className, localUser }: LocalUserProps) {
   return (
-    <LocalMicrophoneAndCameraUser
-      className={className}
-      micDisabled={!localUser.micOn}
-      audioTrack={localUser.micTrack}
-      cameraDisabled={!localUser.cameraOn}
-      videoTrack={localUser.cameraTrack}
-      playVideo={localUser.cameraOn}
-      cover={localUser.avatar}
-    >
-      <span className="user-name">{localUser.name}</span>
-      {localUser.micOn && <MicControl micOn={localUser.micOn} audioTrack={localUser.micTrack} />}
-    </LocalMicrophoneAndCameraUser>
+    <div className={className}>
+      <LocalMicrophoneAndCameraUser
+        micOn={localUser.micOn}
+        audioTrack={localUser.micTrack}
+        cameraOn={localUser.cameraOn}
+        videoTrack={localUser.cameraTrack}
+        playVideo={localUser.cameraOn}
+        cover={localUser.avatar}
+      >
+        <span className="user-name">{localUser.name}</span>
+        {localUser.micOn && <MicControl micOn disabled audioTrack={localUser.micTrack} />}
+      </LocalMicrophoneAndCameraUser>
+    </div>
   );
 });
diff --git a/examples/mobx/src/components/Room.tsx b/examples/mobx/src/components/Room.tsx
@@ -15,17 +15,12 @@ export const Room = observer(function Room() {
           <div className="tracks layout" data-size={remoteUsers.length + (localUser ? 1 : 0)}>
             {localUser && <LocalUser className="layout-item" localUser={localUser} />}
             {remoteUsers.map(user => (
-              <RemoteUser
-                className="layout-item"
-                key={user.uid}
-                user={user.rtcUser}
-                playVideo={user.cameraOn}
-                playAudio={user.micOn}
-                cover={user.avatar}
-              >
-                <span className="user-name">{user.name}</span>
-                {user.micOn && <MicControl micOn={user.micOn} audioTrack={user.audioTrack} />}
-              </RemoteUser>
+              <div key={user.uid} className="layout-item">
+                <RemoteUser user={user.rtcUser} cover={user.avatar}>
+                  <span className="user-name">{user.name}</span>
+                  {user.micOn && <MicControl micOn disabled audioTrack={user.audioTrack} />}
+                </RemoteUser>
+              </div>
             ))}
             <RemoteVideoTrack className="share-screen" track={shareScreen.remoteVideoTrack} play />
           </div>

diff --git a/examples/mobx/src/styles.css b/examples/mobx/src/styles.css
@@ -1,5 +1,4 @@
 @import "sanitize.css";
-@import "agora-rtc-react/dist/agora-rtc-react.css";
 
 #root {
   height: 100vh;

diff --git a/examples/overview/src/App.tsx b/examples/overview/src/App.tsx
@@ -12,15 +12,13 @@ import { useEffect, useMemo, useState } from "react";
 
 import {
   AgoraRTCProvider,
-  CameraVideoTrack,
-  MicrophoneAudioTrack,
+  LocalMicrophoneAndCameraUser,
   RemoteUser,
   SVGCamera,
   SVGCameraMute,
   SVGMicrophone,
   SVGMicrophoneMute,
   usePublishedRemoteUsers,
-  UserCover,
   useRemoteUsers,
   useSafePromise,
 } from "agora-rtc-react";
@@ -95,23 +93,22 @@ export const App = () => {
           total={remoteUsers.length + 1}
         />
         <AutoLayout>
-          <AutoLayout.Item>
-            <CameraVideoTrack className="w-full h-full" track={videoTrack} play={cameraOn} />
-            <MicrophoneAudioTrack track={audioTrack} play={micOn} />
-            {!cameraOn && uid && (
-              <UserCover cover={userAvatar} className="w-full h-full absolute top-0 left-0" />
-            )}
-            {uid && <Label>{`${userName}{${uid}}`}</Label>}
-          </AutoLayout.Item>
+          {uid && (
+            <AutoLayout.Item>
+              <LocalMicrophoneAndCameraUser
+                cameraOn={cameraOn}
+                micOn={micOn}
+                videoTrack={videoTrack}
+                audioTrack={audioTrack}
+                cover={userAvatar}
+              >
+                {<Label>{`${userName}{${uid}}`}</Label>}
+              </LocalMicrophoneAndCameraUser>
+            </AutoLayout.Item>
+          )}
           {remoteUsers.map(user => (
             <AutoLayout.Item key={user.uid}>
-              <RemoteUser
-                className="w-full h-full"
-                user={user}
-                cover={fakeAvatar(user.uid)}
-                playAudio={user.hasAudio}
-                playVideo={user.hasVideo}
-              />
+              <RemoteUser user={user} cover={fakeAvatar(user.uid)} />
               <Label>{`${fakeName(user.uid)}{${user.uid}}}`}</Label>
             </AutoLayout.Item>
           ))}

diff --git a/examples/overview/src/main.tsx b/examples/overview/src/main.tsx
@@ -1,4 +1,3 @@
-import "agora-rtc-react/dist/agora-rtc-react.css";
 import "sanitize.css";
 import "uno.css";
 import ReactDOM from "react-dom/client";

diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "test": "pnpm -r run test",
     "lint": "eslint --ext .ts,.tsx . && prettier --check .",
     "lint:fix": "eslint --fix --ext .ts,.tsx . && prettier --write .",
-    "example": "pnpm -F agora-rtc-react run build && pnpm -F example-overview run start",
+    "example": "pnpm -F example-mobx run start",
     "renew": "pnpm -r run renew"
   },
   "devDependencies": {

diff --git a/packages/agora-rtc-react/package.json b/packages/agora-rtc-react/package.json
@@ -10,10 +10,11 @@
     "LichKing-2234",
     "CRIMX"
   ],
-  "main": "dist/agora-rtc-react.js",
-  "module": "dist/agora-rtc-react.mjs",
-  "types": "src/main.ts",
+  "sideEffects": false,
+  "main": "src/main.ts",
   "publishConfig": {
+    "main": "dist/agora-rtc-react.js",
+    "module": "dist/agora-rtc-react.mjs",
     "types": "dist/agora-rtc-react.d.ts"
   },
   "source": "src/main.ts",

diff --git a/packages/agora-rtc-react/src/components/LocalUser.stories.tsx b/packages/agora-rtc-react/src/components/LocalUser.stories.tsx
@@ -2,11 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import type { LocalMicrophoneAndCameraUserProps } from "./LocalUser";
 
 import { action } from "@storybook/addon-actions";
-import {
-  createFakeRtcClient,
-  FakeCameraVideoTrack,
-  FakeMicrophoneAudioTrack,
-} from "fake-agora-rtc";
+import { FakeRTCClient, FakeCameraVideoTrack, FakeMicrophoneAudioTrack } from "fake-agora-rtc";
 import { useEffect, useMemo, useState } from "react";
 import { AgoraRTCProvider } from "../hooks";
 import { LocalMicrophoneAndCameraUser } from "./LocalUser";
@@ -35,12 +31,15 @@ export const Overview: StoryObj<OverviewArgs> = {
     cameraOn: false,
     playVideo: false,
     playAudio: false,
-    style: { borderRadius: 8 },
     cover: "http://placekitten.com/200/200",
+    style: {
+      width: 288,
+      height: 216,
+    },
   },
   render: function RenderLocalUser({ micOn, cameraOn, ...args }: OverviewArgs) {
     const [client] = useState(() =>
-      createFakeRtcClient({
+      FakeRTCClient.create({
         publish: async () => {
           action("IAgoraRTCClient.publish()")();
         },
@@ -72,8 +71,8 @@ export const Overview: StoryObj<OverviewArgs> = {
         <LocalMicrophoneAndCameraUser
           audioTrack={audioTrack}
           videoTrack={videoTrack}
-          micDisabled={!micOn}
-          cameraDisabled={!cameraOn}
+          micOn={micOn}
+          cameraOn={cameraOn}
           {...args}
         />
       </AgoraRTCProvider>

diff --git a/packages/agora-rtc-react/src/components/LocalUser.tsx b/packages/agora-rtc-react/src/components/LocalUser.tsx
@@ -1,22 +1,21 @@
-import "./User.css";
-
 import type { ICameraVideoTrack, IMicrophoneAudioTrack } from "agora-rtc-sdk-ng";
 import type { HTMLProps, ReactNode } from "react";
 import type { MaybePromiseOrNull } from "../utils";
 
 import { CameraVideoTrack } from "./CameraVideoTrack";
 import { MicrophoneAudioTrack } from "./MicrophoneAudioTrack";
 import { UserCover } from "./UserCover";
+import { FloatBoxStyle, useMergedStyle, VideoTrackWrapperStyle } from "./styles";
 
 export interface LocalMicrophoneAndCameraUserProps extends HTMLProps<HTMLDivElement> {
   /**
    * Whether to turn on the local user's microphone. Default false.
    */
-  readonly micDisabled?: boolean;
+  readonly micOn?: boolean;
   /**
    * Whether to turn on the local user's camera. Default false.
    */
-  readonly cameraDisabled?: boolean;
+  readonly cameraOn?: boolean;
   /**
    * A microphone audio track which can be created by `createMicrophoneAudioTrack()`.
    */
@@ -26,11 +25,11 @@ export interface LocalMicrophoneAndCameraUserProps extends HTMLProps<HTMLDivElem
    */
   readonly videoTrack?: MaybePromiseOrNull<ICameraVideoTrack>;
   /**
-   * Whether to play the local user's audio track. Default false.
+   * Whether to play the local user's audio track. Default follows `micOn`.
    */
   readonly playAudio?: boolean;
   /**
-   * Whether to play the local user's video track. Default false.
+   * Whether to play the local user's video track. Default follows `cameraOn`.
    */
   readonly playVideo?: boolean;
   /**
@@ -45,15 +44,13 @@ export interface LocalMicrophoneAndCameraUserProps extends HTMLProps<HTMLDivElem
    * The volume. The value ranges from 0 (mute) to 1000 (maximum). A value of 100 is the current volume.
    */
   readonly volume?: number;
-  /**
-   * Whether to darken the video canvas when the mouse hovers over it. Default false.
-   */
-  readonly darkenOnHover?: boolean;
   /**
    * Render cover image if playVideo is off.
    */
   readonly cover?: string;
-
+  /**
+   * Children is rendered on top of the video canvas.
+   */
   readonly children?: ReactNode;
 }
 
@@ -62,38 +59,39 @@ export interface LocalMicrophoneAndCameraUserProps extends HTMLProps<HTMLDivElem
  * High-level Component for rendering and publishing a local user video and audio track.
  */
 export function LocalMicrophoneAndCameraUser({
-  micDisabled,
-  cameraDisabled,
+  micOn,
+  cameraOn,
   audioTrack,
   videoTrack,
   playAudio,
   playVideo,
   micDeviceId,
   cameraDeviceId,
   volume,
-  darkenOnHover,
   cover,
   children,
-  className = "",
+  style,
   ...props
 }: LocalMicrophoneAndCameraUserProps) {
+  const mergedStyle = useMergedStyle(VideoTrackWrapperStyle, style);
+  playVideo = playVideo ?? !!cameraOn;
+  playAudio = playAudio ?? !!micOn;
   return (
-    <div className={`arr-user ${className} ${darkenOnHover ? "darken-on-hover" : ""}`} {...props}>
+    <div {...props} style={mergedStyle}>
       <CameraVideoTrack
-        className="arr-user-video"
         track={videoTrack}
         play={playVideo}
         deviceId={cameraDeviceId}
-        disabled={cameraDisabled}
+        disabled={!cameraOn}
       />
       <MicrophoneAudioTrack
         track={audioTrack}
         play={playAudio}
         deviceId={micDeviceId}
-        disabled={micDisabled}
+        disabled={!micOn}
       />
-      {cover && !playVideo && <UserCover className="arr-user-cover" cover={cover} />}
-      <div className="arr-user-body">{children}</div>
+      {cover && !cameraOn && <UserCover cover={cover} />}
+      <div style={FloatBoxStyle}>{children}</div>
     </div>
   );
 }
diff --git a/packages/agora-rtc-react/src/components/LocalVideoTrack.tsx b/packages/agora-rtc-react/src/components/LocalVideoTrack.tsx
@@ -5,6 +5,7 @@ import type { MaybePromiseOrNull } from "../utils";
 import { useEffect, useState } from "react";
 import { useAwaited } from "../hooks";
 import { useAutoStopTrack } from "./TrackBoundary";
+import { useMergedStyle, VideoTrackStyle } from "./styles";
 
 export interface LocalVideoTrackProps extends HTMLProps<HTMLDivElement> {
   /**
@@ -38,8 +39,10 @@ export function LocalVideoTrack({
   play,
   disabled,
   muted,
+  style,
   ...props
 }: LocalVideoTrackProps) {
+  const mergedStyle = useMergedStyle(VideoTrackStyle, style);
   const [div, setDiv] = useState<HTMLDivElement | null>(null);
 
   const track = useAwaited(maybeTrack);
@@ -65,5 +68,5 @@ export function LocalVideoTrack({
     }
   }, [muted, track]);
 
-  return <div ref={setDiv} {...props} />;
+  return <div {...props} ref={setDiv} style={mergedStyle} />;
 }
diff --git a/packages/agora-rtc-react/src/components/RemoteUser.stories.tsx b/packages/agora-rtc-react/src/components/RemoteUser.stories.tsx
@@ -4,7 +4,7 @@ import type { RemoteUserProps } from "./RemoteUser";
 
 import { randFirstName, randNumber, randUuid } from "@ngneat/falso";
 import { useArgs } from "@storybook/preview-api";
-import { createFakeRtcClient, FakeRemoteAudioTrack, FakeRemoteVideoTrack } from "fake-agora-rtc";
+import { FakeRTCClient } from "fake-agora-rtc";
 import { useCallback, useEffect, useState } from "react";
 import { AgoraRTCProvider } from "../hooks/context";
 import { interval } from "../utils";
@@ -38,22 +38,7 @@ const meta: Meta<RemoteUserProps> = {
         }
       }, [audioTrack]);
 
-      const [client] = useState(() =>
-        createFakeRtcClient({
-          subscribe: async (user, mediaType): Promise<any> => {
-            if (mediaType === "audio") {
-              const audioTrack = FakeRemoteAudioTrack.create();
-              user.audioTrack = audioTrack;
-              return audioTrack;
-            } else {
-              const videoTrack = FakeRemoteVideoTrack.create();
-              user.videoTrack = videoTrack;
-              return videoTrack;
-            }
-          },
-          unsubscribe: async () => void 0,
-        }),
-      );
+      const [client] = useState(() => FakeRTCClient.create());
       return <AgoraRTCProvider client={client}>{Story()}</AgoraRTCProvider>;
     },
   ],
@@ -75,6 +60,10 @@ export const Overview: StoryObj<RemoteUserProps> = {
       hasVideo: true,
       hasAudio: true,
     },
+    style: {
+      width: 288,
+      height: 216,
+    },
   },
   render: RenderRemoteUser,
 };
@@ -96,6 +85,10 @@ export const WithCover: StoryObj<RemoteUserProps> = {
     playVideo: false,
     playAudio: false,
     cover: "http://placekitten.com/200/200",
+    style: {
+      width: 288,
+      height: 216,
+    },
   },
   render: RenderRemoteUser,
 };
@@ -117,7 +110,11 @@ export const WithControls: StoryObj<RemoteUserProps> = {
     },
     playVideo: true,
     playAudio: false,
-    style: { borderRadius: 8 },
+    style: {
+      borderRadius: 8,
+      width: 288,
+      height: 216,
+    },
     cover: "http://placekitten.com/200/200",
   },
   render: function WithControls(args) {