Fix mirrored blocks in TV view in LTR time mode

frontend/src/app/components/television/television.component.html

@@ -11,11 +11,15 @@
         [showZoom]="false"
       ></app-mempool-graph>
     </div>
-    <div class="blockchain-wrapper">
+    <div class="blockchain-wrapper" [dir]="timeLtr ? 'rtl' : 'ltr'" [class.time-ltr]="timeLtr">
       <div class="position-container">
-        <app-mempool-blocks></app-mempool-blocks>
+        <span>
-        <app-blockchain-blocks></app-blockchain-blocks>
+          <div class="blocks-wrapper">
-        <div id="divider"></div>
+            <app-mempool-blocks></app-mempool-blocks>
+            <app-blockchain-blocks></app-blockchain-blocks>
+          </div>
+          <div id="divider"></div>
+        </span>
       </div>
     </div>
   </div>

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

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