detect tv and hide title?

src/hooks/useIsTv.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+
+export function useIsTV() {
+  const [isTV, setIsTV] = useState(false);
+
+  useEffect(() => {
+    function detectTV() {
+      const userAgent = navigator.userAgent || "";
+
+      const tvKeywords = [
+        "Silk",
+        "SmartTV",
+        "Tizen",
+        "Web0S",
+        "SamsungBrowser",
+        "HbbTV",
+        "Viera",
+        "NetCast",
+        "AppleTV",
+        "Android TV",
+        "GoogleTV",
+        "Roku",
+        "PlayStation",
+        "Xbox",
+        "Opera TV",
+        "AquosBrowser",
+        "Hisense",
+        "SonyBrowser",
+        "SharpBrowser",
+        "AFT", // Amazon Fire TV
+        "Chromecast",
+      ];
+
+      const isTVDetected = tvKeywords.some((keyword) =>
+        userAgent.toLowerCase().includes(keyword.toLowerCase()),
+      );
+
+      if (isTVDetected) {
+        setIsTV(true);
+      }
+    }
+
+    detectTV();
+  }, []);
+
+  return {
+    isTV,
+  };
+}

src/pages/parts/home/HeroPart.tsx

@@ -6,6 +6,7 @@ import { SearchBarInput } from "@/components/form/SearchBar";
 import { ThinContainer } from "@/components/layout/ThinContainer";
 import { useSlashFocus } from "@/components/player/hooks/useSlashFocus";
 import { HeroTitle } from "@/components/text/HeroTitle";
+import { useIsTV } from "@/hooks/useIsTv";
 import { useRandomTranslation } from "@/hooks/useRandomTranslation";
 import { useSearchQuery } from "@/hooks/useSearchQuery";
 import { useBannerSize } from "@/stores/banner";
@@ -41,6 +42,8 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
   );
   const { width: windowWidth, height: windowHeight } = useWindowSize();
 
+  const { isTV } = useIsTV();
+
   // Detect if running as a PWA on iOS
   const isIOSPWA =
     /iPad|iPhone|iPod/i.test(navigator.userAgent) &&
@@ -74,7 +77,9 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
     <ThinContainer>
       <div className="mt-44 space-y-16 text-center">
         <div className="relative z-10 mb-16">
-          <HeroTitle className="mx-auto max-w-md">{title}</HeroTitle>
+          {isTV && search.length > 0 ? null : (
+            <HeroTitle className="mx-auto max-w-md">{title}</HeroTitle>
+          )}
         </div>
         <div className="relative h-20 z-30">
           <Sticky