import { AfterViewInit , Component , ElementRef , HostListener , Input , ViewChild , Inject , PLATFORM_ID , } from '@angular/core' ; import { isPlatformBrowser } from '@angular/common' ; import { Observable , of } from 'rxjs' ; import { Session } from '../../../services/session' ; import { ConfigsService } from '../../services/configs.service' ; import { UserAvatarService } from '../../services/user-avatar.service' ; export type PublisherCardSize = 'small' | 'medium' | 'large' ; @ Component ( { selector : 'm-publisherCard' , templateUrl : './publisher-card.component.html' , styleUrls : [ './publisher-card.component.ng.scss' ] , } ) export class PublisherCardComponent implements AfterViewInit { @ Input ( ) publisher : any ; @ Input ( ) showDescription : boolean = true ; @ Input ( ) showSubs : boolean = true ; @ Input ( ) showSubscribeButton : boolean = true ; @ Input ( ) disableSubscribe : boolean = false ; @ Input ( ) featured : boolean = false ; @ Input ( ) sizeOverride : PublisherCardSize ; readonly cdnUrl : string ; btnIconOnly : boolean = false ; size : PublisherCardSize = 'medium' ; sized : boolean = false ; recheckSubscribed : boolean = false ; constructor ( protected userAvatar , protected session , configs , @ Inject ( PLATFORM_ID ) protected platformId ) { this . cdnUrl = configs . get ( 'cdn_url' ) ; } private _isHovercard : boolean ; @ Input ( ) set isHovercard ( value ) { this . _isHovercard = value ; if ( value ) { this . showSubs = true ; this . recheckSubscribed = true ; } } ngAfterViewInit ( ) { if ( isPlatformBrowser ( this . platformId ) ) { setTimeout ( ( ) => this . onResize ( ) ) ; } } @ ViewChild ( 'publisherCard' ) publisherCardEl : ElementRef ; @ HostListener ( 'window:resize' ) onResize ( ) { if ( ! this . publisherCardEl || ! this . publisherCardEl . nativeElement ) return ; const publisherCardWidth = this . publisherCardEl . nativeElement . offsetWidth ; if ( this . sizeOverride ) { this . size = this . sizeOverride ; } else if ( publisherCardWidth <= 350 ) { if ( publisherCardWidth > 250 ) { this . size = 'medium' ; } else { this . size = 'small' ; } } else { this . size = 'large' ; } this . btnIconOnly = this . size === 'medium' ; this . sized = true ; } public getAvatarSrc ( ) { if ( this . publisher . guid === this . session . getLoggedInUser ( ) . guid ) { return this . userAvatar . src$ ; } if ( this . type === 'user' ) { return of ( `${ this . cdnUrl }icon/${ this . publisher . guid }/medium/${ this . publisher . icontime }` ) ; } else { return of ( `${ this . cdnUrl }fs/v1/avatars/${ this . publisher . guid }/${ this . publisher . icontime }` ) ; } } get type ( ) : string { return this . publisher . type ; } get feedUrl ( ) : string { return this . type === 'user' ? `/${ this . publisher . username }` : `/groups/profile/${ this . publisher . guid }/feed` ; } get subscribersUrl ( ) : string { return this . type === 'user' ? `/${ this . publisher . username }/subscribers` : `/groups/profile/${ this . publisher . guid }/members` ; } get shouldShowSubs ( ) : boolean { return ( this . showSubs && this . size !== 'small' && ( ( this . type === 'user' && ( this . publisher . subscribers_count || this . publisher . subscriptions_count ) ) || ( this . type === 'group' && this . publisher [ 'members:count' ] ) ) ) ; } }