web: basic api interaction & downloading

download button now acts the way it should with various states

web/src/components/save/Omnibox.svelte

@@ -60,7 +60,7 @@
             <ClearButton click={() => (link = "")} />
         {/if}
         {#if validLink(link)}
-            <DownloadButton />
+            <DownloadButton url={link} />
         {/if}
     </div>
 

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>

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,
+}

web/src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.