import { AfterViewInit , Component , EventEmitter , HostListener , Input , OnChanges , Output , SimpleChanges } from "@angular/core" ; import { ThemePalette } from "@angular/material/core" ; import { EventService } from "../../services/event.service" ; @ Component ( { selector : "mat-volume-control" , templateUrl : "./mat-volume-control.component.html" , styleUrls : [ "./mat-volume-control.component.scss" ] } ) export class MatVolumeControlComponent implements AfterViewInit , OnChanges { @ Input ( ) video : HTMLVideoElement = null ; @ Input ( ) color : ThemePalette = "primary" ; @ Input ( ) volume = 1 ; @ Output ( ) volumeChanged = new EventEmitter < number > ( ) ; @ Input ( ) muted = false ; @ Output ( ) mutedChanged = new EventEmitter < boolean > ( ) ; @ Input ( ) keyboard = true ; constructor ( private evt ) { } ngAfterViewInit ( ) { this . updateMuted ( false ) ; } ngOnChanges ( changes ) { if ( changes . muted ) { this . updateMuted ( false ) ; } } setVolume ( value ) { this . volume = value ; this . video . volume = this . volume ; this . volumeChanged . emit ( this . volume ) ; if ( this . volume > 0 ) { this . setMuted ( false ) ; } } setMuted ( value ) { if ( this . muted !== value ) { this . toggleMuted ( ) ; } } toggleMuted ( ) { this . muted = ! this . muted ; this . updateMuted ( ) ; } updateMuted ( emitChange = true ) { if ( this . video ) { this . video . muted = this . muted ; } if ( emitChange ) { this . mutedChanged . emit ( this . muted ) ; } } @ HostListener ( "document:keyup.m" , [ "$event" ] ) onMuteKey ( event ) { if ( this . keyboard ) { this . toggleMuted ( ) ; event . preventDefault ( ) ; } } }