Merge pull request #31 from chytanka/feat/save-files-history

Feat/save files history

Author: rodzyk

.github/workflows/node.js.yml

@@ -20,7 +20,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chytanka",
-  "version": "0.14.30",
+  "version": "0.14.31",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/app.component.ts

@@ -2,11 +2,12 @@ import { Component, HostListener, PLATFORM_ID, WritableSignal, inject, signal }
 import { LangService } from './shared/data-access/lang.service';
 import { ActivatedRoute } from '@angular/router';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { environment } from '../environments/environment';
 
 const SCALE_GAP = 128;
 
 @Component({
-    selector: 'app-root',
+    selector: 'chtnk-root',
     template: `<div><router-outlet></router-outlet></div><div><router-outlet name="right"></router-outlet></div>`,
     styles: [`
     // :host {
@@ -23,7 +24,7 @@ export class AppComponent {
     this.lang.updateManifest()
     this.lang.updateTranslate()
 
-    if (isPlatformBrowser(this.platformId) && window.console) {
+    if (isPlatformBrowser(this.platformId) && window.console && environment.prod) {
       const msg = `What are you looking for here? The plot twist is in the next volume!`
       console.log(`%c${msg}`,  "background-color: #166496; color: #ffd60a; font-size: 4rem; font-family:  monospace; padding: 8px 16px");
   }

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { LOCALE_ID, NgModule, isDevMode, provideZoneChangeDetection } from '@angular/core';
-import { BrowserModule, provideClientHydration } from '@angular/platform-browser';
+import { BrowserModule, provideClientHydration, withEventReplay } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -30,7 +30,7 @@ registerLocaleData(localeUk)
         SharedModule],
     providers: [
         provideZoneChangeDetection({ eventCoalescing: true }),
-        provideClientHydration(),
+        provideClientHydration(withEventReplay()),
         provideHttpClient(withFetch())
     ]
 })

src/app/file/data-access/file-hash.service.ts

@@ -5,18 +5,41 @@ import * as CryptoJS from 'crypto-js';
   providedIn: 'root'
 })
 export class FileHashService {
-  public getMd5Hash(arrayBuffer: ArrayBuffer) {
-    const wordArray = this.arrayBufferToWordArray(arrayBuffer);
-    const md5Hash = CryptoJS.MD5(wordArray).toString();
-    return md5Hash;
-  }
+  // getSHA256(arrayBuffer: ArrayBuffer): string {
+  //   const wordArray = CryptoJS.lib.WordArray.create(new Uint8Array(arrayBuffer) as any);
+  //   return CryptoJS.SHA256(wordArray).toString(CryptoJS.enc.Hex);
+  // }
 
-  private arrayBufferToWordArray(arrayBuffer: ArrayBuffer): CryptoJS.lib.WordArray {
-    const uint8Array = new Uint8Array(arrayBuffer);
-    const words: any[] = [];
-    for (let i = 0; i < uint8Array.length; i++) {
-      words[i >>> 2] |= uint8Array[i] << (24 - (i % 4) * 8);
+  async sha256(file: File): Promise<string> {
+    const sha256 = CryptoJS.algo.SHA256.create();
+    const sliceSize = 50_000_000; // 50 MiB
+    let start = 0;
+  
+    while (start < file.size) {
+      const slice: Uint8Array = await this.readSlice(file, start, sliceSize);
+      const wordArray = CryptoJS.lib.WordArray.create(slice);
+      sha256.update(wordArray);
+      start += sliceSize;
     }
-    return CryptoJS.lib.WordArray.create(words, uint8Array.length);
+  
+    return sha256.finalize().toString();
+  }
+  
+  private async readSlice(file: File, start: number, size: number): Promise<Uint8Array> {
+    return new Promise<Uint8Array>((resolve, reject) => {
+      const fileReader = new FileReader();
+      const slice = file.slice(start, start + size);
+  
+      fileReader.onload = () => {
+        if (fileReader.result) {
+          resolve(new Uint8Array(fileReader.result as ArrayBuffer));
+        } else {
+          reject(new Error("FileReader returned no result."));
+        }
+      };
+      fileReader.onerror = () => reject(fileReader.error || new Error("FileReader failed."));
+      fileReader.readAsArrayBuffer(slice);
+    });
   }
+  
 }

src/app/file/data-access/file-history.service.ts

@@ -0,0 +1,87 @@
+import { isPlatformBrowser } from '@angular/common';
+import { inject, Injectable, PLATFORM_ID } from '@angular/core';
+import Dexie from 'dexie';
+
+const HISTORY_DB_NAME: string = `ChytankaHistoryDB`;
+const HISTORY_TABLE_NAME: string = `filehistory`;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FileHistoryService {
+  private db!: Dexie;
+
+  platformId = inject(PLATFORM_ID)
+
+  constructor() {
+    this.createDatabase();
+  }
+
+  private createDatabase() {
+    this.db = new Dexie(HISTORY_DB_NAME);
+    this.db.version(1).stores({
+      filehistory: '++id,sha256,pages,size,title,format,page,cover,arrayBuffer,created,updated'
+    });
+  }
+
+  async addHistory(fileHistory: any) {
+    if (!isPlatformBrowser(this.platformId)) return;
+
+    const { sha256, arrayBuffer, pages, page, cover, size, title, format } = fileHistory
+
+    // await this.db.table(HISTORY_TABLE_NAME).add({ site, post_id, title, cover });
+    const existingEntry = await this.db.table(HISTORY_TABLE_NAME).where({ sha256 }).first();
+
+    if (existingEntry) {
+      // Entry already exists, update the 'updated' field
+      const now = new Date().toISOString();
+      await this.db.table(HISTORY_TABLE_NAME).update(existingEntry.id, { arrayBuffer, updated: now });
+    } else {
+      // Entry doesn't exist, add a new one
+      const now = new Date().toISOString();
+      await this.db.table(HISTORY_TABLE_NAME).add({
+        created: now,
+        updated: now,
+        sha256,
+        arrayBuffer,
+        pages, page, cover, size, title, format
+      });
+    }
+  }
+
+  async getAllHistory() {
+    return await this.db.table(HISTORY_TABLE_NAME).orderBy('updated').reverse().toArray();
+  }
+
+  async getItemBySha256(sha256: string) {
+    return await this.db.table(HISTORY_TABLE_NAME).where('sha256').equals(sha256).first();
+}
+
+
+  async getAllHistoryWithoutBufferArray() {
+    const records = await this.db.table(HISTORY_TABLE_NAME).orderBy('updated').reverse().toArray();
+  
+    return records.map(({ arrayBuffer, ...rest }) => rest);
+  }
+
+  async getTotalSizeAndCount(): Promise<{ size: number; count: number }> {
+    let size = 0;
+    let count = 0;
+
+    await this.db.table(HISTORY_TABLE_NAME).each(item => {
+      size += item.size;
+      count++;
+    });
+
+    return { size, count };
+  }
+
+  async clearHistory() {
+    await this.db.table(HISTORY_TABLE_NAME).clear();
+  }
+
+  async deleteHistoryItem(itemId: number) {
+    await this.db.table(HISTORY_TABLE_NAME).delete(itemId);
+  }
+
+}

src/app/file/data-access/file-settings.service.ts

@@ -0,0 +1,70 @@
+import { isPlatformServer } from '@angular/common';
+import { inject, Injectable, PLATFORM_ID, signal, WritableSignal } from '@angular/core';
+
+const SAVE_FILE_HISTORY_NAME = "saveFileToHistory"
+const COPY_FILE_HISTORY_NAME = "copyFileToHistory"
+const RETENTION_TIME_NAME = "retentionTime"
+const STORAGE_LIMIT_NAME = "storageLimit"
+
+const DEFAULT_RETENTION_TIME = 30; // days
+const DEFAULT_STORAGE_LIMIT = 1024; //Mb
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FileSettingsService {
+  platformId = inject(PLATFORM_ID)
+
+  readonly saveFileToHistory: WritableSignal<boolean> = signal(false);
+  readonly copyFileToHistory: WritableSignal<boolean> = signal(false);
+  readonly retentionTime: WritableSignal<number> = signal(DEFAULT_RETENTION_TIME)
+  readonly storageLimit: WritableSignal<number> = signal(DEFAULT_STORAGE_LIMIT)
+
+  constructor() {
+    this.init()
+  }
+
+  init() {
+    if (isPlatformServer(this.platformId)) return;
+
+    const n = Boolean(localStorage.getItem(SAVE_FILE_HISTORY_NAME) == 'true');
+    this.setSaveFileToHistory(n);
+
+    const sf = Boolean(localStorage.getItem(COPY_FILE_HISTORY_NAME) == 'true');
+    this.setCopyFileToHistory(sf);
+
+    const rt = Number(localStorage.getItem(RETENTION_TIME_NAME) ?? DEFAULT_RETENTION_TIME);
+    this.setRetentionTime(rt)
+
+    const sl = Number(localStorage.getItem(STORAGE_LIMIT_NAME) ?? DEFAULT_STORAGE_LIMIT);
+    this.setStorageLimit(sl)
+  }
+
+  setSaveFileToHistory(n: boolean) {
+    if (isPlatformServer(this.platformId)) return;
+
+    this.saveFileToHistory.set(n);
+    localStorage.setItem(SAVE_FILE_HISTORY_NAME, n.toString())
+  }
+
+  setCopyFileToHistory(n: boolean) {
+    if (isPlatformServer(this.platformId)) return;
+
+    this.copyFileToHistory.set(n);
+    localStorage.setItem(COPY_FILE_HISTORY_NAME, n.toString())
+  }
+
+  setRetentionTime(days: number) {
+    if (isPlatformServer(this.platformId)) return;
+
+    this.retentionTime.set(days);
+    localStorage.setItem(RETENTION_TIME_NAME, days.toString())
+  }
+
+  setStorageLimit(megabytes: number) {
+    if (isPlatformServer(this.platformId)) return;
+
+    this.storageLimit.set(megabytes);
+    localStorage.setItem(STORAGE_LIMIT_NAME, megabytes.toString())
+  }
+}

src/app/file/data-access/zip.worker.ts

@@ -11,7 +11,7 @@ addEventListener('message', ({ data }) => {
     .then(async zip => {
       const filesName: string[] = Object.keys(zip.files);
 
-      console.dir(zip.files)
+      // console.dir(zip.files)
 
       const comicInfoFile = getComicInfoFile(filesName)
 

src/app/file/file-routing.module.ts

@@ -1,19 +1,19 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+const zip = () => import('./zip/zip.component').then(mod => mod.ZipComponent);
+const pdf = () => import('./pdf/pdf.component').then(mod => mod.PdfComponent);
+const mobi = () => import('./mobi/mobi.component').then(mod => mod.MobiComponent);
+
 const routes: Routes = [
-  {
-    path: 'zip',
-    loadComponent: () => import('./zip/zip.component').then(mod => mod.ZipComponent)
-  },
-  {
-    path: 'pdf',
-    loadComponent: () => import('./pdf/pdf.component').then(mod => mod.PdfComponent)
-  },
-  {
-    path: 'mobi',
-    loadComponent: () => import('./mobi/mobi.component').then(mod => mod.MobiComponent)
-  }
+  { path: 'zip/:sha256', loadComponent: zip },
+  { path: 'zip', loadComponent: zip },
+  
+  { path: 'pdf/:sha256', loadComponent: pdf },
+  { path: 'pdf', loadComponent: pdf },
+
+  { path: 'mobi/:sha256', loadComponent: mobi },
+  { path: 'mobi', loadComponent: mobi }
 ];
 
 @NgModule({

src/app/file/zip/zip.component.html

@@ -1,5 +1,6 @@
 @if(episode && episode.images && episode.images.length > 0){
-<app-viewer [episode]="episode" />
+<!-- <chtnk-viewer [episode]="episode" class="right-to-left"/> -->
+<app-viewer [episode]="episode" (pagechange)="onPageChange($event)" />
 } @else {
 <loading />
 }