File size: 1,383 Bytes
48c7837 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
import React, { ReactNode } from "react"
export function Video({
video = "",
isBusy = false,
progress = 0,
status = "",
error = "",
children = undefined,
}: {
video: string
isBusy: boolean
progress: number
status: string
error: ReactNode
children?: ReactNode
} = {
video: "",
isBusy: false,
progress: 0,
status: "",
error: "",
children: undefined,
}) {
const placeholder = <div
className="
text-base
text-center
text-stone-50/90 dark:text-stone-50/90
"
>{
error ? <span>{error}</span> :
<span>No video yet</span>
}</div>
const hasVideoContent = Boolean(video && video?.length > 128)
return (
<>{
children ? children : isBusy ? <div className="
flex flex-col
items-center justify-center
text-center space-y-1.5">
<p className="text-2xl font-bold">{progress}%</p>
<p className="text-base text-white/70">{
status
? status
: error
? <span>{error}</span>
: placeholder // to prevent layout changes
}</p>
</div>
: hasVideoContent ? <video
src={video}
controls
playsInline
// I think we can't autoplay with sound,
// so let's disable auto-play
// autoPlay
// muted
loop
className="object-cover"
style={{
}}
/> : placeholder
}</>
)
} |