@snapcall/stream-ui 1.10.1 → 1.11.1

package/dist/stream-ui.js

@@ -16,6 +16,14 @@ 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");
+var $jQDcL$reactstately = require("react-stately");
+var $jQDcL$classnames = require("classnames");
+var $jQDcL$reactaria = require("react-aria");
+var $jQDcL$reactariaoverlays = require("@react-aria/overlays");
+var $jQDcL$reactariautils = require("@react-aria/utils");
+var $jQDcL$reacttransitiongroup = require("react-transition-group");
+var $jQDcL$reactariainteractions = require("@react-aria/interactions");
+var $jQDcL$reactcontentloader = require("react-content-loader");
 
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
@@ -28,6 +36,7 @@ $parcel$export(module.exports, "streamUI", () => $e68207026aca356b$export$3f9491
 
 
 
+// https://github.com/voodoocreation/ts-deepmerge/blob/master/src/index.ts
 const $6b4cf4c12c735fdf$var$isObject = (obj)=>{
     if (typeof obj === "object" && obj !== null) {
         if (typeof Object.getPrototypeOf === "function") {
@@ -337,6 +346,9 @@ const $91fcbf58e59aae79$export$84584c2a98eb6753 = {
         header: {
             free: "Free version"
         },
+        loader: {
+            connection: "Connecting..."
+        },
         notifications: {
             screensharingError: "An error occured when trying to toggle screensharing",
             microphoneError: "An error occured when trying to toggle the microphone",
@@ -488,6 +500,9 @@ const $e52ca91c2b296e41$export$acb2a88f7d552ebf = {
         header: {
             free: "Version gratuite"
         },
+        loader: {
+            connection: "Connexion..."
+        },
         notifications: {
             screensharingError: "Une erreur est survenue pendant l'activation du partage d'\xe9cran",
             microphoneError: "Une erreur est survenue pendant l'activation du micro",
@@ -639,6 +654,9 @@ const $e0ae3d23c2381da3$export$3486a10f30cf1ee4 = {
         header: {
             free: "Versione gratuita"
         },
+        loader: {
+            connection: "Connessione..."
+        },
         notifications: {
             screensharingError: "Si \xe8 verificato un errore durante l'attivazione della condivisione dello schermo",
             microphoneError: "Si \xe8 verificato un errore durante l'attivazione del microfono",
@@ -814,7 +832,7 @@ var $b45c0bcc142f0b5e$export$2e2bcd8739ae039 = (0, ($parcel$interopDefault($jQDc
 
 
 
-
+/* eslint-disable no-console */ 
 const $d0c6baf97675ab49$var$LogLevel = {
     error: 1,
     warn: 2,
@@ -981,8 +999,8 @@ class $6a90fae7e584afd4$export$ea669869acd8f177 {
         });
         try {
             this.audioStreamSource.disconnect(this.analyser);
-        } catch (err1) {
-            $6a90fae7e584afd4$var$log.error("release", "audioStreamSource failed to disconnect", err1);
+        } catch (err) {
+            $6a90fae7e584afd4$var$log.error("release", "audioStreamSource failed to disconnect", err);
         }
         this.audioContext.close().catch((err)=>{
             $6a90fae7e584afd4$var$log.error("release", "audioContext failed to close", err);
@@ -1236,7 +1254,7 @@ class $cb913ea078a876a6$export$2e2bcd8739ae039 {
     live = false;
     fps = 24;
     blurLevel = 10;
-    timerWorker = new Worker(new URL("timer.7690fc0b.js", "file:" + __filename), {
+    timerWorker = new Worker(new URL("timer.d0b8fda2.js", "file:" + __filename), {
         name: "VirtualBackgroundTimerWorker"
     });
     constructor(stream, options){
@@ -1368,7 +1386,7 @@ class $cb913ea078a876a6$export$2e2bcd8739ae039 {
 
 
 const $1dedebd5ff3002eb$var$log = new (0, $d0c6baf97675ab49$export$2e2bcd8739ae039)("StreamerClient");
-const $1dedebd5ff3002eb$export$818d60b2e626da0c = {
+const $1dedebd5ff3002eb$export$103bedf43ba882db = {
     WEBRTC_FAILED: "WRTC1",
     WEBRTC_RECOVER_ERROR: "WRTC2",
     CREATE_TRANSPORT_FAILED: "TRANS1",
@@ -1417,7 +1435,7 @@ const $1dedebd5ff3002eb$var$WEBCAM_SIMULCAST_ENCODINGS = [
     {
         scaleResolutionDownBy: 1,
         maxBitrate: 5000000
-    }, 
+    }
 ];
 const $1dedebd5ff3002eb$var$SCREEN_SHARING_SIMULCAST_ENCODINGS = [
     {
@@ -1427,7 +1445,7 @@ const $1dedebd5ff3002eb$var$SCREEN_SHARING_SIMULCAST_ENCODINGS = [
     {
         dtx: true,
         maxBitrate: 6000000
-    }, 
+    }
 ];
 class $1dedebd5ff3002eb$var$SnapcallEvent extends CustomEvent {
     // eslint-disable-next-line @typescript-eslint/no-useless-constructor
@@ -1455,6 +1473,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         super();
         navigator.mediaDevices.addEventListener("devicechange", ()=>this.onDeviceChange());
         this.config = {
+            streamApiURL: String("https://apistream.snapcall.io"),
             apiUrl: String("https://api.snapcall.io/v2"),
             streamerServer: String("wss://g.snapcall.io/stream"),
             streamerApi: String("https://g.snapcall.io/stream"),
@@ -1464,7 +1483,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                     username: "test",
                     credential: "test",
                     credentialType: "password"
-                }, 
+                }
             ]
         };
         this.peers = new Map();
@@ -1572,7 +1591,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         if (!this.peerId) this.peerId = (0, $jQDcL$uuid.v4)();
         let url;
         try {
-            const { streamer_instance: instanceId , plan: { permissions: permissions , name: name  } ,  } = await fetch(`${this.config.apiUrl}/streams/${room}/info`, {
+            const { streamer_instance: instanceId , plan: { permissions: permissions , name: name  }  } = await fetch(`${this.config.apiUrl}/streams/${room}/info`, {
                 method: "get",
                 headers: {
                     "Content-Type": "application/json"
@@ -1583,7 +1602,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             });
             this.permissions = permissions;
             this.plan = name;
-            url = `${this.config.streamerServer}/${instanceId}/?roomId=${room}&peerId=${this.peerId}`;
+            url = `${this.config.streamerServer}/${instanceId}${this.joinOptions.recorder ? "/recorder" : ""}?roomId=${room}&peerId=${this.peerId}`;
         } catch (roomError) {
             const event = new $1dedebd5ff3002eb$var$SnapcallEvent("invalidRoom", {
                 detail: {}
@@ -1599,21 +1618,25 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         });
         this.protoo = new $jQDcL$protooclient.Peer(this.protooTransport);
         this.protoo.on("open", ()=>{
+            if (this.joinOptions.recorder) {
+                this.joinRecorder();
+                return;
+            }
             this.joinRoom();
         });
         this.protoo.on("failed", ()=>{
             $1dedebd5ff3002eb$var$log.error("protoo.on", "failed");
-            this.onCriticalError($1dedebd5ff3002eb$export$818d60b2e626da0c.SOCKET_LOST);
+            this.onCriticalError($1dedebd5ff3002eb$export$103bedf43ba882db.SOCKET_LOST);
         });
         this.protoo.on("disconnected", ()=>{
             $1dedebd5ff3002eb$var$log.error("protoo.on", "disconnected");
-            this.onCriticalError($1dedebd5ff3002eb$export$818d60b2e626da0c.SOCKET_LOST);
+            this.onCriticalError($1dedebd5ff3002eb$export$103bedf43ba882db.SOCKET_LOST);
         });
         this.protoo.on("close", ()=>$1dedebd5ff3002eb$var$log.log("protoo.on", "close :("));
         this.protoo.on("notification", async (notification)=>{
             $1dedebd5ff3002eb$var$log.log("notification", notification);
             if (notification.method === "error") {
-                if (notification.data?.reason === "reached user limit") this.onCriticalError($1dedebd5ff3002eb$export$818d60b2e626da0c.USER_LIMIT);
+                if (notification.data?.reason === "reached user limit") this.onCriticalError($1dedebd5ff3002eb$export$103bedf43ba882db.USER_LIMIT);
             } else if (notification.method === "newPeer") {
                 const { id: id , profile: profile , muted: muted  } = notification.data;
                 this.peers.set(id, {
@@ -1659,7 +1682,10 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 this.onConsumerClose({
                     consumerId: consumerId
                 });
-            } else if (notification.method === "displayName") {
+            } else if (notification.method === "recordStopped") this.dispatchEvent(new $1dedebd5ff3002eb$var$SnapcallEvent("recordStopped", {
+                detail: notification.data
+            }));
+            else if (notification.method === "displayName") {
                 const { peerId: peerId , displayName: displayName  } = notification.data;
                 const event = new $1dedebd5ff3002eb$var$SnapcallEvent("displayName", {
                     detail: {
@@ -1739,17 +1765,17 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 });
                 this.dispatchEvent(event);
             } else if (notification.method === "customMessage") {
-                const { messageId: messageId , chunk: chunk1 , chunkIndex: chunkIndex , totalChunks: totalChunks  } = notification.data.event;
+                const { messageId: messageId , chunk: chunk , chunkIndex: chunkIndex , totalChunks: totalChunks  } = notification.data.event;
                 const existingMessage = this.customMessages.get(messageId);
                 if (existingMessage) existingMessage.chunks.push({
                     index: chunkIndex,
-                    data: chunk1
+                    data: chunk
                 });
                 else this.customMessages.set(messageId, {
                     chunks: [
                         {
                             index: chunkIndex,
-                            data: chunk1
+                            data: chunk
                         }
                     ],
                     totalChunks: totalChunks
@@ -1794,7 +1820,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 transport.transport = await promise;
                 if (transport.transport) this.listenWebRTCTransportStates(transport);
             } catch (err) {
-                this.onCriticalError($1dedebd5ff3002eb$export$818d60b2e626da0c.CREATE_TRANSPORT_FAILED);
+                this.onCriticalError($1dedebd5ff3002eb$export$103bedf43ba882db.CREATE_TRANSPORT_FAILED);
                 throw err;
             }
             return transport.transport;
@@ -1821,7 +1847,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                         }
                     });
                     $1dedebd5ff3002eb$var$log.error("listenWebRTCTransportStats", "webrtc stat failed", err);
-                    this.onCriticalError($1dedebd5ff3002eb$export$818d60b2e626da0c.WEBRTC_FAILED);
+                    this.onCriticalError($1dedebd5ff3002eb$export$103bedf43ba882db.WEBRTC_FAILED);
                 }
             }
         });
@@ -1862,7 +1888,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 {
                     ...peer,
                     peerId: peer.id || peer.peerId
-                }, 
+                }
             ]));
         const callId = await this.getCallId();
         this.dispatchEvent(new $1dedebd5ff3002eb$var$SnapcallEvent("enterRoom", {
@@ -1890,6 +1916,19 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             });
         });
     }
+    async joinRecorder() {
+        this.streamerMediasoup = await (0, $a62e7f17be5cf3a0$export$2e2bcd8739ae039).create(this.protoo, this.config);
+        const callId = await this.getCallId();
+        this.dispatchEvent(new $1dedebd5ff3002eb$var$SnapcallEvent("enterRoom", {
+            detail: {
+                peerId: this.peerId,
+                peers: [],
+                callId: callId,
+                plan: this.plan,
+                permissions: this.permissions
+            }
+        }));
+    }
     async switchMicrophone(deviceId) {
         try {
             $1dedebd5ff3002eb$var$log.log("switchMicrophone", "switching Microphone");
@@ -2145,7 +2184,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 iceParameters: iceParameters
             });
         } catch (err) {
-            this.onCriticalError($1dedebd5ff3002eb$export$818d60b2e626da0c.WEBRTC_RECOVER_ERROR);
+            this.onCriticalError($1dedebd5ff3002eb$export$103bedf43ba882db.WEBRTC_RECOVER_ERROR);
             $1dedebd5ff3002eb$var$log.log("restartIce", "restartIceFailed", err);
             $jQDcL$sentrybrowser.captureException(err, {
                 extra: {
@@ -2212,20 +2251,39 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         if (!this.webcamProducer || this.webcamProducer.closed) return;
         await this.switchWebcam({});
     }
-    async switchWebcam({ device: device , resolution: resolution , rotate: rotate  }) {
+    async switchWebcam({ device: device , resolution: resolution , rotate: rotate , frameRate: frameRate , facingMode: facingMode  }) {
         if (!this.webcam.device) throw new Error("no webcam devices");
+        const optionalParam = {};
         if (rotate) {
-            const webcams = Array.from(this.webcams.keys());
-            const deviceId = this.webcam?.device?.deviceId || "unknow";
-            let newWebcamIndex = webcams.indexOf(deviceId);
-            if (newWebcamIndex < webcams.length - 1) newWebcamIndex++;
-            else newWebcamIndex = 0;
-            const newWebcamDevice = this.webcams.get(webcams[newWebcamIndex]);
-            if (!newWebcamDevice) throw new Error("no webcam device");
-            this.webcam.device = newWebcamDevice;
-            this.webcam.resolution = "hd";
+            if (this.webcam.facingMode) {
+                console.log("switch by facing mod");
+                this.webcam.facingMode = this.webcam.facingMode === "user" ? "environment" : "user";
+                optionalParam.facingMode = this.webcam.facingMode;
+            } else {
+                const webcams = Array.from(this.webcams.keys());
+                const deviceId = this.webcam?.device?.deviceId || "unknow";
+                let newWebcamIndex = webcams.indexOf(deviceId);
+                if (newWebcamIndex < webcams.length - 1) newWebcamIndex++;
+                else newWebcamIndex = 0;
+                const newWebcamDevice = this.webcams.get(webcams[newWebcamIndex]);
+                if (!newWebcamDevice) throw new Error("no webcam device");
+                this.webcam.device = newWebcamDevice;
+                this.webcam.resolution = "hd";
+                optionalParam.deviceId = {
+                    ideal: this.webcam.device?.deviceId
+                };
+            }
         } else {
-            if (device) this.webcam.device = device;
+            if (facingMode) {
+                this.webcam.facingMode = facingMode;
+                optionalParam.facingMode = this.webcam.facingMode;
+            } else if (device) {
+                this.webcam.device = device;
+                this.webcam.facingMode = undefined;
+                optionalParam.deviceId = {
+                    ideal: this.webcam.device.deviceId
+                };
+            }
             if (resolution) this.webcam.resolution = resolution;
         }
         let usedResolution = $1dedebd5ff3002eb$export$d21ffcc5eb136bfa[resolution || this.webcam.resolution];
@@ -2245,9 +2303,8 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         });
         const mediaStream = await this.handleGetUserMediaError("webcam", navigator.mediaDevices.getUserMedia({
             video: {
-                deviceId: {
-                    ideal: this.webcam.device.deviceId
-                },
+                frameRate: frameRate,
+                ...optionalParam,
                 ...usedResolution
             }
         }));
@@ -2277,7 +2334,16 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     }
     async enableVideo(config) {
         await this.updateWebcams();
-        if (config?.device) this.webcam.device = config.device;
+        const optionalParam = {};
+        if (config?.facingMode) {
+            optionalParam.facingMode = config.facingMode;
+            this.webcam.facingMode = config.facingMode;
+        } else {
+            if (config?.device) this.webcam.device = config.device;
+            optionalParam.deviceId = {
+                ideal: this.webcam.device?.deviceId
+            };
+        }
         if (!this.webcam.device) throw new Error("no webcam devices");
         let usedResolution = $1dedebd5ff3002eb$export$d21ffcc5eb136bfa[config?.resolution || this.webcam.resolution];
         if (this.useVideoBackground) usedResolution = {
@@ -2291,12 +2357,18 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         };
         const mediaStream = await this.handleGetUserMediaError("webcam", navigator.mediaDevices.getUserMedia({
             video: {
-                deviceId: {
-                    ideal: this.webcam.device.deviceId
-                },
+                frameRate: config?.frameRate,
+                ...optionalParam,
                 ...usedResolution
             }
         }));
+        if (config?.facingMode) try {
+            const capabilities = mediaStream.getVideoTracks()[0].getCapabilities();
+            if (!capabilities?.facingMode || capabilities.facingMode.length === 0) throw new Error("no facing mod");
+        } catch  {
+            this.webcam.device = this.webcams.values().next().value;
+            this.webcam.facingMode = undefined;
+        }
         if (this.useVideoBackground) {
             if (this.mediaPipe) await this.mediaPipe.clean();
             this.mediaPipe = new (0, $cb913ea078a876a6$export$2e2bcd8739ae039)(mediaStream, this.mediaPipeOption);
@@ -2352,7 +2424,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             advanced: [
                 {
                     zoom: this.webcamZoom.min * 2
-                }, 
+                }
             ]
         });
     }
@@ -2363,7 +2435,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             advanced: [
                 {
                     zoom: this.webcamZoom.min
-                }, 
+                }
             ]
         });
     }
@@ -2472,6 +2544,27 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             element.srcObject = mediaStream;
         } else $1dedebd5ff3002eb$var$log.error("requestVideo", `Video consumer ${consumer} not found`);
     }
+    async saveCapture(base64Image) {
+        const { objectUrl: objectUrl  } = await fetch(`${this.config.streamApiURL}/uploadSnapshot`, {
+            method: "POST",
+            body: JSON.stringify({
+                file: base64Image
+            })
+        }).then((rawResponse)=>rawResponse.json());
+        const res = await this.protoo.request("addCapture", {
+            url: objectUrl
+        });
+        return {
+            url: objectUrl,
+            assetId: res.assetId
+        };
+    }
+    async deleteCapture(assetId) {
+        const res = await this.protoo.request("deleteCapture", {
+            assetId: assetId
+        });
+        return res;
+    }
     async captureVideo(videoElement) {
         if (this.permissions.find((permission)=>permission === "instant_picture")) {
             let image;
@@ -2566,7 +2659,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                 consumerId: consumer.id
             });
         } catch (error) {
-            this.onCriticalError($1dedebd5ff3002eb$export$818d60b2e626da0c.CONSUME_ERROR);
+            this.onCriticalError($1dedebd5ff3002eb$export$103bedf43ba882db.CONSUME_ERROR);
             $1dedebd5ff3002eb$var$log.error("consumeProducer", "newConsumer request failed", error);
             throw error;
         }
@@ -2770,6 +2863,12 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     getPermissions() {
         return this.permissions;
     }
+    async startRecord() {
+        await this.protoo.request("startRecord");
+    }
+    async stopRecord() {
+        await this.protoo.request("stopRecord");
+    }
 }
 
 
@@ -2784,17 +2883,17 @@ var $8b39f32976a7698a$export$2e2bcd8739ae039 = $8b39f32976a7698a$var$StreamUICon
 
 
 let $a4027a5418fcd07a$export$96a9662a3eda31f6;
-(function(StreamsReducerActionTypes1) {
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["SET_STREAMS"] = 0] = "SET_STREAMS";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["ADD_STREAM"] = 1] = "ADD_STREAM";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["REMOVE_STREAM"] = 2] = "REMOVE_STREAM";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["DEVICE_UPDATE"] = 3] = "DEVICE_UPDATE";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["MUTE"] = 4] = "MUTE";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["UNMUTE"] = 5] = "UNMUTE";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["SET_HIGHLIGHTED_TILE"] = 6] = "SET_HIGHLIGHTED_TILE";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["UNSET_HIGHLIGHTED_TILE"] = 7] = "UNSET_HIGHLIGHTED_TILE";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["SET_STREAM_PROFILE"] = 8] = "SET_STREAM_PROFILE";
-    StreamsReducerActionTypes1[StreamsReducerActionTypes1["SET_STREAM_SPEAKING"] = 9] = "SET_STREAM_SPEAKING";
+(function(StreamsReducerActionTypes) {
+    StreamsReducerActionTypes[StreamsReducerActionTypes["SET_STREAMS"] = 0] = "SET_STREAMS";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["ADD_STREAM"] = 1] = "ADD_STREAM";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["REMOVE_STREAM"] = 2] = "REMOVE_STREAM";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["DEVICE_UPDATE"] = 3] = "DEVICE_UPDATE";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["MUTE"] = 4] = "MUTE";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["UNMUTE"] = 5] = "UNMUTE";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["SET_HIGHLIGHTED_TILE"] = 6] = "SET_HIGHLIGHTED_TILE";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["UNSET_HIGHLIGHTED_TILE"] = 7] = "UNSET_HIGHLIGHTED_TILE";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["SET_STREAM_PROFILE"] = 8] = "SET_STREAM_PROFILE";
+    StreamsReducerActionTypes[StreamsReducerActionTypes["SET_STREAM_SPEAKING"] = 9] = "SET_STREAM_SPEAKING";
 })($a4027a5418fcd07a$export$96a9662a3eda31f6 || ($a4027a5418fcd07a$export$96a9662a3eda31f6 = {}));
 const $a4027a5418fcd07a$export$7fc21eab2c971c9c = {
     streams: [],
@@ -3005,6 +3104,52 @@ const $6d8b37b4bd2444ef$var$SnapcallLogoMedium = ()=>{
         })
     });
 };
+const $6d8b37b4bd2444ef$export$3741e4ac43f04ca2 = ()=>{
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("svg", {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("g", {
+                clipPath: "url(#clip0_243_300)",
+                children: [
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                        d: "M0 24C0 4.236 4.236 0 24 0C43.764 0 48 4.236 48 24C48 43.764 43.764 48 24 48C4.236 48 0 43.764 0 24Z",
+                        fill: "black"
+                    }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                        d: "M24.15 38.2856C25.7279 38.2856 27.0502 36.9758 26.5626 35.4753C26.1419 34.1801 25.4321 32.9898 24.4746 32.0064C22.853 30.341 20.6537 29.4053 18.3605 29.4053C16.0673 29.4053 13.8679 30.341 12.2464 32.0064C11.2888 32.9898 10.5791 34.1801 10.1583 35.4753C9.67078 36.9758 10.9931 38.2856 12.571 38.2856H24.15Z",
+                        fill: "white"
+                    }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                        d: "M23.8494 9.71436C22.2714 9.71436 20.9491 11.0242 21.4367 12.5249C21.8574 13.8199 22.5672 15.0102 23.5248 15.9937C25.1463 17.6591 27.3456 18.5947 29.6389 18.5947C31.932 18.5947 34.1314 17.6591 35.7529 15.9937C36.7106 15.0102 37.4203 13.8199 37.8409 12.5249C38.3286 11.0242 37.0063 9.71436 35.4283 9.71436H23.8494Z",
+                        fill: "white"
+                    }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                        d: "M29.6387 35.4287C29.6387 37.0067 30.953 38.3301 32.4415 37.8064C33.6767 37.3715 34.8118 36.6509 35.7527 35.6847C37.3744 34.0195 38.2852 31.7606 38.2852 29.4055C38.2852 27.0502 37.3744 24.7915 35.7527 23.1261C34.8118 22.1599 33.6767 21.4393 32.4415 21.0046C30.953 20.4807 29.6387 21.8043 29.6387 23.3823V35.4287Z",
+                        fill: "white"
+                    }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                        d: "M18.3605 12.5712C18.3605 10.9933 17.0461 9.66972 15.5576 10.1936C14.3224 10.6283 13.1872 11.3489 12.2464 12.3151C10.6248 13.9804 9.71387 16.2392 9.71387 18.5944C9.71387 20.9496 10.6248 23.2083 12.2464 24.8737C13.1872 25.8399 14.3224 26.5605 15.5576 26.9952C17.0461 27.5191 18.3605 26.1955 18.3605 24.6176V12.5712Z",
+                        fill: "white"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("defs", {
+                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("clipPath", {
+                    id: "clip0_243_300",
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("rect", {
+                        width: "48",
+                        height: "48",
+                        fill: "white"
+                    })
+                })
+            })
+        ]
+    });
+};
 var $6d8b37b4bd2444ef$export$2e2bcd8739ae039 = $6d8b37b4bd2444ef$var$SnapcallLogo;
 
 
@@ -3365,7 +3510,7 @@ const $7eae5c8ece2c75ff$var$HeaderSettings = ({ baseCategories: baseCategories ,
                     items: [
                         ...baseCategory.items
                     ]
-                })), 
+                }))
         ];
         extraCategories?.forEach((extraCategory)=>{
             const existingCategory = mergedCategories.find((category)=>category.id === extraCategory.id);
@@ -3505,7 +3650,7 @@ const $21395e477f83709c$var$getLayout = ({ width: width , cellAspectRatio: cellA
                     width: roundedWidth,
                     height: height
                 }
-            }, 
+            }
         ],
         tileCount: tileCount
     };
@@ -3627,7 +3772,7 @@ const $e1930b467e7d8845$var$multiPiP = new (0, $21395e477f83709c$export$45fabd1c
 const $e1930b467e7d8845$var$browser = $jQDcL$bowser.parse(window.navigator.userAgent);
 const $e1930b467e7d8845$var$Header = ()=>{
     const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
-    const { setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible , options: options , muted: muted , streaming: streaming , permissions: permissions , plan: plan , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const { setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , setIsVirtualBackgroundPopupVisible: setIsVirtualBackgroundPopupVisible , options: options , muted: muted , streaming: streaming , permissions: permissions , plan: plan , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $3f6e908c45fcc5b3$export$b5633a7cfbe42d9f)();
     const [extraOptions, setExtraOptions] = (0, $jQDcL$react.useState)(options.extraSettingsOptions || []);
     const onSetExtraSettingsOptions = (event)=>{
@@ -3696,7 +3841,7 @@ const $e1930b467e7d8845$var$Header = ()=>{
                         title: t("menu.openNewTab"),
                         jsxIcon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $cce7f1c9e9c29503$export$6546b255bd3a2004), {}),
                         action: onOpenInNewTabClick
-                    }, 
+                    }
                 ]
             },
             {
@@ -3713,7 +3858,7 @@ const $e1930b467e7d8845$var$Header = ()=>{
                         title: t("quickConnect.title"),
                         jsxIcon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $cce7f1c9e9c29503$export$6470d09a29d34d08), {}),
                         action: onScanQuickConnectClick
-                    }, 
+                    }
                 ]
             },
             {
@@ -3724,9 +3869,9 @@ const $e1930b467e7d8845$var$Header = ()=>{
                         title: t("settings.title"),
                         jsxIcon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $cce7f1c9e9c29503$export$1095c93890fce526), {}),
                         action: onSettingsMenuClick
-                    }, 
+                    }
                 ]
-            }, 
+            }
         ];
         if ($e1930b467e7d8845$var$browser.platform.type === "desktop" && $e1930b467e7d8845$var$browser.engine.name === "Blink") computedCategories[2].items.unshift({
             id: "virtualBackground",
@@ -3750,7 +3895,7 @@ const $e1930b467e7d8845$var$Header = ()=>{
         setIsQuickConnectPopupVisible,
         setBlockedFeaturePopupOpen,
         setIsSettingsMenuVisible,
-        setIsVirtualBackgroundPopupVisible, 
+        setIsVirtualBackgroundPopupVisible
     ]);
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $1949f8f101c8cf77$export$1e86fd0e1db89578), {
         children: [
@@ -4548,9 +4693,9 @@ const $2c45d365ee8aa1ab$export$2b501aee548bae06 = (0, ($parcel$interopDefault($j
   width: 100%;
   height: 100%;
   background-color: #fff;
-  border-radius: 20px;
+  border-radius: inherit;
   z-index: 20;
-  animation: ${$2c45d365ee8aa1ab$var$Flash} 0.8s;
+  animation: ${$2c45d365ee8aa1ab$var$Flash} 0.8s forwards;
 `;
 const $2c45d365ee8aa1ab$export$75b79d6244558c9c = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).img`
   width: 88px;
@@ -4907,7 +5052,7 @@ var $c19f00532fd0c23c$export$2e2bcd8739ae039 = $c19f00532fd0c23c$var$Reduce;
 
 
 
-const $6f36db3b1217f099$var$Cross = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
+const $6f36db3b1217f099$var$Cross = ({ color: color = "#fff"  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
@@ -4915,7 +5060,7 @@ const $6f36db3b1217f099$var$Cross = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
             d: "m13.41 12 6.3-6.29a1.004 1.004 0 0 0-1.42-1.42L12 10.59l-6.29-6.3a1.004 1.004 0 1 0-1.42 1.42l6.3 6.29-6.3 6.29a.999.999 0 0 0 0 1.42 1 1 0 0 0 1.42 0l6.29-6.3 6.29 6.3a1.001 1.001 0 0 0 1.639-.325 1 1 0 0 0-.22-1.095L13.41 12Z",
-            fill: "#fff"
+            fill: color
         })
     });
 var $6f36db3b1217f099$export$2e2bcd8739ae039 = $6f36db3b1217f099$var$Cross;
@@ -5264,7 +5409,7 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
     const videoElementRef = (0, $jQDcL$react.useRef)(null);
     const videoMediaProviderRef = (0, $jQDcL$react.useRef)(null);
     const SelfTileRef = (0, $jQDcL$react.useRef)(null);
-    const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , profile: profile , muted: muted , streaming: streaming , orientation: orientation , options: options , permissions: permissions , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , profile: profile , muted: muted , streaming: streaming , orientation: orientation , options: options , permissions: permissions , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen  } = (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";
@@ -5509,7 +5654,7 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
     }), remoteTilesContainerRef.current);
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
         children: [
-            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $2c45d365ee8aa1ab$export$98d9314e6a208b24), {
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $2c45d365ee8aa1ab$export$98d9314e6a208b24), {
                 ref: SelfTileRef,
                 style: {
                     width: tileWidth,
@@ -5519,16 +5664,16 @@ const $8393b5c887e16c8c$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
                 onClick: onSelfTileClick,
                 onMouseDown: onSelfTileMouseDown,
                 onTouchStart: onSelfTileMouseDown,
-                children: [
-                    snapshotAnimation && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $2c45d365ee8aa1ab$export$2b501aee548bae06), {
-                        onAnimationEnd: ()=>setSnapshotAnimation(false)
-                    }),
-                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $2c45d365ee8aa1ab$export$ba5a75b023bcdce2), {
-                        orientation: orientation,
-                        border: !streaming && !deviceRequest,
-                        children: content
-                    })
-                ]
+                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $2c45d365ee8aa1ab$export$ba5a75b023bcdce2), {
+                    orientation: orientation,
+                    border: !streaming && !deviceRequest,
+                    children: [
+                        snapshotAnimation && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $2c45d365ee8aa1ab$export$2b501aee548bae06), {
+                            onAnimationEnd: ()=>setSnapshotAnimation(false)
+                        }),
+                        content
+                    ]
+                })
             }),
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $2c45d365ee8aa1ab$export$9e533c08c30af08), {
                 show: extended
@@ -5678,7 +5823,7 @@ const $65bf10a117819168$export$e9785ae652b3a722 = (item)=>{
                     {
                         ...item,
                         id: 0
-                    }, 
+                    }
                 ]);
                 localStorage.setItem(key, stringifiedHistory);
             }
@@ -5786,7 +5931,7 @@ const $c378a92744dc7f32$export$405a29439cf92237 = "youtube_pause";
 const $c378a92744dc7f32$export$649698d6e35b1ef3 = "youtube_stop";
 const $c378a92744dc7f32$var$YoutubeTile = (tile)=>{
     const { selfPeerId: selfPeerId  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
-    const [player1, setPlayer] = (0, $jQDcL$react.useState)(null);
+    const [player, setPlayer] = (0, $jQDcL$react.useState)(null);
     const isSelf = tile.peerId === selfPeerId;
     const onVideoStateChange = (event)=>{
         const time = event.target.getCurrentTime();
@@ -5854,15 +5999,15 @@ const $c378a92744dc7f32$var$YoutubeTile = (tile)=>{
         isSelf
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
-        if (!isSelf && player1) {
+        if (!isSelf && player) {
             const onCustomMessage = (event)=>{
                 const { type: type , time: time  } = event.detail.event;
                 if (type === $c378a92744dc7f32$export$405a29439cf92237) {
-                    player1.pauseVideo();
-                    player1.seekTo(time, true);
+                    player.pauseVideo();
+                    player.seekTo(time, true);
                 } else if (type === $c378a92744dc7f32$export$1712c056f28ddd33) {
-                    player1.playVideo();
-                    player1.seekTo(time, true);
+                    player.playVideo();
+                    player.seekTo(time, true);
                 }
             };
             (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("customMessage", onCustomMessage);
@@ -5870,10 +6015,10 @@ const $c378a92744dc7f32$var$YoutubeTile = (tile)=>{
                 (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("customMessage", onCustomMessage);
             };
         }
-        if (isSelf && player1) {
+        if (isSelf && player) {
             const onNewPeer = (event)=>{
                 const { peerId: peerId  } = event.detail;
-                const time = player1.getCurrentTime();
+                const time = player.getCurrentTime();
                 (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).sendCustomMessage(peerId, {
                     type: $c378a92744dc7f32$export$8bd7ff36223ef5c1,
                     videoId: tile.data.videoId,
@@ -5888,7 +6033,7 @@ const $c378a92744dc7f32$var$YoutubeTile = (tile)=>{
     }, [
         tile.data,
         isSelf,
-        player1
+        player
     ]);
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b1a83827308c567d$export$f4a8a05247f8d4c), {
         children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b1a83827308c567d$export$b0da35797f3be127), {
@@ -6462,7 +6607,7 @@ var $537dcc6df507dc4a$export$2e2bcd8739ae039 = $537dcc6df507dc4a$var$tooltip;
 
 
 const $88b23a8428e67b66$var$Video = ()=>{
-    const { selfPeerId: selfPeerId , videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , options: options , muted: selfMuted , profile: profile1 , orientation: orientation , userInteractionTriggered: userInteractionTriggered ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const { selfPeerId: selfPeerId , videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , options: options , muted: selfMuted , profile: profile , orientation: orientation , userInteractionTriggered: userInteractionTriggered  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const [tileSize, setTileSize] = (0, $jQDcL$react.useState)({
         width: 0,
         height: 0
@@ -6642,7 +6787,7 @@ const $88b23a8428e67b66$var$Video = ()=>{
                         stream: {
                             id: String(selfPeerId),
                             muted: selfMuted,
-                            profile: profile1
+                            profile: profile
                         }
                     }),
                     streams.map((stream)=>{
@@ -6703,6 +6848,18 @@ const $ec8eb252693ca260$var$Rotate = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntim
             fill: "#F7F7F7"
         })
     });
+const $ec8eb252693ca260$export$aefffb14595958fe = ()=>{
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "32",
+        height: "32",
+        fill: "none",
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+            fill: "#fff",
+            d: "M26.547 20.68h-6.04a1.333 1.333 0 1 0 0 2.666h3.2A10.667 10.667 0 0 1 5.334 16a1.333 1.333 0 0 0-2.667 0 13.333 13.333 0 0 0 22.507 9.64V28a1.333 1.333 0 1 0 2.666 0v-6a1.333 1.333 0 0 0-1.293-1.32ZM16 2.666A13.333 13.333 0 0 0 6.827 6.36V4A1.333 1.333 0 1 0 4.16 4v6a1.333 1.333 0 0 0 1.334 1.333h6a1.333 1.333 0 0 0 0-2.667h-3.2A10.667 10.667 0 0 1 26.667 16a1.333 1.333 0 1 0 2.667 0A13.333 13.333 0 0 0 16 2.666Z"
+        })
+    });
+};
 var $ec8eb252693ca260$export$2e2bcd8739ae039 = $ec8eb252693ca260$var$Rotate;
 
 
@@ -6886,7 +7043,7 @@ const $9dfd9e2286cffa66$var$HighlightButton = ()=>{
     const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
     const highlightMenuRef = (0, $jQDcL$react.useRef)(null);
     const [isHighlightMenuOpen, setIsHighlightMenuOpen] = (0, $jQDcL$react.useState)(false);
-    const { setIsYoutubePopupVisible: setIsYoutubePopupVisible , setIsLinksharePopupVisible: setIsLinksharePopupVisible , selfPeerId: selfPeerId , permissions: permissions , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const { setIsYoutubePopupVisible: setIsYoutubePopupVisible , setIsLinksharePopupVisible: setIsLinksharePopupVisible , selfPeerId: selfPeerId , permissions: permissions , setBlockedFeaturePopupOpen: setBlockedFeaturePopupOpen  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const { highlightedTile: highlightedTile , dispatch: dispatch  } = (0, $3f6e908c45fcc5b3$export$b5633a7cfbe42d9f)();
     const isPresenting = Boolean(highlightedTile?.isGlobal && highlightedTile?.peerId === selfPeerId);
     (0, $326cea7dbbcb019a$export$71b2224f1ce5e08e)(highlightMenuRef, ()=>setIsHighlightMenuOpen(false));
@@ -6939,9 +7096,9 @@ const $9dfd9e2286cffa66$var$HighlightButton = ()=>{
                     title: t("youtube.title"),
                     jsxIcon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $3b6953f72db3bb17$export$2e2bcd8739ae039), {}),
                     action: onYoutubeClick
-                }, 
+                }
             ]
-        }, 
+        }
     ];
     if ($9dfd9e2286cffa66$var$isScreenshareSupported) menuCategories.push({
         id: "2",
@@ -6951,7 +7108,7 @@ const $9dfd9e2286cffa66$var$HighlightButton = ()=>{
                 title: t("menu.screenSharing"),
                 jsxIcon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f2ca2ee422d05e6e$export$2e2bcd8739ae039), {}),
                 action: onScreenshareClick
-            }, 
+            }
         ]
     });
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactjsxruntime.Fragment), {
@@ -7096,9 +7253,9 @@ const $a21b2aa064cb6c32$var$ControlBar = ()=>{
                                             jsxIcon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $cce7f1c9e9c29503$export$e57aa6aff2e1f414), {}),
                                             action: terminateCall,
                                             danger: true
-                                        }, 
+                                        }
                                     ]
-                                }, 
+                                }
                             ]
                         })
                     }),
@@ -7279,7 +7436,7 @@ const $681806ce8015ae4d$var$QuickConnect = ()=>{
     const themeContext = (0, $jQDcL$react.useContext)((0, $jQDcL$styledcomponents.ThemeContext));
     const QuickConnectContainerRef = (0, $jQDcL$react.useRef)(null);
     const QuickConnectRef = (0, $jQDcL$react.useRef)(null);
-    const { selfPeerId: selfPeerId , profile: profile , isQuickConnectPopupVisible: isQuickConnectPopupVisible , setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , options: options , orientation: orientation ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const { selfPeerId: selfPeerId , profile: profile , isQuickConnectPopupVisible: isQuickConnectPopupVisible , setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , options: options , orientation: orientation  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     (0, $326cea7dbbcb019a$export$71b2224f1ce5e08e)(QuickConnectContainerRef, ()=>{
         if (isQuickConnectPopupVisible) setIsQuickConnectPopupVisible(false);
     });
@@ -9133,7 +9290,7 @@ const $8a52c9358bc52b86$var$backgroundOptions = [
         title: "Blurred",
         value: "blurred",
         id: "background-blurred"
-    }, 
+    }
 ];
 const $8a52c9358bc52b86$var$VirtualBackgroundPopup = ()=>{
     const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
@@ -9406,7 +9563,7 @@ const $e6950939129bcd4b$export$8376625f8bb18347 = (0, ($parcel$interopDefault($j
 
 
 const $5f509eaff0d9c05a$var$Settings = ()=>{
-    const { isQuickConnectPopupVisible: isQuickConnectPopupVisible , isSettingsMenuVisible: isSettingsMenuVisible , isYoutubePopupVisible: isYoutubePopupVisible , isLinksharePopupVisible: isLinksharePopupVisible , isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible , isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen ,  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const { isQuickConnectPopupVisible: isQuickConnectPopupVisible , isSettingsMenuVisible: isSettingsMenuVisible , isYoutubePopupVisible: isYoutubePopupVisible , isLinksharePopupVisible: isLinksharePopupVisible , isVirtualBackgroundPopupVisible: isVirtualBackgroundPopupVisible , isBlockedFeaturePopupOpen: isBlockedFeaturePopupOpen  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const open = isQuickConnectPopupVisible || isSettingsMenuVisible || isYoutubePopupVisible || isBlockedFeaturePopupOpen || isLinksharePopupVisible || isVirtualBackgroundPopupVisible;
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $e6950939129bcd4b$export$8376625f8bb18347), {
         open: open,
@@ -10184,8 +10341,8 @@ const $c3d5253d9d597eb5$var$audioSource = new Blob([
         170,
         170,
         170,
-        170, 
-    ]), 
+        170
+    ])
 ], {
     type: "audio/mpeg"
 });
@@ -10286,120 +10443,1480 @@ const $e3bb2c5d0e5b45b5$export$914ddf2021ea8ee6 = (0, ($parcel$interopDefault($j
 
 
 
-const $ee8cb448c2c74888$var$currentTheme = (0, $9295e87e6b93e693$export$3bfd0d5209a8006a)();
-const $ee8cb448c2c74888$var$currentLanguage = (0, $393bda1b33846dfc$export$604ba5624273df44)();
-let $ee8cb448c2c74888$var$timestampCriticalError = -1;
-const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
-    const [selfPeerId, setSelfPeerId] = (0, $jQDcL$react.useState)(undefined);
-    const streamUIContainerRef = (0, $jQDcL$react.useRef)(null);
-    const videosContainerRef = (0, $jQDcL$react.useRef)(null);
-    const remoteTilesContainerRef = (0, $jQDcL$react.useRef)(null);
-    const [streamState, setStreamState] = (0, $jQDcL$react.useState)("streaming");
-    const [isQuickConnectPopupVisible, setIsQuickConnectPopupVisible] = (0, $jQDcL$react.useState)(false);
-    const [isSettingsMenuVisible, setIsSettingsMenuVisible] = (0, $jQDcL$react.useState)(false);
-    const [isYoutubePopupVisible, setIsYoutubePopupVisible] = (0, $jQDcL$react.useState)(false);
-    const [isLinksharePopupVisible, setIsLinksharePopupVisible] = (0, $jQDcL$react.useState)(false);
-    const [isVirtualBackgroundPopupVisible, setIsVirtualBackgroundPopupVisible] = (0, $jQDcL$react.useState)(false);
-    const [theme, setTheme] = (0, $jQDcL$react.useState)($ee8cb448c2c74888$var$currentTheme);
-    const [language, setLanguage] = (0, $jQDcL$react.useState)(options.language || $ee8cb448c2c74888$var$currentLanguage);
-    const [profile1, setProfile] = (0, $jQDcL$react.useState)({});
-    const [muted, setMuted] = (0, $jQDcL$react.useState)(true);
-    const [streaming, setStreaming] = (0, $jQDcL$react.useState)(false);
-    const [screensharing, setScreensharing] = (0, $jQDcL$react.useState)(false);
-    const [isAgent, setIsAgent] = (0, $jQDcL$react.useState)(false);
-    const [userInteractionTriggered, setUserInteractionTriggered] = (0, $jQDcL$react.useState)(false);
-    const [containerWidth, containerHeight] = (0, $56e1e7a85d8bf4bb$export$2b86bedf890eab8)(streamUIContainerRef.current);
-    const [isBlockedDevicesPopupOpen, setBlockedDevicesPopupOpen] = (0, $jQDcL$react.useState)(false);
-    const [isBlockedFeaturePopupOpen, setBlockedFeaturePopupOpen] = (0, $jQDcL$react.useState)(false);
-    const [permissions, setPermissions] = (0, $jQDcL$react.useState)([]);
-    const [plan, setPlan] = (0, $jQDcL$react.useState)(undefined);
-    const orientation = (containerWidth || window.screen.width) > (containerHeight || window.screen.height) ? "landscape" : "portrait";
-    const styledTheme = theme === "dark" ? (0, $9295e87e6b93e693$export$3e936a8db52a10a0) : (0, $9295e87e6b93e693$export$f30cb9bc4f736419);
-    const onWebcamUpdate = (event)=>{
-        if (event.type === "localVideoAvailable") setStreaming(true);
-        else setStreaming(false);
-    };
-    const onScreenshareUpdate = (event)=>{
-        if (event.type === "screenshareEnabled") setScreensharing(true);
-        else setScreensharing(false);
-    };
-    const onMicrophoneUpdate = (event)=>{
-        if (event.type === "microphoneMute") setMuted(true);
-        else setMuted(false);
-    };
-    const onDefaultAudioDeviceChange = (event)=>{
-        const micro = event.detail.label;
-        (0, $84c6cbcbb594d072$export$3a57e165650c636f)(`Connected to ${micro}`, {
-            duration: 3000,
-            icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0ac48791ff0bcc8e$export$2e2bcd8739ae039), {}),
-            messageStyle: {
-                fontWeight: 600
-            }
-        });
-    };
-    const onSelfProfileUpdate = (event)=>{
-        const { profile: profile  } = event.detail;
-        setProfile(profile);
-    };
-    const onCallEnd = ()=>{
-        (0, $c3d5253d9d597eb5$export$716eeec86fd18da7)();
-        setStreamState("ended");
-        setMuted(true);
-        setStreaming(false);
-        setScreensharing(false);
-        setUserInteractionTriggered(false);
-    };
-    const onCallTerminated = ()=>{
-        (0, $c3d5253d9d597eb5$export$716eeec86fd18da7)();
-        setStreamState("terminated");
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $6e29654b44f114e1$export$61dc559f8a0b9bcf(ref) {
+    const innerRef = (0, $jQDcL$react.useRef)(null);
+    (0, $jQDcL$react.useEffect)(()=>{
+        if (!ref) return;
+        if (typeof ref === "function") ref(innerRef.current);
+        else ref.current = innerRef.current;
+    });
+    return innerRef;
+}
+const $6e29654b44f114e1$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $jQDcL$react.forwardRef)(function Button({ children: children , ...otherProps }, forwardedRef) {
+    const ref = $6e29654b44f114e1$export$61dc559f8a0b9bcf(forwardedRef);
+    let state = (0, $jQDcL$reactstately.useToggleState)(otherProps);
+    const { buttonProps: buttonProps  } = (0, $jQDcL$reactaria.useToggleButton)(otherProps, state, ref);
+    const { isFocusVisible: isFocusVisible , focusProps: focusProps  } = (0, $jQDcL$reactaria.useFocusRing)();
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("button", {
+        className: (0, ($parcel$interopDefault($jQDcL$classnames)))("w-[76px] h-[40px]", otherProps.isSelected ? "bg-[#FFFFFF]" : "bg-[#FFFFFF] opacity-[0.4]", "rounded-full", "text-black", "flex items-center justify-center gap-[5px]", "text-base font-medium", "transition-colors ease-in-out", "focus:outline-none", {
+            "ring-[3px] ring-cta": isFocusVisible,
+            "cursor-not-allowed": buttonProps.disabled
+        }),
+        ...buttonProps,
+        ...focusProps,
+        ref: ref,
+        children: children
+    });
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $f98f91fb267f52c8$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $jQDcL$react.forwardRef)(function Button({ children: children , variant: variant = "primary" , size: size = "medium" , fullWidth: fullWidth = false , form: form , className: className , ...otherProps }, forwardedRef) {
+    const ref = (0, $6e29654b44f114e1$export$61dc559f8a0b9bcf)(forwardedRef);
+    const { buttonProps: buttonProps , isPressed: isPressed  } = (0, $jQDcL$reactaria.useButton)(otherProps, ref);
+    const { isFocusVisible: isFocusVisible , focusProps: focusProps  } = (0, $jQDcL$reactaria.useFocusRing)();
+    const { hoverProps: hoverProps , isHovered: isHovered  } = (0, $jQDcL$reactariainteractions.useHover)({
+        isDisabled: buttonProps.disabled
+    });
+    const isActive = isHovered || isFocusVisible || isPressed;
+    const variantStyle = {
+        primary: (0, ($parcel$interopDefault($jQDcL$classnames)))(isActive ? "bg-primaryLight" : "bg-primary", "text-white disabled:bg-secondaryLight"),
+        secondary: (0, ($parcel$interopDefault($jQDcL$classnames)))(isActive ? "bg-graySelected" : "bg-transparent", "text-primary border border-secondaryLight disabled:text-secondaryLight disabled:bg-graySelected"),
+        basic: (0, ($parcel$interopDefault($jQDcL$classnames)))(isActive ? "bg-graySelected" : "bg-white", "text-primary disabled:text-secondaryLight disabled:bg-graySelected"),
+        custom: ""
     };
-    const onInvalidRoom = ()=>{
-        setStreamState("expired");
+    const sizeStyle = {
+        large: "py-3 px-4 text-base rounded-lg",
+        medium: "py-[9px] px-3.5 text-base rounded-lg",
+        small: "py-2 px-3 text-sm rounded-lg",
+        extraSmall: "py-1.5 px-2.5 text-xs rounded-md",
+        custom: ""
     };
-    const onAgentIdentity = (event)=>{
-        const { success: success , email: email  } = event.detail;
-        if (success) {
-            setIsAgent(true);
-            if (email) (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).identify(null, {
-                email: email
-            });
-        } else (0, ($parcel$interopDefault($jQDcL$reacthottoast)))("An error occured while trying to join the room as an agent", {
-            className: "error"
-        });
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("button", {
+        className: (0, ($parcel$interopDefault($jQDcL$classnames)))(sizeStyle[size], variantStyle[variant], "flex items-center justify-center gap-[5px] font-medium", "transition-colors ease-in-out", "focus:outline-none", {
+            "ring-[3px] ring-cta": isFocusVisible,
+            "cursor-not-allowed": buttonProps.disabled,
+            "w-full": fullWidth
+        }, className),
+        ...buttonProps,
+        ...focusProps,
+        ...hoverProps,
+        form: form,
+        ref: ref,
+        children: children
+    });
+});
+
+
+function $48c2553f62767e40$export$2b77a92f1a5ad772(props) {
+    const { children: children , state: state , size: size = "small" , title: title , description: description , primaryAction: primaryAction , secondaryAction: secondaryAction , centered: centered = false  } = props;
+    const ref = (0, ($parcel$interopDefault($jQDcL$react))).useRef(null);
+    const { modalProps: modalProps , underlayProps: underlayProps  } = (0, $jQDcL$reactariaoverlays.useModalOverlay)({
+        isDismissable: true,
+        ...props
+    }, state, ref);
+    const [exited, setExited] = (0, $jQDcL$react.useState)(!state.isOpen);
+    const viewport = (0, $jQDcL$reactariautils.useViewportSize)();
+    const maxHeight = viewport.height - 64;
+    const modalSize = {
+        small: "max-w-[400px] mx-[20px]",
+        medium: "max-w-[600px]",
+        large: "max-w-[800px]"
     };
-    const onCriticalError = (event)=>{
-        const duration = 20000;
-        const now = Date.now();
-        if (event.detail.code === "USERLIMIT") {
-            setStreamState("full");
-            return;
-        }
-        if ($ee8cb448c2c74888$var$timestampCriticalError !== -1 && $ee8cb448c2c74888$var$timestampCriticalError + duration > now) return;
-        $ee8cb448c2c74888$var$timestampCriticalError = now;
-        (0, $84c6cbcbb594d072$export$3a57e165650c636f)(`A critical error has occurred (error ${event.detail.code}).`, {
-            icon: (0, $e8ac63718934c648$export$c7df1b15b59b1df2),
-            button: {
-                text: "Reload",
-                action: ()=>{
-                    window.location.reload();
-                }
+    // Don't render anything if the modal is not open and we're not animating out.
+    if (!(state.isOpen || !exited)) return null;
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactariaoverlays.Overlay), {
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacttransitiongroup.CSSTransition), {
+            in: state.isOpen,
+            appear: true,
+            onEntered: ()=>setExited(false),
+            onExited: ()=>setExited(true),
+            timeout: {
+                enter: 0,
+                exit: 300
             },
-            duration: duration
-        });
-    };
-    (0, $jQDcL$react.useEffect)(()=>{
-        try {
-            localStorage.setItem("stream_ui_theme", theme);
-        } catch (localStorageError) {
-            console.warn(localStorageError);
-        }
-    }, [
-        theme
-    ]);
-    (0, $jQDcL$react.useEffect)(()=>{
-        try {
-            localStorage.setItem("stream_ui_language", language);
-            (0, $b45c0bcc142f0b5e$export$2e2bcd8739ae039).changeLanguage(language);
+            classNames: {
+                enter: "opacity-0",
+                enterDone: "opacity-1 transition ease-in",
+                exit: "opacity-0 transition ease-out"
+            },
+            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                className: "fixed z-[100] inset-0 bg-black bg-opacity-90 flex justify-center items-center inter",
+                ...underlayProps,
+                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacttransitiongroup.CSSTransition), {
+                    in: state.isOpen,
+                    appear: true,
+                    nodeRef: ref,
+                    timeout: {
+                        enter: 0,
+                        exit: 300
+                    },
+                    classNames: {
+                        appear: "translate-y-2",
+                        appearDone: "translate-y-0 transition ease-in",
+                        exit: "translate-y-2 transition ease-out"
+                    },
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                        ...modalProps,
+                        ref: ref,
+                        className: (0, ($parcel$interopDefault($jQDcL$classnames)))("bg-white rounded-[10px] z-[1] overflow-auto focus:outline-none", modalSize[size]),
+                        style: {
+                            maxHeight: `${maxHeight}px`
+                        },
+                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                            className: "flex flex-col gap-5 px-5 py-[25px]",
+                            children: [
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                                    className: (0, ($parcel$interopDefault($jQDcL$classnames)))("flex flex-col gap-[5px]", {
+                                        "text-center": centered
+                                    }),
+                                    children: [
+                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("h2", {
+                                            className: "text-xl font-medium",
+                                            children: title
+                                        }),
+                                        description && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("p", {
+                                            className: "text-sm text-secondary",
+                                            children: description
+                                        })
+                                    ]
+                                }),
+                                children,
+                                (primaryAction || secondaryAction) && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                                    className: (0, ($parcel$interopDefault($jQDcL$classnames)))("flex justify-end gap-2.5", centered ? "justify-center" : "justify-end"),
+                                    children: [
+                                        typeof secondaryAction === "string" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
+                                            variant: "secondary",
+                                            onPress: state.close,
+                                            fullWidth: centered,
+                                            children: secondaryAction
+                                        }),
+                                        typeof secondaryAction === "function" && secondaryAction({
+                                            close: state.close
+                                        }),
+                                        typeof primaryAction === "string" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
+                                            onPress: state.close,
+                                            fullWidth: centered,
+                                            children: primaryAction
+                                        }),
+                                        typeof primaryAction === "function" && primaryAction({
+                                            close: state.close
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                })
+            })
+        })
+    });
+}
+
+
+
+
+const $bec7bca3a7448591$export$f9da3144ae2525a3 = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("svg", {
+        width: "20",
+        height: "21",
+        viewBox: "0 0 20 21",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        style: {
+            display: "inline"
+        },
+        transform: "translate(0 -1)",
+        children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                d: "M10 2.167a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.333Z",
+                fill: "#1D1C20"
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                d: "M6.76 5.65a5.833 5.833 0 1 1 6.481 9.7 5.833 5.833 0 0 1-6.481-9.7Z",
+                fill: "#F12828"
+            })
+        ]
+    });
+const $bec7bca3a7448591$export$c6a849fd9d9d93a2 = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        style: {
+            display: "inline"
+        },
+        transform: "translate(0 -1)",
+        children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                d: "M10 1.667a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.333Z",
+                fill: "#1D1C20"
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                d: "M7.5 6.667h5a.833.833 0 0 1 .833.833v5a.833.833 0 0 1-.834.834h-5a.833.833 0 0 1-.833-.834v-5a.833.833 0 0 1 .833-.833Z",
+                fill: "#F12828"
+            })
+        ]
+    });
+const $bec7bca3a7448591$export$dce36e07153365d = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        style: {
+            display: "inline"
+        },
+        transform: "translate(0 -1)",
+        children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                d: "M10 1.667a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm0 15a6.666 6.666 0 1 1 0-13.333 6.666 6.666 0 0 1 0 13.333Z",
+                fill: "#1D1C20"
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+                d: "M6.76 5.15a5.833 5.833 0 1 1 6.481 9.7 5.833 5.833 0 0 1-6.481-9.7Z",
+                fill: "#1D1C20"
+            })
+        ]
+    });
+
+
+
+
+
+const $b46da51ab7ae33e7$var$Text = ({ children: children  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
+        className: "w-full text-base text-primaryLight font-normal leading-[20px]",
+        children: children
+    });
+const $b46da51ab7ae33e7$var$Bold = ({ children: children  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
+        className: "text-primary font-medium",
+        children: children
+    });
+const $b46da51ab7ae33e7$var$InstructionRow = ({ children: children , index: index  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+        className: "flex flex-row justify-center gap-[5px]",
+        children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                className: "flex items-center justify-center min-w-[24px] h-[24px] rounded-[50%] bg-secondaryVLight",
+                children: index
+            }),
+            children
+        ]
+    });
+const $b46da51ab7ae33e7$export$788cb893d96254c8 = ({ state: state , type: type  })=>{
+    const [permissionsState, setPermissionsState] = (0, $jQDcL$react.useState)("idle");
+    const [isRoomReady, setRoomReady] = (0, $jQDcL$react.useState)(false);
+    const { orientation: orientation  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const device = orientation === "landscape" ? "desktop" : "mobile";
+    const videoLength = permissionsState === "granted" ? "short" : "full";
+    const videoType = type === "picture" ? "photo" : "video";
+    const onDeviceEnabled = ()=>setPermissionsState("granted");
+    const onEnterRoom = ()=>setRoomReady(true);
+    const onLeaveRoom = ()=>setRoomReady(false);
+    const ref = (0, $jQDcL$react.useRef)(null);
+    const title = (0, $jQDcL$react.useMemo)(()=>{
+        if (permissionsState === "refused") return "Something went wrong!";
+        if (type === "picture") return "Ready to take a shot?";
+        return "Ready to record a video?";
+    }, [
+        permissionsState,
+        type
+    ]);
+    (0, $jQDcL$react.useEffect)(()=>{
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onDeviceEnabled);
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("microphoneEnabled", onDeviceEnabled);
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("leaveRoom", onLeaveRoom);
+        return ()=>{
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onDeviceEnabled);
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("microphoneEnabled", onDeviceEnabled);
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("enterRoom", onEnterRoom);
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("leaveRoom", onLeaveRoom);
+        };
+    }, []);
+    const permissionsInstructionIndex = Number(permissionsState !== "granted");
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $48c2553f62767e40$export$2b77a92f1a5ad772), {
+        title: title,
+        state: state,
+        centered: permissionsState !== "refused",
+        isDismissable: false,
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+            className: "flex flex-col gap-[20px]",
+            children: [
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                    className: "flex flex-col gap-[10px]",
+                    ref: ref,
+                    children: permissionsState === "refused" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
+                        children: "Without camera and microphone access, you can't take photos or videos to share with the support team. Please grant access in your browser settings."
+                    }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
+                        children: [
+                            permissionsState !== "granted" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
+                                index: 1,
+                                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
+                                    children: [
+                                        "When prompted, ",
+                                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                            children: "allow access"
+                                        }),
+                                        " to camera and microphone."
+                                    ]
+                                })
+                            }),
+                            type === "picture" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
+                                children: [
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
+                                        index: 1 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
+                                            children: [
+                                                "Tap the ",
+                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$dce36e07153365d), {}),
+                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                    children: " Camera button"
+                                                }),
+                                                " to take a photo."
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
+                                        index: 2 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Text, {
+                                            children: "Don't hesitate to take multiple photos for more detail."
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
+                                        index: 3 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
+                                            children: [
+                                                "You can review your photo and then ",
+                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                    children: "send it when you're done."
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            }),
+                            type === "video" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
+                                children: [
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
+                                        index: 1 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
+                                            children: [
+                                                "Tap the ",
+                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$f9da3144ae2525a3), {}),
+                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                    children: " Record button"
+                                                }),
+                                                " to start a recording."
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
+                                        index: 2 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
+                                            children: [
+                                                "You can ",
+                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                    children: "speak during"
+                                                }),
+                                                " the recording for added detail."
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
+                                        index: 3 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
+                                            children: [
+                                                "When you're finished, tap the ",
+                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $bec7bca3a7448591$export$c6a849fd9d9d93a2), {}),
+                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                    children: " Stop button"
+                                                }),
+                                                "."
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$InstructionRow, {
+                                        index: 4 + permissionsInstructionIndex,
+                                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)($b46da51ab7ae33e7$var$Text, {
+                                            children: [
+                                                "You can review your video and then ",
+                                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)($b46da51ab7ae33e7$var$Bold, {
+                                                    children: "send it when you're done"
+                                                }),
+                                                "."
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                permissionsState !== "refused" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                    className: "flex items-center justify-center rounded-[8px] overflow-hidden",
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("video", {
+                        src: `${"https://stream-assets.snapcall.io"}/animations/${device}-assist-onboarding-${videoType}-${videoLength}.mp4`,
+                        playsInline: true,
+                        autoPlay: true,
+                        muted: true,
+                        loop: true
+                    })
+                }),
+                permissionsState === "refused" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
+                    onPress: ()=>window.location.reload(),
+                    children: "Allow access"
+                }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactjsxruntime.Fragment), {
+                    children: permissionsState === "granted" ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
+                        onPress: state.close,
+                        children: "Okay"
+                    }) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
+                        isDisabled: permissionsState === "requesting" || isRoomReady === false,
+                        onPress: async ()=>{
+                            setPermissionsState("requesting");
+                            try {
+                                const mediaResult = await navigator.mediaDevices.getUserMedia({
+                                    audio: true,
+                                    video: true
+                                });
+                                mediaResult.getTracks().forEach((track)=>track.stop());
+                                await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableMicrophone();
+                                await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).enableVideo({
+                                    resolution: "vga",
+                                    frameRate: 20,
+                                    facingMode: "environment"
+                                });
+                            } catch  {
+                                setPermissionsState("refused");
+                            }
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $41e530447f5fd995$export$2e2bcd8739ae039), {}),
+                            "Allow access to cam/mic"
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+
+
+
+
+
+
+
+
+const $4dac51e936eb334f$export$f9d8408fefd786da = ({ state: state , setReady: setReady  })=>{
+    const QRCodeRef = (0, $jQDcL$react.useRef)(null);
+    (0, $jQDcL$react.useEffect)(()=>{
+        $jQDcL$qrcode.toCanvas(QRCodeRef.current, window.location.href, {
+            errorCorrectionLevel: "M"
+        });
+    }, []);
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $48c2553f62767e40$export$2b77a92f1a5ad772), {
+        centered: true,
+        title: "Switch to your mobile",
+        description: "Enjoy an even more convenient experience by using your phone to take photos and record videos.",
+        state: state,
+        children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                className: "pb-[20px]",
+                children: [
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                        className: "flex flex-1 items-center justify-center relative",
+                        children: [
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                                className: "absolute w-[70px] h-[70px]",
+                                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $8745dbdbe55f5ff3$export$2e2bcd8739ae039), {})
+                            }),
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("canvas", {
+                                ref: QRCodeRef
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("p", {
+                        className: "flex items-center justify-center text-xs text-primaryLight",
+                        children: "Scan this QR code with a compatible device."
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
+                onPress: ()=>{
+                    setReady(true);
+                    state.close();
+                },
+                children: "Use desktop version"
+            })
+        ]
+    });
+};
+
+
+function $d7eacc710221ffb1$export$fc3bf4634b488af8({ mode: mode  }) {
+    const { orientation: orientation  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const desktop = orientation === "landscape";
+    const [ready, setReady] = (0, $jQDcL$react.useState)(!desktop);
+    (0, $jQDcL$react.useEffect)(()=>{
+        if (ready) {
+            setIsPhotoInstructionsModalOpen(mode === "photo" && ready);
+            setIsVideoInstructionsModalOpen(mode === "video" && ready);
+        }
+    }, [
+        ready,
+        mode
+    ]);
+    const [isPhotoInstructionsModalOpen, setIsPhotoInstructionsModalOpen] = (0, $jQDcL$react.useState)(mode === "photo" && ready);
+    const [isVideoInstructionsModalOpen, setIsVideoInstructionsModalOpen] = (0, $jQDcL$react.useState)(mode === "video" && ready);
+    const photoInstructionsModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({
+        isOpen: isPhotoInstructionsModalOpen,
+        onOpenChange: setIsPhotoInstructionsModalOpen
+    });
+    const videoInstructionsModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({
+        isOpen: isVideoInstructionsModalOpen,
+        onOpenChange: setIsVideoInstructionsModalOpen
+    });
+    return {
+        photoInstructionsModalState: photoInstructionsModalState,
+        videoInstructionsModalState: videoInstructionsModalState,
+        ready: ready,
+        setReady: setReady
+    };
+}
+const $d7eacc710221ffb1$export$bee10e8ab511933f = ({ state: state  })=>{
+    const [isSwitchToMobileModalOpen, setIsSwitchToMobileOpen] = (0, $jQDcL$react.useState)(!state.ready);
+    const switchToMobileModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({
+        isOpen: isSwitchToMobileModalOpen,
+        onOpenChange: setIsSwitchToMobileOpen
+    });
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b46da51ab7ae33e7$export$788cb893d96254c8), {
+                state: state.photoInstructionsModalState,
+                type: "picture"
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b46da51ab7ae33e7$export$788cb893d96254c8), {
+                state: state.videoInstructionsModalState,
+                type: "video"
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $4dac51e936eb334f$export$f9d8408fefd786da), {
+                state: switchToMobileModalState,
+                setReady: state.setReady
+            })
+        ]
+    });
+};
+
+
+function $6f223c293b335d40$export$bd7b6af6aa16550c({ photo: photo = true  }) {
+    const [isPhoto, setPhoto] = (0, $jQDcL$react.useState)(photo);
+    const [streaming, setStreaming] = (0, $jQDcL$react.useState)(false);
+    return {
+        photo: isPhoto,
+        setPhoto: setPhoto,
+        streaming: streaming,
+        setStreaming: setStreaming
+    };
+}
+const $6f223c293b335d40$export$11a6fe490bbc4873 = (props)=>{
+    const setupModalsState = (0, $d7eacc710221ffb1$export$fc3bf4634b488af8)({
+        mode: props.state.photo ? "photo" : "video"
+    });
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+        className: "flex flex-col bg-primary h-[150px] w-full max-w-[400px] rounded-[15px] p-2.5 gap-2.5",
+        children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $d7eacc710221ffb1$export$bee10e8ab511933f), {
+                state: setupModalsState
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                className: "flex flex-1 flex-row px-[10px] w-full",
+                children: [
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                        className: "flex flex-row flex-auto items-center gap-[10px]",
+                        children: [
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6d8b37b4bd2444ef$export$3741e4ac43f04ca2), {}),
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                                className: " text-white text-base font-medium",
+                                children: "SnapCall"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                        className: "flex flex-row justify-end flex-auto items-center gap-[10px] ",
+                        children: [
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6e29654b44f114e1$export$d2b052e7b4be1756), {
+                                onPress: ()=>{
+                                    if (!props.state.streaming) {
+                                        props.state.setPhoto(true);
+                                        setupModalsState.photoInstructionsModalState.open();
+                                    }
+                                },
+                                isSelected: props.state.photo,
+                                children: "Photo"
+                            }),
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6e29654b44f114e1$export$d2b052e7b4be1756), {
+                                onPress: ()=>{
+                                    if (!props.state.streaming) {
+                                        props.state.setPhoto(false);
+                                        setupModalsState.videoInstructionsModalState.open();
+                                    }
+                                },
+                                isSelected: !props.state.photo,
+                                children: "Video"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                className: "flex flex-row flex-1 items-center justify-between w-full ",
+                children: [
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                        className: "w-[60px] h-[60px]",
+                        children: props.thumbnail
+                    }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                        className: "bg-white rounded-full w-[72px] h-[72px] p-[3px]",
+                        onClick: ()=>props.onCapturePress(),
+                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                            className: "bg-primary rounded-full w-full h-full p-[3px] flex items-center justify-center cursor-pointer",
+                            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                                className: (0, ($parcel$interopDefault($jQDcL$classnames)))("w-full h-full transition-[transform,border-radius] duration-300", props.state.photo ? "bg-white" : "bg-[#f12828]", props.state.streaming ? "rounded-[5px] scale-[0.4]" : "rounded-[60px]")
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                        onClick: props.onSwitch,
+                        className: "bg-[#565656] rounded-full w-[56px] h-[56px] flex items-center justify-center cursor-pointer",
+                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ec8eb252693ca260$export$aefffb14595958fe), {})
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $14fb55a0ce44e022$export$4589ed81930b555c(props) {
+    const { children: children , state: state  } = props;
+    const ref = (0, ($parcel$interopDefault($jQDcL$react))).useRef(null);
+    const { orientation: orientation  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const { modalProps: modalProps , underlayProps: underlayProps  } = (0, $jQDcL$reactariaoverlays.useModalOverlay)(props, state, ref);
+    const [exited, setExited] = (0, $jQDcL$react.useState)(!state.isOpen);
+    const viewport = (0, $jQDcL$reactariautils.useViewportSize)();
+    const maxHeight = viewport.height - 64;
+    const desktop = orientation === "landscape";
+    // Don't render anything if the modal is not open and we're not animating out.
+    if (!(state.isOpen || !exited)) return null;
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactariaoverlays.Overlay), {
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacttransitiongroup.CSSTransition), {
+            in: state.isOpen,
+            appear: true,
+            onEntered: ()=>setExited(false),
+            onExited: ()=>setExited(true),
+            timeout: {
+                enter: 0,
+                exit: 300
+            },
+            classNames: {
+                enter: "opacity-0",
+                enterDone: "opacity-1 transition ease-in",
+                exit: "opacity-0 transition ease-out"
+            },
+            children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                className: (0, ($parcel$interopDefault($jQDcL$classnames)))("fixed z-[100] inset-0 bg-underlay flex justify-center inter", desktop ? "items-center" : "items-end"),
+                ...underlayProps,
+                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacttransitiongroup.CSSTransition), {
+                    in: state.isOpen,
+                    appear: true,
+                    nodeRef: ref,
+                    timeout: {
+                        enter: 0,
+                        exit: 300
+                    },
+                    classNames: {
+                        appear: desktop ? "translate-y-[200%]" : "translate-y-full",
+                        appearDone: "translate-y-0 transition duration-300 ease-out",
+                        exit: (0, ($parcel$interopDefault($jQDcL$classnames)))("transition ease-out", desktop ? "translate-y-[200%]" : "translate-y-full")
+                    },
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                        ...modalProps,
+                        ref: ref,
+                        className: (0, ($parcel$interopDefault($jQDcL$classnames)))("bg-white z-[1] overflow-auto focus:outline-none", desktop ? "translate-y-[200%] rounded-[15px]" : "translate-y-full rounded-t-[15px]"),
+                        style: {
+                            maxHeight: `${maxHeight}px`
+                        },
+                        children: children
+                    })
+                })
+            })
+        })
+    });
+}
+
+
+
+
+
+
+
+
+
+
+
+const $f4dfc8739f142557$export$480db61f4dcd7727 = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
+        width: "12",
+        height: "15",
+        viewBox: "0 0 12 15",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+            d: "M11.103 5.747 2.677.272A1.614 1.614 0 0 0 1.773 0a1.62 1.62 0 0 0-.9.288 1.886 1.886 0 0 0-.64.733A2.235 2.235 0 0 0 0 2.025v10.95c0 .352.08.699.233 1.004.154.305.375.558.64.733.273.186.584.285.9.288.317.003.63-.091.904-.272l8.426-5.475c.272-.173.498-.427.656-.736.158-.308.241-.66.241-1.017a2.24 2.24 0 0 0-.24-1.017 1.884 1.884 0 0 0-.657-.736Z",
+            fill: "#fff"
+        })
+    });
+
+
+const $dc46069ab394f8fc$export$1cd1efc78cb52ca5 = ({ asset: asset , onClick: onClick  })=>{
+    if (!asset) return null;
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+        className: "flex items-center justify-center w-[60px] h-[60px] rounded-[8px] cursor-pointer bg-white relative overflow-hidden",
+        onClick: onClick,
+        children: [
+            asset?.type === "picture" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("img", {
+                className: "cursor-pointer bg-white",
+                src: asset.objectUrl,
+                alt: "last shot"
+            }),
+            asset?.type === "video" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
+                children: [
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("video", {
+                        src: asset.objectUrl,
+                        className: "min-w-[100%] min-h-[100%] object-cover"
+                    }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                        className: "absolute left-0 top-0 flex items-center justify-center w-[60px] h-[60px] bg-primary opacity-50",
+                        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $f4dfc8739f142557$export$480db61f4dcd7727), {})
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+
+
+
+const $b0f41bfff6a6128d$export$28e1ba20e0688eb7 = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("svg", {
+        width: "18",
+        height: "19",
+        viewBox: "0 0 18 19",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("path", {
+            d: "M7.5 14a.75.75 0 0 0 .75-.75v-4.5a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 .75.75ZM15 5h-3v-.75A2.25 2.25 0 0 0 9.75 2h-1.5A2.25 2.25 0 0 0 6 4.25V5H3a.75.75 0 0 0 0 1.5h.75v8.25A2.25 2.25 0 0 0 6 17h6a2.25 2.25 0 0 0 2.25-2.25V6.5H15A.75.75 0 1 0 15 5Zm-7.5-.75a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 .75.75V5h-3v-.75Zm5.25 10.5a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75V6.5h7.5v8.25ZM10.5 14a.75.75 0 0 0 .75-.75v-4.5a.75.75 0 1 0-1.5 0v4.5a.75.75 0 0 0 .75.75Z",
+            fill: "#fff"
+        })
+    });
+
+
+const $1571ff3dce984dbd$var$dateFormat = new Intl.DateTimeFormat("default", {
+    dateStyle: "short"
+});
+const $1571ff3dce984dbd$var$timeFormat = new Intl.DateTimeFormat("default", {
+    hour: "numeric",
+    minute: "2-digit"
+});
+function $1571ff3dce984dbd$var$formatDate(date) {
+    const ampm = date.getHours() % 12 >= 12 ? "PM" : "AM";
+    return `${$1571ff3dce984dbd$var$dateFormat.format(date)} at ${$1571ff3dce984dbd$var$timeFormat.format(date)} ${ampm}`;
+}
+const $1571ff3dce984dbd$export$c9169049516d8bcf = ({ asset: asset , index: index , removeAsset: removeAsset  })=>{
+    const confirmRemovalModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+        className: "flex flex-row justify-between items-center",
+        children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $48c2553f62767e40$export$2b77a92f1a5ad772), {
+                title: "Confirm removal",
+                state: confirmRemovalModalState,
+                description: "Are you sure you want to remove this photo/video? This action cannot be undone.",
+                primaryAction: ({ close: close  })=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
+                        onPress: async ()=>{
+                            await removeAsset(asset);
+                            close();
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $b0f41bfff6a6128d$export$28e1ba20e0688eb7), {}),
+                            "Confirm"
+                        ]
+                    }),
+                secondaryAction: "Cancel"
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                className: "flex flex-row gap-[10px] items-center",
+                children: [
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $dc46069ab394f8fc$export$1cd1efc78cb52ca5), {
+                        asset: asset
+                    }),
+                    /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("span", {
+                        className: "text-sm",
+                        style: {
+                            hyphens: "manual"
+                        },
+                        children: [
+                            asset.type === "picture" ? "Photo" : "Video",
+                            " ",
+                            index + 1,
+                            " \xb7",
+                            " ",
+                            $1571ff3dce984dbd$var$formatDate(new Date(asset.timestamp))
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
+                className: "text-xs font-bold underline cursor-pointer ml-[10px]",
+                onClick: confirmRemovalModalState.open,
+                children: "Remove"
+            })
+        ]
+    }, asset.assetId);
+};
+
+
+
+
+const $aaab1e39040d455b$export$4fa52f68b1c78fbf = ()=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+        className: "w-screen max-w-[400px] h-[235px] px-[20px] py-[25px] gap-[10px]",
+        children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                className: "w-[360px] h-[93px]",
+                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, ($parcel$interopDefault($jQDcL$reactcontentloader))), {
+                    width: 360,
+                    height: 93,
+                    foregroundColor: "#EBEBEB",
+                    children: [
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("rect", {
+                            x: 0,
+                            y: 0,
+                            rx: 8,
+                            ry: 8,
+                            width: 230,
+                            height: 16
+                        }),
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("rect", {
+                            x: 0,
+                            y: 33,
+                            rx: 8,
+                            ry: 8,
+                            width: 60,
+                            height: 60
+                        }),
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("rect", {
+                            x: 70,
+                            y: 56,
+                            rx: 7,
+                            ry: 7,
+                            width: 180,
+                            height: 14
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                className: "flex items-center justify-center w-full h-[40px] rounded-[8px] border border-primaryLight mt-[10px]",
+                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, ($parcel$interopDefault($jQDcL$reactcontentloader))), {
+                    width: 120,
+                    height: 14,
+                    foregroundColor: "#EBEBEB",
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("rect", {
+                        x: 0,
+                        y: 0,
+                        rx: 7,
+                        ry: 7,
+                        width: 120,
+                        height: 14
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                className: "flex items-center justify-center w-full h-[40px] rounded-[8px] bg-primary mt-[10px]",
+                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, ($parcel$interopDefault($jQDcL$reactcontentloader))), {
+                    width: 120,
+                    height: 14,
+                    foregroundColor: "#EBEBEB",
+                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("rect", {
+                        x: 0,
+                        y: 0,
+                        rx: 7,
+                        ry: 7,
+                        width: 120,
+                        height: 14
+                    })
+                })
+            })
+        ]
+    });
+
+
+const $0bca8bbbf74ddff9$export$5c334f209b1aa661 = ({ assets: assets , state: state , onSendAssets: onSendAssets , removeAsset: removeAsset , loading: loading  })=>{
+    const ref = (0, $jQDcL$react.useRef)(null);
+    const [assetKind, setAssetKind] = (0, $jQDcL$react.useState)(assets[assets.length - 1]?.type === "picture" ? "photo" : "video");
+    const { orientation: orientation  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const desktop = orientation === "landscape";
+    (0, $jQDcL$react.useEffect)(()=>{
+        if (assets.length < 1) return;
+        setAssetKind(assets[assets.length - 1]?.type === "picture" ? "photo" : "video");
+    }, [
+        assets
+    ]);
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reacttransitiongroup.CSSTransition), {
+                in: state.isOpen,
+                appear: true,
+                timeout: {
+                    enter: 0,
+                    exit: 300
+                },
+                classNames: {
+                    enter: "opacity-0",
+                    enterDone: "opacity-90 transition ease-in",
+                    exit: "opacity-0 transition ease-out"
+                },
+                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                    className: (0, ($parcel$interopDefault($jQDcL$classnames)))("fixed justify-center w-screen h-screen top-0 left-0 bg-black z-[1]", state.isOpen ? "flex" : "hidden"),
+                    children: loading && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                        className: (0, ($parcel$interopDefault($jQDcL$classnames)))("flex mt-[50px] h-fit opacity-1", desktop ? "flex-row items-center w-[400px]" : "flex-col items-center text-center w-[320px]"),
+                        children: [
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                                className: "w-[24px] h-[24px] m-[10px]",
+                                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $39ceb925b3865754$export$2e2bcd8739ae039), {})
+                            }),
+                            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("span", {
+                                className: "text-sm text-white",
+                                children: [
+                                    "Please wait a moment while your ",
+                                    loading,
+                                    " is being processed...",
+                                    loading === "video" ? " It may take up to 15 seconds for a video to be ready." : ""
+                                ]
+                            })
+                        ]
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $14fb55a0ce44e022$export$4589ed81930b555c), {
+                state: {
+                    ...state,
+                    close: loading ? ()=>{} : state.close
+                },
+                children: loading ? /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $aaab1e39040d455b$export$4fa52f68b1c78fbf), {}) : /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                    ref: ref,
+                    className: "flex flex-col w-screen max-w-[400px] text-primary",
+                    children: [
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                            className: "flex flex-row justify-between p-[12px]",
+                            children: [
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("h1", {
+                                    className: "text-lg first-letter:capitalize",
+                                    children: [
+                                        assetKind,
+                                        " successfully captured"
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                                    className: "flex justify-center items-center rounded-full bg-[#f3f3f3] h-[30px] w-[30px] cursor-pointer",
+                                    onClick: state.close,
+                                    children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6f36db3b1217f099$export$2e2bcd8739ae039), {
+                                        color: "#565656"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                            className: "flex flex-col px-[20px] pb-[25px] gap-[10px]",
+                            children: [
+                                assets.map((asset, index)=>/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $1571ff3dce984dbd$export$c9169049516d8bcf), {
+                                        asset: asset,
+                                        index: index,
+                                        removeAsset: removeAsset
+                                    }, asset.assetId)),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
+                                    variant: "secondary",
+                                    onPress: state.close,
+                                    children: [
+                                        "Take new ",
+                                        assetKind
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $f98f91fb267f52c8$export$353f5b6fc5456de1), {
+                                    onPress: ()=>{
+                                        onSendAssets();
+                                        state.close();
+                                    },
+                                    children: [
+                                        "Send ",
+                                        assets.length > 1 ? `${assets.length} elements` : assetKind
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+
+
+
+
+
+
+const $47dee8347993fb81$export$53819c0e58f98d49 = (props)=>{
+    const [countdown, setCountdown] = (0, $jQDcL$react.useState)(props.initialValue);
+    (0, $jQDcL$react.useEffect)(()=>{
+        if (countdown === undefined) return;
+        const t = setTimeout(()=>{
+            if (countdown === 1) props.onFinish();
+            setCountdown(countdown - 1);
+        }, 1000);
+        return ()=>clearTimeout(t);
+    }, [
+        countdown,
+        props
+    ]);
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+        className: "absolute w-full h-full flex justify-center items-center bg-black/[.6] z-50",
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
+            className: "text-white/80 text-[112px] font-medium",
+            children: countdown
+        })
+    });
+};
+
+
+const $7925c01e7577d264$var$timerText = (delta)=>{
+    const d = [
+        Math.floor(delta / 60),
+        Math.round(delta % 60)
+    ].map((n)=>`${n < 10 ? "0" : ""}${n}`);
+    return d.join(":");
+};
+const $7925c01e7577d264$export$336a011955157f9a = ()=>{
+    const [startRecordTime, setStartRecordTime] = (0, $jQDcL$react.useState)(undefined);
+    const [timer, setTimer] = (0, $jQDcL$react.useState)(0);
+    const [countdownVisible, setCountdownVisible] = (0, $jQDcL$react.useState)(false);
+    const videoElementRef = (0, $jQDcL$react.useRef)(null);
+    const [assets, setAssets] = (0, $jQDcL$react.useState)([]);
+    const [assetLoading, setAssetLoading] = (0, $jQDcL$react.useState)(null);
+    const [isAssetsPopupStateOpen, setIsAssetsPopupStateOpen] = (0, $jQDcL$react.useState)(false);
+    const [facingMode, setFacingMode] = (0, $jQDcL$react.useState)("user");
+    const assetsPopupState = (0, $jQDcL$reactstately.useOverlayTriggerState)({
+        isOpen: isAssetsPopupStateOpen,
+        onOpenChange: setIsAssetsPopupStateOpen
+    });
+    const sendAssetsModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
+    const [flashAnimation, setFlashAnimation] = (0, $jQDcL$react.useState)(false);
+    const menuBarState = (0, $6f223c293b335d40$export$bd7b6af6aa16550c)({});
+    const exitStreaming = (0, $jQDcL$react.useCallback)(()=>{
+        menuBarState.setStreaming(false);
+        setStartRecordTime(undefined);
+        setCountdownVisible(false);
+        setTimer(0);
+    }, [
+        menuBarState
+    ]);
+    const onLocalVideoChange = (event)=>{
+        if (!event.detail?.camera?.device || !videoElementRef.current) return;
+        const { facingMode: newFacingMode  } = (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).requestLocalVideo(videoElementRef?.current);
+        setFacingMode(newFacingMode);
+    };
+    const onStopRecord = (0, $jQDcL$react.useCallback)((event)=>{
+        const { url: url , assetId: assetId  } = event.detail;
+        exitStreaming();
+        setAssetLoading(null);
+        setAssets([
+            ...assets,
+            {
+                type: "video",
+                timestamp: Date.now(),
+                objectUrl: url,
+                assetId: assetId
+            }
+        ]);
+    }, [
+        assets,
+        exitStreaming
+    ]);
+    const onPhotoCapture = async (videoElement)=>{
+        const timestamp = Date.now();
+        setAssetLoading("picture");
+        const image = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).captureVideo(videoElement);
+        const { url: url , assetId: assetId  } = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).saveCapture(image);
+        setAssetLoading(null);
+        setAssets([
+            ...assets,
+            {
+                type: "picture",
+                timestamp: timestamp,
+                objectUrl: url,
+                assetId: assetId
+            }
+        ]);
+    };
+    const removeAsset = (0, $jQDcL$react.useCallback)(async (asset)=>{
+        if (!asset.assetId) return;
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).deleteCapture(asset.assetId);
+        const newAssets = assets.filter((item)=>item.assetId !== asset.assetId);
+        setAssets(newAssets);
+        if (newAssets.length < 1) setIsAssetsPopupStateOpen(false);
+    }, [
+        assets
+    ]);
+    (0, $jQDcL$react.useEffect)(()=>{
+        if (startRecordTime === undefined) return;
+        const interval = setInterval(()=>{
+            const delta = (Date.now() - startRecordTime) / 1000;
+            setTimer(delta);
+        }, 1000);
+        return ()=>clearInterval(interval);
+    }, [
+        startRecordTime
+    ]);
+    (0, $jQDcL$react.useEffect)(()=>{
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onLocalVideoChange);
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("localVideoChange", onLocalVideoChange);
+        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("recordStopped", onStopRecord);
+        return ()=>{
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("localVideoChange", onLocalVideoChange);
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onLocalVideoChange);
+            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).removeEventListener("recordStopped", onStopRecord);
+        };
+    }, [
+        onStopRecord
+    ]);
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+        className: "bg-[#000] w-full h-full justify-center flex flex-col antialiased inter",
+        children: [
+            !menuBarState.photo && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                className: "text-base text-white text-center font-medium pt-2.5",
+                children: $7925c01e7577d264$var$timerText(timer)
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                className: "flex-1 min-h-0 p-2.5",
+                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)("div", {
+                    className: "relative w-full h-full rounded-[10px]",
+                    children: [
+                        countdownVisible && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $47dee8347993fb81$export$53819c0e58f98d49), {
+                            initialValue: 3,
+                            onFinish: ()=>{
+                                setCountdownVisible(false);
+                                setStartRecordTime(Date.now());
+                                (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).startRecord();
+                            }
+                        }),
+                        flashAnimation && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $2c45d365ee8aa1ab$export$2b501aee548bae06), {
+                            onAnimationEnd: ()=>{
+                                setFlashAnimation(false);
+                                assetsPopupState.open();
+                            }
+                        }),
+                        /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("video", {
+                            autoPlay: true,
+                            muted: true,
+                            playsInline: true,
+                            ref: videoElementRef,
+                            className: (0, ($parcel$interopDefault($jQDcL$classnames)))("w-full h-full object-cover rounded-[inherit]", {
+                                "scale-x-[-1]": facingMode === "user"
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("div", {
+                className: "flex justify-center px-2.5 pb-2.5",
+                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $6f223c293b335d40$export$11a6fe490bbc4873), {
+                    state: menuBarState,
+                    thumbnail: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $dc46069ab394f8fc$export$1cd1efc78cb52ca5), {
+                        asset: assets[assets.length - 1],
+                        onClick: assetsPopupState.open
+                    }),
+                    onSwitch: ()=>{
+                        (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).rotateVideo();
+                    },
+                    onCapturePress: ()=>{
+                        if (menuBarState.photo && videoElementRef.current) {
+                            onPhotoCapture(videoElementRef.current);
+                            setFlashAnimation(true);
+                            (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).captureVideo(videoElementRef.current);
+                        }
+                        if (!menuBarState.photo && !menuBarState.streaming) {
+                            menuBarState.setStreaming(true);
+                            setTimer(0);
+                            setCountdownVisible(true);
+                        }
+                        if (!menuBarState.photo && menuBarState.streaming) {
+                            exitStreaming();
+                            if (startRecordTime) {
+                                (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).stopRecord();
+                                setAssetLoading("video");
+                                assetsPopupState.open();
+                            }
+                        }
+                    }
+                })
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0bca8bbbf74ddff9$export$5c334f209b1aa661), {
+                assets: assets,
+                state: assetsPopupState,
+                onSendAssets: ()=>{
+                    (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).release();
+                    sendAssetsModalState.open();
+                },
+                removeAsset: removeAsset,
+                loading: assetLoading
+            }),
+            /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $48c2553f62767e40$export$2b77a92f1a5ad772), {
+                title: "Thank you for your submission!",
+                state: sendAssetsModalState,
+                isDismissable: false,
+                children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("span", {
+                    className: "text-base text-primaryLight",
+                    children: "Your photo/video has been successfully sent. We will review it and get back to you soon."
+                })
+            })
+        ]
+    });
+};
+
+
+
+
+
+const $c5be709b60f6ba50$export$7f7cbe89f1eacd2 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  border: 2px solid #ffffff;
+  border-top: 2px solid #000000;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  animation: spin 1s linear infinite;
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+const $c5be709b60f6ba50$export$3b0d6d7590275603 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  position: absolute;
+  background-color: #000000;
+  opacity: 0.9;
+  z-index: 999999;
+  display: flex;
+  vertical-align: middle;
+  align-items: center;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  gap: 0.25rem;
+`;
+const $c5be709b60f6ba50$export$42a852a2b6b56249 = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
+  display: flex;
+  gap: 25px;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+`;
+const $c5be709b60f6ba50$export$52e284bf30d0364a = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).h2`
+  color: #ffffff;
+  font-weight: 500;
+  font-size: 14px;
+  font-family: 'Lato';
+`;
+
+
+const $7ce296d839195d38$export$669f6ea7d267feaf = ()=>{
+    const { t: t  } = (0, $jQDcL$reacti18next.useTranslation)();
+    return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $c5be709b60f6ba50$export$3b0d6d7590275603), {
+        children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $c5be709b60f6ba50$export$42a852a2b6b56249), {
+            children: [
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $c5be709b60f6ba50$export$7f7cbe89f1eacd2), {}),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $c5be709b60f6ba50$export$52e284bf30d0364a), {
+                    children: t("loader.connection")
+                })
+            ]
+        })
+    });
+};
+
+
+const $ee8cb448c2c74888$var$currentTheme = (0, $9295e87e6b93e693$export$3bfd0d5209a8006a)();
+const $ee8cb448c2c74888$var$currentLanguage = (0, $393bda1b33846dfc$export$604ba5624273df44)();
+let $ee8cb448c2c74888$var$timestampCriticalError = -1;
+const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
+    const [selfPeerId, setSelfPeerId] = (0, $jQDcL$react.useState)(undefined);
+    const streamUIContainerRef = (0, $jQDcL$react.useRef)(null);
+    const videosContainerRef = (0, $jQDcL$react.useRef)(null);
+    const remoteTilesContainerRef = (0, $jQDcL$react.useRef)(null);
+    const [streamState, setStreamState] = (0, $jQDcL$react.useState)(options.recorder ? "recorder" : "streaming");
+    const [isQuickConnectPopupVisible, setIsQuickConnectPopupVisible] = (0, $jQDcL$react.useState)(false);
+    const [isSettingsMenuVisible, setIsSettingsMenuVisible] = (0, $jQDcL$react.useState)(false);
+    const [isYoutubePopupVisible, setIsYoutubePopupVisible] = (0, $jQDcL$react.useState)(false);
+    const [isLinksharePopupVisible, setIsLinksharePopupVisible] = (0, $jQDcL$react.useState)(false);
+    const [isVirtualBackgroundPopupVisible, setIsVirtualBackgroundPopupVisible] = (0, $jQDcL$react.useState)(false);
+    const [theme, setTheme] = (0, $jQDcL$react.useState)($ee8cb448c2c74888$var$currentTheme);
+    const [language, setLanguage] = (0, $jQDcL$react.useState)(options.language || $ee8cb448c2c74888$var$currentLanguage);
+    const [profile, setProfile] = (0, $jQDcL$react.useState)({});
+    const [muted, setMuted] = (0, $jQDcL$react.useState)(true);
+    const [streaming, setStreaming] = (0, $jQDcL$react.useState)(false);
+    const [isLoading, setLoading] = (0, $jQDcL$react.useState)(!options.recorder);
+    const [screensharing, setScreensharing] = (0, $jQDcL$react.useState)(false);
+    const [isAgent, setIsAgent] = (0, $jQDcL$react.useState)(false);
+    const [userInteractionTriggered, setUserInteractionTriggered] = (0, $jQDcL$react.useState)(false);
+    const [containerWidth, containerHeight] = (0, $56e1e7a85d8bf4bb$export$2b86bedf890eab8)(streamUIContainerRef.current);
+    const [isBlockedDevicesPopupOpen, setBlockedDevicesPopupOpen] = (0, $jQDcL$react.useState)(false);
+    const [isBlockedFeaturePopupOpen, setBlockedFeaturePopupOpen] = (0, $jQDcL$react.useState)(false);
+    const [permissions, setPermissions] = (0, $jQDcL$react.useState)([]);
+    const [plan, setPlan] = (0, $jQDcL$react.useState)(undefined);
+    const orientation = (containerWidth || window.screen.width) > (containerHeight || window.screen.height) ? "landscape" : "portrait";
+    const styledTheme = theme === "dark" ? (0, $9295e87e6b93e693$export$3e936a8db52a10a0) : (0, $9295e87e6b93e693$export$f30cb9bc4f736419);
+    const onWebcamUpdate = (event)=>{
+        if (event.type === "localVideoAvailable") setStreaming(true);
+        else setStreaming(false);
+    };
+    const onScreenshareUpdate = (event)=>{
+        if (event.type === "screenshareEnabled") setScreensharing(true);
+        else setScreensharing(false);
+    };
+    const onMicrophoneUpdate = (event)=>{
+        if (event.type === "microphoneMute") setMuted(true);
+        else setMuted(false);
+    };
+    const onDefaultAudioDeviceChange = (event)=>{
+        const micro = event.detail.label;
+        (0, $84c6cbcbb594d072$export$3a57e165650c636f)(`Connected to ${micro}`, {
+            duration: 3000,
+            icon: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $0ac48791ff0bcc8e$export$2e2bcd8739ae039), {}),
+            messageStyle: {
+                fontWeight: 600
+            }
+        });
+    };
+    const onSelfProfileUpdate = (event)=>{
+        const { profile: profile  } = event.detail;
+        setProfile(profile);
+    };
+    const onCallEnd = ()=>{
+        (0, $c3d5253d9d597eb5$export$716eeec86fd18da7)();
+        setStreamState("ended");
+        setMuted(true);
+        setStreaming(false);
+        setScreensharing(false);
+        setUserInteractionTriggered(false);
+    };
+    const onCallTerminated = ()=>{
+        (0, $c3d5253d9d597eb5$export$716eeec86fd18da7)();
+        setStreamState("terminated");
+    };
+    const onInvalidRoom = ()=>{
+        setStreamState("expired");
+    };
+    const onAgentIdentity = (event)=>{
+        const { success: success , email: email  } = event.detail;
+        if (success) {
+            setIsAgent(true);
+            if (email) (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).identify(null, {
+                email: email
+            });
+        } else (0, ($parcel$interopDefault($jQDcL$reacthottoast)))("An error occured while trying to join the room as an agent", {
+            className: "error"
+        });
+    };
+    const onCriticalError = (event)=>{
+        const duration = 20000;
+        const now = Date.now();
+        if (event.detail.code === "USERLIMIT") {
+            setStreamState("full");
+            return;
+        }
+        if ($ee8cb448c2c74888$var$timestampCriticalError !== -1 && $ee8cb448c2c74888$var$timestampCriticalError + duration > now) return;
+        $ee8cb448c2c74888$var$timestampCriticalError = now;
+        (0, $84c6cbcbb594d072$export$3a57e165650c636f)(`A critical error has occurred (error ${event.detail.code}).`, {
+            icon: (0, $e8ac63718934c648$export$c7df1b15b59b1df2),
+            button: {
+                text: "Reload",
+                action: ()=>{
+                    window.location.reload();
+                }
+            },
+            duration: duration
+        });
+    };
+    (0, $jQDcL$react.useEffect)(()=>{
+        try {
+            localStorage.setItem("stream_ui_theme", theme);
+        } catch (localStorageError) {
+            console.warn(localStorageError);
+        }
+    }, [
+        theme
+    ]);
+    (0, $jQDcL$react.useEffect)(()=>{
+        try {
+            localStorage.setItem("stream_ui_language", language);
+            (0, $b45c0bcc142f0b5e$export$2e2bcd8739ae039).changeLanguage(language);
         } catch (localStorageError) {
             console.warn(localStorageError);
         }
@@ -10445,12 +11962,14 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
             setPermissions(event.detail.permissions);
             console.log(event.detail.permissions);
             setSelfPeerId(peerId);
-            try {
+            if (!options.recorder) try {
                 await (0, $c3d5253d9d597eb5$export$494039379563c94d)(options);
                 setUserInteractionTriggered(true);
             } catch (userInteractionError) {
                 setBlockedDevicesPopupOpen(true);
                 console.error("User interaction trigger failed", userInteractionError);
+            } finally{
+                setLoading(false);
             }
         };
         (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
@@ -10487,7 +12006,7 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
             language: language,
             setLanguage: setLanguage,
             options: options,
-            profile: profile1,
+            profile: profile,
             muted: muted,
             streaming: streaming,
             screensharing: screensharing,
@@ -10503,6 +12022,7 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
                 /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $e3bb2c5d0e5b45b5$export$914ddf2021ea8ee6), {
                     ref: streamUIContainerRef,
                     children: [
+                        isLoading && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7ce296d839195d38$export$669f6ea7d267feaf), {}),
                         /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $e66cc5db58913155$export$2e2bcd8739ae039), {}),
                         /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $5dcd9e6925c7037c$export$2e2bcd8739ae039), {}),
                         isBlockedDevicesPopupOpen && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $77862aeb490f36a3$export$2e2bcd8739ae039), {
@@ -10511,6 +12031,7 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
                                 setBlockedDevicesPopupOpen(false);
                             }
                         }),
+                        streamState === "recorder" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $7925c01e7577d264$export$336a011955157f9a), {}),
                         streamState === "streaming" && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $jQDcL$reactjsxruntime.Fragment), {
                             children: /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $3f6e908c45fcc5b3$export$74636703cfe1eecf), {
                                 children: [
@@ -10622,6 +12143,7 @@ const $5fd6e456b33aeaa7$export$ae01dedf5c052bb = (0, ($parcel$interopDefault($jQ
   background-color: black;
   border-radius: 15px;
   object-fit: cover;
+  transform: scale(-1, 1);
 `;
 const $5fd6e456b33aeaa7$export$778ed67917f5eacf = (0, ($parcel$interopDefault($jQDcL$styledcomponents))).div`
   display: flex;
@@ -10782,14 +12304,14 @@ const $3305ca02e86dabd1$var$GreetingView = ({ onGreetingDone: onGreetingDone  })
     const [mainContainerRef, { width: width , height: height  }] = (0, $56e1e7a85d8bf4bb$export$e295b0c537d32d7d)();
     const inputRef = (0, $jQDcL$react.useRef)(null);
     const videoRef = (0, $jQDcL$react.useRef)(null);
-    const [videoTrack1, setVideoTrack] = (0, $jQDcL$react.useState)(undefined);
+    const [videoTrack, setVideoTrack] = (0, $jQDcL$react.useState)(undefined);
     const [micEnabled, setMicEnabled] = (0, $jQDcL$react.useState)(false);
     const [joining, setJoining] = (0, $jQDcL$react.useState)(false);
     const desktop = width >= height;
     const onSubmit = ()=>{
         const displayName = inputRef.current?.value;
-        const cameraEnabled = Boolean(videoTrack1);
-        videoTrack1?.stop();
+        const cameraEnabled = Boolean(videoTrack);
+        videoTrack?.stop();
         setJoining(true);
         setTimeout(()=>{
             onGreetingDone({
@@ -10812,15 +12334,15 @@ const $3305ca02e86dabd1$var$GreetingView = ({ onGreetingDone: onGreetingDone  })
         }
     };
     const onCameraClick = (0, $jQDcL$react.useCallback)(async ()=>{
-        if (!videoTrack1) await getUserMedia({
+        if (!videoTrack) await getUserMedia({
             video: true
         });
         else {
-            videoTrack1.stop();
+            videoTrack.stop();
             setVideoTrack(undefined);
         }
     }, [
-        videoTrack1
+        videoTrack
     ]);
     const onMicrophoneClick = (0, $jQDcL$react.useCallback)(async ()=>{
         if (!micEnabled) await getUserMedia({
@@ -10832,14 +12354,14 @@ const $3305ca02e86dabd1$var$GreetingView = ({ onGreetingDone: onGreetingDone  })
     ]);
     (0, $jQDcL$react.useEffect)(()=>{
         if (videoRef.current) {
-            if (videoTrack1) videoRef.current.srcObject = new MediaStream([
-                videoTrack1
+            if (videoTrack) videoRef.current.srcObject = new MediaStream([
+                videoTrack
             ]);
             else videoRef.current.srcObject = null;
         }
     }, [
         videoRef,
-        videoTrack1,
+        videoTrack,
         width,
         height
     ]);
@@ -10856,7 +12378,7 @@ const $3305ca02e86dabd1$var$GreetingView = ({ onGreetingDone: onGreetingDone  })
             height: 40
         })
     });
-    const webcamEnabled = Boolean(videoTrack1);
+    const webcamEnabled = Boolean(videoTrack);
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $5fd6e456b33aeaa7$export$d653589df987fd93), {
         ref: mainContainerRef,
         children: [
@@ -10955,10 +12477,19 @@ const $3305ca02e86dabd1$var$GreetingView = ({ onGreetingDone: onGreetingDone  })
 var $3305ca02e86dabd1$export$2e2bcd8739ae039 = $3305ca02e86dabd1$var$GreetingView;
 
 
+var $54541b0286afc2de$exports = {};
+$54541b0286afc2de$exports = "*, :before, :after, ::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #3b82f680;\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n}\n\n.visible {\n  visibility: visible;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.relative {\n  position: relative;\n}\n\n.inset-0 {\n  inset: 0;\n}\n\n.left-0 {\n  left: 0;\n}\n\n.top-0 {\n  top: 0;\n}\n\n.z-50 {\n  z-index: 50;\n}\n\n.z-\\[100\\] {\n  z-index: 100;\n}\n\n.z-\\[1\\] {\n  z-index: 1;\n}\n\n.m-\\[10px\\] {\n  margin: 10px;\n}\n\n.mx-\\[20px\\] {\n  margin-left: 20px;\n  margin-right: 20px;\n}\n\n.ml-\\[10px\\] {\n  margin-left: 10px;\n}\n\n.mt-\\[10px\\] {\n  margin-top: 10px;\n}\n\n.mt-\\[50px\\] {\n  margin-top: 50px;\n}\n\n.block {\n  display: block;\n}\n\n.inline {\n  display: inline;\n}\n\n.flex {\n  display: flex;\n}\n\n.table {\n  display: table;\n}\n\n.hidden {\n  display: none;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.h-\\[150px\\] {\n  height: 150px;\n}\n\n.h-\\[60px\\] {\n  height: 60px;\n}\n\n.h-\\[72px\\] {\n  height: 72px;\n}\n\n.h-\\[56px\\] {\n  height: 56px;\n}\n\n.h-\\[40px\\] {\n  height: 40px;\n}\n\n.h-\\[235px\\] {\n  height: 235px;\n}\n\n.h-\\[93px\\] {\n  height: 93px;\n}\n\n.h-screen {\n  height: 100vh;\n}\n\n.h-fit {\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n.h-\\[24px\\] {\n  height: 24px;\n}\n\n.h-\\[30px\\] {\n  height: 30px;\n}\n\n.h-\\[70px\\] {\n  height: 70px;\n}\n\n.min-h-0 {\n  min-height: 0;\n}\n\n.min-h-\\[100\\%\\] {\n  min-height: 100%;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.w-\\[60px\\] {\n  width: 60px;\n}\n\n.w-\\[72px\\] {\n  width: 72px;\n}\n\n.w-\\[56px\\] {\n  width: 56px;\n}\n\n.w-\\[76px\\] {\n  width: 76px;\n}\n\n.w-screen {\n  width: 100vw;\n}\n\n.w-\\[360px\\] {\n  width: 360px;\n}\n\n.w-\\[400px\\] {\n  width: 400px;\n}\n\n.w-\\[320px\\] {\n  width: 320px;\n}\n\n.w-\\[24px\\] {\n  width: 24px;\n}\n\n.w-\\[30px\\] {\n  width: 30px;\n}\n\n.w-\\[70px\\] {\n  width: 70px;\n}\n\n.min-w-\\[100\\%\\] {\n  min-width: 100%;\n}\n\n.min-w-\\[24px\\] {\n  min-width: 24px;\n}\n\n.max-w-\\[400px\\] {\n  max-width: 400px;\n}\n\n.max-w-\\[600px\\] {\n  max-width: 600px;\n}\n\n.max-w-\\[800px\\] {\n  max-width: 800px;\n}\n\n.flex-1 {\n  flex: 1;\n}\n\n.flex-auto {\n  flex: auto;\n}\n\n.flex-grow {\n  flex-grow: 1;\n}\n\n.translate-y-2 {\n  --tw-translate-y: .5rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-0 {\n  --tw-translate-y: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-\\[200\\%\\] {\n  --tw-translate-y: 200%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.translate-y-full {\n  --tw-translate-y: 100%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-\\[0\\.4\\] {\n  --tw-scale-x: .4;\n  --tw-scale-y: .4;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.scale-x-\\[-1\\] {\n  --tw-scale-x: -1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.resize {\n  resize: both;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.items-end {\n  align-items: flex-end;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-end {\n  justify-content: flex-end;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.gap-\\[5px\\] {\n  gap: 5px;\n}\n\n.gap-2\\.5 {\n  gap: .625rem;\n}\n\n.gap-2 {\n  gap: .5rem;\n}\n\n.gap-\\[10px\\] {\n  gap: 10px;\n}\n\n.gap-5 {\n  gap: 1.25rem;\n}\n\n.gap-\\[20px\\] {\n  gap: 20px;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.rounded-lg {\n  border-radius: .5rem;\n}\n\n.rounded-md {\n  border-radius: .375rem;\n}\n\n.rounded-\\[15px\\] {\n  border-radius: 15px;\n}\n\n.rounded-full {\n  border-radius: 9999px;\n}\n\n.rounded-\\[5px\\] {\n  border-radius: 5px;\n}\n\n.rounded-\\[60px\\] {\n  border-radius: 60px;\n}\n\n.rounded-\\[10px\\] {\n  border-radius: 10px;\n}\n\n.rounded-\\[inherit\\] {\n  border-radius: inherit;\n}\n\n.rounded-\\[8px\\] {\n  border-radius: 8px;\n}\n\n.rounded-\\[50\\%\\] {\n  border-radius: 50%;\n}\n\n.rounded-t-\\[15px\\] {\n  border-top-left-radius: 15px;\n  border-top-right-radius: 15px;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-secondaryLight {\n  --tw-border-opacity: 1;\n  border-color: rgb(179 179 179 / var(--tw-border-opacity));\n}\n\n.border-primaryLight {\n  --tw-border-opacity: 1;\n  border-color: rgb(86 86 86 / var(--tw-border-opacity));\n}\n\n.bg-primaryLight {\n  --tw-bg-opacity: 1;\n  background-color: rgb(86 86 86 / var(--tw-bg-opacity));\n}\n\n.bg-primary {\n  --tw-bg-opacity: 1;\n  background-color: rgb(29 28 32 / var(--tw-bg-opacity));\n}\n\n.bg-graySelected {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.bg-transparent {\n  background-color: #0000;\n}\n\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-black\\/\\[\\.6\\] {\n  background-color: #0009;\n}\n\n.bg-\\[\\#f12828\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(241 40 40 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#565656\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(86 86 86 / var(--tw-bg-opacity));\n}\n\n.bg-black, .bg-\\[\\#000\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n\n.bg-\\[\\#FFFFFF\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.bg-underlay {\n  background-color: #00000040;\n}\n\n.bg-\\[\\#f3f3f3\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 243 243 / var(--tw-bg-opacity));\n}\n\n.bg-secondaryVLight {\n  --tw-bg-opacity: 1;\n  background-color: rgb(235 235 235 / var(--tw-bg-opacity));\n}\n\n.bg-opacity-90 {\n  --tw-bg-opacity: .9;\n}\n\n.object-cover {\n  object-fit: cover;\n}\n\n.p-2\\.5 {\n  padding: .625rem;\n}\n\n.p-2 {\n  padding: .5rem;\n}\n\n.p-\\[3px\\] {\n  padding: 3px;\n}\n\n.p-\\[12px\\] {\n  padding: 12px;\n}\n\n.py-3 {\n  padding-top: .75rem;\n  padding-bottom: .75rem;\n}\n\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.py-\\[9px\\] {\n  padding-top: 9px;\n  padding-bottom: 9px;\n}\n\n.px-3\\.5 {\n  padding-left: .875rem;\n  padding-right: .875rem;\n}\n\n.px-3 {\n  padding-left: .75rem;\n  padding-right: .75rem;\n}\n\n.py-2 {\n  padding-top: .5rem;\n  padding-bottom: .5rem;\n}\n\n.py-1\\.5 {\n  padding-top: .375rem;\n  padding-bottom: .375rem;\n}\n\n.px-2\\.5 {\n  padding-left: .625rem;\n  padding-right: .625rem;\n}\n\n.py-1 {\n  padding-top: .25rem;\n  padding-bottom: .25rem;\n}\n\n.px-2 {\n  padding-left: .5rem;\n  padding-right: .5rem;\n}\n\n.px-\\[10px\\] {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.px-5 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.py-\\[25px\\] {\n  padding-top: 25px;\n  padding-bottom: 25px;\n}\n\n.px-\\[20px\\] {\n  padding-left: 20px;\n  padding-right: 20px;\n}\n\n.pt-2\\.5 {\n  padding-top: .625rem;\n}\n\n.pt-2 {\n  padding-top: .5rem;\n}\n\n.pb-2\\.5 {\n  padding-bottom: .625rem;\n}\n\n.pb-2 {\n  padding-bottom: .5rem;\n}\n\n.pb-\\[25px\\] {\n  padding-bottom: 25px;\n}\n\n.pb-\\[20px\\] {\n  padding-bottom: 20px;\n}\n\n.text-center {\n  text-align: center;\n}\n\n.text-base {\n  letter-spacing: -.02em;\n  font-size: 16px;\n  line-height: 19px;\n}\n\n.text-sm {\n  letter-spacing: -.02em;\n  font-size: 14px;\n  line-height: 17px;\n}\n\n.text-xs {\n  letter-spacing: -.02em;\n  font-size: 12px;\n  line-height: 14px;\n}\n\n.text-\\[112px\\] {\n  font-size: 112px;\n}\n\n.text-xl {\n  letter-spacing: -.02em;\n  font-size: 20px;\n  line-height: 24px;\n}\n\n.text-lg {\n  letter-spacing: -.02em;\n  font-size: 18px;\n  line-height: 22px;\n}\n\n.font-medium {\n  font-weight: 500;\n}\n\n.font-bold {\n  font-weight: 700;\n}\n\n.font-normal {\n  font-weight: 400;\n}\n\n.leading-\\[20px\\] {\n  line-height: 20px;\n}\n\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-primary {\n  --tw-text-opacity: 1;\n  color: rgb(29 28 32 / var(--tw-text-opacity));\n}\n\n.text-white\\/80 {\n  color: #fffc;\n}\n\n.text-secondary {\n  --tw-text-opacity: 1;\n  color: rgb(134 134 134 / var(--tw-text-opacity));\n}\n\n.text-primaryLight {\n  --tw-text-opacity: 1;\n  color: rgb(86 86 86 / var(--tw-text-opacity));\n}\n\n.text-black {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.underline {\n  text-decoration-line: underline;\n}\n\n.antialiased {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.opacity-50 {\n  opacity: .5;\n}\n\n.opacity-\\[0\\.4\\] {\n  opacity: .4;\n}\n\n.opacity-90 {\n  opacity: .9;\n}\n\n.outline {\n  outline-style: solid;\n}\n\n.ring-\\[3px\\] {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-cta {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(38 138 250 / var(--tw-ring-opacity));\n}\n\n.blur {\n  --tw-blur: blur(8px);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.transition-\\[transform\\,border-radius\\] {\n  transition-property: transform, border-radius;\n  transition-duration: .15s;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.duration-300 {\n  transition-duration: .3s;\n}\n\n.ease-in-out {\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.ease-in {\n  transition-timing-function: cubic-bezier(.4, 0, 1, 1);\n}\n\n.ease-out {\n  transition-timing-function: cubic-bezier(0, 0, .2, 1);\n}\n\n.inter {\n  font-family: Inter, sans-serif;\n}\n\n@supports (font-variation-settings: normal) {\n  .inter {\n    font-family: Inter var, sans-serif;\n  }\n}\n\n.first-letter\\:capitalize:first-letter {\n  text-transform: capitalize;\n}\n\n.focus\\:outline-none:focus {\n  outline-offset: 2px;\n  outline: 2px solid #0000;\n}\n\n.disabled\\:bg-secondaryLight:disabled {\n  --tw-bg-opacity: 1;\n  background-color: rgb(179 179 179 / var(--tw-bg-opacity));\n}\n\n.disabled\\:bg-graySelected:disabled {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 245 245 / var(--tw-bg-opacity));\n}\n\n.disabled\\:text-secondaryLight:disabled {\n  --tw-text-opacity: 1;\n  color: rgb(179 179 179 / var(--tw-text-opacity));\n}\n\n";
+
+
+var $9833f4335ab609cd$exports = {};
+$9833f4335ab609cd$exports = "*, :before, :after {\n  box-sizing: border-box;\n  border: 0 solid #e5e7eb;\n}\n\n:before, :after {\n  --tw-content: \"\";\n}\n\nhtml {\n  -webkit-text-size-adjust: 100%;\n  tab-size: 4;\n  font-feature-settings: normal;\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  line-height: 1.5;\n}\n\nbody {\n  line-height: inherit;\n  margin: 0;\n}\n\nhr {\n  height: 0;\n  color: inherit;\n  border-top-width: 1px;\n}\n\nabbr:where([title]) {\n  text-decoration: underline dotted;\n}\n\nh1, h2, h3, h4, h5, h6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\nb, strong {\n  font-weight: bolder;\n}\n\ncode, kbd, samp, pre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  font-size: 1em;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub, sup {\n  vertical-align: baseline;\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n}\n\nsub {\n  bottom: -.25em;\n}\n\nsup {\n  top: -.5em;\n}\n\ntable {\n  text-indent: 0;\n  border-color: inherit;\n  border-collapse: collapse;\n}\n\nbutton, input, optgroup, select, textarea {\n  font-family: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\n\nbutton, select {\n  text-transform: none;\n}\n\nbutton, [type=\"button\"], [type=\"reset\"], [type=\"submit\"] {\n  -webkit-appearance: button;\n  background-color: #0000;\n  background-image: none;\n}\n\n:-moz-focusring {\n  outline: auto;\n}\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n  height: auto;\n}\n\n[type=\"search\"] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  font: inherit;\n}\n\nsummary {\n  display: list-item;\n}\n\nblockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol, ul, menu {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\ntextarea {\n  resize: vertical;\n}\n\ninput::placeholder, textarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\nbutton, [role=\"button\"] {\n  cursor: pointer;\n}\n\n:disabled {\n  cursor: default;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n  vertical-align: middle;\n  display: block;\n}\n\nimg, video {\n  max-width: 100%;\n  height: auto;\n}\n\n[hidden] {\n  display: none;\n}\n\n";
+
+
 const $e68207026aca356b$var$currentURL = new URL(window.location.href);
 const $e68207026aca356b$var$microphoneEnabled = $e68207026aca356b$var$currentURL.searchParams.get("microphone-enabled") !== "0";
 const $e68207026aca356b$var$cameraEnabled = $e68207026aca356b$var$currentURL.searchParams.get("camera-enabled") === "1";
 const $e68207026aca356b$var$defaultOptions = {
+    recorder: false,
     sharedURL: window.location.href,
     showMenuButton: true,
     settingsShortcuts: [
@@ -10988,8 +12519,32 @@ const $e68207026aca356b$export$3f94917203ab7078 = {
         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);
         const rootElement = (0, $jQDcL$reactdomclient.createRoot)(element);
-        rootElement.render(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ee8cb448c2c74888$export$2e2bcd8739ae039), {
-            options: mergedOptions
+        let styleElement = null;
+        styleElement = /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
+            children: [
+                options.recorder && /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("style", {
+                    children: (0, (/*@__PURE__*/$parcel$interopDefault($9833f4335ab609cd$exports)))
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("style", {
+                    children: (0, (/*@__PURE__*/$parcel$interopDefault($54541b0286afc2de$exports)))
+                })
+            ]
+        });
+        rootElement.render(/*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsxs)((0, $jQDcL$reactjsxruntime.Fragment), {
+            children: [
+                styleElement,
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("link", {
+                    rel: "preconnect",
+                    href: "https://rsms.me/"
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)("link", {
+                    rel: "stylesheet",
+                    href: "https://rsms.me/inter/inter.css"
+                }),
+                /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $ee8cb448c2c74888$export$2e2bcd8739ae039), {
+                    options: mergedOptions
+                })
+            ]
         }));
         if (mergedOptions.tracking) (0, ($parcel$interopDefault($jQDcL$hotjarbrowser))).init(3111933, 6);
     },
@@ -11007,6 +12562,8 @@ const $e68207026aca356b$export$3f94917203ab7078 = {
         });
         window.dispatchEvent(event);
     },
+    startRecord: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).startRecord.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
+    stopRecord: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).stopRecord.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     sendNotification: $84c6cbcbb594d072$export$3a57e165650c636f,
     joinRoom: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).init.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),
     leaveRoom: (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).endCall.bind((0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2)),