better sharing

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

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>

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);
       }
     }
   },