diff --git a/UI/Web/src/app/_models/preferences/preferences.ts b/UI/Web/src/app/_models/preferences/preferences.ts index 1dd5731e5..57466cc80 100644 --- a/UI/Web/src/app/_models/preferences/preferences.ts +++ b/UI/Web/src/app/_models/preferences/preferences.ts @@ -1,48 +1,7 @@ -import {LayoutMode} from 'src/app/manga-reader/_models/layout-mode'; -import {BookPageLayoutMode} from '../readers/book-page-layout-mode'; import {PageLayoutMode} from '../page-layout-mode'; -import {PageSplitOption} from './page-split-option'; -import {ReaderMode} from './reader-mode'; -import {ReadingDirection} from './reading-direction'; -import {ScalingOption} from './scaling-option'; import {SiteTheme} from './site-theme'; -import {WritingStyle} from "./writing-style"; -import {PdfTheme} from "./pdf-theme"; -import {PdfScrollMode} from "./pdf-scroll-mode"; -import {PdfLayoutMode} from "./pdf-layout-mode"; -import {PdfSpreadMode} from "./pdf-spread-mode"; export interface Preferences { - // Manga Reader - readingDirection: ReadingDirection; - scalingOption: ScalingOption; - pageSplitOption: PageSplitOption; - readerMode: ReaderMode; - autoCloseMenu: boolean; - layoutMode: LayoutMode; - backgroundColor: string; - showScreenHints: boolean; - emulateBook: boolean; - swipeToPaginate: boolean; - allowAutomaticWebtoonReaderDetection: boolean; - - // Book Reader - bookReaderMargin: number; - bookReaderLineSpacing: number; - bookReaderFontSize: number; - bookReaderFontFamily: string; - bookReaderTapToPaginate: boolean; - bookReaderReadingDirection: ReadingDirection; - bookReaderWritingStyle: WritingStyle; - bookReaderThemeName: string; - bookReaderLayoutMode: BookPageLayoutMode; - bookReaderImmersiveMode: boolean; - - // PDF Reader - pdfTheme: PdfTheme; - pdfScrollMode: PdfScrollMode; - pdfSpreadMode: PdfSpreadMode; - // Global theme: SiteTheme; globalPageLayoutMode: PageLayoutMode; @@ -58,15 +17,3 @@ export interface Preferences { wantToReadSync: boolean; } -export const readingDirections = [{text: 'left-to-right', value: ReadingDirection.LeftToRight}, {text: 'right-to-left', value: ReadingDirection.RightToLeft}]; -export const bookWritingStyles = [{text: 'horizontal', value: WritingStyle.Horizontal}, {text: 'vertical', value: WritingStyle.Vertical}]; -export const scalingOptions = [{text: 'automatic', value: ScalingOption.Automatic}, {text: 'fit-to-height', value: ScalingOption.FitToHeight}, {text: 'fit-to-width', value: ScalingOption.FitToWidth}, {text: 'original', value: ScalingOption.Original}]; -export const pageSplitOptions = [{text: 'fit-to-screen', value: PageSplitOption.FitSplit}, {text: 'right-to-left', value: PageSplitOption.SplitRightToLeft}, {text: 'left-to-right', value: PageSplitOption.SplitLeftToRight}, {text: 'no-split', value: PageSplitOption.NoSplit}]; -export const readingModes = [{text: 'left-to-right', value: ReaderMode.LeftRight}, {text: 'up-to-down', value: ReaderMode.UpDown}, {text: 'webtoon', value: ReaderMode.Webtoon}]; -export const layoutModes = [{text: 'single', value: LayoutMode.Single}, {text: 'double', value: LayoutMode.Double}, {text: 'double-manga', value: LayoutMode.DoubleReversed}]; // TODO: Build this, {text: 'Double (No Cover)', value: LayoutMode.DoubleNoCover} -export const bookLayoutModes = [{text: 'scroll', value: BookPageLayoutMode.Default}, {text: '1-column', value: BookPageLayoutMode.Column1}, {text: '2-column', value: BookPageLayoutMode.Column2}]; -export const pageLayoutModes = [{text: 'cards', value: PageLayoutMode.Cards}, {text: 'list', value: PageLayoutMode.List}]; -export const pdfLayoutModes = [{text: 'pdf-multiple', value: PdfLayoutMode.Multiple}, {text: 'pdf-book', value: PdfLayoutMode.Book}]; -export const pdfScrollModes = [{text: 'pdf-vertical', value: PdfScrollMode.Vertical}, {text: 'pdf-horizontal', value: PdfScrollMode.Horizontal}, {text: 'pdf-page', value: PdfScrollMode.Page}]; -export const pdfSpreadModes = [{text: 'pdf-none', value: PdfSpreadMode.None}, {text: 'pdf-odd', value: PdfSpreadMode.Odd}, {text: 'pdf-even', value: PdfSpreadMode.Even}]; -export const pdfThemes = [{text: 'pdf-light', value: PdfTheme.Light}, {text: 'pdf-dark', value: PdfTheme.Dark}]; diff --git a/UI/Web/src/app/_models/preferences/reading-profiles.ts b/UI/Web/src/app/_models/preferences/reading-profiles.ts new file mode 100644 index 000000000..0c1e5df48 --- /dev/null +++ b/UI/Web/src/app/_models/preferences/reading-profiles.ts @@ -0,0 +1,64 @@ +import {LayoutMode} from 'src/app/manga-reader/_models/layout-mode'; +import {BookPageLayoutMode} from '../readers/book-page-layout-mode'; +import {PageLayoutMode} from '../page-layout-mode'; +import {PageSplitOption} from './page-split-option'; +import {ReaderMode} from './reader-mode'; +import {ReadingDirection} from './reading-direction'; +import {ScalingOption} from './scaling-option'; +import {WritingStyle} from "./writing-style"; +import {PdfTheme} from "./pdf-theme"; +import {PdfScrollMode} from "./pdf-scroll-mode"; +import {PdfLayoutMode} from "./pdf-layout-mode"; +import {PdfSpreadMode} from "./pdf-spread-mode"; + +export interface ReadingProfile { + + id: number; + name: string; + normalizedName: string; + + // Manga Reader + readingDirection: ReadingDirection; + scalingOption: ScalingOption; + pageSplitOption: PageSplitOption; + readerMode: ReaderMode; + autoCloseMenu: boolean; + layoutMode: LayoutMode; + backgroundColor: string; + showScreenHints: boolean; + emulateBook: boolean; + swipeToPaginate: boolean; + allowAutomaticWebtoonReaderDetection: boolean; + widthOverride?: number; + + // Book Reader + bookReaderMargin: number; + bookReaderLineSpacing: number; + bookReaderFontSize: number; + bookReaderFontFamily: string; + bookReaderTapToPaginate: boolean; + bookReaderReadingDirection: ReadingDirection; + bookReaderWritingStyle: WritingStyle; + bookReaderThemeName: string; + bookReaderLayoutMode: BookPageLayoutMode; + bookReaderImmersiveMode: boolean; + + // PDF Reader + pdfTheme: PdfTheme; + pdfScrollMode: PdfScrollMode; + pdfSpreadMode: PdfSpreadMode; + +} + +export const readingDirections = [{text: 'left-to-right', value: ReadingDirection.LeftToRight}, {text: 'right-to-left', value: ReadingDirection.RightToLeft}]; +export const bookWritingStyles = [{text: 'horizontal', value: WritingStyle.Horizontal}, {text: 'vertical', value: WritingStyle.Vertical}]; +export const scalingOptions = [{text: 'automatic', value: ScalingOption.Automatic}, {text: 'fit-to-height', value: ScalingOption.FitToHeight}, {text: 'fit-to-width', value: ScalingOption.FitToWidth}, {text: 'original', value: ScalingOption.Original}]; +export const pageSplitOptions = [{text: 'fit-to-screen', value: PageSplitOption.FitSplit}, {text: 'right-to-left', value: PageSplitOption.SplitRightToLeft}, {text: 'left-to-right', value: PageSplitOption.SplitLeftToRight}, {text: 'no-split', value: PageSplitOption.NoSplit}]; +export const readingModes = [{text: 'left-to-right', value: ReaderMode.LeftRight}, {text: 'up-to-down', value: ReaderMode.UpDown}, {text: 'webtoon', value: ReaderMode.Webtoon}]; +export const layoutModes = [{text: 'single', value: LayoutMode.Single}, {text: 'double', value: LayoutMode.Double}, {text: 'double-manga', value: LayoutMode.DoubleReversed}]; // TODO: Build this, {text: 'Double (No Cover)', value: LayoutMode.DoubleNoCover} +export const bookLayoutModes = [{text: 'scroll', value: BookPageLayoutMode.Default}, {text: '1-column', value: BookPageLayoutMode.Column1}, {text: '2-column', value: BookPageLayoutMode.Column2}]; +export const pageLayoutModes = [{text: 'cards', value: PageLayoutMode.Cards}, {text: 'list', value: PageLayoutMode.List}]; +export const pdfLayoutModes = [{text: 'pdf-multiple', value: PdfLayoutMode.Multiple}, {text: 'pdf-book', value: PdfLayoutMode.Book}]; +export const pdfScrollModes = [{text: 'pdf-vertical', value: PdfScrollMode.Vertical}, {text: 'pdf-horizontal', value: PdfScrollMode.Horizontal}, {text: 'pdf-page', value: PdfScrollMode.Page}]; +export const pdfSpreadModes = [{text: 'pdf-none', value: PdfSpreadMode.None}, {text: 'pdf-odd', value: PdfSpreadMode.Odd}, {text: 'pdf-even', value: PdfSpreadMode.Even}]; +export const pdfThemes = [{text: 'pdf-light', value: PdfTheme.Light}, {text: 'pdf-dark', value: PdfTheme.Dark}]; diff --git a/UI/Web/src/app/_services/reading-profile.service.ts b/UI/Web/src/app/_services/reading-profile.service.ts new file mode 100644 index 000000000..9013d05e7 --- /dev/null +++ b/UI/Web/src/app/_services/reading-profile.service.ts @@ -0,0 +1,30 @@ +import { Injectable } from '@angular/core'; +import {HttpClient} from "@angular/common/http"; +import {environment} from "../../environments/environment"; +import {ReadingProfile} from "../_models/preferences/reading-profiles"; + +@Injectable({ + providedIn: 'root' +}) +export class ReadingProfileService { + + baseUrl = environment.apiUrl; + + constructor(private httpClient: HttpClient) { } + + getForSeries(seriesId: number) { + return this.httpClient.get(this.baseUrl + "ReadingProfile/"+seriesId); + } + + updateProfile(profile: ReadingProfile, seriesId?: number) { + if (seriesId) { + return this.httpClient.post(this.baseUrl + "ReadingProfile?seriesCtx="+seriesId, profile); + } + return this.httpClient.post(this.baseUrl + "ReadingProfile", profile); + } + + updateImplicit(profile: ReadingProfile, seriesId: number) { + return this.httpClient.post(this.baseUrl + "ReadingProfile/series?seriesId="+seriesId, profile); + } + +} diff --git a/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts b/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts index ac62e2038..d4a7f36b0 100644 --- a/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts +++ b/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts @@ -9,12 +9,12 @@ import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; import {allEncodeFormats} from '../_models/encode-format'; import {translate, TranslocoDirective, TranslocoService} from "@jsverse/transloco"; import {allCoverImageSizes, CoverImageSize} from '../_models/cover-image-size'; -import {pageLayoutModes} from "../../_models/preferences/preferences"; import {SettingItemComponent} from "../../settings/_components/setting-item/setting-item.component"; import {EncodeFormatPipe} from "../../_pipes/encode-format.pipe"; import {CoverImageSizePipe} from "../../_pipes/cover-image-size.pipe"; import {ConfirmService} from "../../shared/confirm.service"; import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; +import {pageLayoutModes} from "../../_models/preferences/reading-profiles"; @Component({ selector: 'app-manage-media-settings', diff --git a/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html b/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html index cc61b8e5c..99191a5e1 100644 --- a/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html +++ b/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html @@ -60,6 +60,7 @@ {{t('settings-header')}} - -
-
-
-

- -

-
-
- -
-
-
- - +@if (readingProfile !== null) { + + + +
+
+

+ +

+
+
+ +
+
+
+ + +
-
-
- - +
+ + -
+
-
- - +
+ + 1x 2.5x -
+
-
- - +
+ + -
+
-
- +
+ +
-
- + +
+
-
+
+

+ +

+
+
+ +
+ + +
+
+ + {{t('writing-style-tooltip')}} + + -
-

- -

-
-
- -
- - -
-
- - {{t('writing-style-tooltip')}} - - - -
-
- - {{t('tap-to-paginate-tooltip')}} -
+
+ + {{t('tap-to-paginate-tooltip')}} + -
- - +
+ + +
-
-
- - {{t('immersive-mode-tooltip')}} -
-
-
-

- -

-
-
- -
- - - -
- +
+

+ +

+
+
+ +
+ + + +
+ +
-
-
- - +
+ +
+ +
+ + + +} diff --git a/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.ts b/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.ts index e28d44bbf..f3a47774d 100644 --- a/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.ts +++ b/UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.ts @@ -5,7 +5,7 @@ import { Component, DestroyRef, EventEmitter, inject, - Inject, + Inject, Input, OnInit, Output } from '@angular/core'; @@ -27,6 +27,9 @@ import { BookPaperTheme } from '../../_models/book-paper-theme'; import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; import { NgbAccordionDirective, NgbAccordionItem, NgbAccordionHeader, NgbAccordionToggle, NgbAccordionButton, NgbCollapse, NgbAccordionCollapse, NgbAccordionBody, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; import {TranslocoDirective} from "@jsverse/transloco"; +import {ReadingProfileService} from "../../../_services/reading-profile.service"; +import {ReadingProfile} from "../../../_models/preferences/reading-profiles"; +import {debounceTime, distinctUntilChanged, tap} from "rxjs/operators"; /** * Used for book reader. Do not use for other components @@ -89,9 +92,10 @@ const mobileBreakpointMarginOverride = 700; templateUrl: './reader-settings.component.html', styleUrls: ['./reader-settings.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, - imports: [ReactiveFormsModule, NgbAccordionDirective, NgbAccordionItem, NgbAccordionHeader, NgbAccordionToggle, NgbAccordionButton, NgbCollapse, NgbAccordionCollapse, NgbAccordionBody, NgFor, NgbTooltip, NgTemplateOutlet, NgIf, NgClass, NgStyle, TitleCasePipe, TranslocoDirective] + imports: [ReactiveFormsModule, NgbAccordionDirective, NgbAccordionItem, NgbAccordionHeader, NgbAccordionButton, NgbAccordionCollapse, NgbAccordionBody, NgFor, NgbTooltip, NgTemplateOutlet, NgIf, NgClass, NgStyle, TitleCasePipe, TranslocoDirective] }) export class ReaderSettingsComponent implements OnInit { + @Input({required:true}) seriesId!: number; /** * Outputs when clickToPaginate is changed */ @@ -125,6 +129,8 @@ export class ReaderSettingsComponent implements OnInit { */ @Output() immersiveMode: EventEmitter = new EventEmitter(); + readingProfile: ReadingProfile | null = null; + user!: User; /** * List of all font families user can select from @@ -170,7 +176,7 @@ export class ReaderSettingsComponent implements OnInit { constructor(private bookService: BookService, private accountService: AccountService, @Inject(DOCUMENT) private document: Document, private themeService: ThemeService, - private readonly cdRef: ChangeDetectorRef) {} + private readonly cdRef: ChangeDetectorRef, private readingProfileService: ReadingProfileService) {} ngOnInit(): void { @@ -178,124 +184,146 @@ export class ReaderSettingsComponent implements OnInit { this.fontOptions = this.fontFamilies.map(f => f.title); this.cdRef.markForCheck(); + this.readingProfileService.getForSeries(this.seriesId).subscribe(profile => { + this.readingProfile = profile; + + if (this.readingProfile.bookReaderFontFamily === undefined) { + this.readingProfile.bookReaderFontFamily = 'default'; + } + if (this.readingProfile.bookReaderFontSize === undefined || this.readingProfile.bookReaderFontSize < 50) { + this.readingProfile.bookReaderFontSize = 100; + } + if (this.readingProfile.bookReaderLineSpacing === undefined || this.readingProfile.bookReaderLineSpacing < 100) { + this.readingProfile.bookReaderLineSpacing = 100; + } + if (this.readingProfile.bookReaderMargin === undefined) { + this.readingProfile.bookReaderMargin = 0; + } + if (this.readingProfile.bookReaderReadingDirection === undefined) { + this.readingProfile.bookReaderReadingDirection = ReadingDirection.LeftToRight; + } + if (this.readingProfile.bookReaderWritingStyle === undefined) { + this.readingProfile.bookReaderWritingStyle = WritingStyle.Horizontal; + } + this.readingDirectionModel = this.readingProfile.bookReaderReadingDirection; + this.writingStyleModel = this.readingProfile.bookReaderWritingStyle; + + this.setupSettings(); + + this.setTheme(this.readingProfile.bookReaderThemeName || this.themeService.defaultBookTheme); + this.cdRef.markForCheck(); + + // Emit first time so book reader gets the setting + this.readingDirection.emit(this.readingDirectionModel); + this.bookReaderWritingStyle.emit(this.writingStyleModel); + this.clickToPaginateChanged.emit(this.readingProfile.bookReaderTapToPaginate); + this.layoutModeUpdate.emit(this.readingProfile.bookReaderLayoutMode); + this.immersiveMode.emit(this.readingProfile.bookReaderImmersiveMode); + + this.resetSettings(); + }) + this.accountService.currentUser$.pipe(take(1)).subscribe(user => { if (user) { this.user = user; - - if (this.user.preferences.bookReaderFontFamily === undefined) { - this.user.preferences.bookReaderFontFamily = 'default'; - } - if (this.user.preferences.bookReaderFontSize === undefined || this.user.preferences.bookReaderFontSize < 50) { - this.user.preferences.bookReaderFontSize = 100; - } - if (this.user.preferences.bookReaderLineSpacing === undefined || this.user.preferences.bookReaderLineSpacing < 100) { - this.user.preferences.bookReaderLineSpacing = 100; - } - if (this.user.preferences.bookReaderMargin === undefined) { - this.user.preferences.bookReaderMargin = 0; - } - if (this.user.preferences.bookReaderReadingDirection === undefined) { - this.user.preferences.bookReaderReadingDirection = ReadingDirection.LeftToRight; - } - if (this.user.preferences.bookReaderWritingStyle === undefined) { - this.user.preferences.bookReaderWritingStyle = WritingStyle.Horizontal; - } - this.readingDirectionModel = this.user.preferences.bookReaderReadingDirection; - this.writingStyleModel = this.user.preferences.bookReaderWritingStyle; - - - - this.settingsForm.addControl('bookReaderFontFamily', new FormControl(this.user.preferences.bookReaderFontFamily, [])); - this.settingsForm.get('bookReaderFontFamily')!.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(fontName => { - const familyName = this.fontFamilies.filter(f => f.title === fontName)[0].family; - if (familyName === 'default') { - this.pageStyles['font-family'] = 'inherit'; - } else { - this.pageStyles['font-family'] = "'" + familyName + "'"; - } - - this.styleUpdate.emit(this.pageStyles); - }); - - this.settingsForm.addControl('bookReaderFontSize', new FormControl(this.user.preferences.bookReaderFontSize, [])); - this.settingsForm.get('bookReaderFontSize')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => { - this.pageStyles['font-size'] = value + '%'; - this.styleUpdate.emit(this.pageStyles); - }); - - this.settingsForm.addControl('bookReaderTapToPaginate', new FormControl(this.user.preferences.bookReaderTapToPaginate, [])); - this.settingsForm.get('bookReaderTapToPaginate')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => { - this.clickToPaginateChanged.emit(value); - }); - - this.settingsForm.addControl('bookReaderLineSpacing', new FormControl(this.user.preferences.bookReaderLineSpacing, [])); - this.settingsForm.get('bookReaderLineSpacing')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => { - this.pageStyles['line-height'] = value + '%'; - this.styleUpdate.emit(this.pageStyles); - }); - - this.settingsForm.addControl('bookReaderMargin', new FormControl(this.user.preferences.bookReaderMargin, [])); - this.settingsForm.get('bookReaderMargin')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => { - this.pageStyles['margin-left'] = value + 'vw'; - this.pageStyles['margin-right'] = value + 'vw'; - this.styleUpdate.emit(this.pageStyles); - }); - - - - this.settingsForm.addControl('layoutMode', new FormControl(this.user.preferences.bookReaderLayoutMode || BookPageLayoutMode.Default, [])); - this.settingsForm.get('layoutMode')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((layoutMode: BookPageLayoutMode) => { - this.layoutModeUpdate.emit(layoutMode); - }); - - this.settingsForm.addControl('bookReaderImmersiveMode', new FormControl(this.user.preferences.bookReaderImmersiveMode, [])); - this.settingsForm.get('bookReaderImmersiveMode')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((immersiveMode: boolean) => { - if (immersiveMode) { - this.settingsForm.get('bookReaderTapToPaginate')?.setValue(true); - } - this.immersiveMode.emit(immersiveMode); - }); - - - this.setTheme(this.user.preferences.bookReaderThemeName || this.themeService.defaultBookTheme); - this.cdRef.markForCheck(); - - // Emit first time so book reader gets the setting - this.readingDirection.emit(this.readingDirectionModel); - this.bookReaderWritingStyle.emit(this.writingStyleModel); - this.clickToPaginateChanged.emit(this.user.preferences.bookReaderTapToPaginate); - this.layoutModeUpdate.emit(this.user.preferences.bookReaderLayoutMode); - this.immersiveMode.emit(this.user.preferences.bookReaderImmersiveMode); - - this.resetSettings(); } else { this.resetSettings(); } - - }); } + setupSettings() { + if (!this.readingProfile) return; + + this.settingsForm.addControl('bookReaderFontFamily', new FormControl(this.readingProfile.bookReaderFontFamily, [])); + this.settingsForm.get('bookReaderFontFamily')!.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(fontName => { + const familyName = this.fontFamilies.filter(f => f.title === fontName)[0].family; + if (familyName === 'default') { + this.pageStyles['font-family'] = 'inherit'; + } else { + this.pageStyles['font-family'] = "'" + familyName + "'"; + } + + this.styleUpdate.emit(this.pageStyles); + }); + + this.settingsForm.addControl('bookReaderFontSize', new FormControl(this.readingProfile.bookReaderFontSize, [])); + this.settingsForm.get('bookReaderFontSize')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => { + this.pageStyles['font-size'] = value + '%'; + this.styleUpdate.emit(this.pageStyles); + }); + + this.settingsForm.addControl('bookReaderTapToPaginate', new FormControl(this.readingProfile.bookReaderTapToPaginate, [])); + this.settingsForm.get('bookReaderTapToPaginate')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => { + this.clickToPaginateChanged.emit(value); + }); + + this.settingsForm.addControl('bookReaderLineSpacing', new FormControl(this.readingProfile.bookReaderLineSpacing, [])); + this.settingsForm.get('bookReaderLineSpacing')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => { + this.pageStyles['line-height'] = value + '%'; + this.styleUpdate.emit(this.pageStyles); + }); + + this.settingsForm.addControl('bookReaderMargin', new FormControl(this.readingProfile.bookReaderMargin, [])); + this.settingsForm.get('bookReaderMargin')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => { + this.pageStyles['margin-left'] = value + 'vw'; + this.pageStyles['margin-right'] = value + 'vw'; + this.styleUpdate.emit(this.pageStyles); + }); + + this.settingsForm.addControl('layoutMode', new FormControl(this.readingProfile.bookReaderLayoutMode || BookPageLayoutMode.Default, [])); + this.settingsForm.get('layoutMode')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((layoutMode: BookPageLayoutMode) => { + this.layoutModeUpdate.emit(layoutMode); + }); + + this.settingsForm.addControl('bookReaderImmersiveMode', new FormControl(this.readingProfile.bookReaderImmersiveMode, [])); + this.settingsForm.get('bookReaderImmersiveMode')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((immersiveMode: boolean) => { + if (immersiveMode) { + this.settingsForm.get('bookReaderTapToPaginate')?.setValue(true); + } + this.immersiveMode.emit(immersiveMode); + }); + + // Update implicit reading profile while changing settings + this.settingsForm.valueChanges.pipe( + debounceTime(300), + distinctUntilChanged(), + takeUntilDestroyed(this.destroyRef), + tap(_ => this.updateImplicit()) + ).subscribe(); + } + resetSettings() { + if (!this.readingProfile) return; + if (this.user) { - this.setPageStyles(this.user.preferences.bookReaderFontFamily, this.user.preferences.bookReaderFontSize + '%', this.user.preferences.bookReaderMargin + 'vw', this.user.preferences.bookReaderLineSpacing + '%'); + this.setPageStyles(this.readingProfile.bookReaderFontFamily, this.readingProfile.bookReaderFontSize + '%', this.readingProfile.bookReaderMargin + 'vw', this.readingProfile.bookReaderLineSpacing + '%'); } else { this.setPageStyles(); } - this.settingsForm.get('bookReaderFontFamily')?.setValue(this.user.preferences.bookReaderFontFamily); - this.settingsForm.get('bookReaderFontSize')?.setValue(this.user.preferences.bookReaderFontSize); - this.settingsForm.get('bookReaderLineSpacing')?.setValue(this.user.preferences.bookReaderLineSpacing); - this.settingsForm.get('bookReaderMargin')?.setValue(this.user.preferences.bookReaderMargin); - this.settingsForm.get('bookReaderReadingDirection')?.setValue(this.user.preferences.bookReaderReadingDirection); - this.settingsForm.get('bookReaderTapToPaginate')?.setValue(this.user.preferences.bookReaderTapToPaginate); - this.settingsForm.get('bookReaderLayoutMode')?.setValue(this.user.preferences.bookReaderLayoutMode); - this.settingsForm.get('bookReaderImmersiveMode')?.setValue(this.user.preferences.bookReaderImmersiveMode); - this.settingsForm.get('bookReaderWritingStyle')?.setValue(this.user.preferences.bookReaderWritingStyle); + this.settingsForm.get('bookReaderFontFamily')?.setValue(this.readingProfile.bookReaderFontFamily); + this.settingsForm.get('bookReaderFontSize')?.setValue(this.readingProfile.bookReaderFontSize); + this.settingsForm.get('bookReaderLineSpacing')?.setValue(this.readingProfile.bookReaderLineSpacing); + this.settingsForm.get('bookReaderMargin')?.setValue(this.readingProfile.bookReaderMargin); + this.settingsForm.get('bookReaderReadingDirection')?.setValue(this.readingProfile.bookReaderReadingDirection); + this.settingsForm.get('bookReaderTapToPaginate')?.setValue(this.readingProfile.bookReaderTapToPaginate); + this.settingsForm.get('bookReaderLayoutMode')?.setValue(this.readingProfile.bookReaderLayoutMode); + this.settingsForm.get('bookReaderImmersiveMode')?.setValue(this.readingProfile.bookReaderImmersiveMode); + this.settingsForm.get('bookReaderWritingStyle')?.setValue(this.readingProfile.bookReaderWritingStyle); + this.cdRef.detectChanges(); this.styleUpdate.emit(this.pageStyles); } + updateImplicit() { + this.readingProfileService.updateImplicit(this.packReadingProfile(), this.seriesId).subscribe({ + error: err => { + console.error(err); + } + }) + } + /** * Internal method to be used by resetSettings. Pass items in with quantifiers */ @@ -323,6 +351,7 @@ export class ReaderSettingsComponent implements OnInit { this.activeTheme = theme; this.cdRef.markForCheck(); this.colorThemeUpdate.emit(theme); + this.updateImplicit(); } toggleReadingDirection() { @@ -334,6 +363,7 @@ export class ReaderSettingsComponent implements OnInit { this.cdRef.markForCheck(); this.readingDirection.emit(this.readingDirectionModel); + this.updateImplicit(); } toggleWritingStyle() { @@ -345,6 +375,7 @@ export class ReaderSettingsComponent implements OnInit { this.cdRef.markForCheck(); this.bookReaderWritingStyle.emit(this.writingStyleModel); + this.updateImplicit(); } toggleFullscreen() { @@ -352,4 +383,29 @@ export class ReaderSettingsComponent implements OnInit { this.cdRef.markForCheck(); this.fullscreen.emit(); } + + savePref() { + this.readingProfileService.updateProfile(this.packReadingProfile(), this.seriesId).subscribe() + } + + private packReadingProfile(): ReadingProfile { + const modelSettings = this.settingsForm.getRawValue(); + const data = {...this.readingProfile!}; + data.bookReaderFontFamily = modelSettings.bookReaderFontFamily; + data.bookReaderFontSize = modelSettings.bookReaderFontSize + data.bookReaderLineSpacing = modelSettings.bookReaderLineSpacing; + data.bookReaderMargin = modelSettings.bookReaderMargin; + data.bookReaderTapToPaginate = modelSettings.bookReaderTapToPaginate; + data.bookReaderLayoutMode = modelSettings.layoutMode; + data.bookReaderImmersiveMode = modelSettings.bookReaderImmersiveMode; + + data.bookReaderReadingDirection = this.readingDirectionModel; + data.bookReaderWritingStyle = this.writingStyleModel; + if (this.activeTheme) { + data.bookReaderThemeName = this.activeTheme.name; + } + + return data; + } + } diff --git a/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.html b/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.html index 195b66b2b..30ed6c507 100644 --- a/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.html +++ b/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.html @@ -53,92 +53,93 @@
- - @if (readerMode !== ReaderMode.Webtoon) { -
- - -
- - -
-
- @if (showClickOverlay) { -
- -
- } + @if (readingProfile !== null) { + @if (readerMode !== ReaderMode.Webtoon) { +
+ +
-
+
+ @if (showClickOverlay) { +
+ +
+ } +
+
- @if (showClickOverlay) { -
- -
- } + @if (showClickOverlay) { +
+ +
+ } +
-
-
- - +
+ + - - + + - - + + - - -
- } @else { - @if (!isLoading && !inSetup) { -
- - + +
+ } @else { + @if (!isLoading && !inSetup) { +
+ + +
+ } } - } + }
@if (menuOpen) { 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 595ae6079..03069bd6a 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 @@ -40,7 +40,6 @@ import {Breakpoint, KEY_CODES, UtilityService} from 'src/app/shared/_services/ut import {LibraryType} from 'src/app/_models/library/library'; import {MangaFormat} from 'src/app/_models/manga-format'; import {PageSplitOption} from 'src/app/_models/preferences/page-split-option'; -import {layoutModes, pageSplitOptions} from 'src/app/_models/preferences/preferences'; import {ReaderMode} from 'src/app/_models/preferences/reader-mode'; import {ReadingDirection} from 'src/app/_models/preferences/reading-direction'; import {ScalingOption} from 'src/app/_models/preferences/scaling-option'; @@ -70,6 +69,8 @@ import {LoadingComponent} from '../../../shared/loading/loading.component'; import {translate, TranslocoDirective} from "@jsverse/transloco"; import {shareReplay} from "rxjs/operators"; import {DblClickDirective} from "../../../_directives/dbl-click.directive"; +import {layoutModes, pageSplitOptions, ReadingProfile} from "../../../_models/preferences/reading-profiles"; +import {ReadingProfileService} from "../../../_services/reading-profile.service"; const PREFETCH_PAGES = 10; @@ -150,6 +151,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { private readonly modalService = inject(NgbModal); private readonly cdRef = inject(ChangeDetectorRef); private readonly toastr = inject(ToastrService); + private readonly readingProfileService = inject(ReadingProfileService); public readonly readerService = inject(ReaderService); public readonly utilityService = inject(UtilityService); public readonly mangaReaderService = inject(MangaReaderService); @@ -194,6 +196,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { totalSeriesPages = 0; totalSeriesPagesRead = 0; user!: User; + readingProfile: ReadingProfile | null = null; generalSettingsForm!: FormGroup; readingDirection = ReadingDirection.LeftToRight; @@ -496,34 +499,54 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { this.continuousChaptersStack.push(this.chapterId); - this.accountService.currentUser$.pipe(take(1)).subscribe(user => { + forkJoin([ + this.accountService.currentUser$.pipe(take(1)), + this.readingProfileService.getForSeries(this.seriesId)]) + .subscribe(([user, profile]) => { if (!user) { this.router.navigateByUrl('/login'); return; } + this.readingProfile = profile; + this.user = user; this.hasBookmarkRights = this.accountService.hasBookmarkRole(user) || this.accountService.hasAdminRole(user); - this.readingDirection = this.user.preferences.readingDirection; - this.scalingOption = this.user.preferences.scalingOption; - this.pageSplitOption = this.user.preferences.pageSplitOption; - this.autoCloseMenu = this.user.preferences.autoCloseMenu; - this.readerMode = this.user.preferences.readerMode; - this.layoutMode = this.user.preferences.layoutMode || LayoutMode.Single; - this.backgroundColor = this.user.preferences.backgroundColor || '#000000'; + this.readingDirection = this.readingProfile.readingDirection; + this.scalingOption = this.readingProfile.scalingOption; + this.pageSplitOption = this.readingProfile.pageSplitOption; + this.autoCloseMenu = this.readingProfile.autoCloseMenu; + this.readerMode = this.readingProfile.readerMode; + this.layoutMode = this.readingProfile.layoutMode || LayoutMode.Single; + this.backgroundColor = this.readingProfile.backgroundColor || '#000000'; this.readerService.setOverrideStyles(this.backgroundColor); this.generalSettingsForm = this.formBuilder.nonNullable.group({ autoCloseMenu: new FormControl(this.autoCloseMenu), pageSplitOption: new FormControl(this.pageSplitOption), fittingOption: new FormControl(this.mangaReaderService.translateScalingOption(this.scalingOption)), - widthSlider: new FormControl('none'), + widthSlider: new FormControl(this.readingProfile.widthOverride ?? 'none'), layoutMode: new FormControl(this.layoutMode), darkness: new FormControl(100), - emulateBook: new FormControl(this.user.preferences.emulateBook), - swipeToPaginate: new FormControl(this.user.preferences.swipeToPaginate) + emulateBook: new FormControl(this.readingProfile.emulateBook), + swipeToPaginate: new FormControl(this.readingProfile.swipeToPaginate) }); + // Update implicit reading profile while changing settings + this.generalSettingsForm.valueChanges.pipe( + debounceTime(300), + distinctUntilChanged(), + takeUntilDestroyed(this.destroyRef), + tap(_ => { + this.readingProfileService.updateImplicit(this.packReadingProfile(), this.seriesId).subscribe({ + error: err => { + console.error(err); + } + }) + }) + ).subscribe(); + + this.readerModeSubject.next(this.readerMode); this.pagingDirectionSubject.next(this.pagingDirection); @@ -562,7 +585,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { this.layoutMode = parseInt(val, 10); if (this.layoutMode === LayoutMode.Single) { - this.generalSettingsForm.get('pageSplitOption')?.setValue(this.user.preferences.pageSplitOption); + this.generalSettingsForm.get('pageSplitOption')?.setValue(this.readingProfile!.pageSplitOption); this.generalSettingsForm.get('pageSplitOption')?.enable(); this.generalSettingsForm.get('widthSlider')?.enable(); this.generalSettingsForm.get('fittingOption')?.enable(); @@ -604,9 +627,9 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { this.toastr.info(translate('manga-reader.first-time-reading-manga')); } }); - }); - this.init(); + this.init(); + }); } ngAfterViewInit() { @@ -780,7 +803,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { switchToWebtoonReaderIfPagesLikelyWebtoon() { if (this.readerMode === ReaderMode.Webtoon) return; - if (!this.user.preferences.allowAutomaticWebtoonReaderDetection) return; + if (!this.readingProfile!.allowAutomaticWebtoonReaderDetection) return; if (this.mangaReaderService.shouldBeWebtoonMode()) { this.readerMode = ReaderMode.Webtoon; @@ -1460,7 +1483,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { this.readingDirection = ReadingDirection.LeftToRight; } - if (this.menuOpen && this.user.preferences.showScreenHints) { + if (this.menuOpen && this.readingProfile!.showScreenHints) { this.showClickOverlay = true; this.showClickOverlaySubject.next(true); setTimeout(() => { @@ -1731,28 +1754,9 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { // menu only code savePref() { - const modelSettings = this.generalSettingsForm.getRawValue(); - // Get latest preferences from user, overwrite with what we manage in this UI, then save - this.accountService.currentUser$.pipe(take(1)).subscribe(user => { - if (!user) return; - const data = {...user.preferences}; - data.layoutMode = parseInt(modelSettings.layoutMode, 10); - data.readerMode = this.readerMode; - data.autoCloseMenu = this.autoCloseMenu; - data.readingDirection = this.readingDirection; - data.emulateBook = modelSettings.emulateBook; - data.swipeToPaginate = modelSettings.swipeToPaginate; - data.pageSplitOption = parseInt(modelSettings.pageSplitOption, 10); - data.locale = data.locale || 'en'; - - this.accountService.updatePreferences(data).subscribe(updatedPrefs => { - this.toastr.success(translate('manga-reader.user-preferences-updated')); - if (this.user) { - this.user.preferences = updatedPrefs; - this.cdRef.markForCheck(); - } - }) - }); + this.readingProfileService.updateProfile(this.packReadingProfile(), this.seriesId).subscribe(_ => { + this.toastr.success(translate('manga-reader.user-preferences-updated')); + }) } translatePrefOptions(o: {text: string, value: any}) { @@ -1761,4 +1765,19 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { return d; } + private packReadingProfile(): ReadingProfile { + const modelSettings = this.generalSettingsForm.getRawValue(); + const data = {...this.readingProfile!}; + data.layoutMode = parseInt(modelSettings.layoutMode, 10); + data.readerMode = this.readerMode; + data.autoCloseMenu = this.autoCloseMenu; + data.readingDirection = this.readingDirection; + data.emulateBook = modelSettings.emulateBook; + data.swipeToPaginate = modelSettings.swipeToPaginate; + data.pageSplitOption = parseInt(modelSettings.pageSplitOption, 10); + // TODO: Check if this saves correctly! + data.widthOverride = modelSettings.widthSlider === 'none' ? null : modelSettings.widthOverride; + return data; + } + } diff --git a/UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.ts b/UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.ts index b6e99b5ca..9add32ff3 100644 --- a/UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.ts +++ b/UI/Web/src/app/pdf-reader/_components/pdf-reader/pdf-reader.component.ts @@ -14,7 +14,7 @@ import { import {ActivatedRoute, Router} from '@angular/router'; import {NgxExtendedPdfViewerModule, PageViewModeType, ProgressBarEvent, ScrollModeType} from 'ngx-extended-pdf-viewer'; import {ToastrService} from 'ngx-toastr'; -import {take} from 'rxjs'; +import {forkJoin, take} from 'rxjs'; import {BookService} from 'src/app/book-reader/_services/book.service'; import {Breakpoint, KEY_CODES, UtilityService} from 'src/app/shared/_services/utility.service'; import {Chapter} from 'src/app/_models/chapter'; @@ -34,6 +34,8 @@ import {PdfSpreadMode} from "../../../_models/preferences/pdf-spread-mode"; import {SpreadType} from "ngx-extended-pdf-viewer/lib/options/spread-type"; import {PdfScrollModeTypePipe} from "../../_pipe/pdf-scroll-mode.pipe"; import {PdfSpreadTypePipe} from "../../_pipe/pdf-spread-mode.pipe"; +import {ReadingProfileService} from "../../../_services/reading-profile.service"; +import {ReadingProfile} from "../../../_models/preferences/reading-profiles"; @Component({ selector: 'app-pdf-reader', @@ -54,6 +56,7 @@ export class PdfReaderComponent implements OnInit, OnDestroy { private readonly themeService = inject(ThemeService); private readonly cdRef = inject(ChangeDetectorRef); public readonly accountService = inject(AccountService); + private readonly readingProfileService = inject(ReadingProfileService); public readonly readerService = inject(ReaderService); public readonly utilityService = inject(UtilityService); public readonly destroyRef = inject(DestroyRef); @@ -69,6 +72,7 @@ export class PdfReaderComponent implements OnInit, OnDestroy { chapterId!: number; chapter!: Chapter; user!: User; + readingProfile!: ReadingProfile; /** * Reading List id. Defaults to -1. @@ -171,9 +175,13 @@ export class PdfReaderComponent implements OnInit, OnDestroy { this.cdRef.markForCheck(); - this.accountService.currentUser$.pipe(take(1)).subscribe(user => { + forkJoin([ + this.accountService.currentUser$.pipe(take(1)), + this.readingProfileService.getForSeries(this.seriesId) + ]).subscribe(([user, profile]) => { if (user) { this.user = user; + this.readingProfile = profile; this.init(); } }); @@ -237,9 +245,9 @@ export class PdfReaderComponent implements OnInit, OnDestroy { init() { this.pageLayoutMode = this.convertPdfLayoutMode(PdfLayoutMode.Multiple); - this.scrollMode = this.convertPdfScrollMode(this.user.preferences.pdfScrollMode || PdfScrollMode.Vertical); - this.spreadMode = this.convertPdfSpreadMode(this.user.preferences.pdfSpreadMode || PdfSpreadMode.None); - this.theme = this.convertPdfTheme(this.user.preferences.pdfTheme || PdfTheme.Dark); + this.scrollMode = this.convertPdfScrollMode(this.readingProfile.pdfScrollMode || PdfScrollMode.Vertical); + this.spreadMode = this.convertPdfSpreadMode(this.readingProfile.pdfSpreadMode || PdfSpreadMode.None); + this.theme = this.convertPdfTheme(this.readingProfile.pdfTheme || PdfTheme.Dark); this.backgroundColor = this.themeMap[this.theme].background; this.fontColor = this.themeMap[this.theme].font; // TODO: Move this to an observable or something diff --git a/UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.html b/UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.html index 05cf7572e..8dd181536 100644 --- a/UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.html +++ b/UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.html @@ -201,6 +201,7 @@
+
diff --git a/UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.ts b/UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.ts index a9313a0f2..bae90e7fe 100644 --- a/UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.ts +++ b/UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.ts @@ -1,17 +1,7 @@ import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnInit} from '@angular/core'; import {translate, TranslocoDirective} from "@jsverse/transloco"; import { - bookLayoutModes, - bookWritingStyles, - layoutModes, - pageSplitOptions, - pdfScrollModes, - pdfSpreadModes, - pdfThemes, - Preferences, - readingDirections, - readingModes, - scalingOptions + Preferences } from "../../_models/preferences/preferences"; import {AccountService} from "../../_services/account.service"; import {BookService} from "../../book-reader/_services/book.service"; @@ -44,6 +34,13 @@ import {PdfThemePipe} from "../../_pipes/pdf-theme.pipe"; import {PdfScrollModePipe} from "../../_pipes/pdf-scroll-mode.pipe"; import {LicenseService} from "../../_services/license.service"; import {ColorPickerDirective} from "ngx-color-picker"; +import { + bookLayoutModes, bookWritingStyles, + layoutModes, pageSplitOptions, + pdfScrollModes, + pdfSpreadModes, + pdfThemes, readingDirections, readingModes, scalingOptions +} from "../../_models/preferences/reading-profiles"; @Component({ selector: 'app-manga-user-preferences', @@ -140,7 +137,7 @@ export class ManageUserPreferencesComponent implements OnInit { this.user = results.user; this.user.preferences = results.pref; - if (this.fontFamilies.indexOf(this.user.preferences.bookReaderFontFamily) < 0) { + /*if (this.fontFamilies.indexOf(this.user.preferences.bookReaderFontFamily) < 0) { this.user.preferences.bookReaderFontFamily = 'default'; } @@ -169,7 +166,7 @@ export class ManageUserPreferencesComponent implements OnInit { this.settingsForm.addControl('pdfTheme', new FormControl(this.user?.preferences.pdfTheme || PdfTheme.Dark, [])); this.settingsForm.addControl('pdfScrollMode', new FormControl(this.user?.preferences.pdfScrollMode || PdfScrollMode.Vertical, [])); - this.settingsForm.addControl('pdfSpreadMode', new FormControl(this.user?.preferences.pdfSpreadMode || PdfSpreadMode.None, [])); + this.settingsForm.addControl('pdfSpreadMode', new FormControl(this.user?.preferences.pdfSpreadMode || PdfSpreadMode.None, []));*/ this.settingsForm.addControl('theme', new FormControl(this.user.preferences.theme, [])); this.settingsForm.addControl('globalPageLayoutMode', new FormControl(this.user.preferences.globalPageLayoutMode, [])); @@ -217,7 +214,7 @@ export class ManageUserPreferencesComponent implements OnInit { reset() { if (!this.user) return; - this.settingsForm.get('readingDirection')?.setValue(this.user.preferences.readingDirection, {onlySelf: true, emitEvent: false}); + /*this.settingsForm.get('readingDirection')?.setValue(this.user.preferences.readingDirection, {onlySelf: true, emitEvent: false}); this.settingsForm.get('scalingOption')?.setValue(this.user.preferences.scalingOption, {onlySelf: true, emitEvent: false}); this.settingsForm.get('pageSplitOption')?.setValue(this.user.preferences.pageSplitOption, {onlySelf: true, emitEvent: false}); this.settingsForm.get('autoCloseMenu')?.setValue(this.user.preferences.autoCloseMenu, {onlySelf: true, emitEvent: false}); @@ -242,7 +239,7 @@ export class ManageUserPreferencesComponent implements OnInit { this.settingsForm.get('pdfTheme')?.setValue(this.user?.preferences.pdfTheme || PdfTheme.Dark, {onlySelf: true, emitEvent: false}); this.settingsForm.get('pdfScrollMode')?.setValue(this.user?.preferences.pdfScrollMode || PdfScrollMode.Vertical, {onlySelf: true, emitEvent: false}); - this.settingsForm.get('pdfSpreadMode')?.setValue(this.user?.preferences.pdfSpreadMode || PdfSpreadMode.None, {onlySelf: true, emitEvent: false}); + this.settingsForm.get('pdfSpreadMode')?.setValue(this.user?.preferences.pdfSpreadMode || PdfSpreadMode.None, {onlySelf: true, emitEvent: false});*/ this.settingsForm.get('theme')?.setValue(this.user.preferences.theme, {onlySelf: true, emitEvent: false}); this.settingsForm.get('globalPageLayoutMode')?.setValue(this.user.preferences.globalPageLayoutMode, {onlySelf: true, emitEvent: false}); @@ -260,7 +257,7 @@ export class ManageUserPreferencesComponent implements OnInit { packSettings(): Preferences { const modelSettings = this.settingsForm.value; return { - readingDirection: parseInt(modelSettings.readingDirection, 10), + /*readingDirection: parseInt(modelSettings.readingDirection, 10), scalingOption: parseInt(modelSettings.scalingOption, 10), pageSplitOption: parseInt(modelSettings.pageSplitOption, 10), autoCloseMenu: modelSettings.autoCloseMenu, @@ -277,21 +274,21 @@ export class ManageUserPreferencesComponent implements OnInit { bookReaderReadingDirection: parseInt(modelSettings.bookReaderReadingDirection, 10), bookReaderWritingStyle: parseInt(modelSettings.bookReaderWritingStyle, 10), bookReaderLayoutMode: parseInt(modelSettings.bookReaderLayoutMode, 10), - bookReaderThemeName: modelSettings.bookReaderThemeName, + bookReaderThemeName: modelSettings.bookReaderThemeName,*/ theme: modelSettings.theme, - bookReaderImmersiveMode: modelSettings.bookReaderImmersiveMode, + //bookReaderImmersiveMode: modelSettings.bookReaderImmersiveMode, globalPageLayoutMode: parseInt(modelSettings.globalPageLayoutMode, 10), blurUnreadSummaries: modelSettings.blurUnreadSummaries, promptForDownloadSize: modelSettings.promptForDownloadSize, noTransitions: modelSettings.noTransitions, - emulateBook: modelSettings.emulateBook, - swipeToPaginate: modelSettings.swipeToPaginate, + //emulateBook: modelSettings.emulateBook, + //swipeToPaginate: modelSettings.swipeToPaginate, collapseSeriesRelationships: modelSettings.collapseSeriesRelationships, shareReviews: modelSettings.shareReviews, locale: modelSettings.locale || 'en', - pdfTheme: parseInt(modelSettings.pdfTheme, 10), - pdfScrollMode: parseInt(modelSettings.pdfScrollMode, 10), - pdfSpreadMode: parseInt(modelSettings.pdfSpreadMode, 10), + //pdfTheme: parseInt(modelSettings.pdfTheme, 10), + //pdfScrollMode: parseInt(modelSettings.pdfScrollMode, 10), + //pdfSpreadMode: parseInt(modelSettings.pdfSpreadMode, 10), aniListScrobblingEnabled: modelSettings.aniListScrobblingEnabled, wantToReadSync: modelSettings.wantToReadSync }; @@ -301,7 +298,7 @@ export class ManageUserPreferencesComponent implements OnInit { this.settingsForm.markAsDirty(); this.settingsForm.markAsTouched(); if (this.user?.preferences) { - this.user.preferences.backgroundColor = color; + //this.user.preferences.backgroundColor = color; } this.settingsForm.get('backgroundColor')?.setValue(color); diff --git a/UI/Web/src/assets/langs/en.json b/UI/Web/src/assets/langs/en.json index 19d4443b6..a943c0a27 100644 --- a/UI/Web/src/assets/langs/en.json +++ b/UI/Web/src/assets/langs/en.json @@ -1181,6 +1181,7 @@ "line-spacing-label": "{{user-preferences.line-height-book-label}}", "margin-label": "{{user-preferences.margin-book-label}}", "reset-to-defaults": "Reset to Defaults", + "save-global": "Save to your reading profile", "reader-settings-title": "Reader Settings", "reading-direction-label": "{{user-preferences.reading-direction-book-label}}", "right-to-left": "Right to Left",