@feugene/granularity-media 0.2.0 → 0.2.1

package/dist/components/GrCameraCapture/chunks/{GrCameraCapture-DJKFrVfw.js → GrCameraCapture-B9EPXm7r.js}

@@ -1,11 +1,11 @@
 import { a as e, c as t, l as n, n as r, o as i, r as a, s as o, u as s } from "../../../chunks/config-CZ4ZDG0_.js";
 import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, onMounted as y, openBlock as b, ref as x, renderSlot as S, shallowRef as C, toDisplayString as w, unref as T, withCtx as E } from "vue";
 import D from "@feugene/granularity/components/GrButton";
-import { useAnnouncer as O } from "@feugene/granularity/composables/useAnnouncer";
-import { useGrComponentSize as k } from "@feugene/granularity/composables/useGrComponentConfig";
-import { useGranularityTranslations as A } from "@feugene/granularity/composables/useGranularityTranslations";
+import { useAnnouncer as ee } from "@feugene/granularity/composables/useAnnouncer";
+import { useGrComponentSize as te } from "@feugene/granularity/composables/useGrComponentConfig";
+import { useGranularityTranslations as ne } from "@feugene/granularity/composables/useGranularityTranslations";
 //#region src/components/GrCameraCapture/cameraState.ts
-function j(e) {
+function O(e) {
 	switch (e instanceof Error ? e.name : "") {
 		case "NotAllowedError":
 		case "SecurityError":
@@ -19,13 +19,13 @@ function j(e) {
 		default: return "error";
 	}
 }
-function M(e) {
+function k(e) {
 	return typeof e?.mediaDevices?.getUserMedia == "function";
 }
-function N(e, t) {
+function A(e, t) {
 	return t ?? e === "user";
 }
-function P(e, t) {
+function j(e, t) {
 	let n = t > 0 ? t : 1;
 	if (e.width <= 0 || e.height <= 0) return {
 		sx: 0,
@@ -52,16 +52,16 @@ function P(e, t) {
 }
 //#endregion
 //#region src/components/GrCameraCapture/GrCameraCapture.vue?vue&type=script&setup=true&lang.ts
-var F = ["aria-label"], I = /* @__PURE__ */ h({
+var M = ["aria-label"], N = /* @__PURE__ */ h({
 	__name: "GrCameraCapture",
 	props: {
 		facing: { default: "user" },
 		deviceId: { default: void 0 },
+		aspectRatio: { default: void 0 },
 		autoStart: {
 			type: Boolean,
 			default: !1
 		},
-		aspectRatio: { default: 4 / 3 },
 		mirror: {
 			type: Boolean,
 			default: void 0
@@ -80,118 +80,122 @@ var F = ["aria-label"], I = /* @__PURE__ */ h({
 		"stop",
 		"statusChange"
 	],
-	setup(h, { expose: I, emit: L }) {
-		let R = h, z = L, { t: B } = A(), { announce: V } = O(), H = k(() => R.size, { component: "GrCameraCapture" }), U = x(null), W = C(null), G = x("idle"), K = c(() => N(R.facing, R.mirror)), q = c(() => G.value === "live"), J = c(() => {
-			switch (G.value) {
-				case "starting": return B("grMedia.camera.starting", "Requesting camera access…");
-				case "denied": return B("grMedia.camera.denied", "Camera access is blocked. Allow it in the browser settings for this site.");
-				case "missing": return B("grMedia.camera.missing", "No camera found on this device.");
-				case "busy": return B("grMedia.camera.busy", "The camera is busy in another application.");
-				case "insecure": return B("grMedia.camera.insecure", "The camera works only over HTTPS.");
-				case "error": return B("grMedia.camera.error", "The camera could not be started.");
-				default: return B("grMedia.camera.idle", "The camera is off.");
+	setup(h, { expose: N, emit: P }) {
+		let F = h, I = P, { t: L } = ne(), { announce: R } = ee(), z = te(() => F.size, { component: "GrCameraCapture" }), B = x(null), V = C(null), H = x("idle"), U = x(null), W = c(() => F.aspectRatio ?? U.value ?? 4 / 3), G = c(() => A(F.facing, F.mirror)), K = c(() => H.value === "live"), q = c(() => {
+			switch (H.value) {
+				case "starting": return L("grMedia.camera.starting", "Requesting camera access…");
+				case "denied": return L("grMedia.camera.denied", "Camera access is blocked. Allow it in the browser settings for this site.");
+				case "missing": return L("grMedia.camera.missing", "No camera found on this device.");
+				case "busy": return L("grMedia.camera.busy", "The camera is busy in another application.");
+				case "insecure": return L("grMedia.camera.insecure", "The camera works only over HTTPS.");
+				case "error": return L("grMedia.camera.error", "The camera could not be started.");
+				default: return L("grMedia.camera.idle", "The camera is off.");
 			}
 		});
-		function Y(e) {
-			G.value !== e && (G.value = e, z("statusChange", e));
+		function J(e) {
+			H.value !== e && (H.value = e, I("statusChange", e));
+		}
+		function Y() {
+			let e = B.value;
+			!e || e.videoWidth <= 0 || e.videoHeight <= 0 || (U.value = e.videoWidth / e.videoHeight);
 		}
 		function X() {
-			W.value?.getTracks().forEach((e) => e.stop()), W.value = null, U.value && (U.value.srcObject = null);
+			V.value?.getTracks().forEach((e) => e.stop()), V.value = null, U.value = null, B.value && (B.value.srcObject = null);
 		}
 		async function Z() {
-			if (!(R.disabled || G.value === "starting" || G.value === "live")) {
-				if (!M(navigator)) {
-					Y("insecure");
+			if (!(F.disabled || H.value === "starting" || H.value === "live")) {
+				if (!k(navigator)) {
+					J("insecure");
 					return;
 				}
-				Y("starting");
+				J("starting");
 				try {
 					let e = await navigator.mediaDevices.getUserMedia({
-						video: R.deviceId ? { deviceId: { exact: R.deviceId } } : { facingMode: R.facing },
+						video: F.deviceId ? { deviceId: { exact: F.deviceId } } : { facingMode: F.facing },
 						audio: !1
 					});
-					W.value = e, U.value && (U.value.srcObject = e, await U.value.play().catch(() => void 0)), Y("live"), z("start"), V(B("grMedia.camera.live", "Camera is on"));
+					V.value = e, B.value && (B.value.srcObject = e, B.value.addEventListener("loadedmetadata", Y, { once: !0 }), await B.value.play().catch(() => void 0), Y()), J("live"), I("start"), R(L("grMedia.camera.live", "Camera is on"));
 				} catch (e) {
-					X(), Y(j(e)), V(J.value, { politeness: "assertive" });
+					X(), J(O(e)), R(q.value, { politeness: "assertive" });
 				}
 			}
 		}
 		function Q() {
-			W.value && (X(), Y("idle"), z("stop"));
+			V.value && (X(), J("idle"), I("stop"));
 		}
 		async function $() {
-			let e = U.value;
-			if (!e || !q.value) return null;
-			let t = P({
+			let e = B.value;
+			if (!e || !K.value) return null;
+			let t = j({
 				width: e.videoWidth,
 				height: e.videoHeight
-			}, R.aspectRatio);
+			}, W.value);
 			if (t.sw <= 0) return null;
 			let n = document.createElement("canvas");
-			n.width = Math.max(1, Math.round(R.output?.width ?? t.sw)), n.height = Math.max(1, Math.round(R.output?.height ?? t.sh));
+			n.width = Math.max(1, Math.round(F.output?.width ?? t.sw)), n.height = Math.max(1, Math.round(F.output?.height ?? t.sh));
 			let r = n.getContext("2d");
 			if (!r) return null;
 			r.drawImage(e, t.sx, t.sy, t.sw, t.sh, 0, 0, n.width, n.height);
 			let i = await new Promise((e) => {
-				n.toBlob(e, R.output?.type ?? "image/jpeg", R.output?.quality ?? .92);
+				n.toBlob(e, F.output?.type ?? "image/jpeg", F.output?.quality ?? .92);
 			});
-			return i && (z("capture", i), V(B("grMedia.camera.captured", "Photo taken"))), i;
+			return i && (I("capture", i), R(L("grMedia.camera.captured", "Photo taken"))), i;
 		}
 		return y(() => {
-			R.autoStart && Z();
-		}), v(X), I({
+			F.autoStart && Z();
+		}), v(X), N({
 			start: Z,
 			stop: Q,
 			capture: $,
-			status: G
+			status: H
 		}), (c, v) => (b(), d("div", {
 			class: g(T(i)),
 			role: "group",
-			"aria-label": h.ariaLabel ?? T(B)("grMedia.camera.label", "Camera")
+			"aria-label": h.ariaLabel ?? T(L)("grMedia.camera.label", "Camera")
 		}, [f("div", {
 			class: g(T(a)),
-			style: _({ aspectRatio: String(h.aspectRatio) })
+			style: _({ aspectRatio: String(W.value) })
 		}, [f("video", {
 			ref_key: "videoEl",
-			ref: U,
-			class: g([T(s), K.value ? T(e) : ""]),
+			ref: B,
+			class: g([T(s), G.value ? T(e) : ""]),
 			playsinline: "",
 			muted: "",
 			autoplay: ""
-		}, null, 2), q.value ? u("", !0) : (b(), d("div", {
+		}, null, 2), K.value ? u("", !0) : (b(), d("div", {
 			key: 0,
 			class: g(T(t))
-		}, [f("p", { class: g([T(n), T(o)[T(H)]]) }, w(J.value), 3), G.value !== "starting" && G.value !== "insecure" && G.value !== "missing" ? (b(), l(T(D), {
+		}, [f("p", { class: g([T(n), T(o)[T(z)]]) }, w(q.value), 3), H.value !== "starting" && H.value !== "insecure" && H.value !== "missing" ? (b(), l(T(D), {
 			key: 0,
-			size: T(H),
+			size: T(z),
 			disabled: h.disabled,
 			onClick: Z
 		}, {
-			default: E(() => [p(w(G.value === "idle" ? T(B)("grMedia.camera.start", "Turn on camera") : T(B)("grMedia.camera.retry", "Try again")), 1)]),
+			default: E(() => [p(w(H.value === "idle" ? T(L)("grMedia.camera.start", "Turn on camera") : T(L)("grMedia.camera.retry", "Try again")), 1)]),
 			_: 1
 		}, 8, ["size", "disabled"])) : u("", !0)], 2))], 6), f("div", { class: g(T(r)) }, [S(c.$slots, "controls", {
-			status: G.value,
+			status: H.value,
 			start: Z,
 			stop: Q,
 			capture: $
 		}, () => [m(T(D), {
-			size: T(H),
-			disabled: h.disabled || !q.value,
+			size: T(z),
+			disabled: h.disabled || !K.value,
 			onClick: $
 		}, {
-			default: E(() => [p(w(T(B)("grMedia.camera.capture", "Take photo")), 1)]),
+			default: E(() => [p(w(T(L)("grMedia.camera.capture", "Take photo")), 1)]),
 			_: 1
-		}, 8, ["size", "disabled"]), q.value ? (b(), l(T(D), {
+		}, 8, ["size", "disabled"]), K.value ? (b(), l(T(D), {
 			key: 0,
 			variant: "outline",
-			size: T(H),
+			size: T(z),
 			disabled: h.disabled,
 			onClick: Q
 		}, {
-			default: E(() => [p(w(T(B)("grMedia.camera.stop", "Turn off")), 1)]),
+			default: E(() => [p(w(T(L)("grMedia.camera.stop", "Turn off")), 1)]),
 			_: 1
-		}, 8, ["size", "disabled"])) : u("", !0)])], 2)], 10, F));
+		}, 8, ["size", "disabled"])) : u("", !0)])], 2)], 10, M));
 	}
 });
 //#endregion
-export { N as a, M as i, P as n, j as r, I as t };
+export { A as a, k as i, j as n, O as r, N as t };

package/dist/components/GrCameraCapture/index.js

@@ -1,3 +1,3 @@
-import { a as e, i as t, n, r, t as i } from "./chunks/GrCameraCapture-DJKFrVfw.js";
+import { a as e, i as t, n, r, t as i } from "./chunks/GrCameraCapture-B9EPXm7r.js";
 import { i as a, t as o } from "../../chunks/config-CZ4ZDG0_.js";
 export { i as GrCameraCapture, i as default, n as cameraFrameRect, r as cameraStatusFromError, t as cameraSupported, o as grCameraCaptureConfig, a as grCameraCaptureSafelist, e as shouldMirrorPreview };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, i as t, n, r, t as i } from "./components/GrCameraCapture/chunks/GrCameraCapture-DJKFrVfw.js";
+import { a as e, i as t, n, r, t as i } from "./components/GrCameraCapture/chunks/GrCameraCapture-B9EPXm7r.js";
 import { i as a, t as o } from "./chunks/config-CZ4ZDG0_.js";
 import { a as s, i as c, n as l, o as u, r as d, s as f, t as p } from "./components/GrImageCrop/chunks/GrImageCrop-Fo2qrX2n.js";
 import { a as m, t as h } from "./chunks/config-Be_Mh801.js";

package/dist/types/components/GrCameraCapture/GrCameraCapture.vue.d.ts

@@ -11,6 +11,13 @@ export interface GrCameraCaptureProps {
     facing?: GrCameraFacing;
     /** Конкретное устройство, если приложение его уже выбрало. */
     deviceId?: string;
+    /**
+     * Соотношение сторон рамки и снимка.
+     *
+     * Без него рамка принимает соотношение самого потока: камеры отдают то 4:3,
+     * то 16:9, и любое зашитое число показало бы обрезанный кадр как настоящий.
+     */
+    aspectRatio?: number;
     /**
      * Включать камеру сразу.
      *
@@ -18,7 +25,6 @@ export interface GrCameraCaptureProps {
      * отклоняют не глядя, а второй раз браузер уже не спросит.
      */
     autoStart?: boolean;
-    aspectRatio?: number;
     /** Зеркалить превью. По умолчанию — только фронтальную камеру. */
     mirror?: boolean;
     output?: GrCameraCaptureOutput;
@@ -55,7 +61,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     facing: string;
     deviceId: undefined;
     autoStart: boolean;
-    aspectRatio: number;
+    aspectRatio: undefined;
     mirror: undefined;
     output: undefined;
     size: undefined;
@@ -75,7 +81,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     facing: string;
     deviceId: undefined;
     autoStart: boolean;
-    aspectRatio: number;
+    aspectRatio: undefined;
     mirror: undefined;
     output: undefined;
     size: undefined;
@@ -89,8 +95,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>, {
     facing: GrCameraFacing;
     deviceId: string;
-    autoStart: boolean;
     aspectRatio: number;
+    autoStart: boolean;
     mirror: boolean;
     output: GrCameraCaptureOutput;
     size: GrCameraCaptureSize;

package/dist/types/components/GrImageCrop/GrImageCrop.vue.d.ts

@@ -85,12 +85,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     ariaLabel: undefined;
 }>>> & Readonly<{
     onError?: ((error: unknown) => any) | undefined;
-    "onUpdate:zoom"?: ((value: number) => any) | undefined;
     onChange?: ((rect: GrCropRect) => any) | undefined;
     onLoad?: ((size: {
         width: number;
         height: number;
     }) => any) | undefined;
+    "onUpdate:zoom"?: ((value: number) => any) | undefined;
 }>, {
     aspectRatio: number;
     output: GrImageCropOutput;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@feugene/granularity-media",
   "description": "Media components for @feugene/granularity: image cropping, camera capture, code scanning and video playback.",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "SEE LICENSE IN LICENSE",
   "author": {
     "name": "Evgeniy Fureev",