From 5d62c3c1cbec67fb7aab4365fa869339b811d16d Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 10 Jul 2024 12:31:34 +0200
Subject: [PATCH] Add "auto-generated" caption info

---
 .../+video-edit/shared/video-edit.component.html       |  8 ++++----
 .../+videos/+video-edit/shared/video-edit.component.ts |  8 ++++++++
 .../app/+videos/+video-watch/video-watch.component.ts  |  1 +
 .../video-caption/video-caption-edit.model.ts          |  2 ++
 .../video-download.component.html                      | 10 +++++++---
 .../assets/player/shared/peertube/peertube-plugin.ts   |  6 +++++-
 .../assets/player/types/peertube-videojs-typings.ts    |  1 +
 .../standalone/videos/shared/player-options-builder.ts |  1 +
 scripts/i18n/create-custom-files.ts                    |  1 +
 9 files changed, 30 insertions(+), 8 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 57dcd2b2e..33a6c041a 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
@@ -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>
 
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 5469b7fa8..711111a6b 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
@@ -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')
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 0bc0ac728..40547bc15 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/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
     }))
 
diff --git a/client/src/app/shared/shared-main/video-caption/video-caption-edit.model.ts b/client/src/app/shared/shared-main/video-caption/video-caption-edit.model.ts
index 8d578cae6..08a9587d7 100644
--- a/client/src/app/shared/shared-main/video-caption/video-caption-edit.model.ts
+++ b/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
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index ced76fbe8..618d22178 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/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>
-            <ng-container>Original file</ng-container>
+          <a ngbNavLink>
+            <ng-container i18n>Original file</ng-container>
 
             <my-global-icon ngbTooltip="Other users cannot download the original file" iconName="shield"></my-global-icon>
           </a>
diff --git a/client/src/assets/player/shared/peertube/peertube-plugin.ts b/client/src/assets/player/shared/peertube/peertube-plugin.ts
index 85174a652..30ee03970 100644
--- a/client/src/assets/player/shared/peertube/peertube-plugin.ts
+++ b/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,
diff --git a/client/src/assets/player/types/peertube-videojs-typings.ts b/client/src/assets/player/types/peertube-videojs-typings.ts
index 72b3f2324..cf34e7aba 100644
--- a/client/src/assets/player/types/peertube-videojs-typings.ts
+++ b/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 = {
diff --git a/client/src/standalone/videos/shared/player-options-builder.ts b/client/src/standalone/videos/shared/player-options-builder.ts
index ef493eae8..a7672beb0 100644
--- a/client/src/standalone/videos/shared/player-options-builder.ts
+++ b/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
       }))
     }
diff --git a/scripts/i18n/create-custom-files.ts b/scripts/i18n/create-custom-files.ts
index 7655cac8a..4def10a8e 100755
--- a/scripts/i18n/create-custom-files.ts
+++ b/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)