Reorganize left menu and account menu

Add my-settings and my-library in left menu
Move administration below my-library
Split account menu: my-setting and my library

3 files changed, 189 insertions, 0 deletions

diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
new file mode 100644
index 000000000..cff46a41d
--- /dev/null
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -0,0 +1,28 @@
+<h1>
+  <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>My history</ng-container>
+</h1>
+
+<div class="top-buttons">
+  <div class="history-switch">
+    <p-inputSwitch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></p-inputSwitch>
+    <label i18n>Video history</label>
+  </div>
+
+  <button class="delete-history" (click)="deleteHistory()" i18n>
+    <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
+    Delete history
+  </button>
+</div>
+
+
+<div class="no-history" i18n *ngIf="pagination.totalItems === 0">You don't have any video history yet.</div>
+
+<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()" class="videos">
+  <div class="video" *ngFor="let video of videos">
+    <my-video-miniature
+      [video]="video" [displayAsRow]="true"
+      (videoRemoved)="removeVideoFromArray(video)" (videoBlocked)="removeVideoFromArray(video)"
+    ></my-video-miniature>
+  </div>
+</div>
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
new file mode 100644
index 000000000..9eeeaf310
--- /dev/null
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -0,0 +1,59 @@
+@import '_variables';
+@import '_mixins';
+
+.no-history {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+  font-weight: $font-semibold;
+  font-size: 16px;
+}
+
+.top-buttons {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .history-switch {
+    display: flex;
+    flex-grow: 1;
+
+    label {
+      margin: 0 0 0 5px;
+    }
+  }
+
+  .delete-history {
+    @include peertube-button;
+    @include grey-button;
+    @include button-with-icon;
+
+    font-size: 15px;
+  }
+}
+
+.video {
+  @include row-blocks;
+
+  .my-video-miniature {
+    flex-grow: 1;
+  }
+}
+
+@media screen and (max-width: $mobile-view) {
+  .top-buttons {
+    .history-switch label, .delete-history {
+      @include ellipsis;
+    }
+
+    .history-switch label {
+      width: 60%;
+    }
+
+    .delete-history {
+      margin-left: auto;
+      max-width: 32%;
+    }
+  }
+}
diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts
new file mode 100644
index 000000000..e11f05c47
--- /dev/null
+++ b/client/src/app/+my-library/my-history/my-history.component.ts
@@ -0,0 +1,102 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import {
+  AuthService,
+  ComponentPagination,
+  ConfirmService,
+  LocalStorageService,
+  Notifier,
+  ScreenService,
+  ServerService,
+  UserService
+} from '@app/core'
+import { immutableAssign } from '@app/helpers'
+import { UserHistoryService } from '@app/shared/shared-main'
+import { AbstractVideoList } from '@app/shared/shared-video-miniature'
+
+@Component({
+  templateUrl: './my-history.component.html',
+  styleUrls: [ './my-history.component.scss' ]
+})
+export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnDestroy {
+  titlePage: string
+  pagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 5,
+    totalItems: null
+  }
+  videosHistoryEnabled: boolean
+
+  constructor (
+    protected router: Router,
+    protected serverService: ServerService,
+    protected route: ActivatedRoute,
+    protected authService: AuthService,
+    protected userService: UserService,
+    protected notifier: Notifier,
+    protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
+    private confirmService: ConfirmService,
+    private userHistoryService: UserHistoryService
+  ) {
+    super()
+
+    this.titlePage = $localize`My videos history`
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+
+    this.videosHistoryEnabled = this.authService.getUser().videosHistoryEnabled
+  }
+
+  ngOnDestroy () {
+    super.ngOnDestroy()
+  }
+
+  getVideosObservable (page: number) {
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+
+    return this.userHistoryService.getUserVideosHistory(newPagination)
+  }
+
+  generateSyndicationList () {
+    throw new Error('Method not implemented.')
+  }
+
+  onVideosHistoryChange () {
+    this.userService.updateMyProfile({ videosHistoryEnabled: this.videosHistoryEnabled })
+      .subscribe(
+        () => {
+          const message = this.videosHistoryEnabled === true ?
+            $localize`Videos history is enabled` :
+            $localize`Videos history is disabled`
+
+          this.notifier.success(message)
+
+          this.authService.refreshUserInformation()
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  async deleteHistory () {
+    const title = $localize`Delete videos history`
+    const message = $localize`Are you sure you want to delete all your videos history?`
+
+    const res = await this.confirmService.confirm(message, title)
+    if (res !== true) return
+
+    this.userHistoryService.deleteUserVideosHistory()
+        .subscribe(
+          () => {
+            this.notifier.success($localize`Videos history deleted`)
+
+            this.reloadVideos()
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+}