@snapcall/stream-ui 1.8.1 → 1.10.0

package/dist/stream-ui.js

@@ -333,6 +333,9 @@ const $393bda1b33846dfc$export$604ba5624273df44 = ()=>{
 const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
     name: "English",
     translation: {
+        header: {
+            free: "Free version"
+        },
         notifications: {
             screensharingError: "An error occured when trying to toggle screensharing",
             microphoneError: "An error occured when trying to toggle the microphone",
@@ -364,6 +367,14 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
             pictureInPicture: "Picture-in-Picture",
             screenSharing: "Screen sharing"
         },
+        blockedFeature: {
+            titleConnected: "Upgrade to Pro",
+            titleGuest: "Feature not available",
+            descriptionConnected: "On a free plan, you can't use this feature. Upgrade your plan to enjoy all in-call features.",
+            descriptionGuest: "You are participating in a call created with a free version of SnapCall. This feature is only available with a Pro version.",
+            dismissGuest: "Okay",
+            dismissConnected: "Upgrade to Pro"
+        },
         copyLink: {
             title: "Copy link",
             description: "Copy link into clipboard",
@@ -457,11 +468,6 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
             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?",
@@ -478,6 +484,9 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
 const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
     name: "Fran\xe7ais",
     translation: {
+        header: {
+            free: "Version gratuite"
+        },
         notifications: {
             screensharingError: "Une erreur est survenue pendant l'activation du partage d'\xe9cran",
             microphoneError: "Une erreur est survenue pendant l'activation du micro",
@@ -509,6 +518,14 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
             pictureInPicture: "Picture-in-Picture",
             screenSharing: "Partage d'\xe9cran"
         },
+        blockedFeature: {
+            titleConnected: "Souscrire au plan Pro",
+            titleGuest: "Fonctionnalit\xe9 non disponible",
+            descriptionConnected: "Vous n'avez pas acc\xe8s \xe0 cette fonctionnalit\xe9. Souscrivez au plan Pro pour d\xe9bloquer toutes les fonctionnalit\xe9s de SnapCall.",
+            descriptionGuest: "Vous participez \xe0 un appel cr\xe9\xe9 avec la version gratuite de SnapCall. Cette fonctionnalit\xe9 n'est disponible qu'avec une version Pro.",
+            dismissGuest: "D'accord",
+            dismissConnected: "Souscrire \xe0 Pro"
+        },
         copyLink: {
             title: "Copier le lien",
             description: "Copier le lien dans le presse-papiers",
@@ -602,11 +619,6 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
             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 ?",
@@ -623,6 +635,9 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
 const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
     name: "Italiano",
     translation: {
+        header: {
+            free: "Versione gratuita"
+        },
         notifications: {
             screensharingError: "Si \xe8 verificato un errore durante l'attivazione della condivisione dello schermo",
             microphoneError: "Si \xe8 verificato un errore durante l'attivazione del microfono",
@@ -654,6 +669,14 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
             pictureInPicture: "Immagine nell'immagine",
             screenSharing: "Condivisione dello schermo"
         },
+        blockedFeature: {
+            titleConnected: "L'aggiornamento a Pro",
+            titleGuest: "Funzione non disponibile",
+            descriptionConnected: "Su un piano gratuito, non puoi utilizzare questa funzione. Aggiorna il tuo piano per usufruire di tutte le funzionalit\xe0 in chiamata.",
+            descriptionGuest: "Stai partecipando a una chiamata creata con una versione gratuita di SnapCall. Questa funzione \xe8 disponibile solo con una versione Pro.",
+            dismissGuest: "Okay",
+            dismissConnected: "L'aggiornamento a Pro"
+        },
         copyLink: {
             title: "Copia il link",
             description: "Copia il link negli appunti",
@@ -751,11 +774,6 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
             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?",
@@ -794,6 +812,8 @@ var $b45c0bcc142f0b5e$export$2e2bcd8739ae039 = (0, ($parcel$interopDefault($jQDc
 
 
 
+
+
 const $d0c6baf97675ab49$var$LogLevel = {
     error: 1,
     warn: 2,
@@ -1428,6 +1448,8 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     pendingDeviceRequest = {};
     joinOptions = {};
     devicesList = [];
+    plan = undefined;
+    permissions = [];
     constructor(){
         super();
         navigator.mediaDevices.addEventListener("devicechange", ()=>this.onDeviceChange());
@@ -1551,7 +1573,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         if (!this.peerId) this.peerId = (0, $jQDcL$uuid.v4)();
         let url;
         try {
-            const { instanceId: instanceId  } = await fetch(`${this.config.streamerApi}/instance/${this.roomId}`, {
+            const { streamer_instance: instanceId , plan: { permissions: permissions , name: name  } ,  } = await fetch(`${this.config.apiUrl}/streams/${room}/info`, {
                 method: "get",
                 headers: {
                     "Content-Type": "application/json"
@@ -1560,6 +1582,8 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 if (response.ok) return response.json();
                 throw new Error("Invalid room ID");
             });
+            this.permissions = permissions;
+            this.plan = name;
             url = `${this.config.streamerServer}/${instanceId}/?roomId=${room}&peerId=${this.peerId}`;
         } catch (roomError) {
             const event = new $1dedebd5ff3002eb$var$SnapcallEvent("invalidRoom", {
@@ -1829,7 +1853,9 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                         peerId: peer.id || peer.peerId
                     };
                 }),
-                callId: callId
+                callId: callId,
+                plan: this.plan,
+                permissions: this.permissions
             }
         }));
         $1dedebd5ff3002eb$var$log.log("joinRoom", "peers", peers);
@@ -2149,6 +2175,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         this.mediaPipeOption = options;
     }
     async initVideoBackground() {
+        if (!this.permissions.find((permission)=>permission === "virtual_background")) throw new Error("feature not allowed");
         if (this.useVideoBackground === true) return;
         this.useVideoBackground = true;
         if (!this.webcamProducer || this.webcamProducer.closed) return;
@@ -2325,6 +2352,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         this.dispatchEvent(event);
     }
     async enableScreenshare() {
+        if (!this.permissions.find((permission)=>permission === "screen_sharing")) throw new Error("feature not allowed");
         const stream = await this.handleGetUserMediaError("screen", navigator.mediaDevices.getDisplayMedia({
             audio: false,
             video: {
@@ -2417,11 +2445,13 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         } else $1dedebd5ff3002eb$var$log.error("requestVideo", `Video consumer ${consumer} not found`);
     }
     async captureVideo(videoElement) {
-        let image;
-        if (videoElement) image = await (0, $3575c8a563f2a1da$export$674c90a250a8b2c5)(videoElement);
-        else if (this.webcamProducer && this.webcamProducer.track) image = await (0, $3575c8a563f2a1da$export$4a210166cc9cb64b)(this.webcamProducer.track);
-        else throw new Error("no video to capture");
-        return image;
+        if (this.permissions.find((permission)=>permission === "instant_picture")) {
+            let image;
+            if (videoElement) image = await (0, $3575c8a563f2a1da$export$674c90a250a8b2c5)(videoElement);
+            else if (this.webcamProducer && this.webcamProducer.track) image = await (0, $3575c8a563f2a1da$export$4a210166cc9cb64b)(this.webcamProducer.track);
+            else throw new Error("no video to capture");
+            return image;
+        } else throw new Error("feature not allowed");
     }
     requestLocalVideo(element) {
         $1dedebd5ff3002eb$var$log.info("requestLocalVideo");
@@ -2539,6 +2569,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         this.dispatchEvent(event);
     }
     async requestPeerDevice(remotePeerId, deviceType) {
+        if (!this.permissions.find((permission)=>permission === "request_input")) throw new Error("feature not allowed");
         return this.protoo.request("requestPeerDevice", {
             remotePeerId: remotePeerId,
             deviceType: deviceType
@@ -2707,6 +2738,9 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             ...config
         };
     }
+    getPermissions() {
+        return this.permissions;
+    }
 }
 
 
@@ -3186,7 +3220,7 @@ const $1949f8f101c8cf77$export$4dc2e6a0e59ffa13 = (0, ($parcel$interopDefault($j
   font-size: 16px;
   font-weight: 300;
   line-height: 16px;
-  color: #fff;
+  color: rgba(255, 255, 255, 0.5);
   margin-left: 5px;
   position: relative;
   bottom: 1px;
@@ -3561,7 +3595,7 @@ const $e1930b467e7d8845$var$multiPiP = new (0, $21395e477f83709c$export$45fabd1c
 const $e1930b467e7d8845$var$browser = $jQDcL$bowser.parse(window.navigator.userAgent);
 const $e1930b467e7d8845$var$Header = ()=>{
     const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
-    const { setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible , options: options , muted: muted , streaming: streaming ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const { setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible , options: options , muted: muted , streaming: streaming , permissions: permissions , plan: plan , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $3f6e908c45fcc5b3$export$b5633a7cfbe42d9f)();
     const [extraOptions, setExtraOptions] = (0, $jQDcL$react.useState)(options.extraSettingsOptions || []);
     const onSetExtraSettingsOptions = (event)=>{
@@ -3609,14 +3643,17 @@ const $e1930b467e7d8845$var$Header = ()=>{
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).endCall();
         };
         const onScanQuickConnectClick = ()=>{
-            setIsQuickConnectPopupVisible(true);
-            (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).event("quickConnectClick");
+            if (permissions.find((permission)=>permission === "quick_connect")) {
+                setIsQuickConnectPopupVisible(true);
+                (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).event("quickConnectClick");
+            } else setBlockedFeaturePopupOpen(true);
         };
         const onSettingsMenuClick = ()=>{
             setIsSettingsMenuVisible(true);
         };
         const onVirtualBackgroundClick = ()=>{
-            setIsVirtualBackgroundPopupVisible(true);
+            if (permissions.find((permission)=>permission === "virtual_background")) setIsVirtualBackgroundPopupVisible(true);
+            else setBlockedFeaturePopupOpen(true);
         };
         const computedCategories = [
             {
@@ -3673,13 +3710,15 @@ const $e1930b467e7d8845$var$Header = ()=>{
         });
         return computedCategories;
     }, [
+        t,
+        options.sharedURL,
         muted,
         streaming,
-        options.sharedURL,
+        permissions,
         setIsQuickConnectPopupVisible,
+        setBlockedFeaturePopupOpen,
         setIsSettingsMenuVisible,
-        setIsVirtualBackgroundPopupVisible,
-        t, 
+        setIsVirtualBackgroundPopupVisible, 
     ]);
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $1949f8f101c8cf77$export$1e86fd0e1db89578), {
         children: [
@@ -3689,7 +3728,10 @@ const $e1930b467e7d8845$var$Header = ()=>{
                         size: options.logo?.size
                     }),
                     options.logo?.text && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $1949f8f101c8cf77$export$4dc2e6a0e59ffa13), {
-                        children: options.logo.text
+                        children: options.logo?.text
+                    }),
+                    plan === "individual" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $1949f8f101c8cf77$export$4dc2e6a0e59ffa13), {
+                        children: `${options.logo?.text ? " \xb7 " : ""}${t("header.free")}`
                     })
                 ]
             }),
@@ -4525,7 +4567,7 @@ const $07e749066c746c7c$var$StreamTile = ({ stream: stream , width: width = 0 ,
     const [requestingDevice, setRequestingDevice] = (0, $jQDcL$react.useState)(null);
     const [flashAnimation, setFlashAnimation] = (0, $jQDcL$react.useState)(false);
     const requestingDeviceTimeoutRef = (0, $jQDcL$react.useRef)(null);
-    const { selfPeerId: selfPeerId  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const { selfPeerId: selfPeerId , permissions: permissions , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const { highlightedTile: highlightedTile  } = (0, $3f6e908c45fcc5b3$export$b5633a7cfbe42d9f)();
     const isSharingScreen = highlightedTile?.type === "screenshare" && highlightedTile.peerId === selfPeerId;
     const microphoneActive = stream.microphone && !stream.muted;
@@ -4537,16 +4579,22 @@ const $07e749066c746c7c$var$StreamTile = ({ stream: stream , width: width = 0 ,
     const onMouseEnter = ()=>setHover(true);
     const onMouseLeave = ()=>setHover(false);
     const requestMicrophone = ()=>{
-        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).requestPeerDevice(stream.id, "microphone");
-        setRequestingDevice("microphone");
+        if (permissions.find((permission)=>permission === "request_input")) {
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).requestPeerDevice(stream.id, "microphone");
+            setRequestingDevice("microphone");
+        } else setBlockedFeaturePopupOpen(true);
     };
     const requestWebcam = ()=>{
-        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).requestPeerDevice(stream.id, "webcam");
-        setRequestingDevice("webcam");
+        if (permissions.find((permission)=>permission === "request_input")) {
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).requestPeerDevice(stream.id, "webcam");
+            setRequestingDevice("webcam");
+        } else setBlockedFeaturePopupOpen(true);
     };
     const requestScreen = ()=>{
-        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).requestPeerDevice(stream.id, "screen");
-        setRequestingDevice("screen");
+        if (permissions.find((permission)=>permission === "request_input")) {
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).requestPeerDevice(stream.id, "screen");
+            setRequestingDevice("screen");
+        } else setBlockedFeaturePopupOpen(true);
     };
     (0, $jQDcL$react.useEffect)(()=>{
         if (!videoElementRef.current) throw new Error("videoElementRef not available");
@@ -5184,7 +5232,7 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
     const videoElementRef = (0, $jQDcL$react.useRef)(null);
     const videoMediaProviderRef = (0, $jQDcL$react.useRef)(null);
     const SelfTileRef = (0, $jQDcL$react.useRef)(null);
-    const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , profile: profile , muted: muted , streaming: streaming , orientation: orientation , options: options ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , profile: profile , muted: muted , streaming: streaming , orientation: orientation , options: options , permissions: permissions , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $3f6e908c45fcc5b3$export$b5633a7cfbe42d9f)();
     const [containerWidth, containerHeight] = (0, $56e1e7a85d8bf4bb$export$2b86bedf890eab8)(videosContainerRef.current);
     const cursor = streaming && !extended ? "pointer" : "default";
@@ -5228,42 +5276,44 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         }
     };
     const onSnapshotClick = async ()=>{
-        if (!snapshotAnimation && !snapshotImage) {
-            if (!videoElementRef.current) throw new Error("Video element is not available");
-            setSnapshotAnimation(true);
-            const base64Image = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).captureVideo(videoElementRef.current);
-            setSnapshotImage(base64Image);
-            try {
-                const { objectUrl: objectUrl  } = await fetch(`${options.streamApiURL}/uploadSnapshot`, {
-                    method: "POST",
-                    body: JSON.stringify({
-                        file: base64Image
-                    })
-                }).then((rawResponse)=>rawResponse.json());
-                await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).sendCustomMessageToAll({
-                    type: "snapshot",
-                    imageSrc: objectUrl
-                });
-                let notificationMessage = t("snapshot.sentToUsers");
-                if (streams.length === 1) {
-                    const userName = streams[0].profile.name || t("misc.user");
-                    notificationMessage = t("snapshot.sentToUser", {
-                        user: userName
+        if (permissions.find((permission)=>permission === "instant_picture")) {
+            if (!snapshotAnimation && !snapshotImage) {
+                if (!videoElementRef.current) throw new Error("Video element is not available");
+                setSnapshotAnimation(true);
+                const base64Image = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).captureVideo(videoElementRef.current);
+                setSnapshotImage(base64Image);
+                try {
+                    const { objectUrl: objectUrl  } = await fetch(`${options.streamApiURL}/uploadSnapshot`, {
+                        method: "POST",
+                        body: JSON.stringify({
+                            file: base64Image
+                        })
+                    }).then((rawResponse)=>rawResponse.json());
+                    await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).sendCustomMessageToAll({
+                        type: "snapshot",
+                        imageSrc: objectUrl
+                    });
+                    let notificationMessage = t("snapshot.sentToUsers");
+                    if (streams.length === 1) {
+                        const userName = streams[0].profile.name || t("misc.user");
+                        notificationMessage = t("snapshot.sentToUser", {
+                            user: userName
+                        });
+                    }
+                    (0, $84c6cbcbb594d072$export$3a57e165650c636f)(notificationMessage, {
+                        icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $2c45d365ee8aa1ab$export$26fe7ec9351ff761), {
+                            src: base64Image
+                        }),
+                        duration: 2500
+                    });
+                } catch (sendMessageError) {
+                    (0, ($parcel$interopDefault($jQDcL$reacthottoast)))(t("snapshot.error"), {
+                        className: "error"
                     });
+                    console.error(sendMessageError);
                 }
-                (0, $84c6cbcbb594d072$export$3a57e165650c636f)(notificationMessage, {
-                    icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $2c45d365ee8aa1ab$export$26fe7ec9351ff761), {
-                        src: base64Image
-                    }),
-                    duration: 2500
-                });
-            } catch (sendMessageError) {
-                (0, ($parcel$interopDefault($jQDcL$reacthottoast)))(t("snapshot.error"), {
-                    className: "error"
-                });
-                console.error(sendMessageError);
             }
-        }
+        } else setBlockedFeaturePopupOpen(true);
     };
     const onDeviceRequest = (event)=>{
         const { peerId: peerId , deviceType: deviceType  } = event.detail;
@@ -6267,104 +6317,8 @@ var $c225be5472ba393a$export$2e2bcd8739ae039 = $c225be5472ba393a$var$Highlighted
 
 
 
-const $7e6d6d75bd13cce5$export$dd2ac23a70f320dd = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
-  display: ${({ show: show  })=>show ? "flex" : "none"};
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  width: ${({ width: width  })=>width};
-  height: ${({ height: height  })=>height};
-  background-color: ${({ theme: theme  })=>theme.streamTileBackgroundColor};
-  border: 2px solid ${({ theme: theme  })=>theme.streamTileBorderColor};
-  border-radius: 20px;
-  box-sizing: border-box;
-  color: #fff;
-  font-family: Lato;
-  padding: 20px;
-`;
-const $7e6d6d75bd13cce5$export$2dabfbe763cc7a4 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).h2`
-  font-weight: 600;
-  font-size: 16px;
-  text-align: center;
-  max-width: 300px;
-`;
-const $7e6d6d75bd13cce5$export$6ed6e36e1b456f96 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: 50px;
-  width: 100%;
-  max-width: 300px;
-  background-color: ${({ theme: theme  })=>theme.popupBackgroundSecondaryColor};
-  border: 1px solid ${({ theme: theme  })=>theme.popupBorderColor};
-  border-radius: 15px;
-  padding: 0 10px;
-  box-sizing: border-box;
-`;
-const $7e6d6d75bd13cce5$export$5f759de1870a3e41 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: 5px;
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-`;
-const $7e6d6d75bd13cce5$export$c6b180e8ec79154e = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).p`
-  color: #242324;
-  font-size: 15px;
-  font-weight: 600;
-  width: 100%;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  line-height: 15px;
-`;
-const $7e6d6d75bd13cce5$export$d7f3ab4b3437ad97 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
-  position: absolute;
-  right: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: ${({ theme: theme  })=>theme.primaryColor};
-  border: none;
-  border-radius: 8px;
-  height: 32px;
-  color: #fff;
-  font-weight: 600;
-  font-size: 16px;
-  padding: 8px 12px;
-  line-height: 18px;
-`;
-const $7e6d6d75bd13cce5$export$c22678f0e7b404e0 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).p`
-  font-size: 12px;
-  font-weight: 400;
-  max-width: 300px;
-  text-align: center;
-`;
-
-
-
-
 
 
-const $daca1602b495441e$var$Link = ({ color: color  })=>{
-    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
-            d: "m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1.004 1.004 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1.004 1.004 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1.004 1.004 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.471 2.471 0 0 1 0 3.5l-3.88 3.88a1.002 1.002 0 0 0 .325 1.639.999.999 0 0 0 1.095-.219l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1.004 1.004 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z",
-            fill: color || "#fff"
-        })
-    });
-};
-var $daca1602b495441e$export$2e2bcd8739ae039 = $daca1602b495441e$var$Link;
 
 
 
@@ -6417,67 +6371,6 @@ const $e8ac63718934c648$export$c7df1b15b59b1df2 = /*#__PURE__*/ (0, $jQDcL$react
 });
 
 
-
-
-const $23c39d8ee81f4f67$var$InvitationTile = ({ show: show , orientation: orientation , width: width , height: height  })=>{
-    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
-    const { options: options  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
-    const onCopyCallLinkClick = async ()=>{
-        try {
-            await (0, $0bea101d3ef852fb$export$2e2bcd8739ae039)(options.sharedURL || window.location.href);
-            (0, $84c6cbcbb594d072$export$3a57e165650c636f)(t("copyLink.copied"), {
-                duration: 2000
-            });
-        } catch (copyError) {
-            console.warn(copyError);
-            (0, $84c6cbcbb594d072$export$3a57e165650c636f)(t("copyLink.error"), {
-                icon: (0, $e8ac63718934c648$export$edf27be85e5f6da0)
-            });
-        }
-    };
-    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $7e6d6d75bd13cce5$export$dd2ac23a70f320dd), {
-        show: show,
-        width: width,
-        height: height,
-        orientation: orientation,
-        children: [
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7e6d6d75bd13cce5$export$2dabfbe763cc7a4), {
-                children: t("invite.title")
-            }),
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $7e6d6d75bd13cce5$export$6ed6e36e1b456f96), {
-                children: [
-                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $7e6d6d75bd13cce5$export$5f759de1870a3e41), {
-                        children: [
-                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $daca1602b495441e$export$2e2bcd8739ae039), {
-                                color: "black"
-                            }),
-                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7e6d6d75bd13cce5$export$c6b180e8ec79154e), {
-                                children: options.sharedURL || window.location.href
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7e6d6d75bd13cce5$export$d7f3ab4b3437ad97), {
-                        onClick: onCopyCallLinkClick,
-                        children: t("invite.copy")
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7e6d6d75bd13cce5$export$c22678f0e7b404e0), {
-                children: t("invite.description")
-            })
-        ]
-    });
-};
-var $23c39d8ee81f4f67$export$2e2bcd8739ae039 = $23c39d8ee81f4f67$var$InvitationTile;
-
-
-
-
-
-
-
-
-
 const $537dcc6df507dc4a$var$Container = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
   background-color: rgba(45, 45, 45, 0.75);
   display: flex;
@@ -6544,7 +6437,6 @@ const $88b23a8428e67b66$var$Video = ()=>{
     });
     const { streams: streams , highlightedTile: highlightedTile , dispatch: dispatch  } = (0, $3f6e908c45fcc5b3$export$b5633a7cfbe42d9f)();
     const [containerWidth, containerHeight] = (0, $56e1e7a85d8bf4bb$export$2b86bedf890eab8)(remoteTilesContainerRef.current);
-    const showInvitation = !options.audioTiles && streams.length < 1 && !highlightedTile && containerWidth > 0;
     (0, $jQDcL$react.useEffect)(()=>{
         if (options.GDPRDisclaimer) (0, $537dcc6df507dc4a$export$2e2bcd8739ae039)({
             message: "Para mejorar la calidad de nuestro servicio, esta llamada ser\xe1 grabada",
@@ -6558,7 +6450,6 @@ const $88b23a8428e67b66$var$Video = ()=>{
         if (remoteTilesContainerRef?.current) {
             const ratio = 1;
             let numberOfTiles = remoteTilesContainerRef.current.childElementCount;
-            if (!showInvitation) numberOfTiles -= 1;
             const videoWidth = (0, $7de6ded9bdec6f42$export$4d43009c33055644)({
                 availableWidth: containerWidth - 16 * (numberOfTiles - 1),
                 availableHeight: containerHeight - 16 * (numberOfTiles - 1),
@@ -6576,8 +6467,7 @@ const $88b23a8428e67b66$var$Video = ()=>{
         containerWidth,
         containerHeight,
         streams.length,
-        highlightedTile,
-        showInvitation, 
+        highlightedTile
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
         if (userInteractionTriggered) {
@@ -6731,12 +6621,6 @@ const $88b23a8428e67b66$var$Video = ()=>{
                             width: tileSize.width,
                             height: tileSize.height
                         }, stream.id);
-                    }),
-                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $23c39d8ee81f4f67$export$2e2bcd8739ae039), {
-                        show: showInvitation,
-                        width: `${tileSize.width}px`,
-                        height: `${tileSize.height}px`,
-                        orientation: orientation
                     })
                 ]
             })
@@ -6868,6 +6752,22 @@ var $3b6953f72db3bb17$export$2e2bcd8739ae039 = $3b6953f72db3bb17$var$YoutubeIcon
 
 
 
+const $daca1602b495441e$var$Link = ({ color: color  })=>{
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+            d: "m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1.004 1.004 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1.004 1.004 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1.004 1.004 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.471 2.471 0 0 1 0 3.5l-3.88 3.88a1.002 1.002 0 0 0 .325 1.639.999.999 0 0 0 1.095-.219l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1.004 1.004 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z",
+            fill: color || "#fff"
+        })
+    });
+};
+var $daca1602b495441e$export$2e2bcd8739ae039 = $daca1602b495441e$var$Link;
+
+
 
 
 
@@ -6953,7 +6853,7 @@ const $9dfd9e2286cffa66$var$HighlightButton = ()=>{
     const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
     const highlightMenuRef = (0, $jQDcL$react.useRef)(null);
     const [isHighlightMenuOpen, setIsHighlightMenuOpen] = (0, $jQDcL$react.useState)(false);
-    const { setIsYoutubePopupVisible: setIsYoutubePopupVisible , setIsLinksharePopupVisible: setIsLinksharePopupVisible , selfPeerId: selfPeerId  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const { setIsYoutubePopupVisible: setIsYoutubePopupVisible , setIsLinksharePopupVisible: setIsLinksharePopupVisible , selfPeerId: selfPeerId , permissions: permissions , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const { highlightedTile: highlightedTile , dispatch: dispatch  } = (0, $3f6e908c45fcc5b3$export$b5633a7cfbe42d9f)();
     const isPresenting = Boolean(highlightedTile?.isGlobal && highlightedTile?.peerId === selfPeerId);
     (0, $326cea7dbbcb019a$export$71b2224f1ce5e08e)(highlightMenuRef, ()=>setIsHighlightMenuOpen(false));
@@ -6964,18 +6864,20 @@ const $9dfd9e2286cffa66$var$HighlightButton = ()=>{
         else setIsHighlightMenuOpen((previousValue)=>!previousValue);
     };
     const onScreenshareClick = async ()=>{
-        setIsHighlightMenuOpen(false);
-        try {
-            (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).event("screenshareClick");
-            await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableScreenshare();
-            (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).event("enableScreenshare");
-        } catch (screenshareError) {
-            console.warn(screenshareError);
-            (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).event("screenshareCancel");
-            (0, ($parcel$interopDefault($jQDcL$reacthottoast)))(t("notifications.screensharingError"), {
-                className: "error"
-            });
-        }
+        if (permissions.find((permission)=>permission === "screen_sharing")) {
+            setIsHighlightMenuOpen(false);
+            try {
+                (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).event("screenshareClick");
+                await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableScreenshare();
+                (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).event("enableScreenshare");
+            } catch (screenshareError) {
+                console.warn(screenshareError);
+                (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).event("screenshareCancel");
+                (0, ($parcel$interopDefault($jQDcL$reacthottoast)))(t("notifications.screensharingError"), {
+                    className: "error"
+                });
+            }
+        } else setBlockedFeaturePopupOpen(true);
     };
     const onYoutubeClick = ()=>{
         setIsHighlightMenuOpen(false);
@@ -6983,9 +6885,11 @@ const $9dfd9e2286cffa66$var$HighlightButton = ()=>{
         (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).event("youtubeClick");
     };
     const onLinkshareClick = ()=>{
-        setIsHighlightMenuOpen(false);
-        setIsLinksharePopupVisible(true);
-        (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).event("linkshareClick");
+        if (permissions.find((permission)=>permission === "share_link")) {
+            setIsHighlightMenuOpen(false);
+            setIsLinksharePopupVisible(true);
+            (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).event("linkshareClick");
+        } else setBlockedFeaturePopupOpen(true);
     };
     const menuCategories = [
         {
@@ -7558,6 +7462,16 @@ const $41e530447f5fd995$var$Checkmark = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxrun
             fill: "#fff"
         })
     });
+const $41e530447f5fd995$export$f8e32eb727ccae99 = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "17",
+        height: "18",
+        fill: "none",
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+            fill: "#fff",
+            d: "M10.767 6.325 7.192 9.908 5.817 8.533a.833.833 0 1 0-1.175 1.175L6.6 11.675a.831.831 0 0 0 .592.241.833.833 0 0 0 .583-.241l4.166-4.167a.833.833 0 1 0-1.175-1.183ZM8.5.667a8.333 8.333 0 1 0 0 16.666A8.333 8.333 0 0 0 8.5.667Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.333Z"
+        })
+    });
 var $41e530447f5fd995$export$2e2bcd8739ae039 = $41e530447f5fd995$var$Checkmark;
 
 
@@ -8709,6 +8623,20 @@ const $2d8fe9775ff247d9$export$5e3f251c730829 = (0, ($parcel$interopDefault($jQD
 
 
 
+
+function $41f07a84772f3ab1$export$bc98e171e8c82a3d(title) {
+    (0, $jQDcL$react.useEffect)(()=>{
+        const prevTitle = document.title;
+        if (title) document.title = title;
+        return ()=>{
+            document.title = prevTitle;
+        };
+    }, [
+        title
+    ]);
+}
+
+
 const $e38290b50aaba0e3$export$a1eac7fdbc2db4af = "linkshare_sent";
 const $e38290b50aaba0e3$var$sendLinkNotification = (data, t)=>{
     let notificationStatusText = new URL(data.url).hostname;
@@ -8732,7 +8660,7 @@ const $e38290b50aaba0e3$var$sendLinkNotification = (data, t)=>{
             }
         },
         ellipsis: true,
-        duration: 10000
+        duration: 15000
     });
     (0, $65bf10a117819168$export$e9785ae652b3a722)({
         title: data.title,
@@ -8774,22 +8702,45 @@ const $e38290b50aaba0e3$var$LinksharePopup = ()=>{
     const themeContext = (0, $jQDcL$react.useContext)((0, $jQDcL$styledcomponents.ThemeContext));
     const linksharePopupRef = (0, $jQDcL$react.useRef)(null);
     const linkshareInputRef = (0, $jQDcL$react.useRef)(null);
+    const [pendingShareLink, setPendingShareLink] = (0, $jQDcL$react.useState)([]);
+    const [title, setTitle] = (0, $jQDcL$react.useState)();
     const [linkshareInputValue, setLinkshareInputValue] = (0, $jQDcL$react.useState)("");
     const [errorMessage, setErrorMessage] = (0, $jQDcL$react.useState)(null);
     const [status, setStatus] = (0, $jQDcL$react.useState)("waiting");
     const { isLinksharePopupVisible: isLinksharePopupVisible , setIsLinksharePopupVisible: setIsLinksharePopupVisible , orientation: orientation , options: options  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $3f6e908c45fcc5b3$export$b5633a7cfbe42d9f)();
+    (0, $41f07a84772f3ab1$export$bc98e171e8c82a3d)(title);
     const desktop = orientation === "landscape";
+    const onVisibilitychange = (0, $jQDcL$react.useCallback)(()=>{
+        if (!document.hidden) {
+            pendingShareLink.forEach((data)=>{
+                $e38290b50aaba0e3$var$sendLinkNotification(data, t);
+            });
+            setPendingShareLink([]);
+            setTitle(undefined);
+        }
+    }, [
+        pendingShareLink,
+        t
+    ]);
     const onCustomMessage = (0, $jQDcL$react.useCallback)((event)=>{
         const { type: type , data: data  } = event.detail.event;
-        if (type === $e38290b50aaba0e3$export$a1eac7fdbc2db4af) $e38290b50aaba0e3$var$sendLinkNotification(data, t);
-        else if (type === "paypal_invoice") {
-            const sender = streams.find((stream)=>stream.id === event.detail.peerId);
-            $e38290b50aaba0e3$var$sendPaypalInvoiceNotification(sender?.profile?.name, data.url, t);
-        }
+        const sender = streams.find((stream)=>stream.id === event.detail?.peerId);
+        if (type === $e38290b50aaba0e3$export$a1eac7fdbc2db4af) {
+            if (!document.hidden) $e38290b50aaba0e3$var$sendLinkNotification(data, t);
+            else {
+                const name = sender?.profile.name?.toLowerCase() !== "user" ? sender?.profile.name : undefined;
+                setPendingShareLink([
+                    ...pendingShareLink,
+                    data
+                ]);
+                setTitle(`${name || "Someone"} shared a link`);
+            }
+        } else if (type === "paypal_invoice") $e38290b50aaba0e3$var$sendPaypalInvoiceNotification(sender?.profile?.name, data.url, t);
     }, [
         streams,
-        t
+        t,
+        pendingShareLink
     ]);
     const onShareClick = async (event)=>{
         event.preventDefault();
@@ -8844,12 +8795,15 @@ const $e38290b50aaba0e3$var$LinksharePopup = ()=>{
     };
     const onCloseClick = ()=>setIsLinksharePopupVisible(false);
     (0, $jQDcL$react.useEffect)(()=>{
+        window.addEventListener("visibilitychange", onVisibilitychange);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("customMessage", onCustomMessage);
         return ()=>{
+            window.removeEventListener("visibilitychange", onVisibilitychange);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("customMessage", onCustomMessage);
         };
     }, [
-        onCustomMessage
+        onCustomMessage,
+        onVisibilitychange
     ]);
     const onPopupTransitionEnd = ()=>{
         if (isLinksharePopupVisible) linkshareInputRef.current?.focus();
@@ -9243,6 +9197,170 @@ var $8a52c9358bc52b86$export$2e2bcd8739ae039 = $8a52c9358bc52b86$var$VirtualBack
 
 
 
+
+
+const $72e3731384b9cb71$var$modalHeight = (desktop)=>desktop ? "225px" : "237px";
+const $72e3731384b9cb71$export$6e1d6efa4a5a1be4 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  position: absolute;
+  width: 100%;
+  bottom: ${(props)=>props.open ? 0 : `-${$72e3731384b9cb71$var$modalHeight(props.desktop)}`};
+  transition: all 0.4s;
+
+  ${(props)=>{
+    if (props.desktop) return (0, $jQDcL$styledcomponents.css)`
+        bottom: ${props.open ? 0 : `calc(-${$72e3731384b9cb71$var$modalHeight(props.desktop)} - (100vh / 2))`};
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      `;
+}}
+`;
+const $72e3731384b9cb71$export$ed7a64955cfa5a69 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  flex-direction: column;
+  width: ${(props)=>props.desktop ? "375px" : "100%"};
+  height: ${({ desktop: desktop  })=>$72e3731384b9cb71$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"};
+  box-sizing: border-box;
+`;
+const $72e3731384b9cb71$export$6334857f32bd1136 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid #f7f7f7;
+`;
+const $72e3731384b9cb71$export$a27d59de3a7a8b8e = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  align-items: center;
+  margin: 16px auto 16px 16px;
+`;
+const $72e3731384b9cb71$export$47ef2d2839b7d95a = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 22px;
+  letter-spacing: -0.02em;
+`;
+const $72e3731384b9cb71$export$219c8e53e235e8b7 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background-color: ${(props)=>props.theme.popupBackgroundSecondaryColor};
+  border-radius: 50%;
+  height: 30px;
+  width: 30px;
+  padding: 0;
+  margin: 16px 16px 16px auto;
+
+  svg {
+    height: 15px;
+    width: 15px;
+
+    path {
+      fill: #000;
+    }
+  }
+`;
+const $72e3731384b9cb71$export$5197cd1b80f9682b = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #2d2d2d;
+  margin: 16px 32px auto 32px;
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 19px;
+  text-align: left;
+  letter-spacing: -0.02em;
+`;
+const $72e3731384b9cb71$export$5f79cadb3a637092 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).button`
+  background-color: ${({ theme: theme  })=>theme.primaryColor};
+  padding: 8px 18px;
+  height: 46px;
+  max-width: 100%;
+  border-radius: 15px;
+  margin: 20px 32px 20px 32px;
+  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;
+  }
+`;
+
+
+
+
+
+
+
+const $5b8a9a2976fbc419$var$BlockedFeaturePopup = ()=>{
+    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
+    const { isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen , orientation: orientation , isAgent: isAgent  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const popupRef = (0, $jQDcL$react.useRef)(null);
+    const desktop = orientation === "landscape";
+    (0, $326cea7dbbcb019a$export$71b2224f1ce5e08e)(popupRef, ()=>{
+        if (isBlockedFeaturePopupOpen) setBlockedFeaturePopupOpen(false);
+    });
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $72e3731384b9cb71$export$6e1d6efa4a5a1be4), {
+        open: isBlockedFeaturePopupOpen,
+        desktop: desktop,
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $72e3731384b9cb71$export$ed7a64955cfa5a69), {
+            ref: popupRef,
+            desktop: desktop,
+            children: [
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $72e3731384b9cb71$export$6334857f32bd1136), {
+                    children: [
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $72e3731384b9cb71$export$a27d59de3a7a8b8e), {
+                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $72e3731384b9cb71$export$47ef2d2839b7d95a), {
+                                children: isAgent && t("blockedFeature.titleConnected") || t("blockedFeature.titleGuest")
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $72e3731384b9cb71$export$219c8e53e235e8b7), {
+                            onClick: ()=>setBlockedFeaturePopupOpen(false),
+                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6f36db3b1217f099$export$2e2bcd8739ae039), {})
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $72e3731384b9cb71$export$5197cd1b80f9682b), {
+                    children: isAgent && t("blockedFeature.descriptionConnected") || t("blockedFeature.descriptionGuest")
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $72e3731384b9cb71$export$5f79cadb3a637092), {
+                    onClick: ()=>{
+                        setBlockedFeaturePopupOpen(false);
+                        if (isAgent) window.open(`${"https://app.snapcall.io"}/settings/workspace/plans-invoices`, "_blank");
+                    },
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("span", {
+                        children: [
+                            isAgent && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $41e530447f5fd995$export$f8e32eb727ccae99), {}),
+                            isAgent && t("blockedFeature.dismissConnected") || t("blockedFeature.dismissGuest")
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+var $5b8a9a2976fbc419$export$2e2bcd8739ae039 = $5b8a9a2976fbc419$var$BlockedFeaturePopup;
+
+
+
 const $e6950939129bcd4b$export$8376625f8bb18347 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
   position: absolute;
   width: 100%;
@@ -9255,8 +9373,8 @@ const $e6950939129bcd4b$export$8376625f8bb18347 = (0, ($parcel$interopDefault($j
 
 
 const $5f509eaff0d9c05a$var$Settings = ()=>{
-    const { isQuickConnectPopupVisible: isQuickConnectPopupVisible , isSettingsMenuVisible: isSettingsMenuVisible , isYoutubePopupVisible: isYoutubePopupVisible , isLinksharePopupVisible: isLinksharePopupVisible , isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
-    const open = isQuickConnectPopupVisible || isSettingsMenuVisible || isYoutubePopupVisible || isLinksharePopupVisible || isVirtualBackgroundPopupVisible;
+    const { isQuickConnectPopupVisible: isQuickConnectPopupVisible , isSettingsMenuVisible: isSettingsMenuVisible , isYoutubePopupVisible: isYoutubePopupVisible , isLinksharePopupVisible: isLinksharePopupVisible , isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible , isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const open = isQuickConnectPopupVisible || isSettingsMenuVisible || isYoutubePopupVisible || isBlockedFeaturePopupOpen || isLinksharePopupVisible || isVirtualBackgroundPopupVisible;
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $e6950939129bcd4b$export$8376625f8bb18347), {
         open: open,
         children: [
@@ -9264,7 +9382,8 @@ const $5f509eaff0d9c05a$var$Settings = ()=>{
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7d4fa7ceb4c29739$export$2e2bcd8739ae039), {}),
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $696ded7a5399bcd4$export$2e2bcd8739ae039), {}),
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e38290b50aaba0e3$export$2e2bcd8739ae039), {}),
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $8a52c9358bc52b86$export$2e2bcd8739ae039), {})
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $8a52c9358bc52b86$export$2e2bcd8739ae039), {}),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5b8a9a2976fbc419$export$2e2bcd8739ae039), {})
         ]
     });
 };
@@ -9365,10 +9484,12 @@ var $3d1bfd8f074b99b1$export$2e2bcd8739ae039 = $3d1bfd8f074b99b1$var$EndView;
 
 
 
+
 const $5dcd9e6925c7037c$var$connected = new Audio("https://cdn.snapcall.io/stream/connected.mp3");
 const $5dcd9e6925c7037c$var$disconnected = new Audio("https://cdn.snapcall.io/stream/disconnected.mp3");
 const $5dcd9e6925c7037c$var$userConnected = new Audio("https://cdn.snapcall.io/stream/user-connected.mp3");
 const $5dcd9e6925c7037c$var$userDisconnected = new Audio("https://cdn.snapcall.io/stream/user-disconnected.mp3");
+const $5dcd9e6925c7037c$var$linkReceived = new Audio("https://cdn.snapcall.io/stream/link-received.mp3");
 const $5dcd9e6925c7037c$var$Sounds = ()=>{
     const { userInteractionTriggered: userInteractionTriggered  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const onEnterRoom = async ()=>{
@@ -9401,14 +9522,24 @@ const $5dcd9e6925c7037c$var$Sounds = ()=>{
             console.warn("Couldn't play disconnected sound");
         }
     };
+    const onCustomMessage = async (event)=>{
+        const { type: type  } = event.detail.event;
+        if (type === (0, $e38290b50aaba0e3$export$a1eac7fdbc2db4af)) try {
+            await $5dcd9e6925c7037c$var$linkReceived.play();
+        } catch (disconnectedPlayError) {
+            console.warn("Couldn't play link-received sound");
+        }
+    };
     (0, $jQDcL$react.useEffect)(()=>{
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("newPeer", onNewPeer);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("peerClosed", onPeerClosed);
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("leaveRoom", onLeaveRoom);
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("customMessage", onCustomMessage);
         return ()=>{
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("newPeer", onNewPeer);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("peerClosed", onPeerClosed);
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("leaveRoom", onLeaveRoom);
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("customMessage", onCustomMessage);
         };
     }, []);
     (0, $jQDcL$react.useEffect)(()=>{
@@ -10146,6 +10277,9 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
     const [userInteractionTriggered, setUserInteractionTriggered] = (0, $jQDcL$react.useState)(false);
     const [containerWidth, containerHeight] = (0, $56e1e7a85d8bf4bb$export$2b86bedf890eab8)(streamUIContainerRef.current);
     const [isBlockedDevicesPopupOpen, setBlockedDevicesPopupOpen] = (0, $jQDcL$react.useState)(false);
+    const [isBlockedFeaturePopupOpen, setBlockedFeaturePopupOpen] = (0, $jQDcL$react.useState)(false);
+    const [permissions, setPermissions] = (0, $jQDcL$react.useState)([]);
+    const [plan, setPlan] = (0, $jQDcL$react.useState)(undefined);
     const orientation = (containerWidth || window.screen.width) > (containerHeight || window.screen.height) ? "landscape" : "portrait";
     const styledTheme = theme === "dark" ? (0, $9295e87e6b93e693$export$3e936a8db52a10a0) : (0, $9295e87e6b93e693$export$f30cb9bc4f736419);
     const onWebcamUpdate = (event)=>{
@@ -10274,6 +10408,9 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
     (0, $jQDcL$react.useEffect)(()=>{
         const onEnterRoom = async (event)=>{
             const peerId = event.detail.peerId;
+            setPlan(event.detail.plan);
+            setPermissions(event.detail.permissions);
+            console.log(event.detail.permissions);
             setSelfPeerId(peerId);
             try {
                 await (0, $c3d5253d9d597eb5$export$494039379563c94d)(options);
@@ -10292,6 +10429,8 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
     ]);
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $8b39f32976a7698a$export$2e2bcd8739ae039).Provider, {
         value: {
+            plan: plan,
+            permissions: permissions,
             selfPeerId: selfPeerId,
             streamUIContainerRef: streamUIContainerRef,
             videosContainerRef: videosContainerRef,
@@ -10308,6 +10447,8 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
             setIsLinksharePopupVisible: setIsLinksharePopupVisible,
             isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible,
             setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible,
+            isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen,
+            setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen,
             theme: theme,
             setTheme: setTheme,
             language: language,
@@ -10841,7 +10982,8 @@ const $e68207026aca356b$export$3f94917203ab7078 = {
     getState: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     setProfile: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setProfile.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     /* Should not be documented */ setConfig: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setConfig.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
-    setLogLevel: (level)=>(0, $d0c6baf97675ab49$export$2e2bcd8739ae039).setLogLevel(level)
+    setLogLevel: (level)=>(0, $d0c6baf97675ab49$export$2e2bcd8739ae039).setLogLevel(level),
+    getPermissions: ()=>(0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getPermissions()
 };
 window.streamUI = $e68207026aca356b$export$3f94917203ab7078;
 // Backward compatibility