@multiplatform.one/components 6.6.0 → 7.0.0

package/src/Video/index.tsx

@@ -1,49 +1,313 @@
 import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { YStack } from "tamagui";
+import { PlayerChrome } from "./PlayerChrome";
 import { VideoCaption, VideoFrame } from "./VideoFrame";
 import type { VideoProps } from "./types";
 
 export type { VideoProps } from "./types";
 
+const HIDE_MS = 2500;
+
+function asVideoElement(node: unknown): HTMLVideoElement | null {
+  if (!node || typeof HTMLVideoElement === "undefined") return null;
+  if (node instanceof HTMLVideoElement) return node;
+  if (node instanceof Element) {
+    if (node.tagName === "VIDEO") return node as HTMLVideoElement;
+    return node.querySelector("video");
+  }
+  const host = (node as { host?: unknown }).host;
+  return host ? asVideoElement(host) : null;
+}
+
+function isStageFullscreen(stage: HTMLElement | null): boolean {
+  if (!stage || typeof document === "undefined") return false;
+  const doc = document as Document & { webkitFullscreenElement?: Element | null };
+  return document.fullscreenElement === stage || doc.webkitFullscreenElement === stage;
+}
+
+async function toggleStageFullscreen(stage: HTMLElement | null) {
+  if (!stage || typeof document === "undefined") return;
+  const doc = document as Document & {
+    webkitExitFullscreen?: () => Promise<void> | void;
+    webkitFullscreenElement?: Element | null;
+  };
+  const el = stage as HTMLElement & {
+    webkitRequestFullscreen?: () => Promise<void> | void;
+  };
+  if (isStageFullscreen(stage)) {
+    if (document.exitFullscreen) await document.exitFullscreen();
+    else doc.webkitExitFullscreen?.();
+    return;
+  }
+  if (el.requestFullscreen) await el.requestFullscreen();
+  else el.webkitRequestFullscreen?.();
+}
+
 /**
  * General-purpose video surface for desk / docs (gallery Video).
- * Web uses a native `<video>`. Native playback lives in `index.native.tsx`
+ * Web uses a native `<video>` with house overlay chrome (YouTube / Media
+ * Chrome / AVKit transport). Native playback lives in `index.native.tsx`
  * behind an optional `expo-video` peer so web-only consumers stay light.
  */
 export function Video({
   src,
   children,
-  muted = false,
+  muted: mutedProp = false,
   autoPlay = false,
   controls = true,
   loop = false,
   poster,
   title,
+  compact,
   ...props
 }: VideoProps) {
-  const { knobProps } = useResolvedKnobs({ component: "Video" });
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs({ component: "Video", compact });
+  const stageRef = useRef<unknown>(null);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  return (
-    <VideoFrame render="figure" marginHorizontal={0} marginVertical="$4" {...props}>
-      {src ? (
-        <YStack
-          render="video"
-          // @ts-expect-error HTML video attributes via render prop
-          src={src}
-          autoPlay={autoPlay}
-          playsInline
+  const [playing, setPlaying] = useState(autoPlay);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [muted, setMuted] = useState(mutedProp);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [hovering, setHovering] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [seeking, setSeeking] = useState(false);
+  const [held, setHeld] = useState(true);
+
+  const chromeVisible = Boolean(controls && (!playing || hovering || focused || seeking || held));
+
+  const clearHide = useCallback(() => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = null;
+    }
+  }, []);
+
+  const bumpChrome = useCallback(() => {
+    setHeld(true);
+    clearHide();
+    hideTimer.current = setTimeout(() => setHeld(false), HIDE_MS);
+  }, [clearHide]);
+
+  useEffect(() => {
+    if (!controls) return;
+    if (!playing) {
+      clearHide();
+      setHeld(true);
+      return;
+    }
+    bumpChrome();
+    return clearHide;
+  }, [bumpChrome, clearHide, controls, playing]);
+
+  useEffect(() => {
+    setMuted(mutedProp);
+  }, [mutedProp]);
+
+  useEffect(() => {
+    const stage = stageRef.current as { querySelector?: (s: string) => Element | null } | null;
+    const el =
+      videoRef.current ??
+      asVideoElement(stage) ??
+      asVideoElement(stage?.querySelector?.("video"));
+    videoRef.current = el;
+    if (!el) return;
+
+    el.muted = muted;
+    el.loop = loop;
+    const sync = () => {
+      setPlaying(!el.paused);
+      setCurrentTime(el.currentTime || 0);
+      setDuration(Number.isFinite(el.duration) ? el.duration : 0);
+    };
+    const onPlay = () => setPlaying(true);
+    const onPause = () => setPlaying(false);
+    const onTime = () => setCurrentTime(el.currentTime || 0);
+    const onMeta = () => setDuration(Number.isFinite(el.duration) ? el.duration : 0);
+    const onVolume = () => setMuted(el.muted);
+    el.addEventListener("play", onPlay);
+    el.addEventListener("pause", onPause);
+    el.addEventListener("timeupdate", onTime);
+    el.addEventListener("loadedmetadata", onMeta);
+    el.addEventListener("durationchange", onMeta);
+    el.addEventListener("volumechange", onVolume);
+    sync();
+    return () => {
+      el.removeEventListener("play", onPlay);
+      el.removeEventListener("pause", onPause);
+      el.removeEventListener("timeupdate", onTime);
+      el.removeEventListener("loadedmetadata", onMeta);
+      el.removeEventListener("durationchange", onMeta);
+      el.removeEventListener("volumechange", onVolume);
+    };
+  }, [src, loop, muted]);
+
+  useEffect(() => {
+    const stage = asVideoElement(stageRef.current) ? (stageRef.current as HTMLElement) : null;
+    const host =
+      (stageRef.current as { querySelector?: (s: string) => Element | null } | null)
+        ?.querySelector?.("video")
+        ?.parentElement ?? stage;
+    const onFs = () => setFullscreen(isStageFullscreen(host));
+    document.addEventListener("fullscreenchange", onFs);
+    document.addEventListener("webkitfullscreenchange", onFs);
+    return () => {
+      document.removeEventListener("fullscreenchange", onFs);
+      document.removeEventListener("webkitfullscreenchange", onFs);
+    };
+  }, [src]);
+
+  const togglePlay = useCallback(() => {
+    const el = videoRef.current;
+    if (!el) return;
+    bumpChrome();
+    if (el.paused) void el.play()?.catch(() => {});
+    else el.pause();
+  }, [bumpChrome]);
+
+  const onSeek = useCallback((time: number) => {
+    const el = videoRef.current;
+    if (!el || !Number.isFinite(time)) return;
+    el.currentTime = time;
+    setCurrentTime(time);
+  }, []);
+
+  const toggleMuted = useCallback(() => {
+    const el = videoRef.current;
+    if (!el) return;
+    el.muted = !el.muted;
+    setMuted(el.muted);
+  }, []);
+
+  const toggleFullscreen = useCallback(() => {
+    const stage =
+      (typeof HTMLElement !== "undefined" && stageRef.current instanceof HTMLElement
+        ? stageRef.current
+        : asVideoElement(stageRef.current)?.parentElement) ?? null;
+    void toggleStageFullscreen(stage)?.catch(() => {});
+  }, []);
+
+  const onStageKeyDown = useCallback(
+    (e: { key?: string; preventDefault?: () => void; target?: EventTarget | null; currentTarget?: EventTarget | null }) => {
+      if (!controls) return;
+      const target = e.target as HTMLElement | null;
+      if (target && target !== e.currentTarget && target.closest?.("[role='slider'], [role='button'], button")) {
+        return;
+      }
+      const el = videoRef.current;
+      if (!el) return;
+      const key = e.key ?? "";
+      if (key === " " || key === "k" || key === "K") {
+        e.preventDefault?.();
+        togglePlay();
+      } else if (key === "ArrowLeft") {
+        e.preventDefault?.();
+        onSeek(Math.max(0, (el.currentTime || 0) - 5));
+      } else if (key === "ArrowRight") {
+        e.preventDefault?.();
+        onSeek(Math.min(el.duration || 0, (el.currentTime || 0) + 5));
+      } else if (key === "m" || key === "M") {
+        e.preventDefault?.();
+        toggleMuted();
+      } else if (key === "f" || key === "F") {
+        e.preventDefault?.();
+        toggleFullscreen();
+      } else if (key === "Home") {
+        e.preventDefault?.();
+        onSeek(0);
+      } else if (key === "End") {
+        e.preventDefault?.();
+        onSeek(el.duration || 0);
+      }
+    },
+    [controls, onSeek, toggleFullscreen, toggleMuted, togglePlay],
+  );
+
+  const mediaStage = src ? (
+    <YStack
+      ref={stageRef as never}
+      position="relative"
+      overflow="hidden"
+      width="100%"
+      aspectRatio={16 / 9}
+      {...knobProps.cardSurface}
+      padding={0}
+      cursor={controls ? "pointer" : undefined}
+      role={controls ? "region" : undefined}
+      aria-label={title ?? t("Video player")}
+      tabIndex={controls ? 0 : undefined}
+      {...({
+        onKeyDown: onStageKeyDown,
+        onPointerMove: controls ? bumpChrome : undefined,
+      } as Record<string, unknown>)}
+      onPress={controls ? togglePlay : undefined}
+    >
+      <YStack
+        render="video"
+        ref={(node: unknown) => {
+          videoRef.current = asVideoElement(node);
+        }}
+        // @ts-expect-error HTML video attributes via render prop
+        src={src}
+        autoPlay={autoPlay}
+        playsInline
+        muted={muted}
+        loop={loop}
+        poster={poster}
+        preload="metadata"
+        aria-label={title}
+        width="100%"
+        height="100%"
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "block",
+          objectFit: "contain",
+        }}
+      />
+      {controls ? (
+        <PlayerChrome
+          playing={playing}
+          currentTime={currentTime}
+          duration={duration}
           muted={muted}
-          controls={controls}
-          loop={loop}
-          poster={poster}
-          aria-label={title}
-          style={{
-            width: "100%",
-            display: "block",
-            borderRadius: knobProps.borderRadius.borderRadius,
-          }}
+          fullscreen={fullscreen}
+          visible={chromeVisible}
+          onTogglePlay={togglePlay}
+          onSeek={onSeek}
+          onToggleMuted={toggleMuted}
+          onToggleFullscreen={toggleFullscreen}
+          onHoverChange={setHovering}
+          onFocusChange={setFocused}
+          onSeekingChange={setSeeking}
         />
       ) : null}
+    </YStack>
+  ) : (
+    <YStack
+      overflow="hidden"
+      width="100%"
+      aspectRatio={16 / 9}
+      {...knobProps.cardSurface}
+      justifyContent="center"
+      alignItems="center"
+    />
+  );
+
+  return (
+    <VideoFrame
+      render="figure"
+      marginHorizontal={0}
+      marginVertical={knobProps.gapLg.gap}
+      {...knobProps.gap}
+      {...props}
+    >
+      {mediaStage}
       {children != null ? <VideoCaption>{children}</VideoCaption> : null}
     </VideoFrame>
   );

package/src/Video/types.ts

@@ -9,9 +9,15 @@ export interface VideoProps extends Omit<GetProps<typeof VideoFrame>, "children"
   children?: ReactNode;
   muted?: boolean;
   autoPlay?: boolean;
-  controls?: boolean;
   loop?: boolean;
   poster?: string;
+  /**
+   * Custom overlay chrome (web) / native system chrome. Off = raw media,
+   * no transport (muted-loop embeds).
+   */
+  controls?: boolean;
   /** Accessible title / aria-label for the player. */
   title?: string;
+  /** Compact density: steps size/space down one level. */
+  compact?: boolean;
 }

package/src/Wheel/Wheel.spec.tsx

@@ -1,6 +1,7 @@
-import { cleanup, screen } from "@testing-library/react";
+import { act, cleanup, fireEvent, screen } from "@testing-library/react";
+import { Preset } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { Wheel } from "./index";
 
 afterEach(cleanup);
@@ -28,3 +29,217 @@ describe("Wheel contrast contract", () => {
     expect(getComputedStyle(wheel).opacity).toBe("1");
   });
 });
+
+// ── LC-68 MOTION-RIDES-KNOB ───────────────────────────────────
+// Discrete snaps (keyboard) gate on knobProps.transition: undefined at
+// animation "none" (which also carries prefers-reduced-motion) means snap
+// duration 0 — the wheel JUMPS, no rAF tween. With motion on, the same snap
+// tweens across frames (positive control proving the probe measures motion,
+// not just the end state). A `|| "quick"` fallback re-enabling the tween at
+// none is the violation this locks out.
+describe("Wheel snaps ride the animation knob (LC-68)", () => {
+  const items = [10, 20, 30, 40, 50];
+
+  function rowTransform(index: number): string {
+    const row = screen
+      .getByTestId("wheel")
+      .querySelector(`[data-testid="wheel-item"][data-index="${index}"]`) as HTMLElement | null;
+    return row?.style.transform ?? "(virtualized out)";
+  }
+
+  function wheelSnapshot(): string {
+    return items.map((_, index) => rowTransform(index)).join(" | ");
+  }
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  function useFrameClock() {
+    vi.useFakeTimers({
+      toFake: [
+        "setTimeout",
+        "clearTimeout",
+        "requestAnimationFrame",
+        "cancelAnimationFrame",
+        "performance",
+      ],
+    });
+  }
+
+  it("jumps instantly on keyboard snap at animation none — settled within one frame", () => {
+    useFrameClock();
+    const onChange = vi.fn();
+    renderWithProviders(
+      <Preset overrides={{ animation: "none" }}>
+        <Wheel items={items} onChange={onChange} visibleItems={5} />
+      </Preset>,
+    );
+    const wrapper = screen.getByTestId("wheel-wrapper");
+
+    fireEvent.keyDown(wrapper, { key: "ArrowDown" });
+
+    // Snap completed synchronously: selection committed, no tween scheduled.
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(20);
+    expect(wrapper.getAttribute("aria-valuenow")).toBe("1");
+
+    // Positions are already settled — 500ms of frames changes nothing.
+    const settled = wheelSnapshot();
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(wheelSnapshot()).toBe(settled);
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("tweens the same snap with motion on (positive control)", () => {
+    useFrameClock();
+    const onChange = vi.fn();
+    renderWithProviders(
+      // Default knobs: animation "quick" — knobProps.transition is defined.
+      <Wheel items={items} onChange={onChange} visibleItems={5} />,
+    );
+    const wrapper = screen.getByTestId("wheel-wrapper");
+
+    fireEvent.keyDown(wrapper, { key: "ArrowDown" });
+
+    // Tween in flight: selection NOT committed yet, positions move per frame.
+    expect(onChange).not.toHaveBeenCalled();
+    expect(wrapper.getAttribute("aria-valuenow")).toBe("0");
+    const beforeFrames = wheelSnapshot();
+    act(() => {
+      vi.advanceTimersByTime(32);
+    });
+    expect(wheelSnapshot()).not.toBe(beforeFrames);
+    expect(onChange).not.toHaveBeenCalled();
+
+    // Tween completes (quick ≈ 100ms) and commits exactly one change.
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(20);
+    expect(wrapper.getAttribute("aria-valuenow")).toBe("1");
+  });
+
+  function flick(wrapper: HTMLElement) {
+    fireEvent.pointerDown(wrapper, { clientY: 300, pointerId: 1 });
+    act(() => {
+      vi.advanceTimersByTime(16);
+    });
+    fireEvent.pointerMove(wrapper, { clientY: 80, pointerId: 1 });
+    fireEvent.pointerUp(wrapper, { clientY: 80, pointerId: 1 });
+  }
+
+  it("skips momentum coast at animation none — flick snaps in the same turn", () => {
+    useFrameClock();
+    const onChange = vi.fn();
+    renderWithProviders(
+      <Preset overrides={{ animation: "none" }}>
+        <Wheel items={items} onChange={onChange} visibleItems={5} />
+      </Preset>,
+    );
+    const wrapper = screen.getByTestId("wheel-wrapper");
+    flick(wrapper);
+
+    // No rAF coast: selection committed before any frames.
+    expect(onChange).toHaveBeenCalled();
+    const settled = wheelSnapshot();
+    const calls = onChange.mock.calls.length;
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(wheelSnapshot()).toBe(settled);
+    expect(onChange).toHaveBeenCalledTimes(calls);
+  });
+
+  it("coasts after a flick with motion on (positive control)", () => {
+    useFrameClock();
+    const onChange = vi.fn();
+    renderWithProviders(<Wheel items={items} onChange={onChange} visibleItems={5} />);
+    const wrapper = screen.getByTestId("wheel-wrapper");
+    flick(wrapper);
+
+    expect(onChange).not.toHaveBeenCalled();
+    const beforeFrames = wheelSnapshot();
+    act(() => {
+      vi.advanceTimersByTime(48);
+    });
+    expect(wheelSnapshot()).not.toBe(beforeFrames);
+    expect(onChange).not.toHaveBeenCalled();
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+    expect(onChange).toHaveBeenCalled();
+  });
+});
+
+describe("Wheel iOS picker contract", () => {
+  it("paints the selection band as a fill with no hairline borders (LC-71)", () => {
+    renderWithProviders(
+      <Wheel items={[1, 2, 3, 4, 5]} value={3} onChange={() => {}} visibleItems={5} />,
+    );
+    const band = screen.getByTestId("wheel-selection");
+    const style = getComputedStyle(band);
+    expect(style.borderTopWidth === "0px" || style.borderTopWidth === "").toBe(true);
+    expect(style.borderBottomWidth === "0px" || style.borderBottomWidth === "").toBe(true);
+  });
+
+  it("seats the selected row in the highlight band", () => {
+    renderWithProviders(
+      <Wheel
+        items={[1, 2, 3, 4, 5, 6, 7]}
+        value={4}
+        onChange={() => {}}
+        visibleItems={5}
+        itemHeight={36}
+      />,
+    );
+    const selected = screen
+      .getByTestId("wheel")
+      .querySelector('[data-testid="wheel-item"][data-selected="true"]') as HTMLElement;
+    expect(selected).toBeTruthy();
+    const translateY = Number(
+      /translateY\(([-\d.]+)px\)/.exec(selected.style.transform)?.[1] ?? NaN,
+    );
+    expect(translateY).toBeCloseTo(2 * 36, 1);
+  });
+
+  it("keeps duplicate values as distinct rows", () => {
+    renderWithProviders(<Wheel items={[1, 1, 2]} value={2} onChange={() => {}} visibleItems={5} />);
+    const rows = screen.getByTestId("wheel").querySelectorAll('[data-testid="wheel-item"]');
+    expect(rows.length).toBeGreaterThanOrEqual(3);
+  });
+
+  it("taps a visible row to snap it to center", () => {
+    vi.useFakeTimers({
+      toFake: [
+        "setTimeout",
+        "clearTimeout",
+        "requestAnimationFrame",
+        "cancelAnimationFrame",
+        "performance",
+      ],
+    });
+    const onChange = vi.fn();
+    renderWithProviders(
+      <Wheel items={[10, 20, 30, 40, 50]} value={10} onChange={onChange} visibleItems={5} />,
+    );
+    const wrapper = screen.getByTestId("wheel-wrapper");
+    const row = wrapper.querySelector(
+      '[data-testid="wheel-item"][data-index="1"]',
+    ) as HTMLElement | null;
+    expect(row).toBeTruthy();
+    const translateY = Number(/translateY\(([-\d.]+)px\)/.exec(row!.style.transform)?.[1] ?? 0);
+    const rowHeight = Number.parseFloat(row!.style.height) || 32;
+    const tapY = translateY + rowHeight / 2;
+    fireEvent.pointerDown(wrapper, { clientY: tapY, pointerId: 1 });
+    fireEvent.pointerUp(wrapper, { clientY: tapY, pointerId: 1 });
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(onChange).toHaveBeenCalledWith(20);
+    vi.useRealTimers();
+  });
+});