@volorio/react 0.1.0

package/README.md

@@ -0,0 +1,33 @@
+# @volorio/react
+
+React hooks for Volorio RTC, chat, screen sharing, and usage estimates.
+
+## Install
+
+```bash
+npm install @volorio/sdk @volorio/react livekit-client react
+```
+
+## Usage
+
+Create the room session on your backend with `@volorio/sdk/node`. Do not expose your Volorio API key in the browser.
+
+```ts
+import { useVolorioRoom } from "@volorio/react";
+
+export function CallView({ session }: { session: { livekitUrl: string; token: string; identity: string } }) {
+  const room = useVolorioRoom(session);
+
+  return {
+    status: room.status,
+    participantMinutes: room.usageEstimate.participantMinutes,
+    estimatedAmountMicros: room.usageEstimate.estimatedAmountMicros,
+    join: () => room.join(),
+    leave: () => room.leave(),
+    camera: () => room.enableCamera(true),
+    microphone: () => room.enableMicrophone(true),
+    screenShare: () => room.shareScreen(true),
+    chat: (message: string) => room.sendMessage(message),
+  };
+}
+```

package/dist/src/index.d.ts

@@ -0,0 +1,26 @@
+import { VolorioRoomClient, type VolorioBrowserSession, type VolorioRoomClientOptions, type VolorioUsageEstimate } from "@volorio/sdk";
+export type VolorioReactRoomStatus = "idle" | "connecting" | "connected" | "disconnected" | "error";
+export interface VolorioReactRoomState {
+    status: VolorioReactRoomStatus;
+    cameraEnabled: boolean;
+    microphoneEnabled: boolean;
+    screenShareEnabled: boolean;
+    lastError: string | undefined;
+    usageEstimate: VolorioUsageEstimate;
+}
+export interface UseVolorioRoomOptions extends VolorioRoomClientOptions {
+    autoJoin?: boolean;
+    clientFactory?: () => VolorioRoomClient;
+}
+export interface UseVolorioRoomResult extends VolorioReactRoomState {
+    client: VolorioRoomClient;
+    join: (nextSession?: VolorioBrowserSession) => Promise<void>;
+    leave: () => void;
+    enableCamera: (enabled: boolean) => Promise<void>;
+    enableMicrophone: (enabled: boolean) => Promise<void>;
+    shareScreen: (enabled: boolean) => Promise<void>;
+    sendMessage: (message: string) => Promise<void>;
+}
+export declare function createInitialVolorioRoomState(): VolorioReactRoomState;
+export declare function normalizeVolorioRoomStatus(status: VolorioReactRoomStatus, hasSession: boolean): VolorioReactRoomStatus;
+export declare function useVolorioRoom(session: VolorioBrowserSession | null | undefined, options?: UseVolorioRoomOptions): UseVolorioRoomResult;

package/dist/src/index.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createInitialVolorioRoomState = createInitialVolorioRoomState;
+exports.normalizeVolorioRoomStatus = normalizeVolorioRoomStatus;
+exports.useVolorioRoom = useVolorioRoom;
+const react_1 = require("react");
+const sdk_1 = require("@volorio/sdk");
+function createInitialVolorioRoomState() {
+    return {
+        status: "idle",
+        cameraEnabled: false,
+        microphoneEnabled: false,
+        screenShareEnabled: false,
+        lastError: undefined,
+        usageEstimate: {
+            participantMinutes: 0,
+            estimatedAmountMicros: 0,
+        },
+    };
+}
+function normalizeVolorioRoomStatus(status, hasSession) {
+    if (status === "idle" && hasSession) {
+        return "disconnected";
+    }
+    return status;
+}
+function useVolorioRoom(session, options = {}) {
+    const client = (0, react_1.useMemo)(() => options.clientFactory?.() ?? new sdk_1.VolorioRoomClient(options), [options.clientFactory]);
+    const sessionRef = (0, react_1.useRef)(session);
+    const [state, setState] = (0, react_1.useState)(() => createInitialVolorioRoomState());
+    sessionRef.current = session;
+    (0, react_1.useEffect)(() => {
+        const unsubscribeConnected = client.on("connected", () => {
+            setState((current) => ({ ...current, status: "connected", lastError: undefined }));
+        });
+        const unsubscribeDisconnected = client.on("disconnected", () => {
+            setState((current) => ({ ...current, status: "disconnected" }));
+        });
+        const unsubscribeUsage = client.on("usageEstimateChanged", (event) => {
+            setState((current) => ({ ...current, usageEstimate: event }));
+        });
+        return () => {
+            unsubscribeConnected();
+            unsubscribeDisconnected();
+            unsubscribeUsage();
+        };
+    }, [client]);
+    const runAction = (0, react_1.useCallback)(async (action, patch) => {
+        try {
+            await action();
+            if (patch !== undefined) {
+                setState((current) => ({ ...current, ...patch, lastError: undefined }));
+            }
+        }
+        catch (error) {
+            setState((current) => ({ ...current, status: "error", lastError: error instanceof Error ? error.message : String(error) }));
+            throw error;
+        }
+    }, []);
+    const join = (0, react_1.useCallback)(async (nextSession) => {
+        const resolvedSession = nextSession ?? sessionRef.current;
+        if (resolvedSession === null || resolvedSession === undefined) {
+            throw new Error("Volorio room session is required before joining");
+        }
+        setState((current) => ({ ...current, status: "connecting", lastError: undefined }));
+        await runAction(() => client.join(resolvedSession));
+    }, [client, runAction]);
+    const leave = (0, react_1.useCallback)(() => {
+        client.disconnect();
+        setState((current) => ({
+            ...current,
+            status: "disconnected",
+            cameraEnabled: false,
+            microphoneEnabled: false,
+            screenShareEnabled: false,
+        }));
+    }, [client]);
+    const enableCamera = (0, react_1.useCallback)((enabled) => runAction(() => client.enableCamera(enabled), { cameraEnabled: enabled }), [client, runAction]);
+    const enableMicrophone = (0, react_1.useCallback)((enabled) => runAction(() => client.enableMicrophone(enabled), { microphoneEnabled: enabled }), [client, runAction]);
+    const shareScreen = (0, react_1.useCallback)((enabled) => runAction(() => client.enableScreenShare(enabled), { screenShareEnabled: enabled }), [client, runAction]);
+    const sendMessage = (0, react_1.useCallback)((message) => runAction(() => client.sendMessage(message)), [client, runAction]);
+    (0, react_1.useEffect)(() => {
+        if (options.autoJoin === true && session !== null && session !== undefined) {
+            void join(session);
+        }
+    }, [join, options.autoJoin, session]);
+    return {
+        ...state,
+        status: normalizeVolorioRoomStatus(state.status, session !== null && session !== undefined),
+        client,
+        join,
+        leave,
+        enableCamera,
+        enableMicrophone,
+        shareScreen,
+        sendMessage,
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@volorio/react",
+  "version": "0.1.0",
+  "private": false,
+  "description": "React hooks for Volorio RTC, chat, screen sharing, and usage estimates.",
+  "main": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.js"
+    }
+  },
+  "files": [
+    "dist/src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test": "tsc -p tsconfig.json && node --test dist/test/*.spec.js",
+    "pack:local": "pnpm build && npm pack --pack-destination dist"
+  },
+  "peerDependencies": {
+    "@volorio/sdk": ">=0.1.0",
+    "livekit-client": "^2.0.0",
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "livekit-client": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.79",
+    "@volorio/sdk": "workspace:*",
+    "react": "^18.2.0"
+  }
+}