@snapcall/stream-ui 1.8.1 → 1.9.0

package/dist/stream-ui.esm.js

@@ -449,11 +449,6 @@ const $18fb8799f38eb407$export$84584c2a98eb6753 = {
             decline: "Decline",
             you: "You"
         },
-        invite: {
-            title: "Share link to start a conversation",
-            copy: "Copy",
-            description: "You are currently the only participant. Invite people to start the conversation."
-        },
         greeting: {
             mainTitle: "Welcome to SnapCall",
             sideTitle: "Are you ready to join?",
@@ -594,11 +589,6 @@ const $c5472fb74fa04782$export$acb2a88f7d552ebf = {
             decline: "D\xe9cliner",
             you: "Vous"
         },
-        invite: {
-            title: "Partagez le lien pour commencer une conversation",
-            copy: "Copier",
-            description: "Vous \xeates actuellement le seul participant. Inviter des personnes pour commencer la conversation."
-        },
         greeting: {
             mainTitle: "Bienvenue sur SnapCall",
             sideTitle: "Pr\xeat \xe0 rejoindre ?",
@@ -743,11 +733,6 @@ const $b7790fb9e48df5c4$export$3486a10f30cf1ee4 = {
             decline: "Declinare",
             you: "Voi"
         },
-        invite: {
-            title: "Condividi link per avviare una conversazione",
-            copy: "Copiare",
-            description: "Attualmente sei l'unico partecipante. Invita le persone ad iniziare la conversazione."
-        },
         greeting: {
             mainTitle: "Benvenuto a SnapCall",
             sideTitle: "Sei pronto per unirti?",
@@ -6259,104 +6244,8 @@ var $b496fc6f0d99c06d$export$2e2bcd8739ae039 = $b496fc6f0d99c06d$var$Highlighted
 
 
 
-const $b56218b5a57cb77c$export$dd2ac23a70f320dd = (0, $3Sbms$styledcomponents).div`
-  display: ${({ show: show  })=>show ? "flex" : "none"};
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  width: ${({ width: width  })=>width};
-  height: ${({ height: height  })=>height};
-  background-color: ${({ theme: theme  })=>theme.streamTileBackgroundColor};
-  border: 2px solid ${({ theme: theme  })=>theme.streamTileBorderColor};
-  border-radius: 20px;
-  box-sizing: border-box;
-  color: #fff;
-  font-family: Lato;
-  padding: 20px;
-`;
-const $b56218b5a57cb77c$export$2dabfbe763cc7a4 = (0, $3Sbms$styledcomponents).h2`
-  font-weight: 600;
-  font-size: 16px;
-  text-align: center;
-  max-width: 300px;
-`;
-const $b56218b5a57cb77c$export$6ed6e36e1b456f96 = (0, $3Sbms$styledcomponents).div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: 50px;
-  width: 100%;
-  max-width: 300px;
-  background-color: ${({ theme: theme  })=>theme.popupBackgroundSecondaryColor};
-  border: 1px solid ${({ theme: theme  })=>theme.popupBorderColor};
-  border-radius: 15px;
-  padding: 0 10px;
-  box-sizing: border-box;
-`;
-const $b56218b5a57cb77c$export$5f759de1870a3e41 = (0, $3Sbms$styledcomponents).div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: 5px;
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-`;
-const $b56218b5a57cb77c$export$c6b180e8ec79154e = (0, $3Sbms$styledcomponents).p`
-  color: #242324;
-  font-size: 15px;
-  font-weight: 600;
-  width: 100%;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  line-height: 15px;
-`;
-const $b56218b5a57cb77c$export$d7f3ab4b3437ad97 = (0, $3Sbms$styledcomponents).button`
-  position: absolute;
-  right: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: ${({ theme: theme  })=>theme.primaryColor};
-  border: none;
-  border-radius: 8px;
-  height: 32px;
-  color: #fff;
-  font-weight: 600;
-  font-size: 16px;
-  padding: 8px 12px;
-  line-height: 18px;
-`;
-const $b56218b5a57cb77c$export$c22678f0e7b404e0 = (0, $3Sbms$styledcomponents).p`
-  font-size: 12px;
-  font-weight: 400;
-  max-width: 300px;
-  text-align: center;
-`;
-
-
-
-
 
 
-const $1ec1d06e0a21fdaa$var$Link = ({ color: color  })=>{
-    return /*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1.004 1.004 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1.004 1.004 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1.004 1.004 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.471 2.471 0 0 1 0 3.5l-3.88 3.88a1.002 1.002 0 0 0 .325 1.639.999.999 0 0 0 1.095-.219l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1.004 1.004 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z",
-            fill: color || "#fff"
-        })
-    });
-};
-var $1ec1d06e0a21fdaa$export$2e2bcd8739ae039 = $1ec1d06e0a21fdaa$var$Link;
 
 
 
@@ -6409,67 +6298,6 @@ const $93a0377c243d965e$export$c7df1b15b59b1df2 = /*#__PURE__*/ (0, $3Sbms$jsxs)
 });
 
 
-
-
-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)(options.sharedURL || window.location.href);
-            (0, $a5146f9062d7bf28$export$3a57e165650c636f)(t("copyLink.copied"), {
-                duration: 2000
-            });
-        } catch (copyError) {
-            console.warn(copyError);
-            (0, $a5146f9062d7bf28$export$3a57e165650c636f)(t("copyLink.error"), {
-                icon: (0, $93a0377c243d965e$export$edf27be85e5f6da0)
-            });
-        }
-    };
-    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $b56218b5a57cb77c$export$dd2ac23a70f320dd), {
-        show: show,
-        width: width,
-        height: height,
-        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: 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;
-
-
-
-
-
-
-
-
-
 const $b8963bf62cf5b984$var$Container = (0, $3Sbms$styledcomponents).div`
   background-color: rgba(45, 45, 45, 0.75);
   display: flex;
@@ -6536,7 +6364,6 @@ 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 = !options.audioTiles && 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",
@@ -6550,7 +6377,6 @@ const $cdab47bb8796991e$var$Video = ()=>{
         if (remoteTilesContainerRef?.current) {
             const ratio = 1;
             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),
@@ -6568,8 +6394,7 @@ const $cdab47bb8796991e$var$Video = ()=>{
         containerWidth,
         containerHeight,
         streams.length,
-        highlightedTile,
-        showInvitation, 
+        highlightedTile
     ]);
     (0, $3Sbms$useEffect)(()=>{
         if (userInteractionTriggered) {
@@ -6723,12 +6548,6 @@ const $cdab47bb8796991e$var$Video = ()=>{
                             width: tileSize.width,
                             height: tileSize.height
                         }, stream.id);
-                    }),
-                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f0b0b18fe6c6ae77$export$2e2bcd8739ae039), {
-                        show: showInvitation,
-                        width: `${tileSize.width}px`,
-                        height: `${tileSize.height}px`,
-                        orientation: orientation
                     })
                 ]
             })
@@ -6860,6 +6679,22 @@ var $a2d206a438475087$export$2e2bcd8739ae039 = $a2d206a438475087$var$YoutubeIcon
 
 
 
+const $1ec1d06e0a21fdaa$var$Link = ({ color: color  })=>{
+    return /*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+            d: "m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1.004 1.004 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1.004 1.004 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1.004 1.004 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.471 2.471 0 0 1 0 3.5l-3.88 3.88a1.002 1.002 0 0 0 .325 1.639.999.999 0 0 0 1.095-.219l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1.004 1.004 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z",
+            fill: color || "#fff"
+        })
+    });
+};
+var $1ec1d06e0a21fdaa$export$2e2bcd8739ae039 = $1ec1d06e0a21fdaa$var$Link;
+
+
 
 
 
@@ -8701,6 +8536,20 @@ const $554f3984e3212196$export$5e3f251c730829 = (0, $3Sbms$styledcomponents).div
 
 
 
+
+function $5004d610b358fe2c$export$bc98e171e8c82a3d(title) {
+    (0, $3Sbms$useEffect)(()=>{
+        const prevTitle = document.title;
+        if (title) document.title = title;
+        return ()=>{
+            document.title = prevTitle;
+        };
+    }, [
+        title
+    ]);
+}
+
+
 const $98933bbc579a3e66$export$a1eac7fdbc2db4af = "linkshare_sent";
 const $98933bbc579a3e66$var$sendLinkNotification = (data, t)=>{
     let notificationStatusText = new URL(data.url).hostname;
@@ -8724,7 +8573,7 @@ const $98933bbc579a3e66$var$sendLinkNotification = (data, t)=>{
             }
         },
         ellipsis: true,
-        duration: 10000
+        duration: 15000
     });
     (0, $f81bfa56534026c2$export$e9785ae652b3a722)({
         title: data.title,
@@ -8766,22 +8615,45 @@ const $98933bbc579a3e66$var$LinksharePopup = ()=>{
     const themeContext = (0, $3Sbms$useContext)((0, $3Sbms$ThemeContext));
     const linksharePopupRef = (0, $3Sbms$useRef)(null);
     const linkshareInputRef = (0, $3Sbms$useRef)(null);
+    const [pendingShareLink, setPendingShareLink] = (0, $3Sbms$useState)([]);
+    const [title, setTitle] = (0, $3Sbms$useState)();
     const [linkshareInputValue, setLinkshareInputValue] = (0, $3Sbms$useState)("");
     const [errorMessage, setErrorMessage] = (0, $3Sbms$useState)(null);
     const [status, setStatus] = (0, $3Sbms$useState)("waiting");
     const { isLinksharePopupVisible: isLinksharePopupVisible , setIsLinksharePopupVisible: setIsLinksharePopupVisible , orientation: orientation , options: options  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
+    (0, $5004d610b358fe2c$export$bc98e171e8c82a3d)(title);
     const desktop = orientation === "landscape";
+    const onVisibilitychange = (0, $3Sbms$useCallback)(()=>{
+        if (!document.hidden) {
+            pendingShareLink.forEach((data)=>{
+                $98933bbc579a3e66$var$sendLinkNotification(data, t);
+            });
+            setPendingShareLink([]);
+            setTitle(undefined);
+        }
+    }, [
+        pendingShareLink,
+        t
+    ]);
     const onCustomMessage = (0, $3Sbms$useCallback)((event)=>{
         const { type: type , data: data  } = event.detail.event;
-        if (type === $98933bbc579a3e66$export$a1eac7fdbc2db4af) $98933bbc579a3e66$var$sendLinkNotification(data, t);
-        else if (type === "paypal_invoice") {
-            const sender = streams.find((stream)=>stream.id === event.detail.peerId);
-            $98933bbc579a3e66$var$sendPaypalInvoiceNotification(sender?.profile?.name, data.url, t);
-        }
+        const sender = streams.find((stream)=>stream.id === event.detail?.peerId);
+        if (type === $98933bbc579a3e66$export$a1eac7fdbc2db4af) {
+            if (!document.hidden) $98933bbc579a3e66$var$sendLinkNotification(data, t);
+            else {
+                const name = sender?.profile.name?.toLowerCase() !== "user" ? sender?.profile.name : undefined;
+                setPendingShareLink([
+                    ...pendingShareLink,
+                    data
+                ]);
+                setTitle(`${name || "Someone"} shared a link`);
+            }
+        } else if (type === "paypal_invoice") $98933bbc579a3e66$var$sendPaypalInvoiceNotification(sender?.profile?.name, data.url, t);
     }, [
         streams,
-        t
+        t,
+        pendingShareLink
     ]);
     const onShareClick = async (event)=>{
         event.preventDefault();
@@ -8836,12 +8708,15 @@ const $98933bbc579a3e66$var$LinksharePopup = ()=>{
     };
     const onCloseClick = ()=>setIsLinksharePopupVisible(false);
     (0, $3Sbms$useEffect)(()=>{
+        window.addEventListener("visibilitychange", onVisibilitychange);
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("customMessage", onCustomMessage);
         return ()=>{
+            window.removeEventListener("visibilitychange", onVisibilitychange);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("customMessage", onCustomMessage);
         };
     }, [
-        onCustomMessage
+        onCustomMessage,
+        onVisibilitychange
     ]);
     const onPopupTransitionEnd = ()=>{
         if (isLinksharePopupVisible) linkshareInputRef.current?.focus();
@@ -9357,10 +9232,12 @@ var $df41bfe6da05853a$export$2e2bcd8739ae039 = $df41bfe6da05853a$var$EndView;
 
 
 
+
 const $805d92fa41e6e1b0$var$connected = new Audio("https://cdn.snapcall.io/stream/connected.mp3");
 const $805d92fa41e6e1b0$var$disconnected = new Audio("https://cdn.snapcall.io/stream/disconnected.mp3");
 const $805d92fa41e6e1b0$var$userConnected = new Audio("https://cdn.snapcall.io/stream/user-connected.mp3");
 const $805d92fa41e6e1b0$var$userDisconnected = new Audio("https://cdn.snapcall.io/stream/user-disconnected.mp3");
+const $805d92fa41e6e1b0$var$linkReceived = new Audio("https://cdn.snapcall.io/stream/link-received.mp3");
 const $805d92fa41e6e1b0$var$Sounds = ()=>{
     const { userInteractionTriggered: userInteractionTriggered  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const onEnterRoom = async ()=>{
@@ -9393,14 +9270,24 @@ const $805d92fa41e6e1b0$var$Sounds = ()=>{
             console.warn("Couldn't play disconnected sound");
         }
     };
+    const onCustomMessage = async (event)=>{
+        const { type: type  } = event.detail.event;
+        if (type === (0, $98933bbc579a3e66$export$a1eac7fdbc2db4af)) try {
+            await $805d92fa41e6e1b0$var$linkReceived.play();
+        } catch (disconnectedPlayError) {
+            console.warn("Couldn't play link-received sound");
+        }
+    };
     (0, $3Sbms$useEffect)(()=>{
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("newPeer", onNewPeer);
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("peerClosed", onPeerClosed);
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("leaveRoom", onLeaveRoom);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("customMessage", onCustomMessage);
         return ()=>{
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("newPeer", onNewPeer);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("peerClosed", onPeerClosed);
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("leaveRoom", onLeaveRoom);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("customMessage", onCustomMessage);
         };
     }, []);
     (0, $3Sbms$useEffect)(()=>{