@deibid/no-hands-react 0.0.1

package/dist/index.d.mts

@@ -0,0 +1,68 @@
+import * as React$1 from 'react';
+import React__default, { PropsWithChildren } from 'react';
+import { Point, Rect, CreateEventDispatcherOpts, EventDispatcher, FaceTracker } from '@deibid/no-hands';
+export { NHEvent } from '@deibid/no-hands';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface NHEventProps {
+    onNHMouseEnter?: EventListener;
+    onNHMouseLeave?: EventListener;
+    onNHClickGestureBegin?: EventListener;
+    onNHClickGestureEnd?: EventListener;
+}
+type HTMLElementType = keyof React__default.JSX.IntrinsicElements;
+type NHComponentProps<T extends HTMLElementType> = React__default.ComponentPropsWithoutRef<T> & NHEventProps;
+type NHComponent<T extends HTMLElementType> = React__default.FC<NHComponentProps<T>>;
+type NHNamespace = {
+    [K in HTMLElementType]: NHComponent<K>;
+};
+
+declare const NH: NHNamespace;
+
+declare function useEvents<T extends HTMLElement>(props: NHEventProps): {
+    ref: React$1.RefObject<T | null>;
+};
+declare function useCamera(): {
+    stream: MediaStream | null;
+    loading: boolean;
+    error: Error | null;
+};
+declare function useNHPoint(): Point | null;
+declare function useWindowSize(): {
+    width: number;
+    height: number;
+    centerX: number;
+    centerY: number;
+};
+
+interface INHContext {
+    error: Error | null;
+    eventDispatcher: EventDispatcher | null;
+    faceTracker: FaceTracker | null;
+    loading: boolean;
+    videoStream: MediaStream | null;
+}
+interface NHProviderOptions {
+    faceTrackerOpts?: {
+        detectionBounds?: Rect;
+        projectionBounds?: Rect;
+    };
+    eventDispatcherOpts?: CreateEventDispatcherOpts;
+}
+
+type NHProviderProps = PropsWithChildren<NHProviderOptions>;
+declare function NHProvider({ children, eventDispatcherOpts, faceTrackerOpts }: NHProviderProps): react_jsx_runtime.JSX.Element;
+declare function useNH(): INHContext;
+
+interface DetectionBoundsDisplayProps {
+    detectionBounds: Rect;
+    style?: React.CSSProperties;
+}
+declare function DetectionBoundsDisplay({ detectionBounds, style }: DetectionBoundsDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface PointerProps extends React.PropsWithChildren {
+    style?: React.CSSProperties;
+}
+declare function Pointer({ children, style }: PointerProps): react_jsx_runtime.JSX.Element;
+
+export { DetectionBoundsDisplay, NH, NHProvider, Pointer, useCamera, useEvents, useNH, useNHPoint, useWindowSize };

package/dist/index.d.ts

@@ -0,0 +1,68 @@
+import * as React$1 from 'react';
+import React__default, { PropsWithChildren } from 'react';
+import { Point, Rect, CreateEventDispatcherOpts, EventDispatcher, FaceTracker } from '@deibid/no-hands';
+export { NHEvent } from '@deibid/no-hands';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface NHEventProps {
+    onNHMouseEnter?: EventListener;
+    onNHMouseLeave?: EventListener;
+    onNHClickGestureBegin?: EventListener;
+    onNHClickGestureEnd?: EventListener;
+}
+type HTMLElementType = keyof React__default.JSX.IntrinsicElements;
+type NHComponentProps<T extends HTMLElementType> = React__default.ComponentPropsWithoutRef<T> & NHEventProps;
+type NHComponent<T extends HTMLElementType> = React__default.FC<NHComponentProps<T>>;
+type NHNamespace = {
+    [K in HTMLElementType]: NHComponent<K>;
+};
+
+declare const NH: NHNamespace;
+
+declare function useEvents<T extends HTMLElement>(props: NHEventProps): {
+    ref: React$1.RefObject<T | null>;
+};
+declare function useCamera(): {
+    stream: MediaStream | null;
+    loading: boolean;
+    error: Error | null;
+};
+declare function useNHPoint(): Point | null;
+declare function useWindowSize(): {
+    width: number;
+    height: number;
+    centerX: number;
+    centerY: number;
+};
+
+interface INHContext {
+    error: Error | null;
+    eventDispatcher: EventDispatcher | null;
+    faceTracker: FaceTracker | null;
+    loading: boolean;
+    videoStream: MediaStream | null;
+}
+interface NHProviderOptions {
+    faceTrackerOpts?: {
+        detectionBounds?: Rect;
+        projectionBounds?: Rect;
+    };
+    eventDispatcherOpts?: CreateEventDispatcherOpts;
+}
+
+type NHProviderProps = PropsWithChildren<NHProviderOptions>;
+declare function NHProvider({ children, eventDispatcherOpts, faceTrackerOpts }: NHProviderProps): react_jsx_runtime.JSX.Element;
+declare function useNH(): INHContext;
+
+interface DetectionBoundsDisplayProps {
+    detectionBounds: Rect;
+    style?: React.CSSProperties;
+}
+declare function DetectionBoundsDisplay({ detectionBounds, style }: DetectionBoundsDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface PointerProps extends React.PropsWithChildren {
+    style?: React.CSSProperties;
+}
+declare function Pointer({ children, style }: PointerProps): react_jsx_runtime.JSX.Element;
+
+export { DetectionBoundsDisplay, NH, NHProvider, Pointer, useCamera, useEvents, useNH, useNHPoint, useWindowSize };

package/dist/index.js

@@ -0,0 +1,503 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DetectionBoundsDisplay: () => DetectionBoundsDisplay,
+  NH: () => NH,
+  NHEvent: () => import_no_hands3.NHEvent,
+  NHProvider: () => NHProvider,
+  Pointer: () => Pointer,
+  useCamera: () => useCamera,
+  useEvents: () => useEvents,
+  useNH: () => useNH,
+  useNHPoint: () => useNHPoint,
+  useWindowSize: () => useWindowSize
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/nhcomponent.ts
+var import_react3 = __toESM(require("react"));
+
+// src/hooks.ts
+var import_react2 = require("react");
+var import_no_hands2 = require("@deibid/no-hands");
+
+// src/context/context.tsx
+var import_no_hands = require("@deibid/no-hands");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var NHContext = (0, import_react.createContext)({
+  error: null,
+  eventDispatcher: null,
+  faceTracker: null,
+  loading: false,
+  videoStream: null
+});
+function NHProvider({ children, eventDispatcherOpts, faceTrackerOpts }) {
+  const [faceTracker, setFaceTracker] = (0, import_react.useState)(null);
+  const [eventDispatcher] = (0, import_react.useState)(
+    () => (0, import_no_hands.createEventDispatcher)(eventDispatcherOpts)
+  );
+  const faceTrackerOptsRef = (0, import_react.useRef)(faceTrackerOpts);
+  const streamOwnerVideoRef = (0, import_react.useRef)(null);
+  const { error, loading, stream } = useCamera();
+  (0, import_react.useEffect)(() => {
+    faceTrackerOptsRef.current = faceTrackerOpts;
+  });
+  (0, import_react.useEffect)(() => {
+    const videoElement = streamOwnerVideoRef.current;
+    if (!videoElement || !stream) return;
+    let ftActive = true;
+    let localFaceTracker;
+    async function init() {
+      if (!videoElement) {
+        console.warn("has no video element");
+        return;
+      }
+      localFaceTracker = await (0, import_no_hands.createFaceTracker)({
+        videoElement,
+        detectionBounds: faceTrackerOptsRef.current?.detectionBounds,
+        projectionBounds: faceTrackerOptsRef.current?.projectionBounds
+      });
+      if (!ftActive) {
+        localFaceTracker.stop();
+        return;
+      }
+      videoElement.srcObject = stream;
+      videoElement.addEventListener("loadeddata", () => {
+        localFaceTracker.subscribe((point) => {
+          eventDispatcher.computeEvents(point);
+        });
+        localFaceTracker.start();
+        setFaceTracker(localFaceTracker);
+      });
+    }
+    init();
+    return () => {
+      ftActive = false;
+      localFaceTracker?.stop();
+    };
+  }, [stream, eventDispatcher]);
+  (0, import_react.useEffect)(() => {
+    if (!faceTracker) return;
+    if (faceTrackerOpts?.detectionBounds) {
+      faceTracker.setDetectionBounds(faceTrackerOpts.detectionBounds);
+    }
+    if (faceTrackerOpts?.projectionBounds) {
+      faceTracker.setProjectionBounds(faceTrackerOpts.projectionBounds);
+    }
+  }, [faceTracker, faceTrackerOpts]);
+  (0, import_react.useEffect)(() => {
+    if (eventDispatcher && eventDispatcherOpts) {
+      eventDispatcher.setEventConfig(eventDispatcherOpts);
+    }
+  }, [eventDispatcher, eventDispatcherOpts]);
+  const contextValue = (0, import_react.useMemo)(
+    () => ({
+      error,
+      eventDispatcher,
+      faceTracker,
+      loading,
+      videoStream: stream
+    }),
+    [error, eventDispatcher, faceTracker, loading, stream]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(NHContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "video",
+      {
+        ref: streamOwnerVideoRef,
+        muted: true,
+        autoPlay: true,
+        style: {
+          opacity: 0,
+          position: "absolute",
+          top: 0,
+          left: 0,
+          zIndex: -999
+        }
+      }
+    )
+  ] });
+}
+function useNH() {
+  return (0, import_react.useContext)(NHContext);
+}
+
+// src/hooks.ts
+function useEvents(props) {
+  const ref = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (!ref.current) {
+      return;
+    }
+    if (props.onNHMouseEnter) {
+      ref.current.addEventListener(import_no_hands2.NHEvent.MOUSE_ENTER, props.onNHMouseEnter);
+    }
+    if (props.onNHMouseLeave) {
+      ref.current.addEventListener(import_no_hands2.NHEvent.MOUSE_LEAVE, props.onNHMouseLeave);
+    }
+    if (props.onNHClickGestureBegin) {
+      ref.current.addEventListener(
+        import_no_hands2.NHEvent.CLICK_GESTURE_BEGIN,
+        props.onNHClickGestureBegin
+      );
+    }
+    if (props.onNHClickGestureEnd) {
+      ref.current.addEventListener(
+        import_no_hands2.NHEvent.CLICK_GESTURE_END,
+        props.onNHClickGestureEnd
+      );
+    }
+    return () => {
+      if (!ref.current) {
+        return;
+      }
+      if (props.onNHMouseEnter) {
+        ref.current.removeEventListener(
+          import_no_hands2.NHEvent.MOUSE_ENTER,
+          props.onNHMouseEnter
+        );
+      }
+      if (props.onNHMouseLeave) {
+        ref.current.removeEventListener(
+          import_no_hands2.NHEvent.MOUSE_LEAVE,
+          props.onNHMouseLeave
+        );
+      }
+      if (props.onNHClickGestureBegin) {
+        ref.current.removeEventListener(
+          import_no_hands2.NHEvent.CLICK_GESTURE_BEGIN,
+          props.onNHClickGestureBegin
+        );
+      }
+      if (props.onNHClickGestureEnd) {
+        ref.current.removeEventListener(
+          import_no_hands2.NHEvent.CLICK_GESTURE_END,
+          props.onNHClickGestureEnd
+        );
+      }
+    };
+  }, [
+    props.onNHClickGestureBegin,
+    props.onNHClickGestureEnd,
+    props.onNHMouseEnter,
+    props.onNHMouseLeave
+  ]);
+  return {
+    ref
+  };
+}
+function useCamera() {
+  const [stream, setStream] = (0, import_react2.useState)(null);
+  const [loading, setLoading] = (0, import_react2.useState)(true);
+  const [error, setError] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    let localStream = null;
+    let active = true;
+    async function getCamera() {
+      if (!navigator.mediaDevices?.getUserMedia) {
+        console.warn("device does not support camera");
+        return;
+      }
+      try {
+        const s = await navigator.mediaDevices.getUserMedia({
+          video: true
+        });
+        if (!active) {
+          s.getTracks().forEach((t) => t.stop());
+          return;
+        }
+        localStream = s;
+        setStream(s);
+        setLoading(false);
+      } catch (error2) {
+        console.error("could not initiate camera", error2);
+        setLoading(false);
+        setError(error2);
+      }
+    }
+    getCamera();
+    return () => {
+      active = false;
+      localStream?.getTracks().forEach((t) => t.stop());
+    };
+  }, []);
+  return {
+    stream,
+    loading,
+    error
+  };
+}
+function useNHPoint() {
+  const [point, setPoint] = (0, import_react2.useState)(null);
+  const { faceTracker } = useNH();
+  (0, import_react2.useEffect)(() => {
+    if (!faceTracker) return;
+    const subscriptionId = faceTracker.subscribe(setPoint);
+    return () => {
+      faceTracker.unsubscribe(subscriptionId);
+    };
+  }, [faceTracker]);
+  return point;
+}
+function useNHEventNotification({
+  onNHClickGestureBegin,
+  onNHClickGestureEnd,
+  onNHMouseEnter,
+  onNHMouseLeave
+}) {
+  const { eventDispatcher } = useNH();
+  (0, import_react2.useEffect)(() => {
+    const unsubscribeFns = [];
+    if (eventDispatcher && onNHMouseEnter) {
+      const unsubscribe = eventDispatcher.onEvent(
+        import_no_hands2.NHEvent.MOUSE_ENTER,
+        onNHMouseEnter
+      );
+      unsubscribeFns.push(unsubscribe);
+    }
+    if (eventDispatcher && onNHMouseLeave) {
+      const unsubscribe = eventDispatcher.onEvent(
+        import_no_hands2.NHEvent.MOUSE_LEAVE,
+        onNHMouseLeave
+      );
+      unsubscribeFns.push(unsubscribe);
+    }
+    if (eventDispatcher && onNHClickGestureBegin) {
+      const unsubscribe = eventDispatcher.onEvent(
+        import_no_hands2.NHEvent.CLICK_GESTURE_BEGIN,
+        onNHClickGestureBegin
+      );
+      unsubscribeFns.push(unsubscribe);
+    }
+    if (eventDispatcher && onNHClickGestureEnd) {
+      const unsubscribe = eventDispatcher.onEvent(
+        import_no_hands2.NHEvent.CLICK_GESTURE_END,
+        onNHClickGestureEnd
+      );
+      unsubscribeFns.push(unsubscribe);
+    }
+    return () => {
+      unsubscribeFns.forEach((unsubscribe) => unsubscribe?.());
+    };
+  }, [
+    eventDispatcher,
+    onNHMouseEnter,
+    onNHMouseLeave,
+    onNHClickGestureBegin,
+    onNHClickGestureEnd
+  ]);
+}
+function useWindowSize() {
+  const computeWindowSize = (window2) => ({
+    width: window2.innerWidth,
+    height: window2.innerHeight,
+    centerX: window2.innerWidth / 2,
+    centerY: window2.innerHeight / 2
+  });
+  const [windowSize, setWindowSize] = (0, import_react2.useState)(computeWindowSize(window));
+  const handleWindowResize = (0, import_react2.useCallback)(() => {
+    setWindowSize(computeWindowSize(window));
+  }, [computeWindowSize]);
+  (0, import_react2.useEffect)(() => {
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, [handleWindowResize]);
+  return windowSize;
+}
+
+// src/nhcomponent.ts
+var import_react_merge_refs = require("react-merge-refs");
+var htmlElementTags = [
+  "a",
+  "article",
+  "aside",
+  "audio",
+  "button",
+  "canvas",
+  "details",
+  "dialog",
+  "div",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "header",
+  "img",
+  "input",
+  "label",
+  "li",
+  "main",
+  "nav",
+  "ol",
+  "p",
+  "picture",
+  "section",
+  "select",
+  "span",
+  "summary",
+  "svg",
+  "table",
+  "td",
+  "textarea",
+  "th",
+  "ul",
+  "video"
+];
+function NHComponentFactory(tag) {
+  return (0, import_react3.forwardRef)(
+    (props, ref) => {
+      const {
+        onNHMouseEnter,
+        onNHMouseLeave,
+        onNHClickGestureBegin,
+        onNHClickGestureEnd,
+        ...htmlProps
+      } = props;
+      const { ref: nhRef } = useEvents({
+        onNHMouseEnter,
+        onNHMouseLeave,
+        onNHClickGestureBegin,
+        onNHClickGestureEnd
+      });
+      return import_react3.default.createElement(tag, {
+        ...htmlProps,
+        ref: (0, import_react_merge_refs.mergeRefs)([ref, nhRef]),
+        "data-nh-component": "true"
+      });
+    }
+  );
+}
+var NH = htmlElementTags.reduce((result, tag) => {
+  const NHComponent = NHComponentFactory(tag);
+  NHComponent.displayName = `NH.${tag}`;
+  result[tag] = NHComponent;
+  return result;
+}, {});
+
+// src/detection-bounds-display.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function DetectionBoundsDisplay({
+  detectionBounds,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      style: {
+        pointerEvents: "none",
+        position: "absolute",
+        width: detectionBounds.p2.x - detectionBounds.p1.x,
+        height: detectionBounds.p2.y - detectionBounds.p1.y,
+        opacity: 0.5,
+        zIndex: -1,
+        top: detectionBounds.p1.y,
+        left: detectionBounds.p1.x,
+        border: "1px solid black",
+        borderRadius: 12,
+        ...style
+      }
+    }
+  );
+}
+
+// src/pointer.tsx
+var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Pointer({
+  children,
+  style
+}) {
+  const point = useNHPoint();
+  const [, setColor] = (0, import_react4.useState)("red");
+  const handleNHClickGestureBegin = (0, import_react4.useCallback)(() => {
+    setColor((prevColor) => prevColor === "red" ? "blue" : "red");
+  }, []);
+  const handeNHClickGestureEnd = (0, import_react4.useCallback)(() => {
+    setColor("green");
+  }, []);
+  useNHEventNotification({
+    onNHClickGestureEnd: handeNHClickGestureEnd,
+    onNHClickGestureBegin: handleNHClickGestureBegin
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      style: {
+        pointerEvents: "none",
+        position: "absolute",
+        ...point === null && { visibility: "hidden" },
+        ...point !== null && { left: point.x, top: point.y },
+        ...style
+        // backgroundColor: color,
+      },
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultPointerIndicator, {})
+    }
+  );
+}
+function DefaultPointerIndicator() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      style: {
+        height: 24,
+        width: 24,
+        borderRadius: "50%",
+        transform: "translate(-50%, -50%)",
+        boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
+        background: "black"
+      }
+    }
+  );
+}
+
+// src/index.ts
+var import_no_hands3 = require("@deibid/no-hands");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DetectionBoundsDisplay,
+  NH,
+  NHEvent,
+  NHProvider,
+  Pointer,
+  useCamera,
+  useEvents,
+  useNH,
+  useNHPoint,
+  useWindowSize
+});