aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorJulien Maulny <julien.maulny@protonmail.com>2019-10-05 18:10:49 +0200
committerChocobozzz <chocobozzz@cpy.re>2019-10-23 10:47:34 +0200
commite8050208969ee8af554c0aad276bea41dcf304ef (patch)
treea82203fde250afb4318921584a59d17ee129571a /client
parent18c9772876d0e36a4f404d914140f3d24d6037e1 (diff)
downloadPeerTube-e8050208969ee8af554c0aad276bea41dcf304ef.tar.gz
PeerTube-e8050208969ee8af554c0aad276bea41dcf304ef.tar.zst
PeerTube-e8050208969ee8af554c0aad276bea41dcf304ef.zip
Allow to toggle video publication date to display absolute date
Diffstat (limited to 'client')
-rw-r--r--client/src/app/shared/date/date-toggle.component.html6
-rw-r--r--client/src/app/shared/date/date-toggle.component.scss5
-rw-r--r--client/src/app/shared/date/date-toggle.component.ts47
-rw-r--r--client/src/app/shared/shared.module.ts3
-rw-r--r--client/src/app/shared/video/video-miniature.component.html2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html4
6 files changed, 64 insertions, 3 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 @@
1<span
2 class="date-toggle"
3 [title]="getTitle()"
4 [innerHtml]="getContent()"
5 (click)="toggle()"
6></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 @@
1.date-toggle {
2 &:hover {
3 cursor: default
4 }
5}
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 @@
1import { Component, Input, OnInit, OnChanges } from '@angular/core'
2import { DatePipe } from '@angular/common'
3import { FromNowPipe } from '../angular/from-now.pipe'
4
5@Component({
6 selector: 'my-date-toggle',
7 templateUrl: './date-toggle.component.html',
8 styleUrls: [ './date-toggle.component.scss' ],
9 providers: [ DatePipe, FromNowPipe ]
10})
11export class DateToggleComponent implements OnInit, OnChanges {
12 @Input() date: Date
13 @Input() toggled = false
14
15 dateRelative: string
16 dateAbsolute: string
17
18 constructor (
19 private datePipe: DatePipe,
20 private fromNowPipe: FromNowPipe
21 ) { }
22
23 ngOnInit () {
24 this.updateDates()
25 }
26
27 ngOnChanges () {
28 this.updateDates()
29 }
30
31 toggle () {
32 this.toggled = !this.toggled
33 }
34
35 getTitle () {
36 return this.toggled ? this.dateRelative : this.dateAbsolute
37 }
38
39 getContent () {
40 return this.toggled ? this.dateAbsolute : this.dateRelative
41 }
42
43 private updateDates () {
44 this.dateRelative = this.fromNowPipe.transform(this.date)
45 this.dateAbsolute = this.datePipe.transform(this.date, 'long')
46 }
47}
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
73import { InstanceService } from '@app/shared/instance/instance.service' 73import { InstanceService } from '@app/shared/instance/instance.service'
74import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer' 74import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer'
75import { ConfirmComponent } from '@app/shared/confirm/confirm.component' 75import { ConfirmComponent } from '@app/shared/confirm/confirm.component'
76import { DateToggleComponent } from '@app/shared/date/date-toggle.component'
76import { SmallLoaderComponent } from '@app/shared/misc/small-loader.component' 77import { SmallLoaderComponent } from '@app/shared/misc/small-loader.component'
77import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' 78import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
78import { PreviewUploadComponent } from '@app/shared/images/preview-upload.component' 79import { PreviewUploadComponent } from '@app/shared/images/preview-upload.component'
@@ -165,6 +166,7 @@ import { FeatureBooleanComponent } from '@app/shared/instance/feature-boolean.co
165 TopMenuDropdownComponent, 166 TopMenuDropdownComponent,
166 UserNotificationsComponent, 167 UserNotificationsComponent,
167 ConfirmComponent, 168 ConfirmComponent,
169 DateToggleComponent,
168 170
169 GlobalIconComponent, 171 GlobalIconComponent,
170 PreviewUploadComponent 172 PreviewUploadComponent
@@ -232,6 +234,7 @@ import { FeatureBooleanComponent } from '@app/shared/instance/feature-boolean.co
232 TopMenuDropdownComponent, 234 TopMenuDropdownComponent,
233 UserNotificationsComponent, 235 UserNotificationsComponent,
234 ConfirmComponent, 236 ConfirmComponent,
237 DateToggleComponent,
235 238
236 GlobalIconComponent, 239 GlobalIconComponent,
237 PreviewUploadComponent, 240 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 @@
17 </a> 17 </a>
18 18
19 <span class="video-miniature-created-at-views"> 19 <span class="video-miniature-created-at-views">
20 <ng-container *ngIf="displayOptions.date">{{ video.publishedAt | myFromNow }}</ng-container> 20 <my-date-toggle *ngIf="displayOptions.date" [date]="video.publishedAt"></my-date-toggle>
21 <ng-container *ngIf="displayOptions.date && displayOptions.views"> - </ng-container> 21 <ng-container *ngIf="displayOptions.date && displayOptions.views"> - </ng-container>
22 <ng-container i18n *ngIf="displayOptions.views">{{ video.views | myNumberFormatter }} views</ng-container> 22 <ng-container i18n *ngIf="displayOptions.views">{{ video.views | myNumberFormatter }} views</ng-container>
23 </span> 23 </span>
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 @@
42 <div class="d-block d-md-none"> <!-- only shown on medium devices, has its conterpart for larger viewports below --> 42 <div class="d-block d-md-none"> <!-- only shown on medium devices, has its conterpart for larger viewports below -->
43 <h1 class="video-info-name">{{ video.name }}</h1> 43 <h1 class="video-info-name">{{ video.name }}</h1>
44 <div i18n class="video-info-date-views"> 44 <div i18n class="video-info-date-views">
45 Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views 45 Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> - {{ video.views | myNumberFormatter }} views
46 </div> 46 </div>
47 </div> 47 </div>
48 48
@@ -51,7 +51,7 @@
51 <h1 class="video-info-name">{{ video.name }}</h1> 51 <h1 class="video-info-name">{{ video.name }}</h1>
52 52
53 <div i18n class="video-info-date-views"> 53 <div i18n class="video-info-date-views">
54 Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views 54 Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> - {{ video.views | myNumberFormatter }} views
55 </div> 55 </div>
56 </div> 56 </div>
57 57