WIP

src/grid/CallLayout.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type BehaviorSubject, type Observable } from "rxjs";
+import { type Observable } from "rxjs";
 import { type ComponentType } from "react";
 
 import { type LayoutProps } from "./Grid";
@@ -16,41 +16,11 @@ export interface Bounds {
   height: number;
 }
 
-export interface Alignment {
-  inline: "start" | "end";
-  block: "start" | "end";
-}
-
-export const defaultSpotlightAlignment: Alignment = {
-  inline: "end",
-  block: "end",
-};
-export const defaultPortraitPipAlignment: Alignment = {
-  inline: "end",
-  block: "end",
-};
-export const defaultLandscapePipAlignment: Alignment = {
-  inline: "end",
-  block: "start",
-};
-
 export interface CallLayoutInputs {
   /**
    * The minimum bounds of the layout area.
    */
   minBounds$: Observable<Bounds>;
-  /**
-   * The alignment of the floating spotlight tile, if present.
-   */
-  spotlightAlignment$: BehaviorSubject<Alignment>;
-  /**
-   * The alignment of the small picture-in-picture tile, if present, when in portrait.
-   */
-  portraitPipAlignment$: BehaviorSubject<Alignment>;
-  /**
-   * The alignment of the small picture-in-picture tile, if present, when in landscape.
-   */
-  landscapePipAlignment$: BehaviorSubject<Alignment>;
 }
 
 export interface CallLayoutOutputs<Model> {

src/grid/GridLayout.tsx

@@ -32,7 +32,6 @@ interface GridCSSProperties extends CSSProperties {
  */
 export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   minBounds$,
-  spotlightAlignment$,
 }) => ({
   scrollingOnTop: false,
 
@@ -42,7 +41,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
     useUpdateLayout();
     const alignment = useObservableEagerState(
       useInitial(() =>
-        spotlightAlignment$.pipe(
+        model.spotlightAlignment$.pipe(
           distinctUntilChanged(
             (a1, a2) => a1.block === a2.block && a1.inline === a2.inline,
           ),
@@ -52,11 +51,11 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
 
     const onDragSpotlight: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
-        spotlightAlignment$.next({
+        model.spotlightAlignment$.next({
           block: yRatio < 0.5 ? "start" : "end",
           inline: xRatio < 0.5 ? "start" : "end",
         }),
-      [],
+      [model.spotlightAlignment$],
     );
 
     return (

src/grid/OneOnOneLandscapeLayout.module.css

@@ -22,12 +22,6 @@ Please see LICENSE in the repository root for full details.
   inset: 0;
 }
 
-.spotlight {
-  position: absolute;
-  inline-size: 404px;
-  block-size: 233px;
-}
-
 .slot[data-block-alignment="start"] {
   inset-block-end: unset;
 }

src/grid/OneOnOneLandscapeLayout.tsx

@@ -23,7 +23,7 @@ import { useBehavior } from "../useBehavior";
  */
 export const makeOneOnOneLandscapeLayout: CallLayout<
   OneOnOneLandscapeLayoutModel
-> = ({ minBounds$, landscapePipAlignment$ }) => ({
+> = ({ minBounds$ }) => ({
   scrollingOnTop: false,
 
   fixed: function OneOnOneLandscapeLayoutFixed({ ref }): ReactNode {
@@ -38,7 +38,7 @@ export const makeOneOnOneLandscapeLayout: CallLayout<
   }): ReactNode {
     useUpdateLayout();
     const { width, height } = useObservableEagerState(minBounds$);
-    const pipAlignmentValue = useBehavior(landscapePipAlignment$);
+    const pipAlignment = useBehavior(model.pipAlignment$);
     const { tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, height, 1),
       [width, height],
@@ -46,11 +46,11 @@ export const makeOneOnOneLandscapeLayout: CallLayout<
 
     const onDragLocalTile: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
-        landscapePipAlignment$.next({
+        model.pipAlignment$.next({
           block: yRatio < 0.5 ? "start" : "end",
           inline: xRatio < 0.5 ? "start" : "end",
         }),
-      [],
+      [model.pipAlignment$],
     );
 
     return (
@@ -66,8 +66,8 @@ export const makeOneOnOneLandscapeLayout: CallLayout<
             id={model.pip.id}
             model={model.pip}
             onDrag={onDragLocalTile}
-            data-block-alignment={pipAlignmentValue.block}
-            data-inline-alignment={pipAlignmentValue.inline}
+            data-block-alignment={pipAlignment.block}
+            data-inline-alignment={pipAlignment.inline}
           />
         </Slot>
       </div>

src/grid/OneOnOnePortraitLayout.module.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2026 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -7,39 +7,40 @@ Please see LICENSE in the repository root for full details.
 
 .layer {
   block-size: 100%;
-  display: grid;
-  place-items: center;
-}
-
-.container {
-  position: relative;
-}
-
-.local {
-  position: absolute;
-  inline-size: 180px;
-  block-size: 135px;
-  inset: 0;
 }
 
 .spotlight {
-  position: absolute;
-  inline-size: 404px;
-  block-size: 233px;
+  block-size: 100%;
+  inline-size: 100%;
 }
 
-.slot[data-block-alignment="start"] {
+.pip {
+  position: absolute;
+  inset: var(--cpd-space-4x);
+}
+
+.pip[data-size="sm"] {
+  inline-size: 88px;
+  block-size: 132px;
+}
+
+.pip[data-size="lg"] {
+  inline-size: 140px;
+  block-size: 210px;
+}
+
+.pip[data-block-alignment="start"] {
   inset-block-end: unset;
 }
 
-.slot[data-block-alignment="end"] {
+.pip[data-block-alignment="end"] {
   inset-block-start: unset;
 }
 
-.slot[data-inline-alignment="start"] {
+.pip[data-inline-alignment="start"] {
   inset-inline-end: unset;
 }
 
-.slot[data-inline-alignment="end"] {
+.pip[data-inline-alignment="end"] {
   inset-inline-start: unset;
 }

src/grid/OneOnOnePortraitLayout.tsx

@@ -6,12 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ReactNode, useCallback, useMemo } from "react";
-import { useObservableEagerState } from "observable-hooks";
+import { type ReactNode, useCallback } from "react";
 import classNames from "classnames";
 
 import { type OneOnOnePortraitLayout as OneOnOnePortraitLayoutModel } from "../state/layout-types.ts";
-import { type CallLayout, arrangeTiles } from "./CallLayout";
+import { type CallLayout } from "./CallLayout";
 import styles from "./OneOnOnePortraitLayout.module.css";
 import { type DragCallback, useUpdateLayout } from "./Grid";
 import { useBehavior } from "../useBehavior";
@@ -23,12 +22,20 @@ import { useBehavior } from "../useBehavior";
  */
 export const makeOneOnOnePortraitLayout: CallLayout<
   OneOnOnePortraitLayoutModel
-> = ({ minBounds$, portraitPipAlignment$ }) => ({
+> = () => ({
   scrollingOnTop: false,
 
-  fixed: function OneOnOnePortraitLayoutFixed({ ref }): ReactNode {
+  fixed: function OneOnOnePortraitLayoutFixed({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
-    return <div ref={ref} />;
+    return (
+      <div ref={ref} className={styles.layer}>
+        <Slot
+          className={styles.spotlight}
+          id={model.spotlight.id}
+          model={model.spotlight}
+        />
+      </div>
+    );
   },
 
   scrolling: function OneOnOnePortraitLayoutScrolling({
@@ -37,41 +44,30 @@ export const makeOneOnOnePortraitLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    const { width, height } = useObservableEagerState(minBounds$);
-    const pipAlignmentValue = useBehavior(portraitPipAlignment$);
-    const { tileWidth, tileHeight } = useMemo(
-      () => arrangeTiles(width, height, 1),
-      [width, height],
-    );
-
+    const pipSize = useBehavior(model.pipSize$);
+    const pipAlignment = useBehavior(model.pipAlignment$);
     const onDragLocalTile: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
-        portraitPipAlignment$.next({
+        model.pipAlignment$.next({
           block: yRatio < 0.5 ? "start" : "end",
           inline: xRatio < 0.5 ? "start" : "end",
         }),
-      [],
+      [model.pipAlignment$],
     );
 
     return (
       <div ref={ref} className={styles.layer}>
-        <Slot
-          id={model.spotlight.id}
-          model={model.spotlight}
-          className={styles.container}
-          style={{ width: tileWidth, height: tileHeight }}
-        >
-          {model.pip && (
-            <Slot
-              className={classNames(styles.slot, styles.local)}
-              id={model.pip.id}
-              model={model.pip}
-              onDrag={onDragLocalTile}
-              data-block-alignment={pipAlignmentValue.block}
-              data-inline-alignment={pipAlignmentValue.inline}
-            />
-          )}
-        </Slot>
+        {model.pip && (
+          <Slot
+            className={classNames(styles.pip)}
+            id={model.pip.id}
+            model={model.pip}
+            onDrag={onDragLocalTile}
+            data-size={pipSize}
+            data-block-alignment={pipAlignment.block}
+            data-inline-alignment={pipAlignment.inline}
+          />
+        )}
       </div>
     );
   },

src/grid/SpotlightExpandedLayout.tsx

@@ -19,7 +19,7 @@ import { useBehavior } from "../useBehavior";
  */
 export const makeSpotlightExpandedLayout: CallLayout<
   SpotlightExpandedLayoutModel
-> = ({ landscapePipAlignment$ }) => ({
+> = () => ({
   scrollingOnTop: true,
 
   fixed: function SpotlightExpandedLayoutFixed({
@@ -46,15 +46,15 @@ export const makeSpotlightExpandedLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    const pipAlignmentValue = useBehavior(landscapePipAlignment$);
+    const pipAlignment = useBehavior(model.pipAlignment$);
 
     const onDragPip: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
-        landscapePipAlignment$.next({
+        model.pipAlignment$.next({
           block: yRatio < 0.5 ? "start" : "end",
           inline: xRatio < 0.5 ? "start" : "end",
         }),
-      [],
+      [model.pipAlignment$],
     );
 
     return (
@@ -65,8 +65,8 @@ export const makeSpotlightExpandedLayout: CallLayout<
             id={model.pip.id}
             model={model.pip}
             onDrag={onDragPip}
-            data-block-alignment={pipAlignmentValue.block}
-            data-inline-alignment={pipAlignmentValue.inline}
+            data-block-alignment={pipAlignment.block}
+            data-inline-alignment={pipAlignment.inline}
           />
         )}
       </div>