From e8050208969ee8af554c0aad276bea41dcf304ef Mon Sep 17 00:00:00 2001 From: Julien Maulny Date: Sat, 5 Oct 2019 18:10:49 +0200 Subject: [PATCH] Allow to toggle video publication date to display absolute date --- .../shared/date/date-toggle.component.html | 6 +++ .../shared/date/date-toggle.component.scss | 5 ++ .../app/shared/date/date-toggle.component.ts | 47 +++++++++++++++++++ client/src/app/shared/shared.module.ts | 3 ++ .../video/video-miniature.component.html | 2 +- .../+video-watch/video-watch.component.html | 4 +- 6 files changed, 64 insertions(+), 3 deletions(-) create mode 100644 client/src/app/shared/date/date-toggle.component.html create mode 100644 client/src/app/shared/date/date-toggle.component.scss create mode 100644 client/src/app/shared/date/date-toggle.component.ts 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 @@ + 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') + } +} diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index f6991a66d..8cbb15bfa 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -73,6 +73,7 @@ import { UserNotificationsComponent } from '@app/shared/users/user-notifications import { InstanceService } from '@app/shared/instance/instance.service' import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer' import { ConfirmComponent } from '@app/shared/confirm/confirm.component' +import { DateToggleComponent } from '@app/shared/date/date-toggle.component' import { SmallLoaderComponent } from '@app/shared/misc/small-loader.component' import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' import { PreviewUploadComponent } from '@app/shared/images/preview-upload.component' @@ -165,6 +166,7 @@ import { FeatureBooleanComponent } from '@app/shared/instance/feature-boolean.co TopMenuDropdownComponent, UserNotificationsComponent, ConfirmComponent, + DateToggleComponent, GlobalIconComponent, PreviewUploadComponent @@ -232,6 +234,7 @@ import { FeatureBooleanComponent } from '@app/shared/instance/feature-boolean.co TopMenuDropdownComponent, UserNotificationsComponent, ConfirmComponent, + DateToggleComponent, GlobalIconComponent, PreviewUploadComponent, diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html index 5d5691b75..abd193bb1 100644 --- a/client/src/app/shared/video/video-miniature.component.html +++ b/client/src/app/shared/video/video-miniature.component.html @@ -17,7 +17,7 @@ - {{ video.publishedAt | myFromNow }} + - {{ video.views | myNumberFormatter }} views diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index cd60c407f..68f284be3 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -42,7 +42,7 @@

{{ video.name }}

- Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views + Published - {{ video.views | myNumberFormatter }} views
@@ -51,7 +51,7 @@

{{ video.name }}

- Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views + Published - {{ video.views | myNumberFormatter }} views