import { ChangeDetectionStrategy , Component , EventEmitter , Input , Output , ChangeDetectorRef , OnInit , OnDestroy , OnChanges , } from '@angular/core' ; import { DomSanitizer , SafeResourceUrl } from '@angular/platform-browser' ; import { ConfigsService } from '../../../../common/services/configs.service' ; import { AttachmentPreviewResource } from '../../services/preview.service' ; import { ComposerService } from '../../services/composer.service' ; import { Observable , Subscription } from 'rxjs' ; import { VideoPoster } from '../../services/video-poster.service' ; @ Component ( { selector : 'm-composerAttachmentPreview' , changeDetection : ChangeDetectionStrategy . OnPush , templateUrl : 'attachment-preview.component.html' , } ) export class AttachmentPreviewComponent implements OnInit , OnDestroy , OnChanges { videoPosterSubscription : Subscription ; /**
     * The preview resource
     */ @ Input ( ) attachmentPreviewResource : AttachmentPreviewResource ; /**
     * Orientation emitter, called when media loads
     */ @ Output ( 'onPortraitOrientation' ) onPortraitOrientationEmitter : EventEmitter < boolean > = new EventEmitter < boolean > ( ) ; safeResourceUrl : SafeResourceUrl ; safeVideoPosterUrl : SafeResourceUrl ; /**
     * URL for the CDN
     */ readonly cdnUrl : string ; param domSanitizer param configs constructor ( protected domSanitizer , configs , protected service , private cd ) { this . cdnUrl = configs . get ( 'cdn_url' ) ; } ngOnInit ( ) { this . videoPosterSubscription = this . service . videoPoster$ . subscribe ( ( videoPoster ) => { this . safeVideoPosterUrl = videoPoster ? this . sanitizeUrl ( videoPoster . url ) : null ; this . cd . markForCheck ( ) ; this . cd . detectChanges ( ) ; } ) ; } ngOnDestroy ( ) { this . videoPosterSubscription . unsubscribe ( ) ; } ngOnChanges ( changes ) { this . buildSafeUrl ( this . attachmentPreviewResource ) ; } param resource buildSafeUrl ( resource ) { switch ( resource . sourceType ) { case 'image' : if ( resource . source === 'local' ) { this . safeResourceUrl = this . sanitizeUrl ( resource . payload ) ; } else if ( resource . source === 'guid' ) { this . safeResourceUrl = `${ this . cdnUrl }fs/v1/thumbnail/${ resource . payload }/xlarge/?unlock_paywall=` + Date . now ( ) ; } break ; case 'video' : if ( resource . source === 'local' ) { this . safeResourceUrl = this . sanitizeUrl ( `${ resource . payload }#t=1` ) ; } else if ( resource . source === 'guid' ) { this . safeResourceUrl = this . sanitizeUrl ( `${ this . cdnUrl }api/v1/media/${ resource . payload }/play/#t=1` ) ; } break ; } } param url protected sanitizeUrl ( url ) { return this . domSanitizer . bypassSecurityTrustResourceUrl ( url ) ; } param image fitForImage ( image ) { if ( ! image ) { this . onPortraitOrientationEmitter . emit ( false ) ; return ; } this . onPortraitOrientationEmitter . emit ( image . naturalHeight >= image . naturalWidth ) ; } param video fitForVideo ( video ) { if ( ! video ) { this . onPortraitOrientationEmitter . emit ( false ) ; } this . onPortraitOrientationEmitter . emit ( video . videoHeight >= video . videoWidth ) ; } }