Playlist downloads

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

@@ -15,6 +15,7 @@ function useDownloadLink() {
   const url = useMemo(() => {
     if (source?.type === "file" && currentQuality)
       return source.qualities[currentQuality]?.url ?? null;
+    if (source?.type === "hls") return source.url;
     return null;
   }, [source, currentQuality]);
   return url;
@@ -42,6 +43,7 @@ export function DownloadView({ id }: { id: string }) {
   const { t } = useTranslation();
   const downloadUrl = useDownloadLink();
 
+  const sourceType = usePlayerStore((s) => s.source?.type);
   const selectedCaption = usePlayerStore((s) => s.caption?.selected);
   const subtitleUrl = useMemo(
     () =>
@@ -60,36 +62,61 @@ export function DownloadView({ id }: { id: string }) {
       </Menu.BackLink>
       <Menu.Section>
         <div>
-          <Menu.ChevronLink onClick={() => router.navigate("/download/pc")}>
+          {sourceType === "hls" ? (
-            {t("player.menus.downloads.onPc.title")}
+            <>
-          </Menu.ChevronLink>
+              <Menu.Paragraph marginClass="mb-6">
-          <Menu.ChevronLink onClick={() => router.navigate("/download/ios")}>
+                <StyleTrans k="player.menus.downloads.hlsDisclaimer" />
-            {t("player.menus.downloads.onIos.title")}
+              </Menu.Paragraph>
-          </Menu.ChevronLink>
+
-          <Menu.ChevronLink
+              <Button className="w-full" href={downloadUrl} theme="purple">
-            onClick={() => router.navigate("/download/android")}
+                {t("player.menus.downloads.downloadPlaylist")}
-          >
+              </Button>
-            {t("player.menus.downloads.onAndroid.title")}
+              <Button
-          </Menu.ChevronLink>
+                className="w-full mt-2"
-
+                href={subtitleUrl ?? undefined}
-          <Menu.Divider />
+                disabled={!subtitleUrl}
-
+                theme="secondary"
-          <Menu.Paragraph marginClass="my-6">
+                download="subtitles.srt"
-            <StyleTrans k="player.menus.downloads.disclaimer" />
+              >
-          </Menu.Paragraph>
+                {t("player.menus.downloads.downloadCaption")}
-
+              </Button>
-          <Button className="w-full" href={downloadUrl} theme="purple">
+            </>
-            {t("player.menus.downloads.downloadVideo")}
+          ) : (
-          </Button>
+            <>
-          <Button
+              <Menu.ChevronLink onClick={() => router.navigate("/download/pc")}>
-            className="w-full mt-2"
+                {t("player.menus.downloads.onPc.title")}
-            href={subtitleUrl ?? undefined}
+              </Menu.ChevronLink>
-            disabled={!subtitleUrl}
+              <Menu.ChevronLink
-            theme="secondary"
+                onClick={() => router.navigate("/download/ios")}
-            download="subtitles.srt"
+              >
-          >
+                {t("player.menus.downloads.onIos.title")}
-            {t("player.menus.downloads.downloadCaption")}
+              </Menu.ChevronLink>
-          </Button>
+              <Menu.ChevronLink
+                onClick={() => router.navigate("/download/android")}
+              >
+                {t("player.menus.downloads.onAndroid.title")}
+              </Menu.ChevronLink>
+
+              <Menu.Divider />
+
+              <Menu.Paragraph marginClass="my-6">
+                <StyleTrans k="player.menus.downloads.disclaimer" />
+              </Menu.Paragraph>
+
+              <Button className="w-full" href={downloadUrl} theme="purple">
+                {t("player.menus.downloads.downloadVideo")}
+              </Button>
+              <Button
+                className="w-full mt-2"
+                href={subtitleUrl ?? undefined}
+                disabled={!subtitleUrl}
+                theme="secondary"
+                download="subtitles.srt"
+              >
+                {t("player.menus.downloads.downloadCaption")}
+              </Button>
+            </>
+          )}
         </div>
       </Menu.Section>
     </>