@snapcall/stream-ui 1.7.0 → 1.8.0

package/dist/stream-ui.js

@@ -1198,7 +1198,7 @@ class $a62e7f17be5cf3a0$export$2e2bcd8739ae039 {
 
 
 const $cb913ea078a876a6$var$log = new (0, $d0c6baf97675ab49$export$2e2bcd8739ae039)("MediaPipe");
-const $cb913ea078a876a6$var$mediapipeUrl = "https://stream-assets.snapcall.io/v1.7.0";
+const $cb913ea078a876a6$var$mediapipeUrl = "https://stream-assets.snapcall.io/v1.8.0";
 let $cb913ea078a876a6$var$selfieSegmentationInitialized = false;
 const $cb913ea078a876a6$var$selfieSegmentation = new $jQDcL$mediapipeselfie_segmentation.SelfieSegmentation({
     locateFile: (file, prefix)=>{
@@ -1784,10 +1784,15 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     async joinRoom() {
         this.streamerMediasoup = await (0, $a62e7f17be5cf3a0$export$2e2bcd8739ae039).create(this.protoo, this.config);
         // now we join
-        if (this.joinOptions.apiKey && this.joinOptions.email) try {
-            const agentInfo = await this.fetchAgentInfo({
-                apiKey: this.joinOptions.apiKey,
-                email: this.joinOptions.email
+        const { apiKey: apiKey , email: email  } = this.joinOptions;
+        if (apiKey) try {
+            let agentInfo = null;
+            if (apiKey && email) agentInfo = await this.fetchAgentInfo({
+                apiKey: apiKey,
+                email: email
+            });
+            else if (apiKey) agentInfo = await this.fetchUserInfo({
+                apiKey: apiKey
             });
             if (agentInfo) this.dispatchEvent(new $1dedebd5ff3002eb$var$SnapcallEvent("agentIdentity", {
                 detail: {
@@ -1804,8 +1809,8 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             }));
         }
         const { peers: peers  } = await this.protoo.request("getRoomPeers", {
-            apiKey: this.joinOptions.apiKey,
-            email: this.joinOptions.email
+            apiKey: apiKey,
+            email: email
         });
         this.peers = new Map(peers.map((peer)=>[
                 peer.id || peer.peerId,
@@ -2683,6 +2688,19 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         });
         return agent;
     }
+    async fetchUserInfo({ apiKey: apiKey  }) {
+        const apiURL = this.config.apiUrl;
+        const user = await fetch(`${apiURL}/users/me`, {
+            method: "get",
+            headers: {
+                Authorization: `Bearer ${apiKey}`
+            }
+        }).then((response)=>{
+            if (response.ok) return response.json();
+            throw new Error("Invalid user info");
+        });
+        return user;
+    }
     setConfig(config) {
         this.config = {
             ...this.config,
@@ -3641,7 +3659,7 @@ const $e1930b467e7d8845$var$Header = ()=>{
                 ]
             }, 
         ];
-        if ($e1930b467e7d8845$var$browser.platform.type === "desktop" && $e1930b467e7d8845$var$browser.engine.name === "Blink") computedCategories[2].items.push({
+        if ($e1930b467e7d8845$var$browser.platform.type === "desktop" && $e1930b467e7d8845$var$browser.engine.name === "Blink") computedCategories[2].items.unshift({
             id: "virtualBackground",
             title: t("virtualBackground.title"),
             jsxIcon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $cce7f1c9e9c29503$export$d5424e4dfe4be076), {}),
@@ -3710,6 +3728,35 @@ const $56e1e7a85d8bf4bb$export$2b86bedf890eab8 = (element)=>{
     ]);
     return size;
 };
+const $56e1e7a85d8bf4bb$var$defaultState = {
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    x: 0,
+    y: 0
+};
+function $56e1e7a85d8bf4bb$export$e295b0c537d32d7d() {
+    const [element, ref] = (0, $jQDcL$react.useState)(null);
+    const [rect, setRect] = (0, $jQDcL$react.useState)($56e1e7a85d8bf4bb$var$defaultState);
+    (0, $jQDcL$react.useLayoutEffect)(()=>{
+        if (!element) return;
+        const updateSize = (entries)=>setRect(entries[0].contentRect);
+        const observer = new ResizeObserver(updateSize);
+        observer.observe(element);
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        element
+    ]);
+    return [
+        ref,
+        rect
+    ];
+}
 
 
 
@@ -4289,16 +4336,6 @@ const $2c45d365ee8aa1ab$export$98d9314e6a208b24 = (0, ($parcel$interopDefault($j
   bottom: 0;
   cursor: ${(props)=>props.cursor};
   transition: all 0.4s;
-
-  ${(props)=>{
-    if (props.full) return (0, $jQDcL$styledcomponents.css)`
-        width: 100%;
-        height: 100%;
-        right: 0px;
-        padding: 17px 10px;
-        box-sizing: border-box;
-      `;
-}}
 `;
 const $2c45d365ee8aa1ab$export$ba5a75b023bcdce2 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
   display: flex;
@@ -5150,22 +5187,18 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
     const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , profile: profile , muted: muted , streaming: streaming , orientation: orientation , options: options ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $3f6e908c45fcc5b3$export$b5633a7cfbe42d9f)();
     const [containerWidth, containerHeight] = (0, $56e1e7a85d8bf4bb$export$2b86bedf890eab8)(videosContainerRef.current);
+    const cursor = streaming && !extended ? "pointer" : "default";
+    const computedWidth = (0, $7de6ded9bdec6f42$export$a6112fefa8de799d)({
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
+        minimumWidth: $8393b5c887e16c8c$var$minimumTileWidth,
+        maximumWidth: $8393b5c887e16c8c$var$maximumTileWidth,
+        orientation: orientation,
+        extended: extended
+    });
+    let tileWidth = `${computedWidth}px`;
+    let tileHeight = `${computedWidth}px`;
     const isAlone = streams.length < 1;
-    const cursor = streaming && !isAlone && !extended ? "pointer" : "default";
-    let tileWidth = orientation === "landscape" ? "50%" : "100%";
-    let tileHeight = orientation === "landscape" ? "100%" : "50%";
-    if (!isAlone) {
-        const computedWidth = (0, $7de6ded9bdec6f42$export$a6112fefa8de799d)({
-            containerWidth: containerWidth,
-            containerHeight: containerHeight,
-            minimumWidth: $8393b5c887e16c8c$var$minimumTileWidth,
-            maximumWidth: $8393b5c887e16c8c$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");
@@ -5175,7 +5208,7 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         setZoomAvailable((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).isVideoZoomAvailable());
     };
     const onSelfTileClick = ()=>{
-        if (streaming && !isAlone && !deviceRequest && !extended && SelfTileRef.current) {
+        if (streaming && !deviceRequest && !extended && SelfTileRef.current) {
             (0, $4ee7c4b0b3646a08$export$ab7d69e250642927)({
                 element: SelfTileRef.current
             });
@@ -5243,7 +5276,7 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         });
     };
     const onSelfTileMouseDown = (mouseDownEvent)=>{
-        if (!isAlone && !extended && SelfTileRef.current && videosContainerRef.current) (0, $4ee7c4b0b3646a08$export$298c6ed7f6695dd6)({
+        if (!extended && SelfTileRef.current && videosContainerRef.current) (0, $4ee7c4b0b3646a08$export$298c6ed7f6695dd6)({
             mouseDownEvent: mouseDownEvent,
             targetElement: SelfTileRef.current,
             containerElement: videosContainerRef.current
@@ -5268,6 +5301,7 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         if (streaming && videoElementRef.current && !videoElementRef.current.srcObject) videoElementRef.current.srcObject = videoMediaProviderRef.current;
     }, [
         streaming,
+        isAlone,
         isSomeonePresenting
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
@@ -5278,12 +5312,6 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         containerWidth,
         containerHeight
     ]);
-    (0, $jQDcL$react.useEffect)(()=>{
-        if (isAlone && extended) setExtended(false);
-    }, [
-        isAlone,
-        extended
-    ]);
     (0, $jQDcL$react.useEffect)(()=>{
         if (!extended) {
             setSnapshotAnimation(false);
@@ -5389,7 +5417,7 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
             })
         ]
     });
-    if (isSomeonePresenting && remoteTilesContainerRef?.current) return /*#__PURE__*/ (0, $jQDcL$reactdom.createPortal)(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$798352b46783b18d), {
+    if (remoteTilesContainerRef?.current && (isAlone || isSomeonePresenting)) return /*#__PURE__*/ (0, $jQDcL$reactdom.createPortal)(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$798352b46783b18d), {
         style: {
             width: `${width}px`,
             height: `${height}px`
@@ -5401,7 +5429,6 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         children: [
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $2c45d365ee8aa1ab$export$98d9314e6a208b24), {
                 ref: SelfTileRef,
-                full: isAlone,
                 style: {
                     width: tileWidth,
                     height: tileHeight
@@ -6240,49 +6267,40 @@ var $c225be5472ba393a$export$2e2bcd8739ae039 = $c225be5472ba393a$var$Highlighted
 
 
 
-const $7e6d6d75bd13cce5$export$d653589df987fd93 = (0, ($parcel$interopDefault($jQDcL$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 $7e6d6d75bd13cce5$export$dd2ac23a70f320dd = (0, ($parcel$interopDefault($jQDcL$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 $7e6d6d75bd13cce5$export$2dabfbe763cc7a4 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).h2`
   font-weight: 600;
   font-size: 16px;
   text-align: center;
-  width: 300px;
+  max-width: 300px;
 `;
 const $7e6d6d75bd13cce5$export$6ed6e36e1b456f96 = (0, ($parcel$interopDefault($jQDcL$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 $7e6d6d75bd13cce5$export$5f759de1870a3e41 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
   display: flex;
@@ -6324,7 +6342,7 @@ const $7e6d6d75bd13cce5$export$d7f3ab4b3437ad97 = (0, ($parcel$interopDefault($j
 const $7e6d6d75bd13cce5$export$c22678f0e7b404e0 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).p`
   font-size: 12px;
   font-weight: 400;
-  width: 300px;
+  max-width: 300px;
   text-align: center;
 `;
 
@@ -6399,11 +6417,14 @@ const $e8ac63718934c648$export$c7df1b15b59b1df2 = /*#__PURE__*/ (0, $jQDcL$react
 });
 
 
-const $23c39d8ee81f4f67$var$InvitationTile = ({ orientation: orientation  })=>{
+
+
+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)(window.location.href);
+            await (0, $0bea101d3ef852fb$export$2e2bcd8739ae039)(options.sharedURL || window.location.href);
             (0, $84c6cbcbb594d072$export$3a57e165650c636f)(t("copyLink.copied"), {
                 duration: 2000
             });
@@ -6414,37 +6435,37 @@ const $23c39d8ee81f4f67$var$InvitationTile = ({ orientation: orientation  })=>{
             });
         }
     };
-    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7e6d6d75bd13cce5$export$d653589df987fd93), {
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $7e6d6d75bd13cce5$export$dd2ac23a70f320dd), {
+        show: show,
+        width: width,
+        height: height,
         orientation: orientation,
-        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $7e6d6d75bd13cce5$export$dd2ac23a70f320dd), {
-            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: 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")
-                })
-            ]
-        })
+        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;
@@ -6523,6 +6544,7 @@ const $88b23a8428e67b66$var$Video = ()=>{
     });
     const { streams: streams , highlightedTile: highlightedTile , dispatch: dispatch  } = (0, $3f6e908c45fcc5b3$export$b5633a7cfbe42d9f)();
     const [containerWidth, containerHeight] = (0, $56e1e7a85d8bf4bb$export$2b86bedf890eab8)(remoteTilesContainerRef.current);
+    const showInvitation = streams.length < 1 && !highlightedTile && containerWidth > 0;
     (0, $jQDcL$react.useEffect)(()=>{
         if (options.GDPRDisclaimer) (0, $537dcc6df507dc4a$export$2e2bcd8739ae039)({
             message: "Para mejorar la calidad de nuestro servicio, esta llamada ser\xe1 grabada",
@@ -6533,9 +6555,10 @@ const $88b23a8428e67b66$var$Video = ()=>{
         options.GDPRDisclaimer
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
-        if (remoteTilesContainerRef?.current && containerWidth && containerHeight) {
+        if (remoteTilesContainerRef?.current) {
             const ratio = 1;
-            const numberOfTiles = remoteTilesContainerRef.current.childElementCount;
+            let numberOfTiles = remoteTilesContainerRef.current.childElementCount;
+            if (!showInvitation) numberOfTiles -= 1;
             const videoWidth = (0, $7de6ded9bdec6f42$export$4d43009c33055644)({
                 availableWidth: containerWidth - 16 * (numberOfTiles - 1),
                 availableHeight: containerHeight - 16 * (numberOfTiles - 1),
@@ -6553,7 +6576,8 @@ const $88b23a8428e67b66$var$Video = ()=>{
         containerWidth,
         containerHeight,
         streams.length,
-        highlightedTile
+        highlightedTile,
+        showInvitation, 
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
         if (userInteractionTriggered) {
@@ -6707,7 +6731,10 @@ const $88b23a8428e67b66$var$Video = ()=>{
                             height: tileSize.height
                         }, stream.id);
                     }),
-                    streams.length < 1 && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $23c39d8ee81f4f67$export$2e2bcd8739ae039), {
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $23c39d8ee81f4f67$export$2e2bcd8739ae039), {
+                        show: showInvitation,
+                        width: `${tileSize.width}px`,
+                        height: `${tileSize.height}px`,
                         orientation: orientation
                     })
                 ]
@@ -9076,38 +9103,38 @@ const $8a52c9358bc52b86$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",
@@ -10000,7 +10027,7 @@ const $c3d5253d9d597eb5$var$audioSource = new Blob([
 const $c3d5253d9d597eb5$var$audioURL = URL.createObjectURL($c3d5253d9d597eb5$var$audioSource);
 let $c3d5253d9d597eb5$var$mediaResult = undefined;
 const $c3d5253d9d597eb5$export$716eeec86fd18da7 = ()=>{
-    $c3d5253d9d597eb5$var$mediaResult?.getAudioTracks().forEach((track)=>{
+    $c3d5253d9d597eb5$var$mediaResult?.getTracks().forEach((track)=>{
         track.stop();
     });
     $c3d5253d9d597eb5$var$mediaResult = undefined;
@@ -10012,7 +10039,8 @@ const $c3d5253d9d597eb5$export$494039379563c94d = async ()=>{
     } catch (err) {
         console.warn("User interaction is required, asking audio GUM");
         $c3d5253d9d597eb5$var$mediaResult = await navigator.mediaDevices.getUserMedia({
-            audio: true
+            audio: true,
+            video: true
         });
     }
 };
@@ -10335,7 +10363,6 @@ window.hj = window.hj || function() {
 
 
 
-
 const $d9d258dccafa26ef$var$GreetingSnapcallLogo = ()=>{
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
         width: "72",
@@ -10567,90 +10594,87 @@ const $5fd6e456b33aeaa7$export$d4a1a815e49dfefd = (0, ($parcel$interopDefault($j
 
 
 
-const $3305ca02e86dabd1$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 $3305ca02e86dabd1$var$videoTrack;
+
 const $3305ca02e86dabd1$var$GreetingView = ({ onGreetingDone: onGreetingDone  })=>{
     const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
-    const mainContainerRef = (0, $jQDcL$react.useRef)(null);
-    const videoRef = (0, $jQDcL$react.useRef)(null);
+    const [mainContainerRef, { width: width , height: height  }] = (0, $56e1e7a85d8bf4bb$export$e295b0c537d32d7d)();
     const inputRef = (0, $jQDcL$react.useRef)(null);
-    const stream = (0, $jQDcL$react.useMemo)(()=>new MediaStream(), []);
-    const [webcamEnabled, setWebcamEnabled] = (0, $jQDcL$react.useState)(false);
+    const videoRef = (0, $jQDcL$react.useRef)(null);
+    const [videoTrack1, setVideoTrack] = (0, $jQDcL$react.useState)(undefined);
     const [micEnabled, setMicEnabled] = (0, $jQDcL$react.useState)(false);
     const [joining, setJoining] = (0, $jQDcL$react.useState)(false);
-    const [firstRender, setFirstRender] = (0, $jQDcL$react.useState)(true);
-    const [width, height] = (0, $56e1e7a85d8bf4bb$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, $jQDcL$react.useCallback)(()=>{
-        if (!webcamEnabled) $3305ca02e86dabd1$var$getUserMedia("webcam").then((videoStream)=>{
-            if (!videoStream || !videoRef.current) return;
-            $3305ca02e86dabd1$var$videoTrack = videoStream.getVideoTracks()[0];
-            stream.addTrack($3305ca02e86dabd1$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, $jQDcL$react.useCallback)(async ()=>{
+        if (!videoTrack1) await getUserMedia({
+            video: true
         });
         else {
-            if ($3305ca02e86dabd1$var$videoTrack) stream.removeTrack($3305ca02e86dabd1$var$videoTrack);
-            $3305ca02e86dabd1$var$videoTrack = undefined;
-            setWebcamEnabled(false);
+            videoTrack1.stop();
+            setVideoTrack(undefined);
         }
     }, [
-        webcamEnabled,
-        stream
+        videoTrack1
     ]);
     const onMicrophoneClick = (0, $jQDcL$react.useCallback)(async ()=>{
-        if (!micEnabled) $3305ca02e86dabd1$var$getUserMedia("microphone").then(()=>{
-            if (!videoRef.current) return;
-            setMicEnabled(true);
+        if (!micEnabled) await getUserMedia({
+            audio: true
         });
         else setMicEnabled(false);
     }, [
         micEnabled
     ]);
     (0, $jQDcL$react.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, $jQDcL$react.useEffect)(()=>{
+        getUserMedia({
+            audio: true,
+            video: true
+        });
+    }, []);
     if (joining === true) return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5fd6e456b33aeaa7$export$d4a1a815e49dfefd), {
         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("img", {
-            src: `${"https://stream-assets.snapcall.io/v1.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, $jQDcL$reactjsxruntime.jsxs)((0, $5fd6e456b33aeaa7$export$d653589df987fd93), {
         ref: mainContainerRef,
         children: [