diff --git a/src/pages/TopFlix.tsx b/src/pages/TopFlix.tsx index c7e6ccb7..c19b4451 100644 --- a/src/pages/TopFlix.tsx +++ b/src/pages/TopFlix.tsx @@ -1,6 +1,6 @@ import classNames from "classnames"; import { ReactNode, useEffect, useState } from "react"; -import { Link } from "react-router-dom"; // Import Link from react-router-dom +import { useNavigate } from "react-router-dom"; // Import Link from react-router-dom import { ThiccContainer } from "@/components/layout/ThinContainer"; import { Divider } from "@/components/utils/Divider"; @@ -43,14 +43,10 @@ function isShowOrMovie(tmdbFullId: string): "series" | "movie" | "unknown" { function directLinkToContent(tmdbFullId: string) { if (isShowOrMovie(tmdbFullId) === "series") { - return `/media/tmdb-tv-${tmdbFullId.split("-")[1]}#/media/tmdb-tv-${ - tmdbFullId.split("-")[1] - }`; + return `/media/tmdb-tv-${tmdbFullId.split("-")[1]}`; } if (isShowOrMovie(tmdbFullId) === "movie") { - return `/media/tmdb-movie-${tmdbFullId.split("-")[1]}#/media/tmdb-movie-${ - tmdbFullId.split("-")[1] - }`; + return `/media/tmdb-movie-${tmdbFullId.split("-")[1]}`; } return null; } @@ -61,15 +57,16 @@ function ConfigValue(props: { id: string; children?: ReactNode; }) { + const navigate = useNavigate(); const link = directLinkToContent(props.id); return ( <>

{link ? ( - +

navigate(link)} className="hover:underline"> {props.name} - +

) : (

{props.name}

)} @@ -160,14 +157,12 @@ async function getTimeSinceProcessStart(): Promise { const timeDifference = currentTime.getTime() - new Date(processStartTime).getTime(); - // Convert the time difference to a human-readable format const hours = Math.floor(timeDifference / (1000 * 60 * 60)); const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000); - const percentageOfHour = Math.ceil(minutes / 60); if (hours > 0) { - return `${hours}.${percentageOfHour} hours`; + return `${hours} hours`; } if (minutes > 0) { return `${minutes} minutes`; @@ -178,7 +173,6 @@ async function getTimeSinceProcessStart(): Promise { export function TopFlix() { const [recentPlayedItems, setRecentPlayedItems] = useState([]); const [totalViews, setTotalViews] = useState(null); - const [loading, setLoading] = useState(true); const [currentPage, setCurrentPage] = useState(1); const itemsPerPage = 10; const maxItemsToShow = 100; // Maximum items to show @@ -203,9 +197,6 @@ export function TopFlix() { }) .catch((error) => { console.error("Error fetching recent played items:", error); - }) - .finally(() => { - setLoading(false); }); getTotalViews() .then((views) => { @@ -237,12 +228,6 @@ export function TopFlix() { })); } - if (loading) { - return ( -

Loading...

- ); - } - return ( diff --git a/src/setup/Layout.tsx b/src/setup/Layout.tsx index d62d8e8a..bbbd5d8f 100644 --- a/src/setup/Layout.tsx +++ b/src/setup/Layout.tsx @@ -28,7 +28,6 @@ export function Layout(props: { children: ReactNode }) { const location = useBannerStore((s) => s.location); const [extensionState, setExtensionState] = useState("unknown"); - const [loading, setLoading] = useState(true); const [isMobile, setIsMobile] = useState(false); useEffect(() => { @@ -37,7 +36,6 @@ export function Layout(props: { children: ReactNode }) { getExtensionState().then((state) => { if (isMounted) { setExtensionState(state); - setLoading(false); } }); @@ -56,12 +54,6 @@ export function Layout(props: { children: ReactNode }) { }; }, []); - if (loading) { - return ( -

Loading...

- ); - } - return (
{extensionState !== "success" && !isMobile && ( diff --git a/src/stores/banner/BannerLocation.tsx b/src/stores/banner/BannerLocation.tsx index d90c3bad..6207eb71 100644 --- a/src/stores/banner/BannerLocation.tsx +++ b/src/stores/banner/BannerLocation.tsx @@ -1,5 +1,5 @@ import { useEffect } from "react"; -import { useTranslation } from "react-i18next"; +import { Trans, useTranslation } from "react-i18next"; import { useLocation, useNavigate } from "react-router-dom"; import { Icon, Icons } from "@/components/Icon"; @@ -22,6 +22,13 @@ export function Banner(props: { info: Icons.CIRCLE_EXCLAMATION, }; + useEffect(() => { + const hideBannerFlag = sessionStorage.getItem("hideBanner"); + if (hideBannerFlag) { + hideBanner(props.id, true); + } + }, [hideBanner, props.id]); + return (
hideBanner(props.id, true)} + onClick={() => { + hideBanner(props.id, true); + sessionStorage.setItem("hideBanner", "true"); + }} > @@ -57,45 +67,60 @@ export function ExtensionBanner(props: { const { pathname } = useLocation(); useEffect(() => { - if (!loc) return; - setLocation(loc); - return () => { - setLocation(null); - }; + if (loc) { + setLocation(loc); + return () => { + setLocation(null); + }; + } }, [setLocation, loc]); + const hideBannerFlag = sessionStorage.getItem("hideBanner"); + if (hideBannerFlag) { + return null; + } + if (currentLocation !== loc || pathname === "/onboarding/extension") return null; - // Show the banner with a 45% chance - if (Math.random() < 0.45) { + // Show the banner with a 40% chance + if (Math.random() < 0.4) { let bannerText = ""; switch (props.extensionState) { case "noperms": - bannerText = - "You don't have the necessary permissions to use the extension."; + bannerText = "The extension does'nt have the necessary permissions."; break; case "outdated": - bannerText = - "Your extension is outdated. Please update it for better performance."; + bannerText = "Your extension is outdated. Please update it here."; break; case "disallowed": - bannerText = "The extension is not enabled on this page."; + bannerText = + "The extension is not enabled, click here to fix it."; + break; + case "failed": + bannerText = + "The extension is broken... Please click here."; break; default: bannerText = - "You don't have the extension! Download it here for better quality."; + "You don't have the extension! Download it here for better quality."; + break; } return ( -
navigate("/onboarding/extension")} - style={{ cursor: "pointer" }} - > - - {bannerText} - -
+ +
navigate("/onboarding/extension")} + style={{ cursor: "pointer" }} + > + , + }} + /> +
+
); } return null; @@ -119,6 +144,9 @@ export function BannerLocation(props: { location?: string }) { if (currentLocation !== loc) return null; + const hideBannerFlag = sessionStorage.getItem("hideBanner"); + if (hideBannerFlag) return null; + return (
{!isOnline && !ignoredBannerIds.includes("offline") ? (