From 1f2c28bd029ab7e989465ba53d6933a74fa0e809 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 16 Jun 2024 18:22:44 +0600
Subject: [PATCH] web: basic api interaction & downloading

download button now acts the way it should with various states
---
 web/src/components/save/Omnibox.svelte        |  2 +-
 .../save/buttons/DownloadButton.svelte        | 75 ++++++++++++++++++-
 web/src/lib/api.ts                            | 31 ++++++++
 web/src/lib/index.ts                          |  1 -
 4 files changed, 104 insertions(+), 5 deletions(-)
 create mode 100644 web/src/lib/api.ts
 delete mode 100644 web/src/lib/index.ts

diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index dabec6cb..cabff743 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -60,7 +60,7 @@
             <ClearButton click={() => (link = "")} />
         {/if}
         {#if validLink(link)}
-            <DownloadButton />
+            <DownloadButton url={link} />
         {/if}
     </div>
 
diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte
index 6e2f004c..9ebb2234 100644
--- a/web/src/components/save/buttons/DownloadButton.svelte
+++ b/web/src/components/save/buttons/DownloadButton.svelte
@@ -1,9 +1,78 @@
-<script>
+<script lang="ts">
     import '@fontsource-variable/noto-sans-mono';
+
+    import API from "$lib/api";
+
+    export let url: string;
+
+    $: buttonText = '>>';
+    $: isDisabled = false;
+
+    export const changeDownloadButton = (state: string) => {
+        isDisabled = true;
+        switch(state) {
+            case "think":
+                buttonText = '...';
+                break;
+            case "check":
+                buttonText = '..?';
+                break;
+            case "done":
+                buttonText = '>>>';
+                break;
+            case "error":
+                buttonText = '!!';
+                break;
+        }
+    }
+
+    export const restoreDownloadButton = () => {
+        setTimeout(() => {
+            buttonText = '>>';
+            isDisabled = false;
+        }, 2500)
+    }
+
+    const download = async (link: string) => {
+        changeDownloadButton("think");
+
+        const response = await API.request(link);
+        if (!response) {
+            changeDownloadButton("error");
+            restoreDownloadButton();
+
+            console.log("couldn't access the api")
+        }
+
+        if (["error", "rate-limit"].includes(response?.status) && response?.text) {
+            changeDownloadButton("error");
+            restoreDownloadButton();
+
+            console.log(`error from api: ${response?.text}`)
+        }
+
+        if (response?.url) {
+            if (response?.status === "redirect") {
+                changeDownloadButton("done");
+                window.open(response?.url, '_blank');
+                restoreDownloadButton();
+            }
+            if (response?.status === "stream") {
+                changeDownloadButton("check");
+
+                const probeResult = await API.probeCobaltStream(response?.url);
+                if (probeResult === 200) {
+                    changeDownloadButton("done");
+                    window.open(response?.url, '_blank');
+                    restoreDownloadButton();
+                }
+            }
+        }
+    };
 </script>
 
-<button id="download-button">
-    <span id="download-state">&gt;&gt;</span>
+<button id="download-button" disabled={isDisabled} on:click={() => download(url)}>
+    <span id="download-state">{buttonText}</span>
 </button>
 
 <style>
diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts
new file mode 100644
index 00000000..fef499cb
--- /dev/null
+++ b/web/src/lib/api.ts
@@ -0,0 +1,31 @@
+const apiURL = "https://api.cobalt.tools";
+
+const request = async (url: string) => {
+    const request = {
+        url
+    }
+
+    const response = await fetch(`${apiURL}/api/json`, {
+        method: "POST",
+        body: JSON.stringify(request),
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        }
+    }).then(r => r.json()).catch(() => {});
+
+    return response;
+}
+
+const probeCobaltStream = async (url: string) => {
+    const request = await fetch(`${url}&p=1`).catch(() => {});
+    if (request?.status === 200) {
+        return request?.status;
+    }
+    return 0;
+}
+
+export default {
+    request,
+    probeCobaltStream,
+}
diff --git a/web/src/lib/index.ts b/web/src/lib/index.ts
deleted file mode 100644
index 856f2b6c..00000000
--- a/web/src/lib/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.