@flamingo-stack/openframe-frontend-core 0.0.387 → 0.0.388

package/src/components/features/video.tsx

@@ -208,6 +208,19 @@ interface VideoFileProps extends VideoCommonProps {
   srtContent?: string | null;
   /** HTTPS URL to a VTT captions file. Rendered as a native `<track>`. */
   captionsUrl?: string | null;
+  /** Autoplay muted on mount (forwarded as MuxPlayer `autoPlay="muted"`) — hover-preview surfaces. */
+  autoPlay?: boolean;
+  /** Loop playback — short bite previews. */
+  loop?: boolean;
+  /** Hide all player chrome (MuxPlayer `--controls: none`) — chromeless preview mode. */
+  chromeless?: boolean;
+  /** Play while the pointer hovers the player, pause on leave. Tries WITH
+   *  sound at 50% volume first (bite-strip behavior); falls back to muted when
+   *  the browser's autoplay policy rejects unmuted hover playback. */
+  playOnHover?: boolean;
+  /** Hide the bottom control bar, keep only the CENTER play/pause control
+   *  (bite-strip cards per Figma). */
+  centerControlsOnly?: boolean;
 }
 
 interface VideoYouTubeProps extends VideoCommonProps {
@@ -221,6 +234,12 @@ interface VideoAutoProps extends VideoCommonProps {
   url: string;
   srtContent?: string | null;
   captionsUrl?: string | null;
+  /** See VideoFileProps — no-ops when the URL resolves to the YouTube branch. */
+  autoPlay?: boolean;
+  loop?: boolean;
+  chromeless?: boolean;
+  playOnHover?: boolean;
+  centerControlsOnly?: boolean;
 }
 
 export type VideoProps = VideoFileProps | VideoYouTubeProps | VideoAutoProps;
@@ -252,6 +271,11 @@ export function Video(props: VideoProps): React.ReactElement | null {
         muted={props.muted}
         srtContent={'srtContent' in props ? props.srtContent : null}
         captionsUrl={'captionsUrl' in props ? props.captionsUrl : null}
+        autoPlay={'autoPlay' in props ? props.autoPlay : undefined}
+        loop={'loop' in props ? props.loop : undefined}
+        chromeless={'chromeless' in props ? props.chromeless : undefined}
+        playOnHover={'playOnHover' in props ? props.playOnHover : undefined}
+        centerControlsOnly={'centerControlsOnly' in props ? props.centerControlsOnly : undefined}
         className={props.className}
       />
     );
@@ -308,7 +332,7 @@ function wrapWithLayout(
       return <div className="absolute inset-0 w-full h-full">{inner}</div>;
     case 'native':
     default:
-      // `native` callers (LazyBite in `<VideoBitesDisplay>`, blog cards) are
+      // `native` callers (blog cards etc.) are
       // expected to provide their own aspect-ratio container so the layout
       // primitive doesn't override portrait/square/landscape bites with 16:9.
       return inner;
@@ -325,6 +349,11 @@ interface FilePlayerProps {
   muted?: boolean;
   srtContent?: string | null;
   captionsUrl?: string | null;
+  autoPlay?: boolean;
+  loop?: boolean;
+  chromeless?: boolean;
+  playOnHover?: boolean;
+  centerControlsOnly?: boolean;
   className?: string;
 }
 
@@ -334,8 +363,72 @@ function FilePlayer({
   muted,
   srtContent,
   captionsUrl,
+  autoPlay,
+  loop,
+  chromeless,
+  playOnHover,
+  centerControlsOnly,
   className,
 }: FilePlayerProps): React.ReactElement {
+  // centerControlsOnly: the center play button shows at REST only — while
+  // playing, ALL chrome hides (no pause sign over the hover-preview).
+  const [isPlaying, setIsPlaying] = useState(false);
+  // playOnHover drives the underlying mux-player element imperatively — the
+  // element exposes native play()/pause()/muted/volume; the chrome stays as
+  // configured. Sound-first: volume 0.5 unmuted, muted fallback when the
+  // browser's autoplay policy rejects unmuted hover playback (hover is not a
+  // user gesture in Chrome's activation model).
+  const hoverPlayerRef = useRef<{
+    play?: () => Promise<void> | void;
+    pause?: () => void;
+    muted?: boolean;
+    volume?: number;
+  } | null>(null);
+  // Tracks whether the pointer is STILL over the player. A fast hover-out
+  // pauses the in-flight play(), which rejects it with AbortError — that must
+  // NOT trigger the muted retry (it would restart playback after the pointer
+  // left, with no visible control to stop it). Only a genuine autoplay-policy
+  // rejection (NotAllowedError) while still hovered retries muted.
+  const hoverActiveRef = useRef(false);
+  // Per-enter generation token: a LATE NotAllowedError from a previous enter
+  // must not fire the muted fallback into a newer (intended-sound) session.
+  const hoverGenerationRef = useRef(0);
+  const handleHoverEnter = playOnHover
+    ? () => {
+        hoverActiveRef.current = true;
+        const generation = ++hoverGenerationRef.current;
+        const el = hoverPlayerRef.current;
+        if (!el) return;
+        try {
+          el.volume = 0.5;
+          el.muted = false;
+          const attempt = el.play?.();
+          if (attempt && typeof (attempt as Promise<void>).catch === 'function') {
+            (attempt as Promise<void>).catch((err: unknown) => {
+              const name = (err as { name?: string } | null)?.name;
+              if (
+                name === 'NotAllowedError' &&
+                hoverActiveRef.current &&
+                generation === hoverGenerationRef.current
+              ) {
+                try {
+                  el.muted = true;
+                  // Swallow the retry's own rejection too (a hover-out mid-retry
+                  // aborts it — that must not surface as an unhandled rejection).
+                  (el.play?.() as Promise<void> | undefined)?.catch?.(() => {});
+                } catch { /* give up silently */ }
+              }
+            });
+          }
+        } catch { /* ignore */ }
+      }
+    : undefined;
+  const handleHoverLeave = playOnHover
+    ? () => {
+        hoverActiveRef.current = false;
+        try { hoverPlayerRef.current?.pause?.(); } catch { /* already torn down */ }
+      }
+    : undefined;
   // Raw SRT text is unusable without a custom overlay — and we just deleted
   // the 900-LOC custom-controls layer that owned that overlay. Consumers
   // pass `captionsUrl` (the API-side VTT conversion) alongside `srtContent`
@@ -349,8 +442,11 @@ function FilePlayer({
     );
   }
 
-  return (
+  const player = (
     <MuxPlayer
+      ref={hoverPlayerRef as React.Ref<never>}
+      onPlay={centerControlsOnly ? () => setIsPlaying(true) : undefined}
+      onPause={centerControlsOnly ? () => setIsPlaying(false) : undefined}
       src={url}
       poster={poster || undefined}
       streamType="on-demand"
@@ -365,6 +461,8 @@ function FilePlayer({
       // is ever undefined on a `data-app-type` we haven't themed yet.
       // NEVER let Mux pink leak onto a non-Flamingo platform.
       accentColor="var(--ods-accent, var(--color-accent-primary))"
+      autoPlay={autoPlay ? 'muted' : undefined}
+      loop={loop}
       className={className}
       // Fill the wrapping aspect-ratio container instead of MuxPlayer's
       // intrinsic size. Without this, MuxPlayer renders at its default
@@ -373,7 +471,25 @@ function FilePlayer({
       // flickers and grows" CLS we're killing. With `aspect-video` on
       // the centered wrapper and `width/height: 100%` here, the box is
       // 16:9 from first paint and stays put.
-      style={{ width: '100%', height: '100%' }}
+      // `--controls: none` is media-chrome's kill switch for ALL player
+      // chrome — the chromeless preview mode. `--bottom-controls: none`
+      // hides only the bottom bar (center play/pause stays) — the
+      // bite-strip card look per Figma. Merged (never replacing) into the
+      // sizing style; custom properties need the CSSProperties cast.
+      style={{
+        width: '100%',
+        height: '100%',
+        ...(chromeless ? ({ '--controls': 'none' } as React.CSSProperties) : {}),
+        ...(centerControlsOnly && !chromeless
+          ? ({
+              '--bottom-controls': 'none',
+              '--top-controls': 'none',
+              // While playing, hide the center control too — no pause sign
+              // over the hover-preview; it reappears when playback pauses.
+              ...(isPlaying ? { '--center-controls': 'none' } : {}),
+            } as React.CSSProperties)
+          : {}),
+      }}
     >
       {captionsUrl ? (
         <track
@@ -386,6 +502,21 @@ function FilePlayer({
       ) : null}
     </MuxPlayer>
   );
+
+  // MuxPlayerProps has no pointer-event props — the hover-play handlers live
+  // on a full-size wrapper instead (only rendered in playOnHover mode).
+  if (playOnHover) {
+    return (
+      <div
+        className="w-full h-full"
+        onPointerEnter={handleHoverEnter}
+        onPointerLeave={handleHoverLeave}
+      >
+        {player}
+      </div>
+    );
+  }
+  return player;
 }
 
 // -----------------------------------------------------------------------------

package/src/components/onboarding-guides/onboarding-guide-detail-view.tsx

@@ -26,7 +26,8 @@ import { useRouter } from '../../embed-shims'
 import { PageShell } from '../layout/article-detail-layout'
 import { DetailPageSkeleton } from '../shared/detail-page-skeleton'
 import { EntityVideoSection } from '../features/entity-video-section'
-import { VideoBitesDisplay } from '../features/video-bites-display'
+import { VideoBitesStrip } from '../features/video-bites-strip'
+import { toStripProfile } from '../features/video-bites-shared'
 import { useVideoWarmup } from '../features/use-video-warmup'
 import { getCaptionsUrl } from '../features/captions-url'
 import { RichMarkdownRenderer } from '../ui/rich-markdown-renderer'
@@ -208,14 +209,14 @@ export function OnboardingGuideDetailView({
           </div>
         )}
 
-        {/* Video Bites */}
-        {guide.video_bites && guide.video_bites.length > 0 && (
-          <VideoBitesDisplay
-            bites={guide.video_bites as VideoTeaser[]}
-            filterPublished={true}
-            showTitle={false}
-          />
-        )}
+        {/* Video Bites — unified strip; renders nothing when no published bites. */}
+        <VideoBitesStrip
+          bites={(guide.video_bites as VideoTeaser[] | null) ?? []}
+          filterPublished={true}
+          showTitle={false}
+          profile={toStripProfile(guide.author)}
+          href={`/onboarding-guides/${guide.slug}`}
+        />
 
         {/* End-of-article author byline (avatar + linked name + bio) — the
             author DESCRIPTION block every article-shaped detail page renders.

package/src/components/shared/product-release/release-detail-page.tsx

@@ -25,6 +25,11 @@ import { DetailPageSkeleton } from '../detail-page-skeleton';
 import type { ChangelogEntry } from '../../../types/product-release';
 import type { TagAssoc } from '../../../types/blog';
 import type { VideoTeaser } from '../../../types/video-processing';
+import {
+  DEFAULT_VIDEO_BITES_TITLE,
+  toStripProfile,
+  type VideoBiteStripProfile,
+} from '../../features/video-bites-shared';
 
 // Types for injectable components
 export interface MarkdownRendererProps {
@@ -59,12 +64,6 @@ export interface DeliverySectionProps {
   isLoading: boolean;
 }
 
-export interface VideoSectionProps {
-  bites: VideoTeaser[];
-  title?: string;
-  filterPublished?: boolean;
-}
-
 // Type for the useRelease hook result
 export interface UseReleaseResult {
   data: unknown;
@@ -83,6 +82,10 @@ export interface VideoDisplaySectionProps {
   videoBites?: VideoTeaser[];
   bitesTitle?: string;
   filterPublishedBites?: boolean;
+  /** Profile shown in the bites strip's hover overlay (kit sources it from release.author). */
+  bitesProfile?: VideoBiteStripProfile | null;
+  /** Overlay-footer navigation target (the release the bites originated from). */
+  bitesHref?: string;
   srtContent?: string | null;
   captionsUrl?: string | null;
 }
@@ -96,7 +99,6 @@ export interface ReleaseDetailPageProps {
   MarkdownRenderer?: ComponentType<MarkdownRendererProps>;
   RoadmapSection?: ComponentType<RoadmapSectionProps>;
   DeliverySection?: ComponentType<DeliverySectionProps>;
-  VideoSection?: ComponentType<VideoSectionProps>;
   /** Injectable video display section with tabs for full/highlight video + summary + bites */
   VideoDisplaySection?: ComponentType<VideoDisplaySectionProps>;
   // API endpoints for fetching linked tasks
@@ -134,7 +136,6 @@ export function ReleaseDetailPage({
   MarkdownRenderer = DefaultMarkdownRenderer,
   RoadmapSection,
   DeliverySection,
-  VideoSection,
   VideoDisplaySection,
   roadmapApiEndpoint = '/api/roadmap',
   deliveryApiEndpoint = '/api/delivery',
@@ -335,8 +336,10 @@ export function ReleaseDetailPage({
             highlightVideoThumbnail={highlightVideoThumbnail}
             title={releaseTitle}
             videoBites={videoBites}
-            bitesTitle="Video Clips"
+            bitesTitle={DEFAULT_VIDEO_BITES_TITLE}
             filterPublishedBites={true}
+            bitesProfile={toStripProfile(author)}
+            bitesHref={typeof release.slug === 'string' ? `/releases/${release.slug}` : undefined}
             srtContent={release?.srt_content as string | null | undefined}
             captionsUrl={release?.captionsUrl as string | undefined}
           />
@@ -434,15 +437,6 @@ export function ReleaseDetailPage({
           MarkdownRenderer={MarkdownRenderer}
         />
 
-        {/* Video Bites Section - Only when VideoDisplaySection is not handling it */}
-        {!VideoDisplaySection && VideoSection && videoBites && videoBites.length > 0 && (
-          <VideoSection
-            bites={videoBites}
-            title="Video Clips"
-            filterPublished={true}
-          />
-        )}
-
         {/* Related Roadmap Items */}
         {RoadmapSection && (roadmapLoading || roadmapTasks.length > 0) && (
           <div className="space-y-4 w-full">

package/src/components/square-avatar.tsx

@@ -13,6 +13,8 @@ interface SquareAvatarProps {
   size?: number;
   /** If true, avatar takes full width with square aspect ratio */
   fullWidth?: boolean;
+  /** Corner treatment. `'square'` = rounded-lg (default, historical look); `'round'` = fully circular. */
+  shape?: 'square' | 'round';
   className?: string;
 }
 
@@ -20,7 +22,7 @@ interface SquareAvatarProps {
  * Square avatar with rounded edges used across cards / dashboards.
  * Automatically shows image (via proxied URL) or initials fallback.
  */
-export function SquareAvatar({ src, fallbackName = '', size = 56, fullWidth = false, className }: SquareAvatarProps) {
+export function SquareAvatar({ src, fallbackName = '', size = 56, fullWidth = false, shape = 'square', className }: SquareAvatarProps) {
   const initials = React.useMemo(() => {
     if (!fallbackName) return '';
     return fallbackName
@@ -36,7 +38,8 @@ export function SquareAvatar({ src, fallbackName = '', size = 56, fullWidth = fa
   return (
     <div
       className={cn(
-        'rounded-lg border border-ods-border flex items-center justify-center overflow-hidden bg-ods-bg-secondary',
+        'border border-ods-border flex items-center justify-center overflow-hidden bg-ods-bg-secondary',
+        shape === 'round' ? 'rounded-full' : 'rounded-lg',
         fullWidth ? 'w-full aspect-square' : 'flex-shrink-0',
         className,
       )}

package/src/components/user-display.tsx

@@ -11,6 +11,10 @@ interface UserDisplayProps {
   subtitle?: string | null;
   /** Avatar size in px (defaults 32) */
   size?: number;
+  /** Avatar corner treatment, forwarded to SquareAvatar. Default 'square'. */
+  shape?: 'square' | 'round';
+  /** Compact typography (14px/20px rows — video-bite overlay density). */
+  compact?: boolean;
   className?: string;
 }
 
@@ -18,16 +22,22 @@ interface UserDisplayProps {
  * Reusable horizontal avatar + name (+ optional subtitle) row that follows
  * the visual pattern used in CommentCard headers.
  */
-export function UserDisplay({ name, avatarUrl, subtitle, size = 32, className }: UserDisplayProps) {
+export function UserDisplay({ name, avatarUrl, subtitle, size = 32, shape = 'square', compact = false, className }: UserDisplayProps) {
   return (
     <div className={cn('flex items-center gap-2 min-w-0', className)}>
-      <SquareAvatar src={avatarUrl ?? undefined} fallbackName={name} size={size} />
+      <SquareAvatar src={avatarUrl ?? undefined} fallbackName={name} size={size} shape={shape} />
       <div className="min-w-0 flex-1">
-        <p className="font-['DM_Sans'] text-lg leading-[22px] text-ods-text-primary truncate">
+        <p className={cn(
+          "font-['DM_Sans'] text-ods-text-primary truncate",
+          compact ? 'text-sm leading-5 font-medium' : 'text-lg leading-[22px]',
+        )}>
           {name}
         </p>
         {subtitle && (
-          <span className="font-['DM_Sans'] text-md leading-[16px] text-ods-text-secondary truncate">
+          <span className={cn(
+            "font-['DM_Sans'] text-ods-text-secondary truncate block",
+            compact ? 'text-sm leading-5 font-medium' : 'text-md leading-[16px]',
+          )}>
             {subtitle}
           </span>
         )}

package/src/stories/VideoBitesStrip.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import {
+  VideoBitesStrip,
+  type VideoBiteStripItem,
+} from '../components/features/video-bites-strip'
+
+// Public-domain sample clips (Google CDN test media) — small MP4s so the
+// hover-mount preview is exercised realistically in Storybook.
+const SAMPLE_MP4 =
+  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4'
+const SAMPLE_MP4_2 =
+  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4'
+
+const bite = (over: Partial<VideoBiteStripItem>): VideoBiteStripItem => ({
+  url: SAMPLE_MP4,
+  title: 'How an MSSP Director Tests Agentic AI for Regulated Law Firms',
+  published: true,
+  aspect_ratio: '9:16',
+  created_at: '2026-07-01T00:00:00Z',
+  thumbnail_url: 'https://picsum.photos/seed/bite/270/480',
+  ...over,
+})
+
+const PROFILE = {
+  name: 'Michael Crisafio',
+  avatarUrl: 'https://picsum.photos/seed/avatar/68/68',
+  subtitle: 'Tier 1 Consulting',
+}
+
+const MANY_MIXED: VideoBiteStripItem[] = [
+  bite({ title: 'Portrait clip A', href: '#a' }),
+  bite({ url: SAMPLE_MP4_2, title: 'Landscape clip', aspect_ratio: '16:9', thumbnail_url: 'https://picsum.photos/seed/land/480/270', href: '#b' }),
+  bite({ title: 'Square clip', aspect_ratio: '1:1', thumbnail_url: 'https://picsum.photos/seed/sq/360/360' }),
+  bite({ title: 'No-thumbnail clip (PlayIcon fallback)', thumbnail_url: undefined }),
+  bite({ title: 'Portrait clip B', thumbnail_url: 'https://picsum.photos/seed/b2/270/480' }),
+  bite({ title: 'Portrait clip C', thumbnail_url: 'https://picsum.photos/seed/b3/270/480' }),
+  bite({ title: 'Portrait clip D', thumbnail_url: 'https://picsum.photos/seed/b4/270/480' }),
+]
+
+const meta: Meta<typeof VideoBitesStrip> = {
+  title: 'Features/VideoBitesStrip',
+  component: VideoBitesStrip,
+  parameters: { layout: 'fullscreen' },
+  decorators: [
+    Story => (
+      <div className="bg-ods-bg p-8 min-h-[560px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+export default meta
+
+type Story = StoryObj<typeof VideoBitesStrip>
+
+/** Mixed ratios at uniform height — the marquee engages once content overflows. */
+export const MixedRatiosMarquee: Story = {
+  args: { bites: MANY_MIXED, profile: PROFILE },
+}
+
+/** Two bites — no overflow, so no clones, no marquee, no chevrons. */
+export const TwoBitesNoMarquee: Story = {
+  args: { bites: MANY_MIXED.slice(0, 2), profile: PROFILE },
+}
+
+/** Missing thumbnails fall back to bg-ods-card + PlayIcon; preview still mounts on hover. */
+export const NoThumbnails: Story = {
+  args: {
+    bites: MANY_MIXED.map(b => ({ ...b, thumbnail_url: undefined })),
+    profile: PROFILE,
+  },
+}
+
+/** autoScroll off — plain scrollable row with chevrons (reduced-motion behaves the same). */
+export const AutoScrollDisabled: Story = {
+  args: { bites: MANY_MIXED, autoScroll: false, profile: PROFILE },
+}
+
+/** Unpublished bites are filtered by default — this renders nothing (returns null). */
+export const AllUnpublishedRendersNull: Story = {
+  args: { bites: MANY_MIXED.map(b => ({ ...b, published: false })) },
+}

package/src/types/case-study.ts

@@ -34,6 +34,19 @@ export interface CaseStudy {
   video_bites: VideoTeaser[] // Array of video clips from interviews or manually added
   customer_interview_id: number | null // Linked customer interview for bidirectional relationship
 
+  // Video processing pipeline (FULL parity with customer_interviews since
+  // 2026-07: transcribe & summarize, captions, clip config, highlight).
+  // NOTE: transcript_words_data is server-only and intentionally NOT typed here.
+  transcript?: string | null
+  srt_content?: string | null
+  video_summary?: string | null
+  custom_instructions?: string | null
+  config?: Record<string, unknown> | null // clip/highlight processing config
+  highlight_video_url?: string | null
+  highlight_video_thumbnail?: string | null
+  highlight_video_source?: 'manual' | 'ai_generated' | null
+  highlight_video_duration_ms?: number | null
+
   // SEO
   seo_title: string | null
   seo_description: string | null
@@ -85,6 +98,16 @@ export interface CreateCaseStudyData {
   video_source?: 'manual' | 'ai_generated'
   video_bites?: VideoTeaser[]
   customer_interview_id?: number | null
+  // Video processing pipeline (parity with customer_interviews)
+  transcript?: string | null
+  srt_content?: string | null
+  video_summary?: string | null
+  custom_instructions?: string | null
+  config?: Record<string, unknown> | null
+  highlight_video_url?: string | null
+  highlight_video_thumbnail?: string | null
+  highlight_video_source?: string | null
+  highlight_video_duration_ms?: number | null
   // SEO
   seo_title?: string
   seo_description?: string

package/src/types/video-processing.ts

@@ -4,14 +4,25 @@
 /**
  * VideoTeaser represents a short video clip extracted from a longer video.
  * Used for teasers/bites that can be shown on preview pages.
+ *
+ * CANONICAL BITE SHAPE: this is the base persistence type — the TRUE SUPERSET
+ * of every field persisted in the `video_bites` / `teasers` jsonb columns.
+ * `VideoTeaserWithRatio` (video-ratio-tabs.tsx) adds only `aspect_ratio` and is
+ * the one type display/aggregation code extends. The AI-extraction `VideoClip`
+ * below stays a separate shape by design.
  */
 export interface VideoTeaser {
   url: string
   title?: string
   thumbnail_url?: string // Optional thumbnail image URL for video preview. If not provided, video player will show first frame automatically.
   published?: boolean // Controls visibility on public preview page (default: false, admin must select)
+  featured?: boolean // Opts the bite into cross-entity featured pulls (homepage/configured surfaces). Independent of `published`.
   source?: 'manual' | 'ai_generated' // Track origin of teaser
   created_at?: string // ISO timestamp for sorting (newer items first)
+  start_time_ms?: number // Vizard extraction: clip start offset in the source video
+  end_time_ms?: number // Vizard extraction: clip end offset in the source video
+  confidence?: number // Vizard extraction: 0-100 virality confidence
+  viral_reason?: string // Vizard extraction: why this clip was picked
   // Duration auto-detected from video file
 }