vg-x07df 1.6.3 → 1.8.0

package/README.md

@@ -81,6 +81,159 @@ import { LiveKitProvider, useTrack } from 'vg-x07df/livekit';
 const track = useTrack();
 ```
 
+## Video Call Features
+
+### Video Initialization
+
+The SDK automatically initializes camera capability but keeps it disabled by default for privacy:
+
+- Camera permissions are requested when the room connects
+- Video starts disabled (privacy-first approach)
+- Users must explicitly enable video via UI controls
+- Room is optimized with adaptive streaming and dynacast for performance
+
+### Using Video Controls
+
+```tsx
+import { useTrackToggle, Track } from "vg-x07df/livekit";
+
+function VideoControls() {
+  // Toggle video on/off
+  const { toggle: toggleVideo, enabled: isVideoEnabled } = useTrackToggle({
+    source: Track.Source.Camera
+  });
+
+  return (
+    <button onClick={toggleVideo}>
+      {isVideoEnabled ? "Turn Off Video" : "Turn On Video"}
+    </button>
+  );
+}
+```
+
+### Displaying Video
+
+```tsx
+import { VideoTrack, useParticipantTracks, Track } from "vg-x07df/livekit";
+import { hasVideoTrack } from "vg-x07df/utils";
+
+function ParticipantVideo({ participant }) {
+  const tracks = useParticipantTracks(participant, Track.Source.Camera);
+  
+  return (
+    <div className="participant-container">
+      {hasVideoTrack(participant) ? (
+        <VideoTrack 
+          participant={participant} 
+          source={Track.Source.Camera}
+          className="video-element"
+        />
+      ) : (
+        <div className="avatar-fallback">
+          {participant.identity}
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+### Video Utilities
+
+The SDK provides utility functions for common video operations:
+
+```tsx
+import { hasVideoTrack, getVideoTrack, hasVideoCapability } from "vg-x07df/utils";
+
+// Check if participant has active video (enabled and published)
+const hasActiveVideo = hasVideoTrack(participant);
+
+// Get video track publication
+const videoTrack = getVideoTrack(participant);
+
+// Check if video capability exists (track exists, may be muted)
+const canHaveVideo = hasVideoCapability(participant);
+```
+
+### Complete Video Implementation Example
+
+```tsx
+import { 
+  VideoTrack, 
+  useTrackToggle, 
+  useParticipantTracks, 
+  Track,
+  useParticipants 
+} from "vg-x07df/livekit";
+import { hasVideoTrack } from "vg-x07df/utils";
+
+function VideoCallInterface() {
+  const participants = useParticipants();
+  const { toggle: toggleVideo, enabled: isVideoEnabled } = useTrackToggle({ 
+    source: Track.Source.Camera 
+  });
+
+  return (
+    <div className="video-call-container">
+      {/* Video Controls */}
+      <div className="controls">
+        <button onClick={toggleVideo}>
+          {isVideoEnabled ? "Turn Off Video" : "Turn On Video"}
+        </button>
+      </div>
+
+      {/* Participant Videos */}
+      <div className="participants-grid">
+        {participants.map((participant) => (
+          <div key={participant.identity} className="participant-tile">
+            {hasVideoTrack(participant) ? (
+              <VideoTrack 
+                participant={participant} 
+                source={Track.Source.Camera}
+                className="video-element"
+              />
+            ) : (
+              <div className="avatar-placeholder">
+                {participant.identity.charAt(0).toUpperCase()}
+              </div>
+            )}
+            <span className="participant-name">
+              {participant.identity}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+### Video Troubleshooting
+
+**Camera permissions denied:**
+- The SDK handles permissions gracefully
+- Users will see a browser permission prompt on first video toggle
+- If permissions are denied, the call continues as audio-only
+- Check browser settings if video toggle doesn't work
+
+**Video not appearing:**
+- Verify `hasVideoTrack(participant)` returns `true`
+- Check that `useTrackToggle` shows `enabled: true`
+- Ensure the `VideoTrack` component has the correct `participant` prop
+- Confirm the participant has published their video track
+
+**Performance issues with multiple videos:**
+- The SDK uses optimized settings (720p, adaptive streaming, dynacast)
+- Video quality automatically adjusts based on available bandwidth
+- Multiple video streams are handled efficiently with simulcast
+- Consider reducing video quality for low-bandwidth scenarios
+
+**Audio works but video doesn't:**
+- Check if camera is being used by another application
+- Verify camera permissions in browser settings
+- Try refreshing the page to reinitialize camera access
+- Check browser console for camera-related errors
+
 ## Requirements
 
 - React ≥18.0.0

package/dist/channel/index.cjs

@@ -460,8 +460,10 @@ var ChatService = class {
     this.room.registerTextStreamHandler(
       "chat:v1",
       async (reader, participantInfo) => {
+        console.log("Got here: chat:v1", participantInfo.identity);
         try {
           const text = await reader.readAll();
+          console.log("Got here: chat:v1", text);
           this.handleIncomingMessage(text);
         } catch (error) {
           logger.error("Error reading text stream", error);
@@ -828,6 +830,262 @@ function useChat() {
     unreact
   };
 }
+var defaultState2 = {
+  reactions: /* @__PURE__ */ new Map(),
+  participantCache: {},
+  ttlMs: 4e3
+};
+var useReactionsStore = zustand.create()(
+  immer.immer((set) => ({
+    ...defaultState2,
+    setReaction: (participantId, reaction) => set((state) => {
+      state.reactions.set(participantId, reaction);
+    }),
+    clearReaction: (participantId) => set((state) => {
+      state.reactions.delete(participantId);
+    }),
+    upsertParticipantInfo: (id, info) => set((state) => {
+      state.participantCache[id] = info;
+    }),
+    pruneExpired: (now = Date.now()) => set((state) => {
+      const entries = Array.from(state.reactions.entries());
+      for (const [participantId, reaction] of entries) {
+        if (reaction.ts + state.ttlMs < now) {
+          state.reactions.delete(participantId);
+        }
+      }
+    }),
+    clear: () => set(() => ({
+      reactions: /* @__PURE__ */ new Map(),
+      participantCache: {},
+      ttlMs: defaultState2.ttlMs
+    }))
+  }))
+);
+function applyIncomingReaction(envelope) {
+  const { upsertParticipantInfo, setReaction } = useReactionsStore.getState();
+  if (envelope.sender.info) {
+    upsertParticipantInfo(envelope.sender.id, envelope.sender.info);
+  }
+  setReaction(envelope.sender.id, {
+    emoji: envelope.payload.emoji,
+    ts: Date.now(),
+    nonce: envelope.payload.nonce
+  });
+}
+
+// src/channel/reactions/utils.ts
+createLogger("reactions");
+function validateEmoji(emoji) {
+  if (!emoji || typeof emoji !== "string") {
+    return { valid: false, error: "empty" };
+  }
+  if (emoji.length > 10) {
+    return { valid: false, error: "too long" };
+  }
+  return { valid: true };
+}
+function generateNonce() {
+  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+// src/channel/reactions/service.ts
+var logger3 = createLogger("reactions");
+var ReactionsService = class {
+  constructor(room) {
+    this.isSubscribed = false;
+    this.lastSendAt = 0;
+    this.minIntervalMs = 200;
+    this.lastRemoteTs = /* @__PURE__ */ new Map();
+    this.room = room;
+  }
+  isRoomReady() {
+    if (!this.room) {
+      logger3.warn("Room not initialized");
+      return false;
+    }
+    if (this.room.state !== livekitClient.ConnectionState.Connected) {
+      logger3.warn("Room not connected", { state: this.room.state });
+      return false;
+    }
+    if (!this.room.localParticipant) {
+      logger3.warn("Local participant not available");
+      return false;
+    }
+    return true;
+  }
+  canSendNow() {
+    const now = Date.now();
+    if (now - this.lastSendAt < this.minIntervalMs) return false;
+    this.lastSendAt = now;
+    return true;
+  }
+  subscribe() {
+    if (this.isSubscribed) return;
+    this.room.registerTextStreamHandler("reactions:v1", async (reader) => {
+      try {
+        const text = await reader.readAll();
+        this.handleIncoming(text);
+      } catch (err) {
+        logger3.error("Error reading reactions stream", err);
+      }
+    });
+    this.pruneInterval = setInterval(() => {
+      useReactionsStore.getState().pruneExpired();
+    }, 1e3);
+    this.isSubscribed = true;
+    logger3.info("ReactionsService subscribed");
+  }
+  unsubscribe() {
+    this.isSubscribed = false;
+    if (this.pruneInterval) {
+      clearInterval(this.pruneInterval);
+      this.pruneInterval = void 0;
+    }
+    logger3.info("ReactionsService unsubscribed");
+  }
+  getLocalParticipantId() {
+    return this.room.localParticipant.identity;
+  }
+  async sendReaction(emoji) {
+    if (!this.isRoomReady()) {
+      useRtcStore.getState().addError({
+        code: "REACTIONS_ROOM_NOT_READY",
+        message: "Cannot send reaction: room not connected",
+        timestamp: Date.now()
+      });
+      return;
+    }
+    const validation = validateEmoji(emoji);
+    if (!validation.valid) {
+      useRtcStore.getState().addError({
+        code: "REACTIONS_INVALID_EMOJI",
+        message: validation.error || "Invalid emoji",
+        timestamp: Date.now()
+      });
+      return;
+    }
+    if (!this.canSendNow()) {
+      logger3.debug("Rate limited, skipping send");
+      return;
+    }
+    const senderInfo = this.getSenderInfo();
+    const ts = Date.now();
+    const nonce = generateNonce();
+    useReactionsStore.getState().setReaction(senderInfo.id, {
+      emoji,
+      ts,
+      nonce
+    });
+    try {
+      const envelope = {
+        v: 1,
+        kind: "reaction",
+        roomId: this.room.name,
+        ts,
+        sender: senderInfo,
+        payload: {
+          emoji,
+          nonce
+        }
+      };
+      await this.room.localParticipant.sendText(JSON.stringify(envelope), {
+        topic: "reactions:v1"
+      });
+      logger3.debug("Reaction sent", { emoji });
+    } catch (error) {
+      logger3.error("Failed to send reaction", error);
+      useRtcStore.getState().addError({
+        code: "REACTIONS_SEND_FAILED",
+        message: error instanceof Error ? error.message : "Failed to send reaction",
+        timestamp: Date.now(),
+        context: { emoji }
+      });
+    }
+  }
+  handleIncoming(text) {
+    try {
+      const parsed = JSON.parse(text);
+      if (!this.isValidEnvelope(parsed)) {
+        logger3.warn("Invalid reaction envelope received", parsed);
+        return;
+      }
+      if (parsed.sender.id === this.getLocalParticipantId()) {
+        logger3.debug("Ignoring self-echo reaction");
+        return;
+      }
+      const lastTs = this.lastRemoteTs.get(parsed.sender.id) ?? Number.NEGATIVE_INFINITY;
+      if (parsed.ts < lastTs) {
+        logger3.debug("Ignoring out-of-order reaction", {
+          sender: parsed.sender.id,
+          ts: parsed.ts,
+          lastTs
+        });
+        return;
+      }
+      this.lastRemoteTs.set(parsed.sender.id, parsed.ts);
+      applyIncomingReaction(parsed);
+      logger3.debug("Reaction received", { emoji: parsed.payload.emoji });
+    } catch (error) {
+      logger3.error("Error parsing incoming reaction", error);
+    }
+  }
+  isValidEnvelope(e) {
+    return e && e.v === 1 && e.kind === "reaction" && typeof e.roomId === "string" && e.roomId === this.room.name && typeof e.ts === "number" && e.ts > 0 && typeof e.sender?.id === "string" && typeof e.payload?.emoji === "string" && typeof e.payload?.nonce === "string";
+  }
+  getSenderInfo() {
+    const localParticipant = this.room.localParticipant;
+    const sender = {
+      id: localParticipant.identity
+    };
+    if (localParticipant.metadata) {
+      try {
+        sender.info = JSON.parse(
+          localParticipant.metadata
+        );
+      } catch {
+      }
+    }
+    return sender;
+  }
+};
+var logger4 = createLogger("reactions:hook");
+function useReactions() {
+  const service = useFeatureService("reactions");
+  const reactions = useReactionsStore((state) => state.reactions);
+  const participantCache = useReactionsStore((state) => state.participantCache);
+  const getReactionFor = react.useCallback(
+    (participantId) => {
+      const reaction = reactions.get(participantId);
+      return reaction?.emoji ?? null;
+    },
+    [reactions]
+  );
+  const getParticipantInfo = react.useCallback(
+    (id) => participantCache[id] || null,
+    [participantCache]
+  );
+  const sendReaction = react.useCallback(
+    async (emoji) => {
+      if (!service) {
+        logger4.error("Cannot send reaction: service not ready");
+        return;
+      }
+      return service.sendReaction(emoji);
+    },
+    [service]
+  );
+  const clearReaction = react.useCallback((participantId) => {
+    useReactionsStore.getState().clearReaction(participantId);
+  }, []);
+  return {
+    sendReaction,
+    getReactionFor,
+    clearReaction,
+    getParticipantInfo,
+    isReady: !!service
+  };
+}
 
 // src/channel/registry.ts
 var FEATURES = {
@@ -835,10 +1093,15 @@ var FEATURES = {
     name: "chat",
     createService: (room) => new ChatService(room),
     cleanupStore: () => useChatStore.getState().clearChat()
+  },
+  reactions: {
+    name: "reactions",
+    createService: (room) => new ReactionsService(room),
+    cleanupStore: () => useReactionsStore.getState().clear()
   }
 };
-var DEFAULT_FEATURES = ["chat"];
-var logger2 = createLogger("channels:provider");
+var DEFAULT_FEATURES = ["chat", "reactions"];
+var logger5 = createLogger("channels:provider");
 function DataChannelProvider({
   room,
   features = DEFAULT_FEATURES,
@@ -848,52 +1111,52 @@ function DataChannelProvider({
   const [isReady, setIsReady] = react.useState(false);
   react.useEffect(() => {
     if (!room) {
-      logger2.warn("DataChannelProvider mounted without room");
+      logger5.warn("DataChannelProvider mounted without room");
       return;
     }
-    logger2.debug("Initializing features", { features });
+    logger5.debug("Initializing features", { features });
     for (const featureName of features) {
       const feature = FEATURES[featureName];
       if (!feature) {
-        logger2.warn(`Feature "${featureName}" not found in registry`);
+        logger5.warn(`Feature "${featureName}" not found in registry`);
         continue;
       }
       try {
-        logger2.debug(`Initializing feature: ${featureName}`);
+        logger5.debug(`Initializing feature: ${featureName}`);
         const service = feature.createService(room);
         service.subscribe();
         services.current.set(featureName, service);
-        logger2.info(`Feature "${featureName}" initialized`);
+        logger5.info(`Feature "${featureName}" initialized`);
       } catch (error) {
-        logger2.error(`Failed to initialize feature "${featureName}"`, error);
+        logger5.error(`Failed to initialize feature "${featureName}"`, error);
       }
     }
     setIsReady(true);
-    logger2.info("All features initialized");
+    logger5.info("All features initialized");
     return () => {
-      logger2.debug("Cleaning up features");
+      logger5.debug("Cleaning up features");
       services.current.forEach((service, name) => {
         try {
-          logger2.debug(`Unsubscribing feature: ${name}`);
+          logger5.debug(`Unsubscribing feature: ${name}`);
           service.unsubscribe();
         } catch (error) {
-          logger2.error(`Failed to unsubscribe feature "${name}"`, error);
+          logger5.error(`Failed to unsubscribe feature "${name}"`, error);
         }
       });
       for (const featureName of features) {
         const feature = FEATURES[featureName];
         if (feature?.cleanupStore) {
           try {
-            logger2.debug(`Cleaning store for feature: ${featureName}`);
+            logger5.debug(`Cleaning store for feature: ${featureName}`);
             feature.cleanupStore();
           } catch (error) {
-            logger2.error(`Failed to cleanup store for "${featureName}"`, error);
+            logger5.error(`Failed to cleanup store for "${featureName}"`, error);
           }
         }
       }
       services.current.clear();
       setIsReady(false);
-      logger2.info("Features cleanup complete");
+      logger5.info("Features cleanup complete");
     };
   }, [room, features]);
   const contextValue = react.useMemo(
@@ -908,14 +1171,20 @@ function DataChannelProvider({
 
 exports.ChatService = ChatService;
 exports.DataChannelProvider = DataChannelProvider;
+exports.ReactionsService = ReactionsService;
+exports.applyIncomingReaction = applyIncomingReaction;
 exports.compareEntries = compareEntries;
 exports.generateEntryId = generateEntryId;
+exports.generateNonce = generateNonce;
 exports.getCurrentTimestamp = getCurrentTimestamp;
 exports.isValidEnvelope = isValidEnvelope;
 exports.useChat = useChat;
 exports.useChatStore = useChatStore;
 exports.useDataChannelContext = useDataChannelContext;
 exports.useFeatureService = useFeatureService;
+exports.useReactions = useReactions;
+exports.useReactionsStore = useReactionsStore;
 exports.validateContent = validateContent;
+exports.validateEmoji = validateEmoji;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map