80 lines
1.9 KiB
TypeScript
80 lines
1.9 KiB
TypeScript
import { Loader } from "lucide-react";
|
|
|
|
import { type VideoCookieName } from "@/front/types/cookie";
|
|
import useCookieNotice from "@/hooks/use-cookie-notice";
|
|
import { cn, GetTranslation } from "@/lib/utils";
|
|
|
|
interface Props {
|
|
service: VideoCookieName;
|
|
embedUrl: string;
|
|
title: string;
|
|
className?: string;
|
|
iframeContainerClassName?: string;
|
|
}
|
|
|
|
function NoStatusComponent({
|
|
loading,
|
|
service,
|
|
accept,
|
|
}: {
|
|
loading: boolean;
|
|
service: VideoCookieName;
|
|
accept: () => void;
|
|
}) {
|
|
const warning = GetTranslation(
|
|
`uwil-common::cookie-notice.custom.${service}.warning`,
|
|
);
|
|
const acceptLabel = GetTranslation(
|
|
`uwil-common::cookie-notice.custom.${service}.accept`,
|
|
);
|
|
return loading ? (
|
|
<div className="py-48 flex justify-center">
|
|
<Loader className="size-8 text-primary-foreground/40 animate-spin" />
|
|
</div>
|
|
) : (
|
|
<div className="py-48 flex gap-2 justify-center flex-col md:flex-row">
|
|
<p>{warning}</p>
|
|
<button
|
|
className="underline font-bold hover:opacity-80 transition"
|
|
type="button"
|
|
onClick={accept}
|
|
>
|
|
{acceptLabel}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function VideoEmbedWithConsent({
|
|
service,
|
|
embedUrl,
|
|
title,
|
|
className = "",
|
|
iframeContainerClassName = "",
|
|
}: Props) {
|
|
const { status, loading, accept } = useCookieNotice(service);
|
|
|
|
return (
|
|
<div className={` text-center ${className}`}>
|
|
{!status ? (
|
|
<NoStatusComponent
|
|
loading={loading}
|
|
service={service}
|
|
accept={accept}
|
|
/>
|
|
) : (
|
|
<div className={cn("h-[81vh]", iframeContainerClassName)}>
|
|
<iframe
|
|
className="border-none"
|
|
width="100%"
|
|
height="100%"
|
|
src={embedUrl}
|
|
title={title}
|
|
allow="autoplay; encrypted-media"
|
|
allowFullScreen
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|