Merge branch 'livekit' into toger5/loading_border

src/tile/MediaView.module.css

@@ -15,7 +15,7 @@ Please see LICENSE in the repository root for full details.
   inline-size: 100%;
   block-size: 100%;
   object-fit: contain;
-  background-color: var(--cpd-color-bg-subtle-primary);
+  background-color: var(--video-tile-background);
   /* This transform is a no-op, but it forces Firefox to use a different
   rendering path, one that actually clips the corners of <video> elements into
   the intended rounded shape. We can remove this if Firefox stops being broken. */
@@ -35,7 +35,7 @@ Please see LICENSE in the repository root for full details.
 }
 
 .bg {
-  background-color: var(--cpd-color-bg-subtle-secondary);
+  background-color: var(--video-tile-background);
   inline-size: 100%;
   block-size: 100%;
   border-radius: inherit;

src/tile/MediaView.test.tsx

@@ -75,7 +75,7 @@ describe("MediaView", () => {
         <MediaView {...baseProps} video={undefined} localParticipant={false} />,
       );
       expect(screen.getByRole("img", { name: "some name" })).toBeVisible();
-      expect(screen.getByTestId("videoTile")).toBeVisible();
+      expect(screen.getByText("video_tile.waiting_for_media")).toBeVisible();
     });
   });
 

src/tile/MediaView.tsx

@@ -120,6 +120,11 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
               />
             )}
           </div>
+          {!video && !localParticipant && (
+            <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}>