import { Injectable , EventEmitter , QueryList } from '@angular/core' ; import { VgUtilsService } from '../vg-utils/vg-utils.service' ; import { fromEvent , Subscription } from 'rxjs' ; import { VgMediaDirective } from '../../directives/vg-media/vg-media.directive' ; @ Injectable ( { providedIn : 'root' , } ) export class VgFullscreenApiService { polyfill : any ; onchange : string ; onerror : string ; nativeFullscreen = true ; isFullscreen = false ; isAvailable : boolean ; videogularElement : HTMLElement ; medias : QueryList < VgMediaDirective > ; fsChangeSubscription : Subscription ; onChangeFullscreen : EventEmitter < any > = new EventEmitter ( ) ; constructor ( ) { } init ( elem , medias ) { this . videogularElement = elem ; this . medias = medias ; const APIs = { w3 : { enabled : 'fullscreenEnabled' , element : 'fullscreenElement' , request : 'requestFullscreen' , exit : 'exitFullscreen' , onchange : 'fullscreenchange' , onerror : 'fullscreenerror' , } , newWebkit : { enabled : 'webkitFullscreenEnabled' , element : 'webkitFullscreenElement' , request : 'webkitRequestFullscreen' , exit : 'webkitExitFullscreen' , onchange : 'webkitfullscreenchange' , onerror : 'webkitfullscreenerror' , } , oldWebkit : { enabled : 'webkitIsFullScreen' , element : 'webkitCurrentFullScreenElement' , request : 'webkitRequestFullScreen' , exit : 'webkitCancelFullScreen' , onchange : 'webkitfullscreenchange' , onerror : 'webkitfullscreenerror' , } , moz : { enabled : 'mozFullScreen' , element : 'mozFullScreenElement' , request : 'mozRequestFullScreen' , exit : 'mozCancelFullScreen' , onchange : 'mozfullscreenchange' , onerror : 'mozfullscreenerror' , } , ios : { enabled : 'webkitFullscreenEnabled' , element : 'webkitFullscreenElement' , request : 'webkitEnterFullscreen' , exit : 'webkitExitFullscreen' , onchange : 'webkitendfullscreen' , onerror : 'webkitfullscreenerror' , } , ms : { enabled : 'msFullscreenEnabled' , element : 'msFullscreenElement' , request : 'msRequestFullscreen' , exit : 'msExitFullscreen' , onchange : 'MSFullscreenChange' , onerror : 'MSFullscreenError' , } , } ; for ( const browser in APIs ) { if ( APIs [ browser ] . enabled in document ) { this . polyfill = APIs [ browser ] ; break ; } } if ( VgUtilsService . isiOSDevice ( ) ) { this . polyfill = APIs . ios ; } this . isAvailable = this . polyfill != null ; if ( this . polyfill == null ) { return ; } let fsElemDispatcher ; switch ( this . polyfill . onchange ) { case 'mozfullscreenchange' : fsElemDispatcher = document ; break ; case 'webkitendfullscreen' : fsElemDispatcher = this . medias . toArray ( ) [ 0 ] . elem ; break ; default : fsElemDispatcher = elem ; } this . fsChangeSubscription = fromEvent ( fsElemDispatcher , this . polyfill . onchange ) . subscribe ( ( ) => { this . onFullscreenChange ( ) ; } ) ; } onFullscreenChange ( ) { this . isFullscreen = ! ! document [ this . polyfill . element ] ; this . onChangeFullscreen . emit ( this . isFullscreen ) ; } toggleFullscreen ( element = null ) { if ( this . isFullscreen ) { this . exit ( ) ; } else { this . request ( element ) ; } } request ( elem ) { if ( ! elem ) { elem = this . videogularElement ; } this . isFullscreen = true ; this . onChangeFullscreen . emit ( true ) ; if ( this . isAvailable && this . nativeFullscreen ) { if ( VgUtilsService . isMobileDevice ( ) ) { if ( ( ! this . polyfill . enabled && elem === this . videogularElement ) || VgUtilsService . isiOSDevice ( ) ) { elem = this . medias . toArray ( ) [ 0 ] . elem ; } this . enterElementInFullScreen ( elem ) ; } else { this . enterElementInFullScreen ( this . videogularElement ) ; } } } enterElementInFullScreen ( elem ) { elem [ this . polyfill . request ] ( ) ; } exit ( ) { this . isFullscreen = false ; this . onChangeFullscreen . emit ( false ) ; if ( this . isAvailable && this . nativeFullscreen ) { document [ this . polyfill . exit ] ( ) ; } } }