Add video component

demo/components_list.py

@@ -184,6 +184,19 @@ class Delivery(BaseModel):
             ],
             class_name='border-top mt-3 pt-1',
         ),
+        c.Div(
+            components=[
+                c.Heading(text='Video', level=2),
+                c.Paragraph(text='A video component.'),
+                c.Video(
+                    sources=['https://www.w3schools.com/html/mov_bbb.mp4'],
+                    autoplay=True,
+                    controls=True,
+                    loop=False,
+                ),
+            ],
+            class_name='border-top mt-3 pt-1',
+        ),
         title='Components',
     )
 

src/npm-fastui/src/components/index.tsx

@@ -40,6 +40,7 @@ import { JsonComp, JsonProps } from './Json'
 import { ServerLoadComp, ServerLoadProps } from './ServerLoad'
 import { ImageComp, ImageProps } from './image'
 import { IframeComp, IframeProps } from './Iframe'
+import { VideoComp, VideoProps } from './video'
 
 export type {
   TextProps,
@@ -67,6 +68,7 @@ export type {
   ServerLoadProps,
   ImageProps,
   IframeProps,
+  VideoProps,
 }
 
 // TODO some better way to export components
@@ -97,6 +99,7 @@ export type FastProps =
   | ServerLoadProps
   | ImageProps
   | IframeProps
+  | VideoProps
 
 export type FastClassNameProps = Exclude<FastProps, TextProps | AllDisplayProps | ServerLoadProps | PageTitleProps>
 
@@ -179,6 +182,8 @@ export const AnyComp: FC<FastProps> = (props) => {
         return <ImageComp {...props} />
       case 'Iframe':
         return <IframeComp {...props} />
+      case 'Video':
+        return <VideoComp {...props} />
       default:
         unreachable('Unexpected component type', type, props)
         return <DisplayError title="Invalid Server Response" description={`Unknown component type: "${type}"`} />

src/npm-fastui/src/components/video.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react'
+
+import { ClassName } from '../hooks/className'
+export interface VideoProps {
+  type: 'Video'
+  sources: string[]
+  autoplay?: boolean
+  controls?: boolean
+  loop?: boolean
+  muted?: boolean
+  poster?: string
+  width?: string | number
+  height?: string | number
+  className?: ClassName
+}
+
+export const VideoComp: FC<VideoProps> = (props) => {
+  const { sources, autoplay, controls, loop, muted, poster, width, height } = props
+  return (
+    <video
+      autoPlay={autoplay}
+      controls={controls}
+      loop={loop}
+      muted={muted}
+      poster={poster}
+      width={width}
+      height={height}
+    >
+      {sources.map((src, i) => (
+        <source key={i} src={src} />
+      ))}
+    </video>
+  )
+}

src/python-fastui/fastui/components/__init__.py

@@ -202,6 +202,18 @@ class Iframe(pydantic.BaseModel, extra='forbid'):
     type: _t.Literal['Iframe'] = 'Iframe'
 
 
+class Video(pydantic.BaseModel, extra='forbid'):
+    sources: list[pydantic.AnyUrl]
+    autoplay: _t.Union[bool, None] = None
+    controls: _t.Union[bool, None] = None
+    loop: _t.Union[bool, None] = None
+    muted: _t.Union[bool, None] = None
+    poster: pydantic.AnyUrl | None = None
+    width: _t.Union[str, int, None] = None
+    height: _t.Union[str, int, None] = None
+    type: _t.Literal['Video'] = 'Video'
+
+
 AnyComponent = _te.Annotated[
     _t.Union[
         Text,
@@ -226,6 +238,7 @@ class Iframe(pydantic.BaseModel, extra='forbid'):
         ModelForm,
         Image,
         Iframe,
+        Video,
         FormField,
     ],
     pydantic.Field(discriminator='type'),