Fix upnext, refactor avatar menu, add to playlist overflow

11 files changed, 73 insertions, 26 deletions

diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 6269091df..70257162d 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -23,7 +23,7 @@
           <span *ngIf="account.mutedServerByInstance" class="badge badge-danger" i18n>Instance muted by your instance</span>
 
           <my-user-moderation-dropdown
-            buttonSize="small" [account]="account" [user]="user"
+            buttonSize="small" [account]="account" [user]="user" placement="bottom-right auto"
             (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
           >
           </my-user-moderation-dropdown>
diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html
index 1b6e6dcf8..8ffec46da 100644
--- a/client/src/app/menu/avatar-notification.component.html
+++ b/client/src/app/menu/avatar-notification.component.html
@@ -25,7 +25,7 @@
       </div>
     </div>
 
-    <div *ngIf="!loaded" class="loader">
+    <div *ngIf="!loaded" class="loader mt-4">
       <my-loader [loading]="!loaded"></my-loader>
     </div>
 
diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss
index 713ac7cb9..2ca7f24dc 100644
--- a/client/src/app/menu/avatar-notification.component.scss
+++ b/client/src/app/menu/avatar-notification.component.scss
@@ -45,7 +45,7 @@
         align-items: center;
         padding: 0 10px;
         font-size: 16px;
-        height: 50px;
+        min-height: 50px;
 
         a {
           @include disable-default-a-behaviour;
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 3f406586e..848f9949f 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -5,8 +5,10 @@
         <my-avatar-notification [user]="user"></my-avatar-notification>
 
         <div class="logged-in-info">
-          <a routerLink="/my-account/settings" class="logged-in-display-name">{{ user.account?.displayName }}</a>
-          <div class="logged-in-username">{{ user.username }}</div>
+          <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="logged-in-display-name">{{ user.account?.displayName }}</a>
+          <a *ngIf="!user.account" routerLink="/my-account/settings" class="logged-in-display-name">{{ user.account?.displayName }}</a>
+
+          <div ngxClipboard [cbContent]="user.account?.nameWithHost" class="logged-in-username">{{ user.username }}</div>
         </div>
 
         <div class="logged-in-more" ngbDropdown placement="bottom-right auto">
@@ -14,13 +16,21 @@
 
           <div ngbDropdownMenu>
             <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="dropdown-item">
-              <my-global-icon iconName="go"></my-global-icon> <ng-container i18n>My public profile</ng-container>
+              <my-global-icon iconName="go"></my-global-icon> <ng-container i18n>Public profile</ng-container>
             </a>
 
+            <div class="dropdown-divider"></div>
+
             <a routerLink="/my-account" class="dropdown-item">
-              <my-global-icon iconName="user"></my-global-icon> <ng-container i18n>My account</ng-container>
+              <my-global-icon iconName="user"></my-global-icon> <ng-container i18n>Account settings</ng-container>
             </a>
 
+            <a routerLink="/my-account/video-channels" class="dropdown-item">
+              <my-global-icon iconName="folder"></my-global-icon> <ng-container i18n>Channels settings</ng-container>
+            </a>
+
+            <div class="dropdown-divider"></div>
+
             <a (click)="logout($event)" class="dropdown-item" href="#">
               <my-global-icon iconName="sign-out"></my-global-icon> <ng-container i18n>Log out</ng-container>
             </a>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 79a28d258..2963d4d19 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -69,6 +69,7 @@ menu {
         font-size: 13px;
         color: #C6C6C6;
         max-width: 140px;
+        cursor: pointer;
       }
     }
 
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index f26240d21..b1d1fc0b5 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -169,6 +169,26 @@ function importModule (path: string) {
   })
 }
 
+function isInViewport (el: HTMLElement) {
+  const bounding = el.getBoundingClientRect()
+  return (
+      bounding.top >= 0 &&
+      bounding.left >= 0 &&
+      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+      bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
+
+function isXPercentInViewport (el: HTMLElement, percentVisible: number) {
+  const rect = el.getBoundingClientRect()
+  const windowHeight = (window.innerHeight || document.documentElement.clientHeight)
+
+  return !(
+    Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible ||
+    Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible
+  )
+}
+
 export {
   sortBy,
   durationToString,
@@ -183,5 +203,7 @@ export {
   objectLineFeedToHtml,
   removeElementFromArray,
   importModule,
-  scrollToTop
+  scrollToTop,
+  isInViewport,
+  isXPercentInViewport
 }
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
index 648d580fa..0cc8af345 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
@@ -41,14 +41,16 @@
     </div>
   </div>
 
-  <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)">
-    <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist" [onPushWorkaround]="true"></my-peertube-checkbox>
+  <div class="playlists">
+    <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)">
+      <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist" [onPushWorkaround]="true"></my-peertube-checkbox>
 
-    <div class="display-name">
-      {{ playlist.displayName }}
+      <div class="display-name">
+        {{ playlist.displayName }}
 
-      <div *ngIf="playlist.inPlaylist && (playlist.startTimestamp || playlist.stopTimestamp)" class="timestamp-info">
-        {{ formatTimestamp(playlist) }}
+        <div *ngIf="playlist.inPlaylist && (playlist.startTimestamp || playlist.stopTimestamp)" class="timestamp-info">
+          {{ formatTimestamp(playlist) }}
+        </div>
       </div>
     </div>
   </div>
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
index c677fea6c..090b530cf 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -1,11 +1,6 @@
 @import '_variables';
 @import '_mixins';
 
-.root {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
 .header {
   min-width: 240px;
   padding: 6px 24px 10px 24px;
@@ -53,6 +48,11 @@
   padding: 6px 24px;
 }
 
+.playlists {
+  max-height: 180px;
+  overflow-y: auto;
+}
+
 .playlist {
   display: flex;
   cursor: pointer;
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 7a9f00a50..9e69033e1 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -114,9 +114,9 @@
                   ></my-video-actions-dropdown>
                 </div>
 
-                <div class="video-info-likes-dislikes-bar-outerContainer">
+                <div class="video-info-likes-dislikes-bar-outer-container">
                   <div
-                    class="video-info-likes-dislikes-bar-innerContainer"
+                    class="video-info-likes-dislikes-bar-inner-container"
                     *ngIf="video.likes !== 0 || video.dislikes !== 0"
                     [ngbTooltip]="likesBarTooltipText"
                     placement="bottom"
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 180b7c6ad..f9ff83c34 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -297,13 +297,13 @@ $video-info-margin-left: 44px;
           }
         }
 
-        .video-info-likes-dislikes-bar-outerContainer {
+        .video-info-likes-dislikes-bar-outer-container {
           position: relative;
         }
 
-        .video-info-likes-dislikes-bar-innerContainer {
+        .video-info-likes-dislikes-bar-inner-container {
           position: absolute;
-          height: 30px;
+          height: 20px;
         }
 
         .video-info-likes-dislikes-bar {
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index bad0144bf..dcceb1400 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -37,7 +37,7 @@ import { PluginService } from '@app/core/plugins/plugin.service'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { PlatformLocation } from '@angular/common'
 import { RecommendedVideosComponent } from '../recommendations/recommended-videos.component'
-import { scrollToTop } from '@app/shared/misc/utils'
+import { scrollToTop, isInViewport, isXPercentInViewport } from '@app/shared/misc/utils'
 
 @Component({
   selector: 'my-video-watch',
@@ -478,12 +478,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
       /**
        * replaces this.player.one('ended')
-       * define 'condition(next)' to return true to wait, false to stop
+       * 'condition()': true to make the upnext functionality trigger,
+       *                false to disable the upnext functionality
+       * go to the next video in 'condition()' if you don't want of the timer.
+       * 'next': function triggered at the end of the timer.
+       * 'suspended': function used at each clic of the timer checking if we need
+       * to reset progress and wait until 'suspended' becomes truthy again.
        */
       this.player.upnext({
         timeout: 10000, // 10s
         headText: this.i18n('Up Next'),
         cancelText: this.i18n('Cancel'),
+        suspendedText: this.i18n('Autoplay is suspended'),
         getTitle: () => this.nextVideoTitle,
         next: () => this.zone.run(() => this.autoplayNext()),
         condition: () => {
@@ -496,6 +502,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
             return true // upnext will trigger
           }
           return false // upnext will not trigger, and instead leave the video stopping
+        },
+        suspended: () => {
+          return (
+            !isXPercentInViewport(this.player.el(), 80) ||
+            !document.getElementById('content').contains(document.activeElement)
+          )
         }
       })