Add video file metadata to download modal, via ffprobe (#2411)

* Add video file metadata via ffprobe

* Federate video file metadata

* Add tests for file metadata generation

* Complete tests for videoFile metadata federation

* Lint migration and video-file for metadata

* Objectify metadata from getter in ffmpeg-utils

* Add metadataUrl to all videoFiles

* Simplify metadata API middleware

* Load playlist in videoFile when requesting metadata

1 files changed, 37 insertions, 1 deletions

diff --git a/client/src/app/shared/video/modals/video-download.component.html b/client/src/app/shared/video/modals/video-download.component.html
index 976da03f3..391fe245e 100644
--- a/client/src/app/shared/video/modals/video-download.component.html
+++ b/client/src/app/shared/video/modals/video-download.component.html
@@ -20,7 +20,7 @@
     <div class="form-group">
       <div class="input-group input-group-sm">
         <div class="input-group-prepend peertube-select-container">
-          <select *ngIf="type === 'video'" [(ngModel)]="resolutionId">
+          <select *ngIf="type === 'video'" [(ngModel)]="resolutionId" (ngModelChange)="onResolutionIdChange()">
             <option *ngFor="let file of getVideoFiles()" [value]="file.resolution.id">{{ file.resolution.label }}</option>
           </select>
 
@@ -38,6 +38,42 @@
       </div>
     </div>
 
+    <ngb-tabset *ngIf="type === 'video' && videoFile?.metadata">
+      <ngb-tab>
+        <ng-template ngbTabTitle i18n>Format</ng-template>
+        <ng-template ngbTabContent>
+          <div class="file-metadata">
+            <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataFormat | keyvalue">
+              <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+              <span class="metadata-attribute-value">{{ item.value.value }}</span>
+            </div>
+          </div>
+        </ng-template>
+      </ngb-tab>
+      <ngb-tab [disabled]="videoFileMetadataVideoStream === undefined">
+        <ng-template ngbTabTitle i18n>Video stream</ng-template>
+        <ng-template ngbTabContent>
+          <div class="file-metadata">
+            <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataVideoStream | keyvalue">
+              <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+              <span class="metadata-attribute-value">{{ item.value.value }}</span>
+            </div>
+          </div>
+        </ng-template>
+      </ngb-tab>
+      <ngb-tab [disabled]="videoFileMetadataAudioStream === undefined">
+        <ng-template ngbTabTitle i18n>Audio stream</ng-template>
+        <ng-template ngbTabContent>
+          <div class="file-metadata">
+            <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataAudioStream | keyvalue">
+              <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+              <span class="metadata-attribute-value">{{ item.value.value }}</span>
+            </div>
+          </div>
+        </ng-template>
+      </ngb-tab>
+    </ngb-tabset>
+
     <div class="download-type" *ngIf="type === 'video'">
       <div class="peertube-radio-container">
         <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">