metag-sdk-ionic 1.2.7-dev-0.60 → 1.2.7-dev-0.61

package/dist/src/app/pages/id-vision/components/camara-video-selfie/camara-video-selfie.component.js

@@ -1,406 +1,406 @@
-import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { Camera } from '@capacitor/camera';
-import { ScreenBrightness } from '@capacitor-community/screen-brightness';
-import { Capacitor } from '@capacitor/core';
-import { App } from '@capacitor/app';
-import * as i0 from "@angular/core";
-import * as i1 from "@ionic/angular";
-import * as i2 from "@angular/platform-browser";
-import * as i3 from "../../services/modal-services/modal-video-selfie-services";
-import * as i4 from "../../services/modal-services/modal-dpi-services";
-import * as i5 from "@angular/common";
-const _c0 = ["videoElement"];
-const _c1 = ["progressRing"];
-const _c2 = a0 => ({ "red": a0 });
-function CamaraVideoSelfieComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19)(1, "div", 20);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.countdown);
-} }
-function CamaraVideoSelfieComponent_ion_button_19_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ion-button", 21);
-    i0.ɵɵlistener("click", function CamaraVideoSelfieComponent_ion_button_19_Template_ion_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.recordVideo()); });
-    i0.ɵɵtext(1, "Iniciar Grabaci\u00F3n");
-    i0.ɵɵelementEnd();
-} }
-function CamaraVideoSelfieComponent_ion_button_20_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ion-button", 22);
-    i0.ɵɵlistener("click", function CamaraVideoSelfieComponent_ion_button_20_Template_ion_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.stopRecording()); });
-    i0.ɵɵtext(1, "Detener Grabaci\u00F3n");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("disabled", !ctx_r1.canStopRecording);
-} }
-export class CamaraVideoSelfieComponent {
-    constructor(platform, modalController, sanitizer, renderer, alertController, changeDetector, modalVideoSelfieServices, modalDpiServices) {
-        this.platform = platform;
-        this.modalController = modalController;
-        this.sanitizer = sanitizer;
-        this.renderer = renderer;
-        this.alertController = alertController;
-        this.changeDetector = changeDetector;
-        this.modalVideoSelfieServices = modalVideoSelfieServices;
-        this.modalDpiServices = modalDpiServices;
-        this.text1 = '';
-        this.text2 = '';
-        this.closeRequested = new EventEmitter();
-        this.stream = null;
-        this.isRecording = false;
-        this.mediaRecorder = null;
-        this.recordedChunks = [];
-        this.countdown = 0;
-        this.minRecordingTime = 3000;
-        this.maxRecordingTime = 5000;
-        this.timeRemaining = this.maxRecordingTime / 1000;
-        this.canStopRecording = true;
-        this.isLoading = true;
-        this.defaultBrightness = null;
-        this.isAndroid = this.platform.is('android');
-        this.isIOS = this.platform.is('ios');
-    }
-    async ngAfterViewInit() {
-        if (this.isAndroid || this.isIOS) {
-            try {
-                const { brightness } = await ScreenBrightness.getBrightness();
-                this.defaultBrightness = brightness;
-                await ScreenBrightness.setBrightness({ brightness: 1.0 });
-            }
-            catch (error) {
-                console.warn('Brillo error:', error);
-            }
-            await this.requestPermissions();
-            // 🔹 Listener para detectar cuando la app va a segundo plano
-            this.appStateListener = await App.addListener('appStateChange', async (state) => {
-                console.log('🔄 [VideoSelfie] App state changed:', state.isActive);
-                if (!state.isActive) {
-                    console.log('⏸️ [VideoSelfie] App fue a background, cancelando grabación...');
-                    await this.handleAppBackground();
-                }
-                else {
-                    console.log('✅ [VideoSelfie] App volvió al foreground, reiniciando cámara...');
-                    await this.handleAppForeground();
-                }
-            });
-        }
-        await this.initCamera();
-        await this.waitForCameraReady();
-        this.modalDpiServices.closeModalAndChangeBrightness$.subscribe(async () => await this.closeOverlayVideo());
-    }
-    async ngOnDestroy() {
-        if (this.appStateListener) {
-            await this.appStateListener.remove();
-        }
-        this.cleanupTimers();
-        this.stopCamera();
-        if (this.defaultBrightness !== null) {
-            await ScreenBrightness.setBrightness({ brightness: this.defaultBrightness });
-        }
-    }
-    async handleAppBackground() {
-        // Si está grabando o en countdown, cancelar todo
-        if (this.isRecording || this.countdown > 0) {
-            console.log('⚠️ [VideoSelfie] Grabación/Countdown en progreso, cancelando...');
-            await this.cancelRecording();
-        }
-    }
-    async handleAppForeground() {
-        // Reiniciar la cámara completamente
-        console.log('🔄 [VideoSelfie] Reiniciando cámara...');
-        this.isLoading = true;
-        this.changeDetector.detectChanges();
-        // Detener la cámara actual si existe
-        this.stopCamera();
-        // Reiniciar
-        await this.initCamera();
-        await this.waitForCameraReady();
-        this.isLoading = false;
-        this.changeDetector.detectChanges();
-        console.log('✅ [VideoSelfie] Cámara reiniciada, lista para grabar');
-    }
-    async cancelRecording() {
-        console.log('🚫 [VideoSelfie] Cancelando grabación...');
-        // Limpiar countdown
-        if (this.countdownInterval) {
-            clearInterval(this.countdownInterval);
-            this.countdownInterval = null;
-        }
-        this.countdown = 0;
-        // Detener grabación si está activa
-        if (this.mediaRecorder && this.isRecording) {
-            if (this.mediaRecorder.state !== 'inactive') {
-                this.mediaRecorder.stop();
-            }
-            this.isRecording = false;
-        }
-        // Limpiar timer de grabación
-        if (this.recordingTimer) {
-            clearTimeout(this.recordingTimer);
-            this.recordingTimer = null;
-        }
-        // Limpiar chunks grabados (no enviar video incompleto)
-        this.recordedChunks = [];
-        // Remover clase de progreso
-        if (this.progressRing) {
-            this.renderer.removeClass(this.progressRing.nativeElement, 'progress-active');
-        }
-        this.canStopRecording = true;
-        this.timeRemaining = this.maxRecordingTime / 1000;
-        this.changeDetector.detectChanges();
-        console.log('✅ [VideoSelfie] Grabación cancelada, no se enviará video');
-    }
-    cleanupTimers() {
-        if (this.recordingTimer) {
-            clearTimeout(this.recordingTimer);
-            this.recordingTimer = null;
-        }
-        if (this.countdownInterval) {
-            clearInterval(this.countdownInterval);
-            this.countdownInterval = null;
-        }
-        if (this.scanTimeout) {
-            clearTimeout(this.scanTimeout);
-            this.scanTimeout = null;
-        }
-    }
-    async requestPermissions() {
-        if (Capacitor.getPlatform() !== 'web') {
-            if (this.isAndroid || this.isIOS) {
-                const permissions = await Camera.requestPermissions();
-                if (permissions.camera === 'denied') {
-                    console.error('Permiso de cámara denegado');
-                    return;
-                }
-            }
-        }
-    }
-    async initCamera() {
-        try {
-            const constraints = {
-                audio: false,
-                video: {
-                    facingMode: 'user',
-                    width: { ideal: 640 }, // Fuerza resolución estándar
-                    height: { ideal: 480 },
-                    aspectRatio: 4 / 3
-                }
-            };
-            this.stream = await navigator.mediaDevices.getUserMedia(constraints);
-            const video = this.videoElement.nativeElement;
-            video.srcObject = this.stream;
-            video.setAttribute('playsinline', 'true');
-            video.muted = true;
-            // ⏳ Esperar un poco antes de reproducir para evitar salto de lente
-            await new Promise((res) => setTimeout(res, 300));
-            await video.play();
-            this.isLoading = false;
-            await this.prepareRecorder();
-        }
-        catch (error) {
-            console.error('initCamera error:', error);
-            this.isLoading = false;
-        }
-    }
-    async waitForCameraReady() {
-        const video = this.videoElement.nativeElement;
-        return new Promise((resolve) => {
-            if (video.readyState >= 3) {
-                resolve();
-            }
-            else {
-                video.onloadedmetadata = () => resolve();
-            }
-        });
-    }
-    async prepareRecorder() {
-        if (!this.stream || !this.stream.getVideoTracks().length)
-            return;
-        let mimeType = '';
-        if (this.isIOS && MediaRecorder.isTypeSupported('video/mp4')) {
-            mimeType = 'video/mp4';
-        }
-        else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
-            mimeType = 'video/webm;codecs=vp8';
-        }
-        else if (MediaRecorder.isTypeSupported('video/webm')) {
-            mimeType = 'video/webm';
-        }
-        else {
-            alert('Formato no soportado');
-            return;
-        }
-        const options = {
-            mimeType,
-            videoBitsPerSecond: 400_000,
-        };
-        this.mediaRecorder = new MediaRecorder(this.stream, options);
-        this.recordedChunks = [];
-        this.mediaRecorder.ondataavailable = (event) => {
-            if (event.data?.size > 0)
-                this.recordedChunks.push(event.data);
-        };
-        this.mediaRecorder.onerror = (event) => {
-            console.error('Recorder error:', event);
-            alert('Error grabando video');
-        };
-        this.mediaRecorder.onstop = async () => {
-            if (!this.recordedChunks.length)
-                return;
-            const fileExtension = mimeType.includes('webm') ? 'webm' : 'mp4';
-            const blob = new Blob(this.recordedChunks, { type: mimeType });
-            const file = this.blobToFile(blob, `video-selfie.${fileExtension}`);
-            this.capVideo = file;
-            if (this.backFunction)
-                await this.backFunction(file);
-            this.recordedChunks = [];
-        };
-    }
-    recordVideo() {
-        this.countdown = 3;
-        this.countdownInterval = setInterval(() => {
-            this.countdown -= 1;
-            if (this.countdown <= 0) {
-                clearInterval(this.countdownInterval);
-                this.countdownInterval = null;
-                this.startVideoRecord();
-            }
-            this.changeDetector.detectChanges();
-        }, 1000);
-    }
-    async startVideoRecord() {
-        if (this.mediaRecorder && !this.isRecording) {
-            await new Promise((r) => setTimeout(r, 500));
-            this.mediaRecorder.start();
-            this.isRecording = true;
-            this.canStopRecording = false;
-            this.renderer.addClass(this.progressRing.nativeElement, 'progress-active');
-            this.timeRemaining = this.maxRecordingTime / 1000;
-            this.updateTimeRemaining();
-            this.recordingTimer = setTimeout(async () => {
-                this.canStopRecording = true;
-                await this.stopRecording();
-            }, this.maxRecordingTime);
-        }
-    }
-    updateTimeRemaining() {
-        const timer = setInterval(() => {
-            if (this.isRecording) {
-                this.timeRemaining -= 1;
-                if (this.timeRemaining <= 0)
-                    clearInterval(timer);
-            }
-            else {
-                clearInterval(timer);
-            }
-            this.changeDetector.detectChanges();
-        }, 1000);
-    }
-    async stopRecording() {
-        if (this.mediaRecorder && this.isRecording && this.canStopRecording) {
-            if (this.mediaRecorder.state !== 'inactive')
-                this.mediaRecorder.stop();
-            this.isRecording = false;
-        }
-        if (this.scanTimeout)
-            clearTimeout(this.scanTimeout);
-        this.renderer.removeClass(this.progressRing.nativeElement, 'progress-active');
-    }
-    blobToFile(blob, fileName) {
-        const b = blob;
-        b.lastModified = Date.now();
-        b.lastModifiedDate = new Date();
-        b.name = fileName;
-        return b;
-    }
-    async closeOverlayVideo() {
-        this.stopCamera();
-        if (this.defaultBrightness !== null) {
-            await ScreenBrightness.setBrightness({ brightness: this.defaultBrightness });
-        }
-        this.modalController.dismiss();
-    }
-    stopCamera() {
-        if (this.stream) {
-            this.stream.getTracks().forEach((track) => track.stop());
-            this.stream = null;
-        }
-        if (this.scanTimeout)
-            clearTimeout(this.scanTimeout);
-    }
-    closeRequestedFunction() {
-        this.closeOverlayVideo();
-        this.modalDpiServices.requestCloseModalAndBrightness();
-    }
-    static { this.ɵfac = function CamaraVideoSelfieComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CamaraVideoSelfieComponent)(i0.ɵɵdirectiveInject(i1.Platform), i0.ɵɵdirectiveInject(i1.ModalController), i0.ɵɵdirectiveInject(i2.DomSanitizer), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i1.AlertController), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i3.ModalVideoSelfieServices), i0.ɵɵdirectiveInject(i4.ModalDpiServices)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CamaraVideoSelfieComponent, selectors: [["app-camara-video-selfie"]], viewQuery: function CamaraVideoSelfieComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5);
-            i0.ɵɵviewQuery(_c1, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.videoElement = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.progressRing = _t.first);
-        } }, inputs: { text1: "text1", text2: "text2", backFunction: "backFunction" }, outputs: { closeRequested: "closeRequested" }, decls: 21, vars: 8, consts: [["videoElement", ""], ["progressRing", ""], ["color", "light", 1, "custom-content"], ["class", "countdown-overlay", 4, "ngIf"], [1, "ion-no-border"], ["color", "light"], ["slot", "end"], [3, "click", "disabled"], ["name", "close", "color", "dark"], [1, "camera-container"], [1, "video-wrapper"], ["muted", "", "autoplay", "", "playsinline", "", 2, "transform", "scaleX(-1)"], ["width", "300", "height", "300", 1, "progress-ring"], ["cx", "150", "cy", "150", "r", "150", 1, "progress-ring__circle"], [3, "ngClass"], [1, "text-center"], [1, "fixed-footer"], ["class", "button-grabar", "expand", "block", 3, "click", 4, "ngIf"], ["expand", "block", 3, "disabled", "click", 4, "ngIf"], [1, "countdown-overlay"], [1, "countdown"], ["expand", "block", 1, "button-grabar", 3, "click"], ["expand", "block", 3, "click", "disabled"]], template: function CamaraVideoSelfieComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "ion-content", 2);
-            i0.ɵɵtemplate(1, CamaraVideoSelfieComponent_div_1_Template, 3, 1, "div", 3);
-            i0.ɵɵelementStart(2, "ion-header", 4)(3, "ion-toolbar", 5)(4, "ion-buttons", 6)(5, "ion-button", 7);
-            i0.ɵɵlistener("click", function CamaraVideoSelfieComponent_Template_ion_button_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeOverlayVideo()); });
-            i0.ɵɵelement(6, "ion-icon", 8);
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(7, "div", 9)(8, "div", 10);
-            i0.ɵɵelement(9, "video", 11, 0);
-            i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(11, "svg", 12, 1);
-            i0.ɵɵelement(13, "circle", 13);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(14, "ion-label", 14);
-            i0.ɵɵtext(15);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(16, "p", 15);
-            i0.ɵɵtext(17, "Permanece quieto, con tu rostro en el centro del c\u00EDrculo.");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "div", 16);
-            i0.ɵɵtemplate(19, CamaraVideoSelfieComponent_ion_button_19_Template, 2, 0, "ion-button", 17)(20, CamaraVideoSelfieComponent_ion_button_20_Template, 2, 1, "ion-button", 18);
-            i0.ɵɵelementEnd()()();
-        } if (rf & 2) {
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.countdown > 0);
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("disabled", !ctx.canStopRecording);
-            i0.ɵɵadvance(9);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c2, ctx.isRecording));
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1("00:", ctx.timeRemaining < 10 ? "0" + ctx.timeRemaining : ctx.timeRemaining, "");
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngIf", !ctx.isRecording);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.isRecording);
-        } }, dependencies: [i5.NgClass, i5.NgIf, i1.IonButton, i1.IonButtons, i1.IonContent, i1.IonHeader, i1.IonIcon, i1.IonLabel, i1.IonToolbar], styles: [".camera-container[_ngcontent-%COMP%] {\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 70%;\r\n  background-color: #fff;\r\n}\r\n\r\n.video-wrapper[_ngcontent-%COMP%] {\r\n  position: relative;\r\n  width: 300px;\r\n  height: 300px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n}\r\n\r\nvideo[_ngcontent-%COMP%] {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  border-radius: 50%;\r\n}\r\n\r\n.progress-ring[_ngcontent-%COMP%] {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  transform: rotate(-90deg);\r\n  \n\r\n}\r\n\r\n.progress-ring__circle[_ngcontent-%COMP%] {\r\n  fill: transparent;\r\n  stroke: purple;\r\n  stroke-width: 12;\r\n  stroke-dasharray: 945;\r\n  \n\r\n  stroke-dashoffset: 880;\r\n  \n\r\n  transition: stroke-dashoffset 12s linear;\r\n  \n\r\n}\r\n\r\n.progress-active[_ngcontent-%COMP%]   .progress-ring__circle[_ngcontent-%COMP%] {\r\n  animation: _ngcontent-%COMP%_progress-animation 5s linear forwards;\r\n}\r\n\r\n@keyframes _ngcontent-%COMP%_progress-animation {\r\n  from {\r\n    stroke-dashoffset: 880;\r\n  }\r\n\r\n  to {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}\r\n\r\n.text-container[_ngcontent-%COMP%] {\r\n  height: 40px;\r\n  color: black;\r\n}\r\n\r\nion-header[_ngcontent-%COMP%] {\r\n  --background: #fff;\r\n  \n\r\n}\r\n\r\n.centered-title[_ngcontent-%COMP%] {\r\n  text-align: center;\r\n  width: 100%;\r\n  \n\r\n  font-weight: bold;\r\n}\r\n\r\n.fixed-footer[_ngcontent-%COMP%] {\r\n  position: fixed;\r\n  bottom: 40px;\r\n  left: 0;\r\n  width: 100%;\r\n  padding: 10px;\r\n  background-color: #fff; // Color de fondo, opcional\r\n  // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\r\n\r\n\r\n  ion-button {\r\n    width: 90%;\r\n    max-width: 300px;\r\n    margin: 0 auto;\r\n    color: #fff;\r\n    font-weight: bold;\r\n    border-radius: 20px;\r\n\r\n    --background: #82298F;\r\n    --background-hover: #82298F;\r\n    --background-activated: #82298F;\r\n    --background-focused: #82298F;\r\n\r\n    --color: #fff;\r\n\r\n    --border-radius: 20px;\r\n    --border-color: #82298F;\r\n    ;\r\n    --border-style: solid;\r\n    --border-width: 1px;\r\n\r\n    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\r\n\r\n    --ripple-color: #82298F;\r\n\r\n\r\n    &:hover {\r\n      background-color: #82298F;\r\n    }\r\n\r\n    &:active {\r\n      background-color: #82298F;\r\n    }\r\n  }\r\n}\r\n\r\n\r\n\r\n\r\n\r\nion-header[_ngcontent-%COMP%] {\r\n  --background: #fff;\r\n  \n\r\n  color: #000000;\r\n  \n\r\n}\r\n\r\nion-toolbar[_ngcontent-%COMP%] {\r\n  --ion-background-color: #fff !important;\r\n  --background: #ffffff !important;\r\n  --color: #000000 !important;\r\n}\r\n\r\n.centered-title[_ngcontent-%COMP%] {\r\n  flex: 1;\r\n  text-align: center;\r\n  \n\r\n  font-weight: bold;\r\n  color: #000000;\r\n  margin: 0;\r\n  \n\r\n}\r\n\r\nion-buttons[_ngcontent-%COMP%] {\r\n  justify-content: flex-end;\r\n  \n\r\n}\r\n\r\n.countdown-overlay[_ngcontent-%COMP%] {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.6);\r\n  \n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin: 0;\r\n  padding: 0;\r\n  z-index: 1000;\r\n  \n\r\n  animation: _ngcontent-%COMP%_fadeIn 0.5s ease-out, _ngcontent-%COMP%_fadeOut 0.5s ease-out 2.5s;\r\n  \n\r\n  box-sizing: border-box;\r\n  border-radius: 0px;\r\n\r\n}\r\n\r\nion-content.custom-content[_ngcontent-%COMP%] {\r\n  --padding-top: 0;\r\n  --padding-bottom: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  margin-top: 10vh; // Levanta el contenido un 10% desde el tope\r\n  height: 90vh; // Ajusta la altura para que junto con el margin sea 100%\r\n}\r\n\r\n.countdown[_ngcontent-%COMP%] {\r\n  font-size: 100px;\r\n  font-weight: bold;\r\n  color: #fff;\r\n  animation: _ngcontent-%COMP%_scaleUp 0.5s ease-out, _ngcontent-%COMP%_scaleDown 0.5s ease-out 2.5s;\r\n  \n\r\n}\r\n\r\n\n\r\n@keyframes _ngcontent-%COMP%_fadeIn {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes _ngcontent-%COMP%_fadeOut {\r\n  from {\r\n    opacity: 1;\r\n  }\r\n\r\n  to {\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n\n\r\n@keyframes _ngcontent-%COMP%_scaleUp {\r\n  from {\r\n    transform: scale(0.8);\r\n    opacity: 0;\r\n  }\r\n\r\n  to {\r\n    transform: scale(1);\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes _ngcontent-%COMP%_scaleDown {\r\n  from {\r\n    transform: scale(1);\r\n    opacity: 1;\r\n  }\r\n\r\n  to {\r\n    transform: scale(0.8);\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n.red[_ngcontent-%COMP%] {\r\n  padding: 10px;\r\n  color: red;\r\n}\r\n\r\n.text-center[_ngcontent-%COMP%] {\r\n  text-align: center;\r\n  padding-left: 20%;\r\n  padding-right: 20%;\r\n  color: #333;\r\n}\r\n\r\n.loading-overlay[_ngcontent-%COMP%] {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.8);\r\n  \n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 1000;\r\n  \n\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n  border-radius: 0px;\r\n}\r\n\r\nion-spinner[_ngcontent-%COMP%] {\r\n  color: #fff;\r\n  width: 50px;\r\n  height: 50px;\r\n}"] }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CamaraVideoSelfieComponent, [{
-        type: Component,
-        args: [{ selector: 'app-camara-video-selfie', encapsulation: ViewEncapsulation.Emulated, template: "<ion-content color=\"light\" class=\"custom-content\">\r\n  <!-- Loading deshabilitado para evitar conflictos con loading principal -->\r\n  <!-- <div *ngIf=\"isLoading\" class=\"loading-overlay\">\r\n    <ion-spinner name=\"crescent\"></ion-spinner>\r\n  </div> --> \r\n  <div *ngIf=\"countdown > 0\" class=\"countdown-overlay\">\r\n    <div class=\"countdown\">{{ countdown }}</div>\r\n  </div>\r\n  <ion-header class=\"ion-no-border\">\r\n    <ion-toolbar color=\"light\">\r\n      <!-- <ion-title class=\"centered-title\">Video Selfie</ion-title> -->\r\n      <ion-buttons slot=\"end\">\r\n        <ion-button (click)=\"closeOverlayVideo()\" [disabled]=\"!canStopRecording\">\r\n          <ion-icon name=\"close\" color=\"dark\"></ion-icon>\r\n        </ion-button>\r\n      </ion-buttons>\r\n    </ion-toolbar>\r\n  </ion-header>\r\n  <!-- Contenedor de la c\u00E1mara y progresi\u00F3n -->\r\n  <div class=\"camera-container\">\r\n    <div class=\"video-wrapper\">\r\n      <video #videoElement muted autoplay playsinline style=\"transform: scaleX(-1)\"></video>\r\n      <svg class=\"progress-ring\" #progressRing width=\"300\" height=\"300\">\r\n        <circle class=\"progress-ring__circle\" cx=\"150\" cy=\"150\" r=\"150\" />\r\n      </svg>\r\n    </div>\r\n    <ion-label [ngClass]=\"{'red': isRecording}\">00:{{ timeRemaining < 10 ? '0' + timeRemaining : timeRemaining\r\n        }}</ion-label>\r\n        <p class=\"text-center\">Permanece quieto, con tu rostro en el centro del c\u00EDrculo.</p>\r\n        <!-- Botones de grabaci\u00F3n -->\r\n        <div class=\"fixed-footer\">\r\n          <ion-button class=\"button-grabar\" *ngIf=\"!isRecording\" expand=\"block\" (click)=\"recordVideo()\">Iniciar Grabaci\u00F3n</ion-button>\r\n          <ion-button *ngIf=\"isRecording\" expand=\"block\" (click)=\"stopRecording()\" [disabled]=\"!canStopRecording\">Detener\r\n            Grabaci\u00F3n</ion-button>\r\n        </div>\r\n  </div>\r\n</ion-content>", styles: [".camera-container {\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 70%;\r\n  background-color: #fff;\r\n}\r\n\r\n.video-wrapper {\r\n  position: relative;\r\n  width: 300px;\r\n  height: 300px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n}\r\n\r\nvideo {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  border-radius: 50%;\r\n}\r\n\r\n.progress-ring {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  transform: rotate(-90deg);\r\n  /* Rotamos el c\u00EDrculo para que la animaci\u00F3n inicie desde arriba */\r\n}\r\n\r\n.progress-ring__circle {\r\n  fill: transparent;\r\n  stroke: purple;\r\n  stroke-width: 12;\r\n  stroke-dasharray: 945;\r\n  /* La circunferencia del c\u00EDrculo  880*/\r\n  stroke-dashoffset: 880;\r\n  /* Oculto por completo al inicio */\r\n  transition: stroke-dashoffset 12s linear;\r\n  /* Esto controlar\u00E1 el llenado progresivo */\r\n}\r\n\r\n.progress-active .progress-ring__circle {\r\n  animation: progress-animation 5s linear forwards;\r\n}\r\n\r\n@keyframes progress-animation {\r\n  from {\r\n    stroke-dashoffset: 880;\r\n  }\r\n\r\n  to {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}\r\n\r\n.text-container {\r\n  height: 40px;\r\n  color: black;\r\n}\r\n\r\nion-header {\r\n  --background: #fff;\r\n  /* Fondo blanco para el header */\r\n}\r\n\r\n.centered-title {\r\n  text-align: center;\r\n  width: 100%;\r\n  /* Asegura que el t\u00EDtulo est\u00E9 centrado */\r\n  font-weight: bold;\r\n}\r\n\r\n.fixed-footer {\r\n  position: fixed;\r\n  bottom: 40px;\r\n  left: 0;\r\n  width: 100%;\r\n  padding: 10px;\r\n  background-color: #fff; // Color de fondo, opcional\r\n  // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\r\n\r\n\r\n  ion-button {\r\n    width: 90%;\r\n    max-width: 300px;\r\n    margin: 0 auto;\r\n    color: #fff;\r\n    font-weight: bold;\r\n    border-radius: 20px;\r\n\r\n    --background: #82298F;\r\n    --background-hover: #82298F;\r\n    --background-activated: #82298F;\r\n    --background-focused: #82298F;\r\n\r\n    --color: #fff;\r\n\r\n    --border-radius: 20px;\r\n    --border-color: #82298F;\r\n    ;\r\n    --border-style: solid;\r\n    --border-width: 1px;\r\n\r\n    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\r\n\r\n    --ripple-color: #82298F;\r\n\r\n\r\n    &:hover {\r\n      background-color: #82298F;\r\n    }\r\n\r\n    &:active {\r\n      background-color: #82298F;\r\n    }\r\n  }\r\n}\r\n\r\n\r\n\r\n\r\n\r\nion-header {\r\n  --background: #fff;\r\n  /* Fondo blanco */\r\n  color: #000000;\r\n  /* Texto negro */\r\n}\r\n\r\nion-toolbar {\r\n  --ion-background-color: #fff !important;\r\n  --background: #ffffff !important;\r\n  --color: #000000 !important;\r\n}\r\n\r\n.centered-title {\r\n  flex: 1;\r\n  text-align: center;\r\n  /* Centrar el t\u00EDtulo */\r\n  font-weight: bold;\r\n  color: #000000;\r\n  margin: 0;\r\n  /* Quita cualquier margen del t\u00EDtulo */\r\n}\r\n\r\nion-buttons {\r\n  justify-content: flex-end;\r\n  /* Alinea el bot\u00F3n a la derecha */\r\n}\r\n\r\n.countdown-overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.6);\r\n  /* Fondo semi-transparente */\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin: 0;\r\n  padding: 0;\r\n  z-index: 1000;\r\n  /* Asegurarse de que est\u00E9 encima de otros elementos */\r\n  animation: fadeIn 0.5s ease-out, fadeOut 0.5s ease-out 2.5s;\r\n  /* Animaciones de entrada y salida */\r\n  box-sizing: border-box;\r\n  border-radius: 0px;\r\n\r\n}\r\n\r\nion-content.custom-content {\r\n  --padding-top: 0;\r\n  --padding-bottom: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  margin-top: 10vh; // Levanta el contenido un 10% desde el tope\r\n  height: 90vh; // Ajusta la altura para que junto con el margin sea 100%\r\n}\r\n\r\n.countdown {\r\n  font-size: 100px;\r\n  font-weight: bold;\r\n  color: #fff;\r\n  animation: scaleUp 0.5s ease-out, scaleDown 0.5s ease-out 2.5s;\r\n  /* Escalar en entrada y salida */\r\n}\r\n\r\n/* Animaci\u00F3n para desvanecer la superposici\u00F3n */\r\n@keyframes fadeIn {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes fadeOut {\r\n  from {\r\n    opacity: 1;\r\n  }\r\n\r\n  to {\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n/* Animaci\u00F3n para escalar el n\u00FAmero */\r\n@keyframes scaleUp {\r\n  from {\r\n    transform: scale(0.8);\r\n    opacity: 0;\r\n  }\r\n\r\n  to {\r\n    transform: scale(1);\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes scaleDown {\r\n  from {\r\n    transform: scale(1);\r\n    opacity: 1;\r\n  }\r\n\r\n  to {\r\n    transform: scale(0.8);\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n.red {\r\n  padding: 10px;\r\n  color: red;\r\n}\r\n\r\n.text-center {\r\n  text-align: center;\r\n  padding-left: 20%;\r\n  padding-right: 20%;\r\n  color: #333;\r\n}\r\n\r\n.loading-overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.8);\r\n  /* Fondo oscuro semi-transparente */\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 1000;\r\n  /* Aseg\u00FArate de que est\u00E9 por encima del contenido */\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n  border-radius: 0px;\r\n}\r\n\r\nion-spinner {\r\n  color: #fff;\r\n  width: 50px;\r\n  height: 50px;\r\n}"] }]
-    }], () => [{ type: i1.Platform }, { type: i1.ModalController }, { type: i2.DomSanitizer }, { type: i0.Renderer2 }, { type: i1.AlertController }, { type: i0.ChangeDetectorRef }, { type: i3.ModalVideoSelfieServices }, { type: i4.ModalDpiServices }], { videoElement: [{
-            type: ViewChild,
-            args: ['videoElement']
-        }], progressRing: [{
-            type: ViewChild,
-            args: ['progressRing']
-        }], text1: [{
-            type: Input
-        }], text2: [{
-            type: Input
-        }], backFunction: [{
-            type: Input
-        }], closeRequested: [{
-            type: Output
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CamaraVideoSelfieComponent, { className: "CamaraVideoSelfieComponent", filePath: "src\\app\\pages\\id-vision\\components\\camara-video-selfie\\camara-video-selfie.component.ts", lineNumber: 20 }); })();
+import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Camera } from '@capacitor/camera';
+import { ScreenBrightness } from '@capacitor-community/screen-brightness';
+import { Capacitor } from '@capacitor/core';
+import { App } from '@capacitor/app';
+import * as i0 from "@angular/core";
+import * as i1 from "@ionic/angular";
+import * as i2 from "@angular/platform-browser";
+import * as i3 from "../../services/modal-services/modal-video-selfie-services";
+import * as i4 from "../../services/modal-services/modal-dpi-services";
+import * as i5 from "@angular/common";
+const _c0 = ["videoElement"];
+const _c1 = ["progressRing"];
+const _c2 = a0 => ({ "red": a0 });
+function CamaraVideoSelfieComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19)(1, "div", 20);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.countdown);
+} }
+function CamaraVideoSelfieComponent_ion_button_19_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-button", 21);
+    i0.ɵɵlistener("click", function CamaraVideoSelfieComponent_ion_button_19_Template_ion_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.recordVideo()); });
+    i0.ɵɵtext(1, "Iniciar Grabaci\u00F3n");
+    i0.ɵɵelementEnd();
+} }
+function CamaraVideoSelfieComponent_ion_button_20_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-button", 22);
+    i0.ɵɵlistener("click", function CamaraVideoSelfieComponent_ion_button_20_Template_ion_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.stopRecording()); });
+    i0.ɵɵtext(1, "Detener Grabaci\u00F3n");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", !ctx_r1.canStopRecording);
+} }
+export class CamaraVideoSelfieComponent {
+    constructor(platform, modalController, sanitizer, renderer, alertController, changeDetector, modalVideoSelfieServices, modalDpiServices) {
+        this.platform = platform;
+        this.modalController = modalController;
+        this.sanitizer = sanitizer;
+        this.renderer = renderer;
+        this.alertController = alertController;
+        this.changeDetector = changeDetector;
+        this.modalVideoSelfieServices = modalVideoSelfieServices;
+        this.modalDpiServices = modalDpiServices;
+        this.text1 = '';
+        this.text2 = '';
+        this.closeRequested = new EventEmitter();
+        this.stream = null;
+        this.isRecording = false;
+        this.mediaRecorder = null;
+        this.recordedChunks = [];
+        this.countdown = 0;
+        this.minRecordingTime = 3000;
+        this.maxRecordingTime = 5000;
+        this.timeRemaining = this.maxRecordingTime / 1000;
+        this.canStopRecording = true;
+        this.isLoading = true;
+        this.defaultBrightness = null;
+        this.isAndroid = this.platform.is('android');
+        this.isIOS = this.platform.is('ios');
+    }
+    async ngAfterViewInit() {
+        if (this.isAndroid || this.isIOS) {
+            try {
+                const { brightness } = await ScreenBrightness.getBrightness();
+                this.defaultBrightness = brightness;
+                await ScreenBrightness.setBrightness({ brightness: 1.0 });
+            }
+            catch (error) {
+                console.warn('Brillo error:', error);
+            }
+            await this.requestPermissions();
+            // 🔹 Listener para detectar cuando la app va a segundo plano
+            this.appStateListener = await App.addListener('appStateChange', async (state) => {
+                console.log('🔄 [VideoSelfie] App state changed:', state.isActive);
+                if (!state.isActive) {
+                    console.log('⏸️ [VideoSelfie] App fue a background, cancelando grabación...');
+                    await this.handleAppBackground();
+                }
+                else {
+                    console.log('✅ [VideoSelfie] App volvió al foreground, reiniciando cámara...');
+                    await this.handleAppForeground();
+                }
+            });
+        }
+        await this.initCamera();
+        await this.waitForCameraReady();
+        this.modalDpiServices.closeModalAndChangeBrightness$.subscribe(async () => await this.closeOverlayVideo());
+    }
+    async ngOnDestroy() {
+        if (this.appStateListener) {
+            await this.appStateListener.remove();
+        }
+        this.cleanupTimers();
+        this.stopCamera();
+        if (this.defaultBrightness !== null) {
+            await ScreenBrightness.setBrightness({ brightness: this.defaultBrightness });
+        }
+    }
+    async handleAppBackground() {
+        // Si está grabando o en countdown, cancelar todo
+        if (this.isRecording || this.countdown > 0) {
+            console.log('⚠️ [VideoSelfie] Grabación/Countdown en progreso, cancelando...');
+            await this.cancelRecording();
+        }
+    }
+    async handleAppForeground() {
+        // Reiniciar la cámara completamente
+        console.log('🔄 [VideoSelfie] Reiniciando cámara...');
+        this.isLoading = true;
+        this.changeDetector.detectChanges();
+        // Detener la cámara actual si existe
+        this.stopCamera();
+        // Reiniciar
+        await this.initCamera();
+        await this.waitForCameraReady();
+        this.isLoading = false;
+        this.changeDetector.detectChanges();
+        console.log('✅ [VideoSelfie] Cámara reiniciada, lista para grabar');
+    }
+    async cancelRecording() {
+        console.log('🚫 [VideoSelfie] Cancelando grabación...');
+        // Limpiar countdown
+        if (this.countdownInterval) {
+            clearInterval(this.countdownInterval);
+            this.countdownInterval = null;
+        }
+        this.countdown = 0;
+        // Detener grabación si está activa
+        if (this.mediaRecorder && this.isRecording) {
+            if (this.mediaRecorder.state !== 'inactive') {
+                this.mediaRecorder.stop();
+            }
+            this.isRecording = false;
+        }
+        // Limpiar timer de grabación
+        if (this.recordingTimer) {
+            clearTimeout(this.recordingTimer);
+            this.recordingTimer = null;
+        }
+        // Limpiar chunks grabados (no enviar video incompleto)
+        this.recordedChunks = [];
+        // Remover clase de progreso
+        if (this.progressRing) {
+            this.renderer.removeClass(this.progressRing.nativeElement, 'progress-active');
+        }
+        this.canStopRecording = true;
+        this.timeRemaining = this.maxRecordingTime / 1000;
+        this.changeDetector.detectChanges();
+        console.log('✅ [VideoSelfie] Grabación cancelada, no se enviará video');
+    }
+    cleanupTimers() {
+        if (this.recordingTimer) {
+            clearTimeout(this.recordingTimer);
+            this.recordingTimer = null;
+        }
+        if (this.countdownInterval) {
+            clearInterval(this.countdownInterval);
+            this.countdownInterval = null;
+        }
+        if (this.scanTimeout) {
+            clearTimeout(this.scanTimeout);
+            this.scanTimeout = null;
+        }
+    }
+    async requestPermissions() {
+        if (Capacitor.getPlatform() !== 'web') {
+            if (this.isAndroid || this.isIOS) {
+                const permissions = await Camera.requestPermissions();
+                if (permissions.camera === 'denied') {
+                    console.error('Permiso de cámara denegado');
+                    return;
+                }
+            }
+        }
+    }
+    async initCamera() {
+        try {
+            const constraints = {
+                audio: false,
+                video: {
+                    facingMode: 'user',
+                    width: { ideal: 640 }, // Fuerza resolución estándar
+                    height: { ideal: 480 },
+                    aspectRatio: 4 / 3
+                }
+            };
+            this.stream = await navigator.mediaDevices.getUserMedia(constraints);
+            const video = this.videoElement.nativeElement;
+            video.srcObject = this.stream;
+            video.setAttribute('playsinline', 'true');
+            video.muted = true;
+            // ⏳ Esperar un poco antes de reproducir para evitar salto de lente
+            await new Promise((res) => setTimeout(res, 300));
+            await video.play();
+            this.isLoading = false;
+            await this.prepareRecorder();
+        }
+        catch (error) {
+            console.error('initCamera error:', error);
+            this.isLoading = false;
+        }
+    }
+    async waitForCameraReady() {
+        const video = this.videoElement.nativeElement;
+        return new Promise((resolve) => {
+            if (video.readyState >= 3) {
+                resolve();
+            }
+            else {
+                video.onloadedmetadata = () => resolve();
+            }
+        });
+    }
+    async prepareRecorder() {
+        if (!this.stream || !this.stream.getVideoTracks().length)
+            return;
+        let mimeType = '';
+        if (this.isIOS && MediaRecorder.isTypeSupported('video/mp4')) {
+            mimeType = 'video/mp4';
+        }
+        else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
+            mimeType = 'video/webm;codecs=vp8';
+        }
+        else if (MediaRecorder.isTypeSupported('video/webm')) {
+            mimeType = 'video/webm';
+        }
+        else {
+            alert('Formato no soportado');
+            return;
+        }
+        const options = {
+            mimeType,
+            videoBitsPerSecond: 400_000,
+        };
+        this.mediaRecorder = new MediaRecorder(this.stream, options);
+        this.recordedChunks = [];
+        this.mediaRecorder.ondataavailable = (event) => {
+            if (event.data?.size > 0)
+                this.recordedChunks.push(event.data);
+        };
+        this.mediaRecorder.onerror = (event) => {
+            console.error('Recorder error:', event);
+            alert('Error grabando video');
+        };
+        this.mediaRecorder.onstop = async () => {
+            if (!this.recordedChunks.length)
+                return;
+            const fileExtension = mimeType.includes('webm') ? 'webm' : 'mp4';
+            const blob = new Blob(this.recordedChunks, { type: mimeType });
+            const file = this.blobToFile(blob, `video-selfie.${fileExtension}`);
+            this.capVideo = file;
+            if (this.backFunction)
+                await this.backFunction(file);
+            this.recordedChunks = [];
+        };
+    }
+    recordVideo() {
+        this.countdown = 3;
+        this.countdownInterval = setInterval(() => {
+            this.countdown -= 1;
+            if (this.countdown <= 0) {
+                clearInterval(this.countdownInterval);
+                this.countdownInterval = null;
+                this.startVideoRecord();
+            }
+            this.changeDetector.detectChanges();
+        }, 1000);
+    }
+    async startVideoRecord() {
+        if (this.mediaRecorder && !this.isRecording) {
+            await new Promise((r) => setTimeout(r, 500));
+            this.mediaRecorder.start();
+            this.isRecording = true;
+            this.canStopRecording = false;
+            this.renderer.addClass(this.progressRing.nativeElement, 'progress-active');
+            this.timeRemaining = this.maxRecordingTime / 1000;
+            this.updateTimeRemaining();
+            this.recordingTimer = setTimeout(async () => {
+                this.canStopRecording = true;
+                await this.stopRecording();
+            }, this.maxRecordingTime);
+        }
+    }
+    updateTimeRemaining() {
+        const timer = setInterval(() => {
+            if (this.isRecording) {
+                this.timeRemaining -= 1;
+                if (this.timeRemaining <= 0)
+                    clearInterval(timer);
+            }
+            else {
+                clearInterval(timer);
+            }
+            this.changeDetector.detectChanges();
+        }, 1000);
+    }
+    async stopRecording() {
+        if (this.mediaRecorder && this.isRecording && this.canStopRecording) {
+            if (this.mediaRecorder.state !== 'inactive')
+                this.mediaRecorder.stop();
+            this.isRecording = false;
+        }
+        if (this.scanTimeout)
+            clearTimeout(this.scanTimeout);
+        this.renderer.removeClass(this.progressRing.nativeElement, 'progress-active');
+    }
+    blobToFile(blob, fileName) {
+        const b = blob;
+        b.lastModified = Date.now();
+        b.lastModifiedDate = new Date();
+        b.name = fileName;
+        return b;
+    }
+    async closeOverlayVideo() {
+        this.stopCamera();
+        if (this.defaultBrightness !== null) {
+            await ScreenBrightness.setBrightness({ brightness: this.defaultBrightness });
+        }
+        this.modalController.dismiss();
+    }
+    stopCamera() {
+        if (this.stream) {
+            this.stream.getTracks().forEach((track) => track.stop());
+            this.stream = null;
+        }
+        if (this.scanTimeout)
+            clearTimeout(this.scanTimeout);
+    }
+    closeRequestedFunction() {
+        this.closeOverlayVideo();
+        this.modalDpiServices.requestCloseModalAndBrightness();
+    }
+    static { this.ɵfac = function CamaraVideoSelfieComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CamaraVideoSelfieComponent)(i0.ɵɵdirectiveInject(i1.Platform), i0.ɵɵdirectiveInject(i1.ModalController), i0.ɵɵdirectiveInject(i2.DomSanitizer), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i1.AlertController), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i3.ModalVideoSelfieServices), i0.ɵɵdirectiveInject(i4.ModalDpiServices)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CamaraVideoSelfieComponent, selectors: [["app-camara-video-selfie"]], viewQuery: function CamaraVideoSelfieComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+            i0.ɵɵviewQuery(_c1, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.videoElement = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.progressRing = _t.first);
+        } }, inputs: { text1: "text1", text2: "text2", backFunction: "backFunction" }, outputs: { closeRequested: "closeRequested" }, decls: 21, vars: 8, consts: [["videoElement", ""], ["progressRing", ""], ["color", "light", 1, "custom-content"], ["class", "countdown-overlay", 4, "ngIf"], [1, "ion-no-border"], ["color", "light"], ["slot", "end"], [3, "click", "disabled"], ["name", "close", "color", "dark"], [1, "camera-container"], [1, "video-wrapper"], ["muted", "", "autoplay", "", "playsinline", "", 2, "transform", "scaleX(-1)"], ["width", "300", "height", "300", 1, "progress-ring"], ["cx", "150", "cy", "150", "r", "150", 1, "progress-ring__circle"], [3, "ngClass"], [1, "text-center"], [1, "fixed-footer"], ["class", "button-grabar", "expand", "block", 3, "click", 4, "ngIf"], ["expand", "block", 3, "disabled", "click", 4, "ngIf"], [1, "countdown-overlay"], [1, "countdown"], ["expand", "block", 1, "button-grabar", 3, "click"], ["expand", "block", 3, "click", "disabled"]], template: function CamaraVideoSelfieComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "ion-content", 2);
+            i0.ɵɵtemplate(1, CamaraVideoSelfieComponent_div_1_Template, 3, 1, "div", 3);
+            i0.ɵɵelementStart(2, "ion-header", 4)(3, "ion-toolbar", 5)(4, "ion-buttons", 6)(5, "ion-button", 7);
+            i0.ɵɵlistener("click", function CamaraVideoSelfieComponent_Template_ion_button_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeOverlayVideo()); });
+            i0.ɵɵelement(6, "ion-icon", 8);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(7, "div", 9)(8, "div", 10);
+            i0.ɵɵelement(9, "video", 11, 0);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(11, "svg", 12, 1);
+            i0.ɵɵelement(13, "circle", 13);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(14, "ion-label", 14);
+            i0.ɵɵtext(15);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "p", 15);
+            i0.ɵɵtext(17, "Permanece quieto, con tu rostro en el centro del c\u00EDrculo.");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "div", 16);
+            i0.ɵɵtemplate(19, CamaraVideoSelfieComponent_ion_button_19_Template, 2, 0, "ion-button", 17)(20, CamaraVideoSelfieComponent_ion_button_20_Template, 2, 1, "ion-button", 18);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.countdown > 0);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("disabled", !ctx.canStopRecording);
+            i0.ɵɵadvance(9);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c2, ctx.isRecording));
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1("00:", ctx.timeRemaining < 10 ? "0" + ctx.timeRemaining : ctx.timeRemaining, "");
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngIf", !ctx.isRecording);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isRecording);
+        } }, dependencies: [i5.NgClass, i5.NgIf, i1.IonButton, i1.IonButtons, i1.IonContent, i1.IonHeader, i1.IonIcon, i1.IonLabel, i1.IonToolbar], styles: [".camera-container[_ngcontent-%COMP%] {\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 70%;\r\n  background-color: #fff;\r\n}\r\n\r\n.video-wrapper[_ngcontent-%COMP%] {\r\n  position: relative;\r\n  width: 300px;\r\n  height: 300px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n}\r\n\r\nvideo[_ngcontent-%COMP%] {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  border-radius: 50%;\r\n}\r\n\r\n.progress-ring[_ngcontent-%COMP%] {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  transform: rotate(-90deg);\r\n  \n\r\n}\r\n\r\n.progress-ring__circle[_ngcontent-%COMP%] {\r\n  fill: transparent;\r\n  stroke: purple;\r\n  stroke-width: 12;\r\n  stroke-dasharray: 945;\r\n  \n\r\n  stroke-dashoffset: 880;\r\n  \n\r\n  transition: stroke-dashoffset 12s linear;\r\n  \n\r\n}\r\n\r\n.progress-active[_ngcontent-%COMP%]   .progress-ring__circle[_ngcontent-%COMP%] {\r\n  animation: _ngcontent-%COMP%_progress-animation 5s linear forwards;\r\n}\r\n\r\n@keyframes _ngcontent-%COMP%_progress-animation {\r\n  from {\r\n    stroke-dashoffset: 880;\r\n  }\r\n\r\n  to {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}\r\n\r\n.text-container[_ngcontent-%COMP%] {\r\n  height: 40px;\r\n  color: black;\r\n}\r\n\r\nion-header[_ngcontent-%COMP%] {\r\n  --background: #fff;\r\n  \n\r\n}\r\n\r\n.centered-title[_ngcontent-%COMP%] {\r\n  text-align: center;\r\n  width: 100%;\r\n  \n\r\n  font-weight: bold;\r\n}\r\n\r\n.fixed-footer[_ngcontent-%COMP%] {\r\n  position: fixed;\r\n  bottom: 40px;\r\n  left: 0;\r\n  width: 100%;\r\n  padding: 10px;\r\n  background-color: #fff; // Color de fondo, opcional\r\n  // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\r\n\r\n\r\n  ion-button {\r\n    width: 90%;\r\n    max-width: 300px;\r\n    margin: 0 auto;\r\n    color: #fff;\r\n    font-weight: bold;\r\n    border-radius: 20px;\r\n\r\n    --background: #82298F;\r\n    --background-hover: #82298F;\r\n    --background-activated: #82298F;\r\n    --background-focused: #82298F;\r\n\r\n    --color: #fff;\r\n\r\n    --border-radius: 20px;\r\n    --border-color: #82298F;\r\n    ;\r\n    --border-style: solid;\r\n    --border-width: 1px;\r\n\r\n    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\r\n\r\n    --ripple-color: #82298F;\r\n\r\n\r\n    &:hover {\r\n      background-color: #82298F;\r\n    }\r\n\r\n    &:active {\r\n      background-color: #82298F;\r\n    }\r\n  }\r\n}\r\n\r\n\r\n\r\n\r\n\r\nion-header[_ngcontent-%COMP%] {\r\n  --background: #fff;\r\n  \n\r\n  color: #000000;\r\n  \n\r\n}\r\n\r\nion-toolbar[_ngcontent-%COMP%] {\r\n  --ion-background-color: #fff !important;\r\n  --background: #ffffff !important;\r\n  --color: #000000 !important;\r\n}\r\n\r\n.centered-title[_ngcontent-%COMP%] {\r\n  flex: 1;\r\n  text-align: center;\r\n  \n\r\n  font-weight: bold;\r\n  color: #000000;\r\n  margin: 0;\r\n  \n\r\n}\r\n\r\nion-buttons[_ngcontent-%COMP%] {\r\n  justify-content: flex-end;\r\n  \n\r\n}\r\n\r\n.countdown-overlay[_ngcontent-%COMP%] {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.6);\r\n  \n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin: 0;\r\n  padding: 0;\r\n  z-index: 1000;\r\n  \n\r\n  animation: _ngcontent-%COMP%_fadeIn 0.5s ease-out, _ngcontent-%COMP%_fadeOut 0.5s ease-out 2.5s;\r\n  \n\r\n  box-sizing: border-box;\r\n  border-radius: 0px;\r\n\r\n}\r\n\r\nion-content.custom-content[_ngcontent-%COMP%] {\r\n  --padding-top: 0;\r\n  --padding-bottom: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  margin-top: 10vh; // Levanta el contenido un 10% desde el tope\r\n  height: 90vh; // Ajusta la altura para que junto con el margin sea 100%\r\n}\r\n\r\n.countdown[_ngcontent-%COMP%] {\r\n  font-size: 100px;\r\n  font-weight: bold;\r\n  color: #fff;\r\n  animation: _ngcontent-%COMP%_scaleUp 0.5s ease-out, _ngcontent-%COMP%_scaleDown 0.5s ease-out 2.5s;\r\n  \n\r\n}\r\n\r\n\n\r\n@keyframes _ngcontent-%COMP%_fadeIn {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes _ngcontent-%COMP%_fadeOut {\r\n  from {\r\n    opacity: 1;\r\n  }\r\n\r\n  to {\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n\n\r\n@keyframes _ngcontent-%COMP%_scaleUp {\r\n  from {\r\n    transform: scale(0.8);\r\n    opacity: 0;\r\n  }\r\n\r\n  to {\r\n    transform: scale(1);\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes _ngcontent-%COMP%_scaleDown {\r\n  from {\r\n    transform: scale(1);\r\n    opacity: 1;\r\n  }\r\n\r\n  to {\r\n    transform: scale(0.8);\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n.red[_ngcontent-%COMP%] {\r\n  padding: 10px;\r\n  color: red;\r\n}\r\n\r\n.text-center[_ngcontent-%COMP%] {\r\n  text-align: center;\r\n  padding-left: 20%;\r\n  padding-right: 20%;\r\n  color: #333;\r\n}\r\n\r\n.loading-overlay[_ngcontent-%COMP%] {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.8);\r\n  \n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 1000;\r\n  \n\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n  border-radius: 0px;\r\n}\r\n\r\nion-spinner[_ngcontent-%COMP%] {\r\n  color: #fff;\r\n  width: 50px;\r\n  height: 50px;\r\n}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CamaraVideoSelfieComponent, [{
+        type: Component,
+        args: [{ selector: 'app-camara-video-selfie', encapsulation: ViewEncapsulation.Emulated, template: "<ion-content color=\"light\" class=\"custom-content\">\r\n  <!-- Loading deshabilitado para evitar conflictos con loading principal -->\r\n  <!-- <div *ngIf=\"isLoading\" class=\"loading-overlay\">\r\n    <ion-spinner name=\"crescent\"></ion-spinner>\r\n  </div> --> \r\n  <div *ngIf=\"countdown > 0\" class=\"countdown-overlay\">\r\n    <div class=\"countdown\">{{ countdown }}</div>\r\n  </div>\r\n  <ion-header class=\"ion-no-border\">\r\n    <ion-toolbar color=\"light\">\r\n      <!-- <ion-title class=\"centered-title\">Video Selfie</ion-title> -->\r\n      <ion-buttons slot=\"end\">\r\n        <ion-button (click)=\"closeOverlayVideo()\" [disabled]=\"!canStopRecording\">\r\n          <ion-icon name=\"close\" color=\"dark\"></ion-icon>\r\n        </ion-button>\r\n      </ion-buttons>\r\n    </ion-toolbar>\r\n  </ion-header>\r\n  <!-- Contenedor de la c\u00E1mara y progresi\u00F3n -->\r\n  <div class=\"camera-container\">\r\n    <div class=\"video-wrapper\">\r\n      <video #videoElement muted autoplay playsinline style=\"transform: scaleX(-1)\"></video>\r\n      <svg class=\"progress-ring\" #progressRing width=\"300\" height=\"300\">\r\n        <circle class=\"progress-ring__circle\" cx=\"150\" cy=\"150\" r=\"150\" />\r\n      </svg>\r\n    </div>\r\n    <ion-label [ngClass]=\"{'red': isRecording}\">00:{{ timeRemaining < 10 ? '0' + timeRemaining : timeRemaining\r\n        }}</ion-label>\r\n        <p class=\"text-center\">Permanece quieto, con tu rostro en el centro del c\u00EDrculo.</p>\r\n        <!-- Botones de grabaci\u00F3n -->\r\n        <div class=\"fixed-footer\">\r\n          <ion-button class=\"button-grabar\" *ngIf=\"!isRecording\" expand=\"block\" (click)=\"recordVideo()\">Iniciar Grabaci\u00F3n</ion-button>\r\n          <ion-button *ngIf=\"isRecording\" expand=\"block\" (click)=\"stopRecording()\" [disabled]=\"!canStopRecording\">Detener\r\n            Grabaci\u00F3n</ion-button>\r\n        </div>\r\n  </div>\r\n</ion-content>", styles: [".camera-container {\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 70%;\r\n  background-color: #fff;\r\n}\r\n\r\n.video-wrapper {\r\n  position: relative;\r\n  width: 300px;\r\n  height: 300px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n}\r\n\r\nvideo {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  border-radius: 50%;\r\n}\r\n\r\n.progress-ring {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  transform: rotate(-90deg);\r\n  /* Rotamos el c\u00EDrculo para que la animaci\u00F3n inicie desde arriba */\r\n}\r\n\r\n.progress-ring__circle {\r\n  fill: transparent;\r\n  stroke: purple;\r\n  stroke-width: 12;\r\n  stroke-dasharray: 945;\r\n  /* La circunferencia del c\u00EDrculo  880*/\r\n  stroke-dashoffset: 880;\r\n  /* Oculto por completo al inicio */\r\n  transition: stroke-dashoffset 12s linear;\r\n  /* Esto controlar\u00E1 el llenado progresivo */\r\n}\r\n\r\n.progress-active .progress-ring__circle {\r\n  animation: progress-animation 5s linear forwards;\r\n}\r\n\r\n@keyframes progress-animation {\r\n  from {\r\n    stroke-dashoffset: 880;\r\n  }\r\n\r\n  to {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}\r\n\r\n.text-container {\r\n  height: 40px;\r\n  color: black;\r\n}\r\n\r\nion-header {\r\n  --background: #fff;\r\n  /* Fondo blanco para el header */\r\n}\r\n\r\n.centered-title {\r\n  text-align: center;\r\n  width: 100%;\r\n  /* Asegura que el t\u00EDtulo est\u00E9 centrado */\r\n  font-weight: bold;\r\n}\r\n\r\n.fixed-footer {\r\n  position: fixed;\r\n  bottom: 40px;\r\n  left: 0;\r\n  width: 100%;\r\n  padding: 10px;\r\n  background-color: #fff; // Color de fondo, opcional\r\n  // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\r\n\r\n\r\n  ion-button {\r\n    width: 90%;\r\n    max-width: 300px;\r\n    margin: 0 auto;\r\n    color: #fff;\r\n    font-weight: bold;\r\n    border-radius: 20px;\r\n\r\n    --background: #82298F;\r\n    --background-hover: #82298F;\r\n    --background-activated: #82298F;\r\n    --background-focused: #82298F;\r\n\r\n    --color: #fff;\r\n\r\n    --border-radius: 20px;\r\n    --border-color: #82298F;\r\n    ;\r\n    --border-style: solid;\r\n    --border-width: 1px;\r\n\r\n    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\r\n\r\n    --ripple-color: #82298F;\r\n\r\n\r\n    &:hover {\r\n      background-color: #82298F;\r\n    }\r\n\r\n    &:active {\r\n      background-color: #82298F;\r\n    }\r\n  }\r\n}\r\n\r\n\r\n\r\n\r\n\r\nion-header {\r\n  --background: #fff;\r\n  /* Fondo blanco */\r\n  color: #000000;\r\n  /* Texto negro */\r\n}\r\n\r\nion-toolbar {\r\n  --ion-background-color: #fff !important;\r\n  --background: #ffffff !important;\r\n  --color: #000000 !important;\r\n}\r\n\r\n.centered-title {\r\n  flex: 1;\r\n  text-align: center;\r\n  /* Centrar el t\u00EDtulo */\r\n  font-weight: bold;\r\n  color: #000000;\r\n  margin: 0;\r\n  /* Quita cualquier margen del t\u00EDtulo */\r\n}\r\n\r\nion-buttons {\r\n  justify-content: flex-end;\r\n  /* Alinea el bot\u00F3n a la derecha */\r\n}\r\n\r\n.countdown-overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.6);\r\n  /* Fondo semi-transparente */\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin: 0;\r\n  padding: 0;\r\n  z-index: 1000;\r\n  /* Asegurarse de que est\u00E9 encima de otros elementos */\r\n  animation: fadeIn 0.5s ease-out, fadeOut 0.5s ease-out 2.5s;\r\n  /* Animaciones de entrada y salida */\r\n  box-sizing: border-box;\r\n  border-radius: 0px;\r\n\r\n}\r\n\r\nion-content.custom-content {\r\n  --padding-top: 0;\r\n  --padding-bottom: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  margin-top: 10vh; // Levanta el contenido un 10% desde el tope\r\n  height: 90vh; // Ajusta la altura para que junto con el margin sea 100%\r\n}\r\n\r\n.countdown {\r\n  font-size: 100px;\r\n  font-weight: bold;\r\n  color: #fff;\r\n  animation: scaleUp 0.5s ease-out, scaleDown 0.5s ease-out 2.5s;\r\n  /* Escalar en entrada y salida */\r\n}\r\n\r\n/* Animaci\u00F3n para desvanecer la superposici\u00F3n */\r\n@keyframes fadeIn {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes fadeOut {\r\n  from {\r\n    opacity: 1;\r\n  }\r\n\r\n  to {\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n/* Animaci\u00F3n para escalar el n\u00FAmero */\r\n@keyframes scaleUp {\r\n  from {\r\n    transform: scale(0.8);\r\n    opacity: 0;\r\n  }\r\n\r\n  to {\r\n    transform: scale(1);\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes scaleDown {\r\n  from {\r\n    transform: scale(1);\r\n    opacity: 1;\r\n  }\r\n\r\n  to {\r\n    transform: scale(0.8);\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n.red {\r\n  padding: 10px;\r\n  color: red;\r\n}\r\n\r\n.text-center {\r\n  text-align: center;\r\n  padding-left: 20%;\r\n  padding-right: 20%;\r\n  color: #333;\r\n}\r\n\r\n.loading-overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.8);\r\n  /* Fondo oscuro semi-transparente */\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 1000;\r\n  /* Aseg\u00FArate de que est\u00E9 por encima del contenido */\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n  border-radius: 0px;\r\n}\r\n\r\nion-spinner {\r\n  color: #fff;\r\n  width: 50px;\r\n  height: 50px;\r\n}"] }]
+    }], () => [{ type: i1.Platform }, { type: i1.ModalController }, { type: i2.DomSanitizer }, { type: i0.Renderer2 }, { type: i1.AlertController }, { type: i0.ChangeDetectorRef }, { type: i3.ModalVideoSelfieServices }, { type: i4.ModalDpiServices }], { videoElement: [{
+            type: ViewChild,
+            args: ['videoElement']
+        }], progressRing: [{
+            type: ViewChild,
+            args: ['progressRing']
+        }], text1: [{
+            type: Input
+        }], text2: [{
+            type: Input
+        }], backFunction: [{
+            type: Input
+        }], closeRequested: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CamaraVideoSelfieComponent, { className: "CamaraVideoSelfieComponent", filePath: "src\\app\\pages\\id-vision\\components\\camara-video-selfie\\camara-video-selfie.component.ts", lineNumber: 20 }); })();
 //# sourceMappingURL=camara-video-selfie.component.js.map