ablok-components 0.3.75 → 0.3.77

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

@@ -1,32 +1,32 @@
-import { defineComponent as Pe, ref as r, computed as v, watch as ye, onMounted as We, nextTick as je, onBeforeUnmount as Ae, openBlock as g, createElementBlock as w, normalizeClass as ae, createElementVNode as h, createVNode as ie, withCtx as Fe, createCommentVNode as O, withDirectives as be, normalizeStyle as oe, vShow as _e, toDisplayString as ne, createBlock as Ne, withModifiers as qe } from "vue";
-import { debounce as Ze } from "lodash";
-import Ke from "../../atoms/loading-spinner/loading-spinner.vue.js";
+import { defineComponent as tt, ref as d, computed as m, watch as De, onMounted as at, nextTick as it, onBeforeUnmount as nt, openBlock as y, createElementBlock as b, normalizeClass as ue, createElementVNode as p, createVNode as de, withCtx as ot, createCommentVNode as x, withDirectives as Me, normalizeStyle as ve, vShow as xe, toDisplayString as he, createBlock as lt, withModifiers as rt } from "vue";
+import { debounce as st } from "lodash";
+import ct from "../../atoms/loading-spinner/loading-spinner.vue.js";
 /* empty css                                               */
-import Je from "../../atoms/svg-icon/svg-icon.vue.js";
+import ut from "../../atoms/svg-icon/svg-icon.vue.js";
 /* empty css                                 */
-import Qe from "../input-dropdown/input-dropdown.vue.js";
+import dt from "../input-dropdown/input-dropdown.vue.js";
 /* empty css                                    */
-import { dataURItoBlob as Xe } from "../../../utilities/helpers.js";
-import { useCameraFilter as Ye } from "../../../composables/useCameraFilter.js";
-import et from "../../atoms/zoom-slider/zoom-slider.vue.js";
+import { dataURItoBlob as vt } from "../../../utilities/helpers.js";
+import { useCameraFilter as ht } from "../../../composables/useCameraFilter.js";
+import mt from "../../atoms/zoom-slider/zoom-slider.vue.js";
 /* empty css                                       */
-import tt from "../../../assets/img/guide.png.js";
-const at = { class: "camera__preview" }, it = {
+import ft from "../../../assets/img/guide.png.js";
+const wt = { class: "camera__preview" }, gt = {
   key: 0,
   class: "camera__bg-notification"
-}, ot = ["innerHTML"], nt = ["width", "height"], lt = {
+}, pt = ["innerHTML"], yt = ["width", "height"], bt = {
   key: 1,
   class: "camera__countdown-overlay"
-}, rt = ["innerHTML", "data-countdown"], st = ["src"], ct = {
+}, _t = ["innerHTML", "data-countdown"], Et = ["src"], Ct = {
   key: 3,
   class: "camera__zoom-slider"
-}, ut = { class: "camera__controls" }, dt = { class: "container" }, vt = { class: "row" }, ht = { class: "col" }, mt = { class: "btn-group" }, ft = { key: 0 }, gt = { key: 1 }, wt = {
+}, It = { class: "camera__controls" }, St = { class: "container" }, kt = { class: "row" }, Dt = { class: "col" }, Mt = { class: "btn-group" }, xt = { key: 0 }, Ot = { key: 1 }, Rt = {
   key: 0,
   class: "camera__select-device"
-}, pt = { class: "col" }, yt = { class: "" }, bt = {
+}, Lt = { class: "col" }, Tt = { class: "" }, At = {
   name: "BaseCamera",
   inheritAttrs: !1
-}, Ce = {
+}, Oe = {
   "1x1": { width: 720, height: 720 },
   "2x3": { width: 720, height: 1080 },
   "3x2": { width: 1080, height: 720 },
@@ -36,8 +36,8 @@ const at = { class: "camera__preview" }, it = {
   "5x4": { width: 1200, height: 960 },
   "16x9": { width: 1280, height: 720 },
   "9x16": { width: 720, height: 1280 }
-}, $t = /* @__PURE__ */ Pe({
-  ...bt,
+}, Kt = /* @__PURE__ */ tt({
+  ...At,
   props: {
     modelValue: {
       type: null
@@ -60,7 +60,7 @@ const at = { class: "camera__preview" }, it = {
     },
     guideSrc: {
       type: String,
-      default: () => tt
+      default: () => ft
     },
     countdown: {
       type: Number,
@@ -73,7 +73,7 @@ const at = { class: "camera__preview" }, it = {
     filter: {
       type: String,
       default: "none",
-      validator: (c) => ["none", "grayscale", "sepia"].includes(c)
+      validator: (f) => ["none", "grayscale", "sepia"].includes(f)
     },
     tintColor: {
       type: String,
@@ -97,7 +97,7 @@ const at = { class: "camera__preview" }, it = {
     },
     resolutions: {
       type: Object,
-      default: () => Ce
+      default: () => Oe
     },
     zoom: {
       type: Number,
@@ -113,361 +113,422 @@ const at = { class: "camera__preview" }, it = {
     }
   },
   emits: ["update:modelValue"],
-  setup(c, { expose: ke, emit: Se }) {
-    const i = c, De = Se, s = r(), a = r(), le = r(!1), V = r([]), m = r(), x = r(), R = r(!1), W = r(!1), j = r(0), A = r(0), C = r(), l = r(i.zoom || 1), re = r(!1), z = r(!1), Z = r(null), K = r(!1);
-    let L, k;
-    const Ie = typeof window < "u" && "DeviceMotionEvent" in window && (window.matchMedia?.("(pointer: coarse)")?.matches || "ontouchstart" in window), se = v(() => i.correctOrientation && Ie), J = v(() => le.value && (!se.value || K.value));
-    function Q() {
-      k && (window.removeEventListener("pointerdown", k, !0), window.removeEventListener("touchend", k, !0), k = void 0);
+  setup(f, { expose: Re, emit: Le }) {
+    const s = f, Te = Le, i = d(), n = d(), me = d(!1), U = d([]), c = d(), O = d(), R = d(!1), Z = d(!1), K = d(0), X = d(0), I = d(), v = d(s.zoom || 1), fe = d(!1), A = d(!1), ae = d(null), ie = d(!1);
+    let z, S;
+    const Ae = typeof window < "u" && "DeviceMotionEvent" in window && (window.matchMedia?.("(pointer: coarse)")?.matches || "ontouchstart" in window), we = m(() => s.correctOrientation && Ae), ne = m(() => me.value && (!we.value || ie.value));
+    function oe() {
+      S && (window.removeEventListener("pointerdown", S, !0), window.removeEventListener("touchend", S, !0), S = void 0);
     }
-    function F() {
-      K.value = !0, L && (clearTimeout(L), L = void 0), Q();
+    function J() {
+      ie.value = !0, z && (clearTimeout(z), z = void 0), oe();
     }
-    function Ee() {
-      k || (k = () => {
-        X();
-      }, window.addEventListener("pointerdown", k, !0), window.addEventListener("touchend", k, !0));
+    function ze() {
+      S || (S = () => {
+        le();
+      }, window.addEventListener("pointerdown", S, !0), window.addEventListener("touchend", S, !0));
     }
-    function ce(e) {
+    function ge(e) {
       const t = e.accelerationIncludingGravity;
       if (!t || t.x == null || t.y == null) return;
-      const o = Math.round(Math.atan2(t.x, t.y) * 180 / Math.PI);
-      if (Z.value = o, !(typeof screen < "u" && screen.orientation && screen.orientation.type || "portrait-primary").startsWith("portrait"))
-        z.value = !1;
+      const a = Math.round(Math.atan2(t.x, t.y) * 180 / Math.PI);
+      if (ae.value = a, !(typeof screen < "u" && screen.orientation && screen.orientation.type || "portrait-primary").startsWith("portrait"))
+        A.value = !1;
       else {
-        const E = Math.abs(Math.abs(o) - 90);
-        !z.value && E < 40 ? z.value = !0 : z.value && E > 50 && (z.value = !1);
+        const h = Math.abs(Math.abs(a) - 90);
+        !A.value && h < 40 ? A.value = !0 : A.value && h > 50 && (A.value = !1);
       }
-      K.value || F();
+      ie.value || J();
     }
-    async function X() {
-      if (!(!i.correctOrientation || re.value))
+    async function le() {
+      if (!(!s.correctOrientation || fe.value))
         try {
           const e = window.DeviceOrientationEvent, t = window.DeviceMotionEvent;
           if (e && typeof e.requestPermission == "function" && await e.requestPermission() !== "granted") {
-            F();
+            J();
             return;
           }
           t && typeof t.requestPermission == "function" && await t.requestPermission().catch(() => {
-          }), window.addEventListener("devicemotion", ce, !0), re.value = !0, Q();
+          }), window.addEventListener("devicemotion", ge, !0), fe.value = !0, oe();
         } catch (e) {
-          console.error(e, "enableMotion: failed"), F();
+          console.error(e, "enableMotion: failed"), J();
         }
     }
-    const H = v(() => ({ ...Ce, ...i.resolutions })), Me = v(() => Object.values(H.value)[0]);
-    function Oe(e) {
+    const W = m(() => ({ ...Oe, ...s.resolutions })), Ve = m(() => Object.values(W.value)[0]);
+    function $e(e) {
       return String(e || "").trim().toLowerCase().replace(/\s+/g, "").replace(/[:/]/g, "x");
     }
-    const S = v(() => {
-      if (H.value[i.ratio])
-        return i.ratio;
-      const e = Oe(i.ratio);
-      if (H.value[e])
+    const k = m(() => {
+      if (W.value[s.ratio])
+        return s.ratio;
+      const e = $e(s.ratio);
+      if (W.value[e])
         return e;
-    }), T = v(() => S.value ? H.value[S.value] : Me.value), xe = v(() => {
-      const e = S.value ? H.value[S.value] : void 0;
+    }), L = m(() => k.value ? W.value[k.value] : Ve.value), Be = m(() => {
+      const e = k.value ? W.value[k.value] : void 0;
       return e ? `${e.width} / ${e.height}` : void 0;
-    }), f = v(() => V.value.filter((e) => e.kind === "videoinput")), ue = v(() => V.value.filter((e) => e.kind === "audioinput")), Re = v(() => f.value.map((e, t) => ({
+    }), D = m(() => U.value.filter((e) => e.kind === "videoinput")), pe = m(() => U.value.filter((e) => e.kind === "audioinput")), j = d([]), Q = m(() => D.value.filter((e) => !j.value.includes(e.deviceId)));
+    function He(e) {
+      e && !j.value.includes(e) && (j.value = [...j.value, e]);
+    }
+    function ye(e) {
+      const t = D.value;
+      if (!t.length) return;
+      const a = t.findIndex((o) => o.deviceId === e);
+      for (let o = 1; o <= t.length; o++) {
+        const w = t[(Math.max(a, 0) + o) % t.length];
+        if (w && !j.value.includes(w.deviceId))
+          return w;
+      }
+    }
+    const Ue = m(() => Q.value.map((e, t) => ({
       text: e.label.slice(0, e.label.indexOf("(")) || `Camera ${t + 1}`,
       value: e.deviceId
-    }))), de = v({
+    }))), be = m({
       get() {
-        return m.value && m.value.deviceId;
+        return c.value && c.value.deviceId;
       },
       set(e) {
-        m.value = f.value.find((t) => t.deviceId === e);
+        c.value = D.value.find((t) => t.deviceId === e);
       }
     });
-    v({
+    m({
       get() {
-        return x.value && x.value.deviceId;
+        return O.value && O.value.deviceId;
       },
       set(e) {
-        x.value = ue.value.find((t) => t.deviceId === e);
+        O.value = pe.value.find((t) => t.deviceId === e);
       }
     });
-    const $ = v(() => {
-      const e = m.value && f.value.findIndex((t) => t.deviceId === m.value.deviceId);
-      return i.enableMirrorCamera && e === 0 ? "mirror-cam" : "";
-    }), Te = v(() => {
-      const e = m.value && V.value.findIndex((t) => t.deviceId === m.value.deviceId);
-      return $.value ? `${$.value} mirror-device-${e}` : "";
-    }), { tintRgb: _t, applyFilterToCanvas: ve } = Ye(i);
-    function he() {
-      if (S.value && T.value) {
-        j.value = T.value.width, A.value = T.value.height;
+    const V = m(() => {
+      const e = c.value && D.value.findIndex((t) => t.deviceId === c.value.deviceId);
+      return s.enableMirrorCamera && e === 0 ? "mirror-cam" : "";
+    }), We = m(() => {
+      const e = c.value && U.value.findIndex((t) => t.deviceId === c.value.deviceId);
+      return V.value ? `${V.value} mirror-device-${e}` : "";
+    }), { tintRgb: zt, applyFilterToCanvas: _e } = ht(s);
+    function Ee() {
+      if (k.value && L.value) {
+        K.value = L.value.width, X.value = L.value.height;
         return;
       }
-      j.value = s.value.parentElement && s.value.parentElement.clientWidth, A.value = s.value.parentElement && s.value.parentElement.clientHeight;
+      K.value = i.value.parentElement && i.value.parentElement.clientWidth, X.value = i.value.parentElement && i.value.parentElement.clientHeight;
     }
-    const me = Ze(() => {
-      he();
+    const Ce = st(() => {
+      Ee();
     }, 300, { trailing: !0, leading: !1 });
-    async function ze() {
-      const e = T.value ? { width: T.value.width, height: T.value.height } : void 0, t = e ? Math.max(e.width, e.height) : void 0, o = e ? Math.min(e.width, e.height) : void 0, D = i.enableAudio && {
-        ...x.value ? { deviceId: x.value.deviceId } : {}
+    function re(e) {
+      return new Promise((t) => setTimeout(t, e));
+    }
+    async function je() {
+      const e = L.value ? { width: L.value.width, height: L.value.height } : void 0, t = e ? Math.max(e.width, e.height) : void 0, a = e ? Math.min(e.width, e.height) : void 0, o = s.enableAudio && {
+        ...O.value ? { deviceId: O.value.deviceId } : {}
         // deviceId: activeAudioDevice.value ? { exact: activeAudioDevice.value } : undefined
-      }, I = {
-        ...m.value ? { deviceId: { exact: m.value.deviceId } } : {}
-      };
-      try {
-        return await navigator.mediaDevices.getUserMedia({
-          audio: D,
-          video: {
-            ...I,
-            ...t ? { width: { ideal: t } } : {},
-            ...o ? { height: { ideal: o } } : {}
+      }, w = c.value && c.value.deviceId, h = [];
+      w ? (t && a && h.push({ deviceId: { exact: w }, width: { ideal: t }, height: { ideal: a } }), h.push({ deviceId: { exact: w } })) : (t && a && h.push({ width: { ideal: t }, height: { ideal: a } }), h.push({}));
+      for (const l of h)
+        for (let r = 0; r < 5; r++)
+          try {
+            return await navigator.mediaDevices.getUserMedia({ audio: o, video: l });
+          } catch (u) {
+            const B = u && u.name;
+            if (B === "NotReadableError" || B === "AbortError") {
+              await re(500);
+              continue;
+            }
+            break;
           }
-        });
-      } catch {
-        try {
-          return await navigator.mediaDevices.getUserMedia({ audio: D, video: I });
-        } catch (n) {
-          console.error(n, "navigator.mediaDevices.getUserMedia: failed");
-        }
-      }
     }
     function Y() {
-      s.value && s.value.srcObject && (s.value.srcObject.getTracks().forEach((t) => {
+      i.value && i.value.srcObject && (i.value.srcObject.getTracks().forEach((t) => {
         t.stop();
-      }), s.value.srcObject = null);
+      }), i.value.srcObject = null);
     }
-    let fe = 0;
+    let T = 0;
+    const Ge = 350, Ne = 8e3;
+    let G, ee;
+    function $() {
+      G && (clearTimeout(G), G = void 0), ee && (ee(), ee = void 0);
+    }
+    function Pe(e) {
+      He(e);
+      const t = ye(e);
+      t && t.deviceId !== e && (c.value = t);
+    }
+    function Fe(e) {
+      $();
+      const t = c.value && c.value.deviceId, a = i.value;
+      if (!t || !a) return;
+      const o = a.srcObject && a.srcObject.getVideoTracks?.()[0];
+      if (!o || !(typeof o.addEventListener == "function") || a.videoWidth > 0) return;
+      const h = () => {
+        if ($(), e !== T || !i.value) return;
+        const u = ye(t);
+        u && u.deviceId !== t && (Y(), Pe(t));
+      }, l = () => {
+        e === T && i.value && i.value.videoWidth > 0 && $();
+      }, r = () => {
+        h();
+      };
+      o.addEventListener("unmute", l), o.addEventListener("ended", r), ee = () => {
+        o.removeEventListener("unmute", l), o.removeEventListener("ended", r);
+      }, G = setTimeout(() => {
+        G = void 0, !(e !== T || !i.value) && (i.value.videoWidth === 0 ? h() : $());
+      }, Ne);
+    }
+    const qe = 2;
+    let se = 0;
     async function N() {
-      const e = ++fe;
-      Y();
-      const t = await ze();
-      if (e !== fe) {
-        t?.getTracks?.().forEach((o) => o.stop());
+      const e = ++T;
+      $();
+      const t = !!(i.value && i.value.srcObject);
+      if (Y(), t && (await re(Ge), e !== T))
+        return;
+      const a = await je();
+      if (e !== T) {
+        a?.getTracks?.().forEach((o) => o.stop());
+        return;
+      }
+      if (a && i.value) {
+        se = 0, i.value.srcObject = a, i.value.muted = !0;
+        try {
+          await i.value.play?.();
+        } catch {
+        }
+        Fe(e);
+      } else if (!a && c.value) {
+        se < qe && (se++, await re(600), e === T && await N());
         return;
       }
-      return t && s.value && (s.value.srcObject = t), V.value = await navigator.mediaDevices.enumerateDevices(), { stream: s.value && s.value.srcObject, devices: V.value };
+      return U.value = await navigator.mediaDevices.enumerateDevices(), { stream: i.value && i.value.srcObject, devices: U.value };
     }
-    function Le() {
-      R.value ? (R.value = !1, W.value = !1, Y()) : (R.value = !0, N());
+    function Ze() {
+      R.value ? (R.value = !1, Z.value = !1, Y()) : (R.value = !0, N());
     }
-    function $e() {
-      if (f.value.length > 1) {
-        const e = f.value.findIndex((t) => t.deviceId === m.value?.deviceId);
-        m.value = f.value[e === f.value.length - 1 ? 0 : e + 1];
+    function Ke() {
+      const e = Q.value;
+      if (e.length > 1) {
+        const t = e.findIndex((a) => a.deviceId === c.value?.deviceId);
+        c.value = e[t === e.length - 1 ? 0 : t + 1];
       }
     }
-    async function ge(e, t) {
+    async function Ie(e, t) {
       e && (!t || e.deviceId !== t.deviceId) && await N();
     }
-    ye(() => m.value, ge), ye(() => x.value, ge);
-    function ee() {
-      i.countdown ? (C.value = C.value ? C.value - 1 : i.countdown, C.value ? setTimeout(ee, 1e3) : we()) : we();
+    De(() => c.value, Ie), De(() => O.value, Ie);
+    function ce() {
+      s.countdown ? (I.value = I.value ? I.value - 1 : s.countdown, I.value ? setTimeout(ce, 1e3) : Se()) : Se();
     }
-    ke({ onCapture: ee, enableMotion: X, camera: s.value, zoom: l });
-    function Be() {
-      if (!i.correctOrientation || Z.value == null) return 0;
-      const e = ((Z.value - 180) % 360 + 360) % 360;
+    Re({ onCapture: ce, enableMotion: le, camera: i.value, zoom: v });
+    function Xe() {
+      if (!s.correctOrientation || ae.value == null) return 0;
+      const e = ((ae.value - 180) % 360 + 360) % 360;
       return (-1 * (Math.round(e / 90) * 90 % 360) % 360 + 360) % 360;
     }
-    function Ve(e, t, o, D, I) {
-      const E = a.value.width, n = a.value.height;
-      e.translate(E / 2, n / 2), $.value && e.scale(-1, 1), e.rotate(o * Math.PI / 180);
-      const u = n, p = E, B = Math.max(u / D, p / I) * (l.value && l.value > 0 ? l.value : 1), U = D * B, _ = I * B;
-      e.drawImage(t, -U / 2, -_ / 2, U, _);
+    function Je(e, t, a, o, w) {
+      const h = n.value.width, l = n.value.height;
+      e.translate(h / 2, l / 2), V.value && e.scale(-1, 1), e.rotate(a * Math.PI / 180);
+      const r = l, u = h, H = Math.max(r / o, u / w) * (v.value && v.value > 0 ? v.value : 1), P = o * H, C = w * H;
+      e.drawImage(t, -P / 2, -C / 2, P, C);
     }
-    function we() {
-      W.value = !0;
-      const e = a.value.getContext("2d"), t = s.value, o = t && t.srcObject && t.srcObject.getTracks(), { aspectRatio: D, width: I, height: E } = o.length && o[0].getSettings(), n = t?.videoWidth || I || j.value, u = t?.videoHeight || E || A.value, p = n && u ? n / u : D, te = T.value || { width: n, height: u }, B = te?.width || n, U = S.value ? te?.height || u : Math.round(B / p), _ = B / U;
-      if (a.value.width = B, a.value.height = U, !n || !u || !p)
+    function Se() {
+      Z.value = !0;
+      const e = n.value.getContext("2d"), t = i.value, a = t && t.srcObject && t.srcObject.getTracks(), { aspectRatio: o, width: w, height: h } = a.length && a[0].getSettings(), l = t?.videoWidth || w || K.value, r = t?.videoHeight || h || X.value, u = l && r ? l / r : o, B = L.value || { width: l, height: r }, H = B?.width || l, P = k.value ? B?.height || r : Math.round(H / u), C = H / P;
+      if (n.value.width = H, n.value.height = P, !l || !r || !u)
         return;
-      const q = Be();
-      if (e.save(), q === 90 || q === 270) {
-        Ve(e, t, q, n, u), e.restore(), ve(e, a.value.width, a.value.height), pe(a.value.toDataURL("image/png"));
+      const te = Xe();
+      if (e.save(), te === 90 || te === 270) {
+        Je(e, t, te, l, r), e.restore(), _e(e, n.value.width, n.value.height), ke(n.value.toDataURL("image/png"));
         return;
       }
-      if (q === 180 && (e.translate(a.value.width, a.value.height), e.scale(-1, -1)), $.value && (e.translate(a.value.width, 0), e.scale(-1, 1)), i.enableCropImage) {
-        let y = 0, M = 0, d = n, b = u;
-        if (p > _ ? (d = u * _, y = (n - d) / 2) : p < _ && (b = n / _, M = (u - b) / 2), l.value && l.value !== 1) {
-          const G = d / l.value, P = b / l.value;
-          y += (d - G) / 2, M += (b - P) / 2, d = G, b = P;
+      if (te === 180 && (e.translate(n.value.width, n.value.height), e.scale(-1, -1)), V.value && (e.translate(n.value.width, 0), e.scale(-1, 1)), s.enableCropImage) {
+        let _ = 0, M = 0, g = l, E = r;
+        if (u > C ? (g = r * C, _ = (l - g) / 2) : u < C && (E = l / C, M = (r - E) / 2), v.value && v.value !== 1) {
+          const F = g / v.value, q = E / v.value;
+          _ += (g - F) / 2, M += (E - q) / 2, g = F, E = q;
         }
         e.drawImage(
           t,
-          y,
+          _,
           M,
-          d,
-          b,
+          g,
+          E,
           0,
           0,
-          a.value.width,
-          a.value.height
+          n.value.width,
+          n.value.height
         );
       } else {
-        let y = a.value.width, M = a.value.height, d = 0, b = 0;
-        if (p > _ ? (M = a.value.width / p, b = (a.value.height - M) / 2) : p < _ && (y = a.value.height * p, d = (a.value.width - y) / 2), l.value && l.value !== 1) {
-          const G = n / l.value, P = u / l.value, Ue = (n - G) / 2, Ge = (u - P) / 2;
-          $.value && (d = a.value.width - d - y), e.drawImage(
+        let _ = n.value.width, M = n.value.height, g = 0, E = 0;
+        if (u > C ? (M = n.value.width / u, E = (n.value.height - M) / 2) : u < C && (_ = n.value.height * u, g = (n.value.width - _) / 2), v.value && v.value !== 1) {
+          const F = l / v.value, q = r / v.value, Ye = (l - F) / 2, et = (r - q) / 2;
+          V.value && (g = n.value.width - g - _), e.drawImage(
             t,
-            Ue,
-            Ge,
-            G,
-            P,
-            d,
-            b,
-            y,
+            Ye,
+            et,
+            F,
+            q,
+            g,
+            E,
+            _,
             M
           );
         } else
-          $.value && (d = a.value.width - d - y), e.drawImage(
+          V.value && (g = n.value.width - g - _), e.drawImage(
             t,
             0,
             0,
-            n,
-            u,
-            d,
-            b,
-            y,
+            l,
+            r,
+            g,
+            E,
+            _,
             M
           );
       }
-      e.restore(), ve(e, a.value.width, a.value.height);
-      const He = a.value.toDataURL("image/png");
-      pe(He);
+      e.restore(), _e(e, n.value.width, n.value.height);
+      const Qe = n.value.toDataURL("image/png");
+      ke(Qe);
     }
-    function pe(e) {
-      const t = Xe(e);
-      De("update:modelValue", {
+    function ke(e) {
+      const t = vt(e);
+      Te("update:modelValue", {
         name: `cam-pic-${(/* @__PURE__ */ new Date()).toISOString()}`,
         id: `cam-pic-${(/* @__PURE__ */ new Date()).toISOString()}`,
         blob: t,
         size: t.size
       });
     }
-    return We(async () => {
+    return at(async () => {
       await N(), R.value = !0;
-      const e = i.defaultRearCamera && f.value.length > 1 ? f.value[f.value.length - 1] : f.value[0];
-      if (m.value = e, i.enableAudio && (x.value = ue.value[0]), navigator.mediaDevices.addEventListener("devicechange", async (t) => {
+      const e = s.defaultRearCamera && D.value.length > 1 ? D.value[D.value.length - 1] : D.value[0];
+      if (c.value = e, s.enableAudio && (O.value = pe.value[0]), navigator.mediaDevices.addEventListener("devicechange", async (t) => {
         await N();
-      }), window.addEventListener("resize", me), he(), se.value) {
-        L = setTimeout(F, 3e3);
+      }), window.addEventListener("resize", Ce), Ee(), we.value) {
+        z = setTimeout(J, 3e3);
         const t = window.DeviceOrientationEvent;
-        t && typeof t.requestPermission == "function" ? Ee() : X();
+        t && typeof t.requestPermission == "function" ? ze() : le();
       }
-      await je(), le.value = !0;
-    }), Ae(() => {
-      R.value = !1, W.value = !1, Y(), window.removeEventListener("resize", me), window.removeEventListener("devicemotion", ce, !0), L && clearTimeout(L), Q();
-    }), (e, t) => (g(), w("div", {
-      class: ae(["camera", Te.value])
+      await it(), me.value = !0;
+    }), nt(() => {
+      R.value = !1, Z.value = !1, $(), Y(), window.removeEventListener("resize", Ce), window.removeEventListener("devicemotion", ge, !0), z && clearTimeout(z), oe();
+    }), (e, t) => (y(), b("div", {
+      class: ue(["camera", We.value])
     }, [
-      h("div", at, [
-        J.value ? O("", !0) : (g(), w("div", it, [
-          ie(Ke, { color: "#000" }, {
-            default: Fe(() => [
-              h("span", {
-                class: ae("d-block text-center"),
+      p("div", wt, [
+        ne.value ? x("", !0) : (y(), b("div", gt, [
+          de(ct, { color: "#000" }, {
+            default: ot(() => [
+              p("span", {
+                class: ue("d-block text-center"),
                 innerHTML: e.$t("camera.waitForCameraNotification")
-              }, null, 8, ot)
+              }, null, 8, pt)
             ]),
             _: 1
           })
         ])),
-        be(h("div", {
-          class: ae(["camera__video-wrapper", S.value ? `aspect-ratio--${S.value}` : ""]),
-          style: oe({ aspectRatio: xe.value || void 0, transform: l.value !== 1 ? `scale(${l.value})` : void 0 })
+        Me(p("div", {
+          class: ue(["camera__video-wrapper", k.value ? `aspect-ratio--${k.value}` : ""]),
+          style: ve({ aspectRatio: Be.value || void 0, transform: v.value !== 1 ? `scale(${v.value})` : void 0 })
         }, [
-          h("video", {
+          p("video", {
             ref_key: "camera",
-            ref: s,
+            ref: i,
             class: "camera__video",
-            style: oe({
-              filter: i.filter === "grayscale" ? "grayscale(100%)" : i.filter === "sepia" ? "sepia(100%)" : "none",
-              transform: c.correctOrientation && z.value ? "rotate(180deg)" : void 0
+            style: ve({
+              filter: s.filter === "grayscale" ? "grayscale(100%)" : s.filter === "sepia" ? "sepia(100%)" : "none",
+              transform: f.correctOrientation && A.value ? "rotate(180deg)" : void 0
             }),
             autoplay: "",
+            muted: "",
             playsinline: ""
           }, null, 4),
-          c.tintColor ? (g(), w("div", {
+          f.tintColor ? (y(), b("div", {
             key: 0,
             class: "camera__tint-overlay",
-            style: oe({
-              backgroundColor: c.tintColor,
-              opacity: c.tintIntensity,
+            style: ve({
+              backgroundColor: f.tintColor,
+              opacity: f.tintIntensity,
               mixBlendMode: "multiply"
             })
-          }, null, 4)) : O("", !0)
+          }, null, 4)) : x("", !0)
         ], 6), [
-          [_e, J.value]
+          [xe, ne.value]
         ]),
-        be(h("canvas", {
+        Me(p("canvas", {
           ref_key: "canvas",
-          ref: a,
+          ref: n,
           class: "camera__canvas",
-          width: j.value,
-          height: A.value
-        }, null, 8, nt), [
-          [_e, W.value]
+          width: K.value,
+          height: X.value
+        }, null, 8, yt), [
+          [xe, Z.value]
         ]),
-        C.value ? (g(), w("div", lt, [
-          (g(), w("p", {
+        I.value ? (y(), b("div", bt, [
+          (y(), b("p", {
             class: "countdown",
-            key: C.value,
-            innerHTML: C.value,
-            "data-countdown": C.value
-          }, null, 8, rt))
-        ])) : O("", !0),
-        c.enableGuide && R.value && J.value ? (g(), w("img", {
+            key: I.value,
+            innerHTML: I.value,
+            "data-countdown": I.value
+          }, null, 8, _t))
+        ])) : x("", !0),
+        f.enableGuide && R.value && ne.value ? (y(), b("img", {
           key: 2,
           class: "camera__guide",
-          src: c.guideSrc
-        }, null, 8, st)) : O("", !0),
-        c.enableZoomSlider ? (g(), w("div", ct, [
-          ie(et, {
-            modelValue: l.value,
-            "onUpdate:modelValue": t[0] || (t[0] = (o) => l.value = o)
+          src: f.guideSrc
+        }, null, 8, Et)) : x("", !0),
+        f.enableZoomSlider ? (y(), b("div", Ct, [
+          de(mt, {
+            modelValue: v.value,
+            "onUpdate:modelValue": t[0] || (t[0] = (a) => v.value = a)
           }, null, 8, ["modelValue"])
-        ])) : O("", !0)
+        ])) : x("", !0)
       ]),
-      h("div", ut, [
-        h("div", dt, [
-          h("div", vt, [
-            h("div", ht, [
-              h("div", mt, [
-                h("button", {
+      p("div", It, [
+        p("div", St, [
+          p("div", kt, [
+            p("div", Dt, [
+              p("div", Mt, [
+                p("button", {
                   type: "button",
                   class: "camera__toggle btn btn-primary",
-                  onClick: Le
+                  onClick: Ze
                 }, [
-                  R.value ? (g(), w("span", gt, ne(e.$t("common.pause")), 1)) : (g(), w("span", ft, ne(e.$t("common.play")), 1))
+                  R.value ? (y(), b("span", Ot, he(e.$t("common.pause")), 1)) : (y(), b("span", xt, he(e.$t("common.play")), 1))
                 ]),
-                h("button", {
+                p("button", {
                   type: "button",
                   class: "camera__capture btn btn-primary",
-                  onClick: ee
-                }, ne(e.$t("camera.capture")), 1)
+                  onClick: ce
+                }, he(e.$t("camera.capture")), 1)
               ])
             ])
           ])
         ])
       ]),
-      (c.enableSwitchCamera || c.enableSelectDevice) && f.value && f.value.length > 1 ? (g(), w("div", wt, [
-        h("div", pt, [
-          c.enableSelectDevice ? (g(), Ne(Qe, {
+      (f.enableSwitchCamera || f.enableSelectDevice) && Q.value && Q.value.length > 1 ? (y(), b("div", Rt, [
+        p("div", Lt, [
+          f.enableSelectDevice ? (y(), lt(dt, {
             key: 0,
-            modelValue: de.value,
-            "onUpdate:modelValue": t[1] || (t[1] = (o) => de.value = o),
-            options: Re.value,
+            modelValue: be.value,
+            "onUpdate:modelValue": t[1] || (t[1] = (a) => be.value = a),
+            options: Ue.value,
             class: "w-100"
-          }, null, 8, ["modelValue", "options"])) : O("", !0)
+          }, null, 8, ["modelValue", "options"])) : x("", !0)
         ]),
-        h("div", yt, [
-          c.enableSwitchCamera ? (g(), w("button", {
+        p("div", Tt, [
+          f.enableSwitchCamera ? (y(), b("button", {
             key: 0,
             class: "btn",
-            onClick: qe($e, ["prevent"])
+            onClick: rt(Ke, ["prevent"])
           }, [
-            ie(Je, { symbol: "switch-camera" })
-          ])) : O("", !0)
+            de(ut, { symbol: "switch-camera" })
+          ])) : x("", !0)
         ])
-      ])) : O("", !0)
+      ])) : x("", !0)
     ], 2));
   }
 });
 export {
-  $t as default
+  Kt as default
 };