@flamingo-stack/openframe-frontend-core 0.0.674 → 0.0.675-2435.7306.1

package/src/components/features/__tests__/walkthrough-video-autoplay-card.test.tsx

@@ -0,0 +1,89 @@
+/**
+ * `autoPlayCard` on the inline walkthrough card: the card mounts its player in
+ * resume mode from 0, muted and autoplaying, instead of waiting for a hover.
+ */
+import { render, screen, waitFor } from '@testing-library/react';
+import type { Ref } from 'react';
+import { useImperativeHandle, useRef } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { InlineWalkthroughVideo } from '../walkthrough-video';
+
+interface Construction {
+  role: string;
+  startTime: number | undefined;
+  autoPlay: boolean | undefined;
+  startMuted: boolean | undefined;
+}
+
+const constructions: Construction[] = [];
+
+vi.mock('../video', () => {
+  const FakeVideo = (props: Record<string, unknown>) => {
+    const role =
+      props.layout === 'wide'
+        ? 'theater'
+        : props.firstFrameOnly
+          ? 'facade'
+          : props.startTime !== undefined
+            ? 'resume'
+            : 'preview';
+    const first = useRef(true);
+    if (first.current) {
+      first.current = false;
+      if (role !== 'facade') {
+        constructions.push({
+          role,
+          startTime: props.startTime as number | undefined,
+          autoPlay: props.autoPlay as boolean | undefined,
+          startMuted: props.startMuted as boolean | undefined,
+        });
+      }
+    }
+    useImperativeHandle(
+      props.playerHandleRef as Ref<unknown>,
+      () => ({
+        getCurrentTime: () => 0,
+        getDuration: () => 600,
+        getPaused: () => false,
+        getMuted: () => true,
+        play: () => Promise.resolve(),
+        pause: () => {},
+        setMuted: () => {},
+      }),
+      [],
+    );
+    return <div data-role={role} />;
+  };
+  return { Video: FakeVideo };
+});
+
+const FILE_VIDEO = { id: 'v1', mainVideoUrl: 'https://example.com/a.m3u8', posterUrl: null, title: 'Demo' };
+const YOUTUBE_VIDEO = { id: 'v2', youtubeUrl: 'https://youtu.be/dQw4w9WgXcQ', posterUrl: null, title: 'Demo' };
+
+describe('walkthrough-video: autoPlayCard', () => {
+  beforeEach(() => {
+    constructions.length = 0;
+  });
+
+  // The card appears after the mount gate (an effect), so every assertion waits
+  // for it: `findByRole` is what tells "not yet" apart from "never".
+  it('mounts the card player in resume mode: from 0, muted, autoplaying', async () => {
+    render(<InlineWalkthroughVideo video={FILE_VIDEO} autoPlayCard />);
+    await waitFor(() =>
+      expect(constructions).toEqual([{ role: 'resume', startTime: 0, autoPlay: true, startMuted: true }]),
+    );
+  });
+
+  it('without it the card waits for a hover', async () => {
+    render(<InlineWalkthroughVideo video={FILE_VIDEO} />);
+    await screen.findByRole('button', { name: /Play Demo Video/ });
+    expect(constructions.filter(c => c.role === 'resume')).toEqual([]);
+  });
+
+  it('a YouTube card never plays inline', async () => {
+    render(<InlineWalkthroughVideo video={YOUTUBE_VIDEO} autoPlayCard />);
+    await screen.findByRole('button', { name: /Play Demo Video/ });
+    expect(constructions.filter(c => c.role === 'resume')).toEqual([]);
+  });
+});

package/src/components/features/walkthrough-video.tsx

@@ -129,6 +129,12 @@ interface WalkthroughVideoBaseProps {
    *  SSR-safe: the server renders closed, and the theater lives in a portal,
    *  so the hydrated (non-portal) markup is identical either way. */
   deepLinkParam?: string;
+  /** Start the card playing on mount, muted, with the unmute glyph up — the
+   *  muted-autoplay pattern, for a page whose point IS the clip (an onboarding
+   *  hero). The card behaves as after a muted theater close: the clip runs in
+   *  the card, a click opens the theater from the current time. File videos
+   *  only; a YouTube card never plays inline. */
+  autoPlayCard?: boolean;
   label?: string;
   className?: string;
 }
@@ -199,6 +205,7 @@ function WalkthroughVideo({
   defaultOpen,
   defaultOpenPaused,
   deepLinkParam = WALKTHROUGH_OPEN_QUERY_PARAM,
+  autoPlayCard = false,
   label = 'Play Demo Video',
   placement,
   // Keeps the FLOATING card off the critical path. The inline preset passes 0:
@@ -313,7 +320,11 @@ function WalkthroughVideo({
   const endedLatchRef = useRef(false);
 
   const [hovered, setHovered] = useState(false);
-  const [handoff, setHandoff] = useState<Handoff | null>(null);
+  // `autoPlayCard` seeds the same state a muted theater close leaves behind, so
+  // the card starts in resume mode with nothing else to special-case.
+  const [handoff, setHandoff] = useState<Handoff | null>(() =>
+    autoPlayCard && !video?.youtubeUrl ? { time: 0, muted: true, playing: true } : null,
+  );
   const [suspended, setSuspended] = useState(false);
   const [theaterStart, setTheaterStart] = useState<{ time: number; muted: boolean }>({ time: 0, muted: false });
   const [footerObservation, setFooterObservation] = useState<{ key: string; hidden: boolean } | null>(null);