@deibid/no-hands-react 0.0.1

package/dist/index.mjs

@@ -0,0 +1,467 @@
+// src/nhcomponent.ts
+import React, { forwardRef } from "react";
+
+// src/hooks.ts
+import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { NHEvent } from "@deibid/no-hands";
+
+// src/context/context.tsx
+import {
+  createEventDispatcher,
+  createFaceTracker
+} from "@deibid/no-hands";
+import {
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  createContext
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NHContext = createContext({
+  error: null,
+  eventDispatcher: null,
+  faceTracker: null,
+  loading: false,
+  videoStream: null
+});
+function NHProvider({ children, eventDispatcherOpts, faceTrackerOpts }) {
+  const [faceTracker, setFaceTracker] = useState(null);
+  const [eventDispatcher] = useState(
+    () => createEventDispatcher(eventDispatcherOpts)
+  );
+  const faceTrackerOptsRef = useRef(faceTrackerOpts);
+  const streamOwnerVideoRef = useRef(null);
+  const { error, loading, stream } = useCamera();
+  useEffect(() => {
+    faceTrackerOptsRef.current = faceTrackerOpts;
+  });
+  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 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]);
+  useEffect(() => {
+    if (!faceTracker) return;
+    if (faceTrackerOpts?.detectionBounds) {
+      faceTracker.setDetectionBounds(faceTrackerOpts.detectionBounds);
+    }
+    if (faceTrackerOpts?.projectionBounds) {
+      faceTracker.setProjectionBounds(faceTrackerOpts.projectionBounds);
+    }
+  }, [faceTracker, faceTrackerOpts]);
+  useEffect(() => {
+    if (eventDispatcher && eventDispatcherOpts) {
+      eventDispatcher.setEventConfig(eventDispatcherOpts);
+    }
+  }, [eventDispatcher, eventDispatcherOpts]);
+  const contextValue = useMemo(
+    () => ({
+      error,
+      eventDispatcher,
+      faceTracker,
+      loading,
+      videoStream: stream
+    }),
+    [error, eventDispatcher, faceTracker, loading, stream]
+  );
+  return /* @__PURE__ */ jsxs(NHContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "video",
+      {
+        ref: streamOwnerVideoRef,
+        muted: true,
+        autoPlay: true,
+        style: {
+          opacity: 0,
+          position: "absolute",
+          top: 0,
+          left: 0,
+          zIndex: -999
+        }
+      }
+    )
+  ] });
+}
+function useNH() {
+  return useContext(NHContext);
+}
+
+// src/hooks.ts
+function useEvents(props) {
+  const ref = useRef2(null);
+  useEffect2(() => {
+    if (!ref.current) {
+      return;
+    }
+    if (props.onNHMouseEnter) {
+      ref.current.addEventListener(NHEvent.MOUSE_ENTER, props.onNHMouseEnter);
+    }
+    if (props.onNHMouseLeave) {
+      ref.current.addEventListener(NHEvent.MOUSE_LEAVE, props.onNHMouseLeave);
+    }
+    if (props.onNHClickGestureBegin) {
+      ref.current.addEventListener(
+        NHEvent.CLICK_GESTURE_BEGIN,
+        props.onNHClickGestureBegin
+      );
+    }
+    if (props.onNHClickGestureEnd) {
+      ref.current.addEventListener(
+        NHEvent.CLICK_GESTURE_END,
+        props.onNHClickGestureEnd
+      );
+    }
+    return () => {
+      if (!ref.current) {
+        return;
+      }
+      if (props.onNHMouseEnter) {
+        ref.current.removeEventListener(
+          NHEvent.MOUSE_ENTER,
+          props.onNHMouseEnter
+        );
+      }
+      if (props.onNHMouseLeave) {
+        ref.current.removeEventListener(
+          NHEvent.MOUSE_LEAVE,
+          props.onNHMouseLeave
+        );
+      }
+      if (props.onNHClickGestureBegin) {
+        ref.current.removeEventListener(
+          NHEvent.CLICK_GESTURE_BEGIN,
+          props.onNHClickGestureBegin
+        );
+      }
+      if (props.onNHClickGestureEnd) {
+        ref.current.removeEventListener(
+          NHEvent.CLICK_GESTURE_END,
+          props.onNHClickGestureEnd
+        );
+      }
+    };
+  }, [
+    props.onNHClickGestureBegin,
+    props.onNHClickGestureEnd,
+    props.onNHMouseEnter,
+    props.onNHMouseLeave
+  ]);
+  return {
+    ref
+  };
+}
+function useCamera() {
+  const [stream, setStream] = useState2(null);
+  const [loading, setLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  useEffect2(() => {
+    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] = useState2(null);
+  const { faceTracker } = useNH();
+  useEffect2(() => {
+    if (!faceTracker) return;
+    const subscriptionId = faceTracker.subscribe(setPoint);
+    return () => {
+      faceTracker.unsubscribe(subscriptionId);
+    };
+  }, [faceTracker]);
+  return point;
+}
+function useNHEventNotification({
+  onNHClickGestureBegin,
+  onNHClickGestureEnd,
+  onNHMouseEnter,
+  onNHMouseLeave
+}) {
+  const { eventDispatcher } = useNH();
+  useEffect2(() => {
+    const unsubscribeFns = [];
+    if (eventDispatcher && onNHMouseEnter) {
+      const unsubscribe = eventDispatcher.onEvent(
+        NHEvent.MOUSE_ENTER,
+        onNHMouseEnter
+      );
+      unsubscribeFns.push(unsubscribe);
+    }
+    if (eventDispatcher && onNHMouseLeave) {
+      const unsubscribe = eventDispatcher.onEvent(
+        NHEvent.MOUSE_LEAVE,
+        onNHMouseLeave
+      );
+      unsubscribeFns.push(unsubscribe);
+    }
+    if (eventDispatcher && onNHClickGestureBegin) {
+      const unsubscribe = eventDispatcher.onEvent(
+        NHEvent.CLICK_GESTURE_BEGIN,
+        onNHClickGestureBegin
+      );
+      unsubscribeFns.push(unsubscribe);
+    }
+    if (eventDispatcher && onNHClickGestureEnd) {
+      const unsubscribe = eventDispatcher.onEvent(
+        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] = useState2(computeWindowSize(window));
+  const handleWindowResize = useCallback(() => {
+    setWindowSize(computeWindowSize(window));
+  }, [computeWindowSize]);
+  useEffect2(() => {
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, [handleWindowResize]);
+  return windowSize;
+}
+
+// src/nhcomponent.ts
+import { mergeRefs } from "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 forwardRef(
+    (props, ref) => {
+      const {
+        onNHMouseEnter,
+        onNHMouseLeave,
+        onNHClickGestureBegin,
+        onNHClickGestureEnd,
+        ...htmlProps
+      } = props;
+      const { ref: nhRef } = useEvents({
+        onNHMouseEnter,
+        onNHMouseLeave,
+        onNHClickGestureBegin,
+        onNHClickGestureEnd
+      });
+      return React.createElement(tag, {
+        ...htmlProps,
+        ref: 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
+import { jsx as jsx2 } from "react/jsx-runtime";
+function DetectionBoundsDisplay({
+  detectionBounds,
+  style
+}) {
+  return /* @__PURE__ */ jsx2(
+    "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
+import { useCallback as useCallback2, useState as useState3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Pointer({
+  children,
+  style
+}) {
+  const point = useNHPoint();
+  const [, setColor] = useState3("red");
+  const handleNHClickGestureBegin = useCallback2(() => {
+    setColor((prevColor) => prevColor === "red" ? "blue" : "red");
+  }, []);
+  const handeNHClickGestureEnd = useCallback2(() => {
+    setColor("green");
+  }, []);
+  useNHEventNotification({
+    onNHClickGestureEnd: handeNHClickGestureEnd,
+    onNHClickGestureBegin: handleNHClickGestureBegin
+  });
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      style: {
+        pointerEvents: "none",
+        position: "absolute",
+        ...point === null && { visibility: "hidden" },
+        ...point !== null && { left: point.x, top: point.y },
+        ...style
+        // backgroundColor: color,
+      },
+      children: children ?? /* @__PURE__ */ jsx3(DefaultPointerIndicator, {})
+    }
+  );
+}
+function DefaultPointerIndicator() {
+  return /* @__PURE__ */ jsx3(
+    "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
+import { NHEvent as NHEvent2 } from "@deibid/no-hands";
+export {
+  DetectionBoundsDisplay,
+  NH,
+  NHEvent2 as NHEvent,
+  NHProvider,
+  Pointer,
+  useCamera,
+  useEvents,
+  useNH,
+  useNHPoint,
+  useWindowSize
+};

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@deibid/no-hands-react",
+  "version": "0.0.1",
+  "description": "React adapter for @deibid/no-hands",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsup"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "packageManager": "pnpm@10.24.0",
+  "dependencies": {
+    "@deibid/no-hands": "workspace:*",
+    "react-merge-refs": "^3.0.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "react": "18.0.0"
+  }
+}

package/src/context/context.tsx

@@ -0,0 +1,147 @@
+import {
+  createEventDispatcher,
+  createFaceTracker,
+  type EventDispatcher,
+  type FaceTracker,
+} from "@deibid/no-hands";
+
+import {
+  type PropsWithChildren,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  createContext
+} from "react";
+
+import { useCamera } from "../hooks";
+import type { INHContext, NHProviderOptions } from "./types";
+
+
+const NHContext = createContext<INHContext>({
+  error: null,
+  eventDispatcher: null,
+  faceTracker: null,
+  loading: false,
+  videoStream: null,
+});
+
+
+type NHProviderProps = PropsWithChildren<NHProviderOptions>;
+export function NHProvider({ children, eventDispatcherOpts, faceTrackerOpts }: NHProviderProps) {
+
+  const [faceTracker, setFaceTracker] = useState<FaceTracker | null>(null);
+  const [eventDispatcher] = useState<EventDispatcher>(
+    () => createEventDispatcher(eventDispatcherOpts)
+  );
+  // needed to update the faceTracker without recreating it
+  const faceTrackerOptsRef = useRef<NHProviderOptions['faceTrackerOpts']>(faceTrackerOpts);
+  const streamOwnerVideoRef = useRef<HTMLVideoElement | null>(null);
+
+  const { error, loading, stream } = useCamera();
+
+  // keeps the latest value in the ref
+  useEffect(() => { faceTrackerOptsRef.current = faceTrackerOpts; });
+
+  // initialize and re-create face tracker if stream changes
+  useEffect(() => {
+    const videoElement = streamOwnerVideoRef.current;
+    if (!videoElement || !stream) return;
+
+    let ftActive = true;
+    let localFaceTracker: FaceTracker;
+
+    async function init() {
+      if (!videoElement) {
+        console.warn("has no video element");
+        return;
+      }
+
+      localFaceTracker = await 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]);
+
+  // update the face tracker bounds if they change from props
+  useEffect(() => {
+
+    if (!faceTracker) return;
+
+    if (faceTrackerOpts?.detectionBounds) {
+      faceTracker.setDetectionBounds(faceTrackerOpts.detectionBounds);
+    }
+
+    if (faceTrackerOpts?.projectionBounds) {
+      faceTracker.setProjectionBounds(faceTrackerOpts.projectionBounds);
+    }
+
+  }, [faceTracker, faceTrackerOpts]);
+
+
+  // update the event dispatcher config if the config changes
+  // this implementation assumes eventDispatcher to be stable (which it is)
+  useEffect(() => {
+    if (eventDispatcher && eventDispatcherOpts) {
+      eventDispatcher.setEventConfig(eventDispatcherOpts)
+    }
+  }, [eventDispatcher, eventDispatcherOpts]);
+
+
+  const contextValue: INHContext = useMemo(
+    () => ({
+      error,
+      eventDispatcher,
+      faceTracker,
+      loading,
+      videoStream: stream,
+    }),
+    [error, eventDispatcher, faceTracker, loading, stream]);
+
+  return (
+    <NHContext.Provider value={contextValue}>
+      {children}
+      {/* transparent video element that attaches to the video stream and face tracker */}
+      <video
+        ref={streamOwnerVideoRef}
+        muted
+        autoPlay
+        style={{
+          opacity: 0,
+          position: "absolute",
+          top: 0,
+          left: 0,
+          zIndex: -999,
+        }}
+      ></video>
+    </NHContext.Provider>
+  );
+}
+
+export function useNH() {
+  return useContext(NHContext);
+}

package/src/context/index.ts

@@ -0,0 +1 @@
+export * from './context'

package/src/context/types.ts

@@ -0,0 +1,22 @@
+import type {
+  CreateEventDispatcherOpts,
+  EventDispatcher,
+  FaceTracker,
+  Rect
+} from "@deibid/no-hands";
+
+export interface INHContext {
+  error: Error | null;
+  eventDispatcher: EventDispatcher | null;
+  faceTracker: FaceTracker | null;
+  loading: boolean;
+  videoStream: MediaStream | null;
+}
+
+export interface NHProviderOptions {
+  faceTrackerOpts?: {
+    detectionBounds?: Rect;
+    projectionBounds?: Rect;
+  };
+  eventDispatcherOpts?: CreateEventDispatcherOpts;
+}

package/src/detection-bounds-display.tsx

@@ -0,0 +1,29 @@
+import { Rect } from "@deibid/no-hands";
+
+interface DetectionBoundsDisplayProps {
+  detectionBounds: Rect;
+  style?: React.CSSProperties;
+}
+
+export default function DetectionBoundsDisplay({
+  detectionBounds,
+  style
+}: DetectionBoundsDisplayProps) {
+  return (
+    <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
+      }}
+    />
+  );
+}