@vibecuting/video-project-core 0.1.27 → 0.1.29

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' },
+}

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

@@ -0,0 +1,283 @@
+import type { ReactNode } from 'react'
+
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+import { cloneElement, isValidElement } from 'react'
+import { spring, useCurrentFrame, useVideoConfig } from 'remotion'
+
+import { BaseRemotionScene, SceneMotionLayer, type BaseRemotionSceneProps, useRemotionSceneRuntime, useSceneConfig } from '../../../base'
+import { defineSceneComponent } from '../../../plugins/scene-component'
+
+export interface DefaultVideoSceneProps extends BaseRemotionSceneProps {
+  sceneId?: string
+  sceneName?: string
+  title?: string
+  subtitle?: string
+  badge?: string
+  runtimeLabel?: string
+  video: ReactNode
+  videos?: ReactNode[]
+  poster?: ReactNode
+  variant?: 'player' | 'split' | 'wall'
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultVideoScene',
+  description: 'Video-first scene with poster-led motion and editorial framing',
+  sourceFile: 'src/core/scene/video/default-video-scene.tsx',
+  pluginKey: 'core.video.preview',
+  tags: ['scene', 'video', 'preview', 'player'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'custom',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultVideoSceneProps',
+})
+
+function VideoFrame({
+  node,
+  isPortrait,
+  animationProgress,
+}: {
+  node: ReactNode
+  isPortrait: boolean
+  animationProgress: number
+  }) {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        border: '1px solid rgba(255,255,255,0.14)',
+        background: 'rgba(2,6,23,0.86)',
+        transform: `scale(${1 + (1 - animationProgress) * 0.012})`,
+      }}
+    >
+      {node}
+    </div>
+  )
+}
+
+function renderCoverMedia(node: ReactNode) {
+  if (isValidElement(node)) {
+    const existingStyle = (node.props as { style?: Record<string, unknown> }).style ?? {}
+    return cloneElement(node, {
+      ...(node.props as Record<string, unknown>),
+      style: {
+        ...existingStyle,
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        display: 'block',
+        minWidth: 0,
+        minHeight: 0,
+      },
+    })
+  }
+
+  return <div style={{ width: '100%', height: '100%', minWidth: 0, minHeight: 0 }}>{node}</div>
+}
+
+export const DefaultVideoScene = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'custom',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().optional(),
+      subtitle: z.string().optional(),
+      badge: z.string().optional(),
+      runtimeLabel: z.string().optional(),
+      video: z.any(),
+      videos: z.array(z.any()).optional(),
+      poster: z.any().optional(),
+      variant: z.enum(['player', 'split', 'wall']).optional(),
+      accent: z.string().optional(),
+      secondaryAccent: z.string().optional(),
+      textColor: z.string().optional(),
+    }),
+    component: function DefaultVideoScene({
+      id,
+      name,
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      badge,
+      runtimeLabel,
+      video,
+      videos,
+      poster,
+      variant = 'player',
+      accent,
+      secondaryAccent,
+      textColor,
+    }: DefaultVideoSceneProps) {
+      const runtime = useRemotionSceneRuntime()
+      const sceneConfig = useSceneConfig()
+      const frame = useCurrentFrame()
+      const { fps } = useVideoConfig()
+      const isPortrait = runtime.height > runtime.width
+      const animationProgress =
+        sceneConfig.sceneType === 'animation'
+          ? spring({
+              frame,
+              fps,
+              config: {
+                damping: 18,
+                mass: 0.8,
+                stiffness: 110,
+              },
+            })
+          : 1
+      const titleSize = Math.round(runtime.height * (isPortrait ? 0.032 : 0.038))
+      const subtitleSize = Math.round(runtime.height * 0.017)
+      const frames = (videos?.length ? videos : [video]).slice(0, 4)
+
+      return (
+        <BaseRemotionScene
+          id={id ?? sceneId}
+          name={name ?? sceneName ?? title}
+          style={{
+            background: isPortrait
+              ? `linear-gradient(180deg, ${accent ?? '#020617'} 0%, #0f172a 55%, #000000 100%)`
+              : `radial-gradient(circle at 50% 24%, ${secondaryAccent ?? 'rgba(255,255,255,0.08)'} 0%, ${accent ?? '#020617'} 48%, #000000 100%)`,
+            color: textColor ?? '#f8fafc',
+            padding: Math.round(runtime.height * (isPortrait ? 0.02 : 0.03)),
+          }}
+        >
+          <section
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'grid',
+              gridTemplateRows: 'minmax(0, 1fr) auto',
+              gap: 16,
+              minWidth: 0,
+              minHeight: 0,
+            }}
+          >
+            {variant === 'wall' ? (
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: isPortrait ? '1fr 1fr' : 'repeat(2, minmax(0, 1fr))',
+                  gridTemplateRows: isPortrait ? 'repeat(2, minmax(0, 1fr))' : 'repeat(2, minmax(0, 1fr))',
+                  gap: 12,
+                  minWidth: 0,
+                  minHeight: 0,
+                }}
+              >
+                {frames.map((item, index) => (
+                  <SceneMotionLayer key={`video-wall-${index}`} variant="media" delayIndex={index}>
+                    <VideoFrame node={item} isPortrait={isPortrait} animationProgress={animationProgress} />
+                  </SceneMotionLayer>
+                ))}
+              </div>
+            ) : variant === 'split' ? (
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: isPortrait ? '1fr' : 'minmax(0, 1.18fr) minmax(250px, 0.82fr)',
+                  gap: 16,
+                  minWidth: 0,
+                  minHeight: 0,
+                }}
+              >
+                <SceneMotionLayer variant="panel">
+                  <VideoFrame node={video} isPortrait={isPortrait} animationProgress={animationProgress} />
+                </SceneMotionLayer>
+                <div
+                  style={{
+                    display: 'grid',
+                    gap: 12,
+                    alignContent: 'start',
+                    padding: isPortrait ? '0' : '8px 0',
+                    minWidth: 0,
+                  }}
+                >
+                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'center' }}>
+                    <div style={{ fontSize: Math.round(runtime.height * 0.014), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>
+                      {badge ?? 'Video'}
+                    </div>
+                    {runtimeLabel ? (
+                      <div style={{ fontSize: Math.round(runtime.height * 0.014), letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.58 }}>
+                        {runtimeLabel}
+                      </div>
+                    ) : null}
+                  </div>
+                  {title ? (
+                    <SceneMotionLayer variant="hero-title">
+                      <div style={{ fontSize: titleSize, lineHeight: 0.96, letterSpacing: '-0.06em', fontWeight: 800 }}>{title}</div>
+                    </SceneMotionLayer>
+                  ) : null}
+                  {subtitle ? <div style={{ fontSize: subtitleSize, lineHeight: 1.45, opacity: 0.84 }}>{subtitle}</div> : null}
+                  <div style={{ border: '1px solid rgba(255,255,255,0.12)', background: 'rgba(2,6,23,0.56)', padding: 14, display: 'grid', gap: 10 }}>
+                    <div style={{ fontSize: Math.round(runtime.height * 0.013), letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.56 }}>Editorial Notes</div>
+                    <div style={{ fontSize: Math.round(runtime.height * 0.018), lineHeight: 1.45, opacity: 0.88 }}>
+                      Use this layout for review notes, chapter context, or a companion still beside the clip.
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div
+                style={{
+                  position: 'relative',
+                  width: '100%',
+                  height: '100%',
+                  aspectRatio: isPortrait ? '9 / 16' : '16 / 9',
+                  minWidth: 0,
+                  minHeight: 0,
+                  overflow: 'hidden',
+                  border: '1px solid rgba(255,255,255,0.14)',
+                  background: 'rgba(2,6,23,0.84)',
+                }}
+              >
+                <SceneMotionLayer
+                  variant="media"
+                  style={{
+                    position: 'absolute',
+                    inset: '-8%',
+                    opacity: 0.26,
+                    filter: 'blur(22px) saturate(1.06)',
+                    transform: `scale(${1.12 + (1 - animationProgress) * 0.02})`,
+                  }}
+                >
+                  {renderCoverMedia(poster ?? video)}
+                </SceneMotionLayer>
+                <SceneMotionLayer variant="media" style={{ position: 'absolute', inset: 0 }}>
+                  {renderCoverMedia(poster ?? video)}
+                </SceneMotionLayer>
+                <div
+                  aria-hidden="true"
+                  style={{
+                    position: 'absolute',
+                    inset: 0,
+                    background: 'linear-gradient(180deg, rgba(2,6,23,0.1) 0%, rgba(2,6,23,0.2) 42%, rgba(2,6,23,0.72) 100%)',
+                  }}
+                />
+                <div style={{ position: 'absolute', left: 16, top: 16, display: 'flex', gap: 10, alignItems: 'center' }}>
+                  <div style={{ width: 10, height: 10, borderRadius: 9999, background: 'rgba(239,68,68,0.95)', boxShadow: '0 0 0 4px rgba(239,68,68,0.16)' }} />
+                  <div style={{ fontSize: Math.round(runtime.height * 0.013), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.72 }}>
+                    {badge ?? 'Video Preview'}
+                  </div>
+                </div>
+                <div style={{ position: 'absolute', left: 16, right: 16, bottom: 16, display: 'grid', gap: 8 }}>
+                  {title ? <div style={{ fontSize: titleSize, fontWeight: 800, letterSpacing: '-0.06em', lineHeight: 0.95 }}>{title}</div> : null}
+                  {subtitle ? <div style={{ fontSize: subtitleSize, lineHeight: 1.45, opacity: 0.86, maxWidth: isPortrait ? '88%' : '60%' }}>{subtitle}</div> : null}
+                </div>
+              </div>
+            )}
+          </section>
+        </BaseRemotionScene>
+      )
+    },
+  }),
+)

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

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

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

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

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

@@ -0,0 +1,41 @@
+import { DefaultVideoSplitSceneLandscape } from './default-video-split-scene-Landscape'
+import { DefaultVideoSplitSceneHorizontal } from './default-video-split-scene-Horizontal'
+
+const frame = (
+  <div
+    style={{
+      width: '100%',
+      height: '100%',
+      background:
+        'linear-gradient(180deg, rgba(255,255,255,0.18), rgba(2,6,23,0.84)), linear-gradient(135deg, #0f766e 0%, #1d4ed8 52%, #020617 100%)',
+    }}
+  />
+)
+
+const args = {
+  title: 'Editorial Split',
+  subtitle: 'Use this when the clip needs a companion still, notes, or a second framing column.',
+  badge: 'Split',
+  runtimeLabel: '02:24',
+  video: frame,
+  poster: frame,
+}
+
+const meta = {
+  title: 'core/scene/video/DefaultVideoSplitSceneLandscape',
+  component: DefaultVideoSplitSceneLandscape,
+  args,
+}
+
+export default meta
+
+export const Default = { parameters: { scenePreviewAspectRatio: '16:9' } }
+export const Animated = { parameters: { scenePreviewAspectRatio: '16:9', scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultVideoSplitSceneHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultVideoSplitSceneHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}

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

@@ -0,0 +1,19 @@
+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: 'DefaultVideoSplitScene',
+  description: 'Video split preview scene',
+  sourceFile: 'src/core/scene/video/default-video-split-scene.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'split'])),
+}
+
+export const DefaultVideoSplitScene = VideoComponent(componentMetadata)(function DefaultVideoSplitScene(
+  props: ComponentProps<typeof DefaultVideoScene>,
+) {
+  return <DefaultVideoScene {...props} variant="split" />
+})

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

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

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

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

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

@@ -0,0 +1,40 @@
+import { DefaultVideoWallSceneHorizontal } from './default-video-wall-scene-Horizontal'
+import { DefaultVideoWallSceneLandscape } from './default-video-wall-scene-Landscape'
+
+const frame = (
+  <div
+    style={{
+      width: '100%',
+      height: '100%',
+      background:
+        'linear-gradient(180deg, rgba(255,255,255,0.16), rgba(2,6,23,0.84)), linear-gradient(135deg, #7c3aed 0%, #1d4ed8 42%, #020617 100%)',
+    }}
+  />
+)
+
+const args = {
+  title: 'Clip Wall',
+  subtitle: 'Four clips arranged like a screening board or trailer review wall.',
+  badge: 'Wall',
+  video: frame,
+  videos: [frame, frame, frame, frame],
+}
+
+const meta = {
+  title: 'core/scene/video/DefaultVideoWallSceneLandscape',
+  component: DefaultVideoWallSceneLandscape,
+  args,
+}
+
+export default meta
+
+export const Default = { parameters: { scenePreviewAspectRatio: '16:9' } }
+export const Animated = { parameters: { scenePreviewAspectRatio: '16:9', scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultVideoWallSceneHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultVideoWallSceneHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}

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

@@ -0,0 +1,19 @@
+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: 'DefaultVideoWallScene',
+  description: 'Video wall preview scene',
+  sourceFile: 'src/core/scene/video/default-video-wall-scene.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'wall', 'multi'])),
+}
+
+export const DefaultVideoWallScene = VideoComponent(componentMetadata)(function DefaultVideoWallScene(
+  props: ComponentProps<typeof DefaultVideoScene>,
+) {
+  return <DefaultVideoScene {...props} variant="wall" />
+})

package/src/core/scene/video/index.ts

@@ -0,0 +1,9 @@
+export { DefaultVideoScene, componentMetadata as DefaultVideoSceneMetadata } from './default-video-scene'
+export { DefaultVideoSceneLandscape, componentMetadata as DefaultVideoSceneLandscapeMetadata } from './default-video-scene-Landscape'
+export { DefaultVideoSceneHorizontal, componentMetadata as DefaultVideoSceneHorizontalMetadata } from './default-video-scene-Horizontal'
+export { DefaultVideoSplitScene, componentMetadata as DefaultVideoSplitSceneMetadata } from './default-video-split-scene'
+export { DefaultVideoSplitSceneLandscape, componentMetadata as DefaultVideoSplitSceneLandscapeMetadata } from './default-video-split-scene-Landscape'
+export { DefaultVideoSplitSceneHorizontal, componentMetadata as DefaultVideoSplitSceneHorizontalMetadata } from './default-video-split-scene-Horizontal'
+export { DefaultVideoWallScene, componentMetadata as DefaultVideoWallSceneMetadata } from './default-video-wall-scene'
+export { DefaultVideoWallSceneLandscape, componentMetadata as DefaultVideoWallSceneLandscapeMetadata } from './default-video-wall-scene-Landscape'
+export { DefaultVideoWallSceneHorizontal, componentMetadata as DefaultVideoWallSceneHorizontalMetadata } from './default-video-wall-scene-Horizontal'