refactor: support media titles in m3u8 playlist (#176)

Author: qilme

src/hooks/useDownload.ts

@@ -38,7 +38,7 @@ async function getSaveDir(rpc_url: string, rpc_secret: string) {
   return save_dir
 }
 export const useDownload = () => {
-  const { rawLinks, rawLinksText } = useSelectedLink()
+  const { rawLinks } = useSelectedLink()
   const t = useT()
   const { pathname } = useRouter()
   return {
@@ -159,19 +159,25 @@ 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()
+    playlistDownloadSelected: () => {
+      const selectedObjs = _selectedObjs().filter((obj) => !obj.is_dir)
       let saveName = pathBase(pathname())
       if (selectedObjs.length === 1) {
         saveName = selectedObjs[0].name
       }
       if (!saveName) {
         saveName = t("manage.sidemenu.home")
       }
+      const m3u8Content = selectedObjs.reduce(
+        (acc, obj, index) =>
+          `${acc}#EXTINF:-1,${obj.name}\n${rawLinks(true)[index]}\n`,
+        "#EXTM3U\n",
+      )
+      const m3u8Blob = new Blob([m3u8Content], {
+        type: "application/x-mpegURL",
+      })
+      const a = document.createElement("a")
+      a.href = URL.createObjectURL(m3u8Blob)
       a.download = `${saveName}.m3u8`
       a.click()
       URL.revokeObjectURL(a.href)

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

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

src/pages/home/toolbar/Download.tsx

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