@srsergio/taptapp-ar 1.0.55 → 1.0.58

package/README.md

@@ -147,7 +147,7 @@ Drop the component into your app. It handles camera permissions, scanning animat
 import { TaptappAR, mapDataToPropsConfig } from '@srsergio/taptapp-ar';
 
 const MyARComponent = ({ data }) => {
-  // mapDataToPropsConfig helps you format your data for the component
+  // Use mapDataToPropsConfig to convert your raw data into ARConfig
   const config = mapDataToPropsConfig(data);
 
   return (

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./react/types.js";
+export { ARConfig, ARDataItem, mapDataToPropsConfig } from "./react/types.js";
 export * from "./react/use-ar.js";
 export * from "./react/TaptappAR.js";
 export * from "./compiler/offline-compiler.js";

package/dist/index.js

@@ -1,4 +1,4 @@
-export * from "./react/types.js";
+export { mapDataToPropsConfig } from "./react/types.js";
 export * from "./react/use-ar.js";
 export * from "./react/TaptappAR.js";
 export * from "./compiler/offline-compiler.js";

package/dist/react/TaptappAR.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import type { PropsConfig } from "./types.js";
+import type { ARConfig } from "./types.js";
 export interface TaptappARProps {
-    config: PropsConfig;
+    config: ARConfig;
     className?: string;
     showScanningOverlay?: boolean;
     showErrorOverlay?: boolean;

package/dist/react/types.d.ts

@@ -1,22 +1,25 @@
-export interface PropsConfig {
+export interface ARConfig {
     cardId: string;
     targetImageSrc: string;
     targetTaarSrc: string;
     videoSrc: string;
+    overlaySrc: string;
     videoWidth: number;
     videoHeight: number;
     scale: number;
+    overlayType: "video" | "image";
 }
-export interface DataItem {
+export interface ARDataItem {
     id: string;
-    type: "photos" | "videoNative" | "ar";
+    type: "photos" | "videoNative" | "ar" | "imageOverlay";
     images?: {
         image: string;
         fileId: string;
     }[];
     url?: string;
+    fileId?: string;
     scale?: number;
     width?: number;
     height?: number;
 }
-export declare function mapDataToPropsConfig(data: any[]): PropsConfig;
+export declare function mapDataToPropsConfig(data: ARDataItem[]): ARConfig;

package/dist/react/types.js

@@ -1,14 +1,16 @@
 export function mapDataToPropsConfig(data) {
     const photos = data.find((item) => item.type === "photos");
-    const video = data.find((item) => item.type === "videoNative");
+    const overlay = data.find((item) => item.type === "videoNative" || item.type === "imageOverlay");
     const ar = data.find((item) => item.type === "ar");
     return {
         cardId: photos?.id || "",
         targetImageSrc: photos?.images?.[0]?.image || "",
         targetTaarSrc: ar?.url || "",
-        videoSrc: video?.url || "",
-        videoWidth: video?.width || 0,
-        videoHeight: video?.height || 0,
-        scale: video?.scale || 1,
+        videoSrc: overlay?.url || "",
+        overlaySrc: overlay?.url || "",
+        videoWidth: overlay?.width || 0,
+        videoHeight: overlay?.height || 0,
+        scale: overlay?.scale || 1,
+        overlayType: overlay?.type === "videoNative" ? "video" : "image",
     };
 }

package/dist/react/use-ar.d.ts

@@ -1,4 +1,4 @@
-import type { PropsConfig } from "./types.js";
+import type { ARConfig } from "./types.js";
 export type ARStatus = "scanning" | "tracking" | "error";
 export interface UseARReturn {
     containerRef: React.RefObject<HTMLDivElement>;
@@ -7,4 +7,4 @@ export interface UseARReturn {
     isPlaying: boolean;
     toggleVideo: () => Promise<void>;
 }
-export declare const useAR: (config: PropsConfig) => UseARReturn;
+export declare const useAR: (config: ARConfig) => UseARReturn;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@srsergio/taptapp-ar",
-    "version": "1.0.55",
+    "version": "1.0.58",
     "author": "Sergio Lazaro <srsergiolazaro@gmail.com>",
     "license": "GPL-3.0",
     "description": "Ultra-fast, lightweight Augmented Reality Image Tracking SDK for the web. Features an optimized offline compiler, React components, and compatibility with Three.js/A-Frame. No heavy ML frameworks required.",

package/src/index.ts

@@ -1,4 +1,4 @@
-export * from "./react/types.js";
+export { ARConfig, ARDataItem, mapDataToPropsConfig } from "./react/types.js";
 export * from "./react/use-ar.js";
 export * from "./react/TaptappAR.js";
 export * from "./compiler/offline-compiler.js";

package/src/react/TaptappAR.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from "react";
 import { useAR } from "./use-ar.js";
-import type { PropsConfig } from "./types.js";
+import type { ARConfig } from "./types.js";
 
 export interface TaptappARProps {
-    config: PropsConfig;
+    config: ARConfig;
     className?: string;
     showScanningOverlay?: boolean;
     showErrorOverlay?: boolean;

package/src/react/types.ts

@@ -1,35 +1,40 @@
-export interface PropsConfig {
+export interface ARConfig {
   cardId: string;
   targetImageSrc: string;
   targetTaarSrc: string;
   videoSrc: string;
+  overlaySrc: string; // Alias for preloading/compatibility
   videoWidth: number;
   videoHeight: number;
   scale: number;
+  overlayType: "video" | "image";
 }
 
-export interface DataItem {
+export interface ARDataItem {
   id: string;
-  type: "photos" | "videoNative" | "ar";
+  type: "photos" | "videoNative" | "ar" | "imageOverlay";
   images?: { image: string; fileId: string }[];
   url?: string;
+  fileId?: string;
   scale?: number;
   width?: number;
   height?: number;
 }
 
-export function mapDataToPropsConfig(data: any[]): PropsConfig {
+export function mapDataToPropsConfig(data: ARDataItem[]): ARConfig {
   const photos = data.find((item) => item.type === "photos");
-  const video = data.find((item) => item.type === "videoNative");
+  const overlay = data.find((item) => item.type === "videoNative" || item.type === "imageOverlay");
   const ar = data.find((item) => item.type === "ar");
 
   return {
     cardId: photos?.id || "",
     targetImageSrc: photos?.images?.[0]?.image || "",
     targetTaarSrc: ar?.url || "",
-    videoSrc: video?.url || "",
-    videoWidth: video?.width || 0,
-    videoHeight: video?.height || 0,
-    scale: video?.scale || 1,
+    videoSrc: overlay?.url || "",
+    overlaySrc: overlay?.url || "",
+    videoWidth: overlay?.width || 0,
+    videoHeight: overlay?.height || 0,
+    scale: overlay?.scale || 1,
+    overlayType: overlay?.type === "videoNative" ? "video" : "image",
   };
 }

package/src/react/use-ar.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, useCallback } from "react";
-import type { PropsConfig } from "./types.js";
+import type { ARConfig } from "./types.js";
 import type { SimpleAR as SimpleARType } from "../compiler/simple-ar.js";
 
 export type ARStatus = "scanning" | "tracking" | "error";
@@ -12,7 +12,7 @@ export interface UseARReturn {
     toggleVideo: () => Promise<void>;
 }
 
-export const useAR = (config: PropsConfig): UseARReturn => {
+export const useAR = (config: ARConfig): UseARReturn => {
     const containerRef = useRef<HTMLDivElement>(null);
     const overlayRef = useRef<HTMLVideoElement | HTMLImageElement>(null);
     const [status, setStatus] = useState<ARStatus>("scanning");