import { FrozenGifDirective } from '@agorapulse/ui-components/directives';
import * as i2 from '@agorapulse/ui-symbol';
import { apClose, apArrowLeft, apArrowRight, SymbolComponent } from '@agorapulse/ui-symbol';
import * as i0 from '@angular/core';
import { HostListener, ViewChild, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@angular/material/dialog';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

var KEY_CODE;
(function (KEY_CODE) {
    KEY_CODE[KEY_CODE["RIGHT_ARROW"] = 39] = "RIGHT_ARROW";
    KEY_CODE[KEY_CODE["LEFT_ARROW"] = 37] = "LEFT_ARROW";
})(KEY_CODE || (KEY_CODE = {}));
class MediaDisplayOverlayDialogComponent {
    dialogRef;
    data;
    symbolRegistry;
    videoPlayer;
    static config = {
        position: {
            top: '10px',
            right: '10px',
            left: '10px',
        },
        height: '100%',
        width: '100%',
        maxWidth: 'none',
        panelClass: 'full-screen-modal',
        backdropClass: 'dark-backdrop',
    };
    currentUrlIndex = 1;
    mediaInfo = []; // all urls and types
    mediaType = undefined;
    supportGif = true;
    thumbnailCover = undefined;
    isPlayingVideo = false;
    urls = []; // all urls
    url = undefined; // current displayed url
    constructor(dialogRef, data, symbolRegistry) {
        this.dialogRef = dialogRef;
        this.data = data;
        this.symbolRegistry = symbolRegistry;
        this.symbolRegistry.registerSymbols([apClose, apArrowLeft, apArrowRight]);
    }
    ngOnInit() {
        // const data = ModalService.getModal('media-display-overlay') || {};
        if (this.data) {
            if (this.data.mediaInfo && this.data.mediaInfo.length > 0) {
                this.mediaInfo = this.data.mediaInfo;
            }
            if (this.data.clickedMedia?.url && this.data.clickedMedia.url.length > 0) {
                const currentMedia = this.data.clickedMedia;
                if (this.mediaInfo.length === 0) {
                    this.mediaInfo = [currentMedia];
                }
                this.url = this.data.clickedMedia.url;
                this.mediaType = this.data.clickedMedia.type;
                this.thumbnailCover = this.data.clickedMedia.thumbnail;
                this.isPlayingVideo = false;
                this.currentUrlIndex = this.mediaInfo.findIndex(media => media.url === currentMedia.url) + 1;
            }
        }
    }
    onClose() {
        this.dialogRef.close();
    }
    onNext($event) {
        if (this.currentUrlIndex < this.mediaInfo.length) {
            this.currentUrlIndex += 1;
            this.url = this.mediaInfo[this.currentUrlIndex - 1].url;
            this.mediaType = this.mediaInfo[this.currentUrlIndex - 1].type;
            this.thumbnailCover = this.mediaInfo[this.currentUrlIndex - 1].thumbnail;
            this.isPlayingVideo = false;
        }
        $event.stopPropagation();
    }
    onPrevious($event) {
        if (this.currentUrlIndex > 1) {
            this.currentUrlIndex -= 1;
            this.url = this.mediaInfo[this.currentUrlIndex - 1].url;
            this.mediaType = this.mediaInfo[this.currentUrlIndex - 1].type;
            this.thumbnailCover = this.mediaInfo[this.currentUrlIndex - 1].thumbnail;
            this.isPlayingVideo = false;
        }
        $event.stopPropagation();
    }
    play($event) {
        if (this.videoPlayer) {
            if (this.isPlayingVideo) {
                this.videoPlayer.nativeElement.pause();
            }
            else {
                this.videoPlayer.nativeElement.play();
            }
            this.isPlayingVideo = !this.isPlayingVideo;
            $event.stopPropagation();
        }
    }
    keyEvent(event) {
        if (event.keyCode === KEY_CODE.RIGHT_ARROW) {
            this.onNext(event);
        }
        if (event.keyCode === KEY_CODE.LEFT_ARROW) {
            this.onPrevious(event);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MediaDisplayOverlayDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MediaDisplayOverlayDialogComponent, isStandalone: true, selector: "ap-media-display-overlay", host: { listeners: { "window:keyup": "keyEvent($event)" } }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<div\n    class=\"full\"\n    (click)=\"onClose()\">\n    <div class=\"media-display ap-new\">\n        <header class=\"ap-modal-header\">\n            <ap-symbol\n                symbolId=\"close\"\n                color=\"white\"\n                size=\"sm\"\n                (click)=\"onClose()\" />\n        </header>\n        <slot class=\"ap-modal-content\">\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container left\"\n                    [class.disabled]=\"currentUrlIndex <= 1\"\n                    (click)=\"onPrevious($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"arrow-left\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n            <div class=\"media-container\">\n                @if (url && mediaType === 'PHOTO') {\n                    <img\n                        apFrozenGif\n                        [apFrozen]=\"!supportGif\"\n                        [src]=\"url\"\n                        (click)=\"$event.stopPropagation()\" />\n                }\n                @if (url && mediaType === 'VIDEO') {\n                    <div class=\"media-container-video\">\n                        <video\n                            #videoPlayer\n                            controls\n                            disablepictureinpicture\n                            muted\n                            controlsList=\"nofullscreen\"\n                            [id]=\"'video-' + currentUrlIndex\"\n                            [poster]=\"thumbnailCover\"\n                            [src]=\"url\"\n                            (click)=\"play($event)\"\n                            (playing)=\"isPlayingVideo = true\"\n                            (pause)=\"isPlayingVideo = false\"\n                            (ended)=\"isPlayingVideo = false\"></video>\n                        <svg\n                            class=\"play-button\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            (click)=\"play($event)\">\n                            @if (!isPlayingVideo) {\n                                <path d=\"M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28\" />\n                            }\n                        </svg>\n                    </div>\n                }\n            </div>\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container right\"\n                    [class.disabled]=\"currentUrlIndex >= mediaInfo.length\"\n                    (click)=\"onNext($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"arrow-right\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex >= mediaInfo.length ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n        </slot>\n        @if (mediaInfo && mediaInfo.length > 1) {\n            <footer class=\"ap-modal-footer\">\n                <div class=\"index-container\">{{ currentUrlIndex }} / {{ mediaInfo.length }}</div>\n            </footer>\n        }\n    </div>\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{width:100%;height:100%}.full{height:100%;width:100%}::ng-deep .full-screen-modal .mat-mdc-dialog-container .mdc-dialog__surface{background:none;padding:var(--ref-spacing-md)}.media-display{background:transparent;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer}.media-display .media-container{margin:auto;align-items:center;flex-direction:column;display:flex;cursor:default}.media-display .media-container img,.media-display .media-container video{max-width:80%}.media-display .media-container .media-container-video{display:inherit;justify-content:center;position:relative}.media-display .media-container .media-container-video .play-button{z-index:1000;position:absolute;inset:0;width:var(--ref-font-line-height-xl);height:var(--ref-font-line-height-xl);transform:scale(2);margin:auto;filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}.media-display .media-container .media-container-video .play-button path{fill:#fffc}.media-display .ap-modal-content{display:block;padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:transparent;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:transparent;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: FrozenGifDirective, selector: "img[apFrozenGif]", inputs: ["src", "apFrozen", "apGifEvents"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MediaDisplayOverlayDialogComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-media-display-overlay', imports: [SymbolComponent, FrozenGifDirective], template: "<div\n    class=\"full\"\n    (click)=\"onClose()\">\n    <div class=\"media-display ap-new\">\n        <header class=\"ap-modal-header\">\n            <ap-symbol\n                symbolId=\"close\"\n                color=\"white\"\n                size=\"sm\"\n                (click)=\"onClose()\" />\n        </header>\n        <slot class=\"ap-modal-content\">\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container left\"\n                    [class.disabled]=\"currentUrlIndex <= 1\"\n                    (click)=\"onPrevious($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"arrow-left\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n            <div class=\"media-container\">\n                @if (url && mediaType === 'PHOTO') {\n                    <img\n                        apFrozenGif\n                        [apFrozen]=\"!supportGif\"\n                        [src]=\"url\"\n                        (click)=\"$event.stopPropagation()\" />\n                }\n                @if (url && mediaType === 'VIDEO') {\n                    <div class=\"media-container-video\">\n                        <video\n                            #videoPlayer\n                            controls\n                            disablepictureinpicture\n                            muted\n                            controlsList=\"nofullscreen\"\n                            [id]=\"'video-' + currentUrlIndex\"\n                            [poster]=\"thumbnailCover\"\n                            [src]=\"url\"\n                            (click)=\"play($event)\"\n                            (playing)=\"isPlayingVideo = true\"\n                            (pause)=\"isPlayingVideo = false\"\n                            (ended)=\"isPlayingVideo = false\"></video>\n                        <svg\n                            class=\"play-button\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            (click)=\"play($event)\">\n                            @if (!isPlayingVideo) {\n                                <path d=\"M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28\" />\n                            }\n                        </svg>\n                    </div>\n                }\n            </div>\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container right\"\n                    [class.disabled]=\"currentUrlIndex >= mediaInfo.length\"\n                    (click)=\"onNext($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"arrow-right\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex >= mediaInfo.length ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n        </slot>\n        @if (mediaInfo && mediaInfo.length > 1) {\n            <footer class=\"ap-modal-footer\">\n                <div class=\"index-container\">{{ currentUrlIndex }} / {{ mediaInfo.length }}</div>\n            </footer>\n        }\n    </div>\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{width:100%;height:100%}.full{height:100%;width:100%}::ng-deep .full-screen-modal .mat-mdc-dialog-container .mdc-dialog__surface{background:none;padding:var(--ref-spacing-md)}.media-display{background:transparent;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer}.media-display .media-container{margin:auto;align-items:center;flex-direction:column;display:flex;cursor:default}.media-display .media-container img,.media-display .media-container video{max-width:80%}.media-display .media-container .media-container-video{display:inherit;justify-content:center;position:relative}.media-display .media-container .media-container-video .play-button{z-index:1000;position:absolute;inset:0;width:var(--ref-font-line-height-xl);height:var(--ref-font-line-height-xl);transform:scale(2);margin:auto;filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}.media-display .media-container .media-container-video .play-button path{fill:#fffc}.media-display .ap-modal-content{display:block;padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:transparent;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:transparent;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}\n"] }]
        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }, { type: i2.SymbolRegistry }], propDecorators: { videoPlayer: [{
                type: ViewChild,
                args: ['videoPlayer']
            }], keyEvent: [{
                type: HostListener,
                args: ['window:keyup', ['$event']]
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { KEY_CODE, MediaDisplayOverlayDialogComponent };
//# sourceMappingURL=agorapulse-ui-components-media-display-overlay.mjs.map
