@omercnet/paseo-shared-browser 1.2.2 → 2.0.0-next.249.1

package/shared/resolution-menu.test.ts

@@ -0,0 +1,120 @@
+import { describe, expect, it } from "vitest";
+import {
+  browserDisplayPreferences,
+  browserDisplayPreferencesSchema,
+} from "./browser-display-preferences";
+import { DEVICE_PRESETS } from "./device-presets";
+import {
+  groupResolutionPresets,
+  normalizeResolutionFavorites,
+  orderedResolutionFavorites,
+  toggleResolutionFavorite,
+} from "./resolution-menu";
+
+describe("resolution choices and host preferences", () => {
+  it("groups the whole catalogue by viewport ratio, sorts width and retains mobile ties", () => {
+    const groups = groupResolutionPresets();
+    expect(groups.map((group) => group.label)).toEqual(["16:9", "16:10", "1:1", "Mobile"]);
+    expect(
+      groups
+        .flatMap((group) => group.presets)
+        .map((preset) => preset.id)
+        .sort(),
+    ).toEqual(DEVICE_PRESETS.map((preset) => preset.id).sort());
+    for (const group of groups) {
+      expect(group.presets.map((preset) => preset.viewport.width)).toEqual(
+        group.presets.map((preset) => preset.viewport.width).sort((a, b) => a - b),
+      );
+      for (const preset of group.presets) {
+        if (group.id === "mobile") expect(preset.isMobile).toBe(true);
+        else {
+          expect(preset.isMobile).toBe(false);
+          const [width, height] = group.id.split(":").map(Number);
+          if (width === undefined || height === undefined) throw new Error("Invalid ratio fixture");
+          expect(preset.viewport.width * height).toBe(preset.viewport.height * width);
+        }
+      }
+    }
+    expect(groups[3]?.presets.map((preset) => preset.id)).toEqual([
+      "iphone-15-pro",
+      "pixel-7",
+      "pixel-7-sharp",
+      "ipad-pro-11",
+    ]);
+  });
+
+  it("projects scrambled saved favorites in the grouped picker order without rewriting them", () => {
+    const saved = Object.freeze([
+      "pixel-7-sharp",
+      "desktop-1440x1440",
+      "desktop-1920x1200",
+      "desktop-2560x1440",
+      "desktop-1440x900",
+      "desktop-chrome",
+      "desktop-1440x810",
+      "desktop-chrome",
+      "retired",
+    ]);
+    expect(orderedResolutionFavorites(saved)).toEqual([
+      "desktop-chrome",
+      "desktop-1440x810",
+      "desktop-2560x1440",
+      "desktop-1440x900",
+      "desktop-1920x1200",
+      "desktop-1440x1440",
+      "pixel-7-sharp",
+    ]);
+    expect(saved[0]).toBe("pixel-7-sharp");
+    expect(saved).toHaveLength(9);
+  });
+
+  it("prunes removed favorites and duplicates without changing stable favorite order", () => {
+    expect(
+      normalizeResolutionFavorites([
+        "retired",
+        "pixel-7-sharp",
+        "desktop-chrome",
+        "pixel-7-sharp",
+        "unknown",
+      ]),
+    ).toEqual(["pixel-7-sharp", "desktop-chrome"]);
+    expect(normalizeResolutionFavorites(Array(100).fill("pixel-7"))).toEqual(["pixel-7"]);
+    expect(
+      normalizeResolutionFavorites(DEVICE_PRESETS.flatMap((preset) => [preset.id, preset.id])),
+    ).toHaveLength(DEVICE_PRESETS.length);
+  });
+
+  it("toggles only catalogue entries and does not mutate stored input", () => {
+    const input = Object.freeze(["retired", "desktop-chrome", "desktop-chrome"]);
+    expect(toggleResolutionFavorite(input, "pixel-7")).toEqual(["desktop-chrome", "pixel-7"]);
+    expect(toggleResolutionFavorite(input, "desktop-chrome")).toEqual([]);
+    expect(toggleResolutionFavorite(input, "unknown")).toEqual(["desktop-chrome"]);
+    expect(input).toEqual(["retired", "desktop-chrome", "desktop-chrome"]);
+  });
+
+  it("defaults host favorites and quality but allows retired IDs to remain readable", () => {
+    expect(browserDisplayPreferences.scope).toBe("host");
+    expect(browserDisplayPreferencesSchema.parse({})).toEqual({
+      favoritePresetIds: [],
+      captureQuality: "medium",
+      videoBitrate: 12_000_000,
+      videoFps: 30,
+    });
+    expect(
+      browserDisplayPreferencesSchema.parse({ favoritePresetIds: ["retired"] }).favoritePresetIds,
+    ).toEqual(["retired"]);
+    expect(browserDisplayPreferencesSchema.safeParse({ captureQuality: "ultra" }).success).toBe(
+      false,
+    );
+    expect(
+      browserDisplayPreferencesSchema.safeParse({
+        favoritePresetIds: Array(DEVICE_PRESETS.length + 1).fill("pixel-7"),
+      }).success,
+    ).toBe(false);
+    expect(
+      browserDisplayPreferencesSchema.safeParse({
+        favoritePresetIds: ["x".repeat(129)],
+      }).success,
+    ).toBe(false);
+  });
+});

package/shared/resolution-menu.ts

@@ -0,0 +1,72 @@
+/** Catalogue grouping and stable-ID favorites for every resolution picker surface. */
+import { DEVICE_PRESET_IDS, DEVICE_PRESETS, type DevicePresetId } from "./device-presets";
+
+export type ResolutionPreset = (typeof DEVICE_PRESETS)[number];
+export type ResolutionGroupId = "16:9" | "16:10" | "1:1" | "mobile";
+export interface ResolutionGroup {
+  id: ResolutionGroupId;
+  label: string;
+  presets: readonly ResolutionPreset[];
+}
+
+const GROUPS = [
+  { id: "16:9", label: "16:9" },
+  { id: "16:10", label: "16:10" },
+  { id: "1:1", label: "1:1" },
+  { id: "mobile", label: "Mobile" },
+] as const;
+const KNOWN_PRESET_IDS: ReadonlySet<string> = new Set(DEVICE_PRESET_IDS);
+
+/** Group by actual viewport facts, keeping equal-width presets in catalogue order. */
+export function groupResolutionPresets(): ResolutionGroup[] {
+  const groups: ResolutionGroup[] = GROUPS.map((group) => ({
+    ...group,
+    presets: [],
+  }));
+  for (const preset of DEVICE_PRESETS) {
+    const { width, height } = preset.viewport;
+    let id: ResolutionGroupId;
+    if (preset.isMobile) id = "mobile";
+    else if (width === height) id = "1:1";
+    else if (width * 9 === height * 16) id = "16:9";
+    else if (width * 10 === height * 16) id = "16:10";
+    else throw new Error(`Resolution preset ${preset.id} requires an aspect-ratio group`);
+    const group = groups.find((candidate) => candidate.id === id);
+    if (!group) throw new Error(`Resolution group ${id} is missing`);
+    group.presets = [...group.presets, preset];
+  }
+  return groups.map((group) => ({
+    ...group,
+    presets: [...group.presets].sort((a, b) => a.viewport.width - b.viewport.width),
+  }));
+}
+
+/** Drop removed/unknown IDs and duplicates, retaining the user's favorite order. */
+export function normalizeResolutionFavorites(ids: readonly string[]): DevicePresetId[] {
+  const favorites: DevicePresetId[] = [];
+  const seen = new Set<string>();
+  for (const id of ids) {
+    if (!KNOWN_PRESET_IDS.has(id) || seen.has(id)) continue;
+    seen.add(id);
+    favorites.push(id as DevicePresetId);
+    if (favorites.length === DEVICE_PRESETS.length) break;
+  }
+  return favorites;
+}
+
+/** Project stored favorites in picker order without rewriting the user's saved settings. */
+export function orderedResolutionFavorites(ids: readonly string[]): DevicePresetId[] {
+  const favorites = new Set(normalizeResolutionFavorites(ids));
+  return groupResolutionPresets()
+    .flatMap((group) => group.presets)
+    .filter((preset) => favorites.has(preset.id))
+    .map((preset) => preset.id);
+}
+
+/** Toggle only a current preset. Unknown IDs cannot become persisted shortcuts. */
+export function toggleResolutionFavorite(ids: readonly string[], id: string): DevicePresetId[] {
+  const current = normalizeResolutionFavorites(ids);
+  if (!KNOWN_PRESET_IDS.has(id)) return current;
+  if (current.includes(id as DevicePresetId)) return current.filter((existing) => existing !== id);
+  return [...current, id as DevicePresetId];
+}

package/shared/video-settings.test.ts

@@ -0,0 +1,38 @@
+import { expect, it } from "vitest";
+import { captureBrowserRpc } from "./browser";
+import {
+  browserDisplayPreferences,
+  browserDisplayPreferencesSchema,
+} from "./browser-display-preferences";
+import { readBrowserVideoRpc } from "./browser-video";
+import { JPEG_QUALITY } from "./capture-settings";
+import { resolveVideoEncoderSettings, videoEncoderKey } from "./video-settings";
+
+it("retains current defaults and migrates the old coupled quality without losing favorites", () => {
+  expect(resolveVideoEncoderSettings({})).toEqual({ bitrate: 12_000_000, fps: 30 });
+  const migrated = browserDisplayPreferences.migrate?.(
+    { captureQuality: "low", favoritePresetIds: ["pixel-7-sharp"] },
+    1,
+  );
+  expect(browserDisplayPreferencesSchema.parse(migrated)).toEqual({
+    captureQuality: "low",
+    favoritePresetIds: ["pixel-7-sharp"],
+    videoBitrate: 2_000_000,
+    videoFps: 30,
+  });
+});
+it("accepts explicit JPEG100 and video24Mbps60fps, and refuses arbitrary settings", () => {
+  const viewerToken = "v".repeat(32);
+  expect(captureBrowserRpc.input.parse({ viewerToken, quality: "maximum" }).quality).toBe(
+    "maximum",
+  );
+  expect(JPEG_QUALITY.maximum).toBe(100);
+  expect(
+    readBrowserVideoRpc.input.parse({ viewerToken, bitrate: 24_000_000, fps: 60 }),
+  ).toMatchObject({ bitrate: 24_000_000, fps: 60 });
+  for (const invalid of [{ bitrate: 25_000_000 }, { fps: 120 }, { fps: NaN }, { bitrate: 0 }])
+    expect(readBrowserVideoRpc.input.safeParse({ viewerToken, ...invalid }).success).toBe(false);
+  expect(videoEncoderKey(resolveVideoEncoderSettings({ bitrate: 24_000_000, fps: 15 }))).toBe(
+    "24000000:15",
+  );
+});

package/shared/video-settings.ts

@@ -0,0 +1,34 @@
+/** Bounded viewer encoder profiles. Settings affect encoded output only, never
+ * page layout, pixel density, control ownership or another viewer's encoder. */
+import { z } from "zod";
+export const VIDEO_BITRATES = [2_000_000, 5_000_000, 12_000_000, 24_000_000] as const;
+export const VIDEO_FRAME_RATES = [15, 30, 60] as const;
+export const DEFAULT_VIDEO_BITRATE = 12_000_000;
+export const DEFAULT_VIDEO_FPS = 30;
+export const VIDEO_ENCODER_LIMIT = 3;
+export const VIDEO_ENCODER_IDLE_MS = 2_000;
+export const videoBitrateSchema = z.union(VIDEO_BITRATES.map((value) => z.literal(value)));
+export const videoFrameRateSchema = z.union(VIDEO_FRAME_RATES.map((value) => z.literal(value)));
+export const videoEncoderSettingsSchema = z.object({
+  bitrate: videoBitrateSchema,
+  fps: videoFrameRateSchema,
+});
+export type VideoEncoderSettings = z.infer<typeof videoEncoderSettingsSchema>;
+const LEGACY_BITRATES = { low: 2_000_000, medium: 5_000_000, high: 12_000_000 } as const;
+/** Legacy profile callers retain their exact bitrate; new callers supply explicit
+ * bounded values. Unknown values fail before allocating a helper or encoder. */
+export function resolveVideoEncoderSettings(input: {
+  quality?: "low" | "medium" | "high";
+  bitrate?: number;
+  fps?: number;
+}): VideoEncoderSettings {
+  return videoEncoderSettingsSchema.parse({
+    bitrate: input.bitrate ?? LEGACY_BITRATES[input.quality ?? "high"],
+    fps: input.fps ?? DEFAULT_VIDEO_FPS,
+  });
+}
+/** Canonical key includes both encoder settings, avoiding bitrate/FPS aliasing. */
+export function videoEncoderKey(settings: VideoEncoderSettings): string {
+  const value = videoEncoderSettingsSchema.parse(settings);
+  return `${value.bitrate}:${value.fps}`;
+}

package/shared/viewport-limits.ts

@@ -0,0 +1,5 @@
+/** Shared bounds for custom viewports, frame contracts, and the agent adapter. */
+export const MIN_VIEWPORT = { width: 320, height: 480 } as const;
+export const MAX_VIEWPORT = { width: 3840, height: 3840 } as const;
+/** Agents keep the smaller original bound; humans may choose any size up to MAX_VIEWPORT. */
+export const MAX_AGENT_VIEWPORT = { width: 1600, height: 1200 } as const;