Add ability to list video imports

7 files changed, 125 insertions, 2 deletions

diff --git a/client/src/app/+my-account/my-account-routing.module.ts b/client/src/app/+my-account/my-account-routing.module.ts
index 91b464f75..6f0806e8a 100644
--- a/client/src/app/+my-account/my-account-routing.module.ts
+++ b/client/src/app/+my-account/my-account-routing.module.ts
@@ -8,6 +8,7 @@ import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.
 import { MyAccountVideoChannelsComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channels.component'
 import { MyAccountVideoChannelCreateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-create.component'
 import { MyAccountVideoChannelUpdateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-update.component'
+import { MyAccountVideoImportsComponent } from '@app/+my-account/my-account-video-imports/my-account-video-imports.component'
 
 const myAccountRoutes: Routes = [
   {
@@ -64,6 +65,15 @@ const myAccountRoutes: Routes = [
             title: 'Account videos'
           }
         }
+      },
+      {
+        path: 'video-imports',
+        component: MyAccountVideoImportsComponent,
+        data: {
+          meta: {
+            title: 'Account video imports'
+          }
+        }
       }
     ]
   }
diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
new file mode 100644
index 000000000..74ca33fa3
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
@@ -0,0 +1,37 @@
+<p-table
+  [value]="videoImports" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)"
+>
+  <ng-template pTemplate="header">
+    <tr>
+      <th i18n>URL</th>
+      <th i18n>Video</th>
+      <th i18n style="width: 150px">State</th>
+      <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th></th>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-videoImport>
+    <tr>
+      <td>
+        <a [href]="videoImport.targetUrl" target="_blank" rel="noopener noreferrer">{{ videoImport.targetUrl }}</a>
+      </td>
+
+      <td *ngIf="isVideoImportPending(videoImport)">
+        {{ videoImport.video.name }}
+      </td>
+      <td *ngIf="isVideoImportSuccess(videoImport)">
+        <a [href]="getVideoUrl(videoImport.video)" target="_blank" rel="noopener noreferrer">{{ videoImport.video.name }}</a>
+      </td>
+      <td *ngIf="isVideoImportFailed(videoImport)"></td>
+
+      <td>{{ videoImport.state.label }}</td>
+      <td>{{ videoImport.createdAt }}</td>
+
+      <td class="action-cell">
+        <my-edit-button *ngIf="isVideoImportSuccess(videoImport)" [routerLink]="getEditVideoUrl(videoImport.video)"></my-edit-button>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.scss b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.scss
new file mode 100644
index 000000000..5e6774739
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.scss
@@ -0,0 +1,2 @@
+@import '_variables';
+@import '_mixins';
diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
new file mode 100644
index 000000000..31ccb0bc8
--- /dev/null
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
@@ -0,0 +1,66 @@
+import { Component, OnInit } from '@angular/core'
+import { RestPagination, RestTable } from '@app/shared'
+import { SortMeta } from 'primeng/components/common/sortmeta'
+import { NotificationsService } from 'angular2-notifications'
+import { ConfirmService } from '@app/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoImport, VideoImportState } from '../../../../../shared/models/videos'
+import { VideoImportService } from '@app/shared/video-import'
+
+@Component({
+  selector: 'my-account-video-imports',
+  templateUrl: './my-account-video-imports.component.html',
+  styleUrls: [ './my-account-video-imports.component.scss' ]
+})
+export class MyAccountVideoImportsComponent extends RestTable implements OnInit {
+  videoImports: VideoImport[] = []
+  totalRecords = 0
+  rowsPerPage = 10
+  sort: SortMeta = { field: 'createdAt', order: 1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  constructor (
+    private notificationsService: NotificationsService,
+    private confirmService: ConfirmService,
+    private videoImportService: VideoImportService,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.loadSort()
+  }
+
+  isVideoImportSuccess (videoImport: VideoImport) {
+    return videoImport.state.id === VideoImportState.SUCCESS
+  }
+
+  isVideoImportPending (videoImport: VideoImport) {
+    return videoImport.state.id === VideoImportState.PENDING
+  }
+
+  isVideoImportFailed (videoImport: VideoImport) {
+    return videoImport.state.id === VideoImportState.FAILED
+  }
+
+  getVideoUrl (video: { uuid: string }) {
+    return '/videos/watch/' + video.uuid
+  }
+
+  getEditVideoUrl (video: { uuid: string }) {
+    return '/videos/update/' + video.uuid
+  }
+
+  protected loadData () {
+    this.videoImportService.getMyVideoImports(this.pagination, this.sort)
+        .subscribe(
+          resultList => {
+            this.videoImports = resultList.data
+            this.totalRecords = resultList.total
+          },
+
+          err => this.notificationsService.error(this.i18n('Error'), err.message)
+        )
+  }
+}
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index 54830c75e..01e1ef1da 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -145,6 +145,8 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
       suffix = this.i18n('Waiting transcoding')
     } else if (video.state.id === VideoState.TO_TRANSCODE) {
       suffix = this.i18n('To transcode')
+    } else if (video.state.id === VideoState.TO_IMPORT) {
+      suffix = this.i18n('To import')
     } else {
       return ''
     }
diff --git a/client/src/app/+my-account/my-account.component.html b/client/src/app/+my-account/my-account.component.html
index 48db55ad3..f67245d85 100644
--- a/client/src/app/+my-account/my-account.component.html
+++ b/client/src/app/+my-account/my-account.component.html
@@ -5,6 +5,8 @@
     <a i18n routerLink="/my-account/video-channels" routerLinkActive="active" class="title-page">My video channels</a>
 
     <a i18n routerLink="/my-account/videos" routerLinkActive="active" class="title-page">My videos</a>
+
+    <a i18n routerLink="/my-account/video-imports" routerLinkActive="active" class="title-page">My video imports</a>
   </div>
 
   <div class="margin-content">
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 2088273e6..5403ab649 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -1,3 +1,4 @@
+import { TableModule } from 'primeng/table'
 import { NgModule } from '@angular/core'
 import { SharedModule } from '../shared'
 import { MyAccountRoutingModule } from './my-account-routing.module'
@@ -11,11 +12,13 @@ import { MyAccountVideoChannelsComponent } from '@app/+my-account/my-account-vid
 import { MyAccountVideoChannelCreateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-create.component'
 import { MyAccountVideoChannelUpdateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-update.component'
 import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-info.component'
+import { MyAccountVideoImportsComponent } from '@app/+my-account/my-account-video-imports/my-account-video-imports.component'
 
 @NgModule({
   imports: [
     MyAccountRoutingModule,
-    SharedModule
+    SharedModule,
+    TableModule
   ],
 
   declarations: [
@@ -28,7 +31,8 @@ import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-i
     MyAccountVideoChannelsComponent,
     MyAccountVideoChannelCreateComponent,
     MyAccountVideoChannelUpdateComponent,
-    ActorAvatarInfoComponent
+    ActorAvatarInfoComponent,
+    MyAccountVideoImportsComponent
   ],
 
   exports: [