Change Detection: On Push aka UI Smoothness (#1369)
* Updated Series Info Cards to use OnPush and hooked in progress events when we do a mark as read/unread on entities. These events update progress bars but also will now trigger a re-calculation on Read Time Left. * Removed Library Card Component * Refactored manga reader title and subtitle calculation to the backend. * Coverted card actionables to onPush * Series Card on push cleanup * Updated edit collection tags for on push * Update cover image chooser for on push * Cleaned up carsouel reel * Updated cover image to allow for uploading gif and webp files * Bulk add to collection on push * Updated bulk operation to use on push. Updated bulk operation to have mark as unread and read buttons explicitly. Updated so add to collection is visible and delete. Fixed a bug where manage library component wasn't invoking the trackBy function * Updating entity title for on push * Removed file info component * Updated Mange Library for on push * Entity info cards on push * List item on push * Updated icon and title for on push and fixed some missing change detection on series detail * Restricted the typeahead interface to simplify the design * Edit Series Relation now shows a value in the dropdown for Parent relationships and disables the field. * Updated edit series relation to focus on new typeahead when adding a new relationship * Added some documentation and when Scanning a library, don't allow the user to enqueue the same job multiple times. * Applied the No-enqueue if already enqueued logic to other tasks * Library detail on push * Updated events widget to onpush * Card detail drawer on push. Card detail cover chooser now will show all chapter's covers for selection in cover chooser. * Chapter metadata detail on push * Removed Card Detail modal * All collections on push * Removed some comments * Updated bulk selection to use an observable rather than function calls so new on push strategy works * collection detail now uses on push and scroller is placed on correct element * Updated library recommended to on push. Ensure that when mark as read occurs, the appropriate streams are refreshed. * Updated library detail to on push * Update metadata fiter to onpush. Bugs found and reported to Project * person badge on push * Read more on push * Updated tag badge to on push * User login on push * When initing side nav, don't call an authenticated api until we are sure a user is logged in * Updated splash container to on push * Dashboard on push * Side nav slight refactor around some api calls * Cleaned up series card on push to use same cdRef naming convention * Updated Static Files to use caching * Added width and height to logo image * shortcuts modal on push * reading lists on push * Reading list detail on push * draggable ordered list on push * Refactored reading-list-detail to use a new item which drastically reduces renders on operations * series format on push * circular loader on push * Badge Expander on push * update notification modal on push * drawer on push * Edit Series Modal on push * reset password on push * review series modal on push * series metadata detail on push * theme manager on push * confirm reset password on push * register on push * confirm migration email on push * confirm email on push * add email to account migration on push * user preferences on push. Made global settings default open * edit series relation on push * Fixed an edge case bug for next chapter where if the current volume had a single chapter of 1 and the next volume had a chapter number of 0, it would say there are no more chapters. * Updated infinite scroller with on push support * Moved some animations over to typeahead, not integrated yet. * Manga reader is now on push * Reader settings on push * refactored how we close the book * Updated table of contents for on push * Updated book reader for on push. Fixed a bug where table of contents wasn't showing current page anchor due to a scroll calulation bug * Small code tweak * Icon and title on push * nav header on push * grouped typeahead on push * typeahead on push and added a new trackby identity function to allow even faster rendering of big lists * pdf reader on push * code cleanup
This commit is contained in:
Joseph Milazzo
GitHub
parent
f5be0fac58
commit
4e49aa47ce
126 changed files with 1658 additions and 1674 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
|
||||
import { FormControl, FormGroup } from '@angular/forms';
|
||||
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { Series } from 'src/app/_models/series';
|
||||
|
|
@ -7,20 +7,22 @@ import { SeriesService } from 'src/app/_services/series.service';
|
|||
@Component({
|
||||
selector: 'app-review-series-modal',
|
||||
templateUrl: './review-series-modal.component.html',
|
||||
styleUrls: ['./review-series-modal.component.scss']
|
||||
styleUrls: ['./review-series-modal.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ReviewSeriesModalComponent implements OnInit {
|
||||
|
||||
@Input() series!: Series;
|
||||
reviewGroup!: FormGroup;
|
||||
|
||||
constructor(public modal: NgbActiveModal, private seriesService: SeriesService) {}
|
||||
constructor(public modal: NgbActiveModal, private seriesService: SeriesService, private readonly cdRef: ChangeDetectorRef) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.reviewGroup = new FormGroup({
|
||||
review: new FormControl(this.series.userReview, []),
|
||||
rating: new FormControl(this.series.userRating, [])
|
||||
});
|
||||
this.cdRef.markForCheck();
|
||||
}
|
||||
|
||||
close() {
|
||||
|
|
@ -29,6 +31,7 @@ export class ReviewSeriesModalComponent implements OnInit {
|
|||
|
||||
clearRating() {
|
||||
this.reviewGroup.get('rating')?.setValue(0);
|
||||
this.cdRef.markForCheck();
|
||||
}
|
||||
|
||||
save() {
|
||||
|
|
@ -37,5 +40,4 @@ export class ReviewSeriesModalComponent implements OnInit {
|
|||
this.modal.close({success: true, review: model.review, rating: model.rating});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild, AfterViewInit, Inject, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
|
||||
import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild, Inject, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { NgbModal, NgbNavChangeEvent, NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
|
@ -65,7 +65,7 @@ interface StoryLineItem {
|
|||
styleUrls: ['./series-detail.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class SeriesDetailComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||
export class SeriesDetailComponent implements OnInit, OnDestroy {
|
||||
|
||||
@ViewChild('scrollingBlock') scrollingBlock: ElementRef<HTMLDivElement> | undefined;
|
||||
@ViewChild('companionBar') companionBar: ElementRef<HTMLDivElement> | undefined;
|
||||
|
|
@ -180,16 +180,16 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
case Action.AddToReadingList:
|
||||
this.actionService.addMultipleToReadingList(seriesId, selectedVolumeIds, chapters, () => {
|
||||
this.actionInProgress = false;
|
||||
this.changeDetectionRef.markForCheck();
|
||||
this.bulkSelectionService.deselectAll();
|
||||
this.changeDetectionRef.markForCheck();
|
||||
});
|
||||
break;
|
||||
case Action.MarkAsRead:
|
||||
this.actionService.markMultipleAsRead(seriesId, selectedVolumeIds, chapters, () => {
|
||||
this.setContinuePoint();
|
||||
this.actionInProgress = false;
|
||||
this.changeDetectionRef.markForCheck();
|
||||
this.bulkSelectionService.deselectAll();
|
||||
this.changeDetectionRef.markForCheck();
|
||||
});
|
||||
|
||||
break;
|
||||
|
|
@ -197,8 +197,8 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
this.actionService.markMultipleAsUnread(seriesId, selectedVolumeIds, chapters, () => {
|
||||
this.setContinuePoint();
|
||||
this.actionInProgress = false;
|
||||
this.changeDetectionRef.markForCheck();
|
||||
this.bulkSelectionService.deselectAll();
|
||||
this.changeDetectionRef.markForCheck();
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
|
@ -305,18 +305,6 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
this.onDestroy.complete();
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
// this.initScroll();
|
||||
}
|
||||
|
||||
// initScroll() {
|
||||
// // TODO: Remove this code?
|
||||
// if (this.scrollingBlock === undefined || this.scrollingBlock.nativeElement === undefined) {
|
||||
// setTimeout(() => {this.initScroll()}, 10);
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
|
||||
@HostListener('document:keydown.shift', ['$event'])
|
||||
handleKeypress(event: KeyboardEvent) {
|
||||
if (event.key === KEY_CODES.SHIFT) {
|
||||
|
|
@ -353,22 +341,37 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
});
|
||||
break;
|
||||
case(Action.ScanLibrary):
|
||||
this.actionService.scanSeries(series, () => this.actionInProgress = false);
|
||||
this.actionService.scanSeries(series, () => {
|
||||
this.actionInProgress = false;
|
||||
this.changeDetectionRef.markForCheck();
|
||||
});
|
||||
break;
|
||||
case(Action.RefreshMetadata):
|
||||
this.actionService.refreshMetdata(series, () => this.actionInProgress = false);
|
||||
this.actionService.refreshMetdata(series, () => {
|
||||
this.actionInProgress = false;
|
||||
this.changeDetectionRef.markForCheck();
|
||||
});
|
||||
break;
|
||||
case(Action.Delete):
|
||||
this.deleteSeries(series);
|
||||
break;
|
||||
case(Action.AddToReadingList):
|
||||
this.actionService.addSeriesToReadingList(series, () => this.actionInProgress = false);
|
||||
this.actionService.addSeriesToReadingList(series, () => {
|
||||
this.actionInProgress = false;
|
||||
this.changeDetectionRef.markForCheck();
|
||||
});
|
||||
break;
|
||||
case(Action.AddToCollection):
|
||||
this.actionService.addMultipleSeriesToCollectionTag([series], () => this.actionInProgress = false);
|
||||
this.actionService.addMultipleSeriesToCollectionTag([series], () => {
|
||||
this.actionInProgress = false;
|
||||
this.changeDetectionRef.markForCheck();
|
||||
});
|
||||
break;
|
||||
case (Action.AnalyzeFiles):
|
||||
this.actionService.analyzeFilesForSeries(series, () => this.actionInProgress = false);
|
||||
this.actionService.analyzeFilesForSeries(series, () => {
|
||||
this.actionInProgress = false;
|
||||
this.changeDetectionRef.markForCheck();
|
||||
});
|
||||
break;
|
||||
case (Action.Download):
|
||||
if (this.downloadInProgress) return;
|
||||
|
|
@ -437,7 +440,11 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
}
|
||||
|
||||
loadSeries(seriesId: number) {
|
||||
this.seriesService.getMetadata(seriesId).subscribe(metadata => this.seriesMetadata = metadata);
|
||||
this.seriesService.getMetadata(seriesId).subscribe(metadata => {
|
||||
this.seriesMetadata = metadata;
|
||||
this.changeDetectionRef.markForCheck();
|
||||
});
|
||||
|
||||
this.readingListService.getReadingListsForSeries(seriesId).subscribe(lists => {
|
||||
this.readingLists = lists;
|
||||
this.changeDetectionRef.markForCheck();
|
||||
|
|
@ -673,7 +680,7 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
if (closeResult.success) {
|
||||
this.seriesService.getSeries(this.seriesId).subscribe(s => {
|
||||
this.series = s;
|
||||
this.changeDetectionRef.markForCheck();
|
||||
this.changeDetectionRef.detectChanges();
|
||||
});
|
||||
|
||||
this.loadSeries(this.seriesId);
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
<app-read-more [text]="seriesSummary" [maxLength]="250"></app-read-more>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="row g-0" *ngIf="seriesMetadata.genres && seriesMetadata.genres.length > 0">
|
||||
<div class="col-md-4">
|
||||
<h5>Genres</h5>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { HourEstimateRange } from 'src/app/_models/hour-estimate-range';
|
||||
import { ReaderService } from 'src/app/_services/reader.service';
|
||||
import { TagBadgeCursor } from '../../shared/tag-badge/tag-badge.component';
|
||||
import { FilterQueryParam } from '../../shared/_services/filter-utilities.service';
|
||||
|
|
@ -15,7 +14,8 @@ import { MetadataService } from '../../_services/metadata.service';
|
|||
@Component({
|
||||
selector: 'app-series-metadata-detail',
|
||||
templateUrl: './series-metadata-detail.component.html',
|
||||
styleUrls: ['./series-metadata-detail.component.scss']
|
||||
styleUrls: ['./series-metadata-detail.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class SeriesMetadataDetailComponent implements OnInit, OnChanges {
|
||||
|
||||
|
|
@ -30,9 +30,6 @@ export class SeriesMetadataDetailComponent implements OnInit, OnChanges {
|
|||
isCollapsed: boolean = true;
|
||||
hasExtendedProperites: boolean = false;
|
||||
|
||||
// readingTime: HourEstimateRange = {maxHours: 1, minHours: 1, avgHours: 1};
|
||||
// readingTimeLeft: HourEstimateRange = {maxHours: 1, minHours: 1, avgHours: 1};
|
||||
|
||||
/**
|
||||
* Html representation of Series Summary
|
||||
*/
|
||||
|
|
@ -50,7 +47,9 @@ export class SeriesMetadataDetailComponent implements OnInit, OnChanges {
|
|||
return FilterQueryParam;
|
||||
}
|
||||
|
||||
constructor(public utilityService: UtilityService, public metadataService: MetadataService, private router: Router, public readerService: ReaderService) {
|
||||
constructor(public utilityService: UtilityService, public metadataService: MetadataService,
|
||||
private router: Router, public readerService: ReaderService,
|
||||
private readonly cdRef: ChangeDetectorRef) {
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -68,6 +67,7 @@ export class SeriesMetadataDetailComponent implements OnInit, OnChanges {
|
|||
if (this.seriesMetadata !== null) {
|
||||
this.seriesSummary = (this.seriesMetadata.summary === null ? '' : this.seriesMetadata.summary).replace(/\n/g, '<br>');
|
||||
}
|
||||
this.cdRef.markForCheck();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
|
@ -75,6 +75,7 @@ export class SeriesMetadataDetailComponent implements OnInit, OnChanges {
|
|||
|
||||
toggleView() {
|
||||
this.isCollapsed = !this.isCollapsed;
|
||||
this.cdRef.markForCheck();
|
||||
}
|
||||
|
||||
handleGoTo(event: {queryParamName: FilterQueryParam, filter: any}) {
|
||||
|
|
@ -87,5 +88,4 @@ export class SeriesMetadataDetailComponent implements OnInit, OnChanges {
|
|||
params[FilterQueryParam.Page] = 1;
|
||||
this.router.navigate(['library', this.series.libraryId], {queryParams: params});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue