machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Don't fully animate when tab is deactivated.

Browse Source 
refs #47
This commit is contained in:
softsimon 2020-06-11 01:38:59 +07:00
parent 07b543d6bf
commit 56c6612e2e
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
3 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@ -17,6 +17,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
blocksSubscription: Subscription; blocksSubscription: Subscription;
blockStyles = []; blockStyles = [];
interval: any; interval: any;
tabHidden = true;
arrowVisible = false; arrowVisible = false;
arrowLeftPx = 30; arrowLeftPx = 30;
@ -37,6 +38,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
ngOnInit() { ngOnInit() {
this.stateService.networkChanged$.subscribe((network) => this.network = network); this.stateService.networkChanged$.subscribe((network) => this.network = network);
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, refilling]) => {
@ -46,7 +48,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
this.blocks.unshift(block); this.blocks.unshift(block);
this.blocks = this.blocks.slice(0, 8); this.blocks = this.blocks.slice(0, 8);
if (!refilling) { if (!refilling && !this.tabHidden) {
// setTimeout(() => this.audioService.playSound('bright-harmony')); // setTimeout(() => this.audioService.playSound('bright-harmony'));
block.stage = block.matchRate >= 80 ? 1 : 2; block.stage = block.matchRate >= 80 ? 1 : 2;
} }

5
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@ -21,6 +21,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
blockWidth = 125; blockWidth = 125;
blockPadding = 30; blockPadding = 30;
arrowVisible = false; arrowVisible = false;
tabHidden = true;
rightPosition = 0; rightPosition = 0;
transition = '2s'; transition = '2s';
@ -38,6 +39,8 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
) { } ) { }
ngOnInit() { ngOnInit() {
this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
this.mempoolBlocksSubscription = this.stateService.mempoolBlocks$ this.mempoolBlocksSubscription = this.stateService.mempoolBlocks$
.subscribe((blocks) => { .subscribe((blocks) => {
blocks.forEach((block, i) => { blocks.forEach((block, i) => {
@ -65,7 +68,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
this.stateService.blocks$ this.stateService.blocks$
.subscribe(([block]) => { .subscribe(([block]) => {
if (block.matchRate >= 80) { if (block.matchRate >= 80 && !this.tabHidden) {
this.blockIndex++; this.blockIndex++;
} }
}); });

21
frontend/src/app/services/state.service.ts
View File

@ -1,10 +1,11 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { ReplaySubject, BehaviorSubject, Subject } from 'rxjs'; import { ReplaySubject, BehaviorSubject, Subject, fromEvent } from 'rxjs';
import { Block, Transaction } from '../interfaces/electrs.interface'; import { Block, Transaction } from '../interfaces/electrs.interface';
import { MempoolBlock, MemPoolState } from '../interfaces/websocket.interface'; import { MempoolBlock, MemPoolState } from '../interfaces/websocket.interface';
import { OptimizedMempoolStats } from '../interfaces/node-api.interface'; import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
import { Router, NavigationStart } from '@angular/router'; import { Router, NavigationStart } from '@angular/router';
import { KEEP_BLOCKS_AMOUNT } from '../app.constants'; import { KEEP_BLOCKS_AMOUNT } from '../app.constants';
import { shareReplay, map } from 'rxjs/operators';
interface MarkBlockState { interface MarkBlockState {
blockHeight?: number; blockHeight?: number;
@ -32,6 +33,7 @@ export class StateService {
viewFiat$ = new BehaviorSubject<boolean>(false); viewFiat$ = new BehaviorSubject<boolean>(false);
connectionState$ = new BehaviorSubject<0 | 1 | 2>(2); connectionState$ = new BehaviorSubject<0 | 1 | 2>(2);
isTabHidden$ = fromEvent(document, 'visibilitychange').pipe(map((event) => this.isHidden()), shareReplay());
markBlock$ = new ReplaySubject<MarkBlockState>(); markBlock$ = new ReplaySubject<MarkBlockState>();
keyNavigation$ = new Subject<KeyboardEvent>(); keyNavigation$ = new Subject<KeyboardEvent>();
@ -71,4 +73,21 @@ export class StateService {
} }
} }
} }
getHiddenProp(){
const prefixes = ['webkit', 'moz', 'ms', 'o'];
if ('hidden' in document) { return 'hidden'; }
for (const prefix of prefixes) {
if ((prefix + 'Hidden') in document) {
return prefix + 'Hidden';
}
}
return null;
}
isHidden() {
const prop = this.getHiddenProp();
if (!prop) { return false; }
return document[prop];
}
} }