import { Component , Input , OnDestroy , OnInit } from '@angular/core' ; import { FormBuilder , FormGroup , Validators } from '@angular/forms' ; import { BehaviorSubject , of , Subscription } from 'rxjs' ; import { ChannelEditService } from '../../../channels/v2/edit/edit.service' ; import { ConfigsService } from '../../../../common/services/configs.service' ; import { Session } from '../../../../services/session' ; import { MindsChannelResponse } from '../../../../interfaces/responses' ; import { ApiService } from '../../../../common/api/api.service' ; import { catchError , take } from 'rxjs/operators' ; import { OnboardingV3ModalProgressService } from '../../modal/onboarding-modal-progress.service' ; import { UserAvatarService } from '../../../../common/services/user-avatar.service' ; /**
 * Channel editing component for onboarding v3.
 */ @ Component ( { selector : 'm-onboardingV3__channel' , templateUrl : './channel.component.html' , styleUrls : [ './channel.component.ng.scss' ] , providers : [ ChannelEditService ] , } ) export class OnboardingV3ChannelComponent implements OnInit , OnDestroy { private subscriptions : Subscription [ ] = [ ] ; /**
     * FormGroup
     */ public form : FormGroup ; /**
     * CDN URL
     */ private cdnUrl : string ; /**
     * Behaviour subject containing the avatar src as a string.
     */ public avatarSrc$ : BehaviorSubject < string > = new BehaviorSubject < string > ( 'none' ) ; /**
     * Used in a similar way to inProgress$ but when true
     * the component can be shown even if init is not finished.
     */ public preloading$ : BehaviorSubject < boolean > = new BehaviorSubject < boolean > ( true ) ; constructor ( private fb , private session , private configs , private channelEditService , private inProgressService , private api , private userAvatarService ) { } async ngOnInit ( ) { const { channel } = await this . sync ( ) ; this . channelEditService . setChannel ( channel ) ; this . form = this . fb . group ( { name : [ this . name$ . getValue ( ) , [ Validators . required , Validators . maxLength ( 256 ) ] , ] , bio : [ this . bio$ . getValue ( ) , [ Validators . required , Validators . maxLength ( 2048 ) ] , ] , avatar : [ '' , Validators . required ] , } ) ; this . preloading$ . next ( false ) ; this . cdnUrl = this . configs . get ( 'cdn_url' ) ; this . subscriptions . push ( this . channelEditService . avatar$ . subscribe ( avatar => { const channel = this . channelEditService . channel$ . getValue ( ) ; let src = '' ; if ( avatar ) { src = `url(${ URL . createObjectURL ( avatar ) })` ; } else if ( channel && channel . icontime ) { src = `url(${ this . cdnUrl }icon/${ ( channel as any ) . guid }/large/${ ( channel as any ) . icontime })` ; } else { src = 'none' ; } this . avatarSrc$ . next ( src ) ; } ) ) ; } ngOnDestroy ( ) { for ( let subscription of this . subscriptions ) { subscription . unsubscribe ( ) ; } } returns { BehaviorSubject < string > } get name$ ( ) : BehaviorSubject < string > { return this . channelEditService . displayName$ ; } returns { BehaviorSubject < string > } get bio$ ( ) : BehaviorSubject < string > { return this . channelEditService . bio$ ; } returns { Promise < void > } public async saveAsync ( ) { this . inProgressService . next ( true ) ; this . channelEditService . bio$ . next ( this . form . get ( 'bio' ) . value ) ; this . channelEditService . displayName$ . next ( this . form . get ( 'name' ) . value ) ; const user = await this . channelEditService . save ( ) ; this . userAvatarService . src$ . next ( user . avatar_url . medium ) ; this . inProgressService . next ( false ) ; } param fileInput returns { void } public async uploadAvatar ( fileInput ) { this . inProgressService . next ( true ) ; const file = fileInput . files . item ( 0 ) ; if ( ! file ) { return ; } this . channelEditService . avatar$ . next ( file ) ; this . inProgressService . next ( false ) ; } returns { Promise < MindsChannelResponse > } async sync ( ) { return this . api . get ( `api/v1/channel/${ this . session . getLoggedInUser ( ) . username }` ) . pipe ( take ( 1 ) , catchError ( ( e ) => { console . error ( e ) ; return of ( null ) ; } ) ) . toPromise ( ) ; } }