This repository has been archived on 2024-10-29. You can view files and clone it, but cannot push or open issues or pull requests.
scoresaber-reloadedv3/src/components/background-cover.tsx

48 lines
1.4 KiB
TypeScript
Raw Normal View History

2024-09-08 21:35:32 +00:00
"use client";
import { useLiveQuery } from "dexie-react-hooks";
2024-09-11 22:10:16 +00:00
import { config } from "../../config";
import { getImageUrl } from "@/common/image-utils";
2024-09-08 21:35:32 +00:00
import useDatabase from "../hooks/use-database";
export default function BackgroundCover() {
2024-09-08 21:35:32 +00:00
const database = useDatabase();
const settings = useLiveQuery(() => database.getSettings());
2024-10-01 20:36:46 +00:00
if (settings == undefined || settings?.backgroundCover == undefined || settings?.backgroundCover == "") {
2024-09-08 21:35:32 +00:00
return null; // Don't render anything if the background image is not set
}
2024-10-01 20:36:46 +00:00
let backgroundCover = settings.backgroundCover;
let prependWebsiteUrl = false;
// Remove the prepending slash
2024-10-01 20:36:46 +00:00
if (backgroundCover.startsWith("/")) {
prependWebsiteUrl = true;
2024-10-01 20:36:46 +00:00
backgroundCover = backgroundCover.substring(1);
}
if (prependWebsiteUrl) {
2024-10-01 20:36:46 +00:00
backgroundCover = config.siteUrl + "/" + backgroundCover;
}
// Static background color
2024-10-01 20:36:46 +00:00
if (backgroundCover.startsWith("#")) {
return (
<div
className={`fixed -z-50 object-cover w-screen h-screen pointer-events-none select-none`}
2024-10-01 20:36:46 +00:00
style={{ backgroundColor: backgroundCover }}
/>
);
}
2024-09-08 21:35:32 +00:00
return (
// eslint-disable-next-line @next/next/no-img-element
<img
2024-10-01 20:36:46 +00:00
src={getImageUrl(backgroundCover)}
2024-09-08 21:35:32 +00:00
alt="Background image"
2024-09-11 17:39:46 +00:00
fetchPriority="high"
2024-09-11 19:10:27 +00:00
className={`fixed -z-50 object-cover w-screen h-screen blur-sm brightness-[33%] pointer-events-none select-none`}
2024-09-08 21:35:32 +00:00
/>
);
}