Fix banner and direct link to media + improve load time

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 (
     <>
       <div className="flex">
         <p className="flex-1 font-bold text-white pr-5 pl-3">
           {link ? (
-            <Link to={link} className="hover:underline">
+            <p onClick={() => navigate(link)} className="hover:underline">
               {props.name}
-            </Link>
+            </p>
           ) : (
             <p>{props.name}</p>
           )}
@@ -160,14 +157,12 @@ async function getTimeSinceProcessStart(): Promise<string> {
   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<string> {
 export function TopFlix() {
   const [recentPlayedItems, setRecentPlayedItems] = useState<any[]>([]);
   const [totalViews, setTotalViews] = useState<string | null>(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 (
-      <p className="flex items-center justify-center h-screen">Loading...</p>
-    );
-  }
-
   return (
     <SubPageLayout>
       <ThiccContainer>

src/setup/Layout.tsx

@@ -28,7 +28,6 @@ export function Layout(props: { children: ReactNode }) {
   const location = useBannerStore((s) => s.location);
   const [extensionState, setExtensionState] =
     useState<ExtensionStatus>("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 (
-      <p className="flex items-center justify-center h-screen">Loading...</p>
-    );
-  }
-
   return (
     <div>
       {extensionState !== "success" && !isMobile && (

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 (
     <div ref={ref}>
       <div
@@ -36,7 +43,10 @@ export function Banner(props: {
         </div>
         <span
           className="absolute right-4 hover:cursor-pointer"
-          onClick={() => hideBanner(props.id, true)}
+          onClick={() => {
+            hideBanner(props.id, true);
+            sessionStorage.setItem("hideBanner", "true");
+          }}
         >
           <Icon icon={Icons.X} />
         </span>
@@ -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 <bold>here</bold> to fix it.";
+        break;
+      case "failed":
+        bannerText =
+          "The extension is broken... Please click <bold>here</bold>.";
         break;
       default:
         bannerText =
-          "You don't have the extension! Download it here for better quality.";
+          "You don't have the extension! Download it <bold>here</bold> for better quality.";
+        break;
     }
 
     return (
-      <div
-        onClick={() => navigate("/onboarding/extension")}
-        style={{ cursor: "pointer" }}
-      >
-        <Banner id="extension" type="info">
-          {bannerText}
-        </Banner>
-      </div>
+      <Banner id="extension" type="info">
+        <div
+          onClick={() => navigate("/onboarding/extension")}
+          style={{ cursor: "pointer" }}
+        >
+          <Trans
+            i18nKey={bannerText}
+            components={{
+              bold: <span className="font-bold" />,
+            }}
+          />
+        </div>
+      </Banner>
     );
   }
   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 (
     <div>
       {!isOnline && !ignoredBannerIds.includes("offline") ? (