feat: playlist download (#168)

* feat: playlist download

* refactor: update download filename to match selected object name

src/hooks/useDownload.ts

@@ -1,6 +1,6 @@
 import axios from "axios"
 import { local, password, selectedObjs as _selectedObjs } from "~/store"
-import { fsList, notify, pathJoin } from "~/utils"
+import { fsList, notify, pathBase, pathJoin } from "~/utils"
 import { getLinkByDirAndObj, useRouter, useT } from "~/hooks"
 import { useSelectedLink } from "~/hooks"
 import { Obj } from "~/types"
@@ -38,7 +38,7 @@ async function getSaveDir(rpc_url: string, rpc_secret: string) {
   return save_dir
 }
 export const useDownload = () => {
-  const { rawLinks } = useSelectedLink()
+  const { rawLinks, rawLinksText } = useSelectedLink()
   const t = useT()
   const { pathname } = useRouter()
   return {
@@ -159,5 +159,22 @@ export const useDownload = () => {
         notify.error(`failed to send to aria2: ${e}`)
       }
     },
+    playlist_download: () => {
+      const a = document.createElement("a")
+      a.href = URL.createObjectURL(
+        new Blob([rawLinksText(true)], { type: "application/x-mpegURL" }),
+      )
+      const selectedObjs = _selectedObjs()
+      let saveName = pathBase(pathname())
+      if (selectedObjs.length === 1) {
+        saveName = selectedObjs[0].name
+      }
+      if (!saveName) {
+        saveName = t("manage.sidemenu.home")
+      }
+      a.download = `${saveName}.m3u8`
+      a.click()
+      URL.revokeObjectURL(a.href)
+    },
   }
 }

src/lang/en/home.json

@@ -66,6 +66,7 @@
     "send_aria2_success": "Send to aria2 successfully",
     "pre_package_download-tips": "Using streamsaver in the browser instead of the server for package download requires the corresponding storage to support cors, and the unsupported storage will fail.",
     "package_download-tips": "Downloading, please wait don't close the page",
+    "playlist_download": "Playlist Download",
     "upload": "Upload",
     "local_settings": "Local Settings",
     "recursive_move": "Recursive Move",

src/pages/home/folder/context-menu.tsx

@@ -29,7 +29,8 @@ export const ContextMenu = () => {
   const t = useT()
   const { colorMode } = useColorMode()
   const { copySelectedRawLink, copySelectedPreviewPage } = useCopyLink()
-  const { batchDownloadSelected, sendToAria2 } = useDownload()
+  const { batchDownloadSelected, sendToAria2, playlist_download } =
+    useDownload()
   const canPackageDownload = () => {
     return UserMethods.is_admin(me()) || getSettingBool("package_download")
   }
@@ -147,6 +148,9 @@ export const ContextMenu = () => {
             <Item onClick={() => bus.emit("tool", "package_download")}>
               {t("home.toolbar.package_download")}
             </Item>
+            <Item onClick={playlist_download}>
+              {t("home.toolbar.playlist_download")}
+            </Item>
           </Show>
           <Item onClick={sendToAria2}>{t("home.toolbar.send_aria2")}</Item>
         </Submenu>

src/pages/home/toolbar/Download.tsx

@@ -23,7 +23,8 @@ import { CenterIcon } from "./Icon"
 export const Download = () => {
   const t = useT()
   const colorScheme = "neutral"
-  const { batchDownloadSelected, sendToAria2 } = useDownload()
+  const { batchDownloadSelected, sendToAria2, playlist_download } =
+    useDownload()
   return (
     <Menu placement="top" offset={10}>
       <MenuTrigger as={CenterIcon} name="download" />
@@ -44,6 +45,9 @@ export const Download = () => {
           >
             {t("home.toolbar.package_download")}
           </MenuItem>
+          <MenuItem colorScheme={colorScheme} onSelect={playlist_download}>
+            {t("home.toolbar.playlist_download")}
+          </MenuItem>
         </Show>
         <MenuItem colorScheme={colorScheme} onSelect={sendToAria2}>
           {t("home.toolbar.send_aria2")}