Improve captions UX (at least I've tried)

3 files changed, 59 insertions, 4 deletions

diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index 16dbf5cfc..2c40747ba 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -142,10 +142,33 @@
 
         <div class="form-group" *ngFor="let videoCaption of videoCaptions">
 
-          <div *ngIf="videoCaption.action !== 'REMOVE'" class="caption-entry">
-            <div class="caption-entry-label">{{ videoCaption.language.label }}</div>
+          <div class="caption-entry">
+            <ng-container *ngIf="!videoCaption.action">
+              <a
+                i18n-title title="See the subtitle file" class="caption-entry-label" target="_blank" rel="noopener noreferrer"
+                [href]="videoCaption.captionPath"
+              >{{ videoCaption.language.label }}</a>
 
-            <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Delete</span>
+              <div class="caption-entry-state">Already uploaded &#10004;</div>
+
+              <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Delete</span>
+            </ng-container>
+
+            <ng-container *ngIf="videoCaption.action === 'CREATE'">
+              <span class="caption-entry-label">{{ videoCaption.language.label }}</span>
+
+              <div class="caption-entry-state caption-entry-state-create">Will be created on update</div>
+
+              <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel create</span>
+            </ng-container>
+
+            <ng-container *ngIf="videoCaption.action === 'REMOVE'">
+              <span class="caption-entry-label">{{ videoCaption.language.label }}</span>
+
+              <div class="caption-entry-state caption-entry-state-delete">Will be deleted on update</div>
+
+              <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel deletion</span>
+            </ng-container>
           </div>
         </div>
 
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 058ccba36..f3d9ee44a 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -46,11 +46,34 @@
     height: 40px;
     align-items: center;
 
+    a.caption-entry-label {
+      @include disable-default-a-behaviour;
+
+      color: #000;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
     .caption-entry-label {
       font-size: 15px;
       font-weight: bold;
 
       margin-right: 20px;
+      width: 150px;
+    }
+
+    .caption-entry-state {
+      width: 200px;
+
+      &.caption-entry-state-create {
+        color: #39CC0B;
+      }
+
+      &.caption-entry-state-delete {
+        color: #FF0000;
+      }
     }
 
     .caption-entry-delete {
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.ts b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
index 00c7bc41d..b8aef99dd 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
@@ -50,6 +50,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
 
   private schedulerInterval
   private firstPatchDone = false
+  private initialVideoCaptions: string[] = []
 
   constructor (
     private formValidatorService: FormValidatorService,
@@ -127,6 +128,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     this.videoLanguages = this.serverService.getVideoLanguages()
 
     this.schedulerInterval = setInterval(() => this.minScheduledDate = new Date(), 1000 * 60) // Update every minute
+
+    this.initialVideoCaptions = this.videoCaptions.map(c => c.language.id)
   }
 
   ngOnDestroy () {
@@ -147,7 +150,13 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     )
   }
 
-  deleteCaption (caption: VideoCaptionEdit) {
+  async deleteCaption (caption: VideoCaptionEdit) {
+    // Caption recovers his former state
+    if (caption.action && this.initialVideoCaptions.indexOf(caption.language.id) !== -1) {
+      caption.action = undefined
+      return
+    }
+
     // This caption is not on the server, just remove it from our array
     if (caption.action === 'CREATE') {
       removeElementFromArray(this.videoCaptions, caption)