@runwayml/avatars-react 0.10.0-beta.0 → 0.11.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import { LiveKitRoom, RoomAudioRenderer, useRoomContext, useConnectionState, useRemoteParticipants, useTracks, isTrackReference, VideoTrack, useLocalParticipant, useMediaDevices, TrackToggle } from '@livekit/components-react';
+import { LiveKitRoom, RoomAudioRenderer, useRoomContext, useConnectionState, useRemoteParticipants, useTracks, isTrackReference, VideoTrack, useLocalParticipant, useMediaDevices } from '@livekit/components-react';
 export { RoomAudioRenderer as AudioRenderer, VideoTrack, isTrackReference } from '@livekit/components-react';
-import { createContext, useRef, useEffect, useCallback, useState, useContext, useSyncExternalStore } from 'react';
+import { createContext, useRef, useEffect, useState, useCallback, useMemo, useContext, useSyncExternalStore } from 'react';
 import { ConnectionState, Track, RoomEvent } from 'livekit-client';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -169,53 +169,6 @@ function parseClientEvent(payload) {
     return null;
   }
 }
-async function hasMediaDevice(kind, timeoutMs = 1e3) {
-  try {
-    const timeoutPromise = new Promise(
-      (resolve) => setTimeout(() => resolve(false), timeoutMs)
-    );
-    const checkPromise = navigator.mediaDevices.enumerateDevices().then((devices) => devices.some((device) => device.kind === kind));
-    return await Promise.race([checkPromise, timeoutPromise]);
-  } catch {
-    return false;
-  }
-}
-function useDeviceAvailability(requestAudio, requestVideo) {
-  const [state, setState] = useState({
-    audio: requestAudio,
-    // Optimistically assume devices exist
-    video: requestVideo
-  });
-  useEffect(() => {
-    let cancelled = false;
-    async function checkDevices() {
-      const [hasAudio, hasVideo] = await Promise.all([
-        requestAudio ? hasMediaDevice("audioinput") : Promise.resolve(false),
-        requestVideo ? hasMediaDevice("videoinput") : Promise.resolve(false)
-      ]);
-      if (!cancelled) {
-        setState({
-          audio: requestAudio && hasAudio,
-          video: requestVideo && hasVideo
-        });
-      }
-    }
-    checkDevices();
-    return () => {
-      cancelled = true;
-    };
-  }, [requestAudio, requestVideo]);
-  return state;
-}
-var MEDIA_DEVICE_ERROR_NAMES = /* @__PURE__ */ new Set([
-  "NotAllowedError",
-  "NotFoundError",
-  "NotReadableError",
-  "OverconstrainedError"
-]);
-function isMediaDeviceError(error) {
-  return MEDIA_DEVICE_ERROR_NAMES.has(error.name);
-}
 var DEFAULT_ROOM_OPTIONS = {
   adaptiveStream: false,
   dynacast: false
@@ -237,6 +190,7 @@ function mapConnectionState(connectionState) {
 var AvatarSessionContext = createContext(
   null
 );
+var MediaDeviceErrorContext = createContext(null);
 function AvatarSession({
   credentials,
   children,
@@ -249,12 +203,9 @@ function AvatarSession({
   __unstable_roomOptions
 }) {
   const errorRef = useRef(null);
-  const deviceAvailability = useDeviceAvailability(requestAudio, requestVideo);
   const handleError = (error) => {
     onError?.(error);
-    if (!isMediaDeviceError(error)) {
-      errorRef.current = error;
-    }
+    errorRef.current = error;
   };
   const roomOptions = {
     ...DEFAULT_ROOM_OPTIONS,
@@ -266,8 +217,8 @@ function AvatarSession({
       serverUrl: credentials.serverUrl,
       token: credentials.token,
       connect: true,
-      audio: deviceAvailability.audio,
-      video: deviceAvailability.video,
+      audio: false,
+      video: false,
       onDisconnected: () => onEnd?.(),
       onError: handleError,
       options: roomOptions,
@@ -279,6 +230,8 @@ function AvatarSession({
           AvatarSessionContextInner,
           {
             sessionId: credentials.sessionId,
+            requestAudio,
+            requestVideo,
             onEnd,
             onClientEvent,
             errorRef,
@@ -293,6 +246,8 @@ function AvatarSession({
 }
 function AvatarSessionContextInner({
   sessionId,
+  requestAudio,
+  requestVideo,
   onEnd,
   onClientEvent,
   errorRef,
@@ -328,6 +283,64 @@ function AvatarSessionContextInner({
       });
     };
   }, [connectionState, initialScreenStream, room]);
+  const [micError, setMicError] = useState(null);
+  const [cameraError, setCameraError] = useState(null);
+  const mediaEnabledRef = useRef(false);
+  useEffect(() => {
+    if (connectionState !== ConnectionState.Connected) return;
+    if (mediaEnabledRef.current) return;
+    mediaEnabledRef.current = true;
+    async function enableMedia() {
+      if (requestAudio) {
+        try {
+          await room.localParticipant.setMicrophoneEnabled(true);
+        } catch (err) {
+          if (err instanceof Error) setMicError(err);
+        }
+      }
+      if (requestVideo) {
+        try {
+          await room.localParticipant.setCameraEnabled(true);
+        } catch (err) {
+          if (err instanceof Error) setCameraError(err);
+        }
+      }
+    }
+    enableMedia();
+  }, [connectionState, room, requestAudio, requestVideo]);
+  useEffect(() => {
+    function handleMediaDevicesError(error, kind) {
+      if (kind === "audioinput") {
+        setMicError(error);
+      } else if (kind === "videoinput") {
+        setCameraError(error);
+      }
+    }
+    room.on(RoomEvent.MediaDevicesError, handleMediaDevicesError);
+    return () => {
+      room.off(RoomEvent.MediaDevicesError, handleMediaDevicesError);
+    };
+  }, [room]);
+  const retryMic = useCallback(async () => {
+    try {
+      await room.localParticipant.setMicrophoneEnabled(true);
+      setMicError(null);
+    } catch (err) {
+      if (err instanceof Error) setMicError(err);
+    }
+  }, [room]);
+  const retryCamera = useCallback(async () => {
+    try {
+      await room.localParticipant.setCameraEnabled(true);
+      setCameraError(null);
+    } catch (err) {
+      if (err instanceof Error) setCameraError(err);
+    }
+  }, [room]);
+  const mediaDeviceErrors = useMemo(
+    () => ({ micError, cameraError, retryMic, retryCamera }),
+    [micError, cameraError, retryMic, retryCamera]
+  );
   useEffect(() => {
     function handleDataReceived(payload) {
       const event = parseClientEvent(payload);
@@ -356,7 +369,7 @@ function AvatarSessionContextInner({
     error: errorRef.current,
     end
   };
-  return /* @__PURE__ */ jsx(AvatarSessionContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx(AvatarSessionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(MediaDeviceErrorContext.Provider, { value: mediaDeviceErrors, children }) });
 }
 function useAvatarSessionContext() {
   const context = useContext(AvatarSessionContext);
@@ -367,6 +380,9 @@ function useAvatarSessionContext() {
   }
   return context;
 }
+function useMediaDeviceErrorContext() {
+  return useContext(MediaDeviceErrorContext);
+}
 function useAvatar() {
   const remoteParticipants = useRemoteParticipants();
   const avatarParticipant = remoteParticipants[0] ?? null;
@@ -432,8 +448,24 @@ function AvatarVideo({ children, ...props }) {
     }
   );
 }
+var NOOP_ASYNC = async () => {
+};
+function createCaptureController() {
+  if (typeof window === "undefined" || !("CaptureController" in window)) {
+    return void 0;
+  }
+  const controller = new window.CaptureController();
+  controller.setFocusBehavior("no-focus-change");
+  return controller;
+}
 function useLocalMedia() {
   const { localParticipant } = useLocalParticipant();
+  const {
+    micError = null,
+    cameraError = null,
+    retryMic = NOOP_ASYNC,
+    retryCamera = NOOP_ASYNC
+  } = useMediaDeviceErrorContext() ?? {};
   const audioDevices = useMediaDevices({ kind: "audioinput" });
   const videoDevices = useMediaDevices({ kind: "videoinput" });
   const hasMic = audioDevices?.length > 0;
@@ -457,7 +489,16 @@ function useLocalMedia() {
     }
   }, [localParticipant]);
   const toggleScreenShare = useCallback(() => {
-    localParticipant?.setScreenShareEnabled(!isScreenShareEnabledRef.current);
+    const next = !isScreenShareEnabledRef.current;
+    if (next) {
+      const controller = createCaptureController();
+      localParticipant?.setScreenShareEnabled(true, {
+        controller,
+        surfaceSwitching: "include"
+      });
+    } else {
+      localParticipant?.setScreenShareEnabled(false);
+    }
   }, [localParticipant]);
   const tracks = useTracks(
     [{ source: Track.Source.Camera, withPlaceholder: true }],
@@ -479,7 +520,11 @@ function useLocalMedia() {
     toggleMic,
     toggleCamera,
     toggleScreenShare,
-    localVideoTrackRef
+    localVideoTrackRef,
+    micError,
+    cameraError,
+    retryMic,
+    retryCamera
   };
 }
 function ControlBar({
@@ -497,9 +542,17 @@ function ControlBar({
     isScreenShareEnabled,
     toggleMic,
     toggleCamera,
-    toggleScreenShare
+    toggleScreenShare,
+    micError,
+    cameraError,
+    retryMic,
+    retryCamera
   } = useLocalMedia();
   const isActive = session.state === "active";
+  const handleStopScreenShare = useCallback(() => {
+    if (!isScreenShareEnabled) return;
+    toggleScreenShare();
+  }, [isScreenShareEnabled, toggleScreenShare]);
   const state = {
     isMicEnabled,
     isCameraEnabled,
@@ -508,7 +561,11 @@ function ControlBar({
     toggleCamera,
     toggleScreenShare,
     endCall: session.end,
-    isActive
+    isActive,
+    micError,
+    cameraError,
+    retryMic,
+    retryCamera
   };
   if (children) {
     return /* @__PURE__ */ jsx(Fragment, { children: children(state) });
@@ -517,57 +574,71 @@ function ControlBar({
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { ...props, "data-avatar-control-bar": "", "data-avatar-active": isActive, children: [
-    showMicrophone && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: toggleMic,
-        "data-avatar-control": "microphone",
-        "data-avatar-enabled": isMicEnabled,
-        "aria-label": isMicEnabled ? "Mute microphone" : "Unmute microphone",
-        children: microphoneIcon
-      }
-    ),
-    showCamera && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: toggleCamera,
-        "data-avatar-control": "camera",
-        "data-avatar-enabled": isCameraEnabled,
-        "aria-label": isCameraEnabled ? "Turn off camera" : "Turn on camera",
-        children: cameraIcon
-      }
-    ),
-    showScreenShare && /* @__PURE__ */ jsx(
-      TrackToggle,
-      {
-        source: Track.Source.ScreenShare,
-        showIcon: false,
-        "data-avatar-control": "screen-share",
-        "data-avatar-enabled": isScreenShareEnabled,
-        "aria-label": "Toggle screen share",
-        children: screenShareIcon
-      }
-    ),
-    showEndCall && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: session.end,
-        "data-avatar-control": "end-call",
-        "data-avatar-enabled": true,
-        "aria-label": "End call",
-        children: phoneIcon
-      }
-    )
+    showScreenShare && isScreenShareEnabled && /* @__PURE__ */ jsxs("div", { "data-avatar-share-indicator": "", "aria-live": "polite", children: [
+      /* @__PURE__ */ jsx("span", { "data-avatar-share-label": "", children: "You're sharing your screen" }),
+      /* @__PURE__ */ jsx("div", { "data-avatar-share-actions": "", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleStopScreenShare,
+          "data-avatar-share-action": "stop",
+          children: "Stop"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { "data-avatar-controls": "", children: [
+      showMicrophone && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: toggleMic,
+          "data-avatar-control": "microphone",
+          "data-avatar-enabled": isMicEnabled,
+          "aria-label": isMicEnabled ? "Mute microphone" : "Unmute microphone",
+          children: microphoneIcon
+        }
+      ),
+      showCamera && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: toggleCamera,
+          "data-avatar-control": "camera",
+          "data-avatar-enabled": isCameraEnabled,
+          "aria-label": isCameraEnabled ? "Turn off camera" : "Turn on camera",
+          children: cameraIcon
+        }
+      ),
+      showScreenShare && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: toggleScreenShare,
+          "data-avatar-control": "screen-share",
+          "data-avatar-enabled": isScreenShareEnabled,
+          "aria-label": isScreenShareEnabled ? "Stop sharing screen" : "Share screen",
+          children: screenShareIcon
+        }
+      ),
+      showEndCall && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: session.end,
+          "data-avatar-control": "end-call",
+          "data-avatar-enabled": true,
+          "aria-label": "End call",
+          children: phoneIcon
+        }
+      )
+    ] })
   ] });
 }
 var microphoneIcon = /* @__PURE__ */ jsxs(
   "svg",
   {
-    width: "20",
-    height: "20",
+    width: "16",
+    height: "16",
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
@@ -585,8 +656,8 @@ var microphoneIcon = /* @__PURE__ */ jsxs(
 var cameraIcon = /* @__PURE__ */ jsxs(
   "svg",
   {
-    width: "20",
-    height: "20",
+    width: "16",
+    height: "16",
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
@@ -603,8 +674,8 @@ var cameraIcon = /* @__PURE__ */ jsxs(
 var screenShareIcon = /* @__PURE__ */ jsxs(
   "svg",
   {
-    width: "20",
-    height: "20",
+    width: "16",
+    height: "16",
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
@@ -613,17 +684,19 @@ var screenShareIcon = /* @__PURE__ */ jsxs(
     strokeLinejoin: "round",
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ jsx("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }),
-      /* @__PURE__ */ jsx("line", { x1: "8", x2: "16", y1: "21", y2: "21" }),
-      /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "17", y2: "21" })
+      /* @__PURE__ */ jsx("path", { d: "M13 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 21h8" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 17v4" }),
+      /* @__PURE__ */ jsx("path", { d: "m17 8 5-5" }),
+      /* @__PURE__ */ jsx("path", { d: "M17 3h5v5" })
     ]
   }
 );
 var phoneIcon = /* @__PURE__ */ jsx(
   "svg",
   {
-    width: "20",
-    height: "20",
+    width: "16",
+    height: "16",
     viewBox: "8 14 24 12",
     fill: "currentColor",
     "aria-hidden": "true",