@snapcall/stream-ui 1.3.0 → 1.4.0

package/dist/stream-ui.js

@@ -9,6 +9,7 @@ var $jQDcL$uuid = require("uuid");
 var $jQDcL$protooclient = require("protoo-client");
 var $jQDcL$mediasoupclient = require("mediasoup-client");
 var $jQDcL$sentrybrowser = require("@sentry/browser");
+var $jQDcL$mediasoupclientlibProducer = require("mediasoup-client/lib/Producer");
 var $jQDcL$qrcode = require("qrcode");
 
 function $parcel$export(e, n, v, s) {
@@ -517,6 +518,7 @@ const $3575c8a563f2a1da$export$4a210166cc9cb64b = async (src)=>{
 
 
 
+
 const $1dedebd5ff3002eb$export$818d60b2e626da0c = {
     WEBRTC_FAILED: "WRTC1",
     WEBRTC_RECOVER_ERROR: "WRTC2",
@@ -531,7 +533,8 @@ const $1dedebd5ff3002eb$export$d21ffcc5eb136bfa = {
         },
         height: {
             ideal: 240
-        }
+        },
+        qualityIndex: 3
     },
     vga: {
         width: {
@@ -539,7 +542,8 @@ const $1dedebd5ff3002eb$export$d21ffcc5eb136bfa = {
         },
         height: {
             ideal: 480
-        }
+        },
+        qualityIndex: 2
     },
     hd: {
         width: {
@@ -547,7 +551,8 @@ const $1dedebd5ff3002eb$export$d21ffcc5eb136bfa = {
         },
         height: {
             ideal: 720
-        }
+        },
+        qualityIndex: 1
     }
 };
 const $1dedebd5ff3002eb$var$WEBCAM_SIMULCAST_ENCODINGS = [
@@ -574,19 +579,12 @@ const $1dedebd5ff3002eb$var$SCREEN_SHARING_SIMULCAST_ENCODINGS = [
         maxBitrate: 6000000
     }, 
 ];
-const $1dedebd5ff3002eb$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 $1dedebd5ff3002eb$var$SnapcallEvent extends CustomEvent {
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+    constructor(name, data){
+        super(name, data);
+    }
+}
 const $1dedebd5ff3002eb$var$StreamerEventTargetType = EventTarget;
 class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$StreamerEventTargetType {
     pendingDeviceRequest = {};
@@ -595,14 +593,19 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$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();
@@ -623,6 +626,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         this.screenshareProducer = null;
         this.customMessages = new Map();
         this.audioRenderers = {};
+        this.profile = {};
     }
     getState() {
         const peers = [];
@@ -648,14 +652,14 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$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
@@ -663,9 +667,10 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     }
     onStartSpeak() {
         if (this.micProducer && !this.micProducer.paused) {
-            const event = new CustomEvent("localStartSpeak", {
+            const event = new $1dedebd5ff3002eb$var$SnapcallEvent("localStartSpeak", {
                 cancelable: true,
-                bubbles: true
+                bubbles: true,
+                detail: {}
             });
             this.dispatchEvent(event);
             this.protoo.notify("startSpeak");
@@ -673,13 +678,15 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     }
     onStopSpeak() {
         if (this.micProducer && !this.micProducer.paused) {
-            const event = new CustomEvent("localStopSpeak");
+            const event = new $1dedebd5ff3002eb$var$SnapcallEvent("localStopSpeak", {
+                detail: {}
+            });
             this.dispatchEvent(event);
             this.protoo.notify("stopSpeak");
         }
     }
     onCriticalError(code) {
-        const event = new CustomEvent("criticalError", {
+        const event = new $1dedebd5ff3002eb$var$SnapcallEvent("criticalError", {
             detail: {
                 code: code
             }
@@ -687,7 +694,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$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: {
@@ -706,7 +713,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         if (!this.peerId) this.peerId = (0, $jQDcL$uuid.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"
@@ -715,9 +722,11 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$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 $1dedebd5ff3002eb$var$SnapcallEvent("invalidRoom", {
+                detail: {}
+            });
             this.dispatchEvent(event);
         }
         if (!url) throw new Error("Invalid socket URL");
@@ -743,17 +752,18 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$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 $1dedebd5ff3002eb$var$SnapcallEvent("newPeer", {
                     detail: {
                         peerId: id,
-                        displayName: displayName
+                        displayName: profile.name,
+                        profile: profile
                     }
                 });
                 this.dispatchEvent(event);
@@ -773,7 +783,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                         consumerId: consumer.id
                     });
                 });
-                const event = new CustomEvent("peerClosed", {
+                const event = new $1dedebd5ff3002eb$var$SnapcallEvent("peerClosed", {
                     detail: {
                         peerId: peerId
                     }
@@ -786,39 +796,60 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 });
             } else if (notification.method === "displayName") {
                 const { peerId: peerId , displayName: displayName  } = notification.data;
-                const event = new CustomEvent("displayName", {
+                const event = new $1dedebd5ff3002eb$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 $1dedebd5ff3002eb$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 $1dedebd5ff3002eb$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 $1dedebd5ff3002eb$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 $1dedebd5ff3002eb$var$SnapcallEvent(notification.method, {
                     detail: notification.data
                 });
                 this.dispatchEvent(event);
@@ -843,7 +874,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$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 $1dedebd5ff3002eb$var$SnapcallEvent("customMessage", {
                         detail: {
                             ...notification.data,
                             event: parsedEvent
@@ -902,7 +933,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 role: "auto"
             },
             sctpParameters: transportInfo.sctpParameters,
-            iceServers: this.iceServers,
+            iceServers: this.config.iceServers,
             proprietaryConstraints: {
                 optional: [
                     {
@@ -1009,11 +1040,11 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         }
         // now we join
         if (this.joinOptions.apiKey && this.joinOptions.email) try {
-            const agentInfo = await $1dedebd5ff3002eb$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 $1dedebd5ff3002eb$var$SnapcallEvent("agentIdentity", {
                 detail: {
                     success: true,
                     email: this.joinOptions.email
@@ -1021,7 +1052,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             }));
         } catch (agentInfoError) {
             console.warn(agentInfoError);
-            this.dispatchEvent(new CustomEvent("agentIdentity", {
+            this.dispatchEvent(new $1dedebd5ff3002eb$var$SnapcallEvent("agentIdentity", {
                 detail: {
                     success: false
                 }
@@ -1039,7 +1070,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 }, 
             ]));
         const callId = await this.getCallId();
-        this.dispatchEvent(new CustomEvent("enterRoom", {
+        this.dispatchEvent(new $1dedebd5ff3002eb$var$SnapcallEvent("enterRoom", {
             detail: {
                 peerId: this.peerId,
                 peers: peers.map((peer)=>{
@@ -1053,6 +1084,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$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({
@@ -1093,7 +1125,9 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         const producerId = this.micProducer?.id;
         this.micProducer?.close();
         this.micProducer = undefined;
-        const event = new CustomEvent("microphoneMute");
+        const event = new $1dedebd5ff3002eb$var$SnapcallEvent("microphoneMute", {
+            detail: {}
+        });
         this.dispatchEvent(event);
         await this.protoo.request("closeProducer", {
             producerId: producerId
@@ -1101,7 +1135,9 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     }
     async onDeviceChange() {
         console.log("detecting device change");
-        const deviceListChangeEvent = new CustomEvent("devicesListChange");
+        const deviceListChangeEvent = new $1dedebd5ff3002eb$var$SnapcallEvent("devicesListChange", {
+            detail: {}
+        });
         this.dispatchEvent(deviceListChangeEvent);
         if (!this.protoo.closed && this.micProducer) {
             const lists = await navigator.mediaDevices.enumerateDevices();
@@ -1128,7 +1164,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 }
                 console.log("detecting audio input change");
                 if (!this.audioInputDefaultDevice || this.audioInputDefaultDevice.label !== defaultDevice.label) {
-                    const event = new CustomEvent("defaultAudioDeviceChange", {
+                    const event = new $1dedebd5ff3002eb$var$SnapcallEvent("defaultAudioDeviceChange", {
                         detail: defaultDevice
                     });
                     this.audioInputDefaultDevice = defaultDevice;
@@ -1175,7 +1211,9 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             });
             this.micProducer = micProducer;
             this.muted = false;
-            const event = new CustomEvent("microphoneEnabled");
+            const event = new $1dedebd5ff3002eb$var$SnapcallEvent("microphoneEnabled", {
+                detail: {}
+            });
             this.dispatchEvent(event);
         }
     }
@@ -1187,7 +1225,9 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 producerId: this.micProducer?.id
             });
             this.muted = true;
-            const event = new CustomEvent("microphoneMute");
+            const event = new $1dedebd5ff3002eb$var$SnapcallEvent("microphoneMute", {
+                detail: {}
+            });
             this.dispatchEvent(event);
         }
     }
@@ -1199,7 +1239,9 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 producerId: this.micProducer.id
             });
             this.muted = false;
-            const event = new CustomEvent("microphoneUnmute");
+            const event = new $1dedebd5ff3002eb$var$SnapcallEvent("microphoneUnmute", {
+                detail: {}
+            });
             this.dispatchEvent(event);
         }
     }
@@ -1237,10 +1279,12 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     }
     endCall() {
         this.release();
-        const event = new CustomEvent("leaveRoom");
+        const event = new $1dedebd5ff3002eb$var$SnapcallEvent("leaveRoom", {
+            detail: {}
+        });
         this.dispatchEvent(event);
         const deprecatedEvent = new CustomEvent("snapcallEvent_callEnd");
-        this.dispatchEvent(deprecatedEvent);
+        window.dispatchEvent(deprecatedEvent);
     }
     terminateRoom() {
         this.protoo.request("terminateRoom");
@@ -1254,7 +1298,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$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 $1dedebd5ff3002eb$var$SnapcallEvent("webcamsUpdate", {
             detail: {
                 numberOfAvailableWebcams: this.webcams.size
             }
@@ -1311,7 +1355,16 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             });
         }
     }
-    scaleVideo() {
+    scaleVideoMediasConstraintsParameter(scale) {
+        let videoResolution = $1dedebd5ff3002eb$export$d21ffcc5eb136bfa["hd"];
+        if (scale === 2) videoResolution = $1dedebd5ff3002eb$export$d21ffcc5eb136bfa["vga"];
+        else if (scale > 2) videoResolution = $1dedebd5ff3002eb$export$d21ffcc5eb136bfa["qvga"];
+        if (!this.webcam.resolution || $1dedebd5ff3002eb$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)=>{
@@ -1327,10 +1380,12 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             if (videoCount >= 9) scale = {
                 scaleResolutionDownBy: 4
             };
+            if (!(0, $jQDcL$mediasoupclientlibProducer.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) {
@@ -1373,7 +1428,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             min: capabilities?.zoom?.min || 0,
             max: capabilities?.zoom?.max || 0
         };
-        const event = new CustomEvent("localVideoChange", {
+        const event = new $1dedebd5ff3002eb$var$SnapcallEvent("localVideoChange", {
             detail: {
                 camera: this.getCurrentWebcam()
             }
@@ -1415,14 +1470,14 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$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 $1dedebd5ff3002eb$var$SnapcallEvent("localVideoAvailable", {
             detail: {
                 camera: this.getCurrentWebcam()
             }
@@ -1463,7 +1518,9 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             producerId: this.webcamProducer.id
         });
         this.webcamProducer = null;
-        const event = new CustomEvent("localVideoUnavailable");
+        const event = new $1dedebd5ff3002eb$var$SnapcallEvent("localVideoUnavailable", {
+            detail: {}
+        });
         this.dispatchEvent(event);
     }
     async enableScreenshare() {
@@ -1506,7 +1563,9 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         this.screenshareProducer.on("trackended", ()=>{
             this.disableScreenshare().catch(()=>{});
         });
-        const event = new CustomEvent("screenshareEnabled");
+        const event = new $1dedebd5ff3002eb$var$SnapcallEvent("screenshareEnabled", {
+            detail: {}
+        });
         this.dispatchEvent(event);
     }
     async disableScreenshare() {
@@ -1517,7 +1576,9 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             });
             this.screenshareProducer = null;
         }
-        const event = new CustomEvent("screenshareDisabled");
+        const event = new $1dedebd5ff3002eb$var$SnapcallEvent("screenshareDisabled", {
+            detail: {}
+        });
         this.dispatchEvent(event);
     }
     onConsumerClose({ consumerId: consumerId  }) {
@@ -1530,19 +1591,21 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             });
             consumer.mediaSoupConsumer.close();
             this.consumers.delete(consumerId);
-            this.scaleVideo();
-            const event = new CustomEvent("consumerClose", {
+            this.scaleVideoEncodingsParameter();
+            const event = new $1dedebd5ff3002eb$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");
@@ -1624,11 +1687,11 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 mediaSoupConsumer: consumer,
                 deviceType: deviceType
             });
-            this.scaleVideo();
-            const event = new CustomEvent("newConsumer", {
+            this.scaleVideoEncodingsParameter();
+            const event = new $1dedebd5ff3002eb$var$SnapcallEvent("mediaStart", {
                 detail: {
                     peerId: peerId,
-                    consumerId: consumer.id,
+                    mediaId: consumer.id,
                     deviceType: deviceType,
                     paused: paused
                 }
@@ -1651,13 +1714,27 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$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 $1dedebd5ff3002eb$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 $1dedebd5ff3002eb$var$SnapcallEvent("selfProfileUpdate", {
+            detail: {
+                peerId: this.peerId,
+                profile: this.profile
             }
         });
         this.dispatchEvent(event);
@@ -1750,16 +1827,13 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$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 $1dedebd5ff3002eb$var$SnapcallEvent("localVideoChange", {
                 detail: {
                     camera: this.getCurrentWebcam()
                 }
@@ -1796,6 +1870,25 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$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
+        };
+    }
 }
 
 
@@ -1819,7 +1912,7 @@ let $a4027a5418fcd07a$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";
 })($a4027a5418fcd07a$export$96a9662a3eda31f6 || ($a4027a5418fcd07a$export$96a9662a3eda31f6 = {}));
 const $a4027a5418fcd07a$export$7fc21eab2c971c9c = {
@@ -1851,7 +1944,7 @@ const $a4027a5418fcd07a$export$43fc78ab8758f39 = (state, action)=>{
             };
         case $a4027a5418fcd07a$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)=>{
@@ -1860,7 +1953,7 @@ const $a4027a5418fcd07a$export$43fc78ab8758f39 = (state, action)=>{
                             if (device === "microphone") muted = paused;
                             return {
                                 ...stream,
-                                [device]: available ? consumerId : null,
+                                [device]: available ? mediaId : null,
                                 muted: muted
                             };
                         }
@@ -1900,13 +1993,13 @@ const $a4027a5418fcd07a$export$43fc78ab8758f39 = (state, action)=>{
                 ...state,
                 highlightedTile: null
             };
-        case $a4027a5418fcd07a$export$96a9662a3eda31f6.SET_STREAM_DISPLAY_NAME:
+        case $a4027a5418fcd07a$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;
                 })
@@ -3178,13 +3271,23 @@ const $66c45b20958474ec$export$f6525863ef5a71a9 = (0, ($parcel$interopDefault($j
   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 $66c45b20958474ec$export$a7a74ab5cffd1455 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).img`
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  object-fit: cover;
 `;
 const $66c45b20958474ec$export$f217faec90120a0c = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
   display: flex;
@@ -3263,11 +3366,6 @@ const $66c45b20958474ec$export$a2930b41faa750f4 = (0, ($parcel$interopDefault($j
   line-height: 20px;
   color: #fff;
 `;
-const $66c45b20958474ec$export$2d75367b6e042d67 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).img`
-  width: inherit;
-  height: inherit;
-  border-radius: inherit;
-`;
 const $66c45b20958474ec$export$26fe7ec9351ff761 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).img`
   border: 2px solid #fff;
   border-radius: 8px;
@@ -3508,6 +3606,17 @@ const $2c45d365ee8aa1ab$export$500c3c5544c37412 = (0, ($parcel$interopDefault($j
   font-weight: 700;
   line-height: 13px;
 `;
+const $2c45d365ee8aa1ab$export$88248b9be937544a = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  line-height: 15px;
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+`;
 
 
 
@@ -3526,7 +3635,7 @@ const $07e749066c746c7c$var$StreamTile = ({ stream: stream , width: width = 0 ,
     const { highlightedTile: highlightedTile  } = (0, $3f6e908c45fcc5b3$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%";
@@ -3548,7 +3657,7 @@ const $07e749066c746c7c$var$StreamTile = ({ stream: stream , width: width = 0 ,
     (0, $jQDcL$react.useEffect)(()=>{
         if (!videoElementRef.current) throw new Error("videoElementRef not available");
         if (stream.webcam && videoElementRef.current) (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).requestVideo({
-            consumerId: stream.webcam,
+            mediaId: stream.webcam,
             element: videoElementRef.current
         });
         else if (!stream.webcam) videoElementRef.current.srcObject = null;
@@ -3579,7 +3688,7 @@ const $07e749066c746c7c$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, ($parcel$interopDefault($jQDcL$reacthottoast)))(message, {
                         className: "error"
                     });
@@ -3592,7 +3701,7 @@ const $07e749066c746c7c$var$StreamTile = ({ stream: stream , width: width = 0 ,
         };
     }, [
         stream.id,
-        stream.displayName
+        stream.profile
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
         const onCustomMessage = async (event)=>{
@@ -3605,8 +3714,7 @@ const $07e749066c746c7c$var$StreamTile = ({ stream: stream , width: width = 0 ,
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("customMessage", onCustomMessage);
         };
     }, [
-        stream.id,
-        stream.displayName
+        stream.id
     ]);
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $66c45b20958474ec$export$798352b46783b18d), {
         onMouseEnter: onMouseEnter,
@@ -3686,24 +3794,25 @@ const $07e749066c746c7c$var$StreamTile = ({ stream: stream , width: width = 0 ,
                 ]
             }),
             !requestingDevice && !showRequestDevice && !stream.webcam && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$f217faec90120a0c), {
-                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $66c45b20958474ec$export$6ddfb572d7b6d164), {
-                    children: [
-                        stream.displayName && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$a2930b41faa750f4), {
-                            children: stream.displayName.slice(0, 1).toUpperCase()
-                        }),
-                        !stream.displayName && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0319693440f03062$export$2e2bcd8739ae039), {})
-                    ]
+                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$6ddfb572d7b6d164), {
+                    children: stream.profile.image ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$a7a74ab5cffd1455), {
+                        src: stream.profile.image
+                    }) : stream.profile.name ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$a2930b41faa750f4), {
+                        children: stream.profile.name.slice(0, 1).toUpperCase()
+                    }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0319693440f03062$export$2e2bcd8739ae039), {})
                 })
             }),
             !showRequestDevice && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $66c45b20958474ec$export$a878cdfb933a1421), {
                 children: [
                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$f6525863ef5a71a9), {
-                        children: stream.displayName ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
-                            children: stream.displayName.slice(0, 1).toUpperCase()
+                        children: stream.profile.image ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$a7a74ab5cffd1455), {
+                            src: stream.profile.image
+                        }) : stream.profile.name ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
+                            children: stream.profile.name.slice(0, 1).toUpperCase()
                         }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0319693440f03062$export$2e2bcd8739ae039), {})
                     }),
                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$b430fec6b171ceb5), {
-                        children: stream.displayName || "User"
+                        children: stream.profile.name || "User"
                     })
                 ]
             })
@@ -3776,10 +3885,10 @@ const $dc81c0e96fbbb967$var$AudioTile = ({ stream: stream  })=>{
         children: [
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $52dcfd8b6b2d6e61$export$235e35bd03f702fb), {
                 children: [
-                    stream.displayName && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$a2930b41faa750f4), {
-                        children: stream.displayName.slice(0, 1).toUpperCase()
+                    stream.profile.name && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$a2930b41faa750f4), {
+                        children: stream.profile.name.slice(0, 1).toUpperCase()
                     }),
-                    !stream.displayName && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0319693440f03062$export$2e2bcd8739ae039), {}),
+                    !stream.profile.name && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0319693440f03062$export$2e2bcd8739ae039), {}),
                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $52dcfd8b6b2d6e61$export$95156eef6a2de99c), {
                         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0ac48791ff0bcc8e$export$2e2bcd8739ae039), {
                             redSlash: !isMicrophoneActive
@@ -3788,7 +3897,7 @@ const $dc81c0e96fbbb967$var$AudioTile = ({ stream: stream  })=>{
                 ]
             }),
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $52dcfd8b6b2d6e61$export$a87ec69641e9884), {
-                children: stream.displayName
+                children: stream.profile.name
             })
         ]
     });
@@ -3826,7 +3935,7 @@ const $6f36db3b1217f099$var$Cross = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.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"
         })
     });
@@ -3969,7 +4078,7 @@ const $379218382afed0e6$var$DeviceRequest = ({ device: device , requesterId: req
                 }),
                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $2c45d365ee8aa1ab$export$517ec31e58d61d2e), {
                     children: [
-                        requesterStream?.displayName || "Someone",
+                        requesterStream?.profile?.name || "Someone",
                         " would like you to share your",
                         " ",
                         $379218382afed0e6$var$deviceNames[device]
@@ -4171,7 +4280,7 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
     const videoElementRef = (0, $jQDcL$react.useRef)(null);
     const videoMediaProviderRef = (0, $jQDcL$react.useRef)(null);
     const SelfTileRef = (0, $jQDcL$react.useRef)(null);
-    const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , selfDisplayName: selfDisplayName , muted: muted , streaming: streaming , orientation: orientation ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , profile: profile , muted: muted , streaming: streaming , orientation: orientation , options: options ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $3f6e908c45fcc5b3$export$b5633a7cfbe42d9f)();
     const [containerWidth, containerHeight] = (0, $56e1e7a85d8bf4bb$export$2b86bedf890eab8)(videosContainerRef.current);
     const isAlone = streams.length < 1;
@@ -4223,7 +4332,7 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
             const base64Image = await (0, $c48c1ecc38fed4e9$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
@@ -4234,7 +4343,7 @@ const $8393b5c887e16c8c$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, $84c6cbcbb594d072$export$3a57e165650c636f)(notificationMessage, {
                     icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $2c45d365ee8aa1ab$export$26fe7ec9351ff761), {
                         src: base64Image
@@ -4254,7 +4363,6 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         if (SelfTileRef.current) (0, $4ee7c4b0b3646a08$export$ab7d69e250642927)({
             element: SelfTileRef.current
         });
-        if (deviceType === "screen") return;
         setDeviceRequest({
             device: deviceType,
             requesterId: peerId
@@ -4352,10 +4460,10 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
             !streaming && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$f217faec90120a0c), {
                 children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $66c45b20958474ec$export$6ddfb572d7b6d164), {
                     children: [
-                        selfDisplayName && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$a2930b41faa750f4), {
-                            children: selfDisplayName.slice(0, 1).toUpperCase()
+                        profile.name && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$a2930b41faa750f4), {
+                            children: profile.name.slice(0, 1).toUpperCase()
                         }),
-                        !selfDisplayName && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0319693440f03062$export$2e2bcd8739ae039), {})
+                        !profile.name && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0319693440f03062$export$2e2bcd8739ae039), {})
                     ]
                 })
             }),
@@ -4387,12 +4495,14 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
                                 onClick: onSnapshotClick,
                                 children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5dc09a23669bcbcf$export$c58e349a67ffa055), {})
                             }),
-                            zoomAvailable && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $2c45d365ee8aa1ab$export$e07ea3386b3cb3d9), {
+                            zoomAvailable && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $2c45d365ee8aa1ab$export$e07ea3386b3cb3d9), {
                                 onClick: onZoomClick,
-                                children: [
-                                    zoom ? "2" : "1",
-                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6f36db3b1217f099$export$2e2bcd8739ae039), {})
-                                ]
+                                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $2c45d365ee8aa1ab$export$88248b9be937544a), {
+                                    children: [
+                                        zoom ? "2" : "1",
+                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6f36db3b1217f099$export$2e2bcd8739ae039), {})
+                                    ]
+                                })
                             }),
                             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
                                 style: {
@@ -4477,12 +4587,12 @@ const $6e25dd2638faaf71$var$ScreenshareTile = (tile)=>{
     const videoElementRef = (0, $jQDcL$react.useRef)(null);
     const isSelf = tile.peerId === selfPeerId;
     (0, $jQDcL$react.useEffect)(()=>{
-        if (tile.data.consumerId && videoElementRef.current) (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).requestVideo({
-            consumerId: tile.data.consumerId,
+        if (tile.data.mediaId && videoElementRef.current) (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).requestVideo({
+            mediaId: tile.data.mediaId,
             element: videoElementRef.current
         });
     }, [
-        tile.data.consumerId
+        tile.data.mediaId
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
         if (isSelf && videoElementRef.current) {
@@ -4860,12 +4970,20 @@ const $65992ea9297d23d9$export$a06f1c675e846f6f = (0, ($parcel$interopDefault($j
   justify-content: center;
 `;
 const $65992ea9297d23d9$export$f9985cea9f8ad92f = (0, ($parcel$interopDefault($jQDcL$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 $65992ea9297d23d9$export$26fe7ec9351ff761 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).img`
   border: 2px solid #fff;
@@ -4995,8 +5113,8 @@ const $1c0fa9be050932fe$var$ScreenshareEvents = ()=>{
     const { dispatch: dispatch , highlightedTile: highlightedTile  } = (0, $3f6e908c45fcc5b3$export$b5633a7cfbe42d9f)();
     (0, $jQDcL$react.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, $a4027a5418fcd07a$export$96a9662a3eda31f6).SET_HIGHLIGHTED_TILE,
                 payload: {
@@ -5004,7 +5122,7 @@ const $1c0fa9be050932fe$var$ScreenshareEvents = ()=>{
                     peerId: peerId,
                     isGlobal: true,
                     data: {
-                        consumerId: consumerId
+                        mediaId: mediaId
                     }
                 }
             });
@@ -5029,13 +5147,13 @@ const $1c0fa9be050932fe$var$ScreenshareEvents = ()=>{
                 type: (0, $a4027a5418fcd07a$export$96a9662a3eda31f6).UNSET_HIGHLIGHTED_TILE
             });
         };
-        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("newConsumer", onRemoteScreensharingUpdate);
-        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("consumerClose", onRemoteScreensharingUpdate);
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("mediaStart", onRemoteScreensharingUpdate);
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("mediaStop", onRemoteScreensharingUpdate);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("screenshareEnabled", onScreensharingUpdate);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("screenshareDisabled", onScreensharingUpdate);
         return ()=>{
-            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("newConsumer", onRemoteScreensharingUpdate);
-            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("consumerClose", onRemoteScreensharingUpdate);
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("mediaStart", onRemoteScreensharingUpdate);
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("mediaStop", onRemoteScreensharingUpdate);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("screenshareEnabled", onScreensharingUpdate);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("screenshareDisabled", onScreensharingUpdate);
         };
@@ -5107,15 +5225,15 @@ const $e447bd93acbe2b63$var$SnapshotEvents = ()=>{
             if (type === "snapshot") {
                 const sender = streams.find((stream)=>stream.id === peerId);
                 if (sender) {
-                    const statusIcon = sender.displayName ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $65992ea9297d23d9$export$49ac927a2aaad85), {
-                        children: sender.displayName.slice(0, 1).toUpperCase()
+                    const statusIcon = sender.profile.name ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $65992ea9297d23d9$export$49ac927a2aaad85), {
+                        children: sender.profile.name.slice(0, 1).toUpperCase()
                     }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $65992ea9297d23d9$export$49ac927a2aaad85), {
                         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0319693440f03062$export$2e2bcd8739ae039), {})
                     });
                     const createdAtDate = new Date();
                     const notificationStatus = {
                         text: "From",
-                        boldText: sender.displayName || "User",
+                        boldText: sender.profile.name || "User",
                         icon: statusIcon
                     };
                     (0, $84c6cbcbb594d072$export$3a57e165650c636f)("Snapshot shared.", {
@@ -5161,8 +5279,8 @@ const $e447bd93acbe2b63$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
                     });
                 }
             }
@@ -5353,7 +5471,7 @@ var $537dcc6df507dc4a$export$2e2bcd8739ae039 = $537dcc6df507dc4a$var$tooltip;
 
 
 const $88b23a8428e67b66$var$Video = ()=>{
-    const { selfPeerId: selfPeerId , videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , options: options , muted: selfMuted , selfDisplayName: selfDisplayName , orientation: orientation , userInteractionTriggered: userInteractionTriggered ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const { selfPeerId: selfPeerId , videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , options: options , muted: selfMuted , profile: profile1 , orientation: orientation , userInteractionTriggered: userInteractionTriggered ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const [tileSize, setTileSize] = (0, $jQDcL$react.useState)({
         width: 0,
         height: 0
@@ -5403,32 +5521,32 @@ const $88b23a8428e67b66$var$Video = ()=>{
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
         const onNewPeer = (event)=>{
-            const { peerId: peerId , displayName: displayName  } = event.detail;
+            const { peerId: peerId , profile: profile  } = event.detail;
             dispatch({
                 type: (0, $a4027a5418fcd07a$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, $a4027a5418fcd07a$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, $a4027a5418fcd07a$export$96a9662a3eda31f6).MUTE,
                 payload: {
@@ -5446,7 +5564,7 @@ const $88b23a8428e67b66$var$Video = ()=>{
             const { peers: peers  } = event.detail;
             const roomStreams = peers.map((peer)=>({
                     id: peer.peerId,
-                    displayName: peer.displayName
+                    profile: peer.profile
                 }));
             dispatch({
                 type: (0, $a4027a5418fcd07a$export$96a9662a3eda31f6).SET_STREAMS,
@@ -5462,13 +5580,13 @@ const $88b23a8428e67b66$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, $a4027a5418fcd07a$export$96a9662a3eda31f6).SET_STREAM_DISPLAY_NAME,
+                type: (0, $a4027a5418fcd07a$export$96a9662a3eda31f6).SET_STREAM_PROFILE,
                 payload: {
                     streamId: peerId,
-                    displayName: displayName
+                    profile: profile
                 }
             });
         };
@@ -5486,22 +5604,22 @@ const $88b23a8428e67b66$var$Video = ()=>{
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("newPeer", onNewPeer);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("peerClosed", onPeerClosed);
-        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("newConsumer", onConsumerUpdate);
-        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("consumerClose", onConsumerUpdate);
-        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("producerPaused", onProducerUpdate);
-        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("producerResumed", onProducerUpdate);
-        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("displayName", onDisplayName);
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("mediaStart", onMediaEvent);
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("mediaStop", onMediaEvent);
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("mediaPause", onMediaStateChange);
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("mediaResume", onMediaStateChange);
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("profileUpdate", onProfileUpdate);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("peerStartSpeak", onPeerSpeakingUpdate);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("peerStopSpeak", onPeerSpeakingUpdate);
         return ()=>{
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("enterRoom", onEnterRoom);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("newPeer", onNewPeer);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("peerClosed", onPeerClosed);
-            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("newConsumer", onConsumerUpdate);
-            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("consumerClose", onConsumerUpdate);
-            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("producerPaused", onProducerUpdate);
-            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("producerResumed", onProducerUpdate);
-            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("displayName", onDisplayName);
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("mediaStart", onMediaEvent);
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("mediaStop", onMediaEvent);
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("mediaPause", onMediaStateChange);
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("mediaResume", onMediaStateChange);
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("profileUpdate", onProfileUpdate);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("peerStartSpeak", onPeerSpeakingUpdate);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("peerStopSpeak", onPeerSpeakingUpdate);
         };
@@ -5531,7 +5649,7 @@ const $88b23a8428e67b66$var$Video = ()=>{
                         stream: {
                             id: String(selfPeerId),
                             muted: selfMuted,
-                            displayName: selfDisplayName
+                            profile: profile1
                         }
                     }),
                     streams.map((stream)=>{
@@ -6076,7 +6194,7 @@ const $b387679730856fb1$export$51760c3b0f5567d2 = (0, ($parcel$interopDefault($j
 const $681806ce8015ae4d$var$QuickConnect = ()=>{
     const QuickConnectContainerRef = (0, $jQDcL$react.useRef)(null);
     const QuickConnectRef = (0, $jQDcL$react.useRef)(null);
-    const { selfPeerId: selfPeerId , selfDisplayName: selfDisplayName , isQuickConnectPopupVisible: isQuickConnectPopupVisible , setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , options: options , orientation: orientation ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const { selfPeerId: selfPeerId , profile: profile , isQuickConnectPopupVisible: isQuickConnectPopupVisible , setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , options: options , orientation: orientation ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     (0, $326cea7dbbcb019a$export$71b2224f1ce5e08e)(QuickConnectContainerRef, ()=>{
         if (isQuickConnectPopupVisible) setIsQuickConnectPopupVisible(false);
     });
@@ -6092,13 +6210,13 @@ const $681806ce8015ae4d$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, $jQDcL$react.useEffect)(()=>{
@@ -6127,8 +6245,12 @@ const $681806ce8015ae4d$var$QuickConnect = ()=>{
                 (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).sendCustomMessage(quickConnectParam, {
                     type: "quick_connect_close"
                 });
-                if (quickConnectNameParam) (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setDisplayName(`${quickConnectNameParam} (mobile)`);
-                else (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setDisplayName("Mobile");
+                if (quickConnectNameParam) (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setProfile({
+                    name: `${quickConnectNameParam} (mobile)`
+                });
+                else (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setProfile({
+                    name: "Mobile"
+                });
             }
         }
     }, [
@@ -6341,8 +6463,10 @@ const $5f1594faf2dff407$export$db1aade9877208c7 = (0, ($parcel$interopDefault($j
   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 {
@@ -6487,39 +6611,48 @@ var $54c346ed2df7d69f$export$2e2bcd8739ae039 = $54c346ed2df7d69f$var$LanguageSub
 
 
 
+
+
 const $96bb6d4b0a403c60$var$AudioSubMenu = ({ back: back  })=>{
-    const [micDevices, setMicDevices] = (0, $jQDcL$react.useState)([]);
-    const [currentMic, setCurrentMic] = (0, $jQDcL$react.useState)(null);
-    const [speakerDevices, setSpeakerDevices] = (0, $jQDcL$react.useState)([]);
-    const [currentSpeaker, setCurrentSpeaker] = (0, $jQDcL$react.useState)(null);
-    const canChangeSpeakers = speakerDevices.length > 0 && "setSinkId" in HTMLAudioElement.prototype;
-    const listDevices = ()=>(0, $c48c1ecc38fed4e9$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, $jQDcL$react.useCallback)(async (mic)=>{
+    const [audioDevices, setAudioDevices] = (0, $jQDcL$react.useState)([]);
+    const [currentMic, setCurrentMic] = (0, $jQDcL$react.useState)();
+    const [currentSpeaker, setCurrentSpeaker] = (0, $jQDcL$react.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, $c48c1ecc38fed4e9$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, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).switchMicrophone(mic.deviceId);
         setCurrentMic(mic);
-        (0, $84c6cbcbb594d072$export$3a57e165650c636f)(`Connected to ${mic.label}`);
-    }, [
-        currentMic
-    ]);
-    const onSpeakerClick = (0, $jQDcL$react.useCallback)((speaker)=>{
+        (0, $84c6cbcbb594d072$export$3a57e165650c636f)(`Connected to ${mic.label}`, {
+            duration: 3000,
+            icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0ac48791ff0bcc8e$export$2e2bcd8739ae039), {}),
+            messageStyle: {
+                fontWeight: 600
+            }
+        });
+    };
+    const onSpeakerClick = (speaker)=>{
         if (currentSpeaker?.deviceId === speaker.deviceId) return;
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setAudioSink(speaker.deviceId);
         setCurrentSpeaker(speaker);
-        (0, $84c6cbcbb594d072$export$3a57e165650c636f)(`Connected to ${speaker.label}`);
-    }, [
-        currentSpeaker
-    ]);
+        (0, $84c6cbcbb594d072$export$3a57e165650c636f)(`Connected to ${speaker.label}`, {
+            duration: 3000,
+            icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $802dd6755664a000$export$2e2bcd8739ae039), {}),
+            messageStyle: {
+                fontWeight: 600
+            }
+        });
+    };
     (0, $jQDcL$react.useEffect)(()=>{
         listDevices();
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("devicesListChange", listDevices);
@@ -6540,61 +6673,64 @@ const $96bb6d4b0a403c60$var$AudioSubMenu = ({ back: back  })=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$b286f91cddfedb5a), {
-                children: [
-                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$38050e761cbb2b1d), {
-                        children: [
-                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$5caf84ac7a22e7b5), {
-                                children: "Microphone"
-                            }),
-                            canChangeSpeakers && micDevices.map((mic)=>{
-                                const checked = mic.deviceId === currentMic?.deviceId;
-                                return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$db1aade9877208c7), {
-                                    onClick: ()=>onMicClick(mic),
-                                    children: [
-                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$f132d77f01dce0a3), {
-                                            children: mic.label
-                                        }),
-                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
-                                            children: checked && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $41e530447f5fd995$export$2e2bcd8739ae039), {})
-                                        })
-                                    ]
-                                }, mic.deviceId);
-                            }),
-                            !canChangeSpeakers && micDevices.length < 1 && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$87d6be27a51dc3c4), {
-                                children: [
-                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$30ccd51431e4a7b0), {
-                                        children: "Microphone is blocked."
-                                    }),
-                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$73afb47ae3e10bf1), {
-                                        children: "Please accept microphone sharing before accessing these options."
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    canChangeSpeakers && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$38050e761cbb2b1d), {
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$b286f91cddfedb5a), {
+                children: isMicrophoneAccessBlocked ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$38050e761cbb2b1d), {
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$87d6be27a51dc3c4), {
                         children: [
-                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$5caf84ac7a22e7b5), {
-                                children: "Speakers"
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$30ccd51431e4a7b0), {
+                                children: "Microphone is blocked."
                             }),
-                            speakerDevices.map((speaker)=>{
-                                const checked = speaker.deviceId === currentSpeaker?.deviceId;
-                                return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$db1aade9877208c7), {
-                                    onClick: ()=>onSpeakerClick(speaker),
-                                    children: [
-                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$f132d77f01dce0a3), {
-                                            children: speaker.label
-                                        }),
-                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
-                                            children: checked && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $41e530447f5fd995$export$2e2bcd8739ae039), {})
-                                        })
-                                    ]
-                                }, speaker.deviceId);
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$73afb47ae3e10bf1), {
+                                children: "Please accept microphone sharing before accessing these options."
                             })
                         ]
                     })
-                ]
+                }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
+                    children: [
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$38050e761cbb2b1d), {
+                            children: [
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$5caf84ac7a22e7b5), {
+                                    children: "Microphone"
+                                }),
+                                microphoneDevices.map((microphone)=>{
+                                    const checked = microphone.deviceId === currentMic?.deviceId;
+                                    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$db1aade9877208c7), {
+                                        onClick: ()=>onMicClick(microphone),
+                                        children: [
+                                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$f132d77f01dce0a3), {
+                                                children: microphone.label
+                                            }),
+                                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
+                                                children: checked && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $41e530447f5fd995$export$2e2bcd8739ae039), {})
+                                            })
+                                        ]
+                                    }, microphone.deviceId);
+                                })
+                            ]
+                        }),
+                        canChangeSpeakers && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$38050e761cbb2b1d), {
+                            children: [
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$5caf84ac7a22e7b5), {
+                                    children: "Speakers"
+                                }),
+                                speakerDevices.map((speaker)=>{
+                                    const checked = speaker.deviceId === currentSpeaker?.deviceId;
+                                    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$db1aade9877208c7), {
+                                        onClick: ()=>onSpeakerClick(speaker),
+                                        children: [
+                                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$f132d77f01dce0a3), {
+                                                children: speaker.label
+                                            }),
+                                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
+                                                children: checked && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $41e530447f5fd995$export$2e2bcd8739ae039), {})
+                                            })
+                                        ]
+                                    }, speaker.deviceId);
+                                })
+                            ]
+                        })
+                    ]
+                })
             })
         ]
     });
@@ -6610,6 +6746,7 @@ var $96bb6d4b0a403c60$export$2e2bcd8739ae039 = $96bb6d4b0a403c60$var$AudioSubMen
 
 
 
+
 const $097072919b56b62a$var$resolutions = Object.keys((0, $1dedebd5ff3002eb$export$d21ffcc5eb136bfa)).map((key)=>{
     const constraints = (0, $1dedebd5ff3002eb$export$d21ffcc5eb136bfa);
     switch(constraints[key].height.ideal){
@@ -6625,7 +6762,7 @@ const $097072919b56b62a$var$resolutions = Object.keys((0, $1dedebd5ff3002eb$expo
             };
         case 720:
             return {
-                name: "Hight definition (720p)",
+                name: "High definition (720p)",
                 key: key
             };
         default:
@@ -6636,36 +6773,34 @@ const $097072919b56b62a$var$resolutions = Object.keys((0, $1dedebd5ff3002eb$expo
     }
 }).filter((def)=>def.name !== "");
 const $097072919b56b62a$var$VideoSubMenu = ({ back: back  })=>{
-    const [cameraDevices, setCameraDevices] = (0, $jQDcL$react.useState)(Array.from((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getWebcamsList().values()).filter((device)=>device.deviceId));
+    const [cameraDevices, setCameraDevices] = (0, $jQDcL$react.useState)([]);
     const [currentCamera, setCurrentCamera] = (0, $jQDcL$react.useState)((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getCurrentWebcam());
+    const isCameraAccessBlocked = cameraDevices.length && cameraDevices.every((device)=>device.deviceId === "");
     const listDevices = async ()=>{
-        const devices = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).listVideoDevices();
-        const authorisedCameras = devices.filter((device)=>device.deviceId);
-        if (authorisedCameras.length > 0) setCameraDevices(authorisedCameras);
+        const videoDevices = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).listVideoDevices();
+        setCameraDevices(videoDevices);
     };
     const onCameraClick = async (camera)=>{
         if (currentCamera.device?.deviceId === camera.deviceId) return;
-        if (currentCamera.device) {
-            await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).switchWebcam({
-                device: camera
-            });
-            (0, $84c6cbcbb594d072$export$3a57e165650c636f)(`Connected to ${camera.label}`, {
-                duration: 3000
-            });
-        } else {
-            await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableVideo({
-                device: camera,
-                resolution: currentCamera.resolution
-            });
-            (0, $84c6cbcbb594d072$export$3a57e165650c636f)(`Connected to ${camera.label}`, {
-                duration: 3000
-            });
-        }
+        if (currentCamera.device) await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).switchWebcam({
+            device: camera
+        });
+        else await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableVideo({
+            device: camera,
+            resolution: currentCamera.resolution
+        });
+        (0, $84c6cbcbb594d072$export$3a57e165650c636f)(`Connected to ${camera.label}`, {
+            duration: 3000,
+            icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ab00aedf8a706bfe$export$2e2bcd8739ae039), {}),
+            messageStyle: {
+                fontWeight: 600
+            }
+        });
     };
     const onSendResolutionClick = async (resolution)=>{
         if (currentCamera.resolution === resolution.key) return;
         await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setWebcamResolution(resolution.key);
-        (0, $84c6cbcbb594d072$export$3a57e165650c636f)(`Using ${resolution.name} resolution`, {
+        (0, $84c6cbcbb594d072$export$3a57e165650c636f)(resolution.name, {
             duration: 3000
         });
     };
@@ -6700,61 +6835,64 @@ const $097072919b56b62a$var$VideoSubMenu = ({ back: back  })=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$b286f91cddfedb5a), {
-                children: [
-                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$38050e761cbb2b1d), {
-                        children: [
-                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$5caf84ac7a22e7b5), {
-                                children: "Camera"
-                            }),
-                            cameraDevices.map((camera)=>{
-                                const checked = camera.deviceId === currentCamera.device?.deviceId;
-                                return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$db1aade9877208c7), {
-                                    onClick: ()=>onCameraClick(camera),
-                                    children: [
-                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$f132d77f01dce0a3), {
-                                            children: camera.label
-                                        }),
-                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
-                                            children: checked && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $41e530447f5fd995$export$2e2bcd8739ae039), {})
-                                        })
-                                    ]
-                                }, camera.deviceId);
-                            }),
-                            cameraDevices.length < 1 && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$87d6be27a51dc3c4), {
-                                children: [
-                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$30ccd51431e4a7b0), {
-                                        children: "Camera is blocked."
-                                    }),
-                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$73afb47ae3e10bf1), {
-                                        children: "Please accept camera sharing before accessing these options."
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$38050e761cbb2b1d), {
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$b286f91cddfedb5a), {
+                children: isCameraAccessBlocked ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$38050e761cbb2b1d), {
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$87d6be27a51dc3c4), {
                         children: [
-                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$5caf84ac7a22e7b5), {
-                                children: "Send Resolution (maximum)"
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$30ccd51431e4a7b0), {
+                                children: "Camera is blocked."
                             }),
-                            $097072919b56b62a$var$resolutions.map((resolution)=>{
-                                const checked = resolution.key === currentCamera.resolution;
-                                return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$db1aade9877208c7), {
-                                    onClick: ()=>onSendResolutionClick(resolution),
-                                    children: [
-                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$f132d77f01dce0a3), {
-                                            children: resolution.name
-                                        }),
-                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
-                                            children: checked && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $41e530447f5fd995$export$2e2bcd8739ae039), {})
-                                        })
-                                    ]
-                                }, resolution.key);
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$73afb47ae3e10bf1), {
+                                children: "Please accept camera sharing before accessing these options."
                             })
                         ]
                     })
-                ]
+                }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
+                    children: [
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$38050e761cbb2b1d), {
+                            children: [
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$5caf84ac7a22e7b5), {
+                                    children: "Camera"
+                                }),
+                                cameraDevices.map((camera)=>{
+                                    const checked = camera.deviceId === currentCamera.device?.deviceId;
+                                    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$db1aade9877208c7), {
+                                        onClick: ()=>onCameraClick(camera),
+                                        children: [
+                                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$f132d77f01dce0a3), {
+                                                children: camera.label
+                                            }),
+                                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
+                                                children: checked && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $41e530447f5fd995$export$2e2bcd8739ae039), {})
+                                            })
+                                        ]
+                                    }, camera.deviceId);
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$38050e761cbb2b1d), {
+                            children: [
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$5caf84ac7a22e7b5), {
+                                    children: "Send Resolution (maximum)"
+                                }),
+                                $097072919b56b62a$var$resolutions.map((resolution)=>{
+                                    const checked = resolution.key === currentCamera.resolution;
+                                    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5f1594faf2dff407$export$db1aade9877208c7), {
+                                        onClick: ()=>onSendResolutionClick(resolution),
+                                        children: [
+                                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5f1594faf2dff407$export$f132d77f01dce0a3), {
+                                                children: resolution.name
+                                            }),
+                                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
+                                                children: checked && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $41e530447f5fd995$export$2e2bcd8739ae039), {})
+                                            })
+                                        ]
+                                    }, resolution.key);
+                                })
+                            ]
+                        })
+                    ]
+                })
             })
         ]
     });
@@ -6969,7 +7107,8 @@ const $219bb3131afe1272$export$11781939bbc73f8b = (0, ($parcel$interopDefault($j
   }
 
   svg {
-    height: 13px;
+    width: 20px;
+    height: 21px;
   }
 `;
 const $219bb3131afe1272$export$7ae684a6a708b51d = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
@@ -6984,8 +7123,8 @@ const $219bb3131afe1272$export$7ae684a6a708b51d = (0, ($parcel$interopDefault($j
   padding: 0;
 
   svg {
-    height: 10px;
-    width: 10px;
+    height: 15px;
+    width: 15px;
 
     path {
       fill: #000;
@@ -7256,7 +7395,8 @@ const $2d8fe9775ff247d9$export$7563f0d47f114601 = (0, ($parcel$interopDefault($j
   }
 
   svg {
-    height: 13px;
+    width: 20px;
+    height: 20px;
   }
 `;
 const $2d8fe9775ff247d9$export$fcade06574a60ff0 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
@@ -7271,8 +7411,8 @@ const $2d8fe9775ff247d9$export$fcade06574a60ff0 = (0, ($parcel$interopDefault($j
   padding: 0;
 
   svg {
-    height: 10px;
-    width: 10px;
+    width: 15px;
+    height: 15px;
 
     path {
       fill: #000;
@@ -7414,7 +7554,7 @@ const $e38290b50aaba0e3$var$LinksharePopup = ()=>{
         if (type === $e38290b50aaba0e3$export$a1eac7fdbc2db4af) $e38290b50aaba0e3$var$sendLinkNotification(data);
         else if (type === "paypal_invoice") {
             const sender = streams.find((stream)=>stream.id === event.detail.peerId);
-            $e38290b50aaba0e3$var$sendPaypalInvoiceNotification(sender?.displayName, data.url);
+            $e38290b50aaba0e3$var$sendPaypalInvoiceNotification(sender?.profile?.name, data.url);
         }
     }, [
         streams
@@ -7447,7 +7587,7 @@ const $e38290b50aaba0e3$var$LinksharePopup = ()=>{
                         data: data
                     });
                 }
-                if (streams.length < 2) (0, ($parcel$interopDefault($jQDcL$reacthottoast)))(`Link sent to ${streams[0]?.displayName || "User"}`);
+                if (streams.length < 2) (0, ($parcel$interopDefault($jQDcL$reacthottoast)))(`Link sent to ${streams[0]?.profile?.name || "User"}`);
                 else (0, ($parcel$interopDefault($jQDcL$reacthottoast)))("Link sent to users");
                 setIsLinksharePopupVisible(false);
             } catch (err) {
@@ -8004,6 +8144,80 @@ var $e41262de25602ed2$export$2e2bcd8739ae039 = $e41262de25602ed2$var$SvgDefiniti
 
 
 
+
+
+const $71b731057ba65bc2$export$8bac64dfa46a096a = (0, ($parcel$interopDefault($jQDcL$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 $71b731057ba65bc2$export$f2f6e48f0181f95d = (0, ($parcel$interopDefault($jQDcL$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 $71b731057ba65bc2$export$b834616c6081368f = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).h2`
+  font-size: 16px;
+  font-weight: 700;
+  color: #242324;
+  margin: 0 0 10px 0;
+`;
+const $71b731057ba65bc2$export$12ed2ca69ff6905b = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).p`
+  font-size: 12px;
+  font-weight: 500;
+  color: #2d2d2d;
+  margin: 0 0 15px 0;
+`;
+const $71b731057ba65bc2$export$d39b0d24481757e7 = (0, ($parcel$interopDefault($jQDcL$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 $77862aeb490f36a3$var$BlockedDevicesPopup = ({ close: close  })=>{
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $71b731057ba65bc2$export$8bac64dfa46a096a), {
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $71b731057ba65bc2$export$f2f6e48f0181f95d), {
+            children: [
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $71b731057ba65bc2$export$b834616c6081368f), {
+                    children: "Camera and microphone are blocked"
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $71b731057ba65bc2$export$12ed2ca69ff6905b), {
+                    children: "SnapCall requires access to your camera and microphone. Click the camera blocked icon in your browser's address bar."
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $71b731057ba65bc2$export$d39b0d24481757e7), {
+                    onClick: close,
+                    children: "Dismiss"
+                })
+            ]
+        })
+    });
+};
+var $77862aeb490f36a3$export$2e2bcd8739ae039 = $77862aeb490f36a3$var$BlockedDevicesPopup;
+
+
 // https://github.com/video-dev/can-autoplay
 const $c3d5253d9d597eb5$var$audioSource = new Blob([
     new Uint8Array([
@@ -8315,6 +8529,7 @@ const $e3bb2c5d0e5b45b5$export$914ddf2021ea8ee6 = (0, ($parcel$interopDefault($j
 
 
 
+
 const $ee8cb448c2c74888$var$currentTheme = (0, $9295e87e6b93e693$export$3bfd0d5209a8006a)();
 const $ee8cb448c2c74888$var$currentLanguage = (0, $54c346ed2df7d69f$export$604ba5624273df44)();
 let $ee8cb448c2c74888$var$timestampCriticalError = -1;
@@ -8330,13 +8545,14 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
     const [isLinksharePopupVisible, setIsLinksharePopupVisible] = (0, $jQDcL$react.useState)(false);
     const [theme, setTheme] = (0, $jQDcL$react.useState)($ee8cb448c2c74888$var$currentTheme);
     const [language, setLanguage] = (0, $jQDcL$react.useState)($ee8cb448c2c74888$var$currentLanguage);
-    const [selfDisplayName, setSelfDisplayName] = (0, $jQDcL$react.useState)("");
+    const [profile1, setProfile] = (0, $jQDcL$react.useState)({});
     const [muted, setMuted] = (0, $jQDcL$react.useState)(true);
     const [streaming, setStreaming] = (0, $jQDcL$react.useState)(false);
     const [screensharing, setScreensharing] = (0, $jQDcL$react.useState)(false);
     const [isAgent, setIsAgent] = (0, $jQDcL$react.useState)(false);
     const [userInteractionTriggered, setUserInteractionTriggered] = (0, $jQDcL$react.useState)(false);
     const [containerWidth, containerHeight] = (0, $56e1e7a85d8bf4bb$export$2b86bedf890eab8)(streamUIContainerRef.current);
+    const [isBlockedDevicesPopupOpen, setBlockedDevicesPopupOpen] = (0, $jQDcL$react.useState)(false);
     const orientation = containerWidth > containerHeight ? "landscape" : "portrait";
     const styledTheme = theme === "dark" ? (0, $9295e87e6b93e693$export$3e936a8db52a10a0) : (0, $9295e87e6b93e693$export$f30cb9bc4f736419);
     const onEnterRoom = async (event)=>{
@@ -8346,6 +8562,7 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
             await (0, $c3d5253d9d597eb5$export$494039379563c94d)();
             setUserInteractionTriggered(true);
         } catch (userInteractionError) {
+            setBlockedDevicesPopupOpen(true);
             console.error("User interaction trigger failed", userInteractionError);
         }
     };
@@ -8363,11 +8580,17 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
     };
     const onDefaultAudioDeviceChange = (event)=>{
         const micro = event.detail.label;
-        (0, ($parcel$interopDefault($jQDcL$reacthottoast)))(`Connected to: ${micro}`);
+        (0, $84c6cbcbb594d072$export$3a57e165650c636f)(`Connected to ${micro}`, {
+            duration: 3000,
+            icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0ac48791ff0bcc8e$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, $c3d5253d9d597eb5$export$716eeec86fd18da7)();
@@ -8435,7 +8658,7 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("microphoneMute", onMicrophoneUpdate);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("microphoneUnmute", onMicrophoneUpdate);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("defaultAudioDeviceChange", onDefaultAudioDeviceChange);
-        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("selfDisplayName", onSelfDisplayNameUpdate);
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("selfProfileUpdate", onSelfProfileUpdate);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("terminateRoom", onCallTerminated);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("leaveRoom", onCallEnd);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("invalidRoom", onInvalidRoom);
@@ -8451,7 +8674,7 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("microphoneMute", onMicrophoneUpdate);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("microphoneUnmute", onMicrophoneUpdate);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("defaultAudioDeviceChange", onDefaultAudioDeviceChange);
-            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("selfDisplayName", onSelfDisplayNameUpdate);
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("selfProfileUpdate", onSelfProfileUpdate);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("terminateRoom", onCallTerminated);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("leaveRoom", onCallEnd);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("invalidRoom", onInvalidRoom);
@@ -8480,7 +8703,7 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
             language: language,
             setLanguage: setLanguage,
             options: options,
-            selfDisplayName: selfDisplayName,
+            profile: profile1,
             muted: muted,
             streaming: streaming,
             screensharing: screensharing,
@@ -8498,6 +8721,12 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
                     children: [
                         /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e66cc5db58913155$export$2e2bcd8739ae039), {}),
                         /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5dcd9e6925c7037c$export$2e2bcd8739ae039), {}),
+                        isBlockedDevicesPopupOpen && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $77862aeb490f36a3$export$2e2bcd8739ae039), {
+                            close: ()=>{
+                                setUserInteractionTriggered(true);
+                                setBlockedDevicesPopupOpen(false);
+                            }
+                        }),
                         streamState === "streaming" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactjsxruntime.Fragment), {
                             children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $3f6e908c45fcc5b3$export$74636703cfe1eecf), {
                                 children: [
@@ -8537,7 +8766,8 @@ const $e68207026aca356b$var$defaultOptions = {
         screenshare: {
             available: true
         }
-    }
+    },
+    streamApiURL: String("https://apistream.snapcall.io")
 };
 const $e68207026aca356b$export$3f94917203ab7078 = {
     init: ({ element: element , ...options })=>{
@@ -8562,7 +8792,9 @@ const $e68207026aca356b$export$3f94917203ab7078 = {
     generateToken: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).generateToken.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     addEventListener: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     dispatchEvent: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).dispatchEvent.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
-    getState: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2))
+    getState: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
+    setProfile: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setProfile.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
+    /* Should not be documented */ setConfig: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setConfig.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2))
 };
 window.streamUI = $e68207026aca356b$export$3f94917203ab7078;
 // Backward compatibility