@flamingo-stack/openframe-frontend-core 0.0.387 → 0.0.388-snapshot.20260709030118

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?: 'manual' | 'ai_generated' | 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
 }