SSR: fix clock page timeout
This commit is contained in:
		
							parent
							
								
									ab5ee5370a
								
							
						
					
					
						commit
						ed73c1e94c
					
				| @ -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(); | ||||||
|  | |||||||
| @ -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)); | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user