@q9labsai/chalk-react-native 5.2.0 → 5.2.1

package/src/stage/ContentTile.tsx

@@ -1,18 +1,20 @@
-import type { SpaceSnapshot } from "@q9labsai/chalk-client";
-import { memo, useMemo, useRef } from "react";
+import { ChalkWhiteboardViewBounds, type SpaceSnapshot } from "@q9labsai/chalk-client";
+import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import { EmbeddedWhiteboard } from "../components/EmbeddedWhiteboard";
 import { RtcVideoView } from "../components/RtcVideoView";
 import { useSpaceClient } from "../context/space-client-context";
+import { useDeviceLayout } from "../frame/device-layout";
+import { LandscapeControlsContext } from "../frame/call-controls";
 import { useDevScenario } from "../frame/dev-scenario";
 import { useMeasuredRef } from "../frame/measurement";
-import { Icon } from "../icons/Icon";
 import { createNativeMediaStream } from "../media/native-webrtc";
 import type { Frame } from "../motion/MovingFrame";
-import { ChalkText } from "../primitives/ChalkText";
+import { useToasts } from "../primitives/toast/ToastStack";
 import { NameTag } from "../primitives/NameTag";
 import { useTheme } from "../theme/theme";
 import { radii } from "../theme/tokens";
+import { useStageView } from "./stage-view";
 import { useSpaceSelector } from "./space-selector";
 
 export type SharedContent = { readonly kind: "screen"; readonly sharerId: string } | { readonly kind: "board" };
@@ -60,34 +62,79 @@ function ScreenShare({ sharerId, inner, mini, onShowInSpotlight }: { readonly sh
 }
 
 const selectBoard = (snapshot: SpaceSnapshot) => snapshot.whiteboard.engine.status;
+const selectRoster = (snapshot: SpaceSnapshot) => snapshot.participants.roster;
+const selectSelfId = (snapshot: SpaceSnapshot) => snapshot.self.participantId;
+const selectConnection = (snapshot: SpaceSnapshot) => snapshot.connection.status;
+const selectAccess = (snapshot: SpaceSnapshot) => snapshot.whiteboard.access;
+const selectCanManage = (snapshot: SpaceSnapshot) => snapshot.self.can("manageWhiteboard");
+const selectSceneId = (snapshot: SpaceSnapshot) => snapshot.whiteboard.engine.sceneId;
 
-/** The shared board, view-only today, through the embedded whiteboard. It loads only while a board is shared. */
+/** The shared board uses the same renderer, tools and view protocol as web. */
 function Board({ mini, onShowInSpotlight }: { readonly mini: boolean; readonly onShowInSpotlight: () => void }): React.JSX.Element {
   const client = useSpaceClient();
   const { colors, scheme } = useTheme();
+  const view = useStageView();
+  const { width, height } = useDeviceLayout();
+  const landscapeControlsVisible = useContext(LandscapeControlsContext);
+  const phone = Math.min(width, height) < 600;
   const status = useSpaceSelector(selectBoard);
-  const chipStyle = [styles.viewOnly, { backgroundColor: colors.surface, borderColor: colors.lineStrong }];
-  const chipRef = useMeasuredRef<View>("tile.content.view-only", chipStyle);
-  // The transport changes when the engine resubscribes.
+  const roster = useSpaceSelector(selectRoster);
+  const selfId = useSpaceSelector(selectSelfId);
+  const connectionStatus = useSpaceSelector(selectConnection);
+  const sceneId = useSpaceSelector(selectSceneId);
+  const access = useSpaceSelector(selectAccess);
+  const canManage = useSpaceSelector(selectCanManage);
+  const toasts = useToasts();
   const transport = useMemo(() => client.whiteboard.transport(), [client, status]);
+  const [capabilities, setCapabilities] = useState({ canDraw: false, canClear: false, viewsAvailable: false });
+  useEffect(() => transport?.subscribeSummary?.((summary) => setCapabilities({ canDraw: summary.canDraw, canClear: summary.canClear, viewsAvailable: transport.supportsViews === true })), [transport]);
+  const board = useMemo(
+    () => ({
+      primary: !mini,
+      phone,
+      landscapeControlsVisible,
+      following: view.following,
+      ownParticipantId: selfId,
+      people: roster.map((person) => ({ id: person.participantId, displayName: person.displayName })),
+      viewBounds: ChalkWhiteboardViewBounds,
+      sceneId,
+      sceneStatus: status,
+      connectionStatus,
+      viewsAvailable: capabilities.viewsAvailable,
+      ...(canManage && access.policy !== null && transport?.setDrawPolicy
+        ? {
+            whoCanDraw: {
+              policy: access.policy,
+              people: roster
+                .filter((person) => person.participantId !== selfId && !person.capabilities.includes("manageWhiteboard"))
+                .map((person) => ({ id: person.participantId, name: person.displayName, picked: access.permissions.some((permission) => permission.participantId === person.participantId && permission.canDraw) })),
+            },
+          }
+        : {}),
+      colors,
+    }),
+    [mini, phone, landscapeControlsVisible, view.following, selfId, roster, sceneId, status, connectionStatus, capabilities.viewsAvailable, canManage, access, transport, colors],
+  );
+  const onClose = useCallback(() => {
+    void (async () => {
+      if (canManage) await transport?.setPresentation?.(false);
+      view.setBoardOpen(false);
+      view.setFollowing(null);
+    })().catch(() => toasts.show({ kind: "error", dismissible: true, message: "Couldn’t close the board. Try again." }));
+  }, [canManage, transport, toasts, view.setBoardOpen, view.setFollowing]);
   const journeyId = useRef(`board-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`).current;
 
   return (
     <>
-      {transport ? <EmbeddedWhiteboard canClear={false} canDraw={false} journeyId={journeyId} style={StyleSheet.absoluteFill} testID="tile.content.board" theme={scheme} transport={transport} /> : null}
+      {transport ? (
+        <EmbeddedWhiteboard board={board} canClear={capabilities.canClear} canDraw={!mini && capabilities.canDraw} journeyId={journeyId} onCloseBoard={onClose} onFollow={view.setFollowing} style={StyleSheet.absoluteFill} testID="tile.content.board" theme={scheme} transport={transport} />
+      ) : null}
       {mini ? (
         <>
           <Pressable accessibilityLabel="Show the board in spotlight" accessibilityRole="button" onPress={onShowInSpotlight} style={StyleSheet.absoluteFill} testID="tile.content.open" />
           <NameTag icon="pen" name="Board" testID="tile.content.name" />
         </>
-      ) : (
-        <View accessibilityLiveRegion="polite" accessibilityRole="text" accessible ref={chipRef} style={chipStyle} testID="tile.content.view-only">
-          <Icon color={colors.textMuted} name="lock" size={16} />
-          <ChalkText tone="textSoft" variant="section">
-            View only
-          </ChalkText>
-        </View>
-      )}
+      ) : null}
     </>
   );
 }
@@ -95,6 +142,4 @@ function Board({ mini, onShowInSpotlight }: { readonly mini: boolean; readonly o
 const styles = StyleSheet.create({
   tile: { flex: 1, overflow: "hidden", borderRadius: radii.tilePhone },
   box: { position: "absolute", overflow: "hidden" },
-  // `.vchip`: a 30 pt pill 12 pt in from the board's top-left corner, with a one-pixel ring.
-  viewOnly: { position: "absolute", left: 12, top: 12, height: 30, paddingHorizontal: 12, borderRadius: radii.round, borderWidth: 1, flexDirection: "row", alignItems: "center", gap: 6, zIndex: 3 },
 });

package/src/stage/ParticipantTile.tsx

@@ -24,6 +24,8 @@ export type ParticipantTileProps = {
   readonly height: number;
   /** The small tile floating over the other person when two are in the call. */
   readonly float: boolean;
+  readonly following?: boolean;
+  readonly onOptions?: (id: string) => void;
   readonly pinned: boolean;
   /** Your own front-camera video is mirrored while this is on. */
   readonly mirror: boolean;
@@ -66,7 +68,7 @@ function selectTile(id: string) {
  * and the speaking ring. It subscribes to that person alone, so nobody else's change re-renders
  * it, and the stage keeps it mounted across every move so the video view keeps its surface.
  */
-export const ParticipantTile = memo(function ParticipantTile({ id, width, height, float, pinned, mirror, onOpen }: ParticipantTileProps): React.JSX.Element {
+export const ParticipantTile = memo(function ParticipantTile({ id, width, height, float, pinned, following = false, mirror, onOpen, onOptions }: ParticipantTileProps): React.JSX.Element {
   const select = useMemo(() => selectTile(id), [id]);
   const tile = useSpaceSelector(select, shallowEqual);
   const slot = useDevScenario().videoSlots?.[id];
@@ -85,14 +87,14 @@ export const ParticipantTile = memo(function ParticipantTile({ id, width, height
   const label = `Options for ${tile.name}${tile.isSelf ? " (you)" : ""}${pinned ? ", pinned" : ""}${state}`;
 
   return (
-    <TileShell cameraOn={video !== null} level={level} speaking={tile.speaking} testID={`tile.${id}`}>
+    <TileShell selected={following} cameraOn={video !== null} level={level} speaking={tile.speaking} testID={`tile.${id}`}>
       {video ?? (
         <View style={styles.center}>
           <FaceAvatar level={level} lookAround name={tile.name} size={tileAvatarSize(width, height - nameTagZone)} style="bold" />
         </View>
       )}
-      <Pressable accessibilityHint="Opens a sheet" accessibilityLabel={label} accessibilityRole="button" onPress={() => onOpen(id)} ref={hitRef} style={StyleSheet.absoluteFill} testID={`tile.${id}.open`} />
-      <NameTag handRaised={tile.handRaised} muted={tile.muted} name={name} pinned={pinned} testID={`tile.${id}.name`} you={you} />
+      <Pressable accessibilityHint="Opens a sheet" accessibilityLabel={label} accessibilityRole="button" onPress={() => onOpen(id)} onLongPress={() => onOptions?.(id)} ref={hitRef} style={StyleSheet.absoluteFill} testID={`tile.${id}.open`} />
+      <NameTag following={following} handRaised={tile.handRaised} muted={tile.muted} name={name} pinned={pinned} testID={`tile.${id}.name`} you={you} />
       {tile.isSelf && video !== null ? <FlipCameraButton back={tile.back} float={float} testID={`tile.${id}.flip`} /> : null}
     </TileShell>
   );

package/src/stage/Stage.tsx

@@ -1,7 +1,10 @@
 import type { SpaceSnapshot } from "@q9labsai/chalk-client";
-import { memo, useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import Animated from "react-native-reanimated";
+import { useSpaceClient } from "../context/space-client-context";
+import { useToasts } from "../primitives/toast/ToastStack";
+import { ownNativeBoardSession } from "../whiteboard/native-board-session";
 import { useDevScenario } from "../frame/dev-scenario";
 import { useDeviceLayout } from "../frame/device-layout";
 import { useMeasuredRef } from "../frame/measurement";
@@ -44,7 +47,7 @@ function selectStructure(snapshot: SpaceSnapshot): Structure {
     present: (hasSelf && selfId !== null ? [selfId, ...others] : others).join("\n"),
     speaker: roster.find((person) => person.presence.activeSpeaker)?.participantId ?? null,
     sharer: roster.find((person) => person.participantId !== selfId && person.media.screenShare === "active")?.participantId ?? null,
-    board: snapshot.whiteboard.open,
+    board: snapshot.whiteboard.engine.presenting,
   };
 }
 
@@ -54,18 +57,33 @@ function selectStructure(snapshot: SpaceSnapshot): Structure {
  * remounted by a move, a layout switch or a sheet; only tiles on the stage subscribe to video.
  */
 export const Stage = memo(function Stage({ frame, onOpenPeople }: StageProps): React.JSX.Element {
+  const client = useSpaceClient();
+  const toasts = useToasts();
+  useEffect(() => ownNativeBoardSession(client, () => toasts.show({ kind: "error", dismissible: true, message: "Couldn’t open the board. Try again from More." })), [client, toasts]);
   const structure = useSpaceSelector(selectStructure, shallowEqual);
+  const selectViewsAvailable = useCallback(() => client.whiteboard.transport()?.supportsViews === true, [client]);
+  const viewsAvailable = useSpaceSelector(selectViewsAvailable);
   const view = useStageView();
   const { arrangement } = useDeviceLayout();
   const { shareAspect } = useDevScenario();
   const [sheet, setSheet] = useState<{ readonly id: string | null; readonly open: boolean }>({ id: null, open: false });
 
+  useEffect(() => {
+    if (view.following && !structure.present.split("\n").includes(view.following)) view.setFollowing(null);
+  }, [structure.present, view.following, view.setFollowing]);
+
   const present = useMemo(() => (structure.present ? structure.present.split("\n") : []), [structure.present]);
   const [order, setOrder] = useState<StageOrder>({ order: [], spot: null });
   const next = nextStageOrder(order, present, structure.selfId, structure.speaker);
   if (next !== order) setOrder(next);
 
-  const content = useMemo<SharedContent | null>(() => (structure.board ? { kind: "board" } : structure.sharer !== null ? { kind: "screen", sharerId: structure.sharer } : null), [structure.board, structure.sharer]);
+  useEffect(() => {
+    view.setBoardOpen(null);
+    view.setFollowing(null);
+  }, [structure.board, view.setBoardOpen, view.setFollowing]);
+
+  const boardVisible = view.boardOpen ?? structure.board;
+  const content = useMemo<SharedContent | null>(() => (boardVisible ? { kind: "board" } : structure.sharer !== null ? { kind: "screen", sharerId: structure.sharer } : null), [boardVisible, structure.sharer]);
   const pinned = view.pinned !== null && present.includes(view.pinned) ? view.pinned : null;
   const items = useMemo(
     () =>
@@ -82,6 +100,17 @@ export const Stage = memo(function Stage({ frame, onOpenPeople }: StageProps): R
     [arrangement, content, frame, next, pinned, shareAspect, view.layout],
   );
 
+  const followTile = useCallback(
+    (id: string) => {
+      if (!boardVisible || !viewsAvailable || id === structure.selfId) {
+        setSheet({ id, open: true });
+        return;
+      }
+      view.showContent();
+      view.setFollowing(view.following === id ? null : id);
+    },
+    [boardVisible, viewsAvailable, structure.selfId, view],
+  );
   const openTile = useCallback((id: string) => setSheet({ id, open: true }), []);
   const closeTile = useCallback(() => setSheet((current) => ({ ...current, open: false })), []);
   // Like the mockup's `.stage`, the stage is a full-screen layer: tiles are placed in screen points
@@ -91,7 +120,7 @@ export const Stage = memo(function Stage({ frame, onOpenPeople }: StageProps): R
   return (
     <View pointerEvents="box-none" ref={stageRef} style={styles.layer} testID="frame.stage">
       {items.map((item) => (
-        <StageTile content={content} item={item} key={itemKey(item)} mirror={view.mirror} onOpenPeople={onOpenPeople} onOpenTile={openTile} onShowContent={view.showContent} peopleCount={present.length} pinned={pinned} />
+        <StageTile content={content} item={item} key={itemKey(item)} mirror={view.mirror} onOpenPeople={onOpenPeople} onOpenTile={followTile} onTileOptions={openTile} following={view.following} onShowContent={view.showContent} peopleCount={present.length} pinned={pinned} />
       ))}
       <TileSheet onClose={closeTile} open={sheet.open} participantId={sheet.id} />
     </View>
@@ -108,19 +137,21 @@ type StageTileProps = {
   readonly pinned: string | null;
   readonly mirror: boolean;
   readonly peopleCount: number;
+  readonly following: string | null;
+  readonly onTileOptions: (participantId: string) => void;
   readonly onOpenTile: (participantId: string) => void;
   readonly onOpenPeople: () => void;
   readonly onShowContent: () => void;
 };
 
-function StageTile({ item, content, pinned, mirror, peopleCount, onOpenTile, onOpenPeople, onShowContent }: StageTileProps): React.JSX.Element | null {
+function StageTile({ item, content, pinned, mirror, peopleCount, onOpenTile, onOpenPeople, onShowContent, following, onTileOptions }: StageTileProps): React.JSX.Element | null {
   const { scheme } = useTheme();
   const float = item.kind === "person" && item.float;
   return (
     <MovingFrame frame={item.frame} style={float ? [styles.float, { boxShadow: elevations[scheme].floatTile }] : null}>
       <Animated.View entering={tileEntering} exiting={tileLeaving} style={styles.fill}>
         {item.kind === "person" ? (
-          <ParticipantTile float={float} height={item.frame.height} id={item.id} mirror={mirror} onOpen={onOpenTile} pinned={pinned === item.id} width={item.frame.width} />
+          <ParticipantTile float={float} height={item.frame.height} id={item.id} mirror={mirror} onOpen={onOpenTile} onOptions={onTileOptions} following={following === item.id} pinned={pinned === item.id} width={item.frame.width} />
         ) : item.kind === "content" && content ? (
           <ContentTile content={content} inner={item.inner} mini={item.mini} onShowInSpotlight={onShowContent} />
         ) : item.kind === "more" ? (

package/src/stage/TileSheet.tsx

@@ -21,6 +21,7 @@ export type TileSheetProps = {
 };
 
 type SheetModel = {
+  readonly boardOpen: boolean;
   readonly name: string;
   readonly isSelf: boolean;
   readonly cameraOn: boolean;
@@ -31,11 +32,11 @@ type SheetModel = {
   readonly canRemove: boolean;
 };
 
-const closed: SheetModel = { name: "", isSelf: false, cameraOn: false, back: false, otherCamera: null, muted: false, canMute: false, canRemove: false };
+const closed: SheetModel = { boardOpen: false, name: "", isSelf: false, cameraOn: false, back: false, otherCamera: null, muted: false, canMute: false, canRemove: false };
 
 /**
  * The phone's tile sheet (`#tsheet` with `tileSheetHTML`): pin, your camera and mirror, and the
- * host's mute and remove for someone else. Board following waits for board editing.
+ * host's mute and remove for someone else. Follow is available while the board is open.
  */
 export function TileSheet({ participantId, open, onClose }: TileSheetProps): React.JSX.Element {
   const client = useSpaceClient();
@@ -48,6 +49,7 @@ export function TileSheet({ participantId, open, onClose }: TileSheetProps): Rea
         const person = snapshot.participants.roster.find((participant) => participant.participantId === participantId);
         const isSelf = snapshot.self.participantId === participantId;
         return {
+          boardOpen: snapshot.whiteboard.engine.presenting,
           name: person?.displayName ?? snapshot.self.displayName ?? "",
           isSelf,
           cameraOn: isSelf && snapshot.media.local.camera.state === "enabled",
@@ -61,6 +63,8 @@ export function TileSheet({ participantId, open, onClose }: TileSheetProps): Rea
     [participantId],
   );
   const person = useSpaceSelector(select, shallowEqual);
+  const selectViewsAvailable = useCallback(() => client.whiteboard.transport()?.supportsViews === true, [client]);
+  const viewsAvailable = useSpaceSelector(selectViewsAvailable);
   const id = participantId ?? "";
   const failed = useCallback((message: string) => () => toasts.show({ kind: "error", dismissible: true, message }), [toasts]);
   const run = (action: () => void) => () => {
@@ -77,6 +81,17 @@ export function TileSheet({ participantId, open, onClose }: TileSheetProps): Rea
         </ChalkText>
       </View>
       <SheetGroup>
+        {(view.boardOpen ?? person.boardOpen) && viewsAvailable && !person.isSelf ? (
+          <SheetRow
+            icon="pin"
+            label={view.following === participantId ? "Stop following" : "Follow"}
+            onPress={run(() => {
+              view.showContent();
+              view.setFollowing(view.following === participantId ? null : id);
+            })}
+            testID="tile-sheet.follow"
+          />
+        ) : null}
         <SheetRow icon="pin" label={view.pinned === participantId ? "Unpin" : "Pin"} onPress={run(() => view.togglePin(id))} testID="tile-sheet.pin" />
         {person.cameraOn && person.otherCamera !== null ? (
           <SheetRow

package/src/stage/stage-view.tsx

@@ -6,6 +6,10 @@ export type StageLayoutChoice = "spotlight" | "grid";
 export type StageView = {
   readonly layout: StageLayoutChoice;
   readonly pinned: string | null;
+  readonly boardOpen: boolean | null;
+  readonly setBoardOpen: (open: boolean | null) => void;
+  readonly following: string | null;
+  readonly setFollowing: (participantId: string | null) => void;
   /** Whether your own front-camera video is mirrored, as in a mirror. On by default. */
   readonly mirror: boolean;
   readonly setLayout: (layout: StageLayoutChoice) => void;
@@ -25,6 +29,8 @@ const StageViewContext = createContext<StageView | null>(null);
 export function StageViewProvider({ children }: { readonly children: ReactNode }): React.JSX.Element {
   const [layout, setLayout] = useState<StageLayoutChoice>("spotlight");
   const [pinned, setPinned] = useState<string | null>(null);
+  const [boardOpen, setBoardOpen] = useState<boolean | null>(null);
+  const [following, setFollowing] = useState<string | null>(null);
   const [mirror, setMirror] = useState(true);
 
   const dev = useDevScenario();
@@ -37,6 +43,10 @@ export function StageViewProvider({ children }: { readonly children: ReactNode }
     () => ({
       layout,
       pinned,
+      boardOpen,
+      setBoardOpen,
+      following,
+      setFollowing,
       mirror,
       setLayout: (next) => {
         setLayout(next);
@@ -56,7 +66,7 @@ export function StageViewProvider({ children }: { readonly children: ReactNode }
       },
       setMirror,
     }),
-    [layout, mirror, pinned],
+    [layout, mirror, pinned, following, boardOpen],
   );
   return <StageViewContext.Provider value={value}>{children}</StageViewContext.Provider>;
 }

package/src/whiteboard/export-board-image.ts

@@ -0,0 +1,21 @@
+import { setImageAsync } from "expo-clipboard";
+import { File, Paths } from "expo-file-system";
+import { isAvailableAsync, shareAsync } from "expo-sharing";
+
+/** Native exports stay on the device and use the system’s save/share destinations. */
+export async function exportBoardImage(value: { readonly format: "png" | "svg"; readonly dataURL: string; readonly action?: "download" | "copy" }): Promise<void> {
+  if (value.format !== "png" || !value.dataURL.startsWith("data:image/png;base64,")) throw new Error("Board export is not a PNG image");
+  const base64 = value.dataURL.slice("data:image/png;base64,".length);
+  if (value.action === "copy") {
+    await setImageAsync(base64);
+    return;
+  }
+  if (!(await isAvailableAsync())) throw new Error("Image sharing is unavailable on this device");
+  const file = new File(Paths.cache, `chalk-board-${Date.now()}.png`);
+  try {
+    file.write(base64, { encoding: "base64" });
+    await shareAsync(file.uri, { mimeType: "image/png", UTI: "public.png", dialogTitle: "Save or share the board", anchor: { x: 16, y: 16, width: 1, height: 1 } });
+  } finally {
+    if (file.exists) file.delete();
+  }
+}

package/src/whiteboard/native-board-session.ts

@@ -0,0 +1,29 @@
+import type { ChalkWhiteboardV1Transport } from "@q9labsai/chalk-client";
+
+type SessionClient = {
+  readonly whiteboard: { readonly transport: () => Pick<ChalkWhiteboardV1Transport, "startSceneSubscription" | "stopSceneSubscription"> | null };
+  readonly getSnapshot: () => { readonly connection: { readonly status: string } };
+  readonly subscribe: (listener: () => void) => () => void;
+};
+
+/** Subscribe before the tile exists, so a web presentation can open the native board. */
+export function ownNativeBoardSession(client: SessionClient, onError: () => void): () => void {
+  const transport = client.whiteboard.transport();
+  if (!transport) return () => {};
+  let started = false;
+  let active = true;
+  const observe = () => {
+    if (started || client.getSnapshot().connection.status !== "live") return;
+    started = true;
+    void transport.startSceneSubscription().catch(() => {
+      if (active) onError();
+    });
+  };
+  const unsubscribe = client.subscribe(observe);
+  observe();
+  return () => {
+    active = false;
+    unsubscribe();
+    if (started) void transport.stopSceneSubscription();
+  };
+}