Add "auto-generated" caption info

client/src/app/+videos/+video-edit/shared/video-edit.component.html

@@ -184,7 +184,7 @@
                 <a
                   i18n-title title="See the subtitle file" class="caption-entry-label" target="_blank" rel="noopener noreferrer"
                   [href]="videoCaption.captionPath"
-                >{{ videoCaption.language.label }}</a>
+                >{{ getCaptionLabel(videoCaption) }}</a>
 
                 <div i18n class="caption-entry-state">Already uploaded on {{ videoCaption.updatedAt | date }}	&#10004;</div>
 
@@ -193,7 +193,7 @@
               </ng-container>
 
               <ng-container *ngIf="videoCaption.action === 'CREATE'">
-                <span class="caption-entry-label">{{ videoCaption.language.label }}</span>
+                <span class="caption-entry-label">{{ getCaptionLabel(videoCaption) }}</span>
 
                 <div i18n class="caption-entry-state caption-entry-state-create">Will be created on update</div>
 
@@ -201,7 +201,7 @@
               </ng-container>
 
               <ng-container *ngIf="videoCaption.action === 'UPDATE'">
-                <span class="caption-entry-label">{{ videoCaption.language.label }}</span>
+                <span class="caption-entry-label">{{ getCaptionLabel(videoCaption) }}</span>
 
                 <div i18n class="caption-entry-state caption-entry-state-create">Will be edited on update</div>
 
@@ -209,7 +209,7 @@
               </ng-container>
 
               <ng-container *ngIf="videoCaption.action === 'REMOVE'">
-                <span class="caption-entry-label">{{ videoCaption.language.label }}</span>
+                <span class="caption-entry-label">{{ getCaptionLabel(videoCaption) }}</span>
 
                 <div i18n class="caption-entry-state caption-entry-state-delete">Will be deleted on update</div>
 

client/src/app/+videos/+video-edit/shared/video-edit.component.ts

@@ -348,6 +348,14 @@ export class VideoEditComponent implements OnInit, OnDestroy {
 
   // ---------------------------------------------------------------------------
 
+  getCaptionLabel (caption: VideoCaptionWithPathEdit) {
+    if (caption.automaticallyGenerated) {
+      return $localize`${caption.language.label} (auto-generated)`
+    }
+
+    return caption.language.label
+  }
+
   getExistingCaptions () {
     return this.videoCaptions
                .filter(c => c.action !== 'REMOVE')

client/src/app/+videos/+video-watch/video-watch.component.ts

@@ -768,6 +768,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     const playerCaptions = videoCaptions.map(c => ({
       label: c.language.label,
       language: c.language.id,
+      automaticallyGenerated: c.automaticallyGenerated,
       src: environment.apiUrl + c.captionPath
     }))
 

client/src/app/shared/shared-main/video-caption/video-caption-edit.model.ts

@@ -4,6 +4,8 @@ export interface VideoCaptionEdit {
     label?: string
   }
 
+  automaticallyGenerated?: boolean
+
   action?: 'CREATE' | 'REMOVE' | 'UPDATE'
   captionfile?: any
   updatedAt?: string

client/src/app/shared/shared-video-miniature/video-download.component.html

@@ -26,7 +26,11 @@
       <div ngbNav #subtitleNav="ngbNav" class="nav-tabs" [activeId]="subtitleLanguageId" (activeIdChange)="onSubtitleIdChange($event)">
 
         <ng-container *ngFor="let caption of getCaptions()" [ngbNavItem]="caption.language.id">
-          <a ngbNavLink i18n>{{ caption.language.label }}</a>
+          <a ngbNavLink>
+            {{ caption.language.label }}
+
+            <ng-container *ngIf="caption.automaticallyGenerated" i18n>(auto-generated)</ng-container>
+          </a>
 
           <ng-template ngbNavContent>
             <div class="nav-content">
@@ -53,8 +57,8 @@
         </ng-template>
 
         <ng-container *ngIf="originalVideoFile" ngbNavItem="original">
-          <a ngbNavLink i18n>
+          <a ngbNavLink>
-            <ng-container>Original file</ng-container>
+            <ng-container i18n>Original file</ng-container>
 
             <my-global-icon ngbTooltip="Other users cannot download the original file" iconName="shield"></my-global-icon>
           </a>

client/src/assets/player/shared/peertube/peertube-plugin.ts

@@ -506,7 +506,11 @@ class PeerTubePlugin extends Plugin {
     for (const caption of this.options.videoCaptions()) {
       this.player.addRemoteTextTrack({
         kind: 'captions',
-        label: caption.label,
+
+        label: caption.automaticallyGenerated
+          ? this.player.localize('{1} (auto-generated)', [ caption.label ])
+          : caption.label,
+
         language: caption.language,
         id: caption.language,
         src: caption.src,

client/src/assets/player/types/peertube-videojs-typings.ts

@@ -98,6 +98,7 @@ type VideoJSCaption = {
   label: string
   language: string
   src: string
+  automaticallyGenerated: boolean
 }
 
 type VideoJSStoryboard = {

client/src/standalone/videos/shared/player-options-builder.ts

@@ -425,6 +425,7 @@ export class PlayerOptionsBuilder {
       return data.map((c: VideoCaption) => ({
         label: peertubeTranslate(c.language.label, translations),
         language: c.language.id,
+        automaticallyGenerated: c.automaticallyGenerated,
         src: window.location.origin + c.captionPath
       }))
     }

scripts/i18n/create-custom-files.ts

@@ -81,6 +81,7 @@ const playerKeys = {
   '{1} (from edge: {2})': '{1} (from edge: {2})',
   'Disable subtitles': 'Disable subtitles',
   'Enable {1} subtitle': 'Enable {1} subtitle',
+  '{1} (auto-generated)': '{1} (auto-generated)',
   'Go back': 'Go back'
 }
 Object.assign(playerKeys, videojs)