From 6464f6d8bbf29bad575d47cb06b3fabef4f12b9e Mon Sep 17 00:00:00 2001 From: Mononaut Date: Wed, 18 Oct 2023 21:14:17 +0000 Subject: [PATCH] Exclude webgl block viz from SSR rendering --- .../block-overview-graph.component.html | 2 +- .../block-overview-graph.component.ts | 66 ++++++++++++------- .../app/components/block/block.component.ts | 6 +- .../mempool-block/mempool-block.component.ts | 13 ++-- 4 files changed, 51 insertions(+), 36 deletions(-) diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html index 1d13e8b4e..247d7c384 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html +++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html @@ -1,7 +1,7 @@
- +
not available
diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts index 95305d72f..559e16279 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts +++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts @@ -94,13 +94,15 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On } ngAfterViewInit(): void { - this.canvas.nativeElement.addEventListener('webglcontextlost', this.handleContextLost, false); - this.canvas.nativeElement.addEventListener('webglcontextrestored', this.handleContextRestored, false); - this.gl = this.canvas.nativeElement.getContext('webgl'); + if (this.canvas) { + this.canvas.nativeElement.addEventListener('webglcontextlost', this.handleContextLost, false); + this.canvas.nativeElement.addEventListener('webglcontextrestored', this.handleContextRestored, false); + this.gl = this.canvas.nativeElement.getContext('webgl'); - if (this.gl) { - this.initCanvas(); - this.resizeCanvas(); + if (this.gl) { + this.initCanvas(); + this.resizeCanvas(); + } } } @@ -142,8 +144,10 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On cancelAnimationFrame(this.animationFrameRequest); clearTimeout(this.animationHeartBeat); } - this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost); - this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored); + if (this.canvas) { + this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost); + this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored); + } } clear(direction): void { @@ -209,6 +213,10 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On } initCanvas(): void { + if (!this.canvas || !this.gl) { + return; + } + this.gl.clearColor(0.0, 0.0, 0.0, 0.0); this.gl.clear(this.gl.COLOR_BUFFER_BIT); @@ -262,24 +270,26 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On @HostListener('window:resize', ['$event']) resizeCanvas(): void { - this.cssWidth = this.canvas.nativeElement.offsetParent.clientWidth; - this.cssHeight = this.canvas.nativeElement.offsetParent.clientHeight; - this.displayWidth = window.devicePixelRatio * this.cssWidth; - this.displayHeight = window.devicePixelRatio * this.cssHeight; - this.canvas.nativeElement.width = this.displayWidth; - this.canvas.nativeElement.height = this.displayHeight; - if (this.gl) { - this.gl.viewport(0, 0, this.displayWidth, this.displayHeight); - } - if (this.scene) { - this.scene.resize({ width: this.displayWidth, height: this.displayHeight, animate: false }); - this.start(); - } else { - this.scene = new BlockScene({ width: this.displayWidth, height: this.displayHeight, resolution: this.resolution, - blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray, - highlighting: this.auditHighlighting, animationDuration: this.animationDuration, animationOffset: this.animationOffset, + if (this.canvas) { + this.cssWidth = this.canvas.nativeElement.offsetParent.clientWidth; + this.cssHeight = this.canvas.nativeElement.offsetParent.clientHeight; + this.displayWidth = window.devicePixelRatio * this.cssWidth; + this.displayHeight = window.devicePixelRatio * this.cssHeight; + this.canvas.nativeElement.width = this.displayWidth; + this.canvas.nativeElement.height = this.displayHeight; + if (this.gl) { + this.gl.viewport(0, 0, this.displayWidth, this.displayHeight); + } + if (this.scene) { + this.scene.resize({ width: this.displayWidth, height: this.displayHeight, animate: false }); + this.start(); + } else { + this.scene = new BlockScene({ width: this.displayWidth, height: this.displayHeight, resolution: this.resolution, + blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray, + highlighting: this.auditHighlighting, animationDuration: this.animationDuration, animationOffset: this.animationOffset, colorFunction: this.getColorFunction() }); - this.start(); + this.start(); + } } } @@ -406,6 +416,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On @HostListener('pointerup', ['$event']) onClick(event) { + if (!this.canvas) { + return; + } if (event.target === this.canvas.nativeElement && event.pointerType === 'touch') { this.setPreviewTx(event.offsetX, event.offsetY, true); } else if (event.target === this.canvas.nativeElement) { @@ -417,6 +430,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On @HostListener('pointermove', ['$event']) onPointerMove(event) { + if (!this.canvas) { + return; + } if (event.target === this.canvas.nativeElement) { this.setPreviewTx(event.offsetX, event.offsetY, false); } else { diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index bb36928b0..b43774a7a 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, OnDestroy, ViewChildren, QueryList } from '@angular/core'; +import { Component, OnInit, OnDestroy, ViewChildren, QueryList, Inject, PLATFORM_ID } from '@angular/core'; import { Location } from '@angular/common'; import { ActivatedRoute, ParamMap, Router } from '@angular/router'; import { ElectrsApiService } from '../../services/electrs-api.service'; @@ -17,6 +17,7 @@ import { seoDescriptionNetwork } from '../../shared/common.utils'; import { PriceService, Price } from '../../services/price.service'; import { CacheService } from '../../services/cache.service'; import { ServicesApiServices } from '../../services/services-api.service'; +import { isPlatformServer } from '@angular/common'; @Component({ selector: 'app-block', @@ -108,8 +109,9 @@ export class BlockComponent implements OnInit, OnDestroy { private priceService: PriceService, private cacheService: CacheService, private servicesApiService: ServicesApiServices, + @Inject(PLATFORM_ID) private platformId: Object, ) { - this.webGlEnabled = detectWebGL(); + this.webGlEnabled = isPlatformServer(this.platformId) || detectWebGL(); } ngOnInit() { diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.ts b/frontend/src/app/components/mempool-block/mempool-block.component.ts index 89fb97dad..e972083a7 100644 --- a/frontend/src/app/components/mempool-block/mempool-block.component.ts +++ b/frontend/src/app/components/mempool-block/mempool-block.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Inject, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; +import { detectWebGL } from '../../shared/graphs.utils'; import { StateService } from '../../services/state.service'; import { ActivatedRoute, ParamMap } from '@angular/router'; import { switchMap, map, tap, filter } from 'rxjs/operators'; @@ -7,6 +8,7 @@ import { Observable, BehaviorSubject } from 'rxjs'; import { SeoService } from '../../services/seo.service'; import { seoDescriptionNetwork } from '../../shared/common.utils'; import { WebsocketService } from '../../services/websocket.service'; +import { isPlatformServer } from '@angular/common'; @Component({ selector: 'app-mempool-block', @@ -29,8 +31,9 @@ export class MempoolBlockComponent implements OnInit, OnDestroy { private seoService: SeoService, private websocketService: WebsocketService, private cd: ChangeDetectorRef, + @Inject(PLATFORM_ID) private platformId: Object, ) { - this.webGlEnabled = detectWebGL(); + this.webGlEnabled = isPlatformServer(this.platformId) || detectWebGL(); } ngOnInit(): void { @@ -93,9 +96,3 @@ export class MempoolBlockComponent implements OnInit, OnDestroy { this.previewTx = event; } } - -function detectWebGL() { - const canvas = document.createElement('canvas'); - const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); - return (gl && gl instanceof WebGLRenderingContext); -}