aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/shared-video-miniature/video-download.component.html
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/shared/shared-video-miniature/video-download.component.html')
-rw-r--r--client/src/app/shared/shared-video-miniature/video-download.component.html132
1 files changed, 75 insertions, 57 deletions
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index 4ac74c106..b50544057 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -3,16 +3,14 @@
3 <h4 class="modal-title"> 3 <h4 class="modal-title">
4 <ng-container i18n>Download</ng-container> 4 <ng-container i18n>Download</ng-container>
5 5
6 <div *ngIf="videoCaptions" ngbDropdown class="d-inline-block ml-1"> 6 <div class="peertube-select-container title-select" *ngIf="hasCaptions()">
7 <span id="dropdown-download-type" ngbDropdownToggle> 7 <select id="type" name="type" [(ngModel)]="type" class="form-control">
8 {{ type }} 8 <option value="video" i18n>Video</option>
9 </span> 9 <option value="subtitles" i18n>Subtitles</option>
10 <div ngbDropdownMenu aria-labelledby="dropdown-download-type"> 10 </select>
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> 11 </div>
15 </h4> 12 </h4>
13
16 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon> 14 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
17 </div> 15 </div>
18 16
@@ -21,20 +19,35 @@
21 The following link contains a private token and should not be shared with anyone. 19 The following link contains a private token and should not be shared with anyone.
22 </div> 20 </div>
23 21
22 <!-- Subtitle tab -->
24 <ng-container *ngIf="type === 'subtitles'"> 23 <ng-container *ngIf="type === 'subtitles'">
25 <div class="input-group input-group-sm"> 24 <div ngbNav #subtitleNav="ngbNav" class="nav-tabs" [activeId]="subtitleLanguageId" (activeIdChange)="onSubtitleIdChange($event)">
26 <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" /> 25
27 <div class="input-group-append" *ngIf="!isConfidentialVideo()"> 26 <ng-container *ngFor="let caption of getCaptions()" [ngbNavItem]="caption.language.id">
28 <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary"> 27 <a ngbNavLink i18n>{{ caption.language.label }}</a>
29 <span class="glyphicon glyphicon-duplicate"></span> 28
30 </button> 29 <ng-template ngbNavContent>
31 </div> 30 <div class="nav-content">
31 <div class="input-group input-group-sm">
32 <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
33
34 <div class="input-group-append" *ngIf="!isConfidentialVideo()">
35 <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
36 <span class="glyphicon glyphicon-duplicate"></span>
37 </button>
38 </div>
39 </div>
40 </div>
41 </ng-template>
42 </ng-container>
32 </div> 43 </div>
44
45 <div [ngbNavOutlet]="subtitleNav"></div>
33 </ng-container> 46 </ng-container>
34 47
48 <!-- Video tab -->
35 <ng-container *ngIf="type === 'video'"> 49 <ng-container *ngIf="type === 'video'">
36 <div ngbNav #resolutionNav="ngbNav" class="nav-tabs" [activeId]="resolutionId" (activeIdChange)="onResolutionIdChange($event)"> 50 <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"> 51 <ng-container *ngFor="let file of getVideoFiles()" [ngbNavItem]="file.resolution.id">
39 <a ngbNavLink i18n>{{ file.resolution.label }}</a> 52 <a ngbNavLink i18n>{{ file.resolution.label }}</a>
40 53
@@ -52,64 +65,69 @@
52 </ng-template> 65 </ng-template>
53 </ng-container> 66 </ng-container>
54 </div> 67 </div>
68
55 <div [ngbNavOutlet]="resolutionNav"></div> 69 <div [ngbNavOutlet]="resolutionNav"></div>
56 70
57 <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed"> 71 <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
58 <ng-container *ngIf="videoFile?.metadata"> 72 <div ngbNav #navMetadata="ngbNav" class="nav-tabs nav-metadata">
59 <div ngbNav #nav="ngbNav" class="nav-tabs nav-metadata"> 73 <ng-container ngbNavItem>
60 <ng-container ngbNavItem> 74 <a ngbNavLink i18n>Format</a>
61 <a ngbNavLink i18n>Format</a> 75 <ng-template ngbNavContent>
76 <div class="file-metadata">
77 <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataFormat | keyvalue">
78 <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
79 <span class="metadata-attribute-value">{{ item.value.value }}</span>
80 </div>
81 </div>
82 </ng-template>
83
84 <ng-container ngbNavItem [disabled]="videoFileMetadataVideoStream === undefined">
85 <a ngbNavLink i18n>Video stream</a>
62 <ng-template ngbNavContent> 86 <ng-template ngbNavContent>
63 <div class="file-metadata"> 87 <div class="file-metadata">
64 <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataFormat | keyvalue"> 88 <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataVideoStream | keyvalue">
65 <span i18n class="metadata-attribute-label">{{ item.value.label }}</span> 89 <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
66 <span class="metadata-attribute-value">{{ item.value.value }}</span> 90 <span class="metadata-attribute-value">{{ item.value.value }}</span>
67 </div> 91 </div>
68 </div> 92 </div>
69 </ng-template> 93 </ng-template>
94 </ng-container>
70 95
71 <ng-container ngbNavItem [disabled]="videoFileMetadataVideoStream === undefined"> 96 <ng-container ngbNavItem [disabled]="videoFileMetadataAudioStream === undefined">
72 <a ngbNavLink i18n>Video stream</a> 97 <a ngbNavLink i18n>Audio stream</a>
73 <ng-template ngbNavContent> 98 <ng-template ngbNavContent>
74 <div class="file-metadata"> 99 <div class="file-metadata">
75 <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataVideoStream | keyvalue"> 100 <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataAudioStream | keyvalue">
76 <span i18n class="metadata-attribute-label">{{ item.value.label }}</span> 101 <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
77 <span class="metadata-attribute-value">{{ item.value.value }}</span> 102 <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> 103 </div>
92 </ng-template> 104 </div>
93 </ng-container> 105 </ng-template>
94
95 </ng-container> 106 </ng-container>
107
108 </ng-container>
109 </div>
110
111 <div *ngIf="getFileMetadata()" [ngbNavOutlet]="navMetadata"></div>
112
113 <div class="download-type">
114 <div class="peertube-radio-container">
115 <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">
116 <label i18n for="download-direct">Direct download</label>
96 </div> 117 </div>
97 <div [ngbNavOutlet]="nav"></div> 118
98 <div class="download-type"> 119 <div class="peertube-radio-container">
99 <div class="peertube-radio-container"> 120 <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent">
100 <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct"> 121 <label i18n for="download-torrent">Torrent (.torrent file)</label>
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> 122 </div>
108 </ng-container> 123 </div>
109 </div> 124 </div>
110 125
111 <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button" 126 <div
112 [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"> 127 (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed"
128 role="button" class="advanced-filters-button"
129 [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"
130 >
113 <ng-container *ngIf="isAdvancedCustomizationCollapsed"> 131 <ng-container *ngIf="isAdvancedCustomizationCollapsed">
114 <span class="glyphicon glyphicon-menu-down"></span> 132 <span class="glyphicon glyphicon-menu-down"></span>
115 133
generated by cgit v1.2.3 (git 2.25.1) at 2024-10-20 16:41:28 +0000