align ownership change video list table with moderation tables

5 files changed, 135 insertions, 26 deletions

diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
index 222da9542..def1cbab6 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
@@ -7,27 +7,27 @@
 
   <div class="modal-body" [formGroup]="form">
     <div class="form-group">
-      <label i18n for="channel">Select the target channel</label>
-      <select formControlName="channel" id="channel" class="peertube-select-container">
-        <option></option>
-        <option *ngFor="let channel of videoChannels" [value]="channel.id">{{ channel.displayName }}
-        </option>
-      </select>
-      <div *ngIf="formErrors.channel" class="form-error">
-        {{ formErrors.channel }}
+      <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="form-group 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="Submit" class="action-button-submit"
+          type="submit" i18n-value value="Accept" class="action-button-submit"
           [disabled]="!form.valid"
           (click)="close()"
       >
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.scss b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.scss
index ad6117413..c7357f62d 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.scss
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.scss
@@ -5,6 +5,10 @@ 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-account/my-account-ownership/my-account-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
index 14ae497d9..090ec7b44 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
@@ -11,31 +11,53 @@
 >
   <ng-template pTemplate="header">
     <tr>
-      <th i18n>Initiator</th>
-      <th i18n>Video</th>
-      <th i18n pSortableColumn="createdAt">
+      <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 i18n>Status</th>
-      <th i18n>Action</th>
+      <th style="width: 100px;" i18n>Status</th>
+      <th style="width: 130px;" i18n>Action</th>
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-videoChangeOwnership>
     <tr>
       <td>
-        <a [href]="videoChangeOwnership.initiatorAccount.url" i18n-title title="Account page"
-           target="_blank" rel="noopener noreferrer">
-          {{ createByString(videoChangeOwnership.initiatorAccount) }}
+        <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" i18n-title title="Video page" target="_blank" rel="noopener noreferrer">
-          {{ videoChangeOwnership.video.name }}
+        <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 }}</td>
+
+      <td>{{ videoChangeOwnership.createdAt | date: 'short' }}</td>
       <td i18n>{{ videoChangeOwnership.status }}</td>
       <td class="action-cell">
         <ng-container *ngIf="videoChangeOwnership.status === 'WAITING'">
@@ -45,6 +67,16 @@
       </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-account-accept-ownership #myAccountAcceptOwnershipComponent (accepted)="accepted()"></my-account-accept-ownership>
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.scss b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.scss
new file mode 100644
index 000000000..c04e26374
--- /dev/null
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.scss
@@ -0,0 +1,67 @@
+@import 'miniature';
+@import 'mixins';
+
+.chip {
+  @include chip;
+}
+
+.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-account/my-account-ownership/my-account-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
index 5167732c2..98360dfb3 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
@@ -1,13 +1,15 @@
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { Notifier, RestPagination, RestTable } from '@app/core'
-import { Account, VideoOwnershipService } from '@app/shared/shared-main'
+import { VideoOwnershipService, Actor, Video, Account } from '@app/shared/shared-main'
 import { VideoChangeOwnership } from '@shared/models'
 import { MyAccountAcceptOwnershipComponent } from './my-account-accept-ownership/my-account-accept-ownership.component'
+import { getAbsoluteAPIUrl } from '@app/helpers'
 
 @Component({
   selector: 'my-account-ownership',
-  templateUrl: './my-account-ownership.component.html'
+  templateUrl: './my-account-ownership.component.html',
+  styleUrls: [ './my-account-ownership.component.scss' ]
 })
 export class MyAccountOwnershipComponent extends RestTable implements OnInit {
   videoChangeOwnerships: VideoChangeOwnership[] = []
@@ -32,8 +34,8 @@ export class MyAccountOwnershipComponent extends RestTable implements OnInit {
     return 'MyAccountOwnershipComponent'
   }
 
-  createByString (account: Account) {
-    return Account.CREATE_BY_STRING(account.name, account.host)
+  switchToDefaultAvatar ($event: Event) {
+    ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
   }
 
   openAcceptModal (videoChangeOwnership: VideoChangeOwnership) {
@@ -56,7 +58,11 @@ export class MyAccountOwnershipComponent extends RestTable implements OnInit {
     return this.videoOwnershipService.getOwnershipChanges(this.pagination, this.sort)
       .subscribe(
         resultList => {
-          this.videoChangeOwnerships = resultList.data
+          this.videoChangeOwnerships = resultList.data.map(change => ({
+            ...change,
+            initiatorAccount: new Account(change.initiatorAccount),
+            nextOwnerAccount: new Account(change.nextOwnerAccount)
+          }))
           this.totalRecords = resultList.total
         },