Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-07-15 18:49:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow calls to display edge-to-edge on mobile

Browse Source 
By adding viewport-fit=cover to the <meta name="viewport"> header, the page now requests to be displayed edge-to-edge across the entire screen. This gives us control over what we display around camera cut-outs and system navigation UI, if the user agent supports it. I then adjusted the styles of various UI elements to ensure that they still lie within the screen's safe area.
This commit is contained in:
Robin
2026-04-21 13:12:27 +02:00
parent 51209aa825
commit f093946a29
12 changed files with 70 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/grid/Grid.tsx
View File

@@ -266,6 +266,20 @@ export function Grid<
}, []),
useCallback(() => window.innerHeight, []),
);
const orientation = useSyncExternalStore(
useCallback((onChange) => {
// Support for the change event is experimental
// https://developer.mozilla.org/en-US/docs/Web/API/Screen/change_event#browser_compatibility
(screen as unknown as EventTarget).addEventListener?.("change", onChange);
return (): void =>
(screen as unknown as EventTarget).removeEventListener?.(
"change",
onChange,
);
}, []),
useCallback(() => window.innerHeight, []),
);
const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
const [generation, setGeneration] = useState<number | null>(null);
const [visibleTilesCallback, setVisibleTilesCallback] =
@@ -336,10 +350,10 @@ export function Grid<
}
return result;
// The rects may change due to the grid resizing or updating to a new
// generation, but eslint can't statically verify this
// The rects may change due to the grid resizing, changing orientation, or
// updating to a new generation, but eslint can't statically verify this
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [gridRoot, layoutRoot, tiles, gridBounds, generation]);
}, [gridRoot, layoutRoot, tiles, gridBounds, orientation, generation]);
// The height of the portion of the grid visible at any given time
const visibleHeight = useMemo(

5
src/grid/GridLayout.module.css
View File

@@ -31,8 +31,9 @@ Please see LICENSE in the repository root for full details.
position: absolute;
inline-size: 404px;
block-size: 233px;
inset-block: 0;
inset-inline: var(--cpd-space-3x);
/* Ensure that spotlight tile lies within the safe area */
inset: 0 calc(env(safe-area-inset-right) + var(--cpd-space-3x)) 0
calc(env(safe-area-inset-left) + var(--cpd-space-3x));
}
.fixed > .slot[data-block-alignment="start"] {

6
src/grid/SpotlightExpandedLayout.module.css
View File

@@ -18,7 +18,11 @@ Please see LICENSE in the repository root for full details.
position: absolute;
inline-size: 135px;
block-size: 160px;
inset: var(--cpd-space-4x);
/* Ensure that PiP lies within the safe area */
inset: calc(env(safe-area-inset-top) + var(--cpd-space-4x))
var(--content-inset-right)
calc(env(safe-area-inset-bottom) + var(--cpd-space-4x))
var(--content-inset-left);
}
@media (min-width: 600px) {