From 96c0042d8b90f1bd85b611ad4de27ca016fdda14 Mon Sep 17 00:00:00 2001
From: Chaojie <hi@chaojie.fun>
Date: Wed, 6 Dec 2023 00:23:39 +0800
Subject: [PATCH 1/2] Add video component

---
 demo/components_list.py                       | 13 +++++++
 src/npm-fastui/src/components/index.tsx       |  5 +++
 src/npm-fastui/src/components/video.tsx       | 34 +++++++++++++++++++
 .../fastui/components/__init__.py             | 13 +++++++
 4 files changed, 65 insertions(+)
 create mode 100644 src/npm-fastui/src/components/video.tsx

diff --git a/demo/components_list.py b/demo/components_list.py
index 5b76e1b7..1f289e23 100644
--- a/demo/components_list.py
+++ b/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',
     )
 
diff --git a/src/npm-fastui/src/components/index.tsx b/src/npm-fastui/src/components/index.tsx
index f500bc53..033560c9 100644
--- a/src/npm-fastui/src/components/index.tsx
+++ b/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}"`} />
diff --git a/src/npm-fastui/src/components/video.tsx b/src/npm-fastui/src/components/video.tsx
new file mode 100644
index 00000000..b2885f11
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/python-fastui/fastui/components/__init__.py b/src/python-fastui/fastui/components/__init__.py
index 5cdcb223..753f9a02 100644
--- a/src/python-fastui/fastui/components/__init__.py
+++ b/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: _t.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: _t.Union[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'),

From 1350ccb58381efaed6a0847ddcbae2d9aa9834e0 Mon Sep 17 00:00:00 2001
From: Chaojie <hi@chaojie.fun>
Date: Wed, 13 Dec 2023 22:26:48 +0800
Subject: [PATCH 2/2] Fix video autoplay

---
 demo/components_list.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/components_list.py b/demo/components_list.py
index 06547ad1..60b585a4 100644
--- a/demo/components_list.py
+++ b/demo/components_list.py
@@ -190,7 +190,7 @@ class Delivery(BaseModel):
                 c.Paragraph(text='A video component.'),
                 c.Video(
                     sources=['https://www.w3schools.com/html/mov_bbb.mp4'],
-                    autoplay=True,
+                    autoplay=False,
                     controls=True,
                     loop=False,
                 ),