@100mslive/roomkit-react 0.3.8-alpha.0 → 0.3.8-alpha.1

package/dist/index.cjs.js

@@ -108,7 +108,7 @@ var __async = (__this, __arguments, generator) => {
 var define_process_env_default;
 var init_define_process_env = __esm({
   "<define:process.env>"() {
-    define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_7c4c1950-8a61-422b-b70f-231782daf5a5", npm_package_devDependencies_ts_node: "^10.4.0", npm_package_devDependencies__types_node: "^16.11.17", npm_package_devDependencies_rollup: "^2.70.1", npm_package_exports___require: "./dist/index.cjs.js", STATS_TRP: "true", DEPLOYMENT_BASEPATH: "/opt/runner", DOTNET_NOLOGO: "1", npm_package_dependencies_screenfull: "^5.1.0", npm_package_dependencies_react_draggable: "^4.4.5", npm_package_dependencies__radix_ui_react_switch: "1.0.0", USER: "runner", npm_package_devDependencies_jest: "26.6.0", npm_config_version_commit_hooks: "true", npm_config_user_agent: "yarn/1.22.22 npm/? node/v18.20.1 linux x64", npm_config_always_auth: "", NX_WORKSPACE_ROOT: "/home/runner/work/web-sdks/web-sdks", npm_package_devDependencies__rollup_plugin_node_resolve: "^13.1.3", npm_package_scripts_babel: "npx storybook@latest babelrc", CI: "true", npm_package_devDependencies__size_limit_file: "^5.0.3", npm_config_bin_links: "true", npm_config_wrap_output: "", npm_package_dependencies__radix_ui_react_tabs: "1.0.0", npm_package_dependencies__100mslive_react_sdk: "0.10.8-alpha.0", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_7c4c1950-8a61-422b-b70f-231782daf5a5", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.20.1/x64/bin/node", npm_config_init_version: "1.0.0", npm_package_dependencies__emoji_mart_react: "^1.0.1", npm_package_dependencies__emoji_mart_data: "^1.0.6", npm_package_dependencies__100mslive_hms_virtual_background: "1.13.8-alpha.0", JAVA_HOME_8_X64: "/usr/lib/jvm/temurin-8-jdk-amd64", NODE_AUTH_TOKEN: "XXXXX-XXXXX-XXXXX-XXXXX", SHLVL: "1", npm_package_dependencies__radix_ui_react_tooltip: "1.0.6", npm_package_dependencies__radix_ui_react_popover: "1.0.6", npm_package_dependencies__100mslive_types_prebuilt: "0.12.8", npm_package_peerDependencies_react: ">=17.0.2 <19.0.0", npm_package_devDependencies__storybook_addon_links: "^7.0.27", npm_package_files_0: "dist", HOME: "/home/runner", npm_package_devDependencies__typescript_eslint_parser: "^5.4.0", npm_package_dependencies__radix_ui_react_dialog: "1.0.4", npm_package_devDependencies__types_react_window: "^1.8.5", npm_package_files_1: "src", npm_package_repository_directory: "packages/roomkit-react", RUNNER_TEMP: "/home/runner/work/_temp", GITHUB_EVENT_PATH: "/home/runner/work/_temp/_github_workflow/event.json", npm_package_scripts_controller: "cd packages/hls-controller && yarn start", npm_package_dependencies__stitches_react: "^1.2.8", JAVA_HOME_11_X64: "/usr/lib/jvm/temurin-11-jdk-amd64", PIPX_BIN_DIR: "/opt/pipx_bin", GITHUB_REPOSITORY_OWNER: "100mslive", npm_package_engines_node: ">=16", npm_package_devDependencies_typedoc_plugin_markdown: "^3.14.0", npm_config_init_license: "MIT", GRADLE_HOME: "/usr/share/gradle-8.7", ANDROID_NDK_LATEST_HOME: "/usr/local/lib/android/sdk/ndk/26.2.11394342", JAVA_HOME_21_X64: "/usr/lib/jvm/temurin-21-jdk-amd64", STATS_RDCL: "true", GITHUB_RETENTION_DAYS: "90", YARN_WRAP_OUTPUT: "false", npm_config_version_tag_prefix: "v", GITHUB_REPOSITORY_OWNER_ID: "73883131", POWERSHELL_DISTRIBUTION_CHANNEL: "GitHub-Actions-ubuntu22", AZURE_EXTENSION_DIR: "/opt/az/azcliextensions", GITHUB_HEAD_REF: "", npm_package_scripts_lint_fix: "yarn lint --fix", npm_config_userconfig: "/home/runner/work/_temp/.npmrc", npm_package_devDependencies__storybook_addon_a11y: "^7.0.27", SYSTEMD_EXEC_PID: "603", npm_package_scripts_postinstall: "husky install && lerna bootstrap", npm_package_devDependencies_husky: "^6.0.0", npm_package_dependencies_recordrtc: "^5.6.2", npm_package_dependencies_eventemitter2: "^6.4.9", npm_package_dependencies__radix_ui_react_label: "1.0.0", npm_package_dependencies__radix_ui_react_dropdown_menu: "2.0.5", npm_package_keywords_0: "100mslive", GITHUB_GRAPHQL_URL: "https://api.github.com/graphql", npm_package_description: "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.", npm_package_devDependencies_typescript: "~4.7.4", npm_package_devDependencies_typedoc: "^0.24.8", npm_package_devDependencies_babel_loader: "^8.2.5", npm_package_devDependencies__rollup_plugin_image: "^3.0.2", npm_package_keywords_1: "react", GOROOT_1_20_X64: "/opt/hostedtoolcache/go/1.20.14/x64", NVM_DIR: "/home/runner/.nvm", npm_package_readmeFilename: "README.md", npm_package_devDependencies_react: "^18.1.0", npm_package_devDependencies__babel_preset_env: "^7.22.5", npm_package_keywords_2: "prebuilt", DOTNET_SKIP_FIRST_TIME_EXPERIENCE: "1", GOROOT_1_21_X64: "/opt/hostedtoolcache/go/1.21.9/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240407.1.0", npm_package_devDependencies_prettier: "^2.4.1", npm_package_devDependencies_babel_jest: "^26.6.0", npm_package_scripts_dev: "node ../../scripts/dev", npm_package_keywords_3: "roomkit", RUNNER_OS: "Linux", GITHUB_API_URL: "https://api.github.com", GOROOT_1_22_X64: "/opt/hostedtoolcache/go/1.22.2/x64", SWIFT_PATH: "/usr/share/swift/usr/bin", FORCE_COLOR: "true", npm_package_dependencies__radix_ui_react_toast: "1.0.0", npm_package_dependencies__radix_ui_react_radio_group: "1.0.0", npm_package_dependencies__100mslive_hms_noise_cancellation: "0.0.1", npm_package_devDependencies__babel_preset_typescript: "^7.22.5", npm_package_exports___default: "./dist/index.js", RUNNER_USER: "runner", STATS_V3PS: "true", CHROMEWEBDRIVER: "/usr/local/share/chromedriver-linux64", JOURNAL_STREAM: "8:19646", GITHUB_WORKFLOW: "Publish Packages", _: "/usr/local/bin/yarn", npm_package_devDependencies_ts_jest: "26.5.6", npm_package_devDependencies_lerna: "^5.6.2", npm_package_devDependencies__types_jest: "^27.0.3", npm_package_devDependencies__commitlint_config_conventional: "^15.0.0", npm_package_private: "true", npm_package_dependencies__radix_ui_react_accordion: "1.0.0", npm_package_devDependencies__rollup_plugin_commonjs: "^21.0.3", npm_package_devDependencies__babel_preset_react: "^7.22.5", npm_package_module: "dist/index.js", npm_package_scripts_lint: "eslint -c .eslintrc --no-error-on-unmatched-pattern src --ext .js --ext .jsx --ext .ts --ext .tsx", npm_package_devDependencies__typescript_eslint_eslint_plugin: "^5.4.0", npm_config_registry: "https://registry.yarnpkg.com", npm_package_dependencies_react_window: "^1.8.7", npm_package_dependencies__100mslive_hls_player: "0.3.8-alpha.0", npm_package_devDependencies__types_lodash_merge: "^4.6.6", npm_package_devDependencies__storybook_cli: "^7.0.27", npm_package_devDependencies__rollup_plugin_json: "^6.0.0", ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: "/opt/actionarchivecache", STATS_D: "false", GITHUB_RUN_ID: "8700818252", STATS_VMFE: "true", npm_package_workspaces_0: "packages/*", npm_package_scripts_store: "cd packages/hms-video-store && yarn start", npm_package_devDependencies__babel_core: "^7.18.2", npm_package_dependencies_ts_pattern: "4.3.0", npm_package_devDependencies__storybook_addon_interactions: "^7.0.27", npm_package_devDependencies__storybook_addon_actions: "^7.0.27", GITHUB_REF_TYPE: "branch", BOOTSTRAP_HASKELL_NONINTERACTIVE: "1", GITHUB_WORKFLOW_SHA: "01f2b5f23cc814beb7f077b46b6736f1e00ceaad", GITHUB_BASE_REF: "", ImageOS: "ubuntu22", npm_package_workspaces_1: "examples/*", npm_package_scripts_start: 'concurrently "yarn dev" "yarn types"', npm_config_ignore_scripts: "", NX_TASK_HASH: "eb4c117f5ff5e55682f3f7490c15fc5440ba61b18b3b42ef49564303057c59a3", npm_package_exports___import: "./dist/index.js", STATS_BLT: "true", GITHUB_WORKFLOW_REF: "100mslive/web-sdks/.github/workflows/publish.yml@refs/heads/publish-alpha", PERFLOG_LOCATION_SETTING: "RUNNER_PERFLOG", GITHUB_ACTION_REPOSITORY: "", npm_package_scripts_prebuilt: "cd packages/roomkit-react && yarn start", npm_package_devDependencies_postcss_loader: "^6.2.1", npm_package_devDependencies_esbuild_loader: "^4.0.2", PATH: "/tmp/yarn--1713248088685-0.8813268667616405:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1713248088490-0.9103108704604872:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1713248066660-0.5344358402590024:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1713248066480-0.3470210036877275:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.1/x64/bin:/snap/bin:/home/runner/.local/bin:/opt/pipx_bin:/home/runner/.cargo/bin:/home/runner/.config/composer/vendor/bin:/usr/local/.ghcup/bin:/home/runner/.dotnet/tools:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin", NODE: "/opt/hostedtoolcache/node/18.20.1/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_1ff258cc-9913-4d21-9d50-6cca116c61b9", INVOCATION_ID: "dafba751830c4d43b8a2b569f0046558", NPM_CONFIG_USERCONFIG: "/home/runner/work/_temp/.npmrc", RUNNER_TOOL_CACHE: "/opt/hostedtoolcache", npm_package_scripts_size: "size-limit", npm_package_devDependencies_size_limit: "^5.0.3", npm_package_name: "@100mslive/roomkit-react", npm_package_devDependencies__storybook_react_webpack5: "^7.0.27", npm_package_repository_type: "git", GITHUB_ACTION: "__run_3", GITHUB_RUN_NUMBER: "515", GITHUB_TRIGGERING_ACTOR: "github-actions[bot]", RUNNER_ARCH: "X64", XDG_RUNTIME_DIR: "/run/user/1001", AGENT_TOOLSDIRECTORY: "/opt/hostedtoolcache", npm_package_lint_staged____js_ts_jsx_tsx_: "eslint", npm_package_devDependencies_babel_plugin_istanbul: "^6.1.1", LERNA_PACKAGE_NAME: "@100mslive/roomkit-react", npm_package_dependencies__radix_ui_react_select: "1.0.0", npm_package_size_limit_0_limit: "20 KB", npm_package_devDependencies__commitlint_cli: "^15.0.0", npm_package_devDependencies__rollup_plugin_typescript: "^8.3.1", LANG: "C.UTF-8", VCPKG_INSTALLATION_ROOT: "/usr/local/share/vcpkg", npm_package_size_limit_1_limit: "20 KB", npm_package_devDependencies_eslint_plugin_simple_import_sort: "^8.0.0", npm_package_devDependencies_eslint: "^8.9.0", npm_package_dependencies_react_intersection_observer: "^9.4.3", npm_package_devDependencies_rollup_plugin_terser: "^7.0.2", npm_package_devDependencies__types_mdx: "2.0.2", CONDA: "/usr/share/miniconda", RUNNER_NAME: "GitHub Actions 190", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "publish-alpha", GITHUB_REPOSITORY: "100mslive/web-sdks", STATS_D_D: "false", npm_lifecycle_script: "rm -rf dist && node ../../scripts/build-webapp", npm_package_size_limit_2_limit: "400 KB", npm_package_resolutions_loader_utils: "^2.0.4", npm_package_devDependencies_dotenv: "^14.2.0", npm_package_dependencies__radix_ui_react_slider: "1.0.0", npm_package_devDependencies_rollup_plugin_import_css: "^3.3.1", npm_package_scripts_types_build: "tsc -p tsconfig.json", npm_package_main: "dist/index.cjs.js", STATS_UE: "true", ANDROID_NDK_ROOT: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_ACTION_REF: "", DEBIAN_FRONTEND: "noninteractive", npm_package_size_limit_3_limit: "20 KB", npm_package_size_limit_0_path: "packages/hms-video-store/dist/index.cjs.js", npm_package_scripts_cypress_open: "cypress open", npm_package_scripts_lerna_publish: "lerna publish from-package --dist-tag $PUBLISH_FLAG --yes --no-verify-access", npm_package_scripts_test: "yarn build --no-private && lerna run test", npm_package_devDependencies_concurrently: "^6.4.0", npm_config_version_git_message: "v%s", npm_package_dependencies__radix_ui_react_checkbox: "1.0.0", npm_package_dependencies__100mslive_react_icons: "0.10.8-alpha.0", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.3.8-alpha.0", npm_package_size_limit_4_limit: "20 KB", npm_package_size_limit_1_path: "packages/hms-video-store/dist/index.js", npm_package_scripts_build_only: "rm -rf dist && node ../../scripts/build-webapp", npm_package_devDependencies__types_react: "^18.1.0", npm_package_sideEffects: "false", npm_package_repository_url: "https://github.com/100mslive/web-sdks.git", npm_package_source: "src/index.ts", GITHUB_REF_PROTECTED: "true", npm_config_argv: '{"remain":[],"cooked":["run","test"],"original":["test"]}', npm_package_size_limit_5_limit: "20 KB", npm_package_size_limit_2_path: "packages/roomkit-react/dist/index.cjs.js", npm_package_scripts_build: "yarn build:only && yarn types:build", npm_package_devDependencies_tslib: "^2.2.0", npm_package_devDependencies_nx: "^14.5.1", npm_package_devDependencies_lint_staged: "^12.0.3", NX_CLI_SET: "true", npm_package_dependencies_uuid: "^8.3.2", npm_package_dependencies_react_virtualized_auto_sizer: "^1.0.7", npm_package_dependencies_lodash_merge: "^4.6.2", npm_package_dependencies_emoji_mart: "^5.2.2", GITHUB_WORKSPACE: "/home/runner/work/web-sdks/web-sdks", ACCEPT_EULA: "Y", GITHUB_JOB: "publish_packages", RUNNER_PERFLOG: "/home/runner/perflog", npm_package_size_limit_6_limit: "150 KB", npm_package_size_limit_3_path: "packages/roomkit-react/dist/index.js", npm_package_devDependencies_cypress: "^9.5.2", npm_package_devDependencies_rollup_plugin_esbuild: "^5.0.0", GITHUB_SHA: "01f2b5f23cc814beb7f077b46b6736f1e00ceaad", GITHUB_RUN_ATTEMPT: "1", npm_package_size_limit_7_limit: "100 KB", npm_package_size_limit_4_path: "packages/hms-virtual-background/dist/index.cjs.js", npm_config_version_git_tag: "true", npm_config_version_git_sign: "", npm_package_dependencies_qrcode_react: "^3.1.0", GITHUB_REF: "refs/heads/publish-alpha", GITHUB_ACTOR: "github-actions[bot]", ANDROID_SDK_ROOT: "/usr/local/lib/android/sdk", npm_package_license: "MIT", npm_package_size_limit_5_path: "packages/hms-virtual-background/dist/index.js", npm_config_strict_ssl: "true", LEIN_HOME: "/usr/local/lib/lein", npm_package_size_limit_6_path: "packages/react-icons/dist/index.cjs.js", npm_package_scripts_format: "prettier -w src/**", npm_package_devDependencies_eslint_plugin_prettier: "^4.0.0", npm_package_devDependencies_eslint_config_react_app: "^7.0.0", NX_TASK_TARGET_PROJECT: "@100mslive/roomkit-react", GITHUB_PATH: "/home/runner/work/_temp/_runner_file_commands/add_path_7c4c1950-8a61-422b-b70f-231782daf5a5", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "41898282", RUNNER_WORKSPACE: "/home/runner/work/web-sdks", npm_execpath: "/usr/local/lib/node_modules/yarn/bin/yarn.js", npm_package_size_limit_7_path: "packages/react-icons/dist/index.js", npm_package_scripts_ybys: "yarn && yarn build --no-private && yarn storybook", npm_package_dependencies__radix_ui_react_progress: "1.0.0", HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: "3650", STATS_TIS: "mining", GITHUB_EVENT_NAME: "workflow_dispatch", HOMEBREW_NO_AUTO_UPDATE: "1", ANDROID_HOME: "/usr/local/lib/android/sdk", GITHUB_SERVER_URL: "https://github.com", GECKOWEBDRIVER: "/usr/local/share/gecko_driver", LEIN_JAR: "/usr/local/lib/lein/self-installs/leiningen-2.11.2-standalone.jar", GHCUP_INSTALL_BASE_PREFIX: "/usr/local", GITHUB_OUTPUT: "/home/runner/work/_temp/_runner_file_commands/set_output_7c4c1950-8a61-422b-b70f-231782daf5a5", npm_package_scripts_prestart: "rm -rf dist && yarn types:build", npm_package_author_name: "100ms", EDGEWEBDRIVER: "/usr/local/share/edge_driver", STATS_EXT: "true", npm_package_scripts_build_storybook: "sb build", npm_package_devDependencies_postcss: "^8.4.5", npm_package_devDependencies_esbuild: "^0.18.13", npm_config_save_prefix: "^", npm_config_ignore_optional: "", npm_package_dependencies_worker_timers: "^7.0.40", npm_package_typings: "dist/index.d.ts", ANDROID_NDK: "/usr/local/lib/android/sdk/ndk/25.2.9519653", SGX_AESM_ADDR: "1", CHROME_BIN: "/usr/bin/google-chrome", npm_package_scripts_storybook: "sb dev -p 6006", npm_package_devDependencies_esbuild_plugin_postcss2: "0.1.1", npm_package_dependencies_react_swipeable: "^7.0.1", npm_package_devDependencies_babel_plugin_react_require: "3.1.3", npm_package_devDependencies__storybook_testing_library: "^0.2.0", npm_package_devDependencies__storybook_addon_essentials: "^7.0.27", SELENIUM_JAR_PATH: "/usr/share/java/selenium-server.jar", STATS_EXTP: "https://provjobdsettingscdn.blob.core.windows.net/settings/provjobdsettings-0.5.172+1/provjobd.data", npm_package_scripts_reactsdk: "cd packages/react-sdk && yarn start", npm_package_dependencies_react_use: "^17.4.0", npm_package_dependencies__radix_ui_react_collapsible: "1.0.0", npm_package_devDependencies_storybook_dark_mode: "^3.0.0", npm_package_devDependencies__storybook_react: "^7.0.27", INIT_CWD: "/home/runner/work/web-sdks/web-sdks", ANDROID_NDK_HOME: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_STEP_SUMMARY: "/home/runner/work/_temp/_runner_file_commands/step_summary_7c4c1950-8a61-422b-b70f-231782daf5a5" };
+    define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_8960a610-873b-48c4-a70f-4da8aa68e13d", npm_package_devDependencies_ts_node: "^10.4.0", npm_package_devDependencies__types_node: "^16.11.17", npm_package_devDependencies_rollup: "^2.70.1", npm_package_exports___require: "./dist/index.cjs.js", STATS_TRP: "true", DEPLOYMENT_BASEPATH: "/opt/runner", DOTNET_NOLOGO: "1", npm_package_dependencies_screenfull: "^5.1.0", npm_package_dependencies_react_draggable: "^4.4.5", npm_package_dependencies__radix_ui_react_switch: "1.0.0", USER: "runner", npm_package_devDependencies_jest: "26.6.0", npm_config_version_commit_hooks: "true", npm_config_user_agent: "yarn/1.22.22 npm/? node/v18.20.2 linux x64", npm_config_always_auth: "", NX_WORKSPACE_ROOT: "/home/runner/work/web-sdks/web-sdks", npm_package_devDependencies__rollup_plugin_node_resolve: "^13.1.3", npm_package_scripts_babel: "npx storybook@latest babelrc", CI: "true", npm_package_devDependencies__size_limit_file: "^5.0.3", npm_config_bin_links: "true", npm_config_wrap_output: "", npm_package_dependencies__radix_ui_react_tabs: "1.0.0", npm_package_dependencies__100mslive_react_sdk: "0.10.8-alpha.1", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_8960a610-873b-48c4-a70f-4da8aa68e13d", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.20.2/x64/bin/node", npm_config_init_version: "1.0.0", npm_package_dependencies__emoji_mart_react: "^1.0.1", npm_package_dependencies__emoji_mart_data: "^1.0.6", npm_package_dependencies__100mslive_hms_virtual_background: "1.13.8-alpha.1", JAVA_HOME_8_X64: "/usr/lib/jvm/temurin-8-jdk-amd64", NODE_AUTH_TOKEN: "XXXXX-XXXXX-XXXXX-XXXXX", SHLVL: "1", npm_package_dependencies__radix_ui_react_tooltip: "1.0.6", npm_package_dependencies__radix_ui_react_popover: "1.0.6", npm_package_dependencies__100mslive_types_prebuilt: "0.12.8", npm_package_peerDependencies_react: ">=17.0.2 <19.0.0", npm_package_devDependencies__storybook_addon_links: "^7.0.27", npm_package_files_0: "dist", HOME: "/home/runner", npm_package_devDependencies__typescript_eslint_parser: "^5.4.0", npm_package_dependencies__radix_ui_react_dialog: "1.0.4", npm_package_devDependencies__types_react_window: "^1.8.5", npm_package_files_1: "src", npm_package_repository_directory: "packages/roomkit-react", RUNNER_TEMP: "/home/runner/work/_temp", GITHUB_EVENT_PATH: "/home/runner/work/_temp/_github_workflow/event.json", npm_package_scripts_controller: "cd packages/hls-controller && yarn start", npm_package_dependencies__stitches_react: "^1.2.8", JAVA_HOME_11_X64: "/usr/lib/jvm/temurin-11-jdk-amd64", PIPX_BIN_DIR: "/opt/pipx_bin", GITHUB_REPOSITORY_OWNER: "100mslive", npm_package_engines_node: ">=16", npm_package_devDependencies_typedoc_plugin_markdown: "^3.14.0", npm_config_init_license: "MIT", GRADLE_HOME: "/usr/share/gradle-8.7", ANDROID_NDK_LATEST_HOME: "/usr/local/lib/android/sdk/ndk/26.3.11579264", JAVA_HOME_21_X64: "/usr/lib/jvm/temurin-21-jdk-amd64", STATS_RDCL: "true", GITHUB_RETENTION_DAYS: "90", YARN_WRAP_OUTPUT: "false", npm_config_version_tag_prefix: "v", GITHUB_REPOSITORY_OWNER_ID: "73883131", POWERSHELL_DISTRIBUTION_CHANNEL: "GitHub-Actions-ubuntu22", AZURE_EXTENSION_DIR: "/opt/az/azcliextensions", GITHUB_HEAD_REF: "", npm_package_scripts_lint_fix: "yarn lint --fix", npm_config_userconfig: "/home/runner/work/_temp/.npmrc", npm_package_devDependencies__storybook_addon_a11y: "^7.0.27", SYSTEMD_EXEC_PID: "593", npm_package_scripts_postinstall: "husky install && lerna bootstrap", npm_package_devDependencies_husky: "^6.0.0", npm_package_dependencies_recordrtc: "^5.6.2", npm_package_dependencies_eventemitter2: "^6.4.9", npm_package_dependencies__radix_ui_react_label: "1.0.0", npm_package_dependencies__radix_ui_react_dropdown_menu: "2.0.5", npm_package_keywords_0: "100mslive", GITHUB_GRAPHQL_URL: "https://api.github.com/graphql", npm_package_description: "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.", npm_package_devDependencies_typescript: "~4.7.4", npm_package_devDependencies_typedoc: "^0.24.8", npm_package_devDependencies_babel_loader: "^8.2.5", npm_package_devDependencies__rollup_plugin_image: "^3.0.2", npm_package_keywords_1: "react", GOROOT_1_20_X64: "/opt/hostedtoolcache/go/1.20.14/x64", NVM_DIR: "/home/runner/.nvm", npm_package_readmeFilename: "README.md", npm_package_devDependencies_react: "^18.1.0", npm_package_devDependencies__babel_preset_env: "^7.22.5", npm_package_keywords_2: "prebuilt", DOTNET_SKIP_FIRST_TIME_EXPERIENCE: "1", GOROOT_1_21_X64: "/opt/hostedtoolcache/go/1.21.9/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240414.1.0", npm_package_devDependencies_prettier: "^2.4.1", npm_package_devDependencies_babel_jest: "^26.6.0", npm_package_scripts_dev: "node ../../scripts/dev", npm_package_keywords_3: "roomkit", RUNNER_OS: "Linux", GITHUB_API_URL: "https://api.github.com", GOROOT_1_22_X64: "/opt/hostedtoolcache/go/1.22.2/x64", SWIFT_PATH: "/usr/share/swift/usr/bin", FORCE_COLOR: "true", npm_package_dependencies__radix_ui_react_toast: "1.0.0", npm_package_dependencies__radix_ui_react_radio_group: "1.0.0", npm_package_dependencies__100mslive_hms_noise_cancellation: "0.0.1", npm_package_devDependencies__babel_preset_typescript: "^7.22.5", npm_package_exports___default: "./dist/index.js", RUNNER_USER: "runner", STATS_V3PS: "true", CHROMEWEBDRIVER: "/usr/local/share/chromedriver-linux64", JOURNAL_STREAM: "8:20511", GITHUB_WORKFLOW: "Publish Packages", _: "/usr/local/bin/yarn", npm_package_devDependencies_ts_jest: "26.5.6", npm_package_devDependencies_lerna: "^5.6.2", npm_package_devDependencies__types_jest: "^27.0.3", npm_package_devDependencies__commitlint_config_conventional: "^15.0.0", npm_package_private: "true", npm_package_dependencies__radix_ui_react_accordion: "1.0.0", npm_package_devDependencies__rollup_plugin_commonjs: "^21.0.3", npm_package_devDependencies__babel_preset_react: "^7.22.5", npm_package_module: "dist/index.js", npm_package_scripts_lint: "eslint -c .eslintrc --no-error-on-unmatched-pattern src --ext .js --ext .jsx --ext .ts --ext .tsx", npm_package_devDependencies__typescript_eslint_eslint_plugin: "^5.4.0", npm_config_registry: "https://registry.yarnpkg.com", npm_package_dependencies_react_window: "^1.8.7", npm_package_dependencies__100mslive_hls_player: "0.3.8-alpha.1", npm_package_devDependencies__types_lodash_merge: "^4.6.6", npm_package_devDependencies__storybook_cli: "^7.0.27", npm_package_devDependencies__rollup_plugin_json: "^6.0.0", ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: "/opt/actionarchivecache", STATS_D: "false", GITHUB_RUN_ID: "8732562653", STATS_VMFE: "true", npm_package_workspaces_0: "packages/*", npm_package_scripts_store: "cd packages/hms-video-store && yarn start", npm_package_devDependencies__babel_core: "^7.18.2", npm_package_dependencies_ts_pattern: "4.3.0", npm_package_devDependencies__storybook_addon_interactions: "^7.0.27", npm_package_devDependencies__storybook_addon_actions: "^7.0.27", GITHUB_REF_TYPE: "branch", BOOTSTRAP_HASKELL_NONINTERACTIVE: "1", GITHUB_WORKFLOW_SHA: "569f8b3923f8f47aaf9ecd7d91b9fe1e52c39695", GITHUB_BASE_REF: "", ImageOS: "ubuntu22", npm_package_workspaces_1: "examples/*", npm_package_scripts_start: 'concurrently "yarn dev" "yarn types"', npm_config_ignore_scripts: "", NX_TASK_HASH: "4310d52a39a6bcb3f340fee7133e1ad792459ea3961dc69beb7c4b75c929dd6e", npm_package_exports___import: "./dist/index.js", GITHUB_WORKFLOW_REF: "100mslive/web-sdks/.github/workflows/publish.yml@refs/heads/publish-alpha", PERFLOG_LOCATION_SETTING: "RUNNER_PERFLOG", GITHUB_ACTION_REPOSITORY: "", npm_package_scripts_prebuilt: "cd packages/roomkit-react && yarn start", npm_package_devDependencies_postcss_loader: "^6.2.1", npm_package_devDependencies_esbuild_loader: "^4.0.2", PATH: "/tmp/yarn--1713415919977-0.3230822190585294:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1713415919783-0.5830170510480925:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1713415897957-0.1301843973018475:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1713415897779-0.8737125083718396:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin:/snap/bin:/home/runner/.local/bin:/opt/pipx_bin:/home/runner/.cargo/bin:/home/runner/.config/composer/vendor/bin:/usr/local/.ghcup/bin:/home/runner/.dotnet/tools:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin", NODE: "/opt/hostedtoolcache/node/18.20.2/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_97e61f22-cd7d-41d8-a4ce-9938198b4f42", INVOCATION_ID: "580ffd2a32964d3bb395107504953d6f", NPM_CONFIG_USERCONFIG: "/home/runner/work/_temp/.npmrc", RUNNER_TOOL_CACHE: "/opt/hostedtoolcache", npm_package_scripts_size: "size-limit", npm_package_devDependencies_size_limit: "^5.0.3", npm_package_name: "@100mslive/roomkit-react", npm_package_devDependencies__storybook_react_webpack5: "^7.0.27", npm_package_repository_type: "git", GITHUB_ACTION: "__run_3", GITHUB_RUN_NUMBER: "516", GITHUB_TRIGGERING_ACTOR: "github-actions[bot]", RUNNER_ARCH: "X64", XDG_RUNTIME_DIR: "/run/user/1001", AGENT_TOOLSDIRECTORY: "/opt/hostedtoolcache", npm_package_lint_staged____js_ts_jsx_tsx_: "eslint", npm_package_devDependencies_babel_plugin_istanbul: "^6.1.1", LERNA_PACKAGE_NAME: "@100mslive/roomkit-react", npm_package_dependencies__radix_ui_react_select: "1.0.0", npm_package_size_limit_0_limit: "20 KB", npm_package_devDependencies__commitlint_cli: "^15.0.0", npm_package_devDependencies__rollup_plugin_typescript: "^8.3.1", LANG: "C.UTF-8", VCPKG_INSTALLATION_ROOT: "/usr/local/share/vcpkg", npm_package_size_limit_1_limit: "20 KB", npm_package_devDependencies_eslint_plugin_simple_import_sort: "^8.0.0", npm_package_devDependencies_eslint: "^8.9.0", npm_package_dependencies_react_intersection_observer: "^9.4.3", npm_package_devDependencies_rollup_plugin_terser: "^7.0.2", npm_package_devDependencies__types_mdx: "2.0.2", CONDA: "/usr/share/miniconda", RUNNER_NAME: "GitHub Actions 433", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "publish-alpha", GITHUB_REPOSITORY: "100mslive/web-sdks", STATS_D_D: "false", npm_lifecycle_script: "rm -rf dist && node ../../scripts/build-webapp", npm_package_size_limit_2_limit: "400 KB", npm_package_resolutions_loader_utils: "^2.0.4", npm_package_devDependencies_dotenv: "^14.2.0", npm_package_dependencies__radix_ui_react_slider: "1.0.0", npm_package_devDependencies_rollup_plugin_import_css: "^3.3.1", npm_package_scripts_types_build: "tsc -p tsconfig.json", npm_package_main: "dist/index.cjs.js", STATS_UE: "true", ANDROID_NDK_ROOT: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_ACTION_REF: "", DEBIAN_FRONTEND: "noninteractive", npm_package_size_limit_3_limit: "20 KB", npm_package_size_limit_0_path: "packages/hms-video-store/dist/index.cjs.js", npm_package_scripts_cypress_open: "cypress open", npm_package_scripts_lerna_publish: "lerna publish from-package --dist-tag $PUBLISH_FLAG --yes --no-verify-access", npm_package_scripts_test: "yarn build --no-private && lerna run test", npm_package_devDependencies_concurrently: "^6.4.0", npm_config_version_git_message: "v%s", npm_package_dependencies__radix_ui_react_checkbox: "1.0.0", npm_package_dependencies__100mslive_react_icons: "0.10.8-alpha.1", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.3.8-alpha.1", npm_package_size_limit_4_limit: "20 KB", npm_package_size_limit_1_path: "packages/hms-video-store/dist/index.js", npm_package_scripts_build_only: "rm -rf dist && node ../../scripts/build-webapp", npm_package_devDependencies__types_react: "^18.1.0", npm_package_sideEffects: "false", npm_package_repository_url: "https://github.com/100mslive/web-sdks.git", npm_package_source: "src/index.ts", GITHUB_REF_PROTECTED: "true", npm_config_argv: '{"remain":[],"cooked":["run","test"],"original":["test"]}', npm_package_size_limit_5_limit: "20 KB", npm_package_size_limit_2_path: "packages/roomkit-react/dist/index.cjs.js", npm_package_scripts_build: "yarn build:only && yarn types:build", npm_package_devDependencies_tslib: "^2.2.0", npm_package_devDependencies_nx: "^14.5.1", npm_package_devDependencies_lint_staged: "^12.0.3", NX_CLI_SET: "true", npm_package_dependencies_uuid: "^8.3.2", npm_package_dependencies_react_virtualized_auto_sizer: "^1.0.7", npm_package_dependencies_lodash_merge: "^4.6.2", npm_package_dependencies_emoji_mart: "^5.2.2", GITHUB_WORKSPACE: "/home/runner/work/web-sdks/web-sdks", ACCEPT_EULA: "Y", GITHUB_JOB: "publish_packages", RUNNER_PERFLOG: "/home/runner/perflog", npm_package_size_limit_6_limit: "150 KB", npm_package_size_limit_3_path: "packages/roomkit-react/dist/index.js", npm_package_devDependencies_cypress: "^9.5.2", npm_package_devDependencies_rollup_plugin_esbuild: "^5.0.0", GITHUB_SHA: "569f8b3923f8f47aaf9ecd7d91b9fe1e52c39695", GITHUB_RUN_ATTEMPT: "1", npm_package_size_limit_7_limit: "100 KB", npm_package_size_limit_4_path: "packages/hms-virtual-background/dist/index.cjs.js", npm_config_version_git_tag: "true", npm_config_version_git_sign: "", npm_package_dependencies_qrcode_react: "^3.1.0", GITHUB_REF: "refs/heads/publish-alpha", GITHUB_ACTOR: "github-actions[bot]", ANDROID_SDK_ROOT: "/usr/local/lib/android/sdk", npm_package_license: "MIT", npm_package_size_limit_5_path: "packages/hms-virtual-background/dist/index.js", npm_config_strict_ssl: "true", LEIN_HOME: "/usr/local/lib/lein", npm_package_size_limit_6_path: "packages/react-icons/dist/index.cjs.js", npm_package_scripts_format: "prettier -w src/**", npm_package_devDependencies_eslint_plugin_prettier: "^4.0.0", npm_package_devDependencies_eslint_config_react_app: "^7.0.0", NX_TASK_TARGET_PROJECT: "@100mslive/roomkit-react", GITHUB_PATH: "/home/runner/work/_temp/_runner_file_commands/add_path_8960a610-873b-48c4-a70f-4da8aa68e13d", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "41898282", RUNNER_WORKSPACE: "/home/runner/work/web-sdks", npm_execpath: "/usr/local/lib/node_modules/yarn/bin/yarn.js", npm_package_size_limit_7_path: "packages/react-icons/dist/index.js", npm_package_scripts_ybys: "yarn && yarn build --no-private && yarn storybook", npm_package_dependencies__radix_ui_react_progress: "1.0.0", HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: "3650", STATS_TIS: "mining", GITHUB_EVENT_NAME: "workflow_dispatch", HOMEBREW_NO_AUTO_UPDATE: "1", ANDROID_HOME: "/usr/local/lib/android/sdk", GITHUB_SERVER_URL: "https://github.com", GECKOWEBDRIVER: "/usr/local/share/gecko_driver", LEIN_JAR: "/usr/local/lib/lein/self-installs/leiningen-2.11.2-standalone.jar", GHCUP_INSTALL_BASE_PREFIX: "/usr/local", GITHUB_OUTPUT: "/home/runner/work/_temp/_runner_file_commands/set_output_8960a610-873b-48c4-a70f-4da8aa68e13d", npm_package_scripts_prestart: "rm -rf dist && yarn types:build", npm_package_author_name: "100ms", EDGEWEBDRIVER: "/usr/local/share/edge_driver", STATS_EXT: "true", npm_package_scripts_build_storybook: "sb build", npm_package_devDependencies_postcss: "^8.4.5", npm_package_devDependencies_esbuild: "^0.18.13", npm_config_save_prefix: "^", npm_config_ignore_optional: "", npm_package_dependencies_worker_timers: "^7.0.40", npm_package_typings: "dist/index.d.ts", ANDROID_NDK: "/usr/local/lib/android/sdk/ndk/25.2.9519653", SGX_AESM_ADDR: "1", CHROME_BIN: "/usr/bin/google-chrome", npm_package_scripts_storybook: "sb dev -p 6006", npm_package_devDependencies_esbuild_plugin_postcss2: "0.1.1", npm_package_dependencies_react_swipeable: "^7.0.1", npm_package_devDependencies_babel_plugin_react_require: "3.1.3", npm_package_devDependencies__storybook_testing_library: "^0.2.0", npm_package_devDependencies__storybook_addon_essentials: "^7.0.27", SELENIUM_JAR_PATH: "/usr/share/java/selenium-server.jar", STATS_EXTP: "https://provjobdsettingscdn.blob.core.windows.net/settings/provjobdsettings-0.5.172+1/provjobd.data", npm_package_scripts_reactsdk: "cd packages/react-sdk && yarn start", npm_package_dependencies_react_use: "^17.4.0", npm_package_dependencies__radix_ui_react_collapsible: "1.0.0", npm_package_devDependencies_storybook_dark_mode: "^3.0.0", npm_package_devDependencies__storybook_react: "^7.0.27", INIT_CWD: "/home/runner/work/web-sdks/web-sdks", ANDROID_NDK_HOME: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_STEP_SUMMARY: "/home/runner/work/_temp/_runner_file_commands/step_summary_8960a610-873b-48c4-a70f-4da8aa68e13d" };
   }
 });
 
@@ -398,7 +398,8 @@ var init_constants = __esm({
       disableNotifications: "disableNotifications",
       pollState: "pollState",
       background: "background",
-      sheet: "sheet"
+      sheet: "sheet",
+      loadingEffects: "loadingEffects"
     };
     UI_SETTINGS = {
       isAudioOnly: "isAudioOnly",
@@ -10030,6 +10031,7 @@ var init_AppData = __esm({
       [APP_DATA.minimiseInset]: false,
       [APP_DATA.activeScreensharePeerId]: "",
       [APP_DATA.disableNotifications]: false,
+      [APP_DATA.loadingEffects]: false,
       [APP_DATA.background]: "none",
       [APP_DATA.pollState]: {
         [POLL_STATE.pollInView]: "",
@@ -11522,7 +11524,20 @@ var init_useDropdownList = __esm({
 });
 
 // src/Prebuilt/common/hooks.ts
-var import_react47, import_react_use5, import_join_form2, import_react_sdk14, useFilteredRoles, useDefaultChatSelection, useShowStreamingUI, useParticipants, useIsLandscape, useLandscapeHLSStream, useMobileHLSStream, useKeyboardHandler;
+function getResolution(recordingResolution) {
+  if (!recordingResolution) {
+    return void 0;
+  }
+  const resolution = RTMP_RECORD_DEFAULT_RESOLUTION;
+  if (recordingResolution.width) {
+    resolution.width = recordingResolution.width;
+  }
+  if (recordingResolution.height) {
+    resolution.height = recordingResolution.height;
+  }
+  return resolution;
+}
+var import_react47, import_react_use5, import_join_form2, import_react_sdk14, useFilteredRoles, useDefaultChatSelection, useShowStreamingUI, useParticipants, useIsLandscape, useLandscapeHLSStream, useMobileHLSStream, useKeyboardHandler, useRecordingHandler;
 var init_hooks = __esm({
   "src/Prebuilt/common/hooks.ts"() {
     "use strict";
@@ -11531,8 +11546,10 @@ var init_hooks = __esm({
     import_react_use5 = require("react-use");
     import_join_form2 = require("@100mslive/types-prebuilt/elements/join_form");
     import_react_sdk14 = require("@100mslive/react-sdk");
+    init_ToastManager();
     init_Theme();
     init_roomLayoutProvider();
+    init_useUISettings();
     init_useRoomLayoutScreen();
     init_constants();
     useFilteredRoles = () => {
@@ -11618,6 +11635,50 @@ var init_hooks = __esm({
       );
       return handleKeyEvent;
     };
+    useRecordingHandler = () => {
+      const hmsActions = (0, import_react_sdk14.useHMSActions)();
+      const recordingState = (0, import_react_sdk14.useHMSStore)(import_react_sdk14.selectRecordingState);
+      const [isRecordingLoading, setIsRecordingLoading] = (0, import_react47.useState)(false);
+      const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
+      (0, import_react47.useEffect)(() => {
+        if (recordingState.browser.error && recordingStarted) {
+          setRecordingState(false);
+        }
+      }, [recordingStarted, recordingState.browser.error, setRecordingState]);
+      const startRecording = (0, import_react47.useCallback)(
+        (resolution = null) => __async(void 0, null, function* () {
+          try {
+            setRecordingState(true);
+            setIsRecordingLoading(true);
+            yield hmsActions.startRTMPOrRecording({
+              resolution: getResolution(resolution),
+              record: true
+            });
+          } catch (error) {
+            const err = error;
+            if (err.message.includes("stream already running")) {
+              ToastManager.addToast({
+                title: "Recording already running",
+                variant: "error"
+              });
+            } else {
+              ToastManager.addToast({
+                title: err.message,
+                variant: "error"
+              });
+            }
+            setRecordingState(false);
+          }
+          setIsRecordingLoading(false);
+        }),
+        [hmsActions, setRecordingState]
+      );
+      return {
+        recordingStarted,
+        startRecording,
+        isRecordingLoading
+      };
+    };
   }
 });
 
@@ -13096,18 +13157,6 @@ var init_ResolutionInput = __esm({
 });
 
 // src/Prebuilt/components/Settings/StartRecording.jsx
-function getResolution(recordingResolution) {
-  const resolution = {};
-  if (recordingResolution.width) {
-    resolution.width = recordingResolution.width;
-  }
-  if (recordingResolution.height) {
-    resolution.height = recordingResolution.height;
-  }
-  if (Object.keys(resolution).length > 0) {
-    return resolution;
-  }
-}
 var import_react60, import_react_sdk22, import_react_icons23, StartRecording, StartRecording_default;
 var init_StartRecording = __esm({
   "src/Prebuilt/components/Settings/StartRecording.jsx"() {
@@ -13119,12 +13168,12 @@ var init_StartRecording = __esm({
     init_src();
     init_ResolutionInput();
     init_ToastManager();
-    init_useUISettings();
+    init_hooks();
     init_constants();
     StartRecording = ({ open, onOpenChange }) => {
       const permissions = (0, import_react_sdk22.useHMSStore)(import_react_sdk22.selectPermissions);
       const [resolution, setResolution] = (0, import_react60.useState)(RTMP_RECORD_DEFAULT_RESOLUTION);
-      const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
+      const { startRecording, recordingStarted } = useRecordingHandler();
       const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = (0, import_react_sdk22.useRecordingStreaming)();
       const hmsActions = (0, import_react_sdk22.useHMSActions)();
       if (!(permissions == null ? void 0 : permissions.browserRecording) || isHLSRunning) {
@@ -13181,26 +13230,7 @@ var init_StartRecording = __esm({
           type: "submit",
           disabled: recordingStarted || isStreamingOn,
           onClick: () => __async(void 0, null, function* () {
-            try {
-              setRecordingState(true);
-              yield hmsActions.startRTMPOrRecording({
-                resolution: getResolution(resolution),
-                record: true
-              });
-            } catch (error) {
-              if (error.message.includes("stream already running")) {
-                ToastManager.addToast({
-                  title: "Recording already running",
-                  variant: "error"
-                });
-              } else {
-                ToastManager.addToast({
-                  title: error.message,
-                  variant: "error"
-                });
-              }
-              setRecordingState(false);
-            }
+            yield startRecording(resolution);
             onOpenChange(false);
           })
         },
@@ -19564,7 +19594,7 @@ var init_dist = __esm({
     };
     wa = (a2, e) => () => (e || a2((e = { exports: {} }).exports, e), e.exports);
     ur = wa((od, za) => {
-      za.exports = { version: "0.12.8-alpha.0", license: "MIT", repository: { type: "git", url: "https://github.com/100mslive/web-sdks.git", directory: "packages/hms-video-store" }, main: "dist/index.cjs.js", module: "dist/index.js", typings: "dist/index.d.ts", files: ["dist", "src"], engines: { node: ">=12" }, exports: { ".": { require: "./dist/index.cjs.js", import: "./dist/index.js", default: "./dist/index.js" } }, sideEffects: false, scripts: { prestart: "rm -rf dist && yarn types:build", start: 'concurrently "yarn dev" "yarn types"', dev: "node ../../scripts/dev", "build:only": "node ../../scripts/build", build: "yarn build:only && yarn types:build", types: "tsc -w", "types:build": "tsc -p tsconfig.json", format: "prettier --write src/**/*.ts", test: "jest --maxWorkers=1", "test:watch": "jest --watch", "test:coverage": "jest --coverage", lint: "eslint -c ../../.eslintrc .", "lint:fix": "yarn lint --fix", prepare: "yarn build", size: "size-limit", analyze: "size-limit --why", docs: "rm -rf ./docs && typedoc && rm -f ./docs/README.md && mkdir ./docs/home &&mv ./docs/modules.md ./docs/home/content.md && node ../../scripts/docs-store && npx prettier --write './docs/**/*'" }, name: "@100mslive/hms-video-store", author: "100ms", dependencies: { eventemitter2: "^6.4.9", immer: "^9.0.6", "lodash.isequal": "^4.5.0", reselect: "4.0.0", "sdp-transform": "^2.14.1", "ua-parser-js": "^1.0.1", uuid: "^8.3.2", "webrtc-adapter": "^8.0.0", zustand: "3.5.7" }, devDependencies: { "@types/dom-screen-wake-lock": "^1.0.1", "@types/lodash.isequal": "^4.5.8", "@types/sdp-transform": "^2.4.4", "@types/ua-parser-js": "^0.7.36", "@types/uuid": "^8.3.0", "jest-canvas-mock": "^2.3.1", "jsdom-worker": "^0.3.0", tslib: "^2.2.0" }, description: "@100mslive Core SDK which abstracts the complexities of webRTC while providing a reactive store for data management with a unidirectional data flow", keywords: ["video", "webrtc", "conferencing", "100ms"] };
+      za.exports = { version: "0.12.8-alpha.1", license: "MIT", repository: { type: "git", url: "https://github.com/100mslive/web-sdks.git", directory: "packages/hms-video-store" }, main: "dist/index.cjs.js", module: "dist/index.js", typings: "dist/index.d.ts", files: ["dist", "src"], engines: { node: ">=12" }, exports: { ".": { require: "./dist/index.cjs.js", import: "./dist/index.js", default: "./dist/index.js" } }, sideEffects: false, scripts: { prestart: "rm -rf dist && yarn types:build", start: 'concurrently "yarn dev" "yarn types"', dev: "node ../../scripts/dev", "build:only": "node ../../scripts/build", build: "yarn build:only && yarn types:build", types: "tsc -w", "types:build": "tsc -p tsconfig.json", format: "prettier --write src/**/*.ts", test: "jest --maxWorkers=1", "test:watch": "jest --watch", "test:coverage": "jest --coverage", lint: "eslint -c ../../.eslintrc .", "lint:fix": "yarn lint --fix", prepare: "yarn build", size: "size-limit", analyze: "size-limit --why", docs: "rm -rf ./docs && typedoc && rm -f ./docs/README.md && mkdir ./docs/home &&mv ./docs/modules.md ./docs/home/content.md && node ../../scripts/docs-store && npx prettier --write './docs/**/*'" }, name: "@100mslive/hms-video-store", author: "100ms", dependencies: { eventemitter2: "^6.4.9", immer: "^9.0.6", "lodash.isequal": "^4.5.0", reselect: "4.0.0", "sdp-transform": "^2.14.1", "ua-parser-js": "^1.0.1", uuid: "^8.3.2", "webrtc-adapter": "^8.0.0", zustand: "3.5.7" }, devDependencies: { "@types/dom-screen-wake-lock": "^1.0.1", "@types/lodash.isequal": "^4.5.8", "@types/sdp-transform": "^2.4.4", "@types/ua-parser-js": "^0.7.36", "@types/uuid": "^8.3.0", "jest-canvas-mock": "^2.3.1", "jsdom-worker": "^0.3.0", tslib: "^2.2.0" }, description: "@100mslive Core SDK which abstracts the complexities of webRTC while providing a reactive store for data management with a unidirectional data flow", keywords: ["video", "webrtc", "conferencing", "100ms"] };
     });
     er = ((n) => (n.Disconnected = "Disconnected", n.Preview = "Preview", n.Connecting = "Connecting", n.Connected = "Connected", n.Reconnecting = "Reconnecting", n.Disconnecting = "Disconnecting", n.Failed = "Failed", n))(er || {});
     Da = ((e) => (e.CHAT = "chat", e))(Da || {});
@@ -20747,9 +20777,8 @@ var init_StreamActions = __esm({
     init_ToastManager();
     init_AdditionalRoomState();
     init_useRoomLayoutScreen();
-    init_useUISettings();
+    init_hooks();
     init_utils2();
-    init_constants();
     LiveStatus = () => {
       var _a8;
       const { isHLSRunning, isRTMPRunning } = (0, import_react_sdk32.useRecordingStreaming)();
@@ -20862,7 +20891,7 @@ var init_StreamActions = __esm({
     StartRecording2 = () => {
       const permissions = (0, import_react_sdk32.useHMSStore)(import_react_sdk32.selectPermissions);
       const [open, setOpen] = (0, import_react72.useState)(false);
-      const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
+      const { startRecording, recordingStarted } = useRecordingHandler();
       const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = (0, import_react_sdk32.useRecordingStreaming)();
       const hmsActions = (0, import_react_sdk32.useHMSActions)();
       if (!(permissions == null ? void 0 : permissions.browserRecording) || isHLSRunning) {
@@ -20900,26 +20929,7 @@ var init_StreamActions = __esm({
           icon: true,
           disabled: recordingStarted || isStreamingOn,
           onClick: () => __async(void 0, null, function* () {
-            try {
-              setRecordingState(true);
-              yield hmsActions.startRTMPOrRecording({
-                record: true
-              });
-            } catch (error) {
-              const err = error;
-              if (err.message.includes("stream already running")) {
-                ToastManager.addToast({
-                  title: "Recording already running",
-                  variant: "error"
-                });
-              } else {
-                ToastManager.addToast({
-                  title: err.message,
-                  variant: "error"
-                });
-              }
-              setRecordingState(false);
-            }
+            yield startRecording();
           })
         },
         recordingStarted ? /* @__PURE__ */ import_react72.default.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ import_react72.default.createElement(import_react_icons29.RecordIcon, null),
@@ -21301,7 +21311,6 @@ var init_MwebOptions = __esm({
       const [openSettingsSheet, setOpenSettingsSheet] = (0, import_react78.useState)(false);
       const [showEmojiCard, setShowEmojiCard] = (0, import_react78.useState)(false);
       const [showRecordingOn, setShowRecordingOn] = (0, import_react78.useState)(false);
-      const [isRecordingLoading, setIsRecordingLoading] = (0, import_react78.useState)(false);
       const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
       const { showPolls } = useShowPolls();
       const togglePollView = usePollViewToggle();
@@ -21315,6 +21324,7 @@ var init_MwebOptions = __esm({
       const isLandscapeHLSStream = useLandscapeHLSStream();
       const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
       const isLocalVideoEnabled = (0, import_react_sdk36.useHMSStore)(import_react_sdk36.selectIsLocalVideoEnabled);
+      const { startRecording, isRecordingLoading } = useRecordingHandler();
       useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: "MoreSettings" });
       const updateState = (modalName, value) => {
         setOpenModals((modals) => {
@@ -21452,28 +21462,8 @@ var init_MwebOptions = __esm({
                 setOpenOptionsSheet(false);
                 setShowRecordingOn(true);
               } else {
-                setIsRecordingLoading(true);
-                try {
-                  yield hmsActions.startRTMPOrRecording({
-                    record: true
-                  });
-                  setOpenOptionsSheet(false);
-                  setIsRecordingLoading(false);
-                } catch (error) {
-                  if (error.message.includes("stream already running")) {
-                    ToastManager.addToast({
-                      title: "Recording already running",
-                      variant: "error"
-                    });
-                  } else {
-                    ToastManager.addToast({
-                      // @ts-ignore
-                      title: error.message,
-                      variant: "error"
-                    });
-                  }
-                  setIsRecordingLoading(false);
-                }
+                yield startRecording();
+                setOpenOptionsSheet(false);
               }
               if (isHLSRunning) {
                 setOpenOptionsSheet(false);
@@ -22177,6 +22167,7 @@ var init_VBToggle = __esm({
     import_react88 = __toESM(require("react"));
     import_react_sdk39 = require("@100mslive/react-sdk");
     import_react_icons37 = require("@100mslive/react-icons");
+    init_Loading2();
     init_Tooltip2();
     init_IconButton3();
     init_useSidepane();
@@ -22186,10 +22177,11 @@ var init_VBToggle = __esm({
       const isVBOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.VB);
       const isVideoOn = (0, import_react_sdk39.useHMSStore)(import_react_sdk39.selectIsLocalVideoEnabled);
       const isEffectsEnabled = (0, import_react_sdk39.useHMSStore)(import_react_sdk39.selectIsEffectsEnabled);
+      const loadingEffects = (0, import_react_sdk39.useHMSStore)((0, import_react_sdk39.selectAppData)(APP_DATA.loadingEffects));
       if (!isVideoOn || !isEffectsEnabled && isSafari) {
         return null;
       }
-      return /* @__PURE__ */ import_react88.default.createElement(Tooltip, { side: "top", disabled: isVBOpen, title: "Configure Virtual Background" }, /* @__PURE__ */ import_react88.default.createElement(IconButton_default, { active: !isVBOpen, onClick: toggleVB, "data-testid": "virtual_bg_btn" }, /* @__PURE__ */ import_react88.default.createElement(import_react_icons37.VirtualBackgroundIcon, null)));
+      return /* @__PURE__ */ import_react88.default.createElement(Tooltip, { side: "top", disabled: isVBOpen, title: "Configure Virtual Background" }, /* @__PURE__ */ import_react88.default.createElement(IconButton_default, { active: !isVBOpen, onClick: toggleVB, "data-testid": "virtual_bg_btn" }, loadingEffects ? /* @__PURE__ */ import_react88.default.createElement(Loading, { size: 18 }) : /* @__PURE__ */ import_react88.default.createElement(import_react_icons37.VirtualBackgroundIcon, null)));
     };
   }
 });
@@ -28081,7 +28073,7 @@ var init_VBOption = __esm({
           "&:hover": { border: "4px solid $primary_dim" }
         }, mediaURL ? { height: "$20", backgroundImage: `url(${mediaURL})`, backgroundSize: "cover" } : {}),
         onClick: () => __async(void 0, null, function* () {
-          return yield onClick == null ? void 0 : onClick();
+          yield onClick == null ? void 0 : onClick();
         })
       },
       children
@@ -28143,12 +28135,12 @@ var init_VBHandler = __esm({
     import_hms_virtual_background2 = require("@100mslive/hms-virtual-background");
     VBPlugin = class {
       constructor() {
-        this.initialisePlugin = (effectsSDKKey) => {
+        this.initialisePlugin = (effectsSDKKey, onInit) => {
           if (this.getVBObject()) {
             return;
           }
           if (effectsSDKKey) {
-            this.effectsPlugin = new import_hms_virtual_background2.HMSEffectsPlugin(effectsSDKKey);
+            this.effectsPlugin = new import_hms_virtual_background2.HMSEffectsPlugin(effectsSDKKey, onInit);
           } else {
             this.hmsPlugin = new import_hms_virtual_background2.HMSVBPlugin(import_hms_virtual_background2.HMSVirtualBackgroundTypes.NONE, import_hms_virtual_background2.HMSVirtualBackgroundTypes.NONE);
           }
@@ -28256,12 +28248,13 @@ var init_constants4 = __esm({
 });
 
 // src/Prebuilt/components/VirtualBackground/VBPicker.tsx
-var import_react154, import_hms_virtual_background3, import_react_sdk78, import_react_icons76, iconDims, VBPicker;
+var import_react154, import_react_use27, import_hms_virtual_background3, import_react_sdk78, import_react_icons76, iconDims, VBPicker;
 var init_VBPicker = __esm({
   "src/Prebuilt/components/VirtualBackground/VBPicker.tsx"() {
     "use strict";
     init_define_process_env();
     import_react154 = __toESM(require("react"));
+    import_react_use27 = require("react-use");
     init_dist();
     import_hms_virtual_background3 = require("@100mslive/hms-virtual-background");
     import_react_sdk78 = require("@100mslive/react-sdk");
@@ -28290,6 +28283,8 @@ var init_VBPicker = __esm({
       const isLargeRoom = (0, import_react_sdk78.useHMSStore)(import_react_sdk78.selectIsLargeRoom);
       const isEffectsEnabled = (0, import_react_sdk78.useHMSStore)(nc);
       const effectsKey = (0, import_react_sdk78.useHMSStore)(cc);
+      const isMobile = (0, import_react_use27.useMedia)(config.media.md);
+      const [loadingEffects, setLoadingEffects] = useSetAppDataByKey(APP_DATA.loadingEffects);
       const isPluginAdded = (0, import_react_sdk78.useHMSStore)((0, import_react_sdk78.selectIsLocalVideoPluginPresent)(((_a8 = VBHandler) == null ? void 0 : _a8.getName()) || ""));
       const background = (0, import_react_sdk78.useHMSStore)(um(APP_DATA.background));
       const mediaList = backgroundMedia.length ? backgroundMedia.map((media) => media.url || "") : defaultMedia2;
@@ -28300,13 +28295,15 @@ var init_VBPicker = __esm({
           return;
         }
         if (!isPluginAdded) {
+          setLoadingEffects(true);
           let vbObject = VBHandler.getVBObject();
           if (!vbObject) {
-            VBHandler.initialisePlugin(isEffectsEnabled && effectsKey ? effectsKey : "");
+            VBHandler.initialisePlugin(isEffectsEnabled && effectsKey ? effectsKey : "", () => setLoadingEffects(false));
             vbObject = VBHandler.getVBObject();
             if (isEffectsEnabled && effectsKey) {
               hmsActions.addPluginsToVideoStream([vbObject]);
             } else {
+              setLoadingEffects(false);
               if (!role) {
                 return;
               }
@@ -28328,13 +28325,24 @@ var init_VBPicker = __esm({
           });
           handleDefaultBackground();
         }
-      }, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey, track == null ? void 0 : track.id, background, blurAmount]);
+      }, [
+        hmsActions,
+        role,
+        isPluginAdded,
+        isEffectsEnabled,
+        effectsKey,
+        track == null ? void 0 : track.id,
+        background,
+        blurAmount,
+        setLoadingEffects
+      ]);
       (0, import_react154.useEffect)(() => {
         if (!isVideoOn) {
           toggleVB();
         }
-      }, [isVideoOn, toggleVB]);
-      return /* @__PURE__ */ import_react154.default.createElement(Flex, { css: { pr: "$6", size: "100%" }, direction: "column" }, /* @__PURE__ */ import_react154.default.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", background: "$surface_dim", pb: "$4" } }, /* @__PURE__ */ import_react154.default.createElement(Text, { variant: "h6", css: { color: "$on_surface_high" } }, "Virtual Background"), /* @__PURE__ */ import_react154.default.createElement(
+        return () => setLoadingEffects(false);
+      }, [isVideoOn, setLoadingEffects, toggleVB]);
+      return /* @__PURE__ */ import_react154.default.createElement(Flex, { css: { pr: "$6", size: "100%" }, direction: "column" }, /* @__PURE__ */ import_react154.default.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", background: "$surface_dim", pb: "$4" } }, /* @__PURE__ */ import_react154.default.createElement(Text, { variant: "h6", css: { color: "$on_surface_high", display: "flex", alignItems: "center" } }, "Virtual Background ", isMobile && loadingEffects ? /* @__PURE__ */ import_react154.default.createElement(Loading, { size: 18, style: { marginLeft: "0.5rem" } }) : ""), /* @__PURE__ */ import_react154.default.createElement(
         Box,
         {
           css: { color: "$on_surface_high", "&:hover": { color: "$on_surface_medium" }, cursor: "pointer" },
@@ -28424,13 +28432,13 @@ var init_VBPicker = __esm({
 });
 
 // src/Prebuilt/layouts/SidePane.tsx
-var import_react155, import_react_use27, import_ts_pattern11, import_react_sdk79, Wrapper3, SidePane, SidePane_default;
+var import_react155, import_react_use28, import_ts_pattern11, import_react_sdk79, Wrapper3, SidePane, SidePane_default;
 var init_SidePane = __esm({
   "src/Prebuilt/layouts/SidePane.tsx"() {
     "use strict";
     init_define_process_env();
     import_react155 = __toESM(require("react"));
-    import_react_use27 = require("react-use");
+    import_react_use28 = require("react-use");
     import_ts_pattern11 = require("ts-pattern");
     import_react_sdk79 = require("@100mslive/react-sdk");
     init_Polls();
@@ -28547,7 +28555,7 @@ var init_SidePane = __esm({
       hideControls = false
     }) => {
       var _a8, _b7, _c, _d, _e, _f, _g;
-      const isMobile = (0, import_react_use27.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use28.useMedia)(config.media.md);
       const sidepane = (0, import_react_sdk79.useHMSStore)((0, import_react_sdk79.selectAppData)(APP_DATA.sidePane));
       const activeScreensharePeerId = (0, import_react_sdk79.useHMSStore)((0, import_react_sdk79.selectAppData)(APP_DATA.activeScreensharePeerId));
       const trackId = (_a8 = (0, import_react_sdk79.useHMSStore)((0, import_react_sdk79.selectVideoTrackByPeerID)(activeScreensharePeerId))) == null ? void 0 : _a8.id;
@@ -28667,29 +28675,33 @@ var init_Chip = __esm({
   }
 });
 
-// src/Prebuilt/components/FullPageProgress.jsx
+// src/Prebuilt/components/FullPageProgress.tsx
 var import_react157, FullPageProgress, FullPageProgress_default;
 var init_FullPageProgress = __esm({
-  "src/Prebuilt/components/FullPageProgress.jsx"() {
+  "src/Prebuilt/components/FullPageProgress.tsx"() {
     "use strict";
     init_define_process_env();
     import_react157 = __toESM(require("react"));
     init_Layout();
     init_Loading2();
     init_Text2();
-    FullPageProgress = ({ loaderColor = "$primary_default", text = "", css: css2 = {} }) => /* @__PURE__ */ import_react157.default.createElement(Flex, { direction: "column", justify: "center", align: "center", css: __spreadValues({ size: "100%", color: loaderColor }, css2) }, /* @__PURE__ */ import_react157.default.createElement(Loading, { color: "currentColor", size: 100 }), text ? /* @__PURE__ */ import_react157.default.createElement(Text, { css: { mt: "$10", color: "$on_surface_high" } }, text) : null);
+    FullPageProgress = ({
+      loaderColor = "$primary_default",
+      text = "",
+      css: css2 = {}
+    }) => /* @__PURE__ */ import_react157.default.createElement(Flex, { direction: "column", justify: "center", align: "center", css: __spreadValues({ size: "100%", color: loaderColor }, css2) }, /* @__PURE__ */ import_react157.default.createElement(Loading, { color: "currentColor", size: 100 }), text ? /* @__PURE__ */ import_react157.default.createElement(Text, { css: { mt: "$10", color: "$on_surface_high" } }, text) : null);
     FullPageProgress_default = FullPageProgress;
   }
 });
 
 // src/Prebuilt/components/Preview/PreviewForm.tsx
-var import_react158, import_react_use28, import_join_form3, import_react_sdk80, import_react_icons77, PreviewForm, Form, PreviewForm_default;
+var import_react158, import_react_use29, import_join_form3, import_react_sdk80, import_react_icons77, PreviewForm, Form, PreviewForm_default;
 var init_PreviewForm = __esm({
   "src/Prebuilt/components/Preview/PreviewForm.tsx"() {
     "use strict";
     init_define_process_env();
     import_react158 = __toESM(require("react"));
-    import_react_use28 = require("react-use");
+    import_react_use29 = require("react-use");
     import_join_form3 = require("@100mslive/types-prebuilt/elements/join_form");
     import_react_sdk80 = require("@100mslive/react-sdk");
     import_react_icons77 = require("@100mslive/react-icons");
@@ -28709,7 +28721,7 @@ var init_PreviewForm = __esm({
       const formSubmit = (e) => {
         e.preventDefault();
       };
-      const isMobile = (0, import_react_use28.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use29.useMedia)(config.media.md);
       const { isHLSRunning, isRTMPRunning, isHLSRecordingOn, isBrowserRecordingOn } = (0, import_react_sdk80.useRecordingStreaming)();
       const layout = useRoomLayout();
       const { join_form: joinForm = {} } = ((_c = (_b7 = (_a8 = layout == null ? void 0 : layout.screens) == null ? void 0 : _a8.preview) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements) || {};
@@ -28762,13 +28774,13 @@ var init_PreviewForm = __esm({
 });
 
 // src/Prebuilt/components/Preview/PreviewJoin.tsx
-var import_react159, import_react_use29, import_react_sdk81, import_react_icons78, getParticipantChipContent, useLocalTileAspectRatio, PreviewJoin, Container4, PreviewTile, PreviewControls, PreviewSettings, PreviewJoin_default;
+var import_react159, import_react_use30, import_react_sdk81, import_react_icons78, getParticipantChipContent, useLocalTileAspectRatio, PreviewJoin, Container4, PreviewTile, PreviewControls, PreviewSettings, PreviewJoin_default;
 var init_PreviewJoin = __esm({
   "src/Prebuilt/components/Preview/PreviewJoin.tsx"() {
     "use strict";
     init_define_process_env();
     import_react159 = __toESM(require("react"));
-    import_react_use29 = require("react-use");
+    import_react_use30 = require("react-use");
     import_react_sdk81 = require("@100mslive/react-sdk");
     import_react_icons78 = require("@100mslive/react-icons");
     init_src();
@@ -28799,7 +28811,7 @@ var init_PreviewJoin = __esm({
     useLocalTileAspectRatio = () => {
       const localPeer = (0, import_react_sdk81.useHMSStore)(import_react_sdk81.selectLocalPeer);
       const videoTrack = (0, import_react_sdk81.useHMSStore)((0, import_react_sdk81.selectVideoTrackByID)(localPeer == null ? void 0 : localPeer.videoTrack));
-      const isMobile = (0, import_react_use29.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use30.useMedia)(config.media.md);
       let aspectRatio = 0;
       if ((videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height)) {
         aspectRatio = videoTrack.width / videoTrack.height;
@@ -28824,6 +28836,7 @@ var init_PreviewJoin = __esm({
       const [previewError, setPreviewError] = (0, import_react159.useState)(false);
       const { endpoints } = useHMSPrebuiltContext();
       const { peerCount } = (0, import_react_sdk81.useParticipants)();
+      const loadingEffects = (0, import_react_sdk81.useHMSStore)((0, import_react_sdk81.selectAppData)(APP_DATA.loadingEffects));
       const { enableJoin, preview, join } = (0, import_react_sdk81.usePreviewJoin)({
         name,
         token: authToken,
@@ -28893,7 +28906,7 @@ var init_PreviewJoin = __esm({
           name,
           disabled: !!initialName,
           onChange: setName,
-          enableJoin,
+          enableJoin: enableJoin && !loadingEffects,
           onJoin: savePreferenceAndJoin,
           cannotPublishVideo: !toggleVideo,
           cannotPublishAudio: !toggleAudio
@@ -28915,7 +28928,7 @@ var init_PreviewJoin = __esm({
       const track = (0, import_react_sdk81.useHMSStore)(trackSelector);
       const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;
       const aspectRatio = useLocalTileAspectRatio();
-      const [ref, { width: calculatedWidth, height: calculatedHeight }] = (0, import_react_use29.useMeasure)();
+      const [ref, { width: calculatedWidth, height: calculatedHeight }] = (0, import_react_use30.useMeasure)();
       const [avatarSize, attribBoxSize] = (0, import_react159.useMemo)(
         () => calculateAvatarAndAttribBoxSize(calculatedWidth, calculatedHeight),
         [calculatedWidth, calculatedHeight]
@@ -28953,7 +28966,7 @@ var init_PreviewJoin = __esm({
       );
     };
     PreviewControls = ({ hideSettings, vbEnabled }) => {
-      const isMobile = (0, import_react_use29.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use30.useMedia)(config.media.md);
       return /* @__PURE__ */ import_react159.default.createElement(
         Flex,
         {
@@ -28976,13 +28989,13 @@ var init_PreviewJoin = __esm({
 });
 
 // src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx
-var import_react160, import_react_use30, RequestPrompt, RequestActions;
+var import_react160, import_react_use31, RequestPrompt, RequestActions;
 var init_RequestPrompt = __esm({
   "src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx"() {
     "use strict";
     init_define_process_env();
     import_react160 = __toESM(require("react"));
-    import_react_use30 = require("react-use");
+    import_react_use31 = require("react-use");
     init_src();
     init_Sheet2();
     RequestPrompt = ({
@@ -28994,7 +29007,7 @@ var init_RequestPrompt = __esm({
       onAction,
       disableActions = false
     }) => {
-      const isMobile = (0, import_react_use30.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use31.useMedia)(config.media.md);
       if (isMobile) {
         return /* @__PURE__ */ import_react160.default.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ import_react160.default.createElement(Sheet.Content, { css: { py: "$8" } }, /* @__PURE__ */ import_react160.default.createElement(Text, { css: { fontWeight: "$semiBold", c: "$on_surface_high", "@md": { px: "$8" } } }, title), body, /* @__PURE__ */ import_react160.default.createElement(RequestActions, { actionText, onAction, disabled: disableActions })));
       }
@@ -29120,14 +29133,14 @@ var init_useVideoTileLayout = __esm({
 });
 
 // src/Prebuilt/components/InsetTile.tsx
-var import_react163, import_react_draggable, import_react_use31, import_react_sdk83, import_react_icons79, MinimisedTile, insetHeightPx, insetMaxWidthPx, defaultMobileAspectRatio, desktopAspectRatio, InsetTile;
+var import_react163, import_react_draggable, import_react_use32, import_react_sdk83, import_react_icons79, MinimisedTile, insetHeightPx, insetMaxWidthPx, defaultMobileAspectRatio, desktopAspectRatio, InsetTile;
 var init_InsetTile = __esm({
   "src/Prebuilt/components/InsetTile.tsx"() {
     "use strict";
     init_define_process_env();
     import_react163 = __toESM(require("react"));
     import_react_draggable = __toESM(require("react-draggable"));
-    import_react_use31 = require("react-use");
+    import_react_use32 = require("react-use");
     import_react_sdk83 = require("@100mslive/react-sdk");
     import_react_icons79 = require("@100mslive/react-icons");
     init_Layout();
@@ -29155,8 +29168,8 @@ var init_InsetTile = __esm({
     defaultMobileAspectRatio = 9 / 16;
     desktopAspectRatio = 1 / defaultMobileAspectRatio;
     InsetTile = ({ peerId }) => {
-      const isMobile = (0, import_react_use31.useMedia)(config.media.md);
-      const isLandscape = (0, import_react_use31.useMedia)(config.media.ls);
+      const isMobile = (0, import_react_use32.useMedia)(config.media.md);
+      const isLandscape = (0, import_react_use32.useMedia)(config.media.ls);
       const selector = peerId ? (0, import_react_sdk83.selectPeerByID)(peerId) : import_react_sdk83.selectLocalPeer;
       const peer = (0, import_react_sdk83.useHMSStore)(selector);
       const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
@@ -29332,13 +29345,13 @@ var init_Grid = __esm({
 });
 
 // src/Prebuilt/components/hooks/useTileLayout.tsx
-var import_react166, import_react_use32, import_react_sdk84, aspectRatioConfig, usePagesWithTiles, useTileLayout;
+var import_react166, import_react_use33, import_react_sdk84, aspectRatioConfig, usePagesWithTiles, useTileLayout;
 var init_useTileLayout = __esm({
   "src/Prebuilt/components/hooks/useTileLayout.tsx"() {
     "use strict";
     init_define_process_env();
     import_react166 = require("react");
-    import_react_use32 = require("react-use");
+    import_react_use33 = require("react-use");
     import_react_sdk84 = require("@100mslive/react-sdk");
     init_Theme();
     aspectRatioConfig = { default: [1 / 1, 4 / 3, 16 / 9], mobile: [1 / 1, 3 / 4, 9 / 16] };
@@ -29370,8 +29383,8 @@ var init_useTileLayout = __esm({
       edgeToEdge = false
     }) => {
       const vanillaStore = (0, import_react_sdk84.useHMSVanillaStore)();
-      const [ref, { width, height }] = (0, import_react_use32.useMeasure)();
-      const isMobile = (0, import_react_use32.useMedia)(config.media.lg);
+      const [ref, { width, height }] = (0, import_react_use33.useMeasure)();
+      const isMobile = (0, import_react_use33.useMedia)(config.media.lg);
       const [pagesWithTiles, setPagesWithTiles] = (0, import_react166.useState)([]);
       (0, import_react166.useEffect)(() => {
         if (width === 0 || height === 0) {
@@ -29443,7 +29456,7 @@ var init_useTileLayout = __esm({
 function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }) {
   var _a8;
   const localPeer = (0, import_react_sdk85.useHMSStore)(import_react_sdk85.selectLocalPeer);
-  const isMobile = (0, import_react_use33.useMedia)(config.media.md);
+  const isMobile = (0, import_react_use34.useMedia)(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
   let pageList = usePagesWithTiles({
@@ -29484,13 +29497,13 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
     }
   ), isInsetEnabled && pageList.length > 0 && pageList[0][0].peer.id !== (localPeer == null ? void 0 : localPeer.id) && /* @__PURE__ */ import_react167.default.createElement(InsetTile, null));
 }
-var import_react167, import_react_use33, import_react_sdk85;
+var import_react167, import_react_use34, import_react_sdk85;
 var init_EqualProminence = __esm({
   "src/Prebuilt/components/VideoLayouts/EqualProminence.tsx"() {
     "use strict";
     init_define_process_env();
     import_react167 = __toESM(require("react"));
-    import_react_use33 = require("react-use");
+    import_react_use34 = require("react-use");
     import_react_sdk85 = require("@100mslive/react-sdk");
     init_Layout();
     init_Theme();
@@ -29592,13 +29605,13 @@ var init_ProminenceLayout = __esm({
 });
 
 // src/Prebuilt/components/SecondaryTiles.tsx
-var import_react169, import_react_use34, import_react_sdk86, SecondaryTiles;
+var import_react169, import_react_use35, import_react_sdk86, SecondaryTiles;
 var init_SecondaryTiles = __esm({
   "src/Prebuilt/components/SecondaryTiles.tsx"() {
     "use strict";
     init_define_process_env();
     import_react169 = __toESM(require("react"));
-    import_react_use34 = require("react-use");
+    import_react_use35 = require("react-use");
     import_react_sdk86 = require("@100mslive/react-sdk");
     init_ProminenceLayout();
     init_Theme();
@@ -29607,7 +29620,7 @@ var init_SecondaryTiles = __esm({
     init_constants();
     SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge, hasSidebar }) => {
       var _a8, _b7;
-      const isMobile = (0, import_react_use34.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use35.useMedia)(config.media.md);
       const maxTileCount = isMobile ? 2 : 4;
       const [page, setPage] = (0, import_react169.useState)(0);
       const pinnedTrackId = (0, import_react_sdk86.useHMSStore)((0, import_react_sdk86.selectAppData)(APP_DATA.pinnedTrackId));
@@ -29718,7 +29731,7 @@ function RoleProminence({
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
   const localPeer = (0, import_react_sdk87.useHMSStore)(import_react_sdk87.selectLocalPeer);
   const layoutMode = useUISettings(UI_SETTINGS.layoutMode);
-  const isMobile = (0, import_react_use35.useMedia)(config.media.md);
+  const isMobile = (0, import_react_use36.useMedia)(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? 4 : maxTileCount;
   const pageList = usePagesWithTiles({
@@ -29756,13 +29769,13 @@ function RoleProminence({
     }
   ), isInsetEnabled && localPeer && prominentPeers.length > 0 && !prominentPeers.includes(localPeer) && /* @__PURE__ */ import_react171.default.createElement(InsetTile, null));
 }
-var import_react171, import_react_use35, import_react_sdk87;
+var import_react171, import_react_use36, import_react_sdk87;
 var init_RoleProminence = __esm({
   "src/Prebuilt/components/VideoLayouts/RoleProminence.tsx"() {
     "use strict";
     init_define_process_env();
     import_react171 = __toESM(require("react"));
-    import_react_use35 = require("react-use");
+    import_react_use36 = require("react-use");
     import_react_sdk87 = require("@100mslive/react-sdk");
     init_Theme();
     init_InsetTile();
@@ -29941,13 +29954,13 @@ var init_ScreenshareDisplay = __esm({
 });
 
 // src/Prebuilt/components/ScreenshareTile.tsx
-var import_react174, import_react_use36, import_screenfull2, import_react_sdk89, import_react_icons83, labelStyles, Tile2, ScreenshareTile, ScreenshareTile_default;
+var import_react174, import_react_use37, import_screenfull2, import_react_sdk89, import_react_icons83, labelStyles, Tile2, ScreenshareTile, ScreenshareTile_default;
 var init_ScreenshareTile = __esm({
   "src/Prebuilt/components/ScreenshareTile.tsx"() {
     "use strict";
     init_define_process_env();
     import_react174 = __toESM(require("react"));
-    import_react_use36 = require("react-use");
+    import_react_use37 = require("react-use");
     import_screenfull2 = __toESM(require("screenfull"));
     import_react_sdk89 = require("@100mslive/react-sdk");
     import_react_icons83 = require("@100mslive/react-icons");
@@ -29977,11 +29990,11 @@ var init_ScreenshareTile = __esm({
       const peer = (0, import_react_sdk89.useHMSStore)((0, import_react_sdk89.selectPeerByID)(peerId));
       const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
       const [isMouseHovered, setIsMouseHovered] = (0, import_react174.useState)(false);
-      const isMobile = (0, import_react_use36.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use37.useMedia)(config.media.md);
       const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
       const fullscreenRef = (0, import_react174.useRef)(null);
       const [fullscreen, setFullscreen] = (0, import_react174.useState)(false);
-      const isFullscreen = (0, import_react_use36.useFullscreen)(fullscreenRef, fullscreen, {
+      const isFullscreen = (0, import_react_use37.useFullscreen)(fullscreenRef, fullscreen, {
         onClose: () => setFullscreen(false)
       });
       const isFullScreenSupported = import_screenfull2.default.isEnabled;
@@ -30064,13 +30077,13 @@ var init_ScreenshareTile = __esm({
 });
 
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
-var import_react175, import_react_use37, import_react_sdk90, ScreenshareLayout;
+var import_react175, import_react_use38, import_react_sdk90, ScreenshareLayout;
 var init_ScreenshareLayout = __esm({
   "src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx"() {
     "use strict";
     init_define_process_env();
     import_react175 = __toESM(require("react"));
-    import_react_use37 = require("react-use");
+    import_react_use38 = require("react-use");
     import_react_sdk90 = require("@100mslive/react-sdk");
     init_Theme();
     init_InsetTile();
@@ -30088,7 +30101,7 @@ var init_ScreenshareLayout = __esm({
       const [page, setPage] = (0, import_react175.useState)(0);
       const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
       const activeSharePeer = peersSharing[page];
-      const isMobile = (0, import_react_use37.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use38.useMedia)(config.media.md);
       const hasSidebar = !isMobile && layoutMode === LayoutMode.SIDEBAR;
       const secondaryPeers = (0, import_react175.useMemo)(() => {
         if (layoutMode === LayoutMode.SPOTLIGHT) {
@@ -30134,13 +30147,13 @@ var init_ScreenshareLayout = __esm({
 });
 
 // src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx
-var import_react176, import_react_use38, import_react_sdk91, WhiteboardEmbed, WhiteboardLayout;
+var import_react176, import_react_use39, import_react_sdk91, WhiteboardEmbed, WhiteboardLayout;
 var init_WhiteboardLayout = __esm({
   "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx"() {
     "use strict";
     init_define_process_env();
     import_react176 = __toESM(require("react"));
-    import_react_use38 = require("react-use");
+    import_react_use39 = require("react-use");
     import_react_sdk91 = require("@100mslive/react-sdk");
     init_Layout();
     init_Theme();
@@ -30151,7 +30164,7 @@ var init_WhiteboardLayout = __esm({
     init_useUISettings();
     init_constants();
     WhiteboardEmbed = () => {
-      const isMobile = (0, import_react_use38.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use39.useMedia)(config.media.md);
       const { iframeRef } = (0, import_react_sdk91.useWhiteboard)(isMobile);
       return /* @__PURE__ */ import_react176.default.createElement(
         Box,
@@ -30187,7 +30200,7 @@ var init_WhiteboardLayout = __esm({
       const whiteboard = (0, import_react_sdk91.useHMSStore)(import_react_sdk91.selectWhiteboard);
       const whiteboardOwner = (0, import_react_sdk91.useHMSStore)((0, import_react_sdk91.selectPeerByCondition)((peer) => peer.customerUserId === (whiteboard == null ? void 0 : whiteboard.owner)));
       const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
-      const isMobile = (0, import_react_use38.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use39.useMedia)(config.media.md);
       const hasSidebar = !isMobile && layoutMode === LayoutMode.SIDEBAR;
       const secondaryPeers = (0, import_react176.useMemo)(() => {
         if (layoutMode === LayoutMode.SPOTLIGHT) {
@@ -30931,13 +30944,13 @@ var init_SeekControl = __esm({
 });
 
 // src/Prebuilt/components/HMSVideo/PlayPauseSeekControls.tsx
-var import_react187, import_react_use39, import_react_icons87, PlayPauseSeekControls, PlayPauseSeekOverlayControls;
+var import_react187, import_react_use40, import_react_icons87, PlayPauseSeekControls, PlayPauseSeekOverlayControls;
 var init_PlayPauseSeekControls = __esm({
   "src/Prebuilt/components/HMSVideo/PlayPauseSeekControls.tsx"() {
     "use strict";
     init_define_process_env();
     import_react187 = __toESM(require("react"));
-    import_react_use39 = require("react-use");
+    import_react_use40 = require("react-use");
     import_react_icons87 = require("@100mslive/react-icons");
     init_Layout();
     init_Text2();
@@ -30976,7 +30989,7 @@ var init_PlayPauseSeekControls = __esm({
       showControls,
       hoverControlsVisible
     }) => {
-      const isMobile = (0, import_react_use39.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use40.useMedia)(config.media.md);
       const isLandscape = useIsLandscape();
       if (!isMobile && !isLandscape) {
         return /* @__PURE__ */ import_react187.default.createElement(import_react187.default.Fragment, null, /* @__PURE__ */ import_react187.default.createElement(
@@ -31403,7 +31416,7 @@ function HLSAutoplayBlockedPrompt({
   unblockAutoPlay
 }) {
   const isLandscape = useIsLandscape();
-  const isMobile = (0, import_react_use40.useMedia)(config.media.md);
+  const isMobile = (0, import_react_use41.useMedia)(config.media.md);
   if ((isMobile || isLandscape) && open) {
     return /* @__PURE__ */ import_react192.default.createElement(
       IconButton,
@@ -31455,13 +31468,13 @@ function HLSAutoplayBlockedPrompt({
     )))
   );
 }
-var import_react192, import_react_use40, import_react_icons90;
+var import_react192, import_react_use41, import_react_icons90;
 var init_HLSAutoplayBlockedPrompt = __esm({
   "src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx"() {
     "use strict";
     init_define_process_env();
     import_react192 = __toESM(require("react"));
-    import_react_use40 = require("react-use");
+    import_react_use41 = require("react-use");
     import_react_icons90 = require("@100mslive/react-icons");
     init_src();
     init_DialogContent2();
@@ -31496,7 +31509,7 @@ function HLSQualitySelector({
   isAuto,
   containerRef
 }) {
-  const isMobile = (0, import_react_use41.useMedia)(config.media.md);
+  const isMobile = (0, import_react_use42.useMedia)(config.media.md);
   const isLandscape = useIsLandscape();
   if (layers.length === 0) {
     return null;
@@ -31689,13 +31702,13 @@ function HLSQualitySelector({
     )
   )));
 }
-var import_react194, import_react_use41, import_react_icons92, getQualityText, getBitrateText;
+var import_react194, import_react_use42, import_react_icons92, getQualityText, getBitrateText;
 var init_HLSQualitySelector = __esm({
   "src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx"() {
     "use strict";
     init_define_process_env();
     import_react194 = __toESM(require("react"));
-    import_react_use41 = require("react-use");
+    import_react_use42 = require("react-use");
     import_react_icons92 = require("@100mslive/react-icons");
     init_src();
     init_Sheet2();
@@ -31782,13 +31795,13 @@ var HLSView_exports = {};
 __export(HLSView_exports, {
   default: () => HLSView_default
 });
-var import_react196, import_react_use42, import_hls_player3, import_screenfull3, import_ts_pattern12, import_react_sdk97, import_react_icons94, hlsPlayer, toastMap, ToggleChat, HLSView, HLSView_default;
+var import_react196, import_react_use43, import_hls_player3, import_screenfull3, import_ts_pattern12, import_react_sdk97, import_react_icons94, hlsPlayer, toastMap, ToggleChat, HLSView, HLSView_default;
 var init_HLSView = __esm({
   "src/Prebuilt/layouts/HLSView.jsx"() {
     "use strict";
     init_define_process_env();
     import_react196 = __toESM(require("react"));
-    import_react_use42 = require("react-use");
+    import_react_use43 = require("react-use");
     import_hls_player3 = require("@100mslive/hls-player");
     import_screenfull3 = __toESM(require("screenfull"));
     import_ts_pattern12 = require("ts-pattern");
@@ -31822,7 +31835,7 @@ var init_HLSView = __esm({
       const sidepane = (0, import_react_sdk97.useHMSStore)((0, import_react_sdk97.selectAppData)(APP_DATA.sidePane));
       const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
       const showChat = !!(elements == null ? void 0 : elements.chat);
-      const isMobile = (0, import_react_use42.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use43.useMedia)(config.media.md);
       const hmsActions = (0, import_react_sdk97.useHMSActions)();
       (0, import_react196.useEffect)(() => {
         (0, import_ts_pattern12.match)({ sidepane, isMobile, showChat, isFullScreen }).with({ isFullScreen: true }, () => {
@@ -31861,8 +31874,8 @@ var init_HLSView = __esm({
         seekBackward: false
       });
       const [isPaused, setIsPaused] = (0, import_react196.useState)(false);
-      const [show, toggle] = (0, import_react_use42.useToggle)(false);
-      const lastHlsUrl = (0, import_react_use42.usePrevious)(hlsUrl);
+      const [show, toggle] = (0, import_react_use43.useToggle)(false);
+      const lastHlsUrl = (0, import_react_use43.usePrevious)(hlsUrl);
       const vanillaStore = (0, import_react_sdk97.useHMSVanillaStore)();
       const [controlsVisible, setControlsVisible] = (0, import_react196.useState)(true);
       const [isUserSelectedAuto, setIsUserSelectedAuto] = (0, import_react196.useState)(true);
@@ -31873,9 +31886,9 @@ var init_HLSView = __esm({
       const isFullScreenSupported = import_screenfull3.default.isEnabled;
       const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
       const showChat = !!(elements == null ? void 0 : elements.chat);
-      const isMobile = (0, import_react_use42.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use43.useMedia)(config.media.md);
       const isLandscape = useIsLandscape();
-      const isFullScreen = (0, import_react_use42.useFullscreen)(hlsViewRef, show, {
+      const isFullScreen = (0, import_react_use43.useFullscreen)(hlsViewRef, show, {
         onClose: () => toggle(false)
       });
       const [showLoader, setShowLoader] = (0, import_react196.useState)(false);
@@ -32521,13 +32534,13 @@ var init_VideoStreamingSection = __esm({
 });
 
 // src/Prebuilt/components/Header/RoomDetailsHeader.tsx
-var import_react198, import_react_use43, import_react_icons95, RoomDetailsHeader;
+var import_react198, import_react_use44, import_react_icons95, RoomDetailsHeader;
 var init_RoomDetailsHeader = __esm({
   "src/Prebuilt/components/Header/RoomDetailsHeader.tsx"() {
     "use strict";
     init_define_process_env();
     import_react198 = __toESM(require("react"));
-    import_react_use43 = require("react-use");
+    import_react_use44 = require("react-use");
     import_react_icons95 = require("@100mslive/react-icons");
     init_Layout();
     init_Text2();
@@ -32538,7 +32551,7 @@ var init_RoomDetailsHeader = __esm({
     init_constants();
     RoomDetailsHeader = () => {
       const { title, description } = useRoomLayoutHeader();
-      const isMobile = (0, import_react_use43.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use44.useMedia)(config.media.md);
       const clipLength = 30;
       const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
       const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
@@ -32716,13 +32729,13 @@ var init_common2 = __esm({
 });
 
 // src/Prebuilt/components/Header/Header.tsx
-var import_react200, import_react_use44, import_react_sdk100, Header2;
+var import_react200, import_react_use45, import_react_sdk100, Header2;
 var init_Header = __esm({
   "src/Prebuilt/components/Header/Header.tsx"() {
     "use strict";
     init_define_process_env();
     import_react200 = __toESM(require("react"));
-    import_react_use44 = require("react-use");
+    import_react_use45 = require("react-use");
     import_react_sdk100 = require("@100mslive/react-sdk");
     init_src();
     init_HeaderComponents();
@@ -32731,7 +32744,7 @@ var init_Header = __esm({
     init_common2();
     Header2 = () => {
       const roomState = (0, import_react_sdk100.useHMSStore)(import_react_sdk100.selectRoomState);
-      const isMobile = (0, import_react_use44.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use45.useMedia)(config.media.md);
       if (roomState !== import_react_sdk100.HMSRoomState.Connected) {
         return /* @__PURE__ */ import_react200.default.createElement(import_react200.default.Fragment, null);
       }
@@ -33269,13 +33282,13 @@ var init_useRedirectToLeave = __esm({
 });
 
 // src/Prebuilt/AppStateContext.tsx
-var import_react208, import_react_use45, import_ts_pattern14, import_react_sdk105, AppStateContext, useHMSAppStateContext, useAppStateManager;
+var import_react208, import_react_use46, import_ts_pattern14, import_react_sdk105, AppStateContext, useHMSAppStateContext, useAppStateManager;
 var init_AppStateContext = __esm({
   "src/Prebuilt/AppStateContext.tsx"() {
     "use strict";
     init_define_process_env();
     import_react208 = __toESM(require("react"));
-    import_react_use45 = require("react-use");
+    import_react_use46 = require("react-use");
     import_ts_pattern14 = require("ts-pattern");
     import_react_sdk105 = require("@100mslive/react-sdk");
     init_VBHandler();
@@ -33299,7 +33312,7 @@ var init_AppStateContext = __esm({
       const roomLayout = useRoomLayout();
       const [activeState, setActiveState] = import_react208.default.useState();
       const roomState = (0, import_react_sdk105.useHMSStore)(import_react_sdk105.selectRoomState);
-      const prevRoomState = (0, import_react_use45.usePreviousDistinct)(roomState);
+      const prevRoomState = (0, import_react_use46.usePreviousDistinct)(roomState);
       const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
       const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
       const { redirectToLeave } = useRedirectToLeave();
@@ -33396,13 +33409,13 @@ var init_LeaveScreen = __esm({
 });
 
 // src/Prebuilt/components/MwebLandscapePrompt.tsx
-var import_react210, import_react_use46, import_ts_pattern15, import_react_icons99, MwebLandscapePrompt;
+var import_react210, import_react_use47, import_ts_pattern15, import_react_icons99, MwebLandscapePrompt;
 var init_MwebLandscapePrompt = __esm({
   "src/Prebuilt/components/MwebLandscapePrompt.tsx"() {
     "use strict";
     init_define_process_env();
     import_react210 = __toESM(require("react"));
-    import_react_use46 = require("react-use");
+    import_react_use47 = require("react-use");
     import_ts_pattern15 = require("ts-pattern");
     import_react_icons99 = require("@100mslive/react-icons");
     init_Button2();
@@ -33414,7 +33427,7 @@ var init_MwebLandscapePrompt = __esm({
     init_utils2();
     MwebLandscapePrompt = () => {
       const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = (0, import_react210.useState)(false);
-      const isLandscape = (0, import_react_use46.useMedia)(config.media.ls);
+      const isLandscape = (0, import_react_use47.useMedia)(config.media.ls);
       const isLandscapeHLSStream = useLandscapeHLSStream();
       (0, import_react210.useEffect)(() => {
         var _a8;
@@ -33591,27 +33604,6 @@ var init_ToastConfig = __esm({
       return /* @__PURE__ */ import_react213.default.createElement(Button, { outlined: true, as: "div", variant: "standard", css: { w: "max-content" }, onClick: onClickHandler, ref }, isSingleHandRaise ? bring_to_stage_label : "View");
     });
     ToastConfig = {
-      PEER_LIST: {
-        single: function(notification) {
-          var _a8, _b7;
-          if (notification.data.length === 1) {
-            return {
-              title: `${(_a8 = notification.data[0]) == null ? void 0 : _a8.name} joined`,
-              icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.PeopleAddIcon, null)
-            };
-          }
-          return {
-            title: `${(_b7 = notification.data[notification.data.length - 1]) == null ? void 0 : _b7.name} and ${notification.data.length - 1} others joined`,
-            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.PeopleAddIcon, null)
-          };
-        },
-        multiple: (notifications) => {
-          return {
-            title: `${notifications[0].data.name} and ${notifications.length - 1} others joined`,
-            icon: /* @__PURE__ */ import_react213.default.createElement(import_react_icons101.PeopleAddIcon, null)
-          };
-        }
-      },
       PEER_JOINED: {
         single: function(notification) {
           var _a8;
@@ -33885,11 +33877,7 @@ var init_PeerNotifications = __esm({
     init_ToastBatcher();
     init_useUISettings();
     init_constants();
-    notificationTypes = [
-      import_react_sdk111.HMSNotificationTypes.PEER_LIST,
-      import_react_sdk111.HMSNotificationTypes.PEER_JOINED,
-      import_react_sdk111.HMSNotificationTypes.PEER_LEFT
-    ];
+    notificationTypes = [import_react_sdk111.HMSNotificationTypes.PEER_JOINED, import_react_sdk111.HMSNotificationTypes.PEER_LEFT];
     PeerNotifications = () => {
       const notification = (0, import_react_sdk111.useHMSNotifications)(notificationTypes);
       const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
@@ -33901,11 +33889,6 @@ var init_PeerNotifications = __esm({
         }
         console.debug(`[${notification.type}]`, notification);
         switch (notification.type) {
-          case import_react_sdk111.HMSNotificationTypes.PEER_LIST:
-            if (!isPeerJoinSubscribed || notification.data.length === 0) {
-              return;
-            }
-            break;
           case import_react_sdk111.HMSNotificationTypes.PEER_JOINED:
             if (!isPeerJoinSubscribed) {
               return;
@@ -33950,7 +33933,7 @@ function PermissionErrorModal() {
   const notification = (0, import_react_sdk112.useHMSNotifications)(import_react_sdk112.HMSNotificationTypes.ERROR);
   const [deviceType, setDeviceType] = (0, import_react217.useState)("");
   const [isSystemError, setIsSystemError] = (0, import_react217.useState)(false);
-  const isMobile = (0, import_react_use47.useMedia)(config.media.md);
+  const isMobile = (0, import_react_use48.useMedia)(config.media.md);
   (0, import_react217.useEffect)(() => {
     var _a8, _b7, _c, _d, _e;
     if (!notification || ((_a8 = notification.data) == null ? void 0 : _a8.code) !== 3001 && ((_b7 = notification.data) == null ? void 0 : _b7.code) !== 3011 || ((_c = notification.data) == null ? void 0 : _c.code) === 3001 && ((_d = notification.data) == null ? void 0 : _d.message.includes("screen"))) {
@@ -34006,13 +33989,13 @@ function PermissionErrorModal() {
     !isMobile ? /* @__PURE__ */ import_react217.default.createElement(Flex, { justify: "end", css: { w: "100%" } }, /* @__PURE__ */ import_react217.default.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType("") }, "Dismiss")) : null
   ))) : null;
 }
-var import_react217, import_react_use47, import_react_sdk112;
+var import_react217, import_react_use48, import_react_sdk112;
 var init_PermissionErrorModal = __esm({
   "src/Prebuilt/components/Notifications/PermissionErrorModal.tsx"() {
     "use strict";
     init_define_process_env();
     import_react217 = __toESM(require("react"));
-    import_react_use47 = require("react-use");
+    import_react_use48 = require("react-use");
     import_react_sdk112 = require("@100mslive/react-sdk");
     init_src();
     init_android_perm_1();
@@ -34397,13 +34380,13 @@ var init_Notifications2 = __esm({
 });
 
 // src/Prebuilt/components/Preview/PreviewScreen.tsx
-var import_react223, import_react_use48, PreviewScreen;
+var import_react223, import_react_use49, PreviewScreen;
 var init_PreviewScreen = __esm({
   "src/Prebuilt/components/Preview/PreviewScreen.tsx"() {
     "use strict";
     init_define_process_env();
     import_react223 = __toESM(require("react"));
-    import_react_use48 = require("react-use");
+    import_react_use49 = require("react-use");
     init_src();
     init_AppContext();
     init_roomLayoutProvider();
@@ -34416,7 +34399,7 @@ var init_PreviewScreen = __esm({
       var _a8, _b7, _c;
       const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
       const skipPreview = !isPreviewScreenEnabled;
-      const previewAsRole = (0, import_react_use48.useSearchParam)(QUERY_PARAM_PREVIEW_AS_ROLE);
+      const previewAsRole = (0, import_react_use49.useSearchParam)(QUERY_PARAM_PREVIEW_AS_ROLE);
       const { userName } = useHMSPrebuiltContext();
       const initialName = userName || (skipPreview ? "Beam" : "");
       const authToken = useAuthToken();
@@ -34557,7 +34540,7 @@ function FlyingEmoji() {
   const localPeerId = (0, import_react_sdk120.useHMSStore)(import_react_sdk120.selectLocalPeerID);
   const vanillaStore = (0, import_react_sdk120.useHMSVanillaStore)();
   const [emojis, setEmojis] = (0, import_react228.useState)([]);
-  const isMobile = (0, import_react_use49.useMedia)(config.media.md);
+  const isMobile = (0, import_react_use50.useMedia)(config.media.md);
   const startingPoints = (0, import_react228.useMemo)(() => getStartingPoints(isMobile), [isMobile]);
   const showFlyingEmoji = (0, import_react228.useCallback)(
     ({ emojiId, senderId }) => {
@@ -34649,13 +34632,13 @@ function FlyingEmoji() {
     })
   );
 }
-var import_react228, import_react_use49, import_react_sdk120, emojiCount, flyAndFade, wiggleLeftRight, wiggleRightLeft, getStartingPoints;
+var import_react228, import_react_use50, import_react_sdk120, emojiCount, flyAndFade, wiggleLeftRight, wiggleRightLeft, getStartingPoints;
 var init_FlyingEmoji = __esm({
   "src/Prebuilt/plugins/FlyingEmoji.jsx"() {
     "use strict";
     init_define_process_env();
     import_react228 = __toESM(require("react"));
-    import_react_use49 = require("react-use");
+    import_react_use50 = require("react-use");
     import_react_sdk120 = require("@100mslive/react-sdk");
     init_Layout();
     init_Text2();