@snapcall/stream-ui 1.7.0 → 1.8.0

package/dist/stream-ui.esm.js

@@ -1190,7 +1190,7 @@ class $a2f0e3c29b11c88e$export$2e2bcd8739ae039 {
 
 
 const $0148b6fd862a22e8$var$log = new (0, $0f65a9eaf4a1e910$export$2e2bcd8739ae039)("MediaPipe");
-const $0148b6fd862a22e8$var$mediapipeUrl = "https://stream-assets.snapcall.io/v1.7.0";
+const $0148b6fd862a22e8$var$mediapipeUrl = "https://stream-assets.snapcall.io/v1.8.0";
 let $0148b6fd862a22e8$var$selfieSegmentationInitialized = false;
 const $0148b6fd862a22e8$var$selfieSegmentation = new $3Sbms$SelfieSegmentation({
     locateFile: (file, prefix)=>{
@@ -1776,10 +1776,15 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     async joinRoom() {
         this.streamerMediasoup = await (0, $a2f0e3c29b11c88e$export$2e2bcd8739ae039).create(this.protoo, this.config);
         // now we join
-        if (this.joinOptions.apiKey && this.joinOptions.email) try {
-            const agentInfo = await this.fetchAgentInfo({
-                apiKey: this.joinOptions.apiKey,
-                email: this.joinOptions.email
+        const { apiKey: apiKey , email: email  } = this.joinOptions;
+        if (apiKey) try {
+            let agentInfo = null;
+            if (apiKey && email) agentInfo = await this.fetchAgentInfo({
+                apiKey: apiKey,
+                email: email
+            });
+            else if (apiKey) agentInfo = await this.fetchUserInfo({
+                apiKey: apiKey
             });
             if (agentInfo) this.dispatchEvent(new $c31e3fb4360572af$var$SnapcallEvent("agentIdentity", {
                 detail: {
@@ -1796,8 +1801,8 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             }));
         }
         const { peers: peers  } = await this.protoo.request("getRoomPeers", {
-            apiKey: this.joinOptions.apiKey,
-            email: this.joinOptions.email
+            apiKey: apiKey,
+            email: email
         });
         this.peers = new Map(peers.map((peer)=>[
                 peer.id || peer.peerId,
@@ -2675,6 +2680,19 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         });
         return agent;
     }
+    async fetchUserInfo({ apiKey: apiKey  }) {
+        const apiURL = this.config.apiUrl;
+        const user = await fetch(`${apiURL}/users/me`, {
+            method: "get",
+            headers: {
+                Authorization: `Bearer ${apiKey}`
+            }
+        }).then((response)=>{
+            if (response.ok) return response.json();
+            throw new Error("Invalid user info");
+        });
+        return user;
+    }
     setConfig(config) {
         this.config = {
             ...this.config,
@@ -3633,7 +3651,7 @@ const $f235befa4cdc42d6$var$Header = ()=>{
                 ]
             }, 
         ];
-        if ($f235befa4cdc42d6$var$browser.platform.type === "desktop" && $f235befa4cdc42d6$var$browser.engine.name === "Blink") computedCategories[2].items.push({
+        if ($f235befa4cdc42d6$var$browser.platform.type === "desktop" && $f235befa4cdc42d6$var$browser.engine.name === "Blink") computedCategories[2].items.unshift({
             id: "virtualBackground",
             title: t("virtualBackground.title"),
             jsxIcon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $2da9626742e3560b$export$d5424e4dfe4be076), {}),
@@ -3702,6 +3720,35 @@ const $af23c74942bdcae7$export$2b86bedf890eab8 = (element)=>{
     ]);
     return size;
 };
+const $af23c74942bdcae7$var$defaultState = {
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    x: 0,
+    y: 0
+};
+function $af23c74942bdcae7$export$e295b0c537d32d7d() {
+    const [element, ref] = (0, $3Sbms$useState)(null);
+    const [rect, setRect] = (0, $3Sbms$useState)($af23c74942bdcae7$var$defaultState);
+    (0, $3Sbms$useLayoutEffect)(()=>{
+        if (!element) return;
+        const updateSize = (entries)=>setRect(entries[0].contentRect);
+        const observer = new ResizeObserver(updateSize);
+        observer.observe(element);
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        element
+    ]);
+    return [
+        ref,
+        rect
+    ];
+}
 
 
 
@@ -4281,16 +4328,6 @@ const $6efc75079651494a$export$98d9314e6a208b24 = (0, $3Sbms$styledcomponents).d
   bottom: 0;
   cursor: ${(props)=>props.cursor};
   transition: all 0.4s;
-
-  ${(props)=>{
-    if (props.full) return (0, $3Sbms$css)`
-        width: 100%;
-        height: 100%;
-        right: 0px;
-        padding: 17px 10px;
-        box-sizing: border-box;
-      `;
-}}
 `;
 const $6efc75079651494a$export$ba5a75b023bcdce2 = (0, $3Sbms$styledcomponents).div`
   display: flex;
@@ -5142,22 +5179,18 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
     const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , profile: profile , muted: muted , streaming: streaming , orientation: orientation , options: options ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
     const [containerWidth, containerHeight] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(videosContainerRef.current);
+    const cursor = streaming && !extended ? "pointer" : "default";
+    const computedWidth = (0, $b8e10de7c6dba8c4$export$a6112fefa8de799d)({
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
+        minimumWidth: $5939a59dc7c96d41$var$minimumTileWidth,
+        maximumWidth: $5939a59dc7c96d41$var$maximumTileWidth,
+        orientation: orientation,
+        extended: extended
+    });
+    let tileWidth = `${computedWidth}px`;
+    let tileHeight = `${computedWidth}px`;
     const isAlone = streams.length < 1;
-    const cursor = streaming && !isAlone && !extended ? "pointer" : "default";
-    let tileWidth = orientation === "landscape" ? "50%" : "100%";
-    let tileHeight = orientation === "landscape" ? "100%" : "50%";
-    if (!isAlone) {
-        const computedWidth = (0, $b8e10de7c6dba8c4$export$a6112fefa8de799d)({
-            containerWidth: containerWidth,
-            containerHeight: containerHeight,
-            minimumWidth: $5939a59dc7c96d41$var$minimumTileWidth,
-            maximumWidth: $5939a59dc7c96d41$var$maximumTileWidth,
-            orientation: orientation,
-            extended: extended
-        });
-        tileWidth = `${computedWidth}px`;
-        tileHeight = `${computedWidth}px`;
-    }
     const onLocalVideoChange = (event)=>{
         if (!event.detail?.camera?.device) return;
         if (!videoElementRef.current) throw new Error("videoElementRef not available");
@@ -5167,7 +5200,7 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         setZoomAvailable((0, $c9e496369b59be7a$export$2f377c2162fd02b2).isVideoZoomAvailable());
     };
     const onSelfTileClick = ()=>{
-        if (streaming && !isAlone && !deviceRequest && !extended && SelfTileRef.current) {
+        if (streaming && !deviceRequest && !extended && SelfTileRef.current) {
             (0, $d02c24b66b4606fd$export$ab7d69e250642927)({
                 element: SelfTileRef.current
             });
@@ -5235,7 +5268,7 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         });
     };
     const onSelfTileMouseDown = (mouseDownEvent)=>{
-        if (!isAlone && !extended && SelfTileRef.current && videosContainerRef.current) (0, $d02c24b66b4606fd$export$298c6ed7f6695dd6)({
+        if (!extended && SelfTileRef.current && videosContainerRef.current) (0, $d02c24b66b4606fd$export$298c6ed7f6695dd6)({
             mouseDownEvent: mouseDownEvent,
             targetElement: SelfTileRef.current,
             containerElement: videosContainerRef.current
@@ -5260,6 +5293,7 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         if (streaming && videoElementRef.current && !videoElementRef.current.srcObject) videoElementRef.current.srcObject = videoMediaProviderRef.current;
     }, [
         streaming,
+        isAlone,
         isSomeonePresenting
     ]);
     (0, $3Sbms$useEffect)(()=>{
@@ -5270,12 +5304,6 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         containerWidth,
         containerHeight
     ]);
-    (0, $3Sbms$useEffect)(()=>{
-        if (isAlone && extended) setExtended(false);
-    }, [
-        isAlone,
-        extended
-    ]);
     (0, $3Sbms$useEffect)(()=>{
         if (!extended) {
             setSnapshotAnimation(false);
@@ -5381,7 +5409,7 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
             })
         ]
     });
-    if (isSomeonePresenting && remoteTilesContainerRef?.current) return /*#__PURE__*/ (0, $3Sbms$createPortal)(/*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$798352b46783b18d), {
+    if (remoteTilesContainerRef?.current && (isAlone || isSomeonePresenting)) return /*#__PURE__*/ (0, $3Sbms$createPortal)(/*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$798352b46783b18d), {
         style: {
             width: `${width}px`,
             height: `${height}px`
@@ -5393,7 +5421,6 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         children: [
             /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $6efc75079651494a$export$98d9314e6a208b24), {
                 ref: SelfTileRef,
-                full: isAlone,
                 style: {
                     width: tileWidth,
                     height: tileHeight
@@ -6232,49 +6259,40 @@ var $b496fc6f0d99c06d$export$2e2bcd8739ae039 = $b496fc6f0d99c06d$var$Highlighted
 
 
 
-const $b56218b5a57cb77c$export$d653589df987fd93 = (0, $3Sbms$styledcomponents).div`
-  display: flex;
-  position: absolute;
-  z-index: 20;
-  left: 0;
-  top: 0;
-  transition: all 0.4s;
-  width: ${({ orientation: orientation  })=>orientation === "landscape" ? "50%" : "100%"};
-  height: ${({ orientation: orientation  })=>orientation === "landscape" ? "100%" : "50%"};
-  padding: 17px 10px;
-  box-sizing: border-box;
-`;
 const $b56218b5a57cb77c$export$dd2ac23a70f320dd = (0, $3Sbms$styledcomponents).div`
-  display: flex;
+  display: ${({ show: show  })=>show ? "flex" : "none"};
   flex-direction: column;
   justify-content: center;
   align-items: center;
   position: relative;
-  width: 100%;
-  height: 100%;
+  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 $b56218b5a57cb77c$export$2dabfbe763cc7a4 = (0, $3Sbms$styledcomponents).h2`
   font-weight: 600;
   font-size: 16px;
   text-align: center;
-  width: 300px;
+  max-width: 300px;
 `;
 const $b56218b5a57cb77c$export$6ed6e36e1b456f96 = (0, $3Sbms$styledcomponents).div`
   position: relative;
   display: flex;
   align-items: center;
   height: 50px;
-  width: 300px;
+  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 $b56218b5a57cb77c$export$5f759de1870a3e41 = (0, $3Sbms$styledcomponents).div`
   display: flex;
@@ -6316,7 +6334,7 @@ const $b56218b5a57cb77c$export$d7f3ab4b3437ad97 = (0, $3Sbms$styledcomponents).b
 const $b56218b5a57cb77c$export$c22678f0e7b404e0 = (0, $3Sbms$styledcomponents).p`
   font-size: 12px;
   font-weight: 400;
-  width: 300px;
+  max-width: 300px;
   text-align: center;
 `;
 
@@ -6391,11 +6409,14 @@ const $93a0377c243d965e$export$c7df1b15b59b1df2 = /*#__PURE__*/ (0, $3Sbms$jsxs)
 });
 
 
-const $f0b0b18fe6c6ae77$var$InvitationTile = ({ orientation: orientation  })=>{
+
+
+const $f0b0b18fe6c6ae77$var$InvitationTile = ({ show: show , orientation: orientation , width: width , height: height  })=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
+    const { options: options  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const onCopyCallLinkClick = async ()=>{
         try {
-            await (0, $57162bcada7d6f66$export$2e2bcd8739ae039)(window.location.href);
+            await (0, $57162bcada7d6f66$export$2e2bcd8739ae039)(options.sharedURL || window.location.href);
             (0, $a5146f9062d7bf28$export$3a57e165650c636f)(t("copyLink.copied"), {
                 duration: 2000
             });
@@ -6406,37 +6427,37 @@ const $f0b0b18fe6c6ae77$var$InvitationTile = ({ orientation: orientation  })=>{
             });
         }
     };
-    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b56218b5a57cb77c$export$d653589df987fd93), {
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $b56218b5a57cb77c$export$dd2ac23a70f320dd), {
+        show: show,
+        width: width,
+        height: height,
         orientation: orientation,
-        children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $b56218b5a57cb77c$export$dd2ac23a70f320dd), {
-            orientation: orientation,
-            children: [
-                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b56218b5a57cb77c$export$2dabfbe763cc7a4), {
-                    children: t("invite.title")
-                }),
-                /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $b56218b5a57cb77c$export$6ed6e36e1b456f96), {
-                    children: [
-                        /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $b56218b5a57cb77c$export$5f759de1870a3e41), {
-                            children: [
-                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $1ec1d06e0a21fdaa$export$2e2bcd8739ae039), {
-                                    color: "black"
-                                }),
-                                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b56218b5a57cb77c$export$c6b180e8ec79154e), {
-                                    children: window.location.href
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b56218b5a57cb77c$export$d7f3ab4b3437ad97), {
-                            onClick: onCopyCallLinkClick,
-                            children: t("invite.copy")
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b56218b5a57cb77c$export$c22678f0e7b404e0), {
-                    children: t("invite.description")
-                })
-            ]
-        })
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b56218b5a57cb77c$export$2dabfbe763cc7a4), {
+                children: t("invite.title")
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $b56218b5a57cb77c$export$6ed6e36e1b456f96), {
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $b56218b5a57cb77c$export$5f759de1870a3e41), {
+                        children: [
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $1ec1d06e0a21fdaa$export$2e2bcd8739ae039), {
+                                color: "black"
+                            }),
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b56218b5a57cb77c$export$c6b180e8ec79154e), {
+                                children: options.sharedURL || window.location.href
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b56218b5a57cb77c$export$d7f3ab4b3437ad97), {
+                        onClick: onCopyCallLinkClick,
+                        children: t("invite.copy")
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b56218b5a57cb77c$export$c22678f0e7b404e0), {
+                children: t("invite.description")
+            })
+        ]
     });
 };
 var $f0b0b18fe6c6ae77$export$2e2bcd8739ae039 = $f0b0b18fe6c6ae77$var$InvitationTile;
@@ -6515,6 +6536,7 @@ const $cdab47bb8796991e$var$Video = ()=>{
     });
     const { streams: streams , highlightedTile: highlightedTile , dispatch: dispatch  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
     const [containerWidth, containerHeight] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(remoteTilesContainerRef.current);
+    const showInvitation = streams.length < 1 && !highlightedTile && containerWidth > 0;
     (0, $3Sbms$useEffect)(()=>{
         if (options.GDPRDisclaimer) (0, $b8963bf62cf5b984$export$2e2bcd8739ae039)({
             message: "Para mejorar la calidad de nuestro servicio, esta llamada ser\xe1 grabada",
@@ -6525,9 +6547,10 @@ const $cdab47bb8796991e$var$Video = ()=>{
         options.GDPRDisclaimer
     ]);
     (0, $3Sbms$useEffect)(()=>{
-        if (remoteTilesContainerRef?.current && containerWidth && containerHeight) {
+        if (remoteTilesContainerRef?.current) {
             const ratio = 1;
-            const numberOfTiles = remoteTilesContainerRef.current.childElementCount;
+            let numberOfTiles = remoteTilesContainerRef.current.childElementCount;
+            if (!showInvitation) numberOfTiles -= 1;
             const videoWidth = (0, $b8e10de7c6dba8c4$export$4d43009c33055644)({
                 availableWidth: containerWidth - 16 * (numberOfTiles - 1),
                 availableHeight: containerHeight - 16 * (numberOfTiles - 1),
@@ -6545,7 +6568,8 @@ const $cdab47bb8796991e$var$Video = ()=>{
         containerWidth,
         containerHeight,
         streams.length,
-        highlightedTile
+        highlightedTile,
+        showInvitation, 
     ]);
     (0, $3Sbms$useEffect)(()=>{
         if (userInteractionTriggered) {
@@ -6699,7 +6723,10 @@ const $cdab47bb8796991e$var$Video = ()=>{
                             height: tileSize.height
                         }, stream.id);
                     }),
-                    streams.length < 1 && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f0b0b18fe6c6ae77$export$2e2bcd8739ae039), {
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f0b0b18fe6c6ae77$export$2e2bcd8739ae039), {
+                        show: showInvitation,
+                        width: `${tileSize.width}px`,
+                        height: `${tileSize.height}px`,
                         orientation: orientation
                     })
                 ]
@@ -9068,38 +9095,38 @@ const $d493afe60dcea711$var$backgroundOptions = [
     {
         title: "Blue",
         id: "background-blue",
-        iconUrl: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/blue_background_icon.png`,
-        value: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/blue_background.png`
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/blue_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/blue_background.png`
     },
     {
         title: "Cold",
         id: "background-cold",
-        iconUrl: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/cold_background_icon.png`,
-        value: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/cold_background.png`
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/cold_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/cold_background.png`
     },
     {
         title: "Bricks",
         id: "background-bricks",
-        iconUrl: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/bricks_background_icon.png`,
-        value: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/bricks_background.png`
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/bricks_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/bricks_background.png`
     },
     {
         title: "White",
         id: "background-white",
-        iconUrl: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/white_background_icon.png`,
-        value: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/white_background.png`
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/white_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/white_background.png`
     },
     {
         title: "Yellow",
         id: "background-yellow",
-        iconUrl: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/yellow_background_icon.png`,
-        value: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/yellow_background.png`
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/yellow_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/yellow_background.png`
     },
     {
         title: "Warm",
         id: "background-warm",
-        iconUrl: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/warm_background_icon.png`,
-        value: `${"https://stream-assets.snapcall.io/v1.7.0"}/backgrounds/warm_background.png`
+        iconUrl: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/warm_background_icon.png`,
+        value: `${"https://stream-assets.snapcall.io/v1.8.0"}/backgrounds/warm_background.png`
     },
     {
         title: "None",
@@ -9992,7 +10019,7 @@ const $15a01b611391c1e7$var$audioSource = new Blob([
 const $15a01b611391c1e7$var$audioURL = URL.createObjectURL($15a01b611391c1e7$var$audioSource);
 let $15a01b611391c1e7$var$mediaResult = undefined;
 const $15a01b611391c1e7$export$716eeec86fd18da7 = ()=>{
-    $15a01b611391c1e7$var$mediaResult?.getAudioTracks().forEach((track)=>{
+    $15a01b611391c1e7$var$mediaResult?.getTracks().forEach((track)=>{
         track.stop();
     });
     $15a01b611391c1e7$var$mediaResult = undefined;
@@ -10004,7 +10031,8 @@ const $15a01b611391c1e7$export$494039379563c94d = async ()=>{
     } catch (err) {
         console.warn("User interaction is required, asking audio GUM");
         $15a01b611391c1e7$var$mediaResult = await navigator.mediaDevices.getUserMedia({
-            audio: true
+            audio: true,
+            video: true
         });
     }
 };
@@ -10327,7 +10355,6 @@ window.hj = window.hj || function() {
 
 
 
-
 const $9a3d651cab8c9249$var$GreetingSnapcallLogo = ()=>{
     return /*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
         width: "72",
@@ -10559,90 +10586,87 @@ const $35c6a4b506b7dc62$export$d4a1a815e49dfefd = (0, $3Sbms$styledcomponents).d
 
 
 
-const $f8d57e3d223f5089$var$getUserMedia = async (device)=>{
-    try {
-        const stream = navigator.mediaDevices.getUserMedia({
-            video: device === "webcam",
-            audio: device === "microphone"
-        });
-        return stream;
-    } catch (err) {
-        console.error("Get User Media Failed: ", err);
-        return null;
-    }
-};
-let $f8d57e3d223f5089$var$videoTrack;
+
 const $f8d57e3d223f5089$var$GreetingView = ({ onGreetingDone: onGreetingDone  })=>{
     const { t: t  } = (0, $3Sbms$useTranslation)();
-    const mainContainerRef = (0, $3Sbms$useRef)(null);
-    const videoRef = (0, $3Sbms$useRef)(null);
+    const [mainContainerRef, { width: width , height: height  }] = (0, $af23c74942bdcae7$export$e295b0c537d32d7d)();
     const inputRef = (0, $3Sbms$useRef)(null);
-    const stream = (0, $3Sbms$useMemo)(()=>new MediaStream(), []);
-    const [webcamEnabled, setWebcamEnabled] = (0, $3Sbms$useState)(false);
+    const videoRef = (0, $3Sbms$useRef)(null);
+    const [videoTrack1, setVideoTrack] = (0, $3Sbms$useState)(undefined);
     const [micEnabled, setMicEnabled] = (0, $3Sbms$useState)(false);
     const [joining, setJoining] = (0, $3Sbms$useState)(false);
-    const [firstRender, setFirstRender] = (0, $3Sbms$useState)(true);
-    const [width, height] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(mainContainerRef.current);
     const desktop = width >= height;
     const onSubmit = ()=>{
         const displayName = inputRef.current?.value;
+        const cameraEnabled = Boolean(videoTrack1);
+        videoTrack1?.stop();
         setJoining(true);
         setTimeout(()=>{
             onGreetingDone({
-                cameraEnabled: webcamEnabled,
+                cameraEnabled: cameraEnabled,
                 micEnabled: micEnabled,
                 displayName: displayName
             });
         }, 4000);
     };
-    const onCameraClick = (0, $3Sbms$useCallback)(()=>{
-        if (!webcamEnabled) $f8d57e3d223f5089$var$getUserMedia("webcam").then((videoStream)=>{
-            if (!videoStream || !videoRef.current) return;
-            $f8d57e3d223f5089$var$videoTrack = videoStream.getVideoTracks()[0];
-            stream.addTrack($f8d57e3d223f5089$var$videoTrack);
-            setWebcamEnabled(true);
-            if (!videoRef.current.srcObject) videoRef.current.srcObject = stream;
+    const getUserMedia = async (opt)=>{
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia(opt);
+            const videoTrack = stream.getVideoTracks()[0];
+            const audioTrack = stream.getAudioTracks()[0];
+            if (videoTrack) setVideoTrack(videoTrack);
+            if (audioTrack) setMicEnabled(true);
+            audioTrack?.stop();
+        } catch (err) {
+            console.error("Get User Media Failed: ", err);
+        }
+    };
+    const onCameraClick = (0, $3Sbms$useCallback)(async ()=>{
+        if (!videoTrack1) await getUserMedia({
+            video: true
         });
         else {
-            if ($f8d57e3d223f5089$var$videoTrack) stream.removeTrack($f8d57e3d223f5089$var$videoTrack);
-            $f8d57e3d223f5089$var$videoTrack = undefined;
-            setWebcamEnabled(false);
+            videoTrack1.stop();
+            setVideoTrack(undefined);
         }
     }, [
-        webcamEnabled,
-        stream
+        videoTrack1
     ]);
     const onMicrophoneClick = (0, $3Sbms$useCallback)(async ()=>{
-        if (!micEnabled) $f8d57e3d223f5089$var$getUserMedia("microphone").then(()=>{
-            if (!videoRef.current) return;
-            setMicEnabled(true);
+        if (!micEnabled) await getUserMedia({
+            audio: true
         });
         else setMicEnabled(false);
     }, [
         micEnabled
     ]);
     (0, $3Sbms$useEffect)(()=>{
-        if (!firstRender) return;
-        try {
-            onCameraClick();
-            onMicrophoneClick();
-        } catch (err) {
-            console.error("Error: ", err);
-        } finally{
-            setFirstRender(false);
+        if (videoRef.current) {
+            if (videoTrack1) videoRef.current.srcObject = new MediaStream([
+                videoTrack1
+            ]);
+            else videoRef.current.srcObject = null;
         }
     }, [
-        firstRender,
-        onCameraClick,
-        onMicrophoneClick
+        videoRef,
+        videoTrack1,
+        width,
+        height
     ]);
+    (0, $3Sbms$useEffect)(()=>{
+        getUserMedia({
+            audio: true,
+            video: true
+        });
+    }, []);
     if (joining === true) return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $35c6a4b506b7dc62$export$d4a1a815e49dfefd), {
         children: /*#__PURE__*/ (0, $3Sbms$jsx)("img", {
-            src: `${"https://stream-assets.snapcall.io/v1.7.0"}/animations/snapcall-logo-animation.gif`,
+            src: `${"https://stream-assets.snapcall.io/v1.8.0"}/animations/snapcall-logo-animation.gif`,
             alt: "Snapcall logo animation",
             height: 40
         })
     });
+    const webcamEnabled = Boolean(videoTrack1);
     return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $35c6a4b506b7dc62$export$d653589df987fd93), {
         ref: mainContainerRef,
         children: [