Add unable to download route

src/components/player/atoms/Settings.tsx

@@ -5,8 +5,6 @@ import { OverlayAnchor } from "@/components/overlays/OverlayAnchor";
 import { Overlay } from "@/components/overlays/OverlayDisplay";
 import { OverlayPage } from "@/components/overlays/OverlayPage";
 import { OverlayRouter } from "@/components/overlays/OverlayRouter";
-import { DownloadView } from "@/components/player/atoms/settings/DownloadView";
-import { SettingsMenu } from "@/components/player/atoms/settings/SettingsMenu";
 import {
   EmbedSelectionView,
   SourceSelectionView,
@@ -18,8 +16,10 @@ import { usePlayerStore } from "@/stores/player/store";
 
 import { CaptionSettingsView } from "./settings/CaptionSettingsView";
 import { CaptionsView } from "./settings/CaptionsView";
+import { DownloadRoutes } from "./settings/Downloads";
 import { PlaybackSettingsView } from "./settings/PlaybackSettingsView";
 import { QualityView } from "./settings/QualityView";
+import { SettingsMenu } from "./settings/SettingsMenu";
 
 function SettingsOverlay({ id }: { id: string }) {
   const [chosenSourceId, setChosenSourceId] = useState<string | null>(null);
@@ -71,11 +71,7 @@ function SettingsOverlay({ id }: { id: string }) {
             <PlaybackSettingsView id={id} />
           </Menu.Card>
         </OverlayPage>
-        <OverlayPage id={id} path="/download" width={343} height={530}>
+        <DownloadRoutes id={id} />
-          <Menu.Card>
-            <DownloadView id={id} />
-          </Menu.Card>
-        </OverlayPage>
       </OverlayRouter>
     </Overlay>
   );

src/components/player/atoms/settings/Downloads.tsx

@@ -1,4 +1,5 @@
 import { Icon, Icons } from "@/components/Icon";
+import { OverlayPage } from "@/components/overlays/OverlayPage";
 import { Menu } from "@/components/player/internals/ContextMenu";
 import { useOverlayRouter } from "@/hooks/useOverlayRouter";
 import { usePlayerStore } from "@/stores/player/store";
@@ -68,3 +69,37 @@ export function DownloadView({ id }: { id: string }) {
     </>
   );
 }
+
+export function CantDownloadView({ id }: { id: string }) {
+  const router = useOverlayRouter(id);
+
+  return (
+    <>
+      <Menu.BackLink onClick={() => router.navigate("/")}>
+        Playback settings
+      </Menu.BackLink>
+      <Menu.Section>
+        <Menu.Paragraph>
+          Insert explanation for why you can&apos;t download HLS here
+        </Menu.Paragraph>
+      </Menu.Section>
+    </>
+  );
+}
+
+export function DownloadRoutes({ id }: { id: string }) {
+  return (
+    <>
+      <OverlayPage id={id} path="/download" width={343} height={530}>
+        <Menu.CardWithScrollable>
+          <DownloadView id={id} />
+        </Menu.CardWithScrollable>
+      </OverlayPage>
+      <OverlayPage id={id} path="/download/unable" width={343} height={341}>
+        <Menu.CardWithScrollable>
+          <CantDownloadView id={id} />
+        </Menu.CardWithScrollable>
+      </OverlayPage>
+    </>
+  );
+}

src/components/player/atoms/settings/SettingsMenu.tsx

@@ -59,7 +59,11 @@ export function SettingsMenu({ id }: { id: string }) {
         </Menu.ChevronLink>
         <Menu.Link
           clickable
-          onClick={() => router.navigate("/download")}
+          onClick={() =>
+            router.navigate(
+              source?.type === "file" ? "/download" : "/download/unable"
+            )
+          }
           rightSide={<Icon className="text-xl" icon={Icons.DOWNLOAD} />}
           className={source?.type === "file" ? "opacity-100" : "opacity-50"}
         >