Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-21 02:32:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add ad dismiss X

Browse source
This commit is contained in:
Pas 2025-03-22 19:29:20 -06:00
parent 84428f0d42
commit ed30a15b43
1 changed files with 27 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/pages/parts/home/HeroPart.tsx
View file

@ -3,6 +3,7 @@ import Sticky from "react-sticky-el";
import { useWindowSize } from "react-use"; import { useWindowSize } from "react-use";
import { SearchBarInput } from "@/components/form/SearchBar"; import { SearchBarInput } from "@/components/form/SearchBar";
import { Icon, Icons } from "@/components/Icon";
import { ThinContainer } from "@/components/layout/ThinContainer"; import { ThinContainer } from "@/components/layout/ThinContainer";
import { useSlashFocus } from "@/components/player/hooks/useSlashFocus"; import { useSlashFocus } from "@/components/player/hooks/useSlashFocus";
import { HeroTitle } from "@/components/text/HeroTitle"; import { HeroTitle } from "@/components/text/HeroTitle";
@ -33,6 +34,9 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
const { t: randomT } = useRandomTranslation(); const { t: randomT } = useRandomTranslation();
const [search, setSearch, setSearchUnFocus] = searchParams; const [search, setSearch, setSearchUnFocus] = searchParams;
const [, setShowBg] = useState(false); const [, setShowBg] = useState(false);
const [isAdDismissed, setIsAdDismissed] = useState(() => {
return localStorage.getItem("adDismissed") === "true";
});
const bannerSize = useBannerSize(); const bannerSize = useBannerSize();
const stickStateChanged = useCallback( const stickStateChanged = useCallback(
(isFixed: boolean) => { (isFixed: boolean) => {
@ -58,6 +62,11 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
? -40 // landscape ? -40 // landscape
: 0; // portrait : 0; // portrait
const dismissAd = useCallback(() => {
setIsAdDismissed(true);
localStorage.setItem("adDismissed", "true");
}, []);
useEffect(() => { useEffect(() => {
if (windowWidth > 1280) { if (windowWidth > 1280) {
// On large screens the bar goes inline with the nav elements // On large screens the bar goes inline with the nav elements
@ -102,12 +111,25 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
</div> </div>
{/* Optional ad */} {/* Optional ad */}
{conf().SHOW_AD ? ( {conf().SHOW_AD && !isAdDismissed ? (
<div className="-mb-10 md:-mb-20 w-[16rem] mx-auto"> <div className="-mb-10 md:-mb-20 w-[16rem] mx-auto relative group">
{conf().AD_CONTENT_URL.length !== 0 ? ( {conf().AD_CONTENT_URL.length !== 0 ? (
<a href={conf().AD_CONTENT_URL[0]}> <div>
<img src={conf().AD_CONTENT_URL[1]} alt="ad for zaccounts" /> <button
</a> onClick={dismissAd}
type="button"
className="absolute -top-2 -right-2 w-6 h-6 bg-mediaCard-hoverBackground rounded-full flex items-center justify-center md:opacity-0 group-hover:opacity-100 transition-opacity duration-300"
aria-label="Dismiss ad"
>
<Icon
className="text-xs font-semibold text-type-secondary"
icon={Icons.X}
/>
</button>
<a href={conf().AD_CONTENT_URL[0]}>
<img src={conf().AD_CONTENT_URL[1]} alt="ad for zaccounts" />
</a>
</div>
) : null} ) : null}
<p className="text-xs text-type-dimmed text-center pt-2"> <p className="text-xs text-type-dimmed text-center pt-2">
<a <a