diff --git a/docs/url_params.md b/docs/url_params.md index 7b80690a..789e3f3c 100644 --- a/docs/url_params.md +++ b/docs/url_params.md @@ -67,6 +67,7 @@ These parameters are relevant to both [widget](./embedded_standalone.md) and [st | `showControls` | `true` or `false` | No, defaults to `true` | No, defaults to `true` | Displays controls like mute, screen-share, invite, and hangup buttons during a call. | | `skipLobby` (deprecated: use `intent` instead) | `true` or `false` | No. If `intent` is explicitly `start_call` then defaults to `true`. Otherwise defaults to `false` | No, defaults to `false` | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.) | | `theme` | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast` | No, defaults to `dark` | No, defaults to `dark` | UI theme to use. | +| `background` | One of: `solid`, `gradient` | No, defaults to `gradient` | No, defaults to `gradient` | Visual style of the page background. | | `viaServers` | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable | No | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver. | | `sendNotificationType` | `ring` or `notification` | No | No | Will send a "ring" or "notification" `m.rtc.notification` event if the user is the first one in the call. | | `autoLeave` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Whether the app should automatically leave the call when there is no one left in the call. | diff --git a/playwright/spa-helpers.ts b/playwright/spa-helpers.ts index 46c414c9..24869141 100644 --- a/playwright/spa-helpers.ts +++ b/playwright/spa-helpers.ts @@ -125,21 +125,10 @@ async function expectVideoTilesCount(page: Page, count: number): Promise { }); // There should be `count` video elements, visible and autoplaying - await expect(page.locator("video")).toHaveCount(count); - - await expect(async () => { - const videoBlockCount = await page - .locator("video") - .evaluateAll( - (videos: Element[]) => - videos.filter( - (v: Element) => window.getComputedStyle(v).display === "block", - ).length, - ); - expect(videoBlockCount).toBe(count); - }).toPass({ - timeout: 10000, - }); + await expect(page.locator("video").filter({ visible: true })).toHaveCount( + count, + { timeout: 10000 }, + ); } export const SpaHelpers = { diff --git a/playwright/widget/test-helpers.ts b/playwright/widget/test-helpers.ts index b2a238f8..3f0bbeed 100644 --- a/playwright/widget/test-helpers.ts +++ b/playwright/widget/test-helpers.ts @@ -385,25 +385,9 @@ export class TestHelpers { frame: FrameLocator, count: number, ): Promise { - // XXX we need to be better at our HTML markup and accessibility, it would make - // this kind of stuff way easier to test if we could look out for aria attributes. - await expect - .poll( - async () => { - return await frame - .locator("video") - .evaluateAll( - (videos: Element[]) => - videos.filter( - (v: Element) => - window.getComputedStyle(v).display === "block", - ).length, - ); - }, - { - timeout: 10000, - }, - ) - .toBe(count); + await expect(frame.locator("video").filter({ visible: true })).toHaveCount( + count, + { timeout: 10000 }, + ); } } diff --git a/src/App.tsx b/src/App.tsx index b87f587c..8f6ef21a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -30,7 +30,7 @@ import { useTheme } from "./useTheme"; import { ProcessorProvider } from "./livekit/TrackProcessorContext"; import { type AppViewModel } from "./state/AppViewModel"; import { MediaDevicesContext } from "./MediaDevicesContext"; -import { getUrlParams, HeaderStyle } from "./UrlParams"; +import { getUrlParams, HeaderStyle, useUrlParams } from "./UrlParams"; import { AppBar } from "./AppBar"; const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route); @@ -41,19 +41,17 @@ interface SimpleProviderProps { const BackgroundProvider: FC = ({ children }) => { const { pathname } = useLocation(); + const { background } = useUrlParams(); useEffect(() => { - let backgroundImage = ""; - if (!["/login", "/register"].includes(pathname) && !widget) { - backgroundImage = "var(--background-gradient)"; - } + document + .getElementsByTagName("body")[0] + .setAttribute("data-background", background); + }, [pathname, background]); - document.getElementsByTagName("body")[0].style.backgroundImage = - backgroundImage; - }, [pathname]); - - return <>{children}; + return children; }; + const ThemeProvider: FC = ({ children }) => { useTheme(); return children; diff --git a/src/UrlParams.ts b/src/UrlParams.ts index 773aa412..805cab71 100644 --- a/src/UrlParams.ts +++ b/src/UrlParams.ts @@ -45,6 +45,11 @@ export enum HeaderStyle { AppBar = "app_bar", } +export enum BackgroundStyle { + Solid = "solid", + Gradient = "gradient", +} + /** * The UrlProperties are used to pass required data to the widget. * Those are different in different rooms, users, devices. They do not configure the behavior of the @@ -145,6 +150,10 @@ export interface UrlProperties { * can be "light", "dark", "light-high-contrast" or "dark-high-contrast". */ theme: string | null; + /** + * The visual style of the page background. + */ + background: BackgroundStyle; } /** @@ -452,6 +461,9 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => { fonts: parser.getAllParams("font"), fontScale: Number.isNaN(fontScale) ? null : fontScale, theme: parser.getParam("theme"), + background: + parser.getEnumParam("background", BackgroundStyle) ?? + BackgroundStyle.Gradient, viaServers: !isWidget ? parser.getParam("viaServers") : null, homeserver: !isWidget ? parser.getParam("homeserver") : null, posthogApiHost: parser.getParam("posthogApiHost"), diff --git a/src/components/CallFooter.module.css b/src/components/CallFooter.module.css index adff99d5..d919b33e 100644 --- a/src/components/CallFooter.module.css +++ b/src/components/CallFooter.module.css @@ -19,11 +19,6 @@ Please see LICENSE in the repository root for full details. padding-right: calc(env(safe-area-inset-right) + var(--cpd-space-6x)); padding-block: var(--cpd-space-10x) calc(env(safe-area-inset-bottom) + var(--cpd-space-10x)); - background: linear-gradient( - 180deg, - rgba(0, 0, 0, 0) 0%, - var(--cpd-color-bg-canvas-default) 100% - ); } .footer.hidden { diff --git a/src/components/CallFooter.tsx b/src/components/CallFooter.tsx index f952601d..f983d809 100644 --- a/src/components/CallFooter.tsx +++ b/src/components/CallFooter.tsx @@ -112,11 +112,17 @@ export interface FooterState { } export interface FooterProps { + className?: string; ref?: Ref; children?: JSX.Element | JSX.Element[] | false; vm: ViewModel; } -export const CallFooter: FC = ({ ref, children, vm }) => { +export const CallFooter: FC = ({ + className, + ref, + children, + vm, +}) => { const asOverlay = useBehavior(vm.asOverlay$); const showFooter = useBehavior(vm.showFooter$); const hideControls = useBehavior(vm.hideControls$); @@ -292,7 +298,7 @@ export const CallFooter: FC = ({ ref, children, vm }) => {
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/graphics/mobile-gradient.svg b/src/graphics/mobile-gradient.svg new file mode 100644 index 00000000..e401846e --- /dev/null +++ b/src/graphics/mobile-gradient.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/index.css b/src/index.css index 039b2a42..ad18e25d 100644 --- a/src/index.css +++ b/src/index.css @@ -55,7 +55,6 @@ layer(compound); --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15); --big-drop-shadow: 0px 0px 24px 0px #1b1d221a; --subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); - --background-gradient: url("graphics/backgroundGradient.svg"); --call-view-overlay-layer: 1; --call-view-header-footer-layer: 2; @@ -74,9 +73,6 @@ layer(compound); body { background-color: var(--cpd-color-bg-canvas-default); - background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh)); - background-repeat: no-repeat; - background-position: center; color: var(--cpd-color-text-primary); color-scheme: dark; margin: 0; @@ -85,6 +81,24 @@ body { -webkit-tap-highlight-color: transparent; } +@media (min-height: 330px) { + body[data-background="gradient"]::before { + content: ""; + position: fixed; + inset: 0; + background-image: url("graphics/mobile-gradient.svg"); + background-size: auto; + background-position: bottom; + background-repeat: no-repeat; + } + + body[data-background="gradient"][data-platform="desktop"]::before { + background-image: url("graphics/desktop-gradient.svg"); + background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh)); + background-position: center; + } +} + /* This prohibits the view to scroll for pages smaller than 122px in width we use this for mobile pip webviews */ .no-scroll-body { diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css index fcf1a492..736a915a 100644 --- a/src/room/InCallView.module.css +++ b/src/room/InCallView.module.css @@ -14,6 +14,23 @@ Please see LICENSE in the repository root for full details. overflow-y: auto; } +/* Normally the footer uses a transparent background to allow our expressive +page gradients to shine through. However, we sometimes need to visually separate +it from the content underneath. If the call layout is overflowing, or if the +spotlight tile is maximised and displaying video, apply a gradient background. */ +.overflowing > .footer, +.fixedGrid:has( + > .tile[data-maximised="true"] + .spotlightItem[data-background="transparent"][data-video-enabled="true"][aria-hidden="false"] + ) + ~ .footer { + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0) 0%, + var(--cpd-color-bg-canvas-default) 100% + ); +} + .header { position: sticky; flex-shrink: 0; @@ -82,19 +99,18 @@ Please see LICENSE in the repository root for full details. /* Disable pointer events so the overlay doesn't block interaction with elements behind it */ pointer-events: none; -} -.fixedGrid > :not(:first-child), -.scrollingGrid > :not(:first-child) { - pointer-events: initial; + > :not(:first-child) { + pointer-events: initial; + } + + .tile { + position: absolute; + inset-block-start: 0; + } } .tile { - position: absolute; - inset-block-start: 0; -} - -.tile.maximised { position: relative; flex-grow: 1; } diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index bf591872..58b378ae 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -258,6 +258,7 @@ export const InCallView: FC = ({ const reconnecting = useBehavior(vm.reconnecting$); const layout = useBehavior(vm.layout$); const edgeToEdge = useBehavior(vm.edgeToEdge$); + const overflowing = useBehavior(vm.overflowing$); const showNameTags = useBehavior(vm.showNameTags$); const showHeader = useBehavior(vm.showHeader$); const settingsOpen = useBehavior(vm.settingsOpen$); @@ -467,6 +468,7 @@ export const InCallView: FC = ({ showRingingStatus={showRingingStatus} focusable={!contentObscured} className={classNames(className, styles.tile)} + itemClassName={styles.spotlightItem} style={style} /> ); @@ -491,7 +493,9 @@ export const InCallView: FC = ({ if (layout.type === "pip") { return ( = ({ // Only hide the settings button if we have an AppBar header and we are showing the header const footer = footerVm !== null && ( - + ); const allConnections = useBehavior(vm.allConnections$); @@ -592,7 +596,9 @@ export const InCallView: FC = ({ // and the footer is also viewable by moving focus into it, so this is fine. // eslint-disable-next-line jsx-a11y/no-static-element-interactions
rendering > renders 1`] = ` class="_container_8084b5" />
; + /** + * Whether the call layout is overflowing the interface (causing it to scroll). + */ + overflowing$: Behavior; settingsOpen$: Behavior; setSettingsOpen$: Behavior<(open: boolean) => void>; @@ -1468,7 +1473,7 @@ export function createCallViewModel$( // There is a cyclical dependency here: the layout algorithms want to know // which tiles are on screen, but to know which tiles are on screen we have to - // first render a layout. To deal with this we assume initially that no tiles + // first render a layout. To deal with this we assume initially that all tiles // are visible, and loop the data back into the layouts with a Subject. const visibleTiles$ = new Subject(); const setVisibleTiles = (value: number): void => visibleTiles$.next(value); @@ -1476,7 +1481,7 @@ export function createCallViewModel$( const layoutInternals$ = scope.behavior( combineLatest([ layoutMedia$, - visibleTiles$.pipe(startWith(0), distinctUntilChanged()), + visibleTiles$.pipe(startWith(Infinity), distinctUntilChanged()), ]).pipe( scan< [LayoutMedia, number], @@ -1487,6 +1492,7 @@ export function createCallViewModel$( let layout: Layout; let newTiles: TileStore; let pip: GridTileViewModel | undefined; + let overflowing = false; switch (media.type) { case "grid": case "spotlight-landscape": @@ -1498,6 +1504,7 @@ export function createCallViewModel$( setVisibleTiles, prevTiles, ); + overflowing = newTiles.gridTiles.length > visibleTiles; break; case "spotlight-expanded": [layout, newTiles] = spotlightExpandedLayout( @@ -1532,9 +1539,9 @@ export function createCallViewModel$( tile.setShowOutline(tile === pip); } - return { layout, tiles: newTiles }; + return { layout, overflowing, tiles: newTiles }; }, - { layout: null, tiles: TileStore.empty() }, + { layout: null, overflowing: false, tiles: TileStore.empty() }, ), ), ); @@ -1546,6 +1553,10 @@ export function createCallViewModel$( layoutInternals$.pipe(map(({ layout }) => layout)), ); + const overflowing$ = scope.behavior( + layoutInternals$.pipe(map(({ overflowing }) => overflowing)), + ); + /** * The current generation of the tile store, exposed for debugging purposes. */ @@ -1787,6 +1798,7 @@ export function createCallViewModel$( settingsOpen$: settingsOpen$, setSettingsOpen$: setSettingsOpen$, edgeToEdge$, + overflowing$, earpieceMode$: earpieceMode$, audioOutputSwitcher$: audioOutputSwitcher$, reconnecting$: localMembership.reconnecting$, diff --git a/src/state/OneOnOnePortraitLayout.ts b/src/state/OneOnOnePortraitLayout.ts index 9be80421..98314a03 100644 --- a/src/state/OneOnOnePortraitLayout.ts +++ b/src/state/OneOnOnePortraitLayout.ts @@ -26,7 +26,7 @@ export function oneOnOnePortraitLayout( prevTiles: TileStore, ): [OneOnOnePortraitLayout, TileStore] { const update = prevTiles.from(media.pip === undefined ? 0 : 1); - update.registerSpotlight([media.spotlight], true); + update.registerSpotlight([media.spotlight], true, "transparent"); if (media.pip !== undefined) update.registerGridTile(media.pip); const tiles = update.build(); diff --git a/src/state/PipLayout.ts b/src/state/PipLayout.ts index 6ac1e4f0..0cd6a77c 100644 --- a/src/state/PipLayout.ts +++ b/src/state/PipLayout.ts @@ -21,6 +21,7 @@ export function pipLayout( update.registerSpotlight( media.spotlight, platform === "desktop" ? false : true, + "transparent", ); const tiles = update.build(); return [ diff --git a/src/state/SpotlightExpandedLayout.ts b/src/state/SpotlightExpandedLayout.ts index 59ab8ab9..45a37ca2 100644 --- a/src/state/SpotlightExpandedLayout.ts +++ b/src/state/SpotlightExpandedLayout.ts @@ -23,7 +23,7 @@ export function spotlightExpandedLayout( prevTiles: TileStore, ): [SpotlightExpandedLayout, TileStore] { const update = prevTiles.from(1); - update.registerSpotlight(media.spotlight, true); + update.registerSpotlight(media.spotlight, true, "transparent"); if (media.pip !== undefined) update.registerPipTile(media.pip); const tiles = update.build(); diff --git a/src/state/TileStore.ts b/src/state/TileStore.ts index 3cbed280..132d1b94 100644 --- a/src/state/TileStore.ts +++ b/src/state/TileStore.ts @@ -15,6 +15,8 @@ import { type MediaViewModel } from "./media/MediaViewModel"; import { type UserMediaViewModel } from "./media/UserMediaViewModel"; import { type RingingMediaViewModel } from "./media/RingingMediaViewModel"; +type SpotlightBackground = "solid" | "transparent"; + function debugEntries(entries: GridTileData[]): string[] { return entries.map((e) => e.media.displayName$.value); } @@ -39,12 +41,29 @@ class SpotlightTileData { this.maximised$.next(value); } + private readonly background$: BehaviorSubject; + public get background(): SpotlightBackground { + return this.background$.value; + } + public set background(value: SpotlightBackground) { + this.background$.next(value); + } + public readonly vm: SpotlightTileViewModel; - public constructor(media: MediaViewModel[], maximised: boolean) { + public constructor( + media: MediaViewModel[], + maximised: boolean, + background: SpotlightBackground, + ) { this.media$ = new BehaviorSubject(media); this.maximised$ = new BehaviorSubject(maximised); - this.vm = new SpotlightTileViewModel(this.media$, this.maximised$); + this.background$ = new BehaviorSubject(background); + this.vm = new SpotlightTileViewModel( + this.media$, + this.maximised$, + this.background$, + ); } } @@ -157,7 +176,11 @@ export class TileStoreBuilder { * Sets the contents of the spotlight tile. If this is never called, there * will be no spotlight tile. */ - public registerSpotlight(media: MediaViewModel[], maximised: boolean): void { + public registerSpotlight( + media: MediaViewModel[], + maximised: boolean, + background: SpotlightBackground = "solid", + ): void { if (DEBUG_ENABLED) logger.debug( `[TileStore, ${this.generation}] register spotlight: ${media.map((m) => m.displayName$.value)}`, @@ -169,11 +192,12 @@ export class TileStoreBuilder { // Reuse the previous spotlight tile if it exists if (this.prevSpotlight === null) { - this.spotlight = new SpotlightTileData(media, maximised); + this.spotlight = new SpotlightTileData(media, maximised, background); } else { this.spotlight = this.prevSpotlight; this.spotlight.media = media; this.spotlight.maximised = maximised; + this.spotlight.background = background; } } diff --git a/src/state/TileViewModel.ts b/src/state/TileViewModel.ts index 81aac829..6a5d9175 100644 --- a/src/state/TileViewModel.ts +++ b/src/state/TileViewModel.ts @@ -37,6 +37,7 @@ export class SpotlightTileViewModel { public constructor( public readonly media$: Behavior, public readonly maximised$: Behavior, + public readonly background$: Behavior<"solid" | "transparent">, ) {} } diff --git a/src/tile/MediaView.module.css b/src/tile/MediaView.module.css index 5e7b3b28..13d0fd1b 100644 --- a/src/tile/MediaView.module.css +++ b/src/tile/MediaView.module.css @@ -27,6 +27,10 @@ Please see LICENSE in the repository root for full details. transform: translate(0); } +.media[data-video-enabled="false"] video { + display: none; +} + .media.mirror video { transform: scaleX(-1); } @@ -41,13 +45,64 @@ Please see LICENSE in the repository root for full details. .bg { grid-area: content; - background-color: var(--video-tile-background); inline-size: 100%; block-size: 100%; border-radius: inherit; contain: strict; } +.media[data-background="solid"] .bg { + background-color: var(--video-tile-background); +} + +.waves { + transition: opacity ease 0.3s; +} + +.waves[data-visible="true"] { + opacity: 1; +} + +.waves[data-visible="false"] { + opacity: 0; + + @media not (prefers-reduced-motion) { + .wave { + transform: translate(-50%, -50%) scale(0.9); + } + } +} + +.wave { + border: var(--cpd-border-width-1) solid var(--cpd-color-alpha-gray-300); + transition: transform ease 0.2s; +} + +.wave, +.speakingBorder { + border-radius: var(--cpd-radius-pill-effect); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.speakingBorder { + background: + radial-gradient(#0467dd, #0bc491), + linear-gradient(0deg, #0467dd 0%, #0bc491 100%); + background-blend-mode: overlay, normal; + outline: var(--cpd-border-width-4) solid var(--cpd-color-bg-canvas-default); + + &::after { + content: ""; + position: absolute; + inset: var(--cpd-border-width-2); + border-radius: var(--cpd-radius-pill-effect); + background: var(--cpd-color-bg-canvas-default); + } +} + .avatar { position: absolute; top: 50%; @@ -70,6 +125,35 @@ unconditionally select the container so we can use cqmin units */ inline-size: 50cqmin; block-size: 50cqmin; } + + .waves + .avatar { + /* Make the avatar slightly smaller to accommodate sound waves, if present */ + inline-size: 38cqmin; + block-size: 38cqmin; + } + + .wave:nth-child(1) { + inline-size: calc(38cqmin + var(--cpd-space-5x) + 3 * var(--cpd-space-10x)); + block-size: calc(38cqmin + var(--cpd-space-5x) + 3 * var(--cpd-space-10x)); + background: var(--cpd-color-alpha-gray-200); + } + + .wave:nth-child(2) { + inline-size: calc(38cqmin + var(--cpd-space-5x) + 2 * var(--cpd-space-10x)); + block-size: calc(38cqmin + var(--cpd-space-5x) + 2 * var(--cpd-space-10x)); + background: var(--cpd-color-alpha-gray-300); + } + + .wave:nth-child(3) { + inline-size: calc(38cqmin + var(--cpd-space-5x) + var(--cpd-space-10x)); + block-size: calc(38cqmin + var(--cpd-space-5x) + var(--cpd-space-10x)); + background: var(--cpd-color-alpha-gray-400); + } + + .speakingBorder { + inline-size: calc(38cqmin + var(--cpd-space-3x)); + block-size: calc(38cqmin + var(--cpd-space-3x)); + } } .avatar > img { diff --git a/src/tile/MediaView.test.tsx b/src/tile/MediaView.test.tsx index 75e76349..099cbaa2 100644 --- a/src/tile/MediaView.test.tsx +++ b/src/tile/MediaView.test.tsx @@ -125,30 +125,4 @@ describe("MediaView", () => { ).toBe(0); }); }); - - describe("videoEnabled", () => { - test("just video is visible", () => { - render( - - - , - ); - expect(screen.getByTestId("video")).toBeVisible(); - expect(screen.queryAllByRole("img", { name: "some name" }).length).toBe( - 0, - ); - }); - - test("just avatar is visible", () => { - render( - - - , - ); - expect( - screen.getByRole("img", { name: "@alice:example.com" }), - ).toBeVisible(); - expect(screen.getByTestId("video")).not.toBeVisible(); - }); - }); }); diff --git a/src/tile/MediaView.tsx b/src/tile/MediaView.tsx index f860f41e..09c4c65c 100644 --- a/src/tile/MediaView.tsx +++ b/src/tile/MediaView.tsx @@ -34,6 +34,7 @@ interface Props extends ComponentProps { video: TrackReferenceOrPlaceholder | undefined; videoFit: "cover" | "contain"; mirror: boolean; + soundWaves?: boolean; userId: string; videoEnabled: boolean; unencryptedWarning: boolean; @@ -43,6 +44,7 @@ interface Props extends ComponentProps { displayName: string; mxcAvatarUrl: string | undefined; avatarStyle?: "solid" | "translucent"; + background?: "solid" | "transparent"; focusable: boolean; primaryButton?: ReactNode; raisedHandTime?: Date; @@ -65,6 +67,7 @@ export const MediaView: FC = ({ video, videoFit, mirror, + soundWaves, userId, videoEnabled, unencryptedWarning, @@ -73,6 +76,7 @@ export const MediaView: FC = ({ displayName, mxcAvatarUrl, avatarStyle = "solid", + background = "solid", focusable, primaryButton, status, @@ -90,7 +94,10 @@ export const MediaView: FC = ({ const [handRaiseTimerVisible] = useSetting(showHandRaisedTimer); const [showConnectionStats] = useSetting(showConnectionStatsSetting); - const avatarSize = Math.round(Math.min(targetWidth, targetHeight) / 2); + const avatarSize = Math.round( + Math.min(targetWidth, targetHeight) * + (soundWaves === undefined ? 0.5 : 0.38), + ); const warnings = unencryptedWarning && ( = ({ style={style} ref={ref} data-testid="videoTile" + data-video-enabled={video && videoEnabled} data-video-fit={videoFit} + data-background={background} {...props} >
+ {soundWaves !== undefined && ( +
+
+
+
+
+
+ )} = ({ // There's no reason for this to be focusable tabIndex={-1} disablePictureInPicture - style={{ display: video && videoEnabled ? "block" : "none" }} data-testid="video" /> )} diff --git a/src/tile/SpotlightTile.module.css b/src/tile/SpotlightTile.module.css index 1e728ba1..22f62a9b 100644 --- a/src/tile/SpotlightTile.module.css +++ b/src/tile/SpotlightTile.module.css @@ -23,7 +23,7 @@ Please see LICENSE in the repository root for full details. scroll-behavior: smooth; */ } -.tile.maximised .contents { +.tile[data-maximised="true"] .contents { border-radius: 0; } @@ -34,7 +34,7 @@ Please see LICENSE in the repository root for full details. --media-view-fg-inset: 10px; } -.maximised .item { +.tile[data-maximised="true"] .item { /* Ensure that foreground elements lie within the safe area */ --media-view-fg-inset: calc(var(--call-view-safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-right) + 10px) @@ -191,7 +191,7 @@ Please see LICENSE in the repository root for full details. opacity: 1; } -.maximised .indicators { +.tile[data-maximised="true"] .indicators { inset-block-end: calc(-1 * var(--cpd-space-4x) - 2px); justify-content: center; } diff --git a/src/tile/SpotlightTile.test.tsx b/src/tile/SpotlightTile.test.tsx index 69bdacf7..7924e557 100644 --- a/src/tile/SpotlightTile.test.tsx +++ b/src/tile/SpotlightTile.test.tsx @@ -58,7 +58,13 @@ test("SpotlightTile is accessible", async () => { const toggleExpanded = vi.fn(); const { container } = render( const { container } = render(