Add video component (#71)

Author: ischaojie

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=False,
+                    controls=True,
+                    loop=False,
+                ),
+            ],
+            class_name='border-top mt-3 pt-1',
+        ),
         c.Div(
             components=[
                 c.Heading(text='Custom', level=2),

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'
 import { CustomComp, CustomProps } from './Custom'
 
 export type {
@@ -68,6 +69,7 @@ export type {
   ServerLoadProps,
   ImageProps,
   IframeProps,
+  VideoProps,
   CustomProps,
 }
 
@@ -99,6 +101,7 @@ export type FastProps =
   | ServerLoadProps
   | ImageProps
   | IframeProps
+  | VideoProps
   | CustomProps
 
 export type FastClassNameProps = Exclude<FastProps, TextProps | AllDisplayProps | ServerLoadProps | PageTitleProps>
@@ -182,6 +185,8 @@ export const AnyComp: FC<FastProps> = (props) => {
         return <ImageComp {...props} />
       case 'Iframe':
         return <IframeComp {...props} />
+      case 'Video':
+        return <VideoComp {...props} />
       case 'Custom':
         return <CustomComp {...props} />
       default:

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

@@ -0,0 +1,44 @@
+import { FC } from 'react'
+
+import { ClassName } from '../hooks/className'
+
+export interface VideoProps {
+  type: 'Video'
+  /**
+   * @items {"type":"string", "format": "uri", "minLength": 1}
+   */
+  sources: string[]
+  autoplay?: boolean
+  controls?: boolean
+  loop?: boolean
+  muted?: boolean
+  /**
+   * @format uri
+   * @minLength 1
+   */
+  poster?: string
+  /** @TJS-type ["string", "integer"] */
+  width?: string | number
+  /** @TJS-type ["string", "integer"] */
+  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

@@ -223,6 +223,19 @@ class Iframe(_p.BaseModel, extra='forbid'):
     type: _t.Literal['Iframe'] = 'Iframe'
 
 
+class Video(_p.BaseModel, extra='forbid'):
+    sources: _t.List[_p.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[_p.AnyUrl, None] = None
+    width: _t.Union[str, int, None] = None
+    height: _t.Union[str, int, None] = None
+    type: _t.Literal['Video'] = 'Video'
+    class_name: _class_name.ClassNameField = None
+
+
 class Custom(_p.BaseModel, extra='forbid'):
     data: json_schema.JsonData
     sub_type: str = _p.Field(serialization_alias='subType')
@@ -250,6 +263,7 @@ class Custom(_p.BaseModel, extra='forbid'):
         ServerLoad,
         Image,
         Iframe,
+        Video,
         Custom,
         Table,
         Pagination,

src/python-fastui/tests/react-fastui-json-schema.json

@@ -369,6 +369,9 @@
         {
           "$ref": "#/definitions/IframeProps"
         },
+        {
+          "$ref": "#/definitions/VideoProps"
+        },
         {
           "$ref": "#/definitions/CustomProps"
         }
@@ -1309,6 +1312,50 @@
       },
       "required": ["text", "type"],
       "type": "object"
+    },
+    "VideoProps": {
+      "properties": {
+        "autoplay": {
+          "type": "boolean"
+        },
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "controls": {
+          "type": "boolean"
+        },
+        "height": {
+          "type": ["string", "integer"]
+        },
+        "loop": {
+          "type": "boolean"
+        },
+        "muted": {
+          "type": "boolean"
+        },
+        "poster": {
+          "format": "uri",
+          "minLength": 1,
+          "type": "string"
+        },
+        "sources": {
+          "items": {
+            "format": "uri",
+            "minLength": 1,
+            "type": "string"
+          },
+          "type": "array"
+        },
+        "type": {
+          "const": "Video",
+          "type": "string"
+        },
+        "width": {
+          "type": ["string", "integer"]
+        }
+      },
+      "required": ["sources", "type"],
+      "type": "object"
     }
   }
 }