Merge pull request #17 from chytanka/develop

rodzyk · web-flow · commit db00343a0f93 · 2024-08-11T17:06:40.000+03:00
feat: zenko
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -23,6 +23,7 @@ export const IMGUR_PATH = `imgur`;
 export const REDDIT_PATH = `reddit`;
 export const READ_PATH = `read`;
 export const LIST_PATH = `list`;
+export const ZENKO_PATH = `zenko`;
 
 const routes: Routes = [
   {
@@ -53,6 +54,10 @@ const routes: Routes = [
     path: REDDIT_PATH,
     loadChildren: () => import('./reddit/reddit.module').then(m => m.RedditModule)
   },
+  {
+    path: ZENKO_PATH,
+    loadChildren: () => import('./zenko/zenko.module').then(m => m.ZenkoModule)
+  },
   {
     matcher: urlMatcher,
     loadChildren: () => import('./link-parser/link-parser.module').then(m => m.LinkParserModule)
diff --git a/src/app/common/common-read/utils/composition.ts b/src/app/common/common-read/utils/composition.ts
@@ -8,6 +8,18 @@ export interface CompositionImage {
     nsfw?: string;
 }
 
+export interface CompositionPublisher {
+    id: string;
+    site: string;
+    avatar: CompositionImage;
+    description: string
+    name: string;
+    links: Array<{
+        link: string,
+        title: string
+    }>
+}
+
 export interface CompositionEpisode {
     title: string;
     episode?: number;
@@ -17,7 +29,7 @@ export interface CompositionEpisode {
     chapter?: number;
     part?: number;
     extra?: boolean;
-
+    publisher?: CompositionPublisher, 
     images: CompositionImage[];
 }
 
diff --git a/src/app/link-parser/link-parser/link-parser.component.ts b/src/app/link-parser/link-parser/link-parser.component.ts
@@ -1,13 +1,11 @@
 import { Component, Signal, ViewChild, WritableSignal, computed, effect, inject, signal } from '@angular/core';
 import { LinkParserService } from '../data-access/link-parser.service';
-import { ImgurLinkParser, JsonLinkParser, MangadexLinkParser, RedditLinkParser, TelegraphLinkParser } from '../utils';
+import {ZenkoLinkParser, ImgurLinkParser, JsonLinkParser, MangadexLinkParser, RedditLinkParser, TelegraphLinkParser } from '../utils';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LangService } from '../../shared/data-access/lang.service';
 import { Base64 } from '../../shared/utils';
 import { Title } from '@angular/platform-browser';
 import { LinkParserSettingsService } from '../data-access/link-parser-settings.service';
-import { HistoryService } from '../../history/data-access/history.service';
-import { DialogComponent } from '../../shared/ui/dialog/dialog.component';
 
 @Component({
   selector: 'app-link-parser',
@@ -47,6 +45,7 @@ export class LinkParserComponent {
     this.parser.parsers.push(new MangadexLinkParser)
     this.parser.parsers.push(new TelegraphLinkParser)
     this.parser.parsers.push(new RedditLinkParser)
+    this.parser.parsers.push(new ZenkoLinkParser)
     this.parser.parsers.push(new JsonLinkParser)
   }
 
@@ -110,6 +109,7 @@ export class LinkParserComponent {
   }
 
   favicons: any = {
+    zenko: '//zenko.online/favicon.ico',
     reddit: '//reddit.com/favicon.ico',
     imgur: '//imgur.com/favicon.ico',
     mangadex: '//mangadex.org/favicon.ico',
diff --git a/src/app/link-parser/ui/faq/faq.component.html b/src/app/link-parser/ui/faq/faq.component.html
@@ -46,6 +46,15 @@
         <li><code>mangadex.org/&#123;id&#125;</code></li>
       </ul>
     </dd>
+
+    <dt><img src="//zenko.online/favicon.ico" alt="MangaDex"><a href="//zenko.online" target="_blank"
+      rel="noopener noreferrer">Zenko</a></dt>
+  <dd>
+    <ul>
+      <li><code>zenko.online/titles/&#123;titleId&#125;/&#123;id&#125;</code></li>
+    </ul>
+  </dd>
+
   </dl>
   <p style="font-style: italic;">{{lang.ph().whereIdIs}}</p>
 
diff --git a/src/app/link-parser/utils/index.ts b/src/app/link-parser/utils/index.ts
@@ -3,4 +3,5 @@ export * from './imgur-link-parser';
 export * from './mangadex-link-parser';
 export * from './json-link-parser';
 export * from './telegraph-link-parser';
-export * from './reddit-link-parser';
+export * from './reddit-link-parser';
+export * from './zenko-link-parser';
diff --git a/src/app/link-parser/utils/zenko-link-parser.ts b/src/app/link-parser/utils/zenko-link-parser.ts
@@ -0,0 +1,6 @@
+import { LinkParser } from "./link-parser";
+
+export class ZenkoLinkParser extends LinkParser {
+    override regex = /zenko\.online\/titles\/\d+\/(\d+)/;
+    override site = 'zenko';
+};
diff --git a/src/app/list/list-shell/list-shell.component.ts b/src/app/list/list-shell/list-shell.component.ts
@@ -1,6 +1,6 @@
 import { Component, EffectCleanupRegisterFn, WritableSignal, computed, effect, inject, signal } from '@angular/core';
 import { LinkParserService } from '../../link-parser/data-access/link-parser.service';
-import { ImgurLinkParser, JsonLinkParser, LinkParser, MangadexLinkParser, RedditLinkParser, TelegraphLinkParser } from '../../link-parser/utils';
+import { ImgurLinkParser, JsonLinkParser, LinkParser, MangadexLinkParser, RedditLinkParser, TelegraphLinkParser, ZenkoLinkParser } from '../../link-parser/utils';
 import { DomManipulationService } from '../../shared/data-access';
 import { LangService } from '../../shared/data-access/lang.service';
 
@@ -85,6 +85,7 @@ export class ListShellComponent {
     this.parser.parsers.push(new MangadexLinkParser)
     this.parser.parsers.push(new TelegraphLinkParser)
     this.parser.parsers.push(new RedditLinkParser)
+    this.parser.parsers.push(new ZenkoLinkParser)
     this.parser.parsers.push(new JsonLinkParser)
   }
 
diff --git a/src/app/shared/ui/pages-indicator/pages-indicator.component.scss b/src/app/shared/ui/pages-indicator/pages-indicator.component.scss
@@ -1,3 +1,9 @@
+@property --item-scale {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+}
+
 :host {
     display: flex;
     align-items: center;
@@ -17,12 +23,14 @@ div {
     font-weight: bold;
     line-height: 1;
     transition: all var(--t) ease-in-out;
+    --translate-y: 0;
+    transform: translateY(var(--translate-y)) scale(var(--item-scale));
 
     &:hover,
     &.active {
         color: #ffd60a;
         background-color: #103651;
-        transform: translateY(-.25ch);
+        --translate-y: -.25ch;
 
         @media (prefers-color-scheme: light) {
             background-color: #f8d755;
@@ -68,4 +76,18 @@ div {
         border-top-right-radius: unset;
         border-bottom-right-radius: unset;
     }
-}
+}
+
+// @supports (animation-timeline: view()) {
+//     div {
+//         animation: scale both steps(6), scale both steps(6) reverse;
+//         animation-timeline: view(inline);
+//         animation-range: entry, exit;
+//     }
+
+//     @keyframes scale {
+//         0% {
+//             --item-scale: 0;
+//         }
+//     }
+// }
diff --git a/src/app/shared/ui/viewer/components/hint-page/hint-page.component.html b/src/app/shared/ui/viewer/components/hint-page/hint-page.component.html
@@ -26,13 +26,13 @@
 
 
     <svg dir="ltr" frame="2" viewBox="0 0 320 320">
-        <rect x="-20" y="85" width="360" height="120" rx="4" stroke-width="2" fill="white" stroke="black"></rect>
+        <rect x="-20" y="85" width="360" height="150" rx="4" stroke-width="2" fill="white" stroke="black"></rect>
         <text fill="currentColor" font-size="14">
             <tspan x="50%" y="34%">для навігації: ⬅➡ або ad</tspan>
             <tspan x="50%" y="42%">Fullscreen: f</tspan>
             <tspan x="50%" y="50%">Поділитися посиланням: Ctrl+E</tspan>
             <tspan x="50%" y="58%">Відкрити список епізодів: Ctrl+P</tspan>
-            <!-- <tspan x="50%" y="66%">Скачати для перегляду офлайн: Ctrl+S</tspan> -->
+            <tspan x="50%" y="66%">Скачати для перегляду офлайн: Ctrl+S</tspan>
         </text>
     </svg>
 
diff --git a/src/app/shared/ui/viewer/components/hint-page/hint-page.component.scss b/src/app/shared/ui/viewer/components/hint-page/hint-page.component.scss
@@ -34,6 +34,6 @@ svg {
         font-weight: bold;
         font-style: italic;
         opacity: .8;
-        font-family: cursive;
+        font-family: 'EB Garamond';
     }
 }
diff --git a/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.html b/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.html
@@ -4,7 +4,7 @@
     <separator />
     }
     <button class="button tshadow " [title]="lang.ph().share" (click)="showShare()">📢</button>
-    <!-- <button class="button tshadow" [title]="'Download'" (click)="showDownload()">📥</button> -->
+    <button class="button tshadow" [title]="'Download'" (click)="showDownload()">📥</button>
     <span class="title">{{episode?.title}}</span>
     <app-view-mode-bar (valueChange)="setViewModeOption($event)" [options]="viewer.viewModeOptions"
         [value]="viewer.viewModeOption().code" />
diff --git a/src/app/shared/ui/viewer/viewer.component.html b/src/app/shared/ui/viewer/viewer.component.html
@@ -65,7 +65,17 @@
                         style="padding: 1ch; width: 100%; height: 100%; display: grid; place-items: center;">
                         <img style="display: block; max-width: 40%; margin: auto;" src="/assets/icons/icon-line.svg"
                             alt="Chytanka logo">
-                        <p style="text-align: center;">Кінець епізоду</p>
+                        <div>
+                            <p style="text-align: center;">Кінець епізоду</p>
+                            @if(episode?.publisher?.id) {
+                            <p>Переклад від {{episode?.publisher?.name}}</p>
+                            <div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 1ch; font-size: x-small;">
+                                @for (l of episode?.publisher?.links; track $index) {
+                                <a [href]="l.link" target="_blank" rel="noopener noreferrer">{{l.title}}</a>
+                                }
+                            </div>
+                            }
+                        </div>
 
                         @if (getNextIndex() >=0 && playlist[getNextIndex()]; as next) {
 
diff --git a/src/app/zenko/data-access/zenko.service.ts b/src/app/zenko/data-access/zenko.service.ts
@@ -0,0 +1,54 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { Observable, map } from 'rxjs';
+import { environment } from '../../../environments/environment';
+import { CompositionEpisode, CompositionPublisher } from '../../common/common-read';
+import { Base64 } from '../../shared/utils';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ZenkoService {
+  http: HttpClient = inject(HttpClient)
+
+  getComposition(id: string): Observable<CompositionEpisode> {
+    return this.http.get<any>(environment.zenkoHost + id)
+      .pipe(map((data) => { return this.map(data) }))
+  }
+
+  map(data: any): CompositionEpisode {
+    const mappedResponse = {
+      title: this.titleDecode(data.name),
+
+      publisher: {
+        id: data.publisher.id as string,
+        site: data.publisher.id as string,
+        name: data.publisher.name as string,
+        avatar: environment.proxy + Base64.toBase64(`https://zenko.b-cdn.net/${data.publisher.avatar}?optimizer=image&width=900&quality=90&height=auto`) as string,
+        description: data.publisher.description as string,
+        links: data.publisher.links.map((l: any) => { return { link: l.link, title: l.title }; })
+      } as unknown as CompositionPublisher,
+
+      images: (data.pages.map((item: any) => {
+        return {
+          src: item.imgUrl
+        };
+      })).filter((i: any) => i.src).map((img: any) => { return { src: environment.proxy + Base64.toBase64(`https://zenko.b-cdn.net/${img.src}?optimizer=image&width=900&quality=90&height=auto`) } })
+      
+    };
+
+    return mappedResponse;
+  }
+
+  titleDecode(input: string) {
+    const parts = input.split("@#%&;№%#&**#!@");
+
+    const tom = parts[0];
+    const chapter = parts[1];
+    const name = parts[2] ?? 'Без назви';
+
+    const output = `Том ${tom} Розділ ${chapter}: ${name}`;
+    return output
+
+  }
+}
diff --git a/src/app/zenko/zenko-routing.module.ts b/src/app/zenko/zenko-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ZenkoShellComponent } from './zenko-shell/zenko-shell.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/', pathMatch: 'full' },
+  {
+    path: ':id',
+    component: ZenkoShellComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ZenkoRoutingModule { }
diff --git a/src/app/zenko/zenko-shell/zenko-shell.component.html b/src/app/zenko/zenko-shell/zenko-shell.component.html
@@ -0,0 +1,8 @@
+<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>
+
+</app-common-read>
diff --git a/src/app/zenko/zenko-shell/zenko-shell.component.scss b/src/app/zenko/zenko-shell/zenko-shell.component.scss
diff --git a/src/app/zenko/zenko-shell/zenko-shell.component.ts b/src/app/zenko/zenko-shell/zenko-shell.component.ts
@@ -0,0 +1,39 @@
+import { Component, inject, OnDestroy } from '@angular/core';
+import { switchMap, of } from 'rxjs';
+import { ZENKO_PATH } from '../../app-routing.module';
+import { ReadBaseComponent } from '../../common/common-read';
+import { Base64 } from '../../shared/utils';
+import { ZenkoService } from '../data-access/zenko.service';
+
+@Component({
+  selector: 'app-zenko-shell',
+  templateUrl: './zenko-shell.component.html',
+  styleUrl: './zenko-shell.component.scss'
+})
+export class ZenkoShellComponent extends ReadBaseComponent implements OnDestroy {
+  zenko = inject(ZenkoService)
+
+  override episode$ = this.combineParamMapAndRefresh()
+    .pipe(this.tapStartLoading(),
+      switchMap(([params]) => {
+        const pathParam = params?.get('id');
+
+        if (!pathParam) return of(null);
+
+        const path = (Base64.isBase64(pathParam)) ? Base64.fromBase64(pathParam) : pathParam;
+
+        return (this.zenko.getComposition(path)).pipe(this.catchError(), this.tapSetTitle(),
+          this.tapSaveToHistory(ZENKO_PATH, path),
+          this.tapSaveToCurrentPlaylistItem(ZENKO_PATH, path),
+          this.finalizeLoading());
+      })
+    );
+
+  constructor() {
+    super()
+  }
+
+  ngOnDestroy(): void {
+    this.plObserv?.unsubscribe();
+  }
+}
diff --git a/src/app/zenko/zenko.module.ts b/src/app/zenko/zenko.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ZenkoRoutingModule } from './zenko-routing.module';
+import { ZenkoShellComponent } from './zenko-shell/zenko-shell.component';
+import { CommonReadModule } from '../common/common-read';
+
+
+@NgModule({
+  declarations: [
+    ZenkoShellComponent
+  ],
+  imports: [
+    CommonModule,
+    ZenkoRoutingModule,
+    CommonReadModule
+  ]
+})
+export class ZenkoModule { }
diff --git a/src/environments/environment.development.ts b/src/environments/environment.development.ts
@@ -7,5 +7,6 @@ export const environment = {
     mangadexChapter: `${PROXY}https://api.mangadex.org/chapter/`,
     mangadexManga: `${PROXY}https://api.mangadex.org/manga/`,
     telegraphHost: `https://api.telegra.ph/getPage/`,
-    redditHost: `https://www.reddit.com/r/all/comments/`
+    redditHost: `https://www.reddit.com/r/all/comments/`,
+    zenkoHost: `https://zenko-api.onrender.com/chapters/`
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
@@ -6,5 +6,6 @@ export const environment = {
     mangadexChapter: `${PROXY}https://api.mangadex.org/chapter/`,
     mangadexManga: `${PROXY}https://api.mangadex.org/manga/`,
     telegraphHost: `https://api.telegra.ph/getPage/`,
-    redditHost: `https://www.reddit.com/r/all/comments/`
+    redditHost: `https://www.reddit.com/r/all/comments/`,
+    zenkoHost: `https://zenko-api.onrender.com/chapters/`
 };
diff --git a/src/styles.scss b/src/styles.scss

Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,6 @@ svg {`
`34`	`34`	`font-weight: bold;`
`35`	`35`	`font-style: italic;`
`36`	`36`	`opacity: .8;`
`37`		`- font-family: cursive;`
	`37`	`+ font-family: 'EB Garamond';`
`38`	`38`	`}`
`39`	`39`	`}`