Don't show "waiting for media..." in case of local participant

element-hq · Nov 25, 2024 · 8f9bee7 · 8f9bee7
1 parent 16666b8
commit 8f9bee7
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git a/src/tile/GridTile.tsx b/src/tile/GridTile.tsx
@@ -175,6 +175,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
         raisedHandTime={handRaised}
         currentReaction={currentReaction}
         raisedHandOnClick={raisedHandOnClick}
+        localParticipant={vm.local}
         {...props}
       />
     );

diff --git a/src/tile/MediaView.test.tsx b/src/tile/MediaView.test.tsx
@@ -42,6 +42,7 @@ describe("MediaView", () => {
     unencryptedWarning: false,
     video: trackReference,
     member: undefined,
+    localParticipant: false,
   };
 
   test("is accessible", async () => {
@@ -60,8 +61,19 @@ describe("MediaView", () => {
   });
 
   describe("with no participant", () => {
-    it("shows avatar", () => {
-      render(<MediaView {...baseProps} video={undefined} />);
+    it("shows avatar for local user", () => {
+      render(
+        <MediaView {...baseProps} video={undefined} localParticipant={true} />,
+      );
+      expect(screen.getByRole("img", { name: "some name" })).toBeVisible();
+      expect(screen.queryAllByText("video_tile.waiting_for_media").length).toBe(
+        0,
+      );
+    });
+    it("shows avatar and label for remote user", () => {
+      render(
+        <MediaView {...baseProps} video={undefined} localParticipant={false} />,
+      );
       expect(screen.getByRole("img", { name: "some name" })).toBeVisible();
       expect(screen.getByText("video_tile.waiting_for_media")).toBeVisible();
     });

diff --git a/src/tile/MediaView.tsx b/src/tile/MediaView.tsx
@@ -41,6 +41,7 @@ interface Props extends ComponentProps<typeof animated.div> {
   raisedHandTime?: Date;
   currentReaction?: ReactionOption;
   raisedHandOnClick?: () => void;
+  localParticipant: boolean;
 }
 
 export const MediaView = forwardRef<HTMLDivElement, Props>(
@@ -63,6 +64,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
       raisedHandTime,
       currentReaction,
       raisedHandOnClick,
+      localParticipant,
       ...props
     },
     ref,
@@ -118,7 +120,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
               />
             )}
           </div>
-          {!video && (
+          {!video && !localParticipant && (
             <div className={styles.status}>
               {t("video_tile.waiting_for_media")}
             </div>

diff --git a/src/tile/SpotlightTile.tsx b/src/tile/SpotlightTile.tsx
@@ -55,6 +55,7 @@ interface SpotlightItemBaseProps {
   encryptionStatus: EncryptionStatus;
   displayName: string;
   "aria-hidden"?: boolean;
+  localParticipant: boolean;
 }
 
 interface SpotlightUserMediaItemBaseProps extends SpotlightItemBaseProps {
@@ -163,6 +164,7 @@ const SpotlightItem = forwardRef<HTMLDivElement, SpotlightItemProps>(
       displayName,
       encryptionStatus,
       "aria-hidden": ariaHidden,
+      localParticipant: vm.local,
     };
 
     return vm instanceof ScreenShareViewModel ? (