Developed epub-reader component and it is working as it should work, but there are cases with some epub files, where first page of book is always aligned on left side, when normally is on center. Those alignments are setup on popup window where you can choose "spread to one page" OR "spread to two pages"
dialog example :
<mat-radio-group [(ngModel)]="epubTextOptions.selectedTwoPages" class="inline-button">
<mat-radio-button [value]="false" [checked]="!epubTextOptions.selectedTwoPages" class="inline-button">{{'reader.textOptions.dialog.onePage' | translate}}</mat-radio-button>
<mat-radio-button [value]="true" [checked]="epubTextOptions.selectedTwoPages" class="inline-button">{{'reader.textOptions.dialog.twoPages' | translate}}</mat-radio-button>
</mat-radio-group>
typescript example:
export class MyClass implements OnInit {
book: Book;
rendition: Rendition;
private myMethod() {
this.rendition = this.book.renderTo(this.ePub.nativeElement, {
width: '100%',
height: '100%'
});
this.rendition.spread(this.epubTextOptions.selectedTwoPages ? 'always' : 'none');
}
}
html component :
<div id="epubContent" class="d-flex align-items-center" [style.height]="contentHeight + 'px'">
<app-button *ngIf="displayPrevPageButton() && !isMobileDevice()" (btnClick)="prevPage()"
btnClass="mat-icon-button epub-action"><span class="far fa-chevron-left"></span></app-button>
<div #ePub class="epub-container"></div>
<app-button *ngIf="displayNextPageButton() && !isMobileDevice()" (btnClick)="nextPage()"
btnClass="mat-icon-button epub-action"><span class="far fa-chevron-right"></span></app-button>
</div>
Everything is implemented from epubjs library examples and adapted to reader, but as I said with most of epub spread() functionality is working, but there are epub files, where first page align to left side when "one page" is selected instead of center align.
