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 { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
import { Subscription, tap, timer } from 'rxjs'; import { Subscription, tap, timer } from 'rxjs';
import { WebsocketService } from '../../services/websocket.service';
import { StateService } from '../../services/state.service'; import { StateService } from '../../services/state.service';
@Component({ @Component({
@ -33,8 +32,10 @@ export class ClockFaceComponent implements OnInit, OnChanges, OnDestroy {
} }
ngOnInit(): void { ngOnInit(): void {
if (this.stateService.isBrowser) {
this.timeSubscription = timer(0, 250).pipe( this.timeSubscription = timer(0, 250).pipe(
tap(() => { tap(() => {
console.log('face tick');
this.updateTime(); this.updateTime();
}) })
).subscribe(); ).subscribe();
@ -45,6 +46,7 @@ export class ClockFaceComponent implements OnInit, OnChanges, OnDestroy {
this.updateSegments(); this.updateSegments();
}); });
} }
}
ngOnChanges(): void { ngOnChanges(): void {
this.faceStyle = { this.faceStyle = {
@ -54,8 +56,10 @@ export class ClockFaceComponent implements OnInit, OnChanges, OnDestroy {
} }
ngOnDestroy(): void { ngOnDestroy(): void {
if (this.timeSubscription) {
this.timeSubscription.unsubscribe(); this.timeSubscription.unsubscribe();
} }
}
updateTime(): void { updateTime(): void {
const now = new Date(); const now = new Date();

View File

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