Fix some accessibility issues

22 files changed, 63 insertions, 44 deletions

diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
index 8c68b0abf..fa4a8edfd 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
@@ -52,7 +52,7 @@
   <ng-template pTemplate="header">
     <tr>
       <th style="width: 40px">
-        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+        <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox>
       </th>
       <th style="width: 40px"></th>
       <th style="width: 150px;"></th>
@@ -67,7 +67,7 @@
     <tr [pSelectableRow]="videoComment">
 
       <td class="checkbox-cell">
-        <p-tableCheckbox [value]="videoComment"></p-tableCheckbox>
+        <p-tableCheckbox [value]="videoComment" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
       </td>
 
       <td class="expand-cell c-hand" [pRowToggler]="videoComment" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html
index e1260c123..78c92227f 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@@ -124,7 +124,7 @@
         </my-help>
 
         <my-input-toggle-hidden
-          formControlName="password" id="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
+          formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
         ></my-input-toggle-hidden>
 
         <div *ngIf="formErrors.password" class="form-error">
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 38445cee7..b02faef5d 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -47,7 +47,7 @@
   <ng-template pTemplate="header">
     <tr>
       <th style="width: 40px">
-        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+        <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox>
       </th>
       <th style="width: 40px"></th>
       <th style="width: 60px;">
@@ -87,7 +87,7 @@
 
     <tr [pSelectableRow]="user" [ngClass]="{ banned: highlightBannedUsers && user.blocked }">
       <td class="checkbox-cell">
-        <p-tableCheckbox [value]="user"></p-tableCheckbox>
+        <p-tableCheckbox [value]="user" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
       </td>
 
       <td class="expand-cell">
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index e0be3b415..f4bb6215b 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -32,7 +32,7 @@
 
           <div class="form-group">
             <label i18n for="password">Password</label>
-            <my-input-toggle-hidden formControlName="password" id="password"
+            <my-input-toggle-hidden formControlName="password" inputId="password"
                                     i18n-placeholder placeholder="Password"
                                     [ngClass]="{ 'input-error': formErrors['password'] }"
                                     autocomplete="current-password" [tabindex]="2"></my-input-toggle-hidden>
@@ -42,7 +42,7 @@
           </div>
 
           <input type="submit" i18n-value value="Login" [disabled]="!form.valid">
-          
+
           <div class="additionnal-links">
             <a class="forgot-password-button" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
             <div *ngIf="signupAllowed" class="signup-link">
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
index f1127b6a1..43facb7ed 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@@ -4,7 +4,7 @@
 
   <label i18n for="current-password">Change password</label>
   <my-input-toggle-hidden formControlName="current-password"
-                          id="current-password"
+                          inputId="current-password"
                           i18n-placeholder placeholder="Current password"
                           [ngClass]="{ 'input-error': formErrors['current-password'] }"
                           autocomplete="current-password"></my-input-toggle-hidden>
@@ -13,7 +13,7 @@
   </div>
 
   <my-input-toggle-hidden formControlName="new-password"
-                          id="new-password"
+                          inputId="new-password"
                           i18n-placeholder placeholder="New password"
                           [ngClass]="{ 'input-error': formErrors['new-password'] }"
                           autocomplete="new-password"></my-input-toggle-hidden>
@@ -22,7 +22,7 @@
   </div>
 
   <my-input-toggle-hidden formControlName="new-confirmed-password"
-                          id="new-confirmed-password"
+                          inputId="new-confirmed-password"
                           i18n-placeholder placeholder="Confirm new password"
                           [ngClass]="{ 'input-error': formErrors['new-confirmed-password'] }"
                           autocomplete="new-password"></my-input-toggle-hidden>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
index 0d1f3094a..4e3fda587 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
@@ -11,8 +11,7 @@ my-input-toggle-hidden {
   display: block;
 }
 
-#new-password,
-#new-confirmed-password  {
+my-input-toggle-hidden + my-input-toggle-hidden {
   margin-top: 15px;
 }
 
diff --git a/client/src/app/+reset-password/reset-password.component.html b/client/src/app/+reset-password/reset-password.component.html
index db9c74f89..143f426ec 100644
--- a/client/src/app/+reset-password/reset-password.component.html
+++ b/client/src/app/+reset-password/reset-password.component.html
@@ -6,7 +6,7 @@
   <form role="form" (ngSubmit)="resetPassword()" [formGroup]="form">
     <div class="form-group">
       <label i18n for="password">Password</label>
-      <my-input-toggle-hidden formControlName="password" id="password"
+      <my-input-toggle-hidden formControlName="password" inputId="password"
                               i18n-placeholder placeholder="Password"
                               [ngClass]="{ 'input-error': formErrors['password'] }"
                               autocomplete="new-password"></my-input-toggle-hidden>
@@ -17,7 +17,7 @@
 
     <div class="form-group">
       <label i18n for="password-confirm">Confirm password</label>
-      <my-input-toggle-hidden formControlName="password-confirm" id="password-confirm"
+      <my-input-toggle-hidden formControlName="password-confirm" inputId="password-confirm"
                               i18n-placeholder placeholder="Confirmed password"
                               [ngClass]="{ 'input-error': formErrors['password-confirm'] }"
                               autocomplete="new-password"></my-input-toggle-hidden>
diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html
index ac341666b..cab21c655 100644
--- a/client/src/app/+signup/+register/register-step-user.component.html
+++ b/client/src/app/+signup/+register/register-step-user.component.html
@@ -54,7 +54,7 @@
 
   <div class="form-group">
     <label for="password" i18n>Password</label>
-    <my-input-toggle-hidden formControlName="password" id="password"
+    <my-input-toggle-hidden formControlName="password" inputId="password"
                             i18n-placeholder placeholder="Password"
                             [ngClass]="{ 'input-error': formErrors['password'] }"
                             autocomplete="new-password"></my-input-toggle-hidden>
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
index d75f37074..9c2aea526 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
@@ -216,12 +216,12 @@
 
             <div class="form-group">
               <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label>
-              <my-input-toggle-hidden id="liveVideoRTMPUrl" [value]="liveVideo.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+              <my-input-toggle-hidden inputId="liveVideoRTMPUrl" [value]="liveVideo.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
             </div>
 
             <div class="form-group">
               <label for="liveVideoStreamKey" i18n>Live stream key</label>
-              <my-input-toggle-hidden id="liveVideoStreamKey" [value]="liveVideo.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
+              <my-input-toggle-hidden inputId="liveVideoStreamKey" [value]="liveVideo.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
 
               <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div>
             </div>
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 785514c76..211acc6f6 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
@@ -4,7 +4,10 @@
 
     <div class="button-file form-control" [ngbTooltip]="'(extensions: .torrent)'">
       <span i18n>Select the torrent to import</span>
-      <input #torrentfileInput type="file" name="torrentfile" id="torrentfile" accept=".torrent" (change)="fileChange()" />
+      <input
+        aria-label="Select the torrent to import" i18n-aria-label
+        #torrentfileInput type="file" name="torrentfile" id="torrentfile" accept=".torrent" (change)="fileChange()"
+      />
     </div>
 
     <div class="torrent-or-magnet" i18n-data-content data-content="OR"></div>
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 88ee4e32a..51e16150e 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
@@ -4,7 +4,10 @@
 
     <div class="button-file form-control" [ngbTooltip]="'(extensions: ' + videoExtensions + ')'">
       <span i18n>Select the file to upload</span>
-      <input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" autofocus />
+      <input
+        aria-label="Select the file to upload" i18n-aria-label
+        #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" autofocus
+      />
     </div>
 
     <div class="form-group form-group-channel">
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
index 548da59bb..03e86b8e6 100644
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@@ -4,7 +4,10 @@
     [(ngModel)]="search" (ngModelChange)="onSearchChange()" (keydown)="handleKey($event)" (keydown.enter)="doSearch()"
     aria-label="Search" autocomplete="off"
   >
-  <my-global-icon iconName="search" class="icon icon-search" role="button" (click)="doSearch()" (keydown.enter)="doSearch()"></my-global-icon>
+  <my-global-icon
+    title="Search" i18n-title role="button"
+    iconName="search" class="icon icon-search" (click)="doSearch()" (keydown.enter)="doSearch()"
+  ></my-global-icon>
 
   <div class="position-absolute jump-to-suggestions">
 
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.html b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
index 658d8ce5b..cb82ad752 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.html
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
@@ -5,7 +5,7 @@
 
   <input *ngIf="setting.type === 'input'" type="text" [id]="setting.name" [formControlName]="setting.name" />
 
-  <my-input-toggle-hidden *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [id]="setting.name"></my-input-toggle-hidden>
+  <my-input-toggle-hidden *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [inputId]="setting.name"></my-input-toggle-hidden>
 
   <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea>
 
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
index af7c6650f..e7441e4c1 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
@@ -1,12 +1,19 @@
 <div class="input-group input-group-sm">
-  <input [id]="id" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex" [(ngModel)]="value" (ngModelChange)="update()" [ngClass]="{ 'readonly': readonly }" [readonly]="readonly"
-         #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control" />
+  <input
+    [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex"
+    [(ngModel)]="value" (ngModelChange)="update()" [ngClass]="{ 'readonly': readonly }" [readonly]="readonly"
+    #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
+  />
 
   <div *ngIf="withToggle || withCopy" class="input-group-append">
     <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle">
       <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span>
     </button>
-    <button *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary" i18n-title title="Copy">
+
+    <button
+      *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
+      class="btn btn-outline-secondary" i18n-title title="Copy"
+    >
       <span class="glyphicon glyphicon-copy"></span>
     </button>
   </div>
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts b/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts
index 56e5b9762..e03353fe1 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts
@@ -15,7 +15,7 @@ import { Notifier } from '@app/core'
   ]
 })
 export class InputToggleHiddenComponent implements ControlValueAccessor {
-  @Input() id = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined
+  @Input() inputId = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined
   @Input() value = ''
   @Input() autocomplete = 'off'
   @Input() placeholder = ''
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.html b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
index 704f3e696..9d0402224 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
@@ -8,7 +8,7 @@
         [id]="inputName"
         [disabled]="disabled"
       />
-      <span role="checkbox" [attr.aria-checked]="checked"></span>
+      <span role="checkbox" [attr.aria-checked]="checked" [attr.aria-label]="labelText || labelInnerHTML"></span>
       <span *ngIf="labelText">{{ labelText }}</span>
       <span
         *ngIf="!labelText && labelInnerHTML"
diff --git a/client/src/app/shared/shared-forms/select/select-channel.component.html b/client/src/app/shared/shared-forms/select/select-channel.component.html
index 897d13ee7..f83f17a16 100644
--- a/client/src/app/shared/shared-forms/select/select-channel.component.html
+++ b/client/src/app/shared/shared-forms/select/select-channel.component.html
@@ -7,10 +7,7 @@
   [searchable]="searchable"
 >
   <ng-option *ngFor="let channel of channels" [value]="channel.id">
-    <img
-      class="avatar mr-1"
-      [src]="channel.avatarPath"
-    />
+    <img alt="" class="avatar mr-1" [src]="channel.avatarPath" />
     {{ channel.label }}
   </ng-option>
 </ng-select>
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
index 8b363b351..d0487f0b8 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -1,7 +1,7 @@
 <div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)">
   <button
     class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
-    ngbDropdownToggle role="button"
+    ngbDropdownToggle role="button" aria-label="Open actions" i18n-aria-label
   >
     <my-global-icon *ngIf="!label && buttonDirection === 'horizontal'" class="more-icon" iconName="more-horizontal"></my-global-icon>
     <my-global-icon *ngIf="!label && buttonDirection === 'vertical'" class="more-icon" iconName="more-vertical"></my-global-icon>
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.html b/client/src/app/shared/shared-main/feeds/feed.component.html
index a00011785..914fe6d46 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.html
+++ b/client/src/app/shared/shared-main/feeds/feed.component.html
@@ -1,7 +1,8 @@
 <div class="feed">
   <my-global-icon
+    role="button" aria-label="Open syndication dropdown" i18n-aria-label
     *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom left auto"
-    class="icon-syndication" role="button" iconName="syndication"
+    class="icon-syndication" iconName="syndication"
   >
   </my-global-icon>
 
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
index 85b3d1fdb..d60fd5c5f 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
@@ -1,5 +1,7 @@
-<div class="btn-group-subscribe btn-group"
-    [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }">
+<div
+  class="btn-group-subscribe btn-group"
+  [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }"
+>
 
   <ng-template #userLoggedOut>
     <span [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed }">
@@ -18,9 +20,10 @@
   </ng-template>
 
   <ng-template #userLoggedIn>
-    <button *ngIf="!isAllChannelsSubscribed" type="button"
-            class="btn btn-sm" role="button"
-            (click)="subscribe()">
+    <button
+      *ngIf="!isAllChannelsSubscribed" type="button"
+      class="btn btn-sm" (click)="subscribe()"
+    >
       <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
     </button>
 
@@ -36,10 +39,11 @@
     *ngIf="isUserLoggedIn(); then userLoggedIn">
   </ng-container>
 
-  <div class="btn-group" ngbDropdown autoClose="outside"
-       placement="bottom-right" role="group"
-       aria-label="Multiple ways to subscribe to the current channel">
-    <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle>
+  <div
+    class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right"
+    role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label
+  >
+    <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
       <ng-container
         *ngIf="!isUserLoggedIn(); then userLoggedOut">
       </ng-container>
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.html b/client/src/app/shared/shared-video-live/live-stream-information.component.html
index e7b00cd01..57920239d 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.html
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.html
@@ -17,12 +17,12 @@
 
     <div class="form-group">
       <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label>
-      <my-input-toggle-hidden id="liveVideoRTMPUrl" [value]="live.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-toggle-hidden inputId="liveVideoRTMPUrl" [value]="live.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
     </div>
 
     <div class="form-group">
       <label for="liveVideoStreamKey" i18n>Live stream key</label>
-      <my-input-toggle-hidden id="liveVideoStreamKey" [value]="live.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-toggle-hidden inputId="liveVideoStreamKey" [value]="live.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
 
       <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div>
     </div>
diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html
index 00ee196ac..0cbf05bcc 100644
--- a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html
@@ -1,6 +1,8 @@
 <ng-container *ngIf="videoActions.length !== 0">
 
-  <div class="playlist-dropdown" ngbDropdown #playlistDropdown="ngbDropdown" role="button" autoClose="outside" [placement]="getPlaylistDropdownPlacement()"
+  <div
+    role="button" aria-label="Open video actions" i18n-aria-label
+    class="playlist-dropdown" ngbDropdown #playlistDropdown="ngbDropdown" autoClose="outside" [placement]="getPlaylistDropdownPlacement()"
     *ngIf="isUserLoggedIn() && displayOptions.playlist" (openChange)="playlistAdd.openChange($event)"
   >
     <span class="anchor" ngbDropdownAnchor></span>