Correctly handle video import errors

3 files changed, 26 insertions, 3 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
diff --git a/client/src/app/videos/+video-edit/video-import.component.html b/client/src/app/videos/+video-edit/video-import.component.html
index d59c6a23a..cfad5e289 100644
--- a/client/src/app/videos/+video-edit/video-import.component.html
+++ b/client/src/app/videos/+video-edit/video-import.component.html
@@ -6,7 +6,7 @@
       <label i18n for="targetUrl">URL</label>
       <my-help
         helpType="custom" i18n-customHtml
-        customHtml="You can import any URL <a href='https://rg3.github.io/youtube-dl/supportedsites.html'>supported by youtube-dl</a> or URL that points to a raw MP4 file. Failure to secure these rights could cause legal trouble to yourself and your instance."
+        customHtml="You can import any URL <a href='https://rg3.github.io/youtube-dl/supportedsites.html' target='_blank' rel='noopener noreferrer'>supported by youtube-dl</a> or URL that points to a raw MP4 file. Failure to secure these rights could cause legal trouble to yourself and your instance."
       ></my-help>
 
       <input type="text" id="targetUrl" [(ngModel)]="targetUrl" />