Polish Round 1 (#2396)

UI/Web/src/app/shared/_services/download.service.ts

@@ -19,7 +19,7 @@ import { download, Download } from '../_models/download';
 import { PageBookmark } from 'src/app/_models/readers/page-bookmark';
 import {switchMap, take, takeWhile, throttleTime} from 'rxjs/operators';
 import { AccountService } from 'src/app/_services/account.service';
-import { BytesPipe } from 'src/app/pipe/bytes.pipe';
+import { BytesPipe } from 'src/app/_pipes/bytes.pipe';
 import {translate} from "@ngneat/transloco";
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 

UI/Web/src/app/shared/confirm-dialog/confirm-dialog.component.ts

@@ -3,7 +3,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ConfirmButton } from './_models/confirm-button';
 import { ConfirmConfig } from './_models/confirm-config';
 import {CommonModule} from "@angular/common";
-import {SafeHtmlPipe} from "../../pipe/safe-html.pipe";
+import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe";
 import {TranslocoDirective} from "@ngneat/transloco";
 
 @Component({

UI/Web/src/app/shared/image/image.component.html

@@ -1,6 +1,11 @@
-<img #img class="lazyload img-placeholder {{classes}}" src="data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
-     [attr.data-src]="imageUrl"
-     (error)="imageService.updateErroredImage($event)"
-     aria-hidden="true"
+<!--<img #img class="lazyload img-placeholder {{classes}} fade-in" src="data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="-->
+<!--     [attr.data-src]="imageUrl"-->
+<!--     (error)="imageService.updateErroredImage($event)"-->
+<!--     aria-hidden="true"-->
+<!--     alt=""-->
+<!--    >-->
+
+<img class="img-placeholder {{classes}} fade-in"
+     #img
      alt=""
-    >
+     [lazyLoad]="imageUrl" (onStateChange)="myCallbackFunction($event)">

UI/Web/src/app/shared/image/image.component.scss

@@ -1,8 +1,18 @@
 img {
     width: 100%;
+    transition: opacity 1s;
 }
 
 .img-placeholder {
     background: rgb(44,47,51);
     background: radial-gradient(circle, rgba(44,47,51,1) 0%, rgba(34,42,24,1) 37%, rgba(2,0,36,1) 100%);
 }
+
+.fade-in {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.fade-in.loaded {
+  opacity: 1;
+}

UI/Web/src/app/shared/image/image.component.ts

@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component, DestroyRef,
@@ -13,7 +14,8 @@ import { CoverUpdateEvent } from 'src/app/_models/events/cover-update-event';
 import { ImageService } from 'src/app/_services/image.service';
 import { EVENTS, MessageHubService } from 'src/app/_services/message-hub.service';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
-import {CommonModule} from "@angular/common";
+import {CommonModule, NgOptimizedImage} from "@angular/common";
+import {LazyLoadImageModule, StateChange} from "ng-lazyload-image";
 
 /**
  * This is used for images with placeholder fallback.
@@ -21,7 +23,7 @@ import {CommonModule} from "@angular/common";
 @Component({
   selector: 'app-image',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, NgOptimizedImage, LazyLoadImageModule],
   templateUrl: './image.component.html',
   styleUrls: ['./image.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -68,8 +70,12 @@ export class ImageComponent implements OnChanges {
 
   @ViewChild('img', {static: true}) imgElem!: ElementRef<HTMLImageElement>;
   private readonly destroyRef = inject(DestroyRef);
+  protected readonly imageService = inject(ImageService);
+  private readonly renderer = inject(Renderer2);
+  private readonly hubService = inject(MessageHubService);
+  private readonly cdRef = inject(ChangeDetectorRef);
 
-  constructor(public imageService: ImageService, private renderer: Renderer2, private hubService: MessageHubService, private changeDetectionRef: ChangeDetectorRef) {
+  constructor() {
     this.hubService.messages$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(res => {
       if (!this.processEvents) return;
       if (res.event === EVENTS.CoverUpdate) {
@@ -86,7 +92,7 @@ export class ImageComponent implements OnChanges {
           }
           if (id === (updateEvent.id + '')) {
             this.imageUrl = this.imageService.randomize(this.imageUrl);
-            this.changeDetectionRef.markForCheck();
+            this.cdRef.markForCheck();
           }
         }
       }
@@ -123,4 +129,38 @@ export class ImageComponent implements OnChanges {
     }
   }
 
+
+  myCallbackFunction(event: StateChange) {
+    const image = this.imgElem.nativeElement;
+    switch (event.reason) {
+      case 'setup':
+        // The lib has been instantiated but we have not done anything yet.
+        break;
+      case 'observer-emit':
+        // The image observer (intersection/scroll/custom observer) has emit a value so we
+        // should check if the image is in the viewport.
+        // `event.data` is the event in this case.
+        break;
+      case 'start-loading':
+        // The image is in the viewport so the image will start loading
+        break;
+      case 'mount-image':
+        // The image has been loaded successfully so lets put it into the DOM
+        break;
+      case 'loading-succeeded':
+        // The image has successfully been loaded and placed into the DOM
+        this.renderer.addClass(image, 'loaded');
+        break;
+      case 'loading-failed':
+        // The image could not be loaded for some reason.
+        // `event.data` is the error in this case
+        image.src = this.imageService.errorImage;
+        this.cdRef.markForCheck();
+        break;
+      case 'finally':
+        // The last event before cleaning up
+        break;
+    }
+  }
+
 }

UI/Web/src/app/shared/read-more/read-more.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges } from '@angular/core';
 import {CommonModule} from "@angular/common";
-import {SafeHtmlPipe} from "../../pipe/safe-html.pipe";
+import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe";
 import {TranslocoDirective} from "@ngneat/transloco";
 
 @Component({

UI/Web/src/app/shared/series-format/series-format.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MangaFormat } from 'src/app/_models/manga-format';
-import {MangaFormatIconPipe} from "../../pipe/manga-format-icon.pipe";
-import {MangaFormatPipe} from "../../pipe/manga-format.pipe";
+import {MangaFormatIconPipe} from "../../_pipes/manga-format-icon.pipe";
+import {MangaFormatPipe} from "../../_pipes/manga-format.pipe";
 import {CommonModule} from "@angular/common";
 
 @Component({

UI/Web/src/app/shared/update-notification/update-notification-modal.component.ts

@@ -2,7 +2,7 @@ import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
 import {NgbActiveModal, NgbModalModule} from '@ng-bootstrap/ng-bootstrap';
 import { UpdateVersionEvent } from 'src/app/_models/events/update-version-event';
 import {CommonModule} from "@angular/common";
-import {SafeHtmlPipe} from "../../pipe/safe-html.pipe";
+import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe";
 import {TranslocoDirective} from "@ngneat/transloco";