ablok-components 0.3.72 → 0.3.74

package/dist/components/molecules/base-camera/base-camera.vue.d.ts

@@ -68,8 +68,13 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
         type: BooleanConstructor;
         default: boolean;
     };
+    correctOrientation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     onCapture: () => void;
+    enableMotion: () => Promise<void>;
     camera: any;
     zoom: Ref<number, number>;
 }, {}, {}, {}, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {
@@ -143,6 +148,10 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
         type: BooleanConstructor;
         default: boolean;
     };
+    correctOrientation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
@@ -162,6 +171,7 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
     enableCropImage: boolean;
     resolutions: Record<string, any>;
     enableZoomSlider: boolean;
+    correctOrientation: boolean;
 }, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {
     camera: HTMLVideoElement;
     canvas: HTMLCanvasElement;

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

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