Add share button to converted files (#13)

* feat: add share button to converted files

* fix: share buttons not showing on complete conversions

* chore: fix lint

bun.lock

@@ -10,6 +10,7 @@
         "@elysiajs/static": "^1.4.6",
         "@kitajs/html": "^4.2.11",
         "elysia": "^1.4.16",
+        "mime": "^4.1.0",
         "sanitize-filename": "^1.6.3",
         "tar": "^7.5.2",
       },
@@ -449,6 +450,8 @@
 
     "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
 
+    "mime": ["mime@4.1.0", "", { "bin": { "mime": "bin/cli.js" } }, "sha512-X5ju04+cAzsojXKes0B/S4tcYtFAJ6tTMuSPBEn9CPGlrWr8Fiw7qYeLT0XyH80HSoAoqWCaz+MWKh22P7G1cw=="],
+
     "minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
 
     "minimist": ["minimist@1.2.8", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="],

eslint.config.ts

@@ -61,6 +61,7 @@ export default tseslint.config(
             "target",
             "convert_to_target",
             "job-details-toggle",
+            "share-btn",
           ],
         },
       ],

package.json

@@ -21,6 +21,7 @@
     "@elysiajs/static": "^1.4.6",
     "@kitajs/html": "^4.2.11",
     "elysia": "^1.4.16",
+    "mime": "^4.1.0",
     "sanitize-filename": "^1.6.3",
     "tar": "^7.5.2"
   },

public/results.js

@@ -3,6 +3,42 @@ const jobId = window.location.pathname.split("/").pop();
 const main = document.querySelector("main");
 let progressElem = document.querySelector("progress");
 
+const supportsWebShare = navigator.share && navigator.canShare;
+
+const setupShareButtons = () => {
+  if (!supportsWebShare) {
+    return;
+  }
+
+  document.querySelectorAll(".share-btn").forEach((btn) => {
+    if (btn.dataset.setupComplete) return;
+
+    const filename = btn.dataset.filename;
+    const mimeType = btn.dataset.mimeType;
+    const fileUrl = btn.dataset.downloadUrl;
+    const dummyFile = new File([], filename, { type: mimeType });
+
+    if (!navigator.canShare({ files: [dummyFile] })) {
+      return;
+    }
+    btn.addEventListener("click", async (e) => {
+      e.preventDefault();
+      try {
+        const response = await fetch(fileUrl);
+        const blob = await response.blob();
+        const file = new File([blob], filename, { type: mimeType });
+        await navigator.share({ files: [file] });
+      } catch (err) {
+        if (err.name !== "AbortError") {
+          console.error("Error sharing:", err);
+        }
+      }
+    });
+    btn.style.display = "";
+    btn.dataset.setupComplete = true;
+  });
+};
+
 const refreshData = () => {
   // console.log("Refreshing data...", progressElem.value, progressElem.max);
   if (progressElem.value !== progressElem.max) {
@@ -12,6 +48,7 @@ const refreshData = () => {
       .then((res) => res.text())
       .then((html) => {
         main.innerHTML = html;
+        setupShareButtons();
       })
       .catch((err) => console.log(err));
 
@@ -21,6 +58,7 @@ const refreshData = () => {
   progressElem = document.querySelector("progress");
 };
 
+setupShareButtons();
 refreshData();
 
 window.downloadAll = function () {

src/icons/share.tsx

@@ -0,0 +1,18 @@
+export function ShareIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      class={`size-6`}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z"
+      />
+    </svg>
+  );
+}

src/pages/results.tsx

@@ -7,6 +7,8 @@ import { ALLOW_UNAUTHENTICATED, WEBROOT } from "../helpers/env";
 import { DownloadIcon } from "../icons/download";
 import { DeleteIcon } from "../icons/delete";
 import { EyeIcon } from "../icons/eye";
+import { ShareIcon } from "../icons/share";
+import mime from "mime";
 import { userService } from "./user";
 
 function ResultsArticle({
@@ -119,6 +121,18 @@ function ResultsArticle({
                 >
                   <DownloadIcon />
                 </a>
+                <button
+                  class={`
+                    share-btn text-accent-500 underline
+                    hover:text-accent-400
+                  `}
+                  data-filename={file.output_file_name}
+                  data-download-url={`${WEBROOT}/download/${outputPath}${file.output_file_name}`}
+                  data-mime-type={mime.getType(file.output_file_name) || "application/octet-stream"}
+                  style="display: none;"
+                >
+                  <ShareIcon />
+                </button>
               </td>
             </tr>
           ))}