From d23a78153459aedce57f13136050a39c9044e0f6 Mon Sep 17 00:00:00 2001 From: Andrii Rodzyk Date: Mon, 12 Aug 2024 21:01:20 +0300 Subject: [PATCH 1/3] fix: ChangeDetectionStrategy for shared/ui --- src/app/shared/ui/dialog/dialog.component.ts | 5 ++- .../ui/lang-toggle/lang-toggle.component.ts | 5 ++- .../shared/ui/loading/loading.component.ts | 5 ++- .../made-in-ukraine.component.ts | 5 ++- .../manga-page/manga-page-even.component.ts | 5 ++- .../ui/manga-page/manga-page.component.ts | 5 ++- .../ui/nsfw-warning/nsfw-warning.component.ts | 5 ++- .../shared/ui/overlay/overlay.component.scss | 39 ++----------------- .../shared/ui/overlay/overlay.component.ts | 5 ++- .../pages-indicator.component.ts | 5 ++- .../ui/separator/separator.component.ts | 5 ++- .../text-embracer/text-embracer.component.ts | 5 ++- .../ui/title-card/title-card.component.ts | 5 ++- .../view-mode-bar/view-mode-bar.component.ts | 5 ++- src/app/shared/ui/viewer/viewer.component.ts | 5 +-- .../ui/warm-control/warm-control.component.ts | 5 ++- .../ui/warm-filter/warm-filter.component.ts | 5 ++- src/assets/pattern.svg | 1 + src/styles.scss | 1 + 19 files changed, 51 insertions(+), 70 deletions(-) create mode 100644 src/assets/pattern.svg diff --git a/src/app/shared/ui/dialog/dialog.component.ts b/src/app/shared/ui/dialog/dialog.component.ts index 2a7734f..3894eaf 100644 --- a/src/app/shared/ui/dialog/dialog.component.ts +++ b/src/app/shared/ui/dialog/dialog.component.ts @@ -1,10 +1,11 @@ -import { Component, ElementRef, EventEmitter, Input, Output, ViewChild, WritableSignal, inject, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, WritableSignal, inject, signal } from '@angular/core'; import { LangService } from '../../data-access/lang.service'; @Component({ selector: 'app-dialog', templateUrl: './dialog.component.html', - styleUrl: './dialog.component.scss' + styleUrl: './dialog.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class DialogComponent { lang = inject(LangService) diff --git a/src/app/shared/ui/lang-toggle/lang-toggle.component.ts b/src/app/shared/ui/lang-toggle/lang-toggle.component.ts index 6bb4a2b..255ecd7 100644 --- a/src/app/shared/ui/lang-toggle/lang-toggle.component.ts +++ b/src/app/shared/ui/lang-toggle/lang-toggle.component.ts @@ -1,4 +1,4 @@ -import { Component, WritableSignal, inject, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, WritableSignal, inject, signal } from '@angular/core'; import { LangService } from '../../data-access/lang.service'; import { ViewModeOption } from '../../data-access'; @@ -7,7 +7,8 @@ import { ViewModeOption } from '../../data-access'; @Component({ selector: 'app-lang-toggle', templateUrl: './lang-toggle.component.html', - styleUrl: './lang-toggle.component.scss' + styleUrl: './lang-toggle.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class LangToggleComponent { lang = inject(LangService) diff --git a/src/app/shared/ui/loading/loading.component.ts b/src/app/shared/ui/loading/loading.component.ts index 50ead0a..28d5c62 100644 --- a/src/app/shared/ui/loading/loading.component.ts +++ b/src/app/shared/ui/loading/loading.component.ts @@ -1,4 +1,4 @@ -import { Component, inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; import { LangService } from '../../data-access/lang.service'; @Component({ @@ -32,7 +32,8 @@ import { LangService } from '../../data-access/lang.service'; to { transform: rotate(360deg); } } ` - ] + ], + changeDetection: ChangeDetectionStrategy.OnPush }) export class LoadingComponent { lang = inject(LangService) diff --git a/src/app/shared/ui/made-in-ukraine/made-in-ukraine.component.ts b/src/app/shared/ui/made-in-ukraine/made-in-ukraine.component.ts index 8631508..408904c 100644 --- a/src/app/shared/ui/made-in-ukraine/made-in-ukraine.component.ts +++ b/src/app/shared/ui/made-in-ukraine/made-in-ukraine.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ selector: 'made-in-ukraine', @@ -27,7 +27,8 @@ import { Component } from '@angular/core'; } } } - `] + `], + changeDetection: ChangeDetectionStrategy.OnPush }) export class MadeInUkraineComponent { diff --git a/src/app/shared/ui/manga-page/manga-page-even.component.ts b/src/app/shared/ui/manga-page/manga-page-even.component.ts index d57701d..c9fe027 100644 --- a/src/app/shared/ui/manga-page/manga-page-even.component.ts +++ b/src/app/shared/ui/manga-page/manga-page-even.component.ts @@ -1,9 +1,10 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ selector: 'app-manga-page-even', templateUrl: './manga-page-even.component.html', - styleUrl: './manga-page-even.component.scss' + styleUrl: './manga-page-even.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class MangaPageEvenComponent { diff --git a/src/app/shared/ui/manga-page/manga-page.component.ts b/src/app/shared/ui/manga-page/manga-page.component.ts index 7ba6fa9..dfd91c8 100644 --- a/src/app/shared/ui/manga-page/manga-page.component.ts +++ b/src/app/shared/ui/manga-page/manga-page.component.ts @@ -1,9 +1,10 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ selector: 'manga-page', templateUrl: './manga-page.component.html', - styleUrl: './manga-page.component.scss' + styleUrl: './manga-page.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class MangaPageComponent { diff --git a/src/app/shared/ui/nsfw-warning/nsfw-warning.component.ts b/src/app/shared/ui/nsfw-warning/nsfw-warning.component.ts index 096d152..48ce408 100644 --- a/src/app/shared/ui/nsfw-warning/nsfw-warning.component.ts +++ b/src/app/shared/ui/nsfw-warning/nsfw-warning.component.ts @@ -1,9 +1,10 @@ -import { Component, EventEmitter, Output, Input } from '@angular/core'; +import { Component, EventEmitter, Output, Input, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-nsfw-warning', templateUrl: './nsfw-warning.component.html', - styleUrl: './nsfw-warning.component.scss' + styleUrl: './nsfw-warning.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class NsfwWarningComponent { @Input() title: string = `⚠️🔞 NSFW Content`; diff --git a/src/app/shared/ui/overlay/overlay.component.scss b/src/app/shared/ui/overlay/overlay.component.scss index 2e02392..6651262 100644 --- a/src/app/shared/ui/overlay/overlay.component.scss +++ b/src/app/shared/ui/overlay/overlay.component.scss @@ -1,6 +1,4 @@ :host { - --g: linear-gradient(#0000, #111); - display: flex; gap: 1ch; align-items: center; @@ -10,38 +8,14 @@ left: 0; width: 100%; z-index: 1; - padding: 1ch 1rem; + padding: 1ch calc(1rem + .25ch) 1.25ch 1rem; pointer-events: none; transition: opacity var(--t) cubic-bezier(.4, 0, 1, 1); font-size: 14px; line-height: 1; - -webkit-font-smoothing: antialiased; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - - &::before, - &::after { - content: ''; - position: absolute; - bottom: 0; - width: 100%; - height: 100%; - left: 0; - pointer-events: none; - } - - &::before { - z-index: -2; - left: 0; - backdrop-filter: blur(1rem); - -webkit-mask-box-image: var(--g); - mask-border: var(--g); - } - - &::after { - z-index: -1; - background-image: var(--g); - } + background: var(--surface); + background: oklch(from var(--surface) calc(l + .05) c h); &.show { opacity: 1; @@ -49,14 +23,7 @@ } &.top { - --g: linear-gradient(#111, #0000); top: 0; bottom: unset; - - &::before, - &::after { - top: 0; - bottom: unset; - } } } \ No newline at end of file diff --git a/src/app/shared/ui/overlay/overlay.component.ts b/src/app/shared/ui/overlay/overlay.component.ts index a01fe97..afe10b7 100644 --- a/src/app/shared/ui/overlay/overlay.component.ts +++ b/src/app/shared/ui/overlay/overlay.component.ts @@ -1,9 +1,10 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ selector: 'app-overlay', template: ``, - styleUrl: './overlay.component.scss' + styleUrl: './overlay.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class OverlayComponent { diff --git a/src/app/shared/ui/pages-indicator/pages-indicator.component.ts b/src/app/shared/ui/pages-indicator/pages-indicator.component.ts index 3413968..4bc4671 100644 --- a/src/app/shared/ui/pages-indicator/pages-indicator.component.ts +++ b/src/app/shared/ui/pages-indicator/pages-indicator.component.ts @@ -1,9 +1,10 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'app-pages-indicator', templateUrl: './pages-indicator.component.html', - styleUrl: './pages-indicator.component.scss' + styleUrl: './pages-indicator.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class PagesIndicatorComponent { @Input() images: any; diff --git a/src/app/shared/ui/separator/separator.component.ts b/src/app/shared/ui/separator/separator.component.ts index 0396d87..3b8a064 100644 --- a/src/app/shared/ui/separator/separator.component.ts +++ b/src/app/shared/ui/separator/separator.component.ts @@ -1,9 +1,10 @@ -import { Component, Input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; @Component({ selector: 'separator', styles: [`:host{ user-select: none; opacity: .5;}`], - template: `{{separator}}` + template: `{{separator}}`, + changeDetection: ChangeDetectionStrategy.OnPush }) export class SeparatorComponent { @Input() separator: string = '│' diff --git a/src/app/shared/ui/text-embracer/text-embracer.component.ts b/src/app/shared/ui/text-embracer/text-embracer.component.ts index df4f37c..dbe0cd9 100644 --- a/src/app/shared/ui/text-embracer/text-embracer.component.ts +++ b/src/app/shared/ui/text-embracer/text-embracer.component.ts @@ -1,9 +1,10 @@ -import { Component, Input, Signal, WritableSignal, computed, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, Signal, WritableSignal, computed, signal } from '@angular/core'; @Component({ selector: 'app-text-embracer', templateUrl: './text-embracer.component.html', - styleUrl: './text-embracer.component.scss' + styleUrl: './text-embracer.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class TextEmbracerComponent { diff --git a/src/app/shared/ui/title-card/title-card.component.ts b/src/app/shared/ui/title-card/title-card.component.ts index 92fc0ee..0a116a9 100644 --- a/src/app/shared/ui/title-card/title-card.component.ts +++ b/src/app/shared/ui/title-card/title-card.component.ts @@ -1,10 +1,11 @@ -import { Component, EventEmitter, Input, Output, inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, inject } from '@angular/core'; import { LangService } from '../../data-access/lang.service'; @Component({ selector: 'app-title-card', templateUrl: './title-card.component.html', - styleUrl: './title-card.component.scss' + styleUrl: './title-card.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class TitleCardComponent { @Input() value: any = {}; diff --git a/src/app/shared/ui/view-mode-bar/view-mode-bar.component.ts b/src/app/shared/ui/view-mode-bar/view-mode-bar.component.ts index 95016c0..bf9b465 100644 --- a/src/app/shared/ui/view-mode-bar/view-mode-bar.component.ts +++ b/src/app/shared/ui/view-mode-bar/view-mode-bar.component.ts @@ -1,10 +1,11 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; import { LangService } from '../../data-access/lang.service'; @Component({ selector: 'app-view-mode-bar', templateUrl: './view-mode-bar.component.html', - styleUrl: './view-mode-bar.component.scss' + styleUrl: './view-mode-bar.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class ViewModeBarComponent { @Input() options: any; diff --git a/src/app/shared/ui/viewer/viewer.component.ts b/src/app/shared/ui/viewer/viewer.component.ts index a2f731a..eb6006d 100644 --- a/src/app/shared/ui/viewer/viewer.component.ts +++ b/src/app/shared/ui/viewer/viewer.component.ts @@ -103,7 +103,7 @@ export class ViewerComponent { } - this.showOverlay = false; + // this.showOverlay = false; this.activeIndexs.set(activeIndxs); this.embedHelper.postMessage({ @@ -117,7 +117,6 @@ export class ViewerComponent { @HostListener('scroll', ['$event']) onScroll(event: Event) { this.initActiveIndexes() - this.showOverlay = false; } @HostListener('window:resize', ['$event']) @@ -171,8 +170,6 @@ export class ViewerComponent { if (event.deltaY !== 0 && !event.shiftKey) { this.viewElement().scrollLeft += event.deltaY * revers > 0 ? scrollAmountX : -scrollAmountX; - - this.showOverlay = false; event.preventDefault(); } } diff --git a/src/app/shared/ui/warm-control/warm-control.component.ts b/src/app/shared/ui/warm-control/warm-control.component.ts index 00ed1d6..fc3eeff 100644 --- a/src/app/shared/ui/warm-control/warm-control.component.ts +++ b/src/app/shared/ui/warm-control/warm-control.component.ts @@ -1,10 +1,11 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; import { LangService } from '../../data-access/lang.service'; @Component({ selector: 'app-warm-control', templateUrl: './warm-control.component.html', - styleUrl: './warm-control.component.scss' + styleUrl: './warm-control.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class WarmControlComponent { diff --git a/src/app/shared/ui/warm-filter/warm-filter.component.ts b/src/app/shared/ui/warm-filter/warm-filter.component.ts index 58fef1f..3b9b3b6 100644 --- a/src/app/shared/ui/warm-filter/warm-filter.component.ts +++ b/src/app/shared/ui/warm-filter/warm-filter.component.ts @@ -1,9 +1,10 @@ -import { Component, HostBinding, Input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core'; @Component({ selector: 'app-warm-filter', templateUrl: './warm-filter.component.html', - styleUrl: './warm-filter.component.scss' + styleUrl: './warm-filter.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class WarmFilterComponent { diff --git a/src/assets/pattern.svg b/src/assets/pattern.svg new file mode 100644 index 0000000..078b08b --- /dev/null +++ b/src/assets/pattern.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 89784f1..46ae071 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -3,6 +3,7 @@ @font-face { font-family: 'Troubleside'; src: url('/assets/fonts/Troubleside.ttf'); + font-display: swap; } :root { From 36bb1047b4155df5ccd4e4e97d846a75f9e547e4 Mon Sep 17 00:00:00 2001 From: Andrii Rodzyk Date: Mon, 12 Aug 2024 21:11:57 +0300 Subject: [PATCH 2/3] feat: postMessage event nsfwchoice --- src/app/shared/ui/viewer/viewer.component.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/app/shared/ui/viewer/viewer.component.ts b/src/app/shared/ui/viewer/viewer.component.ts index eb6006d..3ecaeb8 100644 --- a/src/app/shared/ui/viewer/viewer.component.ts +++ b/src/app/shared/ui/viewer/viewer.component.ts @@ -201,10 +201,15 @@ export class ViewerComponent { onAgree() { this.showNsfw.set(true); + this.embedHelper.postMessage(true, 'nsfwchoice'); } onDisagree() { - this.router.navigate(['/']) + this.showNsfw.set(false); + this.embedHelper.postMessage(false, 'nsfwchoice'); + + if (!this.embedHelper.isEmbedded()) + this.router.navigate(['/']) } preloadIndexes: Signal = computed(() => this.activeIndexs().map(item => item + 1)); @@ -213,9 +218,9 @@ export class ViewerComponent { return (this.preloadIndexes()).includes((i)) } - - + + //#region Inject @@ -227,5 +232,5 @@ export class ViewerComponent { //#endregion - + } From b60a9e3ea3f068965b8e0dea8d3cc5612bbf6afe Mon Sep 17 00:00:00 2001 From: Andrii Rodzyk Date: Mon, 12 Aug 2024 22:26:32 +0300 Subject: [PATCH 3/3] feat: Read on Chytanka in embed --- .../ui/footer/footer.component.scss | 2 +- .../ui/header/header.component.scss | 2 +- .../viewer-header.component.html | 7 +++-- .../viewer-header.component.scss | 30 +++++++++++++++---- 4 files changed, 32 insertions(+), 9 deletions(-) diff --git a/src/app/link-parser/ui/footer/footer.component.scss b/src/app/link-parser/ui/footer/footer.component.scss index 19bed51..ae1f811 100644 --- a/src/app/link-parser/ui/footer/footer.component.scss +++ b/src/app/link-parser/ui/footer/footer.component.scss @@ -4,5 +4,5 @@ made-in-ukraine, app-lang-toggle { app-overlay { position: absolute; - backdrop-filter: blur(1ch); + background: unset; } \ No newline at end of file diff --git a/src/app/link-parser/ui/header/header.component.scss b/src/app/link-parser/ui/header/header.component.scss index 36e5932..7a6c830 100644 --- a/src/app/link-parser/ui/header/header.component.scss +++ b/src/app/link-parser/ui/header/header.component.scss @@ -1,7 +1,7 @@ app-overlay{ position: absolute; - backdrop-filter: blur(1ch); + background: unset; } app-lang-toggle { 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 index 8e2bdca..5e8a1fc 100644 --- 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 @@ -1,10 +1,13 @@ @if(!embedHelper.isEmbedded()){ 🏠 - + + } @else { + } + - + {{episode?.title}} diff --git a/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.scss b/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.scss index 4072e28..9680af8 100644 --- a/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.scss +++ b/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.scss @@ -44,12 +44,32 @@ progress { } app-view-mode-bar { - margin-left: auto; + margin-left: auto; } textarea { - padding: 1ch; - border-top-left-radius: var(--radius-2); - border-bottom-left-radius: var(--radius-2); - box-shadow: var(--flat-shadow-medium); + padding: 1ch; + border-top-left-radius: var(--radius-2); + border-bottom-left-radius: var(--radius-2); + box-shadow: var(--flat-shadow-medium); +} + +.open-chtnk-link { + aspect-ratio: 1; + width: 2rem; + + background-image: url('/assets/icons/icon-72x72.svg'); + background-size: 150%; + overflow: hidden; + background-repeat: no-repeat; + background-position: center; + + &::after { + content: unset; + } + + img { + display: inline-block; + width: 1.5rem; + } } \ No newline at end of file