Develop

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "files.exclude": {
+        ".directory": true,
+        "**/.angular": true,
+        "**/.github": true,
+        "**/.vscode": true,
+        "**/dist": true,
+        "**/node_modules": true
+    }
+}

package.json

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

src/app/@site-modules/@common-read/common-read.module.ts

@@ -3,6 +3,8 @@ import { CommonModule } from '@angular/common';
 import { CommonReadComponent } from './ui/common-read/common-read.component';
 import { SharedModule } from '../../shared/shared.module';
 import { RouterModule } from '@angular/router';
+import { ViewerModule } from '../../viewer/viewer.module';
+import { LinkParserModule } from '../../link-parser/link-parser.module';
 
 
 
@@ -13,10 +15,13 @@ import { RouterModule } from '@angular/router';
   imports: [
     CommonModule,
     RouterModule,
-    SharedModule
+    SharedModule,
+    ViewerModule,
+    LinkParserModule
   ],
   exports: [
-    CommonReadComponent
+    CommonReadComponent,
+    SharedModule
   ]
 })
 export class CommonReadModule { }

src/app/@site-modules/imgchest/imgchest-shell.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { ImgchestService } from './imgchest.service';
 import { Base64 } from '../../shared/utils';
 import { of, switchMap } from 'rxjs';
@@ -9,18 +9,14 @@ import { IMGCHEST_PATH } from '../../app-routing.module';
   imports: [CommonReadModule],
   selector: 'app-imgchest-shell',
   template: `<app-common-read [episode$]="episode$" [error$]="error$" [loading$]="loading$" (refreshData)="refreshData()"  [playlist]="playlistService.playlist()" [playlistLink]="playlistLink()" [currentPlaylistItem]="currentPlItem()">
-
-  <a ngProjectAs="source-logo" href="https://imgchest.com" target="_blank" rel="noopener noreferrer" style="display: flex; gap: 1ch; ">
-          <img style="max-width: 40px;" src="/assets/logos/imgchest.png" alt="Imgchest logo">
-      </a>
-
-  <div style="direction: ltr; user-select: text !important; text-wrap: balance; text-align: center; display: grid; place-content: center; justify-items: center;">
-      <p>{{lang.ph().imagesVia}}<a href="https://imgchest.com" target="_blank" rel="noopener noreferrer">Imgchest</a>
-          API.
-          {{lang.ph().thanks}}<br>{{lang.ph().detalisCopy}}</p>
-  </div></app-common-read>`
+<source-copyright [sourceName]="sourceName()" [sourceUrl]="sourceUrl()" />
+<source-copyright-logo ngProjectAs="source-logo" [sourceName]="sourceName()" [sourceUrl]="sourceUrl()" [sourceImageSrc]="sourceImageSrc()" />
+  </app-common-read>`
 })
 export default class ImgchestShellComponent extends ReadBaseComponent {
+  protected readonly sourceName = signal('Imgchest');
+  protected readonly sourceUrl = signal('https://imgchest.com');
+  protected readonly sourceImageSrc = signal('/assets/logos/imgchest.png');
 
   override episode$ = this.combineParamMapAndRefresh()
     .pipe(this.tapStartLoading(),

src/app/@site-modules/imgur/imgur-shell.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { ImgurService } from './imgur.service';
 import { Base64 } from '../../shared/utils';
 import { of, switchMap } from 'rxjs';
@@ -8,19 +8,15 @@ import { IMGUR_PATH } from '../../app-routing.module';
 @Component({
   imports: [CommonReadModule],
   selector: 'app-imgur-shell',
-  template: `<app-common-read [episode$]="episode$" [error$]="error$" [loading$]="loading$" (refreshData)="refreshData()"  [playlist]="playlistService.playlist()" [playlistLink]="playlistLink()" [currentPlaylistItem]="currentPlItem()"><div style="direction: ltr; user-select: text !important; text-wrap: balance; padding: 1rem; text-align: center; display: grid;
-  place-content: center;
-  justify-items: center; min-height: 50vh;">
-      <a href="https://imgur.com" target="_blank" rel="noopener noreferrer" style="display: flex; gap: 1ch; ">
-          <img src="/assets/logos/imgur-logo.svg" alt="Imgur logo">
-      </a>
-      <p>{{lang.ph().imagesVia}}<a href="https://imgur.com" target="_blank" rel="noopener noreferrer">Imgur</a>
-          API.
-          {{lang.ph().thanks}}<br>{{lang.ph().detalisCopy}}</p>
-  </div></app-common-read>`
+  template: `<app-common-read [episode$]="episode$" [error$]="error$" [loading$]="loading$" (refreshData)="refreshData()"  [playlist]="playlistService.playlist()" [playlistLink]="playlistLink()" [currentPlaylistItem]="currentPlItem()">
+    <source-copyright [sourceName]="sourceName()" [sourceUrl]="sourceUrl()" />
+<source-copyright-logo ngProjectAs="source-logo" [sourceName]="sourceName()" [sourceUrl]="sourceUrl()" [sourceImageSrc]="sourceImageSrc()" />
+</app-common-read>`
 })
 export default class ImgurShellComponent extends ReadBaseComponent {
-
+  protected readonly sourceName = signal('Imgur');
+  protected readonly sourceUrl = signal('https://imgur.com');
+  protected readonly sourceImageSrc = signal('/assets/logos/imgur-logo.svg');
   override episode$ = this.combineParamMapAndRefresh()
     .pipe(this.tapStartLoading(),
       switchMap(([params]) => {

src/app/@site-modules/mangadex/mangadex-shell.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { forkJoin, map, of, switchMap } from 'rxjs';
 import { MangadexService } from './mangadex.service';
 import { Base64 } from '../../shared/utils';
@@ -9,21 +9,14 @@ import { MANGADEX_PATH } from '../../app-routing.module';
   imports: [CommonReadModule],
   selector: 'app-mangadex-shell',
   template: `<app-common-read [episode$]="episode$" [error$]="error$" [loading$]="loading$" (refreshData)="refreshData()" [playlist]="playlistService.playlist()" [playlistLink]="playlistLink()" [currentPlaylistItem]="currentPlItem()" >
-
-<div style="direction: ltr; user-select: text !important; text-wrap: balance; padding: 1rem; text-align: center; display: grid;
-    place-content: center;
-    justify-items: center; min-height: 50vh;">
-        <a href="http://mangadex.org" target="_blank" rel="noopener noreferrer" style="display: flex; gap: 1ch; ">
-            <img src="/assets/logos/mangadex-logo.svg" alt="MangaDex logo">
-            <img src="/assets/logos/mangadex-wordmark.svg" alt="MangaDex wordmark">
-        </a>
-        <p>Images via <a href="http://mangadex.org" target="_blank" rel="noopener noreferrer">Mangadex</a> API.
-            Thanks!<br>Details on their site. Respect copyrights.</p>
-    </div>
-
+  <source-copyright [sourceName]="sourceName()" [sourceUrl]="sourceUrl()" />
+<source-copyright-logo ngProjectAs="source-logo" [sourceName]="sourceName()" [sourceUrl]="sourceUrl()" [sourceImageSrc]="sourceImageSrc()" />
 </app-common-read>`
 })
 export default class MangadexShellComponent extends ReadBaseComponent {
+  protected readonly sourceName = signal('MangaDex');
+  protected readonly sourceUrl = signal('https://mangadex.org');
+  protected readonly sourceImageSrc = signal('/assets/logos/mangadex-logo.svg');
 
   override episode$ = this.combineParamMapAndRefresh()
     .pipe(this.tapStartLoading(),

src/app/@site-modules/nhentai/nhentai.service.ts

@@ -32,7 +32,7 @@ export class NhentaiService {
       nsfw: true,
       images: (data.images.pages.map((item: any, index: number) => {
         return {
-          src: `https://i7.nhentai.net/galleries/${mediaId}/${index + 1}.${this.imageType.get(item.t)}`,
+          src: `https://i1.nhentai.net/galleries/${mediaId}/${index + 1}.${this.imageType.get(item.t)}`,
           height: item.h,
           width: item.w
         };

src/app/@site-modules/reddit/reddit-shell.component.ts

@@ -9,17 +9,14 @@ import { REDDIT_PATH } from '../../app-routing.module';
   imports: [CommonReadModule],
   selector: 'app-reddit-shell',
   template: `<app-common-read [episode$]="episode$" [error$]="error$" [loading$]="loading$" (refreshData)="refreshData()" [playlist]="playlistService.playlist()" [playlistLink]="playlistLink()" [currentPlaylistItem]="currentPlItem()" >
- <a ngProjectAs="source-logo" href="https://reddit.com" target="_blank" rel="noopener noreferrer" style="display: flex; gap: 1ch; ">
-          <img style="max-width: 40px;" src="/assets/logos/reddit-logo.svg" alt="MangaDex logo">
-      </a>
-<p>{{lang.ph().imagesVia}}<a href="https://reddit.com" target="_blank" rel="noopener noreferrer">Reddit</a>
-          API.
-          {{lang.ph().thanks}}<br>{{lang.ph().detalisCopy}}</p>
-
+  <source-copyright [sourceName]="sourceName()" [sourceUrl]="sourceUrl()" />
+<source-copyright-logo ngProjectAs="source-logo" [sourceName]="sourceName()" [sourceUrl]="sourceUrl()" [sourceImageSrc]="sourceImageSrc()" />
 </app-common-read>`
 })
 export default class RedditShellComponent extends ReadBaseComponent {
-
+  protected readonly sourceName = () => 'Reddit';
+  protected readonly sourceUrl = () => 'https://reddit.com';
+  protected readonly sourceImageSrc = () => '/assets/logos/reddit-logo.svg';
   override episode$ = this.combineParamMapAndRefresh()
     .pipe(this.tapStartLoading(),
       switchMap(([params]) => {

src/app/@site-modules/telegraph/telegraph-shell.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, signal } from '@angular/core';
 import { Base64 } from '../../shared/utils';
 import { of, switchMap } from 'rxjs';
 import { TelegraphService } from './telegraph.service';
@@ -11,15 +11,15 @@ import { CommonReadModule } from '../@common-read';
   imports: [CommonReadModule],
   template: `<app-common-read [episode$]="episode$" [error$]="error$" [loading$]="loading$" (refreshData)="refreshData()"
     [playlist]="playlistService.playlist()" [playlistLink]="playlistLink()" [currentPlaylistItem]="currentPlItem()" >
-
-    <p>{{lang.ph().imagesVia}}<a href="https://telegra.ph" target="_blank" rel="noopener noreferrer">Telegra.ph</a>
-          API.
-          {{lang.ph().thanks}}<br>{{lang.ph().detalisCopy}}</p>
+    <source-copyright [sourceName]="sourceName()" [sourceUrl]="sourceUrl()" />
+<source-copyright-logo ngProjectAs="source-logo" [sourceName]="sourceName()" [sourceUrl]="sourceUrl()" [sourceImageSrc]="sourceImageSrc()" />
 
     </app-common-read>`
 })
 export default class TelegraphShellComponent extends ReadBaseComponent implements OnDestroy {
-
+  protected readonly sourceName = signal('Telegra.ph');
+  protected readonly sourceUrl = signal('https://telegra.ph');
+  protected readonly sourceImageSrc = signal('/assets/logos/telegraph-logo.svg');
   override episode$ = this.combineParamMapAndRefresh()
     .pipe(this.tapStartLoading(),
       switchMap(([params]) => {

src/app/@site-modules/yandere/yandere-shell.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, OnDestroy } from '@angular/core';
+import { Component, inject, OnDestroy, signal } from '@angular/core';
 import { switchMap, of } from 'rxjs';
 import { CommonReadModule, ReadBaseComponent } from '../@common-read';
 import { Base64 } from '../../shared/utils';
@@ -10,15 +10,17 @@ import { YANDERE_PATH } from '../../app-routing.module';
   imports: [CommonReadModule],
   template: `<app-common-read [episode$]="episode$" [error$]="error$" [loading$]="loading$" (refreshData)="refreshData()"
     [playlist]="playlistService.playlist()" [playlistLink]="playlistLink()" [currentPlaylistItem]="currentPlItem()">
-
-    <p>{{lang.ph().imagesVia}}<a href="https://yande.re" target="_blank" rel="noopener noreferrer">Yande.re</a>
-        API.
-        {{lang.ph().thanks}}<br>{{lang.ph().detalisCopy}}</p>
+<source-copyright [sourceName]="sourceName()" [sourceUrl]="sourceUrl()" />
+<source-copyright-logo ngProjectAs="source-logo" [sourceName]="sourceName()" [sourceUrl]="sourceUrl()" [sourceImageSrc]="sourceImageSrc()" />
 
 </app-common-read>`
 })
 export default class YandereShellComponent extends ReadBaseComponent implements OnDestroy {
   yandere = inject(YandereService)
+  protected readonly sourceName = signal('Yande.re');
+  protected readonly sourceUrl = signal('https://yande.re');
+  protected readonly sourceImageSrc = signal('/assets/logos/yandere-logo.png');
+
 
   override episode$ = this.combineParamMapAndRefresh()
     .pipe(this.tapStartLoading(),

src/app/@site-modules/zenko/zenko-shell.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, OnDestroy } from '@angular/core';
+import { Component, inject, OnDestroy, signal } from '@angular/core';
 import { switchMap, of } from 'rxjs';
 import { ZENKO_PATH } from '../../app-routing.module';
 import { CommonReadModule, ReadBaseComponent } from '../@common-read';
@@ -10,15 +10,15 @@ import { ZenkoService } from './zenko.service';
   imports: [CommonReadModule],
   template: `<app-common-read [episode$]="episode$" [error$]="error$" [loading$]="loading$" (refreshData)="refreshData()"
     [playlist]="playlistService.playlist()" [playlistLink]="playlistLink()" [currentPlaylistItem]="currentPlItem()">
-
-    <p>{{lang.ph().imagesVia}}<a href="https://zenko.online" target="_blank" rel="noopener noreferrer">Zenko</a>
-        API.
-        {{lang.ph().thanks}}<br>{{lang.ph().detalisCopy}}</p>
-
+  <source-copyright [sourceName]="sourceName()" [sourceUrl]="sourceUrl()" />
+<source-copyright-logo ngProjectAs="source-logo" [sourceName]="sourceName()" [sourceUrl]="sourceUrl()" [sourceImageSrc]="sourceImageSrc()" />
 </app-common-read>`
 })
 export default class ZenkoShellComponent extends ReadBaseComponent implements OnDestroy {
   zenko = inject(ZenkoService)
+  protected readonly sourceName = signal('Zenko');
+  protected readonly sourceUrl = signal('https://zenko.online');
+  protected readonly sourceImageSrc = signal('/assets/logos/zenko-logo.svg');
 
   override episode$ = this.combineParamMapAndRefresh()
     .pipe(this.tapStartLoading(),

src/app/app.component.html

@@ -1,4 +1,7 @@
-<gamepad-cursor [cursorVisible]="gamepad.gamepad.cursorVisible()" [x]="gamepad.gamepad.x()" [y]="gamepad.gamepad.y()" />
+@if (gamepad.gamepad.connected()) {
+@defer{<gamepad-cursor [cursorVisible]="gamepad.gamepad.cursorVisible()" [x]="gamepad.gamepad.x()"
+    [y]="gamepad.gamepad.y()" />}
+}
 <div><router-outlet></router-outlet></div>
 <div><router-outlet name="right"></router-outlet></div>
 @defer{<sircle-blur [radius]="8" [samples]="12" />}

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { SharedModule } from './shared/shared.module';
 
 import { registerLocaleData } from '@angular/common';
 import localeUk from "@angular/common/locales/uk";
+import { parserProviders } from './link-parser/data-access/parser.providers';
 
 registerLocaleData(localeUk)
 
@@ -34,7 +35,8 @@ registerLocaleData(localeUk)
         //         includePostRequests: false,
         //     })
         // ),
-        provideHttpClient(withFetch())
+        provideHttpClient(withFetch()),
+        ...parserProviders
     ]
 })
 export class AppModule { }

src/app/file/mobi/mobi.component.ts

@@ -4,10 +4,11 @@ import { Router } from '@angular/router';
 import { FileService } from '../data-access/file.service';
 import { MobiFileReader } from 'readiverse';
 import { SharedModule } from '../../shared/shared.module';
+import { ViewerModule } from '../../viewer/viewer.module';
 
 @Component({
     selector: 'app-mobi',
-    imports: [SharedModule],
+    imports: [SharedModule, ViewerModule],
     templateUrl: './mobi.component.html',
     styleUrl: './mobi.component.scss'
 })

src/app/file/pdf/pdf.component.html

@@ -1,4 +1,3 @@
-<!-- <app-viewer [episode]="{title: fs.file()?.name ?? '', images: images}" /> -->
 @if(episode && episode.images && episode.images.length > 0){
 <app-viewer [episode]="episode" />
 } @else {

src/app/file/pdf/pdf.component.ts

@@ -6,14 +6,15 @@ import { Router } from '@angular/router';
 import { getDocument, GlobalWorkerOptions, PDFPageProxy } from 'pdfjs-dist';
 import { RenderParameters } from 'pdfjs-dist/types/src/display/api';
 import { CompositionEpisode } from '../../@site-modules/@common-read';
+import { ViewerModule } from '../../viewer/viewer.module';
 
 GlobalWorkerOptions.workerSrc = '/assets/pdf.worker.min.mjs'
 
 const MDASH = '—';
 
 @Component({
     selector: 'app-pdf',
-    imports: [SharedModule],
+    imports: [SharedModule, ViewerModule],
     templateUrl: './pdf.component.html',
     styleUrl: './pdf.component.scss'
 })

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

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

src/app/file/zip/zip.component.ts

@@ -9,12 +9,11 @@ import { Acbf } from '../../shared/utils/acbf';
 import { FileHashService } from '../data-access/file-hash.service';
 import { FileHistoryService } from '../data-access/file-history.service';
 import { FileSettingsService } from '../data-access/file-settings.service';
-import { map } from 'rxjs';
-import { ViewerComponent } from "../../viewer/viewer.component";
+import { ViewerModule } from '../../viewer/viewer.module';
 
 @Component({
   selector: 'app-zip',
-  imports: [SharedModule, /*ViewerComponent*/],
+  imports: [SharedModule, ViewerModule],
   templateUrl: './zip.component.html',
   styleUrl: './zip.component.scss'
 })
@@ -152,9 +151,4 @@ export class ZipComponent implements OnInit, OnDestroy {
     this.episode = { title: filename, images: [] }
     this.worker.postMessage({ arrayBuffer: ab });
   }
-
-  onPageChange(e: { total: number, current: number[] }) {
-    const { current, total } = e
-    console.log(`${current}/${total}`);
-  }
 }