@deibid/no-hands-react 0.0.1

package/src/hooks.ts

@@ -0,0 +1,239 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { Listener, Point } from "@deibid/no-hands";
+import { NHEvent } from "@deibid/no-hands";
+import type { NHEventProps } from "./types";
+import { useNH } from "./context";
+
+export function useEvents<T extends HTMLElement>(props: NHEventProps) {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    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,
+  };
+}
+
+export function useCamera() {
+  const [stream, setStream] = useState<MediaStream | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let localStream: MediaStream | null = 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 (error) {
+        console.error("could not initiate camera", error);
+        setLoading(false);
+        setError(error as Error);
+      }
+    }
+
+    getCamera();
+
+    return () => {
+      active = false;
+      localStream?.getTracks().forEach((t) => t.stop());
+    };
+  }, []);
+
+  return {
+    stream,
+    loading,
+    error,
+  };
+}
+
+export function useNHPoint() {
+  const [point, setPoint] = useState<Point | null>(null);
+  const { faceTracker } = useNH();
+
+  useEffect(() => {
+    if (!faceTracker) return;
+
+    const subscriptionId = faceTracker.subscribe(setPoint);
+    return () => {
+      faceTracker.unsubscribe(subscriptionId);
+    };
+  }, [faceTracker]);
+
+  return point;
+}
+
+interface UseNHEventNotificationProps {
+  onNHMouseEnter?: Listener<'nh:mouseenter'>
+  onNHMouseLeave?: Listener<'nh:mouseleave'>
+  onNHClickGestureBegin?: Listener<'nh:click-gesture-begin'>
+  onNHClickGestureEnd?: Listener<'nh:click-gesture-end'>
+}
+
+export function useNHEventNotification({
+  onNHClickGestureBegin,
+  onNHClickGestureEnd,
+  onNHMouseEnter,
+  onNHMouseLeave
+}: UseNHEventNotificationProps) {
+  const { eventDispatcher } = useNH();
+
+  useEffect(() => {
+
+    const unsubscribeFns: Array<(() => void) | undefined> = [];
+
+    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,
+  ]);
+}
+
+
+export function useWindowSize() {
+
+  const computeWindowSize = (window: Window) => ({
+    width: window.innerWidth,
+    height: window.innerHeight,
+    centerX: window.innerWidth / 2,
+    centerY: window.innerHeight / 2
+  })
+
+  const [windowSize, setWindowSize] = useState(computeWindowSize(window));
+
+  const handleWindowResize = useCallback(() => {
+    setWindowSize(computeWindowSize(window))
+  }, [computeWindowSize]);
+
+  useEffect(() => {
+    window.addEventListener('resize', handleWindowResize);
+    return () => window.removeEventListener('resize', handleWindowResize);
+  }, [handleWindowResize]);
+
+  return windowSize;
+
+}

package/src/index.ts

@@ -0,0 +1,24 @@
+import { NH } from './nhcomponent';
+import { useEvents, useCamera, useNHPoint, useWindowSize } from "./hooks";
+import { NHProvider, useNH } from "./context";
+import DetectionBoundsDisplay from "./detection-bounds-display";
+import Pointer from "./pointer";
+import { NHEvent } from "@deibid/no-hands";
+
+
+export {
+  // context
+  NHProvider,
+  // hooks
+  useCamera,
+  useEvents,
+  useNH,
+  useNHPoint,
+  useWindowSize,
+  // components
+  NH,
+  DetectionBoundsDisplay,
+  Pointer,
+  // re-exports from core package
+  NHEvent
+}

package/src/nhcomponent.ts

@@ -0,0 +1,87 @@
+import React, { forwardRef } from "react";
+import {
+  Element,
+  HTMLElementType,
+  NHComponent,
+  NHComponentProps,
+  NHNamespace,
+} from "./types";
+import { useEvents } from "./hooks";
+import { mergeRefs } from "react-merge-refs";
+
+const htmlElementTags: HTMLElementType[] = [
+  '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',
+] as const;
+
+function NHComponentFactory<T extends HTMLElementType>(tag: T): NHComponent<T> {
+  return forwardRef<Element<T>, NHComponentProps<T>>(
+    (props, ref) => {
+      const {
+        onNHMouseEnter,
+        onNHMouseLeave,
+        onNHClickGestureBegin,
+        onNHClickGestureEnd,
+        ...htmlProps
+      } = props;
+
+      const { ref: nhRef } = useEvents<Element<T>>({
+        onNHMouseEnter,
+        onNHMouseLeave,
+        onNHClickGestureBegin,
+        onNHClickGestureEnd,
+      });
+
+      return React.createElement(tag, {
+        ...htmlProps,
+        ref: mergeRefs([ref, nhRef]),
+        "data-nh-component": "true",
+      });
+    }
+  ) as unknown as NHComponent<T>;
+}
+
+export const NH = htmlElementTags.reduce((result, tag) => {
+  const NHComponent = NHComponentFactory(tag);
+
+  NHComponent.displayName = `NH.${tag}`;
+  result[tag] = NHComponent;
+  return result;
+}, {} as NHNamespace);

package/src/pointer.tsx

@@ -0,0 +1,62 @@
+import { useCallback, useState } from "react";
+import { useNHEventNotification, useNHPoint } from "./hooks";
+
+
+interface PointerProps extends React.PropsWithChildren {
+  style?: React.CSSProperties;
+}
+
+export default function Pointer({
+  children,
+  style
+}: PointerProps) {
+  const point = useNHPoint();
+
+  const [, setColor] = useState("red");
+
+  const handleNHClickGestureBegin = useCallback(() => {
+    setColor((prevColor) => (prevColor === "red" ? "blue" : "red"));
+  }, []);
+
+  const handeNHClickGestureEnd = useCallback(() => {
+    setColor('green');
+  }, []);
+
+
+  useNHEventNotification({
+    onNHClickGestureEnd: handeNHClickGestureEnd,
+    onNHClickGestureBegin: handleNHClickGestureBegin,
+  });
+
+  return (
+    <div
+      style={{
+        pointerEvents: "none",
+        position: "absolute",
+        ...(point === null && { visibility: 'hidden' }),
+        ...(point !== null && { left: point.x, top: point.y }),
+        ...style,
+        // backgroundColor: color,
+      }}
+    >
+      {children ?? <DefaultPointerIndicator />}
+    </div>
+  );
+}
+
+
+function DefaultPointerIndicator() {
+
+  return <div
+    style={{
+      height: 24,
+      width: 24,
+      borderRadius: '50%',
+      transform: 'translate(-50%, -50%)',
+      boxShadow: 'rgba(0, 0, 0, 0.24) 0px 3px 8px',
+      background: 'black',
+    }}
+  />
+
+
+}

package/src/types.ts

@@ -0,0 +1,25 @@
+import React from "react";
+
+export interface NHEventProps {
+  onNHMouseEnter?: EventListener;
+  onNHMouseLeave?: EventListener;
+  onNHClickGestureBegin?: EventListener;
+  onNHClickGestureEnd?: EventListener;
+}
+
+export type HTMLElementType = keyof React.JSX.IntrinsicElements;
+export type Element<T extends HTMLElementType> =
+  React.ComponentRef<T> extends HTMLElement
+  ? React.ComponentRef<T>
+  : HTMLElement;
+
+export type NHComponentProps<T extends HTMLElementType> =
+  React.ComponentPropsWithoutRef<T> & NHEventProps;
+
+export type NHComponent<T extends HTMLElementType> = React.FC<
+  NHComponentProps<T>
+>;
+
+export type NHNamespace = {
+  [K in HTMLElementType]: NHComponent<K>;
+};

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "../core"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": [
+    "tsup.config.ts"
+  ]
+}

package/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm", "cjs"],
+  dts: {
+    compilerOptions: {
+      composite: false,
+    },
+  },
+  clean: true,
+  external: ["react"],
+});