client/src/app/shared/shared-video-miniature/video-download.component.html

   1 <ng-template #modal let-hide="close">
   2   <div class="modal-header">
   3     <h4 class="modal-title">
   4       <ng-container i18n>Download</ng-container>
   5
   6       <div *ngIf="videoCaptions" ngbDropdown class="d-inline-block ml-1">
   7         <span id="dropdown-download-type" ngbDropdownToggle>
   8           {{ type }}
   9         </span>
  10         <div ngbDropdownMenu aria-labelledby="dropdown-download-type">
  11           <button *ngIf="type === 'video'" (click)="switchToType('subtitles')" ngbDropdownItem i18n>subtitles</button>
  12           <button *ngIf="type === 'subtitles'" (click)="switchToType('video')" ngbDropdownItem i18n>video</button>
  13         </div>
  14       </div>
  15     </h4>
  16     <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
  17   </div>
  18
  19   <div class="modal-body">
  20     <div class="alert alert-warning" *ngIf="isConfidentialVideo()" i18n>
  21       The following link contains a private token and should not be shared with anyone.
  22     </div>
  23
  24     <ng-container *ngIf="type === 'subtitles'">
  25       <div class="input-group input-group-sm">
  26         <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
  27         <div class="input-group-append" *ngIf="!isConfidentialVideo()">
  28           <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
  29             <span class="glyphicon glyphicon-duplicate"></span>
  30           </button>
  31         </div>
  32       </div>
  33     </ng-container>
  34
  35     <ng-container *ngIf="type === 'video'">
  36       <div ngbNav #resolutionNav="ngbNav" class="nav-tabs" [activeId]="resolutionId" (activeIdChange)="onResolutionIdChange($event)">
  37
  38         <ng-container *ngFor="let file of getVideoFiles()" [ngbNavItem]="file.resolution.id">
  39           <a ngbNavLink i18n>{{ file.resolution.label }}</a>
  40
  41           <ng-template ngbNavContent>
  42             <div class="nav-content">
  43               <div class="input-group input-group-sm">
  44                 <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
  45                 <div class="input-group-append" *ngIf="!isConfidentialVideo()">
  46                   <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
  47                     <span class="glyphicon glyphicon-duplicate"></span>
  48                   </button>
  49                 </div>
  50               </div>
  51             </div>
  52           </ng-template>
  53         </ng-container>
  54       </div>
  55       <div [ngbNavOutlet]="resolutionNav"></div>
  56
  57       <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
  58         <ng-container *ngIf="videoFile?.metadata">
  59           <div ngbNav #nav="ngbNav" class="nav-tabs nav-metadata">
  60             <ng-container ngbNavItem>
  61               <a ngbNavLink i18n>Format</a>
  62               <ng-template ngbNavContent>
  63                 <div class="file-metadata">
  64                   <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataFormat | keyvalue">
  65                     <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
  66                     <span class="metadata-attribute-value">{{ item.value.value }}</span>
  67                   </div>
  68                 </div>
  69               </ng-template>
  70
  71               <ng-container ngbNavItem [disabled]="videoFileMetadataVideoStream === undefined">
  72                 <a ngbNavLink i18n>Video stream</a>
  73                 <ng-template ngbNavContent>
  74                   <div class="file-metadata">
  75                     <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataVideoStream | keyvalue">
  76                       <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
  77                       <span class="metadata-attribute-value">{{ item.value.value }}</span>
  78                     </div>
  79                   </div>
  80                 </ng-template>
  81               </ng-container>
  82
  83               <ng-container ngbNavItem [disabled]="videoFileMetadataAudioStream === undefined">
  84                 <a ngbNavLink i18n>Audio stream</a>
  85                 <ng-template ngbNavContent>
  86                   <div class="file-metadata">
  87                     <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataAudioStream | keyvalue">
  88                       <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
  89                       <span class="metadata-attribute-value">{{ item.value.value }}</span>
  90                     </div>
  91                   </div>
  92                 </ng-template>
  93               </ng-container>
  94
  95             </ng-container>
  96           </div>
  97           <div [ngbNavOutlet]="nav"></div>
  98           <div class="download-type">
  99             <div class="peertube-radio-container">
 100               <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">
 101               <label i18n for="download-direct">Direct download</label>
 102             </div>
 103             <div class="peertube-radio-container">
 104               <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent">
 105               <label i18n for="download-torrent">Torrent (.torrent file)</label>
 106             </div>
 107           </div>
 108         </ng-container>
 109       </div>
 110
 111       <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
 112       [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
 113         <ng-container *ngIf="isAdvancedCustomizationCollapsed">
 114           <span class="glyphicon glyphicon-menu-down"></span>
 115
 116           <ng-container i18n>
 117             Advanced
 118           </ng-container>
 119         </ng-container>
 120
 121         <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
 122           <span class="glyphicon glyphicon-menu-up"></span>
 123
 124           <ng-container i18n>
 125             Simple
 126           </ng-container>
 127         </ng-container>
 128       </div>
 129     </ng-container>
 130   </div>
 131
 132   <div class="modal-footer inputs">
 133     <input
 134       type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
 135       (click)="hide()" (key.enter)="hide()"
 136     >
 137
 138     <input type="submit" i18n-value value="Download" class="peertube-button orange-button" (click)="download()" />
 139   </div>
 140 </ng-template>