@q9labsai/chalk-react-native 4.0.0

package/src/utils/build-chalk-invite-link.ts

@@ -0,0 +1,5 @@
+const PUBLIC_INVITE_ORIGIN = "https://chalkmeet.com";
+
+export function buildChalkInviteLink(joinToken: string, origin = PUBLIC_INVITE_ORIGIN): string {
+  return `${origin.replace(/\/+$/, "")}/j/${joinToken}`;
+}

package/src/utils/ios-simulator.test.ts

@@ -0,0 +1,96 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const nativeModules = {
+  ChalkRuntimeInfo: { isSimulator: true },
+  WebRTCModule: {
+    receiverGetCapabilities: vi.fn(() => {
+      throw new Error("native receiver call should be bypassed on simulator");
+    }),
+    senderGetCapabilities: vi.fn(() => {
+      throw new Error("native sender call should be bypassed on simulator");
+    }),
+  },
+};
+
+const mockedMediaDevices = {
+  enumerateDevices: vi.fn(async () => {
+    throw new Error("mediaDevices.enumerateDevices should be bypassed on simulator");
+  }),
+};
+
+vi.mock("react-native", () => ({
+  NativeModules: nativeModules,
+  Platform: { OS: "ios" },
+}));
+
+describe("ensureIosSimulatorWebRtcSafety", () => {
+  beforeEach(() => {
+    vi.resetModules();
+    nativeModules.ChalkRuntimeInfo.isSimulator = true;
+    nativeModules.WebRTCModule.receiverGetCapabilities = vi.fn(() => {
+      throw new Error("native receiver call should be bypassed on simulator");
+    });
+    nativeModules.WebRTCModule.senderGetCapabilities = vi.fn(() => {
+      throw new Error("native sender call should be bypassed on simulator");
+    });
+    delete (globalThis as Record<string, unknown>).RTCRtpReceiver;
+    delete (globalThis as Record<string, unknown>).RTCRtpSender;
+    mockedMediaDevices.enumerateDevices = vi.fn(async () => {
+      throw new Error("mediaDevices.enumerateDevices should be bypassed on simulator");
+    });
+  });
+
+  it("patches native capability lookups on the iOS simulator", async () => {
+    const { ensureIosSimulatorWebRtcSafety } = await import("./ios-simulator");
+
+    ensureIosSimulatorWebRtcSafety();
+
+    expect(nativeModules.WebRTCModule.receiverGetCapabilities("video")).toEqual({
+      codecs: [],
+      headerExtensions: [],
+    });
+    expect(nativeModules.WebRTCModule.senderGetCapabilities("audio")).toEqual({
+      codecs: [],
+      headerExtensions: [],
+    });
+  });
+
+  it("patches exported RTCRtp capability helpers when available", async () => {
+    const { ensureIosSimulatorWebRtcSafety } = await import("./ios-simulator");
+
+    const receiver = {
+      getCapabilities: vi.fn(() => {
+        throw new Error("receiver helper should be patched");
+      }),
+    };
+    const sender = {
+      getCapabilities: vi.fn(() => {
+        throw new Error("sender helper should be patched");
+      }),
+    };
+
+    ensureIosSimulatorWebRtcSafety({
+      RTCRtpReceiver: receiver,
+      RTCRtpSender: sender,
+    });
+
+    expect(receiver.getCapabilities("video")).toEqual({
+      codecs: [],
+      headerExtensions: [],
+    });
+    expect(sender.getCapabilities("audio")).toEqual({
+      codecs: [],
+      headerExtensions: [],
+    });
+  });
+
+  it("patches media device enumeration on the iOS simulator", async () => {
+    const { ensureIosSimulatorWebRtcSafety } = await import("./ios-simulator");
+
+    ensureIosSimulatorWebRtcSafety({
+      mediaDevices: mockedMediaDevices,
+    });
+
+    await expect(mockedMediaDevices.enumerateDevices()).resolves.toEqual([]);
+  });
+});

package/src/utils/ios-simulator.ts

@@ -0,0 +1,125 @@
+import { NativeModules, Platform } from "react-native";
+
+const IOS_SIMULATOR_MEDIA_MESSAGE = "Camera and microphone are unavailable in the iOS Simulator. Join starts with media off.";
+const EMPTY_RTP_CAPABILITIES = Object.freeze({
+  codecs: [],
+  headerExtensions: [],
+});
+
+const CHALK_SIMULATOR_PATCHED = "__chalkSimulatorPatched";
+
+function createEmptyRtpCapabilities() {
+  return {
+    codecs: [...EMPTY_RTP_CAPABILITIES.codecs],
+    headerExtensions: [...EMPTY_RTP_CAPABILITIES.headerExtensions],
+  };
+}
+
+function markPatched(target: object, key: string) {
+  Object.defineProperty(target, key, {
+    value: true,
+    configurable: false,
+    enumerable: false,
+    writable: false,
+  });
+}
+
+function patchWebRtcCapabilities(target: any) {
+  if (!target || typeof target.getCapabilities !== "function" || target.getCapabilities[CHALK_SIMULATOR_PATCHED] === true) {
+    return;
+  }
+
+  const getCapabilities = (kind?: string) => {
+    if (kind !== "audio" && kind !== "video") {
+      return createEmptyRtpCapabilities();
+    }
+
+    return createEmptyRtpCapabilities();
+  };
+
+  markPatched(getCapabilities, CHALK_SIMULATOR_PATCHED);
+
+  target.getCapabilities = getCapabilities;
+}
+
+function patchNativeWebRtcCapabilities(nativeModule: Record<string, unknown> | undefined) {
+  if (!nativeModule) {
+    return;
+  }
+
+  const capabilityMethods = ["receiverGetCapabilities", "senderGetCapabilities"] as const;
+
+  capabilityMethods.forEach((methodName) => {
+    const originalMethod = nativeModule[methodName];
+
+    if (typeof originalMethod !== "function" || (originalMethod as ((...args: Array<unknown>) => unknown) & { [CHALK_SIMULATOR_PATCHED]?: boolean })[CHALK_SIMULATOR_PATCHED] === true) {
+      return;
+    }
+
+    const safeMethod = () => createEmptyRtpCapabilities();
+    markPatched(safeMethod, CHALK_SIMULATOR_PATCHED);
+    nativeModule[methodName] = safeMethod;
+  });
+}
+
+function patchMediaDeviceEnumeration(mediaDevices: Record<string, unknown> | undefined) {
+  if (!mediaDevices) {
+    return;
+  }
+
+  const enumerateDevices = mediaDevices.enumerateDevices;
+
+  if (typeof enumerateDevices !== "function" || (enumerateDevices as ((...args: Array<unknown>) => unknown) & { [CHALK_SIMULATOR_PATCHED]?: boolean })[CHALK_SIMULATOR_PATCHED] === true) {
+    return;
+  }
+
+  const safeEnumerateDevices = async () => [];
+  markPatched(safeEnumerateDevices, CHALK_SIMULATOR_PATCHED);
+  mediaDevices.enumerateDevices = safeEnumerateDevices;
+}
+
+export function isIosSimulator(): boolean {
+  if (Platform.OS !== "ios") {
+    return false;
+  }
+
+  const runtimeInfo = NativeModules.ChalkRuntimeInfo as { isSimulator?: boolean } | undefined;
+  return runtimeInfo?.isSimulator === true;
+}
+
+export function getIosSimulatorVideoMessage(): string {
+  return IOS_SIMULATOR_MEDIA_MESSAGE;
+}
+
+export function getIosSimulatorMediaMessage(): string {
+  return IOS_SIMULATOR_MEDIA_MESSAGE;
+}
+
+export function ensureIosSimulatorWebRtcSafety(webRtcModule?: any): void {
+  if (!isIosSimulator()) {
+    return;
+  }
+
+  const scope = globalThis as any;
+  const nativeWebRtcModule = NativeModules.WebRTCModule as Record<string, unknown> | undefined;
+  const patchedMediaDevices = webRtcModule?.mediaDevices ?? scope.mediaDevices ?? scope.navigator?.mediaDevices;
+  const sender = webRtcModule?.RTCRtpSender ?? scope.RTCRtpSender;
+  const receiver = webRtcModule?.RTCRtpReceiver ?? scope.RTCRtpReceiver;
+
+  patchNativeWebRtcCapabilities(nativeWebRtcModule);
+  patchMediaDeviceEnumeration(patchedMediaDevices);
+  patchWebRtcCapabilities(sender);
+  patchWebRtcCapabilities(receiver);
+
+  if (scope.RTCRtpSender) {
+    patchWebRtcCapabilities(scope.RTCRtpSender);
+  }
+
+  if (scope.RTCRtpReceiver) {
+    patchWebRtcCapabilities(scope.RTCRtpReceiver);
+  }
+
+  if (scope.navigator?.mediaDevices) {
+    patchMediaDeviceEnumeration(scope.navigator.mediaDevices);
+  }
+}

package/src/utils/native-space-layout.test.ts

@@ -0,0 +1,170 @@
+import { describe, expect, it } from "vitest";
+import type { NativeParticipantState } from "../ui/native-types";
+import { buildCompactParticipantPages, normalizeStageParticipants, resolveNativeSpaceLayout } from "./native-space-layout";
+
+type SpaceParticipant = NativeParticipantState["participants"][number];
+
+function track(readyState: "live" | "ended" = "live"): MediaStreamTrack {
+  return { readyState } as MediaStreamTrack;
+}
+
+function participant(overrides: Partial<SpaceParticipant> = {}): SpaceParticipant {
+  return {
+    id: overrides.id ?? "participant-1",
+    displayName: overrides.displayName ?? "Participant",
+    role: overrides.role ?? "participant",
+    isLocal: overrides.isLocal ?? false,
+    videoEnabled: overrides.videoEnabled ?? false,
+    audioEnabled: overrides.audioEnabled ?? true,
+    isScreenSharing: overrides.isScreenSharing ?? false,
+    isSpeaking: overrides.isSpeaking ?? false,
+    handRaised: overrides.handRaised ?? false,
+    connectionQuality: overrides.connectionQuality ?? 100,
+    videoTrack: overrides.videoTrack ?? undefined,
+    audioTrack: overrides.audioTrack ?? undefined,
+    screenShareTrack: overrides.screenShareTrack ?? undefined,
+    screenShareAudioTrack: overrides.screenShareAudioTrack ?? undefined,
+    joinedAt: overrides.joinedAt ?? new Date(),
+    metadata: overrides.metadata ?? {},
+  };
+}
+
+describe("native-space-layout", () => {
+  it("normalizes participants to local-first without duplication", () => {
+    const local = participant({ id: "local", isLocal: true });
+    const remote = participant({ id: "remote" });
+
+    expect(normalizeStageParticipants([remote, local], local).map((item) => item.id)).toEqual(["local", "remote"]);
+  });
+
+  it("builds compact grid pages for higher participant counts", () => {
+    const participants = Array.from({ length: 9 }, (_, index) => participant({ id: `p-${index + 1}` }));
+
+    expect(buildCompactParticipantPages(participants).map((page) => page.length)).toEqual([4, 4, 1]);
+  });
+
+  it("stays in grid mode without whiteboard or a live screen share track", () => {
+    const local = participant({ id: "local", isLocal: true });
+
+    const result = resolveNativeSpaceLayout({
+      participants: [local],
+      localParticipant: local,
+      screenShare: {
+        isActive: false,
+        isLocalSharing: false,
+        sharerParticipantId: null,
+        videoTrack: null,
+      },
+      isWhiteboardOpen: false,
+      isCompactViewport: true,
+    });
+
+    expect(result.primaryContent).toBe("grid");
+    expect(result.isStageMode).toBe(false);
+  });
+
+  it("uses remote screen share as stage content when a live track exists", () => {
+    const local = participant({ id: "local", isLocal: true });
+    const remote = participant({ id: "remote", isScreenSharing: true, screenShareTrack: track() });
+
+    const result = resolveNativeSpaceLayout({
+      participants: [local, remote],
+      localParticipant: local,
+      screenShare: {
+        isActive: true,
+        isLocalSharing: false,
+        sharerParticipantId: "remote",
+        videoTrack: track(),
+      },
+      isWhiteboardOpen: false,
+      isCompactViewport: true,
+    });
+
+    expect(result.primaryContent).toBe("screen-share");
+    expect(result.screenSharer?.id).toBe("remote");
+    expect(result.isStageMode).toBe(true);
+  });
+
+  it("suppresses local screen share into a placeholder stage mode", () => {
+    const local = participant({ id: "local", isLocal: true, isScreenSharing: true, screenShareTrack: track() });
+
+    const result = resolveNativeSpaceLayout({
+      participants: [local],
+      localParticipant: local,
+      screenShare: {
+        isActive: true,
+        isLocalSharing: true,
+        sharerParticipantId: "local",
+        videoTrack: track(),
+      },
+      isWhiteboardOpen: false,
+      isCompactViewport: true,
+    });
+
+    expect(result.primaryContent).toBe("screen-share-placeholder");
+    expect(result.isLocalScreenShare).toBe(true);
+  });
+
+  it("prefers whiteboard over screen share on compact view", () => {
+    const local = participant({ id: "local", isLocal: true });
+    const remote = participant({ id: "remote", isScreenSharing: true, screenShareTrack: track() });
+
+    const result = resolveNativeSpaceLayout({
+      participants: [local, remote],
+      localParticipant: local,
+      screenShare: {
+        isActive: true,
+        isLocalSharing: false,
+        sharerParticipantId: "remote",
+        videoTrack: track(),
+      },
+      isWhiteboardOpen: true,
+      isCompactViewport: true,
+    });
+
+    expect(result.primaryContent).toBe("whiteboard");
+    expect(result.isSplit).toBe(false);
+  });
+
+  it("uses split stage for whiteboard plus screen share on wide view", () => {
+    const local = participant({ id: "local", isLocal: true });
+    const remote = participant({ id: "remote", isScreenSharing: true, screenShareTrack: track() });
+
+    const result = resolveNativeSpaceLayout({
+      participants: [local, remote],
+      localParticipant: local,
+      screenShare: {
+        isActive: true,
+        isLocalSharing: false,
+        sharerParticipantId: "remote",
+        videoTrack: track(),
+      },
+      isWhiteboardOpen: true,
+      isCompactViewport: false,
+    });
+
+    expect(result.primaryContent).toBe("split");
+    expect(result.isSplit).toBe(true);
+  });
+
+  it("ignores stale screen share state when no live track exists", () => {
+    const local = participant({ id: "local", isLocal: true });
+    const remote = participant({ id: "remote", isScreenSharing: true, screenShareTrack: track("ended") });
+
+    const result = resolveNativeSpaceLayout({
+      participants: [local, remote],
+      localParticipant: local,
+      screenShare: {
+        isActive: true,
+        isLocalSharing: false,
+        sharerParticipantId: "remote",
+        videoTrack: null,
+      },
+      isWhiteboardOpen: false,
+      isCompactViewport: true,
+    });
+
+    expect(result.primaryContent).toBe("grid");
+    expect(result.showScreenShare).toBe(false);
+  });
+});

package/src/utils/native-space-layout.ts

@@ -0,0 +1,135 @@
+import type { NativeParticipantState } from "../ui/native-types";
+
+type SpaceParticipant = NativeParticipantState["participants"][number];
+
+export const NATIVE_COMPACT_VIEWPORT_MAX_WIDTH = 768;
+export const NATIVE_COMPACT_GRID_PAGE_SIZE = 4;
+
+export type SpacePrimaryContent = "grid" | "screen-share" | "screen-share-placeholder" | "whiteboard" | "split";
+
+export interface NativeScreenShareStateLike {
+  isActive: boolean;
+  isLocalSharing: boolean;
+  sharerParticipantId: string | null;
+  videoTrack: MediaStreamTrack | null;
+}
+
+export interface ResolveNativeSpaceLayoutOptions {
+  participants: readonly SpaceParticipant[];
+  localParticipant: SpaceParticipant | null;
+  screenShare: NativeScreenShareStateLike;
+  isWhiteboardOpen: boolean;
+  isCompactViewport: boolean;
+}
+
+export interface ResolvedNativeSpaceLayout {
+  allParticipants: readonly SpaceParticipant[];
+  gridPages: readonly (readonly SpaceParticipant[])[];
+  primaryContent: SpacePrimaryContent;
+  isStageMode: boolean;
+  isSplit: boolean;
+  showScreenShare: boolean;
+  isCompactViewport: boolean;
+  screenSharer: SpaceParticipant | null;
+  screenShareTrack: MediaStreamTrack | null;
+  isLocalScreenShare: boolean;
+}
+
+function isSameParticipant(a: SpaceParticipant | null, b: SpaceParticipant | null): boolean {
+  return Boolean(a && b && a.id === b.id);
+}
+
+export function isRenderableTrack(track: MediaStreamTrack | null | undefined): track is MediaStreamTrack {
+  if (!track) {
+    return false;
+  }
+
+  const readyState = "readyState" in track ? track.readyState : undefined;
+  return readyState == null || readyState === "live";
+}
+
+export function normalizeStageParticipants(participants: readonly SpaceParticipant[], localParticipant: SpaceParticipant | null): SpaceParticipant[] {
+  const seen = new Set<string>();
+  const normalized: SpaceParticipant[] = [];
+
+  if (localParticipant) {
+    normalized.push(localParticipant);
+    seen.add(localParticipant.id);
+  }
+
+  for (const participant of participants) {
+    if (seen.has(participant.id)) {
+      continue;
+    }
+
+    normalized.push(participant);
+    seen.add(participant.id);
+  }
+
+  return normalized;
+}
+
+export function buildCompactParticipantPages(participants: readonly SpaceParticipant[], pageSize = NATIVE_COMPACT_GRID_PAGE_SIZE): SpaceParticipant[][] {
+  if (participants.length === 0) {
+    return [];
+  }
+
+  const pages: SpaceParticipant[][] = [];
+  for (let index = 0; index < participants.length; index += pageSize) {
+    pages.push(participants.slice(index, index + pageSize));
+  }
+  return pages;
+}
+
+export function resolveScreenShareSource(
+  participants: readonly SpaceParticipant[],
+  localParticipant: SpaceParticipant | null,
+  screenShare: NativeScreenShareStateLike,
+): {
+  screenSharer: SpaceParticipant | null;
+  screenShareTrack: MediaStreamTrack | null;
+  isLocalScreenShare: boolean;
+  showScreenShare: boolean;
+} {
+  const sharerById = screenShare.sharerParticipantId ? (participants.find((participant) => participant.id === screenShare.sharerParticipantId) ?? (localParticipant?.id === screenShare.sharerParticipantId ? localParticipant : null)) : null;
+  const localIsSharer = screenShare.isLocalSharing || isSameParticipant(sharerById, localParticipant);
+  const fallbackTrack = sharerById?.screenShareTrack ?? null;
+  const screenShareTrack = isRenderableTrack(screenShare.videoTrack) ? screenShare.videoTrack : isRenderableTrack(fallbackTrack) ? fallbackTrack : null;
+  const screenSharer = sharerById ?? (localIsSharer ? localParticipant : null);
+
+  return {
+    screenSharer,
+    screenShareTrack,
+    isLocalScreenShare: Boolean(localIsSharer && screenShareTrack),
+    showScreenShare: Boolean(screenShare.isActive && screenShareTrack),
+  };
+}
+
+export function resolveNativeSpaceLayout({ participants, localParticipant, screenShare, isWhiteboardOpen, isCompactViewport }: ResolveNativeSpaceLayoutOptions): ResolvedNativeSpaceLayout {
+  const allParticipants = normalizeStageParticipants(participants, localParticipant);
+  const gridPages = buildCompactParticipantPages(allParticipants);
+  const { screenSharer, screenShareTrack, isLocalScreenShare, showScreenShare } = resolveScreenShareSource(participants, localParticipant, screenShare);
+  const isSplit = !isCompactViewport && isWhiteboardOpen && showScreenShare;
+
+  let primaryContent: SpacePrimaryContent = "grid";
+  if (isSplit) {
+    primaryContent = "split";
+  } else if (isWhiteboardOpen) {
+    primaryContent = "whiteboard";
+  } else if (showScreenShare) {
+    primaryContent = isLocalScreenShare ? "screen-share-placeholder" : "screen-share";
+  }
+
+  return {
+    allParticipants,
+    gridPages,
+    primaryContent,
+    isStageMode: primaryContent !== "grid",
+    isSplit,
+    showScreenShare,
+    isCompactViewport,
+    screenSharer,
+    screenShareTrack,
+    isLocalScreenShare,
+  };
+}

package/src/whiteboard/embedded-whiteboard-assets.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("react-native", () => ({
+  NativeModules: {},
+  Platform: { OS: "android" },
+}));
+
+import { isEmbeddedWhiteboardNavigationAllowed, rendererURLWithContext } from "./embedded-whiteboard-assets";
+
+describe("embedded whiteboard asset policy", () => {
+  it("adds only non-credential bridge context to the local renderer URL", () => {
+    const url = rendererURLWithContext("file:///android_asset/chalk-whiteboard/index.html", {
+      journeyId: "journey-1",
+      rendererGeneration: "generation-1",
+    });
+
+    expect(url).toBe("file:///android_asset/chalk-whiteboard/index.html?journeyId=journey-1&rendererGeneration=generation-1");
+    expect(url).not.toMatch(/token|credential|signature/iu);
+  });
+
+  it("allows renderer-local assets and rejects every remote navigation", () => {
+    const renderer = "file:///android_asset/chalk-whiteboard/index.html";
+
+    expect(isEmbeddedWhiteboardNavigationAllowed(renderer, renderer)).toBe(true);
+    expect(isEmbeddedWhiteboardNavigationAllowed("file:///android_asset/chalk-whiteboard/fonts/Assistant/Assistant-Regular.woff2", renderer)).toBe(true);
+    expect(isEmbeddedWhiteboardNavigationAllowed("file:///android_asset/chalk-whiteboard/../../data/user/0/secret", renderer)).toBe(false);
+    expect(isEmbeddedWhiteboardNavigationAllowed("file:///android_asset/chalk-whiteboard/%2e%2e/%2e%2e/data/user/0/secret", renderer)).toBe(false);
+    expect(isEmbeddedWhiteboardNavigationAllowed("https://cdn.jsdelivr.net/npm/@excalidraw/excalidraw/index.css", renderer)).toBe(false);
+    expect(isEmbeddedWhiteboardNavigationAllowed("javascript:alert(1)", renderer)).toBe(false);
+  });
+});

package/src/whiteboard/embedded-whiteboard-assets.ts

@@ -0,0 +1,41 @@
+import { NativeModules, Platform } from "react-native";
+
+const ANDROID_RENDERER_URL = "file:///android_asset/chalk-whiteboard/index.html";
+
+interface ChalkWhiteboardAssetsNativeModule {
+  readonly rendererURL: () => Promise<string>;
+}
+
+export async function resolveEmbeddedWhiteboardRendererURL(override?: string): Promise<string> {
+  if (override) return requireLocalRendererURL(override);
+  if (Platform.OS === "android") return ANDROID_RENDERER_URL;
+
+  const module = NativeModules.ChalkWhiteboardAssets as ChalkWhiteboardAssetsNativeModule | undefined;
+  if (!module?.rendererURL) throw new Error(`Chalk embedded whiteboard assets are unavailable on ${Platform.OS}`);
+  return requireLocalRendererURL(await module.rendererURL());
+}
+
+export function rendererURLWithContext(rendererURL: string, context: { readonly journeyId: string; readonly rendererGeneration: string }): string {
+  const separator = rendererURL.includes("?") ? "&" : "?";
+  return `${rendererURL}${separator}journeyId=${encodeURIComponent(context.journeyId)}&rendererGeneration=${encodeURIComponent(context.rendererGeneration)}`;
+}
+
+export function isEmbeddedWhiteboardNavigationAllowed(requestURL: string, rendererURL: string): boolean {
+  if (requestURL === "about:blank") return true;
+  try {
+    const renderer = new URL(rendererURL);
+    const request = new URL(requestURL);
+    if (renderer.protocol !== "file:" || request.protocol !== "file:" || request.host !== renderer.host) return false;
+    const requestPath = decodeURIComponent(request.pathname);
+    if (requestPath.split("/").includes("..")) return false;
+    const rendererDirectory = renderer.pathname.slice(0, renderer.pathname.lastIndexOf("/") + 1);
+    return request.pathname === renderer.pathname || request.pathname.startsWith(rendererDirectory);
+  } catch {
+    return false;
+  }
+}
+
+function requireLocalRendererURL(value: string): string {
+  if (!value.startsWith("file://")) throw new Error("Chalk embedded whiteboard renderer must be a local file URL");
+  return value;
+}