import { AfterViewInit , Component , ElementRef , Inject , InjectionToken , OnDestroy , ViewChild } from '@angular/core' ; import { Router } from '@angular/router' ; import { IAnalyticsService , ANALYTICS_SERVICE } from 'services/analytics' ; import { IProfileService , PROFILE_SERVICE } from 'services/profile' ; import { AppRoutes } from 'app/routes' ; import { AnimationComponent } from 'components/animation/animation' ; import { environment } from 'environments/environment' ; import { loadCapturePageURL } from 'util/camera' ; interface SplashPageConfig { partnerLogoUrl ? : string ; videoMaxStartTime : number ; maxLogosDelay : number ; showLogosVideoPosition : number ; logosDuration : number ; } export const SPLASH_PAGE_CONFIG = new InjectionToken < SplashPageConfig > ( 'Splash page config' ) ; @ Component ( { selector : 'app-page-splash' , templateUrl : './splash.html' , styleUrls : [ './splash.scss' ] } ) export class SplashPageComponent implements AfterViewInit , OnDestroy { private timeout : any = null ; public videoStarted = false ; public videoComplete = false ; public logosVisible = false ; public spinnerVisible = false ; @ ViewChild ( 'video' , { static : true } ) public video : ElementRef | null = null ; @ ViewChild ( 'logoAnimation' , { static : true } ) public logoAnimation : AnimationComponent | null = null ; public get isLoading ( ) : boolean { return ! this . videoStarted && ! this . logosVisible ; } constructor ( @ Inject ( SPLASH_PAGE_CONFIG ) private config , private router , @ Inject ( ANALYTICS_SERVICE ) private analyticsService , @ Inject ( PROFILE_SERVICE ) private profileService ) { } ngAfterViewInit ( ) { this . analyticsService . logPageView ( this . router . url , 'Splash' ) ; this . startAnimations ( ) ; window . addEventListener ( 'focus' , this . onWindowFocus ) ; } ngOnDestroy ( ) { window . removeEventListener ( 'focus' , this . onWindowFocus ) ; if ( this . timeout ) { clearTimeout ( this . timeout ) ; this . timeout = null ; } } onWindowFocus = ( ) => { this . startAnimations ( ) ; } ; startAnimations ( ) { this . spinnerVisible = false ; setTimeout ( ( ) => this . spinnerVisible = true , 1 ) ; this . videoStarted = false ; this . videoComplete = false ; this . logosVisible = false ; if ( this . video ?. nativeElement ) { const videoEl = this . video . nativeElement as HTMLVideoElement ; videoEl . play ( ) ; videoEl . currentTime = 0 ; } if ( this . logoAnimation ) { this . logoAnimation . stop ( ) ; } if ( this . timeout ) { clearTimeout ( this . timeout ) ; } this . timeout = setTimeout ( ( ) => { this . videoComplete = true ; if ( ! this . logosVisible ) { this . _showLogos ( ) ; } } , this . config . videoMaxStartTime ) ; } onVideoUpdate ( ev ) { if ( this . logosVisible ) { return ; } const video = ev . currentTarget as HTMLVideoElement ; if ( video . duration && video . currentTime / video . duration > this . config . showLogosVideoPosition ) { this . _showLogos ( ) ; } } onVideoPlaying ( ) { this . videoStarted = true ; if ( this . timeout ) { clearTimeout ( this . timeout ) ; } this . timeout = setTimeout ( ( ) => { if ( ! this . logosVisible ) { this . _showLogos ( ) ; } } , this . config . maxLogosDelay ) ; } onVideoEnded ( ) { this . videoComplete = true ; if ( ! this . logosVisible ) { this . _showLogos ( ) ; } } _showLogos ( ) { this . logosVisible = true ; if ( this . logoAnimation ) { this . logoAnimation . play ( ) ; } if ( this . timeout ) { clearTimeout ( this . timeout ) ; } this . timeout = setTimeout ( ( ) => { this . profileService . loadProfile ( ) . then ( ( profile ) => { const skipIntro = ( environment . pages . termsAndPrivacy . enabled && profile . termsAgreed ) || ( ! environment . pages . termsAndPrivacy . enabled && profile . introViewed ) ; if ( ! skipIntro ) { this . router . navigateByUrl ( AppRoutes . Intro ) ; } else if ( ! profile . language || ! profile . endangeredLanguage ) { this . router . navigateByUrl ( AppRoutes . ChangeLanguage ) ; } else { loadCapturePageURL ( ) . then ( url => this . router . navigateByUrl ( url ) , ( ) => this . router . navigateByUrl ( AppRoutes . CaptureImage ) ) ; } } , ( ) => this . router . navigateByUrl ( AppRoutes . Intro ) ) ; } , this . config . logosDuration ) ; } }