Add Base64ZipDialog to PairDrop via share-menu on iOS

public/index.html

@@ -88,7 +88,7 @@
         <div id="displayName" placeholder="&nbsp;"></div>
         <div class="font-body2">You can be discovered by everyone on this network</div>
     </footer>
-    <!-- JoinRoom Dialog -->
+    <!-- Pair Device Dialog -->
     <x-dialog id="pairDeviceDialog">
         <form action="#">
             <x-background class="full center text-center">
@@ -116,6 +116,7 @@
             </x-background>
         </form>
     </x-dialog>
+    <!-- Clear Devices Dialog -->
     <x-dialog id="clearDevicesDialog">
         <form action="#">
             <x-background class="full center text-center">
@@ -192,6 +193,15 @@
             </x-paper>
         </x-background>
     </x-dialog>
+    <!-- Receive Dialog -->
+    <x-dialog id="base64ZipDialog">
+        <x-background class="full center">
+            <x-paper shadow="2">
+                <button class="button center" id="base64ZipPasteBtn" title="Paste">Tap here to paste files</button>
+                <button class="button center" close>Close</button>
+            </x-paper>
+        </x-background>
+    </x-dialog>
     <!-- Toast -->
     <div class="toast-container full center">
         <x-toast class="row" shadow="1" id="toast">File Transfer Completed</x-toast>

public/scripts/ui.js

@@ -990,6 +990,45 @@ class ReceiveTextDialog extends Dialog {
     }
 }
 
+class Base64ZipDialog extends Dialog {
+
+    constructor() {
+        super('base64ZipDialog');
+        const urlParams = new URL(window.location).searchParams;
+        const base64zip = urlParams.get('base64zip');
+        this.$pasteBtn = this.$el.querySelector('#base64ZipPasteBtn')
+        this.$pasteBtn.addEventListener('click', _ => this.processClipboard())
+        if (base64zip) this.show();
+    }
+
+    async processClipboard() {
+        this.$pasteBtn.pointerEvents = "none";
+        this.$pasteBtn.innerText = "Processing...";
+        try {
+            const base64zip = await navigator.clipboard.readText();
+            let bstr = atob(base64zip), n = bstr.length, u8arr = new Uint8Array(n);
+            while (n--) {
+                u8arr[n] = bstr.charCodeAt(n);
+            }
+
+            const zipBlob = new File([u8arr], 'archive.zip');
+
+            let files = [];
+            const zipEntries = await zipper.getEntries(zipBlob);
+            for (let i = 0; i < zipEntries.length; i++) {
+                let fileBlob = await zipper.getData(zipEntries[i]);
+                files.push(new File([fileBlob], zipEntries[i].filename));
+            }
+            Events.fire('activate-paste-mode', {files: files, text: ""})
+        } catch (e) {
+            Events.fire('notify-user', 'Clipboard content is malformed.')
+        } finally {
+            window.history.replaceState({}, "Rewrite URL", '/');
+            this.hide();
+        }
+    }
+}
+
 class Toast extends Dialog {
     constructor() {
         super('toast');
@@ -1155,9 +1194,8 @@ class WebShareTargetUI {
                     })
                 caches.delete("share_target_files").then( _ => console.log("shared files deleted from cache"));
             }
-            window.history.replaceState({}, "Rewrite URL", '/'); //remove room_key from url
+            window.history.replaceState({}, "Rewrite URL", '/');
         }
-
     }
 }
 
@@ -1391,6 +1429,7 @@ class PairDrop {
             const receiveTextDialog = new ReceiveTextDialog();
             const pairDeviceDialog = new PairDeviceDialog();
             const clearDevicesDialog = new ClearDevicesDialog();
+            const base64ZipDialog = new Base64ZipDialog();
             const toast = new Toast();
             const notifications = new Notifications();
             const networkStatusUI = new NetworkStatusUI();

public/styles.css

@@ -532,10 +532,28 @@ x-dialog .row-reverse {
     pointer-events: none;
 }
 
+#base64ZipPasteBtn {
+    width: 100%;
+    height: 40vh;
+    border: solid 12px #438cff;
+}
+
+#base64ZipDialog button {
+    margin: auto;
+    border-radius: 8px;
+}
+
+#base64ZipDialog button[close] {
+    margin-top: 20px;
+}
+#base64ZipDialog button[close]:before {
+    border-radius: 8px;
+}
+
 /* Button */
 
 .button {
-    padding: 0 16px;
+    padding: 2px 16px 0;
     box-sizing: border-box;
     min-height: 36px;
     min-width: 100px;