]*class="room-code-entry is-inline"/,
+ );
+ const row = open.match(/([\s\S]*?)<\/div>/)?.[1];
+ expect(row).toContain("开始分享");
+ expect(row).toContain("加入房间");
+ expect(row).not.toContain('class="room-code-entry');
+ expect(row).not.toContain(" {
+ const css = readFileSync(
+ join(import.meta.dirname, "../src/client/styles.css"),
+ "utf8",
+ );
+ expect(css).toMatch(
+ /\.entry-actions\s*\{[\s\S]*?grid-template-columns:\s*minmax\(0, 1fr\) 24px minmax\(0, 1fr\);[\s\S]*?width:\s*min\(520px, calc\(100% - 20px\)\);/,
+ );
+ expect(css).toMatch(
+ /\.entry-action\s*\{[\s\S]*?min-height:\s*44px;/,
+ );
+ expect(css).toMatch(
+ /\.room-code-entry\.is-inline\s*\{[\s\S]*?width:\s*min\(520px, calc\(100% - 20px\)\);[\s\S]*?grid-template-columns:\s*minmax\(0, 1fr\) 44px;/,
+ );
+ });
+});
diff --git a/tests/video-frame-proof.test.ts b/tests/video-frame-proof.test.ts
new file mode 100644
index 0000000..a6bf2ae
--- /dev/null
+++ b/tests/video-frame-proof.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from "vitest";
+
+import {
+ isAutoplayPolicyRejection,
+ observeCompositedVideoFrame,
+} from "../src/client/media/video-frame-proof.ts";
+
+interface FakeVideo extends EventTarget {
+ srcObject: MediaStream | null;
+ readyState: number;
+ currentTime: number;
+ decodedFrames: number;
+ getVideoPlaybackQuality: () => { totalVideoFrames: number };
+ requestVideoFrameCallback?: (callback: () => void) => number;
+ cancelVideoFrameCallback?: (handle: number) => void;
+}
+
+function fakeVideo(stream: MediaStream): FakeVideo {
+ const video = new EventTarget() as FakeVideo;
+ video.srcObject = stream;
+ video.readyState = 0;
+ video.currentTime = 0;
+ video.decodedFrames = 0;
+ video.getVideoPlaybackQuality = () => ({
+ totalVideoFrames: video.decodedFrames,
+ });
+ return video;
+}
+
+describe("composited video frame proof", () => {
+ it("recognizes only browser autoplay policy rejection", () => {
+ expect(isAutoplayPolicyRejection({ name: "NotAllowedError" })).toBe(true);
+ expect(isAutoplayPolicyRejection({ name: "AbortError" })).toBe(false);
+ expect(isAutoplayPolicyRejection(new Error("not allowed"))).toBe(false);
+ });
+
+ it("binds requestVideoFrameCallback proof to the expected srcObject", () => {
+ const stream = {} as MediaStream;
+ const replacement = {} as MediaStream;
+ const video = fakeVideo(stream);
+ let callback: (() => void) | null = null;
+ video.requestVideoFrameCallback = (next) => {
+ callback = next;
+ return 7;
+ };
+ video.cancelVideoFrameCallback = vi.fn();
+ const onFrame = vi.fn();
+ const cancel = observeCompositedVideoFrame(
+ video as unknown as HTMLVideoElement,
+ stream,
+ onFrame,
+ );
+
+ video.readyState = 2;
+ video.srcObject = replacement;
+ callback!();
+ expect(onFrame).not.toHaveBeenCalled();
+
+ cancel();
+ expect(video.cancelVideoFrameCallback).toHaveBeenCalledWith(7);
+ });
+
+ it("uses decoded progress plus readiness in the event fallback", () => {
+ const stream = {} as MediaStream;
+ const video = fakeVideo(stream);
+ const onFrame = vi.fn();
+ const cancel = observeCompositedVideoFrame(
+ video as unknown as HTMLVideoElement,
+ stream,
+ onFrame,
+ );
+
+ video.readyState = 2;
+ video.dispatchEvent(new Event("playing"));
+ expect(onFrame).not.toHaveBeenCalled();
+
+ video.decodedFrames = 1;
+ video.dispatchEvent(new Event("timeupdate"));
+ expect(onFrame).toHaveBeenCalledOnce();
+
+ video.decodedFrames = 2;
+ video.dispatchEvent(new Event("timeupdate"));
+ expect(onFrame).toHaveBeenCalledOnce();
+ cancel();
+ });
+});
diff --git a/tests/viewer-presentation.test.ts b/tests/viewer-presentation.test.ts
new file mode 100644
index 0000000..52253d3
--- /dev/null
+++ b/tests/viewer-presentation.test.ts
@@ -0,0 +1,204 @@
+import { describe, expect, it } from "vitest";
+
+import {
+ INITIAL_VIEWER_PRESENTATION_STATE,
+ deriveViewerPresentation,
+ reduceViewerPresentation,
+ type ViewerPresentationAction,
+ type ViewerPresentationState,
+} from "../src/client/media/viewer-presentation.ts";
+
+function apply(
+ ...actions: readonly ViewerPresentationAction[]
+): ViewerPresentationState {
+ return actions.reduce(
+ reduceViewerPresentation,
+ INITIAL_VIEWER_PRESENTATION_STATE,
+ );
+}
+
+describe("Viewer presentation reducer", () => {
+ it("derives connection stages from typed current-revision facts", () => {
+ const preparing = apply(
+ { type: "access", access: "ready" },
+ { type: "signal", signal: "connected" },
+ { type: "host", host: "online" },
+ { type: "route", revision: 1, phase: "prepare", kind: "p2p" },
+ );
+ expect(deriveViewerPresentation(preparing)).toMatchObject({
+ stage: "preparing-p2p",
+ message: "正在建立 P2P",
+ overlay: "blocking",
+ showPlay: false,
+ });
+
+ const receiving = reduceViewerPresentation(preparing, {
+ type: "media-bound",
+ generation: 1,
+ revision: 1,
+ });
+ expect(deriveViewerPresentation(receiving).stage).toBe("receiving");
+
+ const playing = reduceViewerPresentation(receiving, {
+ type: "frame-presented",
+ generation: 1,
+ revision: 1,
+ });
+ expect(deriveViewerPresentation(playing)).toMatchObject({
+ stage: "playing",
+ overlay: "none",
+ hasCurrentFrame: true,
+ });
+ });
+
+ it("shows Play only for the exact media generation rejected by autoplay", () => {
+ const blocked = apply(
+ { type: "access", access: "ready" },
+ { type: "host", host: "online" },
+ { type: "route", revision: 2, phase: "active", kind: "sfu" },
+ { type: "media-bound", generation: 4, revision: 2 },
+ { type: "autoplay-blocked", generation: 4, revision: 2 },
+ );
+ expect(deriveViewerPresentation(blocked)).toMatchObject({
+ stage: "needs-play",
+ showPlay: true,
+ failureCode: "AUTOPLAY_BLOCKED",
+ });
+
+ const staleClear = reduceViewerPresentation(blocked, {
+ type: "autoplay-cleared",
+ generation: 3,
+ });
+ expect(deriveViewerPresentation(staleClear).showPlay).toBe(true);
+
+ const cleared = reduceViewerPresentation(blocked, {
+ type: "autoplay-cleared",
+ generation: 4,
+ });
+ expect(deriveViewerPresentation(cleared)).toMatchObject({
+ stage: "receiving",
+ showPlay: false,
+ });
+ });
+
+ it("ignores a late playback failure from a replaced media binding", () => {
+ const rebound = apply(
+ { type: "access", access: "ready" },
+ { type: "host", host: "online" },
+ { type: "route", revision: 2, phase: "active", kind: "sfu" },
+ { type: "media-bound", generation: 1, revision: 2 },
+ { type: "media-bound", generation: 2, revision: 2 },
+ );
+ const staleFailure = reduceViewerPresentation(rebound, {
+ type: "playback-failed",
+ generation: 1,
+ revision: 2,
+ });
+ expect(staleFailure).toBe(rebound);
+ expect(deriveViewerPresentation(staleFailure).stage).toBe("receiving");
+ });
+
+ it("keeps a proven old frame through recovery without accepting stale proof", () => {
+ const oldFrame = apply(
+ { type: "access", access: "ready" },
+ { type: "host", host: "online" },
+ { type: "route", revision: 5, phase: "active", kind: "p2p" },
+ { type: "media-bound", generation: 5, revision: 5 },
+ { type: "frame-presented", generation: 5, revision: 5 },
+ );
+ const recovering = reduceViewerPresentation(oldFrame, {
+ type: "route",
+ revision: 6,
+ phase: "prepare",
+ kind: "sfu",
+ });
+ expect(deriveViewerPresentation(recovering)).toMatchObject({
+ stage: "preparing-sfu",
+ overlay: "status",
+ hasCurrentFrame: false,
+ hasRetainedFrame: true,
+ });
+
+ const staleProof = reduceViewerPresentation(recovering, {
+ type: "frame-presented",
+ generation: 5,
+ revision: 5,
+ });
+ expect(staleProof).toBe(recovering);
+
+ const rebound = reduceViewerPresentation(recovering, {
+ type: "media-bound",
+ generation: 6,
+ revision: 6,
+ });
+ const proven = reduceViewerPresentation(rebound, {
+ type: "frame-presented",
+ generation: 6,
+ revision: 6,
+ });
+ expect(deriveViewerPresentation(proven)).toMatchObject({
+ stage: "playing",
+ hasCurrentFrame: true,
+ hasRetainedFrame: false,
+ });
+ });
+
+ it("keeps healthy media visible while signaling reconnects", () => {
+ const state = apply(
+ { type: "access", access: "ready" },
+ { type: "signal", signal: "connected" },
+ { type: "host", host: "online" },
+ { type: "route", revision: 0, phase: "active", kind: "p2p" },
+ { type: "media-bound", generation: 1, revision: 0 },
+ { type: "frame-presented", generation: 1, revision: 0 },
+ { type: "signal", signal: "reconnecting" },
+ );
+ expect(deriveViewerPresentation(state)).toMatchObject({
+ stage: "recovering",
+ overlay: "none",
+ notice: "信令正在恢复，画面仍在播放",
+ });
+ });
+
+ it("honors terminal access, Host pause, and typed route status priority", () => {
+ const paused = apply(
+ { type: "access", access: "ready" },
+ { type: "host", host: "paused" },
+ { type: "route", revision: 3, phase: "active", kind: "sfu" },
+ { type: "media-bound", generation: 1, revision: 3 },
+ { type: "autoplay-blocked", generation: 1, revision: 3 },
+ );
+ expect(deriveViewerPresentation(paused)).toMatchObject({
+ stage: "host-paused",
+ showPlay: false,
+ });
+
+ const waiting = apply(
+ { type: "access", access: "ready" },
+ { type: "host", host: "online" },
+ { type: "route-status", revision: 4, state: "waiting" },
+ );
+ expect(deriveViewerPresentation(waiting).stage).toBe("waiting-sfu");
+
+ const failed = reduceViewerPresentation(waiting, {
+ type: "route-status",
+ revision: 4,
+ state: "failed",
+ });
+ expect(deriveViewerPresentation(failed)).toMatchObject({
+ stage: "route-failed",
+ failureCode: "ROUTE_EXHAUSTED",
+ });
+
+ const denied = reduceViewerPresentation(failed, {
+ type: "access",
+ access: "denied",
+ failure: "ROOM_ACCESS_DENIED",
+ });
+ expect(deriveViewerPresentation(denied)).toMatchObject({
+ stage: "access-denied",
+ message: "当前无法通过房间号加入",
+ retryAvailable: false,
+ });
+ });
+});