add hls downloader

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

@@ -44,6 +44,22 @@ export function DownloadView({ id }: { id: string }) {
   const router = useOverlayRouter(id);
   const { t } = useTranslation();
   const downloadUrl = useDownloadLink();
+
+  // Custom function to process the download URL
+  const processDownloadUrl = useCallback(() => {
+    if (!downloadUrl) return "";
+
+    // Check if the URL contains the m3u8-proxy and the ?url= parameter
+    const match = downloadUrl.match(/m3u8-proxy\?url=(.*)$/);
+    if (match && match[1]) {
+      // Decode the URL component
+      return decodeURIComponent(match[1]);
+    }
+
+    return downloadUrl; // Return original if no specific pattern is found
+  }, [downloadUrl]);
+
+  const hlsDownload = `https://hls-downloader.pstream.org/?url=${encodeURIComponent(processDownloadUrl())}`;
   const [, copyToClipboard] = useCopyToClipboard();
 
   const sourceType = usePlayerStore((s) => s.source?.type);
@@ -66,14 +82,16 @@ export function DownloadView({ id }: { id: string }) {
       <Menu.Section>
         <div>
           {sourceType === "hls" ? (
-            <>
+            <div className="mb-6">
               <Menu.Paragraph marginClass="mb-6">
                 <StyleTrans k="player.menus.downloads.hlsDisclaimer" />
               </Menu.Paragraph>
-
+              <Button className="w-full mt-2" theme="purple" href={hlsDownload}>
+                Atempt download
+              </Button>
               <Button
-                className="w-full"
-                theme="purple"
+                className="w-full mt-2"
+                theme="secondary"
                 href={downloadUrl}
                 onClick={(event) => {
                   // Allow context menu & left click to copy
@@ -92,7 +110,7 @@ export function DownloadView({ id }: { id: string }) {
               >
                 {t("player.menus.downloads.downloadSubtitle")}
               </Button>
-            </>
+            </div>
           ) : (
             <>
               <Menu.ChevronLink onClick={() => router.navigate("/download/pc")}>