@snapcall/stream-ui 1.3.0 → 1.4.0

package/dist/stream-ui.esm.js

@@ -9,6 +9,7 @@ import {v4 as $3Sbms$v4} from "uuid";
 import {WebSocketTransport as $3Sbms$WebSocketTransport, Peer as $3Sbms$Peer} from "protoo-client";
 import {Device as $3Sbms$Device} from "mediasoup-client";
 import {setTag as $3Sbms$setTag, addBreadcrumb as $3Sbms$addBreadcrumb, captureException as $3Sbms$captureException} from "@sentry/browser";
+import {Producer as $3Sbms$Producer} from "mediasoup-client/lib/Producer";
 import {toCanvas as $3Sbms$toCanvas} from "qrcode";
 
 
@@ -509,6 +510,7 @@ const $15ddac3121cc3a5d$export$4a210166cc9cb64b = async (src)=>{
 
 
 
+
 const $c31e3fb4360572af$export$818d60b2e626da0c = {
     WEBRTC_FAILED: "WRTC1",
     WEBRTC_RECOVER_ERROR: "WRTC2",
@@ -523,7 +525,8 @@ const $c31e3fb4360572af$export$d21ffcc5eb136bfa = {
         },
         height: {
             ideal: 240
-        }
+        },
+        qualityIndex: 3
     },
     vga: {
         width: {
@@ -531,7 +534,8 @@ const $c31e3fb4360572af$export$d21ffcc5eb136bfa = {
         },
         height: {
             ideal: 480
-        }
+        },
+        qualityIndex: 2
     },
     hd: {
         width: {
@@ -539,7 +543,8 @@ const $c31e3fb4360572af$export$d21ffcc5eb136bfa = {
         },
         height: {
             ideal: 720
-        }
+        },
+        qualityIndex: 1
     }
 };
 const $c31e3fb4360572af$var$WEBCAM_SIMULCAST_ENCODINGS = [
@@ -566,19 +571,12 @@ const $c31e3fb4360572af$var$SCREEN_SHARING_SIMULCAST_ENCODINGS = [
         maxBitrate: 6000000
     }, 
 ];
-const $c31e3fb4360572af$var$fetchAgentInfo = async ({ apiKey: apiKey , email: email  })=>{
-    const apiURL = "https://api.snapcall.io/v2";
-    const agent = await fetch(`${apiURL}/agents/${email}`, {
-        method: "get",
-        headers: {
-            Authorization: `Bearer ${apiKey}`
-        }
-    }).then((response)=>{
-        if (response.ok) return response.json();
-        throw new Error("Invalid agent info");
-    });
-    return agent;
-};
+class $c31e3fb4360572af$var$SnapcallEvent extends CustomEvent {
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+    constructor(name, data){
+        super(name, data);
+    }
+}
 const $c31e3fb4360572af$var$StreamerEventTargetType = EventTarget;
 class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$StreamerEventTargetType {
     pendingDeviceRequest = {};
@@ -587,14 +585,19 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     constructor(){
         super();
         navigator.mediaDevices.addEventListener("devicechange", ()=>this.onDeviceChange());
-        this.iceServers = [
-            {
-                urls: "turns:t.snapcall.io:443?transport=tcp,turns:t-2.snapcall.io:443?transport=tcp"?.split(",") || [],
-                username: "test",
-                credential: "test",
-                credentialType: "password"
-            }, 
-        ];
+        this.config = {
+            apiUrl: String("https://api.snapcall.io/v2"),
+            streamerServer: String("wss://g.snapcall.io/stream"),
+            streamerApi: String("https://g.snapcall.io/stream"),
+            iceServers: [
+                {
+                    urls: "turns:t.snapcall.io:443?transport=tcp,turns:t2.snapcall.io:443?transport=tcp"?.split(",") || [],
+                    username: "test",
+                    credential: "test",
+                    credentialType: "password"
+                }, 
+            ]
+        };
         this.peers = new Map();
         this.consumers = new Map();
         this.webcams = new Map();
@@ -615,6 +618,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         this.screenshareProducer = null;
         this.customMessages = new Map();
         this.audioRenderers = {};
+        this.profile = {};
     }
     getState() {
         const peers = [];
@@ -640,14 +644,14 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             });
             peers.push({
                 peerId: key,
-                displayName: peer.displayName,
+                profile: peer.profile,
                 deviceState: deviceState
             });
         });
         return {
             roomId: this.roomId,
             peerId: this.peerId,
-            displayName: this.displayName,
+            profile: this.profile,
             callId: undefined,
             deviceState: this.getDevicesState(),
             peers: peers
@@ -655,9 +659,10 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     }
     onStartSpeak() {
         if (this.micProducer && !this.micProducer.paused) {
-            const event = new CustomEvent("localStartSpeak", {
+            const event = new $c31e3fb4360572af$var$SnapcallEvent("localStartSpeak", {
                 cancelable: true,
-                bubbles: true
+                bubbles: true,
+                detail: {}
             });
             this.dispatchEvent(event);
             this.protoo.notify("startSpeak");
@@ -665,13 +670,15 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     }
     onStopSpeak() {
         if (this.micProducer && !this.micProducer.paused) {
-            const event = new CustomEvent("localStopSpeak");
+            const event = new $c31e3fb4360572af$var$SnapcallEvent("localStopSpeak", {
+                detail: {}
+            });
             this.dispatchEvent(event);
             this.protoo.notify("stopSpeak");
         }
     }
     onCriticalError(code) {
-        const event = new CustomEvent("criticalError", {
+        const event = new $c31e3fb4360572af$var$SnapcallEvent("criticalError", {
             detail: {
                 code: code
             }
@@ -679,7 +686,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         this.dispatchEvent(event);
     }
     async generateToken(bid) {
-        const url = "https://g.snapcall.io/stream";
+        const url = this.config.streamerApi;
         const { token: token  } = await fetch(`${url}/stream`, {
             method: "post",
             headers: {
@@ -698,7 +705,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         if (!this.peerId) this.peerId = (0, $3Sbms$v4)();
         let url;
         try {
-            const { instanceId: instanceId  } = await fetch(`${"https://g.snapcall.io/stream"}/instance/${this.roomId}`, {
+            const { instanceId: instanceId  } = await fetch(`${this.config.streamerApi}/instance/${this.roomId}`, {
                 method: "get",
                 headers: {
                     "Content-Type": "application/json"
@@ -707,9 +714,11 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 if (response.ok) return response.json();
                 throw new Error("Invalid room ID");
             });
-            url = `${"wss://g.snapcall.io/stream"}/${instanceId}/?roomId=${room}&peerId=${this.peerId}`;
+            url = `${this.config.streamerServer}/${instanceId}/?roomId=${room}&peerId=${this.peerId}`;
         } catch (roomError) {
-            const event = new CustomEvent("invalidRoom");
+            const event = new $c31e3fb4360572af$var$SnapcallEvent("invalidRoom", {
+                detail: {}
+            });
             this.dispatchEvent(event);
         }
         if (!url) throw new Error("Invalid socket URL");
@@ -735,17 +744,18 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         this.protoo.on("notification", async (notification)=>{
             console.log("notification", notification);
             if (notification.method === "newPeer") {
-                const { id: id , displayName: displayName  } = notification.data;
+                const { id: id , profile: profile  } = notification.data;
                 this.peers.set(id, {
                     id: id,
                     peerId: id,
-                    displayName: displayName,
+                    profile: profile,
                     producersData: []
                 });
-                const event = new CustomEvent("newPeer", {
+                const event = new $c31e3fb4360572af$var$SnapcallEvent("newPeer", {
                     detail: {
                         peerId: id,
-                        displayName: displayName
+                        displayName: profile.name,
+                        profile: profile
                     }
                 });
                 this.dispatchEvent(event);
@@ -765,7 +775,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                         consumerId: consumer.id
                     });
                 });
-                const event = new CustomEvent("peerClosed", {
+                const event = new $c31e3fb4360572af$var$SnapcallEvent("peerClosed", {
                     detail: {
                         peerId: peerId
                     }
@@ -778,39 +788,60 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 });
             } else if (notification.method === "displayName") {
                 const { peerId: peerId , displayName: displayName  } = notification.data;
-                const event = new CustomEvent("displayName", {
+                const event = new $c31e3fb4360572af$var$SnapcallEvent("displayName", {
+                    detail: {
+                        peerId: peerId,
+                        displayName: displayName,
+                        profile: {}
+                    }
+                });
+                this.dispatchEvent(event);
+            } else if (notification.method === "profile") {
+                const { peerId: peerId , profile: profile  } = notification.data;
+                const event = new CustomEvent("profileUpdate", {
                     detail: {
                         peerId: peerId,
-                        displayName: displayName
+                        profile: profile
                     }
                 });
                 this.dispatchEvent(event);
             } else if (notification.method === "requestDevice") {
                 this.pendingDeviceRequest[notification.data.requestId] = notification.data;
-                const event = new CustomEvent("requestDevice", {
+                const event = new $c31e3fb4360572af$var$SnapcallEvent("requestDevice", {
                     detail: notification.data
                 });
                 this.dispatchEvent(event);
             } else if (notification.method === "startSpeak") ;
             else if (notification.method === "stopSpeak") ;
             else if (notification.method === "producerPaused" || notification.method === "producerResumed") {
+                const { peerId: peerId , producerId: producerId , deviceType: deviceType  } = notification.data;
                 if (notification.data?.deviceType === "microphone") {
-                    const { peerId: peerId , producerId: producerId  } = notification.data;
                     const microphoneData = this.peers.get(peerId)?.producersData.find((ele)=>producerId === ele.producerId);
                     if (microphoneData) microphoneData.paused = notification.method === "producerPaused" ? true : false;
                 }
-                const event = new CustomEvent(notification.method, {
-                    detail: notification.data
+                let id = producerId;
+                for (let [, value] of Array.from(this.consumers.entries()))if (value.mediaSoupConsumer.producerId === producerId) {
+                    id = value.mediaSoupConsumer.id;
+                    break;
+                }
+                const eventName = notification.method === "producerPaused" ? "mediaPause" : "mediaResume";
+                const event = new $c31e3fb4360572af$var$SnapcallEvent(eventName, {
+                    detail: {
+                        mediaId: id,
+                        peerId: peerId,
+                        deviceType: deviceType,
+                        paused: notification.method === "producerPaused"
+                    }
                 });
                 this.dispatchEvent(event);
             } else if (notification.method === "requestDeviceResult") {
-                const event = new CustomEvent(notification.method, {
+                const event = new $c31e3fb4360572af$var$SnapcallEvent(notification.method, {
                     detail: notification.data
                 });
                 this.dispatchEvent(event);
             } else if (notification.method === "terminateRoom") {
                 this.release();
-                const event = new CustomEvent(notification.method, {
+                const event = new $c31e3fb4360572af$var$SnapcallEvent(notification.method, {
                     detail: notification.data
                 });
                 this.dispatchEvent(event);
@@ -835,7 +866,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                     const sortedChunks = message.chunks.sort((a, b)=>a.index - b.index);
                     const mergedChunks = sortedChunks.reduce((originalMessage, chunk)=>originalMessage + chunk.data, "");
                     const parsedEvent = JSON.parse(mergedChunks);
-                    const event = new CustomEvent("customMessage", {
+                    const event = new $c31e3fb4360572af$var$SnapcallEvent("customMessage", {
                         detail: {
                             ...notification.data,
                             event: parsedEvent
@@ -894,7 +925,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 role: "auto"
             },
             sctpParameters: transportInfo.sctpParameters,
-            iceServers: this.iceServers,
+            iceServers: this.config.iceServers,
             proprietaryConstraints: {
                 optional: [
                     {
@@ -1001,11 +1032,11 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         }
         // now we join
         if (this.joinOptions.apiKey && this.joinOptions.email) try {
-            const agentInfo = await $c31e3fb4360572af$var$fetchAgentInfo({
+            const agentInfo = await this.fetchAgentInfo({
                 apiKey: this.joinOptions.apiKey,
                 email: this.joinOptions.email
             });
-            if (agentInfo) this.dispatchEvent(new CustomEvent("agentIdentity", {
+            if (agentInfo) this.dispatchEvent(new $c31e3fb4360572af$var$SnapcallEvent("agentIdentity", {
                 detail: {
                     success: true,
                     email: this.joinOptions.email
@@ -1013,7 +1044,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             }));
         } catch (agentInfoError) {
             console.warn(agentInfoError);
-            this.dispatchEvent(new CustomEvent("agentIdentity", {
+            this.dispatchEvent(new $c31e3fb4360572af$var$SnapcallEvent("agentIdentity", {
                 detail: {
                     success: false
                 }
@@ -1031,7 +1062,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 }, 
             ]));
         const callId = await this.getCallId();
-        this.dispatchEvent(new CustomEvent("enterRoom", {
+        this.dispatchEvent(new $c31e3fb4360572af$var$SnapcallEvent("enterRoom", {
             detail: {
                 peerId: this.peerId,
                 peers: peers.map((peer)=>{
@@ -1045,6 +1076,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         }));
         console.log("peers", peers);
         if (this.joinOptions.displayName) await this.setDisplayName(this.joinOptions.displayName);
+        if (this.joinOptions.profile) await this.setProfile(this.joinOptions.profile);
         // Consume Peers
         peers.forEach((peer)=>{
             this.consumePeer({
@@ -1085,7 +1117,9 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         const producerId = this.micProducer?.id;
         this.micProducer?.close();
         this.micProducer = undefined;
-        const event = new CustomEvent("microphoneMute");
+        const event = new $c31e3fb4360572af$var$SnapcallEvent("microphoneMute", {
+            detail: {}
+        });
         this.dispatchEvent(event);
         await this.protoo.request("closeProducer", {
             producerId: producerId
@@ -1093,7 +1127,9 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     }
     async onDeviceChange() {
         console.log("detecting device change");
-        const deviceListChangeEvent = new CustomEvent("devicesListChange");
+        const deviceListChangeEvent = new $c31e3fb4360572af$var$SnapcallEvent("devicesListChange", {
+            detail: {}
+        });
         this.dispatchEvent(deviceListChangeEvent);
         if (!this.protoo.closed && this.micProducer) {
             const lists = await navigator.mediaDevices.enumerateDevices();
@@ -1120,7 +1156,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 }
                 console.log("detecting audio input change");
                 if (!this.audioInputDefaultDevice || this.audioInputDefaultDevice.label !== defaultDevice.label) {
-                    const event = new CustomEvent("defaultAudioDeviceChange", {
+                    const event = new $c31e3fb4360572af$var$SnapcallEvent("defaultAudioDeviceChange", {
                         detail: defaultDevice
                     });
                     this.audioInputDefaultDevice = defaultDevice;
@@ -1167,7 +1203,9 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             });
             this.micProducer = micProducer;
             this.muted = false;
-            const event = new CustomEvent("microphoneEnabled");
+            const event = new $c31e3fb4360572af$var$SnapcallEvent("microphoneEnabled", {
+                detail: {}
+            });
             this.dispatchEvent(event);
         }
     }
@@ -1179,7 +1217,9 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 producerId: this.micProducer?.id
             });
             this.muted = true;
-            const event = new CustomEvent("microphoneMute");
+            const event = new $c31e3fb4360572af$var$SnapcallEvent("microphoneMute", {
+                detail: {}
+            });
             this.dispatchEvent(event);
         }
     }
@@ -1191,7 +1231,9 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 producerId: this.micProducer.id
             });
             this.muted = false;
-            const event = new CustomEvent("microphoneUnmute");
+            const event = new $c31e3fb4360572af$var$SnapcallEvent("microphoneUnmute", {
+                detail: {}
+            });
             this.dispatchEvent(event);
         }
     }
@@ -1229,10 +1271,12 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     }
     endCall() {
         this.release();
-        const event = new CustomEvent("leaveRoom");
+        const event = new $c31e3fb4360572af$var$SnapcallEvent("leaveRoom", {
+            detail: {}
+        });
         this.dispatchEvent(event);
         const deprecatedEvent = new CustomEvent("snapcallEvent_callEnd");
-        this.dispatchEvent(deprecatedEvent);
+        window.dispatchEvent(deprecatedEvent);
     }
     terminateRoom() {
         this.protoo.request("terminateRoom");
@@ -1246,7 +1290,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         }
         if (this.webcams.size === 0) this.webcam.device = null;
         else if (!this.webcam.device) this.webcam.device = this.webcams.values().next().value;
-        const event = new CustomEvent("webcamsUpdate", {
+        const event = new $c31e3fb4360572af$var$SnapcallEvent("webcamsUpdate", {
             detail: {
                 numberOfAvailableWebcams: this.webcams.size
             }
@@ -1303,7 +1347,16 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             });
         }
     }
-    scaleVideo() {
+    scaleVideoMediasConstraintsParameter(scale) {
+        let videoResolution = $c31e3fb4360572af$export$d21ffcc5eb136bfa["hd"];
+        if (scale === 2) videoResolution = $c31e3fb4360572af$export$d21ffcc5eb136bfa["vga"];
+        else if (scale > 2) videoResolution = $c31e3fb4360572af$export$d21ffcc5eb136bfa["qvga"];
+        if (!this.webcam.resolution || $c31e3fb4360572af$export$d21ffcc5eb136bfa[this.webcam.resolution].qualityIndex >= videoResolution.qualityIndex) {
+            console.log(`scaling video by ${scale}`, videoResolution);
+            this.webcamProducer?.track?.applyConstraints(videoResolution);
+        }
+    }
+    scaleVideoEncodingsParameter() {
         try {
             let videoCount = 0;
             this.consumers.forEach((consumer)=>{
@@ -1319,10 +1372,12 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             if (videoCount >= 9) scale = {
                 scaleResolutionDownBy: 4
             };
+            if (!(0, $3Sbms$Producer).prototype.setRtpEncodingParameters) return this.scaleVideoMediasConstraintsParameter(scale.scaleResolutionDownBy);
             if (this.webcamProducer && !this.webcamProducer.closed) {
                 console.log(`scaling video by ${scale.scaleResolutionDownBy}`);
                 this.webcamProducer?.setRtpEncodingParameters?.(scale).catch((err)=>{
                     console.error("scaleResolutionDownBy not supported", err);
+                    this.scaleVideoMediasConstraintsParameter(scale.scaleResolutionDownBy);
                 });
             }
         } catch (error) {
@@ -1365,7 +1420,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             min: capabilities?.zoom?.min || 0,
             max: capabilities?.zoom?.max || 0
         };
-        const event = new CustomEvent("localVideoChange", {
+        const event = new $c31e3fb4360572af$var$SnapcallEvent("localVideoChange", {
             detail: {
                 camera: this.getCurrentWebcam()
             }
@@ -1407,14 +1462,14 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 deviceType: deviceType
             }
         });
-        this.scaleVideo();
+        this.scaleVideoEncodingsParameter();
         this.webcamProducer.on("transportclose", ()=>{
             this.webcamProducer = null;
         });
         this.webcamProducer.on("trackended", ()=>{
             this.disableVideo().catch(()=>{});
         });
-        const event = new CustomEvent("localVideoAvailable", {
+        const event = new $c31e3fb4360572af$var$SnapcallEvent("localVideoAvailable", {
             detail: {
                 camera: this.getCurrentWebcam()
             }
@@ -1455,7 +1510,9 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             producerId: this.webcamProducer.id
         });
         this.webcamProducer = null;
-        const event = new CustomEvent("localVideoUnavailable");
+        const event = new $c31e3fb4360572af$var$SnapcallEvent("localVideoUnavailable", {
+            detail: {}
+        });
         this.dispatchEvent(event);
     }
     async enableScreenshare() {
@@ -1498,7 +1555,9 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         this.screenshareProducer.on("trackended", ()=>{
             this.disableScreenshare().catch(()=>{});
         });
-        const event = new CustomEvent("screenshareEnabled");
+        const event = new $c31e3fb4360572af$var$SnapcallEvent("screenshareEnabled", {
+            detail: {}
+        });
         this.dispatchEvent(event);
     }
     async disableScreenshare() {
@@ -1509,7 +1568,9 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             });
             this.screenshareProducer = null;
         }
-        const event = new CustomEvent("screenshareDisabled");
+        const event = new $c31e3fb4360572af$var$SnapcallEvent("screenshareDisabled", {
+            detail: {}
+        });
         this.dispatchEvent(event);
     }
     onConsumerClose({ consumerId: consumerId  }) {
@@ -1522,19 +1583,21 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             });
             consumer.mediaSoupConsumer.close();
             this.consumers.delete(consumerId);
-            this.scaleVideo();
-            const event = new CustomEvent("consumerClose", {
+            this.scaleVideoEncodingsParameter();
+            const event = new $c31e3fb4360572af$var$SnapcallEvent("mediaStop", {
                 detail: {
-                    peerId: consumer.mediaSoupConsumer.appData.peerId,
-                    deviceType: consumer.deviceType
+                    mediaId: consumerId,
+                    peerId: String(consumer.mediaSoupConsumer.appData.peerId),
+                    deviceType: consumer.deviceType,
+                    paused: false
                 }
             });
             if (consumer.deviceType === "microphone") this.deleteAudioRenderer(consumerId);
             this.dispatchEvent(event);
         }
     }
-    requestVideo({ consumerId: consumerId , element: element  }) {
-        const consumer = this.consumers.get(consumerId);
+    requestVideo({ mediaId: mediaId , element: element  }) {
+        const consumer = this.consumers.get(mediaId);
         if (consumer) {
             const mediaStream = new MediaStream();
             mediaStream.onremovetrack = ()=>console.log("Remove Track");
@@ -1616,11 +1679,11 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 mediaSoupConsumer: consumer,
                 deviceType: deviceType
             });
-            this.scaleVideo();
-            const event = new CustomEvent("newConsumer", {
+            this.scaleVideoEncodingsParameter();
+            const event = new $c31e3fb4360572af$var$SnapcallEvent("mediaStart", {
                 detail: {
                     peerId: peerId,
-                    consumerId: consumer.id,
+                    mediaId: consumer.id,
                     deviceType: deviceType,
                     paused: paused
                 }
@@ -1643,13 +1706,27 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         }
     }
     async setDisplayName(displayName) {
-        this.displayName = displayName;
-        await this.protoo.request("setDisplayName", {
-            displayName: displayName
+        await this.setProfile({
+            name: displayName
         });
-        const event = new CustomEvent("selfDisplayName", {
+        const event = new $c31e3fb4360572af$var$SnapcallEvent("selfDisplayName", {
             detail: {
-                displayName: displayName
+                peerId: this.peerId,
+                displayName: this.profile?.name,
+                profile: this.profile
+            }
+        });
+        this.dispatchEvent(event);
+    }
+    async setProfile(profile) {
+        const newProfile = await this.protoo.request("setProfile", profile);
+        this.profile = {
+            ...newProfile
+        };
+        const event = new $c31e3fb4360572af$var$SnapcallEvent("selfProfileUpdate", {
+            detail: {
+                peerId: this.peerId,
+                profile: this.profile
             }
         });
         this.dispatchEvent(event);
@@ -1742,16 +1819,13 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     getCurrentWebcam() {
         return this.webcam;
     }
-    getWebcamsList() {
-        return this.webcams;
-    }
     async setWebcamResolution(resolution) {
         if (this.webcam.device) await this.switchWebcam({
             resolution: resolution
         });
         else {
             this.webcam.resolution = resolution;
-            const e = new CustomEvent("localVideoChange", {
+            const e = new $c31e3fb4360572af$var$SnapcallEvent("localVideoChange", {
                 detail: {
                     camera: this.getCurrentWebcam()
                 }
@@ -1788,6 +1862,25 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         });
         return data;
     }
+    async fetchAgentInfo({ apiKey: apiKey , email: email  }) {
+        const apiURL = this.config.apiUrl;
+        const agent = await fetch(`${apiURL}/agents/${email}`, {
+            method: "get",
+            headers: {
+                Authorization: `Bearer ${apiKey}`
+            }
+        }).then((response)=>{
+            if (response.ok) return response.json();
+            throw new Error("Invalid agent info");
+        });
+        return agent;
+    }
+    setConfig(config) {
+        this.config = {
+            ...this.config,
+            ...config
+        };
+    }
 }
 
 
@@ -1811,7 +1904,7 @@ let $2884da8a64948e35$export$96a9662a3eda31f6;
     StreamsReducerActionTypes1[StreamsReducerActionTypes1["UNMUTE"] = 5] = "UNMUTE";
     StreamsReducerActionTypes1[StreamsReducerActionTypes1["SET_HIGHLIGHTED_TILE"] = 6] = "SET_HIGHLIGHTED_TILE";
     StreamsReducerActionTypes1[StreamsReducerActionTypes1["UNSET_HIGHLIGHTED_TILE"] = 7] = "UNSET_HIGHLIGHTED_TILE";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["SET_STREAM_DISPLAY_NAME"] = 8] = "SET_STREAM_DISPLAY_NAME";
+    StreamsReducerActionTypes1[StreamsReducerActionTypes1["SET_STREAM_PROFILE"] = 8] = "SET_STREAM_PROFILE";
     StreamsReducerActionTypes1[StreamsReducerActionTypes1["SET_STREAM_SPEAKING"] = 9] = "SET_STREAM_SPEAKING";
 })($2884da8a64948e35$export$96a9662a3eda31f6 || ($2884da8a64948e35$export$96a9662a3eda31f6 = {}));
 const $2884da8a64948e35$export$7fc21eab2c971c9c = {
@@ -1843,7 +1936,7 @@ const $2884da8a64948e35$export$43fc78ab8758f39 = (state, action)=>{
             };
         case $2884da8a64948e35$export$96a9662a3eda31f6.DEVICE_UPDATE:
             {
-                const { streamId: streamId , consumerId: consumerId , device: device , available: available , paused: paused  } = action.payload;
+                const { streamId: streamId , mediaId: mediaId , device: device , available: available , paused: paused  } = action.payload;
                 return {
                     ...state,
                     streams: state.streams.map((stream)=>{
@@ -1852,7 +1945,7 @@ const $2884da8a64948e35$export$43fc78ab8758f39 = (state, action)=>{
                             if (device === "microphone") muted = paused;
                             return {
                                 ...stream,
-                                [device]: available ? consumerId : null,
+                                [device]: available ? mediaId : null,
                                 muted: muted
                             };
                         }
@@ -1892,13 +1985,13 @@ const $2884da8a64948e35$export$43fc78ab8758f39 = (state, action)=>{
                 ...state,
                 highlightedTile: null
             };
-        case $2884da8a64948e35$export$96a9662a3eda31f6.SET_STREAM_DISPLAY_NAME:
+        case $2884da8a64948e35$export$96a9662a3eda31f6.SET_STREAM_PROFILE:
             return {
                 ...state,
                 streams: state.streams.map((stream)=>{
                     if (stream.id === action.payload.streamId) return {
                         ...stream,
-                        displayName: action.payload.displayName
+                        profile: action.payload.profile
                     };
                     return stream;
                 })
@@ -3170,13 +3263,23 @@ const $7ec04c1818c68245$export$f6525863ef5a71a9 = (0, $3Sbms$styledcomponents).d
   align-items: center;
   width: 14px;
   height: 14px;
-  padding: 3px 4px;
   box-sizing: border-box;
   background-color: #2d2d2d;
   border-radius: 50px;
   font-size: 9px;
   font-weight: 700;
   line-height: 8px;
+
+  svg {
+    width: 8px;
+    height: 8px;
+  }
+`;
+const $7ec04c1818c68245$export$a7a74ab5cffd1455 = (0, $3Sbms$styledcomponents).img`
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  object-fit: cover;
 `;
 const $7ec04c1818c68245$export$f217faec90120a0c = (0, $3Sbms$styledcomponents).div`
   display: flex;
@@ -3255,11 +3358,6 @@ const $7ec04c1818c68245$export$a2930b41faa750f4 = (0, $3Sbms$styledcomponents).s
   line-height: 20px;
   color: #fff;
 `;
-const $7ec04c1818c68245$export$2d75367b6e042d67 = (0, $3Sbms$styledcomponents).img`
-  width: inherit;
-  height: inherit;
-  border-radius: inherit;
-`;
 const $7ec04c1818c68245$export$26fe7ec9351ff761 = (0, $3Sbms$styledcomponents).img`
   border: 2px solid #fff;
   border-radius: 8px;
@@ -3500,6 +3598,17 @@ const $6efc75079651494a$export$500c3c5544c37412 = (0, $3Sbms$styledcomponents)((
   font-weight: 700;
   line-height: 13px;
 `;
+const $6efc75079651494a$export$88248b9be937544a = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  line-height: 15px;
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+`;
 
 
 
@@ -3518,7 +3627,7 @@ const $a53a1c6f62ad0fcc$var$StreamTile = ({ stream: stream , width: width = 0 ,
     const { highlightedTile: highlightedTile  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
     const isSharingScreen = highlightedTile?.type === "screenshare" && highlightedTile.peerId === selfPeerId;
     const microphoneActive = stream.microphone && !stream.muted;
-    const showRequestDevice = !requestingDevice && hover && !highlightedTile && (!microphoneActive || !stream.webcam);
+    const showRequestDevice = !requestingDevice && hover && !highlightedTile && (!microphoneActive || !stream.webcam || !isSharingScreen);
     const tileWidth = `${width}px`;
     const tileHeight = `${height}px`;
     const videoMaxHeight = "100%";
@@ -3540,7 +3649,7 @@ const $a53a1c6f62ad0fcc$var$StreamTile = ({ stream: stream , width: width = 0 ,
     (0, $3Sbms$useEffect)(()=>{
         if (!videoElementRef.current) throw new Error("videoElementRef not available");
         if (stream.webcam && videoElementRef.current) (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestVideo({
-            consumerId: stream.webcam,
+            mediaId: stream.webcam,
             element: videoElementRef.current
         });
         else if (!stream.webcam) videoElementRef.current.srcObject = null;
@@ -3571,7 +3680,7 @@ const $a53a1c6f62ad0fcc$var$StreamTile = ({ stream: stream , width: width = 0 ,
                 setRequestingDevice(null);
                 if (result !== true) {
                     let message = "Your request has been declined.";
-                    if (stream.displayName) message = `${stream.displayName} has declined your request.`;
+                    if (stream.profile.name) message = `${stream.profile.name} has declined your request.`;
                     (0, $3Sbms$reacthottoast)(message, {
                         className: "error"
                     });
@@ -3584,7 +3693,7 @@ const $a53a1c6f62ad0fcc$var$StreamTile = ({ stream: stream , width: width = 0 ,
         };
     }, [
         stream.id,
-        stream.displayName
+        stream.profile
     ]);
     (0, $3Sbms$useEffect)(()=>{
         const onCustomMessage = async (event)=>{
@@ -3597,8 +3706,7 @@ const $a53a1c6f62ad0fcc$var$StreamTile = ({ stream: stream , width: width = 0 ,
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("customMessage", onCustomMessage);
         };
     }, [
-        stream.id,
-        stream.displayName
+        stream.id
     ]);
     return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $7ec04c1818c68245$export$798352b46783b18d), {
         onMouseEnter: onMouseEnter,
@@ -3678,24 +3786,25 @@ const $a53a1c6f62ad0fcc$var$StreamTile = ({ stream: stream , width: width = 0 ,
                 ]
             }),
             !requestingDevice && !showRequestDevice && !stream.webcam && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$f217faec90120a0c), {
-                children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $7ec04c1818c68245$export$6ddfb572d7b6d164), {
-                    children: [
-                        stream.displayName && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$a2930b41faa750f4), {
-                            children: stream.displayName.slice(0, 1).toUpperCase()
-                        }),
-                        !stream.displayName && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57da43088f4a416a$export$2e2bcd8739ae039), {})
-                    ]
+                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$6ddfb572d7b6d164), {
+                    children: stream.profile.image ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$a7a74ab5cffd1455), {
+                        src: stream.profile.image
+                    }) : stream.profile.name ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$a2930b41faa750f4), {
+                        children: stream.profile.name.slice(0, 1).toUpperCase()
+                    }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57da43088f4a416a$export$2e2bcd8739ae039), {})
                 })
             }),
             !showRequestDevice && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $7ec04c1818c68245$export$a878cdfb933a1421), {
                 children: [
                     /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$f6525863ef5a71a9), {
-                        children: stream.displayName ? /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
-                            children: stream.displayName.slice(0, 1).toUpperCase()
+                        children: stream.profile.image ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$a7a74ab5cffd1455), {
+                            src: stream.profile.image
+                        }) : stream.profile.name ? /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                            children: stream.profile.name.slice(0, 1).toUpperCase()
                         }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57da43088f4a416a$export$2e2bcd8739ae039), {})
                     }),
                     /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$b430fec6b171ceb5), {
-                        children: stream.displayName || "User"
+                        children: stream.profile.name || "User"
                     })
                 ]
             })
@@ -3768,10 +3877,10 @@ const $21c8ac858b8a352e$var$AudioTile = ({ stream: stream  })=>{
         children: [
             /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $76e24981612b551d$export$235e35bd03f702fb), {
                 children: [
-                    stream.displayName && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$a2930b41faa750f4), {
-                        children: stream.displayName.slice(0, 1).toUpperCase()
+                    stream.profile.name && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$a2930b41faa750f4), {
+                        children: stream.profile.name.slice(0, 1).toUpperCase()
                     }),
-                    !stream.displayName && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57da43088f4a416a$export$2e2bcd8739ae039), {}),
+                    !stream.profile.name && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57da43088f4a416a$export$2e2bcd8739ae039), {}),
                     /*#__PURE__*/ (0, $3Sbms$jsx)((0, $76e24981612b551d$export$95156eef6a2de99c), {
                         children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6043ae1b48c5aa97$export$2e2bcd8739ae039), {
                             redSlash: !isMicrophoneActive
@@ -3780,7 +3889,7 @@ const $21c8ac858b8a352e$var$AudioTile = ({ stream: stream  })=>{
                 ]
             }),
             /*#__PURE__*/ (0, $3Sbms$jsx)((0, $76e24981612b551d$export$a87ec69641e9884), {
-                children: stream.displayName
+                children: stream.profile.name
             })
         ]
     });
@@ -3818,7 +3927,7 @@ const $57ab7b9a012d9acd$var$Cross = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "M7.21 7.21a.714.714 0 0 1 1.011 0l3.78 3.78 3.778-3.78a.716.716 0 0 1 1.012 1.011l-3.781 3.78 3.78 3.778a.716.716 0 0 1-.779 1.167.716.716 0 0 1-.232-.155L12 13.01l-3.779 3.78a.716.716 0 0 1-1.011-1.01L10.99 12 7.21 8.221a.714.714 0 0 1 0-1.011Z",
+            d: "m13.41 12 6.3-6.29a1.004 1.004 0 0 0-1.42-1.42L12 10.59l-6.29-6.3a1.004 1.004 0 1 0-1.42 1.42l6.3 6.29-6.3 6.29a.999.999 0 0 0 0 1.42 1 1 0 0 0 1.42 0l6.29-6.3 6.29 6.3a1.001 1.001 0 0 0 1.639-.325 1 1 0 0 0-.22-1.095L13.41 12Z",
             fill: "#fff"
         })
     });
@@ -3961,7 +4070,7 @@ const $7c705c3f08c6d4ca$var$DeviceRequest = ({ device: device , requesterId: req
                 }),
                 /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $6efc75079651494a$export$517ec31e58d61d2e), {
                     children: [
-                        requesterStream?.displayName || "Someone",
+                        requesterStream?.profile?.name || "Someone",
                         " would like you to share your",
                         " ",
                         $7c705c3f08c6d4ca$var$deviceNames[device]
@@ -4163,7 +4272,7 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
     const videoElementRef = (0, $3Sbms$useRef)(null);
     const videoMediaProviderRef = (0, $3Sbms$useRef)(null);
     const SelfTileRef = (0, $3Sbms$useRef)(null);
-    const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , selfDisplayName: selfDisplayName , muted: muted , streaming: streaming , orientation: orientation ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , profile: profile , muted: muted , streaming: streaming , orientation: orientation , options: options ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
     const [containerWidth, containerHeight] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(videosContainerRef.current);
     const isAlone = streams.length < 1;
@@ -4215,7 +4324,7 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
             const base64Image = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).captureVideo(videoElementRef.current);
             setSnapshotImage(base64Image);
             try {
-                const { objectUrl: objectUrl  } = await fetch(`${"https://apistream.snapcall.io"}/uploadSnapshot`, {
+                const { objectUrl: objectUrl  } = await fetch(`${options.streamApiURL}/uploadSnapshot`, {
                     method: "POST",
                     body: JSON.stringify({
                         file: base64Image
@@ -4226,7 +4335,7 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
                     imageSrc: objectUrl
                 });
                 let notificationMessage = "Snapshot sent to users.";
-                if (streams.length === 1) notificationMessage = `Snapshot sent to ${streams[0].displayName || "user"}.`;
+                if (streams.length === 1) notificationMessage = `Snapshot sent to ${streams[0].profile.name || "user"}.`;
                 (0, $a5146f9062d7bf28$export$3a57e165650c636f)(notificationMessage, {
                     icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$26fe7ec9351ff761), {
                         src: base64Image
@@ -4246,7 +4355,6 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         if (SelfTileRef.current) (0, $d02c24b66b4606fd$export$ab7d69e250642927)({
             element: SelfTileRef.current
         });
-        if (deviceType === "screen") return;
         setDeviceRequest({
             device: deviceType,
             requesterId: peerId
@@ -4344,10 +4452,10 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
             !streaming && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$f217faec90120a0c), {
                 children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $7ec04c1818c68245$export$6ddfb572d7b6d164), {
                     children: [
-                        selfDisplayName && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$a2930b41faa750f4), {
-                            children: selfDisplayName.slice(0, 1).toUpperCase()
+                        profile.name && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$a2930b41faa750f4), {
+                            children: profile.name.slice(0, 1).toUpperCase()
                         }),
-                        !selfDisplayName && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57da43088f4a416a$export$2e2bcd8739ae039), {})
+                        !profile.name && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57da43088f4a416a$export$2e2bcd8739ae039), {})
                     ]
                 })
             }),
@@ -4379,12 +4487,14 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
                                 onClick: onSnapshotClick,
                                 children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $e1d1366624f88f6d$export$c58e349a67ffa055), {})
                             }),
-                            zoomAvailable && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $6efc75079651494a$export$e07ea3386b3cb3d9), {
+                            zoomAvailable && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$e07ea3386b3cb3d9), {
                                 onClick: onZoomClick,
-                                children: [
-                                    zoom ? "2" : "1",
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57ab7b9a012d9acd$export$2e2bcd8739ae039), {})
-                                ]
+                                children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $6efc75079651494a$export$88248b9be937544a), {
+                                    children: [
+                                        zoom ? "2" : "1",
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57ab7b9a012d9acd$export$2e2bcd8739ae039), {})
+                                    ]
+                                })
                             }),
                             /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
                                 style: {
@@ -4469,12 +4579,12 @@ const $306a53f44040492f$var$ScreenshareTile = (tile)=>{
     const videoElementRef = (0, $3Sbms$useRef)(null);
     const isSelf = tile.peerId === selfPeerId;
     (0, $3Sbms$useEffect)(()=>{
-        if (tile.data.consumerId && videoElementRef.current) (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestVideo({
-            consumerId: tile.data.consumerId,
+        if (tile.data.mediaId && videoElementRef.current) (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestVideo({
+            mediaId: tile.data.mediaId,
             element: videoElementRef.current
         });
     }, [
-        tile.data.consumerId
+        tile.data.mediaId
     ]);
     (0, $3Sbms$useEffect)(()=>{
         if (isSelf && videoElementRef.current) {
@@ -4852,12 +4962,20 @@ const $ab48431cd035ee30$export$a06f1c675e846f6f = (0, $3Sbms$styledcomponents).d
   justify-content: center;
 `;
 const $ab48431cd035ee30$export$f9985cea9f8ad92f = (0, $3Sbms$styledcomponents).button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 36px;
   height: 36px;
   padding: 7px;
   background: rgba(28, 32, 36, 0.5);
   border: none;
   border-radius: 50px;
+
+  svg {
+    width: 17px;
+    height: 17px;
+  }
 `;
 const $ab48431cd035ee30$export$26fe7ec9351ff761 = (0, $3Sbms$styledcomponents).img`
   border: 2px solid #fff;
@@ -4987,8 +5105,8 @@ const $288d5802b3a8deca$var$ScreenshareEvents = ()=>{
     const { dispatch: dispatch , highlightedTile: highlightedTile  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
     (0, $3Sbms$useEffect)(()=>{
         const onRemoteScreensharingUpdate = (event)=>{
-            const { peerId: peerId , consumerId: consumerId , deviceType: deviceType  } = event.detail;
-            const available = event.type === "newConsumer";
+            const { peerId: peerId , mediaId: mediaId , deviceType: deviceType  } = event.detail;
+            const available = event.type === "mediaStart";
             if (deviceType === "screen" && available) dispatch({
                 type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).SET_HIGHLIGHTED_TILE,
                 payload: {
@@ -4996,7 +5114,7 @@ const $288d5802b3a8deca$var$ScreenshareEvents = ()=>{
                     peerId: peerId,
                     isGlobal: true,
                     data: {
-                        consumerId: consumerId
+                        mediaId: mediaId
                     }
                 }
             });
@@ -5021,13 +5139,13 @@ const $288d5802b3a8deca$var$ScreenshareEvents = ()=>{
                 type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).UNSET_HIGHLIGHTED_TILE
             });
         };
-        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("newConsumer", onRemoteScreensharingUpdate);
-        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("consumerClose", onRemoteScreensharingUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("mediaStart", onRemoteScreensharingUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("mediaStop", onRemoteScreensharingUpdate);
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("screenshareEnabled", onScreensharingUpdate);
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("screenshareDisabled", onScreensharingUpdate);
         return ()=>{
-            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("newConsumer", onRemoteScreensharingUpdate);
-            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("consumerClose", onRemoteScreensharingUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("mediaStart", onRemoteScreensharingUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("mediaStop", onRemoteScreensharingUpdate);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("screenshareEnabled", onScreensharingUpdate);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("screenshareDisabled", onScreensharingUpdate);
         };
@@ -5099,15 +5217,15 @@ const $75c30c42d3b87293$var$SnapshotEvents = ()=>{
             if (type === "snapshot") {
                 const sender = streams.find((stream)=>stream.id === peerId);
                 if (sender) {
-                    const statusIcon = sender.displayName ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $ab48431cd035ee30$export$49ac927a2aaad85), {
-                        children: sender.displayName.slice(0, 1).toUpperCase()
+                    const statusIcon = sender.profile.name ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $ab48431cd035ee30$export$49ac927a2aaad85), {
+                        children: sender.profile.name.slice(0, 1).toUpperCase()
                     }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $ab48431cd035ee30$export$49ac927a2aaad85), {
                         children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57da43088f4a416a$export$2e2bcd8739ae039), {})
                     });
                     const createdAtDate = new Date();
                     const notificationStatus = {
                         text: "From",
-                        boldText: sender.displayName || "User",
+                        boldText: sender.profile.name || "User",
                         icon: statusIcon
                     };
                     (0, $a5146f9062d7bf28$export$3a57e165650c636f)("Snapshot shared.", {
@@ -5153,8 +5271,8 @@ const $75c30c42d3b87293$var$SnapshotEvents = ()=>{
                             border: "2px solid #fff"
                         },
                         statusText: notificationStatus.boldText,
-                        statusIconLetter: sender.displayName ? sender.displayName.slice(0, 1).toUpperCase() : undefined,
-                        statusIconUser: sender.displayName ? false : true
+                        statusIconLetter: sender.profile.name ? sender.profile.name.slice(0, 1).toUpperCase() : undefined,
+                        statusIconUser: sender.profile.name ? false : true
                     });
                 }
             }
@@ -5345,7 +5463,7 @@ var $b8963bf62cf5b984$export$2e2bcd8739ae039 = $b8963bf62cf5b984$var$tooltip;
 
 
 const $cdab47bb8796991e$var$Video = ()=>{
-    const { selfPeerId: selfPeerId , videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , options: options , muted: selfMuted , selfDisplayName: selfDisplayName , orientation: orientation , userInteractionTriggered: userInteractionTriggered ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { selfPeerId: selfPeerId , videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , options: options , muted: selfMuted , profile: profile1 , orientation: orientation , userInteractionTriggered: userInteractionTriggered ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const [tileSize, setTileSize] = (0, $3Sbms$useState)({
         width: 0,
         height: 0
@@ -5395,32 +5513,32 @@ const $cdab47bb8796991e$var$Video = ()=>{
     ]);
     (0, $3Sbms$useEffect)(()=>{
         const onNewPeer = (event)=>{
-            const { peerId: peerId , displayName: displayName  } = event.detail;
+            const { peerId: peerId , profile: profile  } = event.detail;
             dispatch({
                 type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).ADD_STREAM,
                 payload: {
                     id: peerId,
-                    displayName: displayName
+                    profile: profile
                 }
             });
         };
-        const onConsumerUpdate = (event)=>{
-            const { peerId: peerId , consumerId: consumerId , deviceType: deviceType , paused: paused  } = event.detail;
-            const available = event.type === "newConsumer";
+        const onMediaEvent = (event)=>{
+            const { peerId: peerId , mediaId: mediaId , deviceType: deviceType , paused: paused  } = event.detail;
+            const available = event.type === "mediaStart";
             if (deviceType !== "screen") dispatch({
                 type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).DEVICE_UPDATE,
                 payload: {
                     streamId: peerId,
-                    consumerId: consumerId,
+                    mediaId: mediaId,
                     device: deviceType,
                     available: available,
                     paused: paused
                 }
             });
         };
-        const onProducerUpdate = (event)=>{
+        const onMediaStateChange = (event)=>{
             const { peerId: peerId , deviceType: deviceType  } = event.detail;
-            const isPaused = event.type === "producerPaused";
+            const isPaused = event.type === "mediaPause";
             if (deviceType === "microphone" && isPaused) dispatch({
                 type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).MUTE,
                 payload: {
@@ -5438,7 +5556,7 @@ const $cdab47bb8796991e$var$Video = ()=>{
             const { peers: peers  } = event.detail;
             const roomStreams = peers.map((peer)=>({
                     id: peer.peerId,
-                    displayName: peer.displayName
+                    profile: peer.profile
                 }));
             dispatch({
                 type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).SET_STREAMS,
@@ -5454,13 +5572,13 @@ const $cdab47bb8796991e$var$Video = ()=>{
                 }
             });
         };
-        const onDisplayName = (event)=>{
-            const { peerId: peerId , displayName: displayName  } = event.detail;
+        const onProfileUpdate = (event)=>{
+            const { peerId: peerId , profile: profile  } = event.detail;
             dispatch({
-                type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).SET_STREAM_DISPLAY_NAME,
+                type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).SET_STREAM_PROFILE,
                 payload: {
                     streamId: peerId,
-                    displayName: displayName
+                    profile: profile
                 }
             });
         };
@@ -5478,22 +5596,22 @@ const $cdab47bb8796991e$var$Video = ()=>{
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("newPeer", onNewPeer);
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("peerClosed", onPeerClosed);
-        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("newConsumer", onConsumerUpdate);
-        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("consumerClose", onConsumerUpdate);
-        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("producerPaused", onProducerUpdate);
-        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("producerResumed", onProducerUpdate);
-        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("displayName", onDisplayName);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("mediaStart", onMediaEvent);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("mediaStop", onMediaEvent);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("mediaPause", onMediaStateChange);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("mediaResume", onMediaStateChange);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("profileUpdate", onProfileUpdate);
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("peerStartSpeak", onPeerSpeakingUpdate);
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("peerStopSpeak", onPeerSpeakingUpdate);
         return ()=>{
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("enterRoom", onEnterRoom);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("newPeer", onNewPeer);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("peerClosed", onPeerClosed);
-            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("newConsumer", onConsumerUpdate);
-            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("consumerClose", onConsumerUpdate);
-            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("producerPaused", onProducerUpdate);
-            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("producerResumed", onProducerUpdate);
-            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("displayName", onDisplayName);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("mediaStart", onMediaEvent);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("mediaStop", onMediaEvent);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("mediaPause", onMediaStateChange);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("mediaResume", onMediaStateChange);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("profileUpdate", onProfileUpdate);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("peerStartSpeak", onPeerSpeakingUpdate);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("peerStopSpeak", onPeerSpeakingUpdate);
         };
@@ -5523,7 +5641,7 @@ const $cdab47bb8796991e$var$Video = ()=>{
                         stream: {
                             id: String(selfPeerId),
                             muted: selfMuted,
-                            displayName: selfDisplayName
+                            profile: profile1
                         }
                     }),
                     streams.map((stream)=>{
@@ -6068,7 +6186,7 @@ const $8d3d0e80c56cde5c$export$51760c3b0f5567d2 = (0, $3Sbms$styledcomponents).p
 const $5b80b81d7b095f89$var$QuickConnect = ()=>{
     const QuickConnectContainerRef = (0, $3Sbms$useRef)(null);
     const QuickConnectRef = (0, $3Sbms$useRef)(null);
-    const { selfPeerId: selfPeerId , selfDisplayName: selfDisplayName , isQuickConnectPopupVisible: isQuickConnectPopupVisible , setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , options: options , orientation: orientation ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { selfPeerId: selfPeerId , profile: profile , isQuickConnectPopupVisible: isQuickConnectPopupVisible , setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , options: options , orientation: orientation ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     (0, $e1413aacdaa5a03e$export$71b2224f1ce5e08e)(QuickConnectContainerRef, ()=>{
         if (isQuickConnectPopupVisible) setIsQuickConnectPopupVisible(false);
     });
@@ -6084,13 +6202,13 @@ const $5b80b81d7b095f89$var$QuickConnect = ()=>{
             url.searchParams.set("microphone-enabled", "0");
             url.searchParams.set("camera-enabled", "1");
             url.searchParams.set("quick-connect", selfPeerId);
-            if (selfDisplayName) url.searchParams.set("name", selfDisplayName);
+            if (profile.name) url.searchParams.set("name", profile.name);
         }
         return url.href;
     }, [
         options.sharedURL,
         selfPeerId,
-        selfDisplayName
+        profile.name
     ]);
     const onQuickConnectPopupCloseClick = ()=>setIsQuickConnectPopupVisible(false);
     (0, $3Sbms$useEffect)(()=>{
@@ -6119,8 +6237,12 @@ const $5b80b81d7b095f89$var$QuickConnect = ()=>{
                 (0, $c9e496369b59be7a$export$2f377c2162fd02b2).sendCustomMessage(quickConnectParam, {
                     type: "quick_connect_close"
                 });
-                if (quickConnectNameParam) (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setDisplayName(`${quickConnectNameParam} (mobile)`);
-                else (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setDisplayName("Mobile");
+                if (quickConnectNameParam) (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setProfile({
+                    name: `${quickConnectNameParam} (mobile)`
+                });
+                else (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setProfile({
+                    name: "Mobile"
+                });
             }
         }
     }, [
@@ -6333,8 +6455,10 @@ const $658749b7ab14b607$export$db1aade9877208c7 = (0, $3Sbms$styledcomponents).b
   border-radius: 10px;
   justify-content: space-between;
   align-items: center;
-  padding: 16px 18px;
+  padding: 15px;
   font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
   color: ${(props)=>props.theme.settingsTextColor};
 
   span {
@@ -6479,39 +6603,48 @@ var $1694791461215de9$export$2e2bcd8739ae039 = $1694791461215de9$var$LanguageSub
 
 
 
+
+
 const $b7a5d5760b390f40$var$AudioSubMenu = ({ back: back  })=>{
-    const [micDevices, setMicDevices] = (0, $3Sbms$useState)([]);
-    const [currentMic, setCurrentMic] = (0, $3Sbms$useState)(null);
-    const [speakerDevices, setSpeakerDevices] = (0, $3Sbms$useState)([]);
-    const [currentSpeaker, setCurrentSpeaker] = (0, $3Sbms$useState)(null);
-    const canChangeSpeakers = speakerDevices.length > 0 && "setSinkId" in HTMLAudioElement.prototype;
-    const listDevices = ()=>(0, $c9e496369b59be7a$export$2f377c2162fd02b2).listAudioDevices().then((devices)=>{
-            const speakers = devices.filter((device)=>device.kind === "audiooutput" && device.label);
-            const mics = devices.filter((device)=>device.kind === "audioinput" && device.label);
-            setMicDevices(mics);
-            setSpeakerDevices(speakers);
-            // For chrome
-            const speaker = speakers.find((device)=>device.deviceId === "default");
-            const mic = mics.find((device)=>device.deviceId === "default");
-            setCurrentMic(mic || null);
-            setCurrentSpeaker(speaker || null);
-        });
-    const onMicClick = (0, $3Sbms$useCallback)(async (mic)=>{
+    const [audioDevices, setAudioDevices] = (0, $3Sbms$useState)([]);
+    const [currentMic, setCurrentMic] = (0, $3Sbms$useState)();
+    const [currentSpeaker, setCurrentSpeaker] = (0, $3Sbms$useState)();
+    const microphoneDevices = audioDevices.filter((device)=>device.kind === "audioinput");
+    const speakerDevices = audioDevices.filter((device)=>device.kind === "audiooutput");
+    const isMicrophoneAccessBlocked = microphoneDevices.length && audioDevices.every((device)=>device.deviceId === "");
+    const canChangeSpeakers = "setSinkId" in HTMLAudioElement.prototype;
+    const listDevices = async ()=>{
+        const audioDevicesList = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).listAudioDevices();
+        setAudioDevices(audioDevicesList);
+        const speaker = audioDevicesList.find((device)=>device.kind === "audiooutput" && device.deviceId === "default");
+        const mic = audioDevicesList.find((device)=>device.kind === "audioinput" && device.deviceId === "default");
+        setCurrentMic(mic);
+        setCurrentSpeaker(speaker);
+    };
+    const onMicClick = async (mic)=>{
         if (currentMic?.deviceId === mic.deviceId) return;
         await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).switchMicrophone(mic.deviceId);
         setCurrentMic(mic);
-        (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Connected to ${mic.label}`);
-    }, [
-        currentMic
-    ]);
-    const onSpeakerClick = (0, $3Sbms$useCallback)((speaker)=>{
+        (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Connected to ${mic.label}`, {
+            duration: 3000,
+            icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6043ae1b48c5aa97$export$2e2bcd8739ae039), {}),
+            messageStyle: {
+                fontWeight: 600
+            }
+        });
+    };
+    const onSpeakerClick = (speaker)=>{
         if (currentSpeaker?.deviceId === speaker.deviceId) return;
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setAudioSink(speaker.deviceId);
         setCurrentSpeaker(speaker);
-        (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Connected to ${speaker.label}`);
-    }, [
-        currentSpeaker
-    ]);
+        (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Connected to ${speaker.label}`, {
+            duration: 3000,
+            icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c45f2504881e174b$export$2e2bcd8739ae039), {}),
+            messageStyle: {
+                fontWeight: 600
+            }
+        });
+    };
     (0, $3Sbms$useEffect)(()=>{
         listDevices();
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("devicesListChange", listDevices);
@@ -6532,61 +6665,64 @@ const $b7a5d5760b390f40$var$AudioSubMenu = ({ back: back  })=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$b286f91cddfedb5a), {
-                children: [
-                    /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
-                        children: [
-                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
-                                children: "Microphone"
-                            }),
-                            canChangeSpeakers && micDevices.map((mic)=>{
-                                const checked = mic.deviceId === currentMic?.deviceId;
-                                return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
-                                    onClick: ()=>onMicClick(mic),
-                                    children: [
-                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$f132d77f01dce0a3), {
-                                            children: mic.label
-                                        }),
-                                        /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
-                                            children: checked && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {})
-                                        })
-                                    ]
-                                }, mic.deviceId);
-                            }),
-                            !canChangeSpeakers && micDevices.length < 1 && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$87d6be27a51dc3c4), {
-                                children: [
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$30ccd51431e4a7b0), {
-                                        children: "Microphone is blocked."
-                                    }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$73afb47ae3e10bf1), {
-                                        children: "Please accept microphone sharing before accessing these options."
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    canChangeSpeakers && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$b286f91cddfedb5a), {
+                children: isMicrophoneAccessBlocked ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
+                    children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$87d6be27a51dc3c4), {
                         children: [
-                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
-                                children: "Speakers"
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$30ccd51431e4a7b0), {
+                                children: "Microphone is blocked."
                             }),
-                            speakerDevices.map((speaker)=>{
-                                const checked = speaker.deviceId === currentSpeaker?.deviceId;
-                                return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
-                                    onClick: ()=>onSpeakerClick(speaker),
-                                    children: [
-                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$f132d77f01dce0a3), {
-                                            children: speaker.label
-                                        }),
-                                        /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
-                                            children: checked && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {})
-                                        })
-                                    ]
-                                }, speaker.deviceId);
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$73afb47ae3e10bf1), {
+                                children: "Please accept microphone sharing before accessing these options."
                             })
                         ]
                     })
-                ]
+                }) : /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
+                    children: [
+                        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
+                            children: [
+                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
+                                    children: "Microphone"
+                                }),
+                                microphoneDevices.map((microphone)=>{
+                                    const checked = microphone.deviceId === currentMic?.deviceId;
+                                    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
+                                        onClick: ()=>onMicClick(microphone),
+                                        children: [
+                                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$f132d77f01dce0a3), {
+                                                children: microphone.label
+                                            }),
+                                            /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                                children: checked && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {})
+                                            })
+                                        ]
+                                    }, microphone.deviceId);
+                                })
+                            ]
+                        }),
+                        canChangeSpeakers && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
+                            children: [
+                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
+                                    children: "Speakers"
+                                }),
+                                speakerDevices.map((speaker)=>{
+                                    const checked = speaker.deviceId === currentSpeaker?.deviceId;
+                                    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
+                                        onClick: ()=>onSpeakerClick(speaker),
+                                        children: [
+                                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$f132d77f01dce0a3), {
+                                                children: speaker.label
+                                            }),
+                                            /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                                children: checked && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {})
+                                            })
+                                        ]
+                                    }, speaker.deviceId);
+                                })
+                            ]
+                        })
+                    ]
+                })
             })
         ]
     });
@@ -6602,6 +6738,7 @@ var $b7a5d5760b390f40$export$2e2bcd8739ae039 = $b7a5d5760b390f40$var$AudioSubMen
 
 
 
+
 const $57896f163f7e1230$var$resolutions = Object.keys((0, $c31e3fb4360572af$export$d21ffcc5eb136bfa)).map((key)=>{
     const constraints = (0, $c31e3fb4360572af$export$d21ffcc5eb136bfa);
     switch(constraints[key].height.ideal){
@@ -6617,7 +6754,7 @@ const $57896f163f7e1230$var$resolutions = Object.keys((0, $c31e3fb4360572af$expo
             };
         case 720:
             return {
-                name: "Hight definition (720p)",
+                name: "High definition (720p)",
                 key: key
             };
         default:
@@ -6628,36 +6765,34 @@ const $57896f163f7e1230$var$resolutions = Object.keys((0, $c31e3fb4360572af$expo
     }
 }).filter((def)=>def.name !== "");
 const $57896f163f7e1230$var$VideoSubMenu = ({ back: back  })=>{
-    const [cameraDevices, setCameraDevices] = (0, $3Sbms$useState)(Array.from((0, $c9e496369b59be7a$export$2f377c2162fd02b2).getWebcamsList().values()).filter((device)=>device.deviceId));
+    const [cameraDevices, setCameraDevices] = (0, $3Sbms$useState)([]);
     const [currentCamera, setCurrentCamera] = (0, $3Sbms$useState)((0, $c9e496369b59be7a$export$2f377c2162fd02b2).getCurrentWebcam());
+    const isCameraAccessBlocked = cameraDevices.length && cameraDevices.every((device)=>device.deviceId === "");
     const listDevices = async ()=>{
-        const devices = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).listVideoDevices();
-        const authorisedCameras = devices.filter((device)=>device.deviceId);
-        if (authorisedCameras.length > 0) setCameraDevices(authorisedCameras);
+        const videoDevices = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).listVideoDevices();
+        setCameraDevices(videoDevices);
     };
     const onCameraClick = async (camera)=>{
         if (currentCamera.device?.deviceId === camera.deviceId) return;
-        if (currentCamera.device) {
-            await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).switchWebcam({
-                device: camera
-            });
-            (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Connected to ${camera.label}`, {
-                duration: 3000
-            });
-        } else {
-            await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableVideo({
-                device: camera,
-                resolution: currentCamera.resolution
-            });
-            (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Connected to ${camera.label}`, {
-                duration: 3000
-            });
-        }
+        if (currentCamera.device) await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).switchWebcam({
+            device: camera
+        });
+        else await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableVideo({
+            device: camera,
+            resolution: currentCamera.resolution
+        });
+        (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Connected to ${camera.label}`, {
+            duration: 3000,
+            icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $04e57b1f07a8e9f4$export$2e2bcd8739ae039), {}),
+            messageStyle: {
+                fontWeight: 600
+            }
+        });
     };
     const onSendResolutionClick = async (resolution)=>{
         if (currentCamera.resolution === resolution.key) return;
         await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setWebcamResolution(resolution.key);
-        (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Using ${resolution.name} resolution`, {
+        (0, $a5146f9062d7bf28$export$3a57e165650c636f)(resolution.name, {
             duration: 3000
         });
     };
@@ -6692,61 +6827,64 @@ const $57896f163f7e1230$var$VideoSubMenu = ({ back: back  })=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$b286f91cddfedb5a), {
-                children: [
-                    /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
-                        children: [
-                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
-                                children: "Camera"
-                            }),
-                            cameraDevices.map((camera)=>{
-                                const checked = camera.deviceId === currentCamera.device?.deviceId;
-                                return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
-                                    onClick: ()=>onCameraClick(camera),
-                                    children: [
-                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$f132d77f01dce0a3), {
-                                            children: camera.label
-                                        }),
-                                        /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
-                                            children: checked && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {})
-                                        })
-                                    ]
-                                }, camera.deviceId);
-                            }),
-                            cameraDevices.length < 1 && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$87d6be27a51dc3c4), {
-                                children: [
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$30ccd51431e4a7b0), {
-                                        children: "Camera is blocked."
-                                    }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$73afb47ae3e10bf1), {
-                                        children: "Please accept camera sharing before accessing these options."
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$b286f91cddfedb5a), {
+                children: isCameraAccessBlocked ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
+                    children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$87d6be27a51dc3c4), {
                         children: [
-                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
-                                children: "Send Resolution (maximum)"
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$30ccd51431e4a7b0), {
+                                children: "Camera is blocked."
                             }),
-                            $57896f163f7e1230$var$resolutions.map((resolution)=>{
-                                const checked = resolution.key === currentCamera.resolution;
-                                return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
-                                    onClick: ()=>onSendResolutionClick(resolution),
-                                    children: [
-                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$f132d77f01dce0a3), {
-                                            children: resolution.name
-                                        }),
-                                        /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
-                                            children: checked && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {})
-                                        })
-                                    ]
-                                }, resolution.key);
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$73afb47ae3e10bf1), {
+                                children: "Please accept camera sharing before accessing these options."
                             })
                         ]
                     })
-                ]
+                }) : /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
+                    children: [
+                        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
+                            children: [
+                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
+                                    children: "Camera"
+                                }),
+                                cameraDevices.map((camera)=>{
+                                    const checked = camera.deviceId === currentCamera.device?.deviceId;
+                                    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
+                                        onClick: ()=>onCameraClick(camera),
+                                        children: [
+                                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$f132d77f01dce0a3), {
+                                                children: camera.label
+                                            }),
+                                            /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                                children: checked && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {})
+                                            })
+                                        ]
+                                    }, camera.deviceId);
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
+                            children: [
+                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
+                                    children: "Send Resolution (maximum)"
+                                }),
+                                $57896f163f7e1230$var$resolutions.map((resolution)=>{
+                                    const checked = resolution.key === currentCamera.resolution;
+                                    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
+                                        onClick: ()=>onSendResolutionClick(resolution),
+                                        children: [
+                                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$f132d77f01dce0a3), {
+                                                children: resolution.name
+                                            }),
+                                            /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                                children: checked && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {})
+                                            })
+                                        ]
+                                    }, resolution.key);
+                                })
+                            ]
+                        })
+                    ]
+                })
             })
         ]
     });
@@ -6961,7 +7099,8 @@ const $d677836e2f373a45$export$11781939bbc73f8b = (0, $3Sbms$styledcomponents).d
   }
 
   svg {
-    height: 13px;
+    width: 20px;
+    height: 21px;
   }
 `;
 const $d677836e2f373a45$export$7ae684a6a708b51d = (0, $3Sbms$styledcomponents).button`
@@ -6976,8 +7115,8 @@ const $d677836e2f373a45$export$7ae684a6a708b51d = (0, $3Sbms$styledcomponents).b
   padding: 0;
 
   svg {
-    height: 10px;
-    width: 10px;
+    height: 15px;
+    width: 15px;
 
     path {
       fill: #000;
@@ -7248,7 +7387,8 @@ const $554f3984e3212196$export$7563f0d47f114601 = (0, $3Sbms$styledcomponents).d
   }
 
   svg {
-    height: 13px;
+    width: 20px;
+    height: 20px;
   }
 `;
 const $554f3984e3212196$export$fcade06574a60ff0 = (0, $3Sbms$styledcomponents).button`
@@ -7263,8 +7403,8 @@ const $554f3984e3212196$export$fcade06574a60ff0 = (0, $3Sbms$styledcomponents).b
   padding: 0;
 
   svg {
-    height: 10px;
-    width: 10px;
+    width: 15px;
+    height: 15px;
 
     path {
       fill: #000;
@@ -7406,7 +7546,7 @@ const $98933bbc579a3e66$var$LinksharePopup = ()=>{
         if (type === $98933bbc579a3e66$export$a1eac7fdbc2db4af) $98933bbc579a3e66$var$sendLinkNotification(data);
         else if (type === "paypal_invoice") {
             const sender = streams.find((stream)=>stream.id === event.detail.peerId);
-            $98933bbc579a3e66$var$sendPaypalInvoiceNotification(sender?.displayName, data.url);
+            $98933bbc579a3e66$var$sendPaypalInvoiceNotification(sender?.profile?.name, data.url);
         }
     }, [
         streams
@@ -7439,7 +7579,7 @@ const $98933bbc579a3e66$var$LinksharePopup = ()=>{
                         data: data
                     });
                 }
-                if (streams.length < 2) (0, $3Sbms$reacthottoast)(`Link sent to ${streams[0]?.displayName || "User"}`);
+                if (streams.length < 2) (0, $3Sbms$reacthottoast)(`Link sent to ${streams[0]?.profile?.name || "User"}`);
                 else (0, $3Sbms$reacthottoast)("Link sent to users");
                 setIsLinksharePopupVisible(false);
             } catch (err) {
@@ -7996,6 +8136,80 @@ var $d6008ea114507578$export$2e2bcd8739ae039 = $d6008ea114507578$var$SvgDefiniti
 
 
 
+
+
+const $fdbe2be8571dfcd7$export$8bac64dfa46a096a = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.75);
+  z-index: 999;
+`;
+const $fdbe2be8571dfcd7$export$f2f6e48f0181f95d = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: #fff;
+  padding: 20px;
+  max-width: 300px;
+  border-radius: 10px;
+  box-sizing: border-box;
+`;
+const $fdbe2be8571dfcd7$export$b834616c6081368f = (0, $3Sbms$styledcomponents).h2`
+  font-size: 16px;
+  font-weight: 700;
+  color: #242324;
+  margin: 0 0 10px 0;
+`;
+const $fdbe2be8571dfcd7$export$12ed2ca69ff6905b = (0, $3Sbms$styledcomponents).p`
+  font-size: 12px;
+  font-weight: 500;
+  color: #2d2d2d;
+  margin: 0 0 15px 0;
+`;
+const $fdbe2be8571dfcd7$export$d39b0d24481757e7 = (0, $3Sbms$styledcomponents).button`
+  align-self: flex-end;
+  color: #242324;
+  background-color: transparent;
+  border: 2px solid #242324;
+  border-radius: 50px;
+  padding: 8px 18px;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 16px;
+
+  &:hover {
+    color: #fff;
+    background-color: #242324;
+  }
+`;
+
+
+const $6aca0f707e80bf63$var$BlockedDevicesPopup = ({ close: close  })=>{
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $fdbe2be8571dfcd7$export$8bac64dfa46a096a), {
+        children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $fdbe2be8571dfcd7$export$f2f6e48f0181f95d), {
+            children: [
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $fdbe2be8571dfcd7$export$b834616c6081368f), {
+                    children: "Camera and microphone are blocked"
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $fdbe2be8571dfcd7$export$12ed2ca69ff6905b), {
+                    children: "SnapCall requires access to your camera and microphone. Click the camera blocked icon in your browser's address bar."
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $fdbe2be8571dfcd7$export$d39b0d24481757e7), {
+                    onClick: close,
+                    children: "Dismiss"
+                })
+            ]
+        })
+    });
+};
+var $6aca0f707e80bf63$export$2e2bcd8739ae039 = $6aca0f707e80bf63$var$BlockedDevicesPopup;
+
+
 // https://github.com/video-dev/can-autoplay
 const $15a01b611391c1e7$var$audioSource = new Blob([
     new Uint8Array([
@@ -8307,6 +8521,7 @@ const $4fb4815baa04b470$export$914ddf2021ea8ee6 = (0, $3Sbms$styledcomponents).d
 
 
 
+
 const $26ed036cbc17809a$var$currentTheme = (0, $52580db2e49cdd90$export$3bfd0d5209a8006a)();
 const $26ed036cbc17809a$var$currentLanguage = (0, $1694791461215de9$export$604ba5624273df44)();
 let $26ed036cbc17809a$var$timestampCriticalError = -1;
@@ -8322,13 +8537,14 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
     const [isLinksharePopupVisible, setIsLinksharePopupVisible] = (0, $3Sbms$useState)(false);
     const [theme, setTheme] = (0, $3Sbms$useState)($26ed036cbc17809a$var$currentTheme);
     const [language, setLanguage] = (0, $3Sbms$useState)($26ed036cbc17809a$var$currentLanguage);
-    const [selfDisplayName, setSelfDisplayName] = (0, $3Sbms$useState)("");
+    const [profile1, setProfile] = (0, $3Sbms$useState)({});
     const [muted, setMuted] = (0, $3Sbms$useState)(true);
     const [streaming, setStreaming] = (0, $3Sbms$useState)(false);
     const [screensharing, setScreensharing] = (0, $3Sbms$useState)(false);
     const [isAgent, setIsAgent] = (0, $3Sbms$useState)(false);
     const [userInteractionTriggered, setUserInteractionTriggered] = (0, $3Sbms$useState)(false);
     const [containerWidth, containerHeight] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(streamUIContainerRef.current);
+    const [isBlockedDevicesPopupOpen, setBlockedDevicesPopupOpen] = (0, $3Sbms$useState)(false);
     const orientation = containerWidth > containerHeight ? "landscape" : "portrait";
     const styledTheme = theme === "dark" ? (0, $52580db2e49cdd90$export$3e936a8db52a10a0) : (0, $52580db2e49cdd90$export$f30cb9bc4f736419);
     const onEnterRoom = async (event)=>{
@@ -8338,6 +8554,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
             await (0, $15a01b611391c1e7$export$494039379563c94d)();
             setUserInteractionTriggered(true);
         } catch (userInteractionError) {
+            setBlockedDevicesPopupOpen(true);
             console.error("User interaction trigger failed", userInteractionError);
         }
     };
@@ -8355,11 +8572,17 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
     };
     const onDefaultAudioDeviceChange = (event)=>{
         const micro = event.detail.label;
-        (0, $3Sbms$reacthottoast)(`Connected to: ${micro}`);
+        (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Connected to ${micro}`, {
+            duration: 3000,
+            icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6043ae1b48c5aa97$export$2e2bcd8739ae039), {}),
+            messageStyle: {
+                fontWeight: 600
+            }
+        });
     };
-    const onSelfDisplayNameUpdate = (event)=>{
-        const { displayName: displayName  } = event.detail;
-        setSelfDisplayName(displayName);
+    const onSelfProfileUpdate = (event)=>{
+        const { profile: profile  } = event.detail;
+        setProfile(profile);
     };
     const onCallEnd = ()=>{
         (0, $15a01b611391c1e7$export$716eeec86fd18da7)();
@@ -8427,7 +8650,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("microphoneMute", onMicrophoneUpdate);
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("microphoneUnmute", onMicrophoneUpdate);
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("defaultAudioDeviceChange", onDefaultAudioDeviceChange);
-        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("selfDisplayName", onSelfDisplayNameUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("selfProfileUpdate", onSelfProfileUpdate);
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("terminateRoom", onCallTerminated);
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("leaveRoom", onCallEnd);
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("invalidRoom", onInvalidRoom);
@@ -8443,7 +8666,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("microphoneMute", onMicrophoneUpdate);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("microphoneUnmute", onMicrophoneUpdate);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("defaultAudioDeviceChange", onDefaultAudioDeviceChange);
-            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("selfDisplayName", onSelfDisplayNameUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("selfProfileUpdate", onSelfProfileUpdate);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("terminateRoom", onCallTerminated);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("leaveRoom", onCallEnd);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("invalidRoom", onInvalidRoom);
@@ -8472,7 +8695,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
             language: language,
             setLanguage: setLanguage,
             options: options,
-            selfDisplayName: selfDisplayName,
+            profile: profile1,
             muted: muted,
             streaming: streaming,
             screensharing: screensharing,
@@ -8490,6 +8713,12 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
                     children: [
                         /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3a42b2ef7646d035$export$2e2bcd8739ae039), {}),
                         /*#__PURE__*/ (0, $3Sbms$jsx)((0, $805d92fa41e6e1b0$export$2e2bcd8739ae039), {}),
+                        isBlockedDevicesPopupOpen && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6aca0f707e80bf63$export$2e2bcd8739ae039), {
+                            close: ()=>{
+                                setUserInteractionTriggered(true);
+                                setBlockedDevicesPopupOpen(false);
+                            }
+                        }),
                         streamState === "streaming" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Fragment), {
                             children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $cce9fd41d8a55a18$export$74636703cfe1eecf), {
                                 children: [
@@ -8529,7 +8758,8 @@ const $24075a5d702d64b3$var$defaultOptions = {
         screenshare: {
             available: true
         }
-    }
+    },
+    streamApiURL: String("https://apistream.snapcall.io")
 };
 const $24075a5d702d64b3$export$3f94917203ab7078 = {
     init: ({ element: element , ...options })=>{
@@ -8554,7 +8784,9 @@ const $24075a5d702d64b3$export$3f94917203ab7078 = {
     generateToken: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).generateToken.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
     addEventListener: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
     dispatchEvent: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).dispatchEvent.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
-    getState: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getState.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2))
+    getState: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getState.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
+    setProfile: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setProfile.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
+    /* Should not be documented */ setConfig: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setConfig.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2))
 };
 window.streamUI = $24075a5d702d64b3$export$3f94917203ab7078;
 // Backward compatibility