ablok-components 0.3.127 → 0.3.128

package/dist/components/molecules/base-camera/base-camera.vue_vue_type_script_async_true_setup_true_lang.js

@@ -1,12 +1,11 @@
 import e from "../../atoms/svg-icon/svg-icon.js";
 import t from "../../atoms/loading-spinner/loading-spinner.js";
-import n from "../input-dropdown/input-dropdown.js";
-import { useCameraFilter as r } from "../../../composables/useCameraFilter.js";
-import { useOrientationCorrection as i } from "../../../composables/useOrientationCorrection.js";
-import { captureToDataUrl as a, toPhotoPayload as o } from "../../../composables/useCameraCapture.js";
-import s from "../../atoms/zoom-slider/zoom-slider.js";
-import c from "../../../assets/img/guide.js";
-import { computed as l, createBlock as ee, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as te, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as ne, onMounted as re, openBlock as g, ref as _, toDisplayString as v, unref as ie, vShow as ae, watch as y, withCtx as oe, withDirectives as se, withModifiers as ce } from "vue";
+import { dataURItoBlob as n } from "../../../utilities/helpers.js";
+import r from "../input-dropdown/input-dropdown.js";
+import { useCameraFilter as i } from "../../../composables/useCameraFilter.js";
+import a from "../../atoms/zoom-slider/zoom-slider.js";
+import o from "../../../assets/img/guide.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, nextTick as ee, normalizeClass as m, normalizeStyle as te, onBeforeUnmount as ne, onMounted as re, openBlock as h, ref as g, toDisplayString as _, vShow as ie, watch as ae, withCtx as oe, withDirectives as se, withModifiers as ce } from "vue";
 import le from "lodash";
 //#region src/components/molecules/base-camera/base-camera.vue?vue&type=script&async=true&setup=true&lang.ts
 var ue = { class: "camera__preview" }, de = {
@@ -61,7 +60,7 @@ var ue = { class: "camera__preview" }, de = {
 		width: 720,
 		height: 1280
 	}
-}, Ae = /*@__PURE__*/ te({
+}, Ae = /*@__PURE__*/ p({
 	...Oe,
 	props: {
 		modelValue: { type: null },
@@ -83,7 +82,7 @@ var ue = { class: "camera__preview" }, de = {
 		},
 		guideSrc: {
 			type: String,
-			default: () => c
+			default: () => o
 		},
 		countdown: {
 			type: Number,
@@ -140,69 +139,64 @@ var ue = { class: "camera__preview" }, de = {
 		}
 	},
 	emits: ["update:modelValue"],
-	setup(c, { expose: te, emit: Oe }) {
-		let { debounce: Ae } = le, b = c, je = Oe, x = _(), S = _(), C = _([]), w = _(), T = _(), E = _(), D = _(), O = _(), k = _(!1), A = _(!1), j = _(0), M = _(0), N = _(), P = _(b.zoom || 1), { orientationReady: Me, orientationFlip: Ne, requiresGate: Pe, enableMotion: Fe, armGate: Ie, getCaptureRotation: Le, dispose: Re } = i(() => b.correctOrientation), F = _(!1), I;
+	setup(o, { expose: p, emit: Oe }) {
+		let { debounce: Ae } = le, v = o, je = Oe, y = g(), b = g(), Me = g(!1), x = g([]), S = g(), C = g(), w = g(), T = g(), E = g(), D = g(!1), O = g(!1), k = g(0), A = g(0), j = g(), M = g(v.zoom || 1), Ne = g(!1), N = g(!1), Pe = g(null), Fe = g(!1), P, F, Ie = typeof window < "u" && "DeviceMotionEvent" in window && (window.matchMedia?.("(pointer: coarse)")?.matches || "ontouchstart" in window), Le = s(() => v.correctOrientation && Ie), I = s(() => Me.value && (!Le.value || Fe.value));
+		ae(I, (e) => {
+			e && Z(J);
+		}, { flush: "post" });
+		function Re() {
+			F &&= (window.removeEventListener("pointerdown", F, !0), window.removeEventListener("touchend", F, !0), void 0);
+		}
 		function L() {
-			I &&= (I(), void 0);
+			Fe.value = !0, P &&= (clearTimeout(P), void 0), Re();
 		}
-		let ze = 0, Be = () => ze;
-		function Ve() {
-			L(), F.value = !1;
-			let e = x.value;
-			if (!e) return;
-			let t = !1, n, r, i = () => {
-				t || (t = !0, L(), F.value = !0, X = null);
-			};
-			if (typeof e.requestVideoFrameCallback == "function") {
-				let t = e.requestVideoFrameCallback(() => i());
-				I = () => {
-					e.cancelVideoFrameCallback?.(t);
-				};
+		function ze() {
+			F || (F = () => {
+				R();
+			}, window.addEventListener("pointerdown", F, !0), window.addEventListener("touchend", F, !0));
+		}
+		function Be(e) {
+			let t = e.accelerationIncludingGravity;
+			if (!t || t.x == null || t.y == null) return;
+			let n = Math.round(Math.atan2(t.x, t.y) * 180 / Math.PI);
+			if (Pe.value = n, !(typeof screen < "u" && screen.orientation && screen.orientation.type || "portrait-primary").startsWith("portrait")) N.value = !1;
+			else {
+				let e = Math.abs(Math.abs(n) - 90);
+				!N.value && e < 40 ? N.value = !0 : N.value && e > 50 && (N.value = !1);
 			}
-			n = setInterval(() => {
-				e.videoWidth > 0 && i();
-			}, 200), r = setTimeout(() => {
-				if (r = void 0, t || !x.value) return;
-				let e = x.value.srcObject;
-				e && (x.value.srcObject = null, setTimeout(() => {
-					t || !x.value || (x.value.srcObject = e, x.value.play?.().catch(() => {}), at(Be()));
-				}, 100));
-			}, 600);
-			let a = setTimeout(() => {
-				if (t || !x.value) return;
-				let e = x.value, n = e.style.display;
-				e.style.display = "none", e.offsetHeight, e.style.display = n, x.value.play?.().catch(() => {});
-			}, 2500), o = setTimeout(() => {
-				t || !x.value || x.value.play?.().catch(() => {});
-			}, 1500);
-			I = () => {
-				n && clearInterval(n), r && clearTimeout(r), a && clearTimeout(a), o && clearTimeout(o);
-			};
+			Fe.value || L();
 		}
-		let R = l(() => F.value && (!Pe.value || Me.value)), z = l(() => ({
+		async function R() {
+			if (!(!v.correctOrientation || Ne.value)) try {
+				let e = window.DeviceOrientationEvent, t = window.DeviceMotionEvent;
+				if (e && typeof e.requestPermission == "function" && await e.requestPermission() !== "granted") {
+					L();
+					return;
+				}
+				t && typeof t.requestPermission == "function" && await t.requestPermission().catch(() => {}), window.addEventListener("devicemotion", Be, !0), Ne.value = !0, Re();
+			} catch (e) {
+				console.error(e, "enableMotion: failed"), L();
+			}
+		}
+		let z = s(() => ({
 			...ke,
-			...b.resolutions
-		})), He = l(() => Object.values(z.value)[0]);
-		function Ue(e) {
+			...v.resolutions
+		})), Ve = s(() => Object.values(z.value)[0]);
+		function He(e) {
 			return String(e || "").trim().toLowerCase().replace(/\s+/g, "").replace(/[:/]/g, "x");
 		}
-		let B = l(() => {
-			if (z.value[b.ratio]) return b.ratio;
-			let e = Ue(b.ratio);
+		let B = s(() => {
+			if (z.value[v.ratio]) return v.ratio;
+			let e = He(v.ratio);
 			if (z.value[e]) return e;
-		}), V = l(() => B.value ? z.value[B.value] : He.value), We = l(() => {
+		}), V = s(() => B.value ? z.value[B.value] : Ve.value), Ue = s(() => {
 			let e = B.value ? z.value[B.value] : void 0;
 			return e ? `${e.width} / ${e.height}` : void 0;
-		}), H = l(() => C.value.filter((e) => e.kind === "videoinput")), Ge = l(() => C.value.filter((e) => e.kind === "audioinput")), U = _([]), W = l(() => H.value.filter((e) => !U.value.includes(e.deviceId))), Ke = /\b(depth|ir\b|infrared|bayer|virtual|dual|triple|quad)\b/i, qe = l(() => {
-			let e = W.value.filter((e) => !e.label || !Ke.test(e.label));
-			if (e.length <= 2) return e;
-			let t = e.length - 1;
-			return e.filter((e, n) => n <= 1 || n === t);
-		});
-		function Je(e) {
+		}), H = s(() => x.value.filter((e) => e.kind === "videoinput")), We = s(() => x.value.filter((e) => e.kind === "audioinput")), U = g([]), W = s(() => H.value.filter((e) => !U.value.includes(e.deviceId)));
+		function Ge(e) {
 			e && !U.value.includes(e) && (U.value = [...U.value, e]);
 		}
-		function Ye(e) {
+		function Ke(e) {
 			let t = H.value;
 			if (!t.length) return;
 			let n = t.findIndex((t) => t.deviceId === e);
@@ -211,38 +205,38 @@ var ue = { class: "camera__preview" }, de = {
 				if (r && !U.value.includes(r.deviceId)) return r;
 			}
 		}
-		let Xe = l(() => qe.value.map((e, t) => ({
+		let qe = s(() => W.value.map((e, t) => ({
 			text: e.label.slice(0, e.label.indexOf("(")) || `Camera ${t + 1}`,
 			value: e.deviceId
-		}))), Ze = l({
+		}))), Je = s({
 			get() {
-				return w.value && w.value.deviceId;
+				return S.value && S.value.deviceId;
 			},
 			set(e) {
-				w.value = H.value.find((t) => t.deviceId === e), E.value = void 0;
+				S.value = H.value.find((t) => t.deviceId === e), w.value = void 0;
 			}
 		});
-		l({
+		s({
 			get() {
-				return T.value && T.value.deviceId;
+				return C.value && C.value.deviceId;
 			},
 			set(e) {
-				T.value = Ge.value.find((t) => t.deviceId === e);
+				C.value = We.value.find((t) => t.deviceId === e);
 			}
 		});
-		let G = l(() => b.enableMirrorCamera ? D.value ? D.value === "user" ? "mirror-cam" : "" : E.value ? E.value === "user" ? "mirror-cam" : "" : (w.value && H.value.findIndex((e) => e.deviceId === w.value?.deviceId)) === 0 ? "mirror-cam" : "" : ""), Qe = l(() => {
-			let e = w.value && C.value.findIndex((e) => e.deviceId === w.value?.deviceId);
+		let G = s(() => v.enableMirrorCamera ? T.value ? T.value === "user" ? "mirror-cam" : "" : w.value ? w.value === "user" ? "mirror-cam" : "" : (S.value && H.value.findIndex((e) => e.deviceId === S.value?.deviceId)) === 0 ? "mirror-cam" : "" : ""), Ye = s(() => {
+			let e = S.value && x.value.findIndex((e) => e.deviceId === S.value?.deviceId);
 			return G.value ? `${G.value} mirror-device-${e}` : "";
-		}), { tintRgb: $e, applyFilterToCanvas: et } = r(b);
-		function tt() {
+		}), { tintRgb: Xe, applyFilterToCanvas: Ze } = i(v);
+		function Qe() {
 			if (B.value && V.value) {
-				j.value = V.value.width, M.value = V.value.height;
+				k.value = V.value.width, A.value = V.value.height;
 				return;
 			}
-			j.value = x.value.parentElement && x.value.parentElement.clientWidth, M.value = x.value.parentElement && x.value.parentElement.clientHeight;
+			k.value = y.value.parentElement && y.value.parentElement.clientWidth, A.value = y.value.parentElement && y.value.parentElement.clientHeight;
 		}
-		let nt = Ae(() => {
-			tt();
+		let $e = Ae(() => {
+			Qe();
 		}, 300, {
 			trailing: !0,
 			leading: !1
@@ -250,11 +244,11 @@ var ue = { class: "camera__preview" }, de = {
 		function K(e) {
 			return new Promise((t) => setTimeout(t, e));
 		}
-		async function rt() {
+		async function et() {
 			let e = V.value ? {
 				width: V.value.width,
 				height: V.value.height
-			} : void 0, t = e ? Math.max(e.width, e.height) : void 0, n = e ? Math.min(e.width, e.height) : void 0, r = b.enableAudio && { ...T.value ? { deviceId: T.value.deviceId } : {} }, i = w.value && w.value.deviceId, a = E.value, o = [];
+			} : void 0, t = e ? Math.max(e.width, e.height) : void 0, n = e ? Math.min(e.width, e.height) : void 0, r = v.enableAudio && { ...C.value ? { deviceId: C.value.deviceId } : {} }, i = S.value && S.value.deviceId, a = w.value, o = [];
 			i ? (t && n && o.push({
 				deviceId: { exact: i },
 				width: { ideal: t },
@@ -270,227 +264,272 @@ var ue = { class: "camera__preview" }, de = {
 				width: { ideal: t },
 				height: { ideal: n }
 			}), o.push({}));
-			let s;
-			for (let e of o) {
-				let t = !!e.deviceId?.exact, n = t ? 2 : 5;
-				for (let i = 0; i < n; i++) try {
-					return await navigator.mediaDevices.getUserMedia({
-						audio: r,
-						video: e
-					});
-				} catch (e) {
-					s = e;
-					let n = e && e.name;
-					if (n === "NotReadableError" || n === "AbortError") {
-						await K(t ? 250 : 500);
-						continue;
-					}
-					break;
-				}
-				if (t && s?.name === "NotReadableError") {
-					let t = e.deviceId?.exact;
-					t && Je(t);
+			for (let e of o) for (let t = 0; t < 5; t++) try {
+				return await navigator.mediaDevices.getUserMedia({
+					audio: r,
+					video: e
+				});
+			} catch (e) {
+				let t = e && e.name;
+				if (t === "NotReadableError" || t === "AbortError") {
+					await K(500);
+					continue;
 				}
+				break;
 			}
-			throw s;
 		}
 		function q() {
-			L(), F.value = !1, x.value && x.value.srcObject && (x.value.srcObject.getTracks().forEach((e) => {
+			y.value && y.value.srcObject && (y.value.srcObject.getTracks().forEach((e) => {
 				e.stop();
-			}), x.value.srcObject = null);
+			}), y.value.srcObject = null);
 		}
-		let J = 0, Y, X = null;
-		function Z() {
-			Y &&= (clearTimeout(Y), void 0);
+		let J = 0, Y, tt;
+		function X() {
+			Y &&= (clearTimeout(Y), void 0), tt &&= (tt(), void 0);
 		}
-		function it(e) {
-			Je(e);
-			let t = Ye(e);
-			t && t.deviceId !== e && (w.value = t);
+		function nt(e) {
+			Ge(e);
+			let t = Ke(e);
+			t && t.deviceId !== e && (S.value = t);
 		}
-		function at(e) {
-			if (Z(), !(w.value && w.value.deviceId)) return;
-			let t = y(F, (e) => {
-				e && Z();
-			});
-			Y = setTimeout(async () => {
-				if (t(), Y = void 0, e !== J || !x.value || x.value.videoWidth > 0) return;
-				let n = w.value && w.value.deviceId;
-				if (!n) return;
-				if (X !== n) {
-					X = n, await Q();
+		function rt(e) {
+			X();
+			let t = S.value && S.value.deviceId, n = y.value;
+			if (!t || !n) return;
+			let r = n.srcObject && n.srcObject.getVideoTracks?.()[0];
+			if (!r || typeof r.addEventListener != "function" || n.videoWidth > 0) return;
+			let i = () => {
+				if (X(), e !== J || !y.value) return;
+				let n = Ke(t);
+				n && n.deviceId !== t && (q(), nt(t));
+			}, a = () => {
+				e === J && y.value && y.value.videoWidth > 0 && X();
+			}, o = () => {
+				i();
+			};
+			r.addEventListener("unmute", a), r.addEventListener("ended", o), tt = () => {
+				r.removeEventListener("unmute", a), r.removeEventListener("ended", o);
+			}, Y = setTimeout(() => {
+				Y = void 0, !(e !== J || !y.value) && (y.value.videoWidth === 0 ? i() : X());
+			}, 8e3);
+		}
+		let it = 0;
+		async function Z(e) {
+			for (let t = 0; t < 3; t++) {
+				if (e !== J || !y.value) return;
+				try {
+					await y.value.play?.();
 					return;
+				} catch {
+					t < 2 && await K(300);
 				}
-				let r = Ye(n);
-				r && r.deviceId !== n && (q(), it(n));
-			}, 5e3);
+			}
+		}
+		function at() {
+			return !!(y.value && y.value.videoWidth > 0);
+		}
+		function Q(e, t) {
+			return new Promise((n) => {
+				let r = Date.now(), i = () => {
+					if (e !== J || !y.value) return n(!1);
+					if (at()) return n(!0);
+					if (Date.now() - r >= t) return n(!1);
+					setTimeout(i, 100);
+				};
+				i();
+			});
+		}
+		async function ot(e) {
+			if (typeof (y.value?.srcObject)?.getVideoTracks?.()[0]?.addEventListener != "function" || await Q(e, 800) || e !== J || !y.value || (await Z(e), await Q(e, 800)) || e !== J || !y.value) return;
+			let t = y.value, n = t.style.display;
+			if (t.style.display = "none", t.offsetHeight, t.style.display = n, await Z(e), await Q(e, 800) || e !== J || !y.value) return;
+			let r = y.value.srcObject;
+			r && (y.value.srcObject = null, await ee(), e !== J || !y.value || (y.value.srcObject = r, await Z(e), await Q(e, 800))) || e === J && await $();
 		}
-		async function Q() {
+		function st() {
+			document.visibilityState !== "visible" || !D.value || !y.value || (y.value.paused || y.value.videoWidth === 0) && Z(J);
+		}
+		async function $() {
 			let e = ++J;
-			ze = e, Z();
-			let t = !!(x.value && x.value.srcObject);
-			if (q(), O.value = void 0, t && (await K(350), e !== J)) return;
-			let n;
-			try {
-				n = await rt();
-			} catch {
-				n = void 0;
-			}
+			X();
+			let t = !!(y.value && y.value.srcObject);
+			if (q(), E.value = void 0, t && (await K(350), e !== J)) return;
+			let n = await et();
 			if (e !== J) {
 				n?.getTracks?.().forEach((e) => e.stop());
 				return;
 			}
-			if (n && x.value) {
-				Ve(), x.value.srcObject = n;
+			if (n && y.value) {
+				it = 0, y.value.srcObject = n;
 				let t = n.getVideoTracks?.()[0]?.getSettings?.();
-				D.value = t?.facingMode, O.value = t?.deviceId, x.value.muted = !0;
-				try {
-					await x.value.play?.();
-				} catch {
-					await K(300), await x.value.play?.().catch(() => {});
-				}
-				at(e);
-			} else if (!n && w.value) {
-				q(), it(w.value.deviceId), e === J && w.value && await Q();
+				T.value = t?.facingMode, E.value = t?.deviceId, y.value.muted = !0, await Z(e), rt(e), ot(e);
+			} else if (!n && S.value) {
+				it < 2 && (it++, await K(600), e === J && await $());
 				return;
 			}
-			return C.value = await navigator.mediaDevices.enumerateDevices(), {
-				stream: x.value && x.value.srcObject,
-				devices: C.value
+			return x.value = await navigator.mediaDevices.enumerateDevices(), {
+				stream: y.value && y.value.srcObject,
+				devices: x.value
 			};
 		}
-		function ot() {
-			document.visibilityState !== "visible" || !k.value || !x.value || x.value.paused && x.value.play?.().catch(() => {});
-		}
-		function st() {
-			k.value ? (k.value = !1, A.value = !1, q()) : (k.value = !0, Q());
-		}
 		function ct() {
-			let e = W.value;
-			if (e.length > 1) {
-				let t = O.value || w.value && w.value.deviceId, n = e[e.findIndex((e) => e.deviceId === t) <= 0 ? e.length - 1 : 0];
-				if (n && n.deviceId !== t) {
-					w.value = n, E.value = void 0;
-					return;
-				}
-			}
-			w.value = void 0, E.value = E.value === "user" ? "environment" : "user", Q();
+			D.value ? (D.value = !1, O.value = !1, q()) : (D.value = !0, $());
+		}
+		function lt() {
+			S.value = void 0, w.value = w.value === "user" ? "environment" : "user", $();
 		}
-		async function lt(e, t) {
-			e && e.deviceId === O.value || e && (!t || e.deviceId !== t.deviceId) && await Q();
+		async function ut(e, t) {
+			e && e.deviceId === E.value || e && (!t || e.deviceId !== t.deviceId) && await $();
 		}
-		y(() => w.value, lt), y(() => T.value, lt);
-		function $() {
-			b.countdown ? (N.value = N.value ? N.value - 1 : b.countdown, N.value ? setTimeout($, 1e3) : ut()) : ut();
+		ae(() => S.value, ut), ae(() => C.value, ut);
+		function dt() {
+			v.countdown ? (j.value = j.value ? j.value - 1 : v.countdown, j.value ? setTimeout(dt, 1e3) : mt()) : mt();
 		}
-		te({
-			onCapture: $,
-			enableMotion: Fe,
-			camera: x.value,
-			zoom: P
+		p({
+			onCapture: dt,
+			enableMotion: R,
+			camera: y.value,
+			zoom: M
 		});
-		function ut() {
-			A.value = !0;
-			let e = x.value;
-			!S.value || !e || dt(a(S.value, e, {
-				targetResolution: V.value || void 0,
-				hasExplicitRatio: !!B.value,
-				enableCropImage: b.enableCropImage,
-				zoom: P.value,
-				mirror: !!G.value,
-				captureRotation: Le(),
-				onSave: dt
-			}, et));
+		function ft() {
+			if (!v.correctOrientation || Pe.value == null) return 0;
+			let e = ((Pe.value - 180) % 360 + 360) % 360;
+			return (-1 * (Math.round(e / 90) * 90 % 360) % 360 + 360) % 360;
+		}
+		function pt(e, t, n, r, i) {
+			let a = b.value.width, o = b.value.height;
+			e.translate(a / 2, o / 2), G.value && e.scale(-1, 1), e.rotate(n * Math.PI / 180);
+			let s = o, c = a, l = Math.max(s / r, c / i) * (M.value && M.value > 0 ? M.value : 1), u = r * l, d = i * l;
+			e.drawImage(t, -u / 2, -d / 2, u, d);
+		}
+		function mt() {
+			O.value = !0;
+			let e = b.value.getContext("2d"), t = y.value, n = t && t.srcObject && t.srcObject.getTracks(), { aspectRatio: r, width: i, height: a } = n.length && n[0].getSettings(), o = t?.videoWidth || i || k.value, s = t?.videoHeight || a || A.value, c = o && s ? o / s : r, l = V.value || {
+				width: o,
+				height: s
+			}, u = l?.width || o, d = B.value ? l?.height || s : Math.round(u / c), f = u / d;
+			if (b.value.width = u, b.value.height = d, !o || !s || !c) return;
+			let p = ft();
+			if (e.save(), p === 90 || p === 270) {
+				pt(e, t, p, o, s), e.restore(), Ze(e, b.value.width, b.value.height), ht(b.value.toDataURL("image/png"));
+				return;
+			}
+			if (p === 180 && (e.translate(b.value.width, b.value.height), e.scale(-1, -1)), G.value && (e.translate(b.value.width, 0), e.scale(-1, 1)), v.enableCropImage) {
+				let n = 0, r = 0, i = o, a = s;
+				if (c > f ? (i = s * f, n = (o - i) / 2) : c < f && (a = o / f, r = (s - a) / 2), M.value && M.value !== 1) {
+					let e = i / M.value, t = a / M.value;
+					n += (i - e) / 2, r += (a - t) / 2, i = e, a = t;
+				}
+				e.drawImage(t, n, r, i, a, 0, 0, b.value.width, b.value.height);
+			} else {
+				let n = b.value.width, r = b.value.height, i = 0, a = 0;
+				if (c > f ? (r = b.value.width / c, a = (b.value.height - r) / 2) : c < f && (n = b.value.height * c, i = (b.value.width - n) / 2), M.value && M.value !== 1) {
+					let c = o / M.value, l = s / M.value, u = (o - c) / 2, d = (s - l) / 2;
+					G.value && (i = b.value.width - i - n), e.drawImage(t, u, d, c, l, i, a, n, r);
+				} else G.value && (i = b.value.width - i - n), e.drawImage(t, 0, 0, o, s, i, a, n, r);
+			}
+			e.restore(), Ze(e, b.value.width, b.value.height), ht(b.value.toDataURL("image/png"));
 		}
-		function dt(e) {
-			je("update:modelValue", o(e));
+		function ht(e) {
+			let t = n(e);
+			je("update:modelValue", {
+				name: `cam-pic-${(/* @__PURE__ */ new Date()).toISOString()}`,
+				id: `cam-pic-${(/* @__PURE__ */ new Date()).toISOString()}`,
+				blob: t,
+				size: t.size
+			});
 		}
 		return re(async () => {
-			E.value = b.defaultRearCamera ? "environment" : "user", await Q(), k.value = !0;
-			let e = H.value.find((e) => e.deviceId === O.value), t = b.defaultRearCamera && H.value.length > 1 ? H.value[H.value.length - 1] : e || H.value[0];
-			w.value = t, b.enableAudio && (T.value = Ge.value[0]), navigator.mediaDevices.addEventListener("devicechange", async (e) => {
-				await Q();
-			}), document.addEventListener("visibilitychange", ot), window.addEventListener("resize", nt), tt(), Ie();
+			w.value = v.defaultRearCamera ? "environment" : "user", await $(), D.value = !0;
+			let e = H.value.find((e) => e.deviceId === E.value), t = v.defaultRearCamera && H.value.length > 1 ? H.value[H.value.length - 1] : e || H.value[0];
+			if (S.value = t, v.enableAudio && (C.value = We.value[0]), navigator.mediaDevices.addEventListener("devicechange", async (e) => {
+				await $();
+			}), document.addEventListener("visibilitychange", st), window.addEventListener("resize", $e), Qe(), Le.value) {
+				P = setTimeout(L, 3e3);
+				let e = window.DeviceOrientationEvent;
+				e && typeof e.requestPermission == "function" ? ze() : R();
+			}
+			await ee(), Me.value = !0;
 		}), ne(() => {
-			k.value = !1, A.value = !1, Z(), L(), q(), window.removeEventListener("resize", nt), document.removeEventListener("visibilitychange", ot), Re();
-		}), (r, i) => (g(), d("div", { class: m(["camera", Qe.value]) }, [
-			f("div", ue, [
-				R.value ? u("", !0) : (g(), d("div", de, [p(t, { color: "#000" }, {
-					default: oe(() => [f("span", {
+			D.value = !1, O.value = !1, X(), q(), window.removeEventListener("resize", $e), window.removeEventListener("devicemotion", Be, !0), document.removeEventListener("visibilitychange", st), P && clearTimeout(P), Re();
+		}), (n, i) => (h(), u("div", { class: m(["camera", Ye.value]) }, [
+			d("div", ue, [
+				I.value ? l("", !0) : (h(), u("div", de, [f(t, { color: "#000" }, {
+					default: oe(() => [d("span", {
 						class: m("d-block text-center"),
-						innerHTML: r.$t("camera.waitForCameraNotification")
+						innerHTML: n.$t("camera.waitForCameraNotification")
 					}, null, 8, fe)]),
 					_: 1
 				})])),
-				f("div", {
+				se(d("div", {
 					class: m(["camera__video-wrapper", B.value ? `aspect-ratio--${B.value}` : ""]),
-					style: h({
-						aspectRatio: We.value || void 0,
-						transform: P.value === 1 ? void 0 : `scale(${P.value})`
+					style: te({
+						aspectRatio: Ue.value || void 0,
+						transform: M.value === 1 ? void 0 : `scale(${M.value})`
 					})
-				}, [f("video", {
+				}, [d("video", {
 					ref_key: "camera",
-					ref: x,
+					ref: y,
 					class: "camera__video",
-					style: h({
-						filter: b.filter === "grayscale" ? "grayscale(100%)" : b.filter === "sepia" ? "sepia(100%)" : "none",
-						transform: c.correctOrientation && ie(Ne) ? "rotate(180deg)" : void 0
+					style: te({
+						filter: v.filter === "grayscale" ? "grayscale(100%)" : v.filter === "sepia" ? "sepia(100%)" : "none",
+						transform: o.correctOrientation && N.value ? "rotate(180deg)" : void 0
 					}),
 					autoplay: "",
 					muted: "",
 					playsinline: ""
-				}, null, 4), c.tintColor ? (g(), d("div", {
+				}, null, 4), o.tintColor ? (h(), u("div", {
 					key: 0,
 					class: "camera__tint-overlay",
-					style: h({
-						backgroundColor: c.tintColor,
-						opacity: c.tintIntensity,
+					style: te({
+						backgroundColor: o.tintColor,
+						opacity: o.tintIntensity,
 						mixBlendMode: "multiply"
 					})
-				}, null, 4)) : u("", !0)], 6),
-				se(f("canvas", {
+				}, null, 4)) : l("", !0)], 6), [[ie, I.value]]),
+				se(d("canvas", {
 					ref_key: "canvas",
-					ref: S,
+					ref: b,
 					class: "camera__canvas",
-					width: j.value,
-					height: M.value
-				}, null, 8, pe), [[ae, A.value]]),
-				N.value ? (g(), d("div", me, [(g(), d("p", {
+					width: k.value,
+					height: A.value
+				}, null, 8, pe), [[ie, O.value]]),
+				j.value ? (h(), u("div", me, [(h(), u("p", {
 					class: "countdown",
-					key: N.value,
-					innerHTML: N.value,
-					"data-countdown": N.value
-				}, null, 8, he))])) : u("", !0),
-				c.enableGuide && k.value && R.value ? (g(), d("img", {
+					key: j.value,
+					innerHTML: j.value,
+					"data-countdown": j.value
+				}, null, 8, he))])) : l("", !0),
+				o.enableGuide && D.value && I.value ? (h(), u("img", {
 					key: 2,
 					class: "camera__guide",
-					src: c.guideSrc
-				}, null, 8, ge)) : u("", !0),
-				c.enableZoomSlider ? (g(), d("div", _e, [p(s, {
-					modelValue: P.value,
-					"onUpdate:modelValue": i[0] ||= (e) => P.value = e
-				}, null, 8, ["modelValue"])])) : u("", !0)
+					src: o.guideSrc
+				}, null, 8, ge)) : l("", !0),
+				o.enableZoomSlider ? (h(), u("div", _e, [f(a, {
+					modelValue: M.value,
+					"onUpdate:modelValue": i[0] ||= (e) => M.value = e
+				}, null, 8, ["modelValue"])])) : l("", !0)
 			]),
-			f("div", ve, [f("div", ye, [f("div", be, [f("div", xe, [f("div", Se, [f("button", {
+			d("div", ve, [d("div", ye, [d("div", be, [d("div", xe, [d("div", Se, [d("button", {
 				type: "button",
 				class: "camera__toggle btn btn-primary",
-				onClick: st
-			}, [k.value ? (g(), d("span", we, v(r.$t("common.pause")), 1)) : (g(), d("span", Ce, v(r.$t("common.play")), 1))]), f("button", {
+				onClick: ct
+			}, [D.value ? (h(), u("span", we, _(n.$t("common.pause")), 1)) : (h(), u("span", Ce, _(n.$t("common.play")), 1))]), d("button", {
 				type: "button",
 				class: "camera__capture btn btn-primary",
-				onClick: $
-			}, v(r.$t("camera.capture")), 1)])])])])]),
-			(c.enableSwitchCamera || c.enableSelectDevice) && W.value && W.value.length > 1 ? (g(), d("div", Te, [f("div", Ee, [c.enableSelectDevice ? (g(), ee(n, {
+				onClick: dt
+			}, _(n.$t("camera.capture")), 1)])])])])]),
+			(o.enableSwitchCamera || o.enableSelectDevice) && W.value && W.value.length > 1 ? (h(), u("div", Te, [d("div", Ee, [o.enableSelectDevice ? (h(), c(r, {
 				key: 0,
-				modelValue: Ze.value,
-				"onUpdate:modelValue": i[1] ||= (e) => Ze.value = e,
-				options: Xe.value,
+				modelValue: Je.value,
+				"onUpdate:modelValue": i[1] ||= (e) => Je.value = e,
+				options: qe.value,
 				class: "w-100"
-			}, null, 8, ["modelValue", "options"])) : u("", !0)]), f("div", De, [c.enableSwitchCamera ? (g(), d("button", {
+			}, null, 8, ["modelValue", "options"])) : l("", !0)]), d("div", De, [o.enableSwitchCamera ? (h(), u("button", {
 				key: 0,
 				class: "btn",
-				onClick: ce(ct, ["prevent"])
-			}, [p(e, { symbol: "switch-camera" })])) : u("", !0)])])) : u("", !0)
+				onClick: ce(lt, ["prevent"])
+			}, [f(e, { symbol: "switch-camera" })])) : l("", !0)])])) : l("", !0)
 		], 2));
 	}
 });