Add visitor settings, rework logged-in dropdown (#2514)

* Add visitor settings, rework logged-in dropdown

* Make user dropdown P2P switch functional

* Fix lint

* Fix unnecessary notification when user logs out

* Simplify visitor settings code and remove unnecessary icons

* Catch parsing errors and reindent menu styles

5 files changed, 290 insertions, 88 deletions

diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss
index 72deb3952..50d19fd1f 100644
--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@@ -4,6 +4,8 @@
 .help-to-translate {
   @include peertube-button-link;
   @include orange-button;
+
+  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 43f622dfb..fb74cdf19 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] }))
 
@@ -28,4 +33,10 @@ export class LanguageChooserComponent {
     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 790a8af00..399350616 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -11,31 +11,62 @@
           <div class="logged-in-username">{{ user.username }}</div>
         </div>
 
-        <div class="logged-in-more" ngbDropdown placement="bottom-right auto" container="body">
+        <div class="logged-in-more" ngbDropdown placement="right-top auto" 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">
+              <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">
+              <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>
@@ -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>
 
-      <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="d-flex flex-column">
+        <div class="footer-links">
+          <a i18n routerLink="/about/instance">Contact</a>
+          <a i18n routerLink="/about/instance">Terms of Service</a>
+          <a i18n routerLink="/about/instance" fragment="statistics">Stats</a>
+          <a (click)="openLanguageChooser()" class="c-hand">
+            <span i18n>Interface: {{ language }}</span>
+          </a>
+        </div>
+        <div class="footer-links">
+          <a i18n href="https://joinpeertube.org/#you-are-a-video-maker" i18n-title title="Creator guide" target="_blank" rel="noopener noreferrer">Creators</a>
+          <a i18n href="https://docs.joinpeertube.org/#/contribute-getting-started" i18n-title title="PeerTube license" target="_blank" rel="noopener noreferrer">Contributors</a>
+          <a i18n routerLink="/about/peertube" i18n-title title="More information about privacy within PeerTube">Privacy</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 href="https://docs.joinpeertube.org/api-rest-reference.html" i18n-title title="API documentation" target="_blank" rel="noopener noreferrer">API</a>
+          <a i18n href="https://joinpeertube.org/help" i18n-title title="Get help using PeerTube" target="_blank" rel="noopener noreferrer">Help</a>
+          <a (click)="openHotkeysCheatSheet()" class="c-hand" i18n>Shortcuts</a>
+        </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 40c9a2b25..a4b1ec000 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -29,7 +29,7 @@ menu {
 
   &.logged-in {
     .panel-block {
-      margin-bottom: 25px;
+      margin-bottom: 20px;
     }
 
     .block-title {
@@ -88,22 +88,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;
-          }
-        }
-      }
     }
   }
 
@@ -143,7 +127,7 @@ menu {
   }
 
   .panel-block {
-    margin-bottom: 45px;
+    margin-bottom: 15px;
 
     a {
       @include disable-default-a-behaviour;
@@ -198,60 +182,162 @@ 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;
+    & > div:not(.panel-block) {
+      padding-left: $menu-lateral-padding;
+      padding-right: $menu-lateral-padding;
+      row-gap: 1em;
+    }
 
-      .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 {
+      display: inline-flex;
+      flex-wrap: wrap;
+
+      & > a {
+        @include disable-default-a-behaviour;
 
-          background-image: url('../../assets/images/menu/language.png');
+        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) {
   .menu-wrapper {
     width: 100% !important;
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 1d7651e78..5f3dfc52a 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -1,10 +1,13 @@
 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'
 
 @Component({
   selector: 'my-menu',
@@ -13,11 +16,14 @@ 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
+  languages: VideoConstant<string>[] = []
 
   private serverConfig: ServerConfig
   private routesPerRight: { [ role in UserRight ]?: string } = {
@@ -31,9 +37,11 @@ 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 i18n: I18n
   ) {}
 
   ngOnInit () {
@@ -63,9 +71,33 @@ 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)
+  }
+
+  get language () {
+    return this.languageChooserModal.getCurrentLanguage()
+  }
+
+  get videoLanguages (): string[] {
+    if (!this.user) return
+    if (!this.user.videoLanguages) return [this.i18n('any language')]
+    return this.user.videoLanguages
+      .map(locale => this.langForLocale(locale))
+      .map(value => value === undefined ? '?' : value)
+  }
+
+  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 +149,22 @@ 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) {
+    return this.languages.find(lang => lang.id = localeId).label
+  }
+
   private computeIsUserHasAdminAccess () {
     const right = this.getFirstAdminRightAvailable()