diff --git a/app/(feed)/explore/explore-page-client.tsx b/app/(feed)/explore/explore-page-client.tsx index b4fb75b..4a0bac8 100644 --- a/app/(feed)/explore/explore-page-client.tsx +++ b/app/(feed)/explore/explore-page-client.tsx @@ -18,6 +18,7 @@ import { toast } from "sonner"; import useInfiniteScroll from "@/hooks/use-infinite-scroll"; const PAGE_SIZE = 24; +const EXPLORE_POPUP_DISMISSED_KEY = "fairplay:explore-popup-dismissed"; function mergeUniqueById(prev: VideoDetails[], next: VideoDetails[]) { if (next.length === 0) return prev; @@ -58,7 +59,7 @@ export default function ExplorePageClient({ shouldFetchInit ? null : (initialError ?? null), ); - const [isPopupOpen, setIsPopupOpen] = useState(params.has("popup")); + const [isPopupOpen, setIsPopupOpen] = useState(false); const [page, setPage] = useState(1); @@ -112,9 +113,7 @@ export default function ExplorePageClient({ fetchVideos(1, "initial"); }, [fetchVideos, shouldFetchInit]); - useEffect(() => { - if (!params.has("popup")) return; - + const removePopupParam = useCallback(() => { const nextParams = new URLSearchParams(params.toString()); nextParams.delete("popup"); @@ -122,6 +121,21 @@ export default function ExplorePageClient({ router.replace(nextUrl, { scroll: false }); }, [params, pathname, router]); + const closePopup = useCallback(() => { + window.localStorage.setItem(EXPLORE_POPUP_DISMISSED_KEY, "true"); + setIsPopupOpen(false); + }, []); + + useEffect(() => { + if (!params.has("popup")) return; + + const hasDismissedPopup = + window.localStorage.getItem(EXPLORE_POPUP_DISMISSED_KEY) === "true"; + + setIsPopupOpen(!hasDismissedPopup); + removePopupParam(); + }, [params, removePopupParam]); + const loadMore = useCallback(() => { if (isLoading || isLoadingMore || !hasMore) return; fetchVideos(page + 1, "more"); @@ -177,7 +191,17 @@ export default function ExplorePageClient({ ) : null} - + { + if (open) { + setIsPopupOpen(true); + return; + } + + closePopup(); + }} + > Hang on a sec... @@ -188,7 +212,7 @@ export default function ExplorePageClient({ - setIsPopupOpen(false)}>Continue + Continue diff --git a/app/globals.css b/app/globals.css index 81b72ff..60349fd 100644 --- a/app/globals.css +++ b/app/globals.css @@ -147,6 +147,26 @@ html { scrollbar-gutter: stable; } +/* + * Radix UI injects the following CSS when a dialog box is opened: + * margin-right: 6px !important; + * --removed-body-scroll-bar-size: 6px; + * to compensate for the removal of the scrollbar. + * + * However, the scrollbar is already managed by "scrollbar-gutter: stable" on , + * these causes an overlay shift. + * + * The following style corrects this shift. +*/ +html body[data-scroll-locked] { + margin-right: 0 !important; + --removed-body-scroll-bar-size: 0px !important; +} + +body[data-scroll-locked] { + margin-right: 0 !important; +} + body { font-family: var(--font-body); line-height: 1.6;