You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.3 KiB
38 lines
1.3 KiB
import { IconPatch } from "@/components/buttons/IconPatch"; |
|
import { Icons } from "@/components/Icon"; |
|
import { Title } from "@/components/text/Title"; |
|
import { useVideoPlayerDescriptor } from "@/video/state/hooks"; |
|
import { useError } from "@/video/state/logic/error"; |
|
import { useMeta } from "@/video/state/logic/meta"; |
|
import { ReactNode } from "react"; |
|
import { VideoPlayerHeader } from "./VideoPlayerHeader"; |
|
|
|
interface VideoPlayerErrorProps { |
|
onGoBack?: () => void; |
|
children?: ReactNode; |
|
} |
|
|
|
export function VideoPlayerError(props: VideoPlayerErrorProps) { |
|
const descriptor = useVideoPlayerDescriptor(); |
|
const meta = useMeta(descriptor); |
|
const errorData = useError(descriptor); |
|
|
|
const err = errorData.error; |
|
|
|
if (!err) return props.children as any; |
|
|
|
return ( |
|
<div> |
|
<div className="absolute inset-0 flex flex-col items-center justify-center bg-denim-100"> |
|
<IconPatch icon={Icons.WARNING} className="mb-6 text-red-400" /> |
|
<Title>Failed to load media</Title> |
|
<p className="my-6 max-w-lg text-center"> |
|
{err?.name}: {err?.description} |
|
</p> |
|
</div> |
|
<div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2"> |
|
<VideoPlayerHeader media={meta?.meta.meta} onClick={props.onGoBack} /> |
|
</div> |
|
</div> |
|
); |
|
}
|
|
|