feat: Reddit;

refactor: Add Common Read Module

src/app/app-routing.module.ts

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

src/app/common/common-read/common-read.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+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';
+
+
+
+@NgModule({
+  declarations: [
+    CommonReadComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    SharedModule
+  ],
+  exports: [
+    CommonReadComponent
+  ]
+})
+export class CommonReadModule { }

src/app/common/common-read/index.ts

@@ -0,0 +1,3 @@
+export * from './common-read.module'
+export * from './utils'
+export * from './ui'

src/app/common/common-read/ui/common-read/common-read.component.html

@@ -0,0 +1,21 @@
+@if(episode$ | async; as episode){
+<app-viewer [episode]="episode"><ng-content/></app-viewer>
+}
+
+@if(error$ | async; as error){
+<div style="padding: 1rem; margin: auto;">
+    <div class="error-message">
+        <h1>🤨</h1>
+        <p>{{ error }}</p>
+        <footer>
+            <a class="button mediun" [routerLink]="'/'">🏠</a>
+            <button autofocus class="button large primary" (click)="onRefreshData()">{{lang.phrases.tryAgain}}</button>
+        </footer>
+    </div>
+</div>
+}
+
+@if(loading$ | async; as loading){
+<div style="display: grid; place-items: center; width: min(50vw, 50vh); margin: auto; aspect-ratio: 1;">⏳ loading...
+</div>
+}

src/app/common/common-read/ui/common-read/common-read.component.scss

@@ -0,0 +1,75 @@
+:host {
+    display: grid;
+    min-height: 100dvh;
+}
+
+:host:has(.error-message) {
+    background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 40%, rgba(207, 19, 82, .1) 100%);
+}
+
+.error-message {
+    display: grid;
+    place-items: center;
+    gap: 2ch;
+    min-width: min(50vw, 50vh);
+    margin: auto;
+    // aspect-ratio: 3/4;
+    border-radius: 1ch;
+    margin-inline: auto;
+    padding: 2rem;
+    text-wrap: balance;
+    text-align: center;
+    border: 1px solid;
+    border-color: rgba(207, 19, 82, .4);
+    background-color: rgba(207, 19, 82, .05);
+
+    p {
+        margin: 0;
+        font-size: clamp(1rem, 1.5vw, 2rem);
+    }
+
+    footer {
+        display: flex;
+        place-items: center;
+        gap: 1.5ch;
+    }
+}
+
+.button {
+    --q: 1;
+
+    user-select: none;
+    border: 0;
+    font: inherit;
+    color: inherit;
+    padding-inline: calc(var(--q) * 1ch);
+    padding-block: calc(var(--q) * 1ch);
+    border-radius: .5ch;
+    cursor: pointer;
+    background: hsl(203.44 8% 16%);
+    transition: all .25s ;
+    text-wrap: balance;
+    -webkit-tap-highlight-color: transparent;
+    box-shadow: 0 .1ch .2ch #0004;
+
+    &.mediun {
+        --q: 1.5
+    }
+
+    &.large {
+        --q: 2
+    }
+
+    &.primary {
+        background: #166496;
+    }
+
+    &:hover {
+        background-color: #166496;
+        color: #ffd60a;
+    }
+
+    &:active {
+        background-color: rgba(0, 15, 30, 1);
+    }
+}

src/app/common/common-read/ui/common-read/common-read.component.ts

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Input, Output, inject, input } from '@angular/core';
+import { LangService } from '../../../../shared/data-access/lang.service';
+import { BehaviorSubject, Observable, of } from 'rxjs';
+import { CompositionEpisode } from '../../utils';
+
+@Component({
+  selector: 'app-common-read',
+  templateUrl: './common-read.component.html',
+  styleUrl: './common-read.component.scss'
+})
+export class CommonReadComponent {
+  public lang: LangService = inject(LangService);
+
+  @Input({ required: true }) error$!: BehaviorSubject<string | null>;
+  @Input({ required: true }) loading$!: BehaviorSubject<boolean>;
+  @Input({ required: true }) episode$!: Observable<CompositionEpisode | null>;
+
+  @Output() refreshData: EventEmitter<any> = new EventEmitter<any>();
+
+  onRefreshData() {
+    this.refreshData.emit();
+  }
+}

src/app/common/common-read/ui/index.ts

@@ -0,0 +1 @@
+export * from './common-read/common-read.component'

src/app/common/common-read/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './composition';
+export * from './read-base-component'

src/app/shared/utils/read-base-component.ts → src/app/common/common-read/utils/read-base-component.ts

@@ -1,9 +1,9 @@
 import { BehaviorSubject, MonoTypeOperatorFunction, Observable, OperatorFunction, catchError, combineLatest, finalize, of, tap } from "rxjs";
 import { CompositionEpisode } from "./composition";
-import { LangService } from "../data-access/lang.service";
 import { ActivatedRoute, ParamMap } from "@angular/router";
 import { Title } from "@angular/platform-browser";
 import { inject } from "@angular/core";
+import { LangService } from "../../../shared/data-access/lang.service";
 
 export abstract class ReadBaseComponent {
     protected refresh$: BehaviorSubject<null> = new BehaviorSubject<null>(null);

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

@@ -1,8 +1,8 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { environment } from '../../../environments/environment';
-import { CompositionEpisode, CompositionImage } from '../../shared/utils';
 import { Observable, map } from 'rxjs';
+import { CompositionEpisode, CompositionImage } from '../../common/common-read';
 interface ImgurRespCompImage {
   link: string;
   width: number;

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

@@ -1,12 +1,21 @@
 import { Component } from '@angular/core';
 import { ImgurService } from '../data-access/imgur.service';
-import { Base64, ReadBaseComponent } from '../../shared/utils';
+import { Base64 } from '../../shared/utils';
 import { of, switchMap } from 'rxjs';
+import { ReadBaseComponent } from '../../common/common-read';
 
 @Component({
   selector: 'app-imgur-shell',
-  templateUrl: './imgur-shell.component.html',
-  styleUrl: './imgur-shell.component.scss'
+  template: `<app-common-read [episode$]="episode$" [error$]="error$" [loading$]="loading$" (refreshData)="refreshData()"><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.phrases.imagesVia}}<a href="https://imgur.com" target="_blank" rel="noopener noreferrer">Imgur</a>
+          API.
+          {{lang.phrases.thanks}}<br>{{lang.phrases.detalisCopy}}</p>
+  </div></app-common-read>`
 })
 export class ImgurShellComponent extends ReadBaseComponent {
 

src/app/imgur/imgur.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { ImgurRoutingModule } from './imgur-routing.module';
 import { ImgurShellComponent } from './imgur-shell/imgur-shell.component';
-import { SharedModule } from '../shared/shared.module';
+import { CommonReadModule } from '../common/common-read';
 
 
 @NgModule({
@@ -13,7 +13,7 @@ import { SharedModule } from '../shared/shared.module';
   imports: [
     CommonModule,
     ImgurRoutingModule,
-    SharedModule
+    CommonReadModule
   ]
 })
 export class ImgurModule { }

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, TelegraphLinkParser } from '../utils';
+import { ImgurLinkParser, JsonLinkParser, MangadexLinkParser, RedditLinkParser, TelegraphLinkParser } from '../utils';
 import { ActivatedRoute , Router} from '@angular/router';
 import { LangService } from '../../shared/data-access/lang.service';
 import { ViewModeOption } from '../../shared/data-access';
@@ -44,6 +44,7 @@ export class LinkParserComponent {
     this.parser.parsers.push(new ImgurLinkParser)
     this.parser.parsers.push(new MangadexLinkParser)
     this.parser.parsers.push(new TelegraphLinkParser)
+    this.parser.parsers.push(new RedditLinkParser)
     this.parser.parsers.push(new JsonLinkParser)
   }
 

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

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

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

@@ -0,0 +1,6 @@
+import { LinkParser } from "./link-parser";
+
+export class RedditLinkParser extends LinkParser {
+    override regex = /reddit\.com\/[ur]\/\w+(?:\/comments\/)([a-zA-Z0-9]+)(?=[\/?]|$)/;
+    override site = 'reddit';
+};

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

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { environment } from '../../../environments/environment';
 import { Observable, catchError, map, throwError } from 'rxjs';
-import { CompositionEpisode, CompositionImage } from '../../shared/utils';
+import { CompositionEpisode, CompositionImage } from '../../common/common-read';
 
 interface MdChapterImages {
   hash: string;

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

@@ -1,12 +1,23 @@
 import { Component } from '@angular/core';
 import { forkJoin, map, of, switchMap } from 'rxjs';
 import { MangadexService } from '../data-access/mangadex.service';
-import { Base64, ReadBaseComponent } from '../../shared/utils';
+import { Base64 } from '../../shared/utils';
+import { ReadBaseComponent } from '../../common/common-read';
 
 @Component({
   selector: 'app-mangadex-shell',
-  templateUrl: './mangadex-shell.component.html',
-  styleUrl: './mangadex-shell.component.scss'
+  template: `<app-common-read [episode$]="episode$" [error$]="error$" [loading$]="loading$" (refreshData)="refreshData()" >
+<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>
+</app-common-read>`
 })
 export class MangadexShellComponent extends ReadBaseComponent {
 

src/app/mangadex/mangadex.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { MangadexRoutingModule } from './mangadex-routing.module';
 import { MangadexShellComponent } from './mangadex-shell/mangadex-shell.component';
-import { SharedModule } from "../shared/shared.module";
+import { CommonReadModule } from '../common/common-read';
 
 
 @NgModule({
@@ -13,7 +13,7 @@ import { SharedModule } from "../shared/shared.module";
     imports: [
         CommonModule,
         MangadexRoutingModule,
-        SharedModule
+        CommonReadModule
     ]
 })
 export class MangadexModule { }

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

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable, catchError, tap, throwError } from 'rxjs';
-import { CompositionEpisode, isCompositionEpisode } from '../../shared/utils';
+import { CompositionEpisode, isCompositionEpisode } from '../../common/common-read';
 
 @Injectable({
   providedIn: 'root'