Merge pull request #4 from chytanka/develop

feat: Read from Telegra.ph

src/app/app-routing.module.ts

@@ -19,6 +19,10 @@ const routes: Routes = [
     path: 'read',
     loadChildren: () => import('./read/read.module').then(m => m.ReadModule)
   },
+  {
+    path: 'telegr',
+    loadChildren: () => import('./telegraph/telegraph.module').then(m => m.TelegraphModule)
+  },
   {
     path: '**',
     component: PageNotFoundComponent

src/app/link-parser/link-parser/link-parser.component.ts

@@ -1,6 +1,6 @@
 import { Component, Signal, WritableSignal, computed, signal } from '@angular/core';
 import { LinkParserService } from '../data-access/link-parser.service';
-import { ImgurLinkParser, JsonLinkParser, MangadexLinkParser } from '../utils';
+import { ImgurLinkParser, JsonLinkParser, MangadexLinkParser, TelegraphLinkParser } from '../utils';
 import { ActivatedRoute , Router} from '@angular/router';
 import { LangService } from '../../shared/data-access/lang.service';
 import { ViewModeOption } from '../../shared/data-access';
@@ -43,6 +43,7 @@ export class LinkParserComponent {
   initParser() {
     this.parser.parsers.push(new ImgurLinkParser)
     this.parser.parsers.push(new MangadexLinkParser)
+    this.parser.parsers.push(new TelegraphLinkParser)
     this.parser.parsers.push(new JsonLinkParser)
   }
 

src/app/link-parser/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './link-parser';
 export * from './imgur-link-parser';
 export * from './mangadex-link-parser';
-export * from './json-link-parser';
+export * from './json-link-parser';
+export * from './telegraph-link-parser';

src/app/link-parser/utils/telegraph-link-parser.ts

@@ -0,0 +1,6 @@
+import { LinkParser } from "./link-parser";
+
+export class TelegraphLinkParser extends LinkParser {
+    override regex = /telegra\.ph\/([\w\-_іїґ]+)/;
+    override site = 'telegr'
+};

src/app/page-not-found.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-page-not-found',
   template: `
-    <app-text-embracer [text]="'404'"/>
+    <app-text-embracer [text]="'4😵4'"/>
     <h1><a [routerLink]="'/'">🏠</a></h1>
   `,
   styles: `

src/app/shared/ui/viewer/viewer.component.html

@@ -11,7 +11,7 @@
             @else {
             <h1 style="text-align: center;">
                 {{lang.phrases.getByKey(viewer.viewModeOption.hintPhraceKey)}}<br />{{viewer.viewModeOption.emoji}}</h1>
-            {{viewer.keyboard | json}}
+
             @if (viewer.viewModeOption.mode == "pages" && viewer.keyboard) {
             <div class="hotkeys_hint">
                 <span> Navigate Between Pages</span>

src/app/shared/utils/base64.ts

@@ -1,12 +1,12 @@
 export class Base64 {
     static toBase64(input: string) {
-        return btoa(input).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+        return btoa(encodeURIComponent(input)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
     }
 
     static fromBase64(input: string) {
         const paddedInput = input.length % 4 != 0 ? (input + '='.repeat(4 - input.length % 4)) : input;
         const decodedBase64 = paddedInput.replace(/-/g, '+').replace(/_/g, '/');
-        return atob(decodedBase64);
+        return decodeURIComponent(atob(decodedBase64));
     }
 
     static isBase64(input: string) {

src/app/telegraph/data-access/telegraph.service.ts

@@ -0,0 +1,36 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, map } from 'rxjs';
+import { CompositionEpisode } from '../../shared/utils';
+import { environment } from '../../../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TelegraphService {
+
+  constructor(private http: HttpClient) { }
+
+  getComposition(id: string): Observable<CompositionEpisode> {
+    const params = new HttpParams().set('return_content', 'true');
+    return this.http.get<any>(environment.telegraphHost + id , { params: params })
+      .pipe(map((data) => { return this.map(data) }))
+  }
+
+
+  map(data: any): CompositionEpisode {
+    const mappedResponse = {
+      title: data.result.title,
+      images: (data.result.content.map((item: any) => {
+        return {
+          src: item.children.find((child: any) => child.tag === "img")?.attrs.src
+        };
+      })).filter((i: any) => i.src).map((img: any)=> {return {src: 'https://telegra.ph'+ img.src}})
+    };
+
+
+
+
+    return mappedResponse;
+  }
+}

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { TelegraphShellComponent } from './telegraph-shell/telegraph-shell.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/', pathMatch: 'full' },
+  {
+    path: ':path',
+    component: TelegraphShellComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TelegraphRoutingModule { }

src/app/telegraph/telegraph-shell/telegraph-shell.component.html

@@ -0,0 +1,13 @@
+@if(episode$ | async; as episode){
+<app-viewer [episode]="episode"></app-viewer>
+}
+@if(error$ | async; as error){
+<div class="error-message">
+    {{ error }} <br>
+    <button (click)="refreshData()">Ше раз</button> <br>
+    <a [routerLink]="'/'">🏠</a>
+</div>
+}
+@if(loading$ | async; as loading){
+<div class="loading">⏳</div>
+}

src/app/telegraph/telegraph-shell/telegraph-shell.component.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { Base64, ReadBaseComponent } from '../../shared/utils';
+import { of, switchMap } from 'rxjs';
+import { TelegraphService } from '../data-access/telegraph.service';
+
+@Component({
+  selector: 'app-telegraph-shell',
+  templateUrl: './telegraph-shell.component.html',
+  styleUrl: './telegraph-shell.component.scss'
+})
+export class TelegraphShellComponent extends ReadBaseComponent {
+
+  override episode$ = this.combineParamMapAndRefresh()
+    .pipe(this.tapStartLoading(),
+      switchMap(([params]) => {
+        const pathParam = params?.get('path');
+
+        if (!pathParam) return of(null);
+
+        const path = (Base64.isBase64(pathParam)) ? Base64.fromBase64(pathParam) : pathParam;
+
+        return (this.telegraph.getComposition(path)).pipe(this.catchError(), this.tapSetTitle(), this.finalizeLoading());
+      })
+    );
+
+  constructor(public telegraph: TelegraphService){
+    super()
+  }
+}

src/app/telegraph/telegraph.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TelegraphRoutingModule } from './telegraph-routing.module';
+import { TelegraphShellComponent } from './telegraph-shell/telegraph-shell.component';
+import { SharedModule } from '../shared/shared.module';
+
+
+@NgModule({
+  declarations: [
+    TelegraphShellComponent
+  ],
+  imports: [
+    CommonModule,
+    TelegraphRoutingModule,
+    SharedModule
+  ]
+})
+export class TelegraphModule { }

src/environments/environment.development.ts

@@ -5,5 +5,6 @@ export const environment = {
     imgurHost: 'https://api.imgur.com/3/album/',
     mangadexHost: `${PROXY}https://api.mangadex.org/at-home/server/`,
     mangadexChapter: `${PROXY}https://api.mangadex.org/chapter/`,
-    mangadexManga: `${PROXY}https://api.mangadex.org/manga/`
+    mangadexManga: `${PROXY}https://api.mangadex.org/manga/`,
+    telegraphHost: `https://api.telegra.ph/getPage/`
 };

src/environments/environment.ts

@@ -4,5 +4,6 @@ export const environment = {
     imgurHost: 'https://api.imgur.com/3/album/',
     mangadexHost: `${PROXY}https://api.mangadex.org/at-home/server/`,
     mangadexChapter: `${PROXY}https://api.mangadex.org/chapter/`,
-    mangadexManga: `${PROXY}https://api.mangadex.org/manga/`
+    mangadexManga: `${PROXY}https://api.mangadex.org/manga/`,
+    telegraphHost: `https://api.telegra.ph/getPage/`
 };

src/index.html

@@ -37,6 +37,7 @@
       }
     }
     </script>
+    <meta name="google-site-verification" content="qezVCOaci5qsNJ2OPgMpxnjNfai8LVt4bPJXqQPmijM" />
 </head>
 <body>
   <app-root></app-root>