Merge pull request #5 from chytanka/develop

Reddit

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.scss

@@ -5,8 +5,8 @@
     align-items: center;
     // min-height: 100dvh;
     height: 100dvh;
-    background: rgb(0,39,65);
-background: radial-gradient(circle, rgba(0,39,65,1) 0%, rgba(0,15,30,1) 100%);
+    background: rgb(0, 39, 65);
+    background: radial-gradient(circle, rgba(0, 39, 65, 1) 0%, rgba(0, 15, 30, 1) 100%);
 
     @media (max-aspect-ratio: 1) or (max-width: 640px) {
         grid-template-columns: auto;
@@ -15,7 +15,6 @@ background: radial-gradient(circle, rgba(0,39,65,1) 0%, rgba(0,15,30,1) 100%);
 
     &>div {
         display: grid;
-        // align-content: center;
         place-content: center;
         gap: 2ch;
     }
@@ -28,7 +27,8 @@ app-text-embracer {
     margin: auto;
     font-family: 'Rampart One', sans-serif;
     font-size: clamp(1rem, 8vw, 5rem);
-    @media (max-aspect-ratio: 1) or (max-width: 640px)  {
+
+    @media (max-aspect-ratio: 1) or (max-width: 640px) {
         font-size: clamp(1rem, 10vw, 8rem);
     }
 }
@@ -37,7 +37,6 @@ input[type=url] {
     font: inherit;
     padding: 1ch;
     background: transparent;
-    /* backdrop-filter: blur(1rem); */
     font-family: 'Courier New', Courier, monospace;
     border: 0;
     outline: 1px solid;
@@ -81,27 +80,33 @@ a {
     outline: 1px solid;
     border-radius: .5ch;
     transition: all cubic-bezier(0.075, 0.82, 0.165, 1) .25s;
+
     &:hover {
         outline-offset: .5ch;
     }
+
     &:active {
         outline-offset: -.5ch;
     }
 }
 
-
-#Path_602 {
-    transform-origin: 50% 50%;
-    transition: all .25s ease-in-out;
+app-overlay {
+    position: absolute;
 }
 
-svg:hover {
-    #Path_602 {
-
-        scale:  1.16;
-    }
+.logo {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    min-height: 0;
+    height: auto;
+    margin: auto;
 }
 
-app-overlay {
-    position: absolute;
+:host ::ng-deep app-overlay {
+
+    &::after,
+    &::before {
+        content: unset;
+    }
 }

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)
   }
 
@@ -64,8 +65,12 @@ export class LinkParserComponent {
   }
 
   async initFromclipboard() {
-    const text = await navigator.clipboard?.readText()
-    this.link.set(text ?? '')
+    try {
+      const text = await navigator.clipboard?.readText()
+      this.link.set(text ?? '')
+    } catch (error) {
+
+    }
 
     if (!this.linkParams()) { this.link.set('') }
   }

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;