Allow to toggle video publication date to display absolute date

3 files changed, 58 insertions, 0 deletions

diff --git a/client/src/app/shared/date/date-toggle.component.html b/client/src/app/shared/date/date-toggle.component.html
new file mode 100644
index 000000000..ebd4ce442
--- /dev/null
+++ b/client/src/app/shared/date/date-toggle.component.html
@@ -0,0 +1,6 @@
+<span
+  class="date-toggle"
+  [title]="getTitle()"
+  [innerHtml]="getContent()"
+  (click)="toggle()"
+></span>
diff --git a/client/src/app/shared/date/date-toggle.component.scss b/client/src/app/shared/date/date-toggle.component.scss
new file mode 100644
index 000000000..86700d1d4
--- /dev/null
+++ b/client/src/app/shared/date/date-toggle.component.scss
@@ -0,0 +1,5 @@
+.date-toggle {
+  &:hover {
+    cursor: default
+  }
+}
diff --git a/client/src/app/shared/date/date-toggle.component.ts b/client/src/app/shared/date/date-toggle.component.ts
new file mode 100644
index 000000000..fa48da8e8
--- /dev/null
+++ b/client/src/app/shared/date/date-toggle.component.ts
@@ -0,0 +1,47 @@
+import { Component, Input, OnInit, OnChanges } from '@angular/core'
+import { DatePipe } from '@angular/common'
+import { FromNowPipe } from '../angular/from-now.pipe'
+
+@Component({
+  selector: 'my-date-toggle',
+  templateUrl: './date-toggle.component.html',
+  styleUrls: [ './date-toggle.component.scss' ],
+  providers: [ DatePipe, FromNowPipe ]
+})
+export class DateToggleComponent implements OnInit, OnChanges {
+  @Input() date: Date
+  @Input() toggled = false
+
+  dateRelative: string
+  dateAbsolute: string
+
+  constructor (
+    private datePipe: DatePipe,
+    private fromNowPipe: FromNowPipe
+  ) { }
+
+  ngOnInit () {
+    this.updateDates()
+  }
+
+  ngOnChanges () {
+    this.updateDates()
+  }
+
+  toggle () {
+    this.toggled = !this.toggled
+  }
+
+  getTitle () {
+    return this.toggled ? this.dateRelative : this.dateAbsolute
+  }
+
+  getContent () {
+    return this.toggled ? this.dateAbsolute : this.dateRelative
+  }
+
+  private updateDates () {
+    this.dateRelative = this.fromNowPipe.transform(this.date)
+    this.dateAbsolute = this.datePipe.transform(this.date, 'long')
+  }
+}