@privyid/persona 1.2.1 → 1.2.2-dev.1

package/dist/components/calendar/adapter/month.mjs

@@ -0,0 +1,66 @@
+import {
+  addYears,
+  eachMonthOfInterval,
+  endOfYear,
+  isAfter,
+  isBefore,
+  isDate,
+  isSameMonth,
+  isWithinInterval,
+  set,
+  startOfYear,
+  subYears
+} from "date-fns";
+import { defineAdapter } from "./adapter.mjs";
+import { formatDate } from "../../utils/date.mjs";
+function getInterval(date) {
+  const start = startOfYear(date);
+  const end = endOfYear(date);
+  return {
+    start,
+    end
+  };
+}
+export default defineAdapter({
+  getItems({ cursor, start, end, min, max }) {
+    return eachMonthOfInterval(getInterval(cursor.value)).map((date) => {
+      const isDisabled = !isSameMonth(min.value, date) && !isSameMonth(max.value, date) && !isWithinInterval(date, { start: min.value, end: max.value });
+      const isHead = isSameMonth(start.value, date);
+      const isTail = isSameMonth(end.value, date);
+      return {
+        value: date,
+        text: formatDate(date, "MMM"),
+        disabled: isDisabled,
+        readonly: false,
+        head: isHead,
+        tail: isTail,
+        active: isHead || isTail
+      };
+    });
+  },
+  getTitle({ cursor }) {
+    return cursor.value.getFullYear().toString();
+  },
+  getNextCursor({ cursor }) {
+    return addYears(cursor.value, 1);
+  },
+  getPrevCursor({ cursor }) {
+    return subYears(cursor.value, 1);
+  },
+  canNext(context) {
+    const max = context.max.value;
+    const date = this.getNextCursor(context);
+    return !max || isBefore(date, max) || isWithinInterval(max, getInterval(date));
+  },
+  canPrev(context) {
+    const min = context.min.value;
+    const date = this.getPrevCursor(context);
+    return !min || isAfter(date, min) || isWithinInterval(min, getInterval(date));
+  },
+  setValue(value, lastValue) {
+    return isDate(lastValue) ? set(lastValue, {
+      year: value.getFullYear(),
+      month: value.getMonth()
+    }) : value;
+  }
+});

package/dist/components/calendar/adapter/year.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./adapter").CalendarAdapter;
+export default _default;

package/dist/components/calendar/adapter/year.mjs

@@ -0,0 +1,63 @@
+import { defineAdapter } from "./adapter.mjs";
+import {
+  addYears,
+  eachYearOfInterval,
+  endOfDecade,
+  isDate,
+  isAfter,
+  isBefore,
+  isSameYear,
+  isWithinInterval,
+  set,
+  startOfDecade,
+  subYears
+} from "date-fns";
+function getInterval(date) {
+  const start = startOfDecade(date);
+  const end = endOfDecade(date);
+  return {
+    start,
+    end
+  };
+}
+export default defineAdapter({
+  getItems({ cursor, start, end, min, max }) {
+    return eachYearOfInterval(getInterval(cursor.value)).map((date) => {
+      const isDisabled = !isSameYear(min.value, date) && !isSameYear(max.value, date) && !isWithinInterval(date, { start: min.value, end: max.value });
+      const isHead = isSameYear(start.value, date);
+      const isTail = isSameYear(end.value, date);
+      return {
+        value: date,
+        text: date.getFullYear().toString(),
+        disabled: isDisabled,
+        readonly: false,
+        head: isHead,
+        tail: isTail,
+        active: isHead || isTail
+      };
+    });
+  },
+  getTitle({ cursor }) {
+    const { start, end } = getInterval(cursor.value);
+    return `${start.getFullYear()} - ${end.getFullYear()}`;
+  },
+  getNextCursor({ cursor }) {
+    return startOfDecade(addYears(cursor.value, 10));
+  },
+  getPrevCursor({ cursor }) {
+    return startOfDecade(subYears(cursor.value, 10));
+  },
+  canNext(context) {
+    const max = context.max.value;
+    const date = this.getNextCursor(context);
+    return !max || isBefore(date, max) || isWithinInterval(max, getInterval(date));
+  },
+  canPrev(context) {
+    const min = context.min.value;
+    const date = this.getPrevCursor(context);
+    return !min || isAfter(date, min) || isWithinInterval(min, getInterval(date));
+  },
+  setValue(value, lastValue) {
+    return isDate(lastValue) ? set(lastValue, { year: value.getFullYear() }) : value;
+  }
+});

package/dist/components/camera/Camera.vue

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

@@ -0,0 +1,123 @@
+import type { PropType, VNode } from 'vue';
+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").DefineComponent<import("vue").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").ComponentOptionsMixin, import("vue").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").PublicProps, Readonly<import("vue").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").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/adapter/adapter.d.ts

@@ -0,0 +1,41 @@
+import type { ComputedRef, Ref } from 'vue';
+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

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

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

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

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

@@ -0,0 +1,12 @@
+import { fromBase64 } from "../../utils/base64.mjs";
+import { takePicture } from "../utils/take-picture.mjs";
+import { defineAdapter } from "./adapter.mjs";
+export default defineAdapter({
+  meta: { facingMode: "environment" },
+  run({ video, meta, modifier }) {
+    const isMirrored = !!(meta.value.mirror && meta.value.mirror !== "preview");
+    const preview = takePicture(video.value, isMirrored);
+    const result = modifier.value.base64 ? preview : fromBase64(preview);
+    return { preview, result };
+  }
+});

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

@@ -0,0 +1,5 @@
+/**
+ * Liveness adapter for camera, using Fast Motion Algorithm
+ */
+declare const _default: import("./adapter").Adapter;
+export default _default;