4 files changed, 36 insertions, 14 deletions

diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 87280e16f..7b11c068e 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -2,13 +2,14 @@ import { map, share, switchMap, tap } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { Inject, Injectable, LOCALE_ID } from '@angular/core'
 import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
-import { Observable, ReplaySubject, of } from 'rxjs'
+import { Observable, of, ReplaySubject } from 'rxjs'
 import { getCompleteLocale, ServerConfig } from '../../../../../shared'
 import { About } from '../../../../../shared/models/server/about.model'
 import { environment } from '../../../environments/environment'
-import { VideoConstant, VideoPrivacy } from '../../../../../shared/models/videos'
+import { VideoConstant } from '../../../../../shared/models/videos'
 import { isDefaultLocale } from '../../../../../shared/models/i18n'
 import { getDevLocale, isOnDevLocale, peertubeTranslate } from '@app/shared/i18n/i18n-utils'
+import { sortBy } from '@app/shared/misc/utils'
 
 @Injectable()
 export class ServerService {
@@ -156,13 +157,7 @@ export class ServerService {
                   })
                 })
 
-          if (sort === true) {
-            hashToPopulate.sort((a, b) => {
-              if (a.label < b.label) return -1
-              if (a.label === b.label) return 0
-              return 1
-            })
-          }
+          if (sort === true) sortBy(hashToPopulate, 'label')
 
           notifier.next(true)
         })
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 8381745f5..018271efe 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -101,7 +101,19 @@ function removeElementFromArray <T> (arr: T[], elem: T) {
   if (index !== -1) arr.splice(index, 1)
 }
 
+function sortBy (obj: any[], key1: string, key2?: string) {
+  return obj.sort((a, b) => {
+    const elem1 = key2 ? a[key1][key2] : a[key1]
+    const elem2 = key2 ? b[key1][key2] : b[key1]
+
+    if (elem1 < elem2) return -1
+    if (elem1 === elem2) return 0
+    return 1
+  })
+}
+
 export {
+  sortBy,
   objectToUrlEncoded,
   getParameterByName,
   populateAsyncUserVideoChannels,
diff --git a/client/src/app/shared/video-caption/video-caption.service.ts b/client/src/app/shared/video-caption/video-caption.service.ts
index e835981dd..0ff094d1f 100644
--- a/client/src/app/shared/video-caption/video-caption.service.ts
+++ b/client/src/app/shared/video-caption/video-caption.service.ts
@@ -6,7 +6,7 @@ import { ResultList } from '../../../../../shared'
 import { RestExtractor, RestService } from '../rest'
 import { VideoCaption } from '../../../../../shared/models/videos/video-caption.model'
 import { VideoService } from '@app/shared/video/video.service'
-import { objectToFormData } from '@app/shared/misc/utils'
+import { objectToFormData, sortBy } from '@app/shared/misc/utils'
 import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model'
 
 @Injectable()
@@ -19,6 +19,11 @@ export class VideoCaptionService {
 
   listCaptions (videoId: number | string): Observable<ResultList<VideoCaption>> {
     return this.authHttp.get<ResultList<VideoCaption>>(VideoService.BASE_VIDEO_URL + videoId + '/captions')
+               .pipe(map(res => {
+                 sortBy(res.data, 'language', 'label')
+
+                 return res
+               }))
                .pipe(catchError(res => this.restExtractor.handleError(res)))
   }
 
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 b8aef99dd..b394a13e4 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
@@ -142,12 +142,13 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     // Replace existing caption?
     if (existingCaption) {
       Object.assign(existingCaption, caption, { action: 'CREATE' as 'CREATE' })
-      return
+    } else {
+      this.videoCaptions.push(
+        Object.assign(caption, { action: 'CREATE' as 'CREATE' })
+      )
     }
 
-    this.videoCaptions.push(
-      Object.assign(caption, { action: 'CREATE' as 'CREATE' })
-    )
+    this.sortVideoCaptions()
   }
 
   async deleteCaption (caption: VideoCaptionEdit) {
@@ -170,6 +171,15 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     this.videoCaptionAddModal.show()
   }
 
+  private sortVideoCaptions () {
+    this.videoCaptions.sort((v1, v2) => {
+      if (v1.language.label < v2.language.label) return -1
+      if (v1.language.label === v2.language.label) return 0
+
+      return 1
+    })
+  }
+
   private trackPrivacyChange () {
     // We will update the "support" field depending on the channel
     this.form.controls[ 'privacy' ]