@techolution-ai/computer-vision/build/modern/scanner/status.js

A JavaScript/TypeScript library for computer vision applications, providing tools for image processing, scanning, and MQTT-based messaging.

// src/scanner/status.tsx
import { useMemo } from "react";
import StatusItem from "./status-item.js";
import IdleGIF from "../assets/idle.gif";
import "./styles/status.css";
import ScanComplete from "./scan-complete.js";
import { jsx, jsxs } from "react/jsx-runtime";
var defaultStatusMap = {
  idle: {
    message: "Place an object in the screening zone",
    icon: IdleGIF,
    slotProps: {
      icon: {
        style: {
          width: "150px",
          height: "150px"
        }
      }
    }
  },
  motion: {
    message: "Motion detected"
  },
  scanning: {
    message: "Scanning for details"
  },
  not_recognized: {
    message: "Product not recognized. Please hold the product closer to the camera"
  },
  product_placement: {
    message: "Place the product with the label facing up in the scanning area"
  },
  center_scan: {
    message: "Move product label inside scanning zone"
  },
  glare_scan: {
    message: "Move product label to avoid glare"
  },
  scanned: {
    render: () => /* @__PURE__ */ jsx(ScanComplete, {})
  },
  camera_loading: {
    message: "Loading Camera ..."
  }
};
function ScannerStatus({
  children,
  status,
  // onSetup,
  statusMap,
  ...restProps
}) {
  const finalStatusMap = useMemo(() => {
    return statusMap ?? defaultStatusMap;
  }, [statusMap]);
  const findStatusByKeyword = () => {
    if (!status) return null;
    const statusDetails = finalStatusMap[status];
    if (!statusDetails) return /* @__PURE__ */ jsx(StatusItem, { message: status });
    return /* @__PURE__ */ jsx(
      StatusItem,
      {
        message: statusDetails.message,
        icon: statusDetails.icon,
        render: statusDetails.render,
        slotProps: "slotProps" in statusDetails ? statusDetails.slotProps : {}
      }
    );
  };
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ...restProps,
      style: {
        position: "relative",
        ...restProps.style
      },
      children: [
        children,
        findStatusByKeyword()
      ]
    }
  );
}
export {
  ScannerStatus as default,
  defaultStatusMap
};
//# sourceMappingURL=status.js.map