@snapcall/stream-ui 1.10.0 → 1.10.1

package/dist/stream-ui.esm.js

@@ -1,5 +1,5 @@
 import {jsx as $3Sbms$jsx, jsxs as $3Sbms$jsxs, Fragment as $3Sbms$Fragment} from "react/jsx-runtime";
-import {render as $3Sbms$render, createPortal as $3Sbms$createPortal} from "react-dom";
+import {createRoot as $3Sbms$createRoot} from "react-dom/client";
 import $3Sbms$hotjarbrowser from "@hotjar/browser";
 import $3Sbms$reacthottoast, {toast as $3Sbms$toast, Toaster as $3Sbms$Toaster, ToastBar as $3Sbms$ToastBar} from "react-hot-toast";
 import $3Sbms$styledcomponents, {keyframes as $3Sbms$keyframes, ThemeProvider as $3Sbms$ThemeProvider, css as $3Sbms$css, ThemeContext as $3Sbms$ThemeContext, createGlobalStyle as $3Sbms$createGlobalStyle} from "styled-components";
@@ -14,6 +14,7 @@ import {captureException as $3Sbms$captureException, addBreadcrumb as $3Sbms$add
 import {Producer as $3Sbms$Producer} from "mediasoup-client/lib/Producer";
 import {Device as $3Sbms$Device} from "mediasoup-client";
 import {SelfieSegmentation as $3Sbms$SelfieSegmentation} from "@mediapipe/selfie_segmentation";
+import {createPortal as $3Sbms$createPortal} from "react-dom";
 import {toCanvas as $3Sbms$toCanvas} from "qrcode";
 
 
@@ -1496,10 +1497,8 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 }
             };
             peer.producersData.forEach((producer)=>{
-                if (producer.deviceType === "microphone") {
-                    deviceState.microphone.enabled = true;
-                    deviceState.microphone.muted = producer.paused;
-                } else if (producer.deviceType === "screen") deviceState.screenshare.enabled = true;
+                if (producer.deviceType === "microphone") deviceState.microphone.enabled = true;
+                else if (producer.deviceType === "screen") deviceState.screenshare.enabled = true;
                 else if (producer.deviceType === "webcam") deviceState.camera.enabled = true;
             });
             peers.push({
@@ -1608,18 +1607,20 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             if (notification.method === "error") {
                 if (notification.data?.reason === "reached user limit") this.onCriticalError($c31e3fb4360572af$export$818d60b2e626da0c.USER_LIMIT);
             } else if (notification.method === "newPeer") {
-                const { id: id , profile: profile  } = notification.data;
+                const { id: id , profile: profile , muted: muted  } = notification.data;
                 this.peers.set(id, {
                     id: id,
                     peerId: id,
                     profile: profile,
+                    muted: muted,
                     producersData: []
                 });
                 const event = new $c31e3fb4360572af$var$SnapcallEvent("newPeer", {
                     detail: {
                         peerId: id,
                         displayName: profile.name,
-                        profile: profile
+                        profile: profile,
+                        muted: muted
                     }
                 });
                 this.dispatchEvent(event);
@@ -1698,6 +1699,26 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                     }
                 });
                 this.dispatchEvent(event);
+            } else if (notification.method === "mute") {
+                const { peerId: peerId , device: device  } = notification.data;
+                const event = new $c31e3fb4360572af$var$SnapcallEvent("mediaPause", {
+                    detail: {
+                        peerId: peerId,
+                        deviceType: device,
+                        paused: true
+                    }
+                });
+                this.dispatchEvent(event);
+            } else if (notification.method === "unmute") {
+                const { peerId: peerId , device: device  } = notification.data;
+                const event = new $c31e3fb4360572af$var$SnapcallEvent("mediaResume", {
+                    detail: {
+                        peerId: peerId,
+                        deviceType: device,
+                        paused: false
+                    }
+                });
+                this.dispatchEvent(event);
             } else if (notification.method === "requestDeviceResult") {
                 const event = new $c31e3fb4360572af$var$SnapcallEvent(notification.method, {
                     detail: notification.data
@@ -1985,28 +2006,30 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             this.dispatchEvent(event);
         }
     }
-    async muteMicrophone() {
+    muteMicrophone() {
         if (this.micProducer) {
             this.onStopSpeak();
-            this.micProducer?.pause();
-            await this.protoo.request("pauseProducer", {
-                producerId: this.micProducer?.id
-            });
+            this.micProducer.pause();
             this.muted = true;
+            const device = "microphone";
+            this.protoo.notify("mute", {
+                device: device
+            });
             const event = new $c31e3fb4360572af$var$SnapcallEvent("microphoneMute", {
                 detail: {}
             });
             this.dispatchEvent(event);
         }
     }
-    async unMuteMicrophone() {
+    unMuteMicrophone() {
         if (this.micProducer) {
             this.micProducer.resume();
             this.resolvePendingDeviceRequest("microphone", true);
-            await this.protoo.request("resumeProducer", {
-                producerId: this.micProducer.id
-            });
             this.muted = false;
+            const device = "microphone";
+            this.protoo.notify("unmute", {
+                device: device
+            });
             const event = new $c31e3fb4360572af$var$SnapcallEvent("microphoneUnmute", {
                 detail: {}
             });
@@ -2207,6 +2230,11 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             },
             qualityIndex: 2
         };
+        await this.webcamProducer?.replaceTrack?.({
+            track: null
+        }).catch((err)=>{
+            $c31e3fb4360572af$var$log.error("switchCamera", "clean track failed", err);
+        });
         const mediaStream = await this.handleGetUserMediaError("webcam", navigator.mediaDevices.getUserMedia({
             video: {
                 deviceId: {
@@ -2509,6 +2537,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                 deviceType: deviceType
             });
             this.scaleVideoEncodingsParameter();
+            const paused = peer ? peer.muted : false;
             const event = new $c31e3fb4360572af$var$SnapcallEvent("mediaStart", {
                 detail: {
                     peerId: peerId,
@@ -3076,8 +3105,9 @@ const $2da9626742e3560b$export$d5424e4dfe4be076 = ({ color: color  })=>/*#__PURE
 
 const $e1413aacdaa5a03e$export$71b2224f1ce5e08e = (ref, action)=>{
     (0, $3Sbms$useEffect)(()=>{
+        const effectTimestamp = performance.now();
         const onWindowClick = (event)=>{
-            if (!ref?.current?.contains(event.target)) action();
+            if (!ref?.current?.contains(event.target) && event.timeStamp > effectTimestamp) action();
         };
         if (ref?.current) {
             window.addEventListener("click", onWindowClick);
@@ -3166,7 +3196,9 @@ const $59d1053cd71d481a$var$Menu = ({ categories: categories  })=>{
                         children: category.title
                     }),
                     category.items.map((item)=>/*#__PURE__*/ (0, $3Sbms$jsxs)((0, $4ee077ee5e6fe3e7$export$44020656de05f2b4), {
-                            onClick: item.action,
+                            onClick: ()=>{
+                                item.action();
+                            },
                             danger: item.danger,
                             children: [
                                 item.jsxIcon && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $4ee077ee5e6fe3e7$export$5912a8d3f489e1c1), {
@@ -6516,7 +6548,8 @@ const $cdab47bb8796991e$var$Video = ()=>{
             const { peers: peers  } = event.detail;
             const roomStreams = peers.map((peer)=>({
                     id: peer.peerId,
-                    profile: peer.profile
+                    profile: peer.profile,
+                    muted: peer.muted
                 }));
             dispatch({
                 type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).SET_STREAMS,
@@ -10946,15 +10979,17 @@ const $24075a5d702d64b3$export$3f94917203ab7078 = {
     init: ({ element: element , ...options })=>{
         if (element?.nodeType !== window.Node.ELEMENT_NODE) throw new Error('The "element" property must be a valid element!');
         const mergedOptions = (0, $365e765f9890497b$export$6969335ea1e4e77c)($24075a5d702d64b3$var$defaultOptions, options);
-        (0, $3Sbms$render)(/*#__PURE__*/ (0, $3Sbms$jsx)((0, $26ed036cbc17809a$export$2e2bcd8739ae039), {
+        const rootElement = (0, $3Sbms$createRoot)(element);
+        rootElement.render(/*#__PURE__*/ (0, $3Sbms$jsx)((0, $26ed036cbc17809a$export$2e2bcd8739ae039), {
             options: mergedOptions
-        }), element);
+        }));
         if (mergedOptions.tracking) (0, $3Sbms$hotjarbrowser).init(3111933, 6);
     },
     initGreeting: (element, onGreetingDone)=>{
-        (0, $3Sbms$render)(/*#__PURE__*/ (0, $3Sbms$jsx)((0, $f8d57e3d223f5089$export$2e2bcd8739ae039), {
+        const rootElement = (0, $3Sbms$createRoot)(element);
+        rootElement.render(/*#__PURE__*/ (0, $3Sbms$jsx)((0, $f8d57e3d223f5089$export$2e2bcd8739ae039), {
             onGreetingDone: onGreetingDone
-        }), element);
+        }));
     },
     setExtraSettingsOptions: (extraOptions)=>{
         const event = new CustomEvent("streamUISetExtraSettingsOptions", {
@@ -10970,6 +11005,7 @@ const $24075a5d702d64b3$export$3f94917203ab7078 = {
     terminateRoom: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).terminateRoom.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
     generateToken: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).generateToken.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
     addEventListener: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
+    removeEventListener: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
     dispatchEvent: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).dispatchEvent.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
     getState: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getState.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
     setProfile: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setProfile.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),

package/dist/stream-ui.js

@@ -1,5 +1,5 @@
 var $jQDcL$reactjsxruntime = require("react/jsx-runtime");
-var $jQDcL$reactdom = require("react-dom");
+var $jQDcL$reactdomclient = require("react-dom/client");
 var $jQDcL$hotjarbrowser = require("@hotjar/browser");
 var $jQDcL$reacthottoast = require("react-hot-toast");
 var $jQDcL$styledcomponents = require("styled-components");
@@ -14,6 +14,7 @@ var $jQDcL$sentrybrowser = require("@sentry/browser");
 var $jQDcL$mediasoupclientlibProducer = require("mediasoup-client/lib/Producer");
 var $jQDcL$mediasoupclient = require("mediasoup-client");
 var $jQDcL$mediapipeselfie_segmentation = require("@mediapipe/selfie_segmentation");
+var $jQDcL$reactdom = require("react-dom");
 var $jQDcL$qrcode = require("qrcode");
 
 function $parcel$interopDefault(a) {
@@ -1504,10 +1505,8 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 }
             };
             peer.producersData.forEach((producer)=>{
-                if (producer.deviceType === "microphone") {
-                    deviceState.microphone.enabled = true;
-                    deviceState.microphone.muted = producer.paused;
-                } else if (producer.deviceType === "screen") deviceState.screenshare.enabled = true;
+                if (producer.deviceType === "microphone") deviceState.microphone.enabled = true;
+                else if (producer.deviceType === "screen") deviceState.screenshare.enabled = true;
                 else if (producer.deviceType === "webcam") deviceState.camera.enabled = true;
             });
             peers.push({
@@ -1616,18 +1615,20 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             if (notification.method === "error") {
                 if (notification.data?.reason === "reached user limit") this.onCriticalError($1dedebd5ff3002eb$export$818d60b2e626da0c.USER_LIMIT);
             } else if (notification.method === "newPeer") {
-                const { id: id , profile: profile  } = notification.data;
+                const { id: id , profile: profile , muted: muted  } = notification.data;
                 this.peers.set(id, {
                     id: id,
                     peerId: id,
                     profile: profile,
+                    muted: muted,
                     producersData: []
                 });
                 const event = new $1dedebd5ff3002eb$var$SnapcallEvent("newPeer", {
                     detail: {
                         peerId: id,
                         displayName: profile.name,
-                        profile: profile
+                        profile: profile,
+                        muted: muted
                     }
                 });
                 this.dispatchEvent(event);
@@ -1706,6 +1707,26 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                     }
                 });
                 this.dispatchEvent(event);
+            } else if (notification.method === "mute") {
+                const { peerId: peerId , device: device  } = notification.data;
+                const event = new $1dedebd5ff3002eb$var$SnapcallEvent("mediaPause", {
+                    detail: {
+                        peerId: peerId,
+                        deviceType: device,
+                        paused: true
+                    }
+                });
+                this.dispatchEvent(event);
+            } else if (notification.method === "unmute") {
+                const { peerId: peerId , device: device  } = notification.data;
+                const event = new $1dedebd5ff3002eb$var$SnapcallEvent("mediaResume", {
+                    detail: {
+                        peerId: peerId,
+                        deviceType: device,
+                        paused: false
+                    }
+                });
+                this.dispatchEvent(event);
             } else if (notification.method === "requestDeviceResult") {
                 const event = new $1dedebd5ff3002eb$var$SnapcallEvent(notification.method, {
                     detail: notification.data
@@ -1993,28 +2014,30 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             this.dispatchEvent(event);
         }
     }
-    async muteMicrophone() {
+    muteMicrophone() {
         if (this.micProducer) {
             this.onStopSpeak();
-            this.micProducer?.pause();
-            await this.protoo.request("pauseProducer", {
-                producerId: this.micProducer?.id
-            });
+            this.micProducer.pause();
             this.muted = true;
+            const device = "microphone";
+            this.protoo.notify("mute", {
+                device: device
+            });
             const event = new $1dedebd5ff3002eb$var$SnapcallEvent("microphoneMute", {
                 detail: {}
             });
             this.dispatchEvent(event);
         }
     }
-    async unMuteMicrophone() {
+    unMuteMicrophone() {
         if (this.micProducer) {
             this.micProducer.resume();
             this.resolvePendingDeviceRequest("microphone", true);
-            await this.protoo.request("resumeProducer", {
-                producerId: this.micProducer.id
-            });
             this.muted = false;
+            const device = "microphone";
+            this.protoo.notify("unmute", {
+                device: device
+            });
             const event = new $1dedebd5ff3002eb$var$SnapcallEvent("microphoneUnmute", {
                 detail: {}
             });
@@ -2215,6 +2238,11 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             },
             qualityIndex: 2
         };
+        await this.webcamProducer?.replaceTrack?.({
+            track: null
+        }).catch((err)=>{
+            $1dedebd5ff3002eb$var$log.error("switchCamera", "clean track failed", err);
+        });
         const mediaStream = await this.handleGetUserMediaError("webcam", navigator.mediaDevices.getUserMedia({
             video: {
                 deviceId: {
@@ -2517,6 +2545,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 deviceType: deviceType
             });
             this.scaleVideoEncodingsParameter();
+            const paused = peer ? peer.muted : false;
             const event = new $1dedebd5ff3002eb$var$SnapcallEvent("mediaStart", {
                 detail: {
                     peerId: peerId,
@@ -3084,8 +3113,9 @@ const $cce7f1c9e9c29503$export$d5424e4dfe4be076 = ({ color: color  })=>/*#__PURE
 
 const $326cea7dbbcb019a$export$71b2224f1ce5e08e = (ref, action)=>{
     (0, $jQDcL$react.useEffect)(()=>{
+        const effectTimestamp = performance.now();
         const onWindowClick = (event)=>{
-            if (!ref?.current?.contains(event.target)) action();
+            if (!ref?.current?.contains(event.target) && event.timeStamp > effectTimestamp) action();
         };
         if (ref?.current) {
             window.addEventListener("click", onWindowClick);
@@ -3174,7 +3204,9 @@ const $82c4f35718e0facf$var$Menu = ({ categories: categories  })=>{
                         children: category.title
                     }),
                     category.items.map((item)=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $4890069d0b6c2ba3$export$44020656de05f2b4), {
-                            onClick: item.action,
+                            onClick: ()=>{
+                                item.action();
+                            },
                             danger: item.danger,
                             children: [
                                 item.jsxIcon && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $4890069d0b6c2ba3$export$5912a8d3f489e1c1), {
@@ -6524,7 +6556,8 @@ const $88b23a8428e67b66$var$Video = ()=>{
             const { peers: peers  } = event.detail;
             const roomStreams = peers.map((peer)=>({
                     id: peer.peerId,
-                    profile: peer.profile
+                    profile: peer.profile,
+                    muted: peer.muted
                 }));
             dispatch({
                 type: (0, $a4027a5418fcd07a$export$96a9662a3eda31f6).SET_STREAMS,
@@ -10954,15 +10987,17 @@ const $e68207026aca356b$export$3f94917203ab7078 = {
     init: ({ element: element , ...options })=>{
         if (element?.nodeType !== window.Node.ELEMENT_NODE) throw new Error('The "element" property must be a valid element!');
         const mergedOptions = (0, $6b4cf4c12c735fdf$export$6969335ea1e4e77c)($e68207026aca356b$var$defaultOptions, options);
-        (0, $jQDcL$reactdom.render)(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ee8cb448c2c74888$export$2e2bcd8739ae039), {
+        const rootElement = (0, $jQDcL$reactdomclient.createRoot)(element);
+        rootElement.render(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ee8cb448c2c74888$export$2e2bcd8739ae039), {
             options: mergedOptions
-        }), element);
+        }));
         if (mergedOptions.tracking) (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).init(3111933, 6);
     },
     initGreeting: (element, onGreetingDone)=>{
-        (0, $jQDcL$reactdom.render)(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3305ca02e86dabd1$export$2e2bcd8739ae039), {
+        const rootElement = (0, $jQDcL$reactdomclient.createRoot)(element);
+        rootElement.render(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3305ca02e86dabd1$export$2e2bcd8739ae039), {
             onGreetingDone: onGreetingDone
-        }), element);
+        }));
     },
     setExtraSettingsOptions: (extraOptions)=>{
         const event = new CustomEvent("streamUISetExtraSettingsOptions", {
@@ -10978,6 +11013,7 @@ const $e68207026aca356b$export$3f94917203ab7078 = {
     terminateRoom: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).terminateRoom.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     generateToken: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).generateToken.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     addEventListener: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
+    removeEventListener: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     dispatchEvent: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).dispatchEvent.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     getState: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).getState.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     setProfile: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).setProfile.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),