From 7365e76d2e9a6dbcd8986eeb541f948dbe446632 Mon Sep 17 00:00:00 2001
From: Klemek <klemek@outlook.fr>
Date: Mon, 17 Mar 2025 15:01:43 +0100
Subject: [PATCH] better sharing

---
 README.md  |  8 ++++----
 index.html |  2 +-
 main.js    | 25 +++++++++++++++++--------
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index ea659b4..a6168dd 100644
--- a/README.md
+++ b/README.md
@@ -10,10 +10,10 @@
 
 ## Roadmap
 
-* [ ] Clean project
-* [ ] Better data upload by chunks and ensure consistancy
-* [ ] Link sharing and better workflow
-* [ ] QRCode
+* [x] Clean project
+* [x] Better data upload by chunks and ensure consistancy
+* [x] Link sharing and better workflow
 * [ ] Multiple peers
+* [ ] QRCode
 * [ ] DaisyUI redesign
 * [ ] Multiple files
diff --git a/index.html b/index.html
index 573cf26..12e4c5e 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,7 @@
       <br>
       <template v-if="serverIsReady">
         <input disabled :value="server.url" />
-        <input type="submit" @click.prevent="onCopy" value="Share / Copy" />
+        <input type="submit" @click.prevent="onShare" :value="shareText" />
         <br>
         <br>
       </template>
diff --git a/main.js b/main.js
index 29e3e3b..8adf3c1 100644
--- a/main.js
+++ b/main.js
@@ -12,9 +12,6 @@ const utils = {
       },
     });
   },
-  copyToClipboard(str) {
-    navigator.clipboard.writeText(str);
-  },
 };
 
 const MESSAGE_TYPE = {
@@ -39,11 +36,11 @@ const app = createApp({
       remoteId: null,
       connection: null, // TODO multiple connections
 
-      // TODO separate vars
       isServer: true,
       server: {
         url: null,
         data: null, // TODO multiple files
+        copied: false,
       },
       client: {
         remoteId: null,
@@ -76,6 +73,15 @@ const app = createApp({
     downloadTotal() {
       return this.fileSize ?? 0;
     },
+    shareText() {
+      if (navigator.canShare && navigator.canShare()) {
+        return "Share link";
+      }
+      if (this.server.copied) {
+        return "Copied to clipboard";
+      }
+      return "Copy link";
+    },
   },
   watch: {},
   updated() {
@@ -318,13 +324,16 @@ const app = createApp({
       this.client.downloadStart = new Date();
       this.sendClientSeek();
     },
-    onCopy() {
-      try {
+    onShare() {
+      if (navigator.canShare && navigator.canShare()) {
         navigator.share({
           url: this.server.url,
+          title: window.title,
         })
-      } catch {
-        utils.copyToClipboard(this.server.url);
+      } else {
+        navigator.clipboard.writeText(this.server.url);
+        this.server.copied = true;
+        setTimeout(() => {this.server.copied = false;}, 5000);
       }
     }
   },