From 4f2591feae7138f547eb704e04b5c5e83aa0d210 Mon Sep 17 00:00:00 2001
From: Hugh Nimmo-Smith <hughns@element.io>
Date: Mon, 25 Nov 2024 21:17:20 +0000
Subject: [PATCH] Show "waiting for media..." when no participant

---
 locales/en-GB/app.json        |  3 ++-
 src/tile/MediaView.module.css | 14 ++++++++++----
 src/tile/MediaView.test.tsx   | 10 +++++++++-
 src/tile/MediaView.tsx        | 11 ++++++++---
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/locales/en-GB/app.json b/locales/en-GB/app.json
index 6340d160..06b8e417 100644
--- a/locales/en-GB/app.json
+++ b/locales/en-GB/app.json
@@ -191,6 +191,7 @@
     "expand": "Expand",
     "mute_for_me": "Mute for me",
     "muted_for_me": "Muted for me",
-    "volume": "Volume"
+    "volume": "Volume",
+    "waiting_for_media": "Waiting for media..."
   }
 }
diff --git a/src/tile/MediaView.module.css b/src/tile/MediaView.module.css
index 4594c284..dd7dfc50 100644
--- a/src/tile/MediaView.module.css
+++ b/src/tile/MediaView.module.css
@@ -74,9 +74,9 @@ unconditionally select the container so we can use cqmin units */
     calc(var(--media-view-border-radius) - var(--cpd-space-3x))
   );
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 30px 1fr 30px;
   grid-template-rows: 1fr auto;
-  grid-template-areas: "status status" "nameTag button";
+  grid-template-areas: "reactions status ." "nameTag nameTag button";
   gap: var(--cpd-space-1x);
   place-items: start;
 }
@@ -101,8 +101,8 @@ unconditionally select the container so we can use cqmin units */
   grid-area: status;
   justify-self: center;
   align-self: start;
-  padding: var(--cpd-space-1x);
-  padding-block: var(--cpd-space-1x);
+  padding: var(--cpd-space-2x);
+  padding-block: var(--cpd-space-2x);
   color: var(--cpd-color-text-primary);
   background-color: var(--cpd-color-bg-canvas-default);
   display: flex;
@@ -116,6 +116,12 @@ unconditionally select the container so we can use cqmin units */
   text-align: center;
 }
 
+.reactions {
+  grid-area: reactions;
+  display: flex;
+  gap: var(--cpd-space-1x);
+}
+
 .nameTag > svg,
 .nameTag > span {
   flex-shrink: 0;
diff --git a/src/tile/MediaView.test.tsx b/src/tile/MediaView.test.tsx
index 238ffdd1..b5d7a671 100644
--- a/src/tile/MediaView.test.tsx
+++ b/src/tile/MediaView.test.tsx
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { describe, expect, test } from "vitest";
+import { describe, expect, it, test } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -59,6 +59,14 @@ describe("MediaView", () => {
     });
   });
 
+  describe("with no participant", () => {
+    it("shows avatar", () => {
+      render(<MediaView {...baseProps} video={undefined} />);
+      expect(screen.getByRole("img", { name: "some name" })).toBeVisible();
+      expect(screen.getByText("video_tile.waiting_for_media")).toBeVisible();
+    });
+  });
+
   describe("name tag", () => {
     test("is shown with name", () => {
       render(<MediaView {...baseProps} displayName="Bob" />);
diff --git a/src/tile/MediaView.tsx b/src/tile/MediaView.tsx
index 69c1ca91..51da4d22 100644
--- a/src/tile/MediaView.tsx
+++ b/src/tile/MediaView.tsx
@@ -90,7 +90,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
             size={avatarSize}
             src={member?.getMxcAvatarUrl()}
             className={styles.avatar}
-            style={{ display: videoEnabled ? "none" : "initial" }}
+            style={{ display: video && videoEnabled ? "none" : "initial" }}
           />
           {video?.publication !== undefined && (
             <VideoTrack
@@ -98,13 +98,13 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
               // There's no reason for this to be focusable
               tabIndex={-1}
               disablePictureInPicture
-              style={{ display: videoEnabled ? "block" : "none" }}
+              style={{ display: video && videoEnabled ? "block" : "none" }}
               data-testid="video"
             />
           )}
         </div>
         <div className={styles.fg}>
-          <div style={{ display: "flex", gap: "var(--cpd-space-1x)" }}>
+          <div className={styles.reactions}>
             <RaisedHandIndicator
               raisedHandTime={raisedHandTime}
               miniature={avatarSize < 96}
@@ -118,6 +118,11 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
               />
             )}
           </div>
+          {!video && (
+            <div className={styles.status}>
+              {t("video_tile.waiting_for_media")}
+            </div>
+          )}
           {/* TODO: Bring this back once encryption status is less broken */}
           {/*encryptionStatus !== EncryptionStatus.Okay && (
             <div className={styles.status}>