import { Component , OnDestroy , OnInit } from '@angular/core' ; import { map , takeUntil } from 'rxjs/operators' ; import { Subject } from 'rxjs' ; import { NbComponentSize , NbMediaBreakpointsService , NbThemeService } from '@nebular/theme' ; import { Camera , SecurityCamerasData } from '../../../@core/data/security-cameras' ; @ Component ( { selector : 'ngx-security-cameras' , styleUrls : [ './security-cameras.component.scss' ] , templateUrl : './security-cameras.component.html' , } ) export class SecurityCamerasComponent implements OnInit , OnDestroy { private destroy$ = new Subject < void > ( ) ; cameras : Camera [ ] ; selectedCamera : Camera ; isSingleView = false ; actionSize : NbComponentSize = 'medium' ; constructor ( private themeService , private breakpointService , private securityCamerasService ) { } ngOnInit ( ) { this . securityCamerasService . getCamerasData ( ) . pipe ( takeUntil ( this . destroy$ ) ) . subscribe ( ( cameras ) => { this . cameras = cameras ; this . selectedCamera = this . cameras [ 0 ] ; } ) ; const breakpoints = this . breakpointService . getBreakpointsMap ( ) ; this . themeService . onMediaQueryChange ( ) . pipe ( map ( ( [ , breakpoint ] ) => breakpoint . width ) ) . subscribe ( ( width ) => { this . actionSize = width > breakpoints . md ? 'medium' : 'small' ; } ) ; } ngOnDestroy ( ) { this . destroy$ . next ( ) ; this . destroy$ . complete ( ) ; } selectCamera ( camera ) { this . selectedCamera = camera ; this . isSingleView = true ; } }