aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/shared-share-modal
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2023-03-15 14:20:26 +0100
committerChocobozzz <me@florianbigard.com>2023-03-15 14:28:27 +0100
commitdc9c9500bf5f0fd66906576ee3df4f1c49a1871d (patch)
tree347853ac17beb366bac111e3bc3e3acae31ca267 /client/src/app/shared/shared-share-modal
parent5ccf98a4ecc39d1b50df5b748e885683f71276a9 (diff)
downloadPeerTube-dc9c9500bf5f0fd66906576ee3df4f1c49a1871d.tar.gz
PeerTube-dc9c9500bf5f0fd66906576ee3df4f1c49a1871d.tar.zst
PeerTube-dc9c9500bf5f0fd66906576ee3df4f1c49a1871d.zip
Improve accessibility
Diffstat (limited to 'client/src/app/shared/shared-share-modal')
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.html141
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.scss5
2 files changed, 71 insertions, 75 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>
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss
index 7b6009f5a..c64e11f4d 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -42,12 +42,7 @@ my-input-text {
42 } 42 }
43 43
44 .advanced-filters-button { 44 .advanced-filters-button {
45 display: flex;
46 justify-content: center;
47 align-items: center;
48 margin-top: 20px;
49 font-weight: $font-semibold; 45 font-weight: $font-semibold;
50 cursor: pointer;
51 } 46 }
52 47
53 .video-caption-block { 48 .video-caption-block {