Fix async issues with channels list

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)
+    listUserChannels(this.authService)
-      .catch(err => console.error('Cannot populate user video channels.', err))
+      .subscribe(channels => this.userVideoChannels = channels)
 
     this.serverService.getVideoPlaylistPrivacies()
         .subscribe(videoPlaylistPrivacies => {

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)
+    listUserChannels(this.authService)
-      .catch(err => console.error('Cannot populate user video channels.', err))
+      .subscribe(channels => this.userVideoChannels = channels)
 
     this.paramsSub = this.route.params
                          .pipe(

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)
+    listUserChannels(this.authService)
-      .then(() => this.firstStepChannelId = this.userVideoChannels[ 0 ].id)
+      .subscribe(channels => {
+        this.userVideoChannels = channels
+        this.firstStepChannelId = this.userVideoChannels[0].id
+      })
 
     this.serverConfig = this.serverService.getTmpConfig()
     this.serverService.getConfig()

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 (
+function listUserChannels (authService: AuthService) {
-  authService: AuthService,
+  return authService.userInformationLoaded
-  channel: SelectChannelItem[]
+    .pipe(map(() => {
-) {
-  return new Promise<void>(res => {
-    authService.userInformationLoaded
-      .subscribe(
-        () => {
       const user = authService.getUser()
-          if (!user) return
+      if (!user) return undefined
 
       const videoChannels = user.videoChannels
-          if (Array.isArray(videoChannels) === false) return
+      if (Array.isArray(videoChannels) === false) return undefined
 
-          videoChannels.forEach(c => channel.push({
+      return videoChannels.map(c => ({
         id: c.id,
         label: c.displayName,
         support: c.support,
         avatarPath: c.avatar?.path
+      }) as SelectChannelItem)
     }))
-
-          return res()
-        }
-      )
-  })
 }
 
 function getAbsoluteAPIUrl () {
@@ -207,7 +199,6 @@ export {
   durationToString,
   lineFeedToHtml,
   getParameterByName,
-  populateAsyncUserVideoChannels,
   getAbsoluteAPIUrl,
   dateToHuman,
   immutableAssign,
@@ -218,5 +209,6 @@ export {
   scrollToTop,
   isInViewport,
   isXPercentInViewport,
+  listUserChannels,
   uploadErrorHandler
 }

server/initializers/constants.ts

@@ -439,6 +439,8 @@ const MIMETYPES = {
       'audio/x-flac': '.flac',
       'audio/flac': '.flac',
       '‎audio/aac': '.aac',
+      'audio/m4a': '.m4a',
+      'audio/x-m4a': '.m4a',
       'audio/ac3': '.ac3'
     },
     EXT_MIMETYPE: null as { [ id: string ]: string }