60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import { usePathname } from "next/navigation";
|
|
import type { AppShellProps } from "@mantine/core";
|
|
|
|
import { useOptionalBoard } from "~/app/[locale]/boards/(content)/_context";
|
|
|
|
const supportedVideoFormats = ["mp4", "webm", "ogg"];
|
|
const isVideo = (url: string) => supportedVideoFormats.some((format) => url.toLowerCase().endsWith(`.${format}`));
|
|
|
|
export const useOptionalBackgroundProps = (): Partial<AppShellProps> => {
|
|
const board = useOptionalBoard();
|
|
const pathname = usePathname();
|
|
|
|
if (!board?.backgroundImageUrl) return {};
|
|
|
|
// Check if we are on a client board page
|
|
if (pathname.split("/").length > 3) return {};
|
|
|
|
if (isVideo(board.backgroundImageUrl)) {
|
|
return {};
|
|
}
|
|
|
|
return {
|
|
bg: `url(${board.backgroundImageUrl})`,
|
|
bgp: "center center",
|
|
bgsz: board.backgroundImageSize,
|
|
bgr: board.backgroundImageRepeat,
|
|
bga: board.backgroundImageAttachment,
|
|
};
|
|
};
|
|
|
|
export const BoardBackgroundVideo = () => {
|
|
const board = useOptionalBoard();
|
|
|
|
if (!board?.backgroundImageUrl) return null;
|
|
if (!isVideo(board.backgroundImageUrl)) return null;
|
|
|
|
const videoFormat = board.backgroundImageUrl.split(".").pop()?.toLowerCase();
|
|
|
|
if (!videoFormat) return null;
|
|
|
|
return (
|
|
<video
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
style={{
|
|
position: "fixed",
|
|
width: "100vw",
|
|
height: "100vh",
|
|
top: 0,
|
|
left: 0,
|
|
objectFit: board.backgroundImageSize,
|
|
}}
|
|
>
|
|
<source src={board.backgroundImageUrl} type={`video/${videoFormat}`} />
|
|
</video>
|
|
);
|
|
};
|