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

6 files changed, 364 insertions, 0 deletions

diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
new file mode 100644
index 000000000..def1cbab6
--- /dev/null
+++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
@@ -0,0 +1,36 @@
+<ng-template #modal let-close="close" let-dismiss="dismiss">
+  <div class="modal-header">
+    <h1 i18n class="modal-title">Accept ownership</h1>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
+  </div>
+
+  <div class="modal-body" [formGroup]="form">
+    <div class="form-group">
+      <label i18n for="channel">Select a channel to receive the video</label>
+      <div class="peertube-select-container">
+        <select formControlName="channel" id="channel" class="form-control">
+          <option i18n value="undefined" disabled>Channel that will receive the video</option>
+          <option *ngFor="let channel of videoChannels" [value]="channel.id">{{ channel.displayName }}
+          </option>
+        </select>
+      </div>
+      <div *ngIf="formErrors.channel" class="form-error">{{ formErrors.channel }}</div>
+    </div>
+  </div>
+
+  <div class="modal-footer inputs">
+    <div class="inputs">
+      <input
+        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        (click)="dismiss()" (key.enter)="dismiss()"
+      >
+
+      <input
+          type="submit" i18n-value value="Accept" class="action-button-submit"
+          [disabled]="!form.valid"
+          (click)="close()"
+      >
+    </div>
+  </div>
+</ng-template>
diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss
new file mode 100644
index 000000000..c7357f62d
--- /dev/null
+++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss
@@ -0,0 +1,14 @@
+@import '_variables';
+@import '_mixins';
+
+select {
+  display: block;
+}
+
+.peertube-select-container {
+  @include peertube-select-container(350px);
+}
+
+.form-group {
+  margin: 20px 0;
+}
\ No newline at end of file
diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.ts b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.ts
new file mode 100644
index 000000000..587a455f0
--- /dev/null
+++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.ts
@@ -0,0 +1,72 @@
+import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
+import { AuthService, Notifier } from '@app/core'
+import { OWNERSHIP_CHANGE_CHANNEL_VALIDATOR } from '@app/shared/form-validators/video-ownership-change-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { VideoChannelService, VideoOwnershipService } from '@app/shared/shared-main'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { VideoChangeOwnership, VideoChannel } from '@shared/models'
+
+@Component({
+  selector: 'my-accept-ownership',
+  templateUrl: './my-accept-ownership.component.html',
+  styleUrls: [ './my-accept-ownership.component.scss' ]
+})
+export class MyAcceptOwnershipComponent extends FormReactive implements OnInit {
+  @Output() accepted = new EventEmitter<void>()
+
+  @ViewChild('modal', { static: true }) modal: ElementRef
+
+  videoChangeOwnership: VideoChangeOwnership | undefined = undefined
+
+  videoChannels: VideoChannel[]
+
+  error: string = null
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private videoOwnershipService: VideoOwnershipService,
+    private notifier: Notifier,
+    private authService: AuthService,
+    private videoChannelService: VideoChannelService,
+    private modalService: NgbModal
+    ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.videoChannels = []
+
+    this.videoChannelService.listAccountVideoChannels(this.authService.getUser().account)
+      .subscribe(videoChannels => this.videoChannels = videoChannels.data)
+
+    this.buildForm({
+      channel: OWNERSHIP_CHANGE_CHANNEL_VALIDATOR
+    })
+  }
+
+  show (videoChangeOwnership: VideoChangeOwnership) {
+    this.videoChangeOwnership = videoChangeOwnership
+    this.modalService
+      .open(this.modal, { centered: true })
+      .result
+      .then(() => this.acceptOwnership())
+      .catch(() => this.videoChangeOwnership = undefined)
+  }
+
+  acceptOwnership () {
+    const channel = this.form.value['channel']
+
+    const videoChangeOwnership = this.videoChangeOwnership
+    this.videoOwnershipService
+      .acceptOwnership(videoChangeOwnership.id, { channelId: channel })
+      .subscribe(
+        () => {
+          this.notifier.success($localize`Ownership accepted`)
+          if (this.accepted) this.accepted.emit()
+          this.videoChangeOwnership = undefined
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+}
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.html b/client/src/app/+my-library/my-ownership/my-ownership.component.html
new file mode 100644
index 000000000..6bf562986
--- /dev/null
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.html
@@ -0,0 +1,90 @@
+<h1>
+  <my-global-icon iconName="download" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>My ownership changes</ng-container>
+</h1>
+
+<p-table
+    [value]="videoChangeOwnerships"
+    [lazy]="true"
+    [paginator]="totalRecords > 0"
+    [totalRecords]="totalRecords"
+    [rows]="rowsPerPage"
+    [sortField]="sort.field"
+    [sortOrder]="sort.order"
+    (onLazyLoad)="loadLazy($event)"
+>
+  <ng-template pTemplate="header">
+    <tr>
+      <th style="width: 150px;" i18n>Actions</th>
+      <th style="width: 35%;" i18n>Initiator</th>
+      <th style="width: 65%;" i18n>Video</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">
+        Created
+        <p-sortIcon field="createdAt"></p-sortIcon>
+      </th>
+      <th style="width: 100px;" i18n>Status</th>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-videoChangeOwnership>
+    <tr>
+      <td class="action-cell">
+        <ng-container *ngIf="videoChangeOwnership.status === 'WAITING'">
+          <my-button i18n-title title="Accept" icon="tick" (click)="openAcceptModal(videoChangeOwnership)"></my-button>
+          <my-button i18n-title title="Refuse" icon="cross" (click)="refuse(videoChangeOwnership)"></my-button>
+        </ng-container>
+      </td>
+      <td>
+        <a [href]="videoChangeOwnership.initiatorAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
+          <div class="chip two-lines">
+            <img
+              class="avatar"
+              [src]="videoChangeOwnership.initiatorAccount.avatar?.path"
+              (error)="switchToDefaultAvatar($event)"
+              alt="Avatar"
+            >
+            <div>
+              {{ videoChangeOwnership.initiatorAccount.displayName }}
+              <span class="text-muted">{{ videoChangeOwnership.initiatorAccount.nameWithHost }}</span>
+            </div>
+          </div>
+        </a>
+      </td>
+
+      <td>
+        <a [href]="videoChangeOwnership.video.url" class="video-table-video-link" [title]="videoChangeOwnership.video.name" target="_blank" rel="noopener noreferrer">
+          <div class="video-table-video">
+            <div class="video-table-video-image">
+              <img [src]="videoChangeOwnership.video.thumbnailPath">
+            </div>
+            <div class="video-table-video-text">
+              <div>
+                {{ videoChangeOwnership.video.name }}
+              </div>
+              <div class="text-muted">by {{ videoChangeOwnership.video.channel?.displayName }} </div>
+            </div>
+          </div>
+        </a>
+      </td>
+
+      <td>{{ videoChangeOwnership.createdAt | date: 'short' }}</td>
+
+      <td>
+        <span class="badge"
+          [ngClass]="getStatusClass(videoChangeOwnership.status)">{{ videoChangeOwnership.status }}</span>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="6">
+        <div class="no-results">
+          <ng-container i18n>No ownership change request found.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
+
+<my-accept-ownership #myAcceptOwnershipComponent (accepted)="accepted()"></my-accept-ownership>
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
new file mode 100644
index 000000000..7cac9c9f3
--- /dev/null
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
@@ -0,0 +1,71 @@
+@import 'miniature';
+@import 'mixins';
+
+.chip {
+  @include chip;
+}
+
+.badge {
+  @include table-badge;
+}
+
+.video-table-video {
+  display: inline-flex;
+
+  .video-table-video-image {
+    @include miniature-thumbnail;
+
+    $image-height: 45px;
+
+    height: $image-height;
+    width: #{(16/9) * $image-height};
+    margin-right: 0.5rem;
+    border-radius: 2px;
+    border: none;
+    background: transparent;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    img {
+      height: 100%;
+      width: 100%;
+      border-radius: 2px;
+    }
+
+    span {
+      color: pvar(--inputPlaceholderColor);
+    }
+
+    .video-table-video-image-label {
+      @include static-thumbnail-overlay;
+      position: absolute;
+      border-radius: 3px;
+      font-size: 10px;
+      padding: 0 3px;
+      line-height: 1.3;
+      bottom: 2px;
+      right: 2px;
+    }
+  }
+
+  .video-table-video-text {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 90%;
+    color: pvar(--mainForegroundColor);
+    line-height: 1rem;
+
+    div .glyphicon {
+      font-size: 80%;
+      color: gray;
+      margin-left: 0.1rem;
+    }
+
+    div + div {
+      font-size: 80%;
+    }
+  }
+}
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.ts b/client/src/app/+my-library/my-ownership/my-ownership.component.ts
new file mode 100644
index 000000000..e1aca65f6
--- /dev/null
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.ts
@@ -0,0 +1,81 @@
+import { SortMeta } from 'primeng/api'
+import { Component, OnInit, ViewChild } from '@angular/core'
+import { Notifier, RestPagination, RestTable } from '@app/core'
+import { Account, Actor, VideoOwnershipService } from '@app/shared/shared-main'
+import { VideoChangeOwnership, VideoChangeOwnershipStatus } from '@shared/models'
+import { MyAcceptOwnershipComponent } from './my-accept-ownership/my-accept-ownership.component'
+
+@Component({
+  templateUrl: './my-ownership.component.html',
+  styleUrls: [ './my-ownership.component.scss' ]
+})
+export class MyOwnershipComponent extends RestTable implements OnInit {
+  videoChangeOwnerships: VideoChangeOwnership[] = []
+  totalRecords = 0
+  sort: SortMeta = { field: 'createdAt', order: -1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  @ViewChild('myAcceptOwnershipComponent', { static: true }) myAccountAcceptOwnershipComponent: MyAcceptOwnershipComponent
+
+  constructor (
+    private notifier: Notifier,
+    private videoOwnershipService: VideoOwnershipService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.initialize()
+  }
+
+  getIdentifier () {
+    return 'MyOwnershipComponent'
+  }
+
+  getStatusClass (status: VideoChangeOwnershipStatus) {
+    switch (status) {
+      case VideoChangeOwnershipStatus.ACCEPTED:
+        return 'badge-green'
+      case VideoChangeOwnershipStatus.REFUSED:
+        return 'badge-red'
+      default:
+        return 'badge-yellow'
+    }
+  }
+
+  switchToDefaultAvatar ($event: Event) {
+    ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
+  }
+
+  openAcceptModal (videoChangeOwnership: VideoChangeOwnership) {
+    this.myAccountAcceptOwnershipComponent.show(videoChangeOwnership)
+  }
+
+  accepted () {
+    this.loadData()
+  }
+
+  refuse (videoChangeOwnership: VideoChangeOwnership) {
+    this.videoOwnershipService.refuseOwnership(videoChangeOwnership.id)
+      .subscribe(
+        () => this.loadData(),
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  protected loadData () {
+    return this.videoOwnershipService.getOwnershipChanges(this.pagination, this.sort)
+      .subscribe(
+        resultList => {
+          this.videoChangeOwnerships = resultList.data.map(change => ({
+            ...change,
+            initiatorAccount: new Account(change.initiatorAccount),
+            nextOwnerAccount: new Account(change.nextOwnerAccount)
+          }))
+          this.totalRecords = resultList.total
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+}