AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactored reader settings to signals.

Browse source
This commit is contained in:
Joseph Milazzo 2025-07-05 11:41:08 -05:00
parent d114949446
commit 5ca7bf1a87
5 changed files with 488 additions and 375 deletions
Download patch file Download diff file Expand all files Collapse all files

555
UI/Web/src/app/_services/epub-reader-settings.service.ts
View file

@ -1,5 +1,5 @@
import {DestroyRef, inject, Injectable} from '@angular/core';
import {BehaviorSubject, distinctUntilChanged, Observable, Subject} from 'rxjs';
import {computed, DestroyRef, effect, inject, Injectable, signal} from '@angular/core';
import {Observable, Subject} from 'rxjs';
import {bookColorThemes, PageStyle} from "../book-reader/_components/reader-settings/reader-settings.component";
import {ReadingDirection} from '../_models/preferences/reading-direction';
import {WritingStyle} from '../_models/preferences/writing-style';
@ -7,7 +7,6 @@ import {BookPageLayoutMode} from "../_models/readers/book-page-layout-mode";
import {FormControl, FormGroup} from "@angular/forms";
import {ReadingProfile, ReadingProfileKind} from "../_models/preferences/reading-profiles";
import {BookService, FontFamily} from "../book-reader/_services/book.service";
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {ThemeService} from './theme.service';
import {ReadingProfileService} from "./reading-profile.service";
import {debounceTime, skip, tap} from "rxjs/operators";
@ -15,6 +14,7 @@ import {BookTheme} from "../_models/preferences/book-theme";
import {DOCUMENT} from "@angular/common";
import {translate} from "@jsverse/transloco";
import {ToastrService} from "ngx-toastr";
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
export interface ReaderSettingUpdate {
setting: 'pageStyle' | 'clickToPaginate' | 'fullscreen' | 'writingStyle' | 'layoutMode' | 'readingDirection' | 'immersiveMode' | 'theme';
@ -33,70 +33,208 @@ export class EpubReaderSettingsService {
private readonly toastr = inject(ToastrService);
private readonly document = inject(DOCUMENT);
private pageStylesSubject = new BehaviorSubject<PageStyle>(this.getDefaultPageStyles());
private readingDirectionSubject = new BehaviorSubject<ReadingDirection>(ReadingDirection.LeftToRight);
private writingStyleSubject = new BehaviorSubject<WritingStyle>(WritingStyle.Horizontal);
// @ts-ignore
private activeThemeSubject = new BehaviorSubject<BookTheme | undefined>(undefined);
private clickToPaginateSubject = new BehaviorSubject<boolean>(false);
private layoutModeSubject = new BehaviorSubject<BookPageLayoutMode>(BookPageLayoutMode.Default);
private immersiveModeSubject = new BehaviorSubject<boolean>(false);
private readingProfileSubject = new BehaviorSubject<ReadingProfile | null>(null);
// Core signals - these will be the single source of truth
private readonly _currentReadingProfile = signal<ReadingProfile | null>(null);
private readonly _parentReadingProfile = signal<ReadingProfile | null>(null);
private readonly _currentSeriesId = signal<number | null>(null);
private readonly _isInitialized = signal<boolean>(false);
// Event subjects for component communication
// Settings signals
private readonly _pageStyles = signal<PageStyle>(this.getDefaultPageStyles()); // Internal property used to capture all the different css properties to render on all elements
private readonly _readingDirection = signal<ReadingDirection>(ReadingDirection.LeftToRight);
private readonly _writingStyle = signal<WritingStyle>(WritingStyle.Horizontal);
private readonly _activeTheme = signal<BookTheme | undefined>(undefined);
private readonly _clickToPaginate = signal<boolean>(false);
private readonly _layoutMode = signal<BookPageLayoutMode>(BookPageLayoutMode.Default);
private readonly _immersiveMode = signal<boolean>(false);
private readonly _isFullscreen = signal<boolean>(false);
// Form will be managed separately but updated from signals
private settingsForm: FormGroup = new FormGroup({});
private fontFamilies: FontFamily[] = this.bookService.getFontFamilies();
private isUpdatingFromForm = false; // Flag to prevent infinite loops
// Event subject for component communication (keep this for now, can be converted to effect later)
private settingUpdateSubject = new Subject<ReaderSettingUpdate>();
// Form and data
private settingsForm: FormGroup = new FormGroup({});
private currentReadingProfile: ReadingProfile | null = null;
private parentReadingProfile: ReadingProfile | null = null;
private currentSeriesId: number | null = null;
private fontFamilies: FontFamily[] = this.bookService.getFontFamilies();
// Public readonly signals
public readonly currentReadingProfile = this._currentReadingProfile.asReadonly();
public readonly parentReadingProfile = this._parentReadingProfile.asReadonly();
public readonly isInitialized = this._isInitialized.asReadonly();
// Public observables
public readonly pageStyles$ = this.pageStylesSubject.asObservable();
public readonly readingDirection$ = this.readingDirectionSubject.asObservable();
public readonly writingStyle$ = this.writingStyleSubject.asObservable();
public readonly activeTheme$ = this.activeThemeSubject.asObservable();
public readonly clickToPaginate$ = this.clickToPaginateSubject.asObservable();
public readonly layoutMode$ = this.layoutModeSubject.asObservable();
public readonly immersiveMode$ = this.immersiveModeSubject.asObservable();
public readonly readingProfile$ = this.readingProfileSubject.asObservable();
// Settings as readonly signals
public readonly pageStyles = this._pageStyles.asReadonly();
public readonly readingDirection = this._readingDirection.asReadonly();
public readonly writingStyle = this._writingStyle.asReadonly();
public readonly activeTheme = this._activeTheme.asReadonly();
public readonly clickToPaginate = this._clickToPaginate.asReadonly();
public readonly layoutMode = this._layoutMode.asReadonly();
public readonly immersiveMode = this._immersiveMode.asReadonly();
public readonly isFullscreen = this._isFullscreen.asReadonly();
// Computed signals for derived state
public readonly canPromoteProfile = computed(() => {
const profile = this._currentReadingProfile();
return profile !== null && profile.kind === ReadingProfileKind.Implicit;
});
public readonly hasParentProfile = computed(() => {
return this._parentReadingProfile() !== null;
});
// Keep observable for now - can be converted to effect later
public readonly settingUpdates$ = this.settingUpdateSubject.asObservable();
constructor() {
// Effect to update form when signals change (only when not updating from form)
effect(() => {
const profile = this._currentReadingProfile();
if (profile && this._isInitialized() && !this.isUpdatingFromForm) {
this.updateFormFromSignals();
}
});
// Effect to emit setting updates when signals change
effect(() => {
if (!this._isInitialized()) return;
this.settingUpdateSubject.next({
setting: 'pageStyle',
object: this._pageStyles()
});
});
effect(() => {
if (!this._isInitialized()) return;
this.settingUpdateSubject.next({
setting: 'clickToPaginate',
object: this._clickToPaginate()
});
});
effect(() => {
if (!this._isInitialized()) return;
this.settingUpdateSubject.next({
setting: 'layoutMode',
object: this._layoutMode()
});
});
effect(() => {
if (!this._isInitialized()) return;
this.settingUpdateSubject.next({
setting: 'readingDirection',
object: this._readingDirection()
});
});
effect(() => {
if (!this._isInitialized()) return;
this.settingUpdateSubject.next({
setting: 'writingStyle',
object: this._writingStyle()
});
});
effect(() => {
if (!this._isInitialized()) return;
this.settingUpdateSubject.next({
setting: 'immersiveMode',
object: this._immersiveMode()
});
});
effect(() => {
if (!this._isInitialized()) return;
const theme = this._activeTheme();
if (theme) {
this.settingUpdateSubject.next({
setting: 'theme',
object: theme
});
}
});
}
/**
* Initialize the service with a reading profile and series ID
* This should be called when the reader starts up
*/
async initialize(seriesId: number, readingProfile: ReadingProfile): Promise<void> {
this.currentSeriesId = seriesId;
this.currentReadingProfile = readingProfile;
this._currentSeriesId.set(seriesId);
this._currentReadingProfile.set(readingProfile);
console.log('init, reading profile: ', readingProfile);
this.readingProfileSubject.next(readingProfile);
// Load parent profile if needed
if (readingProfile.kind === ReadingProfileKind.Implicit) {
try {
const parent = await this.readingProfileService.getForSeries(seriesId, true).toPromise();
this.parentReadingProfile = parent || null;
// Keep the implicit profile but use parent as reference (TODO: Validate the code)
const parent = await this.readingProfileService.getForSeries(seriesId, true).toPromise();
this._parentReadingProfile.set(parent || null);
} catch (error) {
console.error('Failed to load parent reading profile:', error);
}
}
// Setup defaults and form
this.setupDefaultSettings();
// Setup defaults and update signals
this.setupDefaultsFromProfile(readingProfile);
this.setupSettingsForm();
// Set initial theme
const themeName = readingProfile.bookReaderThemeName || this.themeService.defaultBookTheme;
this.setTheme(themeName, false);
// Emit initial values
this.emitInitialSettings();
// Mark as initialized - this will trigger effects to emit initial values
this._isInitialized.set(true);
}
/**
* Setup default values and update signals from profile
*/
private setupDefaultsFromProfile(profile: ReadingProfile): void {
// Set defaults if undefined
if (profile.bookReaderFontFamily === undefined) {
profile.bookReaderFontFamily = 'default';
}
if (profile.bookReaderFontSize === undefined || profile.bookReaderFontSize < 50) {
profile.bookReaderFontSize = 100;
}
if (profile.bookReaderLineSpacing === undefined || profile.bookReaderLineSpacing < 100) {
profile.bookReaderLineSpacing = 100;
}
if (profile.bookReaderMargin === undefined) {
profile.bookReaderMargin = 0;
}
if (profile.bookReaderReadingDirection === undefined) {
profile.bookReaderReadingDirection = ReadingDirection.LeftToRight;
}
if (profile.bookReaderWritingStyle === undefined) {
profile.bookReaderWritingStyle = WritingStyle.Horizontal;
}
if (profile.bookReaderLayoutMode === undefined) {
profile.bookReaderLayoutMode = BookPageLayoutMode.Default;
}
// Update signals from profile
this._readingDirection.set(profile.bookReaderReadingDirection);
this._writingStyle.set(profile.bookReaderWritingStyle);
this._clickToPaginate.set(profile.bookReaderTapToPaginate);
this._layoutMode.set(profile.bookReaderLayoutMode);
this._immersiveMode.set(profile.bookReaderImmersiveMode);
// Set up page styles
this.setPageStyles(
profile.bookReaderFontFamily,
profile.bookReaderFontSize + '%',
profile.bookReaderMargin + 'vw',
profile.bookReaderLineSpacing + '%'
);
}
/**
@ -110,7 +248,7 @@ export class EpubReaderSettingsService {
* Get current reading profile
*/
getCurrentReadingProfile(): ReadingProfile | null {
return this.currentReadingProfile;
return this._currentReadingProfile();
}
/**
@ -131,28 +269,26 @@ export class EpubReaderSettingsService {
* Toggle reading direction
*/
toggleReadingDirection(): void {
const current = this.readingDirectionSubject.value;
const current = this._readingDirection();
const newDirection = current === ReadingDirection.LeftToRight
? ReadingDirection.RightToLeft
: ReadingDirection.LeftToRight;
this.readingDirectionSubject.next(newDirection);
this.settingUpdateSubject.next({ setting: 'readingDirection', object: newDirection });
this.updateImplicitProfile();
this._readingDirection.set(newDirection);
this.debouncedUpdateProfile();
}
/**
* Toggle writing style
*/
toggleWritingStyle(): void {
const current = this.writingStyleSubject.value;
const current = this._writingStyle();
const newStyle = current === WritingStyle.Horizontal
? WritingStyle.Vertical
: WritingStyle.Horizontal;
this.writingStyleSubject.next(newStyle);
this.settingUpdateSubject.next({ setting: 'writingStyle', object: newStyle });
this.updateImplicitProfile();
this._writingStyle.set(newStyle);
this.debouncedUpdateProfile();
}
/**
@ -161,34 +297,81 @@ export class EpubReaderSettingsService {
setTheme(themeName: string, update: boolean = true): void {
const theme = bookColorThemes.find(t => t.name === themeName);
if (theme) {
this.activeThemeSubject.next(theme);
this.settingUpdateSubject.next({ setting: 'theme', object: theme });
this._activeTheme.set(theme);
if (update) {
this.updateImplicitProfile();
this.debouncedUpdateProfile();
}
}
}
updateLayoutMode(mode: BookPageLayoutMode): void {
this._layoutMode.set(mode);
// Update form control to keep in sync
this.settingsForm.get('layoutMode')?.setValue(mode, { emitEvent: false });
this.debouncedUpdateProfile();
}
updateClickToPaginate(value: boolean): void {
this._clickToPaginate.set(value);
this.settingsForm.get('bookReaderTapToPaginate')?.setValue(value, { emitEvent: false });
this.debouncedUpdateProfile();
}
updateReadingDirection(value: ReadingDirection): void {
this._readingDirection.set(value);
this.debouncedUpdateProfile();
}
updateWritingStyle(value: WritingStyle) {
this._writingStyle.set(value);
this.debouncedUpdateProfile();
}
updateFullscreen(value: boolean) {
this._isFullscreen.set(value);
this.settingUpdateSubject.next({ setting: 'fullscreen', object: null }); // TODO: Refactor into an effect
}
updateImmersiveMode(value: boolean): void {
this._immersiveMode.set(value);
if (value) {
this._clickToPaginate.set(true);
}
}
// Debounced update method to prevent too many API calls
private updateTimeout: any;
private debouncedUpdateProfile(): void {
if (this.updateTimeout) {
clearTimeout(this.updateTimeout);
}
this.updateTimeout = setTimeout(() => {
this.updateImplicitProfile();
}, 500);
}
/**
* Emit fullscreen toggle event
*/
toggleFullscreen(): void {
this.settingUpdateSubject.next({ setting: 'fullscreen', object: null });
this.updateFullscreen(!this._isFullscreen());
}
/**
* Update parent reading profile preferences
*/
updateParentProfile(): void {
if (!this.currentReadingProfile || this.currentReadingProfile.kind !== ReadingProfileKind.Implicit || !this.currentSeriesId) {
const currentRp = this._currentReadingProfile();
const seriesId = this._currentSeriesId();
if (!currentRp || currentRp.kind !== ReadingProfileKind.Implicit || !seriesId) {
return;
}
this.readingProfileService.updateParentProfile(this.currentSeriesId, this.packReadingProfile())
this.readingProfileService.updateParentProfile(seriesId, this.packReadingProfile())
.subscribe(newProfile => {
this.currentReadingProfile = newProfile;
this.readingProfileSubject.next(newProfile);
this._currentReadingProfile.set(newProfile);
this.toastr.success(translate('manga-reader.reading-profile-updated'));
});
}
@ -196,166 +379,171 @@ export class EpubReaderSettingsService {
* Promote implicit profile to named profile
*/
promoteProfile(): Observable<ReadingProfile> {
if (!this.currentReadingProfile || this.currentReadingProfile.kind !== ReadingProfileKind.Implicit) {
const currentRp = this._currentReadingProfile();
if (!currentRp || currentRp.kind !== ReadingProfileKind.Implicit) {
throw new Error('Can only promote implicit profiles');
}
return this.readingProfileService.promoteProfile(this.currentReadingProfile.id).pipe(
return this.readingProfileService.promoteProfile(currentRp.id).pipe(
tap(newProfile => {
this.currentReadingProfile = newProfile;
this.readingProfileSubject.next(newProfile);
this._currentReadingProfile.set(newProfile);
})
);
}
private setupDefaultSettings(): void {
if (!this.currentReadingProfile) return;
/**
* Update form controls from current signal values
*/
private updateFormFromSignals(): void {
const profile = this._currentReadingProfile();
if (!profile) return;
// Set up defaults
const profile = this.currentReadingProfile;
if (profile.bookReaderFontFamily === undefined) {
profile.bookReaderFontFamily = 'default';
}
if (profile.bookReaderFontSize === undefined || profile.bookReaderFontSize < 50) {
profile.bookReaderFontSize = 100;
}
if (profile.bookReaderLineSpacing === undefined || profile.bookReaderLineSpacing < 100) {
profile.bookReaderLineSpacing = 100;
}
if (profile.bookReaderMargin === undefined) {
profile.bookReaderMargin = 0;
}
if (profile.bookReaderReadingDirection === undefined) {
profile.bookReaderReadingDirection = ReadingDirection.LeftToRight;
}
if (profile.bookReaderWritingStyle === undefined) {
profile.bookReaderWritingStyle = WritingStyle.Horizontal;
}
this.setupSettingsForm();
// Update internal state
this.readingDirectionSubject.next(profile.bookReaderReadingDirection);
this.writingStyleSubject.next(profile.bookReaderWritingStyle);
this.clickToPaginateSubject.next(profile.bookReaderTapToPaginate);
this.layoutModeSubject.next(profile.bookReaderLayoutMode);
this.immersiveModeSubject.next(profile.bookReaderImmersiveMode);
// Set up page styles
this.setPageStyles(
profile.bookReaderFontFamily,
profile.bookReaderFontSize + '%',
profile.bookReaderMargin + 'vw',
profile.bookReaderLineSpacing + '%'
);
// Update form controls without triggering valueChanges
this.settingsForm.patchValue({
bookReaderFontFamily: profile.bookReaderFontFamily,
bookReaderFontSize: profile.bookReaderFontSize,
bookReaderTapToPaginate: this._clickToPaginate(),
bookReaderLineSpacing: profile.bookReaderLineSpacing,
bookReaderMargin: profile.bookReaderMargin,
layoutMode: this._layoutMode(),
bookReaderImmersiveMode: this._immersiveMode()
}, { emitEvent: false });
}
/**
* Sets up the reactive form and bidirectional binding with signals
*/
private setupSettingsForm(): void {
if (!this.currentReadingProfile) return;
const profile = this.currentReadingProfile;
const profile = this._currentReadingProfile();
if (!profile) return;
// Clear existing form
this.settingsForm = new FormGroup({});
// Add controls
// Add controls with current values
this.settingsForm.addControl('bookReaderFontFamily', new FormControl(profile.bookReaderFontFamily));
this.settingsForm.addControl('bookReaderFontSize', new FormControl(profile.bookReaderFontSize));
this.settingsForm.addControl('bookReaderTapToPaginate', new FormControl(profile.bookReaderTapToPaginate));
this.settingsForm.addControl('bookReaderTapToPaginate', new FormControl(this._clickToPaginate()));
this.settingsForm.addControl('bookReaderLineSpacing', new FormControl(profile.bookReaderLineSpacing));
this.settingsForm.addControl('bookReaderMargin', new FormControl(profile.bookReaderMargin));
this.settingsForm.addControl('layoutMode', new FormControl(profile.bookReaderLayoutMode));
this.settingsForm.addControl('bookReaderImmersiveMode', new FormControl(profile.bookReaderImmersiveMode));
this.settingsForm.addControl('layoutMode', new FormControl(this._layoutMode()));
this.settingsForm.addControl('bookReaderImmersiveMode', new FormControl(this._immersiveMode()));
// Set up value change subscriptions
this.setupFormSubscriptions();
}
/**
* Sets up form value change subscriptions to update signals
*/
private setupFormSubscriptions(): void {
// Font family changes
this.settingsForm.get('bookReaderFontFamily')?.valueChanges.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe(fontName => {
const familyName = this.fontFamilies.find(f => f.title === fontName)?.family || 'default';
const currentStyles = this.pageStylesSubject.value;
this.isUpdatingFromForm = true;
const familyName = this.fontFamilies.find(f => f.title === fontName)?.family || 'default';
const currentStyles = this._pageStyles();
const newStyles = { ...currentStyles };
if (familyName === 'default') {
currentStyles['font-family'] = 'inherit';
newStyles['font-family'] = 'inherit';
} else {
currentStyles['font-family'] = `'${familyName}'`;
newStyles['font-family'] = `'${familyName}'`;
}
this.pageStylesSubject.next({ ...currentStyles });
this.settingUpdateSubject.next({ setting: 'pageStyle', object: currentStyles });
this._pageStyles.set(newStyles);
this.isUpdatingFromForm = false;
});
// Font size changes
this.settingsForm.get('bookReaderFontSize')?.valueChanges.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe(value => {
const currentStyles = this.pageStylesSubject.value;
currentStyles['font-size'] = value + '%';
this.pageStylesSubject.next({ ...currentStyles });
this.settingUpdateSubject.next({ setting: 'pageStyle', object: currentStyles });
this.isUpdatingFromForm = true;
const currentStyles = this._pageStyles();
const newStyles = { ...currentStyles };
newStyles['font-size'] = value + '%';
this._pageStyles.set(newStyles);
this.isUpdatingFromForm = false;
});
// Tap to paginate changes
this.settingsForm.get('bookReaderTapToPaginate')?.valueChanges.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe(value => {
this.clickToPaginateSubject.next(value);
this.settingUpdateSubject.next({ setting: 'clickToPaginate', object: value });
this.isUpdatingFromForm = true;
this._clickToPaginate.set(value);
this.isUpdatingFromForm = false;
});
// Line spacing changes
this.settingsForm.get('bookReaderLineSpacing')?.valueChanges.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe(value => {
const currentStyles = this.pageStylesSubject.value;
currentStyles['line-height'] = value + '%';
this.pageStylesSubject.next({ ...currentStyles });
this.settingUpdateSubject.next({ setting: 'pageStyle', object: currentStyles });
this.isUpdatingFromForm = true;
const currentStyles = this._pageStyles();
const newStyles = { ...currentStyles };
newStyles['line-height'] = value + '%';
this._pageStyles.set(newStyles);
this.isUpdatingFromForm = false;
});
// Margin changes
this.settingsForm.get('bookReaderMargin')?.valueChanges.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe(value => {
const currentStyles = this.pageStylesSubject.value;
currentStyles['margin-left'] = value + 'vw';
currentStyles['margin-right'] = value + 'vw';
this.pageStylesSubject.next({ ...currentStyles });
this.settingUpdateSubject.next({ setting: 'pageStyle', object: currentStyles });
this.isUpdatingFromForm = true;
const currentStyles = this._pageStyles();
const newStyles = { ...currentStyles };
newStyles['margin-left'] = value + 'vw';
newStyles['margin-right'] = value + 'vw';
this._pageStyles.set(newStyles);
this.isUpdatingFromForm = false;
});
// Layout mode changes
this.settingsForm.get('layoutMode')?.valueChanges.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe((layoutMode: BookPageLayoutMode) => {
this.layoutModeSubject.next(layoutMode);
this.settingUpdateSubject.next({ setting: 'layoutMode', object: layoutMode });
this.isUpdatingFromForm = true;
this._layoutMode.set(layoutMode);
this.isUpdatingFromForm = false;
});
// Immersive mode changes
this.settingsForm.get('bookReaderImmersiveMode')?.valueChanges.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe((immersiveMode: boolean) => {
this.isUpdatingFromForm = true;
if (immersiveMode) {
this.settingsForm.get('bookReaderTapToPaginate')?.setValue(true);
this.settingsForm.get('bookReaderTapToPaginate')?.setValue(true, { emitEvent: false });
this._clickToPaginate.set(true);
}
this.immersiveModeSubject.next(immersiveMode);
this.settingUpdateSubject.next({ setting: 'immersiveMode', object: immersiveMode });
this._immersiveMode.set(immersiveMode);
this.isUpdatingFromForm = false;
});
// Update implicit profile on form changes
// Update implicit profile on form changes (debounced) - ONLY source of profile updates
this.settingsForm.valueChanges.pipe(
debounceTime(300),
distinctUntilChanged(),
debounceTime(500), // Increased debounce time
skip(1), // Skip initial form creation
takeUntilDestroyed(this.destroyRef)
).subscribe(() => {
this.updateImplicitProfile();
// Only update if we're not currently updating from form changes
if (!this.isUpdatingFromForm) {
this.updateImplicitProfile();
}
});
}
@ -367,34 +555,33 @@ export class EpubReaderSettingsService {
this.setPageStyles(
defaultStyles["font-family"],
defaultStyles["font-size"],
defaultStyles['margin-left'] ,
defaultStyles['margin-left'],
defaultStyles['line-height'],
);
}
private emitInitialSettings(): void {
// Emit all current settings so the reader can initialize properly
this.settingUpdateSubject.next({ setting: 'pageStyle', object: this.pageStylesSubject.value });
this.settingUpdateSubject.next({ setting: 'clickToPaginate', object: this.clickToPaginateSubject.value });
this.settingUpdateSubject.next({ setting: 'layoutMode', object: this.layoutModeSubject.value });
this.settingUpdateSubject.next({ setting: 'readingDirection', object: this.readingDirectionSubject.value });
this.settingUpdateSubject.next({ setting: 'writingStyle', object: this.writingStyleSubject.value });
this.settingUpdateSubject.next({ setting: 'immersiveMode', object: this.immersiveModeSubject.value });
const activeTheme = this.activeThemeSubject.value;
if (activeTheme) {
this.settingUpdateSubject.next({ setting: 'theme', object: activeTheme });
}
}
// private emitInitialSettings(): void {
// // Emit all current settings so the reader can initialize properly
// this.settingUpdateSubject.next({ setting: 'pageStyle', object: this.pageStylesSubject.value });
// this.settingUpdateSubject.next({ setting: 'clickToPaginate', object: this.clickToPaginateSubject.value });
// this.settingUpdateSubject.next({ setting: 'layoutMode', object: this.layoutModeSubject.value });
// this.settingUpdateSubject.next({ setting: 'readingDirection', object: this.readingDirectionSubject.value });
// this.settingUpdateSubject.next({ setting: 'writingStyle', object: this.writingStyleSubject.value });
// this.settingUpdateSubject.next({ setting: 'immersiveMode', object: this.immersiveModeSubject.value });
//
// const activeTheme = this.activeThemeSubject.value;
// if (activeTheme) {
// this.settingUpdateSubject.next({ setting: 'theme', object: activeTheme });
// }
// }
private updateImplicitProfile(): void {
if (!this.currentReadingProfile || !this.currentSeriesId) return;
if (!this._currentReadingProfile() || !this._currentSeriesId()) return;
this.readingProfileService.updateImplicit(this.packReadingProfile(), this.currentSeriesId)
this.readingProfileService.updateImplicit(this.packReadingProfile(), this._currentSeriesId()!)
.subscribe({
next: newProfile => {
this.currentReadingProfile = newProfile;
this.readingProfileSubject.next(newProfile);
this._currentReadingProfile.set(newProfile);
},
error: err => {
console.error('Failed to update implicit profile:', err);
@ -402,26 +589,32 @@ export class EpubReaderSettingsService {
});
}
/**
* Packs current settings into a ReadingProfile object
*/
private packReadingProfile(): ReadingProfile {
if (!this.currentReadingProfile) {
const currentProfile = this._currentReadingProfile();
if (!currentProfile) {
throw new Error('No current reading profile');
}
const modelSettings = this.settingsForm.getRawValue();
const data = { ...this.currentReadingProfile };
const data = { ...currentProfile };
// Update from form values
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.bookReaderTapToPaginate = this._clickToPaginate();
data.bookReaderLayoutMode = this._layoutMode();
data.bookReaderImmersiveMode = this._immersiveMode();
data.bookReaderReadingDirection = this.readingDirectionSubject.value;
data.bookReaderWritingStyle = this.writingStyleSubject.value;
// Update from signals
data.bookReaderReadingDirection = this._readingDirection();
data.bookReaderWritingStyle = this._writingStyle();
const activeTheme = this.activeThemeSubject.value;
const activeTheme = this._activeTheme();
if (activeTheme) {
data.bookReaderThemeName = activeTheme.name;
}
@ -431,6 +624,28 @@ export class EpubReaderSettingsService {
return data;
}
// private setPageStyles(fontFamily?: string, fontSize?: string, margin?: string, lineHeight?: string): void {
// const windowWidth = window.innerWidth || this.document.documentElement.clientWidth || this.document.body.clientWidth;
// const mobileBreakpointMarginOverride = 700;
//
// let defaultMargin = '15vw';
// if (windowWidth <= mobileBreakpointMarginOverride) {
// defaultMargin = '5vw';
// }
//
// const currentStyles = this.pageStylesSubject.value;
// const newStyles: PageStyle = {
// 'font-family': fontFamily || currentStyles['font-family'] || 'default',
// 'font-size': fontSize || currentStyles['font-size'] || '100%',
// 'margin-left': margin || currentStyles['margin-left'] || defaultMargin,
// 'margin-right': margin || currentStyles['margin-right'] || defaultMargin,
// 'line-height': lineHeight || currentStyles['line-height'] || '100%'
// };
//
// this.pageStylesSubject.next(newStyles);
// this.updateImplicitProfile();
// this.settingUpdateSubject.next({ setting: 'pageStyle', object: newStyles });
// }
private setPageStyles(fontFamily?: string, fontSize?: string, margin?: string, lineHeight?: string): void {
const windowWidth = window.innerWidth || this.document.documentElement.clientWidth || this.document.body.clientWidth;
const mobileBreakpointMarginOverride = 700;
@ -440,7 +655,7 @@ export class EpubReaderSettingsService {
defaultMargin = '5vw';
}
const currentStyles = this.pageStylesSubject.value;
const currentStyles = this._pageStyles();
const newStyles: PageStyle = {
'font-family': fontFamily || currentStyles['font-family'] || 'default',
'font-size': fontSize || currentStyles['font-size'] || '100%',
@ -449,9 +664,7 @@ export class EpubReaderSettingsService {
'line-height': lineHeight || currentStyles['line-height'] || '100%'
};
this.pageStylesSubject.next(newStyles);
this.updateImplicitProfile();
this.settingUpdateSubject.next({ setting: 'pageStyle', object: newStyles });
this._pageStyles.set(newStyles);
}
public getDefaultPageStyles(): PageStyle {
@ -472,8 +685,8 @@ export class EpubReaderSettingsService {
}
this.promoteProfile().subscribe(newProfile => {
this.currentReadingProfile = newProfile;
this.parentReadingProfile = newProfile;
this._currentReadingProfile.set(newProfile);
this._parentReadingProfile.set(newProfile);
this.toastr.success(translate("manga-reader.reading-profile-promoted"));
});
}

33
UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html
View file

@ -1,4 +1,4 @@
<div class="container-flex {{darkMode() ? 'dark-mode' : ''}} reader-container {{layoutMode() | columnLayoutClass}} {{writingStyle | writingStyleClass}}"
<div class="container-flex {{darkMode() ? 'dark-mode' : ''}} reader-container {{layoutMode() | columnLayoutClass}} {{writingStyle() | writingStyleClass}}"
tabindex="0" #reader>
<ng-container *transloco="let t; prefix: 'book-reader'">
<div class="fixed-top" #stickyTop>
@ -17,33 +17,34 @@
}
</div>
<div #readingSection class="reading-section {{layoutMode() | columnLayoutClass}} {{writingStyle | writingStyleClass}}" [ngStyle]="{'width': PageWidthForPagination}"
<div #readingSection class="reading-section {{layoutMode() | columnLayoutClass}} {{writingStyle() | writingStyleClass}}"
[ngStyle]="{'width': PageWidthForPagination}"
[ngClass]="{'immersive' : immersiveMode() || !actionBarVisible}" [@isLoading]="isLoading" (click)="handleReaderClick($event)">
@if (clickToPaginate && !hidePagination) {
@if (clickToPaginate() && !hidePagination) {
<div class="left {{clickOverlayClass('left')}} no-observe"
(click)="movePage(readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.BACKWARDS : PAGING_DIRECTION.FORWARD)"
(click)="movePage(readingDirection() === ReadingDirection.LeftToRight ? PAGING_DIRECTION.BACKWARDS : PAGING_DIRECTION.FORWARD)"
[ngClass]="{'immersive' : immersiveMode()}"
tabindex="-1"
[ngStyle]="{height: PageHeightForPagination}"></div>
<div class="{{scrollbarNeeded ? 'right-with-scrollbar' : 'right'}} {{clickOverlayClass('right')}} no-observe"
(click)="movePage(readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.FORWARD : PAGING_DIRECTION.BACKWARDS)"
(click)="movePage(readingDirection() === ReadingDirection.LeftToRight ? PAGING_DIRECTION.FORWARD : PAGING_DIRECTION.BACKWARDS)"
[ngClass]="{'immersive' : immersiveMode()}"
tabindex="-1"
[ngStyle]="{height: PageHeightForPagination}"></div>
}
<div #bookContainer class="book-container {{writingStyle | writingStyleClass}}"
<div #bookContainer class="book-container {{writingStyle() | writingStyleClass}}"
[ngClass]="{'immersive' : immersiveMode()}"
(mousedown)="mouseDown($event)" >
@if (page !== undefined) {
<div #readingHtml class="book-content {{layoutMode() | columnLayoutClass}} {{writingStyle | writingStyleClass}}"
<div #readingHtml class="book-content {{layoutMode() | columnLayoutClass}} {{writingStyle() | writingStyleClass}}"
[ngStyle]="{'max-height': ColumnHeight, 'max-width': VerticalBookContentWidth, 'width': VerticalBookContentWidth, 'column-width': ColumnWidth}"
[ngClass]="{'immersive': immersiveMode() && actionBarVisible}"
[innerHtml]="page" (click)="toggleMenu($event)" (mousedown)="mouseDown($event)" (wheel)="onWheel($event)"></div>
@if ((scrollbarNeeded || layoutMode() !== BookPageLayoutMode.Default) && !(writingStyle === WritingStyle.Vertical && layoutMode() === BookPageLayoutMode.Default)) {
@if ((scrollbarNeeded || layoutMode() !== BookPageLayoutMode.Default) && !(writingStyle() === WritingStyle.Vertical && layoutMode() === BookPageLayoutMode.Default)) {
<div (click)="$event.stopPropagation();"
[ngClass]="{'bottom-bar': layoutMode() !== BookPageLayoutMode.Default}">
<ng-container [ngTemplateOutlet]="actionBar" [ngTemplateOutletContext]="{isTop: false}"></ng-container>
@ -108,10 +109,10 @@
@if (!immersiveMode() || epubMenuService.isDrawerOpen() || actionBarVisible) {
<div class="action-bar row g-0 justify-content-between">
<button class="btn btn-outline-secondary btn-icon col-2 col-xs-1"
(click)="!isTop && movePage(readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.BACKWARDS : PAGING_DIRECTION.FORWARD)"
[disabled]="readingDirection === ReadingDirection.LeftToRight ? IsPrevDisabled : IsNextDisabled"
title="{{readingDirection === ReadingDirection.LeftToRight ? t('previous') : t('next')}} Page">
<i class="fa {{(readingDirection === ReadingDirection.LeftToRight ? IsPrevChapter : IsNextChapter) ? 'fa-angle-double-left' : 'fa-angle-left'}} {{readingDirection === ReadingDirection.RightToLeft ? 'next-page-highlight' : ''}}" aria-hidden="true"></i>
(click)="!isTop && movePage(readingDirection() === ReadingDirection.LeftToRight ? PAGING_DIRECTION.BACKWARDS : PAGING_DIRECTION.FORWARD)"
[disabled]="readingDirection() === ReadingDirection.LeftToRight ? IsPrevDisabled : IsNextDisabled"
title="{{readingDirection() === ReadingDirection.LeftToRight ? t('previous') : t('next')}} Page">
<i class="fa {{(readingDirection() === ReadingDirection.LeftToRight ? IsPrevChapter : IsNextChapter) ? 'fa-angle-double-left' : 'fa-angle-left'}} {{readingDirection() === ReadingDirection.RightToLeft ? 'next-page-highlight' : ''}}" aria-hidden="true"></i>
</button>
@if (!this.adhocPageHistory.isEmpty()) {
@ -141,10 +142,10 @@
</div>
<button class="btn btn-outline-secondary btn-icon col-2 col-xs-1"
[disabled]="readingDirection === ReadingDirection.LeftToRight ? IsNextDisabled : IsPrevDisabled"
(click)="!isTop && movePage(readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.FORWARD : PAGING_DIRECTION.BACKWARDS)"
title="{{readingDirection === ReadingDirection.LeftToRight ? t('next') : t('previous')}} Page">
<i class="fa {{(readingDirection === ReadingDirection.LeftToRight ? IsNextChapter : IsPrevChapter) ? 'fa-angle-double-right' : 'fa-angle-right'}} {{readingDirection === ReadingDirection.LeftToRight ? 'next-page-highlight' : ''}}" aria-hidden="true"></i>
[disabled]="readingDirection() === ReadingDirection.LeftToRight ? IsNextDisabled : IsPrevDisabled"
(click)="!isTop && movePage(readingDirection() === ReadingDirection.LeftToRight ? PAGING_DIRECTION.FORWARD : PAGING_DIRECTION.BACKWARDS)"
title="{{readingDirection() === ReadingDirection.LeftToRight ? t('next') : t('previous')}} Page">
<i class="fa {{(readingDirection() === ReadingDirection.LeftToRight ? IsNextChapter : IsPrevChapter) ? 'fa-angle-double-right' : 'fa-angle-right'}} {{readingDirection() === ReadingDirection.LeftToRight ? 'next-page-highlight' : ''}}" aria-hidden="true"></i>
</button>
</div>
}

109
UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.ts
View file

@ -195,7 +195,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
/**
* Book reader setting that hides the menuing system
*/
immersiveMode = model<boolean>(false);
//immersiveMode = model<boolean>(false);
/**
* If we are loading from backend
*/
@ -251,7 +251,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
/**
* Internal property used to capture all the different css properties to render on all elements. This is a cached version that is updated from reader-settings component
*/
pageStyles = model<PageStyle>(this.readerSettingsService.getDefaultPageStyles());
//pageStyles = model<PageStyle>(this.readerSettingsService.getDefaultPageStyles());
//pageStyles!: PageStyle;
/**
@ -264,8 +264,8 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
*/
horizontalScrollbarNeeded = false;
scrollbarNeeded = false;
readingDirection: ReadingDirection = ReadingDirection.LeftToRight;
clickToPaginate = false;
// readingDirection: ReadingDirection = ReadingDirection.LeftToRight;
// clickToPaginate = false;
/**
* Used solely for fullscreen to apply a hack
*/
@ -293,7 +293,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
* How to render the page content
*/
//layoutMode: BookPageLayoutMode = BookPageLayoutMode.Default;
layoutMode = model<BookPageLayoutMode>(BookPageLayoutMode.Default);
//layoutMode = model<BookPageLayoutMode>(BookPageLayoutMode.Default);
/**
* Width of the document (in non-column layout), used for column layout virtual paging
@ -314,7 +314,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
*/
pagingDirection: PAGING_DIRECTION = PAGING_DIRECTION.FORWARD;
writingStyle: WritingStyle = WritingStyle.Horizontal;
//writingStyle: WritingStyle = WritingStyle.Horizontal;
/**
@ -341,11 +341,19 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('reader', {static: false}) reader!: ElementRef;
@ViewChild('readingHtml', { read: ViewContainerRef }) readingContainer!: ViewContainerRef;
protected readonly layoutMode = this.readerSettingsService.layoutMode;
protected readonly pageStyles = this.readerSettingsService.pageStyles;
protected readonly immersiveMode = this.readerSettingsService.immersiveMode;
protected readonly readingDirection = this.readerSettingsService.readingDirection;
protected readonly writingStyle = this.readerSettingsService.writingStyle;
protected readonly clickToPaginate = this.readerSettingsService.clickToPaginate;
/**
* Disables the Left most button
*/
get IsPrevDisabled(): boolean {
if (this.readingDirection === ReadingDirection.LeftToRight) {
if (this.readingDirection() === ReadingDirection.LeftToRight) {
// Acting as Previous button
return this.isPrevPageDisabled();
}
@ -355,7 +363,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
get IsNextDisabled(): boolean {
if (this.readingDirection === ReadingDirection.LeftToRight) {
if (this.readingDirection() === ReadingDirection.LeftToRight) {
// Acting as Next button
return this.isNextPageDisabled();
}
@ -409,7 +417,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
get ColumnWidth() {
const base = this.writingStyle === WritingStyle.Vertical ? this.windowHeight : this.windowWidth;
const base = this.writingStyle() === WritingStyle.Vertical ? this.windowHeight : this.windowWidth;
switch (this.layoutMode()) {
case BookPageLayoutMode.Default:
return 'unset';
@ -423,7 +431,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
get ColumnHeight() {
if (this.layoutMode() !== BookPageLayoutMode.Default || this.writingStyle === WritingStyle.Vertical) {
if (this.layoutMode() !== BookPageLayoutMode.Default || this.writingStyle() === WritingStyle.Vertical) {
// Take the height after page loads, subtract the top/bottom bar
const height = this.windowHeight - (this.topOffset * 2);
return height + 'px';
@ -432,7 +440,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
get VerticalBookContentWidth() {
if (this.layoutMode() !== BookPageLayoutMode.Default && this.writingStyle !== WritingStyle.Horizontal ) {
if (this.layoutMode() !== BookPageLayoutMode.Default && this.writingStyle() !== WritingStyle.Horizontal ) {
const width = this.getVerticalPageWidth()
return width + 'px';
}
@ -441,7 +449,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
get PageWidthForPagination() {
if (this.layoutMode() === BookPageLayoutMode.Default && this.writingStyle === WritingStyle.Vertical && this.horizontalScrollbarNeeded) {
if (this.layoutMode() === BookPageLayoutMode.Default && this.writingStyle() === WritingStyle.Vertical && this.horizontalScrollbarNeeded) {
return 'unset';
}
return '100%'
@ -639,25 +647,26 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.readerSettingsService.readingProfile$.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe(profile => {
if (profile) {
this.readingProfile = profile;
this.cdRef.markForCheck();
}
});
// this.readerSettingsService.readingProfile$.pipe(
// takeUntilDestroyed(this.destroyRef)
// ).subscribe(profile => {
// if (profile) {
// this.readingProfile = profile;
// this.cdRef.markForCheck();
// }
// });
this.readerSettingsService.settingUpdates$.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe((update: ReaderSettingUpdate) => {
console.log('Book reader received reader setting update: ', update);
this.handleReaderSettingsUpdate(update);
});
this.readerSettingsService.activeTheme$.pipe(take(1)).subscribe(res => {
if (!res) return;
this.updateColorTheme(res);
});
// this.readerSettingsService.activeTheme$.pipe(take(1)).subscribe(res => {
// if (!res) return;
// this.updateColorTheme(res);
// });
// TODO: I may need to do this for everything
forkJoin({
@ -742,9 +751,9 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
if (isInputFocused) return;
if (event.key === KEY_CODES.RIGHT_ARROW) {
this.movePage(this.readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.FORWARD : PAGING_DIRECTION.BACKWARDS);
this.movePage(this.readingDirection() === ReadingDirection.LeftToRight ? PAGING_DIRECTION.FORWARD : PAGING_DIRECTION.BACKWARDS);
} else if (event.key === KEY_CODES.LEFT_ARROW) {
this.movePage(this.readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.BACKWARDS : PAGING_DIRECTION.FORWARD);
this.movePage(this.readingDirection() === ReadingDirection.LeftToRight ? PAGING_DIRECTION.BACKWARDS : PAGING_DIRECTION.FORWARD);
} else if (event.key === KEY_CODES.ESC_KEY) {
const isHighlighting = window.getSelection()?.toString() != '';
if (isHighlighting) return;
@ -762,7 +771,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
onWheel(event: WheelEvent) {
// This allows the user to scroll the page horizontally without holding shift
if (this.layoutMode() !== BookPageLayoutMode.Default || this.writingStyle !== WritingStyle.Vertical) {
if (this.layoutMode() !== BookPageLayoutMode.Default || this.writingStyle() !== WritingStyle.Vertical) {
return;
}
if (event.deltaY !== 0) {
@ -948,10 +957,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
setTimeout(() => {
this.addLinkClickHandlers();
this.readerSettingsService.pageStyles$.pipe(take(1)).subscribe(res => {
this.updateReaderStyles(res);
});
this.applyPageStyles(this.pageStyles());
const imgs = this.readingSectionElemRef.nativeElement.querySelectorAll('img');
if (imgs === null || imgs.length === 0) {
@ -974,7 +980,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
* Updates the image properties to fit the current layout mode and screen size
*/
updateImageSizes() {
const isVerticalWritingStyle = this.writingStyle === WritingStyle.Vertical;
const isVerticalWritingStyle = this.writingStyle() === WritingStyle.Vertical;
const height = this.windowHeight - (this.topOffset * 2);
let maxHeight = 'unset';
let maxWidth = '';
@ -1055,13 +1061,13 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.scrollTo(part);
} else if (scrollTop !== undefined && scrollTop !== 0) {
setTimeout(() => this.scrollService.scrollTo(scrollTop, this.reader.nativeElement));
} else if ((this.writingStyle === WritingStyle.Vertical) && (this.layoutMode() === BookPageLayoutMode.Default)) {
} else if ((this.writingStyle() === WritingStyle.Vertical) && (this.layoutMode() === BookPageLayoutMode.Default)) {
setTimeout(()=> this.scrollService.scrollToX(this.bookContentElemRef.nativeElement.clientWidth, this.reader.nativeElement));
} else {
if (this.layoutMode() === BookPageLayoutMode.Default) {
setTimeout(() => this.scrollService.scrollTo(0, this.reader.nativeElement));
} else if (this.writingStyle === WritingStyle.Vertical) {
} else if (this.writingStyle() === WritingStyle.Vertical) {
if (this.pagingDirection === PAGING_DIRECTION.BACKWARDS) {
setTimeout(() => this.scrollService.scrollTo(this.bookContentElemRef.nativeElement.scrollHeight, this.bookContentElemRef.nativeElement, 'auto'));
} else {
@ -1211,7 +1217,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
if (currentVirtualPage > 1) {
// -2 apparently goes back 1 virtual page...
if (this.writingStyle === WritingStyle.Vertical) {
if (this.writingStyle() === WritingStyle.Vertical) {
this.scrollService.scrollTo((currentVirtualPage - 2) * pageWidth, this.bookContentElemRef.nativeElement, 'auto');
} else {
this.scrollService.scrollToX((currentVirtualPage - 2) * pageWidth, this.bookContentElemRef.nativeElement);
@ -1246,7 +1252,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
if (currentVirtualPage < totalVirtualPages) {
// +0 apparently goes forward 1 virtual page...
if (this.writingStyle === WritingStyle.Vertical) {
if (this.writingStyle() === WritingStyle.Vertical) {
this.scrollService.scrollTo( (currentVirtualPage) * pageWidth, this.bookContentElemRef.nativeElement, 'auto');
} else {
this.scrollService.scrollToX((currentVirtualPage) * pageWidth, this.bookContentElemRef.nativeElement);
@ -1330,17 +1336,17 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
private getScrollOffsetAndTotalScroll() {
const { nativeElement: bookContent } = this.bookContentElemRef;
const scrollOffset = this.writingStyle === WritingStyle.Vertical
const scrollOffset = this.writingStyle() === WritingStyle.Vertical
? bookContent.scrollTop
: bookContent.scrollLeft;
const totalScroll = this.writingStyle === WritingStyle.Vertical
const totalScroll = this.writingStyle() === WritingStyle.Vertical
? bookContent.scrollHeight
: bookContent.scrollWidth;
return [scrollOffset, totalScroll];
}
private getPageSize() {
return this.writingStyle === WritingStyle.Vertical
return this.writingStyle() === WritingStyle.Vertical
? this.getPageHeight()
: this.getPageWidth();
}
@ -1372,10 +1378,11 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
/**
* Applies styles onto the html of the book page
*/
updateReaderStyles(pageStyles: PageStyle) {
applyPageStyles(pageStyles: PageStyle) {
console.log('Got styles from settings: ', pageStyles);
this.pageStyles.set(pageStyles);
//this.pageStyles.set(pageStyles);
//this.readerSettingsService.
if (this.bookContentElemRef === undefined || !this.bookContentElemRef.nativeElement) return;
// Before we apply styles, let's get an element on the screen so we can scroll to it after any shifts
@ -1453,7 +1460,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
handleReaderSettingsUpdate(res: ReaderSettingUpdate) {
switch (res.setting) {
case "pageStyle":
this.updateReaderStyles(res.object as PageStyle);
this.applyPageStyles(res.object as PageStyle);
break;
case "clickToPaginate":
this.showPaginationOverlay(res.object as boolean);
@ -1485,7 +1492,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.epubMenuService.closeAll();
} else {
this.epubMenuService.openSettingsDrawer(this.chapterId, this.seriesId, this.readingProfile, (res => {
this.handleReaderSettingsUpdate(res);
//this.handleReaderSettingsUpdate(res);
}));
}
@ -1510,12 +1517,12 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
if (element === null) return;
if(this.layoutMode() === BookPageLayoutMode.Default && this.writingStyle === WritingStyle.Vertical ) {
if(this.layoutMode() === BookPageLayoutMode.Default && this.writingStyle() === WritingStyle.Vertical ) {
const windowWidth = window.innerWidth || document.documentElement.clientWidth;
const scrollLeft = element.getBoundingClientRect().left + window.scrollX - (windowWidth - element.getBoundingClientRect().width);
setTimeout(() => this.scrollService.scrollToX(scrollLeft, this.reader.nativeElement, 'smooth'), 10);
}
else if ((this.layoutMode() === BookPageLayoutMode.Default) && (this.writingStyle === WritingStyle.Horizontal)) {
else if ((this.layoutMode() === BookPageLayoutMode.Default) && (this.writingStyle() === WritingStyle.Horizontal)) {
const fromTopOffset = element.getBoundingClientRect().top + window.scrollY + TOP_OFFSET;
// We need to use a delay as webkit browsers (aka Apple devices) don't always have the document rendered by this point
setTimeout(() => this.scrollService.scrollTo(fromTopOffset, this.reader.nativeElement), 10);
@ -1565,7 +1572,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
updateWritingStyle(writingStyle: WritingStyle) {
this.writingStyle = writingStyle;
this.readerSettingsService.updateWritingStyle(writingStyle);
setTimeout(() => this.updateImageSizes());
if (this.layoutMode() !== BookPageLayoutMode.Default) {
const lastSelector = this.lastSeenScrollPartPath;
@ -1585,7 +1592,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
updateLayoutMode(mode: BookPageLayoutMode) {
const layoutModeChanged = mode !== this.layoutMode();
this.layoutMode.set(mode);
this.readerSettingsService.updateLayoutMode(mode);
this.cdRef.markForCheck();
console.log('layout mode changed to: ', this.layoutMode());
@ -1616,12 +1623,12 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
updateReadingDirection(readingDirection: ReadingDirection) {
this.readingDirection = readingDirection;
this.readerSettingsService.updateReadingDirection(readingDirection);
this.cdRef.markForCheck();
}
updateImmersiveMode(immersiveMode: boolean) {
this.immersiveMode.set(immersiveMode);
this.readerSettingsService.updateImmersiveMode(immersiveMode);
if (immersiveMode && !this.epubMenuService.isDrawerOpen()) {
this.actionBarVisible = false;
this.updateReadingSectionHeight();
@ -1674,7 +1681,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
// Settings Handlers
showPaginationOverlay(clickToPaginate: boolean) {
this.clickToPaginate = clickToPaginate;
this.readerSettingsService.updateClickToPaginate(clickToPaginate);
this.cdRef.markForCheck();
this.clearTimeout(this.clickToPaginateVisualOverlayTimeout2);
@ -1718,7 +1725,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
return '';
}
if (this.readingDirection === ReadingDirection.LeftToRight) {
if (this.readingDirection() === ReadingDirection.LeftToRight) {
return side === 'right' ? 'highlight' : 'highlight-2';
}
return side === 'right' ? 'highlight-2' : 'highlight';

27
UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.html
View file

@ -71,18 +71,18 @@
<ng-template>
<div class="controls" style="display:flex; justify-content:space-between; align-items:center;">
<label id="readingdirection" class="form-label">{{t('reading-direction-label')}}</label>
<button (click)="toggleReadingDirection()" class="btn btn-icon" aria-labelledby="readingdirection" title="{{readingDirectionModel === ReadingDirection.LeftToRight ? t('left-to-right') : t('right-to-left')}}">
<i class="fa {{readingDirectionModel === ReadingDirection.LeftToRight ? 'fa-arrow-right' : 'fa-arrow-left'}} " aria-hidden="true"></i>
<span class="phone-hidden">&nbsp;{{readingDirectionModel === ReadingDirection.LeftToRight ? t('left-to-right') : t('right-to-left')}}</span>
<button (click)="toggleReadingDirection()" class="btn btn-icon" aria-labelledby="readingdirection" title="{{readingDirectionModel() === ReadingDirection.LeftToRight ? t('left-to-right') : t('right-to-left')}}">
<i class="fa {{readingDirectionModel() === ReadingDirection.LeftToRight ? 'fa-arrow-right' : 'fa-arrow-left'}} " aria-hidden="true"></i>
<span class="phone-hidden">&nbsp;{{readingDirectionModel() === ReadingDirection.LeftToRight ? t('left-to-right') : t('right-to-left')}}</span>
</button>
</div>
<div class="controls" style="display: flex; justify-content: space-between; align-items: center; ">
<label for="writing-style" class="form-label">{{t('writing-style-label')}}<i class="fa fa-info-circle ms-1" aria-hidden="true" placement="top" [ngbTooltip]="writingStyleTooltip" role="button" tabindex="0" aria-describedby="writingStyle-help"></i></label>
<ng-template #writingStyleTooltip>{{t('writing-style-tooltip')}}</ng-template>
<span class="visually-hidden" id="writingStyle-help"><ng-container [ngTemplateOutlet]="writingStyleTooltip"></ng-container></span>
<button (click)="toggleWritingStyle()" id="writing-style" class="btn btn-icon" aria-labelledby="writingStyle-help" title="{{writingStyleModel === WritingStyle.Horizontal ? t('horizontal') : t('vertical')}}">
<i class="fa {{writingStyleModel === WritingStyle.Horizontal ? 'fa-arrows-left-right' : 'fa-arrows-up-down' }}" aria-hidden="true"></i>
<span class="phone-hidden"> {{writingStyleModel === WritingStyle.Horizontal ? t('horizontal') : t('vertical') }}</span>
<button (click)="toggleWritingStyle()" id="writing-style" class="btn btn-icon" aria-labelledby="writingStyle-help" title="{{writingStyleModel() === WritingStyle.Horizontal ? t('horizontal') : t('vertical')}}">
<i class="fa {{writingStyleModel() === WritingStyle.Horizontal ? 'fa-arrows-left-right' : 'fa-arrows-up-down' }}" aria-hidden="true"></i>
<span class="phone-hidden"> {{writingStyleModel() === WritingStyle.Horizontal ? t('horizontal') : t('vertical') }}</span>
</button>
</div>
@ -117,9 +117,9 @@
<ng-container [ngTemplateOutlet]="fullscreenTooltip"></ng-container>
</span>
<button (click)="toggleFullscreen()" class="btn btn-icon" aria-labelledby="fullscreen">
<i class="fa {{isFullscreen ? 'fa-compress-alt' : 'fa-expand-alt'}} {{isFullscreen ? 'icon-primary-color' : ''}}" aria-hidden="true"></i>
@if (activeTheme?.isDarkTheme) {
<span class="ms-1">{{isFullscreen ? t('exit') : t('enter')}}</span>
<i class="fa {{isFullscreen() ? 'fa-compress-alt' : 'fa-expand-alt'}} {{isFullscreen() ? 'icon-primary-color' : ''}}" aria-hidden="true"></i>
@if (activeTheme()?.isDarkTheme) {
<span class="ms-1">{{isFullscreen() ? t('exit') : t('enter')}}</span>
}
</button>
</div>
@ -160,7 +160,7 @@
<ng-template>
<div class="controls">
@for(theme of themes; track theme.name) {
<button class="btn btn-icon color" (click)="setTheme(theme.name)" [ngClass]="{'active': activeTheme?.name === theme.name}">
<button class="btn btn-icon color" (click)="setTheme(theme.name)" [ngClass]="{'active': activeTheme()?.name === theme.name}">
<div class="dot" [ngStyle]="{'background-color': theme.colorHash}"></div>
{{t(theme.translationKey)}}
</button>
@ -171,15 +171,16 @@
</div>
</div>
@let currentRP = currentReadingProfile();
<div class="row g-0 mt-2">
<button class="btn btn-primary col-12 mb-2"
[disabled]="readingProfile.kind !== ReadingProfileKind.Implicit || !parentReadingProfile"
[disabled]="!currentRP || currentRP.kind !== ReadingProfileKind.Implicit || !hasParentProfile()"
(click)="updateParentPref()">
{{ t('update-parent', {name: parentReadingProfile?.name || t('loading')}) }}
{{ t('update-parent', {name: parentReadingProfile()?.name || t('loading')}) }}
</button>
<button class="btn btn-primary col-12 mb-2"
[ngbTooltip]="t('create-new-tooltip')"
[disabled]="readingProfile.kind !== ReadingProfileKind.Implicit"
[disabled]="!canPromoteProfile()"
(click)="createNewProfileFromImplicit()">
{{ t('create-new') }}
</button>

139
UI/Web/src/app/book-reader/_components/reader-settings/reader-settings.component.ts
View file

@ -1,15 +1,5 @@
import {NgClass, NgStyle, NgTemplateOutlet, TitleCasePipe} from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
DestroyRef,
EventEmitter,
inject,
Input,
OnInit,
Output
} from '@angular/core';
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, Input, OnInit} from '@angular/core';
import {FormGroup, ReactiveFormsModule} from '@angular/forms';
import {BookPageLayoutMode} from 'src/app/_models/readers/book-page-layout-mode';
import {BookTheme} from 'src/app/_models/preferences/book-theme';
@ -21,7 +11,6 @@ import {BookBlackTheme} from '../../_models/book-black-theme';
import {BookDarkTheme} from '../../_models/book-dark-theme';
import {BookWhiteTheme} from '../../_models/book-white-theme';
import {BookPaperTheme} from '../../_models/book-paper-theme';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {
NgbAccordionBody,
NgbAccordionButton,
@ -31,12 +20,10 @@ import {
NgbAccordionItem,
NgbTooltip
} from '@ng-bootstrap/ng-bootstrap';
import {translate, TranslocoDirective} from "@jsverse/transloco";
import {TranslocoDirective} from "@jsverse/transloco";
import {ReadingProfileService} from "../../../_services/reading-profile.service";
import {ReadingProfile, ReadingProfileKind} from "../../../_models/preferences/reading-profiles";
import {ToastrService} from "ngx-toastr";
import {EpubReaderSettingsService} from "../../../_services/epub-reader-settings.service";
import {tap} from "rxjs/operators";
/**
* Used for book reader. Do not use for other components
@ -107,138 +94,44 @@ export class ReaderSettingsComponent implements OnInit {
private readonly destroyRef = inject(DestroyRef);
private readonly cdRef = inject(ChangeDetectorRef);
private readonly readingProfileService = inject(ReadingProfileService);
private readonly toastr = inject(ToastrService);
@Input({required:true}) seriesId!: number;
@Input({required:true}) readingProfile!: ReadingProfile;
/**
* Outputs when clickToPaginate is changed
*/
@Output() clickToPaginateChanged: EventEmitter<boolean> = new EventEmitter();
/**
* Outputs when a style is updated and the reader needs to render it
*/
@Output() styleUpdate: EventEmitter<PageStyle> = new EventEmitter();
/**
* Outputs when a theme/dark mode is updated
*/
@Output() colorThemeUpdate: EventEmitter<BookTheme> = new EventEmitter();
/**
* Outputs when a layout mode is updated
*/
@Output() layoutModeUpdate: EventEmitter<BookPageLayoutMode> = new EventEmitter();
/**
* Outputs when fullscreen is toggled
*/
@Output() fullscreen: EventEmitter<void> = new EventEmitter();
/**
* Outputs when reading direction is changed
*/
@Output() readingDirection: EventEmitter<ReadingDirection> = new EventEmitter();
/**
* Outputs when reading mode is changed
*/
@Output() bookReaderWritingStyle: EventEmitter<WritingStyle> = new EventEmitter();
/**
* Outputs when immersive mode is changed
*/
@Output() immersiveMode: EventEmitter<boolean> = new EventEmitter();
/**
* List of all font families user can select from
*/
fontOptions: Array<string> = [];
fontFamilies: Array<FontFamily> = [];
/**
* Internal property used to capture all the different css properties to render on all elements
*/
pageStyles: PageStyle = this.readerSettingsService.getDefaultPageStyles();
readingDirectionModel: ReadingDirection = ReadingDirection.LeftToRight;
writingStyleModel: WritingStyle = WritingStyle.Horizontal;
activeTheme: BookTheme | undefined;
isFullscreen: boolean = false;
settingsForm: FormGroup = new FormGroup({});
/**
* The reading profile itself, unless readingProfile is implicit
*/
parentReadingProfile: ReadingProfile | null = null;
/**
* System provided themes
*/
themes: Array<BookTheme> = bookColorThemes;
themes: Array<BookTheme> = this.readerSettingsService.getThemes();
protected readonly pageStyles = this.readerSettingsService.pageStyles;
protected readonly readingDirectionModel = this.readerSettingsService.readingDirection;
protected readonly writingStyleModel = this.readerSettingsService.writingStyle;
protected readonly activeTheme = this.readerSettingsService.activeTheme;
protected readonly layoutMode = this.readerSettingsService.layoutMode;
protected readonly immersiveMode = this.readerSettingsService.immersiveMode;
protected readonly clickToPaginate = this.readerSettingsService.clickToPaginate;
protected readonly isFullscreen = this.readerSettingsService.isFullscreen;
protected readonly canPromoteProfile = this.readerSettingsService.canPromoteProfile;
protected readonly hasParentProfile = this.readerSettingsService.hasParentProfile;
protected readonly parentReadingProfile = this.readerSettingsService.parentReadingProfile;
protected readonly currentReadingProfile = this.readerSettingsService.currentReadingProfile;
async ngOnInit() {
// Initialize the service if not already done
if (!this.readerSettingsService.getCurrentReadingProfile()) {
await this.readerSettingsService.initialize(this.seriesId, this.readingProfile);
}
this.readerSettingsService.readingProfile$.pipe(
takeUntilDestroyed(this.destroyRef),
tap((profile) => {
if (profile) {
this.readingProfile = profile;
this.cdRef.markForCheck();
}
})
).subscribe();
this.settingsForm = this.readerSettingsService.getSettingsForm();
this.fontFamilies = this.readerSettingsService.getFontFamilies();
this.fontOptions = this.fontFamilies.map(f => f.title);
this.themes = this.readerSettingsService.getThemes();
// Subscribe to service state
this.readerSettingsService.pageStyles$.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe(styles => {
this.pageStyles = styles;
this.cdRef.markForCheck();
});
this.readerSettingsService.readingDirection$.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe(direction => {
this.readingDirectionModel = direction;
this.cdRef.markForCheck();
});
this.readerSettingsService.writingStyle$.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe(style => {
this.writingStyleModel = style;
this.cdRef.markForCheck();
});
this.readerSettingsService.activeTheme$.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe(theme => {
this.activeTheme = theme;
this.cdRef.markForCheck();
});
// Handle parent reading profile
if (this.readingProfile.kind === ReadingProfileKind.Implicit) {
this.readingProfileService.getForSeries(this.seriesId, true).subscribe(parent => {
this.parentReadingProfile = parent;
this.cdRef.markForCheck();
});
} else {
this.parentReadingProfile = this.readingProfile;
}
this.cdRef.markForCheck();
}
@ -259,7 +152,6 @@ export class ReaderSettingsComponent implements OnInit {
}
toggleFullscreen() {
this.isFullscreen = !this.isFullscreen;
this.readerSettingsService.toggleFullscreen();
this.cdRef.markForCheck();
}
@ -267,7 +159,6 @@ export class ReaderSettingsComponent implements OnInit {
// menu only code
updateParentPref() {
this.readerSettingsService.updateParentProfile();
this.toastr.success(translate('manga-reader.reading-profile-updated'));
}
createNewProfileFromImplicit() {