Fix for weird block animation when navigating back to main page.

This commit is contained in:
softsimon 2020-07-21 12:47:51 +07:00
parent a1b931851a
commit 942e1a7d68
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
3 changed files with 10 additions and 8 deletions

View File

@ -4,6 +4,7 @@ import { Block } from 'src/app/interfaces/electrs.interface';
import { StateService } from 'src/app/services/state.service'; import { StateService } from 'src/app/services/state.service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { AudioService } from 'src/app/services/audio.service'; import { AudioService } from 'src/app/services/audio.service';
import { env } from 'src/app/app.constants';
@Component({ @Component({
selector: 'app-blockchain-blocks', selector: 'app-blockchain-blocks',
@ -21,7 +22,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
arrowVisible = false; arrowVisible = false;
arrowLeftPx = 30; arrowLeftPx = 30;
blocksFilled = false;
transition = '1s'; transition = '1s';
gradientColors = { gradientColors = {
@ -34,7 +35,6 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
constructor( constructor(
private stateService: StateService, private stateService: StateService,
private router: Router, private router: Router,
private audioService: AudioService,
) { } ) { }
ngOnInit() { ngOnInit() {
@ -42,15 +42,14 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden); this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
this.blocksSubscription = this.stateService.blocks$ this.blocksSubscription = this.stateService.blocks$
.subscribe(([block, txConfirmed, refilling]) => { .subscribe(([block, txConfirmed]) => {
if (this.blocks.some((b) => b.height === block.height)) { if (this.blocks.some((b) => b.height === block.height)) {
return; return;
} }
this.blocks.unshift(block); this.blocks.unshift(block);
this.blocks = this.blocks.slice(0, 8); this.blocks = this.blocks.slice(0, 8);
if (!refilling && !this.tabHidden) { if (this.blocksFilled && !this.tabHidden) {
// setTimeout(() => this.audioService.playSound('bright-harmony'));
block.stage = block.matchRate >= 66 ? 1 : 2; block.stage = block.matchRate >= 66 ? 1 : 2;
} }
@ -68,6 +67,9 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b))); this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
}, 50); }, 50);
if (this.blocks.length === env.KEEP_BLOCKS_AMOUNT) {
this.blocksFilled = true;
}
}); });
this.stateService.markBlock$ this.stateService.markBlock$

View File

@ -21,7 +21,7 @@ export class StateService {
latestBlockHeight = 0; latestBlockHeight = 0;
networkChanged$ = new ReplaySubject<string>(1); networkChanged$ = new ReplaySubject<string>(1);
blocks$ = new ReplaySubject<[Block, boolean, boolean]>(env.KEEP_BLOCKS_AMOUNT); blocks$ = new ReplaySubject<[Block, boolean]>(env.KEEP_BLOCKS_AMOUNT);
conversions$ = new ReplaySubject<any>(1); conversions$ = new ReplaySubject<any>(1);
bsqPrice$ = new ReplaySubject<number>(1); bsqPrice$ = new ReplaySubject<number>(1);
mempoolStats$ = new ReplaySubject<MemPoolState>(1); mempoolStats$ = new ReplaySubject<MemPoolState>(1);

View File

@ -67,7 +67,7 @@ export class WebsocketService {
blocks.forEach((block: Block) => { blocks.forEach((block: Block) => {
if (block.height > this.stateService.latestBlockHeight) { if (block.height > this.stateService.latestBlockHeight) {
this.stateService.latestBlockHeight = block.height; this.stateService.latestBlockHeight = block.height;
this.stateService.blocks$.next([block, false, true]); this.stateService.blocks$.next([block, false]);
} }
}); });
} }
@ -79,7 +79,7 @@ export class WebsocketService {
if (response.block) { if (response.block) {
if (response.block.height > this.stateService.latestBlockHeight) { if (response.block.height > this.stateService.latestBlockHeight) {
this.stateService.latestBlockHeight = response.block.height; this.stateService.latestBlockHeight = response.block.height;
this.stateService.blocks$.next([response.block, !!response.txConfirmed, false]); this.stateService.blocks$.next([response.block, !!response.txConfirmed]);
} }
if (response.txConfirmed) { if (response.txConfirmed) {