import { AfterContentInit, ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/combineLatest';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/startWith';
import '../util/takeUntilDestroyed';
import { IFrameState } from '../redux/frame';
import { IProject, ProjectService } from '../redux/project';
import { ControlStateSyncService } from './control-state-sync.service';
import { IBlock, IDevice } from './devices';
/**
 * The FrameComponent hosts the frame containing the developer's controls.
 */
export declare class FrameComponent implements AfterContentInit, OnDestroy {
    readonly el: ElementRef;
    private readonly cdRef;
    private readonly project;
    private readonly store;
    private readonly sanitizer;
    readonly controls: ControlStateSyncService;
    /**
     * Padding in all directions within the frame.
     */
    static readonly padding: number;
    /**
     * Aspect ratio of the fitted, virtual video.
     */
    static readonly videoRatio: number;
    /**
     * Background to display behind the frame.
     */
    readonly background: SafeStyle;
    /**
     * The control block for the current device. This is separate from the
     * "stubs" as we don't want to *ngFor it to avoid refreshes during resizes.
     */
    controlsBlock: IBlock;
    /**
     * List of blocks *other than* the control block for the current device.
     */
    stubBlocks: IBlock[];
    /**
     * Device "frame" to display.
     */
    state: Store<IFrameState>;
    /**
     * The currently selected device.
     */
    device: Observable<IDevice>;
    /**
     * Whether the controls should be connected to production.
     */
    isConnectedToRemote: Observable<boolean>;
    /**
     * Whether the frame should be masked
     */
    isMasked: Observable<boolean>;
    /**
     * Fired when something that happens chat changes the layout.
     */
    layoutResized: Observable<IFrameState>;
    /**
     * Observable for the computed video position, fitted with a 16:9 ratio into
     * the bounds provided by the controls.
     */
    videoFilledSize: Observable<ClientRect | null>;
    constructor(el: ElementRef, cdRef: ChangeDetectorRef, project: ProjectService, store: Store<IProject>, sanitizer: DomSanitizer, controls: ControlStateSyncService);
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    private refreshBlocks(state);
    private getFittedVideo(rect);
}
