Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-09-21 11:30:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #949 from movie-web/feature/#944

Browse Source 
Add dismissable banners
This commit is contained in:
William Oldham 2024-02-28 11:31:32 +00:00 committed by GitHub
commit acec24b9b5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/stores/banner/BannerLocation.tsx
View File

@ -10,6 +10,7 @@ export function Banner(props: {
id: string; id: string;
}) { }) {
const [ref] = useRegisterBanner<HTMLDivElement>(props.id); const [ref] = useRegisterBanner<HTMLDivElement>(props.id);
const hideBanner = useBannerStore((s) => s.hideBanner);
const styles = { const styles = {
error: "bg-[#C93957] text-white", error: "bg-[#C93957] text-white",
}; };
@ -29,6 +30,12 @@ export function Banner(props: {
<Icon icon={icons[props.type]} /> <Icon icon={icons[props.type]} />
<div>{props.children}</div> <div>{props.children}</div>
</div> </div>
<span
className="absolute right-4 hover:cursor-pointer"
onClick={() => hideBanner(props.id, true)}
>
<Icon icon={Icons.X} />
</span>
</div> </div>
</div> </div>
); );
@ -38,6 +45,7 @@ export function BannerLocation(props: { location?: string }) {
const { t } = useTranslation(); const { t } = useTranslation();
const isOnline = useBannerStore((s) => s.isOnline); const isOnline = useBannerStore((s) => s.isOnline);
const setLocation = useBannerStore((s) => s.setLocation); const setLocation = useBannerStore((s) => s.setLocation);
const ignoredBannerIds = useBannerStore((s) => s.ignoredBannerIds);
const currentLocation = useBannerStore((s) => s.location); const currentLocation = useBannerStore((s) => s.location);
const loc = props.location ?? null; const loc = props.location ?? null;
@ -53,7 +61,7 @@ export function BannerLocation(props: { location?: string }) {
return ( return (
<div> <div>
{!isOnline ? ( {!isOnline && !ignoredBannerIds.includes("offline") ? (
<Banner id="offline" type="error"> <Banner id="offline" type="error">
{t("navigation.banner.offline")} {t("navigation.banner.offline")}
</Banner> </Banner>

8
src/stores/banner/index.ts
View File

@ -13,9 +13,10 @@ interface BannerStore {
isOnline: boolean; isOnline: boolean;
isTurnstile: boolean; isTurnstile: boolean;
location: string | null; location: string | null;
ignoredBannerIds: string[];
updateHeight(id: string, height: number): void; updateHeight(id: string, height: number): void;
showBanner(id: string): void; showBanner(id: string): void;
hideBanner(id: string): void; hideBanner(id: string, force?: boolean): void;
setLocation(loc: string | null): void; setLocation(loc: string | null): void;
updateOnline(isOnline: boolean): void; updateOnline(isOnline: boolean): void;
updateTurnstile(isTurnstile: boolean): void; updateTurnstile(isTurnstile: boolean): void;
@ -27,6 +28,7 @@ export const useBannerStore = create(
isOnline: true, isOnline: true,
isTurnstile: false, isTurnstile: false,
location: null, location: null,
ignoredBannerIds: [],
updateOnline(isOnline) { updateOnline(isOnline) {
set((s) => { set((s) => {
s.isOnline = isOnline; s.isOnline = isOnline;
@ -45,14 +47,16 @@ export const useBannerStore = create(
showBanner(id) { showBanner(id) {
set((s) => { set((s) => {
if (s.banners.find((v) => v.id === id)) return; if (s.banners.find((v) => v.id === id)) return;
if (s.ignoredBannerIds.includes(id)) return;
s.banners.push({ s.banners.push({
id, id,
height: 0, height: 0,
}); });
}); });
}, },
hideBanner(id) { hideBanner(id, force = false) {
set((s) => { set((s) => {
if (force) s.ignoredBannerIds.push(id);
s.banners = s.banners.filter((v) => v.id !== id); s.banners = s.banners.filter((v) => v.id !== id);
}); });
}, },