@snapcall/stream-ui 1.44.1 → 1.44.2

package/dist/stream-ui.esm.js

@@ -4,7 +4,7 @@ import {QueryClient as $3Sbms$QueryClient, QueryClientProvider as $3Sbms$QueryCl
 import {I18nextProvider as $3Sbms$I18nextProvider, initReactI18next as $3Sbms$initReactI18next, useTranslation as $3Sbms$useTranslation, Trans as $3Sbms$Trans} from "react-i18next";
 import {createInstance as $3Sbms$createInstance} from "i18next";
 import {toast as $3Sbms$toast, useToast as $3Sbms$useToast, useDialogState as $3Sbms$useDialogState, ToastAction as $3Sbms$ToastAction, TooltipProvider as $3Sbms$TooltipProvider, Toaster as $3Sbms$Toaster, DropdownMenu as $3Sbms$DropdownMenu, DropdownMenuTrigger as $3Sbms$DropdownMenuTrigger, Button as $3Sbms$Button, DropdownMenuPortal as $3Sbms$DropdownMenuPortal, DropdownMenuContent as $3Sbms$DropdownMenuContent, DropdownMenuItem as $3Sbms$DropdownMenuItem, Tooltip as $3Sbms$Tooltip, TooltipTrigger as $3Sbms$TooltipTrigger, TooltipContent as $3Sbms$TooltipContent, Select as $3Sbms$Select, SelectTrigger as $3Sbms$SelectTrigger, SelectValue as $3Sbms$SelectValue, SelectContent as $3Sbms$SelectContent, SelectGroup as $3Sbms$SelectGroup, SelectItem as $3Sbms$SelectItem, Dialog as $3Sbms$Dialog, DialogContent as $3Sbms$DialogContent, DialogHeader as $3Sbms$DialogHeader, DialogTitle as $3Sbms$DialogTitle, Tabs as $3Sbms$Tabs, TabsList as $3Sbms$TabsList, TabsTrigger as $3Sbms$TabsTrigger, TabsContent as $3Sbms$TabsContent, Separator as $3Sbms$Separator, Input as $3Sbms$Input, CreatableSelect as $3Sbms$CreatableSelect, Textarea as $3Sbms$Textarea, DialogDescription as $3Sbms$DialogDescription, DialogFooter as $3Sbms$DialogFooter, AlertDialog as $3Sbms$AlertDialog, Sheet as $3Sbms$Sheet, DialogTrigger as $3Sbms$DialogTrigger, AlertDialogTrigger as $3Sbms$AlertDialogTrigger, SheetTrigger as $3Sbms$SheetTrigger, AlertDialogHeader as $3Sbms$AlertDialogHeader, SheetHeader as $3Sbms$SheetHeader, SheetClose as $3Sbms$SheetClose, AlertDialogContent as $3Sbms$AlertDialogContent, SheetContent as $3Sbms$SheetContent, AlertDialogTitle as $3Sbms$AlertDialogTitle, SheetTitle as $3Sbms$SheetTitle, AlertDialogDescription as $3Sbms$AlertDialogDescription, SheetDescription as $3Sbms$SheetDescription, Avatar as $3Sbms$Avatar, AlertDialogFooter as $3Sbms$AlertDialogFooter, AlertDialogCancel as $3Sbms$AlertDialogCancel, AlertDialogAction as $3Sbms$AlertDialogAction, DropdownMenuSeparator as $3Sbms$DropdownMenuSeparator, Banner as $3Sbms$Banner, Popover as $3Sbms$Popover, PopoverTrigger as $3Sbms$PopoverTrigger, PopoverContent as $3Sbms$PopoverContent, PopoverArrow as $3Sbms$PopoverArrow, MediaCard as $3Sbms$MediaCard, Skeleton as $3Sbms$Skeleton} from "@snapcall/design-system";
-import {useRef as $3Sbms$useRef, useState as $3Sbms$useState, useCallback as $3Sbms$useCallback, useEffect as $3Sbms$useEffect, useContext as $3Sbms$useContext, useMemo as $3Sbms$useMemo, cloneElement as $3Sbms$cloneElement, createContext as $3Sbms$createContext, useReducer as $3Sbms$useReducer, Fragment as $3Sbms$Fragment1, useLayoutEffect as $3Sbms$useLayoutEffect, forwardRef as $3Sbms$forwardRef} from "react";
+import {useRef as $3Sbms$useRef, useState as $3Sbms$useState, useCallback as $3Sbms$useCallback, useEffect as $3Sbms$useEffect, useContext as $3Sbms$useContext, useMemo as $3Sbms$useMemo, cloneElement as $3Sbms$cloneElement, createContext as $3Sbms$createContext, useReducer as $3Sbms$useReducer, useLayoutEffect as $3Sbms$useLayoutEffect, Fragment as $3Sbms$Fragment1, forwardRef as $3Sbms$forwardRef} from "react";
 import $3Sbms$classnames from "classnames";
 import "inobounce";
 import {RecordIcon as $3Sbms$RecordIcon, InfoCircleIcon as $3Sbms$InfoCircleIcon, Speedometer4Icon as $3Sbms$Speedometer4Icon, Copy7Icon as $3Sbms$Copy7Icon, LinkExternal1Icon as $3Sbms$LinkExternal1Icon, QrCode1Icon as $3Sbms$QrCode1Icon, UserPlus1Icon as $3Sbms$UserPlus1Icon, XCloseIcon as $3Sbms$XCloseIcon, Settings1Icon as $3Sbms$Settings1Icon, Menu1Icon as $3Sbms$Menu1Icon, PhoneCall1Icon as $3Sbms$PhoneCall1Icon, VideoRecorderIcon as $3Sbms$VideoRecorderIcon, Recording2Icon as $3Sbms$Recording2Icon, Monitor2Icon as $3Sbms$Monitor2Icon, Camera2Icon as $3Sbms$Camera2Icon, Copy5Icon as $3Sbms$Copy5Icon, CheckIcon as $3Sbms$CheckIcon, XCircleIcon as $3Sbms$XCircleIcon, Send3Icon as $3Sbms$Send3Icon, AlertTriangleIcon as $3Sbms$AlertTriangleIcon, CopyIcon as $3Sbms$CopyIcon, Link1Icon as $3Sbms$Link1Icon, VolumeMaxIcon as $3Sbms$VolumeMaxIcon, Settings3Icon as $3Sbms$Settings3Icon, UserSquareIcon as $3Sbms$UserSquareIcon, Recording3Icon as $3Sbms$Recording3Icon, ArrowLeftIcon as $3Sbms$ArrowLeftIcon, HelpCircleIcon as $3Sbms$HelpCircleIcon, SpinnerIcon as $3Sbms$SpinnerIcon, User1Icon as $3Sbms$User1Icon, Microphone1Icon as $3Sbms$Microphone1Icon, MicrophoneOff1Icon as $3Sbms$MicrophoneOff1Icon, VideoRecorderOffIcon as $3Sbms$VideoRecorderOffIcon, CameraPlusIcon as $3Sbms$CameraPlusIcon, CursorBoxIcon as $3Sbms$CursorBoxIcon, Minimize1Icon as $3Sbms$Minimize1Icon, Maximize1Icon as $3Sbms$Maximize1Icon, CheckCircleIcon as $3Sbms$CheckCircleIcon, Download1Icon as $3Sbms$Download1Icon, ScreensharingIcon as $3Sbms$ScreensharingIcon, RefreshCcw2Icon as $3Sbms$RefreshCcw2Icon, DotsVerticalIcon as $3Sbms$DotsVerticalIcon, YoutubeIcon as $3Sbms$YoutubeIcon, Upload3Icon as $3Sbms$Upload3Icon, LogIn2Icon as $3Sbms$LogIn2Icon, ChevronUpIcon as $3Sbms$ChevronUpIcon, ChevronDownIcon as $3Sbms$ChevronDownIcon, FlipBackwardIcon as $3Sbms$FlipBackwardIcon, ArrowUpRightIcon as $3Sbms$ArrowUpRightIcon, Star1Icon as $3Sbms$Star1Icon, ImageXIcon as $3Sbms$ImageXIcon, AnnotationInfoIcon as $3Sbms$AnnotationInfoIcon, Upload1Icon as $3Sbms$Upload1Icon, DotsHorizontalIcon as $3Sbms$DotsHorizontalIcon, RefreshCw3Icon as $3Sbms$RefreshCw3Icon, Camera1Icon as $3Sbms$Camera1Icon, File2Icon as $3Sbms$File2Icon, PlayIcon as $3Sbms$PlayIcon, FileQuestion3Icon as $3Sbms$FileQuestion3Icon, QrCodeIcon as $3Sbms$QrCodeIcon, MarkerPin4Icon as $3Sbms$MarkerPin4Icon, Edit5Icon as $3Sbms$Edit5Icon, UserCircleIcon as $3Sbms$UserCircleIcon, PlusCircleIcon as $3Sbms$PlusCircleIcon, Trash3Icon as $3Sbms$Trash3Icon, TrashIcon as $3Sbms$TrashIcon} from "@snapcall/design-system/icons";
@@ -16,7 +16,7 @@ import {Buffer as $3Sbms$Buffer} from "buffer";
 import "./timer.43cfcbcc.js";
 import {Form as $3Sbms$Form, FormField as $3Sbms$FormField, FormItem as $3Sbms$FormItem, FormLabel as $3Sbms$FormLabel, FormControl as $3Sbms$FormControl, FormMessage as $3Sbms$FormMessage} from "@snapcall/design-system/form";
 import {useForm as $3Sbms$useForm} from "react-hook-form";
-import {toCanvas as $3Sbms$toCanvas, toDataURL as $3Sbms$toDataURL} from "qrcode";
+import {toDataURL as $3Sbms$toDataURL} from "qrcode";
 import $3Sbms$mixpanelbrowsersrcloadersloadermodulecore from "mixpanel-browser/src/loaders/loader-module-core";
 import {createPortal as $3Sbms$createPortal} from "react-dom";
 import $3Sbms$sumsubwebsdkreact from "@sumsub/websdk-react";
@@ -6000,10 +6000,64 @@ var $16d11fc0880587fd$export$2e2bcd8739ae039 = $16d11fc0880587fd$var$QuickConnec
 
 
 
+const $af23c74942bdcae7$export$2b86bedf890eab8 = (element)=>{
+    const [size, setSize] = (0, $3Sbms$useState)([
+        0,
+        0
+    ]);
+    (0, $3Sbms$useLayoutEffect)(()=>{
+        const updateSize = ()=>setSize([
+                element?.offsetWidth || 0,
+                element?.offsetHeight || 0
+            ]);
+        if (element) {
+            const observer = new ResizeObserver(updateSize);
+            observer.observe(element);
+            return ()=>observer.unobserve(element);
+        }
+    }, [
+        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
+    ];
+}
+
+
+
 const $e60b5ecf8ea46b91$export$ec0ae6f1b249c474 = ({ state: state })=>{
     const { t: t } = (0, $3Sbms$useTranslation)();
     const { toast: toast } = (0, $3Sbms$useToast)();
     const { options: options } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const [qrCodeDataUrl, setQrCodeDataUrl] = (0, $3Sbms$useState)('');
+    const [QRCodeContainerRef, { width: QRCodeContainerWidth }] = (0, $af23c74942bdcae7$export$e295b0c537d32d7d)();
     const qrCodeURL = (0, $3Sbms$useMemo)(()=>{
         let url = new URL(window.location.href);
         if (options.sharedURL) try {
@@ -6015,6 +6069,20 @@ const $e60b5ecf8ea46b91$export$ec0ae6f1b249c474 = ({ state: state })=>{
     }, [
         options.sharedURL
     ]);
+    (0, $3Sbms$useEffect)(()=>{
+        const getQrCodeDataUrl = async ()=>{
+            const dataUrl = await $3Sbms$toDataURL(qrCodeURL, {
+                width: QRCodeContainerWidth > 300 ? 300 : QRCodeContainerWidth,
+                errorCorrectionLevel: 'Q',
+                margin: 0
+            });
+            setQrCodeDataUrl(dataUrl);
+        };
+        getQrCodeDataUrl();
+    }, [
+        QRCodeContainerWidth,
+        qrCodeURL
+    ]);
     const onCopyCallLinkClick = async ()=>{
         try {
             await (0, $57162bcada7d6f66$export$2e2bcd8739ae039)(qrCodeURL || window.location.href);
@@ -6054,17 +6122,13 @@ const $e60b5ecf8ea46b91$export$ec0ae6f1b249c474 = ({ state: state })=>{
                     ]
                 }),
                 /*#__PURE__*/ (0, $3Sbms$jsxs)("div", {
+                    ref: QRCodeContainerRef,
                     className: "flex w-full p-6 bg-gray-25 border border-gray-200 rounded-lg aspect-square relative",
                     children: [
-                        /*#__PURE__*/ (0, $3Sbms$jsx)("canvas", {
+                        /*#__PURE__*/ (0, $3Sbms$jsx)("img", {
                             className: "max-w-full max-h-full",
-                            ref: (node)=>{
-                                if (node) $3Sbms$toCanvas(node, qrCodeURL, {
-                                    errorCorrectionLevel: 'M',
-                                    scale: 15,
-                                    margin: 0
-                                });
-                            }
+                            src: qrCodeDataUrl,
+                            alt: ""
                         }),
                         /*#__PURE__*/ (0, $3Sbms$jsx)((0, $16d11fc0880587fd$export$2e2bcd8739ae039), {
                             className: "absolute inset-0 m-auto"
@@ -7151,57 +7215,6 @@ const $1299919e02395903$export$c197ce1a352372f = ({ state: state })=>{
 
 
 
-const $af23c74942bdcae7$export$2b86bedf890eab8 = (element)=>{
-    const [size, setSize] = (0, $3Sbms$useState)([
-        0,
-        0
-    ]);
-    (0, $3Sbms$useLayoutEffect)(()=>{
-        const updateSize = ()=>setSize([
-                element?.offsetWidth || 0,
-                element?.offsetHeight || 0
-            ]);
-        if (element) {
-            const observer = new ResizeObserver(updateSize);
-            observer.observe(element);
-            return ()=>observer.unobserve(element);
-        }
-    }, [
-        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
-    ];
-}
-
-
 const $3942a3fa4ff47d94$export$b99021c5b7713297 = ()=>{
     const originalWidth = (0, $3Sbms$useRef)(0);
     const [containerRef, { width: containerWidth }] = (0, $af23c74942bdcae7$export$e295b0c537d32d7d)();

package/dist/stream-ui.js

@@ -6006,10 +6006,64 @@ var $8745dbdbe55f5ff3$export$2e2bcd8739ae039 = $8745dbdbe55f5ff3$var$QuickConnec
 
 
 
+const $56e1e7a85d8bf4bb$export$2b86bedf890eab8 = (element)=>{
+    const [size, setSize] = (0, $jQDcL$react.useState)([
+        0,
+        0
+    ]);
+    (0, $jQDcL$react.useLayoutEffect)(()=>{
+        const updateSize = ()=>setSize([
+                element?.offsetWidth || 0,
+                element?.offsetHeight || 0
+            ]);
+        if (element) {
+            const observer = new ResizeObserver(updateSize);
+            observer.observe(element);
+            return ()=>observer.unobserve(element);
+        }
+    }, [
+        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
+    ];
+}
+
+
+
 const $dacf6d923c304e5f$export$ec0ae6f1b249c474 = ({ state: state })=>{
     const { t: t } = (0, $jQDcL$reacti18next.useTranslation)();
     const { toast: toast } = (0, $jQDcL$snapcalldesignsystem.useToast)();
     const { options: options } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const [qrCodeDataUrl, setQrCodeDataUrl] = (0, $jQDcL$react.useState)('');
+    const [QRCodeContainerRef, { width: QRCodeContainerWidth }] = (0, $56e1e7a85d8bf4bb$export$e295b0c537d32d7d)();
     const qrCodeURL = (0, $jQDcL$react.useMemo)(()=>{
         let url = new URL(window.location.href);
         if (options.sharedURL) try {
@@ -6021,6 +6075,20 @@ const $dacf6d923c304e5f$export$ec0ae6f1b249c474 = ({ state: state })=>{
     }, [
         options.sharedURL
     ]);
+    (0, $jQDcL$react.useEffect)(()=>{
+        const getQrCodeDataUrl = async ()=>{
+            const dataUrl = await $jQDcL$qrcode.toDataURL(qrCodeURL, {
+                width: QRCodeContainerWidth > 300 ? 300 : QRCodeContainerWidth,
+                errorCorrectionLevel: 'Q',
+                margin: 0
+            });
+            setQrCodeDataUrl(dataUrl);
+        };
+        getQrCodeDataUrl();
+    }, [
+        QRCodeContainerWidth,
+        qrCodeURL
+    ]);
     const onCopyCallLinkClick = async ()=>{
         try {
             await (0, $0bea101d3ef852fb$export$2e2bcd8739ae039)(qrCodeURL || window.location.href);
@@ -6060,17 +6128,13 @@ const $dacf6d923c304e5f$export$ec0ae6f1b249c474 = ({ state: state })=>{
                     ]
                 }),
                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                    ref: QRCodeContainerRef,
                     className: "flex w-full p-6 bg-gray-25 border border-gray-200 rounded-lg aspect-square relative",
                     children: [
-                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("canvas", {
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("img", {
                             className: "max-w-full max-h-full",
-                            ref: (node)=>{
-                                if (node) $jQDcL$qrcode.toCanvas(node, qrCodeURL, {
-                                    errorCorrectionLevel: 'M',
-                                    scale: 15,
-                                    margin: 0
-                                });
-                            }
+                            src: qrCodeDataUrl,
+                            alt: ""
                         }),
                         /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $8745dbdbe55f5ff3$export$2e2bcd8739ae039), {
                             className: "absolute inset-0 m-auto"
@@ -7157,57 +7221,6 @@ const $e9d4b4657e98cb84$export$c197ce1a352372f = ({ state: state })=>{
 
 
 
-const $56e1e7a85d8bf4bb$export$2b86bedf890eab8 = (element)=>{
-    const [size, setSize] = (0, $jQDcL$react.useState)([
-        0,
-        0
-    ]);
-    (0, $jQDcL$react.useLayoutEffect)(()=>{
-        const updateSize = ()=>setSize([
-                element?.offsetWidth || 0,
-                element?.offsetHeight || 0
-            ]);
-        if (element) {
-            const observer = new ResizeObserver(updateSize);
-            observer.observe(element);
-            return ()=>observer.unobserve(element);
-        }
-    }, [
-        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
-    ];
-}
-
-
 const $55e2321d8d7b41d6$export$b99021c5b7713297 = ()=>{
     const originalWidth = (0, $jQDcL$react.useRef)(0);
     const [containerRef, { width: containerWidth }] = (0, $56e1e7a85d8bf4bb$export$e295b0c537d32d7d)();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapcall/stream-ui",
-  "version": "1.44.1",
+  "version": "1.44.2",
   "description": "",
   "source": "src/index.tsx",
   "main": "dist/stream-ui.js",