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

2 files changed, 92 insertions, 14 deletions

diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index 7707d7dda..a37cae749 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -1,10 +1,32 @@
-import { hasUserRight, User as UserServerModel, UserNotificationSetting, UserRight, UserRole, VideoChannel } from '../../../../../shared'
+import {
+  hasUserRight,
+  User as UserServerModel,
+  UserNotificationSetting,
+  UserRight,
+  UserRole
+} from '../../../../../shared/models/users'
+import { VideoChannel } from '../../../../../shared/models/videos'
 import { NSFWPolicyType } from '../../../../../shared/models/videos/nsfw-policy.type'
 import { Account } from '@app/shared/account/account.model'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
 import { UserAdminFlag } from '@shared/models/users/user-flag.model'
 
 export class User implements UserServerModel {
+  static KEYS = {
+    ID: 'id',
+    ROLE: 'role',
+    EMAIL: 'email',
+    VIDEOS_HISTORY_ENABLED: 'videos-history-enabled',
+    USERNAME: 'username',
+    NSFW_POLICY: 'nsfw_policy',
+    WEBTORRENT_ENABLED: 'peertube-videojs-' + 'webtorrent_enabled',
+    AUTO_PLAY_VIDEO: 'auto_play_video',
+    SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO: 'auto_play_next_video',
+    AUTO_PLAY_VIDEO_PLAYLIST: 'auto_play_video_playlist',
+    THEME: 'last_active_theme',
+    VIDEO_LANGUAGES: 'video_languages'
+  }
+
   id: number
   username: string
   email: string
@@ -60,8 +82,11 @@ export class User implements UserServerModel {
 
     this.nsfwPolicy = hash.nsfwPolicy
     this.webTorrentEnabled = hash.webTorrentEnabled
-    this.videosHistoryEnabled = hash.videosHistoryEnabled
     this.autoPlayVideo = hash.autoPlayVideo
+    this.autoPlayNextVideo = hash.autoPlayNextVideo
+    this.autoPlayNextVideoPlaylist = hash.autoPlayNextVideoPlaylist
+    this.videosHistoryEnabled = hash.videosHistoryEnabled
+    this.videoLanguages = hash.videoLanguages
 
     this.theme = hash.theme
 
diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts
index e24d91df3..a79343646 100644
--- a/client/src/app/shared/users/user.service.ts
+++ b/client/src/app/shared/users/user.service.ts
@@ -1,8 +1,8 @@
-import { from, Observable, of } from 'rxjs'
-import { catchError, concatMap, map, share, shareReplay, tap, toArray } from 'rxjs/operators'
+import { from, Observable } from 'rxjs'
+import { catchError, concatMap, map, shareReplay, toArray } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { ResultList, User, UserCreate, UserRole, UserUpdate, UserUpdateMe, UserVideoQuota } from '../../../../../shared'
+import { ResultList, User as UserServerModel, UserCreate, UserRole, UserUpdate, UserUpdateMe, UserVideoQuota } from '../../../../../shared'
 import { environment } from '../../../environments/environment'
 import { RestExtractor, RestPagination, RestService } from '../rest'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
@@ -10,6 +10,10 @@ import { SortMeta } from 'primeng/api'
 import { BytesPipe } from 'ngx-pipes'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { UserRegister } from '@shared/models/users/user-register.model'
+import { User } from './user.model'
+import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
+import { has } from 'lodash-es'
+import { LocalStorageService, SessionStorageService } from '../misc/storage.service'
 
 @Injectable()
 export class UserService {
@@ -17,12 +21,14 @@ export class UserService {
 
   private bytesPipe = new BytesPipe()
 
-  private userCache: { [ id: number ]: Observable<User> } = {}
+  private userCache: { [ id: number ]: Observable<UserServerModel> } = {}
 
   constructor (
     private authHttp: HttpClient,
     private restExtractor: RestExtractor,
     private restService: RestService,
+    private localStorageService: LocalStorageService,
+    private sessionStorageService: SessionStorageService,
     private i18n: I18n
   ) { }
 
@@ -64,6 +70,30 @@ export class UserService {
                )
   }
 
+  updateMyAnonymousProfile (profile: UserUpdateMe) {
+    const supportedKeys = {
+      // local storage keys
+      nsfwPolicy: (val: NSFWPolicyType) => this.localStorageService.setItem(User.KEYS.NSFW_POLICY, val),
+      webTorrentEnabled: (val: boolean) => this.localStorageService.setItem(User.KEYS.WEBTORRENT_ENABLED, String(val)),
+      autoPlayVideo: (val: boolean) => this.localStorageService.setItem(User.KEYS.AUTO_PLAY_VIDEO, String(val)),
+      autoPlayNextVideoPlaylist: (val: boolean) => this.localStorageService.setItem(User.KEYS.AUTO_PLAY_VIDEO_PLAYLIST, String(val)),
+      theme: (val: string) => this.localStorageService.setItem(User.KEYS.THEME, val),
+      videoLanguages: (val: string[]) => this.localStorageService.setItem(User.KEYS.VIDEO_LANGUAGES, JSON.stringify(val)),
+
+      // session storage keys
+      autoPlayNextVideo: (val: boolean) =>
+        this.sessionStorageService.setItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO, String(val))
+    }
+
+    for (const key of Object.keys(profile)) {
+      try {
+        if (has(supportedKeys, key)) supportedKeys[key](profile[key])
+      } catch (err) {
+        console.error(`Cannot set item ${key} in localStorage. Likely due to a value impossible to stringify.`, err)
+      }
+    }
+  }
+
   deleteMe () {
     const url = UserService.BASE_USERS_URL + 'me'
 
@@ -187,7 +217,7 @@ export class UserService {
                )
   }
 
-  updateUsers (users: User[], userUpdate: UserUpdate) {
+  updateUsers (users: UserServerModel[], userUpdate: UserUpdate) {
     return from(users)
       .pipe(
         concatMap(u => this.authHttp.put(UserService.BASE_USERS_URL + u.id, userUpdate)),
@@ -205,17 +235,40 @@ export class UserService {
   }
 
   getUser (userId: number) {
-    return this.authHttp.get<User>(UserService.BASE_USERS_URL + userId)
+    return this.authHttp.get<UserServerModel>(UserService.BASE_USERS_URL + userId)
                .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
 
-  getUsers (pagination: RestPagination, sort: SortMeta, search?: string): Observable<ResultList<User>> {
+  getAnonymousUser () {
+    let videoLanguages
+    try {
+      videoLanguages = JSON.parse(this.localStorageService.getItem(User.KEYS.VIDEO_LANGUAGES))
+    } catch (err) {
+      videoLanguages = null
+      console.error('Cannot parse desired video languages from localStorage.', err)
+    }
+
+    return new User({
+      // local storage keys
+      nsfwPolicy: this.localStorageService.getItem(User.KEYS.NSFW_POLICY) as NSFWPolicyType,
+      webTorrentEnabled: this.localStorageService.getItem(User.KEYS.WEBTORRENT_ENABLED) !== 'false',
+      autoPlayVideo: this.localStorageService.getItem(User.KEYS.AUTO_PLAY_VIDEO) === 'true',
+      autoPlayNextVideoPlaylist: this.localStorageService.getItem(User.KEYS.AUTO_PLAY_VIDEO_PLAYLIST) === 'true',
+      theme: this.localStorageService.getItem(User.KEYS.THEME) || 'default',
+      videoLanguages,
+
+      // session storage keys
+      autoPlayNextVideo: this.sessionStorageService.getItem(User.KEYS.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
+    })
+  }
+
+  getUsers (pagination: RestPagination, sort: SortMeta, search?: string): Observable<ResultList<UserServerModel>> {
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
     if (search) params = params.append('search', search)
 
-    return this.authHttp.get<ResultList<User>>(UserService.BASE_USERS_URL, { params })
+    return this.authHttp.get<ResultList<UserServerModel>>(UserService.BASE_USERS_URL, { params })
                .pipe(
                  map(res => this.restExtractor.convertResultListDateToHuman(res)),
                  map(res => this.restExtractor.applyToResultListData(res, this.formatUser.bind(this))),
@@ -223,7 +276,7 @@ export class UserService {
                )
   }
 
-  removeUser (usersArg: User | User[]) {
+  removeUser (usersArg: UserServerModel | UserServerModel[]) {
     const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
 
     return from(users)
@@ -234,7 +287,7 @@ export class UserService {
       )
   }
 
-  banUsers (usersArg: User | User[], reason?: string) {
+  banUsers (usersArg: UserServerModel | UserServerModel[], reason?: string) {
     const body = reason ? { reason } : {}
     const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
 
@@ -246,7 +299,7 @@ export class UserService {
       )
   }
 
-  unbanUsers (usersArg: User | User[]) {
+  unbanUsers (usersArg: UserServerModel | UserServerModel[]) {
     const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
 
     return from(users)
@@ -257,7 +310,7 @@ export class UserService {
       )
   }
 
-  private formatUser (user: User) {
+  private formatUser (user: UserServerModel) {
     let videoQuota
     if (user.videoQuota === -1) {
       videoQuota = this.i18n('Unlimited')