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

package/dist/{chunk-NDLMRKFR.js → chunk-IDAPJGWC.js}

@@ -106,7 +106,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" };
   }
 });
 
@@ -9158,7 +9158,8 @@ var APP_DATA = {
   disableNotifications: "disableNotifications",
   pollState: "pollState",
   background: "background",
-  sheet: "sheet"
+  sheet: "sheet",
+  loadingEffects: "loadingEffects"
 };
 var UI_SETTINGS = {
   isAudioOnly: "isAudioOnly",
@@ -11918,7 +11919,7 @@ import {
   HMSReactiveStore,
   HMSRoomProvider,
   selectIsConnectedToRoom as selectIsConnectedToRoom13,
-  useHMSActions as useHMSActions54,
+  useHMSActions as useHMSActions55,
   useHMSStore as useHMSStore97
 } from "@100mslive/react-sdk";
 
@@ -12677,6 +12678,7 @@ var initialAppData = {
   [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]: "",
@@ -12903,10 +12905,10 @@ import React155, { useEffect as useEffect50, useRef as useRef26, useState as use
 import { v4 as uuid3 } from "uuid";
 import {
   HMSRoomState as HMSRoomState7,
-  selectAppData as selectAppData9,
+  selectAppData as selectAppData11,
   selectIsConnectedToRoom as selectIsConnectedToRoom10,
   selectRoomState as selectRoomState7,
-  useHMSActions as useHMSActions47,
+  useHMSActions as useHMSActions48,
   useHMSStore as useHMSStore86
 } from "@100mslive/react-sdk";
 
@@ -14092,7 +14094,9 @@ import {
   selectPeerCount as selectPeerCount2,
   selectPeerMetadata,
   selectPeers,
+  selectRecordingState,
   selectRemotePeers,
+  useHMSActions as useHMSActions8,
   useHMSStore as useHMSStore9,
   useHMSVanillaStore as useHMSVanillaStore4
 } from "@100mslive/react-sdk";
@@ -14179,6 +14183,63 @@ var useKeyboardHandler = (isPaused, hlsPlayer) => {
   );
   return handleKeyEvent;
 };
+var useRecordingHandler = () => {
+  const hmsActions = useHMSActions8();
+  const recordingState = useHMSStore9(selectRecordingState);
+  const [isRecordingLoading, setIsRecordingLoading] = useState11(false);
+  const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
+  useEffect12(() => {
+    if (recordingState.browser.error && recordingStarted) {
+      setRecordingState(false);
+    }
+  }, [recordingStarted, recordingState.browser.error, setRecordingState]);
+  const startRecording = useCallback8(
+    (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
+  };
+};
+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;
+}
 
 // src/Prebuilt/components/EmojiReaction.jsx
 init({ data });
@@ -14239,7 +14300,7 @@ import {
   selectPeersByCondition,
   selectPermissions as selectPermissions4,
   selectRolesMap,
-  useHMSActions as useHMSActions8,
+  useHMSActions as useHMSActions9,
   useHMSStore as useHMSStore13
 } from "@100mslive/react-sdk";
 
@@ -14597,7 +14658,7 @@ var LeaveRoom = ({
     selectPeersByCondition((peer) => streamingPermissionRoles.includes(peer.roleName || ""))
   );
   const hlsState = useHMSStore13(selectHLSState3);
-  const hmsActions = useHMSActions8();
+  const hmsActions = useHMSActions9();
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
   const stopStream = () => __async(void 0, null, function* () {
@@ -14640,7 +14701,7 @@ init_define_process_env();
 import React52, { Fragment as Fragment6, useState as useState23 } from "react";
 import { HMSHLSPlayer } from "@100mslive/hls-player";
 import { match as match4 } from "ts-pattern";
-import { selectAppData as selectAppData3, selectLocalPeerID as selectLocalPeerID4, useHMSActions as useHMSActions15, useHMSStore as useHMSStore21 } from "@100mslive/react-sdk";
+import { selectAppData as selectAppData3, selectLocalPeerID as selectLocalPeerID4, useHMSActions as useHMSActions16, useHMSStore as useHMSStore21 } from "@100mslive/react-sdk";
 import { BrbIcon, CheckIcon as CheckIcon5, HamburgerMenuIcon, InfoIcon as InfoIcon2, PipIcon as PipIcon2, SettingsIcon as SettingsIcon3 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/PIP/index.jsx
@@ -14650,7 +14711,7 @@ import React42 from "react";
 // src/Prebuilt/components/PIP/PIPComponent.jsx
 init_define_process_env();
 import React41, { useCallback as useCallback9, useEffect as useEffect13, useState as useState15 } from "react";
-import { selectPeers as selectPeers2, selectTracksMap, useHMSActions as useHMSActions9, useHMSStore as useHMSStore14, useHMSVanillaStore as useHMSVanillaStore5 } from "@100mslive/react-sdk";
+import { selectPeers as selectPeers2, selectTracksMap, useHMSActions as useHMSActions10, useHMSStore as useHMSStore14, useHMSVanillaStore as useHMSVanillaStore5 } from "@100mslive/react-sdk";
 import { PipIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/PIP/PIPManager.js
@@ -15109,7 +15170,7 @@ var MediaSession = new SetupMediaSession();
 // src/Prebuilt/components/PIP/PIPComponent.jsx
 var PIPComponent = ({ content = null }) => {
   const [isPipOn, setIsPipOn] = useState15(PictureInPicture.isOn());
-  const hmsActions = useHMSActions9();
+  const hmsActions = useHMSActions10();
   const store = useHMSVanillaStore5();
   const onPipToggle = useCallback9(() => {
     if (!isPipOn) {
@@ -15156,7 +15217,7 @@ var PIP = ({ content = null }) => {
 // src/Prebuilt/components/RoleChangeModal.jsx
 init_define_process_env();
 import React43, { forwardRef, useRef as useRef10, useState as useState16 } from "react";
-import { selectPeerByID, useHMSActions as useHMSActions10, useHMSStore as useHMSStore15 } from "@100mslive/react-sdk";
+import { selectPeerByID, useHMSActions as useHMSActions11, useHMSStore as useHMSStore15 } from "@100mslive/react-sdk";
 import { CheckIcon as CheckIcon2, ChevronDownIcon as ChevronDownIcon3, ChevronUpIcon as ChevronUpIcon3 } from "@100mslive/react-icons";
 var PeerName = forwardRef((_a8, ref) => {
   var _b7 = _a8, { children, maxWidth } = _b7, rest = __objRest(_b7, ["children", "maxWidth"]);
@@ -15181,7 +15242,7 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
   const roles = useFilteredRoles();
   const [selectedRole, setRole] = useState16(peer == null ? void 0 : peer.roleName);
   const [requestPermission, setRequestPermission] = useState16(true);
-  const hmsActions = useHMSActions10();
+  const hmsActions = useHMSActions11();
   const [open, setOpen] = useState16(false);
   const selectionBg = useDropdownSelection();
   const [peerNameRef, setPeerNameRef] = useState16();
@@ -15289,7 +15350,7 @@ var RoleChangeModal = ({ peerId, onOpenChange }) => {
 // src/Prebuilt/components/Settings/StartRecording.jsx
 init_define_process_env();
 import React46, { useState as useState18 } from "react";
-import { selectPermissions as selectPermissions5, useHMSActions as useHMSActions11, useHMSStore as useHMSStore16, useRecordingStreaming as useRecordingStreaming5 } from "@100mslive/react-sdk";
+import { selectPermissions as selectPermissions5, useHMSActions as useHMSActions12, useHMSStore as useHMSStore16, useRecordingStreaming as useRecordingStreaming5 } from "@100mslive/react-sdk";
 import { AlertTriangleIcon as AlertTriangleIcon3 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Streaming/ResolutionInput.jsx
@@ -15516,24 +15577,12 @@ var ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css: css2, t
 };
 
 // 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 StartRecording = ({ open, onOpenChange }) => {
   const permissions = useHMSStore16(selectPermissions5);
   const [resolution, setResolution] = useState18(RTMP_RECORD_DEFAULT_RESOLUTION);
-  const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
+  const { startRecording, recordingStarted } = useRecordingHandler();
   const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming5();
-  const hmsActions = useHMSActions11();
+  const hmsActions = useHMSActions12();
   if (!(permissions == null ? void 0 : permissions.browserRecording) || isHLSRunning) {
     return null;
   }
@@ -15588,26 +15637,7 @@ var StartRecording = ({ open, onOpenChange }) => {
       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);
       })
     },
@@ -15806,12 +15836,12 @@ var formatBytes2 = (bytes, unit = "B", decimals = 2) => {
 // src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx
 init_define_process_env();
 import React48, { useCallback as useCallback11, useRef as useRef13, useState as useState20 } from "react";
-import { useHMSActions as useHMSActions12 } from "@100mslive/react-sdk";
+import { useHMSActions as useHMSActions13 } from "@100mslive/react-sdk";
 import { AlertTriangleIcon as AlertTriangleIcon4, ChangeRoleIcon, CheckIcon as CheckIcon4 } from "@100mslive/react-icons";
 var BulkRoleChangeModal = ({ onOpenChange }) => {
   var _a8, _b7;
   const roles = useFilteredRoles();
-  const hmsActions = useHMSActions12();
+  const hmsActions = useHMSActions13();
   const ref = useRef13(null);
   const roleRef = useRef13(null);
   const [selectedBulkRole, setBulkRole] = useState20([]);
@@ -15982,7 +16012,7 @@ init_define_process_env();
 import React51, { useCallback as useCallback13, useState as useState22 } from "react";
 import {
   selectAvailableRoleNames as selectAvailableRoleNames3,
-  useHMSActions as useHMSActions13,
+  useHMSActions as useHMSActions14,
   useHMSStore as useHMSStore19
 } from "@100mslive/react-sdk";
 import { MicOffIcon as MicOffIcon2 } from "@100mslive/react-icons";
@@ -16050,7 +16080,7 @@ var MuteAllModal = ({
   isMobile = false
 }) => {
   const roles = useHMSStore19(selectAvailableRoleNames3);
-  const hmsActions = useHMSActions13();
+  const hmsActions = useHMSActions14();
   const [enabled, setEnabled] = useState22(false);
   const [trackType, setTrackType] = useState22();
   const [selectedRole, setRole] = useState22();
@@ -16090,12 +16120,12 @@ import {
   selectHasPeerHandRaised,
   selectLocalPeerID as selectLocalPeerID3,
   selectPeerMetadata as selectPeerMetadata2,
-  useHMSActions as useHMSActions14,
+  useHMSActions as useHMSActions15,
   useHMSStore as useHMSStore20,
   useHMSVanillaStore as useHMSVanillaStore6
 } from "@100mslive/react-sdk";
 var useMyMetadata = () => {
-  const hmsActions = useHMSActions14();
+  const hmsActions = useHMSActions15();
   const localPeerId = useHMSStore20(selectLocalPeerID3);
   const vanillaStore = useHMSVanillaStore6();
   const metaData = useHMSStore20(selectPeerMetadata2(localPeerId));
@@ -16152,7 +16182,7 @@ var DesktopOptions = ({
   screenType
 }) => {
   const localPeerId = useHMSStore21(selectLocalPeerID4);
-  const hmsActions = useHMSActions15();
+  const hmsActions = useHMSActions16();
   const enablHlsStats = useHMSStore21(selectAppData3(APP_DATA.hlsStats));
   const [openModals, setOpenModals] = useState23(/* @__PURE__ */ new Set());
   const { isBRBOn, toggleBRB } = useMyMetadata();
@@ -16257,7 +16287,7 @@ import {
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled4,
   selectPeerCount as selectPeerCount3,
   selectPermissions as selectPermissions8,
-  useHMSActions as useHMSActions21,
+  useHMSActions as useHMSActions22,
   useHMSStore as useHMSStore29,
   useRecordingStreaming as useRecordingStreaming7
 } from "@100mslive/react-sdk";
@@ -18501,7 +18531,7 @@ var Zi = (a2, e) => {
 };
 var wa = (a2, e) => () => (e || a2((e = { exports: {} }).exports, e), e.exports);
 var 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"] };
 });
 var 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 || {});
 var Da = ((e) => (e.CHAT = "chat", e))(Da || {});
@@ -19577,9 +19607,9 @@ import {
   selectHLSState as selectHLSState4,
   selectIsConnectedToRoom as selectIsConnectedToRoom6,
   selectPermissions as selectPermissions7,
-  selectRecordingState,
+  selectRecordingState as selectRecordingState2,
   selectRoomState as selectRoomState3,
-  useHMSActions as useHMSActions18,
+  useHMSActions as useHMSActions19,
   useHMSStore as useHMSStore25,
   useRecordingStreaming as useRecordingStreaming6
 } from "@100mslive/react-sdk";
@@ -19605,14 +19635,14 @@ import {
   selectAudioPlaylist,
   selectAudioPlaylistTrackByPeerID,
   selectPeerSharingAudioPlaylist,
-  useHMSActions as useHMSActions16,
+  useHMSActions as useHMSActions17,
   useHMSStore as useHMSStore22
 } from "@100mslive/react-sdk";
 var usePlaylistMusic = () => {
   const peer = useHMSStore22(selectPeerSharingAudioPlaylist);
   const track = useHMSStore22(selectAudioPlaylistTrackByPeerID(peer == null ? void 0 : peer.id));
   const selection = useHMSStore22(selectAudioPlaylist.selectedItem);
-  const hmsActions = useHMSActions16();
+  const hmsActions = useHMSActions17();
   const play = useCallback15(
     (selectedId) => __async(void 0, null, function* () {
       yield hmsActions.audioPlaylist.play(selectedId);
@@ -19637,11 +19667,11 @@ import { useCallback as useCallback16 } from "react";
 import {
   selectPeerSharingAudio,
   selectScreenShareAudioByPeerID,
-  useHMSActions as useHMSActions17,
+  useHMSActions as useHMSActions18,
   useHMSStore as useHMSStore23
 } from "@100mslive/react-sdk";
 var useScreenshareAudio = () => {
-  const hmsActions = useHMSActions17();
+  const hmsActions = useHMSActions18();
   const peer = useHMSStore23(selectPeerSharingAudio);
   const track = useHMSStore23(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
   const handleMute = useCallback16(() => {
@@ -19838,7 +19868,7 @@ var RecordingStatus = () => {
   );
 };
 var RecordingPauseStatus = () => {
-  const recording = useHMSStore25(selectRecordingState);
+  const recording = useHMSStore25(selectRecordingState2);
   if (recording.hls && recording.hls.state === ws.PAUSED) {
     return /* @__PURE__ */ React54.createElement(
       Tooltip,
@@ -19867,9 +19897,9 @@ var RecordingPauseStatus = () => {
 var StartRecording2 = () => {
   const permissions = useHMSStore25(selectPermissions7);
   const [open, setOpen] = useState25(false);
-  const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
+  const { startRecording, recordingStarted } = useRecordingHandler();
   const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming6();
-  const hmsActions = useHMSActions18();
+  const hmsActions = useHMSActions19();
   if (!(permissions == null ? void 0 : permissions.browserRecording) || isHLSRunning) {
     return null;
   }
@@ -19905,26 +19935,7 @@ var StartRecording2 = () => {
       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__ */ React54.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React54.createElement(RecordIcon, null),
@@ -20016,7 +20027,7 @@ var ActionTile = {
 init_define_process_env();
 import React57, { useState as useState26 } from "react";
 import { useMedia as useMedia7 } from "react-use";
-import { selectLocalPeerName, useHMSActions as useHMSActions19, useHMSStore as useHMSStore26 } from "@100mslive/react-sdk";
+import { selectLocalPeerName, useHMSActions as useHMSActions20, useHMSStore as useHMSStore26 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/MoreSettings/ChangeNameContent.tsx
 init_define_process_env();
@@ -20131,7 +20142,7 @@ var ChangeNameModal = ({
   openParentSheet = void 0
 }) => {
   const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
-  const hmsActions = useHMSActions19();
+  const hmsActions = useHMSActions20();
   const localPeerName = useHMSStore26(selectLocalPeerName);
   const [currentName, setCurrentName] = useState26(localPeerName);
   const isMobile = useMedia7(config.media.md);
@@ -20173,7 +20184,7 @@ var ChangeNameModal = ({
 // src/Prebuilt/components/AppData/useSheet.ts
 init_define_process_env();
 import { useCallback as useCallback18 } from "react";
-import { selectAppData as selectAppData4, useHMSActions as useHMSActions20, useHMSStore as useHMSStore27, useHMSVanillaStore as useHMSVanillaStore7 } from "@100mslive/react-sdk";
+import { selectAppData as selectAppData4, useHMSActions as useHMSActions21, useHMSStore as useHMSStore27, useHMSVanillaStore as useHMSVanillaStore7 } from "@100mslive/react-sdk";
 var useIsSheetTypeOpen = (sheetType) => {
   if (!sheetType) {
     throw Error("Pass one of the sheet options");
@@ -20181,7 +20192,7 @@ var useIsSheetTypeOpen = (sheetType) => {
   return useHMSStore27(selectAppData4(APP_DATA.sheet)) === sheetType;
 };
 var useSheetToggle = (sheetType) => {
-  const hmsActions = useHMSActions20();
+  const hmsActions = useHMSActions21();
   const vanillaStore = useHMSVanillaStore7();
   const toggleSheet = useCallback18(() => {
     const isOpen = vanillaStore.getState(selectAppData4(APP_DATA.sheet)) === sheetType;
@@ -20223,7 +20234,7 @@ var MwebOptions = ({
   elements,
   screenType
 }) => {
-  const hmsActions = useHMSActions21();
+  const hmsActions = useHMSActions22();
   const permissions = useHMSStore29(selectPermissions8);
   const isConnected = useHMSStore29(selectIsConnectedToRoom7);
   const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming7();
@@ -20232,7 +20243,6 @@ var MwebOptions = ({
   const [openSettingsSheet, setOpenSettingsSheet] = useState28(false);
   const [showEmojiCard, setShowEmojiCard] = useState28(false);
   const [showRecordingOn, setShowRecordingOn] = useState28(false);
-  const [isRecordingLoading, setIsRecordingLoading] = useState28(false);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const { showPolls } = useShowPolls();
   const togglePollView = usePollViewToggle();
@@ -20246,6 +20256,7 @@ var MwebOptions = ({
   const isLandscapeHLSStream = useLandscapeHLSStream();
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const isLocalVideoEnabled = useHMSStore29(selectIsLocalVideoEnabled4);
+  const { startRecording, isRecordingLoading } = useRecordingHandler();
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: "MoreSettings" });
   const updateState = (modalName, value) => {
     setOpenModals((modals) => {
@@ -20383,28 +20394,8 @@ var MwebOptions = ({
             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);
@@ -20996,17 +20987,18 @@ var ScreenshareToggle = ({ css: css2 = {} }) => {
 // src/Prebuilt/components/VirtualBackground/VBToggle.tsx
 init_define_process_env();
 import React68 from "react";
-import { selectIsEffectsEnabled, selectIsLocalVideoEnabled as selectIsLocalVideoEnabled5, useHMSStore as useHMSStore31 } from "@100mslive/react-sdk";
+import { selectAppData as selectAppData5, selectIsEffectsEnabled, selectIsLocalVideoEnabled as selectIsLocalVideoEnabled5, useHMSStore as useHMSStore31 } from "@100mslive/react-sdk";
 import { VirtualBackgroundIcon as VirtualBackgroundIcon2 } from "@100mslive/react-icons";
 var VBToggle = () => {
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const isVBOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.VB);
   const isVideoOn = useHMSStore31(selectIsLocalVideoEnabled5);
   const isEffectsEnabled = useHMSStore31(selectIsEffectsEnabled);
+  const loadingEffects = useHMSStore31(selectAppData5(APP_DATA.loadingEffects));
   if (!isVideoOn || !isEffectsEnabled && isSafari) {
     return null;
   }
-  return /* @__PURE__ */ React68.createElement(Tooltip, { side: "top", disabled: isVBOpen, title: "Configure Virtual Background" }, /* @__PURE__ */ React68.createElement(IconButton_default, { active: !isVBOpen, onClick: toggleVB, "data-testid": "virtual_bg_btn" }, /* @__PURE__ */ React68.createElement(VirtualBackgroundIcon2, null)));
+  return /* @__PURE__ */ React68.createElement(Tooltip, { side: "top", disabled: isVBOpen, title: "Configure Virtual Background" }, /* @__PURE__ */ React68.createElement(IconButton_default, { active: !isVBOpen, onClick: toggleVB, "data-testid": "virtual_bg_btn" }, loadingEffects ? /* @__PURE__ */ React68.createElement(Loading, { size: 18 }) : /* @__PURE__ */ React68.createElement(VirtualBackgroundIcon2, null)));
 };
 
 // src/Prebuilt/components/Footer/ChatToggle.tsx
@@ -21191,13 +21183,13 @@ var ConnectionIndicator = ({
 // src/Prebuilt/components/RemoveParticipant.tsx
 init_define_process_env();
 import React71 from "react";
-import { selectLocalPeerID as selectLocalPeerID6, selectPermissions as selectPermissions9, useHMSActions as useHMSActions22, useHMSStore as useHMSStore34 } from "@100mslive/react-sdk";
+import { selectLocalPeerID as selectLocalPeerID6, selectPermissions as selectPermissions9, useHMSActions as useHMSActions23, useHMSStore as useHMSStore34 } from "@100mslive/react-sdk";
 import { PeopleRemoveIcon as PeopleRemoveIcon2 } from "@100mslive/react-icons";
 var RemoveParticipant = ({ peerId }) => {
   var _a8;
   const canRemoveOthers = (_a8 = useHMSStore34(selectPermissions9)) == null ? void 0 : _a8.removeOthers;
   const localPeerId = useHMSStore34(selectLocalPeerID6);
-  const actions = useHMSActions22();
+  const actions = useHMSActions23();
   if (peerId === localPeerId || !canRemoveOthers) {
     return null;
   }
@@ -21235,7 +21227,7 @@ import {
   selectPermissions as selectPermissions10,
   selectRoleByRoleName,
   selectTracksMap as selectTracksMap3,
-  useHMSActions as useHMSActions23,
+  useHMSActions as useHMSActions24,
   useHMSStore as useHMSStore35
 } from "@100mslive/react-sdk";
 import {
@@ -21292,7 +21284,7 @@ var DropdownWrapper = ({ children }) => {
 };
 var RoleOptions = ({ roleName, peerList }) => {
   const permissions = useHMSStore35(selectPermissions10);
-  const hmsActions = useHMSActions23();
+  const hmsActions = useHMSActions24();
   const { elements } = useRoomLayoutConferencingScreen();
   const { on_stage_role, off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
   const canRemoveRoleFromStage = (permissions == null ? void 0 : permissions.changeRole) && roleName === on_stage_role;
@@ -21374,10 +21366,10 @@ var RoleOptions = ({ roleName, peerList }) => {
 // src/Prebuilt/components/hooks/useGroupOnStageActions.tsx
 init_define_process_env();
 import { match as match7, P as P3 } from "ts-pattern";
-import { selectPermissions as selectPermissions11, useHMSActions as useHMSActions24, useHMSStore as useHMSStore36 } from "@100mslive/react-sdk";
+import { selectPermissions as selectPermissions11, useHMSActions as useHMSActions25, useHMSStore as useHMSStore36 } from "@100mslive/react-sdk";
 var useGroupOnStageActions = ({ peers }) => {
   var _a8;
-  const hmsActions = useHMSActions24();
+  const hmsActions = useHMSActions25();
   const { elements } = useRoomLayoutConferencingScreen();
   const {
     bring_to_stage_label,
@@ -21542,10 +21534,10 @@ var RoleAccordion = ({
 // src/Prebuilt/components/hooks/usePeerOnStageActions.tsx
 init_define_process_env();
 import { useState as useState32 } from "react";
-import { selectPeerMetadata as selectPeerMetadata3, selectPermissions as selectPermissions12, useHMSActions as useHMSActions25, useHMSStore as useHMSStore38 } from "@100mslive/react-sdk";
+import { selectPeerMetadata as selectPeerMetadata3, selectPermissions as selectPermissions12, useHMSActions as useHMSActions26, useHMSStore as useHMSStore38 } from "@100mslive/react-sdk";
 var usePeerOnStageActions = ({ peerId, role }) => {
   var _a8, _b7;
-  const hmsActions = useHMSActions25();
+  const hmsActions = useHMSActions26();
   const { elements } = useRoomLayoutConferencingScreen();
   const {
     bring_to_stage_label,
@@ -22056,11 +22048,11 @@ var Footer2 = ({
 // src/Prebuilt/components/Notifications/HLSFailureModal.tsx
 init_define_process_env();
 import React78, { useCallback as useCallback20, useState as useState34 } from "react";
-import { selectHLSState as selectHLSState5, useHMSActions as useHMSActions26, useHMSStore as useHMSStore41, useRecordingStreaming as useRecordingStreaming8 } from "@100mslive/react-sdk";
+import { selectHLSState as selectHLSState5, useHMSActions as useHMSActions27, useHMSStore as useHMSStore41, useRecordingStreaming as useRecordingStreaming8 } from "@100mslive/react-sdk";
 function HLSFailureModal() {
   const hlsError = useHMSStore41(selectHLSState5).error || false;
   const [openModal, setOpenModal] = useState34(!!hlsError);
-  const hmsActions = useHMSActions26();
+  const hmsActions = useHMSActions27();
   const { isRTMPRunning } = useRecordingStreaming8();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const startHLS = useCallback20(() => __async(this, null, function* () {
@@ -22110,16 +22102,17 @@ import {
   selectLocalPeerRoleName as selectLocalPeerRoleName4,
   selectRoleChangeRequest,
   useCustomEvent as useCustomEvent3,
-  useHMSActions as useHMSActions43,
+  useHMSActions as useHMSActions44,
   useHMSStore as useHMSStore72
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Preview/PreviewJoin.tsx
 init_define_process_env();
 import React131, { Fragment as Fragment12, useCallback as useCallback32, useEffect as useEffect34, useMemo as useMemo13, useState as useState56 } from "react";
-import { useMeasure as useMeasure4, useMedia as useMedia23 } from "react-use";
+import { useMeasure as useMeasure4, useMedia as useMedia24 } from "react-use";
 import {
   HMSRoomState as HMSRoomState5,
+  selectAppData as selectAppData8,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled7,
   selectLocalPeer as selectLocalPeer7,
   selectRoomState as selectRoomState5,
@@ -22135,9 +22128,9 @@ import { MicOffIcon as MicOffIcon7, SettingsIcon as SettingsIcon6 } from "@100ms
 // src/Prebuilt/layouts/SidePane.tsx
 init_define_process_env();
 import React127, { useEffect as useEffect33 } from "react";
-import { useMedia as useMedia21 } from "react-use";
+import { useMedia as useMedia22 } from "react-use";
 import { match as match11 } from "ts-pattern";
-import { selectAppData as selectAppData6, selectVideoTrackByPeerID as selectVideoTrackByPeerID4, useHMSStore as useHMSStore70 } from "@100mslive/react-sdk";
+import { selectAppData as selectAppData7, selectVideoTrackByPeerID as selectVideoTrackByPeerID4, useHMSStore as useHMSStore70 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Polls/Polls.tsx
 init_define_process_env();
@@ -22150,7 +22143,7 @@ import {
   selectLocalPeerRoleName,
   selectPermissions as selectPermissions15,
   selectPolls as selectPolls2,
-  useHMSActions as useHMSActions27,
+  useHMSActions as useHMSActions28,
   useHMSStore as useHMSStore43
 } from "@100mslive/react-sdk";
 import { QuestionIcon, StatsIcon } from "@100mslive/react-icons";
@@ -22298,7 +22291,7 @@ function InteractionSelectionCard({
   );
 }
 var AddMenu = () => {
-  const actions = useHMSActions27();
+  const actions = useHMSActions28();
   const [title, setTitle] = useState35("");
   const localPeerRoleName = useHMSStore43(selectLocalPeerRoleName);
   const [hideVoteCount, setHideVoteCount] = useState35(false);
@@ -22381,7 +22374,7 @@ var AddMenu = () => {
   ), /* @__PURE__ */ React81.createElement(ErrorText, { error: error || titleError })));
 };
 var PrevMenu = () => {
-  const hmsActions = useHMSActions27();
+  const hmsActions = useHMSActions28();
   const polls = useHMSStore43(selectPolls2);
   const sortedPolls = useMemo6(
     () => {
@@ -22431,7 +22424,7 @@ var InteractionCard = ({ id, title, status }) => {
 init_define_process_env();
 import React91, { useMemo as useMemo8, useState as useState37 } from "react";
 import { v4 as uuid2 } from "uuid";
-import { selectPollByID, useHMSActions as useHMSActions28, useHMSStore as useHMSStore44, useRecordingStreaming as useRecordingStreaming9 } from "@100mslive/react-sdk";
+import { selectPollByID, useHMSActions as useHMSActions29, useHMSStore as useHMSStore44, useRecordingStreaming as useRecordingStreaming9 } from "@100mslive/react-sdk";
 import { AddCircleIcon as AddCircleIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Polls/CreateQuestions/QuestionForm.tsx
@@ -22968,7 +22961,7 @@ var getEditableFormat = (questions) => {
 };
 function CreateQuestions() {
   var _a8, _b7, _c, _d;
-  const actions = useHMSActions28();
+  const actions = useHMSActions29();
   const { isHLSRunning } = useRecordingStreaming9();
   const togglePollView = usePollViewToggle();
   const { pollInView: id, setPollView } = usePollViewState();
@@ -23157,11 +23150,11 @@ init_define_process_env();
 import { useEffect as useEffect22, useState as useState38 } from "react";
 import {
   selectPollByID as selectPollByID2,
-  useHMSActions as useHMSActions29,
+  useHMSActions as useHMSActions30,
   useHMSStore as useHMSStore45
 } from "@100mslive/react-sdk";
 var useQuizSummary = (quizID) => {
-  const hmsActions = useHMSActions29();
+  const hmsActions = useHMSActions30();
   const quiz = useHMSStore45(selectPollByID2(quizID));
   const [quizLeaderboard, setQuizLeaderboard] = useState38();
   const summary = (quizLeaderboard == null ? void 0 : quizLeaderboard.summary) || {
@@ -23317,7 +23310,7 @@ import {
   selectPeerNameByID,
   selectPermissions as selectPermissions16,
   selectPollByID as selectPollByID4,
-  useHMSActions as useHMSActions31,
+  useHMSActions as useHMSActions32,
   useHMSStore as useHMSStore50
 } from "@100mslive/react-sdk";
 import { ChevronLeftIcon as ChevronLeftIcon5, CrossIcon as CrossIcon16 } from "@100mslive/react-icons";
@@ -23330,7 +23323,7 @@ import React97 from "react";
 init_define_process_env();
 import React96, { useCallback as useCallback22, useMemo as useMemo9, useRef as useRef18, useState as useState40 } from "react";
 import { match as match8 } from "ts-pattern";
-import { selectLocalPeer, selectLocalPeerRoleName as selectLocalPeerRoleName2, useHMSActions as useHMSActions30, useHMSStore as useHMSStore48 } from "@100mslive/react-sdk";
+import { selectLocalPeer, selectLocalPeerRoleName as selectLocalPeerRoleName2, useHMSActions as useHMSActions31, useHMSStore as useHMSStore48 } from "@100mslive/react-sdk";
 import { CheckCircleIcon as CheckCircleIcon5, ChevronDownIcon as ChevronDownIcon5, CrossCircleIcon } from "@100mslive/react-icons";
 var QuestionCard2 = ({
   pollID,
@@ -23348,7 +23341,7 @@ var QuestionCard2 = ({
   responses = [],
   rolesThatCanViewResponses
 }) => {
-  const actions = useHMSActions30();
+  const actions = useHMSActions31();
   const localPeer = useHMSStore48(selectLocalPeer);
   const localPeerResponse = responses == null ? void 0 : responses.find(
     (response) => {
@@ -23585,7 +23578,7 @@ var TimedView = ({ poll }) => {
 
 // src/Prebuilt/components/Polls/Voting/Voting.tsx
 var Voting = ({ id, toggleVoting }) => {
-  const actions = useHMSActions31();
+  const actions = useHMSActions32();
   const poll = useHMSStore50(selectPollByID4(id));
   const pollCreatorName = useHMSStore50(selectPeerNameByID(poll == null ? void 0 : poll.createdBy));
   const permissions = useHMSStore50(selectPermissions16);
@@ -23785,7 +23778,7 @@ init_define_process_env();
 import React116, { useCallback as useCallback30, useRef as useRef22 } from "react";
 import { useMedia as useMedia17 } from "react-use";
 import { match as match9 } from "ts-pattern";
-import { selectHMSMessagesCount, useHMSActions as useHMSActions39, useHMSStore as useHMSStore61, useHMSVanillaStore as useHMSVanillaStore10 } from "@100mslive/react-sdk";
+import { selectHMSMessagesCount, useHMSActions as useHMSActions40, useHMSStore as useHMSStore61, useHMSVanillaStore as useHMSVanillaStore10 } from "@100mslive/react-sdk";
 import { ChevronDownIcon as ChevronDownIcon8 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatBody.tsx
@@ -23802,7 +23795,7 @@ import {
   selectPeerNameByID as selectPeerNameByID3,
   selectSessionStore as selectSessionStore5,
   selectUnreadHMSMessagesCount as selectUnreadHMSMessagesCount2,
-  useHMSActions as useHMSActions35,
+  useHMSActions as useHMSActions36,
   useHMSStore as useHMSStore55,
   useHMSVanillaStore as useHMSVanillaStore9
 } from "@100mslive/react-sdk";
@@ -23811,7 +23804,7 @@ import { SolidPinIcon } from "@100mslive/react-icons";
 // src/Prebuilt/components/Chat/ChatActions.tsx
 init_define_process_env();
 import React106, { useCallback as useCallback25, useState as useState44 } from "react";
-import { selectLocalPeerName as selectLocalPeerName2, selectPermissions as selectPermissions17, useHMSActions as useHMSActions34, useHMSStore as useHMSStore53 } from "@100mslive/react-sdk";
+import { selectLocalPeerName as selectLocalPeerName2, selectPermissions as selectPermissions17, useHMSActions as useHMSActions35, useHMSStore as useHMSStore53 } from "@100mslive/react-sdk";
 import {
   CopyIcon as CopyIcon2,
   CrossCircleIcon as CrossCircleIcon2,
@@ -23839,9 +23832,9 @@ var MwebChatOption = ({
 // src/Prebuilt/components/hooks/useChatBlacklist.ts
 init_define_process_env();
 import { useCallback as useCallback23 } from "react";
-import { selectLocalPeer as selectLocalPeer2, selectSessionStore as selectSessionStore2, useHMSActions as useHMSActions32, useHMSStore as useHMSStore52 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer2, selectSessionStore as selectSessionStore2, useHMSActions as useHMSActions33, useHMSStore as useHMSStore52 } from "@100mslive/react-sdk";
 var useChatBlacklist = (sessionStoreKey) => {
-  const hmsActions = useHMSActions32();
+  const hmsActions = useHMSActions33();
   const blacklistedIDs = useHMSStore52(selectSessionStore2(sessionStoreKey));
   const blacklistItem = useCallback23(
     (blacklistID) => __async(void 0, null, function* () {
@@ -23863,11 +23856,11 @@ import { useCallback as useCallback24 } from "react";
 import {
   selectPeerNameByID as selectPeerNameByID2,
   selectSessionStore as selectSessionStore3,
-  useHMSActions as useHMSActions33,
+  useHMSActions as useHMSActions34,
   useHMSVanillaStore as useHMSVanillaStore8
 } from "@100mslive/react-sdk";
 var usePinnedMessages = () => {
-  const hmsActions = useHMSActions33();
+  const hmsActions = useHMSActions34();
   const vanillaStore = useHMSVanillaStore8();
   const setPinnedMessages = useCallback24(
     (message, pinnedBy) => __async(void 0, null, function* () {
@@ -23935,7 +23928,7 @@ var ChatActions = ({
   const { can_hide_message = false, can_block_user = false } = ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.real_time_controls) || {};
   const { roles_whitelist = [] } = (elements == null ? void 0 : elements.chat) || {};
   const [open, setOpen] = useState44(false);
-  const actions = useHMSActions34();
+  const actions = useHMSActions35();
   const canRemoveOthers = (_b7 = useHMSStore53(selectPermissions17)) == null ? void 0 : _b7.removeOthers;
   const { blacklistItem: blacklistPeer } = useChatBlacklist("chatPeerBlacklist" /* CHAT_PEER_BLACKLIST */);
   const localPeerName = useHMSStore53(selectLocalPeerName2);
@@ -24459,7 +24452,7 @@ var MessageWrapper = React108.memo(
   }
 );
 var VirtualizedChatMessages = React108.forwardRef(({ messages, scrollToBottom }, listRef) => {
-  const hmsActions = useHMSActions35();
+  const hmsActions = useHMSActions36();
   const itemKey2 = useCallback26((index, data3) => {
     return data3[index].id;
   }, []);
@@ -24572,7 +24565,7 @@ import React111, { useCallback as useCallback28, useEffect as useEffect28, useRe
 import { useMedia as useMedia15 } from "react-use";
 import data2 from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
-import { selectLocalPeer as selectLocalPeer3, useHMSActions as useHMSActions37, useHMSStore as useHMSStore58 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer3, useHMSActions as useHMSActions38, useHMSStore as useHMSStore58 } from "@100mslive/react-sdk";
 import { EmojiIcon as EmojiIcon3, PauseCircleIcon as PauseCircleIcon2, SendIcon, VerticalMenuIcon as VerticalMenuIcon7 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatSelectorContainer.tsx
@@ -24873,10 +24866,10 @@ var ChatSelectorContainer = () => {
 // src/Prebuilt/components/AppData/useChatState.js
 init_define_process_env();
 import { useCallback as useCallback27 } from "react";
-import { selectAppData as selectAppData5, useHMSActions as useHMSActions36, useHMSStore as useHMSStore57 } from "@100mslive/react-sdk";
+import { selectAppData as selectAppData6, useHMSActions as useHMSActions37, useHMSStore as useHMSStore57 } from "@100mslive/react-sdk";
 var useChatDraftMessage = () => {
-  const hmsActions = useHMSActions36();
-  let chatDraftMessage = useHMSStore57(selectAppData5(APP_DATA.chatDraft));
+  const hmsActions = useHMSActions37();
+  let chatDraftMessage = useHMSStore57(selectAppData6(APP_DATA.chatDraft));
   if (chatDraftMessage === void 0 || chatDraftMessage === null) {
     chatDraftMessage = "";
   }
@@ -24969,7 +24962,7 @@ function EmojiPicker({ onSelect }) {
 }
 var ChatFooter = ({ onSend, children }) => {
   var _a8, _b7, _c, _d;
-  const hmsActions = useHMSActions37();
+  const hmsActions = useHMSActions38();
   const inputRef = useRef21(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
   const isMobile = useMedia15(config.media.md);
@@ -25156,10 +25149,10 @@ var ChatFooter = ({ onSend, children }) => {
 // src/Prebuilt/components/Chat/ChatStates.tsx
 init_define_process_env();
 import React112, { useCallback as useCallback29 } from "react";
-import { selectLocalPeer as selectLocalPeer4, selectSessionStore as selectSessionStore6, useHMSActions as useHMSActions38, useHMSStore as useHMSStore59 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer4, selectSessionStore as selectSessionStore6, useHMSActions as useHMSActions39, useHMSStore as useHMSStore59 } from "@100mslive/react-sdk";
 var ChatPaused = () => {
   var _a8, _b7;
-  const hmsActions = useHMSActions38();
+  const hmsActions = useHMSActions39();
   const { elements } = useRoomLayoutConferencingScreen();
   const can_disable_chat = !!((_b7 = (_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.real_time_controls) == null ? void 0 : _b7.can_disable_chat);
   const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = "" } = useHMSStore59(selectSessionStore6("chatState" /* CHAT_STATE */)) || {};
@@ -25388,7 +25381,7 @@ var Chat = () => {
   var _a8, _b7;
   const { elements } = useRoomLayoutConferencingScreen();
   const listRef = useRef22(null);
-  const hmsActions = useHMSActions39();
+  const hmsActions = useHMSActions40();
   const vanillaStore = useHMSVanillaStore10();
   const { enabled: isChatEnabled = true } = useHMSStore61(pm("chatState" /* CHAT_STATE */)) || {};
   const isMobile = useMedia17(config.media.md);
@@ -25602,11 +25595,11 @@ var PaginatedParticipants = ({ roleName, onBack }) => {
 // src/Prebuilt/components/ChatSettings.tsx
 init_define_process_env();
 import React118 from "react";
-import { selectLocalPeer as selectLocalPeer5, selectSessionStore as selectSessionStore8, useHMSActions as useHMSActions40, useHMSStore as useHMSStore63 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer5, selectSessionStore as selectSessionStore8, useHMSActions as useHMSActions41, useHMSStore as useHMSStore63 } from "@100mslive/react-sdk";
 import { PauseCircleIcon as PauseCircleIcon3, SettingsIcon as SettingsIcon5 } from "@100mslive/react-icons";
 var ChatSettings = () => {
   var _a8, _b7;
-  const hmsActions = useHMSActions40();
+  const hmsActions = useHMSActions41();
   const localPeer = useHMSStore63(selectLocalPeer5);
   const { elements } = useRoomLayoutConferencingScreen();
   const canPauseChat = !!((_b7 = (_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.real_time_controls) == null ? void 0 : _b7.can_disable_chat);
@@ -25887,7 +25880,7 @@ import {
   selectSessionStore as selectSessionStore10,
   selectTrackByID as selectTrackByID2,
   useCustomEvent as useCustomEvent2,
-  useHMSActions as useHMSActions41,
+  useHMSActions as useHMSActions42,
   useHMSStore as useHMSStore66,
   useRemoteAVToggle
 } from "@100mslive/react-sdk";
@@ -25924,7 +25917,7 @@ var SpotlightActions = ({
     return;
   }
 }) => {
-  const hmsActions = useHMSActions41();
+  const hmsActions = useHMSActions42();
   const spotlightPeerId = useHMSStore66(selectSessionStore10("spotlight" /* SPOTLIGHT */));
   const isTileSpotlighted = spotlightPeerId === peerId;
   const dragClassName = getDragClassName();
@@ -25974,7 +25967,7 @@ var MinimiseInset = () => {
 var SimulcastLayers = ({ trackId }) => {
   var _a8;
   const track = useHMSStore66(selectTrackByID2(trackId));
-  const actions = useHMSActions41();
+  const actions = useHMSActions42();
   const bg = useDropdownSelection();
   if (!((_a8 = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _a8.length) || track.degraded || !track.enabled) {
     return null;
@@ -26057,7 +26050,7 @@ var TileMenuContent = ({
   }
 }) => {
   var _a8;
-  const actions = useHMSActions41();
+  const actions = useHMSActions42();
   const dragClassName = getDragClassName();
   const removeOthers = (_a8 = useHMSStore66(selectPermissions18)) == null ? void 0 : _a8.removeOthers;
   const { userName } = useHMSPrebuiltContext();
@@ -26363,6 +26356,7 @@ var VideoTile_default = VideoTile;
 // src/Prebuilt/components/VirtualBackground/VBPicker.tsx
 init_define_process_env();
 import React126, { useEffect as useEffect32, useState as useState55 } from "react";
+import { useMedia as useMedia21 } from "react-use";
 import { HMSVirtualBackgroundTypes as HMSVirtualBackgroundTypes3 } from "@100mslive/hms-virtual-background";
 import {
   HMSRoomState as HMSRoomState4,
@@ -26372,7 +26366,7 @@ import {
   selectLocalPeer as selectLocalPeer6,
   selectRoomState as selectRoomState4,
   selectVideoTrackByID as selectVideoTrackByID4,
-  useHMSActions as useHMSActions42,
+  useHMSActions as useHMSActions43,
   useHMSStore as useHMSStore69
 } from "@100mslive/react-sdk";
 import { BlurPersonHighIcon, CrossCircleIcon as CrossCircleIcon3, CrossIcon as CrossIcon23 } from "@100mslive/react-icons";
@@ -26406,7 +26400,7 @@ var Root25 = ({
       "&: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
@@ -26450,12 +26444,12 @@ init_define_process_env();
 import { HMSEffectsPlugin, HMSVBPlugin, HMSVirtualBackgroundTypes as HMSVirtualBackgroundTypes2 } from "@100mslive/hms-virtual-background";
 var VBPlugin = class {
   constructor() {
-    this.initialisePlugin = (effectsSDKKey) => {
+    this.initialisePlugin = (effectsSDKKey, onInit) => {
       if (this.getVBObject()) {
         return;
       }
       if (effectsSDKKey) {
-        this.effectsPlugin = new HMSEffectsPlugin(effectsSDKKey);
+        this.effectsPlugin = new HMSEffectsPlugin(effectsSDKKey, onInit);
       } else {
         this.hmsPlugin = new HMSVBPlugin(HMSVirtualBackgroundTypes2.NONE, HMSVirtualBackgroundTypes2.NONE);
       }
@@ -26559,7 +26553,7 @@ var iconDims = { height: "40px", width: "40px" };
 var VBPicker = ({ backgroundMedia = [] }) => {
   var _a8;
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
-  const hmsActions = useHMSActions42();
+  const hmsActions = useHMSActions43();
   const localPeer = useHMSStore69(selectLocalPeer6);
   const role = useHMSStore69(qt);
   const isVideoOn = useHMSStore69(selectIsLocalVideoEnabled6);
@@ -26571,6 +26565,8 @@ var VBPicker = ({ backgroundMedia = [] }) => {
   const isLargeRoom = useHMSStore69(selectIsLargeRoom3);
   const isEffectsEnabled = useHMSStore69(nc);
   const effectsKey = useHMSStore69(cc);
+  const isMobile = useMedia21(config.media.md);
+  const [loadingEffects, setLoadingEffects] = useSetAppDataByKey(APP_DATA.loadingEffects);
   const isPluginAdded = useHMSStore69(selectIsLocalVideoPluginPresent(((_a8 = VBHandler) == null ? void 0 : _a8.getName()) || ""));
   const background = useHMSStore69(um(APP_DATA.background));
   const mediaList = backgroundMedia.length ? backgroundMedia.map((media) => media.url || "") : defaultMedia2;
@@ -26581,13 +26577,15 @@ var VBPicker = ({ backgroundMedia = [] }) => {
       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;
           }
@@ -26609,13 +26607,24 @@ var VBPicker = ({ backgroundMedia = [] }) => {
       });
       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
+  ]);
   useEffect32(() => {
     if (!isVideoOn) {
       toggleVB();
     }
-  }, [isVideoOn, toggleVB]);
-  return /* @__PURE__ */ React126.createElement(Flex, { css: { pr: "$6", size: "100%" }, direction: "column" }, /* @__PURE__ */ React126.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", background: "$surface_dim", pb: "$4" } }, /* @__PURE__ */ React126.createElement(Text, { variant: "h6", css: { color: "$on_surface_high" } }, "Virtual Background"), /* @__PURE__ */ React126.createElement(
+    return () => setLoadingEffects(false);
+  }, [isVideoOn, setLoadingEffects, toggleVB]);
+  return /* @__PURE__ */ React126.createElement(Flex, { css: { pr: "$6", size: "100%" }, direction: "column" }, /* @__PURE__ */ React126.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", background: "$surface_dim", pb: "$4" } }, /* @__PURE__ */ React126.createElement(Text, { variant: "h6", css: { color: "$on_surface_high", display: "flex", alignItems: "center" } }, "Virtual Background ", isMobile && loadingEffects ? /* @__PURE__ */ React126.createElement(Loading, { size: 18, style: { marginLeft: "0.5rem" } }) : ""), /* @__PURE__ */ React126.createElement(
     Box,
     {
       css: { color: "$on_surface_high", "&:hover": { color: "$on_surface_medium" }, cursor: "pointer" },
@@ -26803,9 +26812,9 @@ var SidePane = ({
   hideControls = false
 }) => {
   var _a8, _b7, _c, _d, _e, _f, _g;
-  const isMobile = useMedia21(config.media.md);
-  const sidepane = useHMSStore70(selectAppData6(APP_DATA.sidePane));
-  const activeScreensharePeerId = useHMSStore70(selectAppData6(APP_DATA.activeScreensharePeerId));
+  const isMobile = useMedia22(config.media.md);
+  const sidepane = useHMSStore70(selectAppData7(APP_DATA.sidePane));
+  const activeScreensharePeerId = useHMSStore70(selectAppData7(APP_DATA.activeScreensharePeerId));
   const trackId = (_a8 = useHMSStore70(selectVideoTrackByPeerID4(activeScreensharePeerId))) == null ? void 0 : _a8.id;
   const { elements } = useRoomLayoutConferencingScreen();
   const { elements: preview_elements } = useRoomLayoutPreviewScreen();
@@ -26913,16 +26922,20 @@ var Chip = ({
 };
 var Chip_default = Chip;
 
-// src/Prebuilt/components/FullPageProgress.jsx
+// src/Prebuilt/components/FullPageProgress.tsx
 init_define_process_env();
 import React129 from "react";
-var FullPageProgress = ({ loaderColor = "$primary_default", text = "", css: css2 = {} }) => /* @__PURE__ */ React129.createElement(Flex, { direction: "column", justify: "center", align: "center", css: __spreadValues({ size: "100%", color: loaderColor }, css2) }, /* @__PURE__ */ React129.createElement(Loading, { color: "currentColor", size: 100 }), text ? /* @__PURE__ */ React129.createElement(Text, { css: { mt: "$10", color: "$on_surface_high" } }, text) : null);
+var FullPageProgress = ({
+  loaderColor = "$primary_default",
+  text = "",
+  css: css2 = {}
+}) => /* @__PURE__ */ React129.createElement(Flex, { direction: "column", justify: "center", align: "center", css: __spreadValues({ size: "100%", color: loaderColor }, css2) }, /* @__PURE__ */ React129.createElement(Loading, { color: "currentColor", size: 100 }), text ? /* @__PURE__ */ React129.createElement(Text, { css: { mt: "$10", color: "$on_surface_high" } }, text) : null);
 var FullPageProgress_default = FullPageProgress;
 
 // src/Prebuilt/components/Preview/PreviewForm.tsx
 init_define_process_env();
 import React130 from "react";
-import { useMedia as useMedia22 } from "react-use";
+import { useMedia as useMedia23 } from "react-use";
 import { JoinForm_JoinBtnType as JoinForm_JoinBtnType3 } from "@100mslive/types-prebuilt/elements/join_form";
 import { useRecordingStreaming as useRecordingStreaming10 } from "@100mslive/react-sdk";
 import { GoLiveIcon } from "@100mslive/react-icons";
@@ -26939,7 +26952,7 @@ var PreviewForm = ({
   const formSubmit = (e) => {
     e.preventDefault();
   };
-  const isMobile = useMedia22(config.media.md);
+  const isMobile = useMedia23(config.media.md);
   const { isHLSRunning, isRTMPRunning, isHLSRecordingOn, isBrowserRecordingOn } = useRecordingStreaming10();
   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) || {};
@@ -27000,7 +27013,7 @@ var getParticipantChipContent = (peerCount = 0) => {
 var useLocalTileAspectRatio = () => {
   const localPeer = useHMSStore71(selectLocalPeer7);
   const videoTrack = useHMSStore71(selectVideoTrackByID5(localPeer == null ? void 0 : localPeer.videoTrack));
-  const isMobile = useMedia23(config.media.md);
+  const isMobile = useMedia24(config.media.md);
   let aspectRatio = 0;
   if ((videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height)) {
     aspectRatio = videoTrack.width / videoTrack.height;
@@ -27025,6 +27038,7 @@ var PreviewJoin = ({
   const [previewError, setPreviewError] = useState56(false);
   const { endpoints } = useHMSPrebuiltContext();
   const { peerCount } = useParticipants2();
+  const loadingEffects = useHMSStore71(selectAppData8(APP_DATA.loadingEffects));
   const { enableJoin, preview, join } = usePreviewJoin({
     name,
     token: authToken,
@@ -27094,7 +27108,7 @@ var PreviewJoin = ({
       name,
       disabled: !!initialName,
       onChange: setName,
-      enableJoin,
+      enableJoin: enableJoin && !loadingEffects,
       onJoin: savePreferenceAndJoin,
       cannotPublishVideo: !toggleVideo,
       cannotPublishAudio: !toggleAudio
@@ -27154,7 +27168,7 @@ var PreviewTile = ({ name, error }) => {
   );
 };
 var PreviewControls = ({ hideSettings, vbEnabled }) => {
-  const isMobile = useMedia23(config.media.md);
+  const isMobile = useMedia24(config.media.md);
   return /* @__PURE__ */ React131.createElement(
     Flex,
     {
@@ -27177,7 +27191,7 @@ var PreviewJoin_default = PreviewJoin;
 // src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx
 init_define_process_env();
 import React132 from "react";
-import { useMedia as useMedia24 } from "react-use";
+import { useMedia as useMedia25 } from "react-use";
 var RequestPrompt = ({
   open = true,
   onOpenChange,
@@ -27187,7 +27201,7 @@ var RequestPrompt = ({
   onAction,
   disableActions = false
 }) => {
-  const isMobile = useMedia24(config.media.md);
+  const isMobile = useMedia25(config.media.md);
   if (isMobile) {
     return /* @__PURE__ */ React132.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React132.createElement(Sheet.Content, { css: { py: "$8" } }, /* @__PURE__ */ React132.createElement(Text, { css: { fontWeight: "$semiBold", c: "$on_surface_high", "@md": { px: "$8" } } }, title), body, /* @__PURE__ */ React132.createElement(RequestActions, { actionText, onAction, disabled: disableActions })));
   }
@@ -27201,7 +27215,7 @@ var RequestActions = ({
 
 // src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx
 var RoleChangeRequestModal = () => {
-  const hmsActions = useHMSActions43();
+  const hmsActions = useHMSActions44();
   const { updateMetaData } = useMyMetadata();
   const isPreview = useHMSStore72(selectIsInPreview);
   const currentRole = useHMSStore72(selectLocalPeerRoleName4);
@@ -27276,7 +27290,7 @@ var RoleChangeRequestModal = () => {
 init_define_process_env();
 import React151, { Suspense, useEffect as useEffect48 } from "react";
 import { match as match12 } from "ts-pattern";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom9, selectLocalPeerRoleName as selectLocalPeerRoleName6, useHMSActions as useHMSActions45, useHMSStore as useHMSStore83 } from "@100mslive/react-sdk";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom9, selectLocalPeerRoleName as selectLocalPeerRoleName6, useHMSActions as useHMSActions46, useHMSStore as useHMSStore83 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/GridLayout.tsx
 init_define_process_env();
@@ -27294,14 +27308,14 @@ import {
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
 init_define_process_env();
 import React138, { useEffect as useEffect39, useMemo as useMemo15, useState as useState58 } from "react";
-import { useMedia as useMedia27 } from "react-use";
+import { useMedia as useMedia28 } from "react-use";
 import { selectLocalPeer as selectLocalPeer9, useHMSStore as useHMSStore74 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/InsetTile.tsx
 init_define_process_env();
 import React135, { useEffect as useEffect36, useRef as useRef23 } from "react";
 import Draggable from "react-draggable";
-import { useMedia as useMedia25 } from "react-use";
+import { useMedia as useMedia26 } from "react-use";
 import {
   selectIsAllowedToPublish as selectIsAllowedToPublish2,
   selectLocalPeer as selectLocalPeer8,
@@ -27345,8 +27359,8 @@ var insetMaxWidthPx = 240;
 var defaultMobileAspectRatio = 9 / 16;
 var desktopAspectRatio = 1 / defaultMobileAspectRatio;
 var InsetTile = ({ peerId }) => {
-  const isMobile = useMedia25(config.media.md);
-  const isLandscape = useMedia25(config.media.ls);
+  const isMobile = useMedia26(config.media.md);
+  const isLandscape = useMedia26(config.media.ls);
   const selector = peerId ? selectPeerByID3(peerId) : selectLocalPeer8;
   const peer = useHMSStore73(selector);
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
@@ -27506,7 +27520,7 @@ var Grid = React137.forwardRef(
 // src/Prebuilt/components/hooks/useTileLayout.tsx
 init_define_process_env();
 import { useEffect as useEffect38, useMemo as useMemo14, useState as useState57 } from "react";
-import { useMeasure as useMeasure5, useMedia as useMedia26 } from "react-use";
+import { useMeasure as useMeasure5, useMedia as useMedia27 } from "react-use";
 import {
   getPeersWithTiles,
   selectTracksMap as selectTracksMap4,
@@ -27542,7 +27556,7 @@ var useTileLayout = ({
 }) => {
   const vanillaStore = useHMSVanillaStore11();
   const [ref, { width, height }] = useMeasure5();
-  const isMobile = useMedia26(config.media.lg);
+  const isMobile = useMedia27(config.media.lg);
   const [pagesWithTiles, setPagesWithTiles] = useState57([]);
   useEffect38(() => {
     if (width === 0 || height === 0) {
@@ -27612,7 +27626,7 @@ var useTileLayout = ({
 function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }) {
   var _a8;
   const localPeer = useHMSStore74(selectLocalPeer9);
-  const isMobile = useMedia27(config.media.md);
+  const isMobile = useMedia28(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
   let pageList = usePagesWithTiles({
@@ -27657,14 +27671,14 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
 // src/Prebuilt/components/VideoLayouts/RoleProminence.tsx
 init_define_process_env();
 import React141, { useEffect as useEffect41, useState as useState60 } from "react";
-import { useMedia as useMedia29 } from "react-use";
+import { useMedia as useMedia30 } from "react-use";
 import { selectLocalPeer as selectLocalPeer10, useHMSStore as useHMSStore76 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/SecondaryTiles.tsx
 init_define_process_env();
 import React140, { useEffect as useEffect40, useRef as useRef24, useState as useState59 } from "react";
-import { useMedia as useMedia28 } from "react-use";
-import { selectAppData as selectAppData7, selectSessionStore as selectSessionStore11, selectTrackByID as selectTrackByID4, useHMSStore as useHMSStore75 } from "@100mslive/react-sdk";
+import { useMedia as useMedia29 } from "react-use";
+import { selectAppData as selectAppData9, selectSessionStore as selectSessionStore11, selectTrackByID as selectTrackByID4, useHMSStore as useHMSStore75 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
 init_define_process_env();
@@ -27748,12 +27762,12 @@ var ProminenceLayout = {
 // src/Prebuilt/components/SecondaryTiles.tsx
 var SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge, hasSidebar }) => {
   var _a8, _b7;
-  const isMobile = useMedia28(config.media.md);
+  const isMobile = useMedia29(config.media.md);
   const maxTileCount = isMobile ? 2 : 4;
   const [page, setPage] = useState59(0);
-  const pinnedTrackId = useHMSStore75(selectAppData7(APP_DATA.pinnedTrackId));
+  const pinnedTrackId = useHMSStore75(selectAppData9(APP_DATA.pinnedTrackId));
   const spotlightPeerId = useHMSStore75(selectSessionStore11("spotlight" /* SPOTLIGHT */));
-  const activeScreensharePeerId = useHMSStore75(selectAppData7(APP_DATA.activeScreensharePeerId));
+  const activeScreensharePeerId = useHMSStore75(selectAppData9(APP_DATA.activeScreensharePeerId));
   const pinnedPeer = (_a8 = useHMSStore75(selectTrackByID4(pinnedTrackId))) == null ? void 0 : _a8.peerId;
   const pageChangedAfterPinning = useRef24(false);
   const pagesWithTiles = usePagesWithTiles({
@@ -27850,7 +27864,7 @@ function RoleProminence({
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
   const localPeer = useHMSStore76(selectLocalPeer10);
   const layoutMode = useUISettings(UI_SETTINGS.layoutMode);
-  const isMobile = useMedia29(config.media.md);
+  const isMobile = useMedia30(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? 4 : maxTileCount;
   const pageList = usePagesWithTiles({
@@ -27892,13 +27906,13 @@ function RoleProminence({
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
 init_define_process_env();
 import React145, { useEffect as useEffect42, useMemo as useMemo17, useState as useState63 } from "react";
-import { useMedia as useMedia31 } from "react-use";
+import { useMedia as useMedia32 } from "react-use";
 import { selectPeersScreenSharing, useHMSStore as useHMSStore78 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/ScreenshareTile.tsx
 init_define_process_env();
 import React144, { useRef as useRef25, useState as useState62 } from "react";
-import { useFullscreen as useFullscreen2, useMedia as useMedia30 } from "react-use";
+import { useFullscreen as useFullscreen2, useMedia as useMedia31 } from "react-use";
 import screenfull2 from "screenfull";
 import {
   selectLocalPeerID as selectLocalPeerID13,
@@ -28016,10 +28030,10 @@ var LayoutModeSelector = () => {
 // src/Prebuilt/components/ScreenshareDisplay.tsx
 init_define_process_env();
 import React143 from "react";
-import { useHMSActions as useHMSActions44 } from "@100mslive/react-sdk";
+import { useHMSActions as useHMSActions45 } from "@100mslive/react-sdk";
 import { CrossIcon as CrossIcon24, ShareScreenIcon as ShareScreenIcon5 } from "@100mslive/react-icons";
 var ScreenshareDisplay = () => {
-  const hmsActions = useHMSActions44();
+  const hmsActions = useHMSActions45();
   return /* @__PURE__ */ React143.createElement(
     Flex,
     {
@@ -28066,7 +28080,7 @@ var Tile2 = ({ peerId, width = "100%", height = "100%" }) => {
   const peer = useHMSStore77(selectPeerByID4(peerId));
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const [isMouseHovered, setIsMouseHovered] = useState62(false);
-  const isMobile = useMedia30(config.media.md);
+  const isMobile = useMedia31(config.media.md);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
   const fullscreenRef = useRef25(null);
   const [fullscreen, setFullscreen] = useState62(false);
@@ -28158,7 +28172,7 @@ var ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
   const [page, setPage] = useState63(0);
   const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
   const activeSharePeer = peersSharing[page];
-  const isMobile = useMedia31(config.media.md);
+  const isMobile = useMedia32(config.media.md);
   const hasSidebar = !isMobile && layoutMode === LayoutMode.SIDEBAR;
   const secondaryPeers = useMemo17(() => {
     if (layoutMode === LayoutMode.SPOTLIGHT) {
@@ -28204,10 +28218,10 @@ var ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
 // src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx
 init_define_process_env();
 import React146, { useEffect as useEffect43, useMemo as useMemo18 } from "react";
-import { useMedia as useMedia32 } from "react-use";
+import { useMedia as useMedia33 } from "react-use";
 import { selectPeerByCondition, selectWhiteboard, useHMSStore as useHMSStore79, useWhiteboard as useWhiteboard2 } from "@100mslive/react-sdk";
 var WhiteboardEmbed = () => {
-  const isMobile = useMedia32(config.media.md);
+  const isMobile = useMedia33(config.media.md);
   const { iframeRef } = useWhiteboard2(isMobile);
   return /* @__PURE__ */ React146.createElement(
     Box,
@@ -28243,7 +28257,7 @@ var WhiteboardLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
   const whiteboard = useHMSStore79(selectWhiteboard);
   const whiteboardOwner = useHMSStore79(selectPeerByCondition((peer) => peer.customerUserId === (whiteboard == null ? void 0 : whiteboard.owner)));
   const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
-  const isMobile = useMedia32(config.media.md);
+  const isMobile = useMedia33(config.media.md);
   const hasSidebar = !isMobile && layoutMode === LayoutMode.SIDEBAR;
   const secondaryPeers = useMemo18(() => {
     if (layoutMode === LayoutMode.SPOTLIGHT) {
@@ -28490,7 +28504,7 @@ var GridLayout = ({
 // src/Prebuilt/layouts/EmbedView.jsx
 init_define_process_env();
 import React148, { useEffect as useEffect45, useMemo as useMemo20 } from "react";
-import { selectAppData as selectAppData8, selectPeers as selectPeers4, selectPeerScreenSharing as selectPeerScreenSharing3, useEmbedShare, useHMSStore as useHMSStore81 } from "@100mslive/react-sdk";
+import { selectAppData as selectAppData10, selectPeers as selectPeers4, selectPeerScreenSharing as selectPeerScreenSharing3, useEmbedShare, useHMSStore as useHMSStore81 } from "@100mslive/react-sdk";
 var EmbedView = () => {
   return /* @__PURE__ */ React148.createElement(EmbedScreenShareView, null, /* @__PURE__ */ React148.createElement(EmbedComponent, null));
 };
@@ -28511,7 +28525,7 @@ var EmbedScreenShareView = ({ children }) => {
   return /* @__PURE__ */ React148.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React148.createElement(ProminenceLayout.ProminentSection, null, children), /* @__PURE__ */ React148.createElement(SecondaryTiles, { peers: smallTilePeers }));
 };
 var EmbedComponent = () => {
-  const embedConfig = useHMSStore81(selectAppData8(APP_DATA.embedConfig));
+  const embedConfig = useHMSStore81(selectAppData10(APP_DATA.embedConfig));
   const resetConfig = useResetEmbedConfig();
   const { iframeRef, startEmbedShare, isEmbedShareInProgress } = useEmbedShare(resetConfig);
   useEffect45(() => {
@@ -28680,7 +28694,7 @@ var useCloseScreenshareWhiteboard = () => {
 };
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var HLSView = React151.lazy(() => import("./HLSView-CTZXD762.js"));
+var HLSView = React151.lazy(() => import("./HLSView-HUMJOIWO.js"));
 var VideoStreamingSection = ({
   screenType,
   elements,
@@ -28689,7 +28703,7 @@ var VideoStreamingSection = ({
   var _a8;
   const localPeerRole = useHMSStore83(selectLocalPeerRoleName6);
   const isConnected = useHMSStore83(selectIsConnectedToRoom9);
-  const hmsActions = useHMSActions45();
+  const hmsActions = useHMSActions46();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFConfig();
@@ -28769,17 +28783,17 @@ init_define_process_env();
 // src/Prebuilt/components/Header/Header.tsx
 init_define_process_env();
 import React154 from "react";
-import { useMedia as useMedia34 } from "react-use";
+import { useMedia as useMedia35 } from "react-use";
 import { HMSRoomState as HMSRoomState6, selectRoomState as selectRoomState6, useHMSStore as useHMSStore85 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Header/RoomDetailsHeader.tsx
 init_define_process_env();
 import React152 from "react";
-import { useMedia as useMedia33 } from "react-use";
+import { useMedia as useMedia34 } from "react-use";
 import { ChevronRightIcon as ChevronRightIcon5 } from "@100mslive/react-icons";
 var RoomDetailsHeader = () => {
   const { title, description } = useRoomLayoutHeader();
-  const isMobile = useMedia33(config.media.md);
+  const isMobile = useMedia34(config.media.md);
   const clipLength = 30;
   const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
   const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
@@ -28805,7 +28819,7 @@ import {
   selectLocalVideoTrackID as selectLocalVideoTrackID3,
   selectVideoTrackByID as selectVideoTrackByID7,
   useDevices as useDevices3,
-  useHMSActions as useHMSActions46,
+  useHMSActions as useHMSActions47,
   useHMSStore as useHMSStore84
 } from "@100mslive/react-sdk";
 import {
@@ -28817,7 +28831,7 @@ import {
   SpeakerIcon as SpeakerIcon4
 } from "@100mslive/react-icons";
 var CamaraFlipActions = () => {
-  const actions = useHMSActions46();
+  const actions = useHMSActions47();
   const { allDevices } = useDevices3();
   const { videoInput } = allDevices;
   const isVideoOn = useHMSStore84(selectIsLocalVideoEnabled8);
@@ -28854,7 +28868,7 @@ var AudioActions = () => {
     availableAudioDevices = audioOutput;
     selectedAudio = selectedDeviceIDs.audioOutput;
   }
-  const hmsActions = useHMSActions46();
+  const hmsActions = useHMSActions47();
   const audioFiltered = availableAudioDevices == null ? void 0 : availableAudioDevices.find((item) => !!item.label);
   const currentSelection = availableAudioDevices == null ? void 0 : availableAudioDevices.find((item) => item.deviceId === selectedAudio);
   if (!audioFiltered) {
@@ -28959,7 +28973,7 @@ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React153.createElement(Re
 // src/Prebuilt/components/Header/Header.tsx
 var Header2 = () => {
   const roomState = useHMSStore85(selectRoomState6);
-  const isMobile = useMedia34(config.media.md);
+  const isMobile = useMedia35(config.media.md);
   if (roomState !== HMSRoomState6.Connected) {
     return /* @__PURE__ */ React154.createElement(React154.Fragment, null);
   }
@@ -29006,9 +29020,9 @@ var ConferenceScreen = () => {
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const roomState = useHMSStore86(selectRoomState7);
   const isConnectedToRoom = useHMSStore86(selectIsConnectedToRoom10);
-  const hmsActions = useHMSActions47();
+  const hmsActions = useHMSActions48();
   const [hideControls, setHideControls] = useState65(false);
-  const dropdownList = useHMSStore86(selectAppData9(APP_DATA.dropdownList));
+  const dropdownList = useHMSStore86(selectAppData11(APP_DATA.dropdownList));
   const authTokenInAppData = useAuthToken();
   const headerRef = useRef26(null);
   const footerRef = useRef26(null);
@@ -29300,10 +29314,10 @@ var Init = () => {
 init_define_process_env();
 import { useEffect as useEffect53 } from "react";
 import {
-  selectAppData as selectAppData10,
+  selectAppData as selectAppData12,
   selectIsLocalAudioEnabled as selectIsLocalAudioEnabled2,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled9,
-  useHMSActions as useHMSActions48,
+  useHMSActions as useHMSActions49,
   useHMSVanillaStore as useHMSVanillaStore14
 } from "@100mslive/react-sdk";
 var isEvenListenersAttached = false;
@@ -29321,19 +29335,19 @@ var KeyboardInputManager = class {
       yield __privateGet(this, _actions).setLocalVideoEnabled(!enabled);
     }));
     __privateAdd(this, _hideSidepane, () => {
-      if (__privateGet(this, _store).getState(selectAppData10(APP_DATA.sidePane))) {
+      if (__privateGet(this, _store).getState(selectAppData12(APP_DATA.sidePane))) {
         __privateGet(this, _actions).setAppData(APP_DATA.sidePane, "");
       }
     });
     __privateAdd(this, _toggleStatsForNerds, () => {
-      const uiSettings = __privateGet(this, _store).getState(selectAppData10(APP_DATA.uiSettings));
+      const uiSettings = __privateGet(this, _store).getState(selectAppData12(APP_DATA.uiSettings));
       const statsEnabled = uiSettings.showStatsOnTiles;
       __privateGet(this, _actions).setAppData(APP_DATA.uiSettings, __spreadProps(__spreadValues({}, uiSettings), {
         showStatsOnTiles: !statsEnabled
       }));
     });
     __privateAdd(this, _toggleHlsStats, () => {
-      __privateGet(this, _actions).setAppData(APP_DATA.hlsStats, !__privateGet(this, _store).getState(selectAppData10(APP_DATA.hlsStats)));
+      __privateGet(this, _actions).setAppData(APP_DATA.hlsStats, !__privateGet(this, _store).getState(selectAppData12(APP_DATA.hlsStats)));
     });
     // eslint-disable-next-line complexity
     __privateAdd(this, _keyDownHandler, (e) => __async(this, null, function* () {
@@ -29392,7 +29406,7 @@ _bind = new WeakMap();
 _unbind = new WeakMap();
 var KeyboardHandler = () => {
   const store = useHMSVanillaStore14();
-  const actions = useHMSActions48();
+  const actions = useHMSActions49();
   useEffect53(() => {
     const keyboardManager = new KeyboardInputManager(store, actions);
     keyboardManager.bindAllShortcuts();
@@ -29529,12 +29543,12 @@ var LeaveScreen = () => {
 // src/Prebuilt/components/MwebLandscapePrompt.tsx
 init_define_process_env();
 import React160, { useEffect as useEffect55, useState as useState66 } from "react";
-import { useMedia as useMedia35 } from "react-use";
+import { useMedia as useMedia36 } from "react-use";
 import { match as match14, P as P5 } from "ts-pattern";
 import { RefreshIcon } from "@100mslive/react-icons";
 var MwebLandscapePrompt = () => {
   const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState66(false);
-  const isLandscape = useMedia35(config.media.ls);
+  const isLandscape = useMedia36(config.media.ls);
   const isLandscapeHLSStream = useLandscapeHLSStream();
   useEffect55(() => {
     var _a8;
@@ -29677,7 +29691,7 @@ init_define_process_env();
 // src/Prebuilt/components/Toast/ToastConfig.jsx
 init_define_process_env();
 import React163, { useCallback as useCallback35 } from "react";
-import { selectPeerByID as selectPeerByID5, useHMSActions as useHMSActions49, useHMSStore as useHMSStore90 } from "@100mslive/react-sdk";
+import { selectPeerByID as selectPeerByID5, useHMSActions as useHMSActions50, useHMSStore as useHMSStore90 } from "@100mslive/react-sdk";
 import {
   ChatUnreadIcon as ChatUnreadIcon2,
   ConnectivityIcon,
@@ -29696,7 +29710,7 @@ var ChatAction = React163.forwardRef((_2, ref) => {
 });
 var HandRaiseAction = React163.forwardRef(({ id = "", isSingleHandRaise = true }, ref) => {
   var _a8, _b7, _c;
-  const hmsActions = useHMSActions49();
+  const hmsActions = useHMSActions50();
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const peer = useHMSStore90(selectPeerByID5(id));
@@ -29731,27 +29745,6 @@ var HandRaiseAction = React163.forwardRef(({ id = "", isSingleHandRaise = true }
   return /* @__PURE__ */ React163.createElement(Button, { outlined: true, as: "div", variant: "standard", css: { w: "max-content" }, onClick: onClickHandler, ref }, isSingleHandRaise ? bring_to_stage_label : "View");
 });
 var 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__ */ React163.createElement(PeopleAddIcon2, null)
-        };
-      }
-      return {
-        title: `${(_b7 = notification.data[notification.data.length - 1]) == null ? void 0 : _b7.name} and ${notification.data.length - 1} others joined`,
-        icon: /* @__PURE__ */ React163.createElement(PeopleAddIcon2, null)
-      };
-    },
-    multiple: (notifications) => {
-      return {
-        title: `${notifications[0].data.name} and ${notifications.length - 1} others joined`,
-        icon: /* @__PURE__ */ React163.createElement(PeopleAddIcon2, null)
-      };
-    }
-  },
   PEER_JOINED: {
     single: function(notification) {
       var _a8;
@@ -29986,11 +29979,7 @@ var InitErrorModal = () => {
 init_define_process_env();
 import { useEffect as useEffect59 } from "react";
 import { HMSNotificationTypes as HMSNotificationTypes4, useHMSNotifications as useHMSNotifications4 } from "@100mslive/react-sdk";
-var notificationTypes = [
-  HMSNotificationTypes4.PEER_LIST,
-  HMSNotificationTypes4.PEER_JOINED,
-  HMSNotificationTypes4.PEER_LEFT
-];
+var notificationTypes = [HMSNotificationTypes4.PEER_JOINED, HMSNotificationTypes4.PEER_LEFT];
 var PeerNotifications = () => {
   const notification = useHMSNotifications4(notificationTypes);
   const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
@@ -30002,11 +29991,6 @@ var PeerNotifications = () => {
     }
     console.debug(`[${notification.type}]`, notification);
     switch (notification.type) {
-      case HMSNotificationTypes4.PEER_LIST:
-        if (!isPeerJoinSubscribed || notification.data.length === 0) {
-          return;
-        }
-        break;
       case HMSNotificationTypes4.PEER_JOINED:
         if (!isPeerJoinSubscribed) {
           return;
@@ -30031,7 +30015,7 @@ var PeerNotifications = () => {
 // src/Prebuilt/components/Notifications/PermissionErrorModal.tsx
 init_define_process_env();
 import React165, { useEffect as useEffect60, useState as useState68 } from "react";
-import { useMedia as useMedia36 } from "react-use";
+import { useMedia as useMedia37 } from "react-use";
 import { HMSNotificationTypes as HMSNotificationTypes5, useHMSNotifications as useHMSNotifications5 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/images/android-perm-1.png
@@ -30045,7 +30029,7 @@ function PermissionErrorModal() {
   const notification = useHMSNotifications5(HMSNotificationTypes5.ERROR);
   const [deviceType, setDeviceType] = useState68("");
   const [isSystemError, setIsSystemError] = useState68(false);
-  const isMobile = useMedia36(config.media.md);
+  const isMobile = useMedia37(config.media.md);
   useEffect60(() => {
     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"))) {
@@ -30157,12 +30141,12 @@ init_define_process_env();
 import React167, { useEffect as useEffect62, useState as useState70 } from "react";
 import {
   HMSNotificationTypes as HMSNotificationTypes7,
-  useHMSActions as useHMSActions50,
+  useHMSActions as useHMSActions51,
   useHMSNotifications as useHMSNotifications7
 } from "@100mslive/react-sdk";
 import { MicOnIcon as MicOnIcon5 } from "@100mslive/react-icons";
 var TrackBulkUnmuteModal = () => {
-  const hmsActions = useHMSActions50();
+  const hmsActions = useHMSActions51();
   const [muteNotification, setMuteNotification] = useState70(null);
   const notification = useHMSNotifications7([
     HMSNotificationTypes7.CHANGE_MULTI_TRACK_STATE_REQUEST,
@@ -30231,12 +30215,12 @@ init_define_process_env();
 import React168, { useEffect as useEffect64, useState as useState71 } from "react";
 import {
   HMSNotificationTypes as HMSNotificationTypes9,
-  useHMSActions as useHMSActions51,
+  useHMSActions as useHMSActions52,
   useHMSNotifications as useHMSNotifications9
 } from "@100mslive/react-sdk";
 import { MicOnIcon as MicOnIcon6 } from "@100mslive/react-icons";
 var TrackUnmuteModal = () => {
-  const hmsActions = useHMSActions51();
+  const hmsActions = useHMSActions52();
   const notification = useHMSNotifications9([
     HMSNotificationTypes9.CHANGE_TRACK_STATE_REQUEST,
     HMSNotificationTypes9.ROOM_ENDED,
@@ -30494,7 +30478,7 @@ var ToastContainer = () => {
 // src/Prebuilt/layouts/Sheet.tsx
 init_define_process_env();
 import React174 from "react";
-import { selectAppData as selectAppData11, useHMSStore as useHMSStore94 } from "@100mslive/react-sdk";
+import { selectAppData as selectAppData13, useHMSStore as useHMSStore94 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/RoomDetails/RoomDetailsSheet.tsx
 init_define_process_env();
@@ -30518,7 +30502,7 @@ var RoomDetailsSheet = () => {
 
 // src/Prebuilt/layouts/Sheet.tsx
 var Sheet2 = () => {
-  const sheet = useHMSStore94(selectAppData11(APP_DATA.sheet));
+  const sheet = useHMSStore94(selectAppData13(APP_DATA.sheet));
   let ViewComponent;
   if (sheet === SHEET_OPTIONS.ROOM_DETAILS) {
     ViewComponent = /* @__PURE__ */ React174.createElement(RoomDetailsSheet, null);
@@ -30529,7 +30513,7 @@ var Sheet2 = () => {
 // src/Prebuilt/plugins/FlyingEmoji.jsx
 init_define_process_env();
 import React175, { useCallback as useCallback37, useEffect as useEffect67, useMemo as useMemo21, useState as useState73 } from "react";
-import { useMedia as useMedia37 } from "react-use";
+import { useMedia as useMedia38 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID17,
   selectPeerNameByID as selectPeerNameByID6,
@@ -30564,7 +30548,7 @@ function FlyingEmoji() {
   const localPeerId = useHMSStore95(selectLocalPeerID17);
   const vanillaStore = useHMSVanillaStore17();
   const [emojis, setEmojis] = useState73([]);
-  const isMobile = useMedia37(config.media.md);
+  const isMobile = useMedia38(config.media.md);
   const startingPoints = useMemo21(() => getStartingPoints(isMobile), [isMobile]);
   const showFlyingEmoji = useCallback37(
     ({ emojiId, senderId }) => {
@@ -30660,9 +30644,9 @@ function FlyingEmoji() {
 // src/Prebuilt/plugins/RemoteStopScreenshare.jsx
 init_define_process_env();
 import React176, { useCallback as useCallback38 } from "react";
-import { useCustomEvent as useCustomEvent6, useHMSActions as useHMSActions52 } from "@100mslive/react-sdk";
+import { useCustomEvent as useCustomEvent6, useHMSActions as useHMSActions53 } from "@100mslive/react-sdk";
 function RemoteStopScreenshare() {
-  const actions = useHMSActions52();
+  const actions = useHMSActions53();
   const onRemoteStopScreenshare = useCallback38(() => __async(this, null, function* () {
     yield actions.setScreenShareEnabled(false);
   }), [actions]);
@@ -30679,7 +30663,7 @@ import { useCallback as useCallback39, useEffect as useEffect68, useRef as useRe
 import {
   selectIsConnectedToRoom as selectIsConnectedToRoom12,
   selectPermissions as selectPermissions20,
-  useHMSActions as useHMSActions53,
+  useHMSActions as useHMSActions54,
   useHMSStore as useHMSStore96,
   useRecordingStreaming as useRecordingStreaming12
 } from "@100mslive/react-sdk";
@@ -30687,7 +30671,7 @@ var useAutoStartStreaming = () => {
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const permissions = useHMSStore96(selectPermissions20);
   const showStreamingUI = useShowStreamingUI();
-  const hmsActions = useHMSActions53();
+  const hmsActions = useHMSActions54();
   const isConnected = useHMSStore96(selectIsConnectedToRoom12);
   const { isHLSRunning, isRTMPRunning, isHLSRecordingOn, isBrowserRecordingOn } = useRecordingStreaming12();
   const streamStartedRef = useRef27(false);
@@ -30878,7 +30862,7 @@ var AppStates = ({ activeState }) => {
 };
 var BackSwipe = () => {
   const isConnectedToRoom = useHMSStore97(selectIsConnectedToRoom13);
-  const hmsActions = useHMSActions54();
+  const hmsActions = useHMSActions55();
   useEffect69(() => {
     const onRouteLeave = () => __async(void 0, null, function* () {
       if (isConnectedToRoom) {
@@ -31054,4 +31038,4 @@ lodash/lodash.js:
    * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
    *)
 */
-//# sourceMappingURL=chunk-NDLMRKFR.js.map
+//# sourceMappingURL=chunk-IDAPJGWC.js.map