Feature/manga scroll width changer

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

@@ -29,7 +29,7 @@
 
   <div infinite-scroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="50">
     <ng-container *ngFor="let item of webtoonImages | async; let index = index;">
-      <img src="{{item.src}}" style="display: block"
+      <img src="{{item.src}}" style="display: block; width: {{widthOverride$ | async}}"
            [style.filter]="(darkness$ | async)  ?? '' | safeStyle"
            class="mx-auto {{pageNum === item.page && showDebugOutline() ? 'active': ''}} {{areImagesWiderThanWindow ? 'full-width' : ''}}"
            rel="nofollow" alt="image" (load)="onImageLoad($event)" id="page-{{item.page}}" [attr.page]="item.page" ondragstart="return false;" onselectstart="return false;">

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

@@ -25,7 +25,6 @@ import { WebtoonImage } from '../../_models/webtoon-image';
 import { ManagaReaderService } from '../../_service/managa-reader.service';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {TranslocoDirective} from "@ngneat/transloco";
-import {MangaReaderComponent} from "../manga-reader/manga-reader.component";
 import {InfiniteScrollModule} from "ngx-infinite-scroll";
 import {ReaderSetting} from "../../_models/reader-setting";
 import {SafeStylePipe} from "../../../_pipes/safe-style.pipe";
@@ -174,6 +173,14 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
    */
   debugLogFilter: Array<string> = ['[PREFETCH]', '[Intersection]', '[Visibility]', '[Image Load]'];
 
+  /**
+   * Width overwrite for maunal width control
+   * 2 observables needed to avoid flickering, probably due to data races, when changing the width
+   * this allows to precicely define execution order
+  */
+  widthOverride$ : Observable<string> = new Observable<string>();
+  widthSliderValue$ : Observable<string> = new Observable<string>();
+
   get minPageLoaded() {
     return Math.min(...Object.values(this.imagesLoaded));
   }
@@ -232,6 +239,31 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
       takeUntilDestroyed(this.destroyRef)
     );
 
+
+    this.widthSliderValue$ = this.readerSettings$.pipe(
+      map(values => (parseInt(values.widthSlider) <= 0) ? '' : values.widthSlider + '%'),
+      takeUntilDestroyed(this.destroyRef)
+    );
+
+    this.widthOverride$ = this.widthSliderValue$;
+
+    //perfom jump so the page stays in view
+    this.widthSliderValue$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(val => {
+      this.currentPageElem = this.document.querySelector('img#page-' + this.pageNum);
+      if(!this.currentPageElem)
+        return;
+
+      let images = Array.from(document.querySelectorAll('img[id^="page-"]')) as HTMLImageElement[];
+      images.forEach((img) => {
+        this.renderer.setStyle(img, "width", val);
+      });
+
+      this.widthOverride$ = this.widthSliderValue$;
+      this.prevScrollPosition = this.currentPageElem.getBoundingClientRect().top;
+      this.currentPageElem.scrollIntoView();
+      this.cdRef.markForCheck();
+    });
+
     if (this.goToPage) {
       this.goToPage.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(page => {
         const isSamePage = this.pageNum === page;
@@ -369,6 +401,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
   }
 
   checkIfShouldTriggerContinuousReader() {
+    this.widthOverride$ = this.widthSliderValue$;
     if (this.isScrolling) return;
 
     if (this.scrollingDirection === PAGING_DIRECTION.FORWARD) {

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

@@ -276,6 +276,13 @@
                      min="10" max="100" step="1" formControlName="darkness">
             </div>
 
+            <div class="col-md-6 col-sm-12">
+              <label for="page-fitting-slider" class="form-label">{{t('width_override')}}:
+                  {{ (widthOverrideLabel$ | async) ? (widthOverrideLabel$ | async) : t('width_override_off') }}
+              </label>
+              <input id="page-fitting-slider" type="range" min="0" max="100" class="form-range" formControlName="widthSlider">
+            </div>
+
 
             <div class="col-md-6 col-sm-12">
               <button class="btn btn-primary" (click)="savePref()">{{t('save-globally')}}</button>

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

@@ -398,6 +398,10 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
    * Show and log debug information
    */
   debugMode: boolean = false;
+  /**
+   * Width overwrite label for maunal width control
+  */
+  widthOverrideLabel$ : Observable<string> = new Observable<string>();
 
   // Renderer interaction
   readerSettings$!: Observable<ReaderSetting>;
@@ -513,6 +517,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
         autoCloseMenu: new FormControl(this.autoCloseMenu),
         pageSplitOption: new FormControl(this.pageSplitOption),
         fittingOption: new FormControl(this.mangaReaderService.translateScalingOption(this.scalingOption)),
+        widthSlider: new FormControl('none'),
         layoutMode: new FormControl(this.layoutMode),
         darkness: new FormControl(100),
         emulateBook: new FormControl(this.user.preferences.emulateBook),
@@ -549,9 +554,33 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
         takeUntilDestroyed(this.destroyRef)
       ).subscribe(() => {});
 
+      this.generalSettingsForm.get('pageSplitOption')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(val => {
+        let fitting = this.generalSettingsForm.get('fittingOption')?.value;
+        if(PageSplitOption.FitSplit == val && FITTING_OPTION.WIDTH == fitting) {
+          this.generalSettingsForm.get('widthSlider')?.enable();
+        } else {
+          this.generalSettingsForm.get('widthSlider')?.setValue(0);
+          this.generalSettingsForm.get('widthSlider')?.disable();
+        }
+      });
+
+    this.generalSettingsForm.get('fittingOption')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(val => {
+      let splitting = this.generalSettingsForm.get('pageSplitOption')?.value;
+      if(PageSplitOption.FitSplit == splitting && FITTING_OPTION.WIDTH == val){
+          this.generalSettingsForm.get('widthSlider')?.enable();
+      } else {
+        this.generalSettingsForm.get('widthSlider')?.setValue(0);
+        this.generalSettingsForm.get('widthSlider')?.disable();
+      }
 
+            this.widthOverrideLabel$ = this.readerSettings$?.pipe(
+      map(values => (parseInt(values.widthSlider) <= 0) ? '' : values.widthSlider + '%'),
+      takeUntilDestroyed(this.destroyRef)
+    );
 
 
+    });
+
       this.generalSettingsForm.get('layoutMode')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(val => {
 
         const changeOccurred = parseInt(val, 10) !== this.layoutMode;
@@ -560,11 +589,13 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
         if (this.layoutMode === LayoutMode.Single) {
           this.generalSettingsForm.get('pageSplitOption')?.setValue(this.user.preferences.pageSplitOption);
           this.generalSettingsForm.get('pageSplitOption')?.enable();
+          this.generalSettingsForm.get('widthSlider')?.enable();
           this.generalSettingsForm.get('fittingOption')?.enable();
           this.generalSettingsForm.get('emulateBook')?.enable();
         } else {
           this.generalSettingsForm.get('pageSplitOption')?.setValue(PageSplitOption.NoSplit);
           this.generalSettingsForm.get('pageSplitOption')?.disable();
+          this.generalSettingsForm.get('widthSlider')?.disable();
           this.generalSettingsForm.get('fittingOption')?.setValue(this.mangaReaderService.translateScalingOption(ScalingOption.FitToHeight));
           this.generalSettingsForm.get('fittingOption')?.disable();
           this.generalSettingsForm.get('emulateBook')?.enable();
@@ -696,6 +727,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     return {
       pageSplit: parseInt(this.generalSettingsForm.get('pageSplitOption')?.value, 10),
       fitting: (this.generalSettingsForm.get('fittingOption')?.value as FITTING_OPTION),
+      widthSlider: this.generalSettingsForm.get('widthSlider')?.value,
       layoutMode: this.layoutMode,
       darkness: parseInt(this.generalSettingsForm.get('darkness')?.value + '', 10) || 100,
       pagingDirection: this.pagingDirection,

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

@@ -3,6 +3,7 @@
        [style.filter]="(darkness$ | async)  ?? '' | safeStyle" [style.height]="(imageContainerHeight$ | async)  ?? '' | safeStyle">
     @if(currentImage) {
       <img alt=" "
+            style="width: {{widthOverride$ | async}}"
            #image
            [src]="currentImage.src"
            id="image-1"

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

@@ -53,6 +53,11 @@ export class SingleRendererComponent implements OnInit, ImageRenderer {
   pageNum: number = 0;
   maxPages: number = 1;
 
+  /**
+   * Width overwrite for maunal width control
+  */
+  widthOverride$ : Observable<string> = new Observable<string>();
+
   get ReaderMode() {return ReaderMode;}
   get LayoutMode() {return LayoutMode;}
 
@@ -67,6 +72,13 @@ export class SingleRendererComponent implements OnInit, ImageRenderer {
       takeUntilDestroyed(this.destroyRef)
     );
 
+    //handle manual width
+    this.widthOverride$ = this.readerSettings$.pipe(
+      map(values => (parseInt(values.widthSlider) <= 0) ? '' : values.widthSlider + '%'),
+      takeUntilDestroyed(this.destroyRef)
+    );
+
+
     this.emulateBookClass$ = this.readerSettings$.pipe(
       map(data => data.emulateBook),
       map(enabled => enabled ? 'book-shadow' : ''),

UI/Web/src/app/manga-reader/_models/reader-enums.ts

@@ -1,7 +1,7 @@
 export enum FITTING_OPTION {
     HEIGHT = 'full-height',
     WIDTH = 'full-width',
-    ORIGINAL = 'original'
+    ORIGINAL = 'original',
 }
 
 /**
@@ -12,9 +12,9 @@ export enum SPLIT_PAGE_PART {
     LEFT_PART = 'left',
     RIGHT_PART = 'right'
 }
-  
+
 export enum PAGING_DIRECTION {
     FORWARD = 1,
     BACKWARDS = -1,
 }
-  
+

UI/Web/src/app/manga-reader/_models/reader-setting.ts

@@ -6,9 +6,10 @@ import { FITTING_OPTION, PAGING_DIRECTION } from "./reader-enums";
 export interface ReaderSetting {
     pageSplit: PageSplitOption;
     fitting: FITTING_OPTION;
+    widthSlider: string;
     layoutMode: LayoutMode;
     darkness: number;
     pagingDirection: PAGING_DIRECTION;
     readerMode: ReaderMode;
     emulateBook: boolean;
-}
+}

UI/Web/src/assets/langs/en.json

@@ -1695,6 +1695,8 @@
         "image-scaling-label": "Image Scaling",
         "height": "Height",
         "width": "Width",
+        "width_override": "Width Override",
+        "width_override_off": "Off",
         "original": "Original",
         "auto-close-menu-label": "{{user-preferences.auto-close-menu-label}}",
         "swipe-enabled-label": "Swipe Enabled",