metag-sdk-ionic 1.2.7-dev-0.58 → 1.2.7-dev-0.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/app/pages/id-vision/components/camara-video-selfie/camara-video-selfie.component.js +405 -405
- package/dist/src/app/pages/id-vision/components/direct-photo-selfie/direct-photo-selfie.component.d.ts +37 -37
- package/dist/src/app/pages/id-vision/components/direct-photo-selfie/direct-photo-selfie.component.js +204 -204
- package/dist/src/app/pages/id-vision/components/photo-selfie-camera/photo-selfie-camera.component.d.ts +48 -48
- package/dist/src/app/pages/id-vision/components/photo-selfie-camera/photo-selfie-camera.component.js +261 -261
- package/dist/src/app/pages/id-vision/components/simple-acuerdo-video/simple-acuerdo-video.component.js +480 -480
- package/dist/src/app/pages/id-vision/id-vision.component.d.ts +122 -122
- package/dist/src/app/pages/id-vision/id-vision.component.js +1414 -1409
- package/dist/src/app/pages/id-vision/id-vision.component.js.map +1 -1
- package/dist/src/app/pages/id-vision/services/modal-services/sdk-communication-services.js +21 -21
- package/package.json +1 -1
package/dist/src/app/pages/id-vision/components/photo-selfie-camera/photo-selfie-camera.component.js
CHANGED
|
@@ -1,262 +1,262 @@
|
|
|
1
|
-
import { Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
|
|
2
|
-
import { Camera } from '@capacitor/camera';
|
|
3
|
-
import { Capacitor } from '@capacitor/core';
|
|
4
|
-
import * as i0 from "@angular/core";
|
|
5
|
-
import * as i1 from "@ionic/angular";
|
|
6
|
-
import * as i2 from "@angular/platform-browser";
|
|
7
|
-
import * as i3 from "../../services/modal-services/modal-dpi-services";
|
|
8
|
-
import * as i4 from "@angular/common";
|
|
9
|
-
const _c0 = ["videoElement"];
|
|
10
|
-
const _c1 = ["progressRing"];
|
|
11
|
-
function PhotoSelfieCameraComponent_div_15_Template(rf, ctx) { if (rf & 1) {
|
|
12
|
-
i0.ɵɵelementStart(0, "div", 17)(1, "div", 18)(2, "span", 19);
|
|
13
|
-
i0.ɵɵtext(3);
|
|
14
|
-
i0.ɵɵelementEnd()()();
|
|
15
|
-
} if (rf & 2) {
|
|
16
|
-
const ctx_r1 = i0.ɵɵnextContext();
|
|
17
|
-
i0.ɵɵadvance(3);
|
|
18
|
-
i0.ɵɵtextInterpolate(ctx_r1.countdown);
|
|
19
|
-
} }
|
|
20
|
-
export class PhotoSelfieCameraComponent {
|
|
21
|
-
// overlaySrc: String = '';
|
|
22
|
-
constructor(platform, modalController, sanitizer, modalDpiServices, cdRef, // Agregado para detectar cambios
|
|
23
|
-
renderer // Agregado para manipular clases
|
|
24
|
-
) {
|
|
25
|
-
this.platform = platform;
|
|
26
|
-
this.modalController = modalController;
|
|
27
|
-
this.sanitizer = sanitizer;
|
|
28
|
-
this.modalDpiServices = modalDpiServices;
|
|
29
|
-
this.cdRef = cdRef;
|
|
30
|
-
this.renderer = renderer;
|
|
31
|
-
this.text1 = '';
|
|
32
|
-
this.text2 = '';
|
|
33
|
-
this.capturedImage = null;
|
|
34
|
-
this.stream = null;
|
|
35
|
-
this.isLoading = true;
|
|
36
|
-
this.showCountdown = false;
|
|
37
|
-
this.countdown = 3;
|
|
38
|
-
this.isCapturing = false;
|
|
39
|
-
this.capturedImageUrl = null;
|
|
40
|
-
this.showProgress = false;
|
|
41
|
-
this.timeRemaining = 0;
|
|
42
|
-
this.maxRecordingTime = 3000; // 3 segundos
|
|
43
|
-
console.log('🏗️ PhotoSelfieCamera: Constructor ejecutado');
|
|
44
|
-
this.isAndroid = this.platform.is('android');
|
|
45
|
-
this.isIOS = this.platform.is('ios');
|
|
46
|
-
}
|
|
47
|
-
async ngOnDestroy() {
|
|
48
|
-
this.stopCamera();
|
|
49
|
-
}
|
|
50
|
-
async ngAfterViewInit() {
|
|
51
|
-
console.log('🔍 PhotoSelfieCamera inicializado');
|
|
52
|
-
console.log('🔍 closeRequested callback:', this.closeRequested ? 'DEFINIDO ✅' : 'NO DEFINIDO ❌');
|
|
53
|
-
if (this.isAndroid || this.isIOS) {
|
|
54
|
-
await this.requestPermissions();
|
|
55
|
-
}
|
|
56
|
-
await this.initCamera();
|
|
57
|
-
this.isLoading = false;
|
|
58
|
-
this.modalDpiServices.closePhotoSelfieSubject$.subscribe(() => {
|
|
59
|
-
this.closeOverlay();
|
|
60
|
-
});
|
|
61
|
-
this.modalDpiServices.resumePhotoSubject$.subscribe(() => {
|
|
62
|
-
this.resumeCamera();
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
async requestPermissions() {
|
|
66
|
-
if (Capacitor.getPlatform() !== 'web') {
|
|
67
|
-
if (this.isAndroid || this.isIOS) {
|
|
68
|
-
const permissions = await Camera.requestPermissions();
|
|
69
|
-
if (permissions.camera === 'denied') {
|
|
70
|
-
console.error('Permiso de cámara denegado');
|
|
71
|
-
return;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
async initCamera() {
|
|
77
|
-
try {
|
|
78
|
-
const constraints = {
|
|
79
|
-
video: {
|
|
80
|
-
width: { ideal: 1920 },
|
|
81
|
-
height: { ideal: 1080 },
|
|
82
|
-
facingMode: 'user'
|
|
83
|
-
},
|
|
84
|
-
audio: false
|
|
85
|
-
};
|
|
86
|
-
this.stream = await navigator.mediaDevices.getUserMedia(constraints);
|
|
87
|
-
const videoElement = this.videoElement.nativeElement;
|
|
88
|
-
videoElement.srcObject = this.stream;
|
|
89
|
-
videoElement.autoplay = true;
|
|
90
|
-
videoElement.playsInline = true;
|
|
91
|
-
videoElement.muted = true;
|
|
92
|
-
videoElement.onloadedmetadata = () => {
|
|
93
|
-
videoElement.play().catch((error) => {
|
|
94
|
-
console.error('Error al intentar reproducir el video:', error);
|
|
95
|
-
});
|
|
96
|
-
};
|
|
97
|
-
}
|
|
98
|
-
catch (error) {
|
|
99
|
-
console.error('Error al inicializar la cámara:', error);
|
|
100
|
-
this.isLoading = false;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
async startCountdown() {
|
|
104
|
-
this.showCountdown = true;
|
|
105
|
-
for (let i = this.countdown; i > 0; i--) {
|
|
106
|
-
this.countdown = i;
|
|
107
|
-
this.cdRef.detectChanges();
|
|
108
|
-
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
109
|
-
}
|
|
110
|
-
this.showCountdown = false;
|
|
111
|
-
this.cdRef.detectChanges();
|
|
112
|
-
this.capturePhoto();
|
|
113
|
-
}
|
|
114
|
-
async startProgressAndCapture() {
|
|
115
|
-
this.showProgress = true;
|
|
116
|
-
const circle = document.querySelector('.progress-ring__circle');
|
|
117
|
-
if (circle) {
|
|
118
|
-
circle.style.strokeDashoffset = '0'; // Inicia la animación
|
|
119
|
-
}
|
|
120
|
-
await new Promise(resolve => setTimeout(resolve, 3000)); // Espera 3 segundos
|
|
121
|
-
this.showProgress = false;
|
|
122
|
-
await this.capturePhoto();
|
|
123
|
-
}
|
|
124
|
-
async capturePhoto() {
|
|
125
|
-
if (!this.stream) {
|
|
126
|
-
console.error('La cámara no está inicializada.');
|
|
127
|
-
return;
|
|
128
|
-
}
|
|
129
|
-
// Ocultar el botón mientras se toma la foto
|
|
130
|
-
this.isCapturing = true;
|
|
131
|
-
// Activar la animación del círculo progresivo
|
|
132
|
-
this.renderer.addClass(this.progressRing.nativeElement, 'progress-active');
|
|
133
|
-
this.timeRemaining = this.maxRecordingTime / 1000;
|
|
134
|
-
await new Promise(resolve => setTimeout(resolve, this.maxRecordingTime)); // Espera 3 segundos
|
|
135
|
-
// Tomar la foto después de la animación
|
|
136
|
-
const canvas = document.createElement('canvas');
|
|
137
|
-
const videoElement = this.videoElement.nativeElement;
|
|
138
|
-
canvas.width = videoElement.videoWidth || 1920;
|
|
139
|
-
canvas.height = videoElement.videoHeight || 1080;
|
|
140
|
-
const context = canvas.getContext('2d');
|
|
141
|
-
if (context) {
|
|
142
|
-
context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
|
|
143
|
-
// Convierte el contenido del canvas a un Blob
|
|
144
|
-
canvas.toBlob((blob) => {
|
|
145
|
-
if (blob && blob.size > 0) {
|
|
146
|
-
this.file = this.blobToFile(blob, 'dpi.jpeg');
|
|
147
|
-
videoElement.pause();
|
|
148
|
-
// Remover la clase de progreso y mostrar el botón nuevamente
|
|
149
|
-
this.renderer.removeClass(this.progressRing.nativeElement, 'progress-active');
|
|
150
|
-
this.isCapturing = false;
|
|
151
|
-
this.onTakePicture(this.file).catch((err) => console.error('Error en onTakePicture:', err));
|
|
152
|
-
}
|
|
153
|
-
else {
|
|
154
|
-
console.error('El Blob generado está vacío o no válido.');
|
|
155
|
-
this.isCapturing = false;
|
|
156
|
-
}
|
|
157
|
-
}, 'image/jpeg', 0.75);
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
blobToFile(blob, fileName) {
|
|
161
|
-
const b = blob;
|
|
162
|
-
b.lastModified = new Date().getTime();
|
|
163
|
-
b.lastModifiedDate = new Date();
|
|
164
|
-
b.name = fileName;
|
|
165
|
-
//Cast to a File() type
|
|
166
|
-
return b;
|
|
167
|
-
}
|
|
168
|
-
stopCamera() {
|
|
169
|
-
if (this.stream) {
|
|
170
|
-
this.stream.getTracks().forEach(track => track.stop());
|
|
171
|
-
this.stream = null;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
closeOverlay() {
|
|
175
|
-
this.stopCamera();
|
|
176
|
-
this.modalController.dismiss();
|
|
177
|
-
}
|
|
178
|
-
closeRequestedFunction() {
|
|
179
|
-
console.log('═══════════════════════════════════════════════════════');
|
|
180
|
-
console.log('🚪🚪🚪 BOTÓN X PRESIONADO (PhotoSelfieCamera) 🚪🚪🚪');
|
|
181
|
-
console.log('═══════════════════════════════════════════════════════');
|
|
182
|
-
// Solo detener la cámara, NO cerrar el modal todavía
|
|
183
|
-
this.stopCamera();
|
|
184
|
-
console.log('✅ Cámara detenida');
|
|
185
|
-
console.log('🔍 closeRequested está definido?', !!this.closeRequested);
|
|
186
|
-
// Invocar callback del padre INMEDIATAMENTE (antes de cerrar el modal)
|
|
187
|
-
if (this.closeRequested) {
|
|
188
|
-
console.log('🚪 Invocando callback del padre...');
|
|
189
|
-
this.closeRequested().then(() => {
|
|
190
|
-
console.log('✅ Callback del padre completado');
|
|
191
|
-
}).catch((error) => {
|
|
192
|
-
console.error('❌ Error al ejecutar callback:', error);
|
|
193
|
-
});
|
|
194
|
-
}
|
|
195
|
-
else {
|
|
196
|
-
console.error('❌❌❌ NO HAY CALLBACK closeRequested DEFINIDO ❌❌❌');
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
resumeCamera() {
|
|
200
|
-
const videoElement = this.videoElement?.nativeElement;
|
|
201
|
-
if (videoElement && videoElement.paused) {
|
|
202
|
-
videoElement.play().catch((error) => {
|
|
203
|
-
console.error('Error al intentar reanudar el video:', error);
|
|
204
|
-
});
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
static { this.ɵfac = function PhotoSelfieCameraComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PhotoSelfieCameraComponent)(i0.ɵɵdirectiveInject(i1.Platform), i0.ɵɵdirectiveInject(i1.ModalController), i0.ɵɵdirectiveInject(i2.DomSanitizer), i0.ɵɵdirectiveInject(i3.ModalDpiServices), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Renderer2)); }; }
|
|
208
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhotoSelfieCameraComponent, selectors: [["app-photo-selfie-camera"]], viewQuery: function PhotoSelfieCameraComponent_Query(rf, ctx) { if (rf & 1) {
|
|
209
|
-
i0.ɵɵviewQuery(_c0, 5);
|
|
210
|
-
i0.ɵɵviewQuery(_c1, 5);
|
|
211
|
-
} if (rf & 2) {
|
|
212
|
-
let _t;
|
|
213
|
-
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.videoElement = _t.first);
|
|
214
|
-
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.progressRing = _t.first);
|
|
215
|
-
} }, inputs: { text1: "text1", text2: "text2", onTakePicture: "onTakePicture", closeRequested: "closeRequested" }, decls: 19, vars: 3, consts: [["videoElement", ""], ["progressRing", ""], ["color", "light", 1, "custom-content"], [1, "ion-no-border"], ["color", "light"], ["slot", "end"], [3, "click"], ["name", "close"], [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"], [1, "text-center"], ["class", "countdown-overlay", 4, "ngIf"], [1, "fixed-footer"], ["expand", "block", 3, "click"], [1, "countdown-overlay"], [1, "countdown-circle"], [1, "countdown-number"]], template: function PhotoSelfieCameraComponent_Template(rf, ctx) { if (rf & 1) {
|
|
216
|
-
const _r1 = i0.ɵɵgetCurrentView();
|
|
217
|
-
i0.ɵɵelementStart(0, "ion-content", 2)(1, "ion-header", 3)(2, "ion-toolbar", 4)(3, "ion-buttons", 5)(4, "ion-button", 6);
|
|
218
|
-
i0.ɵɵlistener("click", function PhotoSelfieCameraComponent_Template_ion_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeRequestedFunction()); });
|
|
219
|
-
i0.ɵɵelement(5, "ion-icon", 7);
|
|
220
|
-
i0.ɵɵelementEnd()()()();
|
|
221
|
-
i0.ɵɵelementStart(6, "div", 8)(7, "div", 9);
|
|
222
|
-
i0.ɵɵelement(8, "video", 10, 0);
|
|
223
|
-
i0.ɵɵnamespaceSVG();
|
|
224
|
-
i0.ɵɵelementStart(10, "svg", 11, 1);
|
|
225
|
-
i0.ɵɵelement(12, "circle", 12);
|
|
226
|
-
i0.ɵɵelementEnd()();
|
|
227
|
-
i0.ɵɵnamespaceHTML();
|
|
228
|
-
i0.ɵɵelementStart(13, "p", 13);
|
|
229
|
-
i0.ɵɵtext(14, "Permanece quieto, con tu rostro en el centro del circulo");
|
|
230
|
-
i0.ɵɵelementEnd();
|
|
231
|
-
i0.ɵɵtemplate(15, PhotoSelfieCameraComponent_div_15_Template, 4, 1, "div", 14);
|
|
232
|
-
i0.ɵɵelementStart(16, "div", 15)(17, "ion-button", 16);
|
|
233
|
-
i0.ɵɵlistener("click", function PhotoSelfieCameraComponent_Template_ion_button_click_17_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.capturePhoto()); });
|
|
234
|
-
i0.ɵɵtext(18, " Tomar Fotograf\u00EDa ");
|
|
235
|
-
i0.ɵɵelementEnd()()()();
|
|
236
|
-
} if (rf & 2) {
|
|
237
|
-
i0.ɵɵadvance(15);
|
|
238
|
-
i0.ɵɵproperty("ngIf", ctx.showCountdown);
|
|
239
|
-
i0.ɵɵadvance();
|
|
240
|
-
i0.ɵɵclassProp("hidden", ctx.isCapturing);
|
|
241
|
-
} }, dependencies: [i4.NgIf, i1.IonButton, i1.IonButtons, i1.IonContent, i1.IonHeader, i1.IonIcon, 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: white;\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\n video[_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 3s 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 3s 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 to {\r\n stroke-dashoffset: 0;\r\n }\r\n }\r\n \r\n //[_ngcontent-%COMP%] div[_ngcontent-%COMP%] //[_ngcontent-%COMP%] {\r\n // color: #ffffff;\r\n // font-weight: 50px;\r\n // border-radius: 20px;\r\n // margin-top: 20px;\r\n // //width: 90%;\r\n // //max-width: 300px;\r\n // align-self: center;\r\n // text-transform: none;\r\n \r\n // --background: var(--purple-primary);\r\n // --background-hover: var(--purple-secondary);\r\n // --background-activated: var(--purple-secondary);\r\n // --background-focused: var(--purple-secondary);\r\n \r\n // --color: var(--purple-primary);\r\n \r\n // --border-radius: 20px;\r\n // --border-color: var(--purple-primary);\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: var(--purple-secondary);\r\n \r\n \r\n // --padding-top: 10px;\r\n // --padding-bottom: 10px;\r\n // }\r\n \r\n .text-container[_ngcontent-%COMP%] {\r\n height: 40px;\r\n color: black;\r\n }\r\n \r\n ion-header[_ngcontent-%COMP%] {\r\n --background: #ffffff; \n\r\n }\r\n \r\n \r\n \r\n .centered-title[_ngcontent-%COMP%] {\r\n text-align: center;\r\n width: 100%; \n\r\n font-weight: bold;\r\n }\r\n \r\n .fixed-footer[_ngcontent-%COMP%] {\r\n position: fixed;\r\n bottom:
|
|
242
|
-
}
|
|
243
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PhotoSelfieCameraComponent, [{
|
|
244
|
-
type: Component,
|
|
245
|
-
args: [{ selector: 'app-photo-selfie-camera', 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\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)=\"closeRequestedFunction()\">\r\n <ion-icon name=\"close\"></ion-icon>\r\n </ion-button>\r\n </ion-buttons>\r\n </ion-toolbar>\r\n </ion-header>\r\n\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\r\n <p class=\"text-center\">Permanece quieto, con tu rostro en el centro del circulo</p>\r\n <!-- Efecto de c\u00EDrculo morado con cuenta regresiva -->\r\n <div class=\"countdown-overlay\" *ngIf=\"showCountdown\">\r\n <div class=\"countdown-circle\">\r\n <span class=\"countdown-number\">{{ countdown }}</span>\r\n </div>\r\n </div>\r\n <!-- Bot\u00F3n expandido y centrado para tomar foto -->\r\n <div class=\"fixed-footer\" [class.hidden]=\"isCapturing\">\r\n <ion-button expand=\"block\" (click)=\"capturePhoto()\">\r\n Tomar Fotograf\u00EDa\r\n </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: white;\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\n video {\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 */\r\n stroke-dashoffset: 880;\r\n /* Oculto por completo al inicio */\r\n transition: stroke-dashoffset 3s 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 3s linear forwards;\r\n }\r\n \r\n @keyframes progress-animation {\r\n from {\r\n stroke-dashoffset: 880;\r\n }\r\n to {\r\n stroke-dashoffset: 0;\r\n }\r\n }\r\n \r\n // div \r\n // {\r\n // color: #ffffff;\r\n // font-weight: 50px;\r\n // border-radius: 20px;\r\n // margin-top: 20px;\r\n // //width: 90%;\r\n // //max-width: 300px;\r\n // align-self: center;\r\n // text-transform: none;\r\n \r\n // --background: var(--purple-primary);\r\n // --background-hover: var(--purple-secondary);\r\n // --background-activated: var(--purple-secondary);\r\n // --background-focused: var(--purple-secondary);\r\n \r\n // --color: var(--purple-primary);\r\n \r\n // --border-radius: 20px;\r\n // --border-color: var(--purple-primary);\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: var(--purple-secondary);\r\n \r\n \r\n // --padding-top: 10px;\r\n // --padding-bottom: 10px;\r\n // }\r\n \r\n .text-container {\r\n height: 40px;\r\n color: black;\r\n }\r\n \r\n ion-header {\r\n --background: #ffffff; /* Fondo blanco para el header */\r\n }\r\n \r\n \r\n \r\n .centered-title {\r\n text-align: center;\r\n width: 100%; /* 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: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 10px;\r\n background-color: #fff;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n \r\n ion-button {\r\n width: 90%;\r\n max-width: 300px;\r\n margin: 0 auto;\r\n background-color: #ffcc00;\r\n color: #ffffff;\r\n font-weight: bold;\r\n border-radius: 20px;\r\n \r\n --background: var(--purple-primary);\r\n --background-hover: var(--purple-secondary);\r\n --background-activated: var(--purple-secondary);\r\n --background-focused: var(--purple-secondary);\r\n \r\n --color: var(--purple-primary);\r\n \r\n --border-radius: 20px;\r\n --border-color: var(--purple-primary);\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: var(--purple-secondary);\r\n\r\n &:hover {\r\n background-color: #ffb300;\r\n }\r\n\r\n &:active {\r\n background-color: #e6a800;\r\n }\r\n }\r\n\r\n // Clase para ocultar el bot\u00F3n durante la captura\r\n &.hidden {\r\n display: none;\r\n }\r\n } \r\n ion-header {\r\n --background: #ffffff; /* Fondo blanco */\r\n color: #000000; /* Texto negro */\r\n }\r\n \r\n ion-toolbar {\r\n --ion-background-color: #ffffff !important;\r\n --background: #ffffff !important;\r\n color: #000000;\r\n }\r\n \r\n \r\n ion-header {\r\n --background: #ffffff; /* Fondo blanco */\r\n }\r\n \r\n ion-toolbar {\r\n --ion-background-color: #ffffff !important;\r\n --background: #ffffff !important;\r\n color: #000000;\r\n display: flex;\r\n justify-content: space-between; /* Espacio entre t\u00EDtulo y bot\u00F3n */\r\n align-items: center;\r\n }\r\n \r\n .centered-title {\r\n flex: 1;\r\n text-align: center; /* Centrar el t\u00EDtulo */\r\n font-weight: bold;\r\n color: #000000;\r\n margin: 0; /* Quita cualquier margen del t\u00EDtulo */\r\n }\r\n \r\n ion-buttons {\r\n justify-content: flex-end; /* Alinea el bot\u00F3n a la derecha */\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); /* 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; /* Asegurarse de que est\u00E9 encima de otros elementos */\r\n animation: fadeIn 0.5s ease-out, fadeOut 0.5s ease-out 2.5s; /* Animaciones de entrada y salida */\r\n box-sizing: border-box;\r\n border-radius: 0px;\r\n \r\n }\r\n \r\n ion-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: white;\r\n animation: scaleUp 0.5s ease-out, scaleDown 0.5s ease-out 2.5s; /* 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 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 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 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 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); /* Fondo oscuro semi-transparente */\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000; /* 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\n ion-spinner {\r\n color: white;\r\n width: 50px;\r\n height: 50px;\r\n }\r\n \r\n // Estilos para el c\u00EDrculo morado con cuenta regresiva\r\n .countdown-overlay {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 10;\r\n }\r\n \r\n .countdown-circle {\r\n width: 200px;\r\n height: 200px;\r\n border: 10px solid purple;\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n }\r\n \r\n .countdown-number {\r\n font-size: 3rem;\r\n font-weight: bold;\r\n color: purple;\r\n }\r\n \r\n // Estilos para el bot\u00F3n redondo de tomar foto\r\n .capture-button {\r\n width: 70px;\r\n height: 70px;\r\n border-radius: 50%;\r\n background-color: purple;\r\n color: white;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n margin: 0 auto;\r\n }"] }]
|
|
246
|
-
}], () => [{ type: i1.Platform }, { type: i1.ModalController }, { type: i2.DomSanitizer }, { type: i3.ModalDpiServices }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], { videoElement: [{
|
|
247
|
-
type: ViewChild,
|
|
248
|
-
args: ['videoElement']
|
|
249
|
-
}], progressRing: [{
|
|
250
|
-
type: ViewChild,
|
|
251
|
-
args: ['progressRing', { static: false }]
|
|
252
|
-
}], text1: [{
|
|
253
|
-
type: Input
|
|
254
|
-
}], text2: [{
|
|
255
|
-
type: Input
|
|
256
|
-
}], onTakePicture: [{
|
|
257
|
-
type: Input
|
|
258
|
-
}], closeRequested: [{
|
|
259
|
-
type: Input
|
|
260
|
-
}] }); })();
|
|
261
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PhotoSelfieCameraComponent, { className: "PhotoSelfieCameraComponent", filePath: "src\\app\\pages\\id-vision\\components\\photo-selfie-camera\\photo-selfie-camera.component.ts", lineNumber: 17 }); })();
|
|
1
|
+
import { Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
|
|
2
|
+
import { Camera } from '@capacitor/camera';
|
|
3
|
+
import { Capacitor } from '@capacitor/core';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
import * as i1 from "@ionic/angular";
|
|
6
|
+
import * as i2 from "@angular/platform-browser";
|
|
7
|
+
import * as i3 from "../../services/modal-services/modal-dpi-services";
|
|
8
|
+
import * as i4 from "@angular/common";
|
|
9
|
+
const _c0 = ["videoElement"];
|
|
10
|
+
const _c1 = ["progressRing"];
|
|
11
|
+
function PhotoSelfieCameraComponent_div_15_Template(rf, ctx) { if (rf & 1) {
|
|
12
|
+
i0.ɵɵelementStart(0, "div", 17)(1, "div", 18)(2, "span", 19);
|
|
13
|
+
i0.ɵɵtext(3);
|
|
14
|
+
i0.ɵɵelementEnd()()();
|
|
15
|
+
} if (rf & 2) {
|
|
16
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
17
|
+
i0.ɵɵadvance(3);
|
|
18
|
+
i0.ɵɵtextInterpolate(ctx_r1.countdown);
|
|
19
|
+
} }
|
|
20
|
+
export class PhotoSelfieCameraComponent {
|
|
21
|
+
// overlaySrc: String = '';
|
|
22
|
+
constructor(platform, modalController, sanitizer, modalDpiServices, cdRef, // Agregado para detectar cambios
|
|
23
|
+
renderer // Agregado para manipular clases
|
|
24
|
+
) {
|
|
25
|
+
this.platform = platform;
|
|
26
|
+
this.modalController = modalController;
|
|
27
|
+
this.sanitizer = sanitizer;
|
|
28
|
+
this.modalDpiServices = modalDpiServices;
|
|
29
|
+
this.cdRef = cdRef;
|
|
30
|
+
this.renderer = renderer;
|
|
31
|
+
this.text1 = '';
|
|
32
|
+
this.text2 = '';
|
|
33
|
+
this.capturedImage = null;
|
|
34
|
+
this.stream = null;
|
|
35
|
+
this.isLoading = true;
|
|
36
|
+
this.showCountdown = false;
|
|
37
|
+
this.countdown = 3;
|
|
38
|
+
this.isCapturing = false;
|
|
39
|
+
this.capturedImageUrl = null;
|
|
40
|
+
this.showProgress = false;
|
|
41
|
+
this.timeRemaining = 0;
|
|
42
|
+
this.maxRecordingTime = 3000; // 3 segundos
|
|
43
|
+
console.log('🏗️ PhotoSelfieCamera: Constructor ejecutado');
|
|
44
|
+
this.isAndroid = this.platform.is('android');
|
|
45
|
+
this.isIOS = this.platform.is('ios');
|
|
46
|
+
}
|
|
47
|
+
async ngOnDestroy() {
|
|
48
|
+
this.stopCamera();
|
|
49
|
+
}
|
|
50
|
+
async ngAfterViewInit() {
|
|
51
|
+
console.log('🔍 PhotoSelfieCamera inicializado');
|
|
52
|
+
console.log('🔍 closeRequested callback:', this.closeRequested ? 'DEFINIDO ✅' : 'NO DEFINIDO ❌');
|
|
53
|
+
if (this.isAndroid || this.isIOS) {
|
|
54
|
+
await this.requestPermissions();
|
|
55
|
+
}
|
|
56
|
+
await this.initCamera();
|
|
57
|
+
this.isLoading = false;
|
|
58
|
+
this.modalDpiServices.closePhotoSelfieSubject$.subscribe(() => {
|
|
59
|
+
this.closeOverlay();
|
|
60
|
+
});
|
|
61
|
+
this.modalDpiServices.resumePhotoSubject$.subscribe(() => {
|
|
62
|
+
this.resumeCamera();
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
async requestPermissions() {
|
|
66
|
+
if (Capacitor.getPlatform() !== 'web') {
|
|
67
|
+
if (this.isAndroid || this.isIOS) {
|
|
68
|
+
const permissions = await Camera.requestPermissions();
|
|
69
|
+
if (permissions.camera === 'denied') {
|
|
70
|
+
console.error('Permiso de cámara denegado');
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
async initCamera() {
|
|
77
|
+
try {
|
|
78
|
+
const constraints = {
|
|
79
|
+
video: {
|
|
80
|
+
width: { ideal: 1920 },
|
|
81
|
+
height: { ideal: 1080 },
|
|
82
|
+
facingMode: 'user'
|
|
83
|
+
},
|
|
84
|
+
audio: false
|
|
85
|
+
};
|
|
86
|
+
this.stream = await navigator.mediaDevices.getUserMedia(constraints);
|
|
87
|
+
const videoElement = this.videoElement.nativeElement;
|
|
88
|
+
videoElement.srcObject = this.stream;
|
|
89
|
+
videoElement.autoplay = true;
|
|
90
|
+
videoElement.playsInline = true;
|
|
91
|
+
videoElement.muted = true;
|
|
92
|
+
videoElement.onloadedmetadata = () => {
|
|
93
|
+
videoElement.play().catch((error) => {
|
|
94
|
+
console.error('Error al intentar reproducir el video:', error);
|
|
95
|
+
});
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
catch (error) {
|
|
99
|
+
console.error('Error al inicializar la cámara:', error);
|
|
100
|
+
this.isLoading = false;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
async startCountdown() {
|
|
104
|
+
this.showCountdown = true;
|
|
105
|
+
for (let i = this.countdown; i > 0; i--) {
|
|
106
|
+
this.countdown = i;
|
|
107
|
+
this.cdRef.detectChanges();
|
|
108
|
+
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
109
|
+
}
|
|
110
|
+
this.showCountdown = false;
|
|
111
|
+
this.cdRef.detectChanges();
|
|
112
|
+
this.capturePhoto();
|
|
113
|
+
}
|
|
114
|
+
async startProgressAndCapture() {
|
|
115
|
+
this.showProgress = true;
|
|
116
|
+
const circle = document.querySelector('.progress-ring__circle');
|
|
117
|
+
if (circle) {
|
|
118
|
+
circle.style.strokeDashoffset = '0'; // Inicia la animación
|
|
119
|
+
}
|
|
120
|
+
await new Promise(resolve => setTimeout(resolve, 3000)); // Espera 3 segundos
|
|
121
|
+
this.showProgress = false;
|
|
122
|
+
await this.capturePhoto();
|
|
123
|
+
}
|
|
124
|
+
async capturePhoto() {
|
|
125
|
+
if (!this.stream) {
|
|
126
|
+
console.error('La cámara no está inicializada.');
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
// Ocultar el botón mientras se toma la foto
|
|
130
|
+
this.isCapturing = true;
|
|
131
|
+
// Activar la animación del círculo progresivo
|
|
132
|
+
this.renderer.addClass(this.progressRing.nativeElement, 'progress-active');
|
|
133
|
+
this.timeRemaining = this.maxRecordingTime / 1000;
|
|
134
|
+
await new Promise(resolve => setTimeout(resolve, this.maxRecordingTime)); // Espera 3 segundos
|
|
135
|
+
// Tomar la foto después de la animación
|
|
136
|
+
const canvas = document.createElement('canvas');
|
|
137
|
+
const videoElement = this.videoElement.nativeElement;
|
|
138
|
+
canvas.width = videoElement.videoWidth || 1920;
|
|
139
|
+
canvas.height = videoElement.videoHeight || 1080;
|
|
140
|
+
const context = canvas.getContext('2d');
|
|
141
|
+
if (context) {
|
|
142
|
+
context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
|
|
143
|
+
// Convierte el contenido del canvas a un Blob
|
|
144
|
+
canvas.toBlob((blob) => {
|
|
145
|
+
if (blob && blob.size > 0) {
|
|
146
|
+
this.file = this.blobToFile(blob, 'dpi.jpeg');
|
|
147
|
+
videoElement.pause();
|
|
148
|
+
// Remover la clase de progreso y mostrar el botón nuevamente
|
|
149
|
+
this.renderer.removeClass(this.progressRing.nativeElement, 'progress-active');
|
|
150
|
+
this.isCapturing = false;
|
|
151
|
+
this.onTakePicture(this.file).catch((err) => console.error('Error en onTakePicture:', err));
|
|
152
|
+
}
|
|
153
|
+
else {
|
|
154
|
+
console.error('El Blob generado está vacío o no válido.');
|
|
155
|
+
this.isCapturing = false;
|
|
156
|
+
}
|
|
157
|
+
}, 'image/jpeg', 0.75);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
blobToFile(blob, fileName) {
|
|
161
|
+
const b = blob;
|
|
162
|
+
b.lastModified = new Date().getTime();
|
|
163
|
+
b.lastModifiedDate = new Date();
|
|
164
|
+
b.name = fileName;
|
|
165
|
+
//Cast to a File() type
|
|
166
|
+
return b;
|
|
167
|
+
}
|
|
168
|
+
stopCamera() {
|
|
169
|
+
if (this.stream) {
|
|
170
|
+
this.stream.getTracks().forEach(track => track.stop());
|
|
171
|
+
this.stream = null;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
closeOverlay() {
|
|
175
|
+
this.stopCamera();
|
|
176
|
+
this.modalController.dismiss();
|
|
177
|
+
}
|
|
178
|
+
closeRequestedFunction() {
|
|
179
|
+
console.log('═══════════════════════════════════════════════════════');
|
|
180
|
+
console.log('🚪🚪🚪 BOTÓN X PRESIONADO (PhotoSelfieCamera) 🚪🚪🚪');
|
|
181
|
+
console.log('═══════════════════════════════════════════════════════');
|
|
182
|
+
// Solo detener la cámara, NO cerrar el modal todavía
|
|
183
|
+
this.stopCamera();
|
|
184
|
+
console.log('✅ Cámara detenida');
|
|
185
|
+
console.log('🔍 closeRequested está definido?', !!this.closeRequested);
|
|
186
|
+
// Invocar callback del padre INMEDIATAMENTE (antes de cerrar el modal)
|
|
187
|
+
if (this.closeRequested) {
|
|
188
|
+
console.log('🚪 Invocando callback del padre...');
|
|
189
|
+
this.closeRequested().then(() => {
|
|
190
|
+
console.log('✅ Callback del padre completado');
|
|
191
|
+
}).catch((error) => {
|
|
192
|
+
console.error('❌ Error al ejecutar callback:', error);
|
|
193
|
+
});
|
|
194
|
+
}
|
|
195
|
+
else {
|
|
196
|
+
console.error('❌❌❌ NO HAY CALLBACK closeRequested DEFINIDO ❌❌❌');
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
resumeCamera() {
|
|
200
|
+
const videoElement = this.videoElement?.nativeElement;
|
|
201
|
+
if (videoElement && videoElement.paused) {
|
|
202
|
+
videoElement.play().catch((error) => {
|
|
203
|
+
console.error('Error al intentar reanudar el video:', error);
|
|
204
|
+
});
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
static { this.ɵfac = function PhotoSelfieCameraComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PhotoSelfieCameraComponent)(i0.ɵɵdirectiveInject(i1.Platform), i0.ɵɵdirectiveInject(i1.ModalController), i0.ɵɵdirectiveInject(i2.DomSanitizer), i0.ɵɵdirectiveInject(i3.ModalDpiServices), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Renderer2)); }; }
|
|
208
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhotoSelfieCameraComponent, selectors: [["app-photo-selfie-camera"]], viewQuery: function PhotoSelfieCameraComponent_Query(rf, ctx) { if (rf & 1) {
|
|
209
|
+
i0.ɵɵviewQuery(_c0, 5);
|
|
210
|
+
i0.ɵɵviewQuery(_c1, 5);
|
|
211
|
+
} if (rf & 2) {
|
|
212
|
+
let _t;
|
|
213
|
+
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.videoElement = _t.first);
|
|
214
|
+
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.progressRing = _t.first);
|
|
215
|
+
} }, inputs: { text1: "text1", text2: "text2", onTakePicture: "onTakePicture", closeRequested: "closeRequested" }, decls: 19, vars: 3, consts: [["videoElement", ""], ["progressRing", ""], ["color", "light", 1, "custom-content"], [1, "ion-no-border"], ["color", "light"], ["slot", "end"], [3, "click"], ["name", "close"], [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"], [1, "text-center"], ["class", "countdown-overlay", 4, "ngIf"], [1, "fixed-footer"], ["expand", "block", 3, "click"], [1, "countdown-overlay"], [1, "countdown-circle"], [1, "countdown-number"]], template: function PhotoSelfieCameraComponent_Template(rf, ctx) { if (rf & 1) {
|
|
216
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
217
|
+
i0.ɵɵelementStart(0, "ion-content", 2)(1, "ion-header", 3)(2, "ion-toolbar", 4)(3, "ion-buttons", 5)(4, "ion-button", 6);
|
|
218
|
+
i0.ɵɵlistener("click", function PhotoSelfieCameraComponent_Template_ion_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeRequestedFunction()); });
|
|
219
|
+
i0.ɵɵelement(5, "ion-icon", 7);
|
|
220
|
+
i0.ɵɵelementEnd()()()();
|
|
221
|
+
i0.ɵɵelementStart(6, "div", 8)(7, "div", 9);
|
|
222
|
+
i0.ɵɵelement(8, "video", 10, 0);
|
|
223
|
+
i0.ɵɵnamespaceSVG();
|
|
224
|
+
i0.ɵɵelementStart(10, "svg", 11, 1);
|
|
225
|
+
i0.ɵɵelement(12, "circle", 12);
|
|
226
|
+
i0.ɵɵelementEnd()();
|
|
227
|
+
i0.ɵɵnamespaceHTML();
|
|
228
|
+
i0.ɵɵelementStart(13, "p", 13);
|
|
229
|
+
i0.ɵɵtext(14, "Permanece quieto, con tu rostro en el centro del circulo");
|
|
230
|
+
i0.ɵɵelementEnd();
|
|
231
|
+
i0.ɵɵtemplate(15, PhotoSelfieCameraComponent_div_15_Template, 4, 1, "div", 14);
|
|
232
|
+
i0.ɵɵelementStart(16, "div", 15)(17, "ion-button", 16);
|
|
233
|
+
i0.ɵɵlistener("click", function PhotoSelfieCameraComponent_Template_ion_button_click_17_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.capturePhoto()); });
|
|
234
|
+
i0.ɵɵtext(18, " Tomar Fotograf\u00EDa ");
|
|
235
|
+
i0.ɵɵelementEnd()()()();
|
|
236
|
+
} if (rf & 2) {
|
|
237
|
+
i0.ɵɵadvance(15);
|
|
238
|
+
i0.ɵɵproperty("ngIf", ctx.showCountdown);
|
|
239
|
+
i0.ɵɵadvance();
|
|
240
|
+
i0.ɵɵclassProp("hidden", ctx.isCapturing);
|
|
241
|
+
} }, dependencies: [i4.NgIf, i1.IonButton, i1.IonButtons, i1.IonContent, i1.IonHeader, i1.IonIcon, 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: white;\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\n video[_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 3s 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 3s 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 to {\r\n stroke-dashoffset: 0;\r\n }\r\n }\r\n \r\n //[_ngcontent-%COMP%] div[_ngcontent-%COMP%] //[_ngcontent-%COMP%] {\r\n // color: #ffffff;\r\n // font-weight: 50px;\r\n // border-radius: 20px;\r\n // margin-top: 20px;\r\n // //width: 90%;\r\n // //max-width: 300px;\r\n // align-self: center;\r\n // text-transform: none;\r\n \r\n // --background: var(--purple-primary);\r\n // --background-hover: var(--purple-secondary);\r\n // --background-activated: var(--purple-secondary);\r\n // --background-focused: var(--purple-secondary);\r\n \r\n // --color: var(--purple-primary);\r\n \r\n // --border-radius: 20px;\r\n // --border-color: var(--purple-primary);\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: var(--purple-secondary);\r\n \r\n \r\n // --padding-top: 10px;\r\n // --padding-bottom: 10px;\r\n // }\r\n \r\n .text-container[_ngcontent-%COMP%] {\r\n height: 40px;\r\n color: black;\r\n }\r\n \r\n ion-header[_ngcontent-%COMP%] {\r\n --background: #ffffff; \n\r\n }\r\n \r\n \r\n \r\n .centered-title[_ngcontent-%COMP%] {\r\n text-align: center;\r\n width: 100%; \n\r\n font-weight: bold;\r\n }\r\n \r\n .fixed-footer[_ngcontent-%COMP%] {\r\n position: fixed;\r\n bottom: 10vh; // Sube el bot\u00F3n un 10% desde abajo\r\n left: 0;\r\n width: 100%;\r\n padding: 10px;\r\n background-color: #fff;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n \r\n ion-button {\r\n width: 90%;\r\n max-width: 300px;\r\n margin: 0 auto;\r\n background-color: #ffcc00;\r\n color: #ffffff;\r\n font-weight: bold;\r\n border-radius: 20px;\r\n \r\n --background: var(--purple-primary);\r\n --background-hover: var(--purple-secondary);\r\n --background-activated: var(--purple-secondary);\r\n --background-focused: var(--purple-secondary);\r\n \r\n --color: var(--purple-primary);\r\n \r\n --border-radius: 20px;\r\n --border-color: var(--purple-primary);\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: var(--purple-secondary);\r\n\r\n &:hover {\r\n background-color: #ffb300;\r\n }\r\n\r\n &:active {\r\n background-color: #e6a800;\r\n }\r\n }\r\n\r\n // Clase para ocultar el bot\u00F3n durante la captura\r\n &.hidden {\r\n display: none;\r\n }\r\n } \r\n ion-header[_ngcontent-%COMP%] {\r\n --background: #ffffff; \n\r\n color: #000000; \n\r\n }\r\n \r\n ion-toolbar[_ngcontent-%COMP%] {\r\n --ion-background-color: #ffffff !important;\r\n --background: #ffffff !important;\r\n color: #000000;\r\n }\r\n \r\n \r\n ion-header[_ngcontent-%COMP%] {\r\n --background: #ffffff; \n\r\n }\r\n \r\n ion-toolbar[_ngcontent-%COMP%] {\r\n --ion-background-color: #ffffff !important;\r\n --background: #ffffff !important;\r\n color: #000000;\r\n display: flex;\r\n justify-content: space-between; \n\r\n align-items: center;\r\n }\r\n \r\n .centered-title[_ngcontent-%COMP%] {\r\n flex: 1;\r\n text-align: center; \n\r\n font-weight: bold;\r\n color: #000000;\r\n margin: 0; \n\r\n }\r\n \r\n ion-buttons[_ngcontent-%COMP%] {\r\n justify-content: flex-end; \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); \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; \n\r\n animation: _ngcontent-%COMP%_fadeIn 0.5s ease-out, _ngcontent-%COMP%_fadeOut 0.5s ease-out 2.5s; \n\r\n box-sizing: border-box;\r\n border-radius: 0px;\r\n \r\n }\r\n \r\n ion-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: white;\r\n animation: _ngcontent-%COMP%_scaleUp 0.5s ease-out, _ngcontent-%COMP%_scaleDown 0.5s ease-out 2.5s; \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 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 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 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 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); \n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000; \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\n ion-spinner[_ngcontent-%COMP%] {\r\n color: white;\r\n width: 50px;\r\n height: 50px;\r\n }\r\n \r\n //[_ngcontent-%COMP%] Estilos[_ngcontent-%COMP%] para[_ngcontent-%COMP%] el[_ngcontent-%COMP%] c\u00EDrculo[_ngcontent-%COMP%] morado[_ngcontent-%COMP%] con[_ngcontent-%COMP%] cuenta[_ngcontent-%COMP%] regresiva\r\n[_ngcontent-%COMP%] .countdown-overlay[_ngcontent-%COMP%] {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 10;\r\n }\r\n \r\n .countdown-circle[_ngcontent-%COMP%] {\r\n width: 200px;\r\n height: 200px;\r\n border: 10px solid purple;\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n }\r\n \r\n .countdown-number[_ngcontent-%COMP%] {\r\n font-size: 3rem;\r\n font-weight: bold;\r\n color: purple;\r\n }\r\n \r\n //[_ngcontent-%COMP%] Estilos[_ngcontent-%COMP%] para[_ngcontent-%COMP%] el[_ngcontent-%COMP%] bot\u00F3n[_ngcontent-%COMP%] redondo[_ngcontent-%COMP%] de[_ngcontent-%COMP%] tomar[_ngcontent-%COMP%] foto\r\n[_ngcontent-%COMP%] .capture-button[_ngcontent-%COMP%] {\r\n width: 70px;\r\n height: 70px;\r\n border-radius: 50%;\r\n background-color: purple;\r\n color: white;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n margin: 0 auto;\r\n }"] }); }
|
|
242
|
+
}
|
|
243
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PhotoSelfieCameraComponent, [{
|
|
244
|
+
type: Component,
|
|
245
|
+
args: [{ selector: 'app-photo-selfie-camera', 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\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)=\"closeRequestedFunction()\">\r\n <ion-icon name=\"close\"></ion-icon>\r\n </ion-button>\r\n </ion-buttons>\r\n </ion-toolbar>\r\n </ion-header>\r\n\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\r\n <p class=\"text-center\">Permanece quieto, con tu rostro en el centro del circulo</p>\r\n <!-- Efecto de c\u00EDrculo morado con cuenta regresiva -->\r\n <div class=\"countdown-overlay\" *ngIf=\"showCountdown\">\r\n <div class=\"countdown-circle\">\r\n <span class=\"countdown-number\">{{ countdown }}</span>\r\n </div>\r\n </div>\r\n <!-- Bot\u00F3n expandido y centrado para tomar foto -->\r\n <div class=\"fixed-footer\" [class.hidden]=\"isCapturing\">\r\n <ion-button expand=\"block\" (click)=\"capturePhoto()\">\r\n Tomar Fotograf\u00EDa\r\n </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: white;\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\n video {\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 */\r\n stroke-dashoffset: 880;\r\n /* Oculto por completo al inicio */\r\n transition: stroke-dashoffset 3s 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 3s linear forwards;\r\n }\r\n \r\n @keyframes progress-animation {\r\n from {\r\n stroke-dashoffset: 880;\r\n }\r\n to {\r\n stroke-dashoffset: 0;\r\n }\r\n }\r\n \r\n // div \r\n // {\r\n // color: #ffffff;\r\n // font-weight: 50px;\r\n // border-radius: 20px;\r\n // margin-top: 20px;\r\n // //width: 90%;\r\n // //max-width: 300px;\r\n // align-self: center;\r\n // text-transform: none;\r\n \r\n // --background: var(--purple-primary);\r\n // --background-hover: var(--purple-secondary);\r\n // --background-activated: var(--purple-secondary);\r\n // --background-focused: var(--purple-secondary);\r\n \r\n // --color: var(--purple-primary);\r\n \r\n // --border-radius: 20px;\r\n // --border-color: var(--purple-primary);\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: var(--purple-secondary);\r\n \r\n \r\n // --padding-top: 10px;\r\n // --padding-bottom: 10px;\r\n // }\r\n \r\n .text-container {\r\n height: 40px;\r\n color: black;\r\n }\r\n \r\n ion-header {\r\n --background: #ffffff; /* Fondo blanco para el header */\r\n }\r\n \r\n \r\n \r\n .centered-title {\r\n text-align: center;\r\n width: 100%; /* 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: 10vh; // Sube el bot\u00F3n un 10% desde abajo\r\n left: 0;\r\n width: 100%;\r\n padding: 10px;\r\n background-color: #fff;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n \r\n ion-button {\r\n width: 90%;\r\n max-width: 300px;\r\n margin: 0 auto;\r\n background-color: #ffcc00;\r\n color: #ffffff;\r\n font-weight: bold;\r\n border-radius: 20px;\r\n \r\n --background: var(--purple-primary);\r\n --background-hover: var(--purple-secondary);\r\n --background-activated: var(--purple-secondary);\r\n --background-focused: var(--purple-secondary);\r\n \r\n --color: var(--purple-primary);\r\n \r\n --border-radius: 20px;\r\n --border-color: var(--purple-primary);\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: var(--purple-secondary);\r\n\r\n &:hover {\r\n background-color: #ffb300;\r\n }\r\n\r\n &:active {\r\n background-color: #e6a800;\r\n }\r\n }\r\n\r\n // Clase para ocultar el bot\u00F3n durante la captura\r\n &.hidden {\r\n display: none;\r\n }\r\n } \r\n ion-header {\r\n --background: #ffffff; /* Fondo blanco */\r\n color: #000000; /* Texto negro */\r\n }\r\n \r\n ion-toolbar {\r\n --ion-background-color: #ffffff !important;\r\n --background: #ffffff !important;\r\n color: #000000;\r\n }\r\n \r\n \r\n ion-header {\r\n --background: #ffffff; /* Fondo blanco */\r\n }\r\n \r\n ion-toolbar {\r\n --ion-background-color: #ffffff !important;\r\n --background: #ffffff !important;\r\n color: #000000;\r\n display: flex;\r\n justify-content: space-between; /* Espacio entre t\u00EDtulo y bot\u00F3n */\r\n align-items: center;\r\n }\r\n \r\n .centered-title {\r\n flex: 1;\r\n text-align: center; /* Centrar el t\u00EDtulo */\r\n font-weight: bold;\r\n color: #000000;\r\n margin: 0; /* Quita cualquier margen del t\u00EDtulo */\r\n }\r\n \r\n ion-buttons {\r\n justify-content: flex-end; /* Alinea el bot\u00F3n a la derecha */\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); /* 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; /* Asegurarse de que est\u00E9 encima de otros elementos */\r\n animation: fadeIn 0.5s ease-out, fadeOut 0.5s ease-out 2.5s; /* Animaciones de entrada y salida */\r\n box-sizing: border-box;\r\n border-radius: 0px;\r\n \r\n }\r\n \r\n ion-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: white;\r\n animation: scaleUp 0.5s ease-out, scaleDown 0.5s ease-out 2.5s; /* 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 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 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 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 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); /* Fondo oscuro semi-transparente */\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000; /* 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\n ion-spinner {\r\n color: white;\r\n width: 50px;\r\n height: 50px;\r\n }\r\n \r\n // Estilos para el c\u00EDrculo morado con cuenta regresiva\r\n .countdown-overlay {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 10;\r\n }\r\n \r\n .countdown-circle {\r\n width: 200px;\r\n height: 200px;\r\n border: 10px solid purple;\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n }\r\n \r\n .countdown-number {\r\n font-size: 3rem;\r\n font-weight: bold;\r\n color: purple;\r\n }\r\n \r\n // Estilos para el bot\u00F3n redondo de tomar foto\r\n .capture-button {\r\n width: 70px;\r\n height: 70px;\r\n border-radius: 50%;\r\n background-color: purple;\r\n color: white;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n margin: 0 auto;\r\n }"] }]
|
|
246
|
+
}], () => [{ type: i1.Platform }, { type: i1.ModalController }, { type: i2.DomSanitizer }, { type: i3.ModalDpiServices }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], { videoElement: [{
|
|
247
|
+
type: ViewChild,
|
|
248
|
+
args: ['videoElement']
|
|
249
|
+
}], progressRing: [{
|
|
250
|
+
type: ViewChild,
|
|
251
|
+
args: ['progressRing', { static: false }]
|
|
252
|
+
}], text1: [{
|
|
253
|
+
type: Input
|
|
254
|
+
}], text2: [{
|
|
255
|
+
type: Input
|
|
256
|
+
}], onTakePicture: [{
|
|
257
|
+
type: Input
|
|
258
|
+
}], closeRequested: [{
|
|
259
|
+
type: Input
|
|
260
|
+
}] }); })();
|
|
261
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PhotoSelfieCameraComponent, { className: "PhotoSelfieCameraComponent", filePath: "src\\app\\pages\\id-vision\\components\\photo-selfie-camera\\photo-selfie-camera.component.ts", lineNumber: 17 }); })();
|
|
262
262
|
//# sourceMappingURL=photo-selfie-camera.component.js.map
|