@snapcall/stream-ui 1.5.0 → 1.7.0

package/dist/stream-ui.esm.js

@@ -1,7 +1,8 @@
 import {jsx as $3Sbms$jsx, jsxs as $3Sbms$jsxs, Fragment as $3Sbms$Fragment} from "react/jsx-runtime";
 import {render as $3Sbms$render, createPortal as $3Sbms$createPortal} from "react-dom";
+import $3Sbms$hotjarbrowser from "@hotjar/browser";
 import $3Sbms$reacthottoast, {toast as $3Sbms$toast, Toaster as $3Sbms$Toaster, ToastBar as $3Sbms$ToastBar} from "react-hot-toast";
-import $3Sbms$styledcomponents, {keyframes as $3Sbms$keyframes, ThemeProvider as $3Sbms$ThemeProvider, css as $3Sbms$css, createGlobalStyle as $3Sbms$createGlobalStyle} from "styled-components";
+import $3Sbms$styledcomponents, {keyframes as $3Sbms$keyframes, ThemeProvider as $3Sbms$ThemeProvider, css as $3Sbms$css, ThemeContext as $3Sbms$ThemeContext, createGlobalStyle as $3Sbms$createGlobalStyle} from "styled-components";
 import {useState as $3Sbms$useState, useRef as $3Sbms$useRef, useEffect as $3Sbms$useEffect, useContext as $3Sbms$useContext, useMemo as $3Sbms$useMemo, createContext as $3Sbms$createContext, useReducer as $3Sbms$useReducer, useLayoutEffect as $3Sbms$useLayoutEffect, useCallback as $3Sbms$useCallback} from "react";
 import "inobounce";
 import $3Sbms$i18next from "i18next";
@@ -12,10 +13,12 @@ import {WebSocketTransport as $3Sbms$WebSocketTransport, Peer as $3Sbms$Peer} fr
 import {captureException as $3Sbms$captureException, addBreadcrumb as $3Sbms$addBreadcrumb, setTag as $3Sbms$setTag} from "@sentry/browser";
 import {Producer as $3Sbms$Producer} from "mediasoup-client/lib/Producer";
 import {Device as $3Sbms$Device} from "mediasoup-client";
+import {SelfieSegmentation as $3Sbms$SelfieSegmentation} from "@mediapipe/selfie_segmentation";
 import {toCanvas as $3Sbms$toCanvas} from "qrcode";
 
 
 
+
 const $365e765f9890497b$var$isObject = (obj)=>{
     if (typeof obj === "object" && obj !== null) {
         if (typeof Object.getPrototypeOf === "function") {
@@ -306,6 +309,7 @@ const $a5146f9062d7bf28$export$3a57e165650c636f = (message, options = {})=>{
 
 
 
+
 const $a3e657fb86ae23f3$export$604ba5624273df44 = ()=>{
     try {
         const storedTheme = localStorage.getItem("stream_ui_language");
@@ -340,7 +344,9 @@ const $18fb8799f38eb407$export$84584c2a98eb6753 = {
             tooLate: "You arrived too late",
             callIsOver: "The call is over or deleted",
             callEnded: "The call is now ended",
-            callLeft: "You left the call"
+            callLeft: "You left the call",
+            full: "You can't join this call",
+            fullDescription: "The room is full. Please try to join the call later."
         },
         menu: {
             title: "Menu",
@@ -352,6 +358,7 @@ const $18fb8799f38eb407$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"
         },
@@ -385,21 +392,19 @@ const $18fb8799f38eb407$export$84584c2a98eb6753 = {
         shareLink: {
             title: "Share link",
             title2: "Share a link",
-            linkUrl: "LINK URL",
             invalid: "Invalid link",
             sentToUsers: "Link sent to users",
             sentToUser: "Link sent to {{user}}",
             failed: "Failed to send link",
-            creating: "Link is creating...",
             poweredBy: "Powered by",
             invoice: "{{user}} sent you an invoice.",
             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"
@@ -420,13 +425,17 @@ const $18fb8799f38eb407$export$84584c2a98eb6753 = {
             request: "{{user}} would like you to share your {{device}}",
             timedOut: "Your request has timed out.",
             declined: "Your request has been declined.",
-            userDeclined: "{{name}} has declined your request."
+            userDeclined: "{{user}} has declined your request."
         },
         leave: {
             title: "Leave",
             leaveCall: "Leave call",
             endCall: "End call for all"
         },
+        virtualBackground: {
+            title: "Virtual Background",
+            setBackground: "Set Background"
+        },
         misc: {
             someone: "Someone",
             camera: "Camera",
@@ -439,6 +448,20 @@ const $18fb8799f38eb407$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."
         }
     }
 };
@@ -466,7 +489,9 @@ const $c5472fb74fa04782$export$acb2a88f7d552ebf = {
             tooLate: "Vous \xeates arrivez trop tard",
             callIsOver: "Cet appel est termin\xe9 ou supprim\xe9",
             callEnded: "Cet appel est termin\xe9",
-            callLeft: "Vous avez quitt\xe9 l'appel"
+            callLeft: "Vous avez quitt\xe9 l'appel",
+            full: "Impossible de rejoindre l'appel",
+            fullDescription: "Limite d'utilisateurs atteinte. Merci de rejoindre l'appel ult\xe9rieurement."
         },
         menu: {
             title: "Menu",
@@ -478,6 +503,7 @@ const $c5472fb74fa04782$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"
         },
@@ -511,21 +537,19 @@ const $c5472fb74fa04782$export$acb2a88f7d552ebf = {
         shareLink: {
             title: "Partager un lien",
             title2: "Partager un lien",
-            linkUrl: "URL DU LIEN",
             invalid: "Lien invalide",
             sentToUsers: "Lien envoy\xe9 aux participants",
             sentToUser: "Lien envoy\xe9 \xe0 {{user}}",
             failed: "Une erreur est survenue pendant l'envoi du lien",
-            creating: "Lien en cours de cr\xe9ation...",
             poweredBy: "Propos\xe9 par",
             invoice: "{{user}} vous a envoy\xe9 une facture.",
             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"
@@ -546,12 +570,16 @@ const $c5472fb74fa04782$export$acb2a88f7d552ebf = {
             request: "{{user}} voudrait que vous partagiez votre {{device}}",
             timedOut: "Votre requ\xeate n'a pas eu de r\xe9ponse",
             declined: "Votre requ\xeate a \xe9t\xe9 refus\xe9.",
-            userDeclined: "{{name}} a d\xe9clin\xe9 votre requ\xeate."
+            userDeclined: "{{user}} a d\xe9clin\xe9 votre requ\xeate."
         },
         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",
@@ -565,6 +593,20 @@ const $c5472fb74fa04782$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."
         }
     }
 };
@@ -592,7 +634,9 @@ const $b7790fb9e48df5c4$export$3486a10f30cf1ee4 = {
             tooLate: "Sei arrivato troppo tardi",
             callIsOver: "Questa chiamata \xe8 finita o \xe8 stata eliminata",
             callEnded: "Questa chiamata \xe8 finita",
-            callLeft: "Hai lasciato la chiamata"
+            callLeft: "Hai lasciato la chiamata",
+            full: "Impossibile partecipare alla chiamata",
+            fullDescription: "Limite d'uso attenente."
         },
         menu: {
             title: "Men\xf9",
@@ -604,6 +648,7 @@ const $b7790fb9e48df5c4$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"
         },
@@ -637,21 +682,19 @@ const $b7790fb9e48df5c4$export$3486a10f30cf1ee4 = {
         shareLink: {
             title: "Condividi un link",
             title2: "Condividi un link",
-            linkUrl: "Link URL",
             invalid: "Collegamento non valido",
             sentToUsers: "Link inviato ai partecipanti",
             sentToUser: "Link inviato a {{user}}",
             failed: "Si \xe8 verificato un errore durante l'invio del link",
-            creating: "Link che viene creato...",
             poweredBy: "Proposto da",
             invoice: "{{User}} ti ha inviato una fattura.",
             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"
@@ -672,13 +715,21 @@ const $b7790fb9e48df5c4$export$3486a10f30cf1ee4 = {
             request: "{{user}} vorrebbe condividere il tuo {{device}}",
             timedOut: "La tua richiesta non ha ricevuto risposta",
             declined: "La tua richiesta \xe8 stata rifiutata.",
-            userDeclined: "{{name}} ha rifiutato la tua richiesta"
+            userDeclined: "{{user}} ha rifiutato la tua richiesta"
         },
         leave: {
             title: "Lasciare",
             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",
@@ -691,6 +742,20 @@ const $b7790fb9e48df5c4$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."
         }
     }
 };
@@ -720,6 +785,7 @@ var $384d985bb9605c35$export$2e2bcd8739ae039 = (0, $3Sbms$i18next);
 
 
 
+
 const $0f65a9eaf4a1e910$var$LogLevel = {
     error: 1,
     warn: 2,
@@ -1121,13 +1187,165 @@ class $a2f0e3c29b11c88e$export$2e2bcd8739ae039 {
 }
 
 
+
+
+const $0148b6fd862a22e8$var$log = new (0, $0f65a9eaf4a1e910$export$2e2bcd8739ae039)("MediaPipe");
+const $0148b6fd862a22e8$var$mediapipeUrl = "https://stream-assets.snapcall.io/v1.7.0";
+let $0148b6fd862a22e8$var$selfieSegmentationInitialized = false;
+const $0148b6fd862a22e8$var$selfieSegmentation = new $3Sbms$SelfieSegmentation({
+    locateFile: (file, prefix)=>{
+        $0148b6fd862a22e8$var$log.debug("selfieSegmentation", file, prefix);
+        if ($0148b6fd862a22e8$var$mediapipeUrl) return `${$0148b6fd862a22e8$var$mediapipeUrl}/mediapipe/${file}`;
+        const url = window.location.href;
+        const path = url.split("/").slice(0, -1).join("/");
+        return `${path}/mediapipe/${file}`;
+    }
+});
+class $0148b6fd862a22e8$export$2e2bcd8739ae039 {
+    fillColor = "#000000";
+    type = "blur";
+    live = false;
+    fps = 24;
+    blurLevel = 10;
+    timerWorker = new Worker(new URL("timer.370d0e5a.js", import.meta.url), {
+        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(()=>{
+            $0148b6fd862a22e8$var$selfieSegmentation.send({
+                image: this.image
+            });
+            this.runWithFrameCallback();
+        });
+    }
+    async createStream() {
+        try {
+            const option = {
+                selfieMode: false,
+                modelSelection: 0
+            };
+            $0148b6fd862a22e8$var$selfieSegmentation.setOptions(option);
+            $0148b6fd862a22e8$var$log.log("selfie segmentation initialized");
+            if (!$0148b6fd862a22e8$var$selfieSegmentationInitialized) {
+                await $0148b6fd862a22e8$var$selfieSegmentation.initialize();
+                $0148b6fd862a22e8$var$selfieSegmentationInitialized = true;
+            }
+            this.image.srcObject = this.stream;
+            this.image.onplay = async ()=>{
+                this.live = true;
+                try {
+                    $0148b6fd862a22e8$var$selfieSegmentation.onResults((res)=>{
+                        this.onFrame(res);
+                    });
+                    this.timerWorker.onmessage = ()=>{
+                        $0148b6fd862a22e8$var$selfieSegmentation.send({
+                            image: this.image
+                        });
+                    };
+                    this.timerWorker.postMessage({
+                        action: "start",
+                        params: this.fps
+                    });
+                } catch (err) {
+                    $0148b6fd862a22e8$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 $c31e3fb4360572af$var$log = new (0, $0f65a9eaf4a1e910$export$2e2bcd8739ae039)("StreamerClient");
 const $c31e3fb4360572af$export$818d60b2e626da0c = {
     WEBRTC_FAILED: "WRTC1",
     WEBRTC_RECOVER_ERROR: "WRTC2",
     CREATE_TRANSPORT_FAILED: "TRANS1",
     CONSUME_ERROR: "CONS1",
-    SOCKET_LOST: "SOCK1"
+    SOCKET_LOST: "SOCK1",
+    USER_LIMIT: "USERLIMIT"
 };
 const $c31e3fb4360572af$export$d21ffcc5eb136bfa = {
     qvga: {
@@ -1189,8 +1407,16 @@ class $c31e3fb4360572af$var$SnapcallEvent extends CustomEvent {
     }
 }
 const $c31e3fb4360572af$var$StreamerEventTargetType = EventTarget;
+const $c31e3fb4360572af$var$defaultMediapipeOptions = {
+    background: undefined,
+    fillColor: "#ffffff",
+    type: "blur",
+    blurLevel: 10
+};
 class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$StreamerEventTargetType {
     mediasoupTransport = {};
+    mediaPipeOption = $c31e3fb4360572af$var$defaultMediapipeOptions;
+    useVideoBackground = false;
     pendingDeviceRequest = {};
     joinOptions = {};
     devicesList = [];
@@ -1355,7 +1581,9 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         this.protoo.on("close", ()=>$c31e3fb4360572af$var$log.log("protoo.on", "close :("));
         this.protoo.on("notification", async (notification)=>{
             $c31e3fb4360572af$var$log.log("notification", notification);
-            if (notification.method === "newPeer") {
+            if (notification.method === "error") {
+                if (notification.data?.reason === "reached user limit") this.onCriticalError($c31e3fb4360572af$export$818d60b2e626da0c.USER_LIMIT);
+            } else if (notification.method === "newPeer") {
                 const { id: id , profile: profile  } = notification.data;
                 this.peers.set(id, {
                     id: id,
@@ -1490,9 +1718,13 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             }
         });
     }
-    closeWebrtcTransport(transport) {
-        transport?.transport?.close();
-        clearTimeout(transport?.disconnectTimeout);
+    closeWebrtcTransport(key) {
+        const transport = this.mediasoupTransport[key];
+        if (transport) {
+            transport?.transport?.close();
+            clearTimeout(transport?.disconnectTimeout);
+            delete this.mediasoupTransport[key];
+        }
     }
     async getTransport(kind, direction) {
         if (!this.streamerMediasoup) throw new Error("streamerMediasoup not initialized");
@@ -1765,7 +1997,11 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     }
     release() {
         $c31e3fb4360572af$var$log.log("release");
-        for(let key in this.mediasoupTransport)this.closeWebrtcTransport(this.mediasoupTransport[key]);
+        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();
@@ -1867,6 +2103,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         }
     }
     scaleVideoEncodingsParameter() {
+        if (this.useVideoBackground) return;
         try {
             let videoCount = 0;
             this.consumers.forEach((consumer)=>{
@@ -1894,6 +2131,24 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             $c31e3fb4360572af$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) {
@@ -1910,18 +2165,32 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$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 = $c31e3fb4360572af$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
                 },
-                ...$c31e3fb4360572af$export$d21ffcc5eb136bfa[resolution || this.webcam.resolution]
+                ...usedResolution
             }
         }));
+        if (this.useVideoBackground) {
+            if (this.mediaPipe) await this.mediaPipe.clean();
+            this.mediaPipe = new (0, $0148b6fd862a22e8$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
         });
@@ -1942,14 +2211,29 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$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 = $c31e3fb4360572af$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
                 },
-                ...$c31e3fb4360572af$export$d21ffcc5eb136bfa[config?.resolution || this.webcam.resolution]
+                ...usedResolution
             }
         }));
+        if (this.useVideoBackground) {
+            if (this.mediaPipe) await this.mediaPipe.clean();
+            this.mediaPipe = new (0, $0148b6fd862a22e8$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];
@@ -2109,6 +2393,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         }
     }
     requestVideo({ mediaId: mediaId , element: element  }) {
+        $c31e3fb4360572af$var$log.info("requestVideo");
         const consumer = this.consumers.get(mediaId);
         if (consumer) {
             const mediaStream = new MediaStream();
@@ -2126,6 +2411,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         return image;
     }
     requestLocalVideo(element) {
+        $c31e3fb4360572af$var$log.info("requestLocalVideo");
         if (this.webcamProducer) {
             const mediaStream = new MediaStream();
             mediaStream.addTrack(this.webcamProducer.track);
@@ -2645,7 +2931,7 @@ const $2da9626742e3560b$export$6546b255bd3a2004 = ()=>/*#__PURE__*/ (0, $3Sbms$j
             fill: "#fff"
         })
     });
-const $2da9626742e3560b$export$92ce62e1201c4fc0 = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
+const $2da9626742e3560b$export$92ce62e1201c4fc0 = ({ color: color  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
@@ -2653,10 +2939,10 @@ const $2da9626742e3560b$export$92ce62e1201c4fc0 = ()=>/*#__PURE__*/ (0, $3Sbms$j
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $3Sbms$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 $2da9626742e3560b$export$6470d09a29d34d08 = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
+const $2da9626742e3560b$export$6470d09a29d34d08 = ({ color: color  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
@@ -2664,7 +2950,7 @@ const $2da9626742e3560b$export$6470d09a29d34d08 = ()=>/*#__PURE__*/ (0, $3Sbms$j
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $3Sbms$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 $2da9626742e3560b$export$1095c93890fce526 = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
@@ -2719,6 +3005,17 @@ const $2da9626742e3560b$export$5170987d58ae338d = ()=>/*#__PURE__*/ (0, $3Sbms$j
             ]
         })
     });
+const $2da9626742e3560b$export$d5424e4dfe4be076 = ({ color: color  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $3Sbms$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"
+        })
+    });
 
 
 
@@ -2909,10 +3206,17 @@ const $ab29487ffcc05855$export$e2457e1974c298c3 = (0, $3Sbms$styledcomponents).b
   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 $ab29487ffcc05855$export$c4e460d5c7d83bc3 = (0, $3Sbms$styledcomponents).div`
   position: absolute;
@@ -2940,12 +3244,18 @@ const $ae6e25be45301335$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;
             }, []);
@@ -3002,7 +3312,19 @@ const $ae6e25be45301335$var$HeaderSettings = ({ baseCategories: baseCategories ,
     const onSettingsButtonClick = ()=>setDisplaySettingsOptions((previousValue)=>!previousValue);
     return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ab29487ffcc05855$export$8376625f8bb18347), {
         children: [
-            shortcuts.map((shortcut)=>/*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ab29487ffcc05855$export$4297bad962271b02), {
+            shortcuts.map((shortcut)=>{
+                if (shortcut.displayType === "full") return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ab29487ffcc05855$export$e2457e1974c298c3), {
+                    onClick: shortcut.action,
+                    children: [
+                        shortcut.jsxIcon && shortcut.jsxIcon,
+                        shortcut.srcIcon && /*#__PURE__*/ (0, $3Sbms$jsx)("img", {
+                            alt: shortcut.title,
+                            src: shortcut.srcIcon
+                        }),
+                        shortcut.title
+                    ]
+                }, shortcut.id);
+                return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ab29487ffcc05855$export$4297bad962271b02), {
                     onClick: shortcut.action,
                     children: [
                         shortcut.jsxIcon && shortcut.jsxIcon,
@@ -3011,7 +3333,8 @@ const $ae6e25be45301335$var$HeaderSettings = ({ baseCategories: baseCategories ,
                             src: shortcut.srcIcon
                         })
                     ]
-                }, shortcut.id)),
+                }, shortcut.id);
+            }),
             streamUIOptions.showMenuButton && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ab29487ffcc05855$export$a7d9b76c122d0627), {
                 children: [
                     /*#__PURE__*/ (0, $3Sbms$jsx)((0, $ab29487ffcc05855$export$e2457e1974c298c3), {
@@ -3212,7 +3535,7 @@ const $f235befa4cdc42d6$var$multiPiP = new (0, $e96d119a19ed0c6c$export$45fabd1c
 const $f235befa4cdc42d6$var$browser = $3Sbms$parse(window.navigator.userAgent);
 const $f235befa4cdc42d6$var$Header = ()=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
-    const { setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , options: options , muted: muted , streaming: streaming  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible , options: options , muted: muted , streaming: streaming ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
     const [extraOptions, setExtraOptions] = (0, $3Sbms$useState)(options.extraSettingsOptions || []);
     const onSetExtraSettingsOptions = (event)=>{
@@ -3261,10 +3584,14 @@ const $f235befa4cdc42d6$var$Header = ()=>{
         };
         const onScanQuickConnectClick = ()=>{
             setIsQuickConnectPopupVisible(true);
+            (0, $3Sbms$hotjarbrowser).event("quickConnectClick");
         };
         const onSettingsMenuClick = ()=>{
             setIsSettingsMenuVisible(true);
         };
+        const onVirtualBackgroundClick = ()=>{
+            setIsVirtualBackgroundPopupVisible(true);
+        };
         const computedCategories = [
             {
                 id: "1",
@@ -3306,6 +3633,12 @@ const $f235befa4cdc42d6$var$Header = ()=>{
                 ]
             }, 
         ];
+        if ($f235befa4cdc42d6$var$browser.platform.type === "desktop" && $f235befa4cdc42d6$var$browser.engine.name === "Blink") computedCategories[2].items.push({
+            id: "virtualBackground",
+            title: t("virtualBackground.title"),
+            jsxIcon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $2da9626742e3560b$export$d5424e4dfe4be076), {}),
+            action: onVirtualBackgroundClick
+        });
         if (document.pictureInPictureEnabled && $f235befa4cdc42d6$var$browser.platform.type === "desktop") computedCategories[0].items.push({
             id: "pip",
             title: t("menu.pictureInPicture"),
@@ -3319,6 +3652,7 @@ const $f235befa4cdc42d6$var$Header = ()=>{
         options.sharedURL,
         setIsQuickConnectPopupVisible,
         setIsSettingsMenuVisible,
+        setIsVirtualBackgroundPopupVisible,
         t, 
     ]);
     return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ab29487ffcc05855$export$1e86fd0e1db89578), {
@@ -3952,7 +4286,7 @@ const $6efc75079651494a$export$98d9314e6a208b24 = (0, $3Sbms$styledcomponents).d
     if (props.full) return (0, $3Sbms$css)`
         width: 100%;
         height: 100%;
-        inset: 0 0 0 0 !important;
+        right: 0px;
         padding: 17px 10px;
         box-sizing: border-box;
       `;
@@ -4810,7 +5144,8 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
     const [containerWidth, containerHeight] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(videosContainerRef.current);
     const isAlone = streams.length < 1;
     const cursor = streaming && !isAlone && !extended ? "pointer" : "default";
-    let tileSize = "100%";
+    let tileWidth = orientation === "landscape" ? "50%" : "100%";
+    let tileHeight = orientation === "landscape" ? "100%" : "50%";
     if (!isAlone) {
         const computedWidth = (0, $b8e10de7c6dba8c4$export$a6112fefa8de799d)({
             containerWidth: containerWidth,
@@ -4820,7 +5155,8 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
             orientation: orientation,
             extended: extended
         });
-        tileSize = `${computedWidth}px`;
+        tileWidth = `${computedWidth}px`;
+        tileHeight = `${computedWidth}px`;
     }
     const onLocalVideoChange = (event)=>{
         if (!event.detail?.camera?.device) return;
@@ -4871,7 +5207,7 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
                 if (streams.length === 1) {
                     const userName = streams[0].profile.name || t("misc.user");
                     notificationMessage = t("snapshot.sentToUser", {
-                        name: userName
+                        user: userName
                     });
                 }
                 (0, $a5146f9062d7bf28$export$3a57e165650c636f)(notificationMessage, {
@@ -5059,8 +5395,8 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
                 ref: SelfTileRef,
                 full: isAlone,
                 style: {
-                    width: tileSize,
-                    height: tileSize
+                    width: tileWidth,
+                    height: tileHeight
                 },
                 cursor: cursor,
                 onClick: onSelfTileClick,
@@ -5896,8 +6232,113 @@ var $b496fc6f0d99c06d$export$2e2bcd8739ae039 = $b496fc6f0d99c06d$var$Highlighted
 
 
 
+const $b56218b5a57cb77c$export$d653589df987fd93 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  position: absolute;
+  z-index: 20;
+  left: 0;
+  top: 0;
+  transition: all 0.4s;
+  width: ${({ orientation: orientation  })=>orientation === "landscape" ? "50%" : "100%"};
+  height: ${({ orientation: orientation  })=>orientation === "landscape" ? "100%" : "50%"};
+  padding: 17px 10px;
+  box-sizing: border-box;
+`;
+const $b56218b5a57cb77c$export$dd2ac23a70f320dd = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  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;
+`;
+const $b56218b5a57cb77c$export$2dabfbe763cc7a4 = (0, $3Sbms$styledcomponents).h2`
+  font-weight: 600;
+  font-size: 16px;
+  text-align: center;
+  width: 300px;
+`;
+const $b56218b5a57cb77c$export$6ed6e36e1b456f96 = (0, $3Sbms$styledcomponents).div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 50px;
+  width: 300px;
+  background-color: ${({ theme: theme  })=>theme.popupBackgroundSecondaryColor};
+  border: 1px solid ${({ theme: theme  })=>theme.popupBorderColor};
+  border-radius: 15px;
+  padding: 0 10px;
+`;
+const $b56218b5a57cb77c$export$5f759de1870a3e41 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 5px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+const $b56218b5a57cb77c$export$c6b180e8ec79154e = (0, $3Sbms$styledcomponents).p`
+  color: #242324;
+  font-size: 15px;
+  font-weight: 600;
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  line-height: 15px;
+`;
+const $b56218b5a57cb77c$export$d7f3ab4b3437ad97 = (0, $3Sbms$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 $b56218b5a57cb77c$export$c22678f0e7b404e0 = (0, $3Sbms$styledcomponents).p`
+  font-size: 12px;
+  font-weight: 400;
+  width: 300px;
+  text-align: center;
+`;
+
+
+
+
 
 
+const $1ec1d06e0a21fdaa$var$Link = ({ color: color  })=>{
+    return /*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $3Sbms$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 $1ec1d06e0a21fdaa$export$2e2bcd8739ae039 = $1ec1d06e0a21fdaa$var$Link;
 
 
 
@@ -5950,6 +6391,64 @@ const $93a0377c243d965e$export$c7df1b15b59b1df2 = /*#__PURE__*/ (0, $3Sbms$jsxs)
 });
 
 
+const $f0b0b18fe6c6ae77$var$InvitationTile = ({ orientation: orientation  })=>{
+    const { t: t  } = (0, $3Sbms$useTranslation)();
+    const onCopyCallLinkClick = async ()=>{
+        try {
+            await (0, $57162bcada7d6f66$export$2e2bcd8739ae039)(window.location.href);
+            (0, $a5146f9062d7bf28$export$3a57e165650c636f)(t("copyLink.copied"), {
+                duration: 2000
+            });
+        } catch (copyError) {
+            console.warn(copyError);
+            (0, $a5146f9062d7bf28$export$3a57e165650c636f)(t("copyLink.error"), {
+                icon: (0, $93a0377c243d965e$export$edf27be85e5f6da0)
+            });
+        }
+    };
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b56218b5a57cb77c$export$d653589df987fd93), {
+        orientation: orientation,
+        children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $b56218b5a57cb77c$export$dd2ac23a70f320dd), {
+            orientation: orientation,
+            children: [
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b56218b5a57cb77c$export$2dabfbe763cc7a4), {
+                    children: t("invite.title")
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $b56218b5a57cb77c$export$6ed6e36e1b456f96), {
+                    children: [
+                        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $b56218b5a57cb77c$export$5f759de1870a3e41), {
+                            children: [
+                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $1ec1d06e0a21fdaa$export$2e2bcd8739ae039), {
+                                    color: "black"
+                                }),
+                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b56218b5a57cb77c$export$c6b180e8ec79154e), {
+                                    children: window.location.href
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b56218b5a57cb77c$export$d7f3ab4b3437ad97), {
+                            onClick: onCopyCallLinkClick,
+                            children: t("invite.copy")
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b56218b5a57cb77c$export$c22678f0e7b404e0), {
+                    children: t("invite.description")
+                })
+            ]
+        })
+    });
+};
+var $f0b0b18fe6c6ae77$export$2e2bcd8739ae039 = $f0b0b18fe6c6ae77$var$InvitationTile;
+
+
+
+
+
+
+
+
+
 const $b8963bf62cf5b984$var$Container = (0, $3Sbms$styledcomponents).div`
   background-color: rgba(45, 45, 45, 0.75);
   display: flex;
@@ -6199,6 +6698,9 @@ const $cdab47bb8796991e$var$Video = ()=>{
                             width: tileSize.width,
                             height: tileSize.height
                         }, stream.id);
+                    }),
+                    streams.length < 1 && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f0b0b18fe6c6ae77$export$2e2bcd8739ae039), {
+                        orientation: orientation
                     })
                 ]
             })
@@ -6217,6 +6719,7 @@ var $cdab47bb8796991e$export$2e2bcd8739ae039 = $cdab47bb8796991e$var$Video;
 
 
 
+
 const $f0e90fb231c59fab$var$HangUp = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
         width: "25",
         height: "24",
@@ -6313,7 +6816,8 @@ var $8b7bd174d29d9a1f$export$2e2bcd8739ae039 = $8b7bd174d29d9a1f$var$Spinner;
 
 
 
-const $a2d206a438475087$var$YoutubeIcon = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
+
+const $a2d206a438475087$var$YoutubeIcon = ({ color: color  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
         width: "24",
         height: "25",
         viewBox: "0 0 24 25",
@@ -6321,29 +6825,13 @@ const $a2d206a438475087$var$YoutubeIcon = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $3Sbms$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 $a2d206a438475087$export$2e2bcd8739ae039 = $a2d206a438475087$var$YoutubeIcon;
 
 
 
-const $1ec1d06e0a21fdaa$var$Link = ()=>{
-    return /*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $3Sbms$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: "#fff"
-        })
-    });
-};
-var $1ec1d06e0a21fdaa$export$2e2bcd8739ae039 = $1ec1d06e0a21fdaa$var$Link;
-
-
 
 
 
@@ -6442,9 +6930,12 @@ const $db92fac48417791a$var$HighlightButton = ()=>{
     const onScreenshareClick = async ()=>{
         setIsHighlightMenuOpen(false);
         try {
+            (0, $3Sbms$hotjarbrowser).event("screenshareClick");
             await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableScreenshare();
+            (0, $3Sbms$hotjarbrowser).event("enableScreenshare");
         } catch (screenshareError) {
             console.warn(screenshareError);
+            (0, $3Sbms$hotjarbrowser).event("screenshareCancel");
             (0, $3Sbms$reacthottoast)(t("notifications.screensharingError"), {
                 className: "error"
             });
@@ -6453,10 +6944,12 @@ const $db92fac48417791a$var$HighlightButton = ()=>{
     const onYoutubeClick = ()=>{
         setIsHighlightMenuOpen(false);
         setIsYoutubePopupVisible(true);
+        (0, $3Sbms$hotjarbrowser).event("youtubeClick");
     };
     const onLinkshareClick = ()=>{
         setIsHighlightMenuOpen(false);
         setIsLinksharePopupVisible(true);
+        (0, $3Sbms$hotjarbrowser).event("linkshareClick");
     };
     const menuCategories = [
         {
@@ -6470,7 +6963,7 @@ const $db92fac48417791a$var$HighlightButton = ()=>{
                 },
                 {
                     id: "youtube",
-                    title: "YouTube",
+                    title: t("youtube.title"),
                     jsxIcon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a2d206a438475087$export$2e2bcd8739ae039), {}),
                     action: onYoutubeClick
                 }, 
@@ -6524,8 +7017,13 @@ const $69a9c49ece80e773$var$ControlBar = ()=>{
     const onMicrophoneClick = async ()=>{
         try {
             const devicesState = (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getDevicesState();
-            if (devicesState.microphone.enabled) await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).toggleMute();
-            else await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableMicrophone();
+            if (devicesState.microphone.enabled) {
+                (0, $3Sbms$hotjarbrowser).event("toggleMicrophone");
+                await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).toggleMute();
+            } else {
+                (0, $3Sbms$hotjarbrowser).event("enableMicrophone");
+                await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableMicrophone();
+            }
         } catch (muteError) {
             console.warn(muteError);
             (0, $3Sbms$reacthottoast)(t("notifications.microphoneError"), {
@@ -6535,9 +7033,12 @@ const $69a9c49ece80e773$var$ControlBar = ()=>{
     };
     const onCameraClick = async ()=>{
         try {
-            if (streaming) await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).disableVideo();
-            else {
+            if (streaming) {
+                (0, $3Sbms$hotjarbrowser).event("disableCamera");
+                await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).disableVideo();
+            } else {
                 setIsCameraLoading(true);
+                (0, $3Sbms$hotjarbrowser).event("enableCamera");
                 await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableVideo();
             }
         } catch (cameraError) {
@@ -6551,6 +7052,7 @@ const $69a9c49ece80e773$var$ControlBar = ()=>{
     };
     const onRotateClick = async ()=>{
         try {
+            (0, $3Sbms$hotjarbrowser).event("rotateCamera");
             await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).rotateVideo();
         } catch (rotateError) {
             console.warn(rotateError);
@@ -6657,15 +7159,20 @@ var $69a9c49ece80e773$export$2e2bcd8739ae039 = $69a9c49ece80e773$var$ControlBar;
 
 
 
+
+
+
+
+
 const $8d3d0e80c56cde5c$export$9d03e7b857083c37 = (0, $3Sbms$styledcomponents).div`
   position: absolute;
   width: 100%;
-  bottom: ${(props)=>props.open ? 0 : "-340px"};
+  bottom: ${(props)=>props.open ? 0 : "-500px"};
   transition: all 0.4s;
 
   ${(props)=>{
     if (props.desktop) return (0, $3Sbms$css)`
-        bottom: ${props.open ? 0 : "calc(-340px - (100vh / 2))"};
+        bottom: ${props.open ? 0 : "calc(-500px - (100vh / 2))"};
         height: 100%;
         display: flex;
         justify-content: center;
@@ -6676,11 +7183,12 @@ const $8d3d0e80c56cde5c$export$9d03e7b857083c37 = (0, $3Sbms$styledcomponents).d
 const $8d3d0e80c56cde5c$export$6bc4d6c63b7f8b75 = (0, $3Sbms$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 $8d3d0e80c56cde5c$export$f8e80e2c9abbb7eb = (0, $3Sbms$styledcomponents).div`
   display: flex;
@@ -6693,15 +7201,30 @@ const $8d3d0e80c56cde5c$export$f8e80e2c9abbb7eb = (0, $3Sbms$styledcomponents).d
     font-weight: 600;
   }
 `;
+const $8d3d0e80c56cde5c$export$2bd9c7c3b36c82cd = (0, $3Sbms$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 $8d3d0e80c56cde5c$export$b421c25a8e0ea22e = (0, $3Sbms$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 {
@@ -6716,6 +7239,7 @@ const $8d3d0e80c56cde5c$export$b421c25a8e0ea22e = (0, $3Sbms$styledcomponents).b
 const $8d3d0e80c56cde5c$export$dc1a3f6996a97083 = (0, $3Sbms$styledcomponents).div`
   display: flex;
   justify-content: center;
+  align-items: center;
   flex: 1;
   height: 0;
 
@@ -6729,13 +7253,57 @@ const $8d3d0e80c56cde5c$export$51760c3b0f5567d2 = (0, $3Sbms$styledcomponents).p
   display: flex;
   justify-content: center;
   text-align: center;
-  margin: 10px 16% 20px;
+  margin: 0px 16% 20px;
   font-size: 14px;
 `;
+const $8d3d0e80c56cde5c$export$6a789d1ce3bcb863 = (0, $3Sbms$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 $8d3d0e80c56cde5c$export$c58a46cd2027881e = (0, $3Sbms$styledcomponents).image`
+  position: absolute;
+  with: 70px;
+  height: 70px;
+`;
 
 
-const $5b80b81d7b095f89$var$QuickConnect = ()=>{
-    const { t: t  } = (0, $3Sbms$useTranslation)();
+
+const $16d11fc0880587fd$var$QuickConnectLogo = ()=>/*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
+        width: "71",
+        height: "70",
+        viewBox: "0 0 71 70",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$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, $3Sbms$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 $16d11fc0880587fd$export$2e2bcd8739ae039 = $16d11fc0880587fd$var$QuickConnectLogo;
+
+
+const $5b80b81d7b095f89$var$QuickConnect = ()=>{
+    const { t: t  } = (0, $3Sbms$useTranslation)();
+    const themeContext = (0, $3Sbms$useContext)((0, $3Sbms$ThemeContext));
     const QuickConnectContainerRef = (0, $3Sbms$useRef)(null);
     const QuickConnectRef = (0, $3Sbms$useRef)(null);
     const { selfPeerId: selfPeerId , profile: profile , isQuickConnectPopupVisible: isQuickConnectPopupVisible , setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , options: options , orientation: orientation ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
@@ -6762,6 +7330,22 @@ const $5b80b81d7b095f89$var$QuickConnect = ()=>{
         selfPeerId,
         profile.name
     ]);
+    const onCopyCallLinkClick = (0, $3Sbms$useCallback)(async ()=>{
+        try {
+            await (0, $57162bcada7d6f66$export$2e2bcd8739ae039)(qrCodeURL || window.location.href);
+            (0, $a5146f9062d7bf28$export$3a57e165650c636f)(t("copyLink.copied"), {
+                duration: 2000
+            });
+        } catch (copyError) {
+            console.warn(copyError);
+            (0, $a5146f9062d7bf28$export$3a57e165650c636f)(t("copyLink.error"), {
+                icon: (0, $93a0377c243d965e$export$edf27be85e5f6da0)
+            });
+        }
+    }, [
+        t,
+        qrCodeURL
+    ]);
     const onQuickConnectPopupCloseClick = ()=>setIsQuickConnectPopupVisible(false);
     (0, $3Sbms$useEffect)(()=>{
         const onCustomMessage = (event)=>{
@@ -6776,7 +7360,9 @@ const $5b80b81d7b095f89$var$QuickConnect = ()=>{
         setIsQuickConnectPopupVisible
     ]);
     (0, $3Sbms$useEffect)(()=>{
-        $3Sbms$toCanvas(QuickConnectRef.current, qrCodeURL);
+        $3Sbms$toCanvas(QuickConnectRef.current, qrCodeURL, {
+            errorCorrectionLevel: "M"
+        });
     }, [
         qrCodeURL
     ]);
@@ -6809,8 +7395,15 @@ const $5b80b81d7b095f89$var$QuickConnect = ()=>{
             children: [
                 /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $8d3d0e80c56cde5c$export$f8e80e2c9abbb7eb), {
                     children: [
-                        /*#__PURE__*/ (0, $3Sbms$jsx)("h4", {
-                            children: t("quickConnect.scanTitle")
+                        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $8d3d0e80c56cde5c$export$2bd9c7c3b36c82cd), {
+                            children: [
+                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $2da9626742e3560b$export$6470d09a29d34d08), {
+                                    color: themeContext.popupTitleColor
+                                }),
+                                /*#__PURE__*/ (0, $3Sbms$jsx)("h4", {
+                                    children: t("quickConnect.scanTitle")
+                                })
+                            ]
                         }),
                         /*#__PURE__*/ (0, $3Sbms$jsx)((0, $8d3d0e80c56cde5c$export$b421c25a8e0ea22e), {
                             onClick: onQuickConnectPopupCloseClick,
@@ -6818,13 +7411,27 @@ const $5b80b81d7b095f89$var$QuickConnect = ()=>{
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $8d3d0e80c56cde5c$export$dc1a3f6996a97083), {
-                    children: /*#__PURE__*/ (0, $3Sbms$jsx)("canvas", {
-                        ref: QuickConnectRef
-                    })
+                /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $8d3d0e80c56cde5c$export$dc1a3f6996a97083), {
+                    children: [
+                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $8d3d0e80c56cde5c$export$c58a46cd2027881e), {
+                            children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $16d11fc0880587fd$export$2e2bcd8739ae039), {})
+                        }),
+                        /*#__PURE__*/ (0, $3Sbms$jsx)("canvas", {
+                            ref: QuickConnectRef
+                        })
+                    ]
                 }),
                 /*#__PURE__*/ (0, $3Sbms$jsx)((0, $8d3d0e80c56cde5c$export$51760c3b0f5567d2), {
                     children: t("quickConnect.scan")
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $8d3d0e80c56cde5c$export$6a789d1ce3bcb863), {
+                    onClick: onCopyCallLinkClick,
+                    children: [
+                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $2da9626742e3560b$export$92ce62e1201c4fc0), {
+                            color: "#686868"
+                        }),
+                        t("copyLink.description")
+                    ]
                 })
             ]
         })
@@ -7602,15 +8209,33 @@ var $c11e4c21ca692a16$export$2e2bcd8739ae039 = $c11e4c21ca692a16$var$Menu;
 
 
 
+
+const $5dd22e058f46af7f$var$CircledTopArrow = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
+        width: "21",
+        height: "20",
+        viewBox: "0 0 21 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $3Sbms$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 $5dd22e058f46af7f$export$2e2bcd8739ae039 = $5dd22e058f46af7f$var$CircledTopArrow;
+
+
+
+
+const $d677836e2f373a45$var$modalHeight = (desktop)=>desktop ? "215px" : "227px";
 const $d677836e2f373a45$export$b679a9a7caefa4b1 = (0, $3Sbms$styledcomponents).div`
   position: absolute;
   width: 100%;
-  bottom: ${(props)=>props.open ? 0 : "-220px"};
+  bottom: ${(props)=>props.open ? 0 : `-${$d677836e2f373a45$var$modalHeight(props.desktop)}`};
   transition: all 0.4s;
 
   ${(props)=>{
     if (props.desktop) return (0, $3Sbms$css)`
-        bottom: ${props.open ? 0 : "calc(-220px - (100vh / 2))"};
+        bottom: ${props.open ? 0 : `calc(-${$d677836e2f373a45$var$modalHeight(props.desktop)} - (100vh / 2))`};
         height: 100%;
         display: flex;
         justify-content: center;
@@ -7622,12 +8247,12 @@ const $d677836e2f373a45$export$c506828286db9a46 = (0, $3Sbms$styledcomponents).d
   display: flex;
   flex-direction: column;
   width: ${(props)=>props.desktop ? "375px" : "100%"};
-  height: 220px;
+  height: ${({ desktop: desktop  })=>$d677836e2f373a45$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 $d677836e2f373a45$export$f39d8ef0ab6ab3de = (0, $3Sbms$styledcomponents).div`
@@ -7656,10 +8281,10 @@ const $d677836e2f373a45$export$7ae684a6a708b51d = (0, $3Sbms$styledcomponents).b
   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 {
@@ -7691,9 +8316,9 @@ const $d677836e2f373a45$export$176dd61d50c7f3d7 = (0, $3Sbms$styledcomponents).d
   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;
@@ -7714,13 +8339,23 @@ const $d677836e2f373a45$export$baf775d6bf9683d5 = (0, $3Sbms$styledcomponents).s
 const $d677836e2f373a45$export$3711c5e6a7ba3fdc = (0, $3Sbms$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;
+  }
 `;
 
 
@@ -7728,6 +8363,7 @@ const $d677836e2f373a45$export$3711c5e6a7ba3fdc = (0, $3Sbms$styledcomponents).b
 const $49372cd9190da903$var$youtubeIDRegExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#&?]*).*/;
 const $49372cd9190da903$var$YoutubePopup = ()=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
+    const themeContext = (0, $3Sbms$useContext)((0, $3Sbms$ThemeContext));
     const youtubePopupRef = (0, $3Sbms$useRef)(null);
     const [youtubeInputValue, setYoutubeInputValue] = (0, $3Sbms$useState)("");
     const [errorMessage, setErrorMessage] = (0, $3Sbms$useState)(null);
@@ -7740,6 +8376,7 @@ const $49372cd9190da903$var$YoutubePopup = ()=>{
     const onShareClick = (event)=>{
         event.preventDefault();
         setErrorMessage(null);
+        (0, $3Sbms$hotjarbrowser).event("youtubeShare");
         const [, videoId] = youtubeInputValue.match($49372cd9190da903$var$youtubeIDRegExp) || [];
         if (videoId) {
             dispatch({
@@ -7774,7 +8411,9 @@ const $49372cd9190da903$var$YoutubePopup = ()=>{
                     children: [
                         /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $d677836e2f373a45$export$11781939bbc73f8b), {
                             children: [
-                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a2d206a438475087$export$2e2bcd8739ae039), {}),
+                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a2d206a438475087$export$2e2bcd8739ae039), {
+                                    color: themeContext.popupTitleColor
+                                }),
                                 /*#__PURE__*/ (0, $3Sbms$jsx)("h4", {
                                     children: t("youtube.title")
                                 })
@@ -7792,10 +8431,6 @@ const $49372cd9190da903$var$YoutubePopup = ()=>{
                         /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $d677836e2f373a45$export$176dd61d50c7f3d7), {
                             errored: Boolean(errorMessage),
                             children: [
-                                /*#__PURE__*/ (0, $3Sbms$jsx)("label", {
-                                    htmlFor: "youtube-popup-input",
-                                    children: t("youtube.url")
-                                }),
                                 /*#__PURE__*/ (0, $3Sbms$jsx)("input", {
                                     id: "youtube-popup-input",
                                     placeholder: "https://www.youtube.com/watch?v=abcdef",
@@ -7812,7 +8447,12 @@ const $49372cd9190da903$var$YoutubePopup = ()=>{
                         }),
                         /*#__PURE__*/ (0, $3Sbms$jsx)((0, $d677836e2f373a45$export$3711c5e6a7ba3fdc), {
                             type: "submit",
-                            children: t("youtube.share")
+                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)("span", {
+                                children: [
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5dd22e058f46af7f$export$2e2bcd8739ae039), {}),
+                                    t("youtube.share")
+                                ]
+                            })
                         })
                     ]
                 })
@@ -7833,6 +8473,9 @@ var $49372cd9190da903$export$2e2bcd8739ae039 = $49372cd9190da903$var$YoutubePopu
 
 
 
+
+
+
 const $dc26e7b014ddcf8c$var$PaypalWhite = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
         width: "24",
         height: "24",
@@ -7892,15 +8535,16 @@ var $dc26e7b014ddcf8c$export$2e2bcd8739ae039 = $dc26e7b014ddcf8c$var$Paypal;
 
 
 
+const $554f3984e3212196$var$modalHeight = (desktop)=>desktop ? "215px" : "227px";
 const $554f3984e3212196$export$ed0d510542cc4e55 = (0, $3Sbms$styledcomponents).div`
   position: absolute;
   width: 100%;
-  bottom: ${(props)=>props.open ? 0 : "-220px"};
+  bottom: ${(props)=>props.open ? 0 : `-${$554f3984e3212196$var$modalHeight(props.desktop)}`};
   transition: all 0.4s;
 
   ${(props)=>{
     if (props.desktop) return (0, $3Sbms$css)`
-        bottom: ${props.open ? 0 : "calc(-220px - (100vh / 2))"};
+        bottom: ${props.open ? 0 : `calc(-${$554f3984e3212196$var$modalHeight(props.desktop)} - (100vh / 2))`};
         height: 100%;
         display: flex;
         justify-content: center;
@@ -7912,12 +8556,12 @@ const $554f3984e3212196$export$93c2cc854b34757d = (0, $3Sbms$styledcomponents).d
   display: flex;
   flex-direction: column;
   width: ${(props)=>props.desktop ? "375px" : "100%"};
-  height: 220px;
+  height: ${({ desktop: desktop  })=>$554f3984e3212196$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 $554f3984e3212196$export$f0162ebc287dd01 = (0, $3Sbms$styledcomponents).div`
@@ -7946,10 +8590,10 @@ const $554f3984e3212196$export$fcade06574a60ff0 = (0, $3Sbms$styledcomponents).b
   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 {
@@ -7970,20 +8614,12 @@ const $554f3984e3212196$export$dcb32b2b413109d8 = (0, $3Sbms$styledcomponents).d
   flex-direction: column;
   position: relative;
 
-  label {
-    font-size: 10px;
-    font-weight: 700;
-    line-height: 10px;
-    color: #fff;
-    margin-bottom: 10px;
-  }
-
   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;
@@ -8003,14 +8639,25 @@ const $554f3984e3212196$export$711a92c06f80c3bd = (0, $3Sbms$styledcomponents).s
 `;
 const $554f3984e3212196$export$aec21c9a4da7a1b7 = (0, $3Sbms$styledcomponents).button`
   background-color: ${({ theme: theme  })=>theme.primaryColor};
-  padding: 8px 18px;
-  border-radius: 50px;
+  padding: ${({ status: status  })=>status !== "waiting" ? "auto" : "8px 18px"};
+  width: ${({ status: status  })=>status !== "waiting" ? "46px" : "100%"};
+  height: 46px;
+  border-radius: ${({ status: status  })=>status !== "waiting" ? "50%" : "15px"};
   margin: 30px 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 $554f3984e3212196$export$9e155375d8fb1f67 = (0, $3Sbms$styledcomponents).img`
   width: 36px;
@@ -8019,7 +8666,8 @@ const $554f3984e3212196$export$9e155375d8fb1f67 = (0, $3Sbms$styledcomponents).i
 `;
 const $554f3984e3212196$export$5e3f251c730829 = (0, $3Sbms$styledcomponents).div`
   display: flex;
-  gap: 5px;
+  align-items: center;
+  justify-content: center;
 `;
 
 
@@ -8061,7 +8709,7 @@ const $98933bbc579a3e66$var$sendLinkNotification = (data, t)=>{
 const $98933bbc579a3e66$var$sendPaypalInvoiceNotification = (senderName, url, t)=>{
     const userName = senderName || t("misc.user");
     const title = t("shareLink.invoice", {
-        name: userName
+        user: userName
     });
     (0, $a5146f9062d7bf28$export$3a57e165650c636f)(title, {
         button: {
@@ -8087,11 +8735,12 @@ const $98933bbc579a3e66$var$sendPaypalInvoiceNotification = (senderName, url, t)
 };
 const $98933bbc579a3e66$var$LinksharePopup = ()=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
+    const themeContext = (0, $3Sbms$useContext)((0, $3Sbms$ThemeContext));
     const linksharePopupRef = (0, $3Sbms$useRef)(null);
     const linkshareInputRef = (0, $3Sbms$useRef)(null);
     const [linkshareInputValue, setLinkshareInputValue] = (0, $3Sbms$useState)("");
     const [errorMessage, setErrorMessage] = (0, $3Sbms$useState)(null);
-    const [isLoading, setIsLoading] = (0, $3Sbms$useState)(false);
+    const [status, setStatus] = (0, $3Sbms$useState)("waiting");
     const { isLinksharePopupVisible: isLinksharePopupVisible , setIsLinksharePopupVisible: setIsLinksharePopupVisible , orientation: orientation , options: options  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
     const desktop = orientation === "landscape";
@@ -8110,7 +8759,8 @@ const $98933bbc579a3e66$var$LinksharePopup = ()=>{
         event.preventDefault();
         if (!linkshareInputValue) return;
         setErrorMessage(null);
-        setIsLoading(true);
+        setStatus("loading");
+        (0, $3Sbms$hotjarbrowser).event("linkshareShare");
         let url;
         try {
             url = new URL(linkshareInputValue);
@@ -8142,7 +8792,7 @@ const $98933bbc579a3e66$var$LinksharePopup = ()=>{
                 if (streams.length < 2) {
                     const userName = streams[0]?.profile?.name || t("misc.user");
                     (0, $3Sbms$reacthottoast)(t("shareLink.sentToUser", {
-                        name: userName
+                        user: userName
                     }));
                 } else (0, $3Sbms$reacthottoast)(t("shareLink.sentToUsers"));
                 setIsLinksharePopupVisible(false);
@@ -8154,7 +8804,7 @@ const $98933bbc579a3e66$var$LinksharePopup = ()=>{
             }
             setLinkshareInputValue("");
         }
-        setIsLoading(false);
+        setStatus("done");
     };
     const onCloseClick = ()=>setIsLinksharePopupVisible(false);
     (0, $3Sbms$useEffect)(()=>{
@@ -8167,6 +8817,7 @@ const $98933bbc579a3e66$var$LinksharePopup = ()=>{
     ]);
     const onPopupTransitionEnd = ()=>{
         if (isLinksharePopupVisible) linkshareInputRef.current?.focus();
+        if (status === "done") setStatus("waiting");
     };
     return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $554f3984e3212196$export$ed0d510542cc4e55), {
         open: isLinksharePopupVisible,
@@ -8180,7 +8831,9 @@ const $98933bbc579a3e66$var$LinksharePopup = ()=>{
                     children: [
                         /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $554f3984e3212196$export$7563f0d47f114601), {
                             children: [
-                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $1ec1d06e0a21fdaa$export$2e2bcd8739ae039), {}),
+                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $1ec1d06e0a21fdaa$export$2e2bcd8739ae039), {
+                                    color: themeContext.popupTitleColor
+                                }),
                                 /*#__PURE__*/ (0, $3Sbms$jsx)("h4", {
                                     children: t("shareLink.title2")
                                 })
@@ -8198,10 +8851,6 @@ const $98933bbc579a3e66$var$LinksharePopup = ()=>{
                         /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $554f3984e3212196$export$dcb32b2b413109d8), {
                             errored: Boolean(errorMessage),
                             children: [
-                                /*#__PURE__*/ (0, $3Sbms$jsx)("label", {
-                                    htmlFor: "linkshare-popup-input",
-                                    children: t("shareLink.linkUrl")
-                                }),
                                 /*#__PURE__*/ (0, $3Sbms$jsx)("input", {
                                     id: "linkshare-popup-input",
                                     ref: linkshareInputRef,
@@ -8219,17 +8868,18 @@ const $98933bbc579a3e66$var$LinksharePopup = ()=>{
                         }),
                         /*#__PURE__*/ (0, $3Sbms$jsx)((0, $554f3984e3212196$export$aec21c9a4da7a1b7), {
                             type: "submit",
-                            disabled: isLoading,
-                            children: isLoading ? /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $554f3984e3212196$export$5e3f251c730829), {
+                            disabled: status !== "waiting",
+                            status: status,
+                            children: status !== "waiting" ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $554f3984e3212196$export$5e3f251c730829), {
+                                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $8b7bd174d29d9a1f$export$2e2bcd8739ae039), {
+                                    size: "18px"
+                                })
+                            }) : /*#__PURE__*/ (0, $3Sbms$jsxs)("span", {
                                 children: [
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $8b7bd174d29d9a1f$export$2e2bcd8739ae039), {
-                                        size: "18px"
-                                    }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
-                                        children: t("shareLink.creating")
-                                    })
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5dd22e058f46af7f$export$2e2bcd8739ae039), {}),
+                                    t("shareLink.title")
                                 ]
-                            }) : t("shareLink.title")
+                            })
                         })
                     ]
                 })
@@ -8241,83 +8891,401 @@ var $98933bbc579a3e66$export$2e2bcd8739ae039 = $98933bbc579a3e66$var$LinksharePo
 
 
 
-const $e1c48a389d8ac959$export$8376625f8bb18347 = (0, $3Sbms$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 $01986a58bfba8001$var$Settings = ()=>{
-    const { isQuickConnectPopupVisible: isQuickConnectPopupVisible , isSettingsMenuVisible: isSettingsMenuVisible , isYoutubePopupVisible: isYoutubePopupVisible , isLinksharePopupVisible: isLinksharePopupVisible ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
-    const open = isQuickConnectPopupVisible || isSettingsMenuVisible || isYoutubePopupVisible || isLinksharePopupVisible;
-    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $e1c48a389d8ac959$export$8376625f8bb18347), {
-        open: open,
-        children: [
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5b80b81d7b095f89$export$2e2bcd8739ae039), {}),
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c11e4c21ca692a16$export$2e2bcd8739ae039), {}),
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $49372cd9190da903$export$2e2bcd8739ae039), {}),
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $98933bbc579a3e66$export$2e2bcd8739ae039), {})
-        ]
-    });
-};
-var $01986a58bfba8001$export$2e2bcd8739ae039 = $01986a58bfba8001$var$Settings;
 
 
 
 
 
+const $de519a3c48c42424$var$CircledCheckmark = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $3Sbms$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 $de519a3c48c42424$export$2e2bcd8739ae039 = $de519a3c48c42424$var$CircledCheckmark;
 
 
 
+const $30e857a4d83ba073$var$modalHeight = (desktop)=>desktop ? "420px" : "432px";
+const $30e857a4d83ba073$export$b298b737d508d68e = (0, $3Sbms$styledcomponents).div`
+  position: absolute;
+  width: 100%;
+  bottom: ${(props)=>props.open ? 0 : `-${$30e857a4d83ba073$var$modalHeight(props.desktop)}`};
+  transition: all 0.4s;
 
-const $61b9018279e658f9$export$104f28dc79f055f4 = (0, $3Sbms$styledcomponents).div`
+  ${(props)=>{
+    if (props.desktop) return (0, $3Sbms$css)`
+        bottom: ${props.open ? 0 : `calc(-${$30e857a4d83ba073$var$modalHeight(props.desktop)} - (100vh / 2))`};
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      `;
+}}
+`;
+const $30e857a4d83ba073$export$156bb26b5a0d2f83 = (0, $3Sbms$styledcomponents).div`
   display: flex;
-  flex: 1;
   flex-direction: column;
+  width: ${(props)=>props.desktop ? "375px" : "100%"};
+  height: ${({ desktop: desktop  })=>$30e857a4d83ba073$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 $30e857a4d83ba073$export$28a9baece842bd02 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+`;
+const $30e857a4d83ba073$export$de75cb5a82158063 = (0, $3Sbms$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 $30e857a4d83ba073$export$ab8c73b78f24745 = (0, $3Sbms$styledcomponents).button`
+  display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #000;
-  color: #fff;
-  padding-top: 70px;
+  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 $61b9018279e658f9$export$51071a7ce784448 = (0, $3Sbms$styledcomponents).span`
-  font-size: 60px;
+const $30e857a4d83ba073$export$8603bdc04df69ddb = (0, $3Sbms$styledcomponents).form`
+  display: flex;
+  flex-direction: column;
 `;
-const $61b9018279e658f9$export$eebc018855fb0cb6 = (0, $3Sbms$styledcomponents).h1`
-  font-size: 28px;
-  font-weight: 600;
-  line-height: 33.6px;
+const $30e857a4d83ba073$export$3f7ff862632a81a7 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap-reverse;
+  gap: 10px 20px;
+  width: 280px;
+  margin: auto;
 `;
-const $61b9018279e658f9$export$f4e7b895a81715e9 = (0, $3Sbms$styledcomponents).p`
-  font-size: 22px;
-  font-weight: 500;
-  line-height: 26.4px;
-  margin: 0;
+const $30e857a4d83ba073$export$1058440c16b3a127 = (0, $3Sbms$styledcomponents).label`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  justify-content: center;
+  flex-grow: 1;
+
+  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 $61b9018279e658f9$export$3a4deda42b6182b7 = (0, $3Sbms$styledcomponents).button`
+const $30e857a4d83ba073$export$dfc919b3320e9811 = (0, $3Sbms$styledcomponents).button`
   background-color: ${({ theme: theme  })=>theme.primaryColor};
+  padding: 8px 18px;
+  width: 280px;
+  height: 46px;
+  border-radius: 15px;
+  margin: 20px auto 0;
   border: none;
-  border-radius: 50px;
-  padding: 12px 18px;
+  color: #fff;
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 700;
   line-height: 18px;
-  color: #fff;
-  margin-top: 30px;
+  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 $df41bfe6da05853a$var$EndView = ()=>{
+const $d493afe60dcea711$var$backgroundOptions = [
+    {
+        title: "Blue",
+        id: "background-blue",
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/blue_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/blue_background.png`
+    },
+    {
+        title: "Cold",
+        id: "background-cold",
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/cold_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/cold_background.png`
+    },
+    {
+        title: "Bricks",
+        id: "background-bricks",
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/bricks_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/bricks_background.png`
+    },
+    {
+        title: "White",
+        id: "background-white",
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/white_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/white_background.png`
+    },
+    {
+        title: "Yellow",
+        id: "background-yellow",
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/yellow_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/yellow_background.png`
+    },
+    {
+        title: "Warm",
+        id: "background-warm",
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/warm_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/warm_background.png`
+    },
+    {
+        title: "None",
+        value: "none",
+        id: "background-none"
+    },
+    {
+        title: "Blurred",
+        value: "blurred",
+        id: "background-blurred"
+    }, 
+];
+const $d493afe60dcea711$var$VirtualBackgroundPopup = ()=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
-    const { streamState: streamState , setStreamState: setStreamState  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const virtualBackgroundPopupRef = (0, $3Sbms$useRef)(null);
+    const { isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible , setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible , orientation: orientation  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const desktop = orientation === "landscape";
+    const onSubmit = (e)=>{
+        e.preventDefault();
+        const value = e.currentTarget.elements.background.value;
+        if (value === "none") (0, $c9e496369b59be7a$export$2f377c2162fd02b2).stopVideoBackground();
+        else if (value === "blurred") {
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setVideoBackground({
+                blurLevel: 16,
+                type: "blur"
+            });
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).initVideoBackground();
+        } else {
+            const background = new Image();
+            background.src = value;
+            background.crossOrigin = "anonymous";
+            background.onload = ()=>{
+                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setVideoBackground({
+                    background: background,
+                    type: "background"
+                });
+                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).initVideoBackground();
+            };
+        }
+        setIsVirtualBackgroundPopupVisible(false);
+    };
+    const onCloseClick = ()=>setIsVirtualBackgroundPopupVisible(false);
+    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $30e857a4d83ba073$export$b298b737d508d68e), {
+        open: isVirtualBackgroundPopupVisible,
+        desktop: desktop,
+        children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $30e857a4d83ba073$export$156bb26b5a0d2f83), {
+            ref: virtualBackgroundPopupRef,
+            desktop: desktop,
+            children: [
+                /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $30e857a4d83ba073$export$28a9baece842bd02), {
+                    children: [
+                        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $30e857a4d83ba073$export$de75cb5a82158063), {
+                            children: [
+                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $2da9626742e3560b$export$d5424e4dfe4be076), {
+                                    color: "#000"
+                                }),
+                                /*#__PURE__*/ (0, $3Sbms$jsx)("h4", {
+                                    children: t("virtualBackground.title")
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $30e857a4d83ba073$export$ab8c73b78f24745), {
+                            onClick: onCloseClick,
+                            children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57ab7b9a012d9acd$export$2e2bcd8739ae039), {})
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $30e857a4d83ba073$export$8603bdc04df69ddb), {
+                    onSubmit: onSubmit,
+                    children: [
+                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $30e857a4d83ba073$export$3f7ff862632a81a7), {
+                            children: $d493afe60dcea711$var$backgroundOptions.map(({ id: id , title: title , value: value , iconUrl: iconUrl  })=>/*#__PURE__*/ (0, $3Sbms$jsxs)((0, $30e857a4d83ba073$export$1058440c16b3a127), {
+                                    htmlFor: id,
+                                    image: iconUrl,
+                                    children: [
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)("input", {
+                                            type: "radio",
+                                            value: value,
+                                            id: id,
+                                            name: "background",
+                                            defaultChecked: value === "none"
+                                        }),
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                            children: title
+                                        })
+                                    ]
+                                }, id))
+                        }),
+                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $30e857a4d83ba073$export$dfc919b3320e9811), {
+                            type: "submit",
+                            children: /*#__PURE__*/ (0, $3Sbms$jsxs)("span", {
+                                children: [
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $de519a3c48c42424$export$2e2bcd8739ae039), {}),
+                                    t("virtualBackground.setBackground")
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+var $d493afe60dcea711$export$2e2bcd8739ae039 = $d493afe60dcea711$var$VirtualBackgroundPopup;
+
+
+
+const $e1c48a389d8ac959$export$8376625f8bb18347 = (0, $3Sbms$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 $01986a58bfba8001$var$Settings = ()=>{
+    const { isQuickConnectPopupVisible: isQuickConnectPopupVisible , isSettingsMenuVisible: isSettingsMenuVisible , isYoutubePopupVisible: isYoutubePopupVisible , isLinksharePopupVisible: isLinksharePopupVisible , isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const open = isQuickConnectPopupVisible || isSettingsMenuVisible || isYoutubePopupVisible || isLinksharePopupVisible || isVirtualBackgroundPopupVisible;
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $e1c48a389d8ac959$export$8376625f8bb18347), {
+        open: open,
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5b80b81d7b095f89$export$2e2bcd8739ae039), {}),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c11e4c21ca692a16$export$2e2bcd8739ae039), {}),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $49372cd9190da903$export$2e2bcd8739ae039), {}),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $98933bbc579a3e66$export$2e2bcd8739ae039), {}),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $d493afe60dcea711$export$2e2bcd8739ae039), {})
+        ]
+    });
+};
+var $01986a58bfba8001$export$2e2bcd8739ae039 = $01986a58bfba8001$var$Settings;
+
+
+
+
+
+
+
+
+
+const $61b9018279e658f9$export$104f28dc79f055f4 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #000;
+  color: #fff;
+  padding-top: 70px;
+`;
+const $61b9018279e658f9$export$51071a7ce784448 = (0, $3Sbms$styledcomponents).span`
+  font-size: 60px;
+`;
+const $61b9018279e658f9$export$eebc018855fb0cb6 = (0, $3Sbms$styledcomponents).h1`
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 33.6px;
+`;
+const $61b9018279e658f9$export$f4e7b895a81715e9 = (0, $3Sbms$styledcomponents).p`
+  font-size: 22px;
+  font-weight: 500;
+  line-height: 26.4px;
+  margin: 0;
+`;
+const $61b9018279e658f9$export$3a4deda42b6182b7 = (0, $3Sbms$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 $df41bfe6da05853a$var$EndView = ()=>{
+    const { t: t  } = (0, $3Sbms$useTranslation)();
+    const { streamState: streamState , setStreamState: setStreamState  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const ended = streamState === "ended";
     const terminated = streamState === "terminated";
     const expired = streamState === "expired";
+    const full = streamState === "full";
     const onGoBackClick = ()=>{
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).init();
         setStreamState("streaming");
@@ -8330,24 +9298,28 @@ const $df41bfe6da05853a$var$EndView = ()=>{
             /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $61b9018279e658f9$export$51071a7ce784448), {
                 children: [
                     (ended || terminated) && "\uD83D\uDC4B",
-                    expired && "\uD83E\uDD7A"
+                    (expired || full) && "\uD83E\uDD7A"
                 ]
             }),
             /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $61b9018279e658f9$export$eebc018855fb0cb6), {
                 children: [
                     ended && t("endView.callLeft"),
                     terminated && t("endView.callEnded"),
-                    expired && t("endView.tooLate")
+                    expired && t("endView.tooLate"),
+                    full && t("endView.full")
                 ]
             }),
             expired && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $61b9018279e658f9$export$f4e7b895a81715e9), {
                 children: t("endView.callIsOver")
             }),
-            ended && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $61b9018279e658f9$export$3a4deda42b6182b7), {
+            full && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $61b9018279e658f9$export$f4e7b895a81715e9), {
+                children: t("endView.fullDescription")
+            }),
+            (ended || full) && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $61b9018279e658f9$export$3a4deda42b6182b7), {
                 onClick: onGoBackClick,
                 children: t("endView.goBack")
             }),
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f81bfa56534026c2$export$ad5f39c592532e2d), {})
+            !full && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f81bfa56534026c2$export$ad5f39c592532e2d), {})
         ]
     });
 };
@@ -8419,7 +9391,6 @@ var $805d92fa41e6e1b0$export$2e2bcd8739ae039 = $805d92fa41e6e1b0$var$Sounds;
 
 
 
-
 const $3a42b2ef7646d035$var$iconsMap = {
     error: (0, $93a0377c243d965e$export$edf27be85e5f6da0),
     critical: (0, $93a0377c243d965e$export$c7df1b15b59b1df2)
@@ -8532,7 +9503,12 @@ const $52580db2e49cdd90$export$f30cb9bc4f736419 = {
     settingsBackgroundColor: "#fff",
     settingsHeaderTextColor: "#000",
     settingsTextColor: "#000",
-    settingsCloseBackgroundColor: "#eaebec"
+    settingsCloseBackgroundColor: "#eaebec",
+    popupBackgroundPrimaryColor: "#fff",
+    popupBackgroundSecondaryColor: "#f3f3f3",
+    popupBackgroundThirdColor: "#f7f7f7",
+    popupBorderColor: "#d4d4d4",
+    popupTitleColor: "#2d2d2d"
 };
 const $52580db2e49cdd90$export$3e936a8db52a10a0 = {
     primaryColor: "#268AFA",
@@ -8548,7 +9524,12 @@ const $52580db2e49cdd90$export$3e936a8db52a10a0 = {
     settingsBackgroundColor: "#242324",
     settingsHeaderTextColor: "#f9f9f9",
     settingsTextColor: "#fff",
-    settingsCloseBackgroundColor: "#7b7c7e"
+    settingsCloseBackgroundColor: "#7b7c7e",
+    popupBackgroundPrimaryColor: "#fff",
+    popupBackgroundSecondaryColor: "#f3f3f3",
+    popupBackgroundThirdColor: "#f7f7f7",
+    popupBorderColor: "#d4d4d4",
+    popupTitleColor: "#2d2d2d"
 };
 
 
@@ -8694,6 +9675,13 @@ const $d6008ea114507578$var$SvgDefinitions = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("
                         fill: "#fff",
                         d: "M0 0h24v24H0z"
                     })
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)("clipPath", {
+                    id: "greetingSnapcallLogo",
+                    children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                        fill: "#fff",
+                        d: "M0 0h72v72H0z"
+                    })
                 })
             ]
         })
@@ -9061,6 +10049,12 @@ const $4fb4815baa04b470$export$20f257fc407da7a3 = (0, $3Sbms$createGlobalStyle)`
     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 $4fb4815baa04b470$export$914ddf2021ea8ee6 = (0, $3Sbms$styledcomponents).div`
   display: flex;
@@ -9103,6 +10097,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
     const [isSettingsMenuVisible, setIsSettingsMenuVisible] = (0, $3Sbms$useState)(false);
     const [isYoutubePopupVisible, setIsYoutubePopupVisible] = (0, $3Sbms$useState)(false);
     const [isLinksharePopupVisible, setIsLinksharePopupVisible] = (0, $3Sbms$useState)(false);
+    const [isVirtualBackgroundPopupVisible, setIsVirtualBackgroundPopupVisible] = (0, $3Sbms$useState)(false);
     const [theme, setTheme] = (0, $3Sbms$useState)($26ed036cbc17809a$var$currentTheme);
     const [language, setLanguage] = (0, $3Sbms$useState)(options.language || $26ed036cbc17809a$var$currentLanguage);
     const [profile1, setProfile] = (0, $3Sbms$useState)({});
@@ -9113,7 +10108,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
     const [userInteractionTriggered, setUserInteractionTriggered] = (0, $3Sbms$useState)(false);
     const [containerWidth, containerHeight] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(streamUIContainerRef.current);
     const [isBlockedDevicesPopupOpen, setBlockedDevicesPopupOpen] = (0, $3Sbms$useState)(false);
-    const orientation = containerWidth > containerHeight ? "landscape" : "portrait";
+    const orientation = (containerWidth || window.screen.width) > (containerHeight || window.screen.height) ? "landscape" : "portrait";
     const styledTheme = theme === "dark" ? (0, $52580db2e49cdd90$export$3e936a8db52a10a0) : (0, $52580db2e49cdd90$export$f30cb9bc4f736419);
     const onEnterRoom = async (event)=>{
         const peerId = event.detail.peerId;
@@ -9168,15 +10163,23 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
         setStreamState("expired");
     };
     const onAgentIdentity = (event)=>{
-        const { success: success  } = event.detail;
-        if (success) setIsAgent(true);
-        else (0, $3Sbms$reacthottoast)("An error occured while trying to join the room as an agent", {
+        const { success: success , email: email  } = event.detail;
+        if (success) {
+            setIsAgent(true);
+            if (email) (0, $3Sbms$hotjarbrowser).identify(null, {
+                email: email
+            });
+        } else (0, $3Sbms$reacthottoast)("An error occured while trying to join the room as an agent", {
             className: "error"
         });
     };
     const onCriticalError = (event)=>{
         const duration = 20000;
         const now = Date.now();
+        if (event.detail.code === "USERLIMIT") {
+            setStreamState("full");
+            return;
+        }
         if ($26ed036cbc17809a$var$timestampCriticalError !== -1 && $26ed036cbc17809a$var$timestampCriticalError + duration > now) return;
         $26ed036cbc17809a$var$timestampCriticalError = now;
         (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`A critical error has occurred (error ${event.detail.code}).`, {
@@ -9259,6 +10262,8 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
             setIsYoutubePopupVisible: setIsYoutubePopupVisible,
             isLinksharePopupVisible: isLinksharePopupVisible,
             setIsLinksharePopupVisible: setIsLinksharePopupVisible,
+            isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible,
+            setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible,
             theme: theme,
             setTheme: setTheme,
             language: language,
@@ -9298,7 +10303,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
                                 ]
                             })
                         }),
-                        (streamState === "ended" || streamState === "terminated" || streamState === "expired") && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $df41bfe6da05853a$export$2e2bcd8739ae039), {})
+                        (streamState === "ended" || streamState === "terminated" || streamState === "full" || streamState === "expired") && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $df41bfe6da05853a$export$2e2bcd8739ae039), {})
                     ]
                 })
             ]
@@ -9309,6 +10314,432 @@ var $26ed036cbc17809a$export$2e2bcd8739ae039 = $26ed036cbc17809a$var$StreamUI;
 
 
 
+// https://help.hotjar.com/hc/en-us/articles/360033640653-Identify-API-Reference#01G2A279ZXW4JT60NKXKX69G49
+// prettier-ignore
+// @ts-ignore
+window.hj = window.hj || function() {
+    (hj.q = hj.q || []).push(arguments);
+};
+
+
+
+
+
+
+
+
+const $9a3d651cab8c9249$var$GreetingSnapcallLogo = ()=>{
+    return /*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
+        width: "72",
+        height: "72",
+        viewBox: "0 0 72 72",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $3Sbms$jsxs)("g", {
+            clipPath: "url(#greetingSnapcallLogo)",
+            children: [
+                /*#__PURE__*/ (0, $3Sbms$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, $3Sbms$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 $9a3d651cab8c9249$export$2e2bcd8739ae039 = $9a3d651cab8c9249$var$GreetingSnapcallLogo;
+
+
+
+
+const $35c6a4b506b7dc62$export$d653589df987fd93 = (0, $3Sbms$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 $35c6a4b506b7dc62$export$d43ffeaaec0b2a58 = (0, $3Sbms$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 $35c6a4b506b7dc62$export$873b7756313e36bb = (0, $3Sbms$styledcomponents).h1`
+  font-size: 32px;
+  line-height: 39px;
+  font-weight: 700;
+  font-family: Gazpacho;
+  text-align: center;
+`;
+const $35c6a4b506b7dc62$export$b7a7fefc0b349825 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+const $35c6a4b506b7dc62$export$b302ef9d8310f71 = (0, $3Sbms$styledcomponents).div`
+  position: relative;
+  width: 350px;
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const $35c6a4b506b7dc62$export$ae01dedf5c052bb = (0, $3Sbms$styledcomponents).video`
+  width: 300px;
+  height: 300px;
+  background-color: black;
+  border-radius: 15px;
+  object-fit: cover;
+`;
+const $35c6a4b506b7dc62$export$778ed67917f5eacf = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  gap: 8px;
+  z-index: 15;
+`;
+const $35c6a4b506b7dc62$export$92fe811838849d7d = (0, $3Sbms$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 $35c6a4b506b7dc62$export$65550b47dde6d016 = (0, $3Sbms$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 $35c6a4b506b7dc62$export$48377ae1c677702b = (0, $3Sbms$styledcomponents).div`
+  position: absolute;
+  bottom: 45px;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  gap: 13px;
+  z-index: 2;
+`;
+const $35c6a4b506b7dc62$export$6e8af0bd0a2aaa77 = (0, $3Sbms$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 $35c6a4b506b7dc62$export$c7a6f02121c3b3b5 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 350px;
+
+  h3 {
+    margin: 0;
+  }
+`;
+const $35c6a4b506b7dc62$export$916d4667067f956a = (0, $3Sbms$styledcomponents).h3`
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 700;
+  margin: 0;
+  font-family: Gazpacho;
+`;
+const $35c6a4b506b7dc62$export$190947c3048e2d5d = (0, $3Sbms$styledcomponents).p`
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 400;
+`;
+const $35c6a4b506b7dc62$export$f5b8910cec6cf069 = (0, $3Sbms$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 $35c6a4b506b7dc62$export$353f5b6fc5456de1 = (0, $3Sbms$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 $35c6a4b506b7dc62$export$a06f1c675e846f6f = (0, $3Sbms$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 $35c6a4b506b7dc62$export$53e4a0ea45e729a2 = (0, $3Sbms$styledcomponents).h5`
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 19px;
+  margin: 0;
+  font-family: Gazpacho;
+`;
+const $35c6a4b506b7dc62$export$eb20cbaff2d739a5 = (0, $3Sbms$styledcomponents).p`
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: black;
+  margin-bottom: 0;
+  margin-top: 10px;
+`;
+const $35c6a4b506b7dc62$export$d4a1a815e49dfefd = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  color: #1d1c20;
+  height: 100%;
+`;
+
+
+
+
+
+const $f8d57e3d223f5089$var$getUserMedia = async (device)=>{
+    try {
+        const stream = navigator.mediaDevices.getUserMedia({
+            video: device === "webcam",
+            audio: device === "microphone"
+        });
+        return stream;
+    } catch (err) {
+        console.error("Get User Media Failed: ", err);
+        return null;
+    }
+};
+let $f8d57e3d223f5089$var$videoTrack;
+const $f8d57e3d223f5089$var$GreetingView = ({ onGreetingDone: onGreetingDone  })=>{
+    const { t: t  } = (0, $3Sbms$useTranslation)();
+    const mainContainerRef = (0, $3Sbms$useRef)(null);
+    const videoRef = (0, $3Sbms$useRef)(null);
+    const inputRef = (0, $3Sbms$useRef)(null);
+    const stream = (0, $3Sbms$useMemo)(()=>new MediaStream(), []);
+    const [webcamEnabled, setWebcamEnabled] = (0, $3Sbms$useState)(false);
+    const [micEnabled, setMicEnabled] = (0, $3Sbms$useState)(false);
+    const [joining, setJoining] = (0, $3Sbms$useState)(false);
+    const [firstRender, setFirstRender] = (0, $3Sbms$useState)(true);
+    const [width, height] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(mainContainerRef.current);
+    const desktop = width >= height;
+    const onSubmit = ()=>{
+        const displayName = inputRef.current?.value;
+        setJoining(true);
+        setTimeout(()=>{
+            onGreetingDone({
+                cameraEnabled: webcamEnabled,
+                micEnabled: micEnabled,
+                displayName: displayName
+            });
+        }, 4000);
+    };
+    const onCameraClick = (0, $3Sbms$useCallback)(()=>{
+        if (!webcamEnabled) $f8d57e3d223f5089$var$getUserMedia("webcam").then((videoStream)=>{
+            if (!videoStream || !videoRef.current) return;
+            $f8d57e3d223f5089$var$videoTrack = videoStream.getVideoTracks()[0];
+            stream.addTrack($f8d57e3d223f5089$var$videoTrack);
+            setWebcamEnabled(true);
+            if (!videoRef.current.srcObject) videoRef.current.srcObject = stream;
+        });
+        else {
+            if ($f8d57e3d223f5089$var$videoTrack) stream.removeTrack($f8d57e3d223f5089$var$videoTrack);
+            $f8d57e3d223f5089$var$videoTrack = undefined;
+            setWebcamEnabled(false);
+        }
+    }, [
+        webcamEnabled,
+        stream
+    ]);
+    const onMicrophoneClick = (0, $3Sbms$useCallback)(async ()=>{
+        if (!micEnabled) $f8d57e3d223f5089$var$getUserMedia("microphone").then(()=>{
+            if (!videoRef.current) return;
+            setMicEnabled(true);
+        });
+        else setMicEnabled(false);
+    }, [
+        micEnabled
+    ]);
+    (0, $3Sbms$useEffect)(()=>{
+        if (!firstRender) return;
+        try {
+            onCameraClick();
+            onMicrophoneClick();
+        } catch (err) {
+            console.error("Error: ", err);
+        } finally{
+            setFirstRender(false);
+        }
+    }, [
+        firstRender,
+        onCameraClick,
+        onMicrophoneClick
+    ]);
+    if (joining === true) return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $35c6a4b506b7dc62$export$d4a1a815e49dfefd), {
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("img", {
+            src: `${"https://stream-assets.snapcall.io/v1.7.0"}/animations/snapcall-logo-animation.gif`,
+            alt: "Snapcall logo animation",
+            height: 40
+        })
+    });
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $35c6a4b506b7dc62$export$d653589df987fd93), {
+        ref: mainContainerRef,
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $4fb4815baa04b470$export$20f257fc407da7a3), {}),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $9a3d651cab8c9249$export$2e2bcd8739ae039), {}),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $35c6a4b506b7dc62$export$873b7756313e36bb), {
+                children: t("greeting.mainTitle")
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $35c6a4b506b7dc62$export$b7a7fefc0b349825), {
+                children: [
+                    desktop && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $35c6a4b506b7dc62$export$b302ef9d8310f71), {
+                        children: [
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $35c6a4b506b7dc62$export$ae01dedf5c052bb), {
+                                webcamEnabled: webcamEnabled,
+                                ref: videoRef,
+                                autoPlay: true
+                            }),
+                            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $35c6a4b506b7dc62$export$65550b47dde6d016), {
+                                webcamEnabled: webcamEnabled,
+                                children: [
+                                    /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $35c6a4b506b7dc62$export$778ed67917f5eacf), {
+                                        children: [
+                                            !micEnabled && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $35c6a4b506b7dc62$export$92fe811838849d7d), {
+                                                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6043ae1b48c5aa97$export$2e2bcd8739ae039), {
+                                                    status: !micEnabled
+                                                })
+                                            }),
+                                            !webcamEnabled && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $35c6a4b506b7dc62$export$92fe811838849d7d), {
+                                                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $04e57b1f07a8e9f4$export$2e2bcd8739ae039), {
+                                                    status: !webcamEnabled
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $35c6a4b506b7dc62$export$6e8af0bd0a2aaa77), {
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57da43088f4a416a$export$2e2bcd8739ae039), {})
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $35c6a4b506b7dc62$export$48377ae1c677702b), {
+                                children: [
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $35c6a4b506b7dc62$export$6e8af0bd0a2aaa77), {
+                                        onClick: onMicrophoneClick,
+                                        danger: !micEnabled,
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6043ae1b48c5aa97$export$2e2bcd8739ae039), {
+                                            status: !micEnabled
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $35c6a4b506b7dc62$export$6e8af0bd0a2aaa77), {
+                                        onClick: onCameraClick,
+                                        danger: !webcamEnabled,
+                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $04e57b1f07a8e9f4$export$2e2bcd8739ae039), {
+                                            status: !webcamEnabled
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $35c6a4b506b7dc62$export$c7a6f02121c3b3b5), {
+                        children: [
+                            desktop && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $35c6a4b506b7dc62$export$916d4667067f956a), {
+                                children: t("greeting.sideTitle")
+                            }),
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $35c6a4b506b7dc62$export$190947c3048e2d5d), {
+                                children: t("greeting.sideDescription")
+                            }),
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $35c6a4b506b7dc62$export$f5b8910cec6cf069), {
+                                ref: inputRef,
+                                name: "displayName",
+                                type: "text",
+                                placeholder: t("greeting.namePlaceholder"),
+                                autoFocus: true
+                            }),
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $35c6a4b506b7dc62$export$353f5b6fc5456de1), {
+                                onClick: onSubmit,
+                                children: t("greeting.nameSubmit")
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $35c6a4b506b7dc62$export$a06f1c675e846f6f), {
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $35c6a4b506b7dc62$export$53e4a0ea45e729a2), {
+                        children: t("greeting.footerTitle")
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $35c6a4b506b7dc62$export$eb20cbaff2d739a5), {
+                        children: t("greeting.footerDescription")
+                    })
+                ]
+            })
+        ]
+    });
+};
+var $f8d57e3d223f5089$export$2e2bcd8739ae039 = $f8d57e3d223f5089$var$GreetingView;
+
 
 const $24075a5d702d64b3$var$currentURL = new URL(window.location.href);
 const $24075a5d702d64b3$var$microphoneEnabled = $24075a5d702d64b3$var$currentURL.searchParams.get("microphone-enabled") !== "0";
@@ -9316,6 +10747,12 @@ const $24075a5d702d64b3$var$cameraEnabled = $24075a5d702d64b3$var$currentURL.sea
 const $24075a5d702d64b3$var$defaultOptions = {
     sharedURL: window.location.href,
     showMenuButton: true,
+    settingsShortcuts: [
+        {
+            id: "pip",
+            displayType: "icon"
+        }
+    ],
     controls: {
         microphone: {
             available: true,
@@ -9329,7 +10766,8 @@ const $24075a5d702d64b3$var$defaultOptions = {
             available: true
         }
     },
-    streamApiURL: String("https://apistream.snapcall.io")
+    streamApiURL: String("https://apistream.snapcall.io"),
+    tracking: false
 };
 const $24075a5d702d64b3$export$3f94917203ab7078 = {
     init: ({ element: element , ...options })=>{
@@ -9338,6 +10776,12 @@ const $24075a5d702d64b3$export$3f94917203ab7078 = {
         (0, $3Sbms$render)(/*#__PURE__*/ (0, $3Sbms$jsx)((0, $26ed036cbc17809a$export$2e2bcd8739ae039), {
             options: mergedOptions
         }), element);
+        if (mergedOptions.tracking) (0, $3Sbms$hotjarbrowser).init(3111933, 6);
+    },
+    initGreeting: (element, onGreetingDone)=>{
+        (0, $3Sbms$render)(/*#__PURE__*/ (0, $3Sbms$jsx)((0, $f8d57e3d223f5089$export$2e2bcd8739ae039), {
+            onGreetingDone: onGreetingDone
+        }), element);
     },
     setExtraSettingsOptions: (extraOptions)=>{
         const event = new CustomEvent("streamUISetExtraSettingsOptions", {