npm - @snapcall/stream-ui - Versions diffs - 1.2.0 → 1.3.0 - Mend

@snapcall/stream-ui 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/stream-ui.esm.js +2050 -1005
package/dist/stream-ui.js +2065 -1020
package/dist/stream-ui.umd.js +485 -380
package/dist/types.d.ts +154 -30
package/package.json +5 -5

package/dist/stream-ui.esm.js CHANGED Viewed

@@ -4,11 +4,11 @@ import $3Sbms$reacthottoast, {toast as $3Sbms$toast, Toaster as $3Sbms$Toaster,
 import $3Sbms$styledcomponents, {keyframes as $3Sbms$keyframes, ThemeProvider as $3Sbms$ThemeProvider, css as $3Sbms$css, createGlobalStyle as $3Sbms$createGlobalStyle} from "styled-components";
 import {useState as $3Sbms$useState, useRef as $3Sbms$useRef, useEffect as $3Sbms$useEffect, useContext as $3Sbms$useContext, useMemo as $3Sbms$useMemo, createContext as $3Sbms$createContext, useReducer as $3Sbms$useReducer, useLayoutEffect as $3Sbms$useLayoutEffect, useCallback as $3Sbms$useCallback} from "react";
 import "inobounce";
+import {parse as $3Sbms$parse, getParser as $3Sbms$getParser} from "bowser";
 import {v4 as $3Sbms$v4} from "uuid";
 import {WebSocketTransport as $3Sbms$WebSocketTransport, Peer as $3Sbms$Peer} from "protoo-client";
 import {Device as $3Sbms$Device} from "mediasoup-client";
 import {setTag as $3Sbms$setTag, addBreadcrumb as $3Sbms$addBreadcrumb, captureException as $3Sbms$captureException} from "@sentry/browser";
-import {getParser as $3Sbms$getParser} from "bowser";
 import {toCanvas as $3Sbms$toCanvas} from "qrcode";
@@ -43,6 +43,7 @@ const $b24a50393389544f$export$42a852a2b6b56249 = (0, $3Sbms$styledcomponents).d
   flex-direction: row;
   align-items: center;
   width: ${(props)=>props.width};
+  max-width: 100%;
   padding-top: 10px;
   padding-right: ${(props)=>props.hasButton ? 15 : 20}px;
   padding-bottom: 10px;
@@ -55,6 +56,7 @@ const $b24a50393389544f$export$42a852a2b6b56249 = (0, $3Sbms$styledcomponents).d
 `;
 const $b24a50393389544f$export$8f314e512d92575f = (0, $3Sbms$styledcomponents).div`
   display: flex;
+  overflow: hidden;
   svg,
   img {
@@ -94,8 +96,8 @@ const $b24a50393389544f$export$c16180567ca88cd7 = (0, $3Sbms$styledcomponents).p
 const $b24a50393389544f$export$353f5b6fc5456de1 = (0, $3Sbms$styledcomponents).button`
   display: flex;
   color: #fff;
-  background-color: #242324;
-  border: 2px solid #242324;
+  background-color: #2d2d2d;
+  border: 2px solid #343434;
   border-radius: 50px;
   padding: 4px 10px 6px;
   font-weight: 700;
@@ -104,7 +106,7 @@ const $b24a50393389544f$export$353f5b6fc5456de1 = (0, $3Sbms$styledcomponents).b
   box-sizing: border-box;
   &:hover {
-    border: 2px solid #8d8d8d;
+    border: 2px solid #8d8d8d !important;
   }
 `;
 const $b24a50393389544f$export$caedbd4804e2ac32 = (0, $3Sbms$styledcomponents).div`
@@ -138,17 +140,17 @@ const $b24a50393389544f$export$ccff7fe96c96c97 = (0, $3Sbms$styledcomponents).sp
 `;
 const $b24a50393389544f$export$eed52d0855891930 = (0, $3Sbms$styledcomponents).div`
   display: flex;
-  min-width: 13px;
-  min-height: 13px;
-  max-height: 13px;
-  max-width: 13px;
+  min-width: 14px;
+  min-height: 14px;
+  max-height: 14px;
+  max-width: 14px;
   margin-right: 5px;
   overflow: hidden;
   img,
   svg {
-    width: 13px;
-    height: 13px;
+    width: 14px;
+    height: 14px;
     border-radius: 50px;
     box-sizing: border-box;
     object-fit: cover;
@@ -156,6 +158,18 @@ const $b24a50393389544f$export$eed52d0855891930 = (0, $3Sbms$styledcomponents).d
 `;
+const $6d331dd378347945$export$5640675ad9afe3e2 = (event)=>{
+    event.currentTarget.onerror = null;
+    const imageContainer = event.currentTarget?.parentElement;
+    const notificationContainer = imageContainer?.parentElement;
+    if (notificationContainer) notificationContainer.style.paddingLeft = "20px";
+    imageContainer?.remove();
+};
+const $6d331dd378347945$export$d8de94b16800bb18 = (event)=>{
+    event.currentTarget.onerror = null;
+    const imageContainer = event.currentTarget?.parentElement;
+    imageContainer?.remove();
+};
 const $6d331dd378347945$export$14834abbfce3b8cd = ({ children: children , options: options = {}  })=>{
     const width = options.width || "auto";
     const backgroundColor = options.backgroundColor || "rgba(45, 45, 45, 0.75)";
@@ -168,7 +182,8 @@ const $6d331dd378347945$export$14834abbfce3b8cd = ({ children: children , option
             options.icon && (typeof options.icon === "string" ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b24a50393389544f$export$8f314e512d92575f), {
                 children: /*#__PURE__*/ (0, $3Sbms$jsx)("img", {
                     alt: "Icon",
-                    src: options.icon
+                    src: options.icon,
+                    onError: $6d331dd378347945$export$5640675ad9afe3e2
                 })
             }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b24a50393389544f$export$8f314e512d92575f), {
                 children: options.icon
@@ -207,12 +222,14 @@ const $6d331dd378347945$export$14834abbfce3b8cd = ({ children: children , option
                 ]
             }),
             options.button && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $b24a50393389544f$export$353f5b6fc5456de1), {
+                style: options.button.style,
                 onClick: options.button.action,
                 children: [
                     options.button.icon && (typeof options.button.icon === "string" ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b24a50393389544f$export$caedbd4804e2ac32), {
                         children: /*#__PURE__*/ (0, $3Sbms$jsx)("img", {
                             alt: "Button icon",
-                            src: options.button.icon
+                            src: options.button.icon,
+                            onError: $6d331dd378347945$export$d8de94b16800bb18
                         })
                     }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b24a50393389544f$export$caedbd4804e2ac32), {
                         children: options.button.icon
@@ -290,6 +307,7 @@ const $a5146f9062d7bf28$export$3a57e165650c636f = (message, options = {})=>{
 const $67e45b2e30dcc030$var$audioContextConstructor = window.AudioContext || window.webkitAudioContext;
 const $67e45b2e30dcc030$var$AUDIO_MUTE_DETECTION_TIME = 2000;
 const $67e45b2e30dcc030$var$SPEAK_DETECTION_TIME = 500;
@@ -384,8 +402,14 @@ class $67e45b2e30dcc030$export$ea669869acd8f177 {
         this.stream.getTracks().forEach((track)=>{
             this.stream.removeTrack(track);
         });
-        this.audioStreamSource.disconnect(this.analyser);
-        this.audioContext.close();
+        try {
+            this.audioStreamSource.disconnect(this.analyser);
+        } catch (err1) {
+            console.error("audioStreamSource failed to disconnect", err1);
+        }
+        this.audioContext.close().catch((err)=>{
+            console.error("audioContext failed to close", err);
+        });
         this.audioLevels = [];
     }
     static isAPIAvailable() {
@@ -394,43 +418,77 @@ class $67e45b2e30dcc030$export$ea669869acd8f177 {
 }
+class $82e31ca38889c079$var$AudioRenderer {
+    constructor({ consumerId: consumerId  }){
+        this.consumerId = consumerId;
+        this.audio = new Audio();
+        this.audio.id = consumerId;
+        this.audio.autoplay = true;
+        document.body.appendChild(this.audio);
+    }
+    destroy() {
+        this.audio.pause();
+        this.audio.srcObject = null;
+        document.body.removeChild(this.audio);
+    }
+    setSource(srcObject) {
+        this.audio.srcObject = srcObject;
+    }
+    async setSink(sinkId) {
+        await this.audio.setSinkId?.(sinkId);
+    }
+    async play() {
+        await this.audio.play().catch((err)=>{
+            console.warn("failed to play");
+            setTimeout(()=>{
+                this.play();
+            }, 1000);
+        });
+    }
+}
+var $82e31ca38889c079$export$2e2bcd8739ae039 = $82e31ca38889c079$var$AudioRenderer;
-const $c238d62666faeac8$export$674c90a250a8b2c5 = (video)=>{
+const $850842193b726422$export$218be676a714a9df = '<svg width="103" height="36" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity=".8" fill="#fff"><path d="M10.994 33.06c.903 0 1.658-.734 1.392-1.581a5.249 5.249 0 0 0-1.279-2.124 5.171 5.171 0 0 0-3.673-1.535 5.171 5.171 0 0 0-3.673 1.535c-.595.6-1.03 1.33-1.28 2.124-.265.847.49 1.582 1.393 1.582h7.12ZM10.65 16.2c-.902 0-1.658.735-1.392 1.582.25.794.685 1.524 1.28 2.124a5.171 5.171 0 0 0 3.672 1.535 5.172 5.172 0 0 0 3.674-1.535 5.25 5.25 0 0 0 1.279-2.124c.266-.847-.49-1.582-1.393-1.582h-7.12ZM14.21 31.455c0 .887.75 1.63 1.606 1.35a5.187 5.187 0 0 0 2.067-1.279 5.264 5.264 0 0 0 1.521-3.706c0-1.39-.547-2.723-1.52-3.705a5.187 5.187 0 0 0-2.068-1.278c-.856-.281-1.606.462-1.606 1.349v7.27ZM7.434 17.806c0-.887-.75-1.63-1.607-1.35a5.186 5.186 0 0 0-2.066 1.279 5.264 5.264 0 0 0-1.522 3.706c0 1.39.548 2.723 1.522 3.705a5.186 5.186 0 0 0 2.066 1.278c.857.281 1.607-.462 1.607-1.349v-7.27Z"/><path d="M32.965 31.098c-1.442 0-2.601-.227-3.478-.68-.865-.465-1.517-1.043-1.955-1.734a.416.416 0 0 1-.052-.187c0-.125.057-.227.173-.306l.986-.731a.286.286 0 0 1 .208-.085c.103 0 .201.062.294.187.773 1.224 2.07 1.836 3.893 1.836.796 0 1.471-.142 2.025-.425.565-.284.848-.737.848-1.36 0-.465-.161-.827-.485-1.088-.311-.26-.796-.493-1.453-.697-.6-.181-.975-.289-1.125-.323-.992-.283-1.707-.504-2.146-.663-1.107-.408-1.84-.878-2.198-1.41-.357-.534-.536-1.089-.536-1.667 0-.476.15-.986.45-1.53.311-.555.796-1.025 1.453-1.41.67-.397 1.506-.595 2.51-.595 1.05 0 1.932.13 2.647.39.716.25 1.396.67 2.042 1.258.081.08.121.159.121.238 0 .114-.057.204-.173.272l-1.107.731a.469.469 0 0 1-.225.085c-.104 0-.202-.05-.294-.153-.692-.725-1.644-1.088-2.856-1.088-.692 0-1.228.102-1.609.306-.37.204-.617.431-.744.68-.115.25-.173.47-.173.663 0 .408.162.737.485.986.323.25.801.476 1.436.68.058.023.502.153 1.332.391.52.136 1.056.29 1.61.46 1.21.396 2.019.9 2.422 1.512.416.612.623 1.201.623 1.768 0 .612-.15 1.196-.45 1.75-.288.556-.801 1.02-1.54 1.395-.727.362-1.713.544-2.959.544ZM44.114 21.766c.865 0 1.667.249 2.405.748.739.487 1.108 1.388 1.108 2.702v5.321a.364.364 0 0 1-.104.272c-.058.057-.144.085-.26.085H46.14a.423.423 0 0 1-.277-.085.407.407 0 0 1-.087-.272v-5.032c-.035-.646-.22-1.155-.554-1.53-.323-.373-.744-.56-1.263-.56-.37 0-.738.102-1.107.306-.358.192-.664.492-.918.9-.253.397-.403.896-.45 1.496v4.42a.365.365 0 0 1-.103.272c-.058.057-.145.085-.26.085h-1.125a.423.423 0 0 1-.276-.085.407.407 0 0 1-.087-.272v-8.193c0-.114.029-.199.087-.255a.378.378 0 0 1 .276-.102h1.125c.116 0 .202.034.26.102.069.056.103.141.103.255v.204c0 .079.012.141.035.187a.168.168 0 0 0 .121.05c.092 0 .214-.062.364-.186a4.02 4.02 0 0 1 1.038-.612c.38-.148.738-.221 1.073-.221ZM57.436 28.207c.023.34.081.607.173.8.093.18.289.322.589.424.184.068.277.165.277.29a.396.396 0 0 1-.052.17l-.485.951c-.092.204-.242.278-.45.221-.669-.147-1.13-.47-1.384-.969-.058-.124-.115-.187-.173-.187-.058 0-.121.046-.19.136-.6.714-1.575 1.071-2.925 1.071-.819 0-1.482-.141-1.99-.425-.496-.283-.848-.623-1.056-1.02-.207-.408-.311-.799-.311-1.173 0-.612.19-1.161.571-1.648.392-.488.975-.828 1.748-1.02.53-.125 1.269-.221 2.215-.29.646-.045 1.113-.09 1.401-.135.231-.034.335-.17.312-.408-.058-.51-.23-.918-.52-1.224-.276-.318-.743-.476-1.4-.476-.428 0-.837.09-1.23.272-.38.17-.674.47-.882.9-.104.216-.254.29-.45.222l-1.055-.29c-.185-.056-.277-.152-.277-.288 0-.034.011-.085.034-.153a3.292 3.292 0 0 1 1.367-1.564c.635-.397 1.46-.595 2.475-.595.992 0 1.834.255 2.526.765.693.498 1.062 1.224 1.108 2.176.011.453.017 1.06.017 1.819.012.759.017 1.308.017 1.648Zm-4.326 1.445c.312 0 .652-.073 1.021-.22.38-.148.715-.403 1.004-.766.3-.374.484-.872.554-1.495v-.034c0-.114-.035-.199-.104-.256-.07-.067-.162-.09-.277-.067l-.675.067c-.75.069-1.361.148-1.834.238-.462.08-.86.227-1.194.442a.984.984 0 0 0-.485.884c0 .465.208.782.623.952.416.17.871.255 1.367.255ZM64.486 21.766c1.107 0 1.967.26 2.578.782.611.51 1.027 1.116 1.246 1.819a6.83 6.83 0 0 1 .329 2.073c0 .692-.11 1.389-.329 2.091-.22.692-.635 1.298-1.246 1.82-.611.509-1.47.764-2.578.764-.9 0-1.65-.238-2.25-.714-.08-.08-.161-.119-.242-.119-.116 0-.173.096-.173.29v3.569c0 .113-.035.198-.104.255-.058.068-.144.102-.26.102H60.42a.378.378 0 0 1-.277-.102c-.058-.057-.086-.142-.086-.255V22.344c0-.114.028-.199.086-.255a.378.378 0 0 1 .277-.102h1.038c.116 0 .202.034.26.102.069.056.104.141.104.255 0 .09.011.164.034.22.035.046.075.069.122.069.057 0 .109-.023.155-.068.612-.533 1.396-.8 2.354-.8Zm-.173 7.785c.888 0 1.54-.3 1.955-.9.427-.601.64-1.338.64-2.21 0-.873-.213-1.61-.64-2.21-.415-.601-1.067-.902-1.955-.902-.877 0-1.518.3-1.921.901-.393.59-.589 1.326-.589 2.21 0 .884.197 1.627.589 2.227.403.59 1.044.884 1.92.884ZM76.268 31.097c-1.316 0-2.452-.277-3.41-.833a5.531 5.531 0 0 1-2.163-2.277c-.484-.975-.726-2.08-.726-3.315 0-1.236.242-2.335.727-3.298a5.507 5.507 0 0 1 2.163-2.295c.957-.555 2.094-.833 3.409-.833 1.246 0 2.324.25 3.236.748a5.437 5.437 0 0 1 2.163 2.09c.034.069.052.131.052.188 0 .125-.087.215-.26.272l-1.298.323a.39.39 0 0 1-.12.017c-.151 0-.266-.074-.347-.221-.715-1.156-1.857-1.734-3.426-1.734-.97 0-1.771.221-2.406.663a3.907 3.907 0 0 0-1.401 1.75c-.3.715-.45 1.491-.45 2.33 0 .838.15 1.615.45 2.329.3.713.767 1.291 1.401 1.733.635.442 1.437.663 2.406.663.911 0 1.701-.21 2.37-.628.681-.42 1.165-1.06 1.454-1.921.08-.216.225-.306.433-.272l1.315.17c.196.034.294.124.294.272 0 .022-.012.079-.035.17-.507 1.303-1.246 2.283-2.215 2.94-.957.646-2.163.97-3.616.97ZM91.216 28.207c.023.34.08.607.173.8.092.18.288.322.588.424.185.068.277.165.277.29a.396.396 0 0 1-.052.17l-.484.951c-.093.204-.243.278-.45.221-.67-.147-1.13-.47-1.385-.969-.057-.124-.115-.187-.173-.187-.057 0-.12.046-.19.136-.6.714-1.575 1.071-2.925 1.071-.819 0-1.482-.141-1.99-.425-.496-.283-.848-.623-1.055-1.02-.208-.408-.312-.799-.312-1.173 0-.612.19-1.161.571-1.648.393-.488.975-.828 1.748-1.02.53-.125 1.27-.221 2.215-.29.646-.045 1.113-.09 1.402-.135.23-.034.334-.17.311-.408-.057-.51-.23-.918-.519-1.224-.277-.318-.744-.476-1.401-.476-.427 0-.837.09-1.23.272-.38.17-.674.47-.882.9-.103.216-.254.29-.45.222l-1.055-.29c-.185-.056-.277-.152-.277-.288a.53.53 0 0 1 .034-.153 3.293 3.293 0 0 1 1.368-1.564c.634-.397 1.459-.595 2.474-.595.992 0 1.834.255 2.527.765.692.498 1.06 1.224 1.107 2.176.012.453.017 1.06.017 1.819.012.759.018 1.308.018 1.648Zm-4.326 1.445c.311 0 .651-.073 1.02-.22.381-.148.716-.403 1.004-.766.3-.374.485-.872.554-1.495v-.034c0-.114-.035-.199-.104-.256-.07-.067-.161-.09-.277-.067l-.675.067c-.75.069-1.36.148-1.834.238-.461.08-.86.227-1.194.442a.984.984 0 0 0-.484.884c0 .465.207.782.622.952.416.17.871.255 1.368.255ZM95.687 30.536a.364.364 0 0 1-.104.272c-.058.057-.144.085-.26.085h-1.125a.424.424 0 0 1-.277-.085.407.407 0 0 1-.086-.272V18.79c0-.114.029-.199.086-.255a.378.378 0 0 1 .277-.102h1.125c.116 0 .202.034.26.102.069.056.104.141.104.255v11.746ZM100.033 30.536a.364.364 0 0 1-.104.272c-.057.057-.144.085-.26.085h-1.124a.423.423 0 0 1-.277-.085.407.407 0 0 1-.086-.272V18.79c0-.114.028-.199.086-.255a.378.378 0 0 1 .277-.102h1.125c.115 0 .202.034.26.102.069.056.103.141.103.255v11.746Z" stroke="#fff" stroke-width=".5"/><path d="M43.151 8.686c.296 0 .554-.036.774-.108.22-.076.402-.182.546-.318.148-.14.258-.308.33-.504.072-.2.108-.422.108-.666a1.75 1.75 0 0 0-.108-.63 1.245 1.245 0 0 0-.324-.48 1.41 1.41 0 0 0-.546-.3 2.516 2.516 0 0 0-.78-.108h-1.206v3.114h1.206Zm0-4.362c.58 0 1.082.068 1.506.204.424.136.774.326 1.05.57.276.244.48.536.612.876.136.34.204.712.204 1.116 0 .42-.07.806-.21 1.158-.14.348-.35.648-.63.9s-.632.448-1.056.588c-.42.14-.912.21-1.476.21h-1.206V13h-1.614V4.324h2.82Zm6.819 2.424c.456 0 .87.074 1.242.222a2.692 2.692 0 0 1 1.578 1.626c.144.392.216.83.216 1.314 0 .488-.072.928-.216 1.32-.144.392-.35.726-.618 1.002a2.653 2.653 0 0 1-.96.636 3.333 3.333 0 0 1-1.242.222c-.46 0-.878-.074-1.254-.222a2.712 2.712 0 0 1-.966-.636 2.922 2.922 0 0 1-.618-1.002 3.807 3.807 0 0 1-.216-1.32c0-.484.072-.922.216-1.314.148-.392.354-.724.618-.996.268-.272.59-.482.966-.63a3.397 3.397 0 0 1 1.254-.222Zm0 5.202c.512 0 .89-.172 1.134-.516.248-.344.372-.848.372-1.512s-.124-1.17-.372-1.518c-.244-.348-.622-.522-1.134-.522-.52 0-.906.176-1.158.528-.248.348-.372.852-.372 1.512s.124 1.164.372 1.512c.252.344.638.516 1.158.516Zm12.85-5.106L60.866 13h-1.188c-.136 0-.23-.088-.282-.264L58.29 9.178c-.036-.12-.07-.238-.102-.354a5.729 5.729 0 0 1-.072-.36 6.81 6.81 0 0 1-.084.366c-.028.12-.06.24-.096.36l-1.122 3.546c-.048.176-.154.264-.318.264h-1.14l-1.95-6.156h1.182c.108 0 .2.026.276.078a.363.363 0 0 1 .15.198l.882 3.288c.044.18.082.356.114.528.036.172.066.344.09.516.044-.172.09-.344.138-.516l.162-.528 1.02-3.3a.382.382 0 0 1 .138-.198.429.429 0 0 1 .258-.078h.654c.104 0 .192.026.264.078a.363.363 0 0 1 .15.198l.99 3.3c.052.18.1.358.144.534.048.172.094.344.138.516.052-.34.126-.69.222-1.05l.906-3.288a.405.405 0 0 1 .15-.198.429.429 0 0 1 .258-.078h1.128Zm4.704 2.37c0-.192-.028-.372-.084-.54a1.25 1.25 0 0 0-.24-.45 1.096 1.096 0 0 0-.414-.3 1.358 1.358 0 0 0-.576-.114c-.428 0-.766.122-1.014.366-.244.244-.4.59-.468 1.038h2.796Zm-2.826.894c.024.316.08.59.168.822.088.228.204.418.348.57.144.148.314.26.51.336.2.072.42.108.66.108.24 0 .446-.028.618-.084a2.76 2.76 0 0 0 .456-.186 7.55 7.55 0 0 0 .342-.186.59.59 0 0 1 .288-.084c.124 0 .216.046.276.138l.426.54a2.536 2.536 0 0 1-.552.486 3.281 3.281 0 0 1-1.32.474 4.79 4.79 0 0 1-.666.048 3.33 3.33 0 0 1-1.194-.21 2.726 2.726 0 0 1-.96-.63 2.993 2.993 0 0 1-.642-1.032c-.156-.412-.234-.888-.234-1.428 0-.42.068-.814.204-1.182.136-.372.33-.694.582-.966.256-.276.566-.494.93-.654.368-.16.782-.24 1.242-.24.388 0 .746.062 1.074.186.328.124.61.306.846.546.236.236.42.528.552.876.136.344.204.738.204 1.182 0 .224-.024.376-.072.456-.048.076-.14.114-.276.114h-3.81Zm6.668-2.196c.192-.368.42-.656.684-.864a1.45 1.45 0 0 1 .936-.318c.284 0 .512.062.684.186l-.096 1.11a.294.294 0 0 1-.09.156.239.239 0 0 1-.15.042c-.06 0-.15-.01-.27-.03a2.01 2.01 0 0 0-.342-.03 1.11 1.11 0 0 0-.786.282c-.1.088-.19.196-.27.324a3.44 3.44 0 0 0-.216.438V13h-1.482V6.844h.87c.152 0 .258.028.318.084.06.052.1.148.12.288l.09.696Zm6.87 1.302c0-.192-.029-.372-.085-.54a1.25 1.25 0 0 0-.24-.45 1.096 1.096 0 0 0-.414-.3 1.358 1.358 0 0 0-.576-.114c-.428 0-.766.122-1.014.366-.244.244-.4.59-.468 1.038h2.796Zm-2.827.894c.024.316.08.59.168.822.088.228.204.418.348.57.144.148.314.26.51.336.2.072.42.108.66.108.24 0 .446-.028.618-.084a2.76 2.76 0 0 0 .456-.186 7.55 7.55 0 0 0 .342-.186.59.59 0 0 1 .288-.084c.124 0 .216.046.276.138l.426.54a2.536 2.536 0 0 1-.552.486 3.281 3.281 0 0 1-1.32.474 4.79 4.79 0 0 1-.666.048 3.33 3.33 0 0 1-1.194-.21 2.726 2.726 0 0 1-.96-.63 2.993 2.993 0 0 1-.642-1.032c-.156-.412-.234-.888-.234-1.428 0-.42.068-.814.204-1.182.136-.372.33-.694.582-.966.256-.276.566-.494.93-.654.368-.16.782-.24 1.242-.24.388 0 .746.062 1.074.186.328.124.61.306.846.546.236.236.42.528.552.876.136.344.204.738.204 1.182 0 .224-.024.376-.072.456-.048.076-.14.114-.276.114h-3.81Zm9.134-1.692a1.451 1.451 0 0 0-.552-.432 1.597 1.597 0 0 0-.636-.126c-.224 0-.426.042-.606.126a1.21 1.21 0 0 0-.462.384 1.8 1.8 0 0 0-.294.648c-.068.26-.102.568-.102.924 0 .36.028.666.084.918.06.248.144.452.252.612.108.156.24.27.396.342.156.068.33.102.522.102.308 0 .57-.064.786-.192.216-.128.42-.31.612-.546v-2.76Zm1.482-4.332V13h-.906c-.196 0-.32-.09-.372-.27l-.126-.594a3.09 3.09 0 0 1-.858.69c-.32.176-.694.264-1.122.264-.336 0-.644-.07-.924-.21a2.098 2.098 0 0 1-.726-.606 3.033 3.033 0 0 1-.468-.99 5.072 5.072 0 0 1-.162-1.344c0-.456.062-.88.186-1.272s.302-.732.534-1.02c.232-.288.51-.512.834-.672a2.384 2.384 0 0 1 1.092-.246c.344 0 .638.054.882.162.244.108.462.254.654.438V4.084h1.482Zm5.863 7.32c.168.204.35.348.546.432.2.084.41.126.63.126.228 0 .432-.04.612-.12.184-.084.34-.212.468-.384a1.93 1.93 0 0 0 .294-.666 4.05 4.05 0 0 0 .102-.972c0-.676-.112-1.164-.336-1.464-.224-.304-.546-.456-.966-.456-.284 0-.532.066-.744.198a2.38 2.38 0 0 0-.606.546v2.76Zm0-3.804a3.02 3.02 0 0 1 .822-.618c.304-.156.65-.234 1.038-.234.356 0 .676.07.96.21.288.14.532.342.732.606.204.26.36.576.468.948.108.372.162.79.162 1.254 0 .5-.062.954-.186 1.362a3.132 3.132 0 0 1-.534 1.05 2.4 2.4 0 0 1-.828.672c-.324.16-.684.24-1.08.24a2.103 2.103 0 0 1-.954-.216 1.891 1.891 0 0 1-.366-.246c-.108-.1-.212-.21-.312-.33l-.066.414c-.024.104-.066.178-.126.222a.37.37 0 0 1-.234.066h-.978V4.084h1.482V7.6Zm10.743-.756-3.354 7.848a.538.538 0 0 1-.174.234c-.068.056-.174.084-.318.084H97.68l1.152-2.472-2.49-5.694h1.302c.116 0 .206.028.27.084.068.056.118.12.15.192l1.308 3.192c.044.108.08.216.108.324.032.108.062.218.09.33a32.3 32.3 0 0 1 .108-.33c.036-.112.076-.222.12-.33l1.236-3.186a.437.437 0 0 1 .408-.276h1.188Z"/></g></svg>';
+const $15ddac3121cc3a5d$var$getWatermarkedCanvas = (canvas)=>new Promise((resolve)=>{
+        const dpr = window.devicePixelRatio || 1;
+        const context = canvas.getContext("2d");
+        const svgBlob = new Blob([
+            (0, $850842193b726422$export$218be676a714a9df)
+        ], {
+            type: "image/svg+xml;charset=utf-8"
+        });
+        const blobUrl = URL.createObjectURL(svgBlob);
+        const watermarkImage = new Image();
+        watermarkImage.onload = ()=>{
+            const x = canvas.width / dpr - watermarkImage.width - 16;
+            const y = canvas.height / dpr - watermarkImage.height - 16;
+            context?.drawImage(watermarkImage, x, y);
+            resolve(canvas);
+        };
+        watermarkImage.src = blobUrl;
+    });
+const $15ddac3121cc3a5d$export$674c90a250a8b2c5 = async (video)=>{
+    const { videoWidth: videoWidth , videoHeight: videoHeight  } = video;
+    const orientation = videoWidth > videoHeight ? "landscape" : "portrait";
+    const sourceWidth = orientation === "portrait" ? videoWidth : videoHeight;
+    const sourceHeight = orientation === "landscape" ? videoHeight : videoWidth;
+    const sourceX = orientation === "landscape" ? (videoWidth - sourceWidth) / 2 : 0;
+    const sourceY = orientation === "portrait" ? (videoHeight - sourceHeight) / 2 : 0;
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
-    let offsetHeight = video.offsetHeight;
-    let offsetWidth = video.offsetWidth;
-    const stream = video.srcObject;
-    const track = stream.getVideoTracks()[0];
-    const settings = track.getSettings();
-    const width = settings.width || 0;
-    const height = settings.height || 0;
-    if (width > height) {
-        offsetWidth += height - offsetHeight;
-        offsetHeight = height;
-        let cropW = width - offsetWidth;
-        if (cropW < 0) {
-            cropW = 0;
-            offsetWidth = width;
-        }
-        canvas.width = offsetWidth;
-        canvas.height = Math.min(offsetHeight, height);
-        ctx?.drawImage(video, cropW / 2, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
-    } else {
-        offsetHeight += width - offsetWidth;
-        offsetWidth = width;
-        let cropH = height - offsetHeight;
-        if (cropH < 0) {
-            cropH = 0;
-            offsetHeight = height;
-        }
-        canvas.width = Math.min(offsetWidth, width);
-        canvas.height = offsetHeight;
-        ctx?.drawImage(video, 0, cropH / 2, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
-    }
-    return canvas.toDataURL("image/jpeg");
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = sourceWidth * dpr;
+    canvas.height = sourceHeight * dpr;
+    ctx?.scale(dpr, dpr);
+    ctx?.drawImage(video, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, canvas.width / dpr, canvas.height / dpr);
+    const watermarkedCanvas = await $15ddac3121cc3a5d$var$getWatermarkedCanvas(canvas);
+    return watermarkedCanvas.toDataURL("image/jpeg");
 };
-const $c238d62666faeac8$export$4a210166cc9cb64b = async (src)=>{
+const $15ddac3121cc3a5d$export$4a210166cc9cb64b = async (src)=>{
     const video = document.createElement("video");
     const stream = new MediaStream();
     stream.addTrack(src);
@@ -445,7 +503,8 @@ const $c238d62666faeac8$export$4a210166cc9cb64b = async (src)=>{
     canvas.height = video.height;
     canvas.width = video.width;
     ctx?.drawImage(video, 0, 0);
-    return canvas.toDataURL("image/jpeg");
+    const watermarkedCanvas = await $15ddac3121cc3a5d$var$getWatermarkedCanvas(canvas);
+    return watermarkedCanvas.toDataURL("image/jpeg");
 };
@@ -457,7 +516,7 @@ const $c31e3fb4360572af$export$818d60b2e626da0c = {
     CONSUME_ERROR: "CONS1",
     SOCKET_LOST: "SOCK1"
 };
-const $c31e3fb4360572af$var$VIDEO_CONSTRAINS = {
+const $c31e3fb4360572af$export$d21ffcc5eb136bfa = {
     qvga: {
         width: {
             ideal: 320
@@ -520,11 +579,13 @@ const $c31e3fb4360572af$var$fetchAgentInfo = async ({ apiKey: apiKey , email: em
     });
     return agent;
 };
-class $c31e3fb4360572af$export$2e2bcd8739ae039 {
+const $c31e3fb4360572af$var$StreamerEventTargetType = EventTarget;
+class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$StreamerEventTargetType {
     pendingDeviceRequest = {};
     joinOptions = {};
     devicesList = [];
     constructor(){
+        super();
         navigator.mediaDevices.addEventListener("devicechange", ()=>this.onDeviceChange());
         this.iceServers = [
             {
@@ -553,18 +614,59 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
         this.webcamProducer = null;
         this.screenshareProducer = null;
         this.customMessages = new Map();
+        this.audioRenderers = {};
+    }
+    getState() {
+        const peers = [];
+        this.peers.forEach((peer, key)=>{
+            const deviceState = {
+                microphone: {
+                    enabled: false,
+                    muted: false
+                },
+                camera: {
+                    enabled: false
+                },
+                screenshare: {
+                    enabled: false
+                }
+            };
+            peer.producersData.forEach((producer)=>{
+                if (producer.deviceType === "microphone") {
+                    deviceState.microphone.enabled = true;
+                    deviceState.microphone.muted = producer.paused;
+                } else if (producer.deviceType === "screen") deviceState.screenshare.enabled = true;
+                else if (producer.deviceType === "webcam") deviceState.camera.enabled = true;
+            });
+            peers.push({
+                peerId: key,
+                displayName: peer.displayName,
+                deviceState: deviceState
+            });
+        });
+        return {
+            roomId: this.roomId,
+            peerId: this.peerId,
+            displayName: this.displayName,
+            callId: undefined,
+            deviceState: this.getDevicesState(),
+            peers: peers
+        };
     }
     onStartSpeak() {
         if (this.micProducer && !this.micProducer.paused) {
-            const event = new CustomEvent("localStartSpeak");
-            window.dispatchEvent(event);
+            const event = new CustomEvent("localStartSpeak", {
+                cancelable: true,
+                bubbles: true
+            });
+            this.dispatchEvent(event);
             this.protoo.notify("startSpeak");
         }
     }
     onStopSpeak() {
         if (this.micProducer && !this.micProducer.paused) {
             const event = new CustomEvent("localStopSpeak");
-            window.dispatchEvent(event);
+            this.dispatchEvent(event);
             this.protoo.notify("stopSpeak");
         }
     }
@@ -574,7 +676,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
                 code: code
             }
         });
-        window.dispatchEvent(event);
+        this.dispatchEvent(event);
     }
     async generateToken(bid) {
         const url = "https://g.snapcall.io/stream";
@@ -608,7 +710,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
             url = `${"wss://g.snapcall.io/stream"}/${instanceId}/?roomId=${room}&peerId=${this.peerId}`;
         } catch (roomError) {
             const event = new CustomEvent("invalidRoom");
-            window.dispatchEvent(event);
+            this.dispatchEvent(event);
         }
         if (!url) throw new Error("Invalid socket URL");
         this.protooTransport = new $3Sbms$WebSocketTransport(url, {
@@ -636,16 +738,17 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
                 const { id: id , displayName: displayName  } = notification.data;
                 this.peers.set(id, {
                     id: id,
+                    peerId: id,
                     displayName: displayName,
                     producersData: []
                 });
                 const event = new CustomEvent("newPeer", {
                     detail: {
-                        id: id,
+                        peerId: id,
                         displayName: displayName
                     }
                 });
-                window.dispatchEvent(event);
+                this.dispatchEvent(event);
             } else if (notification.method === "newProducer") {
                 const { peerId: peerId , producerId: producerId , deviceType: deviceType , paused: paused  } = notification.data;
                 await this.consumeProducer({
@@ -656,6 +759,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
                 });
             } else if (notification.method === "peerClosed") {
                 const { peerId: peerId , relatedConsumers: relatedConsumers  } = notification.data;
+                this.peers.delete(peerId);
                 relatedConsumers.forEach((consumer)=>{
                     this.onConsumerClose({
                         consumerId: consumer.id
@@ -666,7 +770,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
                         peerId: peerId
                     }
                 });
-                window.dispatchEvent(event);
+                this.dispatchEvent(event);
             } else if (notification.method === "consumerClosed") {
                 const { consumerId: consumerId  } = notification.data;
                 this.onConsumerClose({
@@ -680,34 +784,36 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
                         displayName: displayName
                     }
                 });
-                window.dispatchEvent(event);
+                this.dispatchEvent(event);
             } else if (notification.method === "requestDevice") {
                 this.pendingDeviceRequest[notification.data.requestId] = notification.data;
                 const event = new CustomEvent("requestDevice", {
                     detail: notification.data
                 });
-                window.dispatchEvent(event);
+                this.dispatchEvent(event);
             } else if (notification.method === "startSpeak") ;
             else if (notification.method === "stopSpeak") ;
             else if (notification.method === "producerPaused" || notification.method === "producerResumed") {
+                if (notification.data?.deviceType === "microphone") {
+                    const { peerId: peerId , producerId: producerId  } = notification.data;
+                    const microphoneData = this.peers.get(peerId)?.producersData.find((ele)=>producerId === ele.producerId);
+                    if (microphoneData) microphoneData.paused = notification.method === "producerPaused" ? true : false;
+                }
                 const event = new CustomEvent(notification.method, {
                     detail: notification.data
                 });
-                window.dispatchEvent(event);
+                this.dispatchEvent(event);
             } else if (notification.method === "requestDeviceResult") {
                 const event = new CustomEvent(notification.method, {
                     detail: notification.data
                 });
-                window.dispatchEvent(event);
+                this.dispatchEvent(event);
             } else if (notification.method === "terminateRoom") {
-                this.closeWebrtcTransport(this.sendAudioTransports);
-                this.closeWebrtcTransport(this.recvAudioTransports);
-                this.closeWebrtcTransport(this.sendVideoTransports);
-                this.closeWebrtcTransport(this.recvVideoTransports);
+                this.release();
                 const event = new CustomEvent(notification.method, {
                     detail: notification.data
                 });
-                window.dispatchEvent(event);
+                this.dispatchEvent(event);
             } else if (notification.method === "customMessage") {
                 const { messageId: messageId , chunk: chunk1 , chunkIndex: chunkIndex , totalChunks: totalChunks  } = notification.data.event;
                 const existingMessage = this.customMessages.get(messageId);
@@ -735,7 +841,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
                             event: parsedEvent
                         }
                     });
-                    window.dispatchEvent(event);
+                    this.dispatchEvent(event);
                     this.customMessages.delete(messageId);
                 }
             }
@@ -759,7 +865,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
         } catch (error) {
             console.error(error);
             $3Sbms$captureException(error);
-            window.dispatchEvent(new CustomEvent("browserDetectionFailed"));
+            this.dispatchEvent(new CustomEvent("browserDetectionFailed"));
         }
         return new $3Sbms$Device({
             handlerName: "Chrome74"
@@ -899,7 +1005,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
                 apiKey: this.joinOptions.apiKey,
                 email: this.joinOptions.email
             });
-            if (agentInfo) window.dispatchEvent(new CustomEvent("agentIdentity", {
+            if (agentInfo) this.dispatchEvent(new CustomEvent("agentIdentity", {
                 detail: {
                     success: true,
                     email: this.joinOptions.email
@@ -907,7 +1013,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
             }));
         } catch (agentInfoError) {
             console.warn(agentInfoError);
-            window.dispatchEvent(new CustomEvent("agentIdentity", {
+            this.dispatchEvent(new CustomEvent("agentIdentity", {
                 detail: {
                     success: false
                 }
@@ -918,16 +1024,22 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
             email: this.joinOptions.email
         });
         this.peers = new Map(peers.map((peer)=>[
-                peer.id,
+                peer.id || peer.peerId,
                 {
-                    ...peer
-                }
+                    ...peer,
+                    peerId: peer.id || peer.peerId
+                },
             ]));
         const callId = await this.getCallId();
-        window.dispatchEvent(new CustomEvent("enterRoom", {
+        this.dispatchEvent(new CustomEvent("enterRoom", {
             detail: {
                 peerId: this.peerId,
-                peers: peers,
+                peers: peers.map((peer)=>{
+                    return {
+                        ...peer,
+                        peerId: peer.id || peer.peerId
+                    };
+                }),
                 callId: callId
             }
         }));
@@ -936,7 +1048,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
         // Consume Peers
         peers.forEach((peer)=>{
             this.consumePeer({
-                peerId: peer.id,
+                peerId: peer.id || peer.peerId,
                 producersData: peer.producersData
             });
         });
@@ -974,13 +1086,15 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
         this.micProducer?.close();
         this.micProducer = undefined;
         const event = new CustomEvent("microphoneMute");
-        window.dispatchEvent(event);
+        this.dispatchEvent(event);
         await this.protoo.request("closeProducer", {
             producerId: producerId
         });
     }
     async onDeviceChange() {
         console.log("detecting device change");
+        const deviceListChangeEvent = new CustomEvent("devicesListChange");
+        this.dispatchEvent(deviceListChangeEvent);
         if (!this.protoo.closed && this.micProducer) {
             const lists = await navigator.mediaDevices.enumerateDevices();
             const inputs = lists.filter((media)=>media.kind === "audioinput");
@@ -1010,7 +1124,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
                         detail: defaultDevice
                     });
                     this.audioInputDefaultDevice = defaultDevice;
-                    window.dispatchEvent(event);
+                    this.dispatchEvent(event);
                     console.log("new default audio input trying to switch new :", defaultDevice.deviceId, defaultDevice.label);
                 }
                 this.switchMicrophone("default");
@@ -1054,7 +1168,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
             this.micProducer = micProducer;
             this.muted = false;
             const event = new CustomEvent("microphoneEnabled");
-            window.dispatchEvent(event);
+            this.dispatchEvent(event);
         }
     }
     async muteMicrophone() {
@@ -1066,7 +1180,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
             });
             this.muted = true;
             const event = new CustomEvent("microphoneMute");
-            window.dispatchEvent(event);
+            this.dispatchEvent(event);
         }
     }
     async unMuteMicrophone() {
@@ -1078,7 +1192,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
             });
             this.muted = false;
             const event = new CustomEvent("microphoneUnmute");
-            window.dispatchEvent(event);
+            this.dispatchEvent(event);
         }
     }
     async toggleMute() {
@@ -1094,17 +1208,31 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
             };
         }
     }
-    endCall() {
-        this.protoo.close();
-        this.protooTransport.close();
+    release() {
+        console.log("release");
         this.closeWebrtcTransport(this.sendAudioTransports);
         this.closeWebrtcTransport(this.recvAudioTransports);
         this.closeWebrtcTransport(this.sendVideoTransports);
         this.closeWebrtcTransport(this.recvVideoTransports);
+        this.webcamTrack?.stop();
+        this.webcamTrack = null;
+        this.protooTransport.close();
+        this.protoo.close();
+        this.micProducer?.close();
+        this.screenshareProducer?.close();
+        this.webcamProducer?.close();
+        this.consumers.forEach((consumer)=>{
+            consumer.mediaSoupConsumer.close();
+        });
         this.consumers.clear();
         this.audioLevel?.release();
-        const event = new CustomEvent("snapcallEvent_callEnd");
-        window.dispatchEvent(event);
+    }
+    endCall() {
+        this.release();
+        const event = new CustomEvent("leaveRoom");
+        this.dispatchEvent(event);
+        const deprecatedEvent = new CustomEvent("snapcallEvent_callEnd");
+        this.dispatchEvent(deprecatedEvent);
     }
     terminateRoom() {
         this.protoo.request("terminateRoom");
@@ -1123,7 +1251,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
                 numberOfAvailableWebcams: this.webcams.size
             }
         });
-        window.dispatchEvent(event);
+        this.dispatchEvent(event);
     }
     isVideoZoomAvailable() {
         return this.webcamZoom.available;
@@ -1175,16 +1303,85 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
             });
         }
     }
-    async enableVideo() {
+    scaleVideo() {
+        try {
+            let videoCount = 0;
+            this.consumers.forEach((consumer)=>{
+                if (consumer.mediaSoupConsumer.kind === "video") videoCount++;
+            });
+            if (this.screenshareProducer && !this.screenshareProducer.closed) videoCount++;
+            let scale = {
+                scaleResolutionDownBy: 1
+            };
+            if (videoCount >= 3) scale = {
+                scaleResolutionDownBy: 2
+            };
+            if (videoCount >= 9) scale = {
+                scaleResolutionDownBy: 4
+            };
+            if (this.webcamProducer && !this.webcamProducer.closed) {
+                console.log(`scaling video by ${scale.scaleResolutionDownBy}`);
+                this.webcamProducer?.setRtpEncodingParameters?.(scale).catch((err)=>{
+                    console.error("scaleResolutionDownBy not supported", err);
+                });
+            }
+        } catch (error) {
+            console.error("scaleVideo error", error);
+        }
+    }
+    async switchWebcam({ device: device , resolution: resolution , rotate: rotate  }) {
+        if (!this.webcam.device) throw new Error("no webcam devices");
+        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";
+        } else {
+            if (device) this.webcam.device = device;
+            if (resolution) this.webcam.resolution = resolution;
+        }
+        const stream = await this.handleGetUserMediaError("webcam", navigator.mediaDevices.getUserMedia({
+            video: {
+                deviceId: {
+                    ideal: this.webcam.device.deviceId
+                },
+                ...$c31e3fb4360572af$export$d21ffcc5eb136bfa[resolution || this.webcam.resolution]
+            }
+        }));
+        if (!this.sendVideoTransports) throw new Error("video transport not found");
+        const track = stream.getVideoTracks()[0];
+        this.webcamTrack = track;
+        await this.webcamProducer?.replaceTrack?.({
+            track: track
+        });
+        const capabilities = await track.getCapabilities?.() || navigator.mediaDevices.getSupportedConstraints?.();
+        this.webcamZoom = {
+            available: Boolean(capabilities?.zoom),
+            min: capabilities?.zoom?.min || 0,
+            max: capabilities?.zoom?.max || 0
+        };
+        const event = new CustomEvent("localVideoChange", {
+            detail: {
+                camera: this.getCurrentWebcam()
+            }
+        });
+        this.dispatchEvent(event);
+    }
+    async enableVideo(config) {
         await this.updateWebcams();
-        const { resolution: resolution  } = this.webcam;
+        if (config?.device) this.webcam.device = config.device;
         if (!this.webcam.device) throw new Error("no webcam devices");
         const stream = await this.handleGetUserMediaError("webcam", navigator.mediaDevices.getUserMedia({
             video: {
                 deviceId: {
                     ideal: this.webcam.device.deviceId
                 },
-                ...$c31e3fb4360572af$var$VIDEO_CONSTRAINS[resolution]
+                ...$c31e3fb4360572af$export$d21ffcc5eb136bfa[config?.resolution || this.webcam.resolution]
             }
         }));
         if (!this.sendVideoTransports) throw new Error("video transport not found");
@@ -1196,7 +1393,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
             min: capabilities?.zoom?.min || 0,
             max: capabilities?.zoom?.max || 0
         };
-        const encodings = undefined ? $c31e3fb4360572af$var$WEBCAM_SIMULCAST_ENCODINGS : undefined;
+        const encodings = undefined;
         const codecOptions = {
             videoGoogleStartBitrate: 1000
         };
@@ -1210,48 +1407,24 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
                 deviceType: deviceType
             }
         });
+        this.scaleVideo();
         this.webcamProducer.on("transportclose", ()=>{
             this.webcamProducer = null;
         });
         this.webcamProducer.on("trackended", ()=>{
             this.disableVideo().catch(()=>{});
         });
-        const event = new CustomEvent("localVideoAvailable");
-        window.dispatchEvent(event);
-    }
-    async rotateVideo() {
-        await this.updateWebcams();
-        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";
-        this.webcamProducer?.track?.stop?.();
-        const stream = await navigator.mediaDevices.getUserMedia({
-            video: {
-                deviceId: {
-                    exact: this.webcam.device.deviceId
-                },
-                ...$c31e3fb4360572af$var$VIDEO_CONSTRAINS[this.webcam.resolution]
+        const event = new CustomEvent("localVideoAvailable", {
+            detail: {
+                camera: this.getCurrentWebcam()
             }
         });
-        const track = stream.getVideoTracks()[0];
-        this.webcamTrack = track;
-        await this.webcamProducer?.replaceTrack?.({
-            track: track
+        this.dispatchEvent(event);
+    }
+    async rotateVideo() {
+        await this.switchWebcam({
+            rotate: true
         });
-        const capabilities = await track.getCapabilities();
-        this.webcamZoom = {
-            available: Boolean(capabilities.zoom),
-            min: capabilities?.zoom?.min || 0,
-            max: capabilities?.zoom?.max || 0
-        };
-        const event = new CustomEvent("localVideoRotate");
-        window.dispatchEvent(event);
     }
     async zoomVideo() {
         if (!this.webcamZoom.available) throw new Error("Webcam zoom is not available");
@@ -1283,7 +1456,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
         });
         this.webcamProducer = null;
         const event = new CustomEvent("localVideoUnavailable");
-        window.dispatchEvent(event);
+        this.dispatchEvent(event);
     }
     async enableScreenshare() {
         const stream = await this.handleGetUserMediaError("screen", navigator.mediaDevices.getDisplayMedia({
@@ -1305,7 +1478,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
         if (!stream) return;
         if (!this.sendVideoTransports) throw new Error("video screen transport not found");
         const track = stream.getVideoTracks()[0];
-        const encodings = undefined ? $c31e3fb4360572af$var$SCREEN_SHARING_SIMULCAST_ENCODINGS : undefined;
+        const encodings = undefined;
         const codecOptions = {
             videoGoogleStartBitrate: 1000
         };
@@ -1326,7 +1499,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
             this.disableScreenshare().catch(()=>{});
         });
         const event = new CustomEvent("screenshareEnabled");
-        window.dispatchEvent(event);
+        this.dispatchEvent(event);
     }
     async disableScreenshare() {
         if (this.screenshareProducer) {
@@ -1337,30 +1510,29 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
             this.screenshareProducer = null;
         }
         const event = new CustomEvent("screenshareDisabled");
-        window.dispatchEvent(event);
+        this.dispatchEvent(event);
     }
     onConsumerClose({ consumerId: consumerId  }) {
         const consumer = this.consumers.get(consumerId);
         if (consumer) {
+            const producerId = consumer.mediaSoupConsumer.producerId;
+            this.peers.forEach((value)=>{
+                const index = value.producersData.findIndex((ele)=>ele.producerId === producerId);
+                if (index !== -1) value.producersData.splice(index, 1);
+            });
             consumer.mediaSoupConsumer.close();
             this.consumers.delete(consumerId);
+            this.scaleVideo();
             const event = new CustomEvent("consumerClose", {
                 detail: {
                     peerId: consumer.mediaSoupConsumer.appData.peerId,
                     deviceType: consumer.deviceType
                 }
             });
-            window.dispatchEvent(event);
+            if (consumer.deviceType === "microphone") this.deleteAudioRenderer(consumerId);
+            this.dispatchEvent(event);
         }
     }
-    requestVoice({ consumerId: consumerId , element: element  }) {
-        const consumer = this.consumers.get(consumerId);
-        if (consumer) {
-            const mediaStream = new MediaStream();
-            mediaStream.addTrack(consumer.mediaSoupConsumer.track);
-            element.srcObject = mediaStream;
-        } else console.error(`Audio consumer ${consumerId} not found`);
-    }
     requestVideo({ consumerId: consumerId , element: element  }) {
         const consumer = this.consumers.get(consumerId);
         if (consumer) {
@@ -1373,8 +1545,8 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
     }
     async captureVideo(videoElement) {
         let image;
-        if (videoElement) image = (0, $c238d62666faeac8$export$674c90a250a8b2c5)(videoElement);
-        else if (this.webcamProducer && this.webcamProducer.track) image = await (0, $c238d62666faeac8$export$4a210166cc9cb64b)(this.webcamProducer.track);
+        if (videoElement) image = await (0, $15ddac3121cc3a5d$export$674c90a250a8b2c5)(videoElement);
+        else if (this.webcamProducer && this.webcamProducer.track) image = await (0, $15ddac3121cc3a5d$export$4a210166cc9cb64b)(this.webcamProducer.track);
         else throw new Error("no video to capture");
         return image;
     }
@@ -1419,6 +1591,12 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
             transportId: transport.transport.id,
             rtpCapabilities: this.mediasoupDevice.rtpCapabilities
         });
+        const peer = this.peers.get(peerId);
+        if (peer) peer.producersData.push({
+            producerId: producerId,
+            deviceType: deviceType,
+            paused: paused
+        });
         const { producerId: resolvedProducerId , id: id , kind: kind , rtpParameters: rtpParameters , appData: appData  } = data;
         console.log("Data: ", data);
         try {
@@ -1438,6 +1616,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
                 mediaSoupConsumer: consumer,
                 deviceType: deviceType
             });
+            this.scaleVideo();
             const event = new CustomEvent("newConsumer", {
                 detail: {
                     peerId: peerId,
@@ -1446,7 +1625,14 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
                     paused: paused
                 }
             });
-            window.dispatchEvent(event);
+            this.dispatchEvent(event);
+            if (consumer.kind === "audio") {
+                const audioRenderer = this.createAudioRenderer(consumer.id);
+                const mediaStream = new MediaStream();
+                mediaStream.addTrack(consumer.track);
+                audioRenderer.setSource(mediaStream);
+                audioRenderer.play();
+            }
             if (consumer.kind === "video") await this.protoo.request("resumeConsumer", {
                 consumerId: consumer.id
             });
@@ -1466,7 +1652,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
                 displayName: displayName
             }
         });
-        window.dispatchEvent(event);
+        this.dispatchEvent(event);
     }
     async requestPeerDevice(remotePeerId, deviceType) {
         return this.protoo.request("requestPeerDevice", {
@@ -1542,6 +1728,66 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 {
         });
         await Promise.all(chunksPromises);
     }
+    async listAudioDevices() {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        return devices.filter((device)=>device.kind === "audioinput" || device.kind === "audiooutput");
+    }
+    async listVideoDevices() {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        return devices.filter((device)=>device.kind === "videoinput");
+    }
+    isListDevicesSupported() {
+        return Boolean(navigator.mediaDevices?.enumerateDevices);
+    }
+    getCurrentWebcam() {
+        return this.webcam;
+    }
+    getWebcamsList() {
+        return this.webcams;
+    }
+    async setWebcamResolution(resolution) {
+        if (this.webcam.device) await this.switchWebcam({
+            resolution: resolution
+        });
+        else {
+            this.webcam.resolution = resolution;
+            const e = new CustomEvent("localVideoChange", {
+                detail: {
+                    camera: this.getCurrentWebcam()
+                }
+            });
+            this.dispatchEvent(e);
+        }
+    }
+    createAudioRenderer(consumerId) {
+        const renderer = new (0, $82e31ca38889c079$export$2e2bcd8739ae039)({
+            consumerId: consumerId
+        });
+        this.audioRenderers[consumerId] = renderer;
+        return renderer;
+    }
+    deleteAudioRenderer(consumerId) {
+        this.audioRenderers[consumerId]?.destroy();
+        delete this.audioRenderers[consumerId];
+    }
+    async playAudioRenderer(consumerId) {
+        await this.audioRenderers[consumerId]?.play();
+    }
+    async setAudioSink(sinkId) {
+        const promises = Object.keys(this.audioRenderers).map((consumerId)=>this.audioRenderers[consumerId].setSink(sinkId).catch((err)=>console.warn("Failed to setSinkId on renderer (consumerId: %s): ", consumerId, err)));
+        await Promise.allSettled(promises);
+    }
+    dispatchEvent(event) {
+        const result = super.dispatchEvent(event);
+        window.dispatchEvent(event);
+        return result;
+    }
+    async getShareLinkData(url) {
+        const data = await this.protoo.request("shareLink", {
+            url: url
+        });
+        return data;
+    }
 }
@@ -1782,46 +2028,46 @@ var $a1ac29d50bdaa837$export$2e2bcd8739ae039 = $a1ac29d50bdaa837$var$SnapcallLog
 const $2da9626742e3560b$export$6546b255bd3a2004 = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "21",
-        height: "20",
-        viewBox: "0 0 21 20",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "M17.5 0h-10a3 3 0 0 0-3 3v1h-1a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-1h1a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3Zm-3 17a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-7h12v7Zm0-9h-12V7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1Zm4 5a1 1 0 0 1-1 1h-1V7a3 3 0 0 0-.18-1h2.18v7Zm0-9h-12V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1Z",
+            d: "M19 2H9a3 3 0 0 0-3 3v1H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-1h1a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3Zm-3 17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-7h12v7Zm0-9H4V9a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1Zm4 5a1 1 0 0 1-1 1h-1V9a3 3 0 0 0-.18-1H20v7Zm0-9H8V5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1Z",
             fill: "#fff"
         })
     });
 const $2da9626742e3560b$export$92ce62e1201c4fc0 = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "19",
-        height: "20",
-        viewBox: "0 0 19 20",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "M18.5 6.94a1.307 1.307 0 0 0-.06-.27v-.09a1.07 1.07 0 0 0-.19-.28l-6-6a1.07 1.07 0 0 0-.28-.19.32.32 0 0 0-.09 0 .88.88 0 0 0-.33-.11H7.5a3 3 0 0 0-3 3v1h-1a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-1h1a3 3 0 0 0 3-3V6.94Zm-6-3.53L15.09 6H13.5a1 1 0 0 1-1-1V3.41Zm0 13.59a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h1v7a3 3 0 0 0 3 3h5v1Zm4-4a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3v3a3 3 0 0 0 3 3h3v5Z",
+            d: "M21 8.94a1.307 1.307 0 0 0-.06-.27v-.09a1.07 1.07 0 0 0-.19-.28l-6-6a1.071 1.071 0 0 0-.28-.19.32.32 0 0 0-.09 0 .88.88 0 0 0-.33-.11H10a3 3 0 0 0-3 3v1H6a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-1h1a3 3 0 0 0 3-3V8.94Zm-6-3.53L17.59 8H16a1 1 0 0 1-1-1V5.41ZM15 19a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h1v7a3 3 0 0 0 3 3h5v1Zm4-4a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3v3a3 3 0 0 0 3 3h3v5Z",
             fill: "#fff"
         })
     });
 const $2da9626742e3560b$export$6470d09a29d34d08 = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "23",
-        height: "22",
-        viewBox: "0 0 23 22",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "M7.5 20h-4a1 1 0 0 1-1-1v-4a1 1 0 1 0-2 0v4a3 3 0 0 0 3 3h4a1 1 0 0 0 0-2Zm14-6a1 1 0 0 0-1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 0 0 2h4a3 3 0 0 0 3-3v-4a1 1 0 0 0-1-1Zm-2-14h-4a1 1 0 1 0 0 2h4a1 1 0 0 1 1 1v4a1 1 0 0 0 2 0V3a3 3 0 0 0-3-3Zm-18 8a1 1 0 0 0 1-1V3a1 1 0 0 1 1-1h4a1 1 0 0 0 0-2h-4a3 3 0 0 0-3 3v4a1 1 0 0 0 1 1Zm8-4h-4a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1Zm-1 4h-2V6h2v2Zm5 2h4a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1Zm1-4h2v2h-2V6Zm-5 6h-4a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1Zm-1 4h-2v-2h2v2Zm5-1a1 1 0 0 0 1-1 1 1 0 0 0 0-2h-1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1Zm4-3a1 1 0 0 0-1 1v3a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1Zm-4 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z",
+            d: "M8 21H4a1 1 0 0 1-1-1v-4a1 1 0 1 0-2 0v4a3 3 0 0 0 3 3h4a1 1 0 0 0 0-2Zm14-6a1 1 0 0 0-1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 0 0 2h4a3 3 0 0 0 3-3v-4a1 1 0 0 0-1-1ZM20 1h-4a1 1 0 1 0 0 2h4a1 1 0 0 1 1 1v4a1 1 0 0 0 2 0V4a3 3 0 0 0-3-3ZM2 9a1 1 0 0 0 1-1V4a1 1 0 0 1 1-1h4a1 1 0 0 0 0-2H4a3 3 0 0 0-3 3v4a1 1 0 0 0 1 1Zm8-4H6a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1ZM9 9H7V7h2v2Zm5 2h4a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1Zm1-4h2v2h-2V7Zm-5 6H6a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1Zm-1 4H7v-2h2v2Zm5-1a1 1 0 0 0 1-1 1 1 0 0 0 0-2h-1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1Zm4-3a1 1 0 0 0-1 1v3a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1Zm-4 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z",
             fill: "#fff"
         })
     });
 const $2da9626742e3560b$export$1095c93890fce526 = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "21",
-        height: "20",
-        viewBox: "0 0 21 20",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "m19.82 7.55-1.89-.63.89-1.78A1 1 0 0 0 18.63 4L16.5 1.87a1 1 0 0 0-1.15-.19l-1.78.89-.63-1.89A1 1 0 0 0 12 0H9a1 1 0 0 0-.95.68l-.63 1.89-1.78-.89a1 1 0 0 0-1.14.19L2.37 4a1 1 0 0 0-.19 1.15l.89 1.78-1.89.63a1 1 0 0 0-.68.94v3a1 1 0 0 0 .68.95l1.89.63-.89 1.78A1 1 0 0 0 2.37 16l2.13 2.13a1 1 0 0 0 1.15.19l1.78-.89.63 1.89a1 1 0 0 0 .95.68h3a1 1 0 0 0 .95-.68l.63-1.89 1.78.89a1 1 0 0 0 1.13-.19L18.63 16a1 1 0 0 0 .19-1.15l-.89-1.78 1.89-.63a1 1 0 0 0 .68-.94v-3a1 1 0 0 0-.68-.95Zm-1.32 3.23-1.2.4A2 2 0 0 0 16.14 14l.57 1.14-1.1 1.1-1.11-.6a2 2 0 0 0-2.79 1.16l-.4 1.2H9.72l-.4-1.2a2 2 0 0 0-2.82-1.16l-1.14.57-1.1-1.1.6-1.11a2 2 0 0 0-1.16-2.82l-1.2-.4V9.22l1.2-.4A2 2 0 0 0 4.86 6l-.57-1.11 1.1-1.1 1.11.57A2 2 0 0 0 9.32 3.2l.4-1.2h1.56l.4 1.2a2 2 0 0 0 2.82 1.16l1.14-.57 1.1 1.1-.6 1.11a2 2 0 0 0 1.16 2.79l1.2.4v1.59ZM10.5 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z",
+            d: "m21.32 9.55-1.89-.63.89-1.78A1 1 0 0 0 20.13 6L18 3.87a1 1 0 0 0-1.15-.19l-1.78.89-.63-1.89A1 1 0 0 0 13.5 2h-3a1 1 0 0 0-.95.68l-.63 1.89-1.78-.89A1 1 0 0 0 6 3.87L3.87 6a1 1 0 0 0-.19 1.15l.89 1.78-1.89.63a1 1 0 0 0-.68.94v3a1 1 0 0 0 .68.95l1.89.63-.89 1.78A1 1 0 0 0 3.87 18L6 20.13a1 1 0 0 0 1.15.19l1.78-.89.63 1.89a1 1 0 0 0 .95.68h3a1 1 0 0 0 .95-.68l.63-1.89 1.78.89a1 1 0 0 0 1.13-.19L20.13 18a1 1 0 0 0 .19-1.15l-.89-1.78 1.89-.63a1 1 0 0 0 .68-.94v-3a1 1 0 0 0-.68-.95ZM20 12.78l-1.2.4A2 2 0 0 0 17.64 16l.57 1.14-1.1 1.1-1.11-.6a2 2 0 0 0-2.79 1.16l-.4 1.2h-1.59l-.4-1.2A2 2 0 0 0 8 17.64l-1.14.57-1.1-1.1.6-1.11a2 2 0 0 0-1.16-2.82l-1.2-.4v-1.56l1.2-.4A2 2 0 0 0 6.36 8l-.57-1.11 1.1-1.1L8 6.36a2 2 0 0 0 2.82-1.16l.4-1.2h1.56l.4 1.2A2 2 0 0 0 16 6.36l1.14-.57 1.1 1.1-.6 1.11a2 2 0 0 0 1.16 2.79l1.2.4v1.59ZM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z",
             fill: "#fff"
         })
     });
@@ -1853,9 +2099,17 @@ const $2da9626742e3560b$export$5170987d58ae338d = ()=>/*#__PURE__*/ (0, $3Sbms$j
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "M12.83 13.45a1 1 0 0 0-1.66 0l-4 6a1 1 0 0 0 0 1A1 1 0 0 0 8 21h8a1 1 0 0 0 .88-.53 1 1 0 0 0-.05-1l-4-6.02ZM9.87 19 12 15.8l2.13 3.2H9.87ZM19 3H5a3 3 0 0 0-3 3v9a3 3 0 0 0 3 3h.85a1 1 0 0 0 0-2H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-.85a1 1 0 0 0 0 2H19a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3Z",
-            fill: "#fff"
+        children: /*#__PURE__*/ (0, $3Sbms$jsxs)("g", {
+            clipPath: "url(#pip)",
+            fill: "#fff",
+            children: [
+                /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                    d: "M0 5v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H3a3 3 0 0 0-3 3Zm17-1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h14Z"
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                    d: "M10 14v4.879a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V14a3 3 0 0 0-3-3h-8a3 3 0 0 0-3 3ZM10 11.149c0 .113-.02.226-.06.332a.85.85 0 0 1-.8.519H5.736a.851.851 0 0 1 0-1.702h1.353l-2.792-2.8a.851.851 0 1 1 1.2-1.2l2.8 2.8V7.744a.851.851 0 0 1 1.703 0v3.405Z"
+                })
+            ]
         })
     });
@@ -1897,6 +2151,7 @@ const $4ee077ee5e6fe3e7$export$b286f91cddfedb5a = (0, $3Sbms$styledcomponents).d
   white-space: nowrap;
   max-height: 70vh;
   overflow: auto;
+  border: 1px solid rgba(255, 255, 255, 0.1);
   ${$4ee077ee5e6fe3e7$export$d00c23c5e97ada8}:not(:last-child) {
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@@ -1983,7 +2238,7 @@ const $ab29487ffcc05855$export$1e86fd0e1db89578 = (0, $3Sbms$styledcomponents).d
   justify-content: space-between;
   align-items: center;
   background-color: ${(props)=>props.theme.backgroundColor};
-  height: 60px;
+  height: 65px;
   padding: 0 15px;
   @media (max-height: 500px) {
@@ -2000,6 +2255,8 @@ const $ab29487ffcc05855$export$4dc2e6a0e59ffa13 = (0, $3Sbms$styledcomponents).s
   line-height: 16px;
   color: #fff;
   margin-left: 5px;
+  position: relative;
+  bottom: 1px;
 `;
 const $ab29487ffcc05855$export$8376625f8bb18347 = (0, $3Sbms$styledcomponents).div`
   display: flex;
@@ -2340,6 +2597,7 @@ class $e96d119a19ed0c6c$export$45fabd1ce5e673de {
 const $f235befa4cdc42d6$var$multiPiP = new (0, $e96d119a19ed0c6c$export$45fabd1ce5e673de)();
+const $f235befa4cdc42d6$var$browser = $3Sbms$parse(window.navigator.userAgent);
 const $f235befa4cdc42d6$var$Header = ()=>{
     const { setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , options: options , muted: muted , streaming: streaming  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
@@ -2435,7 +2693,7 @@ const $f235befa4cdc42d6$var$Header = ()=>{
                 ]
             },
         ];
-        if (document.pictureInPictureEnabled) computedCategories[0].items.push({
+        if (document.pictureInPictureEnabled && $f235befa4cdc42d6$var$browser.platform.type === "desktop") computedCategories[0].items.push({
             id: "pip",
             title: "Picture-in-Picture",
             jsxIcon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $2da9626742e3560b$export$5170987d58ae338d), {}),
@@ -2476,25 +2734,26 @@ var $f235befa4cdc42d6$export$2e2bcd8739ae039 = $f235befa4cdc42d6$var$Header;
-const $ecd263152c3a54ee$var$useWindowSize = (element)=>{
+const $af23c74942bdcae7$export$2b86bedf890eab8 = (element)=>{
     const [size, setSize] = (0, $3Sbms$useState)([
         0,
         0
     ]);
     (0, $3Sbms$useLayoutEffect)(()=>{
         const updateSize = ()=>setSize([
-                element?.offsetWidth || window.innerWidth,
-                element?.offsetHeight || window.innerHeight,
+                element?.offsetWidth || 0,
+                element?.offsetHeight || 0
             ]);
-        window.addEventListener("resize", updateSize);
-        updateSize();
-        return ()=>window.removeEventListener("resize", updateSize);
+        if (element) {
+            const observer = new ResizeObserver(updateSize);
+            observer.observe(element);
+            return ()=>observer.unobserve(element);
+        }
     }, [
         element
     ]);
     return size;
 };
-var $ecd263152c3a54ee$export$2e2bcd8739ae039 = $ecd263152c3a54ee$var$useWindowSize;
@@ -2504,15 +2763,11 @@ var $ecd263152c3a54ee$export$2e2bcd8739ae039 = $ecd263152c3a54ee$var$useWindowSi
-const $6043ae1b48c5aa97$var$ThemedPath = (0, $3Sbms$styledcomponents).path`
-  fill: ${(props)=>props.theme.controlsIconColor};
-`;
 const $6043ae1b48c5aa97$var$Microphone = ({ slash: slash , redSlash: redSlash , status: status , deviceRequest: deviceRequest  })=>{
     if (slash) return /*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
-        width: "25",
-        height: "25",
-        viewBox: "0 0 25 25",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: [
@@ -2548,13 +2803,13 @@ const $6043ae1b48c5aa97$var$Microphone = ({ slash: slash , redSlash: redSlash ,
         ]
     });
     if (status) return /*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "12",
-        height: "13",
-        viewBox: "0 0 12 13",
+        width: "14",
+        height: "14",
+        viewBox: "0 0 14 14",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "M5.125 1.676a1.167 1.167 0 0 1 1.72-.082c.211.222.327.517.322.823v1.99a.583.583 0 1 0 1.166 0v-1.99A2.333 2.333 0 0 0 4.25.94a.583.583 0 1 0 .875.735ZM9.92 7.241h.117a.583.583 0 0 0 .583-.472c.042-.282.057-.567.047-.852a.583.583 0 1 0-1.167 0c0 .215-.021.43-.064.642a.584.584 0 0 0 .484.682Zm1.75 3.535L1.17.276a.583.583 0 1 0-.828.823l3.325 3.348v1.47a2.333 2.333 0 0 0 3.5 2.018l.851.852A3.5 3.5 0 0 1 2.5 5.917a.583.583 0 0 0-1.167 0 4.667 4.667 0 0 0 4.084 4.626v1.207H4.25a.583.583 0 0 0 0 1.167h3.5a.583.583 0 0 0 0-1.167H6.583v-1.207a4.59 4.59 0 0 0 2.246-.928l1.983 1.984a.584.584 0 0 0 .829-.823h.029ZM6 7.084a1.167 1.167 0 0 1-1.167-1.167v-.303l1.43 1.435A1.015 1.015 0 0 1 6 7.084Z",
+            d: "M6.125 2.176a1.167 1.167 0 0 1 1.72-.082c.211.222.326.517.321.823v1.99a.583.583 0 1 0 1.167 0v-1.99A2.333 2.333 0 0 0 5.25 1.44a.583.583 0 1 0 .875.735Zm4.795 5.565h.117a.583.583 0 0 0 .583-.472c.042-.282.057-.567.046-.852a.584.584 0 0 0-1.166 0c0 .215-.022.43-.064.642a.583.583 0 0 0 .484.682Zm1.75 3.535L2.17.776a.583.583 0 1 0-.829.823l3.325 3.348v1.47a2.333 2.333 0 0 0 3.5 2.018l.852.852A3.5 3.5 0 0 1 3.5 6.417a.583.583 0 0 0-1.167 0 4.667 4.667 0 0 0 4.083 4.626v1.207H5.25a.583.583 0 0 0 0 1.167h3.5a.583.583 0 0 0 0-1.167H7.583v-1.207a4.59 4.59 0 0 0 2.246-.928l1.983 1.984a.584.584 0 0 0 .829-.823h.029ZM7 7.584a1.167 1.167 0 0 1-1.167-1.167v-.303l1.43 1.435A1.015 1.015 0 0 1 7 7.584Z",
             fill: "#fff"
         })
     });
@@ -2576,13 +2831,14 @@ const $6043ae1b48c5aa97$var$Microphone = ({ slash: slash , redSlash: redSlash ,
         ]
     });
     return /*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "16",
-        height: "22",
-        viewBox: "0 0 16 22",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $3Sbms$jsx)($6043ae1b48c5aa97$var$ThemedPath, {
-            d: "M8 14a4 4 0 0 0 4-4V4a4 4 0 1 0-8 0v6a4 4 0 0 0 4 4ZM6 4a2 2 0 1 1 4 0v6a2 2 0 0 1-4 0V4Zm10 6a1 1 0 0 0-2 0 6 6 0 1 1-12 0 1 1 0 0 0-2 0 8 8 0 0 0 7 7.93V20H5a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9v-2.07A8 8 0 0 0 16 10Z"
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+            d: "M12 15a4 4 0 0 0 4-4V5a4 4 0 1 0-8 0v6a4 4 0 0 0 4 4ZM10 5a2 2 0 1 1 4 0v6a2 2 0 0 1-4 0V5Zm10 6a1 1 0 0 0-2 0 6 6 0 1 1-12 0 1 1 0 1 0-2 0 8 8 0 0 0 7 7.93V21H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2h-2v-2.07A8 8 0 0 0 20 11Z",
+            fill: "#fff"
         })
     });
 };
@@ -2590,15 +2846,11 @@ var $6043ae1b48c5aa97$export$2e2bcd8739ae039 = $6043ae1b48c5aa97$var$Microphone;
-const $04e57b1f07a8e9f4$var$ThemedPath = (0, $3Sbms$styledcomponents).path`
-  fill: ${(props)=>props.theme.controlsIconColor};
-`;
 const $04e57b1f07a8e9f4$var$Camera = ({ slash: slash , status: status , deviceRequest: deviceRequest  })=>{
     if (slash) return /*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
-        width: "25",
-        height: "25",
-        viewBox: "0 0 25 25",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: [
@@ -2615,13 +2867,13 @@ const $04e57b1f07a8e9f4$var$Camera = ({ slash: slash , status: status , deviceRe
         ]
     });
     if (status) return /*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "12",
-        height: "13",
-        viewBox: "0 0 12 13",
+        width: "14",
+        height: "14",
+        viewBox: "0 0 14 14",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "M3.498 3.169 1.164.836a.586.586 0 0 0-.828.828L1.695 3A1.75 1.75 0 0 0 .167 4.75v3.5A1.75 1.75 0 0 0 1.917 10h5.25a1.75 1.75 0 0 0 1.108-.403l2.56 2.567a.582.582 0 0 0 .83 0 .582.582 0 0 0 0-.828L3.497 3.169Zm3.669 5.664h-5.25a.583.583 0 0 1-.584-.583v-3.5a.583.583 0 0 1 .584-.584h.927l4.591 4.597a.583.583 0 0 1-.268.07Zm4.392-5.162a.583.583 0 0 0-.583 0l-2.06 1.015A1.75 1.75 0 0 0 7.167 3h-.781a.583.583 0 1 0 0 1.166h.782a.583.583 0 0 1 .583.584v.875a.944.944 0 0 0 0 .11.38.38 0 0 0 .03.117s.028.035.04.059a.583.583 0 0 0 .088.122s.058.035.087.058l.1.065c.044.006.089.006.133 0a.41.41 0 0 0 .082 0 .949.949 0 0 0 .11 0 .38.38 0 0 0 .118-.03l2.129-1.015v3.337a.584.584 0 0 0 1.166 0V4.166a.583.583 0 0 0-.274-.495Z",
+            d: "M4.497 3.669 2.164 1.336a.586.586 0 1 0-.828.828L2.695 3.5a1.75 1.75 0 0 0-1.529 1.75v3.5a1.75 1.75 0 0 0 1.75 1.75h5.25a1.75 1.75 0 0 0 1.109-.403l2.56 2.567a.583.583 0 0 0 .957-.19.582.582 0 0 0-.128-.638L4.497 3.669Zm3.67 5.664h-5.25a.583.583 0 0 1-.584-.583v-3.5a.583.583 0 0 1 .583-.584h.928l4.59 4.597a.583.583 0 0 1-.268.07Zm4.392-5.162a.583.583 0 0 0-.583 0l-2.06 1.015A1.75 1.75 0 0 0 8.166 3.5h-.781a.583.583 0 0 0 0 1.166h.781a.583.583 0 0 1 .584.584v.875a.944.944 0 0 0 0 .11.38.38 0 0 0 .029.117s.03.035.04.059a.584.584 0 0 0 .088.122s.059.035.088.058l.099.065c.044.006.09.006.134 0a.41.41 0 0 0 .082 0 .949.949 0 0 0 .11 0 .38.38 0 0 0 .117-.03l2.13-1.015v3.337a.583.583 0 0 0 1.166 0V4.666a.584.584 0 0 0-.274-.495Z",
             fill: "#fff"
         })
     });
@@ -2643,13 +2895,14 @@ const $04e57b1f07a8e9f4$var$Camera = ({ slash: slash , status: status , deviceRe
         ]
     });
     return /*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "20",
-        height: "12",
-        viewBox: "0 0 20 12",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $3Sbms$jsx)($04e57b1f07a8e9f4$var$ThemedPath, {
-            d: "M19.53 1.15a1 1 0 0 0-1 0L15 2.89A3 3 0 0 0 12 0H3a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h9a3 3 0 0 0 3-2.89l3.56 1.78A1 1 0 0 0 19 11a1 1 0 0 0 .875-.514A1 1 0 0 0 20 10V2a1 1 0 0 0-.47-.85ZM13 9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v6Zm5-.62-3-1.5V5.12l3-1.5v4.76Z"
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+            d: "M21.53 7.15a1 1 0 0 0-1 0L17 8.89A3 3 0 0 0 14 6H5a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h9a3 3 0 0 0 3-2.89l3.56 1.78A1 1 0 0 0 21 17a1 1 0 0 0 .875-.514A1 1 0 0 0 22 16V8a1 1 0 0 0-.47-.85ZM15 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v6Zm5-.62-3-1.5v-1.76l3-1.5v4.76Z",
+            fill: "#fff"
         })
     });
 };
@@ -2667,18 +2920,18 @@ const $1ca024917df8f7bc$var$ThemedArrowPath = (0, $3Sbms$styledcomponents).path`
 `;
 const $1ca024917df8f7bc$var$Screen = ({ arrow: arrow , white: white , deviceRequest: deviceRequest  })=>{
     if (deviceRequest) return /*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
-        width: "31",
+        width: "30",
         height: "30",
-        viewBox: "0 0 31 30",
+        viewBox: "0 0 30 30",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: [
             /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-                d: "M6.75 3.75h17.5A3.75 3.75 0 0 1 28 7.5v10a3.75 3.75 0 0 1-3.75 3.75H6.75A3.75 3.75 0 0 1 3 17.5v-10a3.75 3.75 0 0 1 3.75-3.75Z",
+                d: "M6.25 3.75h17.5A3.75 3.75 0 0 1 27.5 7.5v10a3.75 3.75 0 0 1-3.75 3.75H6.25A3.75 3.75 0 0 1 2.5 17.5v-10a3.75 3.75 0 0 1 3.75-3.75Z",
                 fill: "url(#screenTop)"
             }),
             /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-                d: "M14.25 23.75v-2.5h2.5v2.5h5a1.25 1.25 0 0 1 0 2.5H9.25a1.25 1.25 0 0 1 0-2.5h5Z",
+                d: "M13.75 23.75v-2.5h2.5v2.5h5a1.25 1.25 0 0 1 0 2.5H8.75a1.25 1.25 0 0 1 0-2.5h5Z",
                 fill: "url(#screenBottom)"
             })
         ]
@@ -2706,6 +2959,22 @@ var $1ca024917df8f7bc$export$2e2bcd8739ae039 = $1ca024917df8f7bc$var$Screen;
+const $435a6fc13d21296b$var$ThemedCirclePlain = (0, $3Sbms$styledcomponents).circle`
+  stroke: ${({ theme: theme  })=>theme.primaryColor};
+`;
+const $435a6fc13d21296b$var$ThemedCircleAlpha = (0, $3Sbms$styledcomponents).circle`
+  stroke: ${({ theme: theme  })=>$435a6fc13d21296b$var$hex2rgba(theme.primaryColor, 0.7683870967741935)};
+`;
+const $435a6fc13d21296b$var$hex2rgba = (hex, alpha)=>{
+    const rh = hex.slice(1, 3);
+    const gh = hex.slice(3, 5);
+    const bh = hex.slice(5, 7);
+    const rrgb = parseInt(rh, 16);
+    const grgb = parseInt(gh, 16);
+    const brgb = parseInt(bh, 16);
+    return `rgba(${rrgb}, ${grgb}, ${brgb}, ${alpha})`;
+};
 const $435a6fc13d21296b$var$Ripple = ()=>/*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         style: {
@@ -2721,12 +2990,11 @@ const $435a6fc13d21296b$var$Ripple = ()=>/*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
         viewBox: "0 0 100 100",
         preserveAspectRatio: "xMidYMid",
         children: [
-            /*#__PURE__*/ (0, $3Sbms$jsxs)("circle", {
+            /*#__PURE__*/ (0, $3Sbms$jsxs)($435a6fc13d21296b$var$ThemedCirclePlain, {
                 cx: "50",
                 cy: "50",
                 r: "0",
                 fill: "none",
-                stroke: "#6765fc",
                 children: [
                     /*#__PURE__*/ (0, $3Sbms$jsx)("animate", {
                         attributeName: "r",
@@ -2750,12 +3018,11 @@ const $435a6fc13d21296b$var$Ripple = ()=>/*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, $3Sbms$jsxs)("circle", {
+            /*#__PURE__*/ (0, $3Sbms$jsxs)($435a6fc13d21296b$var$ThemedCircleAlpha, {
                 cx: "50",
                 cy: "50",
                 r: "0",
                 fill: "none",
-                stroke: "rgba(102, 100, 252, 0.7683870967741935)",
                 children: [
                     /*#__PURE__*/ (0, $3Sbms$jsx)("animate", {
                         attributeName: "r",
@@ -2786,13 +3053,13 @@ var $435a6fc13d21296b$export$2e2bcd8739ae039 = $435a6fc13d21296b$var$Ripple;
 const $57da43088f4a416a$var$User = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "20",
-        height: "22",
-        viewBox: "0 0 20 22",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "M13.71 11.71a6 6 0 1 0-7.42 0 10 10 0 0 0-6.22 8.18 1.006 1.006 0 0 0 2 .22 8 8 0 0 1 15.9 0 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 10 10 0 0 0-6.25-8.19ZM10 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z",
+            d: "M15.71 12.71a6 6 0 1 0-7.42 0 10 10 0 0 0-6.22 8.18 1.006 1.006 0 1 0 2 .22 8 8 0 0 1 15.9 0 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 10 10 0 0 0-6.25-8.19ZM12 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z",
             fill: "#fff"
         })
     });
@@ -2801,18 +3068,235 @@ var $57da43088f4a416a$export$2e2bcd8739ae039 = $57da43088f4a416a$var$User;
-const $6efc75079651494a$var$Blink = (0, $3Sbms$keyframes)`
-  50% {
-    border-color: #6967fc;
-  }
+const $7ec04c1818c68245$export$b302ef9d8310f71 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  flex: 1;
+  flex-direction: ${(props)=>props.direction};
+  background-color: ${(props)=>props.theme.backgroundColor};
+  padding: 0 10px;
+  position: relative;
+  overflow: hidden;
 `;
-const $6efc75079651494a$var$Flash = (0, $3Sbms$keyframes)`
-  0% {
-    opacity: 0.9;
-  }
-  100% {
-    opacity: 0;
-  }
+const $7ec04c1818c68245$export$5d87c823a66d4f1a = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  width: ${(props)=>{
+    if (props.audioTiles) return "100%";
+    if (props.orientation === "landscape" && props.reduced) return "20%";
+    return "100%";
+}};
+  height: ${(props)=>{
+    if (props.audioTiles) return "100%";
+    if (props.orientation === "portrait" && props.reduced) return "50%";
+    return "100%";
+}};
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  gap: ${(props)=>props.audioTiles ? "48px" : "15px"};
+  overflow: scroll;
+`;
+const $7ec04c1818c68245$export$798352b46783b18d = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: ${(props)=>props.theme.streamTileBackgroundColor};
+  border: ${(props)=>{
+    if (props.activeBorder) return `2px solid ${props.theme.primaryColor}`;
+    else if (props.border) return `2px solid ${props.theme.streamTileBorderColor}`;
+    return `2px solid ${props.theme.backgroundColor}`;
+}};
+  border-radius: 20px;
+  color: #cbcbcb;
+  box-sizing: border-box;
+  max-height: 100%;
+  cursor: ${(props)=>props.cursor ? props.cursor : "default"};
+`;
+const $7ec04c1818c68245$export$d574f5511ec1d79a = (0, $3Sbms$styledcomponents).video`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+  transform: ${(props)=>props.mirror ? "scale(-1, 1)" : "none"};
+  z-index: ${(props)=>props.zIndex ? props.zIndex : "unset"};
+`;
+const $7ec04c1818c68245$export$778ed67917f5eacf = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  gap: 8px;
+  z-index: 15;
+`;
+const $7ec04c1818c68245$export$92fe811838849d7d = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background-color: rgba(28, 32, 36, 0.25);
+`;
+const $7ec04c1818c68245$export$a878cdfb933a1421 = (0, $3Sbms$styledcomponents).div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: rgba(27, 32, 36, 0.25);
+  border-radius: 50px;
+  padding: 5px 10px 5px 5px;
+  bottom: 8px;
+  left: 8px;
+  color: white;
+  z-index: 15;
+`;
+const $7ec04c1818c68245$export$b430fec6b171ceb5 = (0, $3Sbms$styledcomponents).span`
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 700;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+`;
+const $7ec04c1818c68245$export$f6525863ef5a71a9 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 14px;
+  height: 14px;
+  padding: 3px 4px;
+  box-sizing: border-box;
+  background-color: #2d2d2d;
+  border-radius: 50px;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 8px;
+`;
+const $7ec04c1818c68245$export$f217faec90120a0c = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  z-index: 10;
+  background: ${(props)=>props.streaming ? "linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8))" : "none"};
+`;
+const $7ec04c1818c68245$export$df42e007689062b0 = (0, $3Sbms$styledcomponents).p`
+  text-align: center;
+  font-weight: 600;
+  font-size: ${(props)=>{
+    if (props.size === "small") return "12px";
+    if (props.size === "medium") return "14px";
+    if (props.size === "large") return "16px";
+    return "16px";
+}};
+  margin: 12px 6px;
+`;
+const $7ec04c1818c68245$export$81d5557f9199e44d = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  max-width: 90%;
+  background: rgba(45, 45, 45, 0.5);
+  border-radius: 50px;
+  padding: ${(props)=>{
+    if (props.size === "small") return "6px";
+    if (props.size === "medium") return "6px";
+    if (props.size === "large") return "10px";
+    return "10px";
+}};
+  gap: ${(props)=>{
+    if (props.size === "small") return "8px";
+    if (props.size === "medium") return "12px";
+    if (props.size === "large") return "18px";
+    return "18px";
+}};
+  gap: 18px;
+  box-sizing: border-box;
+`;
+const $7ec04c1818c68245$export$2c451b1e9e28138c = (0, $3Sbms$styledcomponents).button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 50%;
+  background-color: #2d2d2d;
+  padding: ${(props)=>{
+    if (props.size === "small") return "2px";
+    if (props.size === "medium") return "6px";
+    if (props.size === "large") return "12px";
+    return 0;
+}};
+  border: 2px solid transparent;
+  &:hover {
+    border: 2px solid ${({ theme: theme  })=>theme.primaryColor};
+    box-sizing: border-box;
+  }
+`;
+const $7ec04c1818c68245$export$6ddfb572d7b6d164 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 56px;
+  height: 56px;
+  background-color: #2d2d2d;
+  border-radius: 30%;
+`;
+const $7ec04c1818c68245$export$a2930b41faa750f4 = (0, $3Sbms$styledcomponents).span`
+  font-size: 26px;
+  font-weight: 600;
+  line-height: 20px;
+  color: #fff;
+`;
+const $7ec04c1818c68245$export$2d75367b6e042d67 = (0, $3Sbms$styledcomponents).img`
+  width: inherit;
+  height: inherit;
+  border-radius: inherit;
+`;
+const $7ec04c1818c68245$export$26fe7ec9351ff761 = (0, $3Sbms$styledcomponents).img`
+  border: 2px solid #fff;
+  border-radius: 8px;
+  width: 36px;
+  height: 36px;
+`;
+const $7ec04c1818c68245$export$49ac927a2aaad85 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #2d2d2d;
+  width: 13px;
+  height: 13px;
+  border-radius: 50px;
+  color: #fff;
+  font-size: 7px;
+  font-weight: 700;
+  svg {
+    width: 9px;
+    height: 9px;
+  }
+`;
+const $6efc75079651494a$var$Blink = (color)=>(0, $3Sbms$keyframes)`
+  50% {
+    border-color: ${color};
+  }
+`;
+const $6efc75079651494a$var$Flash = (0, $3Sbms$keyframes)`
+  0% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 0;
+  }
 `;
 const $6efc75079651494a$export$c983850c6c9d8b0e = (0, $3Sbms$keyframes)`
   0% {
@@ -2861,8 +3345,8 @@ const $6efc75079651494a$export$ba5a75b023bcdce2 = (0, $3Sbms$styledcomponents).d
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: ${(props)=>props.theme.streamTileBackgroundColor};
-  border: ${(props)=>props.border ? `2px solid ${props.theme.streamTileBorderColor}` : "none"};
+  background-color: ${(props)=>props.border ? props.theme.streamTileBackgroundColor : "transparent"};
+  border: 2px solid ${(props)=>props.border ? props.theme.streamTileBorderColor : "transparent"};
   border-radius: 20px;
   box-sizing: border-box;
@@ -2914,7 +3398,7 @@ const $6efc75079651494a$export$3f538be5f07ec098 = (0, $3Sbms$styledcomponents).d
   z-index: 50;
   color: #fff;
   overflow: hidden;
-  animation: ${$6efc75079651494a$var$Blink} 1.3s infinite;
+  animation: ${(props)=>$6efc75079651494a$var$Blink(props.theme.primaryColor)} 1.3s infinite;
 `;
 const $6efc75079651494a$export$31bbfacf5347c84a = (0, $3Sbms$styledcomponents).div`
   display: flex;
@@ -2939,8 +3423,8 @@ const $6efc75079651494a$export$dfd6aceefcfce0c9 = (0, $3Sbms$styledcomponents).d
   margin-top: 15px;
 `;
 const $6efc75079651494a$export$a85169f132f25a9d = (0, $3Sbms$styledcomponents).button`
-  background-color: ${(props)=>props.active ? "#6967fc" : "transparent"};
-  border: 2px solid #6967fc;
+  background-color: ${(props)=>props.active ? props.theme.primaryColor : "transparent"};
+  border: 2px solid ${({ theme: theme  })=>theme.primaryColor};
   border-radius: 50px;
   padding: 8px 18px;
   color: #fff;
@@ -2949,7 +3433,7 @@ const $6efc75079651494a$export$a85169f132f25a9d = (0, $3Sbms$styledcomponents).b
   line-height: 22px;
   &:hover {
-    background-color: #6967fc;
+    background-color: ${({ theme: theme  })=>theme.primaryColor};
   }
 `;
 const $6efc75079651494a$export$e07ea3386b3cb3d9 = (0, $3Sbms$styledcomponents).button`
@@ -2982,8 +3466,9 @@ const $6efc75079651494a$export$9e533c08c30af08 = (0, $3Sbms$styledcomponents).di
   position: absolute;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.75);
-  z-index: 16;
+  background-color: ${(props)=>props.show ? "rgba(0, 0, 0, 0.75)" : "transparent"};
+  transition: all ${({ show: show  })=>show ? "0.2s" : "0.66s"};
+  z-index: ${({ show: show  })=>show ? 16 : -1};
 `;
 const $6efc75079651494a$export$2b501aee548bae06 = (0, $3Sbms$styledcomponents).div`
   position: absolute;
@@ -3009,240 +3494,29 @@ const $6efc75079651494a$export$26fe7ec9351ff761 = (0, $3Sbms$styledcomponents).i
   width: 36px;
   height: 36px;
 `;
-const $7ec04c1818c68245$export$b302ef9d8310f71 = (0, $3Sbms$styledcomponents).div`
-  display: flex;
-  flex: 1;
-  flex-direction: ${(props)=>props.direction};
-  background-color: ${(props)=>props.theme.backgroundColor};
-  padding: 16px 10px;
-  position: relative;
-  overflow: hidden;
-`;
-const $7ec04c1818c68245$export$5d87c823a66d4f1a = (0, $3Sbms$styledcomponents).div`
-  display: flex;
-  width: ${(props)=>{
-    if (props.audioTiles) return "100%";
-    if (props.orientation === "landscape") {
-        if (props.reduced) return "20%";
-        return "80%";
-    }
-    return "100%";
-}};
-  height: ${(props)=>{
-    if (props.audioTiles) return "100%";
-    if (props.orientation === "portrait" && props.reduced) return "50%";
-    return "100%";
-}};
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-content: center;
-  gap: ${(props)=>props.audioTiles ? "48px" : "15px"};
-  overflow: scroll;
-`;
-const $7ec04c1818c68245$export$798352b46783b18d = (0, $3Sbms$styledcomponents).div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  background-color: ${(props)=>props.theme.streamTileBackgroundColor};
-  border: ${(props)=>{
-    if (props.activeBorder) return "2px solid #6967fc";
-    else if (props.border) return `2px solid ${props.theme.streamTileBorderColor}`;
-    return "none";
-}};
-  border-radius: 20px;
-  color: #cbcbcb;
-  box-sizing: border-box;
-  max-height: 100%;
-  cursor: ${(props)=>props.cursor ? props.cursor : "default"};
-`;
-const $7ec04c1818c68245$export$d574f5511ec1d79a = (0, $3Sbms$styledcomponents).video`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: inherit;
-  transform: ${(props)=>props.mirror ? "scale(-1, 1)" : "none"};
-  z-index: ${(props)=>props.zIndex ? props.zIndex : "unset"};
-`;
-const $7ec04c1818c68245$export$778ed67917f5eacf = (0, $3Sbms$styledcomponents).div`
-  display: flex;
-  position: absolute;
-  top: 16px;
-  left: 16px;
-  gap: 8px;
-  z-index: 15;
-  @media (max-width: 500px) {
-    top: 8px;
-    left: 8px;
-  }
-`;
-const $7ec04c1818c68245$export$92fe811838849d7d = (0, $3Sbms$styledcomponents).div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 26px;
-  height: 26px;
-  border-radius: 50%;
-  background-color: rgba(28, 32, 36, 0.25);
-`;
-const $7ec04c1818c68245$export$b430fec6b171ceb5 = (0, $3Sbms$styledcomponents).div`
-  position: absolute;
-  display: flex;
-  bottom: 10px;
-  left: 16px;
-  color: white;
-  font-size: 12px;
-  right: 16px;
-  z-index: 15;
-  p {
-    display: inline-block;
-    max-width: 100%;
-    background: rgba(27, 33, 39, 0.3);
-    border-radius: 10px;
-    padding: 10px;
-    margin: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    box-sizing: border-box;
-  }
-  @media (max-width: 500px) {
-    bottom: 7.5px;
-    left: 8px;
-  }
-`;
-const $7ec04c1818c68245$export$f217faec90120a0c = (0, $3Sbms$styledcomponents).div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  z-index: 10;
-  background: ${(props)=>props.streaming ? "linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8))" : "none"};
-`;
-const $7ec04c1818c68245$export$df42e007689062b0 = (0, $3Sbms$styledcomponents).p`
-  text-align: center;
-  font-weight: 600;
-  font-size: ${(props)=>{
-    if (props.size === "small") return "12px";
-    if (props.size === "medium") return "14px";
-    if (props.size === "large") return "16px";
-    return "16px";
-}};
-  margin: 12px 6px;
-`;
-const $7ec04c1818c68245$export$81d5557f9199e44d = (0, $3Sbms$styledcomponents).div`
-  display: flex;
-  max-width: 90%;
-  background: rgba(45, 45, 45, 0.5);
-  border-radius: 50px;
-  padding: ${(props)=>{
-    if (props.size === "small") return "6px";
-    if (props.size === "medium") return "6px";
-    if (props.size === "large") return "10px";
-    return "10px";
-}};
-  gap: ${(props)=>{
-    if (props.size === "small") return "8px";
-    if (props.size === "medium") return "12px";
-    if (props.size === "large") return "18px";
-    return "18px";
-}};
-  gap: 18px;
-  box-sizing: border-box;
-`;
-const $7ec04c1818c68245$export$2c451b1e9e28138c = (0, $3Sbms$styledcomponents).button`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: 50%;
-  background-color: #2d2d2d;
-  padding: ${(props)=>{
-    if (props.size === "small") return "2px";
-    if (props.size === "medium") return "6px";
-    if (props.size === "large") return "12px";
-    return 0;
-}};
-  border: 2px solid transparent;
-  &:hover {
-    border: 2px solid #6967fc;
-    box-sizing: border-box;
-  }
-`;
-const $7ec04c1818c68245$export$6ddfb572d7b6d164 = (0, $3Sbms$styledcomponents).div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 56px;
-  height: 56px;
-  background-color: #2d2d2d;
-  border-radius: 30%;
-`;
-const $7ec04c1818c68245$export$a2930b41faa750f4 = (0, $3Sbms$styledcomponents).span`
-  font-size: 26px;
-  font-weight: 600;
-  line-height: 20px;
-  color: #fff;
-`;
-const $7ec04c1818c68245$export$2d75367b6e042d67 = (0, $3Sbms$styledcomponents).img`
-  width: inherit;
-  height: inherit;
-  border-radius: inherit;
-`;
-const $7ec04c1818c68245$export$26fe7ec9351ff761 = (0, $3Sbms$styledcomponents).img`
-  border: 2px solid #fff;
-  border-radius: 8px;
-  width: 36px;
-  height: 36px;
-`;
-const $7ec04c1818c68245$export$49ac927a2aaad85 = (0, $3Sbms$styledcomponents).div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: #2d2d2d;
-  width: 13px;
-  height: 13px;
-  border-radius: 50px;
-  color: #fff;
-  font-size: 7px;
+const $6efc75079651494a$export$500c3c5544c37412 = (0, $3Sbms$styledcomponents)((0, $7ec04c1818c68245$export$a878cdfb933a1421))`
+  padding: 5px 10px;
+  font-size: 11px;
   font-weight: 700;
-  svg {
-    width: 9px;
-    height: 9px;
-  }
+  line-height: 13px;
 `;
 const $a53a1c6f62ad0fcc$var$getRequestButtonSize = (containerWidth)=>{
     if (containerWidth < 200) return "small";
     if (containerWidth < 300) return "medium";
     return "large";
 };
 const $a53a1c6f62ad0fcc$var$StreamTile = ({ stream: stream , width: width = 0 , height: height = 0  })=>{
-    const audioElementRef = (0, $3Sbms$useRef)(null);
     const videoElementRef = (0, $3Sbms$useRef)(null);
     const [hover, setHover] = (0, $3Sbms$useState)(false);
     const [requestingDevice, setRequestingDevice] = (0, $3Sbms$useState)(null);
     const [flashAnimation, setFlashAnimation] = (0, $3Sbms$useState)(false);
     const requestingDeviceTimeoutRef = (0, $3Sbms$useRef)(null);
-    const { userInteractionTriggered: userInteractionTriggered  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { selfPeerId: selfPeerId  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { highlightedTile: highlightedTile  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
-    const isSharingScreen = highlightedTile?.type === "screenshare" && highlightedTile.data.local;
+    const isSharingScreen = highlightedTile?.type === "screenshare" && highlightedTile.peerId === selfPeerId;
     const microphoneActive = stream.microphone && !stream.muted;
     const showRequestDevice = !requestingDevice && hover && !highlightedTile && (!microphoneActive || !stream.webcam);
     const tileWidth = `${width}px`;
@@ -3262,15 +3536,7 @@ const $a53a1c6f62ad0fcc$var$StreamTile = ({ stream: stream , width: width = 0 ,
     const requestScreen = ()=>{
         (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestPeerDevice(stream.id, "screen");
         setRequestingDevice("screen");
-    };
-    (0, $3Sbms$useEffect)(()=>{
-        if (stream.microphone && audioElementRef.current) (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestVoice({
-            consumerId: stream.microphone,
-            element: audioElementRef.current
-        });
-    }, [
-        stream.microphone
-    ]);
+    };
     (0, $3Sbms$useEffect)(()=>{
         if (!videoElementRef.current) throw new Error("videoElementRef not available");
         if (stream.webcam && videoElementRef.current) (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestVideo({
@@ -3312,9 +3578,9 @@ const $a53a1c6f62ad0fcc$var$StreamTile = ({ stream: stream , width: width = 0 ,
                 }
             }
         };
-        window.addEventListener("requestDeviceResult", onRequestDeviceResult);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("requestDeviceResult", onRequestDeviceResult);
         return ()=>{
-            window.removeEventListener("requestDeviceResult", onRequestDeviceResult);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("requestDeviceResult", onRequestDeviceResult);
         };
     }, [
         stream.id,
@@ -3323,52 +3589,17 @@ const $a53a1c6f62ad0fcc$var$StreamTile = ({ stream: stream , width: width = 0 ,
     (0, $3Sbms$useEffect)(()=>{
         const onCustomMessage = async (event)=>{
             const { peerId: peerId  } = event.detail;
-            const { type: type , imageSrc: imageSrc  } = event.detail.event;
-            if (type === "snapshot" && peerId === stream.id) {
-                setFlashAnimation(true);
-                const statusIcon = stream.displayName ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$49ac927a2aaad85), {
-                    children: stream.displayName.slice(0, 1).toUpperCase()
-                }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$49ac927a2aaad85), {
-                    children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57da43088f4a416a$export$2e2bcd8739ae039), {})
-                });
-                (0, $a5146f9062d7bf28$export$3a57e165650c636f)("Snapshot shared.", {
-                    width: "272px",
-                    icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$26fe7ec9351ff761), {
-                        src: imageSrc
-                    }),
-                    messageStyle: {
-                        fontWeight: 600,
-                        fontSize: "16px"
-                    },
-                    button: {
-                        text: "Open",
-                        action: ({ close: close  })=>{
-                            window.open(imageSrc, "_blank");
-                            close();
-                        }
-                    },
-                    status: {
-                        text: "From",
-                        boldText: stream.displayName || "User",
-                        icon: statusIcon
-                    },
-                    duration: 10000
-                });
-            }
+            const { type: type  } = event.detail.event;
+            if (type === "snapshot" && peerId === stream.id) setFlashAnimation(true);
         };
-        window.addEventListener("customMessage", onCustomMessage);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("customMessage", onCustomMessage);
         return ()=>{
-            window.removeEventListener("customMessage", onCustomMessage);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("customMessage", onCustomMessage);
         };
     }, [
         stream.id,
         stream.displayName
     ]);
-    (0, $3Sbms$useEffect)(()=>{
-        if (userInteractionTriggered && audioElementRef.current?.paused) audioElementRef.current.play();
-    }, [
-        userInteractionTriggered
-    ]);
     return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $7ec04c1818c68245$export$798352b46783b18d), {
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
@@ -3381,10 +3612,6 @@ const $a53a1c6f62ad0fcc$var$StreamTile = ({ stream: stream , width: width = 0 ,
         cursor: showRequestDevice ? "pointer" : "default",
         "data-peer-id": stream.id,
         children: [
-            /*#__PURE__*/ (0, $3Sbms$jsx)("audio", {
-                ref: audioElementRef,
-                autoPlay: true
-            }),
             /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$d574f5511ec1d79a), {
                 ref: videoElementRef,
                 style: {
@@ -3460,10 +3687,17 @@ const $a53a1c6f62ad0fcc$var$StreamTile = ({ stream: stream , width: width = 0 ,
                     ]
                 })
             }),
-            !showRequestDevice && stream.displayName && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$b430fec6b171ceb5), {
-                children: /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
-                    children: stream.displayName
-                })
+            !showRequestDevice && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $7ec04c1818c68245$export$a878cdfb933a1421), {
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$f6525863ef5a71a9), {
+                        children: stream.displayName ? /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                            children: stream.displayName.slice(0, 1).toUpperCase()
+                        }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57da43088f4a416a$export$2e2bcd8739ae039), {})
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$b430fec6b171ceb5), {
+                        children: stream.displayName || "User"
+                    })
+                ]
             })
         ]
     });
@@ -3527,33 +3761,11 @@ const $76e24981612b551d$export$a87ec69641e9884 = (0, $3Sbms$styledcomponents).sp
 const $21c8ac858b8a352e$var$AudioTile = ({ stream: stream  })=>{
-    const audioElementRef = (0, $3Sbms$useRef)(null);
-    const isMicrophoneActive = stream.microphone && !stream.muted;
-    const onMicrophoneEnabled = ()=>{
-        if (audioElementRef.current?.paused) audioElementRef.current.play();
-    };
-    (0, $3Sbms$useEffect)(()=>{
-        if (stream.microphone && audioElementRef.current && stream.microphone !== "self") (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestVoice({
-            consumerId: stream.microphone,
-            element: audioElementRef.current
-        });
-    }, [
-        stream.microphone
-    ]);
-    (0, $3Sbms$useEffect)(()=>{
-        if (stream.id !== "self") {
-            window.addEventListener("microphoneEnabled", onMicrophoneEnabled);
-            return ()=>window.removeEventListener("microphoneEnabled", onMicrophoneEnabled);
-        }
-    }, [
-        stream.id
-    ]);
+    const { selfPeerId: selfPeerId  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const isSelf = selfPeerId === stream.id;
+    const isMicrophoneActive = (stream.microphone || isSelf) && !stream.muted;
     return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $76e24981612b551d$export$d669f73461f8cadf), {
         children: [
-            /*#__PURE__*/ (0, $3Sbms$jsx)("audio", {
-                ref: audioElementRef,
-                autoPlay: true
-            }),
             /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $76e24981612b551d$export$235e35bd03f702fb), {
                 children: [
                     stream.displayName && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$a2930b41faa750f4), {
@@ -3599,18 +3811,15 @@ var $f260365f66cb6a6f$export$2e2bcd8739ae039 = $f260365f66cb6a6f$var$Reduce;
-const $57ab7b9a012d9acd$var$ThemedPath = (0, $3Sbms$styledcomponents).path`
-  fill: ${(props)=>props.theme.controlsIconColor};
-`;
-const $57ab7b9a012d9acd$var$Cross = ({ width: width = 15 , height: height = 15  })=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: width,
-        height: height,
-        viewBox: "0 0 15 15",
+const $57ab7b9a012d9acd$var$Cross = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $3Sbms$jsx)($57ab7b9a012d9acd$var$ThemedPath, {
-            d: "M1.292 1.292a1 1 0 0 1 1.416 0L8 6.586l5.292-5.294a1.002 1.002 0 0 1 1.416 1.416L9.414 8l5.294 5.292a1.001 1.001 0 1 1-1.416 1.416L8 9.414l-5.292 5.294a1 1 0 1 1-1.416-1.416L6.586 8 1.292 2.708a1 1 0 0 1 0-1.416Z"
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+            d: "M7.21 7.21a.714.714 0 0 1 1.011 0l3.78 3.78 3.778-3.78a.716.716 0 0 1 1.012 1.011l-3.781 3.78 3.78 3.778a.716.716 0 0 1-.779 1.167.716.716 0 0 1-.232-.155L12 13.01l-3.779 3.78a.716.716 0 0 1-1.011-1.01L10.99 12 7.21 8.221a.714.714 0 0 1 0-1.011Z",
+            fill: "#fff"
         })
     });
 var $57ab7b9a012d9acd$export$2e2bcd8739ae039 = $57ab7b9a012d9acd$var$Cross;
@@ -3942,7 +4151,7 @@ var $1c906a2b66e07e70$export$2e2bcd8739ae039 = $1c906a2b66e07e70$var$MediaSessio
 const $5939a59dc7c96d41$var$minimumTileWidth = 126;
-const $5939a59dc7c96d41$var$maximumTileWidth = 300;
+const $5939a59dc7c96d41$var$maximumTileWidth = 150;
 const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePresenting , width: width , height: height  })=>{
     const [extended, setExtended] = (0, $3Sbms$useState)(false);
     const [zoom, setZoom] = (0, $3Sbms$useState)(false);
@@ -3956,7 +4165,7 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
     const SelfTileRef = (0, $3Sbms$useRef)(null);
     const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , selfDisplayName: selfDisplayName , muted: muted , streaming: streaming , orientation: orientation ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
-    const [containerWidth, containerHeight] = (0, $ecd263152c3a54ee$export$2e2bcd8739ae039)(videosContainerRef.current);
+    const [containerWidth, containerHeight] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(videosContainerRef.current);
     const isAlone = streams.length < 1;
     const cursor = streaming && !isAlone && !extended ? "pointer" : "default";
     let tileSize = "100%";
@@ -3971,7 +4180,8 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         });
         tileSize = `${computedWidth}px`;
     }
-    const onLocalVideoRotate = ()=>{
+    const onLocalVideoChange = (event)=>{
+        if (!event.detail?.camera?.device) return;
         if (!videoElementRef.current) throw new Error("videoElementRef not available");
         const { facingMode: newFacingMode  } = (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestLocalVideo(videoElementRef.current);
         setFacingMode(newFacingMode);
@@ -4036,6 +4246,7 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         if (SelfTileRef.current) (0, $d02c24b66b4606fd$export$ab7d69e250642927)({
             element: SelfTileRef.current
         });
+        if (deviceType === "screen") return;
         setDeviceRequest({
             device: deviceType,
             requesterId: peerId
@@ -4092,11 +4303,11 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
         extended
     ]);
     (0, $3Sbms$useEffect)(()=>{
-        window.addEventListener("localVideoRotate", onLocalVideoRotate);
-        window.addEventListener("requestDevice", onDeviceRequest);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("localVideoChange", onLocalVideoChange);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("requestDevice", onDeviceRequest);
         return ()=>{
-            window.removeEventListener("localVideoRotate", onLocalVideoRotate);
-            window.removeEventListener("requestDevice", onDeviceRequest);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("localVideoChange", onLocalVideoChange);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("requestDevice", onDeviceRequest);
         };
     }, []);
     const content = /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
@@ -4140,8 +4351,8 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
                     ]
                 })
             }),
-            !extended && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$b430fec6b171ceb5), {
-                children: /*#__PURE__*/ (0, $3Sbms$jsx)("p", {
+            !extended && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$500c3c5544c37412), {
+                children: /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
                     children: "You"
                 })
             }),
@@ -4172,10 +4383,7 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
                                 onClick: onZoomClick,
                                 children: [
                                     zoom ? "2" : "1",
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57ab7b9a012d9acd$export$2e2bcd8739ae039), {
-                                        width: 8,
-                                        height: 8
-                                    })
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57ab7b9a012d9acd$export$2e2bcd8739ae039), {})
                                 ]
                             }),
                             /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
@@ -4221,7 +4429,9 @@ const $5939a59dc7c96d41$var$SelfStreamTile = ({ isSomeonePresenting: isSomeonePr
                     })
                 ]
             }),
-            extended && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$9e533c08c30af08), {})
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6efc75079651494a$export$9e533c08c30af08), {
+                show: extended
+            })
         ]
     });
 };
@@ -4236,6 +4446,7 @@ var $5939a59dc7c96d41$export$2e2bcd8739ae039 = $5939a59dc7c96d41$var$SelfStreamT
 const $a2c4dc31896a66fb$export$690f2758eb588c46 = (0, $3Sbms$styledcomponents).div`
   display: flex;
   justify-content: center;
@@ -4253,25 +4464,27 @@ const $a2c4dc31896a66fb$export$2ccbea1af5dfeb73 = (0, $3Sbms$styledcomponents).v
 `;
-const $306a53f44040492f$var$Screenshare = ({ data: data  })=>{
+const $306a53f44040492f$var$ScreenshareTile = (tile)=>{
+    const { selfPeerId: selfPeerId  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const videoElementRef = (0, $3Sbms$useRef)(null);
+    const isSelf = tile.peerId === selfPeerId;
     (0, $3Sbms$useEffect)(()=>{
-        if (data.consumerId && videoElementRef.current) (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestVideo({
-            consumerId: data.consumerId,
+        if (tile.data.consumerId && videoElementRef.current) (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestVideo({
+            consumerId: tile.data.consumerId,
             element: videoElementRef.current
         });
     }, [
-        data.consumerId
+        tile.data.consumerId
     ]);
     (0, $3Sbms$useEffect)(()=>{
-        if (data.local && videoElementRef.current) {
+        if (isSelf && videoElementRef.current) {
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).requestLocalScreenshare(videoElementRef.current);
             return ()=>{
                 (0, $c9e496369b59be7a$export$2f377c2162fd02b2).disableScreenshare();
             };
         }
     }, [
-        data.local
+        isSelf
     ]);
     return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a2c4dc31896a66fb$export$690f2758eb588c46), {
         children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $a2c4dc31896a66fb$export$2ccbea1af5dfeb73), {
@@ -4282,7 +4495,7 @@ const $306a53f44040492f$var$Screenshare = ({ data: data  })=>{
         })
     });
 };
-var $306a53f44040492f$export$2e2bcd8739ae039 = $306a53f44040492f$var$Screenshare;
+var $306a53f44040492f$export$2e2bcd8739ae039 = $306a53f44040492f$var$ScreenshareTile;
@@ -4298,6 +4511,148 @@ const $04dc495b2c5350ca$export$2cb99e4be0dc4646 = (url)=>new Promise((resolve, r
+const $6a95863cd4ef501c$export$eb5bbbfc393ab8ac = (0, $3Sbms$styledcomponents).div`
+  max-width: 100%;
+  margin-top: 60px;
+  margin-bottom: 20px;
+  padding: 0 25px;
+  box-sizing: border-box;
+`;
+const $6a95863cd4ef501c$export$ebce8992dc3bd82 = (0, $3Sbms$styledcomponents).div`
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 30px;
+`;
+const $6a95863cd4ef501c$export$e6c0b06d6e2dd9e3 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  flex-direction: column;
+  gap: 17px;
+`;
+const $6a95863cd4ef501c$export$8503ce930eaa5c44 = (0, $3Sbms$styledcomponents).img`
+  border-radius: 8px;
+  width: 36px;
+  height: 36px;
+`;
+const $6a95863cd4ef501c$export$a300a79023cea761 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #2d2d2d;
+  width: 100%;
+  border-radius: 50px;
+  color: #fff;
+  font-size: 7px;
+  font-weight: 700;
+  svg {
+    width: 8px;
+    height: 8px;
+  }
+`;
+const $f81bfa56534026c2$export$e9785ae652b3a722 = (item)=>{
+    const { roomId: roomId  } = (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getState();
+    if (roomId) {
+        const key = `stream_share_history_${roomId}`;
+        try {
+            const storedHistory = localStorage.getItem(key);
+            if (storedHistory) {
+                const parsedStoredHistory = JSON.parse(storedHistory);
+                parsedStoredHistory.push({
+                    ...item,
+                    id: parsedStoredHistory.length
+                });
+                const stringifiedHistory = JSON.stringify(parsedStoredHistory);
+                localStorage.setItem(key, stringifiedHistory);
+            } else {
+                const stringifiedHistory = JSON.stringify([
+                    {
+                        ...item,
+                        id: 0
+                    },
+                ]);
+                localStorage.setItem(key, stringifiedHistory);
+            }
+        } catch (localStorageError) {
+            console.warn(localStorageError);
+        }
+    } else console.warn("Undefined room ID");
+};
+const $f81bfa56534026c2$export$ad5f39c592532e2d = ()=>{
+    const [history, setHistory] = (0, $3Sbms$useState)([]);
+    (0, $3Sbms$useEffect)(()=>{
+        try {
+            const { roomId: roomId  } = (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getState();
+            const storedHistory = localStorage.getItem(`stream_share_history_${roomId}`);
+            if (storedHistory) {
+                const parsedStoredHistory = JSON.parse(storedHistory);
+                setHistory(parsedStoredHistory);
+            }
+        } catch (localStorageError) {
+            console.warn(localStorageError);
+        }
+    }, []);
+    if (history.length < 1) return null;
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $6a95863cd4ef501c$export$eb5bbbfc393ab8ac), {
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6a95863cd4ef501c$export$ebce8992dc3bd82), {
+                children: "Shared with you"
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6a95863cd4ef501c$export$e6c0b06d6e2dd9e3), {
+                children: history.map((item)=>{
+                    let itemStatus = undefined;
+                    if (item.statusText) {
+                        itemStatus = {
+                            text: "From",
+                            boldText: item.statusText
+                        };
+                        if (item.statusIconUrl) itemStatus.icon = item.statusIconUrl;
+                        if (item.statusIconLetter) itemStatus.icon = /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6a95863cd4ef501c$export$a300a79023cea761), {
+                            children: item.statusIconLetter.slice(0, 1).toUpperCase()
+                        });
+                        if (item.statusIconUser) itemStatus.icon = /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6a95863cd4ef501c$export$a300a79023cea761), {
+                            children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57da43088f4a416a$export$2e2bcd8739ae039), {})
+                        });
+                    }
+                    return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6d331dd378347945$export$14834abbfce3b8cd), {
+                        options: {
+                            width: "325px",
+                            backgroundColor: "#2d2d2d",
+                            ellipsis: true,
+                            icon: item.iconUrl ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $6a95863cd4ef501c$export$8503ce930eaa5c44), {
+                                style: {
+                                    ...item.iconStyle
+                                },
+                                src: item.iconUrl,
+                                onError: (0, $6d331dd378347945$export$5640675ad9afe3e2)
+                            }) : undefined,
+                            button: {
+                                text: "Open",
+                                action: ()=>window.open(item.url, "_blank"),
+                                style: {
+                                    backgroundColor: "#515151",
+                                    border: "2px solid #515151"
+                                }
+                            },
+                            status: itemStatus
+                        },
+                        children: item.title
+                    }, item.id);
+                })
+            })
+        ]
+    });
+};
 const $34a6fb3d684caabd$export$f4a8a05247f8d4c = (0, $3Sbms$styledcomponents).div`
   display: flex;
   justify-content: center;
@@ -4326,8 +4681,10 @@ const $5e2ac34f2c3f1b42$export$8bd7ff36223ef5c1 = "youtube_start";
 const $5e2ac34f2c3f1b42$export$1712c056f28ddd33 = "youtube_play";
 const $5e2ac34f2c3f1b42$export$405a29439cf92237 = "youtube_pause";
 const $5e2ac34f2c3f1b42$export$649698d6e35b1ef3 = "youtube_stop";
-const $5e2ac34f2c3f1b42$var$YoutubeTile = ({ data: data  })=>{
-    const [player, setPlayer] = (0, $3Sbms$useState)(null);
+const $5e2ac34f2c3f1b42$var$YoutubeTile = (tile)=>{
+    const { selfPeerId: selfPeerId  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const [player1, setPlayer] = (0, $3Sbms$useState)(null);
+    const isSelf = tile.peerId === selfPeerId;
     const onVideoStateChange = (event)=>{
         const time = event.target.getCurrentTime();
         if (event.data === YT.PlayerState.PAUSED) (0, $c9e496369b59be7a$export$2f377c2162fd02b2).sendCustomMessageToAll({
@@ -4340,6 +4697,16 @@ const $5e2ac34f2c3f1b42$var$YoutubeTile = ({ data: data  })=>{
         });
     };
     (0, $3Sbms$useEffect)(()=>{
+        const onVideoReady = (event)=>{
+            const player = event.target;
+            if (!isSelf) (0, $f81bfa56534026c2$export$e9785ae652b3a722)({
+                title: player.videoTitle || "Video",
+                url: `https://youtube.com/watch?v=${tile.data.videoId}`,
+                iconUrl: `https://i.ytimg.com/vi/${tile.data.videoId}/mqdefault.jpg`,
+                statusText: "YouTube",
+                statusIconUrl: "https://stream-assets.snapcall.io/icons/youtube.png"
+            });
+        };
         setPlayer((currentPlayer)=>{
             if (currentPlayer) currentPlayer.destroy();
             return null;
@@ -4348,74 +4715,77 @@ const $5e2ac34f2c3f1b42$var$YoutubeTile = ({ data: data  })=>{
             const youtubePlayer = new YT.Player("youtube-player", {
                 height: "390",
                 width: "640",
-                videoId: data.videoId,
+                videoId: tile.data.videoId,
                 playerVars: {
                     autoplay: 1,
-                    controls: data.local ? 1 : 0,
+                    controls: isSelf ? 1 : 0,
                     playsinline: 1,
                     enablejsapi: 1,
                     origin: window.location.origin,
                     rel: 0,
-                    start: data.time || 0
+                    start: tile.data.time || 0
                 },
                 events: {
-                    onStateChange: data.local ? onVideoStateChange : undefined
+                    onReady: onVideoReady,
+                    onStateChange: isSelf ? onVideoStateChange : undefined
                 }
             });
             setPlayer(youtubePlayer);
         };
         if (window?.YT?.loaded) window.onYouTubeIframeAPIReady();
         else (0, $04dc495b2c5350ca$export$2cb99e4be0dc4646)("https://www.youtube.com/iframe_api");
-        if (data.local) {
+        if (isSelf) {
             (0, $c9e496369b59be7a$export$2f377c2162fd02b2).sendCustomMessageToAll({
                 type: $5e2ac34f2c3f1b42$export$8bd7ff36223ef5c1,
-                videoId: data.videoId
+                videoId: tile.data.videoId
             });
             return ()=>{
                 (0, $c9e496369b59be7a$export$2f377c2162fd02b2).sendCustomMessageToAll({
                     type: $5e2ac34f2c3f1b42$export$649698d6e35b1ef3,
-                    videoId: data.videoId
+                    videoId: tile.data.videoId
                 });
             };
         }
     }, [
-        data
+        tile.data,
+        isSelf
     ]);
     (0, $3Sbms$useEffect)(()=>{
-        if (!data.local && player) {
+        if (!isSelf && player1) {
             const onCustomMessage = (event)=>{
                 const { type: type , time: time  } = event.detail.event;
                 if (type === $5e2ac34f2c3f1b42$export$405a29439cf92237) {
-                    player.pauseVideo();
-                    player.seekTo(time, true);
+                    player1.pauseVideo();
+                    player1.seekTo(time, true);
                 } else if (type === $5e2ac34f2c3f1b42$export$1712c056f28ddd33) {
-                    player.playVideo();
-                    player.seekTo(time, true);
+                    player1.playVideo();
+                    player1.seekTo(time, true);
                 }
             };
-            window.addEventListener("customMessage", onCustomMessage);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("customMessage", onCustomMessage);
             return ()=>{
-                window.removeEventListener("customMessage", onCustomMessage);
+                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("customMessage", onCustomMessage);
             };
         }
-        if (data.local && player) {
+        if (isSelf && player1) {
             const onNewPeer = (event)=>{
-                const { id: id  } = event.detail;
-                const time = player.getCurrentTime();
-                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).sendCustomMessage(id, {
+                const { peerId: peerId  } = event.detail;
+                const time = player1.getCurrentTime();
+                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).sendCustomMessage(peerId, {
                     type: $5e2ac34f2c3f1b42$export$8bd7ff36223ef5c1,
-                    videoId: data.videoId,
+                    videoId: tile.data.videoId,
                     time: time
                 });
             };
-            window.addEventListener("newPeer", onNewPeer);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("newPeer", onNewPeer);
             return ()=>{
-                window.removeEventListener("newPeer", onNewPeer);
+                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("newPeer", onNewPeer);
             };
         }
     }, [
-        data,
-        player
+        tile.data,
+        isSelf,
+        player1
     ]);
     return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $34a6fb3d684caabd$export$f4a8a05247f8d4c), {
         children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $34a6fb3d684caabd$export$b0da35797f3be127), {
@@ -4430,7 +4800,190 @@ var $5e2ac34f2c3f1b42$export$2e2bcd8739ae039 = $5e2ac34f2c3f1b42$var$YoutubeTile
+const $ab48431cd035ee30$export$e19cf0169f1019bf = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  position: relative;
+  height: 100%;
+  max-width: 100%;
+`;
+const $ab48431cd035ee30$export$6ac7409a4d5f70a2 = (0, $3Sbms$styledcomponents).img`
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 20px;
+`;
+const $ab48431cd035ee30$export$1a3b9916b31bd5c3 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+`;
+const $ab48431cd035ee30$export$8b251419efc915eb = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const $ab48431cd035ee30$export$7c309220fd1fb205 = (0, $3Sbms$styledcomponents).span`
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
+`;
+const $ab48431cd035ee30$export$7622450089705ca3 = (0, $3Sbms$styledcomponents).a`
+  color: #fff;
+  padding: 6px 12px;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 16px;
+  background: rgba(28, 32, 36, 0.5);
+  border: none;
+  border-radius: 50px;
+  text-decoration: none;
+  cursor: pointer;
+`;
+const $ab48431cd035ee30$export$a06f1c675e846f6f = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  justify-content: center;
+`;
+const $ab48431cd035ee30$export$f9985cea9f8ad92f = (0, $3Sbms$styledcomponents).button`
+  width: 36px;
+  height: 36px;
+  padding: 7px;
+  background: rgba(28, 32, 36, 0.5);
+  border: none;
+  border-radius: 50px;
+`;
+const $ab48431cd035ee30$export$26fe7ec9351ff761 = (0, $3Sbms$styledcomponents).img`
+  border: 2px solid #fff;
+  border-radius: 8px;
+  width: 36px;
+  height: 36px;
+`;
+const $ab48431cd035ee30$export$49ac927a2aaad85 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #2d2d2d;
+  width: 13px;
+  height: 13px;
+  border-radius: 50px;
+  color: #fff;
+  font-size: 7px;
+  font-weight: 700;
+  svg {
+    width: 9px;
+    height: 9px;
+  }
+`;
+const $1671f9473ff0a07a$var$SnapshotTile = (tile)=>{
+    const { dispatch: dispatch  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
+    const snapshotImageRef = (0, $3Sbms$useRef)(null);
+    const [downloadURL, setDownloadURL] = (0, $3Sbms$useState)(tile.data.url);
+    const [containerWidth, setContainerWidth] = (0, $3Sbms$useState)("auto");
+    const filename = (0, $3Sbms$useMemo)(()=>{
+        const slashSplit = tile.data.url.split("/");
+        const name = slashSplit[slashSplit.length - 1];
+        return name;
+    }, [
+        tile.data.url
+    ]);
+    const onCloseClick = ()=>{
+        dispatch({
+            type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).UNSET_HIGHLIGHTED_TILE
+        });
+    };
+    const updateContainerSize = ()=>{
+        if (snapshotImageRef.current) {
+            const { clientWidth: clientWidth  } = snapshotImageRef.current;
+            setContainerWidth(`${clientWidth}px`);
+        }
+    };
+    const formattedTime = new Date(tile.data.createdAt).toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit"
+    });
+    (0, $3Sbms$useEffect)(()=>{
+        const img = document.createElement("img");
+        img.onload = ()=>{
+            const canvas = document.createElement("canvas");
+            const canvasContext = canvas.getContext("2d");
+            canvas.width = img.width;
+            canvas.height = img.height;
+            canvasContext?.drawImage(img, 0, 0);
+            const dataURL = canvas.toDataURL("image/jpeg");
+            setDownloadURL(dataURL);
+        };
+        img.crossOrigin = "anonymous";
+        img.src = tile.data.url;
+    }, [
+        tile.data.url
+    ]);
+    (0, $3Sbms$useEffect)(()=>{
+        window.addEventListener("resize", updateContainerSize);
+        return ()=>{
+            window.removeEventListener("resize", updateContainerSize);
+        };
+    }, [
+        snapshotImageRef
+    ]);
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ab48431cd035ee30$export$e19cf0169f1019bf), {
+        style: {
+            width: containerWidth
+        },
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $ab48431cd035ee30$export$6ac7409a4d5f70a2), {
+                onLoad: updateContainerSize,
+                ref: snapshotImageRef,
+                src: tile.data.url,
+                crossOrigin: "anonymous"
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ab48431cd035ee30$export$1a3b9916b31bd5c3), {
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ab48431cd035ee30$export$8b251419efc915eb), {
+                        children: [
+                            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ab48431cd035ee30$export$7c309220fd1fb205), {
+                                children: [
+                                    "Snapshot \xb7 ",
+                                    formattedTime
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $ab48431cd035ee30$export$7622450089705ca3), {
+                                href: downloadURL,
+                                target: "_blank",
+                                download: filename,
+                                children: "Save photo"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $ab48431cd035ee30$export$a06f1c675e846f6f), {
+                        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $ab48431cd035ee30$export$f9985cea9f8ad92f), {
+                            onClick: onCloseClick,
+                            children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57ab7b9a012d9acd$export$2e2bcd8739ae039), {})
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+var $1671f9473ff0a07a$export$2e2bcd8739ae039 = $1671f9473ff0a07a$var$SnapshotTile;
 const $288d5802b3a8deca$var$ScreenshareEvents = ()=>{
+    const { selfPeerId: selfPeerId  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { dispatch: dispatch , highlightedTile: highlightedTile  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
     (0, $3Sbms$useEffect)(()=>{
         const onRemoteScreensharingUpdate = (event)=>{
@@ -4441,6 +4994,7 @@ const $288d5802b3a8deca$var$ScreenshareEvents = ()=>{
                 payload: {
                     type: "screenshare",
                     peerId: peerId,
+                    isGlobal: true,
                     data: {
                         consumerId: consumerId
                     }
@@ -4458,29 +5012,29 @@ const $288d5802b3a8deca$var$ScreenshareEvents = ()=>{
                 type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).SET_HIGHLIGHTED_TILE,
                 payload: {
                     type: "screenshare",
-                    peerId: "self",
-                    data: {
-                        local: true
-                    }
+                    peerId: String(selfPeerId),
+                    isGlobal: true,
+                    data: {}
                 }
             });
-            else if (highlightedTile?.type === "screenshare" && highlightedTile.data.local) dispatch({
+            else if (highlightedTile?.type === "screenshare" && highlightedTile.peerId === selfPeerId) dispatch({
                 type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).UNSET_HIGHLIGHTED_TILE
             });
         };
-        window.addEventListener("newConsumer", onRemoteScreensharingUpdate);
-        window.addEventListener("consumerClose", onRemoteScreensharingUpdate);
-        window.addEventListener("screenshareEnabled", onScreensharingUpdate);
-        window.addEventListener("screenshareDisabled", onScreensharingUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("newConsumer", onRemoteScreensharingUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("consumerClose", onRemoteScreensharingUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("screenshareEnabled", onScreensharingUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("screenshareDisabled", onScreensharingUpdate);
         return ()=>{
-            window.removeEventListener("newConsumer", onRemoteScreensharingUpdate);
-            window.removeEventListener("consumerClose", onRemoteScreensharingUpdate);
-            window.removeEventListener("screenshareEnabled", onScreensharingUpdate);
-            window.removeEventListener("screenshareDisabled", onScreensharingUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("newConsumer", onRemoteScreensharingUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("consumerClose", onRemoteScreensharingUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("screenshareEnabled", onScreensharingUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("screenshareDisabled", onScreensharingUpdate);
         };
     }, [
         dispatch,
-        highlightedTile
+        highlightedTile,
+        selfPeerId
     ]);
     return null;
 };
@@ -4490,6 +5044,7 @@ var $288d5802b3a8deca$export$2e2bcd8739ae039 = $288d5802b3a8deca$var$Screenshare
 const $e4ddb9f41b4a5cba$var$YoutubeEvents = ()=>{
     const { dispatch: dispatch , highlightedTile: highlightedTile  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
     (0, $3Sbms$useEffect)(()=>{
@@ -4501,29 +5056,120 @@ const $e4ddb9f41b4a5cba$var$YoutubeEvents = ()=>{
                 payload: {
                     type: "youtube",
                     peerId: peerId,
+                    isGlobal: true,
                     data: {
                         videoId: videoId,
                         time: time
                     }
                 }
-            });
-            else if (type === (0, $5e2ac34f2c3f1b42$export$649698d6e35b1ef3)) {
-                if (highlightedTile?.type === "youtube" && highlightedTile.data.videoId === videoId) dispatch({
-                    type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).UNSET_HIGHLIGHTED_TILE
-                });
+            });
+            else if (type === (0, $5e2ac34f2c3f1b42$export$649698d6e35b1ef3)) {
+                if (highlightedTile?.type === "youtube" && highlightedTile.data.videoId === videoId) dispatch({
+                    type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).UNSET_HIGHLIGHTED_TILE
+                });
+            }
+        };
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("customMessage", onCustomMessage);
+        return ()=>{
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("customMessage", onCustomMessage);
+        };
+    }, [
+        dispatch,
+        highlightedTile
+    ]);
+    return null;
+};
+var $e4ddb9f41b4a5cba$export$2e2bcd8739ae039 = $e4ddb9f41b4a5cba$var$YoutubeEvents;
+const $75c30c42d3b87293$var$SnapshotEvents = ()=>{
+    const { dispatch: dispatch , streams: streams  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
+    (0, $3Sbms$useEffect)(()=>{
+        const onCustomMessage = async (event)=>{
+            const { peerId: peerId  } = event.detail;
+            const { type: type , imageSrc: imageSrc  } = event.detail.event;
+            if (type === "snapshot") {
+                const sender = streams.find((stream)=>stream.id === peerId);
+                if (sender) {
+                    const statusIcon = sender.displayName ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $ab48431cd035ee30$export$49ac927a2aaad85), {
+                        children: sender.displayName.slice(0, 1).toUpperCase()
+                    }) : /*#__PURE__*/ (0, $3Sbms$jsx)((0, $ab48431cd035ee30$export$49ac927a2aaad85), {
+                        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57da43088f4a416a$export$2e2bcd8739ae039), {})
+                    });
+                    const createdAtDate = new Date();
+                    const notificationStatus = {
+                        text: "From",
+                        boldText: sender.displayName || "User",
+                        icon: statusIcon
+                    };
+                    (0, $a5146f9062d7bf28$export$3a57e165650c636f)("Snapshot shared.", {
+                        width: "290px",
+                        icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $ab48431cd035ee30$export$26fe7ec9351ff761), {
+                            src: imageSrc,
+                            crossOrigin: "anonymous"
+                        }),
+                        messageStyle: {
+                            fontWeight: 600,
+                            fontSize: "16px"
+                        },
+                        button: {
+                            text: "Open",
+                            action: ({ close: close  })=>{
+                                dispatch({
+                                    type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).SET_HIGHLIGHTED_TILE,
+                                    payload: {
+                                        type: "snapshot",
+                                        peerId: peerId,
+                                        isGlobal: false,
+                                        data: {
+                                            url: imageSrc,
+                                            createdAt: createdAtDate.getTime()
+                                        }
+                                    }
+                                });
+                                close();
+                            }
+                        },
+                        status: notificationStatus,
+                        duration: 10000
+                    });
+                    const formattedTime = createdAtDate.toLocaleTimeString([], {
+                        hour: "2-digit",
+                        minute: "2-digit"
+                    });
+                    (0, $f81bfa56534026c2$export$e9785ae652b3a722)({
+                        title: `Snapshot · ${formattedTime}`,
+                        url: imageSrc,
+                        iconUrl: imageSrc,
+                        iconStyle: {
+                            border: "2px solid #fff"
+                        },
+                        statusText: notificationStatus.boldText,
+                        statusIconLetter: sender.displayName ? sender.displayName.slice(0, 1).toUpperCase() : undefined,
+                        statusIconUser: sender.displayName ? false : true
+                    });
+                }
             }
         };
-        window.addEventListener("customMessage", onCustomMessage);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("customMessage", onCustomMessage);
         return ()=>{
-            window.removeEventListener("customMessage", onCustomMessage);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("customMessage", onCustomMessage);
         };
     }, [
-        dispatch,
-        highlightedTile
+        streams,
+        dispatch
     ]);
     return null;
 };
-var $e4ddb9f41b4a5cba$export$2e2bcd8739ae039 = $e4ddb9f41b4a5cba$var$YoutubeEvents;
+var $75c30c42d3b87293$export$2e2bcd8739ae039 = $75c30c42d3b87293$var$SnapshotEvents;
@@ -4538,16 +5184,20 @@ const $45ecd59ec682eca0$export$ff6e704acc4ce2a3 = (0, $3Sbms$styledcomponents).d
 `;
 const $b496fc6f0d99c06d$var$HighlightedTile = (tile)=>{
     const { orientation: orientation  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $45ecd59ec682eca0$export$ff6e704acc4ce2a3), {
         orientation: orientation,
         children: [
             tile.type === "screenshare" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $306a53f44040492f$export$2e2bcd8739ae039), {
-                data: tile.data
+                ...tile
             }),
             tile.type === "youtube" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5e2ac34f2c3f1b42$export$2e2bcd8739ae039), {
-                data: tile.data
+                ...tile
+            }),
+            tile.type === "snapshot" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $1671f9473ff0a07a$export$2e2bcd8739ae039), {
+                ...tile
             })
         ]
     });
@@ -4561,9 +5211,9 @@ const $b496fc6f0d99c06d$export$3936649e725efc86 = ()=>{
                 type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).UNSET_HIGHLIGHTED_TILE
             });
         };
-        window.addEventListener("peerClosed", onPeerClosed);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("peerClosed", onPeerClosed);
         return ()=>{
-            window.removeEventListener("peerClosed", onPeerClosed);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("peerClosed", onPeerClosed);
         };
     }, [
         dispatch,
@@ -4572,7 +5222,8 @@ const $b496fc6f0d99c06d$export$3936649e725efc86 = ()=>{
     return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
         children: [
             /*#__PURE__*/ (0, $3Sbms$jsx)((0, $288d5802b3a8deca$export$2e2bcd8739ae039), {}),
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $e4ddb9f41b4a5cba$export$2e2bcd8739ae039), {})
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $e4ddb9f41b4a5cba$export$2e2bcd8739ae039), {}),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $75c30c42d3b87293$export$2e2bcd8739ae039), {})
         ]
     });
 };
@@ -4586,6 +5237,10 @@ var $b496fc6f0d99c06d$export$2e2bcd8739ae039 = $b496fc6f0d99c06d$var$Highlighted
+const $93a0377c243d965e$var$ThemedPath = (0, $3Sbms$styledcomponents).path`
+  fill: ${({ theme: theme  })=>theme.primaryColor};
+`;
 const $93a0377c243d965e$export$c4868e4a24d48fad = /*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
     width: "14",
     height: "14",
@@ -4604,9 +5259,8 @@ const $93a0377c243d965e$export$edf27be85e5f6da0 = /*#__PURE__*/ (0, $3Sbms$jsxs)
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-        /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z",
-            fill: "#6967FC"
+        /*#__PURE__*/ (0, $3Sbms$jsx)($93a0377c243d965e$var$ThemedPath, {
+            d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
         }),
         /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
             d: "M12 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM12 13a1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1Z",
@@ -4615,19 +5269,18 @@ const $93a0377c243d965e$export$edf27be85e5f6da0 = /*#__PURE__*/ (0, $3Sbms$jsxs)
     ]
 });
 const $93a0377c243d965e$export$c7df1b15b59b1df2 = /*#__PURE__*/ (0, $3Sbms$jsxs)("svg", {
-    width: "25",
+    width: "24",
     height: "24",
-    viewBox: "0 0 25 24",
+    viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-        /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "M20.558 22H4.443a3.023 3.023 0 0 1-2.617-4.534L9.883 3.511a3.023 3.023 0 0 1 5.235 0l8.057 13.955A3.023 3.023 0 0 1 20.558 22Z",
-            fill: "#6967FC"
+        /*#__PURE__*/ (0, $3Sbms$jsx)($93a0377c243d965e$var$ThemedPath, {
+            d: "M20.058 22H3.943a3.023 3.023 0 0 1-2.617-4.534L9.383 3.511a3.023 3.023 0 0 1 5.235 0l8.057 13.955A3.023 3.023 0 0 1 20.058 22Z"
         }),
         /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "M12.5 18a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM12.5 14a1 1 0 0 1-1-1V9a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1Z",
-            fill: "#ffffff"
+            d: "M12 18a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM12 14a1 1 0 0 1-1-1V9a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1Z",
+            fill: "#fff"
         })
     ]
 });
@@ -4692,13 +5345,13 @@ var $b8963bf62cf5b984$export$2e2bcd8739ae039 = $b8963bf62cf5b984$var$tooltip;
 const $cdab47bb8796991e$var$Video = ()=>{
-    const { videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , options: options , muted: selfMuted , selfDisplayName: selfDisplayName , orientation: orientation , userInteractionTriggered: userInteractionTriggered ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { selfPeerId: selfPeerId , videosContainerRef: videosContainerRef , remoteTilesContainerRef: remoteTilesContainerRef , options: options , muted: selfMuted , selfDisplayName: selfDisplayName , orientation: orientation , userInteractionTriggered: userInteractionTriggered ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const [tileSize, setTileSize] = (0, $3Sbms$useState)({
         width: 0,
         height: 0
     });
     const { streams: streams , highlightedTile: highlightedTile , dispatch: dispatch  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
-    const [windowWidth, windowHeight] = (0, $ecd263152c3a54ee$export$2e2bcd8739ae039)();
+    const [containerWidth, containerHeight] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(remoteTilesContainerRef.current);
     (0, $3Sbms$useEffect)(()=>{
         if (options.GDPRDisclaimer) (0, $b8963bf62cf5b984$export$2e2bcd8739ae039)({
             message: "Para mejorar la calidad de nuestro servicio, esta llamada ser\xe1 grabada",
@@ -4709,13 +5362,12 @@ const $cdab47bb8796991e$var$Video = ()=>{
         options.GDPRDisclaimer
     ]);
     (0, $3Sbms$useEffect)(()=>{
-        if (remoteTilesContainerRef?.current && windowWidth && windowHeight) {
+        if (remoteTilesContainerRef?.current && containerWidth && containerHeight) {
             const ratio = 1;
             const numberOfTiles = remoteTilesContainerRef.current.childElementCount;
-            const { offsetWidth: offsetWidth , offsetHeight: offsetHeight  } = remoteTilesContainerRef.current;
             const videoWidth = (0, $b8e10de7c6dba8c4$export$4d43009c33055644)({
-                availableWidth: offsetWidth - 16 * (numberOfTiles - 1),
-                availableHeight: offsetHeight - 16 * (numberOfTiles - 1),
+                availableWidth: containerWidth - 16 * (numberOfTiles - 1),
+                availableHeight: containerHeight - 16 * (numberOfTiles - 1),
                 numberOfTiles: numberOfTiles,
                 ratio: ratio
             });
@@ -4727,8 +5379,8 @@ const $cdab47bb8796991e$var$Video = ()=>{
         }
     }, [
         remoteTilesContainerRef,
-        windowWidth,
-        windowHeight,
+        containerWidth,
+        containerHeight,
         streams.length,
         highlightedTile
     ]);
@@ -4743,11 +5395,11 @@ const $cdab47bb8796991e$var$Video = ()=>{
     ]);
     (0, $3Sbms$useEffect)(()=>{
         const onNewPeer = (event)=>{
-            const { id: id , displayName: displayName  } = event.detail;
+            const { peerId: peerId , displayName: displayName  } = event.detail;
             dispatch({
                 type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).ADD_STREAM,
                 payload: {
-                    id: id,
+                    id: peerId,
                     displayName: displayName
                 }
             });
@@ -4785,7 +5437,7 @@ const $cdab47bb8796991e$var$Video = ()=>{
         const onEnterRoom = (event)=>{
             const { peers: peers  } = event.detail;
             const roomStreams = peers.map((peer)=>({
-                    id: peer.id,
+                    id: peer.peerId,
                     displayName: peer.displayName
                 }));
             dispatch({
@@ -4823,27 +5475,27 @@ const $cdab47bb8796991e$var$Video = ()=>{
                 }
             });
         };
-        window.addEventListener("enterRoom", onEnterRoom);
-        window.addEventListener("newPeer", onNewPeer);
-        window.addEventListener("peerClosed", onPeerClosed);
-        window.addEventListener("newConsumer", onConsumerUpdate);
-        window.addEventListener("consumerClose", onConsumerUpdate);
-        window.addEventListener("producerPaused", onProducerUpdate);
-        window.addEventListener("producerResumed", onProducerUpdate);
-        window.addEventListener("displayName", onDisplayName);
-        window.addEventListener("peerStartSpeak", onPeerSpeakingUpdate);
-        window.addEventListener("peerStopSpeak", onPeerSpeakingUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("newPeer", onNewPeer);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("peerClosed", onPeerClosed);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("newConsumer", onConsumerUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("consumerClose", onConsumerUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("producerPaused", onProducerUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("producerResumed", onProducerUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("displayName", onDisplayName);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("peerStartSpeak", onPeerSpeakingUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("peerStopSpeak", onPeerSpeakingUpdate);
         return ()=>{
-            window.removeEventListener("enterRoom", onEnterRoom);
-            window.removeEventListener("newPeer", onNewPeer);
-            window.removeEventListener("peerClosed", onPeerClosed);
-            window.removeEventListener("newConsumer", onConsumerUpdate);
-            window.removeEventListener("consumerClose", onConsumerUpdate);
-            window.removeEventListener("producerPaused", onProducerUpdate);
-            window.removeEventListener("producerResumed", onProducerUpdate);
-            window.removeEventListener("displayName", onDisplayName);
-            window.removeEventListener("peerStartSpeak", onPeerSpeakingUpdate);
-            window.removeEventListener("peerStopSpeak", onPeerSpeakingUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("enterRoom", onEnterRoom);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("newPeer", onNewPeer);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("peerClosed", onPeerClosed);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("newConsumer", onConsumerUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("consumerClose", onConsumerUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("producerPaused", onProducerUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("producerResumed", onProducerUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("displayName", onDisplayName);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("peerStartSpeak", onPeerSpeakingUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("peerStopSpeak", onPeerSpeakingUpdate);
         };
     }, [
         dispatch
@@ -4869,8 +5521,7 @@ const $cdab47bb8796991e$var$Video = ()=>{
                 children: [
                     options.audioTiles && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $21c8ac858b8a352e$export$2e2bcd8739ae039), {
                         stream: {
-                            id: "self",
-                            microphone: "self",
+                            id: String(selfPeerId),
                             muted: selfMuted,
                             displayName: selfDisplayName
                         }
@@ -4902,14 +5553,17 @@ var $cdab47bb8796991e$export$2e2bcd8739ae039 = $cdab47bb8796991e$var$Video;
 const $f0e90fb231c59fab$var$HangUp = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "23",
-        height: "11",
-        viewBox: "0 0 23 11",
+        width: "25",
+        height: "24",
+        viewBox: "0 0 25 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "M6.39 9.965c.133-.133.315-.23.479-.333.329-.21.673-.396 1.029-.557a1.713 1.713 0 0 0 .896-2.107l-.14-.406a10.43 10.43 0 0 1 2.822-.4 10.43 10.43 0 0 1 2.822.4l-.085.424a1.713 1.713 0 0 0 .896 2.107c.355.163.699.35 1.03.557.163.103.326.218.484.34a2.569 2.569 0 0 0 3.324-.31l1.816-1.816a2.57 2.57 0 0 0-.248-3.88 16.269 16.269 0 0 0-19.968.035l-.23.23a2.569 2.569 0 0 0-.584 2.737c.13.339.331.647.59.902l1.816 1.817a2.57 2.57 0 0 0 3.251.26Zm-3.935-3.33a.856.856 0 0 1-.145-1.02.899.899 0 0 1 .242-.288 14.556 14.556 0 0 1 17.855.043.933.933 0 0 1 .345.647.855.855 0 0 1-.248.66l-1.817 1.817a.856.856 0 0 1-1.083.127 9.275 9.275 0 0 0-.582-.4c-.389-.249-.795-.47-1.217-.66l.454-1.24a.856.856 0 0 0-.508-1.103 12.407 12.407 0 0 0-8.477 0 .856.856 0 0 0-.46.46.856.856 0 0 0-.03.66l.472 1.223c-.425.201-.837.428-1.235.679a9.282 9.282 0 0 0-.581.4.856.856 0 0 1-1.084-.128L2.455 6.635Z",
-            fill: "#fff"
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("g", {
+            clipPath: "url(#hangup)",
+            children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                d: "M6.942 16.21c.144-.145.34-.25.517-.36a8.735 8.735 0 0 1 1.113-.603 1.851 1.851 0 0 0 .969-2.278l-.151-.438a11.279 11.279 0 0 1 3.05-.432c1.032.003 2.058.149 3.05.432l-.091.458a1.852 1.852 0 0 0 .968 2.278 9.55 9.55 0 0 1 1.113.602c.177.111.354.235.524.366a2.777 2.777 0 0 0 3.593-.333l1.964-1.964a2.776 2.776 0 0 0-.269-4.196 17.588 17.588 0 0 0-21.586.04l-.249.248a2.777 2.777 0 0 0-.63 2.958c.14.367.358.7.637.976l1.963 1.964a2.777 2.777 0 0 0 3.515.281Zm-4.254-3.6a.926.926 0 0 1-.156-1.104.98.98 0 0 1 .26-.31 15.736 15.736 0 0 1 19.303.045 1.009 1.009 0 0 1 .373.7.925.925 0 0 1-.269.714l-1.963 1.964a.925.925 0 0 1-1.172.137 9.979 9.979 0 0 0-.628-.432c-.42-.27-.86-.508-1.316-.713l.491-1.342a.925.925 0 0 0-.55-1.191 13.412 13.412 0 0 0-9.163 0 .926.926 0 0 0-.498.497.926.926 0 0 0-.032.714l.51 1.322c-.46.217-.905.462-1.335.733-.214.135-.423.279-.629.432a.926.926 0 0 1-1.171-.138L2.688 12.61Z",
+                fill: "#fff"
+            })
         })
     });
 var $f0e90fb231c59fab$export$2e2bcd8739ae039 = $f0e90fb231c59fab$var$HangUp;
@@ -4917,18 +5571,15 @@ var $f0e90fb231c59fab$export$2e2bcd8739ae039 = $f0e90fb231c59fab$var$HangUp;
-const $58d405d56c1abe95$var$ThemedPath = (0, $3Sbms$styledcomponents).path`
-  fill: ${(props)=>props.theme.controlsIconColor};
-`;
 const $58d405d56c1abe95$var$Rotate = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "20",
-        height: "20",
-        viewBox: "0 0 20 20",
+        width: "25",
+        height: "24",
+        viewBox: "0 0 25 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $3Sbms$jsx)($58d405d56c1abe95$var$ThemedPath, {
-            d: "M17.91 13.51h-4.53a1 1 0 0 0 0 2h2.4A8 8 0 0 1 2 10a1 1 0 0 0-2 0 10 10 0 0 0 16.88 7.23V19a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-.97-.99ZM10 0a10 10 0 0 0-6.88 2.77V1a1 1 0 0 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2h-2.4A8 8 0 0 1 18 10a1 1 0 0 0 2 0A10 10 0 0 0 10 0Z"
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+            d: "M20.41 15.51h-4.53a1 1 0 0 0 0 2h2.4A8 8 0 0 1 4.5 12a1 1 0 1 0-2 0 10 10 0 0 0 16.88 7.23V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-.97-.99ZM12.5 2a10 10 0 0 0-6.88 2.77V3a1 1 0 0 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2h-2.4A8 8 0 0 1 20.5 12a1 1 0 0 0 2 0 10 10 0 0 0-10-10Z",
+            fill: "#F7F7F7"
         })
     });
 var $58d405d56c1abe95$export$2e2bcd8739ae039 = $58d405d56c1abe95$var$Rotate;
@@ -4998,12 +5649,12 @@ var $8b7bd174d29d9a1f$export$2e2bcd8739ae039 = $8b7bd174d29d9a1f$var$Spinner;
 const $a2d206a438475087$var$YoutubeIcon = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
         width: "24",
-        height: "16",
-        viewBox: "0 0 24 16",
+        height: "25",
+        viewBox: "0 0 24 25",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "M23 5.71a8.499 8.499 0 0 0-.91-4.13 2.92 2.92 0 0 0-1.72-1A78.36 78.36 0 0 0 12 .27a78.45 78.45 0 0 0-8.34.3 2.87 2.87 0 0 0-1.46.74c-.9.83-1 2.25-1.1 3.45a48.29 48.29 0 0 0 0 6.48 9.55 9.55 0 0 0 .3 2c.12.505.365.972.71 1.36a2.86 2.86 0 0 0 1.49.78c2.156.266 4.328.376 6.5.33 3.5.05 6.57 0 10.2-.28a2.88 2.88 0 0 0 1.53-.78c.28-.28.49-.623.61-1 .358-1.097.533-2.246.52-3.4.04-.56.04-3.94.04-4.54ZM9.74 10.85V4.66l5.92 3.11c-1.66.92-3.85 1.96-5.92 3.08Z",
+            d: "M23 10.21a8.499 8.499 0 0 0-.91-4.13 2.92 2.92 0 0 0-1.72-1A78.362 78.362 0 0 0 12 4.77a78.45 78.45 0 0 0-8.34.3 2.87 2.87 0 0 0-1.46.74c-.9.83-1 2.25-1.1 3.45a48.29 48.29 0 0 0 0 6.48 9.55 9.55 0 0 0 .3 2c.12.505.365.972.71 1.36a2.86 2.86 0 0 0 1.49.78c2.156.266 4.328.376 6.5.33 3.5.05 6.57 0 10.2-.28a2.88 2.88 0 0 0 1.53-.78c.28-.28.49-.623.61-1 .358-1.097.533-2.246.52-3.4.04-.56.04-3.94.04-4.54ZM9.74 15.35V9.16l5.92 3.11c-1.66.92-3.85 1.96-5.92 3.08Z",
             fill: "#fff"
         })
     });
@@ -5011,21 +5662,16 @@ var $a2d206a438475087$export$2e2bcd8739ae039 = $a2d206a438475087$var$YoutubeIcon
-const $1ec1d06e0a21fdaa$var$ThemedPath = (0, $3Sbms$styledcomponents).path`
-  fill: ${(props)=>props.white ? "#fff" : props.theme.controlsIconColor};
-`;
-const $1ec1d06e0a21fdaa$var$Link = ({ size: size , white: white  })=>{
-    const iconSize = size || 20;
+const $1ec1d06e0a21fdaa$var$Link = ()=>{
     return /*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: iconSize,
-        height: iconSize,
-        viewBox: `0 0 ${iconSize} ${iconSize}`,
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $3Sbms$jsx)($1ec1d06e0a21fdaa$var$ThemedPath, {
-            d: "m10.11 13.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1.004 1.004 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1.004 1.004 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0L8.47 5.19a1.004 1.004 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.471 2.471 0 0 1 0 3.5l-3.88 3.88a1.002 1.002 0 0 0 .325 1.639.999.999 0 0 0 1.095-.219l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM6.83 13.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1.004 1.004 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z",
-            white: white
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+            d: "m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1.004 1.004 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1.004 1.004 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1.004 1.004 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.471 2.471 0 0 1 0 3.5l-3.88 3.88a1.002 1.002 0 0 0 .325 1.639.999.999 0 0 0 1.095-.219l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1.004 1.004 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z",
+            fill: "#fff"
         })
     });
 };
@@ -5061,7 +5707,7 @@ const $ae07ea3548d561ea$export$6e8af0bd0a2aaa77 = (0, $3Sbms$styledcomponents).b
   min-height: 48px;
   background-color: ${(props)=>{
     if (props.danger) return "#d84949";
-    if (props.primary) return "#6967fc";
+    if (props.primary) return props.theme.primaryColor;
     return props.theme.controlsBackgroundColor;
 }};
   border: ${(props)=>props.danger || props.primary ? "2px solid transparent" : `2px solid ${props.theme.controlsBorderColor}`};
@@ -5080,7 +5726,7 @@ const $ae07ea3548d561ea$export$6e8af0bd0a2aaa77 = (0, $3Sbms$styledcomponents).b
     border: 2px solid
       ${(props)=>{
     if (props.danger) return "#fc7d7d";
-    if (props.primary) return "#9e9cfc";
+    if (props.primary) return "#a3ceff";
     return props.theme.controlsHoverBorderColor;
 }};
   }
@@ -5116,9 +5762,9 @@ const $db92fac48417791a$var$isScreenshareSupported = Boolean(navigator.mediaDevi
 const $db92fac48417791a$var$HighlightButton = ()=>{
     const highlightMenuRef = (0, $3Sbms$useRef)(null);
     const [isHighlightMenuOpen, setIsHighlightMenuOpen] = (0, $3Sbms$useState)(false);
-    const { setIsYoutubePopupVisible: setIsYoutubePopupVisible , setIsLinksharePopupVisible: setIsLinksharePopupVisible  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { setIsYoutubePopupVisible: setIsYoutubePopupVisible , setIsLinksharePopupVisible: setIsLinksharePopupVisible , selfPeerId: selfPeerId  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { highlightedTile: highlightedTile , dispatch: dispatch  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
-    const isPresenting = Boolean(highlightedTile?.data.local);
+    const isPresenting = Boolean(highlightedTile?.isGlobal && highlightedTile?.peerId === selfPeerId);
     (0, $e1413aacdaa5a03e$export$71b2224f1ce5e08e)(highlightMenuRef, ()=>setIsHighlightMenuOpen(false));
     const onHighlightClick = async ()=>{
         if (isPresenting) dispatch({
@@ -5164,11 +5810,16 @@ const $db92fac48417791a$var$HighlightButton = ()=>{
             ]
         },
     ];
-    if ($db92fac48417791a$var$isScreenshareSupported) menuCategories[0].items.push({
-        id: "screensharing",
-        title: "Screen Sharing",
-        jsxIcon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $1ca024917df8f7bc$export$2e2bcd8739ae039), {}),
-        action: onScreenshareClick
+    if ($db92fac48417791a$var$isScreenshareSupported) menuCategories.push({
+        id: "2",
+        items: [
+            {
+                id: "screensharing",
+                title: "Screen Sharing",
+                jsxIcon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $1ca024917df8f7bc$export$2e2bcd8739ae039), {}),
+                action: onScreenshareClick
+            },
+        ]
     });
     return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $3Sbms$Fragment), {
         children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ae07ea3548d561ea$export$3f103e2d692ed6d2), {
@@ -5255,9 +5906,9 @@ const $69a9c49ece80e773$var$ControlBar = ()=>{
         setWebcamCount(numberOfAvailableWebcams);
     };
     (0, $3Sbms$useEffect)(()=>{
-        window.addEventListener("webcamsUpdate", onNewWebcamCount);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("webcamsUpdate", onNewWebcamCount);
         return ()=>{
-            window.removeEventListener("webcamsUpdate", onNewWebcamCount);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("webcamsUpdate", onNewWebcamCount);
         };
     }, []);
     return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $ae07ea3548d561ea$export$b6ba9bc16b3ff153), {
@@ -5337,7 +5988,6 @@ var $69a9c49ece80e773$export$2e2bcd8739ae039 = $69a9c49ece80e773$var$ControlBar;
 const $8d3d0e80c56cde5c$export$9d03e7b857083c37 = (0, $3Sbms$styledcomponents).div`
   position: absolute;
   width: 100%;
@@ -5386,8 +6036,8 @@ const $8d3d0e80c56cde5c$export$b421c25a8e0ea22e = (0, $3Sbms$styledcomponents).b
   padding: 0;
   svg {
-    height: 10px;
-    width: 10px;
+    height: 15px;
+    width: 15px;
     path {
       fill: #000;
@@ -5418,12 +6068,11 @@ const $8d3d0e80c56cde5c$export$51760c3b0f5567d2 = (0, $3Sbms$styledcomponents).p
 const $5b80b81d7b095f89$var$QuickConnect = ()=>{
     const QuickConnectContainerRef = (0, $3Sbms$useRef)(null);
     const QuickConnectRef = (0, $3Sbms$useRef)(null);
-    const { selfPeerId: selfPeerId , isQuickConnectPopupVisible: isQuickConnectPopupVisible , setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , options: options  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
-    const [windowWidth, windowHeight] = (0, $ecd263152c3a54ee$export$2e2bcd8739ae039)();
+    const { selfPeerId: selfPeerId , selfDisplayName: selfDisplayName , isQuickConnectPopupVisible: isQuickConnectPopupVisible , setIsQuickConnectPopupVisible: setIsQuickConnectPopupVisible , options: options , orientation: orientation ,  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     (0, $e1413aacdaa5a03e$export$71b2224f1ce5e08e)(QuickConnectContainerRef, ()=>{
         if (isQuickConnectPopupVisible) setIsQuickConnectPopupVisible(false);
     });
-    const desktop = windowWidth > windowHeight;
+    const desktop = orientation === "landscape";
     const qrCodeURL = (0, $3Sbms$useMemo)(()=>{
         let url = new URL(window.location.href);
         if (selfPeerId) {
@@ -5435,11 +6084,13 @@ const $5b80b81d7b095f89$var$QuickConnect = ()=>{
             url.searchParams.set("microphone-enabled", "0");
             url.searchParams.set("camera-enabled", "1");
             url.searchParams.set("quick-connect", selfPeerId);
+            if (selfDisplayName) url.searchParams.set("name", selfDisplayName);
         }
         return url.href;
     }, [
         options.sharedURL,
-        selfPeerId
+        selfPeerId,
+        selfDisplayName
     ]);
     const onQuickConnectPopupCloseClick = ()=>setIsQuickConnectPopupVisible(false);
     (0, $3Sbms$useEffect)(()=>{
@@ -5447,9 +6098,9 @@ const $5b80b81d7b095f89$var$QuickConnect = ()=>{
             const { type: type  } = event.detail.event;
             if (type === "quick_connect_close") setIsQuickConnectPopupVisible(false);
         };
-        window.addEventListener("customMessage", onCustomMessage);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("customMessage", onCustomMessage);
         return ()=>{
-            window.removeEventListener("customMessage", onCustomMessage);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("customMessage", onCustomMessage);
         };
     }, [
         setIsQuickConnectPopupVisible
@@ -5463,9 +6114,14 @@ const $5b80b81d7b095f89$var$QuickConnect = ()=>{
         if (selfPeerId) {
             const urlParams = new URLSearchParams(window.location.href);
             const quickConnectParam = urlParams.get("quick-connect");
-            if (quickConnectParam) (0, $c9e496369b59be7a$export$2f377c2162fd02b2).sendCustomMessage(quickConnectParam, {
-                type: "quick_connect_close"
-            });
+            const quickConnectNameParam = urlParams.get("name");
+            if (quickConnectParam) {
+                (0, $c9e496369b59be7a$export$2f377c2162fd02b2).sendCustomMessage(quickConnectParam, {
+                    type: "quick_connect_close"
+                });
+                if (quickConnectNameParam) (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setDisplayName(`${quickConnectNameParam} (mobile)`);
+                else (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setDisplayName("Mobile");
+            }
         }
     }, [
         selfPeerId
@@ -5514,47 +6170,42 @@ var $b26ed507544ea00c$export$2e2bcd8739ae039 = $b26ed507544ea00c$var$capitalizeF
-const $b93bcb828d5c97d8$var$ThemedPath = (0, $3Sbms$styledcomponents).path`
-  fill: ${(props)=>props.theme.controlsIconColor};
-`;
 const $b93bcb828d5c97d8$var$External = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "16",
-        height: "16",
-        viewBox: "0 0 16 16",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $3Sbms$jsx)($b93bcb828d5c97d8$var$ThemedPath, {
-            d: "M12.5 7.115a.75.75 0 0 0-.75.75v5.385A.75.75 0 0 1 11 14H2.75a.75.75 0 0 1-.75-.75V5a.75.75 0 0 1 .75-.75h5.385a.75.75 0 0 0 0-1.5H2.75A2.25 2.25 0 0 0 .5 5v8.25a2.25 2.25 0 0 0 2.25 2.25H11a2.25 2.25 0 0 0 2.25-2.25V7.865a.75.75 0 0 0-.75-.75Zm2.94-6.15a.75.75 0 0 0-.405-.405.75.75 0 0 0-.285-.06h-4.5a.75.75 0 0 0 0 1.5h2.693L5.218 9.717a.75.75 0 0 0 .244 1.23.751.751 0 0 0 .82-.164L14 3.058V5.75a.75.75 0 1 0 1.5 0v-4.5a.75.75 0 0 0-.06-.285Z"
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+            d: "M15 9.017a.833.833 0 0 0-.833.833v5.983a.833.833 0 0 1-.833.833H4.167a.833.833 0 0 1-.833-.833V6.667a.833.833 0 0 1 .833-.834h5.983a.833.833 0 0 0 0-1.667H4.167a2.5 2.5 0 0 0-2.5 2.5v9.167a2.5 2.5 0 0 0 2.5 2.5h9.167a2.5 2.5 0 0 0 2.5-2.5V9.85A.833.833 0 0 0 15 9.017Zm3.267-6.834a.834.834 0 0 0-.45-.45.834.834 0 0 0-.317-.067h-5a.833.833 0 0 0 0 1.667h2.992l-8.583 8.575a.832.832 0 0 0 0 1.184.833.833 0 0 0 1.183 0l8.575-8.584V7.5a.833.833 0 1 0 1.667 0v-5a.835.835 0 0 0-.067-.317Z",
+            fill: "#fff"
         })
     });
 var $b93bcb828d5c97d8$export$2e2bcd8739ae039 = $b93bcb828d5c97d8$var$External;
-const $781ad5a3ab7061c2$var$ThemedPath = (0, $3Sbms$styledcomponents).path`
-  fill: ${(props)=>props.theme.controlsIconColor};
-`;
-const $781ad5a3ab7061c2$var$Arrow = ({ direction: direction , small: small  })=>{
+const $781ad5a3ab7061c2$var$Arrow = ({ direction: direction  })=>{
     if (direction === "right") return /*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "8",
-        height: "12",
-        viewBox: "0 0 8 12",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $3Sbms$jsx)($781ad5a3ab7061c2$var$ThemedPath, {
-            d: "M6.83 5.29 2.59 1.05a1 1 0 1 0-1.42 1.41L4.71 6 1.17 9.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1 1 0 0 0 0-1.42Z"
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+            d: "M8.233 14.37a.834.834 0 0 1-.59-1.423L10.59 10 7.643 7.054a.833.833 0 1 1 1.179-1.179l3.535 3.536a.833.833 0 0 1 0 1.178l-3.535 3.536a.83.83 0 0 1-.59.244Z",
+            fill: "#fff"
         })
     });
     if (direction === "left") return /*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "16",
-        height: "18",
-        viewBox: "0 0 16 18",
+        width: "32",
+        height: "32",
+        viewBox: "0 0 32 32",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $3Sbms$jsx)($781ad5a3ab7061c2$var$ThemedPath, {
-            d: "M14.667 7.666H4.547l4.4-4.386a1.339 1.339 0 1 0-1.893-1.894L.387 8.053a1.333 1.333 0 0 0-.28.44 1.333 1.333 0 0 0 0 1.013c.063.164.158.313.28.44l6.667 6.667a1.333 1.333 0 0 0 1.893 0 1.332 1.332 0 0 0 0-1.893l-4.4-4.387h10.12a1.333 1.333 0 1 0 0-2.667Z"
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+            d: "M22.667 14.666h-10.12l4.4-4.386a1.34 1.34 0 0 0-1.893-1.894l-6.667 6.667a1.334 1.334 0 0 0-.28.44 1.334 1.334 0 0 0 0 1.013c.063.164.158.314.28.44l6.666 6.667a1.333 1.333 0 0 0 1.894 0 1.334 1.334 0 0 0 0-1.893l-4.4-4.387h10.12a1.333 1.333 0 1 0 0-2.667Z",
+            fill: "#fff"
         })
     });
     return null;
@@ -5564,19 +6215,32 @@ var $781ad5a3ab7061c2$export$2e2bcd8739ae039 = $781ad5a3ab7061c2$var$Arrow;
+const $c45f2504881e174b$var$Speaker = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+            d: "M12.43 4.1a1 1 0 0 0-1 .12L6.65 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h3.65l4.73 3.78A1 1 0 0 0 12 20a.91.91 0 0 0 .43-.1A1 1 0 0 0 13 19V5a1 1 0 0 0-.57-.9ZM11 16.92l-3.38-2.7A1 1 0 0 0 7 14H4v-4h3a1 1 0 0 0 .62-.22L11 7.08v9.84Zm8.66-10.58a1.004 1.004 0 1 0-1.42 1.42 5.998 5.998 0 0 1-.38 8.84 1 1 0 0 0 .64 1.76 1 1 0 0 0 .64-.23 8 8 0 0 0 .52-11.79Zm-2.83 2.83a1.003 1.003 0 1 0-1.42 1.42A2 2 0 0 1 16 12a2.001 2.001 0 0 1-.71 1.53.997.997 0 1 0 1.28 1.53A4 4 0 0 0 18 12a4.06 4.06 0 0 0-1.17-2.83Z",
+            fill: "#fff"
+        })
+    });
+var $c45f2504881e174b$export$2e2bcd8739ae039 = $c45f2504881e174b$var$Speaker;
-const $910dd7d7d872a463$var$ThemedPath = (0, $3Sbms$styledcomponents).path`
-  fill: ${(props)=>props.theme.controlsIconColor};
-`;
 const $910dd7d7d872a463$var$Checkmark = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "12",
-        height: "8",
-        viewBox: "0 0 12 8",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/ (0, $3Sbms$jsx)($910dd7d7d872a463$var$ThemedPath, {
-            d: "M11.032.407a.75.75 0 0 0-1.065 0L4.38 6.002 2.032 3.647A.766.766 0 1 0 .967 4.75l2.88 2.88a.75.75 0 0 0 1.065 0l6.12-6.12a.75.75 0 0 0 0-1.103Z"
+        children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+            d: "M15.592 6.008a.833.833 0 0 0-1.184 0L8.2 12.225 5.592 9.608a.852.852 0 0 0-1.184 1.225l3.2 3.2a.833.833 0 0 0 1.184 0l6.8-6.8a.834.834 0 0 0 0-1.225Z",
+            fill: "#fff"
         })
     });
 var $910dd7d7d872a463$export$2e2bcd8739ae039 = $910dd7d7d872a463$var$Checkmark;
@@ -5672,6 +6336,22 @@ const $658749b7ab14b607$export$db1aade9877208c7 = (0, $3Sbms$styledcomponents).b
   padding: 16px 18px;
   font-size: 14px;
   color: ${(props)=>props.theme.settingsTextColor};
+  span {
+    display: flex;
+    align-items: center;
+  }
+`;
+const $658749b7ab14b607$export$bb67e2c42c95a3ae = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+`;
+const $658749b7ab14b607$export$f132d77f01dce0a3 = (0, $3Sbms$styledcomponents).p`
+  margin: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 `;
 const $658749b7ab14b607$export$4f015f15aa624b3d = (0, $3Sbms$styledcomponents).div`
   display: flex;
@@ -5684,48 +6364,325 @@ const $658749b7ab14b607$export$a172e59999e5ae8e = (0, $3Sbms$styledcomponents).d
   position: relative;
   width: 40px;
   height: 20px;
-  background-color: ${(props)=>props.checked ? "#6967fc" : "#b5b5b5"};
+  background-color: ${(props)=>props.checked ? props.theme.primaryColor : "#b5b5b5"};
   border-radius: 10px;
   padding: 5px;
   box-sizing: border-box;
   transition: all 0.4s;
-  &::after {
-    position: absolute;
-    display: block;
-    content: '';
-    right: ${(props)=>props.checked ? "calc(0% + 15px)" : "calc(100% - 5px)"};
-    transform: translate(100%, 0);
-    background-color: #fff;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    transition: all 0.4s;
-  }
-`;
+  &::after {
+    position: absolute;
+    display: block;
+    content: '';
+    right: ${(props)=>props.checked ? "calc(0% + 15px)" : "calc(100% - 5px)"};
+    transform: translate(100%, 0);
+    background-color: #fff;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transition: all 0.4s;
+  }
+`;
+const $658749b7ab14b607$export$87d6be27a51dc3c4 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 22px;
+  gap: 10px;
+  background-color: #686868;
+  border-radius: 15px;
+`;
+const $658749b7ab14b607$export$30ccd51431e4a7b0 = (0, $3Sbms$styledcomponents).p`
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 16px;
+  text-align: center;
+  margin: 0;
+`;
+const $658749b7ab14b607$export$73afb47ae3e10bf1 = (0, $3Sbms$styledcomponents).p`
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+  text-align: center;
+  margin: 0;
+`;
+const $1694791461215de9$var$languagesList = [
+    "english"
+];
+const $1694791461215de9$export$604ba5624273df44 = ()=>{
+    try {
+        const storedTheme = localStorage.getItem("stream_ui_language");
+        if (storedTheme) return storedTheme;
+        return "english";
+    } catch (localStorageError) {
+        console.warn(localStorageError);
+        return "english";
+    }
+};
+const $1694791461215de9$var$LanguageSubMenu = ({ back: back  })=>{
+    const { language: language , setLanguage: setLanguage  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$ba6f0acf5af923bd), {
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$edb76fdb8665f52), {
+                        children: "Languages"
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$b16d2ed9d0485f06), {
+                        onClick: back,
+                        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $781ad5a3ab7061c2$export$2e2bcd8739ae039), {
+                            direction: "left"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$b286f91cddfedb5a), {
+                children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
+                    children: [
+                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
+                            children: "Language"
+                        }),
+                        $1694791461215de9$var$languagesList.map((lang)=>{
+                            const checked = language === lang;
+                            const onLanguageClick = ()=>{
+                                setLanguage(lang);
+                            };
+                            return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
+                                onClick: onLanguageClick,
+                                children: [
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$f132d77f01dce0a3), {
+                                        children: (0, $b26ed507544ea00c$export$2e2bcd8739ae039)(lang)
+                                    }),
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                        children: checked && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {})
+                                    })
+                                ]
+                            }, lang);
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+var $1694791461215de9$export$2e2bcd8739ae039 = $1694791461215de9$var$LanguageSubMenu;
+const $b7a5d5760b390f40$var$AudioSubMenu = ({ back: back  })=>{
+    const [micDevices, setMicDevices] = (0, $3Sbms$useState)([]);
+    const [currentMic, setCurrentMic] = (0, $3Sbms$useState)(null);
+    const [speakerDevices, setSpeakerDevices] = (0, $3Sbms$useState)([]);
+    const [currentSpeaker, setCurrentSpeaker] = (0, $3Sbms$useState)(null);
+    const canChangeSpeakers = speakerDevices.length > 0 && "setSinkId" in HTMLAudioElement.prototype;
+    const listDevices = ()=>(0, $c9e496369b59be7a$export$2f377c2162fd02b2).listAudioDevices().then((devices)=>{
+            const speakers = devices.filter((device)=>device.kind === "audiooutput" && device.label);
+            const mics = devices.filter((device)=>device.kind === "audioinput" && device.label);
+            setMicDevices(mics);
+            setSpeakerDevices(speakers);
+            // For chrome
+            const speaker = speakers.find((device)=>device.deviceId === "default");
+            const mic = mics.find((device)=>device.deviceId === "default");
+            setCurrentMic(mic || null);
+            setCurrentSpeaker(speaker || null);
+        });
+    const onMicClick = (0, $3Sbms$useCallback)(async (mic)=>{
+        if (currentMic?.deviceId === mic.deviceId) return;
+        await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).switchMicrophone(mic.deviceId);
+        setCurrentMic(mic);
+        (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Connected to ${mic.label}`);
+    }, [
+        currentMic
+    ]);
+    const onSpeakerClick = (0, $3Sbms$useCallback)((speaker)=>{
+        if (currentSpeaker?.deviceId === speaker.deviceId) return;
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setAudioSink(speaker.deviceId);
+        setCurrentSpeaker(speaker);
+        (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Connected to ${speaker.label}`);
+    }, [
+        currentSpeaker
+    ]);
+    (0, $3Sbms$useEffect)(()=>{
+        listDevices();
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("devicesListChange", listDevices);
+        return ()=>(0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("devicesListChange", listDevices);
+    }, []);
+    return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$ba6f0acf5af923bd), {
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$edb76fdb8665f52), {
+                        children: "Audio"
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$b16d2ed9d0485f06), {
+                        onClick: back,
+                        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $781ad5a3ab7061c2$export$2e2bcd8739ae039), {
+                            direction: "left"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$b286f91cddfedb5a), {
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
+                        children: [
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
+                                children: "Microphone"
+                            }),
+                            canChangeSpeakers && micDevices.map((mic)=>{
+                                const checked = mic.deviceId === currentMic?.deviceId;
+                                return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
+                                    onClick: ()=>onMicClick(mic),
+                                    children: [
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$f132d77f01dce0a3), {
+                                            children: mic.label
+                                        }),
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                            children: checked && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {})
+                                        })
+                                    ]
+                                }, mic.deviceId);
+                            }),
+                            !canChangeSpeakers && micDevices.length < 1 && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$87d6be27a51dc3c4), {
+                                children: [
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$30ccd51431e4a7b0), {
+                                        children: "Microphone is blocked."
+                                    }),
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$73afb47ae3e10bf1), {
+                                        children: "Please accept microphone sharing before accessing these options."
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    canChangeSpeakers && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
+                        children: [
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
+                                children: "Speakers"
+                            }),
+                            speakerDevices.map((speaker)=>{
+                                const checked = speaker.deviceId === currentSpeaker?.deviceId;
+                                return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
+                                    onClick: ()=>onSpeakerClick(speaker),
+                                    children: [
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$f132d77f01dce0a3), {
+                                            children: speaker.label
+                                        }),
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                            children: checked && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {})
+                                        })
+                                    ]
+                                }, speaker.deviceId);
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+var $b7a5d5760b390f40$export$2e2bcd8739ae039 = $b7a5d5760b390f40$var$AudioSubMenu;
-const $1694791461215de9$var$languagesList = [
-    "english"
-];
-const $1694791461215de9$export$604ba5624273df44 = ()=>{
-    try {
-        const storedTheme = localStorage.getItem("stream_ui_language");
-        if (storedTheme) return storedTheme;
-        return "english";
-    } catch (localStorageError) {
-        console.warn(localStorageError);
-        return "english";
+const $57896f163f7e1230$var$resolutions = Object.keys((0, $c31e3fb4360572af$export$d21ffcc5eb136bfa)).map((key)=>{
+    const constraints = (0, $c31e3fb4360572af$export$d21ffcc5eb136bfa);
+    switch(constraints[key].height.ideal){
+        case 240:
+            return {
+                name: "Low definition (240p)",
+                key: key
+            };
+        case 480:
+            return {
+                name: "Standard definition (480p)",
+                key: key
+            };
+        case 720:
+            return {
+                name: "Hight definition (720p)",
+                key: key
+            };
+        default:
+            return {
+                name: "",
+                key: key
+            };
     }
-};
-const $1694791461215de9$var$LanguageSubMenu = ({ back: back  })=>{
-    const { language: language , setLanguage: setLanguage  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+}).filter((def)=>def.name !== "");
+const $57896f163f7e1230$var$VideoSubMenu = ({ back: back  })=>{
+    const [cameraDevices, setCameraDevices] = (0, $3Sbms$useState)(Array.from((0, $c9e496369b59be7a$export$2f377c2162fd02b2).getWebcamsList().values()).filter((device)=>device.deviceId));
+    const [currentCamera, setCurrentCamera] = (0, $3Sbms$useState)((0, $c9e496369b59be7a$export$2f377c2162fd02b2).getCurrentWebcam());
+    const listDevices = async ()=>{
+        const devices = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).listVideoDevices();
+        const authorisedCameras = devices.filter((device)=>device.deviceId);
+        if (authorisedCameras.length > 0) setCameraDevices(authorisedCameras);
+    };
+    const onCameraClick = async (camera)=>{
+        if (currentCamera.device?.deviceId === camera.deviceId) return;
+        if (currentCamera.device) {
+            await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).switchWebcam({
+                device: camera
+            });
+            (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Connected to ${camera.label}`, {
+                duration: 3000
+            });
+        } else {
+            await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).enableVideo({
+                device: camera,
+                resolution: currentCamera.resolution
+            });
+            (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Connected to ${camera.label}`, {
+                duration: 3000
+            });
+        }
+    };
+    const onSendResolutionClick = async (resolution)=>{
+        if (currentCamera.resolution === resolution.key) return;
+        await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).setWebcamResolution(resolution.key);
+        (0, $a5146f9062d7bf28$export$3a57e165650c636f)(`Using ${resolution.name} resolution`, {
+            duration: 3000
+        });
+    };
+    const onLocalVideoChange = (event)=>{
+        setCurrentCamera({
+            ...event.detail.camera
+        });
+    };
+    (0, $3Sbms$useEffect)(()=>{
+        listDevices();
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("devicesListChange", listDevices);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("localVideoChange", onLocalVideoChange);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onLocalVideoChange);
+        return ()=>{
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("devicesListChange", listDevices);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("localVideoChange", onLocalVideoChange);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onLocalVideoChange);
+        };
+    }, []);
     return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $3Sbms$Fragment), {
         children: [
             /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$ba6f0acf5af923bd), {
                 children: [
                     /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$edb76fdb8665f52), {
-                        children: "Languages"
+                        children: "Video"
                     }),
                     /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$b16d2ed9d0485f06), {
                         onClick: back,
@@ -5735,46 +6692,78 @@ const $1694791461215de9$var$LanguageSubMenu = ({ back: back  })=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$b286f91cddfedb5a), {
-                children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
-                    children: [
-                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
-                            children: "Language"
-                        }),
-                        $1694791461215de9$var$languagesList.map((lang)=>{
-                            const checked = language === lang;
-                            const onLanguageClick = ()=>{
-                                setLanguage(lang);
-                            };
-                            return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
-                                onClick: onLanguageClick,
+            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$b286f91cddfedb5a), {
+                children: [
+                    /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
+                        children: [
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
+                                children: "Camera"
+                            }),
+                            cameraDevices.map((camera)=>{
+                                const checked = camera.deviceId === currentCamera.device?.deviceId;
+                                return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
+                                    onClick: ()=>onCameraClick(camera),
+                                    children: [
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$f132d77f01dce0a3), {
+                                            children: camera.label
+                                        }),
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                            children: checked && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {})
+                                        })
+                                    ]
+                                }, camera.deviceId);
+                            }),
+                            cameraDevices.length < 1 && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$87d6be27a51dc3c4), {
                                 children: [
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
-                                        children: (0, $b26ed507544ea00c$export$2e2bcd8739ae039)(lang)
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$30ccd51431e4a7b0), {
+                                        children: "Camera is blocked."
                                     }),
-                                    /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
-                                        children: checked && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {})
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$73afb47ae3e10bf1), {
+                                        children: "Please accept camera sharing before accessing these options."
                                     })
                                 ]
-                            }, lang);
-                        })
-                    ]
-                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
+                        children: [
+                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
+                                children: "Send Resolution (maximum)"
+                            }),
+                            $57896f163f7e1230$var$resolutions.map((resolution)=>{
+                                const checked = resolution.key === currentCamera.resolution;
+                                return /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
+                                    onClick: ()=>onSendResolutionClick(resolution),
+                                    children: [
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$f132d77f01dce0a3), {
+                                            children: resolution.name
+                                        }),
+                                        /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                            children: checked && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $910dd7d7d872a463$export$2e2bcd8739ae039), {})
+                                        })
+                                    ]
+                                }, resolution.key);
+                            })
+                        ]
+                    })
+                ]
             })
         ]
     });
 };
-var $1694791461215de9$export$2e2bcd8739ae039 = $1694791461215de9$var$LanguageSubMenu;
+var $57896f163f7e1230$export$2e2bcd8739ae039 = $57896f163f7e1230$var$VideoSubMenu;
 const $c11e4c21ca692a16$var$Menu = ()=>{
     const [currentMenu, setCurrentMenu] = (0, $3Sbms$useState)("base");
     const menuPopupRef = (0, $3Sbms$useRef)(null);
-    const { isSettingsMenuVisible: isSettingsMenuVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , language: language  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { isSettingsMenuVisible: isSettingsMenuVisible , setIsSettingsMenuVisible: setIsSettingsMenuVisible , language: language , options: options  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const onCloseClick = ()=>setIsSettingsMenuVisible(false);
     const menuBack = ()=>setCurrentMenu("base");
     const onLanguageMenuClick = ()=>setCurrentMenu("languages");
+    const onAudioClick = ()=>setCurrentMenu("audio");
+    const onVideoClick = ()=>setCurrentMenu("video");
     /* const onDarkModeClick = () => {
     if (theme === 'dark') {
       setTheme('light');
@@ -5842,6 +6831,49 @@ const $c11e4c21ca692a16$var$Menu = ()=>{
                                     })
                                 ]
                             }),
+                            /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
+                                children: [
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
+                                        children: "Devices"
+                                    }),
+                                    (0, $c9e496369b59be7a$export$2f377c2162fd02b2).isListDevicesSupported() && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
+                                        onClick: onAudioClick,
+                                        children: [
+                                            /*#__PURE__*/ (0, $3Sbms$jsxs)("span", {
+                                                children: [
+                                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$bb67e2c42c95a3ae), {
+                                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c45f2504881e174b$export$2e2bcd8739ae039), {})
+                                                    }),
+                                                    "Audio"
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$4f015f15aa624b3d), {
+                                                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $781ad5a3ab7061c2$export$2e2bcd8739ae039), {
+                                                    direction: "right"
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    !options.audioTiles && /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$db1aade9877208c7), {
+                                        onClick: onVideoClick,
+                                        children: [
+                                            /*#__PURE__*/ (0, $3Sbms$jsxs)("span", {
+                                                children: [
+                                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$bb67e2c42c95a3ae), {
+                                                        children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $04e57b1f07a8e9f4$export$2e2bcd8739ae039), {})
+                                                    }),
+                                                    "Video"
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$4f015f15aa624b3d), {
+                                                children: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $781ad5a3ab7061c2$export$2e2bcd8739ae039), {
+                                                    direction: "right"
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
                             /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $658749b7ab14b607$export$38050e761cbb2b1d), {
                                 children: [
                                     /*#__PURE__*/ (0, $3Sbms$jsx)((0, $658749b7ab14b607$export$5caf84ac7a22e7b5), {
@@ -5864,6 +6896,12 @@ const $c11e4c21ca692a16$var$Menu = ()=>{
             }),
             currentMenu === "languages" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $1694791461215de9$export$2e2bcd8739ae039), {
                 back: menuBack
+            }),
+            currentMenu === "audio" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $b7a5d5760b390f40$export$2e2bcd8739ae039), {
+                back: menuBack
+            }),
+            currentMenu === "video" && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $57896f163f7e1230$export$2e2bcd8739ae039), {
+                back: menuBack
             })
         ]
     });
@@ -5878,7 +6916,6 @@ var $c11e4c21ca692a16$export$2e2bcd8739ae039 = $c11e4c21ca692a16$var$Menu;
 const $d677836e2f373a45$export$b679a9a7caefa4b1 = (0, $3Sbms$styledcomponents).div`
   position: absolute;
   width: 100%;
@@ -5973,7 +7010,7 @@ const $d677836e2f373a45$export$176dd61d50c7f3d7 = (0, $3Sbms$styledcomponents).d
     &:focus {
       outline: none;
-      border: 1px solid #6967fc;
+      border: 1px solid ${({ theme: theme  })=>theme.primaryColor};
     }
   }
 `;
@@ -5988,7 +7025,7 @@ const $d677836e2f373a45$export$baf775d6bf9683d5 = (0, $3Sbms$styledcomponents).s
   margin-top: 10px;
 `;
 const $d677836e2f373a45$export$3711c5e6a7ba3fdc = (0, $3Sbms$styledcomponents).button`
-  background-color: #6967fc;
+  background-color: ${({ theme: theme  })=>theme.primaryColor};
   padding: 8px 18px;
   border-radius: 50px;
   margin: 30px auto 0;
@@ -6006,10 +7043,9 @@ const $49372cd9190da903$var$YoutubePopup = ()=>{
     const youtubePopupRef = (0, $3Sbms$useRef)(null);
     const [youtubeInputValue, setYoutubeInputValue] = (0, $3Sbms$useState)("");
     const [errorMessage, setErrorMessage] = (0, $3Sbms$useState)(null);
-    const { isYoutubePopupVisible: isYoutubePopupVisible , setIsYoutubePopupVisible: setIsYoutubePopupVisible  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const { isYoutubePopupVisible: isYoutubePopupVisible , setIsYoutubePopupVisible: setIsYoutubePopupVisible , selfPeerId: selfPeerId , orientation: orientation  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { dispatch: dispatch  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
-    const [windowWidth, windowHeight] = (0, $ecd263152c3a54ee$export$2e2bcd8739ae039)();
-    const desktop = windowWidth > windowHeight;
+    const desktop = orientation === "landscape";
     (0, $e1413aacdaa5a03e$export$71b2224f1ce5e08e)(youtubePopupRef, ()=>{
         if (isYoutubePopupVisible) setIsYoutubePopupVisible(false);
     });
@@ -6022,10 +7058,10 @@ const $49372cd9190da903$var$YoutubePopup = ()=>{
                 type: (0, $2884da8a64948e35$export$96a9662a3eda31f6).SET_HIGHLIGHTED_TILE,
                 payload: {
                     type: "youtube",
-                    peerId: "self",
+                    peerId: String(selfPeerId),
+                    isGlobal: true,
                     data: {
-                        videoId: videoId,
-                        local: true
+                        videoId: videoId
                     }
                 }
             });
@@ -6108,103 +7144,14 @@ var $49372cd9190da903$export$2e2bcd8739ae039 = $49372cd9190da903$var$YoutubePopu
-const $3456a3b2458f2971$var$LinkNotificationContainer = (0, $3Sbms$styledcomponents).div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  max-width: 300px;
-`;
-const $3456a3b2458f2971$var$LinkNotificationIcon = (0, $3Sbms$styledcomponents).img`
-  width: 36px;
-  height: 36px;
-  border-radius: 8px;
-  margin-right: 10px;
-  background-color: #fff;
-`;
-const $3456a3b2458f2971$var$LinkNotificationMessageContainer = (0, $3Sbms$styledcomponents).div`
-  max-width: 185px;
-`;
-const $3456a3b2458f2971$var$LinkNotificationTitle = (0, $3Sbms$styledcomponents).p`
-  margin: 0;
-  font-weight: 700;
-  font-size: 14px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-`;
-const $3456a3b2458f2971$var$LinkNotificationText = (0, $3Sbms$styledcomponents).p`
-  margin: 0;
-  font-weigth: 500;
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-`;
-const $3456a3b2458f2971$var$LinkNotificationButton = (0, $3Sbms$styledcomponents).button`
-  background-color: #2d2d2d;
-  font: inherit;
-  font-weight: 700;
-  color: inherit;
-  border: none;
-  border-radius: 50px;
-  padding: 6px 12px;
-  margin-left: 10px;
-  cursor: pointer;
-  outline: inherit;
-  box-sizing: border-box;
-  :hover {
-    padding: 4px 10px;
-    border: 2px solid #8d8d8d;
-  }
-`;
-const $3456a3b2458f2971$var$linkToast = async ({ url: url , linkData: linkData  })=>{
-    const onIconError = ({ currentTarget: currentTarget  })=>{
-        currentTarget.onerror = null;
-        currentTarget.src = `https://www.google.com/s2/favicons?domain=${linkData.domain}&sz=32`;
-    };
-    (0, $3Sbms$reacthottoast)(/*#__PURE__*/ (0, $3Sbms$jsxs)($3456a3b2458f2971$var$LinkNotificationContainer, {
-        children: [
-            /*#__PURE__*/ (0, $3Sbms$jsx)($3456a3b2458f2971$var$LinkNotificationIcon, {
-                src: linkData.iconSrc,
-                alt: `favicon for ${linkData.domain}`,
-                onError: onIconError
-            }),
-            /*#__PURE__*/ (0, $3Sbms$jsxs)($3456a3b2458f2971$var$LinkNotificationMessageContainer, {
-                children: [
-                    /*#__PURE__*/ (0, $3Sbms$jsx)($3456a3b2458f2971$var$LinkNotificationTitle, {
-                        children: linkData.title
-                    }),
-                    /*#__PURE__*/ (0, $3Sbms$jsx)($3456a3b2458f2971$var$LinkNotificationText, {
-                        children: linkData.domain
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, $3Sbms$jsx)($3456a3b2458f2971$var$LinkNotificationButton, {
-                onClick: ()=>window.open(url, "_blank"),
-                children: "Open"
-            })
-        ]
-    }), {
-        style: {
-            maxWidth: "300px"
-        },
-        duration: 10000
-    });
-};
-var $3456a3b2458f2971$export$2e2bcd8739ae039 = $3456a3b2458f2971$var$linkToast;
 const $dc26e7b014ddcf8c$var$PaypalWhite = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("svg", {
-        width: "14",
-        height: "16",
-        viewBox: "0 0 14 16",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
-            d: "M12.625 4.736a2.55 2.55 0 0 0-.382-.349 3.15 3.15 0 0 0-.772-2.493C10.75 1.079 9.517.667 7.81.667H3.667a1.262 1.262 0 0 0-1.242 1.06L.698 12.666a1.022 1.022 0 0 0 1.01 1.19h1.777l-.055.347a.978.978 0 0 0 .966 1.131h2.156a1.174 1.174 0 0 0 1.167-.98l.427-2.687.008-.037h.199c2.688 0 4.367-1.328 4.857-3.841a3.433 3.433 0 0 0-.585-3.052Zm-8.397 4.4-.476 3.023-.057.363H2.07L3.73 2H7.81c1.29 0 2.211.27 2.661.776a1.978 1.978 0 0 1 .405 1.822l-.012.075c-.008.05-.015.1-.029.164a3.898 3.898 0 0 1-1.337 2.447 4.452 4.452 0 0 1-2.811.789H5.47a1.253 1.253 0 0 0-1.243 1.063Zm7.673-1.604c-.367 1.886-1.495 2.764-3.548 2.764H8.03a1.174 1.174 0 0 0-1.168.982l-.433 2.716L4.812 14l.319-2.023.407-2.568h1.146c.105 0 .197-.016.299-.02.24-.008.478-.017.702-.045.137-.017.262-.048.393-.072.182-.034.364-.067.534-.114.127-.036.246-.081.366-.124.16-.057.317-.116.465-.186.112-.053.22-.111.325-.172a4.513 4.513 0 0 0 .685-.475c.126-.108.245-.224.358-.346.075-.08.152-.158.222-.244a4.71 4.71 0 0 0 .32-.462c.05-.082.107-.157.154-.243.135-.247.251-.504.347-.769.006-.016.014-.029.02-.045l.01-.021c.131.477.137.98.017 1.461Z",
+            d: "M20.437 7.104a3.825 3.825 0 0 0-.573-.523 4.727 4.727 0 0 0-1.158-3.74C17.622 1.619 15.775 1 13.214 1H7a1.892 1.892 0 0 0-1.863 1.592l-2.59 16.406a1.533 1.533 0 0 0 1.516 1.785h2.664l-.082.52A1.467 1.467 0 0 0 8.093 23h3.235a1.762 1.762 0 0 0 1.75-1.47l.641-4.031.01-.055h.3c4.032 0 6.55-1.993 7.285-5.762a5.15 5.15 0 0 0-.877-4.578Zm-12.595 6.6-.714 4.535-.087.544H4.606L7.097 3h6.117c1.936 0 3.318.404 3.992 1.164a2.966 2.966 0 0 1 .608 2.733l-.018.113c-.012.076-.023.15-.044.246a5.847 5.847 0 0 1-2.005 3.67 6.678 6.678 0 0 1-4.217 1.183H9.706a1.88 1.88 0 0 0-1.864 1.595ZM19.351 11.3c-.55 2.828-2.242 4.145-5.322 4.145h-.484a1.762 1.762 0 0 0-1.75 1.473l-.65 4.074L8.717 21l.478-3.034.611-3.853h1.72c.156 0 .295-.023.448-.029.359-.012.716-.026 1.053-.067.205-.026.393-.073.59-.11.272-.05.545-.1.8-.17.191-.053.369-.122.55-.186a7.68 7.68 0 0 0 .698-.279c.168-.079.328-.167.486-.257a6.745 6.745 0 0 0 1.027-.713 6.56 6.56 0 0 0 .537-.519c.113-.12.23-.237.334-.367.173-.221.334-.452.48-.693.076-.122.161-.235.231-.363.203-.371.377-.757.521-1.154.009-.024.021-.044.03-.068.004-.01.01-.02.014-.032.198.717.207 1.472.026 2.193Z",
             fill: "#fff"
         })
     });
@@ -6226,22 +7173,22 @@ const $dc26e7b014ddcf8c$var$PaypalColored = ()=>/*#__PURE__*/ (0, $3Sbms$jsxs)("
                 width: "14",
                 height: "14",
                 rx: "7",
-                fill: "url(#a)"
+                fill: "url(#paypalPattern)"
             }),
             /*#__PURE__*/ (0, $3Sbms$jsxs)("defs", {
                 children: [
                     /*#__PURE__*/ (0, $3Sbms$jsx)("pattern", {
-                        id: "a",
+                        id: "paypalPattern",
                         patternContentUnits: "objectBoundingBox",
                         width: "1",
                         height: "1",
                         children: /*#__PURE__*/ (0, $3Sbms$jsx)("use", {
-                            xlinkHref: "#b",
+                            xlinkHref: "#paypalImage",
                             transform: "matrix(.00308 0 0 .00308 .154 .154)"
                         })
                     }),
                     /*#__PURE__*/ (0, $3Sbms$jsx)("image", {
-                        id: "b",
+                        id: "paypalImage",
                         width: "225",
                         height: "225",
                         xlinkHref: "data:image/png;base64,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"
@@ -6255,6 +7202,7 @@ var $dc26e7b014ddcf8c$export$2e2bcd8739ae039 = $dc26e7b014ddcf8c$var$Paypal;
 const $554f3984e3212196$export$ed0d510542cc4e55 = (0, $3Sbms$styledcomponents).div`
   position: absolute;
   width: 100%;
@@ -6349,7 +7297,7 @@ const $554f3984e3212196$export$dcb32b2b413109d8 = (0, $3Sbms$styledcomponents).d
     &:focus {
       outline: none;
-      border: 1px solid #6967fc;
+      border: 1px solid ${({ theme: theme  })=>theme.primaryColor};
     }
   }
 `;
@@ -6364,7 +7312,7 @@ const $554f3984e3212196$export$711a92c06f80c3bd = (0, $3Sbms$styledcomponents).s
   margin-top: 10px;
 `;
 const $554f3984e3212196$export$aec21c9a4da7a1b7 = (0, $3Sbms$styledcomponents).button`
-  background-color: #6967fc;
+  background-color: ${({ theme: theme  })=>theme.primaryColor};
   padding: 8px 18px;
   border-radius: 50px;
   margin: 30px auto 0;
@@ -6374,12 +7322,55 @@ const $554f3984e3212196$export$aec21c9a4da7a1b7 = (0, $3Sbms$styledcomponents).b
   font-weight: 700;
   line-height: 18px;
 `;
+const $554f3984e3212196$export$9e155375d8fb1f67 = (0, $3Sbms$styledcomponents).img`
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+`;
+const $554f3984e3212196$export$5e3f251c730829 = (0, $3Sbms$styledcomponents).div`
+  display: flex;
+  gap: 5px;
+`;
 const $98933bbc579a3e66$export$a1eac7fdbc2db4af = "linkshare_sent";
-const $98933bbc579a3e66$var$sendPaypalInvoiceNotification = (senderName, url)=>(0, $a5146f9062d7bf28$export$3a57e165650c636f)(`${senderName || "User"} sent you an invoice.`, {
+const $98933bbc579a3e66$var$sendLinkNotification = (data)=>{
+    let notificationStatusText = new URL(data.url).hostname;
+    if (notificationStatusText.startsWith("www.")) notificationStatusText = notificationStatusText.slice(4);
+    const notificationIcon = data.ogImage ? /*#__PURE__*/ (0, $3Sbms$jsx)((0, $554f3984e3212196$export$9e155375d8fb1f67), {
+        src: data.ogImage
+    }) : undefined;
+    (0, $a5146f9062d7bf28$export$3a57e165650c636f)(data.title, {
+        width: "350px",
+        icon: notificationIcon,
+        status: {
+            icon: data.favicon,
+            text: "From",
+            boldText: notificationStatusText
+        },
+        button: {
+            text: "Open",
+            action: ({ close: close  })=>{
+                window.open(data.url, "_blank");
+                close();
+            }
+        },
+        ellipsis: true,
+        duration: 10000
+    });
+    (0, $f81bfa56534026c2$export$e9785ae652b3a722)({
+        title: data.title,
+        url: data.url,
+        iconUrl: data.ogImage,
+        statusIconUrl: data.favicon,
+        statusText: notificationStatusText
+    });
+};
+const $98933bbc579a3e66$var$sendPaypalInvoiceNotification = (senderName, url)=>{
+    const title = `${senderName || "User"} sent you an invoice.`;
+    (0, $a5146f9062d7bf28$export$3a57e165650c636f)(title, {
         button: {
             icon: /*#__PURE__*/ (0, $3Sbms$jsx)((0, $dc26e7b014ddcf8c$export$2e2bcd8739ae039), {}),
             text: "Pay",
@@ -6394,79 +7385,89 @@ const $98933bbc579a3e66$var$sendPaypalInvoiceNotification = (senderName, url)=>(
         },
         duration: 10000
     });
+    (0, $f81bfa56534026c2$export$e9785ae652b3a722)({
+        title: title,
+        url: url,
+        statusIconUrl: "https://stream-assets.snapcall.io/icons/paypal.png",
+        statusText: "PayPal"
+    });
+};
 const $98933bbc579a3e66$var$LinksharePopup = ()=>{
     const linksharePopupRef = (0, $3Sbms$useRef)(null);
+    const linkshareInputRef = (0, $3Sbms$useRef)(null);
     const [linkshareInputValue, setLinkshareInputValue] = (0, $3Sbms$useState)("");
     const [errorMessage, setErrorMessage] = (0, $3Sbms$useState)(null);
-    const { isLinksharePopupVisible: isLinksharePopupVisible , setIsLinksharePopupVisible: setIsLinksharePopupVisible  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
-    const [windowWidth, windowHeight] = (0, $ecd263152c3a54ee$export$2e2bcd8739ae039)();
+    const [isLoading, setIsLoading] = (0, $3Sbms$useState)(false);
+    const { isLinksharePopupVisible: isLinksharePopupVisible , setIsLinksharePopupVisible: setIsLinksharePopupVisible , orientation: orientation  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const { streams: streams  } = (0, $cce9fd41d8a55a18$export$b5633a7cfbe42d9f)();
-    const desktop = windowWidth > windowHeight;
+    const desktop = orientation === "landscape";
     const onCustomMessage = (0, $3Sbms$useCallback)((event)=>{
-        const { event: eventData  } = event.detail;
-        if (eventData?.type === $98933bbc579a3e66$export$a1eac7fdbc2db4af) (0, $3456a3b2458f2971$export$2e2bcd8739ae039)(eventData.data);
-        else if (eventData?.type === "paypal_invoice") {
-            const sender = streams.find((stream)=>stream.id === eventData.from);
-            $98933bbc579a3e66$var$sendPaypalInvoiceNotification(sender?.displayName, eventData.data.url);
+        const { type: type , data: data  } = event.detail.event;
+        if (type === $98933bbc579a3e66$export$a1eac7fdbc2db4af) $98933bbc579a3e66$var$sendLinkNotification(data);
+        else if (type === "paypal_invoice") {
+            const sender = streams.find((stream)=>stream.id === event.detail.peerId);
+            $98933bbc579a3e66$var$sendPaypalInvoiceNotification(sender?.displayName, data.url);
         }
     }, [
         streams
     ]);
-    const onShareClick = (0, $3Sbms$useCallback)((event)=>{
+    const onShareClick = async (event)=>{
         event.preventDefault();
+        if (!linkshareInputValue) return;
         setErrorMessage(null);
+        setIsLoading(true);
         let url;
         try {
-            url = new URL(linkshareInputValue.match(/^http[s]?:\/\//) ? linkshareInputValue : `https://${linkshareInputValue}`);
+            url = new URL(linkshareInputValue);
             if (url.protocol === "http") url.protocol = "https";
         } catch (err) {
             setErrorMessage("Invalid link");
             console.error(err);
-            return;
         }
-        if (url.href.indexOf("paypal.com/invoice") !== -1) {
-            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).sendCustomMessageToAll({
-                type: "paypal_invoice",
-                from: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).peerId,
-                data: {
-                    url: url
+        if (url) {
+            try {
+                if (url.href.indexOf("paypal.com/invoice") !== -1) (0, $c9e496369b59be7a$export$2f377c2162fd02b2).sendCustomMessageToAll({
+                    type: "paypal_invoice",
+                    data: {
+                        url: url
+                    }
+                });
+                else {
+                    const data = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getShareLinkData(url.href);
+                    (0, $c9e496369b59be7a$export$2f377c2162fd02b2).sendCustomMessageToAll({
+                        type: $98933bbc579a3e66$export$a1eac7fdbc2db4af,
+                        data: data
+                    });
                 }
-            });
-            if (streams.length < 2) (0, $3Sbms$reacthottoast)(`Link sent to ${streams[0].displayName || "User"}`);
-            else (0, $3Sbms$reacthottoast)("Link sent to users");
-        } else (0, $c9e496369b59be7a$export$2f377c2162fd02b2).protoo.request("shareLink", {
-            url: url
-        }).then((linkData)=>{
-            if (!linkData.favicon || !linkData.title || !linkData.domain || !linkData.url) throw new Error("Link Preview Error");
-            if (streams.length < 2) {
-                (0, $3Sbms$reacthottoast)(`Link sent to ${streams[0].displayName || "User"}`);
-                return;
+                if (streams.length < 2) (0, $3Sbms$reacthottoast)(`Link sent to ${streams[0]?.displayName || "User"}`);
+                else (0, $3Sbms$reacthottoast)("Link sent to users");
+                setIsLinksharePopupVisible(false);
+            } catch (err) {
+                console.error(err);
+                (0, $3Sbms$reacthottoast)("Failed to send link", {
+                    className: "error"
+                });
             }
-            (0, $3Sbms$reacthottoast)("Link sent to users");
-        }).catch((error)=>{
-            console.error(error);
-            (0, $3Sbms$reacthottoast)("Failed to send link", {
-                className: "error"
-            });
-        });
-        setIsLinksharePopupVisible(false);
-    }, [
-        streams,
-        linkshareInputValue,
-        setIsLinksharePopupVisible
-    ]);
+            setLinkshareInputValue("");
+        }
+        setIsLoading(false);
+    };
     const onCloseClick = ()=>setIsLinksharePopupVisible(false);
     (0, $3Sbms$useEffect)(()=>{
-        window.addEventListener("customMessage", onCustomMessage);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("customMessage", onCustomMessage);
         return ()=>{
-            window.removeEventListener("customMessage", onCustomMessage);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("customMessage", onCustomMessage);
         };
     }, [
         onCustomMessage
     ]);
+    const onPopupTransitionEnd = ()=>{
+        if (isLinksharePopupVisible) linkshareInputRef.current?.focus();
+    };
     return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $554f3984e3212196$export$ed0d510542cc4e55), {
         open: isLinksharePopupVisible,
         desktop: desktop,
+        onTransitionEnd: onPopupTransitionEnd,
         children: /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $554f3984e3212196$export$93c2cc854b34757d), {
             ref: linksharePopupRef,
             desktop: desktop,
@@ -6499,6 +7500,7 @@ const $98933bbc579a3e66$var$LinksharePopup = ()=>{
                                 }),
                                 /*#__PURE__*/ (0, $3Sbms$jsx)("input", {
                                     id: "linkshare-popup-input",
+                                    ref: linkshareInputRef,
                                     placeholder: "https://www.example.com",
                                     value: linkshareInputValue,
                                     onChange: (changeEvent)=>setLinkshareInputValue(changeEvent.target.value),
@@ -6513,8 +7515,17 @@ const $98933bbc579a3e66$var$LinksharePopup = ()=>{
                         }),
                         /*#__PURE__*/ (0, $3Sbms$jsx)((0, $554f3984e3212196$export$aec21c9a4da7a1b7), {
                             type: "submit",
-                            disabled: linkshareInputValue.length < 1,
-                            children: "Share Link"
+                            disabled: isLoading,
+                            children: isLoading ? /*#__PURE__*/ (0, $3Sbms$jsxs)((0, $554f3984e3212196$export$5e3f251c730829), {
+                                children: [
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)((0, $8b7bd174d29d9a1f$export$2e2bcd8739ae039), {
+                                        size: "18px"
+                                    }),
+                                    /*#__PURE__*/ (0, $3Sbms$jsx)("span", {
+                                        children: "Link is creating..."
+                                    })
+                                ]
+                            }) : "Share Link"
                         })
                     ]
                 })
@@ -6558,6 +7569,7 @@ var $01986a58bfba8001$export$2e2bcd8739ae039 = $01986a58bfba8001$var$Settings;
 const $61b9018279e658f9$export$104f28dc79f055f4 = (0, $3Sbms$styledcomponents).div`
   display: flex;
   flex: 1;
@@ -6566,6 +7578,7 @@ const $61b9018279e658f9$export$104f28dc79f055f4 = (0, $3Sbms$styledcomponents).d
   align-items: center;
   background-color: #000;
   color: #fff;
+  padding-top: 70px;
 `;
 const $61b9018279e658f9$export$51071a7ce784448 = (0, $3Sbms$styledcomponents).span`
   font-size: 60px;
@@ -6582,7 +7595,7 @@ const $61b9018279e658f9$export$f4e7b895a81715e9 = (0, $3Sbms$styledcomponents).p
   margin: 0;
 `;
 const $61b9018279e658f9$export$3a4deda42b6182b7 = (0, $3Sbms$styledcomponents).button`
-  background-color: #6967fc;
+  background-color: ${({ theme: theme  })=>theme.primaryColor};
   border: none;
   border-radius: 50px;
   padding: 12px 18px;
@@ -6627,7 +7640,8 @@ const $df41bfe6da05853a$var$EndView = ()=>{
             ended && /*#__PURE__*/ (0, $3Sbms$jsx)((0, $61b9018279e658f9$export$3a4deda42b6182b7), {
                 onClick: onGoBackClick,
                 children: "Go back to call"
-            })
+            }),
+            /*#__PURE__*/ (0, $3Sbms$jsx)((0, $f81bfa56534026c2$export$ad5f39c592532e2d), {})
         ]
     });
 };
@@ -6636,6 +7650,7 @@ var $df41bfe6da05853a$export$2e2bcd8739ae039 = $df41bfe6da05853a$var$EndView;
 const $805d92fa41e6e1b0$var$connected = new Audio("https://cdn.snapcall.io/stream/connected.mp3");
 const $805d92fa41e6e1b0$var$disconnected = new Audio("https://cdn.snapcall.io/stream/disconnected.mp3");
 const $805d92fa41e6e1b0$var$userConnected = new Audio("https://cdn.snapcall.io/stream/user-connected.mp3");
@@ -6673,13 +7688,13 @@ const $805d92fa41e6e1b0$var$Sounds = ()=>{
         }
     };
     (0, $3Sbms$useEffect)(()=>{
-        window.addEventListener("newPeer", onNewPeer);
-        window.addEventListener("peerClosed", onPeerClosed);
-        window.addEventListener("snapcallEvent_callEnd", onLeaveRoom);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("newPeer", onNewPeer);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("peerClosed", onPeerClosed);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("leaveRoom", onLeaveRoom);
         return ()=>{
-            window.removeEventListener("newPeer", onNewPeer);
-            window.removeEventListener("peerClosed", onPeerClosed);
-            window.removeEventListener("snapcallEvent_callEnd", onLeaveRoom);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("newPeer", onNewPeer);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("peerClosed", onPeerClosed);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("leaveRoom", onLeaveRoom);
         };
     }, []);
     (0, $3Sbms$useEffect)(()=>{
@@ -6798,6 +7813,7 @@ const $52580db2e49cdd90$export$3bfd0d5209a8006a = ()=>{
     }
 };
 const $52580db2e49cdd90$export$f30cb9bc4f736419 = {
+    primaryColor: "#268AFA",
     backgroundColor: "#fff",
     controlBarBackground: "#fff",
     logoColor: "#000",
@@ -6813,6 +7829,7 @@ const $52580db2e49cdd90$export$f30cb9bc4f736419 = {
     settingsCloseBackgroundColor: "#eaebec"
 };
 const $52580db2e49cdd90$export$3e936a8db52a10a0 = {
+    primaryColor: "#268AFA",
     backgroundColor: "#000",
     controlBarBackground: "linear-gradient(180deg, #000000 0%, #131313 100%)",
     logoColor: "#fff",
@@ -6925,9 +7942,9 @@ const $d6008ea114507578$var$SvgDefinitions = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("
                 }),
                 /*#__PURE__*/ (0, $3Sbms$jsxs)("linearGradient", {
                     id: "screenTop",
-                    x1: "15.5",
+                    x1: "15",
                     y1: "3.75",
-                    x2: "15.5",
+                    x2: "15",
                     y2: "21.25",
                     gradientUnits: "userSpaceOnUse",
                     children: [
@@ -6942,9 +7959,9 @@ const $d6008ea114507578$var$SvgDefinitions = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("
                 }),
                 /*#__PURE__*/ (0, $3Sbms$jsxs)("linearGradient", {
                     id: "screenBottom",
-                    x1: "15.5",
+                    x1: "15",
                     y1: "21.25",
-                    x2: "15.5",
+                    x2: "15",
                     y2: "26.25",
                     gradientUnits: "userSpaceOnUse",
                     children: [
@@ -6956,6 +7973,21 @@ const $d6008ea114507578$var$SvgDefinitions = ()=>/*#__PURE__*/ (0, $3Sbms$jsx)("
                             stopColor: "#969696"
                         })
                     ]
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)("clipPath", {
+                    id: "hangup",
+                    children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                        fill: "#fff",
+                        transform: "translate(.5)",
+                        d: "M0 0h24v24H0z"
+                    })
+                }),
+                /*#__PURE__*/ (0, $3Sbms$jsx)("clipPath", {
+                    id: "pip",
+                    children: /*#__PURE__*/ (0, $3Sbms$jsx)("path", {
+                        fill: "#fff",
+                        d: "M0 0h24v24H0z"
+                    })
                 })
             ]
         })
@@ -7188,13 +8220,20 @@ const $15a01b611391c1e7$var$audioSource = new Blob([
     type: "audio/mpeg"
 });
 const $15a01b611391c1e7$var$audioURL = URL.createObjectURL($15a01b611391c1e7$var$audioSource);
-const $15a01b611391c1e7$export$69078aa817990b40 = async ()=>{
+let $15a01b611391c1e7$var$mediaResult = undefined;
+const $15a01b611391c1e7$export$716eeec86fd18da7 = ()=>{
+    $15a01b611391c1e7$var$mediaResult?.getAudioTracks().forEach((track)=>{
+        track.stop();
+    });
+    $15a01b611391c1e7$var$mediaResult = undefined;
+};
+const $15a01b611391c1e7$export$494039379563c94d = async ()=>{
     try {
         const audioObject = new Audio($15a01b611391c1e7$var$audioURL);
         await audioObject.play();
     } catch (err) {
         console.warn("User interaction is required, asking audio GUM");
-        await navigator.mediaDevices.getUserMedia({
+        $15a01b611391c1e7$var$mediaResult = await navigator.mediaDevices.getUserMedia({
             audio: true
         });
     }
@@ -7267,6 +8306,7 @@ const $4fb4815baa04b470$export$914ddf2021ea8ee6 = (0, $3Sbms$styledcomponents).d
 const $26ed036cbc17809a$var$currentTheme = (0, $52580db2e49cdd90$export$3bfd0d5209a8006a)();
 const $26ed036cbc17809a$var$currentLanguage = (0, $1694791461215de9$export$604ba5624273df44)();
 let $26ed036cbc17809a$var$timestampCriticalError = -1;
@@ -7288,14 +8328,14 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
     const [screensharing, setScreensharing] = (0, $3Sbms$useState)(false);
     const [isAgent, setIsAgent] = (0, $3Sbms$useState)(false);
     const [userInteractionTriggered, setUserInteractionTriggered] = (0, $3Sbms$useState)(false);
-    const [windowWidth, windowHeight] = (0, $ecd263152c3a54ee$export$2e2bcd8739ae039)();
-    const orientation = windowWidth > windowHeight ? "landscape" : "portrait";
+    const [containerWidth, containerHeight] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(streamUIContainerRef.current);
+    const orientation = containerWidth > containerHeight ? "landscape" : "portrait";
     const styledTheme = theme === "dark" ? (0, $52580db2e49cdd90$export$3e936a8db52a10a0) : (0, $52580db2e49cdd90$export$f30cb9bc4f736419);
     const onEnterRoom = async (event)=>{
-        const { peerId: peerId  } = event.detail;
+        const peerId = event.detail.peerId;
         setSelfPeerId(peerId);
         try {
-            await (0, $15a01b611391c1e7$export$69078aa817990b40)();
+            await (0, $15a01b611391c1e7$export$494039379563c94d)();
             setUserInteractionTriggered(true);
         } catch (userInteractionError) {
             console.error("User interaction trigger failed", userInteractionError);
@@ -7322,6 +8362,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
         setSelfDisplayName(displayName);
     };
     const onCallEnd = ()=>{
+        (0, $15a01b611391c1e7$export$716eeec86fd18da7)();
         setStreamState("ended");
         setMuted(true);
         setStreaming(false);
@@ -7329,6 +8370,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
         setUserInteractionTriggered(false);
     };
     const onCallTerminated = ()=>{
+        (0, $15a01b611391c1e7$export$716eeec86fd18da7)();
         setStreamState("terminated");
     };
     const onInvalidRoom = ()=>{
@@ -7376,37 +8418,37 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
         language
     ]);
     (0, $3Sbms$useEffect)(()=>{
-        window.addEventListener("enterRoom", onEnterRoom);
-        window.addEventListener("localVideoAvailable", onWebcamUpdate);
-        window.addEventListener("localVideoUnavailable", onWebcamUpdate);
-        window.addEventListener("screenshareEnabled", onScreenshareUpdate);
-        window.addEventListener("screenshareDisabled", onScreenshareUpdate);
-        window.addEventListener("microphoneEnabled", onMicrophoneUpdate);
-        window.addEventListener("microphoneMute", onMicrophoneUpdate);
-        window.addEventListener("microphoneUnmute", onMicrophoneUpdate);
-        window.addEventListener("defaultAudioDeviceChange", onDefaultAudioDeviceChange);
-        window.addEventListener("selfDisplayName", onSelfDisplayNameUpdate);
-        window.addEventListener("terminateRoom", onCallTerminated);
-        window.addEventListener("snapcallEvent_callEnd", onCallEnd);
-        window.addEventListener("invalidRoom", onInvalidRoom);
-        window.addEventListener("agentIdentity", onAgentIdentity);
-        window.addEventListener("criticalError", onCriticalError);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("enterRoom", onEnterRoom);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("localVideoAvailable", onWebcamUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("localVideoUnavailable", onWebcamUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("screenshareEnabled", onScreenshareUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("screenshareDisabled", onScreenshareUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("microphoneEnabled", onMicrophoneUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("microphoneMute", onMicrophoneUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("microphoneUnmute", onMicrophoneUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("defaultAudioDeviceChange", onDefaultAudioDeviceChange);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("selfDisplayName", onSelfDisplayNameUpdate);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("terminateRoom", onCallTerminated);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("leaveRoom", onCallEnd);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("invalidRoom", onInvalidRoom);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("agentIdentity", onAgentIdentity);
+        (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener("criticalError", onCriticalError);
         return ()=>{
-            window.removeEventListener("enterRoom", onEnterRoom);
-            window.removeEventListener("localVideoAvailable", onWebcamUpdate);
-            window.removeEventListener("localVideoUnavailable", onWebcamUpdate);
-            window.removeEventListener("screenshareEnabled", onScreenshareUpdate);
-            window.removeEventListener("screenshareDisabled", onScreenshareUpdate);
-            window.removeEventListener("microphoneEnabled", onMicrophoneUpdate);
-            window.removeEventListener("microphoneMute", onMicrophoneUpdate);
-            window.removeEventListener("microphoneUnmute", onMicrophoneUpdate);
-            window.removeEventListener("defaultAudioDeviceChange", onDefaultAudioDeviceChange);
-            window.removeEventListener("selfDisplayName", onSelfDisplayNameUpdate);
-            window.removeEventListener("terminateRoom", onCallTerminated);
-            window.removeEventListener("snapcallEvent_callEnd", onCallEnd);
-            window.removeEventListener("invalidRoom", onInvalidRoom);
-            window.removeEventListener("agentIdentity", onAgentIdentity);
-            window.removeEventListener("criticalError", onCriticalError);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("enterRoom", onEnterRoom);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("localVideoAvailable", onWebcamUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("localVideoUnavailable", onWebcamUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("screenshareEnabled", onScreenshareUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("screenshareDisabled", onScreenshareUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("microphoneEnabled", onMicrophoneUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("microphoneMute", onMicrophoneUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("microphoneUnmute", onMicrophoneUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("defaultAudioDeviceChange", onDefaultAudioDeviceChange);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("selfDisplayName", onSelfDisplayNameUpdate);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("terminateRoom", onCallTerminated);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("leaveRoom", onCallEnd);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("invalidRoom", onInvalidRoom);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("agentIdentity", onAgentIdentity);
+            (0, $c9e496369b59be7a$export$2f377c2162fd02b2).removeEventListener("criticalError", onCriticalError);
         };
     }, []);
     return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039).Provider, {
@@ -7506,10 +8548,13 @@ const $24075a5d702d64b3$export$3f94917203ab7078 = {
         window.dispatchEvent(event);
     },
     sendNotification: $a5146f9062d7bf28$export$3a57e165650c636f,
-    joinRoom: (...args)=>(0, $c9e496369b59be7a$export$2f377c2162fd02b2).init(...args),
-    leaveRoom: (...args)=>(0, $c9e496369b59be7a$export$2f377c2162fd02b2).endCall(...args),
-    terminateRoom: (...args)=>(0, $c9e496369b59be7a$export$2f377c2162fd02b2).terminateRoom(...args),
-    generateToken: (...args)=>(0, $c9e496369b59be7a$export$2f377c2162fd02b2).generateToken(...args)
+    joinRoom: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).init.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
+    leaveRoom: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).endCall.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
+    terminateRoom: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).terminateRoom.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
+    generateToken: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).generateToken.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
+    addEventListener: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).addEventListener.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
+    dispatchEvent: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).dispatchEvent.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2)),
+    getState: (0, $c9e496369b59be7a$export$2f377c2162fd02b2).getState.bind((0, $c9e496369b59be7a$export$2f377c2162fd02b2))
 };
 window.streamUI = $24075a5d702d64b3$export$3f94917203ab7078;
 // Backward compatibility