aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-01-07 14:38:01 +0100
committerChocobozzz <chocobozzz@cpy.re>2020-01-07 14:47:50 +0100
commitdf8340b7b8daf108557309a3eaf97d495dbd2eab (patch)
treefaa9d15081561f1ca2192fb86d3a4729a53e51ee
parent31174a272a65c83c8d3e10e9d5d59786bd05682a (diff)
downloadPeerTube-df8340b7b8daf108557309a3eaf97d495dbd2eab.tar.gz
PeerTube-df8340b7b8daf108557309a3eaf97d495dbd2eab.tar.zst
PeerTube-df8340b7b8daf108557309a3eaf97d495dbd2eab.zip
Add duration to video attributes in watch view
-rw-r--r--client/src/app/shared/angular/video-duration-formatter.pipe.ts19
-rw-r--r--client/src/app/shared/shared.module.ts5
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html5
3 files changed, 28 insertions, 1 deletions
diff --git a/client/src/app/shared/angular/video-duration-formatter.pipe.ts b/client/src/app/shared/angular/video-duration-formatter.pipe.ts
new file mode 100644
index 000000000..c92631a75
--- /dev/null
+++ b/client/src/app/shared/angular/video-duration-formatter.pipe.ts
@@ -0,0 +1,19 @@
1import { Pipe, PipeTransform } from '@angular/core'
2
3// Thanks: https://stackoverflow.com/a/46055604
4
5@Pipe({
6 name: 'myVideoDurationFormatter'
7})
8export class VideoDurationPipe implements PipeTransform {
9 transform (value: number): string {
10 const minutes = Math.floor(value / 60)
11 const hours = Math.floor(minutes / 60)
12
13 if (hours > 0) {
14 return hours + ' h ' + (minutes - hours * 60) + ' min ' + (value - (minutes - hours * 60) * 60) + ' sec'
15 }
16
17 return minutes + ' min ' + (value - minutes * 60) + ' sec'
18 }
19}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index a32520820..b2eb13f73 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -85,6 +85,7 @@ import { TimestampInputComponent } from '@app/shared/forms/timestamp-input.compo
85import { VideoPlaylistElementMiniatureComponent } from '@app/shared/video-playlist/video-playlist-element-miniature.component' 85import { VideoPlaylistElementMiniatureComponent } from '@app/shared/video-playlist/video-playlist-element-miniature.component'
86import { VideosSelectionComponent } from '@app/shared/video/videos-selection.component' 86import { VideosSelectionComponent } from '@app/shared/video/videos-selection.component'
87import { NumberFormatterPipe } from '@app/shared/angular/number-formatter.pipe' 87import { NumberFormatterPipe } from '@app/shared/angular/number-formatter.pipe'
88import { VideoDurationPipe } from '@app/shared/angular/video-duration-formatter.pipe'
88import { ObjectLengthPipe } from '@app/shared/angular/object-length.pipe' 89import { ObjectLengthPipe } from '@app/shared/angular/object-length.pipe'
89import { FromNowPipe } from '@app/shared/angular/from-now.pipe' 90import { FromNowPipe } from '@app/shared/angular/from-now.pipe'
90import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive' 91import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive'
@@ -147,6 +148,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
147 ObjectLengthPipe, 148 ObjectLengthPipe,
148 FromNowPipe, 149 FromNowPipe,
149 PeerTubeTemplateDirective, 150 PeerTubeTemplateDirective,
151 VideoDurationPipe,
150 152
151 ActionDropdownComponent, 153 ActionDropdownComponent,
152 MarkdownTextareaComponent, 154 MarkdownTextareaComponent,
@@ -248,7 +250,8 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
248 NumberFormatterPipe, 250 NumberFormatterPipe,
249 ObjectLengthPipe, 251 ObjectLengthPipe,
250 FromNowPipe, 252 FromNowPipe,
251 PeerTubeTemplateDirective 253 PeerTubeTemplateDirective,
254 VideoDurationPipe
252 ], 255 ],
253 256
254 providers: [ 257 providers: [
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 74ac64a63..246eac2dd 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -226,6 +226,11 @@
226 class="video-attribute-value" [routerLink]="[ '/search' ]" [queryParams]="{ tagsOneOf: [ tag ] }" 226 class="video-attribute-value" [routerLink]="[ '/search' ]" [queryParams]="{ tagsOneOf: [ tag ] }"
227 >{{ tag }}</a> 227 >{{ tag }}</a>
228 </div> 228 </div>
229
230 <div class="video-attribute">
231 <span i18n class="video-attribute-label">Duration</span>
232 <span class="video-attribute-value">{{ video.duration | myVideoDurationFormatter }}</span>
233 </div>
229 </div> 234 </div>
230 235
231 <my-video-comments 236 <my-video-comments