Correctly handle video import errors

2 files changed, 25 insertions, 2 deletions

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
index 74ca33fa3..00b2d7cb0 100644
--- 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
@@ -1,9 +1,10 @@
 <p-table
   [value]="videoImports" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
 >
   <ng-template pTemplate="header">
     <tr>
+      <th style="width: 40px;"></th>
       <th i18n>URL</th>
       <th i18n>Video</th>
       <th i18n style="width: 150px">State</th>
@@ -12,9 +13,15 @@
     </tr>
   </ng-template>
 
-  <ng-template pTemplate="body" let-videoImport>
+  <ng-template pTemplate="body" let-expanded="expanded" let-videoImport>
     <tr>
       <td>
+        <span *ngIf="videoImport.error" class="expander" [pRowToggler]="videoImport">
+          <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+        </span>
+      </td>
+
+      <td>
         <a [href]="videoImport.targetUrl" target="_blank" rel="noopener noreferrer">{{ videoImport.targetUrl }}</a>
       </td>
 
@@ -34,4 +41,12 @@
       </td>
     </tr>
   </ng-template>
+
+  <ng-template pTemplate="rowexpansion" let-videoImport>
+    <tr class="video-import-error" *ngIf="videoImport.error">
+      <td colspan="6">
+        <pre>{{ videoImport.error }}</pre>
+      </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
index 5e6774739..bdd2f8270 100644
--- 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
@@ -1,2 +1,10 @@
 @import '_variables';
 @import '_mixins';
+
+pre {
+  font-size: 11px;
+}
+
+.video-import-error {
+  color: red;
+}
\ No newline at end of file