@snapcall/stream-ui 1.9.0 → 1.10.1

package/dist/stream-ui.js

@@ -1,5 +1,5 @@
 var $jQDcL$reactjsxruntime = require("react/jsx-runtime");
-var $jQDcL$reactdom = require("react-dom");
+var $jQDcL$reactdomclient = require("react-dom/client");
 var $jQDcL$hotjarbrowser = require("@hotjar/browser");
 var $jQDcL$reacthottoast = require("react-hot-toast");
 var $jQDcL$styledcomponents = require("styled-components");
@@ -14,6 +14,7 @@ var $jQDcL$sentrybrowser = require("@sentry/browser");
 var $jQDcL$mediasoupclientlibProducer = require("mediasoup-client/lib/Producer");
 var $jQDcL$mediasoupclient = require("mediasoup-client");
 var $jQDcL$mediapipeselfie_segmentation = require("@mediapipe/selfie_segmentation");
+var $jQDcL$reactdom = require("react-dom");
 var $jQDcL$qrcode = require("qrcode");
 
 function $parcel$interopDefault(a) {
@@ -333,6 +334,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 +368,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",
@@ -473,6 +485,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",
@@ -504,6 +519,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",
@@ -613,6 +636,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",
@@ -644,6 +670,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",
@@ -779,6 +813,8 @@ var $b45c0bcc142f0b5e$export$2e2bcd8739ae039 = (0, ($parcel$interopDefault($jQDc
 
 
 
+
+
 const $d0c6baf97675ab49$var$LogLevel = {
     error: 1,
     warn: 2,
@@ -1413,6 +1449,8 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     pendingDeviceRequest = {};
     joinOptions = {};
     devicesList = [];
+    plan = undefined;
+    permissions = [];
     constructor(){
         super();
         navigator.mediaDevices.addEventListener("devicechange", ()=>this.onDeviceChange());
@@ -1467,10 +1505,8 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 }
             };
             peer.producersData.forEach((producer)=>{
-                if (producer.deviceType === "microphone") {
-                    deviceState.microphone.enabled = true;
-                    deviceState.microphone.muted = producer.paused;
-                } else if (producer.deviceType === "screen") deviceState.screenshare.enabled = true;
+                if (producer.deviceType === "microphone") deviceState.microphone.enabled = true;
+                else if (producer.deviceType === "screen") deviceState.screenshare.enabled = true;
                 else if (producer.deviceType === "webcam") deviceState.camera.enabled = true;
             });
             peers.push({
@@ -1536,7 +1572,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"
@@ -1545,6 +1581,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", {
@@ -1577,18 +1615,20 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             if (notification.method === "error") {
                 if (notification.data?.reason === "reached user limit") this.onCriticalError($1dedebd5ff3002eb$export$818d60b2e626da0c.USER_LIMIT);
             } else if (notification.method === "newPeer") {
-                const { id: id , profile: profile  } = notification.data;
+                const { id: id , profile: profile , muted: muted  } = notification.data;
                 this.peers.set(id, {
                     id: id,
                     peerId: id,
                     profile: profile,
+                    muted: muted,
                     producersData: []
                 });
                 const event = new $1dedebd5ff3002eb$var$SnapcallEvent("newPeer", {
                     detail: {
                         peerId: id,
                         displayName: profile.name,
-                        profile: profile
+                        profile: profile,
+                        muted: muted
                     }
                 });
                 this.dispatchEvent(event);
@@ -1667,6 +1707,26 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                     }
                 });
                 this.dispatchEvent(event);
+            } else if (notification.method === "mute") {
+                const { peerId: peerId , device: device  } = notification.data;
+                const event = new $1dedebd5ff3002eb$var$SnapcallEvent("mediaPause", {
+                    detail: {
+                        peerId: peerId,
+                        deviceType: device,
+                        paused: true
+                    }
+                });
+                this.dispatchEvent(event);
+            } else if (notification.method === "unmute") {
+                const { peerId: peerId , device: device  } = notification.data;
+                const event = new $1dedebd5ff3002eb$var$SnapcallEvent("mediaResume", {
+                    detail: {
+                        peerId: peerId,
+                        deviceType: device,
+                        paused: false
+                    }
+                });
+                this.dispatchEvent(event);
             } else if (notification.method === "requestDeviceResult") {
                 const event = new $1dedebd5ff3002eb$var$SnapcallEvent(notification.method, {
                     detail: notification.data
@@ -1814,7 +1874,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);
@@ -1952,28 +2014,30 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             this.dispatchEvent(event);
         }
     }
-    async muteMicrophone() {
+    muteMicrophone() {
         if (this.micProducer) {
             this.onStopSpeak();
-            this.micProducer?.pause();
-            await this.protoo.request("pauseProducer", {
-                producerId: this.micProducer?.id
-            });
+            this.micProducer.pause();
             this.muted = true;
+            const device = "microphone";
+            this.protoo.notify("mute", {
+                device: device
+            });
             const event = new $1dedebd5ff3002eb$var$SnapcallEvent("microphoneMute", {
                 detail: {}
             });
             this.dispatchEvent(event);
         }
     }
-    async unMuteMicrophone() {
+    unMuteMicrophone() {
         if (this.micProducer) {
             this.micProducer.resume();
             this.resolvePendingDeviceRequest("microphone", true);
-            await this.protoo.request("resumeProducer", {
-                producerId: this.micProducer.id
-            });
             this.muted = false;
+            const device = "microphone";
+            this.protoo.notify("unmute", {
+                device: device
+            });
             const event = new $1dedebd5ff3002eb$var$SnapcallEvent("microphoneUnmute", {
                 detail: {}
             });
@@ -2134,6 +2198,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;
@@ -2173,6 +2238,11 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             },
             qualityIndex: 2
         };
+        await this.webcamProducer?.replaceTrack?.({
+            track: null
+        }).catch((err)=>{
+            $1dedebd5ff3002eb$var$log.error("switchCamera", "clean track failed", err);
+        });
         const mediaStream = await this.handleGetUserMediaError("webcam", navigator.mediaDevices.getUserMedia({
             video: {
                 deviceId: {
@@ -2310,6 +2380,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: {
@@ -2402,11 +2473,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");
@@ -2472,6 +2545,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 deviceType: deviceType
             });
             this.scaleVideoEncodingsParameter();
+            const paused = peer ? peer.muted : false;
             const event = new $1dedebd5ff3002eb$var$SnapcallEvent("mediaStart", {
                 detail: {
                     peerId: peerId,
@@ -2524,6 +2598,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
@@ -2692,6 +2767,9 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             ...config
         };
     }
+    getPermissions() {
+        return this.permissions;
+    }
 }
 
 
@@ -3035,8 +3113,9 @@ const $cce7f1c9e9c29503$export$d5424e4dfe4be076 = ({ color: color  })=>/*#__PURE
 
 const $326cea7dbbcb019a$export$71b2224f1ce5e08e = (ref, action)=>{
     (0, $jQDcL$react.useEffect)(()=>{
+        const effectTimestamp = performance.now();
         const onWindowClick = (event)=>{
-            if (!ref?.current?.contains(event.target)) action();
+            if (!ref?.current?.contains(event.target) && event.timeStamp > effectTimestamp) action();
         };
         if (ref?.current) {
             window.addEventListener("click", onWindowClick);
@@ -3125,7 +3204,9 @@ const $82c4f35718e0facf$var$Menu = ({ categories: categories  })=>{
                         children: category.title
                     }),
                     category.items.map((item)=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $4890069d0b6c2ba3$export$44020656de05f2b4), {
-                            onClick: item.action,
+                            onClick: ()=>{
+                                item.action();
+                            },
                             danger: item.danger,
                             children: [
                                 item.jsxIcon && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $4890069d0b6c2ba3$export$5912a8d3f489e1c1), {
@@ -3171,7 +3252,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;
@@ -3546,7 +3627,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)=>{
@@ -3594,14 +3675,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 = [
             {
@@ -3658,13 +3742,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: [
@@ -3674,7 +3760,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")}`
                     })
                 ]
             }),
@@ -4510,7 +4599,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;
@@ -4522,16 +4611,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");
@@ -5169,7 +5264,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";
@@ -5213,42 +5308,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;
@@ -6459,7 +6556,8 @@ const $88b23a8428e67b66$var$Video = ()=>{
             const { peers: peers  } = event.detail;
             const roomStreams = peers.map((peer)=>({
                     id: peer.peerId,
-                    profile: peer.profile
+                    profile: peer.profile,
+                    muted: peer.muted
                 }));
             dispatch({
                 type: (0, $a4027a5418fcd07a$export$96a9662a3eda31f6).SET_STREAMS,
@@ -6788,7 +6886,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));
@@ -6799,18 +6897,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);
@@ -6818,9 +6918,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 = [
         {
@@ -7393,6 +7495,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;
 
 
@@ -9118,6 +9230,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%;
@@ -9130,8 +9406,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: [
@@ -9139,7 +9415,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), {})
         ]
     });
 };
@@ -10033,6 +10310,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)=>{
@@ -10161,6 +10441,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);
@@ -10179,6 +10462,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,
@@ -10195,6 +10480,8 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
             setIsLinksharePopupVisible: setIsLinksharePopupVisible,
             isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible,
             setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible,
+            isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen,
+            setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen,
             theme: theme,
             setTheme: setTheme,
             language: language,
@@ -10700,15 +10987,17 @@ const $e68207026aca356b$export$3f94917203ab7078 = {
     init: ({ element: element , ...options })=>{
         if (element?.nodeType !== window.Node.ELEMENT_NODE) throw new Error('The "element" property must be a valid element!');
         const mergedOptions = (0, $6b4cf4c12c735fdf$export$6969335ea1e4e77c)($e68207026aca356b$var$defaultOptions, options);
-        (0, $jQDcL$reactdom.render)(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ee8cb448c2c74888$export$2e2bcd8739ae039), {
+        const rootElement = (0, $jQDcL$reactdomclient.createRoot)(element);
+        rootElement.render(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ee8cb448c2c74888$export$2e2bcd8739ae039), {
             options: mergedOptions
-        }), element);
+        }));
         if (mergedOptions.tracking) (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).init(3111933, 6);
     },
     initGreeting: (element, onGreetingDone)=>{
-        (0, $jQDcL$reactdom.render)(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3305ca02e86dabd1$export$2e2bcd8739ae039), {
+        const rootElement = (0, $jQDcL$reactdomclient.createRoot)(element);
+        rootElement.render(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3305ca02e86dabd1$export$2e2bcd8739ae039), {
             onGreetingDone: onGreetingDone
-        }), element);
+        }));
     },
     setExtraSettingsOptions: (extraOptions)=>{
         const event = new CustomEvent("streamUISetExtraSettingsOptions", {
@@ -10724,11 +11013,13 @@ const $e68207026aca356b$export$3f94917203ab7078 = {
     terminateRoom: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).terminateRoom.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     generateToken: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).generateToken.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     addEventListener: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
+    removeEventListener: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     dispatchEvent: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).dispatchEvent.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     getState: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     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