Replace the mobile one-on-one layout with an edge-to-edge spotlight

element-hq · Aug 1, 2024 · eb051ab · eb051ab
1 parent 942e28f
commit eb051ab
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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
@@ -295,7 +295,7 @@ export const InCallView: FC<InCallViewProps> = ({
         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
@@ -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
@@ -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"