interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix thumbnail accessibility

This commit is contained in:
Chocobozzz 2024-09-27 10:12:13 +02:00
parent 7c9089ecc2
commit a747e5c490
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
View File

@ -7,18 +7,18 @@
</a>
<ng-template #aContent>
<img alt="" [attr.aria-label]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
<img alt="" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
<div *ngIf="displayWatchLaterPlaylist" class="actions-overlay">
<button
class="watch-icon-overlay button-unstyle"
placement="left" [ngbTooltip]="getWatchIconText()" container="body" #watchLaterTooltip="ngbTooltip"
(click)="onWatchLaterClick($event)"
(click)="onWatchLaterClick($event)" [attr.aria-label]="inWatchLaterPlaylist ? removeFromWatchLaterText : addToWatchLaterText"
>
@if (inWatchLaterPlaylist) {
<my-global-icon iconName="tick" [attr.aria-label]="inWatchLaterPlaylist"></my-global-icon>
<my-global-icon iconName="tick"></my-global-icon>
} @else {
<my-global-icon iconName="clock" [attr.aria-label]="addToWatchLaterText"></my-global-icon>
<my-global-icon iconName="clock"></my-global-icon>
}
</button>
</div>
@ -26,17 +26,22 @@
<div class="label-overlay warning"><ng-content select="label-warning"></ng-content></div>
<div class="label-overlay danger"><ng-content select="label-danger"></ng-content></div>
<div class="duration-overlay" *ngIf="!video.isLive">{{ video.durationLabel }}</div>
<div class="live-overlay" [ngClass]="{ 'live-ended': isLiveEnded() }" *ngIf="video.isLive">
<ng-container i18n *ngIf="!isLiveEnded()">LIVE</ng-container>
<ng-container i18n *ngIf="isLiveEnded()">LIVE ENDED</ng-container>
</div>
@if (video.isLive) {
<div class="live-overlay" [ngClass]="{ 'live-ended': isLiveEnded() }">
<ng-container i18n *ngIf="!isLiveEnded()">LIVE</ng-container>
<ng-container i18n *ngIf="isLiveEnded()">LIVE ENDED</ng-container>
</div>
} @else {
<div class="duration-overlay" [ariaLabel]="getDurationOverlayLabel()">{{ video.durationLabel }}</div>
}
<div class="play-overlay">
<div class="icon"></div>
</div>
<div class="progress-bar" *ngIf="!video.isLive && video.userHistory?.currentTime">
<div [ngStyle]="{ 'width.%': getProgressPercent() }"></div>
<div [ngStyle]="{ 'width.%': getProgressPercent() }">
<span class="visually-hidden" i18n>You watched {{ getProgressPercent() }}% of this video</span>
</div>
</div>
</ng-template>

4
client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
View File

@ -70,6 +70,10 @@ export class VideoThumbnailComponent {
return (currentTime / this.video.duration) * 100
}
getDurationOverlayLabel () {
return $localize`Video duration is ${this.video.durationLabel}`
}
getVideoRouterLink () {
if (this.videoRouterLink) return this.videoRouterLink