Tidying up (#1944)

* Fixing nav logo

* Adding emulate book for single renderer

* enabling control

* forcing hardware acceleration on infinite scroller

* Fixing review comments

- Refactoring bookshadow to use shared css
- Adding issue comment for hardware acceleration hack

* Fixing bookshadow happening on first and last page

UI/Web/src/_manga-reader-common.scss

@@ -71,7 +71,7 @@ img {
 }
 
 
-::ng-deep .image-container.book-shadow.center-double:before {
+::ng-deep .image-container.book-shadow[class*="double-offset"]:before, ::ng-deep .image-container.book-shadow.wide:before {
   content: '';
   position: absolute;
   top: 0;
@@ -85,7 +85,7 @@ img {
 }
 
 @supports (-moz-appearance:none) {
-  ::ng-deep .image-container.book-shadow.center-double:before {
+  ::ng-deep .image-container.book-shadow[class*="double-offset"]:before, ::ng-deep .image-container.book-shadow.wide:before {
     box-shadow:
       0px 0px calc(17px*3.14) 25px rgb(0 0 0 / 43%),
       0px 0px calc(2px*3.14) 2px rgb(0 0 0 / 43%),

UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.ts

@@ -132,6 +132,7 @@ export class DoubleRendererComponent implements OnInit, OnDestroy, ImageRenderer
         if (value[0] && value[1].fitting === FITTING_OPTION.WIDTH) return 'fit-to-width-double-offset';
         if (value[0] && value[1].fitting === FITTING_OPTION.HEIGHT) return 'fit-to-height-double-offset';
         if (value[0] && value[1].fitting === FITTING_OPTION.ORIGINAL) return 'original-double-offset';
+        if (this.mangaReaderService.isWidePage(this.pageNum) ) return 'double-offset';
         return '';
       }),
       filter(_ => this.isValid()),

UI/Web/src/app/manga-reader/_components/double-reverse-renderer/double-reverse-renderer.component.ts

@@ -133,6 +133,7 @@ export class DoubleReverseRendererComponent implements OnInit, OnDestroy, ImageR
         if (value[0] && value[1].fitting === FITTING_OPTION.WIDTH) return 'fit-to-width-double-offset';
         if (value[0] && value[1].fitting === FITTING_OPTION.HEIGHT) return 'fit-to-height-double-offset';
         if (value[0] && value[1].fitting === FITTING_OPTION.ORIGINAL) return 'original-double-offset';
+        if (this.mangaReaderService.isWidePage(this.pageNum) ) return 'double-offset';
         return '';
       }),
       filter(_ => this.isValid()),

UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss

@@ -31,7 +31,12 @@ img, .full-width {
     height: auto;
 }
 
-
+// This is to force hardware acceleration to help address https://github.com/Kareadita/Kavita/issues/1848
+*:not(html) {
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
 
 @keyframes move-up-down {
     0%, 100% {

UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.ts

@@ -527,7 +527,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
           this.generalSettingsForm.get('pageSplitOption')?.setValue(this.user.preferences.pageSplitOption);
           this.generalSettingsForm.get('pageSplitOption')?.enable();
           this.generalSettingsForm.get('fittingOption')?.enable();
-          this.generalSettingsForm.get('emulateBook')?.disable();
+          this.generalSettingsForm.get('emulateBook')?.enable();
         } else {
           this.generalSettingsForm.get('pageSplitOption')?.setValue(PageSplitOption.NoSplit);
           this.generalSettingsForm.get('pageSplitOption')?.disable();

UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="isValid() && !this.mangaReaderService.shouldSplit(this.currentImage, this.pageSplit)">
-    <div class="image-container {{imageFitClass$ | async}}" 
+    <div class="image-container {{imageFitClass$ | async}} {{emulateBookClass$ | async}}"
         [style.filter]="(darkenss$ | async)  ?? '' | safeStyle" [style.height]="(imageContainerHeight$ | async)  ?? '' | safeStyle">
         <ng-container *ngIf="currentImage">
             <img alt=" " 

UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.ts

@@ -31,6 +31,7 @@ export class SingleRendererComponent implements OnInit, OnDestroy, ImageRenderer
   showClickOverlayClass$!: Observable<string>;
   readerModeClass$!: Observable<string>;
   darkenss$: Observable<string> = of('brightness(100%)');
+  emulateBookClass$!: Observable<string>;
   currentImage!: HTMLImageElement;
   layoutMode: LayoutMode = LayoutMode.Single;
   pageSplit: PageSplitOption = PageSplitOption.FitSplit;
@@ -54,6 +55,13 @@ export class SingleRendererComponent implements OnInit, OnDestroy, ImageRenderer
       takeUntil(this.onDestroy)
     );
 
+    this.emulateBookClass$ = this.readerSettings$.pipe(
+      map(data => data.emulateBook),
+      map(enabled => enabled ? 'book-shadow' : ''), 
+      filter(_ => this.isValid()),
+      takeUntil(this.onDestroy)
+    );
+
     this.imageContainerHeight$ = this.readerSettings$.pipe(
       map(values => values.fitting), 
       map(mode => {
@@ -119,7 +127,7 @@ export class SingleRendererComponent implements OnInit, OnDestroy, ImageRenderer
           this.mangaReaderService.shouldRenderAsFitSplit(this.pageSplit)
           ) {
           // Rewriting to fit to width for this cover image
-          return FITTING_OPTION.WIDTH + ' fit-to-screen';
+          return FITTING_OPTION.WIDTH + ' fit-to-screen wide';
         }
 
         return fit;

UI/Web/src/app/nav/_components/nav-header/nav-header.component.html

@@ -3,7 +3,7 @@
       <a class="visually-hidden-focusable focus-visible" href="javascript:void(0);" (click)="moveFocus()">Skip to main content</a>
       <a class="side-nav-toggle" *ngIf="navService?.sideNavVisibility$ | async" (click)="hideSideNav()"><i class="fas fa-bars"></i></a>
       <a class="navbar-brand dark-exempt" routerLink="/libraries" routerLinkActive="active">
-        <img width="28px" height="28px" class="logo" src="../../assets/images/logo.png" alt="kavita icon" aria-hidden="true"/>
+        <img width="28px" height="28px" class="logo" src="assets/images/logo.png" alt="kavita icon" aria-hidden="true"/>
         <span class="d-none d-md-inline logo"> Kavita</span>
       </a>
       <ul class="navbar-nav col me-auto">