@vibecuting/video-project-core 0.1.26 → 0.1.28

package/src/core/scene/slide/video-showcase/default-video-showcase-slide.tsx

@@ -0,0 +1,365 @@
+import type { ReactNode } from 'react'
+
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SlideFrame, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultVideoShowcaseSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  chapter?: string
+  runtimeLabel?: string
+  posterLabel?: string
+  posterCaption?: string
+  notes?: string[]
+  poster?: ReactNode
+}
+
+function VideoPoster({
+  poster,
+  posterLabel,
+  posterCaption,
+  runtimeLabel,
+  chapter,
+  isPortrait,
+  scale,
+}: {
+  poster?: ReactNode
+  posterLabel?: string
+  posterCaption?: string
+  runtimeLabel?: string
+  chapter?: string
+  isPortrait: boolean
+  scale: ReturnType<typeof getSlideTypographyScale>
+}) {
+  return (
+    <div
+      style={{
+        position: 'relative',
+        display: 'grid',
+        placeItems: 'center',
+        width: '100%',
+        minHeight: isPortrait ? 320 : 420,
+        aspectRatio: isPortrait ? '4 / 5' : '16 / 9',
+        overflow: 'hidden',
+        borderRadius: 0,
+        border: '1px solid rgba(148, 163, 184, 0.22)',
+        background: 'linear-gradient(135deg, rgba(15,23,42,0.96) 0%, rgba(30,41,59,0.94) 42%, rgba(37,99,235,0.7) 100%)',
+        boxShadow: '0 24px 60px rgba(15,23,42,0.22)',
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background:
+            'radial-gradient(circle at 28% 20%, rgba(96,165,250,0.32), transparent 28%), radial-gradient(circle at 82% 26%, rgba(56,189,248,0.18), transparent 26%), linear-gradient(180deg, rgba(2,6,23,0.12) 0%, rgba(2,6,23,0.7) 100%)',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          inset: 16,
+          border: '1px solid rgba(255,255,255,0.12)',
+          pointerEvents: 'none',
+        }}
+      />
+      <div style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%', padding: isPortrait ? 18 : 22, display: 'grid', gridTemplateRows: 'auto 1fr auto', gap: 16 }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+          <div
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 10,
+              padding: '8px 12px',
+              borderRadius: 0,
+              border: '1px solid rgba(255,255,255,0.16)',
+              background: 'rgba(15,23,42,0.46)',
+              color: '#f8fafc',
+              fontSize: scale.caption,
+              letterSpacing: '0.16em',
+              textTransform: 'uppercase',
+            }}
+          >
+            <span style={{ width: 8, height: 8, background: '#38bdf8', display: 'inline-block' }} />
+            {posterLabel ?? 'Poster'}
+          </div>
+          {runtimeLabel ? (
+            <div
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                padding: '8px 12px',
+                borderRadius: 0,
+                border: '1px solid rgba(255,255,255,0.16)',
+                background: 'rgba(2,6,23,0.5)',
+                color: '#e2e8f0',
+                fontSize: scale.caption,
+                fontWeight: 600,
+              }}
+            >
+              {runtimeLabel}
+            </div>
+          ) : null}
+        </div>
+
+        <div style={{ display: 'grid', placeItems: 'center', minHeight: 0 }}>
+          {poster ?? (
+            <div style={{ display: 'grid', placeItems: 'center', gap: 14, textAlign: 'center', color: '#e2e8f0' }}>
+              <div
+                style={{
+                  width: isPortrait ? 84 : 96,
+                  height: isPortrait ? 84 : 96,
+                  display: 'grid',
+                  placeItems: 'center',
+                  borderRadius: '999px',
+                  background: 'rgba(15,23,42,0.64)',
+                  border: '1px solid rgba(255,255,255,0.18)',
+                  boxShadow: '0 12px 32px rgba(15,23,42,0.28)',
+                  fontSize: isPortrait ? 28 : 30,
+                }}
+              >
+                ▶
+              </div>
+              <div>
+                <div style={{ fontSize: isPortrait ? scale.body * 0.98 : scale.body, fontWeight: 700, letterSpacing: '-0.02em' }}>{posterLabel ?? 'Video poster'}</div>
+                <div style={{ marginTop: 8, fontSize: scale.caption, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.68 }}>{posterCaption ?? 'Use a frame grab, teaser art, or cover still.'}</div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 16, color: '#e2e8f0' }}>
+          <div style={{ maxWidth: '72%' }}>
+            <div style={{ fontSize: scale.caption, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.72 }}>{chapter ?? 'Video showcase'}</div>
+            <div style={{ marginTop: 8, fontSize: isPortrait ? scale.body * 0.92 : scale.body, lineHeight: 1.35, opacity: 0.86 }}>{posterCaption ?? 'Poster-led composition for clips, trailers, and edit reviews.'}</div>
+          </div>
+          <div style={{ fontSize: scale.caption, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.58 }}>Video</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function VideoNotes({
+  notes,
+  isPortrait,
+  scale,
+}: {
+  notes?: string[]
+  isPortrait: boolean
+  scale: ReturnType<typeof getSlideTypographyScale>
+}) {
+  const list = (notes ?? []).filter(Boolean).slice(0, 5)
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gap: isPortrait ? 10 : 12,
+        gridTemplateColumns: isPortrait ? '1fr' : 'repeat(2, minmax(0, 1fr))',
+      }}
+    >
+      {list.length > 0 ? (
+        list.map((note, index) => (
+          <article
+            key={`${index}-${note}`}
+            style={{
+              padding: isPortrait ? '14px 14px 15px' : '15px 16px 16px',
+              borderRadius: 0,
+              border: '1px solid rgba(148,163,184,0.18)',
+              background: 'rgba(15,23,42,0.3)',
+              color: '#e2e8f0',
+              minHeight: isPortrait ? 0 : 96,
+            }}
+          >
+            <div style={{ fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>
+              Note {String(index + 1).padStart(2, '0')}
+            </div>
+            <p style={{ margin: '10px 0 0', fontSize: isPortrait ? scale.body * 0.88 : scale.body * 0.92, lineHeight: 1.45, opacity: 0.94 }}>{note}</p>
+          </article>
+        ))
+      ) : (
+        <article
+          style={{
+            padding: isPortrait ? '14px 14px 15px' : '15px 16px 16px',
+            borderRadius: 0,
+            border: '1px dashed rgba(148,163,184,0.22)',
+            background: 'rgba(15,23,42,0.18)',
+            color: '#cbd5e1',
+          }}
+        >
+          <div style={{ fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>Supporting notes</div>
+          <p style={{ margin: '10px 0 0', fontSize: isPortrait ? scale.body * 0.88 : scale.body * 0.92, lineHeight: 1.45, opacity: 0.86 }}>
+            Add edit notes, chapter cues, or production reminders.
+          </p>
+        </article>
+      )}
+    </div>
+  )
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultVideoShowcaseSlide',
+  description: 'Video showcase slide',
+  sourceFile: 'src/core/scene/slide/video-showcase/default-video-showcase-slide.tsx',
+  pluginKey: 'core.slide.video-showcase',
+  tags: ['scene', 'slide', 'video', 'showcase'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultVideoShowcaseSlideProps',
+})
+
+export const DefaultVideoShowcaseSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().min(1),
+      subtitle: z.string().optional(),
+      chapter: z.string().optional(),
+      runtimeLabel: z.string().optional(),
+      posterLabel: z.string().optional(),
+      posterCaption: z.string().optional(),
+      notes: z.array(z.string().min(1)).max(5).optional(),
+      poster: z.any().optional(),
+    }),
+    component: function DefaultVideoShowcaseSlide({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      chapter,
+      runtimeLabel,
+      posterLabel,
+      posterCaption,
+      notes,
+      poster,
+    }: DefaultVideoShowcaseSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+
+      return (
+        <SlideFrame
+          pluginKey={componentMetadata.pluginKey}
+          sceneId={sceneId}
+          sceneName={sceneName ?? title}
+          background="linear-gradient(135deg, #020617 0%, #0f172a 58%, #1d4ed8 100%)"
+        >
+          <section
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'grid',
+              gridTemplateColumns: isPortrait ? '1fr' : '1.08fr 0.92fr',
+              gap: isPortrait ? 20 : 28,
+              padding: isPortrait ? '40px 28px 42px' : '64px 76px',
+              color: '#e2e8f0',
+              alignItems: 'stretch',
+            }}
+          >
+            <SceneMotionLayer variant="panel">
+              <VideoPoster
+                poster={poster}
+                posterLabel={posterLabel}
+                posterCaption={posterCaption}
+                runtimeLabel={runtimeLabel}
+                chapter={chapter}
+                isPortrait={isPortrait}
+                scale={scale}
+              />
+            </SceneMotionLayer>
+
+            <div style={{ display: 'grid', alignContent: 'start', gap: isPortrait ? 16 : 18, minWidth: 0 }}>
+              <SceneMotionLayer variant="hero-copy">
+                <div
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 10,
+                    padding: '8px 12px',
+                    borderRadius: 0,
+                    border: '1px solid rgba(148,163,184,0.2)',
+                    background: 'rgba(15,23,42,0.42)',
+                    color: '#e2e8f0',
+                    fontSize: scale.caption,
+                    letterSpacing: '0.18em',
+                    textTransform: 'uppercase',
+                    width: 'fit-content',
+                  }}
+                >
+                  <span style={{ width: 8, height: 8, background: '#38bdf8', display: 'inline-block' }} />
+                  {chapter ?? 'Video showcase'}
+                </div>
+              </SceneMotionLayer>
+
+              <SceneMotionLayer variant="hero-title" delayIndex={1}>
+                <h1
+                  style={{
+                    margin: 0,
+                    maxWidth: isPortrait ? 620 : 700,
+                    fontSize: isPortrait ? scale.title * 0.78 : scale.title,
+                    lineHeight: 0.94,
+                    letterSpacing: '-0.06em',
+                  }}
+                >
+                  {title}
+                </h1>
+              </SceneMotionLayer>
+
+              {subtitle ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={2}>
+                  <p
+                    style={{
+                      margin: 0,
+                      maxWidth: isPortrait ? 620 : 620,
+                      fontSize: isPortrait ? scale.body * 0.92 : scale.body,
+                      lineHeight: 1.52,
+                      opacity: 0.82,
+                    }}
+                  >
+                    {subtitle}
+                  </p>
+                </SceneMotionLayer>
+              ) : null}
+
+              <SceneMotionLayer variant="panel" delayIndex={3}>
+                <div
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+                    gap: 12,
+                    maxWidth: isPortrait ? 620 : 540,
+                  }}
+                >
+                  <article style={{ padding: '14px 16px', borderRadius: 0, border: '1px solid rgba(148,163,184,0.18)', background: 'rgba(15,23,42,0.22)' }}>
+                    <div style={{ fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>Chapter</div>
+                    <div style={{ marginTop: 8, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.35, fontWeight: 700 }}>{chapter ?? 'Opening sequence'}</div>
+                  </article>
+                  <article style={{ padding: '14px 16px', borderRadius: 0, border: '1px solid rgba(148,163,184,0.18)', background: 'rgba(15,23,42,0.22)' }}>
+                    <div style={{ fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>Runtime</div>
+                    <div style={{ marginTop: 8, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.35, fontWeight: 700 }}>{runtimeLabel ?? '02:34'}</div>
+                  </article>
+                </div>
+              </SceneMotionLayer>
+
+              <SceneMotionLayer variant="panel" delayIndex={4}>
+                <VideoNotes notes={notes} isPortrait={isPortrait} scale={scale} />
+              </SceneMotionLayer>
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/video-showcase/index.ts

@@ -0,0 +1,5 @@
+export { DefaultVideoShowcaseSlide } from './default-video-showcase-slide'
+export { componentMetadata } from './default-video-showcase-slide'
+export { DefaultVideoShowcaseSlideLandscape, componentMetadata as DefaultVideoShowcaseSlideLandscapeMetadata } from './default-video-showcase-slide-Landscape'
+export { DefaultVideoShowcaseSlideHorizontal, componentMetadata as DefaultVideoShowcaseSlideHorizontalMetadata } from './default-video-showcase-slide-Horizontal'
+export { DefaultVideoShowcaseMultiSlide, componentMetadata as DefaultVideoShowcaseMultiSlideMetadata } from './default-video-showcase-multi-slide'

package/src/core/scene/video/default-video-scene-Horizontal.stories.tsx

@@ -0,0 +1,26 @@
+import { DefaultVideoSceneHorizontal } from './default-video-scene-Horizontal'
+
+const photoUrl = 'https://heyaai-statics-1342239856.cos.ap-guangzhou.myqcloud.com/tmp/premium_photo-1779404552087-0f905162376f-121.jpeg'
+const frame = <img src={photoUrl} alt="Video preview" />
+
+const meta = {
+  title: 'core/scene/video/DefaultVideoSceneHorizontal',
+  component: DefaultVideoSceneHorizontal,
+  args: {
+    title: 'Launch Cut',
+    subtitle: 'A portrait video preview with full-bleed media and editorial framing.',
+    badge: 'Video',
+    runtimeLabel: '03:18',
+  },
+}
+
+export default meta
+
+export const Default = {
+  render: (storyArgs: (typeof meta)['args']) => <DefaultVideoSceneHorizontal {...storyArgs} video={frame} poster={frame} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const Animated = {
+  render: (storyArgs: (typeof meta)['args']) => <DefaultVideoSceneHorizontal {...storyArgs} video={frame} poster={frame} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}

package/src/core/scene/video/default-video-scene-Horizontal.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultVideoScene, componentMetadata as baseComponentMetadata } from './default-video-scene'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultVideoSceneHorizontal',
+  description: 'Video preview scene (Portrait 9:16 variant)',
+  sourceFile: 'src/core/scene/video/default-video-scene-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultVideoSceneHorizontal = VideoComponent(componentMetadata)(function DefaultVideoSceneHorizontal(
+  props: ComponentProps<typeof DefaultVideoScene>,
+) {
+  return <DefaultVideoScene {...props} />
+})

package/src/core/scene/video/default-video-scene-Landscape.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultVideoScene, componentMetadata as baseComponentMetadata } from './default-video-scene'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultVideoSceneLandscape',
+  description: 'Video preview scene (Landscape 16:9 variant)',
+  sourceFile: 'src/core/scene/video/default-video-scene-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultVideoSceneLandscape = VideoComponent(componentMetadata)(function DefaultVideoSceneLandscape(
+  props: ComponentProps<typeof DefaultVideoScene>,
+) {
+  return <DefaultVideoScene {...props} />
+})

package/src/core/scene/video/default-video-scene.stories.tsx

@@ -0,0 +1,26 @@
+import { DefaultVideoSceneLandscape } from './default-video-scene-Landscape'
+
+const photoUrl = 'https://heyaai-statics-1342239856.cos.ap-guangzhou.myqcloud.com/tmp/premium_photo-1779404552087-0f905162376f-121.jpeg'
+const frame = <img src={photoUrl} alt="Video preview" />
+
+const meta = {
+  title: 'core/scene/video/DefaultVideoSceneLandscape',
+  component: DefaultVideoSceneLandscape,
+  args: {
+    title: 'Launch Cut',
+    subtitle: 'A single video preview with Apple-style framing and a soft editorial overlay.',
+    badge: 'Video',
+    runtimeLabel: '03:18',
+  },
+}
+
+export default meta
+
+export const Default = {
+  render: (storyArgs: (typeof meta)['args']) => <DefaultVideoSceneLandscape {...storyArgs} video={frame} poster={frame} />,
+  parameters: { scenePreviewAspectRatio: '16:9' },
+}
+export const Animated = {
+  render: (storyArgs: (typeof meta)['args']) => <DefaultVideoSceneLandscape {...storyArgs} video={frame} poster={frame} />,
+  parameters: { scenePreviewAspectRatio: '16:9', scenePreviewMode: 'animation' },
+}