7 files changed, 343 insertions, 95 deletions

diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html
index 7975afba5..df2a102a3 100644
--- a/client/src/app/menu/avatar-notification.component.html
+++ b/client/src/app/menu/avatar-notification.component.html
@@ -30,7 +30,7 @@
     </div>
 
     <my-user-notifications
-      [ignoreLoadingBar]="true" [infiniteScroll]="false" itemsPerPage="10"
+      [ignoreLoadingBar]="true" [infiniteScroll]="false" [itemsPerPage]="10"
       [markAllAsReadSubject]="markAllAsReadSubject" (notificationsLoaded)="onNotificationLoaded()"
     ></my-user-notifications>
 
diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts
index 989a11849..c447f031c 100644
--- a/client/src/app/menu/avatar-notification.component.ts
+++ b/client/src/app/menu/avatar-notification.component.ts
@@ -6,7 +6,6 @@ import { Notifier, UserNotificationSocket } from '@app/core'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { NavigationEnd, Router } from '@angular/router'
 import { filter } from 'rxjs/operators'
-import { UserNotificationsComponent } from '@app/shared'
 
 @Component({
   selector: 'my-avatar-notification',
diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss
index 72deb3952..6226a85cb 100644
--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@@ -4,6 +4,13 @@
 .help-to-translate {
   @include peertube-button-link;
   @include orange-button;
+
+  &.focus-visible,
+  &:focus {
+    box-shadow: none;
+  }
+
+  border-radius: 0;
 }
 
 .modal-body {
diff --git a/client/src/app/menu/language-chooser.component.ts b/client/src/app/menu/language-chooser.component.ts
index 4a6e4c75a..9bc934ad4 100644
--- a/client/src/app/menu/language-chooser.component.ts
+++ b/client/src/app/menu/language-chooser.component.ts
@@ -1,7 +1,9 @@
-import { Component, ElementRef, ViewChild } from '@angular/core'
+import { Component, ElementRef, ViewChild, Inject, LOCALE_ID } from '@angular/core'
 import { I18N_LOCALES } from '../../../../shared'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { sortBy } from '@app/shared/misc/utils'
+import { getCompleteLocale } from '@shared/models/i18n'
+import { isOnDevLocale, getDevLocale } from '@app/shared/i18n/i18n-utils'
 
 @Component({
   selector: 'my-language-chooser',
@@ -13,7 +15,10 @@ export class LanguageChooserComponent {
 
   languages: { id: string, label: string }[] = []
 
-  constructor (private modalService: NgbModal) {
+  constructor (
+    private modalService: NgbModal,
+    @Inject(LOCALE_ID) private localeId: string
+  ) {
     const l = Object.keys(I18N_LOCALES)
                     .map(k => ({ id: k, label: I18N_LOCALES[k] }))
 
@@ -21,11 +26,18 @@ export class LanguageChooserComponent {
   }
 
   show () {
-    this.modalService.open(this.modal)
+    this.modalService.open(this.modal, { centered: true })
   }
 
   buildLanguageLink (lang: { id: string }) {
     return window.location.origin + '/' + lang.id
   }
 
+  getCurrentLanguage () {
+    const english = 'English'
+    const locale = isOnDevLocale() ? getDevLocale() : getCompleteLocale(this.localeId)
+
+    if (locale) return I18N_LOCALES[locale] || english
+    return english
+  }
 }
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 675fb597d..1cb51ef55 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -8,34 +8,65 @@
           <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 class="logged-in-username">{{ user.username }}</div>
         </div>
 
-        <div class="logged-in-more" ngbDropdown placement="bottom-right auto">
+        <div class="logged-in-more" ngbDropdown [placement]="placement" container="body" autoClose="outside">
           <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button"></my-global-icon>
 
           <div ngbDropdownMenu>
-            <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="dropdown-item">
+            <a *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/accounts', user.account.nameWithHost ]">
               <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">
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account">
               <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">
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/video-channels">
               <my-global-icon iconName="folder"></my-global-icon> <ng-container i18n>Channels settings</ng-container>
             </a>
 
             <div class="dropdown-divider"></div>
 
-            <a class="dropdown-item" href="https://joinpeertube.org/help" target="_blank" rel="noopener noreferrer">
-              <my-global-icon iconName="help"></my-global-icon> <ng-container i18n>Help</ng-container>
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openLanguageChooser()">
+              <my-global-icon iconName="language"></my-global-icon>
+              <ng-container i18n>Interface: {{ language }}</ng-container>
+              <i class="ml-auto glyphicon glyphicon-menu-right"></i>
             </a>
 
-            <a (click)="logout($event)" class="dropdown-item" href="#">
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-settings">
+              <my-global-icon iconName="video-lang"></my-global-icon>
+              <ng-container i18n>Videos: {{ videoLanguages.join(', ') }}</ng-container>
+              <i class="ml-auto glyphicon glyphicon-menu-right"></i>
+            </a>
+
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-settings">
+              <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive"></my-global-icon>
+              <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive"></my-global-icon>
+              <ng-container i18n>Sensitive: {{ nsfwPolicy }}</ng-container>
+              <i class="ml-auto glyphicon glyphicon-menu-right"></i>
+            </a>
+
+            <a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
+              <my-global-icon iconName="p2p"></my-global-icon>
+              <ng-container i18n>Help share videos</ng-container>
+              <input type="checkbox" [checked]="user.webTorrentEnabled"/><label class="ml-auto" for="switch">Toggle p2p</label>
+            </a>
+
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account">
+              <my-global-icon iconName="more-horizontal"></my-global-icon> <ng-container i18n>More account settings</ng-container>
+            </a>
+
+            <div class="dropdown-divider"></div>
+
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openHotkeysCheatSheet()">
+              <i class="icon icon-shortcuts"></i> <ng-container i18n>Keyboard shortcuts</ng-container>
+            </a>
+
+            <a ngbDropdownItem ngbDropdownToggle (click)="logout($event)" class="dropdown-item" href="#">
               <my-global-icon iconName="sign-out"></my-global-icon> <ng-container i18n>Log out</ng-container>
             </a>
           </div>
@@ -48,7 +79,7 @@
       </div>
 
       <div *ngIf="isLoggedIn" class="panel-block">
-        <div i18n class="block-title">My library</div>
+        <div i18n class="block-title">MY LIBRARY</div>
 
         <a routerLink="/my-account/videos" routerLinkActive="active">
           <my-global-icon iconName="videos"></my-global-icon>
@@ -73,7 +104,7 @@
       </div>
 
       <div class="panel-block">
-        <div i18n class="block-title">Videos</div>
+        <div i18n class="block-title">VIDEOS</div>
 
         <a routerLink="/videos/overview" routerLinkActive="active">
           <my-global-icon iconName="globe"></my-global-icon>
@@ -100,32 +131,56 @@
           <ng-container i18n>Local</ng-container>
         </a>
       </div>
+    </div>
 
+    <div class="footer">
       <div class="panel-block">
-        <div class="block-title" i18n>More</div>
-
         <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
-          <my-global-icon iconName="administration"></my-global-icon>
+          <my-global-icon iconName="cog"></my-global-icon>
           <ng-container i18n>Administration</ng-container>
         </a>
-
-        <a routerLink="/about" routerLinkActive="active">
-          <my-global-icon iconName="about"></my-global-icon>
+        <a *ngIf="!isLoggedIn" (click)="openQuickSettings()">
+          <my-global-icon iconName="cog"></my-global-icon>
+          <ng-container i18n>Settings</ng-container>
+        </a>
+        <a routerLink="/about/instance">
+          <my-global-icon iconName="help"></my-global-icon>
           <ng-container i18n>About</ng-container>
         </a>
       </div>
-    </div>
 
-    <div class="footer d-flex justify-content-between">
-      <span class="language">
-        <span tabindex="0" role="button" (keyup.enter)="openLanguageChooser()" (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span>
-      </span>
+      <div class="bottom-links">
 
-      <span class="shortcuts">
-        <span tabindex="0" role="button" (keyup.enter)="openHotkeysCheatSheet()" (click)="openHotkeysCheatSheet()" i18n-title title="Show keyboard shortcuts" class="icon icon-shortcuts"></span>
-      </span>
+        <div class="footer-links">
+          <div *ngIf="isLoggedIn === false">
+            <span role="button" (click)="openLanguageChooser()" class="c-hand" i18n>Interface: {{ language }}</span>
+          </div>
+
+          <div>
+            <a i18n routerLink="/about/instance">Contact</a>
+            <a i18n href="https://joinpeertube.org/help" i18n-title title="Get help using PeerTube" target="_blank" rel="noopener noreferrer">Help</a>
+            <a i18n href="https://joinpeertube.org/faq" i18n-title title="Frequently asked questions about PeerTube" target="_blank" rel="noopener noreferrer">FAQ</a>
+            <a i18n routerLink="/about/instance" fragment="statistics">Stats</a>
+            <a i18n href="https://docs.joinpeertube.org/api-rest-reference.html" i18n-title title="API documentation" target="_blank" rel="noopener noreferrer">API</a>
+            <a (click)="openHotkeysCheatSheet()" class="c-hand" i18n>Shortcuts</a>
+          </div>
+        </div>
+
+        <div class="footer-copyleft">
+          <small class="d-inline" i18n-title title="powered by PeerTube - CopyLeft 2015-2020">
+            <a href="https://joinpeertube.org" i18n-title title="PeerTube website" target="_blank" rel="noopener noreferrer" i18n>
+              powered by PeerTube
+            </a>
+
+            <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE" i18n-title title="PeerTube license" target="_blank" rel="noopener noreferrer">
+              <span aria-label="copyleft" class="d-inline-block" style="transform: rotateY(180deg)">&copy;</span> 2015-2020
+            </a>
+          </small>
+        </div>
+      </div>
     </div>
   </menu>
 </div>
 
 <my-language-chooser #languageChooserModal></my-language-chooser>
+<my-quick-settings #quickSettingsModal></my-quick-settings>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index b05173751..5bff0c328 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -6,7 +6,8 @@
   height: calc(100vh - #{$header-height});
   padding: 0;
   width: $menu-width;
-  z-index: 10000;
+  z-index: z(menu);
+  scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor);
 }
 
 menu {
@@ -26,9 +27,13 @@ menu {
     overflow-y: auto;
   }
 
+  @media not all and (hover: hover) and (pointer: fine) {
+    overflow-y: auto;
+  }
+
   &.logged-in {
     .panel-block {
-      margin-bottom: 25px;
+      margin-bottom: 20px;
     }
 
     .block-title {
@@ -87,22 +92,6 @@ menu {
           @include apply-svg-color(var(--menuForegroundColor));
         }
       }
-
-      .dropdown-item {
-        @include dropdown-with-icon-item;
-
-        my-global-icon {
-          width: 22px;
-          height: 22px;
-
-          &[iconName="sign-out"] {
-            position: relative;
-            right: -1px;
-            height: 21px;
-            width: 21px;
-          }
-        }
-      }
     }
   }
 
@@ -142,7 +131,7 @@ menu {
   }
 
   .panel-block {
-    margin-bottom: 45px;
+    margin-bottom: 15px;
 
     a {
       @include disable-default-a-behaviour;
@@ -197,58 +186,160 @@ menu {
   }
 
   .footer {
-    padding-bottom: 15px;
-    padding-left: $menu-lateral-padding;
-    padding-right: $menu-lateral-padding;
     width: $menu-width;
+    padding-bottom: 15px;
 
-    .language, .shortcuts, .color-palette {
-      display: inline-block;
-      color: $menu-bottom-color;
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: $font-semibold;
+    .bottom-links {
+      display: flex;
+      flex-direction: column;
+      padding: 0 $menu-lateral-padding;
+    }
 
-      .icon {
-        @include disable-outline;
-        @include icon(28px);
-        opacity: 0.9;
+    $footer-links-base-opacity: .8;
 
-        &.icon-language  {
-          position: relative;
-          top: -1px;
-          width: 28px;
-          height: 24px;
+    .footer-links {
+      &, > div {
+        display: flex;
+        flex-wrap: wrap;
+      }
 
-          background-image: url('../../assets/images/menu/language.png');
+      a, span[role=button] {
+        display: inline-block;
+        text-decoration: none;
+        color: var(--mainBackgroundColor);
+        opacity: $footer-links-base-opacity;
+        white-space: nowrap;
+        font-size: 90%;
+        font-weight: 500;
+        line-height: 1.4rem;
+        margin-right: 8px;
+
+        &.inline-global-icon {
+          display: inline-flex;
+          align-items: center;
+          white-space: nowrap;
+          height: 1.4rem;
+
+          my-global-icon {
+            @include apply-svg-color(var(--mainBackgroundColor));
+
+            display: flex;
+            width: auto;
+            height: 90%;
+            margin-right: .2rem;
+          }
         }
+      }
+    }
 
-        &.icon-shortcuts  {
-          position: relative;
-          top: -1px;
-          width: 24px;
-          height: 24px;
+    .footer-copyleft small a {
+      @include disable-default-a-behaviour;
 
-          background-image: url('../../assets/images/menu/keyboard.png');
-          filter: invert(100%);
-        }
+      color: var(--mainBackgroundColor);
+      opacity: $footer-links-base-opacity - .2;
+    }
+  }
+}
 
-        &.icon-moonsun  {
-          margin-left: 10px;
-          position: relative;
-          top: -1px;
-          width: 24px;
-          height: 24px;
+.dropdown-menu {
+  width: calc(100% + 40px);
+}
 
-          background-image: url('../../assets/images/menu/moonsun.svg');
-        }
+.dropdown-item {
+  @include dropdown-with-icon-item;
 
-        &:hover {
-          opacity: 1;
-        }
-      }
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  i.glyphicon-menu-right {
+    opacity: .4;
+  }
+
+  my-global-icon {
+    &[iconName="cog"],
+    &[iconName="sign-out"] {
+      position: relative;
+      right: -2px;
+      height: 20px;
+      width: 20px;
     }
   }
+
+  my-global-icon.not-displayed {
+    display: none;
+  }
+
+  &:hover {
+    my-global-icon.hover-display-toggle.not-displayed {
+      display: inherit;
+    }
+    my-global-icon.hover-display-toggle {
+      display: none;
+    }
+  }
+}
+
+.more-settings {
+  text-transform: uppercase;
+  font-size: 80%;
+  color: #6c757d;
+}
+
+.icon {
+  @include disable-outline;
+  @include icon(22px);
+  opacity: 0.8;
+
+  &.icon-shortcuts  {
+    position: relative;
+    top: -1px;
+    margin-right: 10px;
+
+    background-image: url('../../assets/images/menu/keyboard.png');
+  }
+}
+
+input[type=checkbox]{
+  position: absolute;
+  visibility: hidden;
+}
+
+label {
+  cursor: pointer;
+  text-indent: -9999px;
+  width: 35px;
+  height: 20px;
+  background: #cccccc;
+  display: block;
+  border-radius: 100px;
+  position: relative;
+  margin: 0;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 14px;
+    height: 14px;
+    background: var(--mainBackgroundColor);
+    border-radius: 50%;
+    transition: 0.3s ease-out;
+  }
+
+  &:active:after {
+    width: 40px;
+  }
+}
+
+input:checked + label {
+  background: var(--mainColor);
+
+  &:after {
+    left: calc(100% - 3px);
+    transform: translateX(-100%);
+  }
 }
 
 @media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 1d7651e78..015c14bce 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -1,10 +1,14 @@
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { UserRight } from '../../../../shared/models/users/user-right.enum'
-import { AuthService, AuthStatus, RedirectService, ServerService, ThemeService } from '../core'
-import { User } from '../shared/users/user.model'
+import { AuthService, AuthStatus, RedirectService, ServerService } from '../core'
+import { User } from '@app/shared/users/user.model'
+import { UserService } from '@app/shared/users/user.service'
 import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
 import { HotkeysService } from 'angular2-hotkeys'
-import { ServerConfig } from '@shared/models'
+import { ServerConfig, VideoConstant } from '@shared/models'
+import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ScreenService } from '@app/shared/misc/screen.service'
 
 @Component({
   selector: 'my-menu',
@@ -13,12 +17,17 @@ import { ServerConfig } from '@shared/models'
 })
 export class MenuComponent implements OnInit {
   @ViewChild('languageChooserModal', { static: true }) languageChooserModal: LanguageChooserComponent
+  @ViewChild('quickSettingsModal', { static: true }) quickSettingsModal: QuickSettingsModalComponent
 
   user: User
   isLoggedIn: boolean
+
   userHasAdminAccess = false
   helpVisible = false
 
+  videoLanguages: string[] = []
+
+  private languages: VideoConstant<string>[] = []
   private serverConfig: ServerConfig
   private routesPerRight: { [ role in UserRight ]?: string } = {
     [UserRight.MANAGE_USERS]: '/admin/users',
@@ -31,10 +40,25 @@ export class MenuComponent implements OnInit {
 
   constructor (
     private authService: AuthService,
+    private userService: UserService,
     private serverService: ServerService,
     private redirectService: RedirectService,
-    private hotkeysService: HotkeysService
-  ) {}
+    private hotkeysService: HotkeysService,
+    private screenService: ScreenService,
+    private i18n: I18n
+  ) { }
+
+  get isInMobileView () {
+    return this.screenService.isInMobileView()
+  }
+
+  get placement () {
+    if (this.isInMobileView) {
+      return 'left-top auto'
+    } else {
+      return 'right-top auto'
+    }
+  }
 
   ngOnInit () {
     this.serverConfig = this.serverService.getTmpConfig()
@@ -63,9 +87,35 @@ export class MenuComponent implements OnInit {
       }
     )
 
-    this.hotkeysService.cheatSheetToggle.subscribe(isOpen => {
-      this.helpVisible = isOpen
-    })
+    this.hotkeysService.cheatSheetToggle
+        .subscribe(isOpen => this.helpVisible = isOpen)
+
+    this.serverService.getVideoLanguages()
+        .subscribe(languages => {
+          this.languages = languages
+
+          this.authService.userInformationLoaded
+              .subscribe(() => this.buildUserLanguages())
+        })
+  }
+
+  get language () {
+    return this.languageChooserModal.getCurrentLanguage()
+  }
+
+  get nsfwPolicy () {
+    if (!this.user) return
+
+    switch (this.user.nsfwPolicy) {
+      case 'do_not_list':
+        return this.i18n('hide')
+
+      case 'blur':
+        return this.i18n('blur')
+
+      case 'display':
+        return this.i18n('display')
+    }
   }
 
   isRegistrationAllowed () {
@@ -117,6 +167,40 @@ export class MenuComponent implements OnInit {
     this.hotkeysService.cheatSheetToggle.next(!this.helpVisible)
   }
 
+  openQuickSettings () {
+    this.quickSettingsModal.show()
+  }
+
+  toggleUseP2P () {
+    if (!this.user) return
+    this.user.webTorrentEnabled = !this.user.webTorrentEnabled
+
+    this.userService.updateMyProfile({ webTorrentEnabled: this.user.webTorrentEnabled })
+        .subscribe(() => this.authService.refreshUserInformation())
+  }
+
+  langForLocale (localeId: string) {
+    if (localeId === '_unknown') return this.i18n('Unknown')
+
+    return this.languages.find(lang => lang.id === localeId).label
+  }
+
+  private buildUserLanguages () {
+    if (!this.user) {
+      this.videoLanguages = []
+      return
+    }
+
+    if (!this.user.videoLanguages) {
+      this.videoLanguages = [ this.i18n('any language') ]
+      return
+    }
+
+    this.videoLanguages = this.user.videoLanguages
+                              .map(locale => this.langForLocale(locale))
+                              .map(value => value === undefined ? '?' : value)
+  }
+
   private computeIsUserHasAdminAccess () {
     const right = this.getFirstAdminRightAvailable()