neuro_llc/NwaifuWeb
2
0
Fork 0
Code Issues 11 Pull Requests Packages Projects 1 Releases Wiki Activity

feat: abstract classes and destroy subscriptions

Browse Source
This commit is contained in:
Sergey Elpashev
2024-07-08 23:24:03 +03:00
parent 9d2373a298
commit 6833105604
13 changed files with 191 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/NwaifuAnime/src/app/components/detail/detail.component.html
View File

@@ -10,20 +10,29 @@
</summary>
<div class="flex flex-col items-center pb-16">
@for (chapter of chapters.data; track $index) {
<button
(click)="goToReader(chapter.number, chapter.volume)"
<a
routerLink="/reader"
[queryParams]="{
url: detail_item.slug_url,
chapter: chapter.number,
volume: chapter.volume,
}"
[title]="chapter.name"
class="p-3 text-white bg-slate-600 w-[300px] mt-3 rounded-lg"
>
<h3>
<strong>{{ chapter.number }}.</strong> {{ chapter.name || "Нет названия" }}
</h3>
</button>
</a>
}
</div>
</details>
<button class="p-3 text-white bg-slate-600 w-[300px] mt-5 rounded-lg" (click)="goToReader()">
<a
routerLink="/reader"
class="p-3 text-white bg-slate-600 w-[300px] mt-5 rounded-lg text-center"
[queryParams]="{ url: detail_item.slug_url, volume: 1, chapter: 1 }"
>
Читать
</button>
</a>
}
</div>

34
apps/NwaifuAnime/src/app/components/detail/detail.component.ts
View File

@@ -1,6 +1,7 @@
import { CommonModule } from "@angular/common";
import { AfterViewInit, Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { AfterViewInit, Component, OnDestroy } from "@angular/core";
import { ActivatedRoute, Router, RouterLink } from "@angular/router";
import { Subject, takeUntil } from "rxjs";
import { IRulibChaptersResult } from "../../services/parsers/rulib/rulib.chapters.dto";
import { Data } from "../../services/parsers/rulib/rulib.detail.dto";
import { SearchService } from "../../services/search.service";
@@ -10,11 +11,12 @@ import { SearchService } from "../../services/search.service";
templateUrl: "./detail.component.html",
styleUrls: ["./detail.component.less"],
standalone: true,
imports: [CommonModule],
imports: [CommonModule, RouterLink],
})
export class DetailComponent implements AfterViewInit {
export class DetailComponent implements AfterViewInit, OnDestroy {
detail_item: Data | null = null;
chapters: IRulibChaptersResult = { data: [] };
private destroy$ = new Subject<void>();
constructor(
private route: ActivatedRoute,
private searchService: SearchService,
@@ -22,17 +24,23 @@ export class DetailComponent implements AfterViewInit {
) {}
private getDetails(url: string) {
this.searchService.getDetails(url).subscribe((data) => {
this.searchService
.getDetails(url)
.pipe(takeUntil(this.destroy$))
.subscribe((data) => {
this.detail_item = data.data;
});
this.searchService.getChapters(url).subscribe((data) => {
this.searchService
.getChapters(url)
.pipe(takeUntil(this.destroy$))
.subscribe((data) => {
this.chapters = data;
console.log(data);
});
}
ngAfterViewInit(): void {
this.route.queryParams.subscribe((params) => {
this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
const url = params["url"];
if (url) {
this.getDetails(url);
@@ -42,14 +50,8 @@ export class DetailComponent implements AfterViewInit {
});
}
goToReader(chapter: string = "1", volume: string = "1") {
console.log(chapter, volume);
this.router.navigate(["/", "reader"], {
queryParams: {
url: this.detail_item?.slug_url,
chapter: +chapter,
volume: +volume,
},
});
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
}

15
apps/NwaifuAnime/src/app/components/header/header.component.ts
View File

@@ -1,7 +1,7 @@
import { CommonModule } from "@angular/common";
import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";
import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
import { filter } from "rxjs";
import { Subject, filter, takeUntil } from "rxjs";
@Component({
selector: "app-header",
@@ -10,15 +10,17 @@ import { filter } from "rxjs";
standalone: true,
imports: [CommonModule],
})
export class HeaderComponent implements AfterViewInit {
export class HeaderComponent implements AfterViewInit, OnDestroy {
@ViewChild("searchInput") searchInput: ElementRef<HTMLInputElement> | null = null;
menuOpened = false;
private destroy$ = new Subject<void>();
constructor(
private router: Router,
private route: ActivatedRoute,
) {
this.router.events
.pipe(filter((event) => event instanceof NavigationEnd))
.pipe(takeUntil(this.destroy$))
// eslint-disable-next-line @typescript-eslint/no-explicit-any
.subscribe((val: any) => {
if (val.url.startsWith("/detail") || val.url.startsWith("/reader")) {
@@ -46,11 +48,16 @@ export class HeaderComponent implements AfterViewInit {
}
ngAfterViewInit(): void {
this.route.queryParams.subscribe((params) => {
this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
const search = params["search"];
if (search && this.searchInput) {
this.searchInput.nativeElement.value = search;
}
});
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
}

9
apps/NwaifuAnime/src/app/components/home/home.component.html
View File

@@ -1,11 +1,16 @@
<h1>It's home component</h1>
<div class="flex flex-col items-center w-full px-3">
@for (item of items; track $index) {
<button (click)="getDetails(item.slug_url)" title="{{ item.name }}" class="mb-6 w-full">
<a
routerLink="/detail"
[queryParams]="{ url: item.slug_url }"
title="{{ item.name }}"
class="mb-6 max-w-[700px] w-full"
>
<div class="card flex flex-col items-center border-black border-2 rounded-md p-4 w-full">
<h1>{{ item.rus_name }}</h1>
<img [src]="item.cover.thumbnail" [alt]="item.slug" class="w-[200px] h-auto aspect-auto" />
</div>
</button>
</a>
}
</div>

34
apps/NwaifuAnime/src/app/components/home/home.component.ts
View File

@@ -1,7 +1,7 @@
import { CommonModule } from "@angular/common";
import { AfterViewInit, Component, Input, OnDestroy, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { Subscription } from "rxjs";
import { AfterViewInit, Component, Input, OnDestroy } from "@angular/core";
import { ActivatedRoute, RouterLink } from "@angular/router";
import { Subject, takeUntil } from "rxjs";
import { Datum } from "../../services/parsers/rulib/rulib.search.dto";
import { SearchService } from "../../services/search.service";
@@ -10,37 +10,33 @@ import { SearchService } from "../../services/search.service";
selector: "app-home",
templateUrl: "./home.component.html",
styleUrls: ["./home.component.less"],
imports: [CommonModule],
imports: [CommonModule, RouterLink],
})
export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
export class HomeComponent implements OnDestroy, AfterViewInit {
@Input() items: Datum[] = [];
private subscription: Subscription = new Subscription();
private destroy$ = new Subject<void>();
constructor(
private searchService: SearchService,
private route: ActivatedRoute,
private router: Router,
) {}
ngOnInit(): void {
this.subscription = this.searchService.currentItemsTerm.subscribe((data) => {
this.items = data;
});
}
getDetails(slug_url: string) {
this.router.navigate(["/", "detail"], { queryParams: { url: slug_url } });
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
this.destroy$.next();
this.destroy$.complete();
}
ngAfterViewInit(): void {
this.route.queryParams.subscribe((params) => {
const search = params["search"];
if (search) {
this.searchService.search(search);
this.searchService
.search(search)
.pipe(takeUntil(this.destroy$))
.subscribe((data) => {
this.items = data.data;
});
}
});
}

14
apps/NwaifuAnime/src/app/components/reader/reader.component.html
View File

@@ -1,8 +1,14 @@
<div class="flex flex-row items-center justify-between me-4">
<button class="bg-slate-600 text-white rounded-lg p-3 m-4" (click)="backToTitle()">
<div
class="flex flex-row items-center justify-between me-4 max-w-[900px] relative -translate-x-[50%] left-[50%]"
>
<a
[routerLink]="['/', 'detail']"
[queryParams]="{ url: url }"
class="bg-slate-600 text-white rounded-lg p-3 m-4"
>
Назад к тайтлу
</button>
<h3>{{ currentChapterInfo?.number }}. {{ currentChapterInfo?.name }}</h3>
</a>
<h3>{{ currentChapterInfo?.number }}. {{ currentChapterInfo?.name || "Нет названия" }}</h3>
</div>
<div class="flex flex-col items-center">
@if (pages.length > 0 && cachedPages[currentPageIndex]) {

37
apps/NwaifuAnime/src/app/components/reader/reader.component.ts
View File

@@ -1,7 +1,7 @@
import { CommonModule } from "@angular/common";
import { AfterViewInit, Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { Observable, map } from "rxjs";
import { AfterViewInit, Component, OnDestroy } from "@angular/core";
import { ActivatedRoute, Router, RouterLink } from "@angular/router";
import { Observable, Subject, map, takeUntil } from "rxjs";
import { Chapter, Page } from "../../services/parsers/rulib/rulib.chapter.dto";
import { IRulibChapter } from "../../services/parsers/rulib/rulib.chapters.dto";
import { SearchService } from "../../services/search.service";
@@ -13,9 +13,9 @@ import { CachedPages } from "./reader.dto";
templateUrl: "./reader.component.html",
styleUrls: ["./reader.component.less"],
standalone: true,
imports: [CommonModule, ScaleImageComponent],
imports: [CommonModule, ScaleImageComponent, RouterLink],
})
export class ReaderComponent implements AfterViewInit {
export class ReaderComponent implements AfterViewInit, OnDestroy {
pages: Page[] = [];
currentPageIndex = 0;
cachedPages: CachedPages = {};
@@ -25,17 +25,22 @@ export class ReaderComponent implements AfterViewInit {
private chaptersInfo: IRulibChapter[] = [];
private chapterNum: number = 0;
private chapterVol: number = 0;
private url = "";
url = "";
private fromTowards = false;
private destroy$ = new Subject<void>();
constructor(
private route: ActivatedRoute,
private router: Router,
private searchService: SearchService,
) {}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
ngAfterViewInit(): void {
this.route.queryParams.subscribe((params) => {
this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
const url = params["url"];
const chapter = params["chapter"];
const volume = params["volume"];
@@ -47,7 +52,10 @@ export class ReaderComponent implements AfterViewInit {
this.chapterVol = +volume;
this.url = url;
this.loadChapter(url, chapter, volume);
this.searchService.getChapters(url).subscribe((data) => {
this.searchService
.getChapters(url)
.pipe(takeUntil(this.destroy$))
.subscribe((data) => {
this.chaptersInfo = data.data;
});
} else {
@@ -61,7 +69,10 @@ export class ReaderComponent implements AfterViewInit {
}
loadChapter(url: string, chapter: string, volume: string) {
this.searchService.getChapter(url, chapter, volume).subscribe((data) => {
this.searchService
.getChapter(url, chapter, volume)
.pipe(takeUntil(this.destroy$))
.subscribe((data) => {
this.currentChapterInfo = data.data;
this.pages = data.data.pages;
if (this.fromTowards) {
@@ -85,7 +96,9 @@ export class ReaderComponent implements AfterViewInit {
}
if (!this.cachedPages[index]?.imageData) {
// Если страница не закэширована, загружаем её
this.fetchAndCachePage(index).subscribe(() => {
this.fetchAndCachePage(index)
.pipe(takeUntil(this.destroy$))
.subscribe(() => {
this.updateImage();
});
} else {
@@ -135,7 +148,9 @@ export class ReaderComponent implements AfterViewInit {
for (let i = startIndex; i <= endIndex; i++) {
if (!this.isPageCached(i)) {
this.fetchAndCachePage(i).subscribe(() => {
this.fetchAndCachePage(i)
.pipe(takeUntil(this.destroy$))
.subscribe(() => {
if (i === this.currentPageIndex) {
this.updateImage();
}

19
apps/NwaifuAnime/src/app/services/parsers/decorators/parser.decorator.ts Normal file
View File

@@ -0,0 +1,19 @@
export function ParserDecorator({
site_name,
url,
nsfw = false,
site_id = 1,
}: {
site_name: string;
url: string;
nsfw?: boolean;
site_id?: number;
}) {
// eslint-disable-next-line @typescript-eslint/ban-types
return function (constructor: Function) {
constructor.prototype.site_name = site_name;
constructor.prototype.nsfw = nsfw;
constructor.prototype.api_url = url;
constructor.prototype.site_id = site_id;
};
}

18
apps/NwaifuAnime/src/app/services/parsers/parser.ts Normal file
View File

@@ -0,0 +1,18 @@
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
@Injectable({ providedIn: "root" })
export abstract class Parser {
constructor(protected http: HttpClient) {}
protected abstract url: string;
abstract searchManga(query: string): Observable<object>;
abstract getDetails(slug_url: string): Observable<object>;
abstract getChapters(url: string): Observable<object>;
abstract getChapter(url: string, chapter: string, volume: string): Observable<object>;
}

16
apps/NwaifuAnime/src/app/services/parsers/rulib/lib.social.parser.service.ts
View File

@@ -1,7 +1,6 @@
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable, catchError, map, throwError } from "rxjs";
import { ESiteUrls } from "../urls";
import { Parser } from "../parser";
import { IRulibChapterResult } from "./rulib.chapter.dto";
import { IRulibChaptersResult } from "./rulib.chapters.dto";
import { IRulibDetailResult } from "./rulib.detail.dto";
@@ -11,17 +10,20 @@ import { IRulibSearchResult } from "./rulib.search.dto";
@Injectable({
providedIn: "root",
})
export class LibSocialParserService {
private readonly url = ESiteUrls.LIB_SOCIAL;
constructor(private readonly http: HttpClient) {}
export class LibSocialParserService extends Parser {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
protected url = (this as any).api_url;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private site_id = (this as any).site_id;
get imageServer() {
return "https://img33.imgslib.link";
}
searchManga(query: string): Observable<IRulibSearchResult> {
return this.http
.get(`${this.url}/api/manga?fields[]=rate_avg&fields[]=rate&q=${query}&site_id[]=1`)
.get(
`${this.url}/api/manga?fields[]=rate_avg&fields[]=rate&q=${query}&site_id[]=${this.site_id}`,
)
.pipe(
map((data: object) => {
return data as IRulibSearchResult;

10
apps/NwaifuAnime/src/app/services/parsers/rulib/mangalib.parser.service.ts Normal file
View File

@@ -0,0 +1,10 @@
import { Injectable } from "@angular/core";
import { ParserDecorator } from "../decorators/parser.decorator";
import { ESiteUrls } from "../urls";
import { LibSocialParserService } from "./lib.social.parser.service";
@Injectable({
providedIn: "root",
})
@ParserDecorator({ site_name: "MangaLib", url: ESiteUrls.MANGALIB, site_id: 1 })
export class MangalibParserService extends LibSocialParserService {}

1
apps/NwaifuAnime/src/app/services/parsers/urls.ts
View File

@@ -1,3 +1,4 @@
export enum ESiteUrls {
LIB_SOCIAL = "https://api.lib.social",
MANGALIB = "https://api.mangalib.me",
}

25
apps/NwaifuAnime/src/app/services/search.service.ts
View File

@@ -1,25 +1,27 @@
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { BehaviorSubject, Observable, map } from "rxjs";
import { LibSocialParserService } from "./parsers/rulib/lib.social.parser.service";
import { MangalibParserService } from "./parsers/rulib/mangalib.parser.service";
import { IRulibChapterResult } from "./parsers/rulib/rulib.chapter.dto";
import { IRulibChaptersResult } from "./parsers/rulib/rulib.chapters.dto";
import { IRulibDetailResult } from "./parsers/rulib/rulib.detail.dto";
import { Datum } from "./parsers/rulib/rulib.search.dto";
import { HttpClient } from "@angular/common/http";
import { Datum, IRulibSearchResult } from "./parsers/rulib/rulib.search.dto";
@Injectable({ providedIn: "root" })
export class SearchService {
private itemsTerm = new BehaviorSubject<Datum[]>([]);
currentItemsTerm = this.itemsTerm.asObservable();
constructor(
private parser: LibSocialParserService,
private parser: MangalibParserService,
private http: HttpClient,
) {}
search(query: string) {
this.parser.searchManga(query).subscribe((data) => {
this.itemsTerm.next(data.data);
});
search(query: string): Observable<IRulibSearchResult> {
return this.parser.searchManga(query).pipe(
map((data) => {
return data;
}),
);
}
getDetails(slug_url: string): Observable<IRulibDetailResult> {
@@ -50,12 +52,11 @@ export class SearchService {
return this.parser.imageServer;
}
getImageData(imageUrl: string): Observable<Uint8Array>{
return this.http.get(imageUrl, {responseType: 'arraybuffer'}).pipe(
getImageData(imageUrl: string): Observable<Uint8Array> {
return this.http.get(imageUrl, { responseType: "arraybuffer" }).pipe(
map((arrayBuffer: ArrayBuffer) => {
return new Uint8Array(arrayBuffer);
})
}),
);
}
}