From b4573fd95552f0b8c331124355d4471a39c414e8 Mon Sep 17 00:00:00 2001
From: ZXY101 <tennershaun@gmail.com>
Date: Sat, 18 May 2024 15:44:16 +0200
Subject: [PATCH] Complete Gdrive integration

---
 package-lock.json                |  13 ++-
 package.json                     |   1 +
 src/lib/components/NavBar.svelte |   2 +-
 src/routes/cloud/+page.svelte    | 192 +++++++++++++------------------
 4 files changed, 95 insertions(+), 113 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0b38b69..f531351 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "z-reader",
-  "version": "0.9.0",
+  "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
@@ -10,6 +10,7 @@
       "dependencies": {
         "@types/gapi": "^0.0.47",
         "@types/google.accounts": "^0.0.14",
+        "@types/google.picker": "^0.0.42",
         "@vercel/analytics": "^1.1.0",
         "@zip.js/zip.js": "^2.7.20",
         "dexie": "^4.0.1-alpha.25",
@@ -804,6 +805,11 @@
       "resolved": "https://registry.npmjs.org/@types/google.accounts/-/google.accounts-0.0.14.tgz",
       "integrity": "sha512-HqIVkVzpiLWhlajhQQd4rIV7czanFvXblJI2J1fSrL+VKQuQwwZ63m35D/mI0flsqKE6p/hNrAG0Yn4FD6JvNA=="
     },
+    "node_modules/@types/google.picker": {
+      "version": "0.0.42",
+      "resolved": "https://registry.npmjs.org/@types/google.picker/-/google.picker-0.0.42.tgz",
+      "integrity": "sha512-7Ut1zDLCGNhyN+0fuIcncpBP9eUsIjLKz6qmVKvdkBUi1EzAskxTcIZcU/w2cO1ens/hEXlqeLd5qAKs/Kqqyw=="
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.12",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
@@ -4564,6 +4570,11 @@
       "resolved": "https://registry.npmjs.org/@types/google.accounts/-/google.accounts-0.0.14.tgz",
       "integrity": "sha512-HqIVkVzpiLWhlajhQQd4rIV7czanFvXblJI2J1fSrL+VKQuQwwZ63m35D/mI0flsqKE6p/hNrAG0Yn4FD6JvNA=="
     },
+    "@types/google.picker": {
+      "version": "0.0.42",
+      "resolved": "https://registry.npmjs.org/@types/google.picker/-/google.picker-0.0.42.tgz",
+      "integrity": "sha512-7Ut1zDLCGNhyN+0fuIcncpBP9eUsIjLKz6qmVKvdkBUi1EzAskxTcIZcU/w2cO1ens/hEXlqeLd5qAKs/Kqqyw=="
+    },
     "@types/json-schema": {
       "version": "7.0.12",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
diff --git a/package.json b/package.json
index 81fbc9a..ad4c0cc 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
   "dependencies": {
     "@types/gapi": "^0.0.47",
     "@types/google.accounts": "^0.0.14",
+    "@types/google.picker": "^0.0.42",
     "@vercel/analytics": "^1.1.0",
     "@zip.js/zip.js": "^2.7.20",
     "dexie": "^4.0.1-alpha.25",
diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index e38f636..c6a7262 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -37,7 +37,7 @@
     <div class="flex md:order-2 gap-5">
       <UserSettingsSolid class="hover:text-primary-700" on:click={openSettings} />
       <UploadSolid class="hover:text-primary-700" on:click={() => (uploadModalOpen = true)} />
-      <!-- <CloudArrowUpOutline class="hover:text-primary-700" on:click={() => goto('/cloud')} /> -->
+      <CloudArrowUpOutline class="hover:text-primary-700" on:click={() => goto('/cloud')} />
     </div>
   </Navbar>
 </div>
diff --git a/src/routes/cloud/+page.svelte b/src/routes/cloud/+page.svelte
index 0b46320..91dffb3 100644
--- a/src/routes/cloud/+page.svelte
+++ b/src/routes/cloud/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { processFiles } from '$lib/upload';
   import Loader from '$lib/components/Loader.svelte';
-  import { formatBytes, showSnackbar, uploadFile } from '$lib/util';
-  import { Button, Frame, Listgroup, ListgroupItem } from 'flowbite-svelte';
+  import { showSnackbar, uploadFile } from '$lib/util';
+  import { Button } from 'flowbite-svelte';
   import { onMount } from 'svelte';
   import { promptConfirmation } from '$lib/util';
   import { GoogleSolid } from 'flowbite-svelte-icons';
@@ -22,70 +22,18 @@
   const type = 'application/json';
 
   let tokenClient: any;
-  let zips: gapi.client.drive.File[];
   let loadingMessage = '';
   let readerFolderId = '';
   let volumeDataId = '';
   let profilesId = '';
-
-  async function fetchZips(folderId: string) {
-    const { result } = await gapi.client.drive.files.list({
-      q: `'${folderId}' in parents and (mimeType='${FOLDER_MIME_TYPE}' or (fileExtension='zip' or fileExtension='cbz'))`,
-      fields: 'files(id, name, mimeType, size)'
-    });
-
-    if (!result.files) return;
-
-    let zipFiles: gapi.client.drive.File[] = [];
-
-    for (const file of result.files) {
-      if (!file.id) continue;
-
-      if (file.mimeType === FOLDER_MIME_TYPE) {
-        zipFiles = [...zipFiles, ...((await fetchZips(file.id)) || [])];
-      } else {
-        zipFiles.push(file);
-      }
-    }
-
-    return zipFiles;
-  }
-
-  async function downloadFile(fileId: string) {
-    loadingMessage = 'Downloading from drive';
-
-    const { body, headers } = await gapi.client.drive.files.get({
-      fileId,
-      alt: 'media'
-    });
-
-    const type = headers?.['Content-Type'] || '';
-
-    const blob = new Blob([new Uint8Array(body.length).map((_, i) => body.charCodeAt(i))], {
-      type
-    });
-
-    const file = new File([blob], fileId + '.zip');
-
-    loadingMessage = 'Adding to catalog';
-
-    await processFiles([file]);
-    loadingMessage = '';
-  }
-
-  function onClick({ id, name }: gapi.client.drive.File) {
-    if (id) {
-      promptConfirmation(`Would you like to download and add ${name} to your collection?`, () => {
-        downloadFile(id);
-      });
-    }
-  }
+  let accessToken = '';
 
   async function connectDrive(resp?: any) {
     if (resp?.error !== undefined) {
       throw resp;
     }
 
+    accessToken = resp?.access_token;
     loadingMessage = 'Connecting to drive';
 
     const { result: readerFolderRes } = await gapi.client.drive.files.list({
@@ -102,7 +50,6 @@
       readerFolderId = createReaderFolderRes.id || '';
     } else {
       const id = readerFolderRes.files?.[0]?.id || '';
-      zips = [...((await fetchZips(id)) || [])];
 
       readerFolderId = id || '';
     }
@@ -126,7 +73,10 @@
     }
 
     loadingMessage = '';
-    showSnackbar('Connected to Google Drive');
+
+    if (accessToken) {
+      showSnackbar('Connected to Google Drive');
+    }
   }
 
   function signIn() {
@@ -143,13 +93,10 @@
         apiKey: API_KEY,
         discoveryDocs: [DISCOVERY_DOC]
       });
-
-      if (gapi.client.getToken() !== null) {
-        loadingMessage = 'Connecting to drive';
-        connectDrive();
-      }
     });
 
+    gapi.load('picker', () => {});
+
     tokenClient = google.accounts.oauth2.initTokenClient({
       client_id: CLIENT_ID,
       scope: SCOPES,
@@ -157,18 +104,57 @@
     });
   });
 
+  function createPicker() {
+    const docsView = new google.picker.DocsView(google.picker.ViewId.DOCS)
+      .setMimeTypes('application/zip,application/x-zip-compressed')
+      .setMode(google.picker.DocsViewMode.LIST)
+      .setIncludeFolders(true)
+      .setParent(readerFolderId);
+
+    const picker = new google.picker.PickerBuilder()
+      .addView(docsView)
+      .setOAuthToken(accessToken)
+      .setAppId(CLIENT_ID)
+      .setDeveloperKey(API_KEY)
+      .enableFeature(google.picker.Feature.NAV_HIDDEN)
+      .setCallback(pickerCallback)
+      .build();
+    picker.setVisible(true);
+  }
+
+  async function pickerCallback(data: google.picker.ResponseObject) {
+    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
+      loadingMessage = 'Downloading from drive';
+      const docs = data[google.picker.Response.DOCUMENTS];
+      const { body, headers } = await gapi.client.drive.files.get({
+        fileId: docs[0].id,
+        alt: 'media'
+      });
+
+      const type = headers?.['Content-Type'] || '';
+
+      const blob = new Blob([new Uint8Array(body.length).map((_, i) => body.charCodeAt(i))], {
+        type
+      });
+
+      const file = new File([blob], docs[0].name);
+
+      await processFiles([file]);
+      loadingMessage = '';
+    }
+  }
+
   async function onUploadVolumeData() {
     const metadata = {
       mimeType: type,
       name: VOLUME_DATA_FILE,
       parents: [volumeDataId ? null : readerFolderId]
     };
-    const { access_token } = gapi.auth.getToken();
 
     loadingMessage = 'Uploading volume data';
 
     const res = await uploadFile({
-      accessToken: access_token,
+      accessToken,
       fileId: volumeDataId,
       metadata,
       localStorageId: 'volumes',
@@ -178,7 +164,9 @@
     volumeDataId = res.id;
     loadingMessage = '';
 
-    showSnackbar('Volume data uploaded');
+    if (volumeDataId) {
+      showSnackbar('Volume data uploaded');
+    }
   }
 
   async function onUploadProfiles() {
@@ -187,12 +175,11 @@
       name: PROFILES_FILE,
       parents: [profilesId ? null : readerFolderId]
     };
-    const { access_token } = gapi.auth.getToken();
 
     loadingMessage = 'Uploading profiles';
 
     const res = await uploadFile({
-      accessToken: access_token,
+      accessToken,
       fileId: profilesId,
       metadata,
       localStorageId: 'profiles',
@@ -202,7 +189,9 @@
     profilesId = res.id;
     loadingMessage = '';
 
-    showSnackbar('Profiles uploaded');
+    if (profilesId) {
+      showSnackbar('Profiles uploaded');
+    }
   }
 
   async function onDownloadVolumeData() {
@@ -257,11 +246,16 @@
     <Loader>
       {loadingMessage}
     </Loader>
-  {:else if zips}
-    <div class="flex flex-col gap-2">
-      <div class="flex justify-between items-center gap-2 flex-col sm:flex-row">
-        <h2 class="text-2xl font-semibold text-center">Google Drive:</h2>
-        <div class="flex flex-col sm:flex-row gap-2 sm:w-auto w-full">
+  {:else if accessToken}
+    <div class="flex justify-between items-center gap-6 flex-col">
+      <h2 class="text-3xl font-semibold text-center pt-2">Google Drive:</h2>
+      <p class="text-center">
+        Add your zipped manga files to the <span class="text-primary-700">{READER_FOLDER}</span> folder
+        in your Google Drive.
+      </p>
+      <div class="flex flex-col gap-4 w-full max-w-3xl">
+        <Button color="blue" on:click={createPicker}>Download manga</Button>
+        <div class="flex-col gap-2 flex">
           <Button
             color="dark"
             on:click={() => promptConfirmation('Upload volume data?', onUploadVolumeData)}
@@ -277,6 +271,8 @@
               Download volume data
             </Button>
           {/if}
+        </div>
+        <div class="flex-col gap-2 flex">
           <Button
             color="dark"
             on:click={() => promptConfirmation('Upload profiles?', onUploadProfiles)}
@@ -294,44 +290,18 @@
           {/if}
         </div>
       </div>
-      <div class="flex gap-2 justify-center flex-wrap">
-        {#if zips.length > 0}
-          <Listgroup active class="w-full">
-            {#each zips as zip}
-              <Frame
-                on:click={() => onClick(zip)}
-                rounded
-                border
-                class="divide-y divide-gray-200 dark:divide-gray-600"
-              >
-                <ListgroupItem normalClass="py-4">
-                  <div class="flex flex-col gap-2">
-                    <h2 class="font-semibold">{zip.name}</h2>
-                    <p>{formatBytes(parseInt(zip.size || '0'))}</p>
-                  </div>
-                </ListgroupItem>
-              </Frame>
-            {/each}
-          </Listgroup>
-        {:else}
-          <div class="h-[70svh] items-center justify-center flex">
-            <p class="text-center">
-              Add your zip files to the <span class="text-primary-700">{READER_FOLDER}</span> folder
-              in your Google Drive.
-            </p>
-          </div>
-        {/if}
-      </div>
     </div>
   {:else}
-    <button
-      class="w-full border rounded-lg border-slate-600 p-10 border-opacity-50 hover:bg-slate-800"
-      on:click={signIn}
-    >
-      <div class="flex sm:flex-row flex-col gap-2 items-center justify-center">
-        <GoogleSolid size="lg" />
-        <h2 class="text-lg">Connect to Google Drive</h2>
-      </div>
-    </button>
+    <div class="flex justify-center pt-0 sm:pt-32">
+      <button
+        class="w-full border rounded-lg border-slate-600 p-10 border-opacity-50 hover:bg-slate-800 max-w-3xl"
+        on:click={signIn}
+      >
+        <div class="flex sm:flex-row flex-col gap-2 items-center justify-center">
+          <GoogleSolid size="lg" />
+          <h2 class="text-lg">Connect to Google Drive</h2>
+        </div>
+      </button>
+    </div>
   {/if}
 </div>