Fix async issues with channels list

4 files changed, 30 insertions, 35 deletions

diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-create.component.ts b/client/src/app/+my-library/my-video-playlists/my-video-playlist-create.component.ts
index 5abea54b0..8606a875a 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-create.component.ts
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-create.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
-import { populateAsyncUserVideoChannels } from '@app/helpers'
+import { listUserChannels } from '@app/helpers'
 import {
   setPlaylistChannelValidator,
   VIDEO_PLAYLIST_CHANNEL_ID_VALIDATOR,
@@ -46,8 +46,8 @@ export class MyVideoPlaylistCreateComponent extends MyVideoPlaylistEdit implemen
       setPlaylistChannelValidator(this.form.get('videoChannelId'), privacy)
     })
 
-    populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
-      .catch(err => console.error('Cannot populate user video channels.', err))
+    listUserChannels(this.authService)
+      .subscribe(channels => this.userVideoChannels = channels)
 
     this.serverService.getVideoPlaylistPrivacies()
         .subscribe(videoPlaylistPrivacies => {
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-update.component.ts b/client/src/app/+my-library/my-video-playlists/my-video-playlist-update.component.ts
index 532423ba2..c554d3772 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-update.component.ts
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-update.component.ts
@@ -3,7 +3,7 @@ import { map, switchMap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
-import { populateAsyncUserVideoChannels } from '@app/helpers'
+import { listUserChannels } from '@app/helpers'
 import {
   setPlaylistChannelValidator,
   VIDEO_PLAYLIST_CHANNEL_ID_VALIDATOR,
@@ -51,8 +51,8 @@ export class MyVideoPlaylistUpdateComponent extends MyVideoPlaylistEdit implemen
       setPlaylistChannelValidator(this.form.get('videoChannelId'), privacy)
     })
 
-    populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
-      .catch(err => console.error('Cannot populate user video channels.', err))
+    listUserChannels(this.authService)
+      .subscribe(channels => this.userVideoChannels = channels)
 
     this.paramsSub = this.route.params
                          .pipe(
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
index 9a22024e5..3614499cd 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
@@ -2,7 +2,7 @@ import { catchError, switchMap, tap } from 'rxjs/operators'
 import { SelectChannelItem } from 'src/types/select-options-item.model'
 import { Directive, EventEmitter, OnInit } from '@angular/core'
 import { AuthService, CanComponentDeactivateResult, Notifier, ServerService } from '@app/core'
-import { populateAsyncUserVideoChannels } from '@app/helpers'
+import { listUserChannels } from '@app/helpers'
 import { FormReactive } from '@app/shared/shared-forms'
 import { VideoCaptionEdit, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
@@ -35,8 +35,11 @@ export abstract class VideoSend extends FormReactive implements OnInit {
   ngOnInit () {
     this.buildForm({})
 
-    populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
-      .then(() => this.firstStepChannelId = this.userVideoChannels[ 0 ].id)
+    listUserChannels(this.authService)
+      .subscribe(channels => {
+        this.userVideoChannels = channels
+        this.firstStepChannelId = this.userVideoChannels[0].id
+      })
 
     this.serverConfig = this.serverService.getTmpConfig()
     this.serverService.getConfig()
diff --git a/client/src/app/helpers/utils.ts b/client/src/app/helpers/utils.ts
index 6d7e76b11..a1747af3c 100644
--- a/client/src/app/helpers/utils.ts
+++ b/client/src/app/helpers/utils.ts
@@ -1,3 +1,4 @@
+import { map } from 'rxjs/operators'
 import { SelectChannelItem } from 'src/types/select-options-item.model'
 import { DatePipe } from '@angular/common'
 import { HttpErrorResponse } from '@angular/common/http'
@@ -20,31 +21,22 @@ function getParameterByName (name: string, url: string) {
   return decodeURIComponent(results[2].replace(/\+/g, ' '))
 }
 
-function populateAsyncUserVideoChannels (
-  authService: AuthService,
-  channel: SelectChannelItem[]
-) {
-  return new Promise<void>(res => {
-    authService.userInformationLoaded
-      .subscribe(
-        () => {
-          const user = authService.getUser()
-          if (!user) return
-
-          const videoChannels = user.videoChannels
-          if (Array.isArray(videoChannels) === false) return
-
-          videoChannels.forEach(c => channel.push({
-            id: c.id,
-            label: c.displayName,
-            support: c.support,
-            avatarPath: c.avatar?.path
-          }))
-
-          return res()
-        }
-      )
-  })
+function listUserChannels (authService: AuthService) {
+  return authService.userInformationLoaded
+    .pipe(map(() => {
+      const user = authService.getUser()
+      if (!user) return undefined
+
+      const videoChannels = user.videoChannels
+      if (Array.isArray(videoChannels) === false) return undefined
+
+      return videoChannels.map(c => ({
+        id: c.id,
+        label: c.displayName,
+        support: c.support,
+        avatarPath: c.avatar?.path
+      }) as SelectChannelItem)
+    }))
 }
 
 function getAbsoluteAPIUrl () {
@@ -207,7 +199,6 @@ export {
   durationToString,
   lineFeedToHtml,
   getParameterByName,
-  populateAsyncUserVideoChannels,
   getAbsoluteAPIUrl,
   dateToHuman,
   immutableAssign,
@@ -218,5 +209,6 @@ export {
   scrollToTop,
   isInViewport,
   isXPercentInViewport,
+  listUserChannels,
   uploadErrorHandler
 }