import { AfterViewInit , ChangeDetectionStrategy , Component , ElementRef , OnDestroy , OnInit , ViewChild } from '@angular/core' ; import { DomSanitizer , SafeUrl } from '@angular/platform-browser' ; import { SettingsFeature , SettingsWindowService } from '@layout/service' ; import { ReplayWindowService } from '@modules/replay/service' ; @ Component ( { selector : 'app-replay-window' , templateUrl : './replay-window.component.html' , styleUrls : [ './replay-window.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush } ) export class ReplayWindowComponent implements OnInit , AfterViewInit , OnDestroy { private player : any ; public url : SafeUrl ; @ ViewChild ( 'video' ) public video : ElementRef < HTMLVideoElement > ; constructor ( private readonly window , private readonly domSanitizer , private readonly settings ) { } public ngOnInit ( ) { const data = this . window . data$ . get ( ) ; this . url = this . domSanitizer . bypassSecurityTrustUrl ( data . url ) ; } public ngAfterViewInit ( ) { import ( 'video.js' ) . then ( data => { const videojs = data . default ; this . player = videojs ( this . video . nativeElement , { fluid : true , autoplay : 'muted' , playbackRates : [ 0.25 , 0.5 , 0.75 , 1 ] , controlBar : { pictureInPictureToggle : false } } ) ; this . player . on ( 'click' , ( event ) => { if ( this . player . el ( ) === document . fullscreenElement ) { return ; } event . preventDefault ( ) ; this . player . requestFullscreen ( ) ; this . player . play ( ) ; } ) ; } ) ; } public ngOnDestroy ( ) { this . player . dispose ( ) ; } public onVideoEnded ( ) { if ( this . player . el ( ) === document . fullscreenElement ) { return ; } this . close ( ) ; } public onVideoClose ( ) { this . close ( ) ; } public onSettingsToggle ( ) { this . settings . toggle ( SettingsFeature . Replay ) . subscribe ( ) ; } private close ( ) { this . window . close ( ) . subscribe ( ) ; } }