@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 6.58 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","names":["vars: Record<string, string>","Flexbox","ActionIcon"],"sources":["../../src/Video/index.tsx"],"sourcesContent":["'use client';\n\nimport { Skeleton } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport { PlayIcon } from 'lucide-react';\nimport { type CSSProperties, type Ref, memo, useMemo, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox, FlexboxProps } from '@/Flex';\nimport type { VideoProps as VProps } from '@/types';\n\nimport { styles, variants } from './style';\n\nexport interface VideoProps extends VProps, Pick<FlexboxProps, 'width' | 'height'> {\n autoPlay?: boolean;\n classNames?: {\n mask?: string;\n video?: string;\n wrapper?: string;\n };\n isLoading?: boolean;\n loop?: boolean;\n maxHeight?: number | string;\n maxWidth?: number | string;\n minHeight?: number | string;\n minWidth?: number | string;\n muted?: HTMLVideoElement['muted'];\n onEnded?: VProps['onEnded'];\n onMouseEnter?: VProps['onMouseEnter'];\n onMouseLeave?: VProps['onMouseLeave'];\n onPause?: VProps['onPause'];\n onPlay?: VProps['onPlay'];\n onPlaying?: VProps['onPlaying'];\n onProgress?: VProps['onProgress'];\n poster?: string;\n preload?: HTMLVideoElement['preload'];\n preview?: boolean;\n ref?: Ref<HTMLDivElement>;\n size?: number | string;\n src: string;\n styles?: {\n mask?: CSSProperties;\n video?: CSSProperties;\n wrapper?: CSSProperties;\n };\n variant?: 'borderless' | 'filled' | 'outlined';\n}\n\nconst Video = memo<VideoProps>(\n ({\n ref,\n preload = 'auto',\n src,\n style,\n classNames,\n className,\n maxHeight = '100%',\n maxWidth = '100%',\n minHeight,\n minWidth,\n onEnded,\n onPause,\n onPlay,\n onPlaying,\n width,\n height,\n onMouseEnter,\n styles: customStyles,\n onMouseLeave,\n preview = true,\n isLoading,\n variant = 'filled',\n autoPlay,\n ...rest\n }) => {\n const [isPlaying, setIsPlaying] = useState(false);\n const [showControls, setShowControls] = useState(false);\n\n // Convert props to CSS variables\n const cssVariables = useMemo<Record<string, string>>(() => {\n const vars: Record<string, string> = {};\n if (maxHeight !== undefined) {\n vars['--video-max-height'] = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n }\n if (maxWidth !== undefined) {\n vars['--video-max-width'] = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;\n }\n if (minHeight !== undefined) {\n vars['--video-min-height'] = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;\n }\n if (minWidth !== undefined) {\n vars['--video-min-width'] = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;\n }\n return vars;\n }, [maxHeight, maxWidth, minHeight, minWidth]);\n\n if (isLoading)\n return (\n <Skeleton.Avatar\n active\n style={{\n borderRadius: cssVar.borderRadiusLG,\n height,\n maxHeight,\n maxWidth,\n minHeight,\n minWidth,\n width,\n }}\n />\n );\n\n return (\n <Flexbox\n className={cx(variants({ variant }), className, classNames?.wrapper)}\n height={height}\n ref={ref}\n style={{\n ...cssVariables,\n ...style,\n ...customStyles?.wrapper,\n }}\n width={width}\n >\n {preview && !isPlaying && (\n <Flexbox\n align={'center'}\n className={cx(styles.mask, classNames?.mask)}\n justify={'center'}\n style={customStyles?.mask}\n >\n <ActionIcon color={'#fff'} icon={PlayIcon} variant={'filled'} />\n </Flexbox>\n )}\n <video\n autoPlay={autoPlay}\n className={cx(styles.video, classNames?.video)}\n controls={showControls}\n height={height}\n onEnded={(e) => {\n setIsPlaying(false);\n onEnded?.(e);\n }}\n onMouseEnter={(e) => {\n setShowControls(true);\n onMouseEnter?.(e);\n }}\n onMouseLeave={(e) => {\n setShowControls(false);\n onMouseLeave?.(e);\n }}\n onPause={(e) => {\n setIsPlaying(false);\n onPause?.(e);\n }}\n onPlay={(e) => {\n setIsPlaying(true);\n onPlay?.(e);\n }}\n onPlaying={(e) => {\n setIsPlaying(true);\n onPlaying?.(e);\n }}\n preload={preload}\n style={{\n height: 'auto',\n maxWidth: '100%',\n ...customStyles?.video,\n }}\n width={width}\n {...rest}\n >\n <source src={src} />\n </video>\n </Flexbox>\n );\n },\n);\n\nVideo.displayName = 'Video';\n\nexport default Video;\n"],"mappings":";;;;;;;;;;;;AAgDA,MAAM,QAAQ,MACX,EACC,KACA,UAAU,QACV,KACA,OACA,YACA,WACA,YAAY,QACZ,WAAW,QACX,WACA,UACA,SACA,SACA,QACA,WACA,OACA,QACA,cACA,QAAQ,cACR,cACA,UAAU,MACV,WACA,UAAU,UACV,UACA,GAAG,WACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CAGvD,MAAM,eAAe,cAAsC;EACzD,MAAMA,OAA+B,EAAE;AACvC,MAAI,cAAc,OAChB,MAAK,wBAAwB,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;AAElF,MAAI,aAAa,OACf,MAAK,uBAAuB,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;AAE/E,MAAI,cAAc,OAChB,MAAK,wBAAwB,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;AAElF,MAAI,aAAa,OACf,MAAK,uBAAuB,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;AAE/E,SAAO;IACN;EAAC;EAAW;EAAU;EAAW;EAAS,CAAC;AAE9C,KAAI,UACF,QACE,oBAAC,SAAS;EACR;EACA,OAAO;GACL,cAAc,OAAO;GACrB;GACA;GACA;GACA;GACA;GACA;GACD;GACD;AAGN,QACE,qBAACC;EACC,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,WAAW,YAAY,QAAQ;EAC5D;EACH;EACL,OAAO;GACL,GAAG;GACH,GAAG;GACH,GAAG,cAAc;GAClB;EACM;aAEN,WAAW,CAAC,aACX,oBAACA;GACC,OAAO;GACP,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;GAC5C,SAAS;GACT,OAAO,cAAc;aAErB,oBAACC;IAAW,OAAO;IAAQ,MAAM;IAAU,SAAS;KAAY;IACxD,EAEZ,oBAAC;GACW;GACV,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;GAC9C,UAAU;GACF;GACR,UAAU,MAAM;AACd,iBAAa,MAAM;AACnB,cAAU,EAAE;;GAEd,eAAe,MAAM;AACnB,oBAAgB,KAAK;AACrB,mBAAe,EAAE;;GAEnB,eAAe,MAAM;AACnB,oBAAgB,MAAM;AACtB,mBAAe,EAAE;;GAEnB,UAAU,MAAM;AACd,iBAAa,MAAM;AACnB,cAAU,EAAE;;GAEd,SAAS,MAAM;AACb,iBAAa,KAAK;AAClB,aAAS,EAAE;;GAEb,YAAY,MAAM;AAChB,iBAAa,KAAK;AAClB,gBAAY,EAAE;;GAEP;GACT,OAAO;IACL,QAAQ;IACR,UAAU;IACV,GAAG,cAAc;IAClB;GACM;GACP,GAAI;aAEJ,oBAAC,YAAY,MAAO;IACd;GACA;EAGf;AAED,MAAM,cAAc;AAEpB,oBAAe"}