From 6ec1cc3fd5bea16f0ecdf45c76c667939b35abe0 Mon Sep 17 00:00:00 2001 From: softsimon Date: Thu, 20 Feb 2025 22:08:14 +0700 Subject: [PATCH] Deprecating the tv view --- frontend/cypress/e2e/liquid/liquid.spec.ts | 5 -- .../e2e/liquidtestnet/liquidtestnet.spec.ts | 5 -- frontend/cypress/e2e/mainnet/mainnet.spec.ts | 20 ----- .../liquid-master-page.component.html | 5 -- .../statistics/statistics.component.html | 3 - .../television/television.component.html | 25 ------ .../television/television.component.scss | 80 ----------------- .../television/television.component.ts | 86 ------------------- frontend/src/app/graphs/graphs.module.ts | 2 - .../src/app/graphs/graphs.routing.module.ts | 6 -- 10 files changed, 237 deletions(-) delete mode 100644 frontend/src/app/components/television/television.component.html delete mode 100644 frontend/src/app/components/television/television.component.scss delete mode 100644 frontend/src/app/components/television/television.component.ts diff --git a/frontend/cypress/e2e/liquid/liquid.spec.ts b/frontend/cypress/e2e/liquid/liquid.spec.ts index c7d2a92ee..4fb7431d9 100644 --- a/frontend/cypress/e2e/liquid/liquid.spec.ts +++ b/frontend/cypress/e2e/liquid/liquid.spec.ts @@ -57,11 +57,6 @@ describe('Liquid', () => { }); }); - it('loads the tv page - desktop', () => { - cy.visit(`${basePath}/tv`); - cy.waitForSkeletonGone(); - }); - it('loads the graphs page - mobile', () => { cy.visit(`${basePath}`) cy.waitForSkeletonGone(); diff --git a/frontend/cypress/e2e/liquidtestnet/liquidtestnet.spec.ts b/frontend/cypress/e2e/liquidtestnet/liquidtestnet.spec.ts index 54e355ce8..7befda49f 100644 --- a/frontend/cypress/e2e/liquidtestnet/liquidtestnet.spec.ts +++ b/frontend/cypress/e2e/liquidtestnet/liquidtestnet.spec.ts @@ -57,11 +57,6 @@ describe('Liquid Testnet', () => { cy.waitForSkeletonGone(); }); - it('loads the tv page - desktop', () => { - cy.visit(`${basePath}/tv`); - cy.waitForSkeletonGone(); - }); - it('loads the graphs page - mobile', () => { cy.visit(`${basePath}`) cy.waitForSkeletonGone(); diff --git a/frontend/cypress/e2e/mainnet/mainnet.spec.ts b/frontend/cypress/e2e/mainnet/mainnet.spec.ts index 7e17c09cd..08a4741b3 100644 --- a/frontend/cypress/e2e/mainnet/mainnet.spec.ts +++ b/frontend/cypress/e2e/mainnet/mainnet.spec.ts @@ -415,26 +415,6 @@ describe('Mainnet', () => { }); }); - it('loads the tv screen - desktop', () => { - cy.viewport('macbook-16'); - cy.visit('/graphs/mempool'); - cy.waitForSkeletonGone(); - cy.get('#btn-tv').click().then(() => { - cy.viewport('macbook-16'); - cy.get('.chart-holder'); - cy.get('.blockchain-wrapper').should('be.visible'); - cy.get('#mempool-block-0').should('be.visible'); - }); - }); - - it('loads the tv screen - mobile', () => { - cy.viewport('iphone-6'); - cy.visit('/tv'); - cy.waitForSkeletonGone(); - cy.get('.chart-holder'); - cy.get('.blockchain-wrapper').should('not.visible'); - }); - it('loads the api screen', () => { cy.visit('/'); cy.waitForSkeletonGone(); diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html index 7e39d9341..cd016471b 100644 --- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html +++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html @@ -70,11 +70,6 @@ - diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html index 168a3c0c3..eb37cc858 100644 --- a/frontend/src/app/components/statistics/statistics.component.html +++ b/frontend/src/app/components/statistics/statistics.component.html @@ -16,9 +16,6 @@ - - -
diff --git a/frontend/src/app/components/television/television.component.html b/frontend/src/app/components/television/television.component.html deleted file mode 100644 index 23dd18389..000000000 --- a/frontend/src/app/components/television/television.component.html +++ /dev/null @@ -1,25 +0,0 @@ -
-
-
- -
-
-
- -
- - -
-
- -
-
-
-
diff --git a/frontend/src/app/components/television/television.component.scss b/frontend/src/app/components/television/television.component.scss deleted file mode 100644 index 9a6cbcc24..000000000 --- a/frontend/src/app/components/television/television.component.scss +++ /dev/null @@ -1,80 +0,0 @@ - -.loading { - margin: auto; - width: 100%; - display: flex; - text-align: center; - justify-content: center; - height: 100vh; - align-items: center; -} - -#tv-wrapper { - height: 100vh; - overflow: hidden; - position: relative; -} - -.chart-holder { - position: relative; - height: 655px; - width: 100%; - margin: 30px auto 0; -} - -.blockchain-wrapper { - display: block; - height: 100%; - min-height: 240px; - position: relative; - top: 30px; - - .position-container { - position: absolute; - left: 0; - bottom: 170px; - transform: translateX(50vw); - } - - #divider { - width: 2px; - height: 175px; - left: 0; - top: -40px; - position: absolute; - img { - position: absolute; - left: -100px; - 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 deleted file mode 100644 index 1507f3d97..000000000 --- a/frontend/src/app/components/television/television.component.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; -import { WebsocketService } from '@app/services/websocket.service'; -import { OptimizedMempoolStats } from '@interfaces/node-api.interface'; -import { StateService } from '@app/services/state.service'; -import { ApiService } from '@app/services/api.service'; -import { SeoService } from '@app/services/seo.service'; -import { ActivatedRoute } from '@angular/router'; -import { map, scan, startWith, switchMap, tap } from 'rxjs/operators'; -import { interval, merge, Observable, Subscription } from 'rxjs'; -import { ChangeDetectionStrategy } from '@angular/core'; - -@Component({ - selector: 'app-television', - templateUrl: './television.component.html', - styleUrls: ['./television.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class TelevisionComponent implements OnInit, OnDestroy { - - mempoolStats: OptimizedMempoolStats[] = []; - statsSubscription$: Observable; - fragment: string; - timeLtrSubscription: Subscription; - timeLtr: boolean = this.stateService.timeLtr.value; - - constructor( - private websocketService: WebsocketService, - private apiService: ApiService, - private stateService: StateService, - private seoService: SeoService, - private route: ActivatedRoute - ) { } - - refreshStats(time: number, fn: Observable) { - return interval(time).pipe(startWith(0), switchMap(() => fn)); - } - - ngOnInit() { - this.seoService.setTitle($localize`:@@46ce8155c9ab953edeec97e8950b5a21e67d7c4e:TV view`); - this.seoService.setDescription($localize`:@@meta.description.tv:See Bitcoin blocks and mempool congestion in real-time in a simplified format perfect for a TV.`); - 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 - .pipe( - tap(fragment => { this.fragment = fragment ?? '2h'; }), - switchMap((fragment) => { - const minute = 60000; const hour = 3600000; - switch (fragment) { - case '24h': return this.apiService.list24HStatistics$(); - case '1w': return this.refreshStats(5 * minute, this.apiService.list1WStatistics$()); - case '1m': return this.refreshStats(30 * minute, this.apiService.list1MStatistics$()); - case '3m': return this.refreshStats(2 * hour, this.apiService.list3MStatistics$()); - case '6m': return this.refreshStats(3 * hour, this.apiService.list6MStatistics$()); - case '1y': return this.refreshStats(8 * hour, this.apiService.list1YStatistics$()); - case '2y': return this.refreshStats(8 * hour, this.apiService.list2YStatistics$()); - case '3y': return this.refreshStats(12 * hour, this.apiService.list3YStatistics$()); - default /* 2h */: return this.apiService.list2HStatistics$(); - } - }) - ) - ) - .pipe( - scan((mempoolStats, newStats) => { - if (newStats.length > 1) { - mempoolStats = newStats; - } else if (['2h', '24h'].includes(this.fragment)) { - mempoolStats.unshift(newStats[0]); - const now = Date.now() / 1000; - const start = now - (this.fragment === '2h' ? (2 * 60 * 60) : (24 * 60 * 60) ); - mempoolStats = mempoolStats.filter(p => p.added >= start); - } - return mempoolStats; - }) - ); - } - - ngOnDestroy() { - this.timeLtrSubscription.unsubscribe(); - } -} diff --git a/frontend/src/app/graphs/graphs.module.ts b/frontend/src/app/graphs/graphs.module.ts index f882b4221..8ebf06f7c 100644 --- a/frontend/src/app/graphs/graphs.module.ts +++ b/frontend/src/app/graphs/graphs.module.ts @@ -26,7 +26,6 @@ import { StatisticsComponent } from '@components/statistics/statistics.component import { MempoolBlockComponent } from '@components/mempool-block/mempool-block.component'; import { PoolRankingComponent } from '@components/pool-ranking/pool-ranking.component'; import { PoolComponent } from '@components/pool/pool.component'; -import { TelevisionComponent } from '@components/television/television.component'; import { DashboardComponent } from '@app/dashboard/dashboard.component'; import { CustomDashboardComponent } from '@components/custom-dashboard/custom-dashboard.component'; import { MiningDashboardComponent } from '@components/mining-dashboard/mining-dashboard.component'; @@ -56,7 +55,6 @@ import { CommonModule } from '@angular/common'; AcceleratorDashboardComponent, PoolComponent, PoolRankingComponent, - TelevisionComponent, StatisticsComponent, GraphsComponent, diff --git a/frontend/src/app/graphs/graphs.routing.module.ts b/frontend/src/app/graphs/graphs.routing.module.ts index 886d55072..e8dbaece3 100644 --- a/frontend/src/app/graphs/graphs.routing.module.ts +++ b/frontend/src/app/graphs/graphs.routing.module.ts @@ -16,7 +16,6 @@ import { PoolRankingComponent } from '@components/pool-ranking/pool-ranking.comp import { PoolComponent } from '@components/pool/pool.component'; import { StartComponent } from '@components/start/start.component'; import { StatisticsComponent } from '@components/statistics/statistics.component'; -import { TelevisionComponent } from '@components/television/television.component'; import { DashboardComponent } from '@app/dashboard/dashboard.component'; import { CustomDashboardComponent } from '@components/custom-dashboard/custom-dashboard.component'; import { AccelerationFeesGraphComponent } from '@components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component'; @@ -180,11 +179,6 @@ const routes: Routes = [ }, ] }, - { - path: 'tv', - data: { networks: ['bitcoin', 'liquid'] }, - component: TelevisionComponent - }, ]; @NgModule({