ablok-components 0.3.57 → 0.3.59

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

@@ -0,0 +1,392 @@
+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";
+/* empty css                                               */
+import Be from "../../atoms/svg-icon/svg-icon.vue.js";
+/* empty css                                 */
+import Ee 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";
+/* empty css                                       */
+import He from "../../../assets/img/guide.png.js";
+const Le = { class: "camera__preview" }, Ue = {
+  key: 0,
+  class: "camera__bg-notification"
+}, Ne = ["innerHTML"], je = ["width", "height"], Ae = {
+  key: 1,
+  class: "camera__countdown-overlay"
+}, We = ["innerHTML", "data-countdown"], Fe = ["src"], Ge = {
+  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 = {
+  key: 0,
+  class: "camera__select-device"
+}, et = { class: "col" }, tt = { class: "" }, at = {
+  name: "BaseCamera",
+  inheritAttrs: !1
+}, ne = {
+  "1x1": { width: 720, height: 720 },
+  "2x3": { width: 720, height: 1080 },
+  "3x2": { width: 1080, height: 720 },
+  "3x4": { width: 720, height: 960 },
+  "4x3": { width: 960, height: 720 },
+  "4x5": { width: 960, height: 1200 },
+  "5x4": { width: 1200, height: 960 },
+  "16x9": { width: 1280, height: 720 },
+  "9x16": { width: 720, height: 1280 }
+}, pt = /* @__PURE__ */ Se({
+  ...at,
+  props: {
+    modelValue: {
+      type: null
+    },
+    enableSwitchCamera: {
+      type: Boolean,
+      default: !0
+    },
+    defaultRearCamera: {
+      type: Boolean,
+      default: !1
+    },
+    enableMirrorCamera: {
+      type: Boolean,
+      default: !1
+    },
+    enableGuide: {
+      type: Boolean,
+      default: !0
+    },
+    guideSrc: {
+      type: String,
+      default: () => He
+    },
+    countdown: {
+      type: Number,
+      default: 0
+    },
+    ratio: {
+      type: String,
+      default: ""
+    },
+    filter: {
+      type: String,
+      default: "none",
+      validator: (n) => ["none", "grayscale", "sepia"].includes(n)
+    },
+    tintColor: {
+      type: String,
+      default: ""
+    },
+    tintIntensity: {
+      type: Number,
+      default: 0.3
+    },
+    enableAudio: {
+      type: Boolean,
+      default: !1
+    },
+    enableSelectDevice: {
+      type: Boolean,
+      default: !1
+    },
+    enableCropImage: {
+      type: Boolean,
+      default: !0
+    },
+    resolutions: {
+      type: Object,
+      default: () => ne
+    },
+    zoom: {
+      type: Number,
+      default: 1
+    },
+    enableZoomSlider: {
+      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) {
+      return String(e || "").trim().toLowerCase().replace(/\s+/g, "").replace(/[:/]/g, "x");
+    }
+    const g = d(() => {
+      if ($.value[i.ratio])
+        return i.ratio;
+      const e = de(i.ratio);
+      if ($.value[e])
+        return e;
+    }), x = d(() => g.value ? $.value[g.value] : re.value), ve = d(() => {
+      const e = g.value ? $.value[g.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) => ({
+      text: e.label.slice(0, e.label.indexOf("(")) || `Camera ${t + 1}`,
+      value: e.deviceId
+    }))), P = d({
+      get() {
+        return s.value && s.value.deviceId;
+      },
+      set(e) {
+        s.value = y.value.find((t) => t.deviceId === e);
+      }
+    });
+    d({
+      get() {
+        return I.value && I.value.deviceId;
+      },
+      set(e) {
+        I.value = K.value.find((t) => t.deviceId === e);
+      }
+    });
+    const O = d(() => {
+      const e = s.value && y.value.findIndex((t) => t.deviceId === s.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;
+        return;
+      }
+      L.value = c.value.parentElement && c.value.parentElement.clientWidth, U.value = c.value.parentElement && c.value.parentElement.clientHeight;
+    }
+    const J = $e(() => {
+      q();
+    }, 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 = {
+        audio: i.enableAudio && {
+          ...I.value ? { deviceId: I.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 }
+          } : {}
+        }
+      };
+      return navigator.mediaDevices.getUserMedia(b).catch((j) => {
+        console.error(j, "navigator.mediaDevices.getUserMedia: failed");
+      });
+    }
+    function B() {
+      c.value && c.value.srcObject && c.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 };
+    }
+    function Q() {
+      z.value ? (z.value = !1, H.value = !1, B()) : (z.value = !0, E());
+    }
+    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();
+      }
+    }
+    async function Y(e, t) {
+      B(), e && (!t || e.deviceId !== t.deviceId) && await E();
+    }
+    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 });
+    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)
+        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;
+        }
+        e.drawImage(
+          t,
+          p,
+          S,
+          l,
+          w,
+          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(
+            t,
+            be,
+            Ce,
+            V,
+            M,
+            l,
+            w,
+            p,
+            S
+          );
+        } else
+          O.value && (l = a.value.width - l - p), e.drawImage(
+            t,
+            0,
+            0,
+            m,
+            h,
+            l,
+            w,
+            p,
+            S
+          );
+      }
+      e.restore(), fe(e, a.value.width, a.value.height);
+      const _e = a.value.toDataURL("image/png");
+      pe(_e);
+    }
+    function pe(e) {
+      const t = Ve(e);
+      ce("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])
+    }, [
+      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"),
+                innerHTML: e.$t("camera.waitForCameraNotification")
+              }, null, 8, Ne)
+            ]),
+            _: 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 })
+        }, [
+          o("video", {
+            ref_key: "camera",
+            ref: c,
+            class: "camera__video",
+            style: G({ filter: i.filter === "grayscale" ? "grayscale(100%)" : i.filter === "sepia" ? "sepia(100%)" : "none" }),
+            autoplay: "",
+            playsinline: ""
+          }, null, 4),
+          n.tintColor ? (v(), f("div", {
+            key: 0,
+            class: "camera__tint-overlay",
+            style: G({
+              backgroundColor: n.tintColor,
+              opacity: n.tintIntensity,
+              mixBlendMode: "multiply"
+            })
+          }, null, 4)) : k("", !0)
+        ], 6), [
+          [oe, T.value]
+        ]),
+        le(o("canvas", {
+          ref_key: "canvas",
+          ref: a,
+          class: "camera__canvas",
+          width: L.value,
+          height: U.value
+        }, null, 8, je), [
+          [oe, H.value]
+        ]),
+        _.value ? (v(), f("div", Ae, [
+          (v(), f("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: 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)
+          }, null, 8, ["modelValue"])
+        ])) : k("", !0)
+      ]),
+      o("div", Ze, [
+        o("div", Ke, [
+          o("div", Pe, [
+            o("div", qe, [
+              o("div", Je, [
+                o("button", {
+                  type: "button",
+                  class: "camera__toggle btn btn-primary",
+                  onClick: Q
+                }, [
+                  z.value ? (v(), f("span", Xe, Z(e.$t("common.pause")), 1)) : (v(), f("span", Qe, Z(e.$t("common.play")), 1))
+                ]),
+                o("button", {
+                  type: "button",
+                  class: "camera__capture btn btn-primary",
+                  onClick: N
+                }, Z(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, {
+            key: 0,
+            modelValue: P.value,
+            "onUpdate:modelValue": t[1] || (t[1] = (b) => P.value = b),
+            options: me.value,
+            class: "w-100"
+          }, null, 8, ["modelValue", "options"])) : k("", !0)
+        ]),
+        o("div", tt, [
+          n.enableSwitchCamera ? (v(), f("button", {
+            key: 0,
+            class: "btn",
+            onClick: Re(X, ["prevent"])
+          }, [
+            F(Be, { symbol: "switch-camera" })
+          ])) : k("", !0)
+        ])
+      ])) : k("", !0)
+    ], 2));
+  }
+});
+export {
+  pt as default
+};

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

@@ -0,0 +1,5 @@
+import o from "./base-camera.vue.js";
+/* empty css                 */
+export {
+  o as default
+};