Develop

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;
 }

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 {

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)

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)

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)

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 {
 

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 {
 

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 {
 

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`;

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,53 +8,22 @@
 	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;
 		pointer-events: unset;
 	}
 
 	&.top {
-		--g: linear-gradient(#111, #0000);
 		top: 0;
 		bottom: unset;
-
-		&::before,
-		&::after {
-			top: 0;
-			bottom: unset;
-		}
 	}
 }

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: `<ng-content />`,
-  styleUrl: './overlay.component.scss'
+  styleUrl: './overlay.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class OverlayComponent {
 

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;

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 = '│'

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 {
 

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 = {};

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;

src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.html

@@ -1,10 +1,13 @@
 <app-overlay class="top" [ngClass]="{'show': show}">
     @if(!embedHelper.isEmbedded()){
     <a class="button " [routerLink]="['/']">🏠</a>
-    <separator />
+
+    } @else {
+        <a title="Read on Chytanka" class="button open-chtnk-link" [href]="link()" target="_blank" rel="noopener noreferrer"></a>
     }
+    <separator />
     <button class="button tshadow " [title]="lang.ph().share" (click)="showShare()">📢</button>
-    <button class="button tshadow" [title]="'Download'" (click)="showDownload()">📥</button>
+    <!-- <button class="button tshadow" [title]="'Download'" (click)="showDownload()">📥</button> -->
     <span class="title">{{episode?.title}}</span>
     <app-view-mode-bar (valueChange)="setViewModeOption($event)" [options]="viewer.viewModeOptions"
         [value]="viewer.viewModeOption().code" />

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;
+    }
 }

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();
     }
   }
@@ -204,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<number[]> = computed(() => this.activeIndexs().map(item => item + 1));
@@ -216,9 +218,9 @@ export class ViewerComponent {
     return (this.preloadIndexes()).includes((i))
   }
 
-
 
-
+
+
 
   //#region Inject
 
@@ -230,5 +232,5 @@ export class ViewerComponent {
 
   //#endregion
 
-  
+
 }

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 {