Add duration to video attributes in watch view

2 files changed, 23 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 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+// Thanks: https://stackoverflow.com/a/46055604
+
+@Pipe({
+  name: 'myVideoDurationFormatter'
+})
+export class VideoDurationPipe implements PipeTransform {
+  transform (value: number): string {
+    const minutes = Math.floor(value / 60)
+    const hours = Math.floor(minutes / 60)
+
+    if (hours > 0) {
+      return hours + ' h ' + (minutes - hours * 60) + ' min ' + (value - (minutes - hours * 60) * 60) + ' sec'
+    }
+
+    return minutes + ' min ' + (value - minutes * 60) + ' sec'
+  }
+}
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
 import { VideoPlaylistElementMiniatureComponent } from '@app/shared/video-playlist/video-playlist-element-miniature.component'
 import { VideosSelectionComponent } from '@app/shared/video/videos-selection.component'
 import { NumberFormatterPipe } from '@app/shared/angular/number-formatter.pipe'
+import { VideoDurationPipe } from '@app/shared/angular/video-duration-formatter.pipe'
 import { ObjectLengthPipe } from '@app/shared/angular/object-length.pipe'
 import { FromNowPipe } from '@app/shared/angular/from-now.pipe'
 import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive'
@@ -147,6 +148,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
     ObjectLengthPipe,
     FromNowPipe,
     PeerTubeTemplateDirective,
+    VideoDurationPipe,
 
     ActionDropdownComponent,
     MarkdownTextareaComponent,
@@ -248,7 +250,8 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
     NumberFormatterPipe,
     ObjectLengthPipe,
     FromNowPipe,
-    PeerTubeTemplateDirective
+    PeerTubeTemplateDirective,
+    VideoDurationPipe
   ],
 
   providers: [