import { ChangeDetectionStrategy , Component , OnDestroy , OnInit } from '@angular/core' ; import { Subject , timer } from 'rxjs' ; import { switchMap , takeUntil } from 'rxjs/operators' ; import { SliderOptions , SliderSize } from '../../../slider/index' ; import { MediaPlayerService } from '../../media-player.service' ; let uniqueId = 1 ; @ Component ( { selector : 'ux-media-player-controls' , templateUrl : './controls.component.html' , changeDetection : ChangeDetectionStrategy . OnPush , host : { '[class.quiet]' : 'mediaPlayerService.quietMode || mediaPlayerService.fullscreen' } } ) export class MediaPlayerControlsExtensionComponent implements OnInit , OnDestroy { volumeActive : boolean = false ; volumeFocus : boolean = false ; returnFocus : boolean = true ; subtitlesId : string = `ux-media-player-subtitle-popover-${ uniqueId ++ }` ; subtitlesOpen : boolean = false ; mouseEnterVolume = new Subject < void > ( ) ; mouseLeaveVolume = new Subject < void > ( ) ; options : SliderOptions = { handles : { aria : { thumb : 'Volume' } } , track : { colors : { lower : '#666' } , height : SliderSize . Narrow , ticks : { major : { show : false } , minor : { show : false } } } } ; private _volume : number = 100 ; private _previousVolume = 100 ; private _onDestroy = new Subject < void > ( ) ; constructor ( public mediaPlayerService ) { } get volume ( ) : number { return this . _volume ; } set volume ( value ) { if ( value === 0 && this . _volume !== 0 ) { this . _previousVolume = this . _volume ; } this . _volume = Math . min ( Math . max ( value , 0 ) , 100 ) ; this . mediaPlayerService . volume = this . _volume / 100 ; } ngOnInit ( ) { this . mediaPlayerService . volumeChangeEvent . pipe ( takeUntil ( this . _onDestroy ) ) . subscribe ( volume => this . volume = volume * 100 ) ; this . mediaPlayerService . initEvent . pipe ( takeUntil ( this . _onDestroy ) ) . subscribe ( ( ) => this . volume = this . mediaPlayerService . volume * 100 ) ; this . mouseEnterVolume . pipe ( takeUntil ( this . _onDestroy ) ) . subscribe ( ( ) => this . volumeActive = true ) ; this . mouseLeaveVolume . pipe ( switchMap ( ( ) => timer ( 1500 ) . pipe ( takeUntil ( this . mouseEnterVolume ) ) ) , takeUntil ( this . _onDestroy ) ) . subscribe ( ( ) => this . volumeActive = false ) ; } ngOnDestroy ( ) { this . _onDestroy . next ( ) ; this . _onDestroy . complete ( ) ; } toggleMute ( ) { this . volume = this . volume === 0 ? this . _previousVolume : 0 ; } goToStart ( ) { this . mediaPlayerService . currentTime = 0 ; } goToEnd ( ) { this . mediaPlayerService . currentTime = this . mediaPlayerService . duration ; } isSubtitleActive ( ) { for ( let idx = 0 ; idx < this . mediaPlayerService . textTracks . length ; idx ++ ) { if ( this . mediaPlayerService . textTracks [ idx ] . mode === 'showing' ) { return true ; } } return false ; } setSubtitleTrack ( track ) { this . mediaPlayerService . hideSubtitleTracks ( ) ; for ( let idx = 0 ; idx < track . cues . length ; idx ++ ) { const cue = track . cues [ idx ] ; cue . line = - 3 ; } track . mode = 'showing' ; } getSubtitleTrack ( ) { for ( let idx = 0 ; idx < this . mediaPlayerService . textTracks . length ; idx ++ ) { if ( this . mediaPlayerService . textTracks [ idx ] . mode === 'showing' ) { return this . mediaPlayerService . textTracks [ idx ] . label ; } } return this . mediaPlayerService . noSubtitlesAriaLabel ; } }