New reader testing

Add Google drive functionality

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/Reader/MangaPage.svelte

@@ -35,10 +35,17 @@
 
 <div
   draggable="false"
-  style:width={`${page.img_width}px`}
-  style:height={`${page.img_height}px`}
+  style:width={`${window.innerWidth}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);
-      const ymin = clamp(_ymin, 0, img_height);
-      const xmax = clamp(_xmax, 0, img_width);
-      const ymax = clamp(_ymax, 0, img_height);
+      let [_xmin, _ymin, _xmax, _ymax] = box;
+      console.log(box);
+
+      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}
+  {#if $settings.reader === 'classic'}
     <Reader volumeSettings={$volumeSettings[volumeId]} />
+  {:else}
+    <ReaderV2 />
+  {/if}
 {/if}

src/routes/cloud/+page.svelte

@@ -12,7 +12,7 @@
   const API_KEY = import.meta.env.VITE_GDRIVE_API_KEY;
 
   const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';
-  const SCOPES = 'https://www.googleapis.com/auth/drive';
+  const SCOPES = 'https://www.googleapis.com/auth/drive.file';
 
   const FOLDER_MIME_TYPE = 'application/vnd.google-apps.folder';
   const READER_FOLDER = 'mokuro-reader';
@@ -248,6 +248,10 @@
   }
 </script>
 
+<svelte:head>
+  <title>Cloud</title>
+</svelte:head>
+
 <div class="p-2 h-[90svh]">
   {#if loadingMessage}
     <Loader>
@@ -310,10 +314,12 @@
             {/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.
+              Add your zip files to the <span class="text-primary-700">{READER_FOLDER}</span> folder
+              in your Google Drive.
             </p>
+          </div>
         {/if}
       </div>
     </div>