From ba5da7e9af13a71d45cf9ee33a08523194e23656 Mon Sep 17 00:00:00 2001 From: Hugh Nimmo-Smith Date: Wed, 18 Dec 2024 15:31:45 +0000 Subject: [PATCH] Inform user that their camera is starting in Lobby (#2869) * Inform user that their camera is starting Instead of just showing a grey box. * Review feedback * Show spinner from design suggestion * useMemo * Lint * Lint * Feedback from review * Use colour that actually exists * Refactor into Avatar superclass * . * Remove size limit behaviour * Add VideoPreview tests --- locales/en/app.json | 1 + src/Avatar.tsx | 2 +- src/room/VideoPreview.module.css | 11 +++++ src/room/VideoPreview.test.tsx | 73 ++++++++++++++++++++++++++++++++ src/room/VideoPreview.tsx | 37 +++++++++++----- src/tile/TileAvatar.module.css | 20 +++++++++ src/tile/TileAvatar.test.tsx | 27 ++++++++++++ src/tile/TileAvatar.tsx | 30 +++++++++++++ 8 files changed, 189 insertions(+), 12 deletions(-) create mode 100644 src/room/VideoPreview.test.tsx create mode 100644 src/tile/TileAvatar.module.css create mode 100644 src/tile/TileAvatar.test.tsx create mode 100644 src/tile/TileAvatar.tsx diff --git a/locales/en/app.json b/locales/en/app.json index a47e5bebe..0e71fd4ed 100644 --- a/locales/en/app.json +++ b/locales/en/app.json @@ -195,6 +195,7 @@ "version": "{{productName}} version: {{version}}", "video_tile": { "always_show": "Always show", + "camera_starting": "Video loading...", "change_fit_contain": "Fit to frame", "collapse": "Collapse", "expand": "Expand", diff --git a/src/Avatar.tsx b/src/Avatar.tsx index dcdead7a5..a76afbca6 100644 --- a/src/Avatar.tsx +++ b/src/Avatar.tsx @@ -33,7 +33,7 @@ export const sizes = new Map([ [Size.XL, 90], ]); -interface Props { +export interface Props { id: string; name: string; className?: string; diff --git a/src/room/VideoPreview.module.css b/src/room/VideoPreview.module.css index 89422af73..eeb9276b0 100644 --- a/src/room/VideoPreview.module.css +++ b/src/room/VideoPreview.module.css @@ -25,6 +25,17 @@ video.mirror { transform: scaleX(-1); } +.preview .cameraStarting { + position: absolute; + top: var(--cpd-space-10x); + left: 0; + right: 0; + bottom: 0; + display: flex; + justify-content: center; + color: var(--cpd-color-text-secondary); +} + .avatarContainer { position: absolute; top: 0; diff --git a/src/room/VideoPreview.test.tsx b/src/room/VideoPreview.test.tsx new file mode 100644 index 000000000..068ad0504 --- /dev/null +++ b/src/room/VideoPreview.test.tsx @@ -0,0 +1,73 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only +Please see LICENSE in the repository root for full details. +*/ + +import { expect, describe, it, vi, beforeAll } from "vitest"; +import { render } from "@testing-library/react"; + +import { type MatrixInfo, VideoPreview } from "./VideoPreview"; +import { type MuteStates } from "./MuteStates"; +import { E2eeType } from "../e2ee/e2eeType"; + +function mockMuteStates({ audio = true, video = true } = {}): MuteStates { + return { + audio: { enabled: audio, setEnabled: vi.fn() }, + video: { enabled: video, setEnabled: vi.fn() }, + }; +} + +describe("VideoPreview", () => { + const matrixInfo: MatrixInfo = { + userId: "@a:example.org", + displayName: "Alice", + avatarUrl: "", + roomId: "", + roomName: "", + e2eeSystem: { kind: E2eeType.NONE }, + roomAlias: null, + roomAvatar: null, + }; + + beforeAll(() => { + window.ResizeObserver = class ResizeObserver { + public observe(): void { + // do nothing + } + public unobserve(): void { + // do nothing + } + public disconnect(): void { + // do nothing + } + }; + }); + + it("shows avatar with video disabled", () => { + const { queryByRole } = render( + } + />, + ); + expect(queryByRole("img", { name: "@a:example.org" })).toBeVisible(); + }); + + it("shows loading status with video enabled but no track", () => { + const { queryByRole } = render( + } + />, + ); + expect(queryByRole("status")).toHaveTextContent( + "video_tile.camera_starting", + ); + }); +}); diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx index f9609b999..e2d8303fa 100644 --- a/src/room/VideoPreview.tsx +++ b/src/room/VideoPreview.tsx @@ -5,12 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only Please see LICENSE in the repository root for full details. */ -import { useEffect, useRef, type FC, type ReactNode } from "react"; +import { useEffect, useMemo, useRef, type FC, type ReactNode } from "react"; import useMeasure from "react-use-measure"; import { facingModeFromLocalTrack, type LocalVideoTrack } from "livekit-client"; import classNames from "classnames"; +import { useTranslation } from "react-i18next"; -import { Avatar } from "../Avatar"; +import { TileAvatar } from "../tile/TileAvatar"; import styles from "./VideoPreview.module.css"; import { type MuteStates } from "./MuteStates"; import { type EncryptionSystem } from "../e2ee/sharedKeyManagement"; @@ -39,6 +40,7 @@ export const VideoPreview: FC = ({ videoTrack, children, }) => { + const { t } = useTranslation(); const [previewRef, previewBounds] = useMeasure(); const videoEl = useRef(null); @@ -53,6 +55,11 @@ export const VideoPreview: FC = ({ }; }, [videoTrack]); + const cameraIsStarting = useMemo( + () => muteStates.video.enabled && !videoTrack, + [muteStates.video.enabled, videoTrack], + ); + return (
diff --git a/src/tile/TileAvatar.module.css b/src/tile/TileAvatar.module.css new file mode 100644 index 000000000..fa05c552b --- /dev/null +++ b/src/tile/TileAvatar.module.css @@ -0,0 +1,20 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only +Please see LICENSE in the repository root for full details. +*/ + +.loading { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + opacity: 0.5; + /* TODO: make this --cpd-color-fg-primary when available. */ + color: var(--cpd-color-text-primary); +} diff --git a/src/tile/TileAvatar.test.tsx b/src/tile/TileAvatar.test.tsx new file mode 100644 index 000000000..ae5ab610b --- /dev/null +++ b/src/tile/TileAvatar.test.tsx @@ -0,0 +1,27 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only +Please see LICENSE in the repository root for full details. +*/ + +import { expect, describe, it } from "vitest"; +import { render } from "@testing-library/react"; + +import { TileAvatar } from "./TileAvatar"; + +describe("TileAvatar", () => { + it("should show loading spinner when loading", () => { + const { container } = render( + , + ); + expect(container.querySelector(".loading")).toBeInTheDocument(); + }); + + it("should not show loading spinner when not loading", () => { + const { container } = render( + , + ); + expect(container.querySelector(".loading")).not.toBeInTheDocument(); + }); +}); diff --git a/src/tile/TileAvatar.tsx b/src/tile/TileAvatar.tsx new file mode 100644 index 000000000..bba826cdd --- /dev/null +++ b/src/tile/TileAvatar.tsx @@ -0,0 +1,30 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only +Please see LICENSE in the repository root for full details. +*/ + +import { type FC } from "react"; +import { InlineSpinner } from "@vector-im/compound-web"; + +import styles from "./TileAvatar.module.css"; +import { Avatar, type Props as AvatarProps } from "../Avatar"; + +interface Props extends AvatarProps { + size: number; + loading?: boolean; +} + +export const TileAvatar: FC = ({ size, loading, ...props }) => { + return ( +
+ {loading && ( +
+ +
+ )} + +
+ ); +};