From 01ea3c6d1e42efe320e098918168d7f59b105795 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Sun, 22 Oct 2023 19:17:39 +0200
Subject: [PATCH] Add unable to download route

---
 src/components/player/atoms/Settings.tsx      | 10 ++----
 .../{DownloadView.tsx => Downloads.tsx}       | 35 +++++++++++++++++++
 .../player/atoms/settings/SettingsMenu.tsx    |  6 +++-
 3 files changed, 43 insertions(+), 8 deletions(-)
 rename src/components/player/atoms/settings/{DownloadView.tsx => Downloads.tsx} (72%)

diff --git a/src/components/player/atoms/Settings.tsx b/src/components/player/atoms/Settings.tsx
index f9ca3ae6..63029d1e 100644
--- a/src/components/player/atoms/Settings.tsx
+++ b/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}>
-          <Menu.Card>
-            <DownloadView id={id} />
-          </Menu.Card>
-        </OverlayPage>
+        <DownloadRoutes id={id} />
       </OverlayRouter>
     </Overlay>
   );
diff --git a/src/components/player/atoms/settings/DownloadView.tsx b/src/components/player/atoms/settings/Downloads.tsx
similarity index 72%
rename from src/components/player/atoms/settings/DownloadView.tsx
rename to src/components/player/atoms/settings/Downloads.tsx
index 37d39d34..4c7b3361 100644
--- a/src/components/player/atoms/settings/DownloadView.tsx
+++ b/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>
+    </>
+  );
+}
diff --git a/src/components/player/atoms/settings/SettingsMenu.tsx b/src/components/player/atoms/settings/SettingsMenu.tsx
index 4978c86c..57313fcf 100644
--- a/src/components/player/atoms/settings/SettingsMenu.tsx
+++ b/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"}
         >