@privyid/persona 1.2.0 → 1.2.1

package/dist/components/camera/Camera.vue

@@ -1,356 +0,0 @@
-<template>
-  <div
-    v-p-aspect-ratio.fixed="4 / 3"
-    class="camera"
-    data-testid="camera"
-    :data-deviceid="deviceId"
-    :class="classNames">
-    <video
-      v-if="stream"
-      ref="video"
-      data-testid="camera-video"
-      :srcObject.prop="stream"
-      class="camera__video"
-      autoplay
-      muted
-      playsinline
-      @play="onStart" />
-
-    <!-- Result -->
-    <img
-      v-if="isTaken && !stream"
-      data-testid="camera-result"
-      class="camera__result"
-      :src="preview"
-      alt="camera-result">
-
-    <!-- Camera off -->
-    <span
-      v-if="!isActive && !isTaken"
-      data-testid="camera-off"
-      class="camera__off-info">
-      Camera is off
-    </span>
-
-    <!-- Mask -->
-    <div class="camera__mask-container">
-      <div
-        v-if="!isTaken"
-        data-testid="camera-mask"
-        class="camera__mask" />
-    </div>
-
-    <!-- Toast -->
-    <transition name="slide-up">
-      <div
-        v-if="message"
-        :key="message"
-        class="camera__toast">
-        <div
-          data-testid="camera-toast"
-          class="camera__toast-text">
-          {{ message }}
-        </div>
-      </div>
-    </transition>
-
-    <!-- Control Button -->
-    <div class="camera__controls">
-      <p-button
-        v-if="cameras.length > 1 && !isTaken"
-        data-testid="camera-toggle"
-        color="danger"
-        size="sm"
-        icon
-        pill
-        @click="toggle">
-        <icon-rotate />
-      </p-button>
-
-      <!-- Main Button -->
-      <p-button
-        v-if="!isActive && !isTaken"
-        data-testid="camera-turn-on"
-        class="camera__main-control"
-        color="danger"
-        icon
-        pill
-        @click="turnOn()">
-        <icon-camera />
-      </p-button>
-      <p-button
-        v-else-if="isActive && !isTaken"
-        data-testid="camera-take"
-        class="camera__main-control"
-        color="danger"
-        icon
-        pill
-        :disabled="isProcessing"
-        @click="take()">
-        <icon-camera />
-      </p-button>
-      <p-button
-        v-else
-        data-testid="camera-retake"
-        class="camera__main-control"
-        color="danger"
-        icon
-        pill
-        @click="retake()">
-        <icon-retake />
-      </p-button>
-      <!-- End Main Button -->
-    </div>
-    <audio
-      ref="shutter"
-      :src="ShutterWav"
-      :muted="silent" />
-
-    <slot
-      :cameras="cameras"
-      :preview="preview"
-      :stream="stream"
-      :video="video"
-      :shutter="shutter"
-      :toast="toast" />
-  </div>
-</template>
-
-<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 {
-  usePermission,
-  useDevicesList,
-  useUserMedia,
-  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
-    ],
-    default: ""
-  },
-  modelModifiers: {
-    type: Object,
-    default: () => ({})
-  },
-  mirror: {
-    type: [Boolean, String],
-    default: void 0
-  },
-  mask: {
-    type: String,
-    default: void 0
-  },
-  adapter: {
-    type: Object,
-    default: CaptureAdapter
-  },
-  facingMode: {
-    type: String,
-    default: void 0
-  },
-  silent: {
-    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 });
-});
-const { videoInputs: cameras } = useDevicesList({
-  requestPermissions: false,
-  constraints: { video: { facingMode: meta.value.facingMode } }
-});
-const deviceId = computed(() => {
-  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 });
-const classNames = computed(() => {
-  const result = [];
-  if (meta.value.mirror)
-    result.push("camera--mirror");
-  if (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") {
-    await dialog.alert({
-      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") {
-    await dialog.alert({
-      title: "Camera Access Required",
-      text: "Privy need to access your internal camera to process this journey",
-      confirm: { text: "Ok" },
-      footerAlign: "end"
-    });
-  }
-  await start();
-  if (typeof video.value?.play === "function")
-    await video.value.play();
-}
-function toggle() {
-  camera.value = (camera.value + 1) % cameras.value.length;
-}
-function toast(text) {
-  message.value = text;
-}
-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);
-  if (typeof shutter.value?.play === "function")
-    shutter.value.play();
-}
-async function retake() {
-  isActive.value = true;
-  isTaken.value = false;
-  preview.value = "";
-  message.value = "";
-}
-function onStart() {
-  emit("start", stream.value);
-  if (meta.value.autoStart)
-    take();
-}
-onMounted(async () => {
-  if (permission.isSupported) {
-    await until(permission.state).not.toBeUndefined();
-    await turnOn();
-  }
-});
-onBeforeUnmount(() => {
-  stop();
-});
-defineExpose({
-  take,
-  retake,
-  toast,
-  toggle
-});
-defineSlots();
-</script>
-
-<style lang="postcss">
-.camera {
-  @apply bg-inverse w-full flex flex-col select-none relative overflow-hidden;
-  @apply dark:bg-dark-inverse;
-
-  &__video {
-    @apply grow min-h-full max-w-full h-auto object-cover;
-  }
-
-  &--mirror {
-    .camera__video {
-      @apply -scale-x-100;
-    }
-  }
-
-  &__mask-container {
-    @apply absolute inset-0 w-full h-full overflow-hidden pointer-events-none;
-  }
-
-  &__mask {
-    @apply absolute top-1/2 left-1/2 shadow-mask -translate-x-1/2 -translate-y-1/2;
-
-    &--none &-container {
-      @apply hidden;
-    }
-
-    &--square & {
-      @apply aspect-compat-square w-[55%] md:w-1/2;
-    }
-
-    &--round & {
-      @apply aspect-compat-square rounded-full w-[55%] md:w-1/2;
-    }
-
-    &--card & {
-      @apply aspect-compat-[85.60/53.98] w-3/4 rounded;
-    }
-  }
-
-  &__result {
-    @apply w-full h-full object-cover absolute inset-0;
-  }
-
-  &__off-info {
-    @apply absolute bottom-20 text-on-emphasis left-0 right-0 text-center text-sm;
-    @apply dark:text-dark-on-emphasis;
-  }
-
-  &__controls {
-    @apply py-3 flex w-full shrink-0 justify-center items-center absolute bottom-0 space-x-3;
-  }
-
-  &__toast {
-    @apply absolute bottom-20 left-0 right-0 text-center text-on-emphasis;
-    @apply dark:text-dark-on-emphasis px-4;
-
-    &-text {
-      @apply bg-inverse/80 px-4 py-1 text-sm rounded shadow-md inline-block max-w-full truncate;
-      @apply dark:bg-dark-inverse/80;
-    }
-  }
-}
-</style>

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

@@ -1,123 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

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

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

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

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

@@ -1,30 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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/adapter.d.ts

@@ -1,41 +0,0 @@
-import type { ComputedRef, Ref } from 'vue-demi';
-export type MaskVariant = 'square' | 'round' | 'card' | 'none';
-export type MirrorMode = boolean | 'preview' | 'all';
-export interface ModelModifier {
-    base64: boolean;
-}
-export interface AdapterMeta {
-    /**
-     * Auto take an image,
-     * It will start processing when camera started.
-     */
-    autoStart: boolean;
-    /**
-     * Default value for props `facingMode`
-     */
-    mask: MaskVariant;
-    /**
-     * Default value for props `mirror`
-     */
-    mirror: MirrorMode;
-    /**
-     * Default value for props `facingMode`
-     */
-    facingMode: ConstrainDOMString;
-}
-export interface CameraContext {
-    video: Ref<HTMLVideoElement>;
-    stream: Ref<MediaStream>;
-    modifier: Ref<ModelModifier>;
-    meta: ComputedRef<AdapterMeta>;
-    toast: (message: string) => void;
-}
-export interface CameraResult {
-    preview: string;
-    result: string | string[] | globalThis.File | globalThis.File[];
-}
-export interface Adapter {
-    meta?: Partial<AdapterMeta>;
-    run: (context: CameraContext) => CameraResult | Promise<CameraResult>;
-}
-export declare function defineAdapter(adapter: Adapter): Adapter;

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

@@ -1,3 +0,0 @@
-export function defineAdapter(adapter) {
-  return adapter;
-}

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

@@ -1,5 +0,0 @@
-/**
- * Basic adapter for capture image from camera
- */
-declare const _default: import("./adapter").Adapter;
-export default _default;