@feugene/granularity-media 0.3.0 → 0.4.0

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

@@ -48,8 +48,6 @@ type __VLS_Slots = {
         capture: () => Promise<Blob | null>;
     }) => unknown;
 };
-declare function start(): Promise<void>;
-declare function stop(): void;
 /**
  * Снимок текущего кадра — целиком, без среза.
  *
@@ -74,8 +72,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     disabled: boolean;
     ariaLabel: undefined;
 }>>, {
-    start: typeof start;
-    stop: typeof stop;
+    start: () => Promise<void>;
+    stop: () => void;
     capture: typeof capture;
     status: import("vue").Ref<GrCameraStatus, GrCameraStatus>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -99,9 +97,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     onStop?: (() => any) | undefined;
     onStatusChange?: ((status: GrCameraStatus) => any) | undefined;
 }>, {
-    facing: GrCameraFacing;
     deviceId: string;
     aspectRatio: number;
+    facing: GrCameraFacing;
     autoStart: boolean;
     mirror: boolean;
     output: GrCameraCaptureOutput;

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

@@ -0,0 +1,121 @@
+import type { GrCameraStatus } from '../GrCameraCapture/cameraState';
+import type { GrCodeDetector, GrCodeResult } from './codeDetection';
+import type { GrCodeScannerSize } from './grCodeScannerStyles';
+export interface GrCodeScannerProps {
+    /** Какая камера: `environment` — тыловая, ей и сканируют. */
+    facing?: 'user' | 'environment';
+    deviceId?: string;
+    /**
+     * Включать камеру сразу.
+     *
+     * По умолчанию `false`: запрос разрешения без действия пользователя
+     * отклоняют не глядя, а второй раз браузер уже не спросит.
+     */
+    autoStart?: boolean;
+    /** Символики: `qr_code`, `ean_13`, `code_128`, … Без списка — все, что умеет браузер. */
+    formats?: readonly string[];
+    /**
+     * Детектор для браузеров без `BarcodeDetector` — Safari и Firefox.
+     *
+     * Пакет своего декодера не несёт: у него нет ни одной зависимости, и ради
+     * одного компонента появилась бы самая тяжёлая. Рецепт подключения готовой
+     * библиотеки — на странице компонента.
+     */
+    detector?: GrCodeDetector;
+    /** Как часто разбирать кадр, мс. Чаще — горячее устройство, реже — вялый отклик. */
+    interval?: number;
+    /** Сообщать один и тот же код повторно: приёмка сканирует подряд. */
+    continuous?: boolean;
+    size?: GrCodeScannerSize;
+    disabled?: boolean;
+    ariaLabel?: string;
+}
+export interface GrCodeScannerEmits {
+    (e: 'detect', codes: GrCodeResult[]): void;
+    (e: 'start'): void;
+    (e: 'stop'): void;
+    (e: 'statusChange', status: GrCameraStatus): void;
+}
+type __VLS_Slots = {
+    /** Своя панель управления вместо встроенной. */
+    controls?: (props: {
+        status: GrCameraStatus;
+        start: () => void;
+        stop: () => void;
+    }) => unknown;
+};
+declare function stopAll(): void;
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrCodeScannerProps>, {
+    facing: string;
+    deviceId: undefined;
+    autoStart: boolean;
+    formats: undefined;
+    detector: undefined;
+    interval: number;
+    continuous: boolean;
+    size: undefined;
+    disabled: boolean;
+    ariaLabel: undefined;
+}>>, {
+    start: () => Promise<void>;
+    stop: typeof stopAll;
+    status: import("vue").Ref<GrCameraStatus, GrCameraStatus>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    detect: (codes: GrCodeResult[]) => void;
+    start: () => void;
+    stop: () => void;
+    statusChange: (status: GrCameraStatus) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrCodeScannerProps>, {
+    facing: string;
+    deviceId: undefined;
+    autoStart: boolean;
+    formats: undefined;
+    detector: undefined;
+    interval: number;
+    continuous: boolean;
+    size: undefined;
+    disabled: boolean;
+    ariaLabel: undefined;
+}>>> & Readonly<{
+    onStart?: (() => any) | undefined;
+    onStop?: (() => any) | undefined;
+    onStatusChange?: ((status: GrCameraStatus) => any) | undefined;
+    onDetect?: ((codes: GrCodeResult[]) => any) | undefined;
+}>, {
+    deviceId: string;
+    facing: "user" | "environment";
+    autoStart: boolean;
+    size: GrCodeScannerSize;
+    disabled: boolean;
+    ariaLabel: string;
+    formats: readonly string[];
+    detector: GrCodeDetector;
+    interval: number;
+    continuous: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

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

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/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.3.0",
+  "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-CoSuBEfS.js

@@ -1,182 +0,0 @@
-import { t as e } from "../../../chunks/outputSize-D2FU4CbB.js";
-import { a as t, c as n, l as r, n as i, o as a, r as o, s, u as c } from "../../../chunks/config-DHLlFslI.js";
-import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, normalizeClass as _, normalizeStyle as v, onBeforeUnmount as y, onMounted as b, openBlock as x, ref as S, renderSlot as ee, 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 te } from "@feugene/granularity/composables/useGrComponentConfig";
-import { useGranularityTranslations as ne } from "@feugene/granularity/composables/useGranularityTranslations";
-//#region src/components/GrCameraCapture/cameraState.ts
-function k(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 A(e) {
-	return typeof e?.mediaDevices?.getUserMedia == "function";
-}
-function j(e, t) {
-	return t ?? e === "user";
-}
-//#endregion
-//#region src/components/GrCameraCapture/GrCameraCapture.vue?vue&type=script&setup=true&lang.ts
-var M = ["aria-label"], N = /* @__PURE__ */ g({
-	__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(g, { expose: N, emit: P }) {
-		let F = g, I = P, { t: L } = ne(), { announce: R } = O(), z = te(() => F.size, { component: "GrCameraCapture" }), B = S(null), V = C(null), H = S("idle"), U = S(null), W = l(() => U.value ?? 4 / 3), G = l(() => j(F.facing, F.mirror)), K = l(() => H.value === "live"), q = l(() => {
-			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 (!A(navigator)) {
-					J("insecure");
-					return;
-				}
-				J("starting");
-				try {
-					let e = await navigator.mediaDevices.getUserMedia({
-						video: {
-							...F.deviceId ? { deviceId: { exact: F.deviceId } } : { facingMode: F.facing },
-							...F.aspectRatio ? { aspectRatio: F.aspectRatio } : {}
-						},
-						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(k(e)), R(q.value, { politeness: "assertive" });
-				}
-			}
-		}
-		function Q() {
-			V.value && (X(), J("idle"), I("stop"));
-		}
-		async function $() {
-			let t = B.value;
-			if (!t || !K.value) return null;
-			let n = {
-				sx: 0,
-				sy: 0,
-				sw: t.videoWidth,
-				sh: t.videoHeight
-			};
-			if (n.sw <= 0) return null;
-			let r = document.createElement("canvas"), i = e(n, F.output);
-			r.width = i.width, r.height = i.height;
-			let a = r.getContext("2d");
-			if (!a) return null;
-			a.drawImage(t, n.sx, n.sy, n.sw, n.sh, 0, 0, r.width, r.height);
-			let o = await new Promise((e) => {
-				r.toBlob(e, F.output?.type ?? "image/jpeg", F.output?.quality ?? .92);
-			});
-			return o && (I("capture", o), R(L("grMedia.camera.captured", "Photo taken"))), o;
-		}
-		return b(() => {
-			F.autoStart && Z();
-		}), y(X), N({
-			start: Z,
-			stop: Q,
-			capture: $,
-			status: H
-		}), (e, l) => (x(), f("div", {
-			class: _(T(a)),
-			role: "group",
-			"aria-label": g.ariaLabel ?? T(L)("grMedia.camera.label", "Camera")
-		}, [p("div", {
-			class: _(T(o)),
-			style: v({ aspectRatio: String(W.value) })
-		}, [p("video", {
-			ref_key: "videoEl",
-			ref: B,
-			class: _([T(c), G.value ? T(t) : ""]),
-			playsinline: "",
-			muted: "",
-			autoplay: ""
-		}, null, 2), K.value ? d("", !0) : (x(), f("div", {
-			key: 0,
-			class: _(T(n))
-		}, [p("p", { class: _([T(r), T(s)[T(z)]]) }, w(q.value), 3), H.value !== "starting" && H.value !== "insecure" && H.value !== "missing" ? (x(), u(T(D), {
-			key: 0,
-			size: T(z),
-			disabled: g.disabled,
-			onClick: Z
-		}, {
-			default: E(() => [m(w(H.value === "idle" ? T(L)("grMedia.camera.start", "Turn on camera") : T(L)("grMedia.camera.retry", "Try again")), 1)]),
-			_: 1
-		}, 8, ["size", "disabled"])) : d("", !0)], 2))], 6), p("div", { class: _(T(i)) }, [ee(e.$slots, "controls", {
-			status: H.value,
-			start: Z,
-			stop: Q,
-			capture: $
-		}, () => [h(T(D), {
-			size: T(z),
-			disabled: g.disabled || !K.value,
-			onClick: $
-		}, {
-			default: E(() => [m(w(T(L)("grMedia.camera.capture", "Take photo")), 1)]),
-			_: 1
-		}, 8, ["size", "disabled"]), K.value ? (x(), u(T(D), {
-			key: 0,
-			variant: "outline",
-			size: T(z),
-			disabled: g.disabled,
-			onClick: Q
-		}, {
-			default: E(() => [m(w(T(L)("grMedia.camera.stop", "Turn off")), 1)]),
-			_: 1
-		}, 8, ["size", "disabled"])) : d("", !0)])], 2)], 10, M));
-	}
-});
-//#endregion
-export { j as i, k as n, A as r, N as t };