Merge pull request #3237 from mempool/mononaut/unify-time-components

unify time rendering components

frontend/src/app/bisq/bisq-block/bisq-block.component.html

@@ -24,7 +24,7 @@
                 <td>
                   &lrm;{{ block.time | date:'yyyy-MM-dd HH:mm' }}
                   <div class="lg-inline">
-                    <i class="symbol">(<app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since>)</i>
+                    <i class="symbol">(<app-time kind="since" [time]="block.time / 1000" [fastRender]="true"></app-time>)</i>
                   </div>
                 </td>
               </tr>

frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html

@@ -17,7 +17,7 @@
       <tbody *ngIf="blocks.value; else loadingTmpl">
         <tr *ngFor="let block of blocks.value[0]; trackBy: trackByFn">
           <td><a [routerLink]="['/block/' | relativeUrl, block.hash]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
-          <td><app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since></td>
+          <td><app-time kind="since" [time]="block.time / 1000" [fastRender]="true"></app-time></td>
           <td>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
           <td class="d-none d-md-block">{{ block.txs.length }}</td>
         </tr> 

frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html

@@ -35,7 +35,7 @@
                   <td>
                     &lrm;{{ bisqTx.time | date:'yyyy-MM-dd HH:mm' }}
                     <div class="lg-inline">
-                      <i class="symbol">(<app-time-since [time]="bisqTx.time / 1000" [fastRender]="true"></app-time-since>)</i>
+                      <i class="symbol">(<app-time kind="since" [time]="bisqTx.time / 1000" [fastRender]="true"></app-time>)</i>
                     </div>
                   </td>
                 </tr>

frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html

@@ -37,7 +37,7 @@
             {{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }} <span class="d-none d-md-inline symbol">BSQ</span>
           </ng-template>
         </td>
-        <td><app-time-since [time]="tx.time / 1000" [fastRender]="true"></app-time-since></td>
+        <td><app-time kind="since" [time]="tx.time / 1000" [fastRender]="true"></app-time></td>
         <td class="d-none d-md-block"><a [routerLink]="['/block/' | relativeUrl, tx.blockHash]" [state]="{ data: { blockHeight: tx.blockHeight } }">{{ tx.blockHeight }}</a></td>
       </tr>
     </tbody>

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html

@@ -47,7 +47,7 @@
             <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
           </div>
           <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-time'" class="time-difference">
-            <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></div>
+            <app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time></div>
         </div>
         <div class="animated" [class]="showMiningInfo ? 'show' : 'hide'" *ngIf="block.extras?.pool != undefined">
           <a [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-pool'" class="badge badge-primary"

frontend/src/app/components/blocks-list/blocks-list.component.html

@@ -43,7 +43,7 @@
             ‎{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
           </td>
           <td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
-            <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
+            <app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time>
           </td>
           <td *ngIf="auditAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
             <a

frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.html

@@ -13,7 +13,7 @@
         <td class="d-none d-md-block"><a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height
             }}</a></td>
         <td class="text-left">
-          <app-time-since [time]="diffChange.timestamp" [fastRender]="true"></app-time-since>
+          <app-time kind="since" [time]="diffChange.timestamp" [fastRender]="true"></app-time>
         </td>
         <td class="text-right">{{ diffChange.difficultyShorten }}</td>
         <td class="text-right" [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">

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

@@ -10,7 +10,7 @@
             <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
             <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
           </div>
-          <div class="symbol"><app-time-until [time]="epochData.estimatedRetargetDate" [fastRender]="true"></app-time-until></div>
+          <div class="symbol"><app-time kind="until" [time]="epochData.estimatedRetargetDate" [fastRender]="true"></app-time></div>
         </div>
         <div class="item">
           <h5 class="card-title" i18n="difficulty-box.estimate">Estimate</h5>
@@ -53,7 +53,7 @@
             <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
             <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
           </div>
-          <div class="symbol"><app-time-until [time]="epochData.timeUntilHalving" [fastRender]="true"></app-time-until></div>
+          <div class="symbol"><app-time kind="until" [time]="epochData.timeUntilHalving" [fastRender]="true"></app-time></div>
         </div>
       </div>
     </div>

frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

@@ -23,10 +23,10 @@
             </div>
             <div [attr.data-cy]="'mempool-block-' + i + '-time'" class="time-difference" *ngIf="projectedBlock.blockVSize <= stateService.blockVSize; else mergedBlock">
               <ng-template [ngIf]="network === 'liquid' || network === 'liquidtestnet'" [ngIfElse]="timeDiffMainnet">
-                <app-time-until [time]="(1 * i) + now + 61000" [fastRender]="false" [fixedRender]="true"></app-time-until>
+                <app-time kind="until" [time]="(1 * i) + now + 61000" [fastRender]="false" [fixedRender]="true"></app-time>
               </ng-template>
               <ng-template #timeDiffMainnet>
-                <app-time-until [time]="da.timeAvg * (i + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time-until>
+                <app-time kind="until" [time]="da.timeAvg * (i + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time>
               </ng-template>
             </div>
             <ng-template #mergedBlock>

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

@@ -227,7 +227,7 @@
             ‎{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
           </td>
           <td class="mined">
-            <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
+            <app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time>
           </td>
           <td class="coinbase">
             <span class="badge badge-secondary scriptmessage longer">

frontend/src/app/components/time-since/time-since.component.ts

@@ -1,98 +0,0 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
-import { StateService } from '../../services/state.service';
-import { dates } from '../../shared/i18n/dates';
-
-@Component({
-  selector: 'app-time-since',
-  template: `{{ text }}`,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class TimeSinceComponent implements OnInit, OnChanges, OnDestroy {
-  interval: number;
-  text: string;
-  intervals = {};
-
-  @Input() time: number;
-  @Input() dateString: number;
-  @Input() fastRender = false;
-
-  constructor(
-    private ref: ChangeDetectorRef,
-    private stateService: StateService,
-  ) {
-      this.intervals = {
-        year: 31536000,
-        month: 2592000,
-        week: 604800,
-        day: 86400,
-        hour: 3600,
-        minute: 60,
-        second: 1
-      };
-  }
-
-  ngOnInit() {
-    if (!this.stateService.isBrowser) {
-      this.text = this.calculate();
-      this.ref.markForCheck();
-      return;
-    }
-    this.interval = window.setInterval(() => {
-      this.text = this.calculate();
-      this.ref.markForCheck();
-    }, 1000 * (this.fastRender ? 1 : 60));
-  }
-
-  ngOnChanges() {
-    this.text = this.calculate();
-    this.ref.markForCheck();
-  }
-
-  ngOnDestroy() {
-    clearInterval(this.interval);
-  }
-
-  calculate() {
-    let date: Date;
-    if (this.dateString) {
-      date = new Date(this.dateString)
-    } else {
-      date = new Date(this.time * 1000);
-    }
-    const seconds = Math.floor((+new Date() - +date) / 1000);
-    if (seconds < 60) {
-      return $localize`:@@date-base.just-now:Just now`;
-    }
-    let counter: number;
-    for (const i in this.intervals) {
-      if (this.intervals.hasOwnProperty(i)) {
-        counter = Math.floor(seconds / this.intervals[i]);
-        const dateStrings = dates(counter);
-        if (counter > 0) {
-          if (counter === 1) {
-            switch (i) { // singular (1 day)
-              case 'year': return $localize`:@@time-since:${dateStrings.i18nYear}:DATE: ago`; break;
-              case 'month': return $localize`:@@time-since:${dateStrings.i18nMonth}:DATE: ago`; break;
-              case 'week': return $localize`:@@time-since:${dateStrings.i18nWeek}:DATE: ago`; break;
-              case 'day': return $localize`:@@time-since:${dateStrings.i18nDay}:DATE: ago`; break;
-              case 'hour': return $localize`:@@time-since:${dateStrings.i18nHour}:DATE: ago`; break;
-              case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinute}:DATE: ago`; break;
-              case 'second': return $localize`:@@time-since:${dateStrings.i18nSecond}:DATE: ago`; break;
-            }
-          } else {
-            switch (i) { // plural (2 days)
-              case 'year': return $localize`:@@time-since:${dateStrings.i18nYears}:DATE: ago`; break;
-              case 'month': return $localize`:@@time-since:${dateStrings.i18nMonths}:DATE: ago`; break;
-              case 'week': return $localize`:@@time-since:${dateStrings.i18nWeeks}:DATE: ago`; break;
-              case 'day': return $localize`:@@time-since:${dateStrings.i18nDays}:DATE: ago`; break;
-              case 'hour': return $localize`:@@time-since:${dateStrings.i18nHours}:DATE: ago`; break;
-              case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinutes}:DATE: ago`; break;
-              case 'second': return $localize`:@@time-since:${dateStrings.i18nSeconds}:DATE: ago`; break;
-            }
-          }
-        }
-      }
-    }
-  }
-
-}

frontend/src/app/components/time-span/time-span.component.ts

@@ -1,91 +0,0 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
-import { StateService } from '../../services/state.service';
-import { dates } from '../../shared/i18n/dates';
-
-@Component({
-  selector: 'app-time-span',
-  template: `{{ text }}`,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class TimeSpanComponent implements OnInit, OnChanges, OnDestroy {
-  interval: number;
-  text: string;
-  intervals = {};
-
-  @Input() time: number;
-  @Input() fastRender = false;
-
-  constructor(
-    private ref: ChangeDetectorRef,
-    private stateService: StateService,
-  ) {
-      this.intervals = {
-        year: 31536000,
-        month: 2592000,
-        week: 604800,
-        day: 86400,
-        hour: 3600,
-        minute: 60,
-        second: 1
-      };
-  }
-
-  ngOnInit() {
-    if (!this.stateService.isBrowser) {
-      this.text = this.calculate();
-      this.ref.markForCheck();
-      return;
-    }
-    this.interval = window.setInterval(() => {
-      this.text = this.calculate();
-      this.ref.markForCheck();
-    }, 1000 * (this.fastRender ? 1 : 60));
-  }
-
-  ngOnChanges() {
-    this.text = this.calculate();
-    this.ref.markForCheck();
-  }
-
-  ngOnDestroy() {
-    clearInterval(this.interval);
-  }
-
-  calculate() {
-    const seconds = Math.floor(this.time);
-    if (seconds < 60) {
-      return $localize`:@@date-base.just-now:Just now`;
-    }
-    let counter: number;
-    for (const i in this.intervals) {
-      if (this.intervals.hasOwnProperty(i)) {
-        counter = Math.floor(seconds / this.intervals[i]);
-        const dateStrings = dates(counter);
-        if (counter > 0) {
-          if (counter === 1) {
-            switch (i) { // singular (1 day)
-              case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYear}:DATE:`; break;
-              case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonth}:DATE:`; break;
-              case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeek}:DATE:`; break;
-              case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDay}:DATE:`; break;
-              case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHour}:DATE:`; break;
-              case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinute}:DATE:`; break;
-              case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSecond}:DATE:`; break;
-            }
-          } else {
-            switch (i) { // plural (2 days)
-              case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYears}:DATE:`; break;
-              case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonths}:DATE:`; break;
-              case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeeks}:DATE:`; break;
-              case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDays}:DATE:`; break;
-              case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHours}:DATE:`; break;
-              case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinutes}:DATE:`; break;
-              case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSeconds}:DATE:`; break;
-            }
-          }
-        }
-      }
-    }
-  }
-
-}

frontend/src/app/components/time-until/time-until.component.ts

@@ -1,104 +0,0 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
-import { StateService } from '../../services/state.service';
-import { dates } from '../../shared/i18n/dates';
-
-@Component({
-  selector: 'app-time-until',
-  template: `{{ text }}`,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class TimeUntilComponent implements OnInit, OnChanges, OnDestroy {
-  interval: number;
-  text: string;
-  intervals = {};
-
-  @Input() time: number;
-  @Input() fastRender = false;
-  @Input() fixedRender = false;
-  @Input() forceFloorOnTimeIntervals: string[];
-
-  constructor(
-    private ref: ChangeDetectorRef,
-    private stateService: StateService,
-  ) {
-      this.intervals = {
-        year: 31536000,
-        month: 2592000,
-        week: 604800,
-        day: 86400,
-        hour: 3600,
-        minute: 60,
-        second: 1
-      };
-  }
-
-  ngOnInit() {
-    if(this.fixedRender){
-      this.text = this.calculate();
-      return;
-    }
-    
-    if (!this.stateService.isBrowser) {
-      this.text = this.calculate();
-      this.ref.markForCheck();
-      return;
-    }
-    this.interval = window.setInterval(() => {
-      this.text = this.calculate();
-      this.ref.markForCheck();
-    }, 1000 * (this.fastRender ? 1 : 60));
-  }
-
-  ngOnChanges() {
-    this.text = this.calculate();
-    this.ref.markForCheck();
-  }
-
-  ngOnDestroy() {
-    clearInterval(this.interval);
-  }
-
-  calculate() {
-    const seconds = (+new Date(this.time) - +new Date()) / 1000;
-
-    if (seconds < 60) {
-      const dateStrings = dates(1);
-      return $localize`:@@time-until:In ~${dateStrings.i18nMinute}:DATE:`;
-    }
-    let counter: number;
-    for (const i in this.intervals) {
-      if (this.intervals.hasOwnProperty(i)) {
-        if (this.forceFloorOnTimeIntervals && this.forceFloorOnTimeIntervals.indexOf(i) > -1) {
-          counter = Math.floor(seconds / this.intervals[i]);
-        } else {
-          counter = Math.round(seconds / this.intervals[i]);
-        }
-        const dateStrings = dates(counter);
-        if (counter > 0) {
-          if (counter === 1) {
-            switch (i) { // singular (In ~1 day)
-              case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYear}:DATE:`; break;
-              case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonth}:DATE:`; break;
-              case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeek}:DATE:`; break;
-              case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDay}:DATE:`; break;
-              case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHour}:DATE:`; break;
-              case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinute}:DATE:`;
-              case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSecond}:DATE:`;
-            }
-          } else {
-            switch (i) { // plural (In ~2 days)
-              case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYears}:DATE:`; break;
-              case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonths}:DATE:`; break;
-              case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeeks}:DATE:`; break;
-              case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDays}:DATE:`; break;
-              case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHours}:DATE:`; break;
-              case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinutes}:DATE:`; break;
-              case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSeconds}:DATE:`; break;
-            }
-          }
-        }
-      }
-    }
-  }
-
-}

frontend/src/app/components/time/time.component.ts

@@ -0,0 +1,190 @@
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
+import { StateService } from '../../services/state.service';
+import { dates } from '../../shared/i18n/dates';
+
+@Component({
+  selector: 'app-time',
+  template: `{{ text }}`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TimeComponent implements OnInit, OnChanges, OnDestroy {
+  interval: number;
+  text: string;
+  intervals = {};
+
+  @Input() time: number;
+  @Input() dateString: number;
+  @Input() kind: 'plain' | 'since' | 'until' | 'span' = 'plain';
+  @Input() fastRender = false;
+  @Input() fixedRender = false;
+  @Input() relative = false;
+  @Input() forceFloorOnTimeIntervals: string[];
+
+  constructor(
+    private ref: ChangeDetectorRef,
+    private stateService: StateService,
+  ) {
+      this.intervals = {
+        year: 31536000,
+        month: 2592000,
+        week: 604800,
+        day: 86400,
+        hour: 3600,
+        minute: 60,
+        second: 1
+      };
+  }
+
+  ngOnInit() {
+    if(this.fixedRender){
+      this.text = this.calculate();
+      return;
+    }
+    if (!this.stateService.isBrowser) {
+      this.text = this.calculate();
+      this.ref.markForCheck();
+      return;
+    }
+    this.interval = window.setInterval(() => {
+      this.text = this.calculate();
+      this.ref.markForCheck();
+    }, 1000 * (this.fastRender ? 1 : 60));
+  }
+
+  ngOnChanges() {
+    this.text = this.calculate();
+    this.ref.markForCheck();
+  }
+
+  ngOnDestroy() {
+    clearInterval(this.interval);
+  }
+
+  calculate() {
+    let seconds: number;
+    switch (this.kind) {
+      case 'since':
+        seconds = Math.floor((+new Date() - +new Date(this.dateString || this.time * 1000)) / 1000);
+        break;
+      case 'until':
+        seconds = (+new Date(this.time) - +new Date()) / 1000;
+        break;
+      default:
+        seconds = Math.floor(this.time);
+    }
+
+    if (seconds < 60) {
+      if (this.relative || this.kind === 'since') {
+        return $localize`:@@date-base.just-now:Just now`;
+      } else if (this.kind === 'until') {
+        seconds = 60;
+      }
+    }
+
+    let counter: number;
+    for (const i in this.intervals) {
+      if (this.kind !== 'until' || this.forceFloorOnTimeIntervals && this.forceFloorOnTimeIntervals.indexOf(i) > -1) {
+        counter = Math.floor(seconds / this.intervals[i]);
+      } else {
+        counter = Math.round(seconds / this.intervals[i]);
+      }
+      const dateStrings = dates(counter);
+      if (counter > 0) {
+        switch (this.kind) {
+          case 'since':
+            if (counter === 1) {
+              switch (i) { // singular (1 day)
+                case 'year': return $localize`:@@time-since:${dateStrings.i18nYear}:DATE: ago`; break;
+                case 'month': return $localize`:@@time-since:${dateStrings.i18nMonth}:DATE: ago`; break;
+                case 'week': return $localize`:@@time-since:${dateStrings.i18nWeek}:DATE: ago`; break;
+                case 'day': return $localize`:@@time-since:${dateStrings.i18nDay}:DATE: ago`; break;
+                case 'hour': return $localize`:@@time-since:${dateStrings.i18nHour}:DATE: ago`; break;
+                case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinute}:DATE: ago`; break;
+                case 'second': return $localize`:@@time-since:${dateStrings.i18nSecond}:DATE: ago`; break;
+              }
+            } else {
+              switch (i) { // plural (2 days)
+                case 'year': return $localize`:@@time-since:${dateStrings.i18nYears}:DATE: ago`; break;
+                case 'month': return $localize`:@@time-since:${dateStrings.i18nMonths}:DATE: ago`; break;
+                case 'week': return $localize`:@@time-since:${dateStrings.i18nWeeks}:DATE: ago`; break;
+                case 'day': return $localize`:@@time-since:${dateStrings.i18nDays}:DATE: ago`; break;
+                case 'hour': return $localize`:@@time-since:${dateStrings.i18nHours}:DATE: ago`; break;
+                case 'minute': return $localize`:@@time-since:${dateStrings.i18nMinutes}:DATE: ago`; break;
+                case 'second': return $localize`:@@time-since:${dateStrings.i18nSeconds}:DATE: ago`; break;
+              }
+            }
+            break;
+          case 'until':
+            if (counter === 1) {
+              switch (i) { // singular (In ~1 day)
+                case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYear}:DATE:`; break;
+                case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonth}:DATE:`; break;
+                case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeek}:DATE:`; break;
+                case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDay}:DATE:`; break;
+                case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHour}:DATE:`; break;
+                case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinute}:DATE:`;
+                case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSecond}:DATE:`;
+              }
+            } else {
+              switch (i) { // plural (In ~2 days)
+                case 'year': return $localize`:@@time-until:In ~${dateStrings.i18nYears}:DATE:`; break;
+                case 'month': return $localize`:@@time-until:In ~${dateStrings.i18nMonths}:DATE:`; break;
+                case 'week': return $localize`:@@time-until:In ~${dateStrings.i18nWeeks}:DATE:`; break;
+                case 'day': return $localize`:@@time-until:In ~${dateStrings.i18nDays}:DATE:`; break;
+                case 'hour': return $localize`:@@time-until:In ~${dateStrings.i18nHours}:DATE:`; break;
+                case 'minute': return $localize`:@@time-until:In ~${dateStrings.i18nMinutes}:DATE:`; break;
+                case 'second': return $localize`:@@time-until:In ~${dateStrings.i18nSeconds}:DATE:`; break;
+              }
+            }
+            break;
+          case 'span':
+            if (counter === 1) {
+              switch (i) { // singular (1 day)
+                case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYear}:DATE:`; break;
+                case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonth}:DATE:`; break;
+                case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeek}:DATE:`; break;
+                case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDay}:DATE:`; break;
+                case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHour}:DATE:`; break;
+                case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinute}:DATE:`; break;
+                case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSecond}:DATE:`; break;
+              }
+            } else {
+              switch (i) { // plural (2 days)
+                case 'year': return $localize`:@@time-span:After ${dateStrings.i18nYears}:DATE:`; break;
+                case 'month': return $localize`:@@time-span:After ${dateStrings.i18nMonths}:DATE:`; break;
+                case 'week': return $localize`:@@time-span:After ${dateStrings.i18nWeeks}:DATE:`; break;
+                case 'day': return $localize`:@@time-span:After ${dateStrings.i18nDays}:DATE:`; break;
+                case 'hour': return $localize`:@@time-span:After ${dateStrings.i18nHours}:DATE:`; break;
+                case 'minute': return $localize`:@@time-span:After ${dateStrings.i18nMinutes}:DATE:`; break;
+                case 'second': return $localize`:@@time-span:After ${dateStrings.i18nSeconds}:DATE:`; break;
+              }
+            }
+            break;
+          default:
+            if (counter === 1) {
+              switch (i) { // singular (1 day)
+                case 'year': return dateStrings.i18nYear; break;
+                case 'month': return dateStrings.i18nMonth; break;
+                case 'week': return dateStrings.i18nWeek; break;
+                case 'day': return dateStrings.i18nDay; break;
+                case 'hour': return dateStrings.i18nHour; break;
+                case 'minute': return dateStrings.i18nMinute; break;
+                case 'second': return dateStrings.i18nSecond; break;
+              }
+            } else {
+              switch (i) { // plural (2 days)
+                case 'year': return dateStrings.i18nYears; break;
+                case 'month': return dateStrings.i18nMonths; break;
+                case 'week': return dateStrings.i18nWeeks; break;
+                case 'day': return dateStrings.i18nDays; break;
+                case 'hour': return dateStrings.i18nHours; break;
+                case 'minute': return dateStrings.i18nMinutes; break;
+                case 'second': return dateStrings.i18nSeconds; break;
+              }
+            }
+        }
+      }
+    }
+  }
+
+}

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

@@ -57,14 +57,14 @@
                   <td>
                     &lrm;{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}
                     <div class="lg-inline">
-                      <i class="symbol">(<app-time-since [time]="tx.status.block_time" [fastRender]="true"></app-time-since>)</i>
+                      <i class="symbol">(<app-time kind="since" [time]="tx.status.block_time" [fastRender]="true"></app-time>)</i>
                     </div>
                   </td>
                 </tr>
                 <ng-template [ngIf]="transactionTime > 0">
                   <tr>
                     <td i18n="transaction.confirmed|Transaction Confirmed state">Confirmed</td>
-                    <td><app-time-span [time]="tx.status.block_time - transactionTime" [fastRender]="true"></app-time-span></td>
+                    <td><app-time kind="span" [time]="tx.status.block_time - transactionTime" [fastRender]="true" [relative]="true"></app-time></td>
                   </tr>
                 </ng-template>
                 <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
@@ -100,7 +100,7 @@
                   <ng-template #firstSeenTmpl>
                     <tr>
                       <td i18n="transaction.first-seen|Transaction first seen">First seen</td>
-                      <td><i><app-time-since [time]="transactionTime" [fastRender]="true"></app-time-since></i></td>
+                      <td><i><app-time kind="since" [time]="transactionTime" [fastRender]="true"></app-time></i></td>
                     </tr>
                   </ng-template>
                 </ng-template>
@@ -116,10 +116,10 @@
                       </ng-template>
                       <ng-template #belowBlockLimit>
                         <ng-template [ngIf]="network === 'liquid' || network === 'liquidtestnet'" [ngIfElse]="timeEstimateDefault">
-                          <app-time-until [time]="(60 * 1000 * txInBlockIndex) + now" [fastRender]="false" [fixedRender]="true"></app-time-until>
+                          <app-time kind="until" [time]="(60 * 1000 * txInBlockIndex) + now" [fastRender]="false" [fixedRender]="true"></app-time>
                         </ng-template>
                         <ng-template #timeEstimateDefault>
-                          <app-time-until *ngIf="(timeAvg$ | async) as timeAvg;" [time]="(timeAvg * txInBlockIndex) + now + timeAvg" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time-until>
+                          <app-time kind="until" *ngIf="(timeAvg$ | async) as timeAvg;" [time]="(timeAvg * txInBlockIndex) + now + timeAvg" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time>
                         </ng-template>
                       </ng-template>
                     </ng-template>

frontend/src/app/components/transactions-list/transactions-list.component.html

@@ -6,7 +6,7 @@
     <div>
       <ng-template [ngIf]="tx.status.confirmed">&lrm;{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}</ng-template>
       <ng-template [ngIf]="!tx.status.confirmed && tx.firstSeen">
-        <i><app-time-since [time]="tx.firstSeen" [fastRender]="true"></app-time-since></i>
+        <i><app-time kind="since" [time]="tx.firstSeen" [fastRender]="true"></app-time></i>
       </ng-template>
     </div>
   </div>

frontend/src/app/dashboard/dashboard.component.html

@@ -93,7 +93,7 @@
             <tbody>
               <tr *ngFor="let block of blocks$ | async; let i = index; trackBy: trackByBlock">
                 <td class="table-cell-height" ><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
-                <td *ngIf="!stateService.env.MINING_DASHBOARD" class="table-cell-mined" ><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
+                <td *ngIf="!stateService.env.MINING_DASHBOARD" class="table-cell-mined" ><app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time></td>
                 <td *ngIf="stateService.env.MINING_DASHBOARD" class="table-cell-mined pl-lg-4">
                   <a class="clear-link" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
                     <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"

frontend/src/app/shared/components/timestamp/timestamp.component.html

@@ -2,6 +2,6 @@
 <span *ngIf="seconds !== undefined">
   &lrm;{{ seconds * 1000 | date: customFormat ?? 'yyyy-MM-dd HH:mm' }}
   <div class="lg-inline" *ngIf="!hideTimeSince">
-    <i class="symbol">(<app-time-since [time]="seconds" [fastRender]="true"></app-time-since>)</i>
+    <i class="symbol">(<app-time kind="since" [time]="seconds" [fastRender]="true"></app-time>)</i>
   </div>
 </span>

frontend/src/app/shared/shared.module.ts

@@ -25,8 +25,7 @@ import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe';
 import { WuBytesPipe } from './pipes/bytes-pipe/wubytes.pipe';
 import { FiatCurrencyPipe } from './pipes/fiat-currency.pipe';
 import { BlockchainComponent } from '../components/blockchain/blockchain.component';
-import { TimeSinceComponent } from '../components/time-since/time-since.component';
+import { TimeComponent } from '../components/time/time.component';
-import { TimeUntilComponent } from '../components/time-until/time-until.component';
 import { ClipboardComponent } from '../components/clipboard/clipboard.component';
 import { QrcodeComponent } from '../components/qrcode/qrcode.component';
 import { FiatComponent } from '../fiat/fiat.component';
@@ -53,7 +52,6 @@ import { AddressComponent } from '../components/address/address.component';
 import { SearchFormComponent } from '../components/search-form/search-form.component';
 import { AddressLabelsComponent } from '../components/address-labels/address-labels.component';
 import { FooterComponent } from '../components/footer/footer.component';
-import { TimeSpanComponent } from '../components/time-span/time-span.component';
 import { AssetComponent } from '../components/asset/asset.component';
 import { AssetsComponent } from '../components/assets/assets.component';
 import { AssetsNavComponent } from '../components/assets/assets-nav/assets-nav.component';
@@ -88,8 +86,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
 @NgModule({
   declarations: [
     ClipboardComponent,
-    TimeSinceComponent,
+    TimeComponent,
-    TimeUntilComponent,
     QrcodeComponent,
     FiatComponent,
     TxFeaturesComponent,
@@ -129,7 +126,6 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     TransactionsListComponent,
     AddressComponent,
     SearchFormComponent,
-    TimeSpanComponent,
     AddressLabelsComponent,
     FooterComponent,
     AssetComponent,
@@ -195,8 +191,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     NgbCollapseModule,
     InfiniteScrollModule,
     FontAwesomeModule,
-    TimeSinceComponent,
+    TimeComponent,
-    TimeUntilComponent,
     ClipboardComponent,
     QrcodeComponent,
     FiatComponent,
@@ -232,7 +227,6 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     TransactionsListComponent,
     AddressComponent,
     SearchFormComponent,
-    TimeSpanComponent,
     AddressLabelsComponent,
     FooterComponent,
     AssetComponent,