aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorCaroline Chuong <caroline.chuong@octo.com>2020-06-11 19:19:23 +0200
committerGitHub <noreply@github.com>2020-06-11 19:19:23 +0200
commitadcf921271654b25f03949d2271d7d7c362985af (patch)
treee00b3cc5e501950da7c23cc774798d8121f3156a /client/src/app
parent45800f7e63665708665ab0252049e54846ec84c5 (diff)
downloadPeerTube-adcf921271654b25f03949d2271d7d7c362985af.tar.gz
PeerTube-adcf921271654b25f03949d2271d7d7c362985af.tar.zst
PeerTube-adcf921271654b25f03949d2271d7d7c362985af.zip
add keyboard navigation for video actions (#2854)
Co-authored-by: Rigel Kent <sendmemail@rigelk.eu>
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.html2
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.html10
-rw-r--r--client/src/app/shared/channel/avatar.component.scss2
-rw-r--r--client/src/app/shared/menu/top-menu-dropdown.component.html4
-rw-r--r--client/src/app/shared/users/user-notifications.component.html20
-rw-r--r--client/src/app/shared/video/abstract-video-list.html2
-rw-r--r--client/src/app/shared/video/video-miniature.component.html2
-rw-r--r--client/src/app/shared/video/video-miniature.component.scss10
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html2
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html2
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-upload.component.html2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html30
12 files changed, 47 insertions, 41 deletions
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 9f942c4b3..dc4d00469 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -12,7 +12,7 @@
12 12
13<div class="result-title" *ngIf="!isSearching"> 13<div class="result-title" *ngIf="!isSearching">
14 <ng-container *ngIf="!search"> 14 <ng-container *ngIf="!search">
15 <my-global-icon iconName="trending"></my-global-icon> 15 <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon>
16 <ng-container i18n>Popular</ng-container> 16 <ng-container i18n>Popular</ng-container>
17 </ng-container> 17 </ng-container>
18 18
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 952b3b6f8..12933d4ca 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -1,5 +1,5 @@
1<div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)"> 1<div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)">
2 <div 2 <button
3 class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }" 3 class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
4 ngbDropdownToggle role="button" 4 ngbDropdownToggle role="button"
5 > 5 >
@@ -7,7 +7,7 @@
7 <my-global-icon *ngIf="!label && buttonDirection === 'vertical'" class="more-icon" iconName="more-vertical"></my-global-icon> 7 <my-global-icon *ngIf="!label && buttonDirection === 'vertical'" class="more-icon" iconName="more-vertical"></my-global-icon>
8 8
9 <span *ngIf="label" class="dropdown-toggle">{{ label }}</span> 9 <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
10 </div> 10</button>
11 11
12 <div ngbDropdownMenu class="dropdown-menu"> 12 <div ngbDropdownMenu class="dropdown-menu">
13 <ng-container *ngFor="let actions of getActions()"> 13 <ng-container *ngFor="let actions of getActions()">
@@ -16,7 +16,7 @@
16 <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true"> 16 <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
17 17
18 <ng-template #templateActionLabel let-action> 18 <ng-template #templateActionLabel let-action>
19 <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName"></my-global-icon> 19 <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName" aria-hidden="true"></my-global-icon>
20 20
21 <div class="d-flex flex-column"> 21 <div class="d-flex flex-column">
22 <span i18n>{{ action.label }}</span> 22 <span i18n>{{ action.label }}</span>
@@ -33,14 +33,14 @@
33 33
34 <span 34 <span
35 *ngIf="!action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }" 35 *ngIf="!action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
36 class="custom-action dropdown-item" role="button" [title]="action.title || ''" (click)="action.handler(entry)" 36 class="custom-action dropdown-item" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
37 > 37 >
38 <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container> 38 <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
39 </span> 39 </span>
40 40
41 <h6 41 <h6
42 *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }" 42 *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
43 class="dropdown-header" role="button" [title]="action.title || ''" (click)="action.handler(entry)" 43 class="dropdown-header" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
44 > 44 >
45 <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container> 45 <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
46 </h6> 46 </h6>
diff --git a/client/src/app/shared/channel/avatar.component.scss b/client/src/app/shared/channel/avatar.component.scss
index 4bf8fcd21..37709fce6 100644
--- a/client/src/app/shared/channel/avatar.component.scss
+++ b/client/src/app/shared/channel/avatar.component.scss
@@ -7,10 +7,12 @@
7 height: $avatar-size; 7 height: $avatar-size;
8 position: relative; 8 position: relative;
9 margin-right: 5px; 9 margin-right: 5px;
10 margin-bottom: 5px;
10 11
11 &.avatar-sm { 12 &.avatar-sm {
12 width: 28px; 13 width: 28px;
13 height: 28px; 14 height: 28px;
15 margin-bottom: 3px;
14 } 16 }
15 17
16 a { 18 a {
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html
index 7b13eade4..aeaceb662 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.html
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.html
@@ -24,7 +24,7 @@
24 24
25 <div ngbDropdownMenu> 25 <div ngbDropdownMenu>
26 <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink"> 26 <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink">
27 <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName"></my-global-icon> 27 <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
28 28
29 {{ menuChild.label }} 29 {{ menuChild.label }}
30 </a> 30 </a>
@@ -40,7 +40,7 @@
40 <a *ngFor="let menuChild of menuEntry.children" 40 <a *ngFor="let menuChild of menuEntry.children"
41 [ngClass]="{ icon: hasIcons }" 41 [ngClass]="{ icon: hasIcons }"
42 [routerLink]="menuChild.routerLink" routerLinkActive="active" (click)="dismissOtherModals()"> 42 [routerLink]="menuChild.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
43 <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName"></my-global-icon> 43 <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
44 44
45 {{ menuChild.label }} 45 {{ menuChild.label }}
46 </a> 46 </a>
diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html
index c6037f0a9..08771110d 100644
--- a/client/src/app/shared/users/user-notifications.component.html
+++ b/client/src/app/shared/users/user-notifications.component.html
@@ -18,7 +18,7 @@
18 </ng-template> 18 </ng-template>
19 19
20 <ng-template #noVideo> 20 <ng-template #noVideo>
21 <my-global-icon iconName="alert"></my-global-icon> 21 <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
22 22
23 <div class="message" i18n> 23 <div class="message" i18n>
24 The notification concerns a video now unavailable 24 The notification concerns a video now unavailable
@@ -27,7 +27,7 @@
27 </ng-container> 27 </ng-container>
28 28
29 <ng-container *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO"> 29 <ng-container *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO">
30 <my-global-icon iconName="undo"></my-global-icon> 30 <my-global-icon iconName="undo" aria-hidden="true"></my-global-icon>
31 31
32 <div class="message" i18n> 32 <div class="message" i18n>
33 Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblocked 33 Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblocked
@@ -35,7 +35,7 @@
35 </ng-container> 35 </ng-container>
36 36
37 <ng-container *ngSwitchCase="UserNotificationType.BLACKLIST_ON_MY_VIDEO"> 37 <ng-container *ngSwitchCase="UserNotificationType.BLACKLIST_ON_MY_VIDEO">
38 <my-global-icon iconName="no"></my-global-icon> 38 <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
39 39
40 <div class="message" i18n> 40 <div class="message" i18n>
41 Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blocked 41 Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blocked
@@ -43,7 +43,7 @@
43 </ng-container> 43 </ng-container>
44 44
45 <ng-container *ngSwitchCase="UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS"> 45 <ng-container *ngSwitchCase="UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS">
46 <my-global-icon iconName="alert"></my-global-icon> 46 <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
47 47
48 <div class="message" i18n> 48 <div class="message" i18n>
49 <a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a> 49 <a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a>
@@ -51,7 +51,7 @@
51 </ng-container> 51 </ng-container>
52 52
53 <ng-container *ngSwitchCase="UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS"> 53 <ng-container *ngSwitchCase="UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS">
54 <my-global-icon iconName="no"></my-global-icon> 54 <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
55 55
56 <div class="message" i18n> 56 <div class="message" i18n>
57 The recently added video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been <a (click)="markAsRead(notification)" [routerLink]="notification.videoAutoBlacklistUrl">automatically blocked</a> 57 The recently added video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been <a (click)="markAsRead(notification)" [routerLink]="notification.videoAutoBlacklistUrl">automatically blocked</a>
@@ -72,7 +72,7 @@
72 </ng-template> 72 </ng-template>
73 73
74 <ng-template #noComment> 74 <ng-template #noComment>
75 <my-global-icon iconName="alert"></my-global-icon> 75 <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
76 76
77 <div class="message" i18n> 77 <div class="message" i18n>
78 The notification concerns a comment now unavailable 78 The notification concerns a comment now unavailable
@@ -105,7 +105,7 @@
105 </ng-container> 105 </ng-container>
106 106
107 <ng-container *ngSwitchCase="UserNotificationType.NEW_USER_REGISTRATION"> 107 <ng-container *ngSwitchCase="UserNotificationType.NEW_USER_REGISTRATION">
108 <my-global-icon iconName="user-add"></my-global-icon> 108 <my-global-icon iconName="user-add" aria-hidden="true"></my-global-icon>
109 109
110 <div class="message" i18n> 110 <div class="message" i18n>
111 User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }}</a> registered on your instance 111 User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }}</a> registered on your instance
@@ -136,7 +136,7 @@
136 </ng-container> 136 </ng-container>
137 137
138 <ng-container *ngSwitchCase="UserNotificationType.NEW_INSTANCE_FOLLOWER"> 138 <ng-container *ngSwitchCase="UserNotificationType.NEW_INSTANCE_FOLLOWER">
139 <my-global-icon iconName="users"></my-global-icon> 139 <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
140 140
141 <div class="message" i18n> 141 <div class="message" i18n>
142 Your instance has <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">a new follower</a> ({{ notification.actorFollow?.follower.host }}) 142 Your instance has <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">a new follower</a> ({{ notification.actorFollow?.follower.host }})
@@ -145,7 +145,7 @@
145 </ng-container> 145 </ng-container>
146 146
147 <ng-container *ngSwitchCase="UserNotificationType.AUTO_INSTANCE_FOLLOWING"> 147 <ng-container *ngSwitchCase="UserNotificationType.AUTO_INSTANCE_FOLLOWING">
148 <my-global-icon iconName="users"></my-global-icon> 148 <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
149 149
150 <div class="message" i18n> 150 <div class="message" i18n>
151 Your instance automatically followed <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">{{ notification.actorFollow.following.host }}</a> 151 Your instance automatically followed <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">{{ notification.actorFollow.following.host }}</a>
@@ -153,7 +153,7 @@
153 </ng-container> 153 </ng-container>
154 154
155 <ng-container *ngSwitchDefault> 155 <ng-container *ngSwitchDefault>
156 <my-global-icon iconName="alert"></my-global-icon> 156 <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
157 157
158 <div class="message" i18n> 158 <div class="message" i18n>
159 The notification points to a content now unavailable 159 The notification points to a content now unavailable
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index 9e551c1c8..54557df6b 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -10,7 +10,7 @@
10 <div class="action-block" *ngIf="actions.length > 0"> 10 <div class="action-block" *ngIf="actions.length > 0">
11 <a [routerLink]="action.routerLink" routerLinkActive="active" *ngFor="let action of actions"> 11 <a [routerLink]="action.routerLink" routerLinkActive="active" *ngFor="let action of actions">
12 <button class="btn"> 12 <button class="btn">
13 <my-global-icon [iconName]="action.iconName"></my-global-icon> 13 <my-global-icon [iconName]="action.iconName" aria-hidden="true"></my-global-icon>
14 <span>{{ action.label }}</span> 14 <span>{{ action.label }}</span>
15 </button> 15 </button>
16 </a> 16 </a>
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index d37ab478d..992c16585 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -9,7 +9,7 @@
9 9
10 <div class="video-bottom"> 10 <div class="video-bottom">
11 <div class="video-miniature-information"> 11 <div class="video-miniature-information">
12 <div class="d-inline-flex"> 12 <div class="d-inline-flex video-miniature-meta">
13 <div *ngIf="displayOptions.avatar" class="avatar"> 13 <div *ngIf="displayOptions.avatar" class="avatar">
14 <img [src]="getAvatarUrl()" alt="Avatar" /> 14 <img [src]="getAvatarUrl()" alt="Avatar" />
15 </div> 15 </div>
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 4e7c9fb57..d926c4dec 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -2,7 +2,7 @@
2@import '_mixins'; 2@import '_mixins';
3@import '_miniature'; 3@import '_miniature';
4 4
5$more-button-width: 41px; 5$more-button-width: 40px;
6$more-margin-right: 15px; 6$more-margin-right: 15px;
7 7
8.video-miniature { 8.video-miniature {
@@ -11,7 +11,6 @@ $more-margin-right: 15px;
11 padding-bottom: $video-miniature-margin-bottom; 11 padding-bottom: $video-miniature-margin-bottom;
12 height: 195px; 12 height: 195px;
13 vertical-align: top; 13 vertical-align: top;
14 overflow: hidden;
15 14
16 .video-bottom { 15 .video-bottom {
17 display: flex; 16 display: flex;
@@ -32,6 +31,11 @@ $more-margin-right: 15px;
32 @include miniature-name; 31 @include miniature-name;
33 } 32 }
34 33
34 .video-miniature-meta {
35 width: calc(100% + #{$more-button-width});
36 overflow: hidden;
37 }
38
35 .video-miniature-created-at-views { 39 .video-miniature-created-at-views {
36 display: block; 40 display: block;
37 font-size: 13px; 41 font-size: 13px;
@@ -122,7 +126,7 @@ $more-margin-right: 15px;
122 width: 100% !important; 126 width: 100% !important;
123 127
124 .video-miniature-information { 128 .video-miniature-information {
125 width: calc(100% - 40px) !important; 129 width: calc(100% - #{$more-button-width}) !important;
126 } 130 }
127 } 131 }
128 132
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
index 89948dac8..7287f799d 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
@@ -1,6 +1,6 @@
1<div *ngIf="!hasImportedVideo" class="upload-video-container" dragDrop (fileDropped)="setTorrentFile($event)"> 1<div *ngIf="!hasImportedVideo" class="upload-video-container" dragDrop (fileDropped)="setTorrentFile($event)">
2 <div class="first-step-block"> 2 <div class="first-step-block">
3 <my-global-icon class="upload-icon" iconName="upload"></my-global-icon> 3 <my-global-icon class="upload-icon" iconName="upload" aria-hidden="true"></my-global-icon>
4 4
5 <div class="button-file form-control" [ngbTooltip]="'(extensions: .torrent)'"> 5 <div class="button-file form-control" [ngbTooltip]="'(extensions: .torrent)'">
6 <span i18n>Select the torrent to import</span> 6 <span i18n>Select the torrent to import</span>
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
index 54bbe8123..1910da403 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
@@ -1,6 +1,6 @@
1<div *ngIf="!hasImportedVideo" class="upload-video-container"> 1<div *ngIf="!hasImportedVideo" class="upload-video-container">
2 <div class="first-step-block"> 2 <div class="first-step-block">
3 <my-global-icon class="upload-icon" iconName="upload"></my-global-icon> 3 <my-global-icon class="upload-icon" iconName="upload" aria-hidden="true"></my-global-icon>
4 4
5 <div class="form-group"> 5 <div class="form-group">
6 <label i18n for="targetUrl">URL</label> 6 <label i18n for="targetUrl">URL</label>
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
index a2c8af2ae..dad88a661 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
@@ -1,6 +1,6 @@
1<div *ngIf="!isUploadingVideo" class="upload-video-container" dragDrop (fileDropped)="setVideoFile($event)"> 1<div *ngIf="!isUploadingVideo" class="upload-video-container" dragDrop (fileDropped)="setVideoFile($event)">
2 <div class="first-step-block"> 2 <div class="first-step-block">
3 <my-global-icon class="upload-icon" iconName="upload"></my-global-icon> 3 <my-global-icon class="upload-icon" iconName="upload" aria-hidden="true"></my-global-icon>
4 4
5 <div class="button-file form-control" [ngbTooltip]="'(extensions: ' + videoExtensions + ')'"> 5 <div class="button-file form-control" [ngbTooltip]="'(extensions: ' + videoExtensions + ')'">
6 <span i18n>Select the file to upload</span> 6 <span i18n>Select the file to upload</span>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 63103e2e7..589aba603 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -59,38 +59,38 @@
59 59
60 <div class="video-actions-rates"> 60 <div class="video-actions-rates">
61 <div class="video-actions fullWidth justify-content-end"> 61 <div class="video-actions fullWidth justify-content-end">
62 <div 62 <button
63 [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" 63 [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" (keyup.enter)="setLike()"
64 class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'" 64 class="action-button action-button-like" [attr.aria-pressed]="userRating === 'like'" [attr.aria-label]="tooltipLike"
65 [ngbTooltip]="tooltipLike" 65 [ngbTooltip]="tooltipLike"
66 placement="bottom auto" 66 placement="bottom auto"
67 > 67 >
68 <my-global-icon iconName="like"></my-global-icon> 68 <my-global-icon iconName="like"></my-global-icon>
69 <span *ngIf="video.likes" class="count">{{ video.likes }}</span> 69 <span *ngIf="video.likes" class="count">{{ video.likes }}</span>
70 </div> 70 </button>
71 71
72 <div 72 <button
73 [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()" 73 [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()" (keyup.enter)="setDislike()"
74 class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'" 74 class="action-button action-button-dislike" [attr.aria-pressed]="userRating === 'dislike'" [attr.aria-label]="tooltipDislike"
75 [ngbTooltip]="tooltipDislike" 75 [ngbTooltip]="tooltipDislike"
76 placement="bottom auto" 76 placement="bottom auto"
77 > 77 >
78 <my-global-icon iconName="dislike"></my-global-icon> 78 <my-global-icon iconName="dislike"></my-global-icon>
79 <span *ngIf="video.dislikes" class="count">{{ video.dislikes }}</span> 79 <span *ngIf="video.dislikes" class="count">{{ video.dislikes }}</span>
80 </div> 80 </button>
81 81
82 <div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support" 82 <button *ngIf="video.support" (click)="showSupportModal()" (keyup.enter)="showSupportModal()" class="action-button action-button-support" [attr.aria-label]="tooltipSupport"
83 [ngbTooltip]="tooltipSupport" 83 [ngbTooltip]="tooltipSupport"
84 placement="bottom auto" 84 placement="bottom auto"
85 > 85 >
86 <my-global-icon iconName="support"></my-global-icon> 86 <my-global-icon iconName="support" aria-hidden="true"></my-global-icon>
87 <span class="icon-text" i18n>SUPPORT</span> 87 <span class="icon-text" i18n>SUPPORT</span>
88 </div> 88 </button>
89 89
90 <div (click)="showShareModal()" class="action-button" role="button"> 90 <button (click)="showShareModal()" (keyup.enter)="showShareModal()" class="action-button">
91 <my-global-icon iconName="share" aria-hidden="true"></my-global-icon> 91 <my-global-icon iconName="share" aria-hidden="true"></my-global-icon>
92 <span class="icon-text" i18n>SHARE</span> 92 <span class="icon-text" i18n>SHARE</span>
93 </div> 93 </button>
94 94
95 <div 95 <div
96 class="action-dropdown" ngbDropdown placement="top" role="button" autoClose="outside" 96 class="action-dropdown" ngbDropdown placement="top" role="button" autoClose="outside"
@@ -98,10 +98,10 @@
98 [ngbTooltip]="tooltipSaveToPlaylist" 98 [ngbTooltip]="tooltipSaveToPlaylist"
99 placement="bottom auto" 99 placement="bottom auto"
100 > 100 >
101 <div class="action-button action-button-save" ngbDropdownToggle role="button"> 101 <button class="action-button action-button-save" ngbDropdownToggle>
102 <my-global-icon iconName="playlist-add" aria-hidden="true"></my-global-icon> 102 <my-global-icon iconName="playlist-add" aria-hidden="true"></my-global-icon>
103 <span class="icon-text" i18n>SAVE</span> 103 <span class="icon-text" i18n>SAVE</span>
104 </div> 104 </button>
105 105
106 <div ngbDropdownMenu> 106 <div ngbDropdownMenu>
107 <my-video-add-to-playlist #addContent [video]="video"></my-video-add-to-playlist> 107 <my-video-add-to-playlist #addContent [video]="video"></my-video-add-to-playlist>