Use native clipboard.writeText, Cleanup polyfill

client/index.html

@@ -195,6 +195,7 @@
     <!-- Scripts -->
     <script src="scripts/network.js"></script>
     <script src="scripts/ui.js"></script>
+    <script src="scripts/clipboard.js" async></script>
     <!-- Sounds -->
     <audio id="blop" autobuffer="true">
         <source src="/sounds/blop.mp3" type="audio/mpeg">

client/scripts/clipboard.js

@@ -0,0 +1,38 @@
+// Polyfill for Navigator.clipboard.writeText
+if (!navigator.clipboard) {
+    navigator.clipboard = {
+        writeText: text => {
+
+            // A <span> contains the text to copy
+            const span = document.createElement('span');
+            span.textContent = text;
+            span.style.whiteSpace = 'pre'; // Preserve consecutive spaces and newlines
+
+            // Paint the span outside the viewport
+            span.style.position = 'absolute';
+            span.style.left = '-9999px';
+            span.style.top = '-9999px';
+
+            const win = window;
+            const selection = win.getSelection();
+            win.document.body.appendChild(span);
+
+            const range = win.document.createRange();
+            selection.removeAllRanges();
+            range.selectNode(span);
+            selection.addRange(range);
+
+            let success = false;
+            try {
+                success = win.document.execCommand('copy');
+            } catch (err) {
+                return Promise.error();
+            }
+
+            selection.removeAllRanges();
+            span.remove();
+
+            return Promise.resolve();
+        }
+    }
+}

client/scripts/ui.js

@@ -24,7 +24,7 @@ class PeersUI {
     }
 
     _onPeerJoined(peer) {
-        if (document.getElementById(peer.id)) return;
+        if ($(peer.id)) return; // peer already exists 
         const peerUI = new PeerUI(peer);
         $$('x-peers').appendChild(peerUI.$el);
     }
@@ -348,8 +348,8 @@ class ReceiveTextDialog extends Dialog {
         window.blop.play();
     }
 
-    _onCopy() {
-        if (!document.copy(this.$text.textContent)) return;
+    async _onCopy() {
+        await navigator.clipboard.writeText(this.$text.textContent);
         Events.fire('notify-user', 'Copied to clipboard');
     }
 }
@@ -440,7 +440,7 @@ class Notifications {
 
     _copyText(message, notification) {
         notification.close();
-        if (!document.copy(message)) return;
+        if (!navigator.clipboard.writeText(message)) return;
         this._notify('Copied text to clipboard');
     }
 
@@ -512,36 +512,6 @@ class Snapdrop {
 
 const snapdrop = new Snapdrop();
 
-document.copy = text => {
-    // A <span> contains the text to copy
-    const span = document.createElement('span');
-    span.textContent = text;
-    span.style.whiteSpace = 'pre'; // Preserve consecutive spaces and newlines
-
-    // Paint the span outside the viewport
-    span.style.position = 'absolute';
-    span.style.left = '-9999px';
-    span.style.top = '-9999px';
-
-    const win = window;
-    const selection = win.getSelection();
-    win.document.body.appendChild(span);
-
-    const range = win.document.createRange();
-    selection.removeAllRanges();
-    range.selectNode(span);
-    selection.addRange(range);
-
-    let success = false;
-    try {
-        success = win.document.execCommand('copy');
-    } catch (err) {}
-
-    selection.removeAllRanges();
-    span.remove();
-
-    return success;
-}
 
 
 if ('serviceWorker' in navigator) {