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

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / video / modals / video-download.component.html

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 976da03f3d641fb4f5e20b08b47d95aacb91f451..391fe245ec9f77db26ea6cf0cf110a67a6bdb259 100644 (file)
--- 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">