SSR: fix clock page timeout

This commit is contained in:
Mononaut 2023-10-31 19:53:06 +00:00
parent ab5ee5370a
commit ed73c1e94c
No known key found for this signature in database
GPG key ID: A3F058E41374C04E
2 changed files with 19 additions and 15 deletions

View file

@ -1,6 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
import { Subscription, tap, timer } from 'rxjs';
import { WebsocketService } from '../../services/websocket.service';
import { StateService } from '../../services/state.service';
@Component({
@ -33,17 +32,20 @@ export class ClockFaceComponent implements OnInit, OnChanges, OnDestroy {
}
ngOnInit(): void {
this.timeSubscription = timer(0, 250).pipe(
tap(() => {
this.updateTime();
})
).subscribe();
this.blocksSubscription = this.stateService.blocks$
.subscribe((blocks) => {
this.blockTimes = blocks.map(block => [block.height, new Date(block.timestamp * 1000)]);
this.blockTimes = this.blockTimes.sort((a, b) => a[1].getTime() - b[1].getTime());
this.updateSegments();
});
if (this.stateService.isBrowser) {
this.timeSubscription = timer(0, 250).pipe(
tap(() => {
console.log('face tick');
this.updateTime();
})
).subscribe();
this.blocksSubscription = this.stateService.blocks$
.subscribe((blocks) => {
this.blockTimes = blocks.map(block => [block.height, new Date(block.timestamp * 1000)]);
this.blockTimes = this.blockTimes.sort((a, b) => a[1].getTime() - b[1].getTime());
this.updateSegments();
});
}
}
ngOnChanges(): void {
@ -54,7 +56,9 @@ export class ClockFaceComponent implements OnInit, OnChanges, OnDestroy {
}
ngOnDestroy(): void {
this.timeSubscription.unsubscribe();
if (this.timeSubscription) {
this.timeSubscription.unsubscribe();
}
}
updateTime(): void {

View file

@ -110,8 +110,8 @@ export class ClockComponent implements OnInit {
@HostListener('window:resize', ['$event'])
resizeCanvas(): void {
const windowWidth = this.limitWidth || window.innerWidth;
const windowHeight = this.limitHeight || window.innerHeight;
const windowWidth = this.limitWidth || window.innerWidth || 800;
const windowHeight = this.limitHeight || window.innerHeight || 800;
this.chainWidth = windowWidth;
this.chainHeight = Math.max(60, windowHeight / 8);
this.clockSize = Math.min(800, windowWidth, windowHeight - (1.4 * this.chainHeight));