@snapcall/stream-ui 1.6.0 → 1.8.0

package/dist/stream-ui.js

@@ -13,6 +13,7 @@ var $jQDcL$protooclient = require("protoo-client");
 var $jQDcL$sentrybrowser = require("@sentry/browser");
 var $jQDcL$mediasoupclientlibProducer = require("mediasoup-client/lib/Producer");
 var $jQDcL$mediasoupclient = require("mediasoup-client");
+var $jQDcL$mediapipeselfie_segmentation = require("@mediapipe/selfie_segmentation");
 var $jQDcL$qrcode = require("qrcode");
 
 function $parcel$interopDefault(a) {
@@ -365,6 +366,7 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
         },
         copyLink: {
             title: "Copy link",
+            description: "Copy link into clipboard",
             error: "An error occured when trying to copy to clipboard",
             copied: "Link copied to clipboard"
         },
@@ -396,8 +398,8 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
             sendResolution: "Send Resolution (maximum)"
         },
         shareLink: {
-            title: "Create link",
-            title2: "Create a link",
+            title: "Share link",
+            title2: "Share a link",
             invalid: "Invalid link",
             sentToUsers: "Link sent to users",
             sentToUser: "Link sent to {{user}}",
@@ -407,10 +409,10 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
             pay: "Pay"
         },
         youtube: {
-            title: "Embed YouTube",
+            title: "Watch Together",
             url: "YOUTUBE URL",
             invalid: "Invalid YouTube URL",
-            share: "Share video"
+            share: "Watch now"
         },
         sharedHistory: {
             shared: "Shared with you"
@@ -438,6 +440,10 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
             leaveCall: "Leave call",
             endCall: "End call for all"
         },
+        virtualBackground: {
+            title: "Virtual Background",
+            setBackground: "Set Background"
+        },
         misc: {
             someone: "Someone",
             camera: "Camera",
@@ -450,6 +456,20 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
             accept: "Accept",
             decline: "Decline",
             you: "You"
+        },
+        invite: {
+            title: "Share link to start a conversation",
+            copy: "Copy",
+            description: "You are currently the only participant. Invite people to start the conversation."
+        },
+        greeting: {
+            mainTitle: "Welcome to SnapCall",
+            sideTitle: "Are you ready to join?",
+            sideDescription: "Before joining the room, enter your name. It will displayed to participants.",
+            namePlaceholder: "Your name",
+            nameSubmit: "Join Conversation",
+            footerTitle: "Powered by SnapCall",
+            footerDescription: "Meet SnapCall, the easiest way to add real-time video to platform, product or service."
         }
     }
 };
@@ -491,6 +511,7 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
         },
         copyLink: {
             title: "Copier le lien",
+            description: "Copier le lien dans le presse-papiers",
             error: "Une erreur est survenue pendant la copie du lien dans le presse-papier",
             copied: "Lien copi\xe9 dans le presse-papier"
         },
@@ -533,10 +554,10 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
             pay: "Payer"
         },
         youtube: {
-            title: "YouTube",
+            title: "Regardons Ensemble",
             url: "URL YOUTUBE",
             invalid: "URL YouTube invalide",
-            share: "Partager la vid\xe9o"
+            share: "Regarder maintenant"
         },
         sharedHistory: {
             shared: "Partag\xe9 avec vous"
@@ -562,7 +583,11 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
         leave: {
             title: "Quitter",
             leaveCall: "Quitter l'appel",
-            endCall: "Terminer l'appel pour tout le monde"
+            endCall: "Terminer l'appel"
+        },
+        virtualBackground: {
+            title: "Arri\xe8re plan virtuel",
+            setBackground: "Mettre l'arri\xe8re plan"
         },
         misc: {
             someone: "Quelqu'un",
@@ -576,6 +601,20 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
             accept: "Accepter",
             decline: "D\xe9cliner",
             you: "Vous"
+        },
+        invite: {
+            title: "Partagez le lien pour commencer une conversation",
+            copy: "Copier",
+            description: "Vous \xeates actuellement le seul participant. Inviter des personnes pour commencer la conversation."
+        },
+        greeting: {
+            mainTitle: "Bienvenue sur SnapCall",
+            sideTitle: "Pr\xeat \xe0 rejoindre ?",
+            sideDescription: "Avant de rejoindre la salle, veuillez entrer votre nom.",
+            namePlaceholder: "Nom",
+            nameSubmit: "Rejoindre la conversation",
+            footerTitle: "Propuls\xe9 par SnapCall",
+            footerDescription: "D\xe9couvrez SnapCall, ajoutez de la vid\xe9o en temps r\xe9el \xe0 n'importe quelle plateforme, produit ou service."
         }
     }
 };
@@ -617,6 +656,7 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
         },
         copyLink: {
             title: "Copia il link",
+            description: "Copia il link negli appunti",
             error: "Si \xe8 verificato un errore durante la copia negli Appunti",
             copied: "Link copiato negli Appunti"
         },
@@ -659,10 +699,10 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
             pay: "Paga"
         },
         youtube: {
-            title: "YouTube",
+            title: "Vedere Assieme",
             url: "URL YOUTUBE",
             invalid: "URL YouTube non valido",
-            share: "Condividi il video"
+            share: "Guarda ora"
         },
         sharedHistory: {
             shared: "Condiviso con te"
@@ -690,6 +730,14 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
             leaveCall: "Lascia la chiamata",
             endCall: "Termina la chiamata per tutti"
         },
+        virtualBackground: {
+            title: "Sfondo virtuale",
+            setBackground: "Imposta sfondo"
+        },
+        virtualbackground: {
+            title: "Virtual Background",
+            setBackground: "Set Background"
+        },
         misc: {
             someone: "Qualcuno",
             camera: "Telecamera",
@@ -702,6 +750,20 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
             accept: "Accettare",
             decline: "Declinare",
             you: "Voi"
+        },
+        invite: {
+            title: "Condividi link per avviare una conversazione",
+            copy: "Copiare",
+            description: "Attualmente sei l'unico partecipante. Invita le persone ad iniziare la conversazione."
+        },
+        greeting: {
+            mainTitle: "Benvenuto a SnapCall",
+            sideTitle: "Sei pronto per unirti?",
+            sideDescription: "Prima di entrare nella stanza, inserisci il tuo nome. Verr\xe0 visualizzato ai partecipanti.",
+            namePlaceholder: "Il tuo nome",
+            nameSubmit: "Partecipa alla conversazione",
+            footerTitle: "Offerto da SnapCall",
+            footerDescription: "Incontrare SnapCall, il modo pi\xf9 semplice per aggiungere video in tempo reale a piattaforma, prodotto o servizio."
         }
     }
 };
@@ -1133,6 +1195,157 @@ class $a62e7f17be5cf3a0$export$2e2bcd8739ae039 {
 }
 
 
+
+
+const $cb913ea078a876a6$var$log = new (0, $d0c6baf97675ab49$export$2e2bcd8739ae039)("MediaPipe");
+const $cb913ea078a876a6$var$mediapipeUrl = "https://stream-assets.snapcall.io/v1.8.0";
+let $cb913ea078a876a6$var$selfieSegmentationInitialized = false;
+const $cb913ea078a876a6$var$selfieSegmentation = new $jQDcL$mediapipeselfie_segmentation.SelfieSegmentation({
+    locateFile: (file, prefix)=>{
+        $cb913ea078a876a6$var$log.debug("selfieSegmentation", file, prefix);
+        if ($cb913ea078a876a6$var$mediapipeUrl) return `${$cb913ea078a876a6$var$mediapipeUrl}/mediapipe/${file}`;
+        const url = window.location.href;
+        const path = url.split("/").slice(0, -1).join("/");
+        return `${path}/mediapipe/${file}`;
+    }
+});
+class $cb913ea078a876a6$export$2e2bcd8739ae039 {
+    fillColor = "#000000";
+    type = "blur";
+    live = false;
+    fps = 24;
+    blurLevel = 10;
+    timerWorker = new Worker(new URL("timer.7690fc0b.js", "file:" + __filename), {
+        name: "VirtualBackgroundTimerWorker"
+    });
+    constructor(stream, options){
+        this.stream = stream;
+        this.image = document.createElement("video");
+        this.image.style.display = "none";
+        this.image.setAttribute("autoplay", "");
+        this.image.setAttribute("playsinline", "");
+        this.image.setAttribute("muted", "");
+        this.canvas = document.createElement("canvas");
+        this.canvas.style.display = "none";
+        if (options) this.setOptions(options);
+    }
+    setOptions(options) {
+        this.setType(options.type);
+        this.setFillColor(options.fillColor || this.fillColor);
+        this.setVideoBackground(options.background);
+        this.setBlurLevel(options.blurLevel || this.blurLevel);
+    }
+    setType(type) {
+        this.type = type;
+    }
+    setBlurLevel(level) {
+        this.blurLevel = level;
+    }
+    setVideoBackground(data) {
+        this.background = data;
+    }
+    setFillColor(color) {
+        this.fillColor = color;
+    }
+    drawWithBlur(ctx, results) {
+        ctx.save();
+        ctx.drawImage(results.image, 0, 0, this.canvas.width, this.canvas.height);
+        ctx.globalCompositeOperation = "destination-atop";
+        ctx.drawImage(results.segmentationMask, 0, 0, this.canvas.width, this.canvas.height);
+        // Blur the context for all subsequent draws then set the raw image as the background
+        ctx.filter = `blur(${this.blurLevel}px)`;
+        ctx.globalCompositeOperation = "destination-over";
+        ctx.drawImage(results.image, 0, 0, this.canvas.width, this.canvas.height);
+        // Restore the context's blank state
+        ctx.restore();
+    }
+    drawWithBackground(ctx, results) {
+        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        ctx.drawImage(results.segmentationMask, 0, 0, this.canvas.width, this.canvas.height);
+        ctx.globalCompositeOperation = "source-out";
+        ctx.fillStyle = this.fillColor;
+        if (this.background) ctx.drawImage(this.background, 0, 0, this.canvas.width, this.canvas.height);
+        else ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        ctx.globalCompositeOperation = "destination-atop";
+        ctx.drawImage(results.image, 0, 0, this.canvas.width, this.canvas.height);
+        ctx.restore();
+    }
+    onFrame(results) {
+        this.canvas.width = results.image.width;
+        this.canvas.height = results.image.height;
+        const ctx = this.canvas.getContext("2d");
+        if (ctx) switch(this.type){
+            case "blur":
+                this.drawWithBlur(ctx, results);
+                break;
+            case "background":
+                this.drawWithBackground(ctx, results);
+                break;
+            default:
+                this.drawWithBlur(ctx, results);
+        }
+    }
+    runWithFrameCallback() {
+        if (this.live) this.image.requestVideoFrameCallback(()=>{
+            $cb913ea078a876a6$var$selfieSegmentation.send({
+                image: this.image
+            });
+            this.runWithFrameCallback();
+        });
+    }
+    async createStream() {
+        try {
+            const option = {
+                selfieMode: false,
+                modelSelection: 0
+            };
+            $cb913ea078a876a6$var$selfieSegmentation.setOptions(option);
+            $cb913ea078a876a6$var$log.log("selfie segmentation initialized");
+            if (!$cb913ea078a876a6$var$selfieSegmentationInitialized) {
+                await $cb913ea078a876a6$var$selfieSegmentation.initialize();
+                $cb913ea078a876a6$var$selfieSegmentationInitialized = true;
+            }
+            this.image.srcObject = this.stream;
+            this.image.onplay = async ()=>{
+                this.live = true;
+                try {
+                    $cb913ea078a876a6$var$selfieSegmentation.onResults((res)=>{
+                        this.onFrame(res);
+                    });
+                    this.timerWorker.onmessage = ()=>{
+                        $cb913ea078a876a6$var$selfieSegmentation.send({
+                            image: this.image
+                        });
+                    };
+                    this.timerWorker.postMessage({
+                        action: "start",
+                        params: this.fps
+                    });
+                } catch (err) {
+                    $cb913ea078a876a6$var$log.error("createStream:play", err);
+                }
+            };
+        } catch (err) {
+            console.error("createStream", err);
+        }
+        return this.canvas.captureStream();
+    }
+    clean() {
+        return new Promise((resolve)=>{
+            this.live = false;
+            clearInterval(this.runInterval);
+            this.image.srcObject = null;
+            this.stream.getTracks().forEach((track)=>{
+                track.stop();
+                this.stream.removeTrack(track);
+            });
+            this.timerWorker.terminate();
+            resolve();
+        });
+    }
+}
+
+
 const $1dedebd5ff3002eb$var$log = new (0, $d0c6baf97675ab49$export$2e2bcd8739ae039)("StreamerClient");
 const $1dedebd5ff3002eb$export$818d60b2e626da0c = {
     WEBRTC_FAILED: "WRTC1",
@@ -1202,8 +1415,16 @@ class $1dedebd5ff3002eb$var$SnapcallEvent extends CustomEvent {
     }
 }
 const $1dedebd5ff3002eb$var$StreamerEventTargetType = EventTarget;
+const $1dedebd5ff3002eb$var$defaultMediapipeOptions = {
+    background: undefined,
+    fillColor: "#ffffff",
+    type: "blur",
+    blurLevel: 10
+};
 class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$StreamerEventTargetType {
     mediasoupTransport = {};
+    mediaPipeOption = $1dedebd5ff3002eb$var$defaultMediapipeOptions;
+    useVideoBackground = false;
     pendingDeviceRequest = {};
     joinOptions = {};
     devicesList = [];
@@ -1563,10 +1784,15 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     async joinRoom() {
         this.streamerMediasoup = await (0, $a62e7f17be5cf3a0$export$2e2bcd8739ae039).create(this.protoo, this.config);
         // now we join
-        if (this.joinOptions.apiKey && this.joinOptions.email) try {
-            const agentInfo = await this.fetchAgentInfo({
-                apiKey: this.joinOptions.apiKey,
-                email: this.joinOptions.email
+        const { apiKey: apiKey , email: email  } = this.joinOptions;
+        if (apiKey) try {
+            let agentInfo = null;
+            if (apiKey && email) agentInfo = await this.fetchAgentInfo({
+                apiKey: apiKey,
+                email: email
+            });
+            else if (apiKey) agentInfo = await this.fetchUserInfo({
+                apiKey: apiKey
             });
             if (agentInfo) this.dispatchEvent(new $1dedebd5ff3002eb$var$SnapcallEvent("agentIdentity", {
                 detail: {
@@ -1583,8 +1809,8 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             }));
         }
         const { peers: peers  } = await this.protoo.request("getRoomPeers", {
-            apiKey: this.joinOptions.apiKey,
-            email: this.joinOptions.email
+            apiKey: apiKey,
+            email: email
         });
         this.peers = new Map(peers.map((peer)=>[
                 peer.id || peer.peerId,
@@ -1785,6 +2011,10 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     release() {
         $1dedebd5ff3002eb$var$log.log("release");
         for(let key in this.mediasoupTransport)this.closeWebrtcTransport(key);
+        if (this.mediaPipe) {
+            this.mediaPipe.clean();
+            this.mediaPipe = undefined;
+        }
         this.webcamTrack?.stop();
         this.webcamTrack = null;
         this.protooTransport.close();
@@ -1886,6 +2116,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         }
     }
     scaleVideoEncodingsParameter() {
+        if (this.useVideoBackground) return;
         try {
             let videoCount = 0;
             this.consumers.forEach((consumer)=>{
@@ -1913,6 +2144,24 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             $1dedebd5ff3002eb$var$log.error("scaleVideoEncodingsParameter", "scaleVideo error", error);
         }
     }
+    setVideoBackground(options) {
+        this.mediaPipe?.setOptions(options);
+        this.mediaPipeOption = options;
+    }
+    async initVideoBackground() {
+        if (this.useVideoBackground === true) return;
+        this.useVideoBackground = true;
+        if (!this.webcamProducer || this.webcamProducer.closed) return;
+        await this.switchWebcam({});
+    }
+    async stopVideoBackground() {
+        if (this.useVideoBackground === false) return;
+        this.useVideoBackground = false;
+        await this.mediaPipe?.clean();
+        this.mediaPipe = undefined;
+        if (!this.webcamProducer || this.webcamProducer.closed) return;
+        await this.switchWebcam({});
+    }
     async switchWebcam({ device: device , resolution: resolution , rotate: rotate  }) {
         if (!this.webcam.device) throw new Error("no webcam devices");
         if (rotate) {
@@ -1929,18 +2178,32 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             if (device) this.webcam.device = device;
             if (resolution) this.webcam.resolution = resolution;
         }
-        const stream = await this.handleGetUserMediaError("webcam", navigator.mediaDevices.getUserMedia({
+        let usedResolution = $1dedebd5ff3002eb$export$d21ffcc5eb136bfa[resolution || this.webcam.resolution];
+        if (this.useVideoBackground) usedResolution = {
+            width: {
+                ideal: 560
+            },
+            height: {
+                ideal: 400
+            },
+            qualityIndex: 2
+        };
+        const mediaStream = await this.handleGetUserMediaError("webcam", navigator.mediaDevices.getUserMedia({
             video: {
                 deviceId: {
                     ideal: this.webcam.device.deviceId
                 },
-                ...$1dedebd5ff3002eb$export$d21ffcc5eb136bfa[resolution || this.webcam.resolution]
+                ...usedResolution
             }
         }));
+        if (this.useVideoBackground) {
+            if (this.mediaPipe) await this.mediaPipe.clean();
+            this.mediaPipe = new (0, $cb913ea078a876a6$export$2e2bcd8739ae039)(mediaStream, this.mediaPipeOption);
+        }
+        const stream = await this.mediaPipe?.createStream() || mediaStream;
         const transport = await this.getTransport("video", "send");
         if (!transport) throw new Error("video transport not found, can not switch");
         const track = stream.getVideoTracks()[0];
-        this.webcamTrack = track;
         await this.webcamProducer?.replaceTrack?.({
             track: track
         });
@@ -1961,14 +2224,29 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         await this.updateWebcams();
         if (config?.device) this.webcam.device = config.device;
         if (!this.webcam.device) throw new Error("no webcam devices");
-        const stream = await this.handleGetUserMediaError("webcam", navigator.mediaDevices.getUserMedia({
+        let usedResolution = $1dedebd5ff3002eb$export$d21ffcc5eb136bfa[config?.resolution || this.webcam.resolution];
+        if (this.useVideoBackground) usedResolution = {
+            width: {
+                ideal: 560
+            },
+            height: {
+                ideal: 400
+            },
+            qualityIndex: 2
+        };
+        const mediaStream = await this.handleGetUserMediaError("webcam", navigator.mediaDevices.getUserMedia({
             video: {
                 deviceId: {
                     ideal: this.webcam.device.deviceId
                 },
-                ...$1dedebd5ff3002eb$export$d21ffcc5eb136bfa[config?.resolution || this.webcam.resolution]
+                ...usedResolution
             }
         }));
+        if (this.useVideoBackground) {
+            if (this.mediaPipe) await this.mediaPipe.clean();
+            this.mediaPipe = new (0, $cb913ea078a876a6$export$2e2bcd8739ae039)(mediaStream, this.mediaPipeOption);
+        }
+        const stream = await this.mediaPipe?.createStream() || mediaStream;
         await this.updateWebcams();
         const transport = await this.getTransport("video", "send");
         const track = stream.getVideoTracks()[0];
@@ -2128,6 +2406,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         }
     }
     requestVideo({ mediaId: mediaId , element: element  }) {
+        $1dedebd5ff3002eb$var$log.info("requestVideo");
         const consumer = this.consumers.get(mediaId);
         if (consumer) {
             const mediaStream = new MediaStream();
@@ -2145,6 +2424,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         return image;
     }
     requestLocalVideo(element) {
+        $1dedebd5ff3002eb$var$log.info("requestLocalVideo");
         if (this.webcamProducer) {
             const mediaStream = new MediaStream();
             mediaStream.addTrack(this.webcamProducer.track);
@@ -2408,6 +2688,19 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         });
         return agent;
     }
+    async fetchUserInfo({ apiKey: apiKey  }) {
+        const apiURL = this.config.apiUrl;
+        const user = await fetch(`${apiURL}/users/me`, {
+            method: "get",
+            headers: {
+                Authorization: `Bearer ${apiKey}`
+            }
+        }).then((response)=>{
+            if (response.ok) return response.json();
+            throw new Error("Invalid user info");
+        });
+        return user;
+    }
     setConfig(config) {
         this.config = {
             ...this.config,
@@ -2664,7 +2957,7 @@ const $cce7f1c9e9c29503$export$6546b255bd3a2004 = ()=>/*#__PURE__*/ (0, $jQDcL$r
             fill: "#fff"
         })
     });
-const $cce7f1c9e9c29503$export$92ce62e1201c4fc0 = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
+const $cce7f1c9e9c29503$export$92ce62e1201c4fc0 = ({ color: color  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
@@ -2672,10 +2965,10 @@ const $cce7f1c9e9c29503$export$92ce62e1201c4fc0 = ()=>/*#__PURE__*/ (0, $jQDcL$r
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
             d: "M21 8.94a1.307 1.307 0 0 0-.06-.27v-.09a1.07 1.07 0 0 0-.19-.28l-6-6a1.071 1.071 0 0 0-.28-.19.32.32 0 0 0-.09 0 .88.88 0 0 0-.33-.11H10a3 3 0 0 0-3 3v1H6a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-1h1a3 3 0 0 0 3-3V8.94Zm-6-3.53L17.59 8H16a1 1 0 0 1-1-1V5.41ZM15 19a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h1v7a3 3 0 0 0 3 3h5v1Zm4-4a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3v3a3 3 0 0 0 3 3h3v5Z",
-            fill: "#fff"
+            fill: color || "#fff"
         })
     });
-const $cce7f1c9e9c29503$export$6470d09a29d34d08 = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
+const $cce7f1c9e9c29503$export$6470d09a29d34d08 = ({ color: color  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
@@ -2683,7 +2976,7 @@ const $cce7f1c9e9c29503$export$6470d09a29d34d08 = ()=>/*#__PURE__*/ (0, $jQDcL$r
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
             d: "M8 21H4a1 1 0 0 1-1-1v-4a1 1 0 1 0-2 0v4a3 3 0 0 0 3 3h4a1 1 0 0 0 0-2Zm14-6a1 1 0 0 0-1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 0 0 2h4a3 3 0 0 0 3-3v-4a1 1 0 0 0-1-1ZM20 1h-4a1 1 0 1 0 0 2h4a1 1 0 0 1 1 1v4a1 1 0 0 0 2 0V4a3 3 0 0 0-3-3ZM2 9a1 1 0 0 0 1-1V4a1 1 0 0 1 1-1h4a1 1 0 0 0 0-2H4a3 3 0 0 0-3 3v4a1 1 0 0 0 1 1Zm8-4H6a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1ZM9 9H7V7h2v2Zm5 2h4a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1Zm1-4h2v2h-2V7Zm-5 6H6a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1Zm-1 4H7v-2h2v2Zm5-1a1 1 0 0 0 1-1 1 1 0 0 0 0-2h-1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1Zm4-3a1 1 0 0 0-1 1v3a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1Zm-4 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z",
-            fill: "#fff"
+            fill: color || "#fff"
         })
     });
 const $cce7f1c9e9c29503$export$1095c93890fce526 = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
@@ -2738,6 +3031,17 @@ const $cce7f1c9e9c29503$export$5170987d58ae338d = ()=>/*#__PURE__*/ (0, $jQDcL$r
             ]
         })
     });
+const $cce7f1c9e9c29503$export$d5424e4dfe4be076 = ({ color: color  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+            d: "M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3ZM5 18a1 1 0 0 1-1-1v-2.42l3.3-3.29a1 1 0 0 1 1.4 0L15.41 18H5Zm15-1a1 1 0 0 1-1 1h-.77l-3.81-3.83.88-.88a1 1 0 0 1 1.4 0l3.3 3.29V17Zm0-3.24-1.88-1.87a3.06 3.06 0 0 0-4.24 0l-.88.88-2.88-2.88a3.06 3.06 0 0 0-4.24 0L4 11.76V7a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v6.76Z",
+            fill: color || "#fff"
+        })
+    });
 
 
 
@@ -2928,10 +3232,17 @@ const $1949f8f101c8cf77$export$e2457e1974c298c3 = (0, ($parcel$interopDefault($j
   line-height: 16px;
   padding: 4px 12px;
   border-radius: 50px;
+  gap: 5px;
 
   &:hover {
     border: 2px solid ${(props)=>props.theme.controlsHoverBorderColor};
   }
+
+  img,
+  svg {
+    max-width: 15px;
+    max-height: 15px;
+  }
 `;
 const $1949f8f101c8cf77$export$c4e460d5c7d83bc3 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
   position: absolute;
@@ -2959,12 +3270,18 @@ const $7eae5c8ece2c75ff$var$HeaderSettings = ({ baseCategories: baseCategories ,
                     ...options,
                     ...category.items
                 ], []) || [];
-            return definedSettingsShortcuts.reduce((shortcutsList, shortcutId)=>{
-                const baseShortcut = baseOptions.find((option)=>option.id === shortcutId);
-                if (baseShortcut) shortcutsList.push(baseShortcut);
+            return definedSettingsShortcuts.reduce((shortcutsList, shortcut)=>{
+                const baseShortcut = baseOptions.find((option)=>option.id === shortcut.id);
+                if (baseShortcut) shortcutsList.push({
+                    ...baseShortcut,
+                    displayType: shortcut.displayType
+                });
                 else {
-                    const extraShortcut = extraOptions?.find((option)=>option.id === shortcutId);
-                    if (extraShortcut) shortcutsList.push(extraShortcut);
+                    const extraShortcut = extraOptions?.find((option)=>option.id === shortcut.id);
+                    if (extraShortcut) shortcutsList.push({
+                        ...extraShortcut,
+                        displayType: shortcut.displayType
+                    });
                 }
                 return shortcutsList;
             }, []);
@@ -3021,7 +3338,19 @@ const $7eae5c8ece2c75ff$var$HeaderSettings = ({ baseCategories: baseCategories ,
     const onSettingsButtonClick = ()=>setDisplaySettingsOptions((previousValue)=>!previousValue);
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $1949f8f101c8cf77$export$8376625f8bb18347), {
         children: [
-            shortcuts.map((shortcut)=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $1949f8f101c8cf77$export$4297bad962271b02), {
+            shortcuts.map((shortcut)=>{
+                if (shortcut.displayType === "full") return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $1949f8f101c8cf77$export$e2457e1974c298c3), {
+                    onClick: shortcut.action,
+                    children: [
+                        shortcut.jsxIcon && shortcut.jsxIcon,
+                        shortcut.srcIcon && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("img", {
+                            alt: shortcut.title,
+                            src: shortcut.srcIcon
+                        }),
+                        shortcut.title
+                    ]
+                }, shortcut.id);
+                return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $1949f8f101c8cf77$export$4297bad962271b02), {
                     onClick: shortcut.action,
                     children: [
                         shortcut.jsxIcon && shortcut.jsxIcon,
@@ -3030,7 +3359,8 @@ const $7eae5c8ece2c75ff$var$HeaderSettings = ({ baseCategories: baseCategories ,
                             src: shortcut.srcIcon
                         })
                     ]
-                }, shortcut.id)),
+                }, shortcut.id);
+            }),
             streamUIOptions.showMenuButton && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $1949f8f101c8cf77$export$a7d9b76c122d0627), {
                 children: [
                     /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $1949f8f101c8cf77$export$e2457e1974c298c3), {
@@ -3231,7 +3561,7 @@ const $e1930b467e7d8845$var$multiPiP = new (0, $21395e477f83709c$export$45fabd1c
 const $e1930b467e7d8845$var$browser = $jQDcL$bowser.parse(window.navigator.userAgent);
 const $e1930b467e7d8845$var$Header = ()=>{
     const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
-    const { setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , options: options , muted: muted , streaming: streaming  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const { setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible , options: options , muted: muted , streaming: streaming ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $3f6e908c45fcc5b3$export$b5633a7cfbe42d9f)();
     const [extraOptions, setExtraOptions] = (0, $jQDcL$react.useState)(options.extraSettingsOptions || []);
     const onSetExtraSettingsOptions = (event)=>{
@@ -3285,6 +3615,9 @@ const $e1930b467e7d8845$var$Header = ()=>{
         const onSettingsMenuClick = ()=>{
             setIsSettingsMenuVisible(true);
         };
+        const onVirtualBackgroundClick = ()=>{
+            setIsVirtualBackgroundPopupVisible(true);
+        };
         const computedCategories = [
             {
                 id: "1",
@@ -3326,6 +3659,12 @@ const $e1930b467e7d8845$var$Header = ()=>{
                 ]
             }, 
         ];
+        if ($e1930b467e7d8845$var$browser.platform.type === "desktop" && $e1930b467e7d8845$var$browser.engine.name === "Blink") computedCategories[2].items.unshift({
+            id: "virtualBackground",
+            title: t("virtualBackground.title"),
+            jsxIcon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $cce7f1c9e9c29503$export$d5424e4dfe4be076), {}),
+            action: onVirtualBackgroundClick
+        });
         if (document.pictureInPictureEnabled && $e1930b467e7d8845$var$browser.platform.type === "desktop") computedCategories[0].items.push({
             id: "pip",
             title: t("menu.pictureInPicture"),
@@ -3339,6 +3678,7 @@ const $e1930b467e7d8845$var$Header = ()=>{
         options.sharedURL,
         setIsQuickConnectPopupVisible,
         setIsSettingsMenuVisible,
+        setIsVirtualBackgroundPopupVisible,
         t, 
     ]);
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $1949f8f101c8cf77$export$1e86fd0e1db89578), {
@@ -3388,6 +3728,35 @@ const $56e1e7a85d8bf4bb$export$2b86bedf890eab8 = (element)=>{
     ]);
     return size;
 };
+const $56e1e7a85d8bf4bb$var$defaultState = {
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    x: 0,
+    y: 0
+};
+function $56e1e7a85d8bf4bb$export$e295b0c537d32d7d() {
+    const [element, ref] = (0, $jQDcL$react.useState)(null);
+    const [rect, setRect] = (0, $jQDcL$react.useState)($56e1e7a85d8bf4bb$var$defaultState);
+    (0, $jQDcL$react.useLayoutEffect)(()=>{
+        if (!element) return;
+        const updateSize = (entries)=>setRect(entries[0].contentRect);
+        const observer = new ResizeObserver(updateSize);
+        observer.observe(element);
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        element
+    ]);
+    return [
+        ref,
+        rect
+    ];
+}
 
 
 
@@ -3967,16 +4336,6 @@ const $2c45d365ee8aa1ab$export$98d9314e6a208b24 = (0, ($parcel$interopDefault($j
   bottom: 0;
   cursor: ${(props)=>props.cursor};
   transition: all 0.4s;
-
-  ${(props)=>{
-    if (props.full) return (0, $jQDcL$styledcomponents.css)`
-        width: 100%;
-        height: 100%;
-        inset: 0 0 0 0 !important;
-        padding: 17px 10px;
-        box-sizing: border-box;
-      `;
-}}
 `;
 const $2c45d365ee8aa1ab$export$ba5a75b023bcdce2 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
   display: flex;
@@ -4828,20 +5187,18 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
     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 cursor = streaming && !extended ? "pointer" : "default";
+    const computedWidth = (0, $7de6ded9bdec6f42$export$a6112fefa8de799d)({
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
+        minimumWidth: $8393b5c887e16c8c$var$minimumTileWidth,
+        maximumWidth: $8393b5c887e16c8c$var$maximumTileWidth,
+        orientation: orientation,
+        extended: extended
+    });
+    let tileWidth = `${computedWidth}px`;
+    let tileHeight = `${computedWidth}px`;
     const isAlone = streams.length < 1;
-    const cursor = streaming && !isAlone && !extended ? "pointer" : "default";
-    let tileSize = "100%";
-    if (!isAlone) {
-        const computedWidth = (0, $7de6ded9bdec6f42$export$a6112fefa8de799d)({
-            containerWidth: containerWidth,
-            containerHeight: containerHeight,
-            minimumWidth: $8393b5c887e16c8c$var$minimumTileWidth,
-            maximumWidth: $8393b5c887e16c8c$var$maximumTileWidth,
-            orientation: orientation,
-            extended: extended
-        });
-        tileSize = `${computedWidth}px`;
-    }
     const onLocalVideoChange = (event)=>{
         if (!event.detail?.camera?.device) return;
         if (!videoElementRef.current) throw new Error("videoElementRef not available");
@@ -4851,7 +5208,7 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         setZoomAvailable((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).isVideoZoomAvailable());
     };
     const onSelfTileClick = ()=>{
-        if (streaming && !isAlone && !deviceRequest && !extended && SelfTileRef.current) {
+        if (streaming && !deviceRequest && !extended && SelfTileRef.current) {
             (0, $4ee7c4b0b3646a08$export$ab7d69e250642927)({
                 element: SelfTileRef.current
             });
@@ -4919,7 +5276,7 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         });
     };
     const onSelfTileMouseDown = (mouseDownEvent)=>{
-        if (!isAlone && !extended && SelfTileRef.current && videosContainerRef.current) (0, $4ee7c4b0b3646a08$export$298c6ed7f6695dd6)({
+        if (!extended && SelfTileRef.current && videosContainerRef.current) (0, $4ee7c4b0b3646a08$export$298c6ed7f6695dd6)({
             mouseDownEvent: mouseDownEvent,
             targetElement: SelfTileRef.current,
             containerElement: videosContainerRef.current
@@ -4944,6 +5301,7 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         if (streaming && videoElementRef.current && !videoElementRef.current.srcObject) videoElementRef.current.srcObject = videoMediaProviderRef.current;
     }, [
         streaming,
+        isAlone,
         isSomeonePresenting
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
@@ -4954,12 +5312,6 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         containerWidth,
         containerHeight
     ]);
-    (0, $jQDcL$react.useEffect)(()=>{
-        if (isAlone && extended) setExtended(false);
-    }, [
-        isAlone,
-        extended
-    ]);
     (0, $jQDcL$react.useEffect)(()=>{
         if (!extended) {
             setSnapshotAnimation(false);
@@ -5065,7 +5417,7 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
             })
         ]
     });
-    if (isSomeonePresenting && remoteTilesContainerRef?.current) return /*#__PURE__*/ (0, $jQDcL$reactdom.createPortal)(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$798352b46783b18d), {
+    if (remoteTilesContainerRef?.current && (isAlone || isSomeonePresenting)) return /*#__PURE__*/ (0, $jQDcL$reactdom.createPortal)(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$798352b46783b18d), {
         style: {
             width: `${width}px`,
             height: `${height}px`
@@ -5077,10 +5429,9 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         children: [
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $2c45d365ee8aa1ab$export$98d9314e6a208b24), {
                 ref: SelfTileRef,
-                full: isAlone,
                 style: {
-                    width: tileSize,
-                    height: tileSize
+                    width: tileWidth,
+                    height: tileHeight
                 },
                 cursor: cursor,
                 onClick: onSelfTileClick,
@@ -5916,8 +6267,104 @@ var $c225be5472ba393a$export$2e2bcd8739ae039 = $c225be5472ba393a$var$Highlighted
 
 
 
+const $7e6d6d75bd13cce5$export$dd2ac23a70f320dd = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: ${({ show: show  })=>show ? "flex" : "none"};
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: ${({ width: width  })=>width};
+  height: ${({ height: height  })=>height};
+  background-color: ${({ theme: theme  })=>theme.streamTileBackgroundColor};
+  border: 2px solid ${({ theme: theme  })=>theme.streamTileBorderColor};
+  border-radius: 20px;
+  box-sizing: border-box;
+  color: #fff;
+  font-family: Lato;
+  padding: 20px;
+`;
+const $7e6d6d75bd13cce5$export$2dabfbe763cc7a4 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).h2`
+  font-weight: 600;
+  font-size: 16px;
+  text-align: center;
+  max-width: 300px;
+`;
+const $7e6d6d75bd13cce5$export$6ed6e36e1b456f96 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 50px;
+  width: 100%;
+  max-width: 300px;
+  background-color: ${({ theme: theme  })=>theme.popupBackgroundSecondaryColor};
+  border: 1px solid ${({ theme: theme  })=>theme.popupBorderColor};
+  border-radius: 15px;
+  padding: 0 10px;
+  box-sizing: border-box;
+`;
+const $7e6d6d75bd13cce5$export$5f759de1870a3e41 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 5px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+const $7e6d6d75bd13cce5$export$c6b180e8ec79154e = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).p`
+  color: #242324;
+  font-size: 15px;
+  font-weight: 600;
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  line-height: 15px;
+`;
+const $7e6d6d75bd13cce5$export$d7f3ab4b3437ad97 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
+  position: absolute;
+  right: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ theme: theme  })=>theme.primaryColor};
+  border: none;
+  border-radius: 8px;
+  height: 32px;
+  color: #fff;
+  font-weight: 600;
+  font-size: 16px;
+  padding: 8px 12px;
+  line-height: 18px;
+`;
+const $7e6d6d75bd13cce5$export$c22678f0e7b404e0 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).p`
+  font-size: 12px;
+  font-weight: 400;
+  max-width: 300px;
+  text-align: center;
+`;
+
+
+
+
 
 
+const $daca1602b495441e$var$Link = ({ color: color  })=>{
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+            d: "m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1.004 1.004 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1.004 1.004 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1.004 1.004 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.471 2.471 0 0 1 0 3.5l-3.88 3.88a1.002 1.002 0 0 0 .325 1.639.999.999 0 0 0 1.095-.219l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1.004 1.004 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z",
+            fill: color || "#fff"
+        })
+    });
+};
+var $daca1602b495441e$export$2e2bcd8739ae039 = $daca1602b495441e$var$Link;
 
 
 
@@ -5970,6 +6417,67 @@ const $e8ac63718934c648$export$c7df1b15b59b1df2 = /*#__PURE__*/ (0, $jQDcL$react
 });
 
 
+
+
+const $23c39d8ee81f4f67$var$InvitationTile = ({ show: show , orientation: orientation , width: width , height: height  })=>{
+    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
+    const { options: options  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const onCopyCallLinkClick = async ()=>{
+        try {
+            await (0, $0bea101d3ef852fb$export$2e2bcd8739ae039)(options.sharedURL || window.location.href);
+            (0, $84c6cbcbb594d072$export$3a57e165650c636f)(t("copyLink.copied"), {
+                duration: 2000
+            });
+        } catch (copyError) {
+            console.warn(copyError);
+            (0, $84c6cbcbb594d072$export$3a57e165650c636f)(t("copyLink.error"), {
+                icon: (0, $e8ac63718934c648$export$edf27be85e5f6da0)
+            });
+        }
+    };
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $7e6d6d75bd13cce5$export$dd2ac23a70f320dd), {
+        show: show,
+        width: width,
+        height: height,
+        orientation: orientation,
+        children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7e6d6d75bd13cce5$export$2dabfbe763cc7a4), {
+                children: t("invite.title")
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $7e6d6d75bd13cce5$export$6ed6e36e1b456f96), {
+                children: [
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $7e6d6d75bd13cce5$export$5f759de1870a3e41), {
+                        children: [
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $daca1602b495441e$export$2e2bcd8739ae039), {
+                                color: "black"
+                            }),
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7e6d6d75bd13cce5$export$c6b180e8ec79154e), {
+                                children: options.sharedURL || window.location.href
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7e6d6d75bd13cce5$export$d7f3ab4b3437ad97), {
+                        onClick: onCopyCallLinkClick,
+                        children: t("invite.copy")
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7e6d6d75bd13cce5$export$c22678f0e7b404e0), {
+                children: t("invite.description")
+            })
+        ]
+    });
+};
+var $23c39d8ee81f4f67$export$2e2bcd8739ae039 = $23c39d8ee81f4f67$var$InvitationTile;
+
+
+
+
+
+
+
+
+
 const $537dcc6df507dc4a$var$Container = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
   background-color: rgba(45, 45, 45, 0.75);
   display: flex;
@@ -6036,6 +6544,7 @@ const $88b23a8428e67b66$var$Video = ()=>{
     });
     const { streams: streams , highlightedTile: highlightedTile , dispatch: dispatch  } = (0, $3f6e908c45fcc5b3$export$b5633a7cfbe42d9f)();
     const [containerWidth, containerHeight] = (0, $56e1e7a85d8bf4bb$export$2b86bedf890eab8)(remoteTilesContainerRef.current);
+    const showInvitation = streams.length < 1 && !highlightedTile && containerWidth > 0;
     (0, $jQDcL$react.useEffect)(()=>{
         if (options.GDPRDisclaimer) (0, $537dcc6df507dc4a$export$2e2bcd8739ae039)({
             message: "Para mejorar la calidad de nuestro servicio, esta llamada ser\xe1 grabada",
@@ -6046,9 +6555,10 @@ const $88b23a8428e67b66$var$Video = ()=>{
         options.GDPRDisclaimer
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
-        if (remoteTilesContainerRef?.current && containerWidth && containerHeight) {
+        if (remoteTilesContainerRef?.current) {
             const ratio = 1;
-            const numberOfTiles = remoteTilesContainerRef.current.childElementCount;
+            let numberOfTiles = remoteTilesContainerRef.current.childElementCount;
+            if (!showInvitation) numberOfTiles -= 1;
             const videoWidth = (0, $7de6ded9bdec6f42$export$4d43009c33055644)({
                 availableWidth: containerWidth - 16 * (numberOfTiles - 1),
                 availableHeight: containerHeight - 16 * (numberOfTiles - 1),
@@ -6066,7 +6576,8 @@ const $88b23a8428e67b66$var$Video = ()=>{
         containerWidth,
         containerHeight,
         streams.length,
-        highlightedTile
+        highlightedTile,
+        showInvitation, 
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
         if (userInteractionTriggered) {
@@ -6219,6 +6730,12 @@ const $88b23a8428e67b66$var$Video = ()=>{
                             width: tileSize.width,
                             height: tileSize.height
                         }, stream.id);
+                    }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $23c39d8ee81f4f67$export$2e2bcd8739ae039), {
+                        show: showInvitation,
+                        width: `${tileSize.width}px`,
+                        height: `${tileSize.height}px`,
+                        orientation: orientation
                     })
                 ]
             })
@@ -6335,7 +6852,7 @@ var $39ceb925b3865754$export$2e2bcd8739ae039 = $39ceb925b3865754$var$Spinner;
 
 
 
-const $3b6953f72db3bb17$var$YoutubeIcon = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
+const $3b6953f72db3bb17$var$YoutubeIcon = ({ color: color  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
         width: "24",
         height: "25",
         viewBox: "0 0 24 25",
@@ -6343,29 +6860,13 @@ const $3b6953f72db3bb17$var$YoutubeIcon = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxr
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
             d: "M23 10.21a8.499 8.499 0 0 0-.91-4.13 2.92 2.92 0 0 0-1.72-1A78.362 78.362 0 0 0 12 4.77a78.45 78.45 0 0 0-8.34.3 2.87 2.87 0 0 0-1.46.74c-.9.83-1 2.25-1.1 3.45a48.29 48.29 0 0 0 0 6.48 9.55 9.55 0 0 0 .3 2c.12.505.365.972.71 1.36a2.86 2.86 0 0 0 1.49.78c2.156.266 4.328.376 6.5.33 3.5.05 6.57 0 10.2-.28a2.88 2.88 0 0 0 1.53-.78c.28-.28.49-.623.61-1 .358-1.097.533-2.246.52-3.4.04-.56.04-3.94.04-4.54ZM9.74 15.35V9.16l5.92 3.11c-1.66.92-3.85 1.96-5.92 3.08Z",
-            fill: "#fff"
+            fill: color || "#fff"
         })
     });
 var $3b6953f72db3bb17$export$2e2bcd8739ae039 = $3b6953f72db3bb17$var$YoutubeIcon;
 
 
 
-const $daca1602b495441e$var$Link = ({ color: color  })=>{
-    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
-            d: "m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1.004 1.004 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1.004 1.004 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1.004 1.004 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.471 2.471 0 0 1 0 3.5l-3.88 3.88a1.002 1.002 0 0 0 .325 1.639.999.999 0 0 0 1.095-.219l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1.004 1.004 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z",
-            fill: color || "#fff"
-        })
-    });
-};
-var $daca1602b495441e$export$2e2bcd8739ae039 = $daca1602b495441e$var$Link;
-
-
 
 
 
@@ -6497,7 +6998,7 @@ const $9dfd9e2286cffa66$var$HighlightButton = ()=>{
                 },
                 {
                     id: "youtube",
-                    title: "YouTube",
+                    title: t("youtube.title"),
                     jsxIcon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3b6953f72db3bb17$export$2e2bcd8739ae039), {}),
                     action: onYoutubeClick
                 }, 
@@ -6693,15 +7194,20 @@ var $a21b2aa064cb6c32$export$2e2bcd8739ae039 = $a21b2aa064cb6c32$var$ControlBar;
 
 
 
-const $b387679730856fb1$export$9d03e7b857083c37 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
-  position: absolute;
-  width: 100%;
-  bottom: ${(props)=>props.open ? 0 : "-340px"};
+
+
+
+
+
+const $b387679730856fb1$export$9d03e7b857083c37 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  position: absolute;
+  width: 100%;
+  bottom: ${(props)=>props.open ? 0 : "-500px"};
   transition: all 0.4s;
 
   ${(props)=>{
     if (props.desktop) return (0, $jQDcL$styledcomponents.css)`
-        bottom: ${props.open ? 0 : "calc(-340px - (100vh / 2))"};
+        bottom: ${props.open ? 0 : "calc(-500px - (100vh / 2))"};
         height: 100%;
         display: flex;
         justify-content: center;
@@ -6712,11 +7218,12 @@ const $b387679730856fb1$export$9d03e7b857083c37 = (0, ($parcel$interopDefault($j
 const $b387679730856fb1$export$6bc4d6c63b7f8b75 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
   display: flex;
   flex-direction: column;
-  height: 340px;
+  height: 500px;
   max-height: 100vh;
-  background-color: ${(props)=>props.theme.settingsBackgroundColor};
-  color: ${(props)=>props.theme.settingsTextColor};
+  background-color: ${(props)=>props.theme.popupBackgroundPrimaryColor};
+  color: ${(props)=>props.theme.popupTitleColor};
   border-radius: ${(props)=>props.desktop ? "20px" : "20px 20px 0 0"};
+  padding-bottom: ${({ desktop: desktop  })=>desktop ? 0 : "12px"};
 `;
 const $b387679730856fb1$export$f8e80e2c9abbb7eb = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
   display: flex;
@@ -6729,15 +7236,30 @@ const $b387679730856fb1$export$f8e80e2c9abbb7eb = (0, ($parcel$interopDefault($j
     font-weight: 600;
   }
 `;
+const $b387679730856fb1$export$2bd9c7c3b36c82cd = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  align-items: center;
+
+  h4 {
+    margin: 0 0 0 8px;
+    font-weight: 600;
+    line-height: 19px;
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
 const $b387679730856fb1$export$b421c25a8e0ea22e = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
   display: flex;
   justify-content: center;
   align-items: center;
   border: none;
-  background-color: ${(props)=>props.theme.settingsCloseBackgroundColor};
+  background-color: ${(props)=>props.theme.popupBackgroundSecondaryColor};
   border-radius: 50%;
-  height: 24px;
-  width: 24px;
+  height: 30px;
+  width: 30px;
   padding: 0;
 
   svg {
@@ -6752,6 +7274,7 @@ const $b387679730856fb1$export$b421c25a8e0ea22e = (0, ($parcel$interopDefault($j
 const $b387679730856fb1$export$dc1a3f6996a97083 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
   display: flex;
   justify-content: center;
+  align-items: center;
   flex: 1;
   height: 0;
 
@@ -6765,13 +7288,57 @@ const $b387679730856fb1$export$51760c3b0f5567d2 = (0, ($parcel$interopDefault($j
   display: flex;
   justify-content: center;
   text-align: center;
-  margin: 10px 16% 20px;
+  margin: 0px 16% 20px;
   font-size: 14px;
 `;
+const $b387679730856fb1$export$6a789d1ce3bcb863 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
+  font-size: 100%;
+  font-family: inherit;
+  font-weight: 700;
+  background-color: inherit;
+  border: 0;
+  padding: 0;
+  margin: 20px 0;
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme: theme  })=>theme.popupTitleColor};
+`;
+const $b387679730856fb1$export$c58a46cd2027881e = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).image`
+  position: absolute;
+  with: 70px;
+  height: 70px;
+`;
+
+
+
+const $8745dbdbe55f5ff3$var$QuickConnectLogo = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("svg", {
+        width: "71",
+        height: "70",
+        viewBox: "0 0 71 70",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                d: "M2 35c0-7.171.386-12.832 1.38-17.303.99-4.454 2.562-7.635 4.872-9.945 2.31-2.31 5.491-3.882 9.945-4.872C22.668 1.886 28.33 1.5 35.5 1.5c7.171 0 12.832.386 17.303 1.38 4.454.99 7.635 2.562 9.945 4.872 2.31 2.31 3.882 5.491 4.872 9.945C68.614 22.168 69 27.83 69 35c0 7.171-.386 12.832-1.38 17.303-.99 4.454-2.562 7.635-4.872 9.945-2.31 2.31-5.491 3.882-9.945 4.872-4.471.994-10.132 1.38-17.303 1.38-7.171 0-12.832-.386-17.303-1.38-4.454-.99-7.635-2.562-9.945-4.872-2.31-2.31-3.882-5.491-4.872-9.945C2.386 47.832 2 42.17 2 35Z",
+                fill: "#000",
+                stroke: "#fff",
+                strokeWidth: "3"
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                d: "M35.72 55.833c2.3 0 4.229-1.91 3.518-4.099a13.01 13.01 0 0 0-3.045-5.058c-2.365-2.43-5.572-3.794-8.917-3.794-3.344 0-6.551 1.365-8.916 3.794a13.01 13.01 0 0 0-3.045 5.058c-.711 2.189 1.217 4.099 3.518 4.099H35.72ZM35.28 14.167c-2.3 0-4.229 1.91-3.518 4.099a13.008 13.008 0 0 0 3.045 5.058c2.365 2.43 5.572 3.793 8.917 3.793 3.344 0 6.551-1.364 8.916-3.793a13.005 13.005 0 0 0 3.045-5.058c.711-2.189-1.217-4.099-3.519-4.099H35.281ZM43.724 51.667c0 2.301 1.916 4.231 4.087 3.467a12.565 12.565 0 0 0 4.829-3.094c2.365-2.428 3.693-5.722 3.693-9.157 0-3.435-1.328-6.729-3.693-9.158a12.565 12.565 0 0 0-4.829-3.093c-2.17-.764-4.087 1.166-4.087 3.467v17.568ZM27.277 18.333c0-2.3-1.917-4.23-4.088-3.467a12.565 12.565 0 0 0-4.829 3.094c-2.364 2.429-3.693 5.723-3.693 9.157 0 3.435 1.329 6.729 3.693 9.158a12.565 12.565 0 0 0 4.83 3.093c2.17.764 4.087-1.166 4.087-3.467V18.333Z",
+                fill: "#fff"
+            })
+        ]
+    });
+var $8745dbdbe55f5ff3$export$2e2bcd8739ae039 = $8745dbdbe55f5ff3$var$QuickConnectLogo;
 
 
 const $681806ce8015ae4d$var$QuickConnect = ()=>{
     const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
+    const themeContext = (0, $jQDcL$react.useContext)((0, $jQDcL$styledcomponents.ThemeContext));
     const QuickConnectContainerRef = (0, $jQDcL$react.useRef)(null);
     const QuickConnectRef = (0, $jQDcL$react.useRef)(null);
     const { selfPeerId: selfPeerId , profile: profile , isQuickConnectPopupVisible: isQuickConnectPopupVisible , setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , options: options , orientation: orientation ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
@@ -6798,6 +7365,22 @@ const $681806ce8015ae4d$var$QuickConnect = ()=>{
         selfPeerId,
         profile.name
     ]);
+    const onCopyCallLinkClick = (0, $jQDcL$react.useCallback)(async ()=>{
+        try {
+            await (0, $0bea101d3ef852fb$export$2e2bcd8739ae039)(qrCodeURL || window.location.href);
+            (0, $84c6cbcbb594d072$export$3a57e165650c636f)(t("copyLink.copied"), {
+                duration: 2000
+            });
+        } catch (copyError) {
+            console.warn(copyError);
+            (0, $84c6cbcbb594d072$export$3a57e165650c636f)(t("copyLink.error"), {
+                icon: (0, $e8ac63718934c648$export$edf27be85e5f6da0)
+            });
+        }
+    }, [
+        t,
+        qrCodeURL
+    ]);
     const onQuickConnectPopupCloseClick = ()=>setIsQuickConnectPopupVisible(false);
     (0, $jQDcL$react.useEffect)(()=>{
         const onCustomMessage = (event)=>{
@@ -6812,7 +7395,9 @@ const $681806ce8015ae4d$var$QuickConnect = ()=>{
         setIsQuickConnectPopupVisible
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
-        $jQDcL$qrcode.toCanvas(QuickConnectRef.current, qrCodeURL);
+        $jQDcL$qrcode.toCanvas(QuickConnectRef.current, qrCodeURL, {
+            errorCorrectionLevel: "M"
+        });
     }, [
         qrCodeURL
     ]);
@@ -6845,8 +7430,15 @@ const $681806ce8015ae4d$var$QuickConnect = ()=>{
             children: [
                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $b387679730856fb1$export$f8e80e2c9abbb7eb), {
                     children: [
-                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("h4", {
-                            children: t("quickConnect.scanTitle")
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $b387679730856fb1$export$2bd9c7c3b36c82cd), {
+                            children: [
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $cce7f1c9e9c29503$export$6470d09a29d34d08), {
+                                    color: themeContext.popupTitleColor
+                                }),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("h4", {
+                                    children: t("quickConnect.scanTitle")
+                                })
+                            ]
                         }),
                         /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b387679730856fb1$export$b421c25a8e0ea22e), {
                             onClick: onQuickConnectPopupCloseClick,
@@ -6854,13 +7446,27 @@ const $681806ce8015ae4d$var$QuickConnect = ()=>{
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b387679730856fb1$export$dc1a3f6996a97083), {
-                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("canvas", {
-                        ref: QuickConnectRef
-                    })
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $b387679730856fb1$export$dc1a3f6996a97083), {
+                    children: [
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b387679730856fb1$export$c58a46cd2027881e), {
+                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $8745dbdbe55f5ff3$export$2e2bcd8739ae039), {})
+                        }),
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("canvas", {
+                            ref: QuickConnectRef
+                        })
+                    ]
                 }),
                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b387679730856fb1$export$51760c3b0f5567d2), {
                     children: t("quickConnect.scan")
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $b387679730856fb1$export$6a789d1ce3bcb863), {
+                    onClick: onCopyCallLinkClick,
+                    children: [
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $cce7f1c9e9c29503$export$92ce62e1201c4fc0), {
+                            color: "#686868"
+                        }),
+                        t("copyLink.description")
+                    ]
                 })
             ]
         })
@@ -7639,15 +8245,32 @@ var $7d4fa7ceb4c29739$export$2e2bcd8739ae039 = $7d4fa7ceb4c29739$var$Menu;
 
 
 
+const $57a90aad512ef25e$var$CircledTopArrow = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
+        width: "21",
+        height: "20",
+        viewBox: "0 0 21 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+            d: "M11.091 6.908a.833.833 0 0 0-.275-.175.833.833 0 0 0-.633 0 .833.833 0 0 0-.275.175l-2.5 2.5a.837.837 0 1 0 1.183 1.184l1.075-1.084V12.5a.833.833 0 1 0 1.667 0V9.508l1.075 1.084a.833.833 0 0 0 1.183 0 .833.833 0 0 0 0-1.184l-2.5-2.5Zm-.592-5.242a8.333 8.333 0 1 0 0 16.667 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.334Z",
+            fill: "#fff"
+        })
+    });
+var $57a90aad512ef25e$export$2e2bcd8739ae039 = $57a90aad512ef25e$var$CircledTopArrow;
+
+
+
+
+const $219bb3131afe1272$var$modalHeight = (desktop)=>desktop ? "215px" : "227px";
 const $219bb3131afe1272$export$b679a9a7caefa4b1 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
   position: absolute;
   width: 100%;
-  bottom: ${(props)=>props.open ? 0 : "-220px"};
+  bottom: ${(props)=>props.open ? 0 : `-${$219bb3131afe1272$var$modalHeight(props.desktop)}`};
   transition: all 0.4s;
 
   ${(props)=>{
     if (props.desktop) return (0, $jQDcL$styledcomponents.css)`
-        bottom: ${props.open ? 0 : "calc(-220px - (100vh / 2))"};
+        bottom: ${props.open ? 0 : `calc(-${$219bb3131afe1272$var$modalHeight(props.desktop)} - (100vh / 2))`};
         height: 100%;
         display: flex;
         justify-content: center;
@@ -7659,12 +8282,12 @@ const $219bb3131afe1272$export$c506828286db9a46 = (0, ($parcel$interopDefault($j
   display: flex;
   flex-direction: column;
   width: ${(props)=>props.desktop ? "375px" : "100%"};
-  height: 220px;
+  height: ${({ desktop: desktop  })=>$219bb3131afe1272$var$modalHeight(desktop)};
   max-height: 100vh;
-  background-color: ${(props)=>props.theme.settingsBackgroundColor};
-  color: ${(props)=>props.theme.settingsTextColor};
+  background-color: ${(props)=>props.theme.popupBackgroundPrimaryColor};
+  color: ${(props)=>props.theme.popupTitleColor};
   border-radius: ${(props)=>props.desktop ? "20px" : "20px 20px 0 0"};
-  padding: 12px 14px 30px;
+  padding: ${({ desktop: desktop  })=>desktop ? "16px 14px" : "16px 14px 28px"};
   box-sizing: border-box;
 `;
 const $219bb3131afe1272$export$f39d8ef0ab6ab3de = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
@@ -7693,10 +8316,10 @@ const $219bb3131afe1272$export$7ae684a6a708b51d = (0, ($parcel$interopDefault($j
   justify-content: center;
   align-items: center;
   border: none;
-  background-color: ${(props)=>props.theme.settingsCloseBackgroundColor};
+  background-color: ${(props)=>props.theme.popupBackgroundSecondaryColor};
   border-radius: 50%;
-  height: 24px;
-  width: 24px;
+  height: 30px;
+  width: 30px;
   padding: 0;
 
   svg {
@@ -7728,9 +8351,9 @@ const $219bb3131afe1272$export$176dd61d50c7f3d7 = (0, ($parcel$interopDefault($j
   input {
     padding: 16px 10px 16px 20px;
     border-radius: 15px;
-    background-color: #4e4e4e;
-    border: 1px solid ${(props)=>props.errored ? "#d84949" : "transparent"};
-    color: #fff;
+    background-color: ${({ theme: theme  })=>theme.popupBackgroundSecondaryColor};
+    border: 1px solid ${(props)=>props.errored ? "#d84949" : props.theme.popupBorderColor};
+    color: #878787;
 
     &:focus {
       outline: none;
@@ -7751,13 +8374,23 @@ const $219bb3131afe1272$export$baf775d6bf9683d5 = (0, ($parcel$interopDefault($j
 const $219bb3131afe1272$export$3711c5e6a7ba3fdc = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
   background-color: ${({ theme: theme  })=>theme.primaryColor};
   padding: 8px 18px;
-  border-radius: 50px;
+  width: 100%;
+  height: 46px;
+  border-radius: 15px;
   margin: 30px auto 0;
   border: none;
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   line-height: 18px;
+
+  span {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    alig-items: center;
+    justify-content: center;
+  }
 `;
 
 
@@ -7765,6 +8398,7 @@ const $219bb3131afe1272$export$3711c5e6a7ba3fdc = (0, ($parcel$interopDefault($j
 const $696ded7a5399bcd4$var$youtubeIDRegExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#&?]*).*/;
 const $696ded7a5399bcd4$var$YoutubePopup = ()=>{
     const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
+    const themeContext = (0, $jQDcL$react.useContext)((0, $jQDcL$styledcomponents.ThemeContext));
     const youtubePopupRef = (0, $jQDcL$react.useRef)(null);
     const [youtubeInputValue, setYoutubeInputValue] = (0, $jQDcL$react.useState)("");
     const [errorMessage, setErrorMessage] = (0, $jQDcL$react.useState)(null);
@@ -7812,7 +8446,9 @@ const $696ded7a5399bcd4$var$YoutubePopup = ()=>{
                     children: [
                         /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $219bb3131afe1272$export$11781939bbc73f8b), {
                             children: [
-                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3b6953f72db3bb17$export$2e2bcd8739ae039), {}),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3b6953f72db3bb17$export$2e2bcd8739ae039), {
+                                    color: themeContext.popupTitleColor
+                                }),
                                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("h4", {
                                     children: t("youtube.title")
                                 })
@@ -7830,10 +8466,6 @@ const $696ded7a5399bcd4$var$YoutubePopup = ()=>{
                         /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $219bb3131afe1272$export$176dd61d50c7f3d7), {
                             errored: Boolean(errorMessage),
                             children: [
-                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("label", {
-                                    htmlFor: "youtube-popup-input",
-                                    children: t("youtube.url")
-                                }),
                                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("input", {
                                     id: "youtube-popup-input",
                                     placeholder: "https://www.youtube.com/watch?v=abcdef",
@@ -7850,7 +8482,12 @@ const $696ded7a5399bcd4$var$YoutubePopup = ()=>{
                         }),
                         /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $219bb3131afe1272$export$3711c5e6a7ba3fdc), {
                             type: "submit",
-                            children: t("youtube.share")
+                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("span", {
+                                children: [
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $57a90aad512ef25e$export$2e2bcd8739ae039), {}),
+                                    t("youtube.share")
+                                ]
+                            })
                         })
                     ]
                 })
@@ -7870,20 +8507,6 @@ var $696ded7a5399bcd4$export$2e2bcd8739ae039 = $696ded7a5399bcd4$var$YoutubePopu
 
 
 
-const $57a90aad512ef25e$var$CircledTopArrow = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
-        width: "21",
-        height: "20",
-        viewBox: "0 0 21 20",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
-            d: "M11.091 6.908a.833.833 0 0 0-.275-.175.833.833 0 0 0-.633 0 .833.833 0 0 0-.275.175l-2.5 2.5a.837.837 0 1 0 1.183 1.184l1.075-1.084V12.5a.833.833 0 1 0 1.667 0V9.508l1.075 1.084a.833.833 0 0 0 1.183 0 .833.833 0 0 0 0-1.184l-2.5-2.5Zm-.592-5.242a8.333 8.333 0 1 0 0 16.667 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.334Z",
-            fill: "#fff"
-        })
-    });
-var $57a90aad512ef25e$export$2e2bcd8739ae039 = $57a90aad512ef25e$var$CircledTopArrow;
-
-
 
 
 
@@ -8004,8 +8627,8 @@ const $2d8fe9775ff247d9$export$fcade06574a60ff0 = (0, ($parcel$interopDefault($j
   border: none;
   background-color: ${(props)=>props.theme.popupBackgroundSecondaryColor};
   border-radius: 50%;
-  height: 24px;
-  width: 24px;
+  height: 30px;
+  width: 30px;
   padding: 0;
 
   svg {
@@ -8303,80 +8926,397 @@ var $e38290b50aaba0e3$export$2e2bcd8739ae039 = $e38290b50aaba0e3$var$LinksharePo
 
 
 
-const $e6950939129bcd4b$export$8376625f8bb18347 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: ${(props)=>props.open ? "rgba(0, 0, 0, 0.9)" : "transparent"};
-  z-index: ${(props)=>props.open ? 100 : -1};
-  overflow: hidden;
-  transition: all ${(props)=>props.open ? "0.2s" : "0.6s"};
-`;
 
 
-const $5f509eaff0d9c05a$var$Settings = ()=>{
-    const { isQuickConnectPopupVisible: isQuickConnectPopupVisible , isSettingsMenuVisible: isSettingsMenuVisible , isYoutubePopupVisible: isYoutubePopupVisible , isLinksharePopupVisible: isLinksharePopupVisible ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
-    const open = isQuickConnectPopupVisible || isSettingsMenuVisible || isYoutubePopupVisible || isLinksharePopupVisible;
-    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $e6950939129bcd4b$export$8376625f8bb18347), {
-        open: open,
-        children: [
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $681806ce8015ae4d$export$2e2bcd8739ae039), {}),
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7d4fa7ceb4c29739$export$2e2bcd8739ae039), {}),
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $696ded7a5399bcd4$export$2e2bcd8739ae039), {}),
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e38290b50aaba0e3$export$2e2bcd8739ae039), {})
-        ]
-    });
-};
-var $5f509eaff0d9c05a$export$2e2bcd8739ae039 = $5f509eaff0d9c05a$var$Settings;
 
 
 
 
 
+const $3e04235fac70629f$var$CircledCheckmark = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+            d: "M12.266 7.325 8.691 10.91 7.316 9.534a.833.833 0 1 0-1.175 1.175l1.958 1.966a.831.831 0 0 0 .592.242.833.833 0 0 0 .583-.242l4.167-4.166a.833.833 0 1 0-1.175-1.184ZM9.999 1.667a8.333 8.333 0 1 0 0 16.667 8.333 8.333 0 0 0 0-16.667Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.334Z",
+            fill: "#fff"
+        })
+    });
+var $3e04235fac70629f$export$2e2bcd8739ae039 = $3e04235fac70629f$var$CircledCheckmark;
 
 
 
+const $32119bad9969854e$var$modalHeight = (desktop)=>desktop ? "420px" : "432px";
+const $32119bad9969854e$export$b298b737d508d68e = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  position: absolute;
+  width: 100%;
+  bottom: ${(props)=>props.open ? 0 : `-${$32119bad9969854e$var$modalHeight(props.desktop)}`};
+  transition: all 0.4s;
 
-const $bbe4b943c376008e$export$104f28dc79f055f4 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  ${(props)=>{
+    if (props.desktop) return (0, $jQDcL$styledcomponents.css)`
+        bottom: ${props.open ? 0 : `calc(-${$32119bad9969854e$var$modalHeight(props.desktop)} - (100vh / 2))`};
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      `;
+}}
+`;
+const $32119bad9969854e$export$156bb26b5a0d2f83 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
   display: flex;
-  flex: 1;
   flex-direction: column;
-  justify-content: center;
+  width: ${(props)=>props.desktop ? "375px" : "100%"};
+  height: ${({ desktop: desktop  })=>$32119bad9969854e$var$modalHeight(desktop)};
+  max-height: 100vh;
+  background-color: ${(props)=>props.theme.popupBackgroundPrimaryColor};
+  color: ${(props)=>props.theme.popupTitleColor};
+  border-radius: ${(props)=>props.desktop ? "20px" : "20px 20px 0 0"};
+  padding: 12px 14px 30px;
+  box-sizing: border-box;
+`;
+const $32119bad9969854e$export$28a9baece842bd02 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  justify-content: space-between;
   align-items: center;
-  background-color: #000;
-  color: #fff;
-  padding-top: 70px;
+  margin-bottom: 30px;
 `;
-const $bbe4b943c376008e$export$51071a7ce784448 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).span`
-  font-size: 60px;
+const $32119bad9969854e$export$de75cb5a82158063 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  align-items: center;
+
+  h4 {
+    margin: 0 0 0 8px;
+    font-weight: 600;
+    line-height: 19px;
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
 `;
-const $bbe4b943c376008e$export$eebc018855fb0cb6 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).h1`
-  font-size: 28px;
-  font-weight: 600;
-  line-height: 33.6px;
+const $32119bad9969854e$export$ab8c73b78f24745 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background-color: ${(props)=>props.theme.popupBackgroundSecondaryColor};
+  border-radius: 50%;
+  height: 30px;
+  width: 30px;
+  padding: 0;
+
+  svg {
+    width: 15px;
+    height: 15px;
+
+    path {
+      fill: #000;
+    }
+  }
 `;
-const $bbe4b943c376008e$export$f4e7b895a81715e9 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).p`
-  font-size: 22px;
-  font-weight: 500;
-  line-height: 26.4px;
-  margin: 0;
+const $32119bad9969854e$export$8603bdc04df69ddb = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).form`
+  display: flex;
+  flex-direction: column;
 `;
-const $bbe4b943c376008e$export$3a4deda42b6182b7 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
-  background-color: ${({ theme: theme  })=>theme.primaryColor};
-  border: none;
-  border-radius: 50px;
-  padding: 12px 18px;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 18px;
-  color: #fff;
-  margin-top: 30px;
+const $32119bad9969854e$export$3f7ff862632a81a7 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap-reverse;
+  gap: 10px 20px;
+  width: 280px;
+  margin: auto;
 `;
+const $32119bad9969854e$export$1058440c16b3a127 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).label`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  justify-content: center;
+  flex-grow: 1;
 
-
-const $3d1bfd8f074b99b1$var$EndView = ()=>{
-    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
-    const { streamState: streamState , setStreamState: setStreamState  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 10px;
+  color: #686868;
+  input[type='radio'] {
+    appearance: none;
+    border: ${(props)=>props.image ? 0 : `3px solid ${props.theme.popupBorderColor}`};
+    background-color: ${({ theme: theme  })=>theme.popupBackgroundThirdColor};
+    background-position: 0 0;
+    background-image: ${({ image: image  })=>image ? `url(${image})` : undefined};
+    height: 80px;
+    min-width: 80px;
+    border-radius: 10px;
+    margin: 0;
+    box-sizing: border-box;
+
+    &:checked {
+      background-position: -3px -3px;
+      border: 3px solid ${({ theme: theme  })=>theme.primaryColor};
+    }
+
+    &:checked + span {
+      color: ${({ theme: theme  })=>theme.primaryColor};
+    }
+  }
+
+  &:hover input[type='radio'],
+  span {
+    cursor: pointer;
+  }
+
+  span {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    display: ${({ image: image  })=>image ? "none" : "inline"};
+  }
+`;
+const $32119bad9969854e$export$dfc919b3320e9811 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
+  background-color: ${({ theme: theme  })=>theme.primaryColor};
+  padding: 8px 18px;
+  width: 280px;
+  height: 46px;
+  border-radius: 15px;
+  margin: 20px auto 0;
+  border: none;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 18px;
+  transition: border-radius 0.3s ease-in, width 0.3s;
+
+  span {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+
+
+const $8a52c9358bc52b86$var$backgroundOptions = [
+    {
+        title: "Blue",
+        id: "background-blue",
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/blue_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/blue_background.png`
+    },
+    {
+        title: "Cold",
+        id: "background-cold",
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/cold_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/cold_background.png`
+    },
+    {
+        title: "Bricks",
+        id: "background-bricks",
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/bricks_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/bricks_background.png`
+    },
+    {
+        title: "White",
+        id: "background-white",
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/white_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/white_background.png`
+    },
+    {
+        title: "Yellow",
+        id: "background-yellow",
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/yellow_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/yellow_background.png`
+    },
+    {
+        title: "Warm",
+        id: "background-warm",
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/warm_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/warm_background.png`
+    },
+    {
+        title: "None",
+        value: "none",
+        id: "background-none"
+    },
+    {
+        title: "Blurred",
+        value: "blurred",
+        id: "background-blurred"
+    }, 
+];
+const $8a52c9358bc52b86$var$VirtualBackgroundPopup = ()=>{
+    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
+    const virtualBackgroundPopupRef = (0, $jQDcL$react.useRef)(null);
+    const { isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible , setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible , orientation: orientation  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const desktop = orientation === "landscape";
+    const onSubmit = (e)=>{
+        e.preventDefault();
+        const value = e.currentTarget.elements.background.value;
+        if (value === "none") (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).stopVideoBackground();
+        else if (value === "blurred") {
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setVideoBackground({
+                blurLevel: 16,
+                type: "blur"
+            });
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).initVideoBackground();
+        } else {
+            const background = new Image();
+            background.src = value;
+            background.crossOrigin = "anonymous";
+            background.onload = ()=>{
+                (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setVideoBackground({
+                    background: background,
+                    type: "background"
+                });
+                (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).initVideoBackground();
+            };
+        }
+        setIsVirtualBackgroundPopupVisible(false);
+    };
+    const onCloseClick = ()=>setIsVirtualBackgroundPopupVisible(false);
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $32119bad9969854e$export$b298b737d508d68e), {
+        open: isVirtualBackgroundPopupVisible,
+        desktop: desktop,
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $32119bad9969854e$export$156bb26b5a0d2f83), {
+            ref: virtualBackgroundPopupRef,
+            desktop: desktop,
+            children: [
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $32119bad9969854e$export$28a9baece842bd02), {
+                    children: [
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $32119bad9969854e$export$de75cb5a82158063), {
+                            children: [
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $cce7f1c9e9c29503$export$d5424e4dfe4be076), {
+                                    color: "#000"
+                                }),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("h4", {
+                                    children: t("virtualBackground.title")
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $32119bad9969854e$export$ab8c73b78f24745), {
+                            onClick: onCloseClick,
+                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6f36db3b1217f099$export$2e2bcd8739ae039), {})
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $32119bad9969854e$export$8603bdc04df69ddb), {
+                    onSubmit: onSubmit,
+                    children: [
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $32119bad9969854e$export$3f7ff862632a81a7), {
+                            children: $8a52c9358bc52b86$var$backgroundOptions.map(({ id: id , title: title , value: value , iconUrl: iconUrl  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $32119bad9969854e$export$1058440c16b3a127), {
+                                    htmlFor: id,
+                                    image: iconUrl,
+                                    children: [
+                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("input", {
+                                            type: "radio",
+                                            value: value,
+                                            id: id,
+                                            name: "background",
+                                            defaultChecked: value === "none"
+                                        }),
+                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
+                                            children: title
+                                        })
+                                    ]
+                                }, id))
+                        }),
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $32119bad9969854e$export$dfc919b3320e9811), {
+                            type: "submit",
+                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("span", {
+                                children: [
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3e04235fac70629f$export$2e2bcd8739ae039), {}),
+                                    t("virtualBackground.setBackground")
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+var $8a52c9358bc52b86$export$2e2bcd8739ae039 = $8a52c9358bc52b86$var$VirtualBackgroundPopup;
+
+
+
+const $e6950939129bcd4b$export$8376625f8bb18347 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: ${(props)=>props.open ? "rgba(0, 0, 0, 0.9)" : "transparent"};
+  z-index: ${(props)=>props.open ? 100 : -1};
+  overflow: hidden;
+  transition: all ${(props)=>props.open ? "0.2s" : "0.6s"};
+`;
+
+
+const $5f509eaff0d9c05a$var$Settings = ()=>{
+    const { isQuickConnectPopupVisible: isQuickConnectPopupVisible , isSettingsMenuVisible: isSettingsMenuVisible , isYoutubePopupVisible: isYoutubePopupVisible , isLinksharePopupVisible: isLinksharePopupVisible , isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const open = isQuickConnectPopupVisible || isSettingsMenuVisible || isYoutubePopupVisible || isLinksharePopupVisible || isVirtualBackgroundPopupVisible;
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $e6950939129bcd4b$export$8376625f8bb18347), {
+        open: open,
+        children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $681806ce8015ae4d$export$2e2bcd8739ae039), {}),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7d4fa7ceb4c29739$export$2e2bcd8739ae039), {}),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $696ded7a5399bcd4$export$2e2bcd8739ae039), {}),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e38290b50aaba0e3$export$2e2bcd8739ae039), {}),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $8a52c9358bc52b86$export$2e2bcd8739ae039), {})
+        ]
+    });
+};
+var $5f509eaff0d9c05a$export$2e2bcd8739ae039 = $5f509eaff0d9c05a$var$Settings;
+
+
+
+
+
+
+
+
+
+const $bbe4b943c376008e$export$104f28dc79f055f4 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #000;
+  color: #fff;
+  padding-top: 70px;
+`;
+const $bbe4b943c376008e$export$51071a7ce784448 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).span`
+  font-size: 60px;
+`;
+const $bbe4b943c376008e$export$eebc018855fb0cb6 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).h1`
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 33.6px;
+`;
+const $bbe4b943c376008e$export$f4e7b895a81715e9 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).p`
+  font-size: 22px;
+  font-weight: 500;
+  line-height: 26.4px;
+  margin: 0;
+`;
+const $bbe4b943c376008e$export$3a4deda42b6182b7 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
+  background-color: ${({ theme: theme  })=>theme.primaryColor};
+  border: none;
+  border-radius: 50px;
+  padding: 12px 18px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 18px;
+  color: #fff;
+  margin-top: 30px;
+`;
+
+
+const $3d1bfd8f074b99b1$var$EndView = ()=>{
+    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
+    const { streamState: streamState , setStreamState: setStreamState  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const ended = streamState === "ended";
     const terminated = streamState === "terminated";
     const expired = streamState === "expired";
@@ -8486,7 +9426,6 @@ var $5dcd9e6925c7037c$export$2e2bcd8739ae039 = $5dcd9e6925c7037c$var$Sounds;
 
 
 
-
 const $e66cc5db58913155$var$iconsMap = {
     error: (0, $e8ac63718934c648$export$edf27be85e5f6da0),
     critical: (0, $e8ac63718934c648$export$c7df1b15b59b1df2)
@@ -8602,6 +9541,7 @@ const $9295e87e6b93e693$export$f30cb9bc4f736419 = {
     settingsCloseBackgroundColor: "#eaebec",
     popupBackgroundPrimaryColor: "#fff",
     popupBackgroundSecondaryColor: "#f3f3f3",
+    popupBackgroundThirdColor: "#f7f7f7",
     popupBorderColor: "#d4d4d4",
     popupTitleColor: "#2d2d2d"
 };
@@ -8622,6 +9562,7 @@ const $9295e87e6b93e693$export$3e936a8db52a10a0 = {
     settingsCloseBackgroundColor: "#7b7c7e",
     popupBackgroundPrimaryColor: "#fff",
     popupBackgroundSecondaryColor: "#f3f3f3",
+    popupBackgroundThirdColor: "#f7f7f7",
     popupBorderColor: "#d4d4d4",
     popupTitleColor: "#2d2d2d"
 };
@@ -8769,6 +9710,13 @@ const $e41262de25602ed2$var$SvgDefinitions = ()=>/*#__PURE__*/ (0, $jQDcL$reactj
                         fill: "#fff",
                         d: "M0 0h24v24H0z"
                     })
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("clipPath", {
+                    id: "greetingSnapcallLogo",
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                        fill: "#fff",
+                        d: "M0 0h72v72H0z"
+                    })
                 })
             ]
         })
@@ -9079,7 +10027,7 @@ const $c3d5253d9d597eb5$var$audioSource = new Blob([
 const $c3d5253d9d597eb5$var$audioURL = URL.createObjectURL($c3d5253d9d597eb5$var$audioSource);
 let $c3d5253d9d597eb5$var$mediaResult = undefined;
 const $c3d5253d9d597eb5$export$716eeec86fd18da7 = ()=>{
-    $c3d5253d9d597eb5$var$mediaResult?.getAudioTracks().forEach((track)=>{
+    $c3d5253d9d597eb5$var$mediaResult?.getTracks().forEach((track)=>{
         track.stop();
     });
     $c3d5253d9d597eb5$var$mediaResult = undefined;
@@ -9091,7 +10039,8 @@ const $c3d5253d9d597eb5$export$494039379563c94d = async ()=>{
     } catch (err) {
         console.warn("User interaction is required, asking audio GUM");
         $c3d5253d9d597eb5$var$mediaResult = await navigator.mediaDevices.getUserMedia({
-            audio: true
+            audio: true,
+            video: true
         });
     }
 };
@@ -9136,6 +10085,12 @@ const $e3bb2c5d0e5b45b5$export$20f257fc407da7a3 = (0, $jQDcL$styledcomponents.cr
     src: url('https://cdn.snapcall.io/fonts/Lato/Bold.woff2') format('woff2'),
       url('https://cdn.snapcall.io/fonts/Lato/Bold.woff') format('woff');
   }
+  @font-face {
+    font-family: 'Gazpacho';
+    font-weight: 700;
+    src: url('https://cdn.snapcall.io/fonts/Gazpacho/Bold.woff2') format('woff2'),
+      url('https://cdn.snapcall.io/fonts/Gazpacho/Bold.woff') format('woff');
+  }
 `;
 const $e3bb2c5d0e5b45b5$export$914ddf2021ea8ee6 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
   display: flex;
@@ -9178,6 +10133,7 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
     const [isSettingsMenuVisible, setIsSettingsMenuVisible] = (0, $jQDcL$react.useState)(false);
     const [isYoutubePopupVisible, setIsYoutubePopupVisible] = (0, $jQDcL$react.useState)(false);
     const [isLinksharePopupVisible, setIsLinksharePopupVisible] = (0, $jQDcL$react.useState)(false);
+    const [isVirtualBackgroundPopupVisible, setIsVirtualBackgroundPopupVisible] = (0, $jQDcL$react.useState)(false);
     const [theme, setTheme] = (0, $jQDcL$react.useState)($ee8cb448c2c74888$var$currentTheme);
     const [language, setLanguage] = (0, $jQDcL$react.useState)(options.language || $ee8cb448c2c74888$var$currentLanguage);
     const [profile1, setProfile] = (0, $jQDcL$react.useState)({});
@@ -9188,7 +10144,7 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
     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 orientation = (containerWidth || window.screen.width) > (containerHeight || window.screen.height) ? "landscape" : "portrait";
     const styledTheme = theme === "dark" ? (0, $9295e87e6b93e693$export$3e936a8db52a10a0) : (0, $9295e87e6b93e693$export$f30cb9bc4f736419);
     const onEnterRoom = async (event)=>{
         const peerId = event.detail.peerId;
@@ -9342,6 +10298,8 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
             setIsYoutubePopupVisible: setIsYoutubePopupVisible,
             isLinksharePopupVisible: isLinksharePopupVisible,
             setIsLinksharePopupVisible: setIsLinksharePopupVisible,
+            isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible,
+            setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible,
             theme: theme,
             setTheme: setTheme,
             language: language,
@@ -9401,12 +10359,432 @@ window.hj = window.hj || function() {
 
 
 
+
+
+
+
+const $d9d258dccafa26ef$var$GreetingSnapcallLogo = ()=>{
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
+        width: "72",
+        height: "72",
+        viewBox: "0 0 72 72",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("g", {
+            clipPath: "url(#greetingSnapcallLogo)",
+            children: [
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                    d: "M0 36C0 6.354 6.354 0 36 0s36 6.354 36 36-6.354 36-36 36S0 65.646 0 36Z",
+                    fill: "#000"
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                    d: "M36.225 57.428c2.367 0 4.35-1.964 3.62-4.215a13.38 13.38 0 0 0-3.133-5.203c-2.432-2.498-5.73-3.902-9.17-3.902-3.44 0-6.74 1.404-9.172 3.902a13.381 13.381 0 0 0-3.132 5.203c-.731 2.25 1.252 4.215 3.62 4.215h17.367ZM35.775 14.572c-2.367 0-4.35 1.965-3.62 4.216a13.381 13.381 0 0 0 3.133 5.203c2.432 2.498 5.73 3.901 9.17 3.901 3.44 0 6.74-1.403 9.172-3.901a13.375 13.375 0 0 0 3.132-5.203c.731-2.252-1.252-4.216-3.62-4.216H35.776ZM44.459 53.143c0 2.367 1.971 4.352 4.204 3.566a12.924 12.924 0 0 0 4.967-3.182c2.432-2.498 3.799-5.886 3.799-9.419 0-3.533-1.367-6.921-3.8-9.42a12.923 12.923 0 0 0-4.966-3.181c-2.233-.786-4.204 1.2-4.204 3.566v18.07ZM27.541 18.857c0-2.367-1.971-4.352-4.204-3.566a12.923 12.923 0 0 0-4.967 3.182c-2.432 2.498-3.799 5.886-3.799 9.42 0 3.532 1.367 6.92 3.8 9.418a12.923 12.923 0 0 0 4.966 3.182c2.233.786 4.204-1.2 4.204-3.566v-18.07Z",
+                    fill: "#fff"
+                })
+            ]
+        })
+    });
+};
+var $d9d258dccafa26ef$export$2e2bcd8739ae039 = $d9d258dccafa26ef$var$GreetingSnapcallLogo;
+
+
+
+
+const $5fd6e456b33aeaa7$export$d653589df987fd93 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #1d1c20;
+  padding-top: 76px;
+  font-family: Lato;
+  box-sizing: border-box;
+`;
+const $5fd6e456b33aeaa7$export$d43ffeaaec0b2a58 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  svg {
+    width: 50px;
+    height: 50px;
+  }
+  background-color: black;
+  border-radius: 25px;
+  box-sizing: border-box;
+`;
+const $5fd6e456b33aeaa7$export$873b7756313e36bb = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).h1`
+  font-size: 32px;
+  line-height: 39px;
+  font-weight: 700;
+  font-family: Gazpacho;
+  text-align: center;
+`;
+const $5fd6e456b33aeaa7$export$b7a7fefc0b349825 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+const $5fd6e456b33aeaa7$export$b302ef9d8310f71 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  position: relative;
+  width: 350px;
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const $5fd6e456b33aeaa7$export$ae01dedf5c052bb = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).video`
+  width: 300px;
+  height: 300px;
+  background-color: black;
+  border-radius: 15px;
+  object-fit: cover;
+`;
+const $5fd6e456b33aeaa7$export$778ed67917f5eacf = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  gap: 8px;
+  z-index: 15;
+`;
+const $5fd6e456b33aeaa7$export$92fe811838849d7d = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background-color: rgba(28, 32, 36, 0.25);
+  z-index: 2;
+`;
+const $5fd6e456b33aeaa7$export$65550b47dde6d016 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  position: absolute;
+  width: 300px;
+  height: 300px;
+  background-color: black;
+  border-radius: 15px;
+  z-index: 1;
+  display: ${({ webcamEnabled: webcamEnabled  })=>webcamEnabled ? "none" : "flex"};
+  align-items: center;
+  justify-content: center;
+`;
+const $5fd6e456b33aeaa7$export$48377ae1c677702b = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  position: absolute;
+  bottom: 45px;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  gap: 13px;
+  z-index: 2;
+`;
+const $5fd6e456b33aeaa7$export$6e8af0bd0a2aaa77 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  min-height: 48px;
+  background-color: ${({ danger: danger  })=>danger ? "#d84949" : "#2d2d2d"};
+  border: none;
+  border-radius: 15px;
+  padding: 0 8px;
+  gap: 8px;
+  cursor: pointer;
+
+  p {
+    color: white;
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  &:hover {
+    border: 2px solid ${({ danger: danger  })=>danger ? "#fc7d7d" : "#8d8d8d"};
+  }
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`;
+const $5fd6e456b33aeaa7$export$c7a6f02121c3b3b5 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 350px;
+
+  h3 {
+    margin: 0;
+  }
+`;
+const $5fd6e456b33aeaa7$export$916d4667067f956a = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).h3`
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 700;
+  margin: 0;
+  font-family: Gazpacho;
+`;
+const $5fd6e456b33aeaa7$export$190947c3048e2d5d = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).p`
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 400;
+`;
+const $5fd6e456b33aeaa7$export$f5b8910cec6cf069 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).input`
+  width: 100%;
+  border: 1px solid #c9c9ca;
+  border-radius: 8px;
+  height: 50px;
+  padding: 14px 12px;
+  box-sizing: border-box;
+  margin-top: 40px;
+  font-size: 16px;
+`;
+const $5fd6e456b33aeaa7$export$353f5b6fc5456de1 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
+  width: 100%;
+  background-color: #1d1c20;
+  color: white;
+  padding: 0;
+  outline: inherit;
+  height: 50px;
+  border: 0;
+  border-radius: 8px;
+  margin-top: 15px;
+  font-size: 16px;
+  line-height: 19px;
+  font-weight: 500;
+  cursor: pointer;
+`;
+const $5fd6e456b33aeaa7$export$a06f1c675e846f6f = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).footer`
+  display: flex;
+  flex: 1;
+  justify-content: flex-end;
+  flex-direction: column;
+  margin-bottom: 30px;
+  align-items: center;
+  text-align: center;
+  width: 300px;
+`;
+const $5fd6e456b33aeaa7$export$53e4a0ea45e729a2 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).h5`
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 19px;
+  margin: 0;
+  font-family: Gazpacho;
+`;
+const $5fd6e456b33aeaa7$export$eb20cbaff2d739a5 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).p`
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: black;
+  margin-bottom: 0;
+  margin-top: 10px;
+`;
+const $5fd6e456b33aeaa7$export$d4a1a815e49dfefd = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  color: #1d1c20;
+  height: 100%;
+`;
+
+
+
+
+
+
+const $3305ca02e86dabd1$var$GreetingView = ({ onGreetingDone: onGreetingDone  })=>{
+    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
+    const [mainContainerRef, { width: width , height: height  }] = (0, $56e1e7a85d8bf4bb$export$e295b0c537d32d7d)();
+    const inputRef = (0, $jQDcL$react.useRef)(null);
+    const videoRef = (0, $jQDcL$react.useRef)(null);
+    const [videoTrack1, setVideoTrack] = (0, $jQDcL$react.useState)(undefined);
+    const [micEnabled, setMicEnabled] = (0, $jQDcL$react.useState)(false);
+    const [joining, setJoining] = (0, $jQDcL$react.useState)(false);
+    const desktop = width >= height;
+    const onSubmit = ()=>{
+        const displayName = inputRef.current?.value;
+        const cameraEnabled = Boolean(videoTrack1);
+        videoTrack1?.stop();
+        setJoining(true);
+        setTimeout(()=>{
+            onGreetingDone({
+                cameraEnabled: cameraEnabled,
+                micEnabled: micEnabled,
+                displayName: displayName
+            });
+        }, 4000);
+    };
+    const getUserMedia = async (opt)=>{
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia(opt);
+            const videoTrack = stream.getVideoTracks()[0];
+            const audioTrack = stream.getAudioTracks()[0];
+            if (videoTrack) setVideoTrack(videoTrack);
+            if (audioTrack) setMicEnabled(true);
+            audioTrack?.stop();
+        } catch (err) {
+            console.error("Get User Media Failed: ", err);
+        }
+    };
+    const onCameraClick = (0, $jQDcL$react.useCallback)(async ()=>{
+        if (!videoTrack1) await getUserMedia({
+            video: true
+        });
+        else {
+            videoTrack1.stop();
+            setVideoTrack(undefined);
+        }
+    }, [
+        videoTrack1
+    ]);
+    const onMicrophoneClick = (0, $jQDcL$react.useCallback)(async ()=>{
+        if (!micEnabled) await getUserMedia({
+            audio: true
+        });
+        else setMicEnabled(false);
+    }, [
+        micEnabled
+    ]);
+    (0, $jQDcL$react.useEffect)(()=>{
+        if (videoRef.current) {
+            if (videoTrack1) videoRef.current.srcObject = new MediaStream([
+                videoTrack1
+            ]);
+            else videoRef.current.srcObject = null;
+        }
+    }, [
+        videoRef,
+        videoTrack1,
+        width,
+        height
+    ]);
+    (0, $jQDcL$react.useEffect)(()=>{
+        getUserMedia({
+            audio: true,
+            video: true
+        });
+    }, []);
+    if (joining === true) return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$d4a1a815e49dfefd), {
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("img", {
+            src: `${"https://stream-assets.snapcall.io/v1.8.0"}/animations/snapcall-logo-animation.gif`,
+            alt: "Snapcall logo animation",
+            height: 40
+        })
+    });
+    const webcamEnabled = Boolean(videoTrack1);
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5fd6e456b33aeaa7$export$d653589df987fd93), {
+        ref: mainContainerRef,
+        children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e3bb2c5d0e5b45b5$export$20f257fc407da7a3), {}),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $d9d258dccafa26ef$export$2e2bcd8739ae039), {}),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$873b7756313e36bb), {
+                children: t("greeting.mainTitle")
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5fd6e456b33aeaa7$export$b7a7fefc0b349825), {
+                children: [
+                    desktop && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5fd6e456b33aeaa7$export$b302ef9d8310f71), {
+                        children: [
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$ae01dedf5c052bb), {
+                                webcamEnabled: webcamEnabled,
+                                ref: videoRef,
+                                autoPlay: true
+                            }),
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5fd6e456b33aeaa7$export$65550b47dde6d016), {
+                                webcamEnabled: webcamEnabled,
+                                children: [
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5fd6e456b33aeaa7$export$778ed67917f5eacf), {
+                                        children: [
+                                            !micEnabled && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$92fe811838849d7d), {
+                                                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0ac48791ff0bcc8e$export$2e2bcd8739ae039), {
+                                                    status: !micEnabled
+                                                })
+                                            }),
+                                            !webcamEnabled && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$92fe811838849d7d), {
+                                                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ab00aedf8a706bfe$export$2e2bcd8739ae039), {
+                                                    status: !webcamEnabled
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$6e8af0bd0a2aaa77), {
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0319693440f03062$export$2e2bcd8739ae039), {})
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5fd6e456b33aeaa7$export$48377ae1c677702b), {
+                                children: [
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$6e8af0bd0a2aaa77), {
+                                        onClick: onMicrophoneClick,
+                                        danger: !micEnabled,
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0ac48791ff0bcc8e$export$2e2bcd8739ae039), {
+                                            status: !micEnabled
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$6e8af0bd0a2aaa77), {
+                                        onClick: onCameraClick,
+                                        danger: !webcamEnabled,
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ab00aedf8a706bfe$export$2e2bcd8739ae039), {
+                                            status: !webcamEnabled
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5fd6e456b33aeaa7$export$c7a6f02121c3b3b5), {
+                        children: [
+                            desktop && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$916d4667067f956a), {
+                                children: t("greeting.sideTitle")
+                            }),
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$190947c3048e2d5d), {
+                                children: t("greeting.sideDescription")
+                            }),
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$f5b8910cec6cf069), {
+                                ref: inputRef,
+                                name: "displayName",
+                                type: "text",
+                                placeholder: t("greeting.namePlaceholder"),
+                                autoFocus: true
+                            }),
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$353f5b6fc5456de1), {
+                                onClick: onSubmit,
+                                children: t("greeting.nameSubmit")
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5fd6e456b33aeaa7$export$a06f1c675e846f6f), {
+                children: [
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$53e4a0ea45e729a2), {
+                        children: t("greeting.footerTitle")
+                    }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$eb20cbaff2d739a5), {
+                        children: t("greeting.footerDescription")
+                    })
+                ]
+            })
+        ]
+    });
+};
+var $3305ca02e86dabd1$export$2e2bcd8739ae039 = $3305ca02e86dabd1$var$GreetingView;
+
+
 const $e68207026aca356b$var$currentURL = new URL(window.location.href);
 const $e68207026aca356b$var$microphoneEnabled = $e68207026aca356b$var$currentURL.searchParams.get("microphone-enabled") !== "0";
 const $e68207026aca356b$var$cameraEnabled = $e68207026aca356b$var$currentURL.searchParams.get("camera-enabled") === "1";
 const $e68207026aca356b$var$defaultOptions = {
     sharedURL: window.location.href,
     showMenuButton: true,
+    settingsShortcuts: [
+        {
+            id: "pip",
+            displayType: "icon"
+        }
+    ],
     controls: {
         microphone: {
             available: true,
@@ -9432,6 +10810,11 @@ const $e68207026aca356b$export$3f94917203ab7078 = {
         }), element);
         if (mergedOptions.tracking) (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).init(3111933, 6);
     },
+    initGreeting: (element, onGreetingDone)=>{
+        (0, $jQDcL$reactdom.render)(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3305ca02e86dabd1$export$2e2bcd8739ae039), {
+            onGreetingDone: onGreetingDone
+        }), element);
+    },
     setExtraSettingsOptions: (extraOptions)=>{
         const event = new CustomEvent("streamUISetExtraSettingsOptions", {
             detail: {