@bmat/angular/fesm2015/bmat-angular-media-players.js

import { Overlay, OverlayModule } from '@angular/cdk/overlay';
import { DOCUMENT, CommonModule } from '@angular/common';
import { Pipe, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, Input, HostBinding, EventEmitter, Renderer2, Output, ViewChild, ContentChild, InjectionToken, Inject, ElementRef, HostListener, Injectable, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, NgModule, Directive, TemplateRef, ViewContainerRef } from '@angular/core';
import { timer, Subject, Observable, fromEvent } from 'rxjs';
import { tap, map, takeUntil, startWith, debounceTime } from 'rxjs/operators';
import { PortalInjector, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
import { Directionality, BidiModule } from '@angular/cdk/bidi';
import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, PAGE_UP, PAGE_DOWN } from '@angular/cdk/keycodes';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ParseDurationPipe {
    // tslint:disable-next-line:no-any
    /**
     * @param {?} value
     * @param {?=} format
     * @return {?}
     */
    transform(value, format = 'HH:MM:SS') {
        /** @type {?} */
        const coerceInteger = Number.parseInt(value, 10);
        if (Number.isNaN(coerceInteger)) {
            return 'N/A';
        }
        /** @type {?} */
        const seconds = coerceInteger % 60;
        /** @type {?} */
        const minutes = Math.floor(coerceInteger / 60) % 60;
        /** @type {?} */
        const hours = Math.floor(coerceInteger / 3600);
        return format
            .split(':')
            .map((/**
         * @param {?} segment
         * @return {?}
         */
        segment => {
            const { length } = segment;
            if (length === 0) {
                throw new TypeError('Invalid format. Empty segment.');
            }
            if (length > 2) {
                throw new TypeError('Invalid format for segment ' + segment);
            }
            if (segment.length === 2 && segment[0] !== segment[1]) {
                throw new TypeError('Invalid format for segment ' + segment);
            }
            /** @type {?} */
            let val;
            switch (segment[0]) {
                case 'H':
                    val = hours.toString();
                    break;
                case 'M':
                    val = minutes.toString();
                    break;
                case 'S':
                    val = seconds.toString();
                    break;
                default:
                    throw new TypeError('Invalid format for segment ' + segment);
            }
            while (val.length < length) {
                val = '0' + val;
            }
            return val;
        }))
            .join(':');
    }
}
ParseDurationPipe.decorators = [
    { type: Pipe, args: [{
                name: 'bmParseDuration',
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class BMMediaOutputComponent {
    /**
     * @param {?} changeDetectorRef
     */
    constructor(changeDetectorRef) {
        this.changeDetectorRef = changeDetectorRef;
        this.format = 'MM:SS';
        this.formater = new ParseDurationPipe();
        this.changeDetectorRef.detach();
    }
    /**
     * @param {?} v
     * @return {?}
     */
    set time(v) {
        if (v || v === 0) {
            this.innerTime = this.formater.transform(Math.max(0, v), this.format);
            this.changeDetectorRef.markForCheck();
        }
    }
}
BMMediaOutputComponent.decorators = [
    { type: Component, args: [{
                selector: 'bm-media-output',
                template: "<span class=\"bm-media-output__content\">{{innerTime}}</span>",
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None,
                styles: [".bm-media-output__content{padding:0 .4em}"]
            }] }
];
/** @nocollapse */
BMMediaOutputComponent.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
BMMediaOutputComponent.propDecorators = {
    format: [{ type: Input }],
    time: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ProgressBarComponent {
    /**
     * @param {?} _cdr
     */
    constructor(_cdr) {
        this._cdr = _cdr;
        this.min = 0;
        this.role = 'progressbar';
        this.max = 100;
        /**
         * Sets if the bar should display or not an animation after value changes
         */
        this.staticBar = false;
        this._value = 0;
    }
    /**
     * @param {?} v
     * @return {?}
     */
    set value(v) {
        this._value = Math.min(Math.max(0, Number.isNaN(v) ? 0 : v), this.max);
        this.innerWidth = Math.round((10000 * this._value) / this.max) / 100;
        this._cdr.markForCheck();
    }
    /**
     * @return {?}
     */
    get value() {
        return this._value;
    }
}
ProgressBarComponent.decorators = [
    { type: Component, args: [{
                selector: 'bm-progress',
                template: "<div [ngStyle]=\"{ 'width.%': innerWidth }\" class=\"bm-inner-progress-bar\"></div>\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [":host{height:.5em;border-radius:.4em;background-color:var(--secondary-color-hover,#959494);display:inline-block;max-width:100%;min-width:10em;position:relative}:host(:not([static=true])) .bm-inner-progress-bar{transition:width 2s}.bm-inner-progress-bar{height:.5em;border-radius:.4em;background-color:var(--header-background-color,#3e71ad)}"]
            }] }
];
/** @nocollapse */
ProgressBarComponent.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
ProgressBarComponent.propDecorators = {
    min: [{ type: HostBinding, args: ['attr.aria-valuemin',] }],
    role: [{ type: HostBinding, args: ['attr.role',] }],
    max: [{ type: HostBinding, args: ['attr.aria-valuemax',] }, { type: Input }],
    value: [{ type: HostBinding, args: ['attr.aria-valuenow',] }, { type: Input }],
    staticBar: [{ type: Input }, { type: HostBinding, args: ['attr.static',] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class BMATAudioPlayerComponent {
    /**
     * @param {?} _renderer
     */
    constructor(_renderer) {
        this._renderer = _renderer;
        // Forward attributes to audio
        this.autoplay = false;
        this.controls = false;
        this.loop = false;
        this.muted = false;
        this.preload = 'none';
        /**
         * Echo of play HTMLAudioElement event
         */
        this.play = new EventEmitter();
        /**
         * Echo of play HTMLAudioElement event
         */
        this.pause = new EventEmitter();
        this.isDisabled = true;
        this.isLoading = false;
        this.isPlaying = false;
        this._isMouseDown = false;
        this._progressUpdater$ = timer(500, 500).pipe(tap(this.calculateElapsed.bind(this)));
    }
    /**
     * @param {?} v
     * @return {?}
     */
    set src(v) {
        this._src = v;
        this.isDisabled = !v;
    }
    /**
     * @return {?}
     */
    get src() {
        return this._src;
    }
    /**
     * @return {?}
     */
    ngAfterContentInit() {
        if (this.progressBar) {
            this.progressBar.value = 0;
            this.progressBar.staticBar = true;
        }
        if (this.mediaOutput) {
            this.mediaOutput.time = 0;
        }
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onButtonMousedown(event) {
        event.preventDefault();
        this._mouseDownTime = new Date().getTime();
        this._isMouseDown = true;
        this._playBackTimerSubscription = timer(BMATAudioPlayerComponent.HOLD_TIME).subscribe((/**
         * @return {?}
         */
        () => {
            /** @type {?} */
            const now = new Date().getTime();
            /** @type {?} */
            const deltaTime = now - this._mouseDownTime;
            if (this._isMouseDown && deltaTime > BMATAudioPlayerComponent.HOLD_TIME) {
                this._renderer.setProperty(this.audioElement.nativeElement, 'playbackRate', BMATAudioPlayerComponent.ACCELERATED_RATE);
            }
        }));
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onloadeddata(event) {
        event.stopPropagation();
        this.isLoading = true;
    }
    /**
     * @return {?}
     */
    ondurationchange() {
        this.calculateElapsed();
    }
    /**
     * @param {?} event
     * @return {?}
     */
    oncanplay(event) {
        event.stopPropagation();
        this.isLoading = false;
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onplay(event) {
        event.stopPropagation();
        this.isPlaying = true;
        this.play.emit();
        if (this.progressBar) {
            this._timerSubscription = this._progressUpdater$.subscribe();
        }
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onplaying(event) {
        event.stopPropagation();
        this.isPlaying = true;
        this.isLoading = false;
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onpause(event) {
        event.stopPropagation();
        this.isPlaying = false;
        this.pause.emit();
        if (this._timerSubscription) {
            this._timerSubscription.unsubscribe();
        }
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onwaiting(event) {
        event.stopPropagation();
        this.isLoading = true;
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onended(event) {
        this.isPlaying = false;
        event.stopPropagation();
        if (this._timerSubscription) {
            this._timerSubscription.unsubscribe();
            this.progressBar.value = 100;
        }
    }
    /**
     * @return {?}
     */
    togglePlay() {
        this._renderer.setProperty(this.audioElement.nativeElement, 'playbackRate', 1);
        this._isMouseDown = false;
        /** @type {?} */
        const now = new Date().getTime();
        /** @type {?} */
        const deltaTime = now - this._mouseDownTime;
        this._playBackTimerSubscription.unsubscribe();
        if (deltaTime > BMATAudioPlayerComponent.HOLD_TIME) {
            return;
        }
        if (this.audioElement && this.audioElement.nativeElement) {
            if (this.isPlaying) {
                this.audioElement.nativeElement.pause();
            }
            else {
                this.audioElement.nativeElement.play();
            }
        }
    }
    /**
     * @private
     * @return {?}
     */
    calculateElapsed() {
        /** @type {?} */
        const nativeAudio = this.audioElement.nativeElement;
        if (this.progressBar) {
            /** @type {?} */
            const currentPosition = Math.min(100, (100 * nativeAudio.currentTime) / nativeAudio.duration);
            this.progressBar.value =
                !Number.isNaN(currentPosition) && currentPosition > 0
                    ? currentPosition
                    : 0;
        }
        if (this.mediaOutput) {
            this.mediaOutput.time = nativeAudio.currentTime;
        }
    }
}
/**
 * Threshold of time to consider a mousedown a hold event.
 */
BMATAudioPlayerComponent.HOLD_TIME = 200;
/**
 * Playback rate when playing audio in accelerated mode.
 */
BMATAudioPlayerComponent.ACCELERATED_RATE = 3;
BMATAudioPlayerComponent.decorators = [
    { type: Component, args: [{
                selector: 'bm-audio-player',
                template: "<audio\n  #audio\n  (canplay)=\"oncanplay($event)\"\n  (durationchange)=\"ondurationchange()\"\n  (ended)=\"onended($event)\"\n  (loadeddata)=\"onloadeddata($event)\"\n  (pause)=\"onpause($event)\"\n  (play)=\"onplay($event)\"\n  (playing)=\"onplaying($event)\"\n  (waiting)=\"onwaiting($event)\"\n  [autoplay]=\"autoplay\"\n  [controls]=\"controls\"\n  [loop]=\"loop\"\n  [muted]=\"muted\"\n  [preload]=\"preload\"\n  [src]=\"src\"\n></audio>\n<button\n  (mousedown)=\"onButtonMousedown($event)\"\n  (mouseup)=\"togglePlay()\"\n  [class.bm-audio-player__button--playing]=\"isPlaying\"\n  [disabled]=\"isDisabled\"\n  aria-label=\"Toggle audio play\"\n  class=\"bm-audio-player__button\"\n  i18n-aria-label\n>\n  <i\n    [ngClass]=\"{\n      'fab fa-youtube': !isLoading,\n      'fas fa-spinner': isLoading\n    }\"\n  ></i>\n</button>\n<ng-content select=\"bm-progress, bm-media-output\"></ng-content>\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                // tslint:disable-next-line:use-component-view-encapsulation
                encapsulation: ViewEncapsulation.None,
                styles: ["bm-audio-player{display:inline-flex;align-items:center}.bm-audio-player__button{border:0;background:0 0;padding:0;font-size:2rem;margin:0 .2em;color:var(--secondary-color,#bcbcbc)}.bm-audio-player__button--playing{color:var(--header-background-color,#3e71ad)}.bm-audio-player__button[disabled]{color:var(--header-color,#f8f8f8)}.fa-spinner{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}", "bm-progress bm-audio-player,bm-progress bm-media-output{margin:0 .2em}"]
            }] }
];
/** @nocollapse */
BMATAudioPlayerComponent.ctorParameters = () => [
    { type: Renderer2 }
];
BMATAudioPlayerComponent.propDecorators = {
    autoplay: [{ type: Input }],
    controls: [{ type: Input }],
    loop: [{ type: Input }],
    muted: [{ type: Input }],
    preload: [{ type: Input }],
    src: [{ type: Input }],
    play: [{ type: Output }],
    pause: [{ type: Output }],
    audioElement: [{ type: ViewChild, args: ['audio', { static: true },] }],
    progressBar: [{ type: ContentChild, args: [ProgressBarComponent, { static: true },] }],
    mediaOutput: [{ type: ContentChild, args: [BMMediaOutputComponent, { static: true },] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Injection token to provide the
 * @type {?}
 */
const CONNECTED_PLAYER_CLOSE_REQUEST = new InjectionToken('bmat.angular.media-players.connected-player-close-request');

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Injection token to provide the
 * @type {?}
 */
const CONNECTED_PLAYER_SRC = new InjectionToken('bmat.angular.media-players.connected-player-src');

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Injection token to provide the
 * @type {?}
 */
const CONNECTED_PLAYER_VOLUME = new InjectionToken('bmat.angular.media-players.connected-player-volume');

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Connected video player, to be called using the remote service
 */
class ConnectedVideoPlayerComponent {
    /**
     * @param {?} src
     * @param {?} _closeRequest
     * @param {?} _document
     * @param {?} volume
     * @param {?} _cdr
     */
    constructor(src, 
    // tslint:disable-next-line:no-any
    _closeRequest, _document, volume, _cdr) {
        this._document = _document;
        this._cdr = _cdr;
        this.autoplay = true;
        this._focusWithin = false;
        this.src = src;
        this._closeRequest = _closeRequest;
        this.volume = volume;
    }
    /**
     * @return {?}
     */
    get focusWithin() {
        return this._focusWithin;
    }
    /**
     * @return {?}
     */
    onFocusin() {
        this._focusWithin = true;
    }
    /**
     * @return {?}
     */
    onFocusout() {
        this._focusWithin = false;
    }
    /**
     * @param {?} e
     * @return {?}
     */
    onDocumentKeydown(e) {
        if (e.key === 'Escape') {
            this._closeRequest();
        }
    }
    /**
     * @return {?}
     */
    close() {
        this._closeRequest();
    }
    /**
     * @return {?}
     */
    onMediaEnded() {
        this._closeRequest();
    }
    /**
     * @return {?}
     */
    checkAfterVideoElement() {
        this._cdr.markForCheck();
    }
    /**
     * @return {?}
     */
    onVideoPlay() {
        this.isPlaying = true;
        this._cdr.markForCheck();
    }
    /**
     * @return {?}
     */
    onVideoPause() {
        this.isPlaying = false;
        this._cdr.markForCheck();
    }
    /**
     * @return {?}
     */
    togglePlay() {
        if (this._videoElement) {
            if (this._videoElement.nativeElement.paused) {
                this._videoElement.nativeElement.play();
            }
            else {
                this._videoElement.nativeElement.pause();
            }
        }
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    onSliderSeek($event) {
        if (this._videoElement) {
            this._videoElement.nativeElement.currentTime = $event;
        }
    }
    /**
     * @return {?}
     */
    toggleFullScreen() {
        if (this._fullscreenWrapper &&
            this._fullscreenWrapper.nativeElement.requestFullscreen) {
            if (this._document.fullscreenElement) {
                this._document.exitFullscreen();
            }
            else {
                this._fullscreenWrapper.nativeElement
                    .requestFullscreen()
                    .catch((/**
                 * @param {?} err
                 * @return {?}
                 */
                err => console.error(err)));
            }
        }
    }
    /**
     * @return {?}
     */
    displayFullScreenBtn() {
        return (this._fullscreenWrapper &&
            this._fullscreenWrapper.nativeElement.requestFullscreen);
    }
}
ConnectedVideoPlayerComponent.decorators = [
    { type: Component, args: [{
                selector: 'bm-connected-video-player',
                template: "<div\n  #fullscreenWrapper\n  class=\"bm-connected-video-player-controls__fullscreen-wrap\"\n>\n  <video\n    (durationchange)=\"checkAfterVideoElement()\"\n    (ended)=\"onMediaEnded()\"\n    (pause)=\"onVideoPause()\"\n    (play)=\"onVideoPlay()\"\n    (timeupdate)=\"checkAfterVideoElement()\"\n    [autoplay]=\"autoplay\"\n    [src]=\"src\"\n    [volume]=\"volume\"\n    #videoElement\n    class=\"bm-connected-video-player\"\n    nocontrols\n  ></video>\n  <div\n    class=\"bm-connected-video-player-controls bm-connected-video-player-controls--top\"\n    style=\"text-align: right;\"\n  >\n    <button\n      type=\"button\"\n      class=\"bm-connected-video-player-controls__btn\"\n      i18n-title\n      title=\"Close video\"\n      (click)=\"close()\"\n    >\n      <svg\n        aria-hidden=\"true\"\n        data-prefix=\"fas\"\n        data-icon=\"times\"\n        class=\"bm-connected-video-player__icon\"\n        role=\"img\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 352 512\"\n      >\n        <path\n          fill=\"currentColor\"\n          d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n  <div\n    class=\"bm-connected-video-player-controls bm-connected-video-player-controls--bottom\"\n  >\n    <bm-media-progress-slider\n      style=\"width: 100%;\"\n      [duration]=\"videoElement.duration\"\n      [value]=\"videoElement.currentTime\"\n      (seek)=\"onSliderSeek($event)\"\n    ></bm-media-progress-slider>\n    <div class=\"bm-connected-video-player-controls__second-level\">\n      <div class=\"bm-connected-video-player-controls__play-ctrl\">\n        <button\n          type=\"button\"\n          class=\"bm-connected-video-player-controls__btn\"\n          i18n-title\n          title=\"Toggle play\"\n          (click)=\"togglePlay()\"\n        >\n          <ng-template #playIcon>\n            <svg\n              aria-hidden=\"true\"\n              data-prefix=\"fas\"\n              data-icon=\"play\"\n              class=\"bm-connected-video-player__icon\"\n              role=\"img\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 448 512\"\n            >\n              <path\n                fill=\"currentColor\"\n                d=\"M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z\"\n              ></path>\n            </svg>\n          </ng-template>\n          <svg\n            *ngIf=\"isPlaying; else playIcon\"\n            aria-hidden=\"true\"\n            data-prefix=\"fas\"\n            data-icon=\"play\"\n            class=\"bm-connected-video-player__icon\"\n            role=\"img\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 448 512\"\n          >\n            <path\n              fill=\"currentColor\"\n              d=\"M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z\"\n            ></path>\n          </svg>\n        </button>\n        <span class=\"bm-connected-video-player-controls__time-indicator\">{{\n          videoElement.currentTime | bmParseDuration\n        }}</span>\n        /\n        <span class=\"bm-connected-video-player-controls__time-indicator\">{{\n          videoElement.duration | bmParseDuration\n        }}</span>\n      </div>\n      <div>\n        <button\n          *ngIf=\"displayFullScreenBtn()\"\n          type=\"button\"\n          class=\"bm-connected-video-player-controls__btn\"\n          i18n-title\n          title=\"Toggle fullscreen\"\n          (click)=\"toggleFullScreen()\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            data-prefix=\"fas\"\n            data-icon=\"expand-alt\"\n            role=\"img\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 448 512\"\n            class=\"bm-connected-video-player__icon\"\n          >\n            <path\n              fill=\"currentColor\"\n              d=\"M212.686 315.314L120 408l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C10.697 480 0 469.255 0 456V344c0-21.382 25.803-32.09 40.922-16.971L72 360l92.686-92.686c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.249 6.248 6.249 16.378 0 22.627zm22.628-118.628L328 104l-32.922-31.029C279.958 57.851 290.666 32 312.048 32h112C437.303 32 448 42.745 448 56v112c0 21.382-25.803 32.09-40.922 16.971L376 152l-92.686 92.686c-6.248 6.248-16.379 6.248-22.627 0l-25.373-25.373c-6.249-6.248-6.249-16.378 0-22.627z\"\n              class=\"\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [":host{display:inline-block;position:relative;overflow:hidden;max-width:100%;width:64em;height:36em;background-color:#000}:host(.focus-within) .bm-connected-video-player-controls--bottom,:host(.focus-within) .bm-connected-video-player-controls--top,:host(:hover) .bm-connected-video-player-controls--bottom,:host(:hover) .bm-connected-video-player-controls--top{-webkit-transform:translateY(0);transform:translateY(0)}.bm-connected-video-player{width:100%}.bm-connected-video-player__fullscreen-wrap{position:absolute;top:0;left:0;right:0;bottom:0}.bm-connected-video-player__icon{display:inline-block;font-size:inherit;height:1.5em;width:1.1em}.bm-connected-video-player-controls{color:#fff;position:absolute;left:0;right:0;padding:.5em 1em;background-color:rgba(0,0,0,.35);transition:.2s ease-in-out}.bm-connected-video-player-controls--top{top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.bm-connected-video-player-controls--bottom{padding-bottom:.5em;bottom:0;-webkit-transform:translateY(100%);transform:translateY(100%)}.bm-connected-video-player-controls__play-ctrl{display:inline-flex;align-items:center}.bm-connected-video-player-controls__second-level{margin-top:.25em;display:flex;justify-content:space-between;width:100%}.bm-connected-video-player-controls__btn{color:#fff;border:0;background:0 0}.bm-connected-video-player-controls__time-indicator{width:4em;color:#fff;margin:.5em}"]
            }] }
];
/** @nocollapse */
ConnectedVideoPlayerComponent.ctorParameters = () => [
    { type: String, decorators: [{ type: Inject, args: [CONNECTED_PLAYER_SRC,] }] },
    { type: undefined, decorators: [{ type: Inject, args: [CONNECTED_PLAYER_CLOSE_REQUEST,] }] },
    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
    { type: Number, decorators: [{ type: Inject, args: [CONNECTED_PLAYER_VOLUME,] }] },
    { type: ChangeDetectorRef }
];
ConnectedVideoPlayerComponent.propDecorators = {
    _videoElement: [{ type: ViewChild, args: ['videoElement', { read: ElementRef, static: true },] }],
    _fullscreenWrapper: [{ type: ViewChild, args: ['fullscreenWrapper', { read: ElementRef, static: true },] }],
    focusWithin: [{ type: HostBinding, args: ['class.focus-within',] }],
    onFocusin: [{ type: HostListener, args: ['focusin',] }],
    onFocusout: [{ type: HostListener, args: ['focusout',] }],
    onDocumentKeydown: [{ type: HostListener, args: ['document:keydown', ['$event'],] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @enum {number} */
const PlayerType = {
    Audio: 0,
    Video: 1,
};
PlayerType[PlayerType.Audio] = 'Audio';
PlayerType[PlayerType.Video] = 'Video';
/** @type {?} */
const defaultOptions = {
    playerType: PlayerType.Audio,
    volume: 1,
};
/** @enum {string} */
const ConnectedPlayerEventTypes = {
    OPEN: 'OPEN',
    CLOSE: 'CLOSE',
};
/**
 * Remote to display always a single player connected
 * to another component. Used in tables.
 */
class ConnectedMediaRemoteService {
    /**
     * @param {?} _injector
     * @param {?} _overlay
     */
    constructor(_injector, _overlay) {
        this._injector = _injector;
        this._overlay = _overlay;
        this._playerEventsSubject = new Subject();
    }
    /**
     * @return {?}
     */
    getEvents() {
        return new Observable((/**
         * @param {?} observer
         * @return {?}
         */
        observer => {
            /** @type {?} */
            const subs = this._playerEventsSubject.subscribe(observer);
            return (/**
             * @return {?}
             */
            () => {
                subs.unsubscribe();
            });
        }));
    }
    /**
     * @param {?} src
     * @param {?} host
     * @param {?=} options
     * @return {?}
     */
    open(src, host, options = {}) {
        this.close();
        /** @type {?} */
        const actualOptions = Object.assign({}, defaultOptions, options);
        if (host === null && actualOptions.playerType === PlayerType.Audio) {
            throw new TypeError('Audio players should be connected to a host.');
        }
        switch (actualOptions.playerType) {
            case PlayerType.Audio:
                this.setUpAudioPlayer(src, (/** @type {?} */ (host)), actualOptions);
                break;
            case PlayerType.Video:
                this.setUpVideoPlayer(src, actualOptions);
                break;
            default:
                throw new TypeError('Unknown PlayerType.');
        }
        this._playerEventsSubject.next({
            kind: ConnectedPlayerEventTypes.OPEN,
            source: host,
        });
    }
    /**
     * @return {?}
     */
    isOpen() {
        return this._overlayRef.hasAttached();
    }
    /**
     * @return {?}
     */
    close() {
        if (this._overlayRef) {
            this._overlayRef.dispose();
            this._playerEventsSubject.next({
                kind: ConnectedPlayerEventTypes.CLOSE,
                source: null,
            });
        }
    }
    /**
     * @private
     * @param {?} src
     * @param {?} host
     * @param {?} options
     * @return {?}
     */
    setUpAudioPlayer(src, host, options) {
        /** @type {?} */
        const domEle = host && ((/** @type {?} */ (host))).nativeElement
            ? ((/** @type {?} */ (host))).nativeElement
            : ((/** @type {?} */ (host)));
        if (!domEle) {
            throw new TypeError('Invalid host element');
        }
        /** @type {?} */
        const providers = new WeakMap();
        providers.set(CONNECTED_PLAYER_SRC, src);
        providers.set(CONNECTED_PLAYER_VOLUME, options.volume);
        /** @type {?} */
        const portalInjector = new PortalInjector(this._injector, providers);
        /** @type {?} */
        const componentPortal = new ComponentPortal(ConnectedAudioPlayerComponent, null, portalInjector);
        /** @type {?} */
        const positionStrategy = this._overlay
            .position()
            .flexibleConnectedTo(domEle)
            .withPositions([
            {
                originX: 'start',
                originY: 'bottom',
                overlayX: 'start',
                overlayY: 'top',
            },
            {
                originX: 'start',
                originY: 'top',
                overlayX: 'start',
                overlayY: 'bottom',
            },
            {
                originX: 'end',
                originY: 'bottom',
                overlayX: 'end',
                overlayY: 'top',
            },
            {
                originX: 'end',
                originY: 'top',
                overlayX: 'end',
                overlayY: 'bottom',
            },
        ]);
        /** @type {?} */
        const scrollStrategy = this._overlay.scrollStrategies.reposition();
        this._overlayRef = this._overlay.create({
            positionStrategy,
            scrollStrategy,
        });
        return this._overlayRef.attach(componentPortal);
    }
    /**
     * @private
     * @param {?} src
     * @param {?} options
     * @return {?}
     */
    setUpVideoPlayer(src, options) {
        /** @type {?} */
        const providers = new WeakMap();
        providers.set(CONNECTED_PLAYER_SRC, src);
        providers.set(CONNECTED_PLAYER_CLOSE_REQUEST, this.close.bind(this));
        providers.set(CONNECTED_PLAYER_VOLUME, options.volume);
        /** @type {?} */
        const portalInjector = new PortalInjector(this._injector, providers);
        /** @type {?} */
        const componentPortal = new ComponentPortal(ConnectedVideoPlayerComponent, null, portalInjector);
        /** @type {?} */
        const positionStrategy = this._overlay
            .position()
            .global()
            .centerHorizontally()
            .centerVertically();
        /** @type {?} */
        const scrollStrategy = this._overlay.scrollStrategies.block();
        this._overlayRef = this._overlay.create({
            positionStrategy,
            scrollStrategy,
            hasBackdrop: true,
        });
        this._overlayRef.backdropClick().subscribe((/**
         * @return {?}
         */
        () => this.close()));
        return this._overlayRef.attach(componentPortal);
    }
}
ConnectedMediaRemoteService.decorators = [
    { type: Injectable, args: [{
                providedIn: 'root',
            },] }
];
/** @nocollapse */
ConnectedMediaRemoteService.ctorParameters = () => [
    { type: Injector },
    { type: Overlay }
];
/** @nocollapse */ ConnectedMediaRemoteService.ngInjectableDef = ɵɵdefineInjectable({ factory: function ConnectedMediaRemoteService_Factory() { return new ConnectedMediaRemoteService(ɵɵinject(INJECTOR), ɵɵinject(Overlay)); }, token: ConnectedMediaRemoteService, providedIn: "root" });

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Connected audio player. Created by a ComponentPortal
 */
class ConnectedAudioPlayerComponent {
    /**
     * @param {?} src
     * @param {?} volume
     * @param {?} _cdr
     * @param {?} _elementRef
     * @param {?} _remote
     */
    constructor(src, volume, _cdr, _elementRef, _remote) {
        this._cdr = _cdr;
        this._elementRef = _elementRef;
        this._remote = _remote;
        this.src = src;
        this.volume = volume;
    }
    /**
     * @return {?}
     */
    get duration() {
        if (this._audioElement && this._audioElement.nativeElement) {
            return this._audioElement.nativeElement.duration;
        }
        return 0;
    }
    /**
     * @return {?}
     */
    get currentTime() {
        if (this._audioElement && this._audioElement.nativeElement) {
            return this._audioElement.nativeElement.currentTime;
        }
        return 0;
    }
    /**
     * @param {?} e
     * @return {?}
     */
    onDocumentClick(e) {
        if (this._remote.isOpen() && !this._audioElement.nativeElement.paused) {
            /** @type {?} */
            let parent = (/** @type {?} */ (e.target));
            while (parent &&
                parent.tagName !== 'BODY' &&
                parent !== this._elementRef.nativeElement) {
                parent = (/** @type {?} */ (parent.parentElement));
            }
            if (parent !== this._elementRef.nativeElement) {
                this._remote.close();
            }
        }
    }
    /**
     * @param {?} e
     * @return {?}
     */
    onDocumentKeydown(e) {
        if (this._remote.isOpen() &&
            !this._audioElement.nativeElement.paused &&
            e.key === 'Escape') {
            this._remote.close();
        }
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    onSliderSeek($event) {
        if (this._audioElement) {
            this._audioElement.nativeElement.currentTime = $event;
        }
    }
    /**
     * @return {?}
     */
    onTimeupdate() {
        this._cdr.markForCheck();
    }
    /**
     * @return {?}
     */
    onMediaEnded() {
        this._remote.close();
    }
    /**
     * @param {?} e
     * @return {?}
     */
    close(e) {
        e.preventDefault();
        this._remote.close();
    }
}
ConnectedAudioPlayerComponent.decorators = [
    { type: Component, args: [{
                selector: 'bm-connected-audio-player',
                template: "<audio\n  (ended)=\"onMediaEnded()\"\n  (timeupdate)=\"onTimeupdate()\"\n  [src]=\"src\"\n  [volume]=\"volume\"\n  #audioElement\n  autoplay\n></audio>\n<span class=\"bm-connected-media-player__time-indicator\">{{\n  audioElement.currentTime | bmParseDuration\n}}</span>\n<bm-media-progress-slider\n  (seek)=\"onSliderSeek($event)\"\n  [duration]=\"duration\"\n  [value]=\"currentTime\"\n  class=\"bm-connected-media-player__slider\"\n></bm-media-progress-slider>\n<span class=\"bm-connected-media-player__time-indicator\">{{\n  audioElement.duration | bmParseDuration\n}}</span>\n<button\n  (click)=\"close($event)\"\n  class=\"bm-connected-media-player__close_btn\"\n  i18n-title\n  title=\"Close\"\n  type=\"button\"\n>\n  <svg\n    aria-hidden=\"true\"\n    focusable=\"false\"\n    data-prefix=\"fas\"\n    data-icon=\"times-circle\"\n    class=\"svg-inline--fa fa-times-circle fa-w-16\"\n    class=\"bm-connected-media-player__close_icon\"\n    role=\"img\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 512 512\"\n  >\n    <path\n      fill=\"currentColor\"\n      d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z\"\n    ></path>\n  </svg>\n</button>\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [":host{align-items:center;background-color:#4a4a4a;box-shadow:0 2px 4px 0 rgba(0,0,0,.5);display:inline-flex;flex-wrap:nowrap;justify-content:center;padding:.25em 0}.bm-connected-media-player__time-indicator{color:#fff;margin:.5em 1em;width:4em}.bm-connected-media-player__close_btn{background:0 0;border:0;color:#fff;margin:.5em 1em .5em 0}.bm-connected-media-player__close_icon{width:1em}"]
            }] }
];
/** @nocollapse */
ConnectedAudioPlayerComponent.ctorParameters = () => [
    { type: String, decorators: [{ type: Inject, args: [CONNECTED_PLAYER_SRC,] }] },
    { type: Number, decorators: [{ type: Inject, args: [CONNECTED_PLAYER_VOLUME,] }] },
    { type: ChangeDetectorRef },
    { type: ElementRef },
    { type: ConnectedMediaRemoteService }
];
ConnectedAudioPlayerComponent.propDecorators = {
    _audioElement: [{ type: ViewChild, args: ['audioElement', { read: ElementRef, static: true },] }],
    onDocumentClick: [{ type: HostListener, args: ['document:click', ['$event'],] }],
    onDocumentKeydown: [{ type: HostListener, args: ['document:keydown', ['$event'],] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Module with the duration pipe
 */
class ParseDurationPipeModule {
}
ParseDurationPipeModule.decorators = [
    { type: NgModule, args: [{
                declarations: [ParseDurationPipe],
                exports: [ParseDurationPipe],
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Observable Drag. Return relative position without the first
 * container, or body, with position non static.
 * @param {?} mousedownEvent
 * @param {?=} doc
 * @param {?=} container
 * @return {?}
 */
function dragObservable(mousedownEvent, doc = document, container = null) {
    if (!container) {
        container = (/** @type {?} */ (mousedownEvent.target));
        while (container.tagName !== 'BODY' &&
            getComputedStyle(container).getPropertyValue('position') !== 'static') {
            container = (/** @type {?} */ (container.parentElement));
        }
    }
    const { left, width } = container.getBoundingClientRect();
    /** @type {?} */
    const offsetX = mousedownEvent.offsetX;
    /** @type {?} */
    const mouseup = fromEvent(doc, 'mouseup');
    /** @type {?} */
    const mousemove = fromEvent(doc, 'mousemove');
    return mousemove.pipe(map((/**
     * @param {?} mousemoveEvent
     * @return {?}
     */
    mousemoveEvent => {
        mousemoveEvent.preventDefault();
        return Math.min(1, Math.max(0, (mousemoveEvent.clientX - offsetX - left) / width));
    })), takeUntil(mouseup));
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Observable Drag. Return relative position without the first
 * container, or body, with position non static.
 * @param {?} mouseenterEvent
 * @param {?=} doc
 * @param {?=} container
 * @return {?}
 */
function mouseoverRelativeCoordinatesObservable(mouseenterEvent, doc = document, container = null) {
    mouseenterEvent.preventDefault();
    if (!container) {
        container = (/** @type {?} */ (mouseenterEvent.target));
        while (container.tagName !== 'BODY' &&
            getComputedStyle(container).getPropertyValue('position') !== 'static') {
            container = (/** @type {?} */ (container.parentElement));
        }
    }
    const { left, width } = container.getBoundingClientRect();
    /** @type {?} */
    const mouseleave = fromEvent(container, 'mouseleave');
    /** @type {?} */
    const mousemove = fromEvent(doc, 'mousemove');
    return mousemove.pipe(map((/**
     * @param {?} mousemoveEvent
     * @return {?}
     */
    mousemoveEvent => {
        mousemoveEvent.preventDefault();
        return Math.min(1, Math.max(0, (mousemoveEvent.clientX - left) / width));
    })), takeUntil(mouseleave), startWith(Math.min(1, Math.max(0, (mouseenterEvent.clientX - left) / width))));
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Media progress slider
 */
class MediaProgressSliderComponent {
    /**
     * @param {?} _elementRef
     * @param {?} _document
     * @param {?} _cdr
     * @param {?} _dir
     */
    constructor(_elementRef, _document, _cdr, _dir) {
        this._elementRef = _elementRef;
        this._document = _document;
        this._cdr = _cdr;
        this._dir = _dir;
        this.valuemin = 0;
        this.tabindex = 0;
        this.role = 'slider';
        this.seek = new EventEmitter();
        this._isDragging = false;
        this._isOver = false;
    }
    /**
     * @param {?} v
     * @return {?}
     */
    set value(v) {
        this._value = v;
    }
    /**
     * @return {?}
     */
    get value() {
        return this._value;
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    onMouseenter($event) {
        this._isOver = true;
        mouseoverRelativeCoordinatesObservable($event, this._document, this._elementRef.nativeElement).subscribe({
            next: (/**
             * @param {?} val
             * @return {?}
             */
            val => {
                this.pointerTime = val * (this.duration || 0);
                /** @type {?} */
                const overTime = Math.max(0, this.getRelativeLeft(this.pointerTime) -
                    this.getRelativeLeft(this.value));
                if (overTime > 0 &&
                    this._previewBar &&
                    this._previewBar.nativeElement) {
                    /** @type {?} */
                    const relativeLeft = this.getRelativeLeft(this.value);
                    this._previewBar.nativeElement.style.left = `${relativeLeft}px`;
                    this._previewBar.nativeElement.style.width = `${overTime}px`;
                }
                this._cdr.markForCheck();
            }),
            error: (/**
             * @return {?}
             */
            () => {
                this._isOver = false;
            }),
            complete: (/**
             * @return {?}
             */
            () => {
                this._isOver = false;
                this._cdr.markForCheck();
            }),
        });
    }
    /**
     * @param {?} e
     * @return {?}
     */
    onClick(e) {
        if (!this._isDragging) {
            e.preventDefault();
            const { offsetX } = e;
            const { width } = this._elementRef.nativeElement.getBoundingClientRect();
            /** @type {?} */
            const percent = offsetX / width;
            this.seek.emit(percent * (this.duration || 0));
        }
    }
    // tslint:disable-next-line:cyclomatic-complexity
    /**
     * @param {?} e
     * @return {?}
     */
    onKeydown(e) {
        /** @type {?} */
        let emitChanges = false;
        if (this.duration) {
            /** @type {?} */
            const bigStep = 0.1 * this.duration;
            switch (e.keyCode) {
                case DOWN_ARROW: {
                    e.preventDefault();
                    this._value = Math.max(0, this._value - 1);
                    emitChanges = true;
                    break;
                }
                case UP_ARROW: {
                    e.preventDefault();
                    this._value = Math.min(this.duration, this._value + 1);
                    emitChanges = true;
                    break;
                }
                case LEFT_ARROW: {
                    e.preventDefault();
                    this._value = Math.min(Math.max(0, this._value + (this._dir.value === 'ltr' ? -1 : 1)), this.duration);
                    emitChanges = true;
                    break;
                }
                case RIGHT_ARROW: {
                    e.preventDefault();
                    this._value = Math.min(Math.max(0, this._value + (this._dir.value === 'ltr' ? 1 : -1)), this.duration);
                    emitChanges = true;
                    break;
                }
                case PAGE_UP:
                    e.preventDefault();
                    this._value = Math.max(0, this._value + bigStep);
                    emitChanges = true;
                    break;
                case PAGE_DOWN:
                    e.preventDefault();
                    this._value = Math.max(0, this._value - bigStep);
                    emitChanges = true;
                    break;
                default:
            }
        }
        if (emitChanges) {
            this.seek.emit(this.value);
        }
    }
    /**
     * @param {?} value
     * @return {?}
     */
    getRelativeLeft(value) {
        if (this._elementRef.nativeElement && value && this.duration) {
            const { width } = this._elementRef.nativeElement.getBoundingClientRect();
            /** @type {?} */
            const relative = value / (this.duration - this.valuemin);
            return relative * width;
        }
        return 0;
    }
    /**
     * @return {?}
     */
    showThumb() {
        return this._isDragging || this._isOver;
    }
    /**
     * @return {?}
     */
    showPreviewBar() {
        return this._isOver && !this._isDragging;
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    onThumbMousedown($event) {
        this._cdr.detach();
        this._isDragging = true;
        /** @type {?} */
        const dragObservable$ = dragObservable($event, this._document, this._elementRef.nativeElement);
        // The two observables with different throttles target components
        // that should update at different rates. The bounced targets the
        // the time tooltip, while the non bounced targets the dragged thumb
        // and bars.
        dragObservable$
            .pipe(debounceTime(15))
            .subscribe((/**
         * @return {?}
         */
        () => this._cdr.detectChanges()));
        dragObservable$.subscribe({
            next: (/**
             * @param {?} val
             * @return {?}
             */
            val => {
                this._value = val * (this.duration || 0);
                /** @type {?} */
                const relativeLeft = this.getRelativeLeft(this.value);
                ((/** @type {?} */ ($event.target))).style.left = `${relativeLeft}px`;
                if (this._doneBar && this._doneBar.nativeElement) {
                    this._doneBar.nativeElement.style.width = `${relativeLeft}px`;
                }
                this.seek.emit(this.value);
            }),
            error: (/**
             * @return {?}
             */
            () => {
                this._cdr.reattach();
            }),
            complete: (/**
             * @return {?}
             */
            () => {
                this._cdr.reattach();
                setTimeout((/**
                 * @return {?}
                 */
                () => {
                    this._isDragging = false;
                }), 10);
            }),
        });
    }
}
MediaProgressSliderComponent.decorators = [
    { type: Component, args: [{
                selector: 'bm-media-progress-slider',
                template: "<span\n  *ngIf=\"showPreviewBar()\"\n  #previewBar\n  class=\"bm-media-progress-slider__bar bm-media-progress-slider__bar--preview\"\n></span>\n<span\n  #doneBar\n  class=\"bm-media-progress-slider__bar bm-media-progress-slider__bar--done\"\n  [ngStyle]=\"{ 'width.px': getRelativeLeft(value) }\"\n></span>\n<span\n  *ngIf=\"showThumb()\"\n  #thumb\n  class=\"bm-media-progress-slider-thumb\"\n  [ngStyle]=\"{ 'left.px': getRelativeLeft(value), 'margin-left.em': -0.5 }\"\n  (mousedown)=\"onThumbMousedown($event)\"\n></span>\n<span\n  *bmMediaProgressTooltip=\"_elementRef\"\n  class=\"bm-media-progress-slider-tooltip\"\n  >{{ pointerTime | bmParseDuration }}</span\n>\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [":host{height:.5em;border-radius:.4em;display:inline-block;background-color:var(--secondary-color,#bcbcbc);max-width:100%;min-width:200px;position:relative}:host:focus{outline:solid var(--anchor-color,#4399fd) 2px}.bm-media-progress-slider__bar{height:.5em;border-radius:.4em;display:inline-block;position:absolute}.bm-media-progress-slider__bar--done{background-color:var(--header-background-color,#3e71ad)}.bm-media-progress-slider__bar--preview{background-color:var(--secondary-color-hover,#959494)}.bm-media-progress-slider-thumb{position:absolute;background-color:var(--header-background-color,#3e71ad);border-radius:50%;display:inline-block;height:1em;width:1em;top:-.25em}.bm-media-progress-slider-tooltip{display:inline-block;background-color:rgba(0,0,0,.7);border:1px solid #000;border-radius:3px;padding:.25em .5em;color:#fff;font-size:smaller}"]
            }] }
];
/** @nocollapse */
MediaProgressSliderComponent.ctorParameters = () => [
    { type: ElementRef },
    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
    { type: ChangeDetectorRef },
    { type: Directionality }
];
MediaProgressSliderComponent.propDecorators = {
    duration: [{ type: HostBinding, args: ['attr.aria-valuemax',] }, { type: Input }],
    value: [{ type: HostBinding, args: ['attr.aria-valuenow',] }, { type: Input }],
    valuemin: [{ type: HostBinding, args: ['attr.aria-valuemin',] }, { type: Input }],
    tabindex: [{ type: HostBinding, args: ['attr.tabindex',] }, { type: Input }],
    role: [{ type: HostBinding, args: ['attr.role',] }],
    seek: [{ type: Output }],
    _doneBar: [{ type: ViewChild, args: ['doneBar', { read: ElementRef, static: true },] }],
    _previewBar: [{ type: ViewChild, args: ['previewBar', { read: ElementRef, static: false },] }],
    onMouseenter: [{ type: HostListener, args: ['mouseenter', ['$event'],] }],
    onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
    onKeydown: [{ type: HostListener, args: ['keydown', ['$event'],] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Directive to attach
 */
class MediaProgressTooltipDirective {
    /**
     * @param {?} _templateRef
     * @param {?} _viewContainerRef
     * @param {?} _overlay
     * @param {?} _document
     * @param {?} _render
     */
    constructor(_templateRef, _viewContainerRef, _overlay, _document, _render) {
        this._templateRef = _templateRef;
        this._viewContainerRef = _viewContainerRef;
        this._overlay = _overlay;
        this._document = _document;
        this._render = _render;
        this._templatePortal = new TemplatePortal(this._templateRef, this._viewContainerRef);
    }
    /**
     * @param {?} v
     * @return {?}
     */
    set bmMediaProgressTooltip(v) {
        if (this._teardownListener) {
            this._teardownListener();
        }
        if (v) {
            this._bmMediaProgressTooltip = v;
            this._hostDOMEle = ((/** @type {?} */ (v))).nativeElement
                ? ((/** @type {?} */ (v))).nativeElement
                : ((/** @type {?} */ (v)));
            this._teardownListener = this._render.listen(this._hostDOMEle, 'mouseenter', this.onMouseenter.bind(this));
        }
        else {
            this._hostDOMEle = null;
        }
    }
    /**
     * @return {?}
     */
    get bmMediaProgressTooltip() {
        return this._bmMediaProgressTooltip;
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this.tearDownPortals();
        if (this._teardownListener) {
            this._teardownListener();
        }
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    onMouseenter($event) {
        if (!this._hostDOMEle || this._templatePortal.isAttached) {
            return;
        }
        this.tearDownPortals();
        const { width } = this._hostDOMEle.getBoundingClientRect();
        this._positionStategy = this._overlay
            .position()
            .flexibleConnectedTo(this._hostDOMEle)
            .withPositions([
            {
                originX: 'start',
                originY: 'top',
                overlayX: 'start',
                overlayY: 'bottom',
            },
        ])
            .withDefaultOffsetY(-5);
        this._overlayRef = this._overlay.create({
            positionStrategy: this._positionStategy,
        });
        const { rootNodes } = this._overlayRef.attach(this._templatePortal);
        /** @type {?} */
        const getOffset = (/**
         * @return {?}
         */
        () => {
            if (rootNodes && rootNodes.length) {
                return ((/** @type {?} */ (rootNodes[0]))).getBoundingClientRect().width / 2;
            }
            return 0;
        });
        mouseoverRelativeCoordinatesObservable($event, this._document).subscribe({
            next: (/**
             * @param {?} val
             * @return {?}
             */
            val => {
                if (this._positionStategy) {
                    this._positionStategy
                        .withDefaultOffsetX(val * width - getOffset())
                        .reapplyLastPosition();
                }
            }),
            complete: (/**
             * @return {?}
             */
            () => {
                this.tearDownPortals();
            }),
        });
    }
    /**
     * @private
     * @return {?}
     */
    tearDownPortals() {
        if (this._templatePortal && this._templatePortal.isAttached) {
            this._templatePortal.detach();
        }
        if (this._overlayRef) {
            this._overlayRef.detach();
            this._overlayRef.dispose();
        }
        if (this._positionStategy) {
            this._positionStategy.dispose();
        }
    }
}
MediaProgressTooltipDirective.decorators = [
    { type: Directive, args: [{
                selector: '[bmMediaProgressTooltip]',
            },] }
];
/** @nocollapse */
MediaProgressTooltipDirective.ctorParameters = () => [
    { type: TemplateRef },
    { type: ViewContainerRef },
    { type: Overlay },
    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
    { type: Renderer2 }
];
MediaProgressTooltipDirective.propDecorators = {
    bmMediaProgressTooltip: [{ type: Input }],
    value: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Module with the duration pipe
 */
class MediaProgressSliderComponentModule {
}
MediaProgressSliderComponentModule.decorators = [
    { type: NgModule, args: [{
                imports: [BidiModule, CommonModule, ParseDurationPipeModule],
                declarations: [MediaProgressSliderComponent, MediaProgressTooltipDirective],
                exports: [MediaProgressSliderComponent, MediaProgressTooltipDirective],
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Module with the duration pipe
 */
class ProgressBarComponentModule {
}
ProgressBarComponentModule.decorators = [
    { type: NgModule, args: [{
                imports: [CommonModule],
                declarations: [ProgressBarComponent],
                exports: [ProgressBarComponent],
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class BMATMediaPlayersModule {
    // tslint:disable-next-line:function-name
    /**
     * @return {?}
     */
    static forRoot() {
        return {
            ngModule: BMATMediaPlayersModule,
            providers: [ConnectedMediaRemoteService],
        };
    }
}
BMATMediaPlayersModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    OverlayModule,
                    ParseDurationPipeModule,
                    ProgressBarComponentModule,
                    MediaProgressSliderComponentModule,
                ],
                declarations: [
                    BMATAudioPlayerComponent,
                    BMMediaOutputComponent,
                    ConnectedAudioPlayerComponent,
                    ConnectedVideoPlayerComponent,
                ],
                exports: [
                    BMATAudioPlayerComponent,
                    BMMediaOutputComponent,
                    ConnectedAudioPlayerComponent,
                    ConnectedVideoPlayerComponent,
                    ParseDurationPipeModule,
                    ProgressBarComponentModule,
                    MediaProgressSliderComponentModule,
                ],
                entryComponents: [
                    ConnectedAudioPlayerComponent,
                    ConnectedVideoPlayerComponent,
                ],
            },] }
];

export { BMATAudioPlayerComponent, BMATMediaPlayersModule, BMMediaOutputComponent, ConnectedMediaRemoteService, ConnectedPlayerEventTypes, ParseDurationPipe, ParseDurationPipeModule, PlayerType, ProgressBarComponent, ProgressBarComponentModule, MediaProgressSliderComponentModule as ɵa, MediaProgressSliderComponent as ɵb, MediaProgressTooltipDirective as ɵc, ConnectedAudioPlayerComponent as ɵd, CONNECTED_PLAYER_SRC as ɵe, CONNECTED_PLAYER_VOLUME as ɵf, ConnectedVideoPlayerComponent as ɵg, CONNECTED_PLAYER_CLOSE_REQUEST as ɵh };
//# sourceMappingURL=bmat-angular-media-players.js.map