Add duration to video attributes in watch view

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 @@
+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: [
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 @@
             class="video-attribute-value" [routerLink]="[ '/search' ]" [queryParams]="{ tagsOneOf: [ tag ] }"
           >{{ tag }}</a>
         </div>
+
+        <div class="video-attribute">
+          <span i18n class="video-attribute-label">Duration</span>
+          <span class="video-attribute-value">{{ video.duration | myVideoDurationFormatter }}</span>
+        </div>  
       </div>
 
       <my-video-comments