From e9efe50ce00c6cb92b980fe3fdf00d25a64a4525 Mon Sep 17 00:00:00 2001
From: Cooper Ransom <cooperransom08@outlook.com>
Date: Sun, 17 Mar 2024 16:28:53 -0400
Subject: [PATCH] Dont show extension banner on mobile

---
 src/pages/TopFlix.tsx |  1 +
 src/setup/Layout.tsx  | 19 ++++++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/pages/TopFlix.tsx b/src/pages/TopFlix.tsx
index c30404d9..f85cb850 100644
--- a/src/pages/TopFlix.tsx
+++ b/src/pages/TopFlix.tsx
@@ -182,6 +182,7 @@ export function TopFlix() {
               const type = isShowOrMovie(item.tmdbFullId);
               // const poster = await getPoster(tmdbId, type === "movie" ? TMDBContentTypes.MOVIE : TMDBContentTypes.TV);
               const poster = "";
+              console.log(poster);
               const media: MediaItem = {
                 id: tmdbId,
                 title: item.title,
diff --git a/src/setup/Layout.tsx b/src/setup/Layout.tsx
index 8f120e41..8c677a6e 100644
--- a/src/setup/Layout.tsx
+++ b/src/setup/Layout.tsx
@@ -29,6 +29,7 @@ export function Layout(props: { children: ReactNode }) {
   const [extensionState, setExtensionState] =
     useState<ExtensionStatus>("unknown");
   const [loading, setLoading] = useState(true);
+  const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
     let isMounted = true;
@@ -40,8 +41,18 @@ export function Layout(props: { children: ReactNode }) {
       }
     });
 
+    const mediaQuery = window.matchMedia("(max-width: 768px)"); // Adjust the max-width as per your needs
+    setIsMobile(mediaQuery.matches);
+
+    const handleResize = () => {
+      setIsMobile(mediaQuery.matches);
+    };
+
+    mediaQuery.addListener(handleResize);
+
     return () => {
       isMounted = false;
+      mediaQuery.removeListener(handleResize);
     };
   }, []);
 
@@ -53,9 +64,11 @@ export function Layout(props: { children: ReactNode }) {
 
   return (
     <div>
-      <div className="fixed inset-x-0 z-[1000]">
-        <ExtensionBanner extensionState={extensionState} />
-      </div>
+      {!isMobile && (
+        <div className="fixed inset-x-0 z-[1000]">
+          <ExtensionBanner extensionState={extensionState} />
+        </div>
+      )}
       <div
         style={{
           paddingTop: location === null ? `${bannerSize}px` : "0px",