@limrun/ui 0.16.0 → 0.17.0-rc.1

package/src/components/duo-view.test.tsx

@@ -0,0 +1,104 @@
+import React, { act, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, expect, it, vi } from 'vitest';
+import DuoView from './duo-view';
+import type { DuoFrameProps } from './duo-frame';
+
+const renderer = vi.hoisted(() => ({ loaded: vi.fn(), released: vi.fn() }));
+vi.mock('./duo-frame', () => {
+  renderer.loaded();
+  return {
+    default: function Frame() {
+      useEffect(() => () => renderer.released(), []);
+      return <canvas />;
+    },
+  };
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+it('starts without a renderer, loads it on request and releases it when returning to native video', async () => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe() {}
+      disconnect() {}
+    },
+  );
+  vi.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue(undefined);
+  vi.spyOn(HTMLMediaElement.prototype, 'pause').mockImplementation(() => undefined);
+  const outer = document.createElement('video');
+  const inner = document.createElement('video');
+  outer.srcObject = {} as MediaStream;
+  inner.srcObject = {} as MediaStream;
+  const props: DuoFrameProps = {
+    outer,
+    inner,
+    state: {
+      angleDegrees: 0,
+      minAngleDegrees: 0,
+      maxAngleDegrees: 180,
+      orientation: 'portrait',
+      displays: [
+        { id: 'outer', screenId: 1, trackId: 'outer', width: 1398, height: 2034, scale: 3, orientation: 1 },
+        { id: 'inner', screenId: 2, trackId: 'inner', width: 2034, height: 2912, scale: 3, orientation: 3 },
+      ],
+    },
+    setAngle: vi.fn().mockResolvedValue(undefined),
+    setOrientation: vi.fn().mockResolvedValue(undefined),
+    button: vi.fn().mockResolvedValue(undefined),
+    touch: vi.fn(),
+    onKeyDown: vi.fn(),
+    onKeyUp: vi.fn(),
+  };
+  const host = document.createElement('div');
+  const root = createRoot(host);
+  const clickMode = async (label: string) => {
+    await act(async () => {
+      [...host.querySelectorAll('.rc-duo-mode button')]
+        .find((b) => b.textContent === label)!
+        .dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+  };
+  try {
+    await act(async () => root.render(<DuoView {...props} />));
+    expect(renderer.loaded).not.toHaveBeenCalled();
+    expect(host.querySelector('canvas')).toBeNull();
+    expect(host.querySelector('.rc-duo-flat-frame')).not.toBeNull();
+    expect(host.querySelectorAll('.rc-duo-physical')).toHaveLength(3);
+    expect(host.querySelectorAll('.rc-duo-hardware')).toHaveLength(3);
+    expect(host.querySelector('[aria-label="Rotate device"]')).not.toBeNull();
+    expect(host.querySelector('input[type=range]')).not.toBeNull();
+    expect(host.querySelector('video')!.srcObject).toBe(outer.srcObject);
+    const press = async (selector: string, type: string) => {
+      await act(async () => {
+        host.querySelector(selector)!.dispatchEvent(new KeyboardEvent(type, { key: 'Enter', bubbles: true }));
+      });
+    };
+    await press('.rc-duo-physical[data-duo-button=side]', 'keydown');
+    await press('.rc-duo-physical[data-duo-button=side]', 'keyup');
+    await press('.rc-duo-hardware[data-duo-button=volumeUp]', 'keydown');
+    await press('.rc-duo-hardware[data-duo-button=volumeUp]', 'keyup');
+    expect(props.button).toHaveBeenNthCalledWith(1, 'side', true);
+    expect(props.button).toHaveBeenNthCalledWith(2, 'side', false);
+    expect(props.button).toHaveBeenNthCalledWith(3, 'volumeUp', true);
+    expect(props.button).toHaveBeenNthCalledWith(4, 'volumeUp', false);
+    await press('.rc-duo-hardware[data-duo-button=volumeDown]', 'keydown');
+    await clickMode('3D');
+    expect(props.button).toHaveBeenLastCalledWith('volumeDown', false);
+    expect(renderer.loaded).toHaveBeenCalledOnce();
+    expect(host.querySelector('canvas')).not.toBeNull();
+    await clickMode('2D');
+    expect(renderer.released).toHaveBeenCalledOnce();
+    expect(host.querySelector('canvas')).toBeNull();
+    expect(host.querySelector('video')!.srcObject).toBe(outer.srcObject);
+    expect(props.setAngle).not.toHaveBeenCalled();
+    await act(async () => root.render(<DuoView {...props} state={{ ...props.state, angleDegrees: 180 }} />));
+    expect(host.querySelector('video')!.srcObject).toBe(inner.srcObject);
+  } finally {
+    await act(async () => root.unmount());
+  }
+});

package/src/components/duo-view.tsx

@@ -0,0 +1,315 @@
+import React, { lazy, Suspense, useEffect, useRef, useState } from 'react';
+import { DUO_BUTTONS, DuoButtonSender, flatDisplayTouch, type DuoButton } from '../core/duo';
+import type { DuoFrameProps } from './duo-frame';
+import { DuoControls, DuoHardwareIcon, useDuoHinge } from './duo-controls';
+import { DuoFlatFrame } from './duo-flat-frame';
+import { flatFrameGeometry, flatHoverEdge } from './duo-flat-geometry';
+import { DuoFoldMotion, useDuoFoldMotion } from './duo-fold-motion';
+
+const DuoFrame = lazy(() => import('./duo-frame'));
+
+/** Native video is the default; only an explicit 3D selection loads the renderer and body asset. */
+export default function DuoView(props: DuoFrameProps) {
+  const [mode, setMode] = useState<'2d' | '3d'>('2d');
+  return (
+    <div className="rc-duo-view">
+      {mode === '3d' ?
+        <Suspense fallback={<DuoFlat {...props} />}>
+          <DuoFrame {...props} />
+        </Suspense>
+      : <DuoFlat {...props} />}
+      <div className="rc-duo-mode" role="group" aria-label="Device rendering">
+        <button type="button" aria-pressed={mode === '2d'} onClick={() => setMode('2d')}>
+          2D
+        </button>
+        <button type="button" aria-pressed={mode === '3d'} onClick={() => setMode('3d')}>
+          3D
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function DuoFlat(props: DuoFrameProps) {
+  const stage = useRef<HTMLDivElement>(null);
+  const video = useRef<HTMLVideoElement>(null);
+  const latest = useRef(props);
+  latest.current = props;
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [error, setError] = useState<string>();
+  const [edge, setEdge] = useState<ReturnType<typeof flatHoverEdge>>();
+  const [hovered, setHovered] = useState<DuoButton>();
+  const [pressed, setPressed] = useState<DuoButton>();
+  const held = useRef<{ pointer: number; screenId: number; x: number; y: number } | undefined>(undefined);
+  const hardware = useRef<DuoButtonSender | null>(null);
+  const display = props.state.displays.find(
+    (d) => d.id === (props.state.angleDegrees < 90 ? 'outer' : 'inner'),
+  );
+  const source = display?.id === 'inner' ? props.inner : props.outer;
+  const turns =
+    display?.orientation === 2 ? 2
+    : display?.orientation === 3 ? 1
+    : display?.orientation === 4 ? 3
+    : 0;
+  const inner = display?.id === 'inner';
+  const frame = flatFrameGeometry(inner, turns, size.width, size.height);
+  const { bodyWidth, bodyHeight, screenWidth, screenHeight, scale } = frame;
+  const width = screenWidth * scale;
+  const height = screenHeight * scale;
+
+  useEffect(() => {
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) setSize({ width: entry.contentRect.width, height: entry.contentRect.height });
+    });
+    if (stage.current) observer.observe(stage.current);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const target = video.current;
+    if (!target || !source) return;
+    const sync = () => {
+      if (target.srcObject !== source.srcObject) target.srcObject = source.srcObject;
+      void target.play().catch(() => undefined);
+      props.outer?.pause();
+      props.inner?.pause();
+    };
+    sync();
+    source.addEventListener('loadedmetadata', sync);
+    return () => {
+      source.removeEventListener('loadedmetadata', sync);
+      target.pause();
+      target.srcObject = null;
+      for (const original of [props.outer, props.inner]) void original?.play().catch(() => undefined);
+    };
+  }, [source, props.outer, props.inner]);
+
+  const {
+    motion,
+    finish: finishMotion,
+    prepare,
+  } = useDuoFoldMotion(video, inner, frame, props.state.orientation);
+  const { angle, changeAngle, interacting } = useDuoHinge(
+    props.state.angleDegrees,
+    async (value) => {
+      prepare(value >= 90);
+      try {
+        await props.setAngle(value);
+      } catch (reason) {
+        finishMotion();
+        throw reason;
+      }
+    },
+    setError,
+  );
+
+  const releaseTouch = () => {
+    if (!held.current) return;
+    const { screenId, x, y } = held.current;
+    latest.current.touch(1, screenId, x, y);
+    held.current = undefined;
+  };
+  useEffect(() => {
+    hardware.current = new DuoButtonSender(
+      (button, down) => latest.current.button(button, down),
+      (e) => setError(String(e)),
+    );
+    const release = () => {
+      releaseTouch();
+      hardware.current?.release();
+      setPressed(undefined);
+    };
+    window.addEventListener('blur', release);
+    return () => {
+      release();
+      window.removeEventListener('blur', release);
+    };
+  }, []);
+  useEffect(() => {
+    releaseTouch();
+  }, [display?.screenId, turns]);
+
+  const releaseButton = () => {
+    hardware.current?.release();
+    setPressed(undefined);
+  };
+  const buttonEvents = (button: DuoButton): React.ButtonHTMLAttributes<HTMLButtonElement> => ({
+    onPointerDown: (event) => {
+      if (motion || event.button !== 0) return;
+      event.currentTarget.setPointerCapture(event.pointerId);
+      hardware.current?.press(button);
+      setPressed(button);
+    },
+    onPointerUp: releaseButton,
+    onPointerCancel: releaseButton,
+    onLostPointerCapture: releaseButton,
+    onBlur: releaseButton,
+    onPointerEnter: () => setHovered(button),
+    onPointerLeave: () => setHovered(undefined),
+    onFocus: () => setEdge(frame.guides.find((g) => g.button === button)?.edge),
+    onKeyDown: (event) => {
+      if (motion) return;
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        if (!event.repeat) {
+          hardware.current?.press(button);
+          setPressed(button);
+        }
+      }
+    },
+    onKeyUp: (event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        releaseButton();
+      }
+    },
+  });
+  const point = (event: React.PointerEvent<HTMLDivElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return flatDisplayTouch(
+      (event.clientX - rect.left) / rect.width,
+      (event.clientY - rect.top) / rect.height,
+      turns,
+    );
+  };
+  return (
+    <div className="rc-duo">
+      <div
+        ref={stage}
+        className="rc-duo-flat-stage"
+        data-folding={!!motion}
+        aria-busy={!!motion}
+        onPointerMove={(event) => {
+          const rect = event.currentTarget.getBoundingClientRect();
+          setEdge(flatHoverEdge(event.clientX - rect.left, event.clientY - rect.top, frame.rect));
+        }}
+        onPointerLeave={() => {
+          setEdge(undefined);
+          setHovered(undefined);
+        }}
+      >
+        <div
+          className="rc-duo-flat-device"
+          data-display={inner ? 'inner' : 'outer'}
+          style={{
+            width: bodyWidth * scale,
+            height: bodyHeight * scale,
+            transform: 'translate(-50%, -50%) rotate(' + frame.turns * 90 + 'deg)',
+          }}
+        >
+          <DuoFlatFrame inner={inner} width={bodyWidth} height={bodyHeight} />
+          <div
+            className="rc-duo-flat-screen"
+            role="application"
+            aria-label="iPhone Duo 2D simulator"
+            tabIndex={0}
+            style={{
+              width,
+              height,
+              left: ((bodyWidth - screenWidth) / 2) * scale,
+              top: ((bodyHeight - screenHeight) / 2) * scale,
+              borderRadius: inner ? 5.3 * scale : [0.8, 6.6, 6.6, 0.8].map((r) => r * scale + 'px').join(' '),
+            }}
+            onKeyDown={motion ? undefined : props.onKeyDown}
+            onKeyUp={props.onKeyUp}
+            onPointerDown={(event) => {
+              if (motion || held.current || event.button !== 0 || !display) return;
+              event.currentTarget.focus({ preventScroll: true });
+              event.currentTarget.setPointerCapture(event.pointerId);
+              const p = point(event);
+              held.current = { pointer: event.pointerId, screenId: display.screenId, ...p };
+              props.touch(0, display.screenId, p.x, p.y);
+            }}
+            onPointerMove={(event) => {
+              if (held.current?.pointer !== event.pointerId) return;
+              const p = point(event);
+              Object.assign(held.current, p);
+              props.touch(2, held.current.screenId, p.x, p.y);
+            }}
+            onPointerUp={(event) => {
+              if (held.current?.pointer === event.pointerId) releaseTouch();
+            }}
+            onPointerCancel={releaseTouch}
+            onLostPointerCapture={releaseTouch}
+          >
+            <video
+              ref={video}
+              autoPlay
+              muted
+              playsInline
+              style={{
+                width: inner ? height : width,
+                height: inner ? width : height,
+                transform: 'translate(-50%, -50%) rotate(' + (inner ? 90 : 0) + 'deg)',
+              }}
+            />
+          </div>
+          {frame.buttons.map((b) => (
+            <button
+              key={b.button}
+              type="button"
+              className="rc-duo-physical"
+              data-duo-button={b.button}
+              data-edge={b.edge}
+              data-highlighted={hovered === b.button}
+              data-pressed={pressed === b.button}
+              aria-label={DUO_BUTTONS[b.button] + ' physical button'}
+              title={DUO_BUTTONS[b.button]}
+              style={{
+                left: b.x * scale,
+                top: b.y * scale,
+                width: b.edge === 'top' ? Math.max(28, b.width * scale) : 28,
+                height: b.edge === 'top' ? 28 : Math.max(28, b.height * scale),
+              }}
+              {...buttonEvents(b.button)}
+            >
+              <span style={{ width: Math.max(2, b.width * scale), height: Math.max(2, b.height * scale) }} />
+            </button>
+          ))}
+        </div>
+        {frame.guides.map((g) => (
+          <button
+            key={g.button}
+            type="button"
+            className="rc-duo-hardware"
+            data-duo-button={g.button}
+            data-visible={edge === g.edge}
+            data-pressed={pressed === g.button}
+            aria-label={DUO_BUTTONS[g.button]}
+            title={DUO_BUTTONS[g.button]}
+            style={
+              {
+                left: g.targetX,
+                top: g.targetY,
+                '--duo-hardware-icon-size': `${frame.iconSize}px`,
+                '--duo-hardware-icon-x': `${g.x - g.targetX}px`,
+                '--duo-hardware-icon-y': `${g.y - g.targetY}px`,
+              } as React.CSSProperties
+            }
+            {...buttonEvents(g.button)}
+          >
+            <DuoHardwareIcon button={g.button} />
+          </button>
+        ))}
+        {motion && <DuoFoldMotion motion={motion} onFinish={finishMotion} />}
+      </div>
+      <DuoControls
+        angle={angle}
+        changeAngle={changeAngle}
+        interacting={interacting}
+        rotate={() => {
+          void props
+            .setOrientation(props.state.orientation === 'portrait' ? 'landscape-left' : 'portrait')
+            .catch((e) => setError(String(e)));
+        }}
+      >
+        <span className="rc-duo-view-label">Front view</span>
+      </DuoControls>
+      {error && (
+        <div role="alert" className="rc-duo-error">
+          {error}
+        </div>
+      )}
+    </div>
+  );
+}