Update +page.svelte

Improve language extension compatibility

README.md

@@ -10,7 +10,7 @@ https://github.com/ZXY101/mokuro-reader/assets/39561296/45a214a8-3f69-461c-87d7-
 - Anki connect integration & image cropping
 - Installation and offline support
 
-## Useage:
+## Usage:
 You can find the reader hosted [here](https://reader.mokuro.app/).
 
 To import your manga, process it with mokuro and then upload your manga along with the generated `.mokuro` file.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "z-reader",
-  "version": "1.0.0",
+  "version": "0.9.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "z-reader",
-      "version": "0.9.0",
+      "version": "0.9.1",
       "dependencies": {
         "@types/gapi": "^0.0.47",
         "@types/google.accounts": "^0.0.14",
@@ -485,10 +485,11 @@
       }
     },
     "node_modules/@fastify/busboy": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.0.tgz",
-      "integrity": "sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
+      "integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=14"
       }
@@ -689,11 +690,12 @@
       }
     },
     "node_modules/@sveltejs/kit": {
-      "version": "1.30.3",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.30.3.tgz",
-      "integrity": "sha512-0DzVXfU4h+tChFvoc8C61IqErCyskD4ydSIDjpKS2lYlEzIYrtYrY7juSqACFxqcvZAnOEXvSY+zZ8br0+ZMMg==",
+      "version": "1.30.4",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.30.4.tgz",
+      "integrity": "sha512-JSQIQT6XvdchCRQEm7BABxPC56WP5RYVONAi+09S8tmzeP43fBsRlr95bFmsTQM2RHBldfgQk+jgdnsKI75daA==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "dependencies": {
         "@sveltejs/vite-plugin-svelte": "^2.5.0",
         "@types/cookie": "^0.5.1",
@@ -707,7 +709,7 @@
         "set-cookie-parser": "^2.6.0",
         "sirv": "^2.0.2",
         "tiny-glob": "^0.2.9",
-        "undici": "~5.26.2"
+        "undici": "^5.28.3"
       },
       "bin": {
         "svelte-kit": "svelte-kit.js"
@@ -3917,10 +3919,11 @@
       }
     },
     "node_modules/undici": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.26.5.tgz",
-      "integrity": "sha512-cSb4bPFd5qgR7qr2jYAi0hlX9n5YKK2ONKkLFkxl+v/9BvC0sOpZjBHDBSXc5lWAf5ty9oZdRXytBIHzgUcerw==",
+      "version": "5.28.4",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
+      "integrity": "sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@fastify/busboy": "^2.0.0"
       },
@@ -3974,10 +3977,11 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
-      "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.18.10",
         "postcss": "^8.4.27",
@@ -4312,9 +4316,9 @@
       "dev": true
     },
     "@fastify/busboy": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.0.tgz",
-      "integrity": "sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
+      "integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==",
       "dev": true
     },
     "@floating-ui/core": {
@@ -4480,9 +4484,9 @@
       }
     },
     "@sveltejs/kit": {
-      "version": "1.30.3",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.30.3.tgz",
-      "integrity": "sha512-0DzVXfU4h+tChFvoc8C61IqErCyskD4ydSIDjpKS2lYlEzIYrtYrY7juSqACFxqcvZAnOEXvSY+zZ8br0+ZMMg==",
+      "version": "1.30.4",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.30.4.tgz",
+      "integrity": "sha512-JSQIQT6XvdchCRQEm7BABxPC56WP5RYVONAi+09S8tmzeP43fBsRlr95bFmsTQM2RHBldfgQk+jgdnsKI75daA==",
       "dev": true,
       "requires": {
         "@sveltejs/vite-plugin-svelte": "^2.5.0",
@@ -4497,7 +4501,7 @@
         "set-cookie-parser": "^2.6.0",
         "sirv": "^2.0.2",
         "tiny-glob": "^0.2.9",
-        "undici": "~5.26.2"
+        "undici": "^5.28.3"
       }
     },
     "@sveltejs/vite-plugin-svelte": {
@@ -6728,9 +6732,9 @@
       "dev": true
     },
     "undici": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.26.5.tgz",
-      "integrity": "sha512-cSb4bPFd5qgR7qr2jYAi0hlX9n5YKK2ONKkLFkxl+v/9BvC0sOpZjBHDBSXc5lWAf5ty9oZdRXytBIHzgUcerw==",
+      "version": "5.28.4",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
+      "integrity": "sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==",
       "dev": true,
       "requires": {
         "@fastify/busboy": "^2.0.0"
@@ -6762,9 +6766,9 @@
       "dev": true
     },
     "vite": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
-      "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
       "dev": true,
       "requires": {
         "esbuild": "^0.18.10",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "z-reader",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "private": true,
   "scripts": {
     "dev": "vite dev",

src/lib/anki-connect/index.ts

@@ -102,7 +102,7 @@ export async function updateLastCard(imageData: string | null | undefined, sente
         id,
         fields,
         picture: {
-          filename: `_${id}.webp`,
+          filename: `mokuro_${id}.webp`,
           data: imageData.split(';base64,')[1],
           fields: [pictureField],
         },

src/lib/components/CatalogItem.svelte

@@ -18,7 +18,9 @@
           class="object-contain sm:w-[250px] sm:h-[350px] bg-black border-gray-900 border"
         />
       {/if}
-      <p class="font-semibold">{manga.mokuroData.title}</p>
+      <p class="font-semibold sm:w-[250px] line-clamp-1">
+        {manga.mokuroData.title}
+      </p>
     </div>
   </a>
 {/if}

src/lib/components/Reader/Reader.svelte

@@ -23,6 +23,7 @@
   import { getCharCount } from '$lib/util/count-chars';
   import QuickActions from './QuickActions.svelte';
   import { beforeNavigate } from '$app/navigation';
+  import { onMount } from 'svelte';
 
   // TODO: Refactor this whole mess
   export let volumeSettings: VolumeSettings;
@@ -220,7 +221,17 @@
     }
   }
 
+  onMount(() => {
+    if ($settings.defaultFullscreen) {
+      document.documentElement.requestFullscreen();
+    }
+  });
+
   beforeNavigate(() => {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+
     if (volume) {
       const { charCount, lineCount } = getCharCount(pages, page);
 
@@ -329,14 +340,17 @@
       <div
         class="flex flex-row"
         class:flex-row-reverse={!volumeSettings.rightToLeft}
+        style:filter={`invert(${$settings.invertColors ? 1 : 0})`}
         on:dblclick={onDoubleTap}
         role="none"
         id="manga-panel"
       >
+        {#key page}
           {#if showSecondPage()}
             <MangaPage page={pages[index + 1]} src={Object.values(volume?.files)[index + 1]} />
           {/if}
           <MangaPage page={pages[index]} src={Object.values(volume?.files)[index]} />
+        {/key}
       </div>
     </Panzoom>
   </div>

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

@@ -3,6 +3,7 @@
   import { Toggle } from 'flowbite-svelte';
 
   $: toggles = [
+    { key: 'defaultFullscreen', text: 'Open reader in fullscreen', value: $settings.defaultFullscreen },
     { key: 'textEditable', text: 'Editable text', value: $settings.textEditable },
     { key: 'textBoxBorders', text: 'Text box borders', value: $settings.textBoxBorders },
     { key: 'displayOCR', text: 'OCR enabled', value: $settings.displayOCR },
@@ -12,7 +13,8 @@
     { key: 'bounds', text: 'Bounds', value: $settings.bounds },
     { key: 'mobile', text: 'Mobile', value: $settings.mobile },
     { key: 'showTimer', text: 'Show timer', value: $settings.showTimer },
-    { key: 'quickActions', text: 'Show quick actions', value: $settings.quickActions }
+    { key: 'quickActions', text: 'Show quick actions', value: $settings.quickActions },
+    { key: 'invertColors', text: 'Invert colors of the images', value: $settings.invertColors }
   ] as { key: SettingsKey; text: string; value: any }[];
 </script>
 

src/lib/consts/index.ts

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

src/lib/settings/settings.ts

@@ -41,6 +41,7 @@ export type VolumeDefaults = {
 }
 
 export type Settings = {
+  defaultFullscreen: boolean;
   textEditable: boolean;
   textBoxBorders: boolean;
   displayOCR: boolean;
@@ -56,6 +57,7 @@ export type Settings = {
   quickActions: boolean;
   fontSize: FontSize;
   zoomDefault: ZoomModes;
+  invertColors: boolean;
   volumeDefaults: VolumeDefaults;
   ankiConnectSettings: AnkiConnectSettings;
 };
@@ -67,6 +69,7 @@ export type AnkiSettingsKey = keyof AnkiConnectSettings;
 export type VolumeDefaultsKey = keyof VolumeDefaults;
 
 const defaultSettings: Settings = {
+  defaultFullscreen: false,
   displayOCR: true,
   textEditable: false,
   textBoxBorders: false,
@@ -82,6 +85,7 @@ const defaultSettings: Settings = {
   quickActions: true,
   fontSize: 'auto',
   zoomDefault: 'zoomFitToScreen',
+  invertColors: false,
   volumeDefaults: {
     singlePageView: false,
     rightToLeft: true,

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 { Button } from 'flowbite-svelte';
+  import { formatBytes, showSnackbar, uploadFile } from '$lib/util';
+  import { Button, P, Progressbar } from 'flowbite-svelte';
   import { onMount } from 'svelte';
   import { promptConfirmation } from '$lib/util';
   import { GoogleSolid } from 'flowbite-svelte-icons';
@@ -22,11 +22,63 @@
   const type = 'application/json';
 
   let tokenClient: any;
-  let loadingMessage = '';
+  let accessToken = '';
+
   let readerFolderId = '';
   let volumeDataId = '';
   let profilesId = '';
-  let accessToken = '';
+
+  let loadingMessage = '';
+
+  let completed = 0;
+  let totalSize = 0;
+  $: progress = Math.floor((completed / totalSize) * 100).toString();
+
+  function xhrDownloadFileId(fileId: string) {
+    return new Promise<Blob>((resolve, reject) => {
+      const { access_token } = gapi.auth.getToken();
+      const xhr = new XMLHttpRequest();
+
+      completed = 0;
+      totalSize = 0;
+
+      xhr.open('GET', `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media`);
+      xhr.setRequestHeader('Authorization', `Bearer ${access_token}`);
+      xhr.responseType = 'blob';
+
+      xhr.onprogress = ({ loaded, total }) => {
+        loadingMessage = '';
+        completed = loaded;
+        totalSize = total;
+      };
+
+      xhr.onabort = (event) => {
+        console.warn(`xhr ${fileId}: download aborted at ${event.loaded} of ${event.total}`);
+        showSnackbar('Download failed');
+        reject(new Error('Download aborted'));
+      };
+
+      xhr.onerror = (event) => {
+        console.error(`xhr ${fileId}: download error at ${event.loaded} of ${event.total}`);
+        showSnackbar('Download failed');
+        reject(new Error('Error downloading file'));
+      };
+
+      xhr.onload = () => {
+        completed = 0;
+        totalSize = 0;
+        resolve(xhr.response);
+      };
+
+      xhr.ontimeout = (event) => {
+        console.warn(`xhr ${fileId}: download timeout after ${event.loaded} of ${event.total}`);
+        showSnackbar('Download timed out');
+        reject(new Error('Timout downloading file'));
+      };
+
+      xhr.send();
+    });
+  }
 
   async function connectDrive(resp?: any) {
     if (resp?.error !== undefined) {
@@ -123,25 +175,24 @@
   }
 
   async function pickerCallback(data: google.picker.ResponseObject) {
+    try {
       if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
-      loadingMessage = 'Downloading from drive';
+        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 blob = await xhrDownloadFileId(docs[0].id);
 
-      const type = headers?.['Content-Type'] || '';
-
-      const blob = new Blob([new Uint8Array(body.length).map((_, i) => body.charCodeAt(i))], {
-        type
-      });
+        loadingMessage = 'Adding to catalog...';
 
         const file = new File([blob], docs[0].name);
 
         await processFiles([file]);
         loadingMessage = '';
       }
+    } catch (error) {
+      showSnackbar('Something went wrong');
+      loadingMessage = '';
+      console.error(error);
+    }
   }
 
   async function onUploadVolumeData() {
@@ -242,9 +293,14 @@
 </svelte:head>
 
 <div class="p-2 h-[90svh]">
-  {#if loadingMessage}
+  {#if loadingMessage || completed > 0}
     <Loader>
+      {#if completed > 0}
+        <P>{formatBytes(completed)} / {formatBytes(totalSize)}</P>
+        <Progressbar {progress} />
+      {:else}
         {loadingMessage}
+      {/if}
     </Loader>
   {:else if accessToken}
     <div class="flex justify-between items-center gap-6 flex-col">

src/routes/upload/+page.svelte

@@ -6,7 +6,7 @@
   import { promptConfirmation, showSnackbar } from '$lib/util';
   import { P, Progressbar } from 'flowbite-svelte';
   import { onMount } from 'svelte';
-  export const BASE_URL = 'https://www.mokuro.moe/manga';
+  export const BASE_URL = $page.url.searchParams.get('source') || 'https://mokuro.moe/manga';
 
   const manga = $page.url.searchParams.get('manga');
   const volume = $page.url.searchParams.get('volume');