Release Testing Part 2 (#1794)

* Stop showing loading indicator when no next/prev chapter

* Fixed a bug where manage collections wasn't named correctly in UI.

* Slight tweaks on email flow

* Fixed a bug where we were grabbing wrong property for book layout mode

* Fixed an issue where pagination area wasn't properly spanning window on different scaling modes.

* Fixed a bug where right pagination area wasn't sticking to the right hand side on original scaling

* Added a note from reading an epub3

* Reworked some of the readme
This commit is contained in:
Joe Milazzo 2023-02-17 17:48:46 -06:00 committed by GitHub
parent 2c4b94cfc3
commit c117d8dc04
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 40 additions and 28 deletions

View file

@ -19,7 +19,7 @@ import { BookWhiteTheme } from '../../_models/book-white-theme';
*/
export interface PageStyle {
'font-family': string;
'font-size': string;
'font-size': string;
'line-height': string;
'margin-left': string;
'margin-right': string;
@ -92,7 +92,7 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
* Outputs when immersive mode is changed
*/
@Output() immersiveMode: EventEmitter<boolean> = new EventEmitter();
user!: User;
/**
* List of all font families user can select from
@ -131,12 +131,12 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
constructor(private bookService: BookService, private accountService: AccountService,
constructor(private bookService: BookService, private accountService: AccountService,
@Inject(DOCUMENT) private document: Document, private themeService: ThemeService,
private readonly cdRef: ChangeDetectorRef) {}
ngOnInit(): void {
this.fontFamilies = this.bookService.getFontFamilies();
this.fontOptions = this.fontFamilies.map(f => f.title);
this.cdRef.markForCheck();
@ -144,7 +144,7 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
if (user) {
this.user = user;
if (this.user.preferences.bookReaderFontFamily === undefined) {
this.user.preferences.bookReaderFontFamily = 'default';
}
@ -161,8 +161,8 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
this.user.preferences.bookReaderReadingDirection = ReadingDirection.LeftToRight;
}
this.readingDirectionModel = this.user.preferences.bookReaderReadingDirection;
this.settingsForm.addControl('bookReaderFontFamily', new FormControl(this.user.preferences.bookReaderFontFamily, []));
this.settingsForm.get('bookReaderFontFamily')!.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(fontName => {
const familyName = this.fontFamilies.filter(f => f.title === fontName)[0].family;
@ -174,7 +174,7 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
this.styleUpdate.emit(this.pageStyles);
});
this.settingsForm.addControl('bookReaderFontSize', new FormControl(this.user.preferences.bookReaderFontSize, []));
this.settingsForm.get('bookReaderFontSize')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(value => {
this.pageStyles['font-size'] = value + '%';
@ -211,14 +211,14 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
}
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.clickToPaginateChanged.emit(this.user.preferences.bookReaderTapToPaginate);
this.clickToPaginateChanged.emit(this.user.preferences.bookReaderTapToPaginate);
this.layoutModeUpdate.emit(this.user.preferences.bookReaderLayoutMode);
this.immersiveMode.emit(this.user.preferences.bookReaderImmersiveMode);
@ -227,7 +227,7 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
this.resetSettings();
}
});
}
@ -243,14 +243,14 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
} 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('layoutMode')?.setValue(this.user.preferences.layoutMode);
this.settingsForm.get('bookReaderLayoutMode')?.setValue(this.user.preferences.bookReaderLayoutMode);
this.settingsForm.get('bookReaderImmersiveMode')?.setValue(this.user.preferences.bookReaderImmersiveMode);
this.cdRef.detectChanges();
this.styleUpdate.emit(this.pageStyles);
@ -263,7 +263,7 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
const windowWidth = window.innerWidth
|| this.document.documentElement.clientWidth
|| this.document.body.clientWidth;
let defaultMargin = '15%';
if (windowWidth <= mobileBreakpointMarginOverride) {

View file

@ -44,7 +44,7 @@
<!-- Pagination controls and screen hints-->
<div class="pagination-area">
<div class="{{readerMode === ReaderMode.LeftRight ? 'left' : 'top'}} {{clickOverlayClass('left')}}" (click)="handlePageChange($event, KeyDirection.Left)"
[ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? ImageHeight: '25%')}">
[ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? ImageHeight: '25%'), 'max-height': MaxHeight}">
<div *ngIf="showClickOverlay">
<i class="fa fa-angle-{{readingDirection === ReadingDirection.RightToLeft ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'left' : 'up'}}"
title="Previous Page" aria-hidden="true"></i>
@ -53,7 +53,8 @@
<div class="{{readerMode === ReaderMode.LeftRight ? 'right' : 'bottom'}} {{clickOverlayClass('right')}}" (click)="handlePageChange($event, KeyDirection.Right)"
[ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? ImageHeight: '25%'),
'left': 'inherit',
'right': RightPaginationOffset + 'px'}">
'right': RightPaginationOffset + 'px',
'max-height': MaxHeight}">
<div *ngIf="showClickOverlay">
<i class="fa fa-angle-{{readingDirection === ReadingDirection.LeftToRight ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'right' : 'down'}}"
title="Next Page" aria-hidden="true"></i>

View file

@ -370,12 +370,22 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
get ImageHeight() {
if (this.FittingOption !== FITTING_OPTION.HEIGHT) return this.mangaReaderService.getPageDimensions(this.pageNum)?.height + 'px';
if (this.FittingOption !== FITTING_OPTION.HEIGHT) {
return this.mangaReaderService.getPageDimensions(this.pageNum)?.height + 'px';
}
return this.readingArea?.nativeElement?.clientHeight + 'px';
}
// This is for the pagination area
get MaxHeight() {
if (this.FittingOption !== FITTING_OPTION.HEIGHT) {
return this.mangaReaderService.getPageDimensions(this.pageNum)?.height + 'px';
}
return 'calc(var(--vh) * 100)';
}
get RightPaginationOffset() {
if (this.readerMode === ReaderMode.LeftRight && this.FittingOption === FITTING_OPTION.HEIGHT) {
if (this.readerMode === ReaderMode.LeftRight && this.FittingOption !== FITTING_OPTION.WIDTH) {
return (this.readingArea?.nativeElement?.scrollLeft || 0) * -1;
}
return 0;