hanc-webrtc-widgets 2.1.9 → 2.1.11

package/dist/hanc-webrtc-widgets.es.js

@@ -17103,25 +17103,28 @@ class Ed extends EventTarget {
         );
       }
       const { token: r, url: a, room_name: o, user_identity: c } = await s.json();
-      if (this.roomName = o, this.userIdentity = c, await n.connect(a, r), t)
-        try {
-          await n.localParticipant.setMicrophoneEnabled(!0), this.microphoneEnabled = !0, this.dispatchEvent(new CustomEvent("microphone-enabled")), t.getTracks().forEach((l) => l.stop()), setTimeout(() => {
-            const l = Array.from(n.localParticipant.audioTrackPublications.values()).find((d) => d.kind === "audio");
-            if (l != null && l.track) {
-              const d = l.track.mediaStreamTrack;
-              d && this.dispatchEvent(
-                new CustomEvent("local-audio-track", {
-                  detail: d
-                })
-              );
+      this.roomName = o, this.userIdentity = c, await n.connect(a, r), this.updateStatus("connected"), this.isReady = !0, requestAnimationFrame(() => {
+        setTimeout(async () => {
+          if (t)
+            try {
+              await n.localParticipant.setMicrophoneEnabled(!0), this.microphoneEnabled = !0, this.dispatchEvent(new CustomEvent("microphone-enabled")), t.getTracks().forEach((l) => l.stop()), setTimeout(() => {
+                const l = Array.from(n.localParticipant.audioTrackPublications.values()).find((d) => d.kind === "audio");
+                if (l != null && l.track) {
+                  const d = l.track.mediaStreamTrack;
+                  d && this.dispatchEvent(
+                    new CustomEvent("local-audio-track", {
+                      detail: d
+                    })
+                  );
+                }
+              }, 100);
+            } catch (l) {
+              console.warn("Could not enable microphone on connect:", l), this.microphoneEnabled = !1, this.dispatchEvent(new CustomEvent("microphone-disabled"));
             }
-          }, 100);
-        } catch (l) {
-          console.warn("Could not enable microphone on connect:", l), this.microphoneEnabled = !1, this.dispatchEvent(new CustomEvent("microphone-disabled"));
-        }
-      else
-        this.microphoneEnabled = !1, this.dispatchEvent(new CustomEvent("microphone-disabled"));
-      this.updateStatus("connected"), this.isReady = !0, this.dispatchEvent(
+          else
+            this.microphoneEnabled = !1, this.dispatchEvent(new CustomEvent("microphone-disabled"));
+        }, 50);
+      }), this.dispatchEvent(
         new CustomEvent("room-connected", {
           detail: { roomName: o, identity: c }
         })
@@ -17252,15 +17255,16 @@ class Ed extends EventTarget {
       return;
     }
     this.updateStatus("disconnecting");
-    try {
-      await this.room.disconnect(), this.room = null, this.updateStatus("disconnected"), this.connectedParticipants = [], this.microphoneEnabled = !1, this.audioPlaybackPrompt = !1, this.isReady = !1, this.dispatchEvent(new CustomEvent("call-ended"));
-    } catch (e) {
-      this.error = `Error ending call: ${e instanceof Error ? e.message : String(e)}`, this.updateStatus("error"), this.dispatchEvent(
-        new CustomEvent("error", {
-          detail: { error: this.error }
-        })
-      );
-    }
+    const e = this.room;
+    this.room = null, this.connectedParticipants = [], this.microphoneEnabled = !1, this.audioPlaybackPrompt = !1, this.isReady = !1, this.updateStatus("disconnected"), this.dispatchEvent(new CustomEvent("call-ended")), requestAnimationFrame(() => {
+      setTimeout(async () => {
+        try {
+          await e.disconnect();
+        } catch (t) {
+          console.warn("Error during room disconnect:", t);
+        }
+      }, 0);
+    });
   }
 }
 /**
@@ -38188,95 +38192,44 @@ class zd {
     return o.gain.setValueAtTime(0, n), o.gain.linearRampToValueAtTime(this.config.volume, n + c), o.gain.linearRampToValueAtTime(this.config.volume * d, n + c + l), o.gain.setValueAtTime(this.config.volume * d, n + s - u), o.gain.linearRampToValueAtTime(0, n + s), a.connect(o), { oscillator: a, gain: o };
   }
   /**
-   * Play ascending melodic sound for call start
-   * C4 → E4 → G4 (C major chord arpeggio)
+   * Play pleasant notification sound for call start
+   * Two-tone ascending melody like messenger notifications
    */
   async playCallStartSound() {
     const e = await this.ensureContext();
     if (!e || typeof e.createGain != "function") return;
     const t = e.currentTime, n = e.createGain();
     n.gain.setValueAtTime(1, t), n.connect(e.destination);
-    const s = [
-      { freq: 261.63, start: 0, duration: 0.5 },
-      // C4
-      { freq: 329.63, start: 0.15, duration: 0.5 },
-      // E4
-      { freq: 392, start: 0.3, duration: 0.6 },
-      // G4
-      { freq: 523.25, start: 0.5, duration: 0.8 }
-      // C5 (octave up)
-    ], r = [];
-    s.forEach((a) => {
-      const { oscillator: o, gain: c } = this.createTone(
-        e,
-        a.freq,
-        t + a.start,
-        a.duration,
-        "sine"
-      );
-      c.connect(n), o.start(t + a.start), o.stop(t + a.start + a.duration), r.push(o);
-      const { oscillator: l, gain: d } = this.createTone(
-        e,
-        a.freq * 2,
-        // Octave up
-        t + a.start,
-        a.duration,
-        "triangle"
-      );
-      d.gain.setValueAtTime(d.gain.value * 0.3, t), d.connect(n), l.start(t + a.start), l.stop(t + a.start + a.duration), r.push(l);
-    }), setTimeout(() => {
-      r.forEach((a) => {
-        try {
-          a.disconnect();
-        } catch {
-        }
-      });
-    }, 2e3);
+    const { oscillator: s, gain: r } = this.createTone(e, 880, t, 0.12, "sine");
+    r.connect(n), s.start(t), s.stop(t + 0.12);
+    const { oscillator: a, gain: o } = this.createTone(e, 1046, t + 0.08, 0.15, "sine");
+    o.connect(n), a.start(t + 0.08), a.stop(t + 0.23), setTimeout(() => {
+      try {
+        s.disconnect();
+      } catch {
+      }
+      try {
+        a.disconnect();
+      } catch {
+      }
+    }, 300);
   }
   /**
-   * Play descending melodic sound for call end
-   * G4 → E4 → C4 (descending C major arpeggio)
+   * Play gentle descending sound for call end
+   * Single soft tone
    */
   async playCallEndSound() {
     const e = await this.ensureContext();
     if (!e || typeof e.createGain != "function") return;
     const t = e.currentTime, n = e.createGain();
     n.gain.setValueAtTime(1, t), n.connect(e.destination);
-    const s = [
-      { freq: 523.25, start: 0, duration: 0.4 },
-      // C5
-      { freq: 392, start: 0.12, duration: 0.4 },
-      // G4
-      { freq: 329.63, start: 0.24, duration: 0.5 },
-      // E4
-      { freq: 261.63, start: 0.4, duration: 0.7 }
-      // C4
-    ], r = [];
-    s.forEach((a) => {
-      const { oscillator: o, gain: c } = this.createTone(
-        e,
-        a.freq,
-        t + a.start,
-        a.duration,
-        "sine"
-      );
-      c.connect(n), o.start(t + a.start), o.stop(t + a.start + a.duration), r.push(o);
-      const { oscillator: l, gain: d } = this.createTone(
-        e,
-        a.freq * 2,
-        t + a.start,
-        a.duration,
-        "triangle"
-      );
-      d.gain.setValueAtTime(d.gain.value * 0.25, t), d.connect(n), l.start(t + a.start), l.stop(t + a.start + a.duration), r.push(l);
-    }), setTimeout(() => {
-      r.forEach((a) => {
-        try {
-          a.disconnect();
-        } catch {
-        }
-      });
-    }, 1500);
+    const { oscillator: s, gain: r } = this.createTone(e, 660, t, 0.2, "sine");
+    r.connect(n), s.start(t), s.stop(t + 0.2), setTimeout(() => {
+      try {
+        s.disconnect();
+      } catch {
+      }
+    }, 250);
   }
   /**
    * Update configuration
@@ -38614,23 +38567,29 @@ let gt = class extends ps {
     }, this.handleMicrophoneDisabled = () => {
       this.microphoneEnabled = !1;
     }, this.handleStatusChange = (i) => {
-      var t, n, s, r, a, o, c;
+      var t, n, s, r, a;
       switch (i.detail) {
         case "connecting":
           this.callStatus = "connecting";
           break;
         case "connected":
-          this.callStatus = "connected", (t = this.orbRenderer) == null || t.setActive(!0), this.startRealAudioLoop(), (n = this.soundManager) == null || n.playCallStartSound(), this.dispatchEvent(
+          this.callStatus = "connected", (t = this.orbRenderer) == null || t.setActive(!0), this.startRealAudioLoop(), setTimeout(() => {
+            var o;
+            (o = this.soundManager) == null || o.playCallStartSound();
+          }, 300), this.dispatchEvent(
             new Event("call-start", { bubbles: !0, composed: !0 })
           );
           break;
         case "disconnected":
-          this.callStatus = "idle", (s = this.orbRenderer) == null || s.setActive(!1), (r = this.audioAnalyzer) == null || r.disconnect(), this.startIdleAnimation(), (a = this.soundManager) == null || a.playCallEndSound(), this.dispatchEvent(
+          this.callStatus = "idle", (n = this.orbRenderer) == null || n.setActive(!1), (s = this.audioAnalyzer) == null || s.disconnect(), this.startIdleAnimation(), setTimeout(() => {
+            var o;
+            (o = this.soundManager) == null || o.playCallEndSound();
+          }, 150), this.dispatchEvent(
             new Event("call-end", { bubbles: !0, composed: !0 })
           );
           break;
         case "error":
-          this.callStatus = "error", (o = this.orbRenderer) == null || o.setActive(!1), (c = this.audioAnalyzer) == null || c.disconnect(), setTimeout(() => {
+          this.callStatus = "error", (r = this.orbRenderer) == null || r.setActive(!1), (a = this.audioAnalyzer) == null || a.disconnect(), setTimeout(() => {
             this.callStatus === "error" && (this.callStatus = "idle", this.startIdleAnimation());
           }, 3e3);
           break;
@@ -39120,23 +39079,29 @@ let vt = class extends ps {
     }, this.handleMicrophoneDisabled = () => {
       this.microphoneEnabled = !1;
     }, this.handleStatusChange = (i) => {
-      var t, n, s, r, a, o, c;
+      var t, n, s, r, a;
       switch (i.detail) {
         case "connecting":
           this.callStatus = "connecting";
           break;
         case "connected":
-          this.callStatus = "connected", (t = this.orbRenderer) == null || t.setActive(!0), this.startRealAudioLoop(), (n = this.soundManager) == null || n.playCallStartSound(), this.dispatchEvent(
+          this.callStatus = "connected", (t = this.orbRenderer) == null || t.setActive(!0), this.startRealAudioLoop(), setTimeout(() => {
+            var o;
+            (o = this.soundManager) == null || o.playCallStartSound();
+          }, 300), this.dispatchEvent(
             new Event("call-start", { bubbles: !0, composed: !0 })
           );
           break;
         case "disconnected":
-          this.callStatus = "idle", (s = this.orbRenderer) == null || s.setActive(!1), (r = this.audioAnalyzer) == null || r.disconnect(), this.startIdleAnimation(), (a = this.soundManager) == null || a.playCallEndSound(), this.dispatchEvent(
+          this.callStatus = "idle", (n = this.orbRenderer) == null || n.setActive(!1), (s = this.audioAnalyzer) == null || s.disconnect(), this.startIdleAnimation(), setTimeout(() => {
+            var o;
+            (o = this.soundManager) == null || o.playCallEndSound();
+          }, 150), this.dispatchEvent(
             new Event("call-end", { bubbles: !0, composed: !0 })
           );
           break;
         case "error":
-          this.callStatus = "error", (o = this.orbRenderer) == null || o.setActive(!1), (c = this.audioAnalyzer) == null || c.disconnect(), setTimeout(() => {
+          this.callStatus = "error", (r = this.orbRenderer) == null || r.setActive(!1), (a = this.audioAnalyzer) == null || a.disconnect(), setTimeout(() => {
             this.callStatus === "error" && (this.callStatus = "idle", this.startIdleAnimation());
           }, 3e3);
           break;
@@ -39610,23 +39575,29 @@ let _t = class extends ps {
     }, this.handleMicrophoneDisabled = () => {
       this.microphoneEnabled = !1;
     }, this.handleStatusChange = (i) => {
-      var t, n, s, r, a, o, c;
+      var t, n, s, r, a;
       switch (i.detail) {
         case "connecting":
           this.callStatus = "connecting";
           break;
         case "connected":
-          this.callStatus = "connected", (t = this.orbRenderer) == null || t.setActive(!0), this.startRealAudioLoop(), (n = this.soundManager) == null || n.playCallStartSound(), this.dispatchEvent(
+          this.callStatus = "connected", (t = this.orbRenderer) == null || t.setActive(!0), this.startRealAudioLoop(), setTimeout(() => {
+            var o;
+            (o = this.soundManager) == null || o.playCallStartSound();
+          }, 300), this.dispatchEvent(
             new Event("call-start", { bubbles: !0, composed: !0 })
           );
           break;
         case "disconnected":
-          this.callStatus = "idle", (s = this.orbRenderer) == null || s.setActive(!1), (r = this.audioAnalyzer) == null || r.disconnect(), this.startIdleAnimation(), (a = this.soundManager) == null || a.playCallEndSound(), this.dispatchEvent(
+          this.callStatus = "idle", (n = this.orbRenderer) == null || n.setActive(!1), (s = this.audioAnalyzer) == null || s.disconnect(), this.startIdleAnimation(), setTimeout(() => {
+            var o;
+            (o = this.soundManager) == null || o.playCallEndSound();
+          }, 150), this.dispatchEvent(
             new Event("call-end", { bubbles: !0, composed: !0 })
           );
           break;
         case "error":
-          this.callStatus = "error", (o = this.orbRenderer) == null || o.setActive(!1), (c = this.audioAnalyzer) == null || c.disconnect(), setTimeout(() => {
+          this.callStatus = "error", (r = this.orbRenderer) == null || r.setActive(!1), (a = this.audioAnalyzer) == null || a.disconnect(), setTimeout(() => {
             this.callStatus === "error" && (this.callStatus = "idle", this.startIdleAnimation());
           }, 3e3);
           break;
@@ -39837,23 +39808,22 @@ let _t = class extends ps {
         }
 
         .microphone-indicator {
-          position: absolute;
-          top: -4px;
-          right: -4px;
-          width: 20px;
-          height: 20px;
-          background: rgba(220, 38, 38, 0.95);
-          border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
+          width: 24px;
+          height: 24px;
+          background: rgba(220, 38, 38, 0.95);
+          border-radius: 50%;
           box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
-          border: 2px solid rgba(255, 255, 255, 0.95);
           pointer-events: none;
           opacity: 0;
-          transform: scale(1);
+          transform: scale(0.8);
           transition: opacity 0.3s ease, transform 0.3s ease;
           will-change: opacity, transform;
+          margin-left: -8px;
+          margin-right: 8px;
+          flex-shrink: 0;
         }
 
         .microphone-indicator.visible {
@@ -39862,8 +39832,8 @@ let _t = class extends ps {
         }
 
         .microphone-indicator svg {
-          width: 12px;
-          height: 12px;
+          width: 14px;
+          height: 14px;
           color: white;
         }
       </style>
@@ -39879,34 +39849,33 @@ let _t = class extends ps {
           class="orb-container"
           part="orb-container"
           ${sd(this.orbContainerRef)}
-        >
-          ${this.callStatus === "connected" && !this.microphoneEnabled ? Zt`
-                <div class="microphone-indicator visible">
-                  <svg viewBox="0 0 24 24" fill="none">
-                    <path
-                      d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"
-                      fill="currentColor"
-                    />
-                    <path
-                      d="M19 10v2a7 7 0 0 1-14 0v-2"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                    <line
-                      x1="1"
-                      y1="1"
-                      x2="23"
-                      y2="23"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                    />
-                  </svg>
-                </div>
-              ` : ""}
-        </div>
+        ></div>
+        ${this.callStatus === "connected" && !this.microphoneEnabled ? Zt`
+              <div class="microphone-indicator visible">
+                <svg viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M19 10v2a7 7 0 0 1-14 0v-2"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <line
+                    x1="1"
+                    y1="1"
+                    x2="23"
+                    y2="23"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </div>
+            ` : ""}
         <span class="pill-text">${this.buttonText}</span>
         ${this.callStatus !== "idle" ? Zt`<span class="icon-wrapper">${this.getButtonIcon()}</span>` : ""}
       </button>