diff --git a/frontend/src/app/components/television/television.component.html b/frontend/src/app/components/television/television.component.html index 7da6e2d38..89cf8e5bb 100644 --- a/frontend/src/app/components/television/television.component.html +++ b/frontend/src/app/components/television/television.component.html @@ -11,11 +11,15 @@ [showZoom]="false" > -
+
- - -
+ +
+ + +
+
+
diff --git a/frontend/src/app/components/television/television.component.scss b/frontend/src/app/components/television/television.component.scss index 50ee7b543..9a6cbcc24 100644 --- a/frontend/src/app/components/television/television.component.scss +++ b/frontend/src/app/components/television/television.component.scss @@ -31,8 +31,9 @@ .position-container { position: absolute; - left: 50%; + left: 0; bottom: 170px; + transform: translateX(50vw); } #divider { @@ -47,9 +48,33 @@ top: -28px; } } + + &.time-ltr { + .blocks-wrapper { + transform: scaleX(-1); + } + } } + +:host-context(.ltr-layout) { + .blockchain-wrapper.time-ltr .blocks-wrapper, + .blockchain-wrapper .blocks-wrapper { + direction: ltr; + } +} + +:host-context(.rtl-layout) { + .blockchain-wrapper.time-ltr .blocks-wrapper, + .blockchain-wrapper .blocks-wrapper { + direction: rtl; + } +} + .tv-container { display: flex; margin-top: 0px; flex-direction: column; } + + + diff --git a/frontend/src/app/components/television/television.component.ts b/frontend/src/app/components/television/television.component.ts index ab1770972..5e3888aa4 100644 --- a/frontend/src/app/components/television/television.component.ts +++ b/frontend/src/app/components/television/television.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { WebsocketService } from '../../services/websocket.service'; import { OptimizedMempoolStats } from '../../interfaces/node-api.interface'; import { StateService } from '../../services/state.service'; @@ -6,7 +6,7 @@ import { ApiService } from '../../services/api.service'; import { SeoService } from '../../services/seo.service'; import { ActivatedRoute } from '@angular/router'; import { map, scan, startWith, switchMap, tap } from 'rxjs/operators'; -import { interval, merge, Observable } from 'rxjs'; +import { interval, merge, Observable, Subscription } from 'rxjs'; import { ChangeDetectionStrategy } from '@angular/core'; @Component({ @@ -15,11 +15,13 @@ import { ChangeDetectionStrategy } from '@angular/core'; styleUrls: ['./television.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class TelevisionComponent implements OnInit { +export class TelevisionComponent implements OnInit, OnDestroy { mempoolStats: OptimizedMempoolStats[] = []; statsSubscription$: Observable; fragment: string; + timeLtrSubscription: Subscription; + timeLtr: boolean = this.stateService.timeLtr.value; constructor( private websocketService: WebsocketService, @@ -37,6 +39,10 @@ export class TelevisionComponent implements OnInit { this.seoService.setTitle($localize`:@@46ce8155c9ab953edeec97e8950b5a21e67d7c4e:TV view`); this.websocketService.want(['blocks', 'live-2h-chart', 'mempool-blocks']); + this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => { + this.timeLtr = !!ltr; + }); + this.statsSubscription$ = merge( this.stateService.live2Chart$.pipe(map(stats => [stats])), this.route.fragment @@ -70,4 +76,8 @@ export class TelevisionComponent implements OnInit { }) ); } + + ngOnDestroy() { + this.timeLtrSubscription.unsubscribe(); + } }