diff --git a/src/grid/CallLayout.ts b/src/grid/CallLayout.ts index 119ed956d..e1cc31171 100644 --- a/src/grid/CallLayout.ts +++ b/src/grid/CallLayout.ts @@ -95,7 +95,6 @@ export interface GridArrangement { const tileMaxAspectRatio = 17 / 9; const tileMinAspectRatio = 4 / 3; -const tileMobileMinAspectRatio = 2 / 3; /** * Determine the ideal arrangement of tiles into a grid of a particular size. @@ -138,15 +137,10 @@ export function arrangeTiles( // Impose a minimum and maximum aspect ratio on the tiles const tileAspectRatio = tileWidth / tileHeight; - // We enforce a different min aspect ratio in 1:1s on mobile - const minAspectRatio = - tileCount === 1 && width < 600 - ? tileMobileMinAspectRatio - : tileMinAspectRatio; if (tileAspectRatio > tileMaxAspectRatio) tileWidth = tileHeight * tileMaxAspectRatio; - else if (tileAspectRatio < minAspectRatio) - tileHeight = tileWidth / minAspectRatio; + else if (tileAspectRatio < tileMinAspectRatio) + tileHeight = tileWidth / tileMinAspectRatio; return { tileWidth, tileHeight, gap, columns }; } diff --git a/src/grid/OneOnOneLayout.module.css b/src/grid/OneOnOneLayout.module.css index 0c22b2536..5bdeb2c8c 100644 --- a/src/grid/OneOnOneLayout.module.css +++ b/src/grid/OneOnOneLayout.module.css @@ -26,18 +26,11 @@ limitations under the License. .local { position: absolute; - inline-size: 135px; - block-size: 160px; + inline-size: 180px; + block-size: 135px; inset: var(--cpd-space-4x); } -@media (min-width: 600px) { - .local { - inline-size: 170px; - block-size: 110px; - } -} - .spotlight { position: absolute; inline-size: 404px; diff --git a/src/grid/SpotlightExpandedLayout.module.css b/src/grid/SpotlightExpandedLayout.module.css index 6556110e2..bf30dadb1 100644 --- a/src/grid/SpotlightExpandedLayout.module.css +++ b/src/grid/SpotlightExpandedLayout.module.css @@ -25,11 +25,18 @@ limitations under the License. .pip { position: absolute; - inline-size: 180px; - block-size: 135px; + inline-size: 135px; + block-size: 160px; inset: var(--cpd-space-4x); } +@media (min-width: 600px) { + .pip { + inline-size: 180px; + block-size: 135px; + } +} + .pip[data-block-alignment="start"] { inset-block-end: unset; } diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index c595f1733..d28e9539a 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -295,7 +295,7 @@ export const InCallView: FC = ({ ref, ) { const spotlightExpanded = useObservableEagerState(vm.spotlightExpanded); - const [onToggleExpanded] = useObservableEagerState( + const onToggleExpanded = useObservableEagerState( vm.toggleSpotlightExpanded, ); const showSpeakingIndicatorsValue = useObservableEagerState( diff --git a/src/state/CallViewModel.ts b/src/state/CallViewModel.ts index 982df404a..a4db2232a 100644 --- a/src/state/CallViewModel.ts +++ b/src/state/CallViewModel.ts @@ -646,7 +646,9 @@ export class CallViewModel extends ViewModel { return this.oneOnOne.pipe( switchMap((oneOnOne) => oneOnOne - ? this.oneOnOneLayout + ? // The expanded spotlight layout makes for a better one-on-one + // experience in narrow windows + this.spotlightExpandedLayout : combineLatest( [this.grid, this.spotlight], (grid, spotlight) => @@ -689,24 +691,25 @@ export class CallViewModel extends ViewModel { shareReplay(1), ); - // To work around https://github.com/crimx/observable-hooks/issues/131 we must - // wrap the emitted function here in a non-function wrapper type - public readonly toggleSpotlightExpanded: Observable< - readonly [(() => void) | null] - > = this.layout.pipe( - map( - (l) => - l.type === "spotlight-landscape" || l.type === "spotlight-expanded", - ), - distinctUntilChanged(), - map( - (enabled) => - [ - enabled ? (): void => this.spotlightExpandedToggle.next() : null, - ] as const, - ), - shareReplay(1), - ); + public readonly toggleSpotlightExpanded: Observable<(() => void) | null> = + this.windowMode.pipe( + switchMap((mode) => + mode === "normal" + ? this.layout.pipe( + map( + (l) => + l.type === "spotlight-landscape" || + l.type === "spotlight-expanded", + ), + ) + : of(false), + ), + distinctUntilChanged(), + map((enabled) => + enabled ? (): void => this.spotlightExpandedToggle.next() : null, + ), + shareReplay(1), + ); public constructor( // A call is permanently tied to a single Matrix room and LiveKit room diff --git a/yarn.lock b/yarn.lock index 857766cdf..3181e4b5b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6944,9 +6944,9 @@ object.values@^1.1.7: es-abstract "^1.22.1" observable-hooks@^4.2.3: - version "4.2.3" - resolved "https://registry.yarnpkg.com/observable-hooks/-/observable-hooks-4.2.3.tgz#69e3353caafd7887ad9030bd440b053304e8d2d1" - integrity sha512-d6fYTIU+9sg1V+CT0GhgoE/ntjIqcy9DGaYGE6ELGVP4ojaWIEsaLvL/05hLOM+AL7aySN4DCTLvj6dDF9T8XA== + version "4.2.4" + resolved "https://registry.yarnpkg.com/observable-hooks/-/observable-hooks-4.2.4.tgz#e1ee0f867e0f2216f79c1e13c58716fb50b410ec" + integrity sha512-FdTQgyw1h5bG/QHCBIqctdBSnv9VARJCEilgpV6L2qlw1yeLqFIwPm4U15dMtl5kDmNN0hSt+Nl6iYbLFwEcQA== oidc-client-ts@^3.0.1: version "3.0.1"