@thunderphone/widget 0.3.1 → 0.4.0

package/dist/mount.global.js

@@ -1371,11 +1371,11 @@ var ThunderPhone = (() => {
             var dispatcher = resolveDispatcher();
             return dispatcher.useReducer(reducer, initialArg, init);
           }
-          function useRef3(initialValue) {
+          function useRef4(initialValue) {
             var dispatcher = resolveDispatcher();
             return dispatcher.useRef(initialValue);
           }
-          function useEffect4(create, deps) {
+          function useEffect5(create, deps) {
             var dispatcher = resolveDispatcher();
             return dispatcher.useEffect(create, deps);
           }
@@ -2158,14 +2158,14 @@ var ThunderPhone = (() => {
           exports.useContext = useContext2;
           exports.useDebugValue = useDebugValue;
           exports.useDeferredValue = useDeferredValue;
-          exports.useEffect = useEffect4;
+          exports.useEffect = useEffect5;
           exports.useId = useId;
           exports.useImperativeHandle = useImperativeHandle;
           exports.useInsertionEffect = useInsertionEffect;
           exports.useLayoutEffect = useLayoutEffect;
           exports.useMemo = useMemo2;
           exports.useReducer = useReducer2;
-          exports.useRef = useRef3;
+          exports.useRef = useRef4;
           exports.useState = useState4;
           exports.useSyncExternalStore = useSyncExternalStore;
           exports.useTransition = useTransition;
@@ -57448,25 +57448,32 @@ var ThunderPhone = (() => {
       const handleDisconnect = () => onDisconnected();
       const attachTrack = (track, _pub, _participant) => {
         if (track.kind === Track.Kind.Audio && audioRef.current) {
-          const stream = new MediaStream([track.mediaStreamTrack]);
-          audioRef.current.srcObject = stream;
-          audioRef.current.play().catch(() => {
-          });
+          const existing = audioRef.current.srcObject;
+          if (existing) {
+            existing.addTrack(track.mediaStreamTrack);
+          } else {
+            audioRef.current.srcObject = new MediaStream([track.mediaStreamTrack]);
+            audioRef.current.play().catch(() => {
+            });
+          }
         }
       };
       room.on(RoomEvent.ParticipantConnected, handleParticipantConnected);
       room.on(RoomEvent.Disconnected, handleDisconnect);
       room.on(RoomEvent.TrackSubscribed, attachTrack);
+      const initialTracks = [];
       for (const participant of room.remoteParticipants.values()) {
         for (const pub of participant.trackPublications.values()) {
-          if (pub.track && pub.isSubscribed && pub.track.kind === Track.Kind.Audio && audioRef.current) {
-            const stream = new MediaStream([pub.track.mediaStreamTrack]);
-            audioRef.current.srcObject = stream;
-            audioRef.current.play().catch(() => {
-            });
+          if (pub.track && pub.isSubscribed && pub.track.kind === Track.Kind.Audio) {
+            initialTracks.push(pub.track.mediaStreamTrack);
           }
         }
       }
+      if (initialTracks.length > 0 && audioRef.current) {
+        audioRef.current.srcObject = new MediaStream(initialTracks);
+        audioRef.current.play().catch(() => {
+        });
+      }
       return () => {
         room.off(RoomEvent.ParticipantConnected, handleParticipantConnected);
         room.off(RoomEvent.Disconnected, handleDisconnect);
@@ -57506,11 +57513,64 @@ var ThunderPhone = (() => {
   }
 
   // src/useThunderPhone.ts
+  var DEFAULT_RINGTONE_URL = "https://cdn.thunderphone.com/widget/assets/ringtone-default.mp3";
+  function resolveRingtoneUrl(ringtone) {
+    if (ringtone === true || ringtone === "default") return DEFAULT_RINGTONE_URL;
+    if (typeof ringtone === "string" && ringtone.length > 0) return ringtone;
+    return null;
+  }
   function useThunderPhone(opts) {
     const [state, setState] = (0, import_react3.useState)("idle");
     const [session, setSession] = (0, import_react3.useState)(null);
     const [muted, setMuted] = (0, import_react3.useState)(false);
     const [error, setError] = (0, import_react3.useState)();
+    const ringtoneUrl = resolveRingtoneUrl(opts.ringtone);
+    const ringtoneRef = (0, import_react3.useRef)(null);
+    (0, import_react3.useEffect)(() => {
+      if (!ringtoneUrl) {
+        ringtoneRef.current = null;
+        return;
+      }
+      const audio2 = new Audio(ringtoneUrl);
+      audio2.loop = true;
+      audio2.preload = "auto";
+      audio2.volume = 1;
+      ringtoneRef.current = audio2;
+      return () => {
+        audio2.pause();
+        audio2.src = "";
+        ringtoneRef.current = null;
+      };
+    }, [ringtoneUrl]);
+    (0, import_react3.useEffect)(() => {
+      const audio2 = ringtoneRef.current;
+      if (!audio2) return;
+      let fadeInterval;
+      if (state === "connecting") {
+        audio2.currentTime = 0;
+        audio2.volume = 1;
+        audio2.play().catch(() => {
+        });
+      } else {
+        if (!audio2.paused) {
+          fadeInterval = setInterval(() => {
+            const next = audio2.volume - 0.1;
+            if (next <= 0) {
+              clearInterval(fadeInterval);
+              fadeInterval = void 0;
+              audio2.pause();
+              audio2.currentTime = 0;
+              audio2.volume = 1;
+            } else {
+              audio2.volume = next;
+            }
+          }, 20);
+        }
+      }
+      return () => {
+        if (fadeInterval) clearInterval(fadeInterval);
+      };
+    }, [state]);
     const handleDisconnect = (0, import_react3.useCallback)(() => {
       setState("disconnected");
       setSession(null);
@@ -57526,6 +57586,13 @@ var ThunderPhone = (() => {
       if (state === "connecting" || state === "connected") return;
       setState("connecting");
       setError(void 0);
+      navigator.mediaDevices.getUserMedia({ audio: true }).then(
+        (stream) => {
+          stream.getTracks().forEach((t) => t.stop());
+        },
+        () => {
+        }
+      );
       try {
         const sess = await createWidgetSession(opts.apiKey, opts.agentId, opts.apiBase);
         setSession(sess);
@@ -57579,9 +57646,10 @@ var ThunderPhone = (() => {
     onConnect,
     onDisconnect,
     onError,
-    className
+    className,
+    ringtone
   }) {
-    const phone = useThunderPhone({ apiKey, agentId, apiBase, onConnect, onDisconnect, onError });
+    const phone = useThunderPhone({ apiKey, agentId, apiBase, onConnect, onDisconnect, onError, ringtone });
     const handleClick = () => {
       if (phone.state === "connected") {
         phone.disconnect();