Don't fully animate when tab is deactivated.

refs #47

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts

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

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

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

frontend/src/app/services/state.service.ts

@@ -1,10 +1,11 @@
 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 { MempoolBlock, MemPoolState } from '../interfaces/websocket.interface';
 import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { Router, NavigationStart } from '@angular/router';
 import { KEEP_BLOCKS_AMOUNT } from '../app.constants';
+import { shareReplay, map } from 'rxjs/operators';
 
 interface MarkBlockState {
   blockHeight?: number;
@@ -32,6 +33,7 @@ export class StateService {
 
   viewFiat$ = new BehaviorSubject<boolean>(false);
   connectionState$ = new BehaviorSubject<0 | 1 | 2>(2);
+  isTabHidden$ = fromEvent(document, 'visibilitychange').pipe(map((event) => this.isHidden()), shareReplay());
 
   markBlock$ = new ReplaySubject<MarkBlockState>();
   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];
+  }
 }