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();
+ }
}