@xipkg/calls-risehand 0.0.0

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const RaiseHandButton: ({ className }: {
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const useRaisedHands: () => {
+    toggleHand: () => Promise<void>;
+    isHandRaised: boolean;
+    isPending: boolean;
+};
+
+declare const useHandFocus: () => void;
+
+export { RaiseHandButton, useHandFocus, useRaisedHands };

package/dist/index.mjs

@@ -0,0 +1,140 @@
+import { Button } from '@xipkg/button';
+import { Hand } from '@xipkg/icons';
+import { cn } from '@xipkg/utils';
+import { useRef, useMemo, useCallback, useEffect } from 'react';
+import { RoomEvent, Track } from 'livekit-client';
+import { useSoundEffectsStore, useCallStore } from '@xipkg/calls-store';
+import { useCallsNavigation, useRoom, useCalls } from '@xipkg/calls-providers';
+import { playSound } from '@xipkg/calls-utils';
+import { useMaybeLayoutContext } from '@livekit/components-react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/ui/RaiseHandButton.tsx
+var useRaisedHands = () => {
+  const navigation = useCallsNavigation();
+  const prevHands = useRef({});
+  const handRaiseSoundVolume = useSoundEffectsStore((s) => s.handRaiseVolume);
+  const callId = navigation.getCallId();
+  const { room } = useRoom();
+  const { data: user } = useCalls().auth.useCurrentUser();
+  const { addRaisedHand, removeRaisedHand } = useCallStore();
+  const { updateParticipantMetadata, isPending } = useCalls().updateParticipantMetadata;
+  const isHandRaised = useMemo(() => {
+    try {
+      const parsed = JSON.parse(room?.localParticipant?.metadata ?? "{}");
+      return !!parsed.is_hand_raised;
+    } catch {
+      return false;
+    }
+  }, [room?.localParticipant?.metadata]);
+  const toggleHand = useCallback(async () => {
+    if (!room?.localParticipant || !callId) return;
+    try {
+      await updateParticipantMetadata({
+        classroom_id: callId,
+        is_hand_raised: !isHandRaised,
+        role: user?.defaultLayout
+      });
+    } catch (e) {
+      console.error("raise hand error", e);
+    }
+  }, [
+    room?.localParticipant,
+    callId,
+    updateParticipantMetadata,
+    isHandRaised,
+    user?.defaultLayout
+  ]);
+  useEffect(() => {
+    if (!room) return;
+    const syncParticipant = (participant) => {
+      try {
+        const parsed = JSON.parse(participant.metadata || "{}");
+        if (!("is_hand_raised" in parsed)) return;
+        const prev = prevHands.current[participant.identity];
+        if (parsed.is_hand_raised) {
+          addRaisedHand({
+            participantId: participant.identity,
+            participantName: participant.name ?? participant.identity,
+            timestamp: Date.now()
+          });
+          if (!prev) {
+            playSound("handRaise", handRaiseSoundVolume);
+          }
+        } else {
+          removeRaisedHand(participant.identity);
+        }
+      } catch (e) {
+        console.error("metadata parse error", e);
+      }
+    };
+    const handler = (_metadata, participant) => {
+      syncParticipant(participant);
+    };
+    room.on(RoomEvent.ParticipantMetadataChanged, handler);
+    syncParticipant(room.localParticipant);
+    room.remoteParticipants.forEach(syncParticipant);
+    return () => {
+      room.off(RoomEvent.ParticipantMetadataChanged, handler);
+    };
+  }, [room, addRaisedHand, removeRaisedHand, handRaiseSoundVolume]);
+  return {
+    toggleHand,
+    isHandRaised,
+    isPending
+  };
+};
+var useHandFocus = () => {
+  const { raisedHands } = useCallStore();
+  const { room } = useRoom();
+  const layoutContext = useMaybeLayoutContext();
+  useEffect(() => {
+    if (!room || raisedHands.length === 0 || !layoutContext?.pin.dispatch) return;
+    const earliestHand = raisedHands.reduce(
+      (earliest, current) => current.timestamp < earliest.timestamp ? current : earliest
+    );
+    const participant = room.getParticipantByIdentity(earliestHand.participantId);
+    if (participant) {
+      console.log(
+        "\u{1F3AF} Auto-focusing on participant with raised hand:",
+        earliestHand.participantName
+      );
+      const cameraTrack = Array.from(participant.videoTrackPublications.values()).find(
+        (track) => track.source === "camera"
+      );
+      if (cameraTrack) {
+        layoutContext.pin.dispatch({
+          msg: "set_pin",
+          trackReference: {
+            participant,
+            source: Track.Source.Camera,
+            publication: cameraTrack
+          }
+        });
+      }
+    } else {
+      console.log("\u26A0\uFE0F Participant not found:", earliestHand.participantId);
+    }
+  }, [raisedHands, room, layoutContext]);
+};
+var RaiseHandButton = ({ className }) => {
+  const { toggleHand } = useRaisedHands();
+  const { isHandRaised } = useCallStore();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "icon",
+      variant: "ghost",
+      onClick: toggleHand,
+      className: cn(
+        `relative m-0 h-10 w-10 rounded-lg p-0 ${isHandRaised ? "bg-brand-20 text-brand-100" : "hover:bg-gray-5 text-gray-100"}`,
+        className
+      ),
+      children: /* @__PURE__ */ jsx(Hand, { className: cn("h-5 w-5", isHandRaised ? "fill-brand-100" : "fill-gray-100") })
+    }
+  );
+};
+
+export { RaiseHandButton, useHandFocus, useRaisedHands };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useRaisedHands.ts","../src/hooks/useHandFocus.ts","../src/ui/RaiseHandButton.tsx"],"names":["useCallStore","useRoom","useEffect"],"mappings":"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","file":"index.mjs","sourcesContent":["import { useEffect, useCallback, useMemo, useRef } from 'react';\nimport { Participant, RoomEvent } from 'livekit-client';\nimport { useCallStore, useSoundEffectsStore } from '@xipkg/calls-store';\nimport { useCalls, useRoom, useCallsNavigation } from '@xipkg/calls-providers';\nimport { playSound } from '@xipkg/calls-utils';\n\nexport const useRaisedHands = () => {\n  const navigation = useCallsNavigation();\n  const prevHands = useRef<Record<string, boolean>>({});\n  const handRaiseSoundVolume = useSoundEffectsStore((s) => s.handRaiseVolume);\n\n  const callId = navigation.getCallId();\n  const { room } = useRoom();\n  const { data: user } = useCalls().auth.useCurrentUser();\n\n  const { addRaisedHand, removeRaisedHand } = useCallStore();\n\n  const { updateParticipantMetadata, isPending } = useCalls().updateParticipantMetadata;\n\n  const isHandRaised = useMemo(() => {\n    try {\n      const parsed = JSON.parse(room?.localParticipant?.metadata ?? '{}');\n      return !!parsed.is_hand_raised;\n    } catch {\n      return false;\n    }\n  }, [room?.localParticipant?.metadata]);\n\n  const toggleHand = useCallback(async () => {\n    if (!room?.localParticipant || !callId) return;\n\n    try {\n      await updateParticipantMetadata({\n        classroom_id: callId,\n        is_hand_raised: !isHandRaised,\n        role: user?.defaultLayout,\n      });\n    } catch (e) {\n      console.error('raise hand error', e);\n    }\n  }, [\n    room?.localParticipant,\n    callId,\n    updateParticipantMetadata,\n    isHandRaised,\n    user?.defaultLayout,\n  ]);\n\n  useEffect(() => {\n    if (!room) return;\n\n    const syncParticipant = (participant: Participant) => {\n      try {\n        const parsed = JSON.parse(participant.metadata || '{}');\n\n        if (!('is_hand_raised' in parsed)) return;\n\n        const prev = prevHands.current[participant.identity];\n\n        if (parsed.is_hand_raised) {\n          addRaisedHand({\n            participantId: participant.identity,\n            participantName: participant.name ?? participant.identity,\n            timestamp: Date.now(),\n          });\n\n          if (!prev) {\n            playSound('handRaise', handRaiseSoundVolume);\n          }\n        } else {\n          removeRaisedHand(participant.identity);\n        }\n      } catch (e) {\n        console.error('metadata parse error', e);\n      }\n    };\n\n    const handler = (_metadata: string | undefined, participant: Participant) => {\n      syncParticipant(participant);\n    };\n\n    room.on(RoomEvent.ParticipantMetadataChanged, handler);\n\n    syncParticipant(room.localParticipant);\n    room.remoteParticipants.forEach(syncParticipant);\n\n    return () => {\n      room.off(RoomEvent.ParticipantMetadataChanged, handler);\n    };\n  }, [room, addRaisedHand, removeRaisedHand, handRaiseSoundVolume]);\n\n  return {\n    toggleHand,\n    isHandRaised,\n    isPending: isPending,\n  };\n};\n","import { useEffect } from 'react';\nimport { Track } from 'livekit-client';\nimport { useCallStore } from '@xipkg/calls-store';\nimport { useRoom } from '@xipkg/calls-providers';\nimport { useMaybeLayoutContext } from '@livekit/components-react';\n\nexport const useHandFocus = () => {\n  const { raisedHands } = useCallStore();\n  const { room } = useRoom();\n  const layoutContext = useMaybeLayoutContext();\n\n  useEffect(() => {\n    if (!room || raisedHands.length === 0 || !layoutContext?.pin.dispatch) return;\n\n    // Находим участника с самой ранней поднятой рукой\n    const earliestHand = raisedHands.reduce((earliest, current) =>\n      current.timestamp < earliest.timestamp ? current : earliest,\n    );\n\n    // Ищем участника в комнате\n    const participant = room.getParticipantByIdentity(earliestHand.participantId);\n\n    if (participant) {\n      console.log(\n        '🎯 Auto-focusing on participant with raised hand:',\n        earliestHand.participantName,\n      );\n\n      // Находим трек камеры участника для фокуса\n      const cameraTrack = Array.from(participant.videoTrackPublications.values()).find(\n        (track) => track.source === 'camera',\n      );\n\n      if (cameraTrack) {\n        // Устанавливаем фокус на участника с поднятой рукой\n        layoutContext.pin.dispatch({\n          msg: 'set_pin',\n          trackReference: {\n            participant,\n            source: Track.Source.Camera,\n            publication: cameraTrack,\n          },\n        });\n      }\n    } else {\n      console.log('⚠️ Participant not found:', earliestHand.participantId);\n    }\n  }, [raisedHands, room, layoutContext]);\n};\n","import { Button } from '@xipkg/button';\nimport { Hand } from '@xipkg/icons';\nimport { cn } from '@xipkg/utils';\nimport { useRaisedHands } from '../hooks';\nimport { useCallStore } from '@xipkg/calls-store';\n\nexport const RaiseHandButton = ({ className }: { className?: string }) => {\n  const { toggleHand } = useRaisedHands();\n  const { isHandRaised } = useCallStore();\n\n  return (\n    <Button\n      size=\"icon\"\n      variant=\"ghost\"\n      onClick={toggleHand}\n      className={cn(\n        `relative m-0 h-10 w-10 rounded-lg p-0 ${\n          isHandRaised ? 'bg-brand-20 text-brand-100' : 'hover:bg-gray-5 text-gray-100'\n        }`,\n        className,\n      )}\n    >\n      <Hand className={cn('h-5 w-5', isHandRaised ? 'fill-brand-100' : 'fill-gray-100')} />\n    </Button>\n  );\n};\n"]}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@xipkg/calls-risehand",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "development": "./index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint \"**/*.{ts,tsx}\"",
+    "dev": "tsup --watch",
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@xipkg/icons": "^2.7.0",
+    "@xipkg/button": "3.2.0",
+    "@xipkg/calls-ui": "*",
+    "@xipkg/calls-utils": "*",
+    "@xipkg/calls-config": "*",
+    "@xipkg/calls-providers": "*",
+    "@xipkg/calls-store": "*"
+  },
+  "devDependencies": {
+    "@tanstack/react-query-devtools": "5.73.3",
+    "@eslint/js": "^9.19.0",
+    "common.typescript": "*",
+    "@types/node": "^20.3.1",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@xipkg/eslint": "3.2.0",
+    "@xipkg/typescript": "latest",
+    "common.eslint": "*",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.22.0"
+  },
+  "peerDependencies": {
+    "react": "19"
+  },
+  "description": "calls package for rise hand feature",
+  "author": "xi.effect",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}