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
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
|
|
2
|
-
import { ModalController, Platform } from '@ionic/angular';
|
|
3
|
-
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
|
|
4
|
-
import { ModalDpiServices } from '../../services/modal-services/modal-dpi-services';
|
|
5
|
-
import * as i0 from "@angular/core";
|
|
6
|
-
export declare class DirectPhotoSelfieComponent implements AfterViewInit, OnDestroy {
|
|
7
|
-
private platform;
|
|
8
|
-
private modalController;
|
|
9
|
-
private sanitizer;
|
|
10
|
-
private modalDpiServices;
|
|
11
|
-
videoElement: ElementRef<HTMLVideoElement>;
|
|
12
|
-
text1: string;
|
|
13
|
-
text2: string;
|
|
14
|
-
onTakePicture: (filePath: File) => Promise<boolean>;
|
|
15
|
-
closeRequested?: () => Promise<void>;
|
|
16
|
-
capturedImage: SafeUrl | null;
|
|
17
|
-
stream: MediaStream | null;
|
|
18
|
-
private isAndroid;
|
|
19
|
-
private isIOS;
|
|
20
|
-
isLoading: boolean;
|
|
21
|
-
showProgress: boolean;
|
|
22
|
-
file?: File;
|
|
23
|
-
capturedImageUrl: string | null;
|
|
24
|
-
constructor(platform: Platform, modalController: ModalController, sanitizer: DomSanitizer, modalDpiServices: ModalDpiServices);
|
|
25
|
-
ngOnDestroy(): Promise<void>;
|
|
26
|
-
ngAfterViewInit(): Promise<void>;
|
|
27
|
-
initCamera(): Promise<void>;
|
|
28
|
-
startProgressAndCapture(): Promise<void>;
|
|
29
|
-
capturePhoto(): Promise<void>;
|
|
30
|
-
blobToFile(blob: Blob, fileName: string): File;
|
|
31
|
-
stopCamera(): void;
|
|
32
|
-
closeOverlay(): void;
|
|
33
|
-
closeRequestedFunction(): void;
|
|
34
|
-
resumeCamera(): void;
|
|
35
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<DirectPhotoSelfieComponent, never>;
|
|
36
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DirectPhotoSelfieComponent, "app-direct-photo-selfie", never, { "text1": { "alias": "text1"; "required": false; }; "text2": { "alias": "text2"; "required": false; }; "onTakePicture": { "alias": "onTakePicture"; "required": false; }; "closeRequested": { "alias": "closeRequested"; "required": false; }; }, {}, never, never, true, never>;
|
|
37
|
-
}
|
|
1
|
+
import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
|
|
2
|
+
import { ModalController, Platform } from '@ionic/angular';
|
|
3
|
+
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
|
|
4
|
+
import { ModalDpiServices } from '../../services/modal-services/modal-dpi-services';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
export declare class DirectPhotoSelfieComponent implements AfterViewInit, OnDestroy {
|
|
7
|
+
private platform;
|
|
8
|
+
private modalController;
|
|
9
|
+
private sanitizer;
|
|
10
|
+
private modalDpiServices;
|
|
11
|
+
videoElement: ElementRef<HTMLVideoElement>;
|
|
12
|
+
text1: string;
|
|
13
|
+
text2: string;
|
|
14
|
+
onTakePicture: (filePath: File) => Promise<boolean>;
|
|
15
|
+
closeRequested?: () => Promise<void>;
|
|
16
|
+
capturedImage: SafeUrl | null;
|
|
17
|
+
stream: MediaStream | null;
|
|
18
|
+
private isAndroid;
|
|
19
|
+
private isIOS;
|
|
20
|
+
isLoading: boolean;
|
|
21
|
+
showProgress: boolean;
|
|
22
|
+
file?: File;
|
|
23
|
+
capturedImageUrl: string | null;
|
|
24
|
+
constructor(platform: Platform, modalController: ModalController, sanitizer: DomSanitizer, modalDpiServices: ModalDpiServices);
|
|
25
|
+
ngOnDestroy(): Promise<void>;
|
|
26
|
+
ngAfterViewInit(): Promise<void>;
|
|
27
|
+
initCamera(): Promise<void>;
|
|
28
|
+
startProgressAndCapture(): Promise<void>;
|
|
29
|
+
capturePhoto(): Promise<void>;
|
|
30
|
+
blobToFile(blob: Blob, fileName: string): File;
|
|
31
|
+
stopCamera(): void;
|
|
32
|
+
closeOverlay(): void;
|
|
33
|
+
closeRequestedFunction(): void;
|
|
34
|
+
resumeCamera(): void;
|
|
35
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DirectPhotoSelfieComponent, never>;
|
|
36
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DirectPhotoSelfieComponent, "app-direct-photo-selfie", never, { "text1": { "alias": "text1"; "required": false; }; "text2": { "alias": "text2"; "required": false; }; "onTakePicture": { "alias": "onTakePicture"; "required": false; }; "closeRequested": { "alias": "closeRequested"; "required": false; }; }, {}, never, never, true, never>;
|
|
37
|
+
}
|
package/dist/src/app/pages/id-vision/components/direct-photo-selfie/direct-photo-selfie.component.js
CHANGED
|
@@ -1,205 +1,205 @@
|
|
|
1
|
-
import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, ViewChild, ViewEncapsulation } from '@angular/core';
|
|
2
|
-
import { IonicModule } from '@ionic/angular';
|
|
3
|
-
import { CommonModule } from '@angular/common';
|
|
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
|
-
function DirectPhotoSelfieComponent_div_12_Template(rf, ctx) { if (rf & 1) {
|
|
11
|
-
i0.ɵɵelementStart(0, "div", 15);
|
|
12
|
-
i0.ɵɵnamespaceSVG();
|
|
13
|
-
i0.ɵɵelementStart(1, "svg", 16);
|
|
14
|
-
i0.ɵɵelement(2, "circle", 17);
|
|
15
|
-
i0.ɵɵelementEnd()();
|
|
16
|
-
} }
|
|
17
|
-
export class DirectPhotoSelfieComponent {
|
|
18
|
-
constructor(platform, modalController, sanitizer, modalDpiServices) {
|
|
19
|
-
this.platform = platform;
|
|
20
|
-
this.modalController = modalController;
|
|
21
|
-
this.sanitizer = sanitizer;
|
|
22
|
-
this.modalDpiServices = modalDpiServices;
|
|
23
|
-
this.text1 = '';
|
|
24
|
-
this.text2 = '';
|
|
25
|
-
this.capturedImage = null;
|
|
26
|
-
this.stream = null;
|
|
27
|
-
this.isLoading = true;
|
|
28
|
-
this.showProgress = false;
|
|
29
|
-
this.capturedImageUrl = null;
|
|
30
|
-
console.log('🏗️ DirectPhotoSelfie: Constructor ejecutado');
|
|
31
|
-
this.isAndroid = this.platform.is('android');
|
|
32
|
-
this.isIOS = this.platform.is('ios');
|
|
33
|
-
}
|
|
34
|
-
async ngOnDestroy() {
|
|
35
|
-
this.stopCamera();
|
|
36
|
-
}
|
|
37
|
-
async ngAfterViewInit() {
|
|
38
|
-
// Inicializar directamente la cámara sin permisos adicionales
|
|
39
|
-
// ya que esto se maneja en el flujo principal
|
|
40
|
-
await this.initCamera();
|
|
41
|
-
this.isLoading = false;
|
|
42
|
-
// Debug: verificar si el callback fue pasado correctamente
|
|
43
|
-
console.log('🔍 DirectPhotoSelfie inicializado');
|
|
44
|
-
console.log('🔍 closeRequested callback:', this.closeRequested ? 'DEFINIDO ✅' : 'NO DEFINIDO ❌');
|
|
45
|
-
// Suscripciones a los servicios modales
|
|
46
|
-
this.modalDpiServices.closePhotoSelfieSubject$.subscribe(() => {
|
|
47
|
-
this.closeOverlay();
|
|
48
|
-
});
|
|
49
|
-
this.modalDpiServices.resumePhotoSubject$.subscribe(() => {
|
|
50
|
-
this.resumeCamera();
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
async initCamera() {
|
|
54
|
-
try {
|
|
55
|
-
const constraints = {
|
|
56
|
-
video: {
|
|
57
|
-
width: { ideal: 1920 },
|
|
58
|
-
height: { ideal: 1080 },
|
|
59
|
-
facingMode: 'user'
|
|
60
|
-
},
|
|
61
|
-
audio: false
|
|
62
|
-
};
|
|
63
|
-
this.stream = await navigator.mediaDevices.getUserMedia(constraints);
|
|
64
|
-
const videoElement = this.videoElement.nativeElement;
|
|
65
|
-
videoElement.srcObject = this.stream;
|
|
66
|
-
videoElement.autoplay = true;
|
|
67
|
-
videoElement.playsInline = true;
|
|
68
|
-
videoElement.muted = true;
|
|
69
|
-
videoElement.onloadedmetadata = () => {
|
|
70
|
-
videoElement.play().catch((error) => {
|
|
71
|
-
console.error('Error al intentar reproducir el video:', error);
|
|
72
|
-
});
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
catch (error) {
|
|
76
|
-
console.error('Error al inicializar la cámara:', error);
|
|
77
|
-
this.isLoading = false;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
async startProgressAndCapture() {
|
|
81
|
-
this.showProgress = true;
|
|
82
|
-
const circle = document.querySelector('.progress-ring__circle');
|
|
83
|
-
if (circle) {
|
|
84
|
-
circle.style.strokeDashoffset = '0'; // Inicia la animación
|
|
85
|
-
}
|
|
86
|
-
await new Promise(resolve => setTimeout(resolve, 3000)); // Espera a que termine la animación
|
|
87
|
-
this.showProgress = false;
|
|
88
|
-
this.capturePhoto();
|
|
89
|
-
}
|
|
90
|
-
async capturePhoto() {
|
|
91
|
-
if (!this.stream) {
|
|
92
|
-
console.error('La cámara no está inicializada.');
|
|
93
|
-
return;
|
|
94
|
-
}
|
|
95
|
-
const canvas = document.createElement('canvas');
|
|
96
|
-
const videoElement = this.videoElement.nativeElement;
|
|
97
|
-
canvas.width = videoElement.videoWidth || 1920;
|
|
98
|
-
canvas.height = videoElement.videoHeight || 1080;
|
|
99
|
-
const context = canvas.getContext('2d');
|
|
100
|
-
if (context) {
|
|
101
|
-
context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
|
|
102
|
-
// Convierte el contenido del canvas a un Blob
|
|
103
|
-
canvas.toBlob((blob) => {
|
|
104
|
-
if (blob && blob.size > 0) {
|
|
105
|
-
this.file = this.blobToFile(blob, 'photo-selfie.jpeg');
|
|
106
|
-
videoElement.pause();
|
|
107
|
-
this.onTakePicture(this.file).catch((err) => console.error('Error en onTakePicture:', err));
|
|
108
|
-
}
|
|
109
|
-
else {
|
|
110
|
-
console.error('El Blob generado está vacío o no válido.');
|
|
111
|
-
}
|
|
112
|
-
}, 'image/jpeg', 0.75);
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
blobToFile(blob, fileName) {
|
|
116
|
-
const b = blob;
|
|
117
|
-
b.lastModified = new Date().getTime();
|
|
118
|
-
b.lastModifiedDate = new Date();
|
|
119
|
-
b.name = fileName;
|
|
120
|
-
return b;
|
|
121
|
-
}
|
|
122
|
-
stopCamera() {
|
|
123
|
-
if (this.stream) {
|
|
124
|
-
this.stream.getTracks().forEach(track => track.stop());
|
|
125
|
-
this.stream = null;
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
closeOverlay() {
|
|
129
|
-
this.stopCamera();
|
|
130
|
-
this.modalController.dismiss();
|
|
131
|
-
}
|
|
132
|
-
closeRequestedFunction() {
|
|
133
|
-
console.log('═══════════════════════════════════════════════════════');
|
|
134
|
-
console.log('🚪🚪🚪 BOTÓN X PRESIONADO 🚪🚪🚪');
|
|
135
|
-
console.log('═══════════════════════════════════════════════════════');
|
|
136
|
-
// Solo detener la cámara, NO cerrar el modal todavía
|
|
137
|
-
this.stopCamera();
|
|
138
|
-
console.log('✅ Cámara detenida');
|
|
139
|
-
console.log('🔍 closeRequested está definido?', !!this.closeRequested);
|
|
140
|
-
// Invocar callback del padre INMEDIATAMENTE (antes de cerrar el modal)
|
|
141
|
-
if (this.closeRequested) {
|
|
142
|
-
console.log('🚪 Invocando callback del padre...');
|
|
143
|
-
this.closeRequested().then(() => {
|
|
144
|
-
console.log('✅ Callback del padre completado');
|
|
145
|
-
}).catch((error) => {
|
|
146
|
-
console.error('❌ Error al ejecutar callback:', error);
|
|
147
|
-
});
|
|
148
|
-
}
|
|
149
|
-
else {
|
|
150
|
-
console.error('❌❌❌ NO HAY CALLBACK closeRequested DEFINIDO ❌❌❌');
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
resumeCamera() {
|
|
154
|
-
const videoElement = this.videoElement?.nativeElement;
|
|
155
|
-
if (videoElement && videoElement.paused) {
|
|
156
|
-
videoElement.play().catch((error) => {
|
|
157
|
-
console.error('Error al intentar reanudar el video:', error);
|
|
158
|
-
});
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
static { this.ɵfac = function DirectPhotoSelfieComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DirectPhotoSelfieComponent)(i0.ɵɵdirectiveInject(i1.Platform), i0.ɵɵdirectiveInject(i1.ModalController), i0.ɵɵdirectiveInject(i2.DomSanitizer), i0.ɵɵdirectiveInject(i3.ModalDpiServices)); }; }
|
|
162
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DirectPhotoSelfieComponent, selectors: [["app-direct-photo-selfie"]], viewQuery: function DirectPhotoSelfieComponent_Query(rf, ctx) { if (rf & 1) {
|
|
163
|
-
i0.ɵɵviewQuery(_c0, 5);
|
|
164
|
-
} if (rf & 2) {
|
|
165
|
-
let _t;
|
|
166
|
-
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.videoElement = _t.first);
|
|
167
|
-
} }, inputs: { text1: "text1", text2: "text2", onTakePicture: "onTakePicture", closeRequested: "closeRequested" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 16, vars: 1, consts: [["videoElement", ""], ["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)"], [1, "text-center"], ["class", "progress-ring", 4, "ngIf"], [1, "fixed-footer"], [1, "capture-button", 3, "click"], ["name", "camera", "slot", "icon-only"], [1, "progress-ring"], [1, "progress-ring__svg"], ["cx", "50%", "cy", "50%", "r", "48%", 1, "progress-ring__circle"]], template: function DirectPhotoSelfieComponent_Template(rf, ctx) { if (rf & 1) {
|
|
168
|
-
const _r1 = i0.ɵɵgetCurrentView();
|
|
169
|
-
i0.ɵɵelementStart(0, "ion-content", 1)(1, "ion-header", 2)(2, "ion-toolbar", 3)(3, "ion-buttons", 4)(4, "ion-button", 5);
|
|
170
|
-
i0.ɵɵlistener("click", function DirectPhotoSelfieComponent_Template_ion_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeRequestedFunction()); });
|
|
171
|
-
i0.ɵɵelement(5, "ion-icon", 6);
|
|
172
|
-
i0.ɵɵelementEnd()()()();
|
|
173
|
-
i0.ɵɵelementStart(6, "div", 7)(7, "div", 8);
|
|
174
|
-
i0.ɵɵelement(8, "video", 9, 0);
|
|
175
|
-
i0.ɵɵelementEnd();
|
|
176
|
-
i0.ɵɵelementStart(10, "p", 10);
|
|
177
|
-
i0.ɵɵtext(11, "Permanece quieto, con tu rostro en el centro del circulo");
|
|
178
|
-
i0.ɵɵelementEnd();
|
|
179
|
-
i0.ɵɵtemplate(12, DirectPhotoSelfieComponent_div_12_Template, 3, 0, "div", 11);
|
|
180
|
-
i0.ɵɵelementStart(13, "div", 12)(14, "ion-button", 13);
|
|
181
|
-
i0.ɵɵlistener("click", function DirectPhotoSelfieComponent_Template_ion_button_click_14_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.startProgressAndCapture()); });
|
|
182
|
-
i0.ɵɵelement(15, "ion-icon", 14);
|
|
183
|
-
i0.ɵɵelementEnd()()()();
|
|
184
|
-
} if (rf & 2) {
|
|
185
|
-
i0.ɵɵadvance(12);
|
|
186
|
-
i0.ɵɵproperty("ngIf", ctx.showProgress);
|
|
187
|
-
} }, dependencies: [IonicModule, i1.IonButton, i1.IonButtons, i1.IonContent, i1.IonHeader, i1.IonIcon, i1.IonToolbar, CommonModule, i4.NgIf], styles: [".direct-photo-selfie-content[_ngcontent-%COMP%] {\r\n --background: #000;\r\n position: relative;\r\n height: 90vh; // Ajusta la altura para dejar espacio al padre\r\n margin-top: 10vh; // Levanta el contenido un 10% desde el tope\r\n overflow: hidden;\r\n}\r\n\r\n.camera-overlay[_ngcontent-%COMP%] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 10;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 40px 20px 80px 20px;\r\n}\r\n\r\n.face-overlay[_ngcontent-%COMP%] {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n}\r\n\r\n.face-circle[_ngcontent-%COMP%] {\r\n width: 280px;\r\n height: 350px;\r\n border: 3px solid rgba(255, 255, 255, 0.8);\r\n border-radius: 50%;\r\n position: relative;\r\n \r\n &::before {\r\n content: '';\r\n position: absolute;\r\n top: -3px;\r\n left: -3px;\r\n right: -3px;\r\n bottom: -3px;\r\n border: 2px solid rgba(0, 123, 255, 0.6);\r\n border-radius: 50%;\r\n animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\r\n }\r\n}\r\n\r\n.face-guide-text[_ngcontent-%COMP%] {\r\n margin-top: 20px;\r\n text-align: center;\r\n \r\n p {\r\n color: white;\r\n font-size: 16px;\r\n font-weight: 500;\r\n margin: 0;\r\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\r\n }\r\n}\r\n\r\n.camera-controls[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n width: 100%;\r\n max-width: 300px;\r\n padding: 0 20px;\r\n}\r\n\r\n.control-button[_ngcontent-%COMP%] {\r\n --color: white;\r\n --background: rgba(0, 0, 0, 0.5);\r\n --border-radius: 50%;\r\n width: 50px;\r\n height: 50px;\r\n \r\n ion-icon {\r\n font-size: 24px;\r\n }\r\n}\r\n\r\n.capture-button[_ngcontent-%COMP%] {\r\n position: absolute;\r\n bottom: 20%;\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}\r\n\r\n.capture-circle[_ngcontent-%COMP%] {\r\n width: 70px;\r\n height: 70px;\r\n border: 4px solid white;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.2);\r\n transition: all 0.2s ease;\r\n \r\n &:active {\r\n transform: scale(0.95);\r\n background: rgba(255, 255, 255, 0.4);\r\n }\r\n}\r\n\r\n.progress-ring[_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.progress-ring__svg[_ngcontent-%COMP%] {\r\n width: 300px;\r\n height: 300px;\r\n}\r\n\r\n.progress-ring__circle[_ngcontent-%COMP%] {\r\n fill: transparent;\r\n stroke: purple;\r\n stroke-width: 10;\r\n stroke-dasharray: 942; \n\r\n stroke-dashoffset: 942; \n\r\n transition: stroke-dashoffset 3s linear; \n\r\n}\r\n\r\n.loading-overlay[_ngcontent-%COMP%] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.8);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 20;\r\n \r\n ion-spinner {\r\n --color: #007bff;\r\n width: 48px;\r\n height: 48px;\r\n }\r\n \r\n p {\r\n color: white;\r\n margin-top: 16px;\r\n font-size: 16px;\r\n font-weight: 500;\r\n }\r\n}\r\n\r\n@keyframes _ngcontent-%COMP%_pulse {\r\n 0% {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n 50% {\r\n transform: scale(1.05);\r\n opacity: 0.7;\r\n }\r\n 100% {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n}\r\n\r\n//[_ngcontent-%COMP%] Responsive[_ngcontent-%COMP%] adjustments\r\n@media[_ngcontent-%COMP%] (max-width[_ngcontent-%COMP%]: 375px)[_ngcontent-%COMP%] {\r\n .face-circle {\r\n width: 240px;\r\n height: 300px;\r\n }\r\n \r\n .camera-controls {\r\n max-width: 280px;\r\n }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .face-circle[_ngcontent-%COMP%] {\r\n width: 320px;\r\n height: 400px;\r\n }\r\n}"] }); }
|
|
188
|
-
}
|
|
189
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectPhotoSelfieComponent, [{
|
|
190
|
-
type: Component,
|
|
191
|
-
args: [{ selector: 'app-direct-photo-selfie', standalone: true, imports: [IonicModule, CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], 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-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 </div>\r\n\r\n <p class=\"text-center\">Permanece quieto, con tu rostro en el centro del circulo</p>\r\n <!-- C\u00EDrculo progresivo alrededor del \u00E1rea de la c\u00E1mara -->\r\n <div class=\"progress-ring\" *ngIf=\"showProgress\">\r\n <svg class=\"progress-ring__svg\">\r\n <circle class=\"progress-ring__circle\" cx=\"50%\" cy=\"50%\" r=\"48%\"></circle>\r\n </svg>\r\n </div>\r\n\r\n <!-- Bot\u00F3n redondo para tomar foto -->\r\n <div class=\"fixed-footer\">\r\n <ion-button class=\"capture-button\" (click)=\"startProgressAndCapture()\">\r\n <ion-icon name=\"camera\" slot=\"icon-only\"></ion-icon>\r\n </ion-button>\r\n </div>\r\n </div>\r\n </ion-content>", styles: [".direct-photo-selfie-content {\r\n --background: #000;\r\n position: relative;\r\n height: 90vh; // Ajusta la altura para dejar espacio al padre\r\n margin-top: 10vh; // Levanta el contenido un 10% desde el tope\r\n overflow: hidden;\r\n}\r\n\r\n.camera-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 10;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 40px 20px 80px 20px;\r\n}\r\n\r\n.face-overlay {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n}\r\n\r\n.face-circle {\r\n width: 280px;\r\n height: 350px;\r\n border: 3px solid rgba(255, 255, 255, 0.8);\r\n border-radius: 50%;\r\n position: relative;\r\n \r\n &::before {\r\n content: '';\r\n position: absolute;\r\n top: -3px;\r\n left: -3px;\r\n right: -3px;\r\n bottom: -3px;\r\n border: 2px solid rgba(0, 123, 255, 0.6);\r\n border-radius: 50%;\r\n animation: pulse 2s ease-in-out infinite;\r\n }\r\n}\r\n\r\n.face-guide-text {\r\n margin-top: 20px;\r\n text-align: center;\r\n \r\n p {\r\n color: white;\r\n font-size: 16px;\r\n font-weight: 500;\r\n margin: 0;\r\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\r\n }\r\n}\r\n\r\n.camera-controls {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n width: 100%;\r\n max-width: 300px;\r\n padding: 0 20px;\r\n}\r\n\r\n.control-button {\r\n --color: white;\r\n --background: rgba(0, 0, 0, 0.5);\r\n --border-radius: 50%;\r\n width: 50px;\r\n height: 50px;\r\n \r\n ion-icon {\r\n font-size: 24px;\r\n }\r\n}\r\n\r\n.capture-button {\r\n position: absolute;\r\n bottom: 20%;\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}\r\n\r\n.capture-circle {\r\n width: 70px;\r\n height: 70px;\r\n border: 4px solid white;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.2);\r\n transition: all 0.2s ease;\r\n \r\n &:active {\r\n transform: scale(0.95);\r\n background: rgba(255, 255, 255, 0.4);\r\n }\r\n}\r\n\r\n.progress-ring {\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.progress-ring__svg {\r\n width: 300px;\r\n height: 300px;\r\n}\r\n\r\n.progress-ring__circle {\r\n fill: transparent;\r\n stroke: purple;\r\n stroke-width: 10;\r\n stroke-dasharray: 942; /* Circunferencia del c\u00EDrculo */\r\n stroke-dashoffset: 942; /* Oculto al inicio */\r\n transition: stroke-dashoffset 3s linear; /* Duraci\u00F3n de la animaci\u00F3n */\r\n}\r\n\r\n.loading-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.8);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 20;\r\n \r\n ion-spinner {\r\n --color: #007bff;\r\n width: 48px;\r\n height: 48px;\r\n }\r\n \r\n p {\r\n color: white;\r\n margin-top: 16px;\r\n font-size: 16px;\r\n font-weight: 500;\r\n }\r\n}\r\n\r\n@keyframes pulse {\r\n 0% {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n 50% {\r\n transform: scale(1.05);\r\n opacity: 0.7;\r\n }\r\n 100% {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n}\r\n\r\n// Responsive adjustments\r\n@media (max-width: 375px) {\r\n .face-circle {\r\n width: 240px;\r\n height: 300px;\r\n }\r\n \r\n .camera-controls {\r\n max-width: 280px;\r\n }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .face-circle {\r\n width: 320px;\r\n height: 400px;\r\n }\r\n}"] }]
|
|
192
|
-
}], () => [{ type: i1.Platform }, { type: i1.ModalController }, { type: i2.DomSanitizer }, { type: i3.ModalDpiServices }], { videoElement: [{
|
|
193
|
-
type: ViewChild,
|
|
194
|
-
args: ['videoElement']
|
|
195
|
-
}], text1: [{
|
|
196
|
-
type: Input
|
|
197
|
-
}], text2: [{
|
|
198
|
-
type: Input
|
|
199
|
-
}], onTakePicture: [{
|
|
200
|
-
type: Input
|
|
201
|
-
}], closeRequested: [{
|
|
202
|
-
type: Input
|
|
203
|
-
}] }); })();
|
|
204
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DirectPhotoSelfieComponent, { className: "DirectPhotoSelfieComponent", filePath: "src\\app\\pages\\id-vision\\components\\direct-photo-selfie\\direct-photo-selfie.component.ts", lineNumber: 18 }); })();
|
|
1
|
+
import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, ViewChild, ViewEncapsulation } from '@angular/core';
|
|
2
|
+
import { IonicModule } from '@ionic/angular';
|
|
3
|
+
import { CommonModule } from '@angular/common';
|
|
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
|
+
function DirectPhotoSelfieComponent_div_12_Template(rf, ctx) { if (rf & 1) {
|
|
11
|
+
i0.ɵɵelementStart(0, "div", 15);
|
|
12
|
+
i0.ɵɵnamespaceSVG();
|
|
13
|
+
i0.ɵɵelementStart(1, "svg", 16);
|
|
14
|
+
i0.ɵɵelement(2, "circle", 17);
|
|
15
|
+
i0.ɵɵelementEnd()();
|
|
16
|
+
} }
|
|
17
|
+
export class DirectPhotoSelfieComponent {
|
|
18
|
+
constructor(platform, modalController, sanitizer, modalDpiServices) {
|
|
19
|
+
this.platform = platform;
|
|
20
|
+
this.modalController = modalController;
|
|
21
|
+
this.sanitizer = sanitizer;
|
|
22
|
+
this.modalDpiServices = modalDpiServices;
|
|
23
|
+
this.text1 = '';
|
|
24
|
+
this.text2 = '';
|
|
25
|
+
this.capturedImage = null;
|
|
26
|
+
this.stream = null;
|
|
27
|
+
this.isLoading = true;
|
|
28
|
+
this.showProgress = false;
|
|
29
|
+
this.capturedImageUrl = null;
|
|
30
|
+
console.log('🏗️ DirectPhotoSelfie: Constructor ejecutado');
|
|
31
|
+
this.isAndroid = this.platform.is('android');
|
|
32
|
+
this.isIOS = this.platform.is('ios');
|
|
33
|
+
}
|
|
34
|
+
async ngOnDestroy() {
|
|
35
|
+
this.stopCamera();
|
|
36
|
+
}
|
|
37
|
+
async ngAfterViewInit() {
|
|
38
|
+
// Inicializar directamente la cámara sin permisos adicionales
|
|
39
|
+
// ya que esto se maneja en el flujo principal
|
|
40
|
+
await this.initCamera();
|
|
41
|
+
this.isLoading = false;
|
|
42
|
+
// Debug: verificar si el callback fue pasado correctamente
|
|
43
|
+
console.log('🔍 DirectPhotoSelfie inicializado');
|
|
44
|
+
console.log('🔍 closeRequested callback:', this.closeRequested ? 'DEFINIDO ✅' : 'NO DEFINIDO ❌');
|
|
45
|
+
// Suscripciones a los servicios modales
|
|
46
|
+
this.modalDpiServices.closePhotoSelfieSubject$.subscribe(() => {
|
|
47
|
+
this.closeOverlay();
|
|
48
|
+
});
|
|
49
|
+
this.modalDpiServices.resumePhotoSubject$.subscribe(() => {
|
|
50
|
+
this.resumeCamera();
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
async initCamera() {
|
|
54
|
+
try {
|
|
55
|
+
const constraints = {
|
|
56
|
+
video: {
|
|
57
|
+
width: { ideal: 1920 },
|
|
58
|
+
height: { ideal: 1080 },
|
|
59
|
+
facingMode: 'user'
|
|
60
|
+
},
|
|
61
|
+
audio: false
|
|
62
|
+
};
|
|
63
|
+
this.stream = await navigator.mediaDevices.getUserMedia(constraints);
|
|
64
|
+
const videoElement = this.videoElement.nativeElement;
|
|
65
|
+
videoElement.srcObject = this.stream;
|
|
66
|
+
videoElement.autoplay = true;
|
|
67
|
+
videoElement.playsInline = true;
|
|
68
|
+
videoElement.muted = true;
|
|
69
|
+
videoElement.onloadedmetadata = () => {
|
|
70
|
+
videoElement.play().catch((error) => {
|
|
71
|
+
console.error('Error al intentar reproducir el video:', error);
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
catch (error) {
|
|
76
|
+
console.error('Error al inicializar la cámara:', error);
|
|
77
|
+
this.isLoading = false;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
async startProgressAndCapture() {
|
|
81
|
+
this.showProgress = true;
|
|
82
|
+
const circle = document.querySelector('.progress-ring__circle');
|
|
83
|
+
if (circle) {
|
|
84
|
+
circle.style.strokeDashoffset = '0'; // Inicia la animación
|
|
85
|
+
}
|
|
86
|
+
await new Promise(resolve => setTimeout(resolve, 3000)); // Espera a que termine la animación
|
|
87
|
+
this.showProgress = false;
|
|
88
|
+
this.capturePhoto();
|
|
89
|
+
}
|
|
90
|
+
async capturePhoto() {
|
|
91
|
+
if (!this.stream) {
|
|
92
|
+
console.error('La cámara no está inicializada.');
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
const canvas = document.createElement('canvas');
|
|
96
|
+
const videoElement = this.videoElement.nativeElement;
|
|
97
|
+
canvas.width = videoElement.videoWidth || 1920;
|
|
98
|
+
canvas.height = videoElement.videoHeight || 1080;
|
|
99
|
+
const context = canvas.getContext('2d');
|
|
100
|
+
if (context) {
|
|
101
|
+
context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
|
|
102
|
+
// Convierte el contenido del canvas a un Blob
|
|
103
|
+
canvas.toBlob((blob) => {
|
|
104
|
+
if (blob && blob.size > 0) {
|
|
105
|
+
this.file = this.blobToFile(blob, 'photo-selfie.jpeg');
|
|
106
|
+
videoElement.pause();
|
|
107
|
+
this.onTakePicture(this.file).catch((err) => console.error('Error en onTakePicture:', err));
|
|
108
|
+
}
|
|
109
|
+
else {
|
|
110
|
+
console.error('El Blob generado está vacío o no válido.');
|
|
111
|
+
}
|
|
112
|
+
}, 'image/jpeg', 0.75);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
blobToFile(blob, fileName) {
|
|
116
|
+
const b = blob;
|
|
117
|
+
b.lastModified = new Date().getTime();
|
|
118
|
+
b.lastModifiedDate = new Date();
|
|
119
|
+
b.name = fileName;
|
|
120
|
+
return b;
|
|
121
|
+
}
|
|
122
|
+
stopCamera() {
|
|
123
|
+
if (this.stream) {
|
|
124
|
+
this.stream.getTracks().forEach(track => track.stop());
|
|
125
|
+
this.stream = null;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
closeOverlay() {
|
|
129
|
+
this.stopCamera();
|
|
130
|
+
this.modalController.dismiss();
|
|
131
|
+
}
|
|
132
|
+
closeRequestedFunction() {
|
|
133
|
+
console.log('═══════════════════════════════════════════════════════');
|
|
134
|
+
console.log('🚪🚪🚪 BOTÓN X PRESIONADO 🚪🚪🚪');
|
|
135
|
+
console.log('═══════════════════════════════════════════════════════');
|
|
136
|
+
// Solo detener la cámara, NO cerrar el modal todavía
|
|
137
|
+
this.stopCamera();
|
|
138
|
+
console.log('✅ Cámara detenida');
|
|
139
|
+
console.log('🔍 closeRequested está definido?', !!this.closeRequested);
|
|
140
|
+
// Invocar callback del padre INMEDIATAMENTE (antes de cerrar el modal)
|
|
141
|
+
if (this.closeRequested) {
|
|
142
|
+
console.log('🚪 Invocando callback del padre...');
|
|
143
|
+
this.closeRequested().then(() => {
|
|
144
|
+
console.log('✅ Callback del padre completado');
|
|
145
|
+
}).catch((error) => {
|
|
146
|
+
console.error('❌ Error al ejecutar callback:', error);
|
|
147
|
+
});
|
|
148
|
+
}
|
|
149
|
+
else {
|
|
150
|
+
console.error('❌❌❌ NO HAY CALLBACK closeRequested DEFINIDO ❌❌❌');
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
resumeCamera() {
|
|
154
|
+
const videoElement = this.videoElement?.nativeElement;
|
|
155
|
+
if (videoElement && videoElement.paused) {
|
|
156
|
+
videoElement.play().catch((error) => {
|
|
157
|
+
console.error('Error al intentar reanudar el video:', error);
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
static { this.ɵfac = function DirectPhotoSelfieComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DirectPhotoSelfieComponent)(i0.ɵɵdirectiveInject(i1.Platform), i0.ɵɵdirectiveInject(i1.ModalController), i0.ɵɵdirectiveInject(i2.DomSanitizer), i0.ɵɵdirectiveInject(i3.ModalDpiServices)); }; }
|
|
162
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DirectPhotoSelfieComponent, selectors: [["app-direct-photo-selfie"]], viewQuery: function DirectPhotoSelfieComponent_Query(rf, ctx) { if (rf & 1) {
|
|
163
|
+
i0.ɵɵviewQuery(_c0, 5);
|
|
164
|
+
} if (rf & 2) {
|
|
165
|
+
let _t;
|
|
166
|
+
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.videoElement = _t.first);
|
|
167
|
+
} }, inputs: { text1: "text1", text2: "text2", onTakePicture: "onTakePicture", closeRequested: "closeRequested" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 16, vars: 1, consts: [["videoElement", ""], ["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)"], [1, "text-center"], ["class", "progress-ring", 4, "ngIf"], [1, "fixed-footer"], [1, "capture-button", 3, "click"], ["name", "camera", "slot", "icon-only"], [1, "progress-ring"], [1, "progress-ring__svg"], ["cx", "50%", "cy", "50%", "r", "48%", 1, "progress-ring__circle"]], template: function DirectPhotoSelfieComponent_Template(rf, ctx) { if (rf & 1) {
|
|
168
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
169
|
+
i0.ɵɵelementStart(0, "ion-content", 1)(1, "ion-header", 2)(2, "ion-toolbar", 3)(3, "ion-buttons", 4)(4, "ion-button", 5);
|
|
170
|
+
i0.ɵɵlistener("click", function DirectPhotoSelfieComponent_Template_ion_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeRequestedFunction()); });
|
|
171
|
+
i0.ɵɵelement(5, "ion-icon", 6);
|
|
172
|
+
i0.ɵɵelementEnd()()()();
|
|
173
|
+
i0.ɵɵelementStart(6, "div", 7)(7, "div", 8);
|
|
174
|
+
i0.ɵɵelement(8, "video", 9, 0);
|
|
175
|
+
i0.ɵɵelementEnd();
|
|
176
|
+
i0.ɵɵelementStart(10, "p", 10);
|
|
177
|
+
i0.ɵɵtext(11, "Permanece quieto, con tu rostro en el centro del circulo");
|
|
178
|
+
i0.ɵɵelementEnd();
|
|
179
|
+
i0.ɵɵtemplate(12, DirectPhotoSelfieComponent_div_12_Template, 3, 0, "div", 11);
|
|
180
|
+
i0.ɵɵelementStart(13, "div", 12)(14, "ion-button", 13);
|
|
181
|
+
i0.ɵɵlistener("click", function DirectPhotoSelfieComponent_Template_ion_button_click_14_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.startProgressAndCapture()); });
|
|
182
|
+
i0.ɵɵelement(15, "ion-icon", 14);
|
|
183
|
+
i0.ɵɵelementEnd()()()();
|
|
184
|
+
} if (rf & 2) {
|
|
185
|
+
i0.ɵɵadvance(12);
|
|
186
|
+
i0.ɵɵproperty("ngIf", ctx.showProgress);
|
|
187
|
+
} }, dependencies: [IonicModule, i1.IonButton, i1.IonButtons, i1.IonContent, i1.IonHeader, i1.IonIcon, i1.IonToolbar, CommonModule, i4.NgIf], styles: [".direct-photo-selfie-content[_ngcontent-%COMP%] {\r\n --background: #000;\r\n position: relative;\r\n height: 90vh; // Ajusta la altura para dejar espacio al padre\r\n margin-top: 10vh; // Levanta el contenido un 10% desde el tope\r\n overflow: hidden;\r\n}\r\n\r\n.camera-overlay[_ngcontent-%COMP%] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 10;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 40px 20px 80px 20px;\r\n}\r\n\r\n.face-overlay[_ngcontent-%COMP%] {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n}\r\n\r\n.face-circle[_ngcontent-%COMP%] {\r\n width: 280px;\r\n height: 350px;\r\n border: 3px solid rgba(255, 255, 255, 0.8);\r\n border-radius: 50%;\r\n position: relative;\r\n \r\n &::before {\r\n content: '';\r\n position: absolute;\r\n top: -3px;\r\n left: -3px;\r\n right: -3px;\r\n bottom: -3px;\r\n border: 2px solid rgba(0, 123, 255, 0.6);\r\n border-radius: 50%;\r\n animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\r\n }\r\n}\r\n\r\n.face-guide-text[_ngcontent-%COMP%] {\r\n margin-top: 20px;\r\n text-align: center;\r\n \r\n p {\r\n color: white;\r\n font-size: 16px;\r\n font-weight: 500;\r\n margin: 0;\r\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\r\n }\r\n}\r\n\r\n.camera-controls[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n width: 100%;\r\n max-width: 300px;\r\n padding: 0 20px;\r\n}\r\n\r\n.control-button[_ngcontent-%COMP%] {\r\n --color: white;\r\n --background: rgba(0, 0, 0, 0.5);\r\n --border-radius: 50%;\r\n width: 50px;\r\n height: 50px;\r\n \r\n ion-icon {\r\n font-size: 24px;\r\n }\r\n}\r\n\r\n.capture-button[_ngcontent-%COMP%] {\r\n position: absolute;\r\n bottom: 20%;\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}\r\n\r\n.capture-circle[_ngcontent-%COMP%] {\r\n width: 70px;\r\n height: 70px;\r\n border: 4px solid white;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.2);\r\n transition: all 0.2s ease;\r\n \r\n &:active {\r\n transform: scale(0.95);\r\n background: rgba(255, 255, 255, 0.4);\r\n }\r\n}\r\n\r\n.progress-ring[_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.progress-ring__svg[_ngcontent-%COMP%] {\r\n width: 300px;\r\n height: 300px;\r\n}\r\n\r\n.progress-ring__circle[_ngcontent-%COMP%] {\r\n fill: transparent;\r\n stroke: purple;\r\n stroke-width: 10;\r\n stroke-dasharray: 942; \n\r\n stroke-dashoffset: 942; \n\r\n transition: stroke-dashoffset 3s linear; \n\r\n}\r\n\r\n.loading-overlay[_ngcontent-%COMP%] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.8);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 20;\r\n \r\n ion-spinner {\r\n --color: #007bff;\r\n width: 48px;\r\n height: 48px;\r\n }\r\n \r\n p {\r\n color: white;\r\n margin-top: 16px;\r\n font-size: 16px;\r\n font-weight: 500;\r\n }\r\n}\r\n\r\n@keyframes _ngcontent-%COMP%_pulse {\r\n 0% {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n 50% {\r\n transform: scale(1.05);\r\n opacity: 0.7;\r\n }\r\n 100% {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n}\r\n\r\n//[_ngcontent-%COMP%] Responsive[_ngcontent-%COMP%] adjustments\r\n@media[_ngcontent-%COMP%] (max-width[_ngcontent-%COMP%]: 375px)[_ngcontent-%COMP%] {\r\n .face-circle {\r\n width: 240px;\r\n height: 300px;\r\n }\r\n \r\n .camera-controls {\r\n max-width: 280px;\r\n }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .face-circle[_ngcontent-%COMP%] {\r\n width: 320px;\r\n height: 400px;\r\n }\r\n}"] }); }
|
|
188
|
+
}
|
|
189
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectPhotoSelfieComponent, [{
|
|
190
|
+
type: Component,
|
|
191
|
+
args: [{ selector: 'app-direct-photo-selfie', standalone: true, imports: [IonicModule, CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], 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-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 </div>\r\n\r\n <p class=\"text-center\">Permanece quieto, con tu rostro en el centro del circulo</p>\r\n <!-- C\u00EDrculo progresivo alrededor del \u00E1rea de la c\u00E1mara -->\r\n <div class=\"progress-ring\" *ngIf=\"showProgress\">\r\n <svg class=\"progress-ring__svg\">\r\n <circle class=\"progress-ring__circle\" cx=\"50%\" cy=\"50%\" r=\"48%\"></circle>\r\n </svg>\r\n </div>\r\n\r\n <!-- Bot\u00F3n redondo para tomar foto -->\r\n <div class=\"fixed-footer\">\r\n <ion-button class=\"capture-button\" (click)=\"startProgressAndCapture()\">\r\n <ion-icon name=\"camera\" slot=\"icon-only\"></ion-icon>\r\n </ion-button>\r\n </div>\r\n </div>\r\n </ion-content>", styles: [".direct-photo-selfie-content {\r\n --background: #000;\r\n position: relative;\r\n height: 90vh; // Ajusta la altura para dejar espacio al padre\r\n margin-top: 10vh; // Levanta el contenido un 10% desde el tope\r\n overflow: hidden;\r\n}\r\n\r\n.camera-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 10;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 40px 20px 80px 20px;\r\n}\r\n\r\n.face-overlay {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n}\r\n\r\n.face-circle {\r\n width: 280px;\r\n height: 350px;\r\n border: 3px solid rgba(255, 255, 255, 0.8);\r\n border-radius: 50%;\r\n position: relative;\r\n \r\n &::before {\r\n content: '';\r\n position: absolute;\r\n top: -3px;\r\n left: -3px;\r\n right: -3px;\r\n bottom: -3px;\r\n border: 2px solid rgba(0, 123, 255, 0.6);\r\n border-radius: 50%;\r\n animation: pulse 2s ease-in-out infinite;\r\n }\r\n}\r\n\r\n.face-guide-text {\r\n margin-top: 20px;\r\n text-align: center;\r\n \r\n p {\r\n color: white;\r\n font-size: 16px;\r\n font-weight: 500;\r\n margin: 0;\r\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\r\n }\r\n}\r\n\r\n.camera-controls {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n width: 100%;\r\n max-width: 300px;\r\n padding: 0 20px;\r\n}\r\n\r\n.control-button {\r\n --color: white;\r\n --background: rgba(0, 0, 0, 0.5);\r\n --border-radius: 50%;\r\n width: 50px;\r\n height: 50px;\r\n \r\n ion-icon {\r\n font-size: 24px;\r\n }\r\n}\r\n\r\n.capture-button {\r\n position: absolute;\r\n bottom: 20%;\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}\r\n\r\n.capture-circle {\r\n width: 70px;\r\n height: 70px;\r\n border: 4px solid white;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.2);\r\n transition: all 0.2s ease;\r\n \r\n &:active {\r\n transform: scale(0.95);\r\n background: rgba(255, 255, 255, 0.4);\r\n }\r\n}\r\n\r\n.progress-ring {\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.progress-ring__svg {\r\n width: 300px;\r\n height: 300px;\r\n}\r\n\r\n.progress-ring__circle {\r\n fill: transparent;\r\n stroke: purple;\r\n stroke-width: 10;\r\n stroke-dasharray: 942; /* Circunferencia del c\u00EDrculo */\r\n stroke-dashoffset: 942; /* Oculto al inicio */\r\n transition: stroke-dashoffset 3s linear; /* Duraci\u00F3n de la animaci\u00F3n */\r\n}\r\n\r\n.loading-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.8);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 20;\r\n \r\n ion-spinner {\r\n --color: #007bff;\r\n width: 48px;\r\n height: 48px;\r\n }\r\n \r\n p {\r\n color: white;\r\n margin-top: 16px;\r\n font-size: 16px;\r\n font-weight: 500;\r\n }\r\n}\r\n\r\n@keyframes pulse {\r\n 0% {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n 50% {\r\n transform: scale(1.05);\r\n opacity: 0.7;\r\n }\r\n 100% {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n}\r\n\r\n// Responsive adjustments\r\n@media (max-width: 375px) {\r\n .face-circle {\r\n width: 240px;\r\n height: 300px;\r\n }\r\n \r\n .camera-controls {\r\n max-width: 280px;\r\n }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .face-circle {\r\n width: 320px;\r\n height: 400px;\r\n }\r\n}"] }]
|
|
192
|
+
}], () => [{ type: i1.Platform }, { type: i1.ModalController }, { type: i2.DomSanitizer }, { type: i3.ModalDpiServices }], { videoElement: [{
|
|
193
|
+
type: ViewChild,
|
|
194
|
+
args: ['videoElement']
|
|
195
|
+
}], text1: [{
|
|
196
|
+
type: Input
|
|
197
|
+
}], text2: [{
|
|
198
|
+
type: Input
|
|
199
|
+
}], onTakePicture: [{
|
|
200
|
+
type: Input
|
|
201
|
+
}], closeRequested: [{
|
|
202
|
+
type: Input
|
|
203
|
+
}] }); })();
|
|
204
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DirectPhotoSelfieComponent, { className: "DirectPhotoSelfieComponent", filePath: "src\\app\\pages\\id-vision\\components\\direct-photo-selfie\\direct-photo-selfie.component.ts", lineNumber: 18 }); })();
|
|
205
205
|
//# sourceMappingURL=direct-photo-selfie.component.js.map
|
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
|
|
2
|
-
import { ModalController, Platform } from '@ionic/angular';
|
|
3
|
-
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
|
|
4
|
-
import { ModalDpiServices } from '../../services/modal-services/modal-dpi-services';
|
|
5
|
-
import * as i0 from "@angular/core";
|
|
6
|
-
export declare class PhotoSelfieCameraComponent implements AfterViewInit, OnDestroy {
|
|
7
|
-
private platform;
|
|
8
|
-
private modalController;
|
|
9
|
-
private sanitizer;
|
|
10
|
-
private modalDpiServices;
|
|
11
|
-
private cdRef;
|
|
12
|
-
private renderer;
|
|
13
|
-
videoElement: ElementRef<HTMLVideoElement>;
|
|
14
|
-
progressRing: ElementRef;
|
|
15
|
-
text1: string;
|
|
16
|
-
text2: string;
|
|
17
|
-
onTakePicture: (filePath: File) => Promise<boolean>;
|
|
18
|
-
closeRequested?: () => Promise<void>;
|
|
19
|
-
capturedImage: SafeUrl | null;
|
|
20
|
-
stream: MediaStream | null;
|
|
21
|
-
private isAndroid;
|
|
22
|
-
private isIOS;
|
|
23
|
-
isLoading: boolean;
|
|
24
|
-
showCountdown: boolean;
|
|
25
|
-
countdown: number;
|
|
26
|
-
isCapturing: boolean;
|
|
27
|
-
file?: File;
|
|
28
|
-
capturedImageUrl: string | null;
|
|
29
|
-
showProgress: boolean;
|
|
30
|
-
timeRemaining: number;
|
|
31
|
-
maxRecordingTime: number;
|
|
32
|
-
constructor(platform: Platform, modalController: ModalController, sanitizer: DomSanitizer, modalDpiServices: ModalDpiServices, cdRef: ChangeDetectorRef, // Agregado para detectar cambios
|
|
33
|
-
renderer: Renderer2);
|
|
34
|
-
ngOnDestroy(): Promise<void>;
|
|
35
|
-
ngAfterViewInit(): Promise<void>;
|
|
36
|
-
requestPermissions(): Promise<void>;
|
|
37
|
-
initCamera(): Promise<void>;
|
|
38
|
-
startCountdown(): Promise<void>;
|
|
39
|
-
startProgressAndCapture(): Promise<void>;
|
|
40
|
-
capturePhoto(): Promise<void>;
|
|
41
|
-
blobToFile(blob: Blob, fileName: string): File;
|
|
42
|
-
stopCamera(): void;
|
|
43
|
-
closeOverlay(): void;
|
|
44
|
-
closeRequestedFunction(): void;
|
|
45
|
-
resumeCamera(): void;
|
|
46
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<PhotoSelfieCameraComponent, never>;
|
|
47
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<PhotoSelfieCameraComponent, "app-photo-selfie-camera", never, { "text1": { "alias": "text1"; "required": false; }; "text2": { "alias": "text2"; "required": false; }; "onTakePicture": { "alias": "onTakePicture"; "required": false; }; "closeRequested": { "alias": "closeRequested"; "required": false; }; }, {}, never, never, false, never>;
|
|
48
|
-
}
|
|
1
|
+
import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
|
|
2
|
+
import { ModalController, Platform } from '@ionic/angular';
|
|
3
|
+
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
|
|
4
|
+
import { ModalDpiServices } from '../../services/modal-services/modal-dpi-services';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
export declare class PhotoSelfieCameraComponent implements AfterViewInit, OnDestroy {
|
|
7
|
+
private platform;
|
|
8
|
+
private modalController;
|
|
9
|
+
private sanitizer;
|
|
10
|
+
private modalDpiServices;
|
|
11
|
+
private cdRef;
|
|
12
|
+
private renderer;
|
|
13
|
+
videoElement: ElementRef<HTMLVideoElement>;
|
|
14
|
+
progressRing: ElementRef;
|
|
15
|
+
text1: string;
|
|
16
|
+
text2: string;
|
|
17
|
+
onTakePicture: (filePath: File) => Promise<boolean>;
|
|
18
|
+
closeRequested?: () => Promise<void>;
|
|
19
|
+
capturedImage: SafeUrl | null;
|
|
20
|
+
stream: MediaStream | null;
|
|
21
|
+
private isAndroid;
|
|
22
|
+
private isIOS;
|
|
23
|
+
isLoading: boolean;
|
|
24
|
+
showCountdown: boolean;
|
|
25
|
+
countdown: number;
|
|
26
|
+
isCapturing: boolean;
|
|
27
|
+
file?: File;
|
|
28
|
+
capturedImageUrl: string | null;
|
|
29
|
+
showProgress: boolean;
|
|
30
|
+
timeRemaining: number;
|
|
31
|
+
maxRecordingTime: number;
|
|
32
|
+
constructor(platform: Platform, modalController: ModalController, sanitizer: DomSanitizer, modalDpiServices: ModalDpiServices, cdRef: ChangeDetectorRef, // Agregado para detectar cambios
|
|
33
|
+
renderer: Renderer2);
|
|
34
|
+
ngOnDestroy(): Promise<void>;
|
|
35
|
+
ngAfterViewInit(): Promise<void>;
|
|
36
|
+
requestPermissions(): Promise<void>;
|
|
37
|
+
initCamera(): Promise<void>;
|
|
38
|
+
startCountdown(): Promise<void>;
|
|
39
|
+
startProgressAndCapture(): Promise<void>;
|
|
40
|
+
capturePhoto(): Promise<void>;
|
|
41
|
+
blobToFile(blob: Blob, fileName: string): File;
|
|
42
|
+
stopCamera(): void;
|
|
43
|
+
closeOverlay(): void;
|
|
44
|
+
closeRequestedFunction(): void;
|
|
45
|
+
resumeCamera(): void;
|
|
46
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PhotoSelfieCameraComponent, never>;
|
|
47
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<PhotoSelfieCameraComponent, "app-photo-selfie-camera", never, { "text1": { "alias": "text1"; "required": false; }; "text2": { "alias": "text2"; "required": false; }; "onTakePicture": { "alias": "onTakePicture"; "required": false; }; "closeRequested": { "alias": "closeRequested"; "required": false; }; }, {}, never, never, false, never>;
|
|
48
|
+
}
|