diff options
author | Chocobozzz <me@florianbigard.com> | 2023-03-15 14:20:26 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2023-03-15 14:28:27 +0100 |
commit | dc9c9500bf5f0fd66906576ee3df4f1c49a1871d (patch) | |
tree | 347853ac17beb366bac111e3bc3e3acae31ca267 /client/src/app/shared/shared-share-modal/video-share.component.html | |
parent | 5ccf98a4ecc39d1b50df5b748e885683f71276a9 (diff) | |
download | PeerTube-dc9c9500bf5f0fd66906576ee3df4f1c49a1871d.tar.gz PeerTube-dc9c9500bf5f0fd66906576ee3df4f1c49a1871d.tar.zst PeerTube-dc9c9500bf5f0fd66906576ee3df4f1c49a1871d.zip |
Improve accessibility
Diffstat (limited to 'client/src/app/shared/shared-share-modal/video-share.component.html')
-rw-r--r-- | client/src/app/shared/shared-share-modal/video-share.component.html | 141 |
1 files changed, 71 insertions, 70 deletions
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html index 01d351783..5650fa948 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.html +++ b/client/src/app/shared/shared-share-modal/video-share.component.html | |||
@@ -1,7 +1,10 @@ | |||
1 | <ng-template #modal let-hide="close"> | 1 | <ng-template #modal let-hide="close"> |
2 | <div class="modal-header"> | 2 | <div class="modal-header"> |
3 | <h4 i18n class="modal-title">Share</h4> | 3 | <h4 i18n class="modal-title">Share</h4> |
4 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon> | 4 | |
5 | <button class="border-0 p-0" (click)="hide()"> | ||
6 | <my-global-icon iconName="cross" aria-label="Close" role="button" ></my-global-icon> | ||
7 | </button> | ||
5 | </div> | 8 | </div> |
6 | 9 | ||
7 | 10 | ||
@@ -150,89 +153,85 @@ | |||
150 | <div [ngbNavOutlet]="nav"></div> | 153 | <div [ngbNavOutlet]="nav"></div> |
151 | 154 | ||
152 | <div class="filters"> | 155 | <div class="filters"> |
153 | <div> | 156 | <div class="form-group start-at" *ngIf="!video.isLive"> |
154 | <div class="form-group start-at" *ngIf="!video.isLive"> | 157 | <my-peertube-checkbox |
158 | inputName="startAt" [(ngModel)]="customizations.startAtCheckbox" | ||
159 | i18n-labelText labelText="Start at" | ||
160 | ></my-peertube-checkbox> | ||
161 | |||
162 | <my-timestamp-input | ||
163 | [timestamp]="customizations.startAt" | ||
164 | [maxTimestamp]="video.duration" | ||
165 | [disabled]="!customizations.startAtCheckbox" | ||
166 | [(ngModel)]="customizations.startAt" | ||
167 | > | ||
168 | </my-timestamp-input> | ||
169 | </div> | ||
170 | |||
171 | <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block"> | ||
172 | <my-peertube-checkbox | ||
173 | inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox" | ||
174 | i18n-labelText labelText="Auto select subtitle" | ||
175 | ></my-peertube-checkbox> | ||
176 | |||
177 | <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }"> | ||
178 | <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control"> | ||
179 | <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option> | ||
180 | </select> | ||
181 | </div> | ||
182 | </div> | ||
183 | |||
184 | <div class="form-group" *ngIf="isInVideoEmbedTab()"> | ||
185 | <my-peertube-checkbox | ||
186 | inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl" | ||
187 | i18n-labelText labelText="Only display embed URL" | ||
188 | ></my-peertube-checkbox> | ||
189 | </div> | ||
190 | |||
191 | <my-plugin-placeholder pluginId="share-modal-video-settings"></my-plugin-placeholder> | ||
192 | |||
193 | <div class="advanced-filters" [ngbCollapse]="isAdvancedCustomizationCollapsed" [animation]="true"> | ||
194 | <div class="form-group stop-at" *ngIf="!video.isLive"> | ||
155 | <my-peertube-checkbox | 195 | <my-peertube-checkbox |
156 | inputName="startAt" [(ngModel)]="customizations.startAtCheckbox" | 196 | inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox" |
157 | i18n-labelText labelText="Start at" | 197 | i18n-labelText labelText="Stop at" |
158 | ></my-peertube-checkbox> | 198 | ></my-peertube-checkbox> |
159 | 199 | ||
160 | <my-timestamp-input | 200 | <my-timestamp-input |
161 | [timestamp]="customizations.startAt" | 201 | [timestamp]="customizations.stopAt" |
162 | [maxTimestamp]="video.duration" | 202 | [maxTimestamp]="video.duration" |
163 | [disabled]="!customizations.startAtCheckbox" | 203 | [disabled]="!customizations.stopAtCheckbox" |
164 | [(ngModel)]="customizations.startAt" | 204 | [(ngModel)]="customizations.stopAt" |
165 | > | 205 | > |
166 | </my-timestamp-input> | 206 | </my-timestamp-input> |
167 | </div> | 207 | </div> |
168 | 208 | ||
169 | <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block"> | 209 | <div class="form-group"> |
170 | <my-peertube-checkbox | 210 | <my-peertube-checkbox |
171 | inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox" | 211 | inputName="autoplay" [(ngModel)]="customizations.autoplay" |
172 | i18n-labelText labelText="Auto select subtitle" | 212 | i18n-labelText labelText="Autoplay" |
173 | ></my-peertube-checkbox> | 213 | ></my-peertube-checkbox> |
174 | |||
175 | <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }"> | ||
176 | <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control"> | ||
177 | <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option> | ||
178 | </select> | ||
179 | </div> | ||
180 | </div> | 214 | </div> |
181 | 215 | ||
182 | <div class="form-group" *ngIf="isInVideoEmbedTab()"> | 216 | <div class="form-group"> |
183 | <my-peertube-checkbox | 217 | <my-peertube-checkbox |
184 | inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl" | 218 | inputName="muted" [(ngModel)]="customizations.muted" |
185 | i18n-labelText labelText="Only display embed URL" | 219 | i18n-labelText labelText="Muted" |
186 | ></my-peertube-checkbox> | 220 | ></my-peertube-checkbox> |
187 | </div> | 221 | </div> |
188 | 222 | ||
189 | <my-plugin-placeholder pluginId="share-modal-video-settings"></my-plugin-placeholder> | 223 | <div class="form-group" *ngIf="!video.isLive"> |
190 | </div> | 224 | <my-peertube-checkbox |
191 | 225 | inputName="loop" [(ngModel)]="customizations.loop" | |
192 | <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed"> | 226 | i18n-labelText labelText="Loop" |
193 | <div> | 227 | ></my-peertube-checkbox> |
194 | <div class="form-group stop-at" *ngIf="!video.isLive"> | 228 | </div> |
195 | <my-peertube-checkbox | ||
196 | inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox" | ||
197 | i18n-labelText labelText="Stop at" | ||
198 | ></my-peertube-checkbox> | ||
199 | |||
200 | <my-timestamp-input | ||
201 | [timestamp]="customizations.stopAt" | ||
202 | [maxTimestamp]="video.duration" | ||
203 | [disabled]="!customizations.stopAtCheckbox" | ||
204 | [(ngModel)]="customizations.stopAt" | ||
205 | > | ||
206 | </my-timestamp-input> | ||
207 | </div> | ||
208 | |||
209 | <div class="form-group"> | ||
210 | <my-peertube-checkbox | ||
211 | inputName="autoplay" [(ngModel)]="customizations.autoplay" | ||
212 | i18n-labelText labelText="Autoplay" | ||
213 | ></my-peertube-checkbox> | ||
214 | </div> | ||
215 | |||
216 | <div class="form-group"> | ||
217 | <my-peertube-checkbox | ||
218 | inputName="muted" [(ngModel)]="customizations.muted" | ||
219 | i18n-labelText labelText="Muted" | ||
220 | ></my-peertube-checkbox> | ||
221 | </div> | ||
222 | |||
223 | <div class="form-group" *ngIf="!video.isLive"> | ||
224 | <my-peertube-checkbox | ||
225 | inputName="loop" [(ngModel)]="customizations.loop" | ||
226 | i18n-labelText labelText="Loop" | ||
227 | ></my-peertube-checkbox> | ||
228 | </div> | ||
229 | 229 | ||
230 | <div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group"> | 230 | <div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group"> |
231 | <my-peertube-checkbox | 231 | <my-peertube-checkbox |
232 | inputName="originUrl" [(ngModel)]="customizations.originUrl" | 232 | inputName="originUrl" [(ngModel)]="customizations.originUrl" |
233 | i18n-labelText labelText="Use origin instance URL" | 233 | i18n-labelText labelText="Use origin instance URL" |
234 | ></my-peertube-checkbox> | 234 | ></my-peertube-checkbox> |
235 | </div> | ||
236 | </div> | 235 | </div> |
237 | 236 | ||
238 | <ng-container *ngIf="isInVideoEmbedTab()"> | 237 | <ng-container *ngIf="isInVideoEmbedTab()"> |
@@ -280,9 +279,11 @@ | |||
280 | </ng-container> | 279 | </ng-container> |
281 | </div> | 280 | </div> |
282 | 281 | ||
283 | <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button" | 282 | <button |
284 | [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"> | 283 | class="border-0 p-0 mt-4 mx-auto fw-semibold d-block" |
285 | 284 | (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" | |
285 | [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic" | ||
286 | > | ||
286 | <ng-container *ngIf="isAdvancedCustomizationCollapsed"> | 287 | <ng-container *ngIf="isAdvancedCustomizationCollapsed"> |
287 | <span class="chevron-down"></span> | 288 | <span class="chevron-down"></span> |
288 | 289 | ||
@@ -298,7 +299,7 @@ | |||
298 | Less customization | 299 | Less customization |
299 | </ng-container> | 300 | </ng-container> |
300 | </ng-container> | 301 | </ng-container> |
301 | </div> | 302 | </button> |
302 | </div> | 303 | </div> |
303 | </div> | 304 | </div> |
304 | </div> | 305 | </div> |