diff --git a/UI/Web/src/_manga-reader-common.scss b/UI/Web/src/_manga-reader-common.scss index ab9beb1d5..a7dfb4f19 100644 --- a/UI/Web/src/_manga-reader-common.scss +++ b/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%), diff --git a/UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.ts b/UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.ts index 9e4edf3a2..d512d3cd4 100644 --- a/UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.ts +++ b/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()), diff --git a/UI/Web/src/app/manga-reader/_components/double-reverse-renderer/double-reverse-renderer.component.ts b/UI/Web/src/app/manga-reader/_components/double-reverse-renderer/double-reverse-renderer.component.ts index 08b236a70..9ccd53bee 100644 --- a/UI/Web/src/app/manga-reader/_components/double-reverse-renderer/double-reverse-renderer.component.ts +++ b/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()), diff --git a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss index f56c62ced..3f0b243c5 100644 --- a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss +++ b/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% { diff --git a/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.ts b/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.ts index c18bbcd6f..b0f5b3f7a 100644 --- a/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.ts +++ b/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(); diff --git a/UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.html b/UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.html index 2c203b263..cc00d7562 100644 --- a/UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.html +++ b/UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.html @@ -1,5 +1,5 @@ -
 ; readerModeClass$!: Observable; darkenss$: Observable = of('brightness(100%)'); + emulateBookClass$!: Observable; 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; diff --git a/UI/Web/src/app/nav/_components/nav-header/nav-header.component.html b/UI/Web/src/app/nav/_components/nav-header/nav-header.component.html index afdbea6a3..05e08a5f7 100644 --- a/UI/Web/src/app/nav/_components/nav-header/nav-header.component.html +++ b/UI/Web/src/app/nav/_components/nav-header/nav-header.component.html @@ -3,7 +3,7 @@ Skip to main content - +