@feugene/granularity-media 0.2.1 → 0.4.0

package/dist/types/components/GrCodeScanner/__tests__/codeDetection.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/GrCodeScanner/codeDetection.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Распознавание кодов: нативный путь и точка подключения для остальных.
+ *
+ * `BarcodeDetector` есть в Chrome и Edge, но его нет ни в Safari, ни в Firefox —
+ * то есть на iPhone его нет вовсе, а там сканируют чаще всего. Тащить декодер в
+ * пакет нельзя: у него нет ни одной зависимости, и ради одного компонента
+ * появилась бы самая тяжёлая. Поэтому компонент умеет нативный путь сам, а
+ * остальные браузеры закрывает детектором, который передаёт приложение.
+ */
+/** Один распознанный код. */
+export interface GrCodeResult {
+    /** Содержимое: адрес, номер товара, текст. */
+    value: string;
+    /** Символика: `qr_code`, `ean_13`, `code_128`, … */
+    format: string;
+}
+/**
+ * Детектор кадра. Ровно та форма, в которую заворачивается любая библиотека:
+ * на вход — то, что умеет рисовать canvas, на выход — список кодов.
+ */
+export type GrCodeDetector = (source: CanvasImageSource) => Promise<GrCodeResult[]>;
+/** Есть ли нативный `BarcodeDetector`. */
+export declare function nativeDetectorSupported(scope?: typeof globalThis): boolean;
+/**
+ * Нативный детектор в общей форме.
+ *
+ * Формат приводится к нашему типу здесь, а не в компоненте: спецификация зовёт
+ * содержимое `rawValue`, и это единственное место, где чужое имя видно.
+ */
+export declare function createNativeDetector(formats: readonly string[] | undefined, scope?: typeof globalThis): GrCodeDetector | null;
+/**
+ * Что сообщать наружу из очередного кадра.
+ *
+ * Камера отдаёт десятки кадров в секунду, и один и тот же код распознаётся в
+ * каждом. Без фильтра приложение получило бы поток одинаковых событий и
+ * оформило бы двадцать заказов вместо одного. Поэтому по умолчанию сообщается
+ * только то, чего не было в предыдущем кадре.
+ *
+ * `continuous` нужен там, где сканируют подряд (приёмка на складе): там повтор
+ * того же кода — законное второе событие.
+ */
+export declare function freshCodes(previous: readonly GrCodeResult[], next: readonly GrCodeResult[], continuous: boolean): GrCodeResult[];

package/dist/types/components/GrCodeScanner/config.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Кнопки состояния и управления — `GrButton` ядра, и ребро объявлено: пресет
+ * подмешивает safelist и CSS только тем компонентам, что попали в селекцию.
+ */
+export declare const grCodeScannerConfig: import("@feugene/unocss-preset-granular/contract").GranularComponentDescriptor<"GrCodeScanner">;

package/dist/types/components/GrCodeScanner/defaults.d.ts

@@ -0,0 +1,16 @@
+import type { GrCodeScannerSize } from './grCodeScannerStyles';
+/**
+ * Настраиваемые через `GrConfigProvider` пропы.
+ *
+ * Аугментация реестра идёт по месту объявления — через
+ * `@feugene/granularity/composables/useGrComponentConfig`, а не через реэкспорт:
+ * иначе слияние отваливается молча.
+ */
+export interface GrCodeScannerConfigurableProps {
+    size?: GrCodeScannerSize;
+}
+declare module '@feugene/granularity/composables/useGrComponentConfig' {
+    interface GrComponentDefaultsRegistry {
+        GrCodeScanner?: GrCodeScannerConfigurableProps;
+    }
+}

package/dist/types/components/GrCodeScanner/grCodeScannerStyles.d.ts

@@ -0,0 +1,19 @@
+export type GrCodeScannerSize = 'xs' | 'sm' | 'md' | 'lg';
+export declare const rootClass = "grid gap-2";
+export declare const frameClass = "relative w-full overflow-hidden rounded-[var(--gr-radius-md)] border border-[var(--gr-brd)] bg-[var(--gr-muted)]";
+export declare const videoClass = "h-full w-full object-contain";
+/**
+ * Прицел: показывает, куда наводить. Рамка, а не затемнение вокруг, — код
+ * распознаётся по всему кадру, и затемнение обещало бы обратное.
+ */
+export declare const reticleClass = "pointer-events-none absolute inset-[15%] rounded-[var(--gr-radius-md)] border-2 border-[var(--gr-code-scanner-reticle,var(--gr-primary))]";
+export declare const stateLayerClass = "absolute inset-0 grid place-content-center gap-3 p-4 text-center transition-opacity duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]";
+export declare const stateTextClass = "text-[var(--gr-muted-fg)]";
+export declare const controlsClass = "flex flex-wrap items-center gap-2";
+export declare const sizeTextClass: {
+    readonly xs: "text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]";
+    readonly sm: "text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]";
+    readonly md: "text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)]";
+    readonly lg: "text-[length:var(--gr-control-text-lg)] leading-[var(--gr-control-leading-lg)]";
+};
+export declare const grCodeScannerSafelist: string[];

package/dist/types/components/GrCodeScanner/index.d.ts

@@ -0,0 +1,9 @@
+export { default } from './GrCodeScanner.vue';
+export { default as GrCodeScanner } from './GrCodeScanner.vue';
+export type { GrCodeDetector, GrCodeResult } from './codeDetection';
+export { createNativeDetector, freshCodes, nativeDetectorSupported } from './codeDetection';
+export { grCodeScannerConfig } from './config';
+export type { GrCodeScannerConfigurableProps } from './defaults';
+export type { GrCodeScannerEmits, GrCodeScannerProps } from './GrCodeScanner.vue';
+export { grCodeScannerSafelist } from './grCodeScannerStyles';
+export type { GrCodeScannerSize } from './grCodeScannerStyles';

package/dist/types/granular-provider/shared.d.ts

@@ -9,6 +9,7 @@ export declare const GRANULARITY_MEDIA_PROVIDER_ID = "@feugene/granularity-media
  */
 export declare const granularityMediaComponentConfigs: {
     GrCameraCapture: GranularComponentDescriptor<"GrCameraCapture">;
+    GrCodeScanner: GranularComponentDescriptor<"GrCodeScanner">;
     GrImageCrop: GranularComponentDescriptor<"GrImageCrop">;
 };
 export type GranularityMediaComponentName = keyof typeof granularityMediaComponentConfigs;

package/dist/types/i18n/index.d.ts

@@ -22,6 +22,13 @@ export declare const grMediaMessages: {
             live: string;
             captured: string;
         };
+        scanner: {
+            label: string;
+            start: string;
+            stop: string;
+            unsupported: string;
+            detected: string;
+        };
     };
     readonly es: {
         imageCrop: {
@@ -46,6 +53,13 @@ export declare const grMediaMessages: {
             live: string;
             captured: string;
         };
+        scanner: {
+            label: string;
+            start: string;
+            stop: string;
+            unsupported: string;
+            detected: string;
+        };
     };
     readonly ru: {
         imageCrop: {
@@ -70,6 +84,13 @@ export declare const grMediaMessages: {
             live: string;
             captured: string;
         };
+        scanner: {
+            label: string;
+            start: string;
+            stop: string;
+            unsupported: string;
+            detected: string;
+        };
     };
 };
 export type GrMediaLocale = keyof typeof grMediaMessages;

package/dist/types/i18n/messages/en.d.ts

@@ -24,6 +24,13 @@ export declare const en: {
                     live: string;
                     captured: string;
                 };
+                scanner: {
+                    label: string;
+                    start: string;
+                    stop: string;
+                    unsupported: string;
+                    detected: string;
+                };
             };
             imageCrop: {
                 label: string;
@@ -47,6 +54,13 @@ export declare const en: {
                 live: string;
                 captured: string;
             };
+            scanner: {
+                label: string;
+                start: string;
+                stop: string;
+                unsupported: string;
+                detected: string;
+            };
         }>;
     };
 };

package/dist/types/i18n/messages/es.d.ts

@@ -24,6 +24,13 @@ export declare const es: {
                     live: string;
                     captured: string;
                 };
+                scanner: {
+                    label: string;
+                    start: string;
+                    stop: string;
+                    unsupported: string;
+                    detected: string;
+                };
             };
             imageCrop: {
                 label: string;
@@ -47,6 +54,13 @@ export declare const es: {
                 live: string;
                 captured: string;
             };
+            scanner: {
+                label: string;
+                start: string;
+                stop: string;
+                unsupported: string;
+                detected: string;
+            };
         }>;
     };
 };

package/dist/types/i18n/messages/ru.d.ts

@@ -24,6 +24,13 @@ export declare const ru: {
                     live: string;
                     captured: string;
                 };
+                scanner: {
+                    label: string;
+                    start: string;
+                    stop: string;
+                    unsupported: string;
+                    detected: string;
+                };
             };
             imageCrop: {
                 label: string;
@@ -47,6 +54,13 @@ export declare const ru: {
                 live: string;
                 captured: string;
             };
+            scanner: {
+                label: string;
+                start: string;
+                stop: string;
+                unsupported: string;
+                detected: string;
+            };
         }>;
     };
 };

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components/GrCameraCapture';
+export * from './components/GrCodeScanner';
 export * from './components/GrImageCrop';

package/dist/types/internal/__tests__/outputSize.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/internal/outputSize.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Размер результата по заданной части `output`.
+ *
+ * Ловушка, ради которой это отдельная функция: задать **одну** сторону —
+ * обычное дело («аватар шириной 256»), и вторая обязана считаться из
+ * соотношения захваченной области. Взятая из исходника, она даёт растянутую
+ * картинку: кадр камеры 640×480 при `output.width = 800` превращался в холст
+ * 800×480, то есть в изображение, растянутое по горизонтали на четверть.
+ *
+ * Обе стороны заданы — это **габарит**, а не точный размер: кадр вписывается в
+ * него, сохраняя свои пропорции. Взять их буквально значило бы растянуть
+ * картинку, когда соотношения не совпали, — а пропорции съёмки в этом пакете
+ * не искажаются никогда.
+ */
+export interface GrOutputRequest {
+    width?: number;
+    height?: number;
+}
+export interface GrOutputSize {
+    width: number;
+    height: number;
+}
+export declare function outputSize(area: {
+    sw: number;
+    sh: number;
+}, output?: GrOutputRequest): GrOutputSize;

package/dist/types/internal/useCameraStream.d.ts

@@ -0,0 +1,30 @@
+import type { Ref } from 'vue';
+import type { GrCameraStatus } from '../components/GrCameraCapture/cameraState';
+/**
+ * Поток камеры: запрос, состояния отказа, размеры кадра, остановка.
+ *
+ * Общий для съёмки и сканирования — у обоих одна и та же половина работы, и
+ * дважды написанная она разъехалась бы на первом же исправлении: отказ, забытая
+ * остановка дорожек, соотношение сторон до `loadedmetadata`. Компоненту
+ * остаётся то, ради чего он существует: снять кадр или распознать код.
+ */
+export interface UseCameraStreamOptions {
+    video: Ref<HTMLVideoElement | null>;
+    disabled: () => boolean;
+    facing: () => 'user' | 'environment';
+    deviceId: () => string | undefined;
+    /** Пожелание камере, а не требование: см. `exact` ниже. */
+    aspectRatio?: () => number | undefined;
+    onStatus?: (status: GrCameraStatus) => void;
+    onStart?: () => void;
+    onStop?: () => void;
+}
+export declare function useCameraStream(options: UseCameraStreamOptions): {
+    status: Ref<GrCameraStatus, GrCameraStatus>;
+    streamRatio: Ref<number | null, number | null>;
+    frameRatio: import("vue").ComputedRef<number>;
+    isLive: import("vue").ComputedRef<boolean>;
+    message: import("vue").ComputedRef<string>;
+    start: () => Promise<void>;
+    stop: () => void;
+};

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.1",
+  "version": "0.4.0",
   "license": "SEE LICENSE IN LICENSE",
   "author": {
     "name": "Evgeniy Fureev",
@@ -51,6 +51,10 @@
       "types": "./dist/types/components/GrCameraCapture/index.d.ts",
       "import": "./dist/components/GrCameraCapture/index.js"
     },
+    "./components/GrCodeScanner": {
+      "types": "./dist/types/components/GrCodeScanner/index.d.ts",
+      "import": "./dist/components/GrCodeScanner/index.js"
+    },
     "./components/GrImageCrop": {
       "types": "./dist/types/components/GrImageCrop/index.d.ts",
       "import": "./dist/components/GrImageCrop/index.js"

package/dist/chunks/ru-DN_wJDkP.js

@@ -1,4 +0,0 @@
-//#region src/i18n/messages/const.ts
-var e = "grMedia", t = { en: { [e]: async () => import("./en-C-Wc5fTB.js").then((e) => e.n) } }, n = { es: { [e]: async () => import("./es-BUPtE9_0.js").then((e) => e.n) } }, r = { ru: { [e]: async () => import("./ru-BqNILj54.js").then((e) => e.n) } };
-//#endregion
-export { e as i, n, t as r, r as t };

package/dist/components/GrCameraCapture/chunks/GrCameraCapture-B9EPXm7r.js

@@ -1,201 +0,0 @@
-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 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 O(e) {
-	switch (e instanceof Error ? e.name : "") {
-		case "NotAllowedError":
-		case "SecurityError":
-		case "PermissionDeniedError": return "denied";
-		case "NotFoundError":
-		case "DevicesNotFoundError":
-		case "OverconstrainedError": return "missing";
-		case "NotReadableError":
-		case "TrackStartError":
-		case "AbortError": return "busy";
-		default: return "error";
-	}
-}
-function k(e) {
-	return typeof e?.mediaDevices?.getUserMedia == "function";
-}
-function A(e, t) {
-	return t ?? e === "user";
-}
-function j(e, t) {
-	let n = t > 0 ? t : 1;
-	if (e.width <= 0 || e.height <= 0) return {
-		sx: 0,
-		sy: 0,
-		sw: 0,
-		sh: 0
-	};
-	if (e.width / e.height > n) {
-		let t = e.height * n;
-		return {
-			sx: (e.width - t) / 2,
-			sy: 0,
-			sw: t,
-			sh: e.height
-		};
-	}
-	let r = e.width / n;
-	return {
-		sx: 0,
-		sy: (e.height - r) / 2,
-		sw: e.width,
-		sh: r
-	};
-}
-//#endregion
-//#region src/components/GrCameraCapture/GrCameraCapture.vue?vue&type=script&setup=true&lang.ts
-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
-		},
-		mirror: {
-			type: Boolean,
-			default: void 0
-		},
-		output: { default: void 0 },
-		size: { default: void 0 },
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		ariaLabel: { default: void 0 }
-	},
-	emits: [
-		"capture",
-		"start",
-		"stop",
-		"statusChange"
-	],
-	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 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() {
-			V.value?.getTracks().forEach((e) => e.stop()), V.value = null, U.value = null, B.value && (B.value.srcObject = null);
-		}
-		async function Z() {
-			if (!(F.disabled || H.value === "starting" || H.value === "live")) {
-				if (!k(navigator)) {
-					J("insecure");
-					return;
-				}
-				J("starting");
-				try {
-					let e = await navigator.mediaDevices.getUserMedia({
-						video: F.deviceId ? { deviceId: { exact: F.deviceId } } : { facingMode: F.facing },
-						audio: !1
-					});
-					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(), J(O(e)), R(q.value, { politeness: "assertive" });
-				}
-			}
-		}
-		function Q() {
-			V.value && (X(), J("idle"), I("stop"));
-		}
-		async function $() {
-			let e = B.value;
-			if (!e || !K.value) return null;
-			let t = j({
-				width: e.videoWidth,
-				height: e.videoHeight
-			}, W.value);
-			if (t.sw <= 0) return null;
-			let n = document.createElement("canvas");
-			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, F.output?.type ?? "image/jpeg", F.output?.quality ?? .92);
-			});
-			return i && (I("capture", i), R(L("grMedia.camera.captured", "Photo taken"))), i;
-		}
-		return y(() => {
-			F.autoStart && Z();
-		}), v(X), N({
-			start: Z,
-			stop: Q,
-			capture: $,
-			status: H
-		}), (c, v) => (b(), d("div", {
-			class: g(T(i)),
-			role: "group",
-			"aria-label": h.ariaLabel ?? T(L)("grMedia.camera.label", "Camera")
-		}, [f("div", {
-			class: g(T(a)),
-			style: _({ aspectRatio: String(W.value) })
-		}, [f("video", {
-			ref_key: "videoEl",
-			ref: B,
-			class: g([T(s), G.value ? T(e) : ""]),
-			playsinline: "",
-			muted: "",
-			autoplay: ""
-		}, null, 2), K.value ? u("", !0) : (b(), d("div", {
-			key: 0,
-			class: g(T(t))
-		}, [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(z),
-			disabled: h.disabled,
-			onClick: Z
-		}, {
-			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: H.value,
-			start: Z,
-			stop: Q,
-			capture: $
-		}, () => [m(T(D), {
-			size: T(z),
-			disabled: h.disabled || !K.value,
-			onClick: $
-		}, {
-			default: E(() => [p(w(T(L)("grMedia.camera.capture", "Take photo")), 1)]),
-			_: 1
-		}, 8, ["size", "disabled"]), K.value ? (b(), l(T(D), {
-			key: 0,
-			variant: "outline",
-			size: T(z),
-			disabled: h.disabled,
-			onClick: Q
-		}, {
-			default: E(() => [p(w(T(L)("grMedia.camera.stop", "Turn off")), 1)]),
-			_: 1
-		}, 8, ["size", "disabled"])) : u("", !0)])], 2)], 10, M));
-	}
-});
-//#endregion
-export { A as a, k as i, j as n, O as r, N as t };