feat(rtc): add remote user cover

AgoraIO-Extensions · Mar 16, 2023 · 3c8877c · 3c8877c
1 parent bdb3582
commit 3c8877c
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 8 deletions.
diff --git a/packages/agora-rtc-react/src/components/RemoteUser.css b/packages/agora-rtc-react/src/components/RemoteUser.css
@@ -3,7 +3,7 @@
   height: 216px;
   position: relative;
   overflow: hidden;
-  background: #000;
+  background: #1a2e21;
 }
 
 .arr-remote-user.darken-on-hover::after {
@@ -21,6 +21,34 @@
   background-color: rgba(0, 0, 0, 0.5);
 }
 
+.arr-remote-user-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.arr-remote-user-cover-blur {
+  width: 100%;
+  height: 100%;
+  background: #1a1e21 center/cover no-repeat;
+  filter: blur(16px) brightness(0.4);
+}
+
+.arr-remote-user-cover-img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80px;
+  height: 80px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  overflow: hidden;
+  object-fit: cover;
+}
+
 .arr-remote-user-body {
   position: absolute;
   top: 0;

diff --git a/packages/agora-rtc-react/src/components/RemoteUser.stories.tsx b/packages/agora-rtc-react/src/components/RemoteUser.stories.tsx
@@ -4,12 +4,7 @@ import { useCallback } from "react";
 import type { RemoteUserProps } from "./RemoteUser";
 
 import { faker } from "@faker-js/faker";
-import {
-  createFakeRtcClient,
-  dispatchRTCEvent,
-  FakeRemoteAudioTrack,
-  FakeRemoteVideoTrack,
-} from "fake-agora-rtc";
+import { createFakeRtcClient, FakeRemoteAudioTrack, FakeRemoteVideoTrack } from "fake-agora-rtc";
 import { useArgs } from "@storybook/preview-api";
 import { useEffect, useState } from "react";
 import { AgoraRTCProvider } from "../hooks/context";
@@ -80,9 +75,10 @@ export const WithControls: StoryObj<RemoteUserProps> = {
       hasVideo: true,
       hasAudio: true,
     },
-    playVideo: true,
+    playVideo: false,
     playAudio: false,
     style: { borderRadius: 8 },
+    cover: "http://placekitten.com/200/200",
   },
   render(args) {
     /* eslint-disable react-hooks/rules-of-hooks */

diff --git a/packages/agora-rtc-react/src/components/RemoteUser.tsx b/packages/agora-rtc-react/src/components/RemoteUser.tsx
@@ -37,6 +37,10 @@ export interface RemoteUserProps extends HTMLProps<HTMLDivElement> {
    * 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;
 }
 
 /**
@@ -52,6 +56,7 @@ export const RemoteUser = /* @__PURE__ */ memo<PropsWithChildren<RemoteUserProps
     playbackDeviceId,
     volume,
     darkenOnHover,
+    cover,
     children,
     className = "",
     ...props
@@ -71,6 +76,15 @@ export const RemoteUser = /* @__PURE__ */ memo<PropsWithChildren<RemoteUserProps
           track={audioTrack}
           play={playAudio}
         />
+        {!playVideo && cover && (
+          <div className="arr-remote-user-cover">
+            <div
+              className="arr-remote-user-cover-blur"
+              style={{ backgroundImage: `url(${cover})` }}
+            />
+            <img className="arr-remote-user-cover-img" src={cover} />
+          </div>
+        )}
         <div className="arr-remote-user-body">{children}</div>
       </div>
     );