import { Component , Input , Output , ViewChild , EventEmitter , ElementRef , ChangeDetectorRef , HostBinding , HostListener , OnInit , OnDestroy , AfterViewInit , Inject , PLATFORM_ID , } from '@angular/core' ; import { isPlatformServer } from '@angular/common' ; import { MindsVideoPlayerComponent } from './player.component' ; import { ScrollService } from '../../../../services/ux/scroll' ; import { Subscription } from 'rxjs' ; import { Session } from '../../../../services/session' ; @ Component ( { selector : 'm-videoPlayer--scrollaware' , templateUrl : './scrollaware-player.component.html' , } ) export class ScrollAwareVideoPlayerComponent implements OnInit , OnDestroy , AfterViewInit { @ Input ( ) guid : string ; @ Input ( ) shouldPlayInModal : boolean ; @ Input ( ) autoplay = true ; @ Input ( ) isModal : boolean = false ; @ Output ( ) mediaModalRequested : EventEmitter < void > = new EventEmitter ( ) ; @ ViewChild ( MindsVideoPlayerComponent ) player : MindsVideoPlayerComponent ; hasMousedOver = false ; isInViewport = false ; scrollSubscription : Subscription ; constructor ( private el , private scrollService , private session , private cd , @ Inject ( PLATFORM_ID ) private platformId ) { } ngOnInit ( ) { this . scrollSubscription = this . scrollService . listenForView ( ) . subscribe ( ( ) => { this . onVisibilityCheck ( ) ; } ) ; } ngOnDestroy ( ) { this . scrollSubscription . unsubscribe ( ) ; } ngAfterViewInit ( ) { this . onVisibilityCheck ( ) ; } onVisibilityCheck ( ) { if ( isPlatformServer ( this . platformId ) ) return ; if ( this . el . nativeElement ) { if ( this . scrollService . isVisible ( this . el . nativeElement , 50 ) || this . isModal ) { if ( ! this . isInViewport ) this . onEnterViewport ( ) ; } else { if ( this . isInViewport ) this . onExitViewport ( ) ; } } } onEnterViewport ( ) { const user = this . session . getLoggedInUser ( ) ; this . isInViewport = true ; if ( this . autoplay && ! user . disable_autoplay_videos ) { this . player . play ( { muted : true , hideControls : true , } ) ; this . detectChanges ( ) ; } } onExitViewport ( ) { this . isInViewport = false ; this . player . pause ( ) ; this . detectChanges ( ) ; } openModal ( e ) { this . mediaModalRequested . next ( ) ; } onOverlayClick ( e ) { if ( this . shouldPlayInModal && ! this . player . isPlaying ( ) ) { this . mediaModalRequested . next ( ) ; return ; } } forcePlay ( ) { this . player . play ( { muted : true , hideControls : true , } ) ; } @ HostListener ( 'mouseenter' ) onMouseOver ( e ) { if ( this . hasMousedOver ) return ; this . hasMousedOver = true ; } detectChanges ( ) { this . cd . markForCheck ( ) ; this . cd . detectChanges ( ) ; } }