@privyid/persona 1.1.1 → 1.2.0

package/dist/components/camera/Camera.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-p-aspect-ratio.fixed="4/3"
+    v-p-aspect-ratio.fixed="4 / 3"
     class="camera"
     data-testid="camera"
     :data-deviceid="deviceId"
@@ -116,239 +116,179 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type {
-  ComputedRef,
-  PropType,
-  VNode,
-} from 'vue-demi'
+<script setup>
 import {
   computed,
   onBeforeUnmount,
   onMounted,
   ref,
-  toRef,
-} from 'vue-demi'
-import pButton from '../button/Button.vue'
-import IconRotate from '@privyid/persona-icon/vue/refresh/16.vue'
-import IconCamera from '@privyid/persona-icon/vue/camera/24.vue'
-import IconRetake from '@privyid/persona-icon/vue/reset/24.vue'
-import ShutterWav from './assets/shutter.wav'
-import { useVModel } from '../input'
-import CaptureAdapter from './adapter/capture'
-import type {
-  Adapter,
-  AdapterMeta,
-  MaskVariant,
-  ModelModifier,
-} from './adapter/adapter'
+  toRef
+} from "vue-demi";
+import pButton from "../button/Button.vue";
+import IconRotate from "@privyid/persona-icon/vue/refresh/16.vue";
+import IconCamera from "@privyid/persona-icon/vue/camera/24.vue";
+import IconRetake from "@privyid/persona-icon/vue/reset/24.vue";
+import ShutterWav from "./assets/shutter.wav";
+import { useVModel } from "../input";
+import CaptureAdapter from "./adapter/capture";
 import {
   usePermission,
   useDevicesList,
   useUserMedia,
-  until,
-} from '@vueuse/core'
-import * as dialog from '../dialog'
-import defu from 'defu'
-import { vPAspectRatio } from '../aspect-ratio'
-
+  until
+} from "@vueuse/core";
+import * as dialog from "../dialog";
+import defu from "defu";
+import { vPAspectRatio } from "../aspect-ratio";
 const props = defineProps({
   modelValue: {
     type: [
       globalThis.File,
       String,
-      Array,
-    ] as PropType<string | globalThis.File | string[] | globalThis.File[]>,
-    default: '',
+      Array
+    ],
+    default: ""
   },
   modelModifiers: {
-    type   : Object as PropType<ModelModifier>,
-    default: () => ({} as ModelModifier),
+    type: Object,
+    default: () => ({})
   },
   mirror: {
-    type   : [Boolean, String] as PropType<boolean | 'preview' | 'all'>,
-    default: undefined,
+    type: [Boolean, String],
+    default: void 0
   },
   mask: {
-    type   : String as PropType<MaskVariant>,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   adapter: {
-    type   : Object as PropType<Adapter>,
-    default: CaptureAdapter,
+    type: Object,
+    default: CaptureAdapter
   },
   facingMode: {
-    type   : String as PropType<ConstrainDOMString>,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   silent: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [unknown],
-  'result': [unknown],
-  'change': [unknown],
-  'start': [unknown],
-}>()
-
-const model        = useVModel(props)
-const modifier     = toRef(props, 'modelModifiers')
-const isProcessing = ref(false)
-const isTaken      = ref(false)
-const preview      = ref('')
-const message      = ref('')
-
-const shutter    = ref<HTMLAudioElement>()
-const video      = ref<HTMLVideoElement>()
-const permission = usePermission('camera', { controls: true })
-const camera     = ref(0)
-
-const meta: ComputedRef<AdapterMeta> = computed(() => {
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(["update:modelValue", "result", "change", "start"]);
+const model = useVModel(props);
+const modifier = toRef(props, "modelModifiers");
+const isProcessing = ref(false);
+const isTaken = ref(false);
+const preview = ref("");
+const message = ref("");
+const shutter = ref();
+const video = ref();
+const permission = usePermission("camera", { controls: true });
+const camera = ref(0);
+const meta = computed(() => {
   return defu({
-    mirror    : props.mirror,
-    mask      : props.mask,
-    facingMode: props.facingMode,
-  }, props.adapter.meta, { autoStart: false })
-})
-
+    mirror: props.mirror,
+    mask: props.mask,
+    facingMode: props.facingMode
+  }, props.adapter.meta, { autoStart: false });
+});
 const { videoInputs: cameras } = useDevicesList({
   requestPermissions: false,
-  constraints       : { video: { facingMode: meta.value.facingMode } },
-})
-
+  constraints: { video: { facingMode: meta.value.facingMode } }
+});
 const deviceId = computed(() => {
-  return cameras.value?.at(camera.value)?.deviceId
-})
-
-const constraints = computed<MediaStreamConstraints>(() => {
+  return cameras.value?.at(camera.value)?.deviceId;
+});
+const constraints = computed(() => {
   return {
     video: { deviceId: deviceId.value },
-    audio: false,
-  }
-})
-
-const { stream, start, stop, enabled: isActive } = useUserMedia({ constraints })
-
+    audio: false
+  };
+});
+const { stream, start, stop, enabled: isActive } = useUserMedia({ constraints });
 const classNames = computed(() => {
-  const result: string[] = []
-
+  const result = [];
   if (meta.value.mirror)
-    result.push('camera--mirror')
-
+    result.push("camera--mirror");
   if (meta.value.mask)
-    result.push(`camera__mask--${meta.value.mask}`)
+    result.push(`camera__mask--${meta.value.mask}`);
   else
-    result.push('camera__mask--none')
-
-  return result
-})
-
-async function turnOn () {
-  if (permission.state.value === 'denied') {
+    result.push("camera__mask--none");
+  return result;
+});
+async function turnOn() {
+  if (permission.state.value === "denied") {
     await dialog.alert({
-      title      : 'Camera Access Blocked',
-      text       : 'Privy need to access your internal camera to process this journey',
-      confirm    : { text: 'Ok' },
-      footerAlign: 'end',
-    })
+      title: "Camera Access Blocked",
+      text: "Privy need to access your internal camera to process this journey",
+      confirm: { text: "Ok" },
+      footerAlign: "end"
+    });
   }
-
-  if (permission.state.value === 'prompt') {
+  if (permission.state.value === "prompt") {
     await dialog.alert({
-      title      : 'Camera Access Required',
-      text       : 'Privy need to access your internal camera to process this journey',
-      confirm    : { text: 'Ok' },
-      footerAlign: 'end',
-    })
+      title: "Camera Access Required",
+      text: "Privy need to access your internal camera to process this journey",
+      confirm: { text: "Ok" },
+      footerAlign: "end"
+    });
   }
-
-  await start()
-
-  /* Trigger video play if browser ignore autoplays attribute */
-  /* In HappyDOM, play() is undefined, which shouldn't happen in Real Browser */
-  /* c8 ignore next 2 */
-  if (typeof video.value?.play === 'function')
-    await video.value.play()
+  await start();
+  if (typeof video.value?.play === "function")
+    await video.value.play();
 }
-
-function toggle () {
-  camera.value = (camera.value + 1) % cameras.value.length
+function toggle() {
+  camera.value = (camera.value + 1) % cameras.value.length;
 }
-
-function toast (text: string) {
-  message.value = text
+function toast(text) {
+  message.value = text;
 }
-
-async function take () {
-  isProcessing.value = true
-
+async function take() {
+  isProcessing.value = true;
   const output = await props.adapter.run({
     video,
     toast,
     stream,
     meta,
-    modifier,
-  })
-
-  preview.value      = output.preview
-  model.value        = output.result
-  isTaken.value      = true
-  isProcessing.value = false
-  isActive.value     = false
-
-  emit('result', output.result)
-  emit('change', output.result)
-
-  /* c8 ignore next 2 */
-  if (typeof shutter.value?.play === 'function')
-    shutter.value.play()
+    modifier
+  });
+  preview.value = output.preview;
+  model.value = output.result;
+  isTaken.value = true;
+  isProcessing.value = false;
+  isActive.value = false;
+  emit("result", output.result);
+  emit("change", output.result);
+  if (typeof shutter.value?.play === "function")
+    shutter.value.play();
 }
-
-async function retake () {
-  isActive.value = true
-  isTaken.value  = false
-  preview.value  = ''
-  message.value  = ''
+async function retake() {
+  isActive.value = true;
+  isTaken.value = false;
+  preview.value = "";
+  message.value = "";
 }
-
-function onStart () {
-  emit('start', stream.value)
-
+function onStart() {
+  emit("start", stream.value);
   if (meta.value.autoStart)
-    take()
+    take();
 }
-
 onMounted(async () => {
   if (permission.isSupported) {
-    await until(permission.state).not.toBeUndefined()
-    await turnOn()
+    await until(permission.state).not.toBeUndefined();
+    await turnOn();
   }
-})
-
+});
 onBeforeUnmount(() => {
-  stop()
-})
-
+  stop();
+});
 defineExpose({
   take,
   retake,
   toast,
-  toggle,
-})
-
-defineSlots<{
-  'default'(props: {
-    cameras: MediaDeviceInfo[],
-    preview: string,
-    stream: MediaStream,
-    video: HTMLVideoElement,
-    shutter: HTMLAudioElement,
-    toast: (message: string) => void,
-  }): VNode[],
-}>()
+  toggle
+});
+defineSlots();
 </script>
 
 <style lang="postcss">

package/dist/components/camera/Camera.vue.d.ts

@@ -0,0 +1,123 @@
+import type { PropType, VNode } from 'vue-demi';
+import type { Adapter, MaskVariant, ModelModifier } from './adapter/adapter';
+declare function toggle(): void;
+declare function toast(text: string): void;
+declare function take(): Promise<void>;
+declare function retake(): Promise<void>;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default(props: {
+            cameras: MediaDeviceInfo[];
+            preview: string;
+            stream: MediaStream;
+            video: HTMLVideoElement;
+            shutter: HTMLAudioElement;
+            toast: (message: string) => void;
+        }): VNode[];
+    }> & {
+        default(props: {
+            cameras: MediaDeviceInfo[];
+            preview: string;
+            stream: MediaStream;
+            video: HTMLVideoElement;
+            shutter: HTMLAudioElement;
+            toast: (message: string) => void;
+        }): VNode[];
+    };
+    refs: {
+        video: HTMLVideoElement;
+        shutter: HTMLAudioElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<string | globalThis.File | string[] | globalThis.File[]>;
+        default: string;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    mirror: {
+        type: PropType<boolean | "preview" | "all">;
+        default: undefined;
+    };
+    mask: {
+        type: PropType<MaskVariant>;
+        default: undefined;
+    };
+    adapter: {
+        type: PropType<Adapter>;
+        default: Adapter;
+    };
+    facingMode: {
+        type: PropType<ConstrainDOMString>;
+        default: undefined;
+    };
+    silent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    take: typeof take;
+    retake: typeof retake;
+    toast: typeof toast;
+    toggle: typeof toggle;
+}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: unknown) => void;
+    change: (args_0: unknown) => void;
+    start: (args_0: unknown) => void;
+    result: (args_0: unknown) => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<string | globalThis.File | string[] | globalThis.File[]>;
+        default: string;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    mirror: {
+        type: PropType<boolean | "preview" | "all">;
+        default: undefined;
+    };
+    mask: {
+        type: PropType<MaskVariant>;
+        default: undefined;
+    };
+    adapter: {
+        type: PropType<Adapter>;
+        default: Adapter;
+    };
+    facingMode: {
+        type: PropType<ConstrainDOMString>;
+        default: undefined;
+    };
+    silent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+    onChange?: ((args_0: unknown) => any) | undefined;
+    onStart?: ((args_0: unknown) => any) | undefined;
+    onResult?: ((args_0: unknown) => any) | undefined;
+}>, {
+    mask: MaskVariant;
+    modelValue: string | string[] | File | File[];
+    facingMode: ConstrainDOMString;
+    mirror: boolean | "all" | "preview";
+    silent: boolean;
+    modelModifiers: ModelModifier;
+    adapter: Adapter;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/camera/__mocks__/motion.d.ts

@@ -0,0 +1,6 @@
+export declare const takeSample: import("vitest").Mock<any[], any>;
+export declare const createTemplate: import("vitest").Mock<[], {}>;
+export declare const motionDetection: import("vitest").Mock<[], number>;
+export declare const MOTION_THRESHOLD = 40;
+export declare const MOTION_FPS = 15;
+export declare const MOTION_AREA_SIZE = 160;

package/dist/components/camera/__mocks__/motion.mjs

@@ -0,0 +1,7 @@
+import { vi } from "vitest";
+export const takeSample = vi.fn();
+export const createTemplate = vi.fn(() => ({}));
+export const motionDetection = vi.fn(() => 41);
+export const MOTION_THRESHOLD = 40;
+export const MOTION_FPS = 15;
+export const MOTION_AREA_SIZE = 160;

package/dist/components/camera/__mocks__/run-adapter.d.ts

@@ -0,0 +1,5 @@
+import type { Adapter, AdapterMeta } from '../adapter/adapter';
+export declare const video: HTMLVideoElement;
+export declare function runAdapter(adapter: Adapter, meta?: Partial<AdapterMeta & {
+    base64: boolean;
+}>): Promise<import("../adapter/adapter").CameraResult>;

package/dist/components/camera/__mocks__/run-adapter.mjs

@@ -0,0 +1,22 @@
+import defu from "defu";
+import { vi } from "vitest";
+import {
+  computed,
+  ref
+} from "vue-demi";
+export const video = document.createElement("video");
+export async function runAdapter(adapter, meta = {}) {
+  return await adapter.run({
+    toast: vi.fn(),
+    video: ref(video),
+    stream: ref(),
+    modifier: ref({ base64: meta.base64 }),
+    meta: computed(() => {
+      return defu({
+        mirror: meta.mirror,
+        mask: meta.mask,
+        facingMode: meta.facingMode
+      }, adapter.meta, { autoStart: false });
+    })
+  });
+}

package/dist/components/camera/__mocks__/take-picture.d.ts

@@ -0,0 +1,3 @@
+export declare const sampleImage: string;
+export declare const sampleImage2: string;
+export declare const takePicture: import("vitest").Mock<[], string>;

package/dist/components/camera/__mocks__/take-picture.mjs

@@ -0,0 +1,6 @@
+import { vi } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+export const sampleImage = `data:image/jpeg;base64,${readFileSync(resolve(__dirname, "./sample.jpeg")).toString("base64")}`;
+export const sampleImage2 = `data:image/jpeg;base64,${readFileSync(resolve(__dirname, "./sample-2.jpeg")).toString("base64")}`;
+export const takePicture = vi.fn(() => sampleImage);

package/dist/components/camera/__mocks__/use-dialog.d.ts

@@ -0,0 +1 @@
+export declare const alert: import("vitest").Mock<any[], any>;

package/dist/components/camera/__mocks__/use-dialog.mjs

@@ -0,0 +1,2 @@
+import { vi } from "vitest";
+export const alert = vi.fn();

package/dist/components/camera/__mocks__/user-media.d.ts

@@ -0,0 +1,30 @@
+import type { UseUserMediaOptions } from '@vueuse/core';
+export declare function useDevicesList(): {
+    videoInputs: import("vue-demi").Ref<{
+        readonly deviceId: string;
+        readonly groupId: string;
+        readonly kind: MediaDeviceKind;
+        readonly label: string;
+        toJSON: () => any;
+    }[], MediaDeviceInfo[] | {
+        readonly deviceId: string;
+        readonly groupId: string;
+        readonly kind: MediaDeviceKind;
+        readonly label: string;
+        toJSON: () => any;
+    }[]>;
+};
+export declare const enabled: import("vue-demi").Ref<boolean, boolean>;
+export declare function cameraOn(): Promise<void>;
+export declare function useUserMedia(opts: UseUserMediaOptions): {
+    stream: import("vue-demi").Ref<boolean, boolean>;
+    enabled: import("vue-demi").Ref<boolean, boolean>;
+    start: import("vitest").Mock<[], Promise<void>>;
+    stop: import("vitest").Mock<[], void>;
+};
+export declare const permission: import("vue-demi").Ref<PermissionState, PermissionState>;
+export declare function setPermission(value: PermissionState): Promise<void>;
+export declare function usePermission(): {
+    state: import("vue-demi").Ref<PermissionState, PermissionState>;
+    isSupported: boolean;
+};

package/dist/components/camera/__mocks__/user-media.mjs

@@ -0,0 +1,55 @@
+import { vi } from "vitest";
+import {
+  nextTick,
+  ref,
+  watch
+} from "vue-demi";
+export function useDevicesList() {
+  return {
+    videoInputs: ref([
+      {
+        deviceId: "eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+        kind: "videoinput",
+        label: "Front Camera",
+        groupId: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+      },
+      {
+        deviceId: "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
+        kind: "videoinput",
+        label: "Rear Camera",
+        groupId: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+      }
+    ])
+  };
+}
+export const enabled = ref(false);
+export async function cameraOn() {
+  enabled.value = true;
+  await nextTick();
+}
+export function useUserMedia(opts) {
+  const start = vi.fn(async () => {
+    enabled.value = true;
+  });
+  const stop = vi.fn(() => {
+    enabled.value = false;
+  });
+  watch(opts.constraints, async () => {
+    await stop();
+    await start();
+  });
+  return {
+    stream: enabled,
+    enabled,
+    start,
+    stop
+  };
+}
+export const permission = ref("granted");
+export async function setPermission(value) {
+  permission.value = value;
+  await nextTick();
+}
+export function usePermission() {
+  return { state: permission, isSupported: true };
+}

package/dist/components/camera/adapter/capture.spec.d.ts

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

package/dist/components/camera/adapter/capture.spec.mjs

@@ -0,0 +1,26 @@
+import { vi } from "vitest";
+import { takePicture, sampleImage } from "../__mocks__/take-picture.mjs";
+import CaptureAdapter from "./capture.mjs";
+import { runAdapter, video } from "../__mocks__/run-adapter.mjs";
+vi.mock("../utils/take-picture.ts", () => {
+  return { takePicture };
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+it("should capture image from video", async () => {
+  const output = await runAdapter(CaptureAdapter);
+  expect(output.preview).toBe(sampleImage);
+  expect(output.result).toBeInstanceOf(File);
+  expect(takePicture).toBeCalledWith(video, false);
+});
+it("should capture image from video in mirror mode", async () => {
+  const output = await runAdapter(CaptureAdapter, { mirror: true });
+  expect(output.preview).toBe(sampleImage);
+  expect(takePicture).toBeCalledWith(video, true);
+});
+it("should return base64 as result", async () => {
+  const output = await runAdapter(CaptureAdapter, { base64: true });
+  expect(output.result).toBe(sampleImage);
+  expect(takePicture).toBeCalledWith(video, false);
+});

package/dist/components/camera/adapter/liveness.spec.d.ts

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