New reader testing

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "z-reader",
-  "version": "1.0.0",
+  "version": "0.9.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
@@ -10,7 +10,6 @@
       "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",
@@ -805,11 +804,6 @@
       "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",
@@ -4570,11 +4564,6 @@
       "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",

package.json

@@ -39,7 +39,6 @@
   "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",

src/app.html

@@ -6,7 +6,7 @@
     <link rel="manifest" crossorigin="use-credentials" href="manifest.json" />
     <meta
       name="viewport"
-      content="width=device-width, height=device-height,initial-scale=1, minimum-scale=1, user-scalable=no"
+      content="width=device-width, height=device-height,initial-scale=1, minimum-scale=1"
     />
     <script src="https://apis.google.com/js/api.js"></script>
     <script src="https://accounts.google.com/gsi/client"></script>

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>

src/lib/components/Reader/MangaPage.svelte

@@ -35,10 +35,17 @@
 
 <div
   draggable="false"
-  style:width={`${page.img_width}px`}
+  style:width={`${window.innerWidth}px`}
-  style:height={`${page.img_height}px`}
+  style:height={`${(window.innerWidth * page.img_height) / page.img_width}px`}
   style:background-image={url}
   class="relative"
 >
   <TextBoxes {page} {src} />
 </div>
+
+<style>
+  div {
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+</style>

src/lib/components/Reader/TextBoxes.svelte

@@ -9,15 +9,20 @@
 
   $: textBoxes = page.blocks
     .map((block) => {
-      const { img_height, img_width } = page;
+      const { img_height: imgh, img_width: imgw } = page;
+      const img_height = (window.innerWidth * imgh) / imgw;
+      const img_width = window.innerWidth;
       const { box, font_size, lines, vertical } = block;
 
-      let [_xmin, _ymin, _xmax, _ymax] = box;
+      const resizeFactor = window.innerWidth / imgw;
 
-      const xmin = clamp(_xmin, 0, img_width);
+      let [_xmin, _ymin, _xmax, _ymax] = box;
-      const ymin = clamp(_ymin, 0, img_height);
+      console.log(box);
-      const xmax = clamp(_xmax, 0, img_width);
+
-      const ymax = clamp(_ymax, 0, img_height);
+      const xmin = clamp(_xmin * resizeFactor, 0, img_width);
+      const ymin = clamp(_ymin * resizeFactor, 0, img_height);
+      const xmax = clamp(_xmax * resizeFactor, 0, img_width);
+      const ymax = clamp(_ymax * resizeFactor, 0, img_height);
 
       const width = xmax - xmin;
       const height = ymax - ymin;

src/lib/components/ReaderV2/ReaderV2.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { volume } from '$lib/catalog';
+  import MangaPage from '../Reader/MangaPage.svelte';
+
+  $: files = $volume ? Object.values($volume?.files).slice(0, 10) : [];
+  $: pages = $volume?.mokuroData?.pages || [];
+
+  $: {
+    const { innerWidth, innerHeight } = window;
+    console.log(innerWidth, innerHeight);
+  }
+</script>
+
+<section>
+  {#each files as file, i}
+    <MangaPage src={file} page={pages[i]} />
+  {/each}
+</section>
+
+<style>
+  section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+</style>

src/lib/components/Settings/Reader/ReaderSelects.svelte

@@ -5,6 +5,12 @@
 
   $: zoomModeValue = $settings.zoomDefault;
   $: fontSizeValue = $settings.fontSize;
+  $: readerValue = $settings.reader || 'classic';
+
+  let readers = [
+    { value: 'classic', name: 'Classic' },
+    { value: 'v2', name: 'V2' }
+  ];
 
   let zoomModes = [
     { value: 'zoomFitToScreen', name: 'Fit to screen' },
@@ -40,6 +46,11 @@
   }
 </script>
 
+<div>
+  <Label>Reader:</Label>
+  <Select items={readers} value={readerValue} on:change={(e) => onSelectChange(e, 'reader')} />
+</div>
+
 <div>
   <Label>On page zoom:</Label>
   <Select

src/lib/consts/index.ts

@@ -1 +1 @@
-export const READER_VERSION = '0.9.0'
+export const READER_VERSION = '1.0.0'

src/lib/settings/settings.ts

@@ -1,6 +1,8 @@
 import { browser } from '$app/environment';
 import { derived, get, writable } from 'svelte/store';
 
+export type Readers = 'classic' | 'v2'
+
 export type FontSize =
   | 'auto'
   | '9'
@@ -41,6 +43,7 @@ export type VolumeDefaults = {
 }
 
 export type Settings = {
+  reader: Readers,
   textEditable: boolean;
   textBoxBorders: boolean;
   displayOCR: boolean;
@@ -67,6 +70,7 @@ export type AnkiSettingsKey = keyof AnkiConnectSettings;
 export type VolumeDefaultsKey = keyof VolumeDefaults;
 
 const defaultSettings: Settings = {
+  reader: 'classic',
   displayOCR: true,
   textEditable: false,
   textBoxBorders: false,

src/routes/[manga]/[volume]/+layout.svelte

@@ -1,8 +1,8 @@
 <slot />
 
 <style>
-  :global(body.reader) {
+  /* :global(body.reader) {
     overflow: hidden !important;
     overscroll-behavior: contain;
-  }
+  } */
 </style>

src/routes/[manga]/[volume]/+page.svelte

@@ -4,6 +4,7 @@
   import Timer from '$lib/components/Reader/Timer.svelte';
   import { initializeVolume, settings, startCount, volumeSettings, volumes } from '$lib/settings';
   import { onMount } from 'svelte';
+  import ReaderV2 from '$lib/components/ReaderV2/ReaderV2.svelte';
 
   const volumeId = $page.params.volume;
   let count: undefined | number = undefined;
@@ -26,5 +27,9 @@
   {#if $settings.showTimer}
     <Timer bind:count {volumeId} />
   {/if}
-  <Reader volumeSettings={$volumeSettings[volumeId]} />
+  {#if $settings.reader === 'classic'}
+    <Reader volumeSettings={$volumeSettings[volumeId]} />
+  {:else}
+    <ReaderV2 />
+  {/if}
 {/if}

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 { showSnackbar, uploadFile } from '$lib/util';
+  import { formatBytes, showSnackbar, uploadFile } from '$lib/util';
-  import { Button } from 'flowbite-svelte';
+  import { Button, Frame, Listgroup, ListgroupItem } from 'flowbite-svelte';
   import { onMount } from 'svelte';
   import { promptConfirmation } from '$lib/util';
   import { GoogleSolid } from 'flowbite-svelte-icons';
@@ -22,18 +22,70 @@
   const type = 'application/json';
 
   let tokenClient: any;
+  let zips: gapi.client.drive.File[];
   let loadingMessage = '';
   let readerFolderId = '';
   let volumeDataId = '';
   let profilesId = '';
-  let accessToken = '';
+
+  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);
+      });
+    }
+  }
 
   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({
@@ -50,6 +102,7 @@
       readerFolderId = createReaderFolderRes.id || '';
     } else {
       const id = readerFolderRes.files?.[0]?.id || '';
+      zips = [...((await fetchZips(id)) || [])];
 
       readerFolderId = id || '';
     }
@@ -73,10 +126,7 @@
     }
 
     loadingMessage = '';
-
+    showSnackbar('Connected to Google Drive');
-    if (accessToken) {
-      showSnackbar('Connected to Google Drive');
-    }
   }
 
   function signIn() {
@@ -93,9 +143,12 @@
         apiKey: API_KEY,
         discoveryDocs: [DISCOVERY_DOC]
       });
-    });
 
-    gapi.load('picker', () => {});
+      if (gapi.client.getToken() !== null) {
+        loadingMessage = 'Connecting to drive';
+        connectDrive();
+      }
+    });
 
     tokenClient = google.accounts.oauth2.initTokenClient({
       client_id: CLIENT_ID,
@@ -104,57 +157,18 @@
     });
   });
 
-  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,
+      accessToken: access_token,
       fileId: volumeDataId,
       metadata,
       localStorageId: 'volumes',
@@ -164,9 +178,7 @@
     volumeDataId = res.id;
     loadingMessage = '';
 
-    if (volumeDataId) {
+    showSnackbar('Volume data uploaded');
-      showSnackbar('Volume data uploaded');
-    }
   }
 
   async function onUploadProfiles() {
@@ -175,11 +187,12 @@
       name: PROFILES_FILE,
       parents: [profilesId ? null : readerFolderId]
     };
+    const { access_token } = gapi.auth.getToken();
 
     loadingMessage = 'Uploading profiles';
 
     const res = await uploadFile({
-      accessToken,
+      accessToken: access_token,
       fileId: profilesId,
       metadata,
       localStorageId: 'profiles',
@@ -189,9 +202,7 @@
     profilesId = res.id;
     loadingMessage = '';
 
-    if (profilesId) {
+    showSnackbar('Profiles uploaded');
-      showSnackbar('Profiles uploaded');
-    }
   }
 
   async function onDownloadVolumeData() {
@@ -246,16 +257,11 @@
     <Loader>
       {loadingMessage}
     </Loader>
-  {:else if accessToken}
+  {:else if zips}
-    <div class="flex justify-between items-center gap-6 flex-col">
+    <div class="flex flex-col gap-2">
-      <h2 class="text-3xl font-semibold text-center pt-2">Google Drive:</h2>
+      <div class="flex justify-between items-center gap-2 flex-col sm:flex-row">
-      <p class="text-center">
+        <h2 class="text-2xl font-semibold text-center">Google Drive:</h2>
-        Add your zipped manga files to the <span class="text-primary-700">{READER_FOLDER}</span> folder
+        <div class="flex flex-col sm:flex-row gap-2 sm:w-auto w-full">
-        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)}
@@ -271,8 +277,6 @@
               Download volume data
             </Button>
           {/if}
-        </div>
-        <div class="flex-col gap-2 flex">
           <Button
             color="dark"
             on:click={() => promptConfirmation('Upload profiles?', onUploadProfiles)}
@@ -290,18 +294,44 @@
           {/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}
-    <div class="flex justify-center pt-0 sm:pt-32">
+    <button
-      <button
+      class="w-full border rounded-lg border-slate-600 p-10 border-opacity-50 hover:bg-slate-800"
-        class="w-full border rounded-lg border-slate-600 p-10 border-opacity-50 hover:bg-slate-800 max-w-3xl"
+      on:click={signIn}
-        on:click={signIn}
+    >
-      >
+      <div class="flex sm:flex-row flex-col gap-2 items-center justify-center">
-        <div class="flex sm:flex-row flex-col gap-2 items-center justify-center">
+        <GoogleSolid size="lg" />
-          <GoogleSolid size="lg" />
+        <h2 class="text-lg">Connect to Google Drive</h2>
-          <h2 class="text-lg">Connect to Google Drive</h2>
+      </div>
-        </div>
+    </button>
-      </button>
-    </div>
   {/if}
 </div>