@100mslive/roomkit-react 0.2.8-alpha.2 → 0.2.8-alpha.4

package/dist/{chunk-2Y4FJB25.js → chunk-J4NOQ2YL.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_64ac3c86-40ab-403e-a017-c093022d1c76", 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.21 npm/? node/v18.19.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.9.8-alpha.2", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_64ac3c86-40ab-403e-a017-c093022d1c76", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.19.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.12.8-alpha.2", 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.7", 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.6", 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: "598", 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.7/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240218.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.0/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.0-alpha.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:19747", 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.2.8-alpha.2", 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", GITHUB_RUN_ID: "8062926487", 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_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: "ae7569036b49c02d22414e5de343119c48b4aa91", 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: "44d2be283b30c251d7dc48c091d54f17d411a2dda6d785c30b12ad136dd5d665", 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--1709028414028-0.350708274654735:/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.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1709028413823-0.9448069636011944:/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.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1709028390890-0.9859671975610973:/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.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1709028390704-0.5515660108396596:/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.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.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.19.1/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_2aa6a4dd-5a3c-4a91-bbba-30a25166da92", INVOCATION_ID: "e9a624d34aff4ec080a253260e936bfd", NPM_CONFIG_USERCONFIG: "/home/runner/work/_temp/.npmrc", RUNNER_TOOL_CACHE: "/opt/hostedtoolcache", GOROOT_1_19_X64: "/opt/hostedtoolcache/go/1.19.13/x64", 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: "451", GITHUB_TRIGGERING_ACTOR: "KaustubhKumar05", 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 117", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "publish-alpha", GITHUB_REPOSITORY: "100mslive/web-sdks", 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.9.8-alpha.2", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.2.8-alpha.2", 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: "ae7569036b49c02d22414e5de343119c48b4aa91", 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: "KaustubhKumar05", 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_64ac3c86-40ab-403e-a017-c093022d1c76", JAVA_HOME: "/usr/lib/jvm/temurin-11-jdk-amd64", PWD: "/home/runner/work/web-sdks/web-sdks/packages/roomkit-react", GITHUB_ACTOR_ID: "57426646", 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_64ac3c86-40ab-403e-a017-c093022d1c76", 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.154/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_64ac3c86-40ab-403e-a017-c093022d1c76" };
+    define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_5ede396e-fae2-4c22-afdd-0f454da9e128", 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.21 npm/? node/v18.19.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.9.8-alpha.4", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_5ede396e-fae2-4c22-afdd-0f454da9e128", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.19.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.12.8-alpha.4", 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.7", 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.6", 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: "586", 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.7/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240218.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.0/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.0-alpha.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:18095", 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.2.8-alpha.4", 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", GITHUB_RUN_ID: "8065543694", 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_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: "ec046697fe2d6a12f4be23b04f217cf38e63af34", 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: "798f06e695440a486dc5dbd94ebf819e9180ace412072617faa664fb3749cba4", 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--1709040556510-0.8027960450697429:/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.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1709040556303-0.7176284115096692:/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.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1709040534093-0.6805113006718821:/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.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1709040533915-0.45728804418563085:/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.19.1/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.1/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.19.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.19.1/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_b556612a-3367-406c-a84b-37ad483933bb", INVOCATION_ID: "4cb2ffbe4e4a46ebb260c8a8827715ce", NPM_CONFIG_USERCONFIG: "/home/runner/work/_temp/.npmrc", RUNNER_TOOL_CACHE: "/opt/hostedtoolcache", GOROOT_1_19_X64: "/opt/hostedtoolcache/go/1.19.13/x64", 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: "453", 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 272", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "publish-alpha", GITHUB_REPOSITORY: "100mslive/web-sdks", 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.9.8-alpha.4", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.2.8-alpha.4", 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: "ec046697fe2d6a12f4be23b04f217cf38e63af34", 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_5ede396e-fae2-4c22-afdd-0f454da9e128", 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_5ede396e-fae2-4c22-afdd-0f454da9e128", 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.154/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_5ede396e-fae2-4c22-afdd-0f454da9e128" };
   }
 });
 
@@ -12873,6 +12873,7 @@ import {
   selectAppData as selectAppData9,
   selectIsConnectedToRoom as selectIsConnectedToRoom10,
   selectRoomState as selectRoomState7,
+  useAVToggle as useAVToggle7,
   useHMSActions as useHMSActions46,
   useHMSStore as useHMSStore82
 } from "@100mslive/react-sdk";
@@ -12880,7 +12881,7 @@ import {
 // src/Prebuilt/components/Footer/Footer.tsx
 init_define_process_env();
 import React77, { useEffect as useEffect20 } from "react";
-import { useMedia as useMedia10 } from "react-use";
+import { useMedia as useMedia11 } from "react-use";
 import { Chat_ChatState } from "@100mslive/types-prebuilt/elements/chat";
 import { useAVToggle as useAVToggle4 } from "@100mslive/react-sdk";
 
@@ -14079,15 +14080,15 @@ var EmojiReaction = () => {
 // src/Prebuilt/components/Leave/LeaveRoom.tsx
 init_define_process_env();
 import React40 from "react";
-import { useMedia as useMedia5 } from "react-use";
+import { useMedia as useMedia6 } from "react-use";
 import {
   selectHLSState as selectHLSState3,
-  selectIsConnectedToRoom as selectIsConnectedToRoom4,
+  selectIsConnectedToRoom as selectIsConnectedToRoom5,
   selectPeersByCondition,
   selectPermissions as selectPermissions4,
   selectRolesMap,
   useHMSActions as useHMSActions8,
-  useHMSStore as useHMSStore12
+  useHMSStore as useHMSStore13
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx
@@ -14344,19 +14345,98 @@ var DesktopLeaveRoom = ({
 
 // src/Prebuilt/components/Leave/MwebLeaveRoom.tsx
 init_define_process_env();
-import React39, { Fragment as Fragment6, useState as useState13 } from "react";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom3, selectPermissions as selectPermissions3, useHMSStore as useHMSStore11, useRecordingStreaming as useRecordingStreaming4 } from "@100mslive/react-sdk";
-import { ExitIcon as ExitIcon2, StopIcon as StopIcon2 } from "@100mslive/react-icons";
+import React39, { Fragment as Fragment6, useState as useState14 } from "react";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom4, selectPermissions as selectPermissions3, useHMSStore as useHMSStore12, useRecordingStreaming as useRecordingStreaming4 } from "@100mslive/react-sdk";
+import { CrossIcon as CrossIcon6, ExitIcon as ExitIcon2, StopIcon as StopIcon2 } from "@100mslive/react-icons";
+
+// src/Prebuilt/common/hooks.ts
+init_define_process_env();
+import { useEffect as useEffect12, useRef as useRef8, useState as useState13 } from "react";
+import { useMedia as useMedia5 } from "react-use";
+import { JoinForm_JoinBtnType as JoinForm_JoinBtnType2 } from "@100mslive/types-prebuilt/elements/join_form";
+import {
+  parsedUserAgent as parsedUserAgent2,
+  selectAvailableRoleNames as selectAvailableRoleNames2,
+  selectIsConnectedToRoom as selectIsConnectedToRoom3,
+  selectPeerCount as selectPeerCount2,
+  selectPeerMetadata,
+  selectPeers,
+  selectRemotePeers,
+  useHMSStore as useHMSStore11,
+  useHMSVanillaStore as useHMSVanillaStore4
+} from "@100mslive/react-sdk";
+var useFilteredRoles = () => {
+  var _a8;
+  const { elements } = useRoomLayoutConferencingScreen();
+  return ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.roles_whitelist) || [];
+};
+var useDefaultChatSelection = () => {
+  var _a8;
+  const { elements } = useRoomLayoutConferencingScreen();
+  const roles = useFilteredRoles();
+  if ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.public_chat_enabled) {
+    return CHAT_SELECTOR.EVERYONE;
+  }
+  if (roles.length > 0) {
+    return roles[0];
+  }
+  return "";
+};
+var useShowStreamingUI = () => {
+  var _a8, _b7, _c;
+  const layout = useRoomLayout();
+  const { join_form } = ((_c = (_b7 = (_a8 = layout == null ? void 0 : layout.screens) == null ? void 0 : _a8.preview) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements) || {};
+  return (join_form == null ? void 0 : join_form.join_btn_type) === JoinForm_JoinBtnType2.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE;
+};
+var useParticipants = (params) => {
+  var _a8;
+  const isConnected = useHMSStore11(selectIsConnectedToRoom3);
+  const peerCount = useHMSStore11(selectPeerCount2);
+  const availableRoles = useHMSStore11(selectAvailableRoleNames2);
+  let participantList = useHMSStore11(isConnected ? selectPeers : selectRemotePeers);
+  const rolesWithParticipants = Array.from(new Set(participantList.map((peer) => peer.roleName)));
+  const vanillaStore = useHMSVanillaStore4();
+  if ((_a8 = params == null ? void 0 : params.metadata) == null ? void 0 : _a8.isHandRaised) {
+    participantList = participantList.filter((peer) => {
+      return vanillaStore.getState(selectPeerMetadata(peer.id)).isHandRaised;
+    });
+  }
+  if ((params == null ? void 0 : params.role) && availableRoles.includes(params.role)) {
+    participantList = participantList.filter((peer) => peer.roleName === params.role);
+  }
+  if (params == null ? void 0 : params.search) {
+    const search = params.search;
+    participantList = participantList.filter((peer) => peer.name.toLowerCase().includes(search));
+  }
+  return { participants: participantList, isConnected, peerCount, rolesWithParticipants };
+};
+var useIsLandscape = () => {
+  const isMobile = parsedUserAgent2.getDevice().type === "mobile";
+  const isLandscape = useMedia5(config.media.ls);
+  return isMobile && isLandscape;
+};
+var useLandscapeHLSStream = () => {
+  const isLandscape = useIsLandscape();
+  const { screenType } = useRoomLayoutConferencingScreen();
+  return isLandscape && screenType === "hls_live_streaming";
+};
+var useMobileHLSStream = () => {
+  const isMobile = useMedia5(config.media.md);
+  const { screenType } = useRoomLayoutConferencingScreen();
+  return isMobile && screenType === "hls_live_streaming";
+};
+
+// src/Prebuilt/components/Leave/MwebLeaveRoom.tsx
 var MwebLeaveRoom = ({
   leaveRoom,
-  screenType,
   endRoom
 }) => {
-  const [open, setOpen] = useState13(false);
-  const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState13(false);
-  const [showEndStreamAlert, setShowEndStreamAlert] = useState13(false);
-  const isConnected = useHMSStore11(selectIsConnectedToRoom3);
-  const permissions = useHMSStore11(selectPermissions3);
+  const [open, setOpen] = useState14(false);
+  const { screenType } = useRoomLayoutConferencingScreen();
+  const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState14(false);
+  const [showEndStreamAlert, setShowEndStreamAlert] = useState14(false);
+  const isConnected = useHMSStore12(selectIsConnectedToRoom4);
+  const permissions = useHMSStore12(selectPermissions3);
   const { isStreamingOn } = useRecordingStreaming4();
   const showStream = screenType !== "hls_live_streaming" && isStreamingOn && (permissions == null ? void 0 : permissions.hlsStreaming);
   const showLeaveOptions = (permissions == null ? void 0 : permissions.hlsStreaming) && isStreamingOn || (permissions == null ? void 0 : permissions.endRoom);
@@ -14364,18 +14444,7 @@ var MwebLeaveRoom = ({
   if (!permissions || !isConnected) {
     return null;
   }
-  return /* @__PURE__ */ React39.createElement(Fragment6, null, showLeaveOptions ? /* @__PURE__ */ React39.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React39.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ React39.createElement(
-    LeaveIconButton,
-    {
-      key: "LeaveRoom",
-      "data-testid": "leave_room_btn",
-      css: {
-        borderTopRightRadius: "$1",
-        borderBottomRightRadius: "$1"
-      }
-    },
-    /* @__PURE__ */ React39.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React39.createElement(Box, null, /* @__PURE__ */ React39.createElement(ExitIcon2, { style: { transform: "rotate(180deg)" } })))
-  )), /* @__PURE__ */ React39.createElement(Sheet.Content, null, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React39.createElement(Fragment6, null, showLeaveOptions ? /* @__PURE__ */ React39.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React39.createElement(Sheet.Trigger, { asChild: true }, /* @__PURE__ */ React39.createElement(LeaveButton, { onClick: () => setOpen(!open) })), /* @__PURE__ */ React39.createElement(Sheet.Content, null, /* @__PURE__ */ React39.createElement(
     LeaveCard,
     {
       title: showStream ? "Leave Stream" : "Leave Session",
@@ -14402,7 +14471,7 @@ var MwebLeaveRoom = ({
         setShowEndStreamAlert(true);
       }
     }
-  ))) : /* @__PURE__ */ React39.createElement(LeaveIconButton, { key: "LeaveRoom", "data-testid": "leave_room_btn", onClick: () => setShowLeaveRoomAlert(true) }, /* @__PURE__ */ React39.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React39.createElement(Box, null, /* @__PURE__ */ React39.createElement(ExitIcon2, { style: { transform: "rotate(180deg)" } })))), /* @__PURE__ */ React39.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ React39.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React39.createElement(
+  ))) : /* @__PURE__ */ React39.createElement(LeaveButton, { onClick: () => setShowLeaveRoomAlert(true) }), /* @__PURE__ */ React39.createElement(Sheet.Root, { open: showEndStreamAlert, onOpenChange: setShowEndStreamAlert }, /* @__PURE__ */ React39.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React39.createElement(
     EndSessionContent,
     {
       setShowEndStreamAlert,
@@ -14411,22 +14480,41 @@ var MwebLeaveRoom = ({
     }
   ))), /* @__PURE__ */ React39.createElement(Sheet.Root, { open: showLeaveRoomAlert, onOpenChange: setShowLeaveRoomAlert }, /* @__PURE__ */ React39.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$10", pb: "$12" } }, /* @__PURE__ */ React39.createElement(LeaveSessionContent, { setShowLeaveRoomAlert, leaveRoom }))));
 };
+var LeaveButton = ({ onClick }) => {
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
+  return isMobileHLSStream || isLandscapeHLSStream ? /* @__PURE__ */ React39.createElement(IconButton, { key: "LeaveRoom", "data-testid": "leave_room_btn", onClick: () => onClick() }, /* @__PURE__ */ React39.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React39.createElement(Box, null, /* @__PURE__ */ React39.createElement(CrossIcon6, null)))) : /* @__PURE__ */ React39.createElement(
+    LeaveIconButton,
+    {
+      key: "LeaveRoom",
+      "data-testid": "leave_room_btn",
+      css: {
+        borderTopRightRadius: "$1",
+        borderBottomRightRadius: "$1"
+      },
+      onClick: () => onClick()
+    },
+    /* @__PURE__ */ React39.createElement(Tooltip, { title: "Leave Room" }, /* @__PURE__ */ React39.createElement(Box, null, /* @__PURE__ */ React39.createElement(ExitIcon2, { style: { transform: "rotate(180deg)" } })))
+  );
+};
 
 // src/Prebuilt/components/Leave/LeaveRoom.tsx
 var LeaveRoom = ({ screenType }) => {
-  const isConnected = useHMSStore12(selectIsConnectedToRoom4);
-  const permissions = useHMSStore12(selectPermissions4);
-  const isMobile = useMedia5(config.media.md);
-  const rolesMap = useHMSStore12(selectRolesMap);
+  const isConnected = useHMSStore13(selectIsConnectedToRoom5);
+  const permissions = useHMSStore13(selectPermissions4);
+  const isMobile = useMedia6(config.media.md);
+  const rolesMap = useHMSStore13(selectRolesMap);
   const streamingPermissionRoles = Object.keys(rolesMap).filter((roleName) => {
     const roleObj = rolesMap[roleName];
     return roleObj.permissions.hlsStreaming;
   });
-  const peersWithStreamingRights = useHMSStore12(
+  const peersWithStreamingRights = useHMSStore13(
     selectPeersByCondition((peer) => streamingPermissionRoles.includes(peer.roleName || ""))
   );
-  const hlsState = useHMSStore12(selectHLSState3);
+  const hlsState = useHMSStore13(selectHLSState3);
   const hmsActions = useHMSActions8();
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
   const stopStream = () => __async(void 0, null, function* () {
     try {
       if (permissions == null ? void 0 : permissions.hlsStreaming) {
@@ -14451,13 +14539,16 @@ var LeaveRoom = ({ screenType }) => {
   if (!permissions || !isConnected) {
     return null;
   }
-  return isMobile ? /* @__PURE__ */ React40.createElement(MwebLeaveRoom, { leaveRoom, screenType, endRoom }) : /* @__PURE__ */ React40.createElement(DesktopLeaveRoom, { leaveRoom, screenType, endRoom });
+  if (isMobileHLSStream || isLandscapeHLSStream) {
+    return /* @__PURE__ */ React40.createElement(MwebLeaveRoom, { leaveRoom, endRoom });
+  }
+  return isMobile ? /* @__PURE__ */ React40.createElement(MwebLeaveRoom, { leaveRoom, endRoom }) : /* @__PURE__ */ React40.createElement(DesktopLeaveRoom, { leaveRoom, screenType, endRoom });
 };
 
 // src/Prebuilt/components/MoreSettings/MoreSettings.tsx
 init_define_process_env();
 import React59 from "react";
-import { useMedia as useMedia8 } from "react-use";
+import { useMedia as useMedia9 } from "react-use";
 
 // src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
 init_define_process_env();
@@ -14472,8 +14563,8 @@ import React42 from "react";
 
 // src/Prebuilt/components/PIP/PIPComponent.jsx
 init_define_process_env();
-import React41, { useCallback as useCallback8, useEffect as useEffect12, useState as useState14 } from "react";
-import { selectPeers, selectTracksMap, useHMSActions as useHMSActions9, useHMSStore as useHMSStore13, useHMSVanillaStore as useHMSVanillaStore4 } from "@100mslive/react-sdk";
+import React41, { useCallback as useCallback8, 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 { PipIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/PIP/PIPManager.js
@@ -14931,9 +15022,9 @@ var MediaSession = new SetupMediaSession();
 
 // src/Prebuilt/components/PIP/PIPComponent.jsx
 var PIPComponent = ({ content = null }) => {
-  const [isPipOn, setIsPipOn] = useState14(PictureInPicture.isOn());
+  const [isPipOn, setIsPipOn] = useState15(PictureInPicture.isOn());
   const hmsActions = useHMSActions9();
-  const store = useHMSVanillaStore4();
+  const store = useHMSVanillaStore5();
   const onPipToggle = useCallback8(() => {
     if (!isPipOn) {
       PictureInPicture.start(hmsActions, setIsPipOn).catch((err) => console.error("error in starting pip", err));
@@ -14948,10 +15039,10 @@ var PIPComponent = ({ content = null }) => {
   return /* @__PURE__ */ React41.createElement(React41.Fragment, null, content ? /* @__PURE__ */ React41.createElement(Flex, { css: { w: "100%" }, onClick: () => onPipToggle(), "data-testid": "pip_btn" }, content) : /* @__PURE__ */ React41.createElement(Tooltip, { title: `${isPipOn ? "Deactivate" : "Activate"} picture in picture view` }, /* @__PURE__ */ React41.createElement(IconButton_default, { active: !isPipOn, key: "pip", onClick: () => onPipToggle(), "data-testid": "pip_btn" }, /* @__PURE__ */ React41.createElement(PipIcon, null))));
 };
 var ActivatedPIP = () => {
-  const tracksMap = useHMSStore13(selectTracksMap);
-  const storePeers = useHMSStore13(selectPeers);
+  const tracksMap = useHMSStore14(selectTracksMap);
+  const storePeers = useHMSStore14(selectPeers2);
   const pinnedTrack = usePinnedTrack();
-  useEffect12(() => {
+  useEffect13(() => {
     function updatePIP() {
       if (!PictureInPicture.isOn()) {
         return;
@@ -14981,68 +15072,6 @@ init_define_process_env();
 import React43, { forwardRef, useRef as useRef9, useState as useState16 } from "react";
 import { selectPeerByID, useHMSActions as useHMSActions10, useHMSStore as useHMSStore15 } from "@100mslive/react-sdk";
 import { CheckIcon as CheckIcon2, ChevronDownIcon as ChevronDownIcon3, ChevronUpIcon as ChevronUpIcon3 } from "@100mslive/react-icons";
-
-// src/Prebuilt/common/hooks.ts
-init_define_process_env();
-import { useEffect as useEffect13, useRef as useRef8, useState as useState15 } from "react";
-import { JoinForm_JoinBtnType as JoinForm_JoinBtnType2 } from "@100mslive/types-prebuilt/elements/join_form";
-import {
-  selectAvailableRoleNames as selectAvailableRoleNames2,
-  selectIsConnectedToRoom as selectIsConnectedToRoom5,
-  selectPeerCount as selectPeerCount2,
-  selectPeerMetadata,
-  selectPeers as selectPeers2,
-  selectRemotePeers,
-  useHMSStore as useHMSStore14,
-  useHMSVanillaStore as useHMSVanillaStore5
-} from "@100mslive/react-sdk";
-var useFilteredRoles = () => {
-  var _a8;
-  const { elements } = useRoomLayoutConferencingScreen();
-  return ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.roles_whitelist) || [];
-};
-var useDefaultChatSelection = () => {
-  var _a8;
-  const { elements } = useRoomLayoutConferencingScreen();
-  const roles = useFilteredRoles();
-  if ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.public_chat_enabled) {
-    return CHAT_SELECTOR.EVERYONE;
-  }
-  if (roles.length > 0) {
-    return roles[0];
-  }
-  return "";
-};
-var useShowStreamingUI = () => {
-  var _a8, _b7, _c;
-  const layout = useRoomLayout();
-  const { join_form } = ((_c = (_b7 = (_a8 = layout == null ? void 0 : layout.screens) == null ? void 0 : _a8.preview) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements) || {};
-  return (join_form == null ? void 0 : join_form.join_btn_type) === JoinForm_JoinBtnType2.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE;
-};
-var useParticipants = (params) => {
-  var _a8;
-  const isConnected = useHMSStore14(selectIsConnectedToRoom5);
-  const peerCount = useHMSStore14(selectPeerCount2);
-  const availableRoles = useHMSStore14(selectAvailableRoleNames2);
-  let participantList = useHMSStore14(isConnected ? selectPeers2 : selectRemotePeers);
-  const rolesWithParticipants = Array.from(new Set(participantList.map((peer) => peer.roleName)));
-  const vanillaStore = useHMSVanillaStore5();
-  if ((_a8 = params == null ? void 0 : params.metadata) == null ? void 0 : _a8.isHandRaised) {
-    participantList = participantList.filter((peer) => {
-      return vanillaStore.getState(selectPeerMetadata(peer.id)).isHandRaised;
-    });
-  }
-  if ((params == null ? void 0 : params.role) && availableRoles.includes(params.role)) {
-    participantList = participantList.filter((peer) => peer.roleName === params.role);
-  }
-  if (params == null ? void 0 : params.search) {
-    const search = params.search;
-    participantList = participantList.filter((peer) => peer.name.toLowerCase().includes(search));
-  }
-  return { participants: participantList, isConnected, peerCount, rolesWithParticipants };
-};
-
-// src/Prebuilt/components/RoleChangeModal.jsx
 var PeerName = forwardRef((_a8, ref) => {
   var _b7 = _a8, { children, maxWidth } = _b7, rest = __objRest(_b7, ["children", "maxWidth"]);
   return /* @__PURE__ */ React43.createElement(
@@ -15185,7 +15214,7 @@ import { InfoIcon } from "@100mslive/react-icons";
 // src/Prebuilt/primitives/DialogContent.jsx
 init_define_process_env();
 import React44, { useRef as useRef10 } from "react";
-import { CheckIcon as CheckIcon3, CloudUploadIcon, CrossIcon as CrossIcon6 } from "@100mslive/react-icons";
+import { CheckIcon as CheckIcon3, CloudUploadIcon, CrossIcon as CrossIcon7 } from "@100mslive/react-icons";
 var DialogContent = (_a8) => {
   var _b7 = _a8, { Icon: Icon4, title, closeable = true, children, css: css2, iconCSS = {} } = _b7, props = __objRest(_b7, ["Icon", "title", "closeable", "children", "css", "iconCSS"]);
   return /* @__PURE__ */ React44.createElement(Dialog.Portal, null, /* @__PURE__ */ React44.createElement(Dialog.Overlay, null), /* @__PURE__ */ React44.createElement(Dialog.Content, __spreadValues({ css: __spreadValues({ width: "min(600px, 100%)" }, css2) }, props), /* @__PURE__ */ React44.createElement(Dialog.Title, null, /* @__PURE__ */ React44.createElement(Flex, { justify: "between" }, /* @__PURE__ */ React44.createElement(Flex, { align: "center", css: { mb: "$1" } }, Icon4 ? /* @__PURE__ */ React44.createElement(Flex, { css: __spreadValues(__spreadValues({ mr: "$2", color: "$on_primary_high" }, flexCenter), iconCSS) }, /* @__PURE__ */ React44.createElement(Icon4, null)) : null, /* @__PURE__ */ React44.createElement(Text, { variant: "h6", inline: true }, title)), closeable && /* @__PURE__ */ React44.createElement(Dialog.DefaultClose, { "data-testid": "dialoge_cross_icon" }))), /* @__PURE__ */ React44.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }), /* @__PURE__ */ React44.createElement(Box, null, children)));
@@ -15195,7 +15224,7 @@ var ErrorDialog = (_a8) => {
   return /* @__PURE__ */ React44.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React44.createElement(
     DialogContent,
     __spreadValues({
-      Icon: CrossIcon6,
+      Icon: CrossIcon7,
       title,
       onInteractOutside: (e) => e.preventDefault(),
       onEscapeKeyDown: (e) => e.preventDefault(),
@@ -16130,7 +16159,7 @@ import {
 } from "@100mslive/react-sdk";
 import {
   BrbIcon as BrbIcon2,
-  CrossIcon as CrossIcon9,
+  CrossIcon as CrossIcon10,
   EmojiIcon as EmojiIcon2,
   HamburgerMenuIcon as HamburgerMenuIcon2,
   HandIcon as HandIcon2,
@@ -16146,7 +16175,7 @@ import {
 // src/Prebuilt/components/Header/StreamActions.tsx
 init_define_process_env();
 import React54, { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef13, useState as useState25 } from "react";
-import { useMedia as useMedia6 } from "react-use";
+import { useMedia as useMedia7 } from "react-use";
 
 // ../hms-video-store/dist/index.js
 init_define_process_env();
@@ -16231,8 +16260,8 @@ var createSelector = createSelectorCreator(defaultMemoize);
 // ../hms-video-store/dist/index.js
 var import_ua_parser_js = __toESM(require_ua_parser());
 var import_lodash3 = __toESM(require_lodash2());
-import { v4 as $a } from "uuid";
-import { v4 as Fa } from "uuid";
+import { v4 as Wa } from "uuid";
+import { v4 as Ga } from "uuid";
 
 // ../../node_modules/webrtc-adapter/src/js/adapter_core.js
 init_define_process_env();
@@ -16487,16 +16516,16 @@ function shimGetUserMedia(window2, browserDetails) {
       };
       if (r.ideal !== void 0) {
         cc.optional = cc.optional || [];
-        let oc = {};
+        let oc2 = {};
         if (typeof r.ideal === "number") {
-          oc[oldname_("min", key)] = r.ideal;
-          cc.optional.push(oc);
-          oc = {};
-          oc[oldname_("max", key)] = r.ideal;
-          cc.optional.push(oc);
+          oc2[oldname_("min", key)] = r.ideal;
+          cc.optional.push(oc2);
+          oc2 = {};
+          oc2[oldname_("max", key)] = r.ideal;
+          cc.optional.push(oc2);
         } else {
-          oc[oldname_("", key)] = r.ideal;
-          cc.optional.push(oc);
+          oc2[oldname_("", key)] = r.ideal;
+          cc.optional.push(oc2);
         }
       }
       if (r.exact !== void 0 && typeof r.exact !== "number") {
@@ -18329,48 +18358,48 @@ var adapter = adapterFactory({ window: typeof window === "undefined" ? void 0 :
 
 // ../hms-video-store/dist/index.js
 var import_lodash4 = __toESM(require_lodash2());
-import { v4 as Za } from "uuid";
-import { v4 as ro } from "uuid";
-import { v4 as no } from "uuid";
-import { EventEmitter2 as co } from "eventemitter2";
+import { v4 as eo } from "uuid";
+import { v4 as so } from "uuid";
+import { v4 as co } from "uuid";
+import { EventEmitter2 as lo } from "eventemitter2";
 var Lt = __toESM(require_lib());
-import { EventEmitter2 as Io } from "eventemitter2";
-import { v4 as Co } from "uuid";
-import { EventEmitter2 as Lo } from "eventemitter2";
-import Do from "eventemitter2";
-import { v4 as wo } from "uuid";
-import { v4 as Oo } from "uuid";
-var va = Object.defineProperty;
-var Ma = Object.defineProperties;
-var ya = Object.getOwnPropertyDescriptors;
-var Bt = Object.getOwnPropertySymbols;
+import { EventEmitter2 as Ro } from "eventemitter2";
+import { v4 as Lo } from "uuid";
+import { EventEmitter2 as Do } from "eventemitter2";
+import wo from "eventemitter2";
+import { v4 as _o } from "uuid";
+import { v4 as xo } from "uuid";
+var Ma = Object.defineProperty;
+var ya = Object.defineProperties;
+var ka = Object.getOwnPropertyDescriptors;
+var Vt = Object.getOwnPropertySymbols;
 var Gr = Object.prototype.hasOwnProperty;
 var $r = Object.prototype.propertyIsEnumerable;
-var Fr = (a2, e, t) => e in a2 ? va(a2, e, { enumerable: true, configurable: true, writable: true, value: t }) : a2[e] = t;
+var Fr = (a2, e, t) => e in a2 ? Ma(a2, e, { enumerable: true, configurable: true, writable: true, value: t }) : a2[e] = t;
 var S = (a2, e) => {
   for (var t in e || (e = {}))
     Gr.call(e, t) && Fr(a2, t, e[t]);
-  if (Bt)
-    for (var t of Bt(e))
+  if (Vt)
+    for (var t of Vt(e))
       $r.call(e, t) && Fr(a2, t, e[t]);
   return a2;
 };
-var y = (a2, e) => Ma(a2, ya(e));
+var y = (a2, e) => ya(a2, ka(e));
 var Yi = (a2, e) => {
   var t = {};
   for (var i in a2)
     Gr.call(a2, i) && e.indexOf(i) < 0 && (t[i] = a2[i]);
-  if (a2 != null && Bt)
-    for (var i of Bt(a2))
+  if (a2 != null && Vt)
+    for (var i of Vt(a2))
       e.indexOf(i) < 0 && $r.call(a2, i) && (t[i] = a2[i]);
   return t;
 };
-var Ea = (a2, e) => () => (e || a2((e = { exports: {} }).exports, e), e.exports);
-var dr = Ea((Yc, Ga) => {
-  Ga.exports = { version: "0.11.8-alpha.2", 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 ba = (a2, e) => () => (e || a2((e = { exports: {} }).exports, e), e.exports);
+var dr = ba((Xc, $a) => {
+  $a.exports = { version: "0.11.8-alpha.4", 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 Xi = ((n) => (n.Disconnected = "Disconnected", n.Preview = "Preview", n.Connecting = "Connecting", n.Connected = "Connected", n.Reconnecting = "Reconnecting", n.Disconnecting = "Disconnecting", n.Failed = "Failed", n))(Xi || {});
-var ba = ((e) => (e.CHAT = "chat", e))(ba || {});
+var Aa = ((e) => (e.CHAT = "chat", e))(Aa || {});
 var Wr = ((t) => (t.INFO = "info", t.ERROR = "error", t))(Wr || {});
 var Zi = ((C) => (C.PEER_JOINED = "PEER_JOINED", C.PEER_LEFT = "PEER_LEFT", C.PEER_LIST = "PEER_LIST", C.NEW_MESSAGE = "NEW_MESSAGE", C.ERROR = "ERROR", C.RECONNECTING = "RECONNECTING", C.RECONNECTED = "RECONNECTED", C.TRACK_ADDED = "TRACK_ADDED", C.TRACK_REMOVED = "TRACK_REMOVED", C.TRACK_MUTED = "TRACK_MUTED", C.TRACK_UNMUTED = "TRACK_UNMUTED", C.TRACK_DEGRADED = "TRACK_DEGRADED", C.TRACK_RESTORED = "TRACK_RESTORED", C.TRACK_DESCRIPTION_CHANGED = "TRACK_DESCRIPTION_CHANGED", C.ROLE_UPDATED = "ROLE_UPDATED", C.CHANGE_TRACK_STATE_REQUEST = "CHANGE_TRACK_STATE_REQUEST", C.CHANGE_MULTI_TRACK_STATE_REQUEST = "CHANGE_MULTI_TRACK_STATE_REQUEST", C.ROOM_ENDED = "ROOM_ENDED", C.REMOVED_FROM_ROOM = "REMOVED_FROM_ROOM", C.DEVICE_CHANGE_UPDATE = "DEVICE_CHANGE_UPDATE", C.PLAYLIST_TRACK_ENDED = "PLAYLIST_TRACK_ENDED", C.NAME_UPDATED = "NAME_UPDATED", C.METADATA_UPDATED = "METADATA_UPDATED", C.POLL_CREATED = "POLL_CREATED", C.POLL_STARTED = "POLL_STARTED", C.POLL_STOPPED = "POLL_STOPPED", C.POLL_VOTES_UPDATED = "POLL_VOTES_UPDATED", C.POLLS_LIST = "POLLS_LIST", C.HAND_RAISE_CHANGED = "HAND_RAISE_CHANGED", C))(Zi || {});
 var Kr = ((t) => (t.audio = "audio", t.video = "video", t))(Kr || {});
@@ -18379,7 +18408,7 @@ function He(a2, e) {
   if (e)
     for (let r of e.auxiliaryTracks) {
       let s = a2[r];
-      Aa(s) && (i = tt(s) ? s : i, t = it(s) ? s : t);
+      Ia(s) && (i = tt(s) ? s : i, t = it(s) ? s : t);
     }
   return { video: t, audio: i };
 }
@@ -18389,7 +18418,7 @@ function tt(a2) {
 function it(a2) {
   return a2 && a2.type === "video";
 }
-function Aa(a2) {
+function Ia(a2) {
   return a2 && a2.source === "screen";
 }
 function Gt(a2) {
@@ -18409,34 +18438,34 @@ function st(a2) {
   let e = false, t = false, i = false;
   return (r = a2 == null ? void 0 : a2.publishParams) != null && r.allowed && (e = a2.publishParams.allowed.includes("video"), t = a2.publishParams.allowed.includes("audio"), i = a2.publishParams.allowed.includes("screen")), { video: e, audio: t, screen: i };
 }
-var B = (a2) => a2.room;
-var Ia = (a2) => a2.errors;
-var bn = createSelector(Ia, (a2) => a2.length === 0 ? null : a2.at(-1));
-var An = createSelector(B, (a2) => a2.id);
+var V = (a2) => a2.room;
+var Ra = (a2) => a2.errors;
+var An = createSelector(Ra, (a2) => a2.length === 0 ? null : a2.at(-1));
+var In = createSelector(V, (a2) => a2.id);
 var G = (a2) => a2.peers;
 var $t = (a2) => a2.messages.byID;
 var Jr = (a2) => a2.messages.allIDs;
 var D = (a2) => a2.tracks;
 var er = (a2) => a2.appData;
-var Ra = (a2) => a2.speakers;
-var ye = createSelector([B], (a2) => a2 && a2.isConnected);
-var Hn = createSelector([ye, B], (a2, e) => a2 ? e.peerCount !== void 0 ? e.peerCount || 1 : e.peers.length : Math.max(e.peerCount !== void 0 ? e.peerCount : e.peers.length - 1, 0));
-var Ha = (a2) => a2.hideLocalPeer;
-var ae = createSelector([B, G, Ha], (a2, e, t) => t ? a2.peers.filter((i) => a2.localPeer !== i).map((i) => e[i]) : a2.peers.map((i) => e[i]));
-var Ca = createSelector(D, (a2) => Object.values(a2));
-var z = createSelector(B, G, (a2, e) => e[a2.localPeer]);
-var ue = createSelector(B, (a2) => a2.localPeer);
-var Cn = createSelector(z, (a2) => a2 == null ? void 0 : a2.name);
-var Ln = createSelector(z, (a2) => a2 == null ? void 0 : a2.roleName);
+var Ha = (a2) => a2.speakers;
+var ye = createSelector([V], (a2) => a2 && a2.isConnected);
+var Cn = createSelector([ye, V], (a2, e) => a2 ? e.peerCount !== void 0 ? e.peerCount || 1 : e.peers.length : Math.max(e.peerCount !== void 0 ? e.peerCount : e.peers.length - 1, 0));
+var Ca = (a2) => a2.hideLocalPeer;
+var ae = createSelector([V, G, Ca], (a2, e, t) => t ? a2.peers.filter((i) => a2.localPeer !== i).map((i) => e[i]) : a2.peers.map((i) => e[i]));
+var La = createSelector(D, (a2) => Object.values(a2));
+var z = createSelector(V, G, (a2, e) => e[a2.localPeer]);
+var ue = createSelector(V, (a2) => a2.localPeer);
+var Ln = createSelector(z, (a2) => a2 == null ? void 0 : a2.name);
+var Dn = createSelector(z, (a2) => a2 == null ? void 0 : a2.roleName);
 var Z = createSelector(z, (a2) => a2 == null ? void 0 : a2.audioTrack);
 var K = createSelector(z, (a2) => a2 == null ? void 0 : a2.videoTrack);
-var La = createSelector(z, (a2) => a2 == null ? void 0 : a2.auxiliaryTracks);
-var zr = createSelector([Z, K, La], (a2, e, t) => {
+var Da = createSelector(z, (a2) => a2 == null ? void 0 : a2.auxiliaryTracks);
+var zr = createSelector([Z, K, Da], (a2, e, t) => {
   let i = t ? [...t] : [];
   return a2 && i.unshift(a2), e && i.unshift(e), i;
 });
-var Dn = createSelector(ae, (a2) => a2.filter((e) => !e.isLocal));
-var wn = createSelector(G, Ra, (a2, e) => {
+var wn = createSelector(ae, (a2) => a2.filter((e) => !e.isLocal));
+var _n = createSelector(G, Ha, (a2, e) => {
   let t = Object.entries(e).sort((i, r) => {
     var n, l;
     let s = ((n = i[1]) == null ? void 0 : n.audioLevel) || 0;
@@ -18453,7 +18482,7 @@ var ir = createSelector(z, D, (a2, e) => {
   let { video: t, audio: i } = He(e, a2);
   return !!(t || i);
 });
-var Da = createSelector(G, D, (a2, e) => {
+var wa = createSelector(G, D, (a2, e) => {
   let t;
   for (let i in a2) {
     let r = a2[i], { video: s, audio: o } = He(e, r);
@@ -18463,15 +18492,15 @@ var Da = createSelector(G, D, (a2, e) => {
   }
   return t;
 });
-var Nn = createSelector(Da, (a2) => !!a2);
-var On = createSelector(G, D, (a2, e) => {
+var On = createSelector(wa, (a2) => !!a2);
+var xn = createSelector(G, D, (a2, e) => {
   for (let t in a2) {
     let i = a2[t], { audio: r, video: s } = He(e, i);
     if (!s && r)
       return i;
   }
 });
-var xn = createSelector(G, D, (a2, e) => {
+var Un = createSelector(G, D, (a2, e) => {
   let t = [], i = [];
   for (let r in a2) {
     let s = a2[r], { video: o, audio: n } = He(e, s);
@@ -18479,7 +18508,7 @@ var xn = createSelector(G, D, (a2, e) => {
   }
   return t.concat(i);
 });
-var Un = createSelector(G, D, (a2, e) => {
+var Vn = createSelector(G, D, (a2, e) => {
   for (let t in e) {
     let i = e[t];
     if (rt(i) && it(i) && i.peerId)
@@ -18493,48 +18522,48 @@ var Bn = createSelector(G, D, (a2, e) => {
       return a2[i.peerId];
   }
 });
-var Vn = createSelector(Ca, (a2) => a2.filter(qr));
-var Fn = createSelector(Jr, (a2) => a2.length);
-var Gn = createSelector($t, (a2) => Object.values(a2).filter((e) => !e.read).length);
+var Fn = createSelector(La, (a2) => a2.filter(qr));
+var Gn = createSelector(Jr, (a2) => a2.length);
+var $n = createSelector($t, (a2) => Object.values(a2).filter((e) => !e.read).length);
 var at = createSelector(Jr, $t, (a2, e) => {
   let t = [];
   return a2.forEach((i) => {
     t.push(e[i]);
   }), t;
 });
-var wa = createSelector(at, (a2) => a2.filter((e) => {
+var _a7 = createSelector(at, (a2) => a2.filter((e) => {
   var t;
   return !e.recipientPeer && !(e.recipientRoles && ((t = e.recipientRoles) == null ? void 0 : t.length) > 0);
 }));
-var $n = createSelector(wa, (a2) => a2.filter((e) => !e.read).length);
-var Y = createSelector([B], (a2) => a2 && a2.roomState);
+var Wn = createSelector(_a7, (a2) => a2.filter((e) => !e.read).length);
+var Y = createSelector([V], (a2) => a2 && a2.roomState);
 var Xr = createSelector(Y, (a2) => a2 === "Preview");
-var Wn = createSelector(B, (a2) => a2.roomState !== "Disconnected");
+var Kn = createSelector(V, (a2) => a2.roomState !== "Disconnected");
 var oe = (a2) => a2.roles;
-var Kn = createSelector([oe], (a2) => Object.keys(a2));
+var qn = createSelector([oe], (a2) => Object.keys(a2));
 var Wt = createSelector([z, oe], (a2, e) => a2 != null && a2.roleName ? e[a2.roleName] : null);
-var _a7 = (a2) => {
+var Na = (a2) => {
   var e;
   return (e = a2.preview) == null ? void 0 : e.asRole;
 };
-var Zr = createSelector([_a7, oe], (a2, e) => a2 ? e[a2] : null);
-var qn = createSelector([Wt], (a2) => {
+var Zr = createSelector([Na, oe], (a2, e) => a2 ? e[a2] : null);
+var jn = createSelector([Wt], (a2) => {
   var e;
   return (e = a2 == null ? void 0 : a2.subscribeParams) != null && e.subscribeToRoles ? a2.subscribeParams.subscribeToRoles.length > 0 : false;
 });
 var es = createSelector(Wt, (a2) => a2 == null ? void 0 : a2.permissions);
-var jn = createSelector(B, (a2) => a2.recording);
-var Jn = createSelector(B, (a2) => a2.rtmp);
-var Qn = createSelector(B, (a2) => a2.hls);
-var zn = createSelector(B, (a2) => a2.sessionId);
-var Yn = createSelector(B, (a2) => a2.startedAt);
-var Xn = createSelector(B, (a2) => !!a2.isLargeRoom);
-var Zn = createSelector(B, (a2) => !!a2.isEffectsEnabled);
-var ec = createSelector(B, (a2) => a2.effectsKey);
+var Jn = createSelector(V, (a2) => a2.recording);
+var Qn = createSelector(V, (a2) => a2.rtmp);
+var zn = createSelector(V, (a2) => a2.hls);
+var Yn = createSelector(V, (a2) => a2.sessionId);
+var Xn = createSelector(V, (a2) => a2.startedAt);
+var Zn = createSelector(V, (a2) => !!a2.isLargeRoom);
+var ec = createSelector(V, (a2) => !!a2.isEffectsEnabled);
+var tc = createSelector(V, (a2) => a2.effectsKey);
 var ts = (a2) => a2.polls;
-var sc = createSelector(ae, (a2) => a2.filter((e) => e.isHandRaised));
-var Na = (a2) => a2.whiteboards;
-var ac = createSelector(Na, (a2) => Object.values(a2)[0]);
+var ac = createSelector(ae, (a2) => a2.filter((e) => e.isHandRaised));
+var Oa = (a2) => a2.whiteboards;
+var oc = createSelector(Oa, (a2) => Object.values(a2)[0]);
 var rs = (a2 = "audio") => (e) => e.playlist[a2].list;
 var rr = (a2 = "audio") => (e) => e.playlist[a2].selection;
 var ss = (a2 = "audio") => (e) => e.playlist[a2].progress;
@@ -18552,7 +18581,7 @@ function b(a2) {
   return (e) => (t) => a2(t, e);
 }
 var ps = ((l) => (l[l.VERBOSE = 0] = "VERBOSE", l[l.DEBUG = 1] = "DEBUG", l[l.INFO = 2] = "INFO", l[l.WARN = 3] = "WARN", l[l.TIME = 4] = "TIME", l[l.TIMEEND = 5] = "TIMEEND", l[l.ERROR = 6] = "ERROR", l[l.NONE = 7] = "NONE", l))(ps || {});
-var Oa = typeof window != "undefined" && typeof window.expect != "undefined";
+var xa = typeof window != "undefined" && typeof window.expect != "undefined";
 var d = class {
   static v(e, ...t) {
     this.log(0, e, ...t);
@@ -18618,13 +18647,13 @@ var d = class {
       }
   }
 };
-d.level = Oa ? 7 : 0;
+d.level = xa ? 7 : 0;
 var pe = new import_ua_parser_js.UAParser();
 var w = typeof window != "undefined";
 var hs;
 var Ce = typeof window == "undefined" && !((hs = pe.getBrowser().name) != null && hs.toLowerCase().includes("electron"));
-var Ua = () => !Ce;
-var hc = Ua();
+var Va = () => !Ce;
+var mc = Va();
 var ms;
 var Ss;
 var Ts = ((Ss = (ms = pe.getBrowser()) == null ? void 0 : ms.name) == null ? void 0 : Ss.toLowerCase()) === "firefox";
@@ -18635,7 +18664,7 @@ function Ba() {
   }
   return "CUSTOM";
 }
-var Ve = Ba();
+var Be = Ba();
 var v = { WebSocketConnectionErrors: { FAILED_TO_CONNECT: 1e3, WEBSOCKET_CONNECTION_LOST: 1003, ABNORMAL_CLOSE: 1006 }, APIErrors: { SERVER_ERRORS: 2e3, INIT_CONFIG_NOT_AVAILABLE: 2002, ENDPOINT_UNREACHABLE: 2003, INVALID_TOKEN_FORMAT: 2004 }, TracksErrors: { GENERIC_TRACK: 3e3, CANT_ACCESS_CAPTURE_DEVICE: 3001, DEVICE_NOT_AVAILABLE: 3002, DEVICE_IN_USE: 3003, DEVICE_LOST_MIDWAY: 3004, NOTHING_TO_RETURN: 3005, INVALID_VIDEO_SETTINGS: 3006, CODEC_CHANGE_NOT_PERMITTED: 3007, AUTOPLAY_ERROR: 3008, OVER_CONSTRAINED: 3009, NO_AUDIO_DETECTED: 3010, SYSTEM_DENIED_PERMISSION: 3011, CURRENT_TAB_NOT_SHARED: 3012, AUDIO_PLAYBACK_ERROR: 3013, SELECTED_DEVICE_MISSING: 3014 }, WebrtcErrors: { CREATE_OFFER_FAILED: 4001, CREATE_ANSWER_FAILED: 4002, SET_LOCAL_DESCRIPTION_FAILED: 4003, SET_REMOTE_DESCRIPTION_FAILED: 4004, ICE_FAILURE: 4005, ICE_DISCONNECTED: 4006, STATS_FAILED: 4007 }, WebsocketMethodErrors: { SERVER_ERRORS: 5e3, ALREADY_JOINED: 5001, CANNOT_JOIN_PREVIEW_IN_PROGRESS: 5002 }, GenericErrors: { NOT_CONNECTED: 6e3, SIGNALLING: 6001, UNKNOWN: 6002, NOT_READY: 6003, JSON_PARSING_FAILED: 6004, TRACK_METADATA_MISSING: 6005, RTC_TRACK_MISSING: 6006, PEER_METADATA_MISSING: 6007, INVALID_ROLE: 6008, PREVIEW_IN_PROGRESS: 6009, MISSING_MEDIADEVICES: 6010, MISSING_RTCPEERCONNECTION: 6011, LOCAL_STORAGE_ACCESS_DENIED: 6012, VALIDATION_FAILED: 6013 }, PlaylistErrors: { NO_ENTRY_TO_PLAY: 8001, NO_ENTRY_IS_PLAYING: 8002 } };
 var f = class a extends Error {
   constructor(t, i, r, s, o, n = false) {
@@ -18666,7 +18695,7 @@ var f = class a extends Error {
     }`;
   }
 };
-var Va = ["join", "offer", "answer", "trickle", "on-error", "JOIN"];
+var Fa = ["join", "offer", "answer", "trickle", "on-error", "JOIN"];
 var h = { WebSocketConnectionErrors: { FailedToConnect(a2, e = "") {
   return new f(v.WebSocketConnectionErrors.FAILED_TO_CONNECT, "WebsocketFailedToConnect", a2, `[WS]: ${e}`, `[WS]: ${e}`);
 }, WebSocketConnectionLost(a2, e = "") {
@@ -18726,7 +18755,7 @@ var h = { WebSocketConnectionErrors: { FailedToConnect(a2, e = "") {
 }, StatsFailed(a2, e = "") {
   return new f(v.WebrtcErrors.STATS_FAILED, "StatsFailed", a2, `Failed to WebRTC get stats - ${e}`, e);
 } }, WebsocketMethodErrors: { ServerErrors(a2, e, t) {
-  return new f(a2, "ServerErrors", e, t, t, Va.includes(e));
+  return new f(a2, "ServerErrors", e, t, t, Fa.includes(e));
 }, AlreadyJoined(a2, e = "") {
   return new f(v.WebsocketMethodErrors.ALREADY_JOINED, "AlreadyJoined", a2, "[JOIN]: You have already joined this room.", e);
 }, CannotJoinPreviewInProgress(a2, e = "") {
@@ -18835,18 +18864,18 @@ var ne = class {
 };
 var vs = () => {
   let a2, e = new ne("hms-analytics-deviceId"), t = e.get();
-  return t ? a2 = t : (a2 = Fa(), e.set(a2)), a2;
+  return t ? a2 = t : (a2 = Ga(), e.set(a2)), a2;
 };
 function ie(a2) {
   return a2 != null;
 }
 var ys = dr().version;
 function ot(a2 = "prod", e) {
-  let t = "web", i = Ve !== "LOCAL" && a2 === "prod" ? "prod" : "debug";
+  let t = "web", i = Be !== "LOCAL" && a2 === "prod" ? "prod" : "debug";
   if (Ce)
-    return ks({ os: "web_nodejs", os_version: process.version, sdk: t, sdk_version: ys, env: i, domain: Ve, is_prebuilt: !!(e != null && e.isPrebuilt), framework: "node", framework_version: process.version, framework_sdk_version: e == null ? void 0 : e.sdkVersion });
+    return ks({ os: "web_nodejs", os_version: process.version, sdk: t, sdk_version: ys, env: i, domain: Be, is_prebuilt: !!(e != null && e.isPrebuilt), framework: "node", framework_version: process.version, framework_sdk_version: e == null ? void 0 : e.sdkVersion });
   let r = pe.getOS(), s = pe.getDevice(), o = pe.getBrowser(), n = lr(`web_${r.name}`), l = r.version || "", u = lr(`${o.name}_${o.version}`), p = u;
-  return s.type && (p = `${lr(`${s.vendor}_${s.type}`)}/${u}`), ks({ os: n, os_version: l, sdk: t, sdk_version: ys, device_model: p, env: i, domain: Ve, is_prebuilt: !!(e != null && e.isPrebuilt), framework: e == null ? void 0 : e.type, framework_version: e == null ? void 0 : e.version, framework_sdk_version: e == null ? void 0 : e.sdkVersion });
+  return s.type && (p = `${lr(`${s.vendor}_${s.type}`)}/${u}`), ks({ os: n, os_version: l, sdk: t, sdk_version: ys, device_model: p, env: i, domain: Be, is_prebuilt: !!(e != null && e.isPrebuilt), framework: e == null ? void 0 : e.type, framework_version: e == null ? void 0 : e.version, framework_sdk_version: e == null ? void 0 : e.sdkVersion });
 }
 function lr(a2) {
   return a2.replace(/ /g, "_");
@@ -18855,10 +18884,10 @@ var ks = (a2, e = ",") => Object.keys(a2).filter((t) => ie(a2[t])).map((t) => `$
 var R = class {
   constructor({ name: e, level: t, properties: i, includesPII: r, timestamp: s }) {
     this.metadata = { peer: {}, userAgent: ot() };
-    this.name = e, this.level = t, this.includesPII = r || false, this.properties = i || {}, this.timestamp = s || (/* @__PURE__ */ new Date()).getTime(), this.event_id = $a(), this.device_id = vs();
+    this.name = e, this.level = t, this.includesPII = r || false, this.properties = i || {}, this.timestamp = s || (/* @__PURE__ */ new Date()).getTime(), this.event_id = Wa(), this.device_id = vs();
   }
   toSignalParams() {
-    return { name: this.name, info: y(S({}, this.properties), { timestamp: this.timestamp, domain: Ve }), timestamp: (/* @__PURE__ */ new Date()).getTime() };
+    return { name: this.name, info: y(S({}, this.properties), { timestamp: this.timestamp, domain: Be }), timestamp: (/* @__PURE__ */ new Date()).getTime() };
   }
 };
 var M = class {
@@ -18997,7 +19026,8 @@ function jt(a2, e = 300) {
   };
 }
 var Rs = ((n) => (n.NONE = "none", n.INITIALISED = "initialised", n.STARTED = "started", n.PAUSED = "paused", n.RESUMED = "resumed", n.STOPPED = "stopped", n.FAILED = "failed", n))(Rs || {});
-var Hs = ((i) => (i.videoInput = "videoInput", i.audioInput = "audioInput", i.audioOutput = "audioOutput", i))(Hs || {});
+var Hs = ((t) => (t.DVR = "dvr", t.NO_DVR = "no-dvr", t))(Hs || {});
+var Cs = ((i) => (i.videoInput = "videoInput", i.audioInput = "audioInput", i.audioOutput = "audioOutput", i))(Cs || {});
 var mr = class {
   constructor() {
     this.TAG = "[HMSIntersectionObserverWrapper]";
@@ -19025,7 +19055,7 @@ var mr = class {
     return e || d.w(this.TAG, "IntersectionObserver is not supported, fallback will be used instead"), e;
   }
 };
-var ws = new mr();
+var _s = new mr();
 var Sr = class {
   constructor() {
     this.TAG = "[HMSResizeObserverWrapper]";
@@ -19053,15 +19083,15 @@ var Sr = class {
     return e || d.w(this.TAG, "Resize Observer is not supported"), e;
   }
 };
-var _s = new Sr();
+var Ns = new Sr();
 var gr = ((t) => (t.TRANSFORM = "TRANSFORM", t.ANALYZE = "ANALYZE", t))(gr || {});
 var Tr = ((t) => (t["2D"] = "2d", t.WEBGL = "webgl", t.WEBGL2 = "webgl2", t))(Tr || {});
-var xs = "https://event.100ms.live/v2/client/report";
-var Us = "https://event-nonprod.100ms.live/v2/client/report";
+var Us = "https://event.100ms.live/v2/client/report";
+var Vs = "https://event-nonprod.100ms.live/v2/client/report";
 var pt = Math.pow(2, 31) - 1;
 var Qe = class {
 };
-Qe.makePeerId = () => no();
+Qe.makePeerId = () => co();
 var gt = "HMS-Store:";
 var k = class {
   static v(e, ...t) {
@@ -19131,129 +19161,129 @@ var k = class {
 k.level = 0;
 var Ir = (a2, e) => e;
 var Tt = (a2, e) => e;
-var Ks = (a2, e) => e;
-var lo = (a2, e) => e;
+var qs = (a2, e) => e;
 var uo = (a2, e) => e;
+var po = (a2, e) => e;
 var J = createSelector([G, Ir], (a2, e) => e ? a2[e] : null);
 var Rr = createSelector([D, Tt], (a2, e) => e ? a2[e] : null);
-var po = createSelector([D, Tt], (a2, e) => {
+var ho = createSelector([D, Tt], (a2, e) => {
   if (!e)
     return null;
   let t = a2[e];
   return (t == null ? void 0 : t.type) === "video" ? t : null;
 });
-var ho = createSelector([D, Tt], (a2, e) => {
+var mo = createSelector([D, Tt], (a2, e) => {
   if (!e)
     return null;
   let t = a2[e];
   return (t == null ? void 0 : t.type) === "audio" ? t : null;
 });
-var mo = createSelector([D, Tt], (a2, e) => {
+var So = createSelector([D, Tt], (a2, e) => {
   if (!e)
     return null;
   let t = a2[e];
   return (t == null ? void 0 : t.type) === "audio" && (t == null ? void 0 : t.source) === "screen" ? t : null;
 });
-var So = createSelector([D, Tt], (a2, e) => {
+var go = createSelector([D, Tt], (a2, e) => {
   if (!e)
     return null;
   let t = a2[e];
   return (t == null ? void 0 : t.type) === "video" && (t == null ? void 0 : t.source) === "screen" ? t : null;
 });
-var go = createSelector([ts, uo], (a2, e) => e ? a2[e] : null);
+var To = createSelector([ts, po], (a2, e) => e ? a2[e] : null);
 var Q = b(J);
-var Zh = b(createSelector([er, lo], (a2, e) => {
+var em = b(createSelector([er, uo], (a2, e) => {
   if (a2)
     return e ? a2[e] : a2;
 }));
-function em(a2) {
+function tm(a2) {
   return (e) => {
     if (e.sessionStore)
       return a2 ? e.sessionStore[a2] : e.sessionStore;
   };
 }
-var im = b(createSelector(J, (a2) => a2 == null ? void 0 : a2.name));
+var rm = b(createSelector(J, (a2) => a2 == null ? void 0 : a2.name));
 var ai = b(Rr);
-var qs = b(po);
-var rm = b(ho);
+var js = b(ho);
 var sm = b(mo);
 var am = b(So);
-var To = b((a2, e) => {
+var om = b(go);
+var fo = b((a2, e) => {
   let t = J(a2, e);
   if (t && t.videoTrack && t.videoTrack !== "")
     return a2.tracks[t.videoTrack];
 });
-var fo = b((a2, e) => {
+var vo = b((a2, e) => {
   let t = J(a2, e);
   if (t && t.audioTrack && t.audioTrack !== "")
     return a2.tracks[t.audioTrack];
 });
-var nm = b((a2, e) => {
+var cm = b((a2, e) => {
   let t = J(a2, e);
   return (t == null ? void 0 : t.auxiliaryTracks.map((i) => a2.tracks[i])) || [];
 });
-var js = (a2, e) => e ? a2.speakers[e] : null;
-var cm = b(createSelector(js, (a2) => (a2 == null ? void 0 : a2.audioLevel) || 0));
-var vo = (a2, e) => {
-  let t = fo(e)(a2);
-  return js(a2, t == null ? void 0 : t.id);
-};
-var dm = b(createSelector(vo, (a2) => (a2 == null ? void 0 : a2.audioLevel) || 0));
-var lm = b((a2, e) => {
+var Js = (a2, e) => e ? a2.speakers[e] : null;
+var dm = b(createSelector(Js, (a2) => (a2 == null ? void 0 : a2.audioLevel) || 0));
+var Mo = (a2, e) => {
+  let t = vo(e)(a2);
+  return Js(a2, t == null ? void 0 : t.id);
+};
+var lm = b(createSelector(Mo, (a2) => (a2 == null ? void 0 : a2.audioLevel) || 0));
+var um = b((a2, e) => {
   if (e)
     return a2.connectionQualities[e];
 });
-var um = b((a2, e) => {
+var pm = b((a2, e) => {
   let t = J(a2, e);
   if (t) {
     let i = t == null ? void 0 : t.auxiliaryTracks.find((r) => tt(a2.tracks[r]));
     return i ? a2.tracks[i] : void 0;
   }
 });
-var pm = b(createSelector(D, J, (a2, e) => {
+var hm = b(createSelector(D, J, (a2, e) => {
   let t = e == null ? void 0 : e.auxiliaryTracks.find((i) => {
     let r = a2[i];
     return rt(r) && it(r);
   });
   return t ? a2[t] : void 0;
 }));
-var hm = b(createSelector(D, J, (a2, e) => {
+var mm = b(createSelector(D, J, (a2, e) => {
   let t = e == null ? void 0 : e.auxiliaryTracks.find((i) => {
     let r = a2[i];
     return rt(r) && tt(r);
   });
   return t ? a2[t] : void 0;
 }));
-var mm = b(createSelector(D, J, (a2, e) => {
+var Sm = b(createSelector(D, J, (a2, e) => {
   let t = e == null ? void 0 : e.auxiliaryTracks.find((i) => {
     let r = a2[i];
     return Gt(r) && tt(r);
   });
   return t ? a2[t] : void 0;
 }));
-var Js = b(createSelector(D, J, (a2, e) => He(a2, e)));
-var Qs = (a2) => createSelector(Js(a2), (e) => e.audio);
-var gm = b((a2, e) => {
+var Qs = b(createSelector(D, J, (a2, e) => He(a2, e)));
+var zs = (a2) => createSelector(Qs(a2), (e) => e.audio);
+var Tm = b((a2, e) => {
   let t = J(a2, e);
   return Ue(a2, t == null ? void 0 : t.audioTrack);
 });
-var Tm = b((a2, e) => {
+var fm = b((a2, e) => {
   let t = J(a2, e);
   return Ue(a2, t == null ? void 0 : t.videoTrack);
 });
-var zs = b((a2, e) => {
+var Ys = b((a2, e) => {
   if (e && a2.tracks[e])
     return a2.tracks[e].volume === 0;
 });
-var fm = b((a2, e) => {
+var vm = b((a2, e) => {
   let t = J(a2, e);
-  return zs(t == null ? void 0 : t.audioTrack)(a2);
+  return Ys(t == null ? void 0 : t.audioTrack)(a2);
 });
-var vm = b((a2, e) => {
-  let t = Qs(e)(a2);
-  return zs(t == null ? void 0 : t.id)(a2);
+var Mm = b((a2, e) => {
+  let t = zs(e)(a2);
+  return Ys(t == null ? void 0 : t.id)(a2);
 });
-var Ys = b((a2, e) => {
+var Xs = b((a2, e) => {
   let t = Rr(a2, e);
   if (t) {
     if (t.type !== "audio") {
@@ -19263,15 +19293,15 @@ var Ys = b((a2, e) => {
     return t.volume;
   }
 });
-var Mm = b((a2, e) => {
-  let t = J(a2, e);
-  return Ys(t == null ? void 0 : t.audioTrack)(a2);
-});
 var ym = b((a2, e) => {
-  let t = Qs(e)(a2);
-  return Ys(t == null ? void 0 : t.id)(a2);
+  let t = J(a2, e);
+  return Xs(t == null ? void 0 : t.audioTrack)(a2);
 });
 var km = b((a2, e) => {
+  let t = zs(e)(a2);
+  return Xs(t == null ? void 0 : t.id)(a2);
+});
+var Pm = b((a2, e) => {
   let t = Rr(a2, e);
   if (t) {
     if (t.type !== "video") {
@@ -19281,45 +19311,45 @@ var km = b((a2, e) => {
     return t.layer;
   }
 });
-var Xs = createSelector([at, ue, Ir], (a2, e, t) => {
+var Zs = createSelector([at, ue, Ir], (a2, e, t) => {
   if (t)
     return a2.filter((i) => {
       var r;
       return !i.recipientPeer && !((r = i.recipientRoles) != null && r.length) || i.sender && ![e, t].includes(i.sender) ? false : [e, t].includes(i.recipientPeer);
     });
 });
-var Zs = createSelector([at, Ks], (a2, e) => {
+var ea = createSelector([at, qs], (a2, e) => {
   if (e)
     return a2.filter((t) => {
       var i, r;
       return (i = t.recipientRoles) != null && i.length ? (r = t.recipientRoles) == null ? void 0 : r.includes(e) : false;
     });
 });
-var Mo = createSelector(at, (a2) => a2.filter((e) => {
+var yo = createSelector(at, (a2) => a2.filter((e) => {
   var t;
   return !e.recipientPeer && !((t = e.recipientRoles) != null && t.length);
 }));
-var yo = createSelector([Zs, Ks], (a2) => a2 ? a2.filter((e) => !e.read).length : 0);
-var ko = createSelector([Xs, Ir], (a2) => a2 ? a2.filter((e) => !e.read).length : 0);
-var Pm = createSelector(Mo, (a2) => a2.filter((e) => !e.read).length);
-var Em = b(Xs);
+var ko = createSelector([ea, qs], (a2) => a2 ? a2.filter((e) => !e.read).length : 0);
+var Po = createSelector([Zs, Ir], (a2) => a2 ? a2.filter((e) => !e.read).length : 0);
+var Em = createSelector(yo, (a2) => a2.filter((e) => !e.read).length);
 var bm = b(Zs);
-var Am = b(yo);
+var Am = b(ea);
 var Im = b(ko);
-var ea = b(go);
-var Um = createSelector([G, D], (a2, e) => Object.values(a2).map((i) => {
+var Rm = b(Po);
+var ta = b(To);
+var Vm = createSelector([G, D], (a2, e) => Object.values(a2).map((i) => {
   var r;
   return { peer: i, isAudioEnabled: i.audioTrack ? (r = e[i.audioTrack]) == null ? void 0 : r.enabled : false };
 }));
-var Po = (a2) => a2.roleChangeRequests[0] || null;
-var Bm = createSelector([Po, G, oe], (a2, e, t) => a2 ? { requestedBy: a2.requestedBy ? e[a2.requestedBy] : void 0, role: t[a2.roleName], token: a2.token } : null);
-var Vm = createSelector([Wt], (a2) => st(a2));
-var Fm = createSelector([Zr], (a2) => st(a2));
-var bo = createSelector([K, D], (a2, e) => {
+var Eo = (a2) => a2.roleChangeRequests[0] || null;
+var Bm = createSelector([Eo, G, oe], (a2, e, t) => a2 ? { requestedBy: a2.requestedBy ? e[a2.requestedBy] : void 0, role: t[a2.roleName], token: a2.token } : null);
+var Fm = createSelector([Wt], (a2) => st(a2));
+var Gm = createSelector([Zr], (a2) => st(a2));
+var Ao = createSelector([K, D], (a2, e) => {
   let t = null;
   return a2 && (t = e[a2]), (t == null ? void 0 : t.plugins) || [];
 });
-var Ao = createSelector([Z, D], (a2, e) => {
+var Io = createSelector([Z, D], (a2, e) => {
   let t = null;
   return a2 && (t = e[a2]), (t == null ? void 0 : t.plugins) || [];
 });
@@ -19342,7 +19372,7 @@ var wr = class {
       this.addEventToStorage(e);
       return;
     }
-    let t = { event: e.name, payload: e.properties, event_id: String(e.timestamp), peer: e.metadata.peer, timestamp: e.timestamp, device_id: e.device_id, cluster: { websocket_url: this.websocketURL } }, i = this.env === "prod" ? xs : Us;
+    let t = { event: e.name, payload: e.properties, event_id: String(e.timestamp), peer: e.metadata.peer, timestamp: e.timestamp, device_id: e.device_id, cluster: { websocket_url: this.websocketURL } }, i = this.env === "prod" ? Us : Vs;
     fetch(i, { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${e.metadata.token}`, user_agent_v2: e.metadata.userAgent }, body: JSON.stringify(t) }).then((r) => {
       if (r.status === 401) {
         this.removeFromStorage(e);
@@ -19372,62 +19402,62 @@ var Te = new wr();
 var $ = ((s) => (s[s.ConnectFailed = 0] = "ConnectFailed", s[s.SignalDisconnect = 1] = "SignalDisconnect", s[s.JoinWSMessageFailed = 2] = "JoinWSMessageFailed", s[s.PublishIceConnectionFailed = 3] = "PublishIceConnectionFailed", s[s.SubscribeIceConnectionFailed = 4] = "SubscribeIceConnectionFailed", s))($ || {});
 var Ui = ((n) => (n.Disconnected = "Disconnected", n.Connecting = "Connecting", n.Joined = "Joined", n.Preview = "Preview", n.Failed = "Failed", n.Reconnecting = "Reconnecting", n.Leaving = "Leaving", n))(Ui || {});
 var ji = ((t) => (t[t.Publish = 0] = "Publish", t[t.Subscribe = 1] = "Subscribe", t))(ji || {});
-var qo = (a2) => a2.localPeer.id;
-var jo = (a2) => a2.localPeer.audioTrack;
-var Jo = (a2) => a2.localPeer.videoTrack;
-var Qo = (a2, e) => e;
-var Ta = (a2, e) => e;
-var zo = (a2) => a2.remoteTrackStats;
-var fa = (a2) => a2.peerStats;
+var jo = (a2) => a2.localPeer.id;
+var Jo = (a2) => a2.localPeer.audioTrack;
+var Qo = (a2) => a2.localPeer.videoTrack;
+var zo = (a2, e) => e;
+var fa = (a2, e) => e;
+var Yo = (a2) => a2.remoteTrackStats;
+var va = (a2) => a2.peerStats;
 var Ur = (a2) => a2.localTrackStats;
-var ve = createSelector([fa, qo], (a2, e) => a2[e]);
-var Yo = createSelector(ve, (a2) => {
+var ve = createSelector([va, jo], (a2, e) => a2[e]);
+var Xo = createSelector(ve, (a2) => {
   var e;
   return (e = a2 == null ? void 0 : a2.subscribe) == null ? void 0 : e.packetsLost;
 });
-var Xo = createSelector(ve, (a2) => {
+var Zo = createSelector(ve, (a2) => {
   var e;
   return (e = a2 == null ? void 0 : a2.subscribe) == null ? void 0 : e.jitter;
 });
-var Zo = createSelector(ve, (a2) => {
+var en = createSelector(ve, (a2) => {
   var e;
   return (e = a2 == null ? void 0 : a2.publish) == null ? void 0 : e.bitrate;
 });
-var en = createSelector(ve, (a2) => {
+var tn = createSelector(ve, (a2) => {
   var e;
   return (e = a2 == null ? void 0 : a2.subscribe) == null ? void 0 : e.bitrate;
 });
-var tn = createSelector(ve, (a2) => {
+var rn = createSelector(ve, (a2) => {
   var e;
   return (e = a2 == null ? void 0 : a2.publish) == null ? void 0 : e.availableOutgoingBitrate;
 });
-var rn = createSelector(ve, (a2) => {
+var sn = createSelector(ve, (a2) => {
   var e;
   return (e = a2 == null ? void 0 : a2.subscribe) == null ? void 0 : e.availableIncomingBitrate;
 });
-var sn = createSelector(ve, (a2) => {
+var an = createSelector(ve, (a2) => {
   var e;
   return (e = a2 == null ? void 0 : a2.publish) == null ? void 0 : e.bytesSent;
 });
-var an = createSelector(ve, (a2) => {
+var on = createSelector(ve, (a2) => {
   var e;
   return (e = a2 == null ? void 0 : a2.subscribe) == null ? void 0 : e.bytesReceived;
 });
-var on = createSelector([fa, Qo], (a2, e) => e ? a2[e] : void 0);
-var nn = createSelector([zo, Ta], (a2, e) => e ? a2[e] : void 0);
-var Br = createSelector([Ur, Ta], (a2, e) => e ? a2[e] : void 0);
-var cn = b(on);
+var nn = createSelector([va, zo], (a2, e) => e ? a2[e] : void 0);
+var cn = createSelector([Yo, fa], (a2, e) => e ? a2[e] : void 0);
+var Vr = createSelector([Ur, fa], (a2, e) => e ? a2[e] : void 0);
 var dn = b(nn);
-var ln = createSelector([Ur, jo], (a2, e) => {
+var ln = b(cn);
+var un = createSelector([Ur, Jo], (a2, e) => {
   var t;
   return e ? (t = a2[e]) == null ? void 0 : t[0] : void 0;
 });
-var un = b(createSelector(Br, (a2) => a2 == null ? void 0 : a2[0]));
-var pn = createSelector([Ur, Jo], (a2, e) => {
+var pn = b(createSelector(Vr, (a2) => a2 == null ? void 0 : a2[0]));
+var hn = createSelector([Ur, Qo], (a2, e) => {
   var t;
   return e ? (t = a2[e]) == null ? void 0 : t[0] : void 0;
 });
-var hn = b(createSelector(Br, (a2) => a2));
+var mn = b(createSelector(Vr, (a2) => a2));
 
 // src/Prebuilt/components/Header/StreamActions.tsx
 import {
@@ -19441,7 +19471,7 @@ import {
   useHMSStore as useHMSStore25,
   useRecordingStreaming as useRecordingStreaming6
 } from "@100mslive/react-sdk";
-import { AlertTriangleIcon as AlertTriangleIcon5, CrossIcon as CrossIcon7, PauseCircleIcon, RecordIcon } from "@100mslive/react-icons";
+import { AlertTriangleIcon as AlertTriangleIcon5, CrossIcon as CrossIcon8, PauseCircleIcon, RecordIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Header/AdditionalRoomState.jsx
 init_define_process_env();
@@ -19617,7 +19647,7 @@ var LiveStatus = () => {
   var _a8;
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming6();
   const hlsState = useHMSStore25(selectHLSState4);
-  const isMobile = useMedia6(config.media.md);
+  const isMobile = useMedia7(config.media.md);
   const intervalRef = useRef13(null);
   const { screenType } = useRoomLayoutConferencingScreen();
   const [liveTime, setLiveTime] = useState25(0);
@@ -19664,7 +19694,7 @@ var LiveStatus = () => {
 var RecordingStatus = () => {
   const { isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn, isRecordingOn } = useRecordingStreaming6();
   const permissions = useHMSStore25(selectPermissions7);
-  const isMobile = useMedia6(config.media.md);
+  const isMobile = useMedia7(config.media.md);
   if (!isRecordingOn || // if only browser recording is enabled, stop recording is shown
   // so no need to show this as it duplicates
   [permissions == null ? void 0 : permissions.browserRecording, !isServerRecordingOn, !isHLSRecordingOn, isBrowserRecordingOn].every(
@@ -19791,7 +19821,7 @@ var StartRecording2 = () => {
 };
 var StreamActions = () => {
   const isConnected = useHMSStore25(selectIsConnectedToRoom6);
-  const isMobile = useMedia6(config.media.md);
+  const isMobile = useMedia7(config.media.md);
   const roomState = useHMSStore25(selectRoomState3);
   return /* @__PURE__ */ React54.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React54.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ React54.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React54.createElement(RecordingPauseStatus, null), /* @__PURE__ */ React54.createElement(RecordingStatus, null), roomState !== HMSRoomState3.Preview ? /* @__PURE__ */ React54.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ React54.createElement(StartRecording2, null) : null);
 };
@@ -19799,7 +19829,7 @@ var StopRecordingInSheet = ({
   onStopRecording,
   onClose
 }) => {
-  return /* @__PURE__ */ React54.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ React54.createElement(Sheet.Content, null, /* @__PURE__ */ React54.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ React54.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ React54.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ React54.createElement(AlertTriangleIcon5, null), /* @__PURE__ */ React54.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ React54.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ React54.createElement(CrossIcon7, null)))), /* @__PURE__ */ React54.createElement(HorizontalDivider, null), /* @__PURE__ */ React54.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ React54.createElement(Text, { variant: "caption", css: { c: "$on_surface_medium", pb: "$8" } }, "Are you sure you want to stop recording? You can\u2019t undo this action."), /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React54.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ React54.createElement(Sheet.Content, null, /* @__PURE__ */ React54.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ React54.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ React54.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ React54.createElement(AlertTriangleIcon5, null), /* @__PURE__ */ React54.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ React54.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ React54.createElement(CrossIcon8, null)))), /* @__PURE__ */ React54.createElement(HorizontalDivider, null), /* @__PURE__ */ React54.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ React54.createElement(Text, { variant: "caption", css: { c: "$on_surface_medium", pb: "$8" } }, "Are you sure you want to stop recording? You can\u2019t undo this action."), /* @__PURE__ */ React54.createElement(
     Button,
     {
       variant: "danger",
@@ -19873,13 +19903,13 @@ var ActionTile = {
 // src/Prebuilt/components/MoreSettings/ChangeNameModal.tsx
 init_define_process_env();
 import React57, { useState as useState26 } from "react";
-import { useMedia as useMedia7 } from "react-use";
+import { useMedia as useMedia8 } from "react-use";
 import { selectLocalPeerName, useHMSActions as useHMSActions19, useHMSStore as useHMSStore26 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/MoreSettings/ChangeNameContent.tsx
 init_define_process_env();
 import React56 from "react";
-import { ChevronLeftIcon as ChevronLeftIcon2, CrossIcon as CrossIcon8 } from "@100mslive/react-icons";
+import { ChevronLeftIcon as ChevronLeftIcon2, CrossIcon as CrossIcon9 } from "@100mslive/react-icons";
 var ChangeNameContent = ({
   changeName,
   setCurrentName,
@@ -19917,7 +19947,7 @@ var ChangeNameContent = ({
           css: { color: "inherit", ml: "auto", "&:hover": { color: "$on_surface_medium", cursor: "pointer" } },
           onClick: onExit
         },
-        /* @__PURE__ */ React56.createElement(CrossIcon8, null)
+        /* @__PURE__ */ React56.createElement(CrossIcon9, null)
       )
     ),
     /* @__PURE__ */ React56.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", pb: "$6", mb: "$8", "@md": { px: "$8", mt: "$4" } } }, "Your name will be visible to other participants in the session."),
@@ -19992,7 +20022,7 @@ var ChangeNameModal = ({
   const hmsActions = useHMSActions19();
   const localPeerName = useHMSStore26(selectLocalPeerName);
   const [currentName, setCurrentName] = useState26(localPeerName);
-  const isMobile = useMedia7(config.media.md);
+  const isMobile = useMedia8(config.media.md);
   const changeName = () => __async(void 0, null, function* () {
     const name = (currentName == null ? void 0 : currentName.trim()) || "";
     if (!name || name === localPeerName) {
@@ -20115,7 +20145,7 @@ var MwebOptions = ({
     });
   };
   useClickAway(emojiCardRef, () => setShowEmojiCard(false));
-  return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(Sheet.Root, { open: openOptionsSheet, onOpenChange: setOpenOptionsSheet }, /* @__PURE__ */ React58.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React58.createElement(Sheet.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React58.createElement(IconButton_default, null, /* @__PURE__ */ React58.createElement(HamburgerMenuIcon2, null)))), /* @__PURE__ */ React58.createElement(Sheet.Content, { css: { bg: "$surface_dim", pb: "$14" } }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(Sheet.Root, { open: openOptionsSheet, onOpenChange: setOpenOptionsSheet }, /* @__PURE__ */ React58.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React58.createElement(Sheet.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React58.createElement(IconButton_default, { css: { "@md": { bg: screenType === "hls_live_streaming" ? "$surface_default" : "" } } }, /* @__PURE__ */ React58.createElement(HamburgerMenuIcon2, null)))), /* @__PURE__ */ React58.createElement(Sheet.Content, { css: { bg: "$surface_dim", pb: "$14" } }, /* @__PURE__ */ React58.createElement(
     Sheet.Title,
     {
       css: {
@@ -20133,7 +20163,7 @@ var MwebOptions = ({
       }
     },
     "Options",
-    /* @__PURE__ */ React58.createElement(Sheet.Close, null, /* @__PURE__ */ React58.createElement(Box, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ React58.createElement(CrossIcon9, null)))
+    /* @__PURE__ */ React58.createElement(Sheet.Close, null, /* @__PURE__ */ React58.createElement(Box, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ React58.createElement(CrossIcon10, null)))
   ), /* @__PURE__ */ React58.createElement(
     Box,
     {
@@ -20321,19 +20351,20 @@ var MoreSettings = ({
   elements,
   screenType
 }) => {
-  const isMobile = useMedia8(config.media.md);
-  return isMobile ? /* @__PURE__ */ React59.createElement(MwebOptions, { elements, screenType }) : /* @__PURE__ */ React59.createElement(DesktopOptions, { elements, screenType });
+  const isMobile = useMedia9(config.media.md);
+  const isLandscapeHLSStream = useLandscapeHLSStream();
+  return isMobile || isLandscapeHLSStream ? /* @__PURE__ */ React59.createElement(MwebOptions, { elements, screenType }) : /* @__PURE__ */ React59.createElement(DesktopOptions, { elements, screenType });
 };
 
-// src/Prebuilt/components/RaiseHand.jsx
+// src/Prebuilt/components/RaiseHand.tsx
 init_define_process_env();
 import React60 from "react";
-import { HandIcon as HandIcon3 } from "@100mslive/react-icons";
+import { HandIcon as HandIcon3, HandRaiseSlashedIcon as HandRaiseSlashedIcon2 } from "@100mslive/react-icons";
 var RaiseHand = () => {
   const { isHandRaised, toggleHandRaise } = useMyMetadata();
   return /* @__PURE__ */ React60.createElement(Tooltip, { title: isHandRaised ? "Lower hand" : "Raise hand" }, /* @__PURE__ */ React60.createElement(IconButton_default, { "data-testid": "hand_raise_btn", active: !isHandRaised, onClick: () => __async(void 0, null, function* () {
     return yield toggleHandRaise();
-  }) }, /* @__PURE__ */ React60.createElement(HandIcon3, null)));
+  }) }, isHandRaised ? /* @__PURE__ */ React60.createElement(HandRaiseSlashedIcon2, null) : /* @__PURE__ */ React60.createElement(HandIcon3, null)));
 };
 
 // src/Prebuilt/components/ScreenShareToggle.jsx
@@ -20880,7 +20911,7 @@ var ChatToggle = () => {
 // src/Prebuilt/components/Footer/ParticipantList.tsx
 init_define_process_env();
 import React74, { Fragment as Fragment10, useCallback as useCallback18, useState as useState32 } from "react";
-import { useDebounce, useMedia as useMedia9 } from "react-use";
+import { useDebounce, useMedia as useMedia10 } from "react-use";
 import {
   selectHandRaisedPeers,
   selectHasPeerHandRaised as selectHasPeerHandRaised2,
@@ -21574,7 +21605,7 @@ var ParticipantSearch = ({
   inSidePane = false
 }) => {
   const [value, setValue] = React74.useState("");
-  const isMobile = useMedia9(config.media.md);
+  const isMobile = useMedia10(config.media.md);
   useDebounce(
     () => {
       onSearch(value);
@@ -21677,7 +21708,7 @@ var Footer2 = ({
   elements
 }) => {
   var _a8, _b7;
-  const isMobile = useMedia10(config.media.md);
+  const isMobile = useMedia11(config.media.md);
   const isOverlayChat = !!((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.is_overlay);
   const openByDefault = ((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.initial_state) === Chat_ChatState.CHAT_STATE_OPEN;
   const { toggleAudio, toggleVideo } = useAVToggle4();
@@ -21799,14 +21830,14 @@ import {
 // src/Prebuilt/components/Preview/PreviewJoin.tsx
 init_define_process_env();
 import React131, { Fragment as Fragment13, useCallback as useCallback31, useEffect as useEffect34, useMemo as useMemo11, useState as useState55 } 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,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled6,
   selectLocalPeer as selectLocalPeer7,
   selectRoomState as selectRoomState5,
   selectVideoTrackByID as selectVideoTrackByID5,
-  useAVToggle as useAVToggle5,
+  useAVToggle as useAVToggle6,
   useHMSStore as useHMSStore68,
   useParticipants as useParticipants2,
   usePreviewJoin,
@@ -21817,7 +21848,7 @@ import { MicOffIcon as MicOffIcon7, SettingsIcon as SettingsIcon6 } from "@100ms
 // src/Prebuilt/layouts/SidePane.tsx
 init_define_process_env();
 import React126, { useEffect as useEffect32 } from "react";
-import { useMedia as useMedia21 } from "react-use";
+import { useMedia as useMedia22 } from "react-use";
 import { selectAppData as selectAppData6, selectVideoTrackByPeerID as selectVideoTrackByPeerID4, useHMSStore as useHMSStore66 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Polls/Polls.tsx
@@ -21840,7 +21871,7 @@ import { QuestionIcon, StatsIcon } from "@100mslive/react-icons";
 init_define_process_env();
 import React79 from "react";
 import { selectPermissions as selectPermissions12, useHMSStore as useHMSStore39 } from "@100mslive/react-sdk";
-import { ChevronLeftIcon as ChevronLeftIcon3, ChevronRightIcon as ChevronRightIcon2, CrossIcon as CrossIcon10, RecordIcon as RecordIcon3 } from "@100mslive/react-icons";
+import { ChevronLeftIcon as ChevronLeftIcon3, ChevronRightIcon as ChevronRightIcon2, CrossIcon as CrossIcon11, RecordIcon as RecordIcon3 } from "@100mslive/react-icons";
 var ContentHeader = ({ onBack, onClose, title = "", content }) => {
   return /* @__PURE__ */ React79.createElement(
     Flex,
@@ -21871,7 +21902,7 @@ var ContentHeader = ({ onBack, onClose, title = "", content }) => {
       },
       title
     ) : null, /* @__PURE__ */ React79.createElement(Text, { variant: "h6" }, content)),
-    onClose ? /* @__PURE__ */ React79.createElement(IconButton, { onClick: onClose, css: { alignSelf: "flex-start" }, "data-testid": "close_stream_section" }, /* @__PURE__ */ React79.createElement(CrossIcon10, null)) : null
+    onClose ? /* @__PURE__ */ React79.createElement(IconButton, { onClick: onClose, css: { alignSelf: "flex-start" }, "data-testid": "close_stream_section" }, /* @__PURE__ */ React79.createElement(CrossIcon11, null)) : null
   );
 };
 var Container3 = ({ children, rounded = false }) => {
@@ -22123,7 +22154,7 @@ import { AddCircleIcon, TrashIcon as TrashIcon3 } from "@100mslive/react-icons";
 // src/Prebuilt/components/Polls/CreateQuestions/DeleteQuestionModal.tsx
 init_define_process_env();
 import React82 from "react";
-import { AlertTriangleIcon as AlertTriangleIcon6, CrossIcon as CrossIcon11 } from "@100mslive/react-icons";
+import { AlertTriangleIcon as AlertTriangleIcon6, CrossIcon as CrossIcon12 } from "@100mslive/react-icons";
 var DeleteQuestionModal = ({
   open,
   setOpen,
@@ -22150,7 +22181,7 @@ var DeleteQuestionModal = ({
         },
         onClick: () => setOpen(false)
       },
-      /* @__PURE__ */ React82.createElement(CrossIcon11, null)
+      /* @__PURE__ */ React82.createElement(CrossIcon12, null)
     )
   ), /* @__PURE__ */ React82.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mb: "$8", mt: "$4" } }, "The question will be deleted. You can't undo this action."), /* @__PURE__ */ React82.createElement(Flex, { css: { w: "100%", mt: "$12", gap: "$md" } }, /* @__PURE__ */ React82.createElement(
     Button,
@@ -22732,7 +22763,7 @@ var QuestionCard = ({ question, onSave, index, length, removeQuestion, isQuiz, c
 init_define_process_env();
 import React95, { useState as useState38 } from "react";
 import { selectPollByID as selectPollByID3, useHMSStore as useHMSStore44 } from "@100mslive/react-sdk";
-import { ChevronLeftIcon as ChevronLeftIcon4, ChevronRightIcon as ChevronRightIcon3, CrossIcon as CrossIcon12 } from "@100mslive/react-icons";
+import { ChevronLeftIcon as ChevronLeftIcon4, ChevronRightIcon as ChevronRightIcon3, CrossIcon as CrossIcon13 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx
 init_define_process_env();
@@ -22923,7 +22954,7 @@ var LeaderboardSummary = ({ pollID }) => {
       css: { color: "$on_surface_medium", "&:hover": { color: "$on_surface_high", cursor: "pointer" } },
       onClick: toggleSidepane
     },
-    /* @__PURE__ */ React95.createElement(CrossIcon12, null)
+    /* @__PURE__ */ React95.createElement(CrossIcon13, null)
   )), !viewAllEntries ? /* @__PURE__ */ React95.createElement(PeerParticipationSummary, { quiz }) : null, /* @__PURE__ */ React95.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", mt: "$4" } }, "Leaderboard"), /* @__PURE__ */ React95.createElement(Text, { variant: "xs", css: { color: "$on_surface_medium" } }, "Based on score and time taken to cast the correct answer"), /* @__PURE__ */ React95.createElement(
     Box,
     {
@@ -22982,7 +23013,7 @@ import {
   useHMSActions as useHMSActions30,
   useHMSStore as useHMSStore47
 } from "@100mslive/react-sdk";
-import { ChevronLeftIcon as ChevronLeftIcon5, CrossIcon as CrossIcon13 } from "@100mslive/react-icons";
+import { ChevronLeftIcon as ChevronLeftIcon5, CrossIcon as CrossIcon14 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Polls/Voting/StandardVoting.tsx
 init_define_process_env();
@@ -23283,7 +23314,7 @@ var Voting = ({ id, toggleVoting }) => {
           "&:hover": { opacity: "0.8" }
         }
       },
-      /* @__PURE__ */ React99.createElement(CrossIcon13, { onClick: toggleVoting })
+      /* @__PURE__ */ React99.createElement(CrossIcon14, { onClick: toggleVoting })
     )
   ), /* @__PURE__ */ React99.createElement(Flex, { direction: "column", css: { p: "$8 $10", flex: "1 1 0", overflowY: "auto" } }, poll.state === "started" ? /* @__PURE__ */ React99.createElement(Text, { css: { color: "$on_surface_medium", fontWeight: "$semiBold" } }, pollCreatorName || "Participant", " started a ", poll.type) : null, showSingleView ? /* @__PURE__ */ React99.createElement(TimedView, { poll }) : /* @__PURE__ */ React99.createElement(StandardView, { poll })), /* @__PURE__ */ React99.createElement(
     Flex,
@@ -23324,7 +23355,7 @@ var Polls = () => {
 // src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx
 init_define_process_env();
 import React103 from "react";
-import { CrossIcon as CrossIcon14 } from "@100mslive/react-icons";
+import { CrossIcon as CrossIcon15 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/RoomDetails/RoomDetailsRow.tsx
 init_define_process_env();
@@ -23361,28 +23392,28 @@ var RoomDetailsPane = () => {
       onClick: toggleDetailsPane,
       css: { color: "$on_surface_high", cursor: "pointer", "&:hover": { opacity: "0.8" } }
     },
-    /* @__PURE__ */ React103.createElement(CrossIcon14, null)
+    /* @__PURE__ */ React103.createElement(CrossIcon15, null)
   )), /* @__PURE__ */ React103.createElement(RoomDetailsRow, { details }), /* @__PURE__ */ React103.createElement(Box, { css: { mt: "$10" } }, /* @__PURE__ */ React103.createElement(Text, { css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, "Description"), /* @__PURE__ */ React103.createElement(Text, { variant: "sm", css: { c: "$on_surface_medium" } }, description)));
 };
 
 // src/Prebuilt/components/SidePaneTabs.tsx
 init_define_process_env();
 import React118, { useEffect as useEffect30, useState as useState50 } from "react";
-import { useMedia as useMedia18 } from "react-use";
+import { useMedia as useMedia19 } from "react-use";
 import { selectPeerCount as selectPeerCount5, useHMSStore as useHMSStore60 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon18 } from "@100mslive/react-icons";
+import { CrossIcon as CrossIcon19 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/Chat.tsx
 init_define_process_env();
 import React115, { useCallback as useCallback29, useRef as useRef21 } from "react";
-import { useMedia as useMedia17 } from "react-use";
+import { useMedia as useMedia18 } from "react-use";
 import { selectHMSMessagesCount, useHMSActions as useHMSActions38, useHMSStore as useHMSStore57, useHMSVanillaStore as useHMSVanillaStore11 } from "@100mslive/react-sdk";
 import { ChevronDownIcon as ChevronDownIcon8 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatBody.tsx
 init_define_process_env();
 import React107, { Fragment as Fragment11, useCallback as useCallback25, useEffect as useEffect25, useLayoutEffect, useMemo as useMemo8, useRef as useRef18, useState as useState44 } from "react";
-import { useMedia as useMedia12 } from "react-use";
+import { useMedia as useMedia13 } from "react-use";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { VariableSizeList } from "react-window";
 import {
@@ -23406,7 +23437,7 @@ import { selectLocalPeerName as selectLocalPeerName2, selectPermissions as selec
 import {
   CopyIcon as CopyIcon2,
   CrossCircleIcon as CrossCircleIcon2,
-  CrossIcon as CrossIcon15,
+  CrossIcon as CrossIcon16,
   EyeCloseIcon as EyeCloseIcon2,
   PeopleRemoveIcon as PeopleRemoveIcon3,
   PinIcon,
@@ -23639,7 +23670,7 @@ var ChatActions = ({
         }
       },
       "Message options",
-      /* @__PURE__ */ React105.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: (e) => setOpenSheet(false, e) }, /* @__PURE__ */ React105.createElement(CrossIcon15, null))
+      /* @__PURE__ */ React105.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: (e) => setOpenSheet(false, e) }, /* @__PURE__ */ React105.createElement(CrossIcon16, null))
     ), Object.keys(options).map((optionKey) => {
       const option = options[optionKey];
       return option.show ? /* @__PURE__ */ React105.createElement(
@@ -23709,7 +23740,7 @@ var ChatActions = ({
 // src/Prebuilt/components/Chat/EmptyChat.tsx
 init_define_process_env();
 import React106 from "react";
-import { useMedia as useMedia11 } from "react-use";
+import { useMedia as useMedia12 } from "react-use";
 
 // src/Prebuilt/images/empty-chat.svg
 var empty_chat_default = 'data:image/svg+xml,<svg width="184" height="133" viewBox="0 0 184 133" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M144.885 91.3998C145.318 91.023 145.861 90.7947 146.433 90.7483L146.446 90.7473L169.355 89.1614C169.702 89.1376 170.049 89.2101 170.358 89.3712C170.662 89.5305 170.918 89.7702 171.096 90.0642C171.098 90.0672 171.1 90.0703 171.102 90.0734L171.104 90.0766C171.281 90.3744 171.373 90.7154 171.369 91.062C171.365 91.4097 171.265 91.7496 171.08 92.044L158.85 111.504C158.539 111.986 158.081 112.356 157.544 112.56C157.007 112.764 156.419 112.791 155.866 112.636C155.313 112.482 154.823 112.155 154.469 111.703C154.115 111.25 153.915 110.697 153.898 110.123C153.898 110.109 153.898 110.094 153.898 110.08L153.996 100.307L145.347 95.7858C145.334 95.779 145.321 95.7721 145.308 95.7649C144.811 95.4785 144.417 95.0404 144.186 94.5146C143.955 93.9888 143.898 93.4029 144.024 92.8425C144.15 92.2821 144.451 91.7765 144.885 91.3998ZM167.441 91.0088L146.603 92.8952C146.49 92.9053 146.383 92.9508 146.298 93.0251C146.211 93.1005 146.151 93.2016 146.125 93.3137C146.1 93.4257 146.112 93.5429 146.158 93.6481C146.202 93.7484 146.276 93.8327 146.369 93.89L155.26 98.296L167.441 91.0088ZM156.32 100.171L168.547 92.8564L157.039 110.339C156.976 110.434 156.886 110.506 156.78 110.547C156.673 110.587 156.555 110.593 156.444 110.562C156.334 110.531 156.236 110.466 156.165 110.375C156.097 110.289 156.058 110.184 156.052 110.075L156.32 100.171Z" fill="%23444954"/>%0A<path d="M83.3248 35.4156C71.7182 47.1017 51.2098 75.5175 62.0292 95.6918C75.5536 120.91 140.453 79.2983 115.364 67.6657C90.2756 56.0331 65.8818 122.018 101.568 120.391C116.398 118.62 131.221 114.699 145.703 105.512" stroke="%23293042" stroke-width="2.25" stroke-dasharray="6 6"/>%0A<rect x="0.00256348" y="0.5" width="173.524" height="58.3398" rx="29.1699" fill="%23272A31"/>%0A<g opacity="0.4">%0A<rect x="24.7526" y="20.9312" width="111" height="4.5" rx="2.25" fill="%23444954"/>%0A</g>%0A<g opacity="0.4">%0A<rect x="38.2526" y="34.4312" width="110.25" height="4.5" rx="2.25" fill="%23444954"/>%0A</g>%0A<path d="M40.3918 71.5547L28.4246 55.0999L52.3589 55.0999L40.3918 71.5547Z" fill="%23272A31"/>%0A</svg>%0A';
@@ -23719,7 +23750,7 @@ var EmptyChat = () => {
   var _a8;
   const { elements } = useRoomLayoutConferencingScreen();
   const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
-  const isMobile = useMedia11(config.media.md);
+  const isMobile = useMedia12(config.media.md);
   const canSendMessages = elements.chat && (elements.chat.public_chat_enabled || elements.chat.private_chat_enabled || elements.chat.roles_whitelist && elements.chat.roles_whitelist.length) && !isLocalPeerBlacklisted;
   if (isMobile && ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.is_overlay))
     return /* @__PURE__ */ React106.createElement(React106.Fragment, null);
@@ -23880,7 +23911,7 @@ var ChatMessage = React107.memo(
     var _a8, _b7, _c;
     const { elements } = useRoomLayoutConferencingScreen();
     const rowRef = useRef18(null);
-    const isMobile = useMedia12(config.media.md);
+    const isMobile = useMedia13(config.media.md);
     const isPrivateChatEnabled = !!((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.private_chat_enabled);
     const isOverlay = ((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.is_overlay) && isMobile;
     const localPeerId = useHMSStore51(selectLocalPeerID10);
@@ -24150,22 +24181,22 @@ var PinnedBy = ({
 // src/Prebuilt/components/Chat/ChatFooter.tsx
 init_define_process_env();
 import React110, { useCallback as useCallback27, useEffect as useEffect27, useRef as useRef20, useState as useState47 } from "react";
-import { useMedia as useMedia15 } from "react-use";
+import { useMedia as useMedia16 } from "react-use";
 import data2 from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
-import { selectLocalPeer as selectLocalPeer3, useHMSActions as useHMSActions36, useHMSStore as useHMSStore54 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer3, useAVToggle as useAVToggle5, useHMSActions as useHMSActions36, useHMSStore as useHMSStore54 } 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
 init_define_process_env();
 import React109, { useState as useState46 } from "react";
-import { useMedia as useMedia14 } from "react-use";
-import { ChevronDownIcon as ChevronDownIcon6, ChevronUpIcon as ChevronUpIcon5, CrossIcon as CrossIcon16, GroupIcon, PersonIcon as PersonIcon2 } from "@100mslive/react-icons";
+import { useMedia as useMedia15 } from "react-use";
+import { ChevronDownIcon as ChevronDownIcon6, ChevronUpIcon as ChevronUpIcon5, CrossIcon as CrossIcon17, GroupIcon, PersonIcon as PersonIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Chat/ChatSelector.tsx
 init_define_process_env();
 import React108, { useMemo as useMemo9, useState as useState45 } from "react";
-import { useMedia as useMedia13 } from "react-use";
+import { useMedia as useMedia14 } from "react-use";
 import {
   selectMessagesUnreadCountByPeerID,
   selectMessagesUnreadCountByRole,
@@ -24184,7 +24215,7 @@ var SelectorItem = ({
   unreadCount,
   icon = void 0
 }) => {
-  const isMobile = useMedia13(config.media.md);
+  const isMobile = useMedia14(config.media.md);
   const Root28 = !isMobile ? Dropdown.Item : (_a8) => {
     var _b7 = _a8, { children } = _b7, rest = __objRest(_b7, ["children"]);
     return /* @__PURE__ */ React108.createElement(Flex, __spreadProps(__spreadValues({}, rest), { css: __spreadValues({ p: "$6 $8" }, rest.css) }), children);
@@ -24335,7 +24366,7 @@ var ChatSelector = ({ role, peerId }) => {
 var ChatSelectorContainer = () => {
   var _a8, _b7;
   const [open, setOpen] = useState46(false);
-  const isMobile = useMedia14(config.media.md);
+  const isMobile = useMedia15(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const isPrivateChatEnabled = !!((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.private_chat_enabled);
   const isPublicChatEnabled = !!((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.public_chat_enabled);
@@ -24438,7 +24469,7 @@ var ChatSelectorContainer = () => {
       }
     },
     /* @__PURE__ */ React109.createElement(Text, { css: { color: "$on_surface_medium", fontWeight: "$semiBold" } }, "Chat with"),
-    /* @__PURE__ */ React109.createElement(Sheet.Close, { css: { color: "$on_surface_medium" } }, /* @__PURE__ */ React109.createElement(CrossIcon16, null))
+    /* @__PURE__ */ React109.createElement(Sheet.Close, { css: { color: "$on_surface_medium" } }, /* @__PURE__ */ React109.createElement(CrossIcon17, null))
   ), /* @__PURE__ */ React109.createElement(
     Box,
     {
@@ -24548,12 +24579,12 @@ function EmojiPicker({ onSelect }) {
   )));
 }
 var ChatFooter = ({ onSend, children }) => {
-  var _a8, _b7, _c, _d, _e;
+  var _a8, _b7, _c, _d;
   const hmsActions = useHMSActions36();
   const inputRef = useRef20(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
-  const isMobile = useMedia15(config.media.md);
-  const { elements } = useRoomLayoutConferencingScreen();
+  const isMobile = useMedia16(config.media.md);
+  const { elements, screenType } = useRoomLayoutConferencingScreen();
   const message_placeholder = ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.message_placeholder) || "Send a message";
   const localPeer = useHMSStore54(selectLocalPeer3);
   const isOverlayChat = (_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.is_overlay;
@@ -24563,16 +24594,20 @@ var ChatFooter = ({ onSend, children }) => {
   const defaultSelection = useDefaultChatSelection();
   const selection = selectedPeer.name || selectedRole || defaultSelection;
   const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
+  const { toggleAudio, toggleVideo } = useAVToggle5();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
+  const isMwebHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
   useEffect27(() => {
     var _a9, _b8;
     if (!selectedPeer.id && !selectedRole && !["Everyone", ""].includes(defaultSelection)) {
       setRoleSelector(defaultSelection);
     } else {
-      if (!((_a9 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a9.disable_autofocus)) {
+      if (!(isMobile || isLandscapeHLSStream) || !((_a9 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a9.disable_autofocus)) {
         (_b8 = inputRef.current) == null ? void 0 : _b8.focus();
       }
     }
-  }, [defaultSelection, (_e = elements == null ? void 0 : elements.chat) == null ? void 0 : _e.disable_autofocus, selectedPeer, selectedRole, setRoleSelector]);
+  }, [defaultSelection, selectedPeer, selectedRole, setRoleSelector, isMobile, isLandscapeHLSStream, elements == null ? void 0 : elements.chat]);
   const sendMessage = useCallback27(() => __async(void 0, null, function* () {
     var _a9;
     const message = (_a9 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a9.value;
@@ -24647,21 +24682,19 @@ var ChatFooter = ({ onSend, children }) => {
     Flex,
     {
       align: "center",
-      css: {
+      css: __spreadValues({
         bg: isOverlayChat && isMobile ? "$surface_dim" : "$surface_default",
-        minHeight: "$16",
         maxHeight: "$24",
         position: "relative",
-        py: "$6",
         pl: "$8",
-        flexGrow: 1,
+        flexGrow: "1",
         r: "$1",
         "@md": {
           minHeight: "unset",
           h: "$14",
           boxSizing: "border-box"
         }
-      }
+      }, isLandscapeHLSStream ? { minHeight: "$14", py: 0 } : {})
     },
     children,
     /* @__PURE__ */ React110.createElement(
@@ -24677,6 +24710,7 @@ var ChatFooter = ({ onSend, children }) => {
         placeholder: message_placeholder,
         ref: inputRef,
         required: true,
+        autoFocus: !(isMobile || isLandscapeHLSStream),
         onKeyPress: (event) => __async(void 0, null, function* () {
           if (event.key === "Enter") {
             if (!event.shiftKey) {
@@ -24692,7 +24726,7 @@ var ChatFooter = ({ onSend, children }) => {
         onCopy: (e) => e.stopPropagation()
       }
     ),
-    !isMobile ? /* @__PURE__ */ React110.createElement(
+    !isMobile && !isLandscapeHLSStream ? /* @__PURE__ */ React110.createElement(
       EmojiPicker,
       {
         onSelect: (emoji) => {
@@ -24717,6 +24751,16 @@ var ChatFooter = ({ onSend, children }) => {
       },
       /* @__PURE__ */ React110.createElement(SendIcon, null)
     )
+  ), (isMwebHLSStream || isLandscapeHLSStream) && /* @__PURE__ */ React110.createElement(
+    Flex,
+    {
+      css: {
+        alignItems: "center"
+      },
+      gap: "1"
+    },
+    noAVPermissions ? /* @__PURE__ */ React110.createElement(RaiseHand, null) : null,
+    /* @__PURE__ */ React110.createElement(MoreSettings, { elements, screenType })
   )));
 };
 
@@ -24780,7 +24824,7 @@ var ChatBlocked = () => {
 init_define_process_env();
 import React114, { useEffect as useEffect28, useState as useState48 } from "react";
 import { useSwipeable } from "react-swipeable";
-import { useMedia as useMedia16 } from "react-use";
+import { useMedia as useMedia17 } from "react-use";
 import { selectSessionStore as selectSessionStore7, useHMSStore as useHMSStore56 } from "@100mslive/react-sdk";
 import { PinIcon as PinIcon2, UnpinIcon } from "@100mslive/react-icons";
 
@@ -24841,7 +24885,7 @@ var PinnedMessage = () => {
   const pinnedMessages = useHMSStore56(selectSessionStore7("pinnedMessages" /* PINNED_MESSAGES */));
   const [pinnedMessageIndex, setPinnedMessageIndex] = useState48(0);
   const { removePinnedMessage } = usePinnedMessages();
-  const isMobile = useMedia16(config.media.md);
+  const isMobile = useMedia17(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const canUnpinMessage = !!((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.allow_pinning_messages);
   const [hideOverflow, setHideOverflow] = useState48(true);
@@ -24956,8 +25000,8 @@ var Chat = () => {
   const listRef = useRef21(null);
   const hmsActions = useHMSActions38();
   const vanillaStore = useHMSVanillaStore11();
-  const { enabled: isChatEnabled = true } = useHMSStore57(em("chatState" /* CHAT_STATE */)) || {};
-  const isMobile = useMedia17(config.media.md);
+  const { enabled: isChatEnabled = true } = useHMSStore57(tm("chatState" /* CHAT_STATE */)) || {};
+  const isMobile = useMedia18(config.media.md);
   const scrollToBottom = useCallback29(
     (unreadCount = 0) => {
       var _a9;
@@ -24995,7 +25039,7 @@ var NewMessageIndicator = ({
   scrollToBottom,
   listRef
 }) => {
-  const unreadCount = useHMSStore57(Gn);
+  const unreadCount = useHMSStore57($n);
   if (!unreadCount || !listRef.current) {
     return null;
   }
@@ -25046,7 +25090,7 @@ import { useInView } from "react-intersection-observer";
 import { useMeasure as useMeasure2 } from "react-use";
 import { VariableSizeList as VariableSizeList2 } from "react-window";
 import { selectIsConnectedToRoom as selectIsConnectedToRoom8, useHMSStore as useHMSStore58, usePaginatedParticipants as usePaginatedParticipants2 } from "@100mslive/react-sdk";
-import { ChevronLeftIcon as ChevronLeftIcon6, CrossIcon as CrossIcon17 } from "@100mslive/react-icons";
+import { ChevronLeftIcon as ChevronLeftIcon6, CrossIcon as CrossIcon18 } from "@100mslive/react-icons";
 var LoadMoreParticipants = ({
   hasNext,
   loadMore,
@@ -25105,7 +25149,7 @@ var PaginatedParticipants = ({ roleName, onBack }) => {
       },
       "data-testid": "close_sidepane"
     },
-    /* @__PURE__ */ React116.createElement(CrossIcon17, null)
+    /* @__PURE__ */ React116.createElement(CrossIcon18, null)
   )), /* @__PURE__ */ React116.createElement(ParticipantSearch, { onSearch: (search2) => setSearch(search2), placeholder: `Search for ${roleName}` }), /* @__PURE__ */ React116.createElement(Flex, { direction: "column", css: { border: "1px solid $border_default", borderRadius: "$1", flex: "1 1 0" } }, /* @__PURE__ */ React116.createElement(Flex, { align: "center", css: { height: ROW_HEIGHT, borderBottom: "1px solid $border_default", px: "$8" } }, /* @__PURE__ */ React116.createElement(Text, { css: { fontSize: "$space$7" } }, roleName, "(", getFormattedCount(peers.length), "/", getFormattedCount(total), ")")), /* @__PURE__ */ React116.createElement(Box, { css: { flex: "1 1 0", overflowY: "auto", overflowX: "hidden", mr: "-$10" } }, /* @__PURE__ */ React116.createElement(
     VariableSizeList2,
     {
@@ -25189,7 +25233,7 @@ var tabTriggerCSS = {
 var ParticipantCount2 = ({ count }) => {
   return count < 1e3 ? /* @__PURE__ */ React118.createElement("span", null, "(", count, ")") : /* @__PURE__ */ React118.createElement(Tooltip, { title: count }, /* @__PURE__ */ React118.createElement("span", null, "(", getFormattedCount(count), ")"));
 };
-var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControls }) => {
+var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControls, hideTab = false }) => {
   var _a8, _b7;
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
@@ -25197,12 +25241,12 @@ var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControl
   const [activeTab, setActiveTab] = useState50(active);
   const [activeRole, setActiveRole] = useState50("");
   const peerCount = useHMSStore60(selectPeerCount5);
-  const { elements } = useRoomLayoutConferencingScreen();
+  const { elements, screenType } = useRoomLayoutConferencingScreen();
   const chat_title = ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.chat_title) || "Chat";
   const showChat = !!(elements == null ? void 0 : elements.chat);
   const showParticipants = !!(elements == null ? void 0 : elements.participant_list);
-  const hideTabs = !(showChat && showParticipants);
-  const isMobile = useMedia18(config.media.md);
+  const hideTabs = !(showChat && showParticipants) || hideTab;
+  const isMobile = useMedia19(config.media.md);
   const isOverlayChat = !!((_b7 = elements == null ? void 0 : elements.chat) == null ? void 0 : _b7.is_overlay) && isMobile;
   const { off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
@@ -25246,10 +25290,28 @@ var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControl
         transition: "margin 0.3s ease-in-out"
       }
     },
-    isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ React118.createElement(Chat, null) : /* @__PURE__ */ React118.createElement(React118.Fragment, null, hideTabs ? /* @__PURE__ */ React118.createElement(React118.Fragment, null, /* @__PURE__ */ React118.createElement(Flex, { justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React118.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? chat_title : /* @__PURE__ */ React118.createElement("span", null, "Participants\xA0", /* @__PURE__ */ React118.createElement(ParticipantCount2, { count: peerCount }))), /* @__PURE__ */ React118.createElement(Flex, null, showChatSettings ? /* @__PURE__ */ React118.createElement(ChatSettings, null) : null, isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React118.createElement(
+    isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ React118.createElement(Chat, null) : /* @__PURE__ */ React118.createElement(React118.Fragment, null, hideTabs ? /* @__PURE__ */ React118.createElement(React118.Fragment, null, /* @__PURE__ */ React118.createElement(Flex, { justify: "between", css: { w: "100%", "&:empty": { display: "none" } } }, /* @__PURE__ */ React118.createElement(
+      Text,
+      {
+        variant: "sm",
+        css: {
+          fontWeight: "$semiBold",
+          p: "$4",
+          c: "$on_surface_high",
+          pr: "$12",
+          "&:empty": { display: "none" }
+        }
+      },
+      activeTab === SIDE_PANE_OPTIONS.CHAT ? screenType !== "hls_live_streaming" && chat_title : /* @__PURE__ */ React118.createElement("span", null, "Participants\xA0", /* @__PURE__ */ React118.createElement(ParticipantCount2, { count: peerCount }))
+    ), /* @__PURE__ */ React118.createElement(Flex, null, showChatSettings ? /* @__PURE__ */ React118.createElement(ChatSettings, null) : null, isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React118.createElement(
       IconButton,
       {
-        css: { my: "$1", color: "$on_surface_medium", "&:hover": { color: "$on_surface_high" } },
+        css: {
+          my: "$1",
+          color: "$on_surface_medium",
+          "&:hover": { color: "$on_surface_high" },
+          "&:empty": { display: "none" }
+        },
         onClick: (e) => {
           e.stopPropagation();
           if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
@@ -25260,8 +25322,8 @@ var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControl
         },
         "data-testid": "close_chat"
       },
-      /* @__PURE__ */ React118.createElement(CrossIcon18, null)
-    ))), showChat ? /* @__PURE__ */ React118.createElement(Chat, null) : /* @__PURE__ */ React118.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole })) : /* @__PURE__ */ React118.createElement(
+      screenType === "hls_live_streaming" && isChatOpen ? null : /* @__PURE__ */ React118.createElement(CrossIcon19, null)
+    ))), activeTab === SIDE_PANE_OPTIONS.CHAT ? /* @__PURE__ */ React118.createElement(Chat, null) : /* @__PURE__ */ React118.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole })) : /* @__PURE__ */ React118.createElement(
       Tabs.Root,
       {
         value: activeTab,
@@ -25306,7 +25368,7 @@ var SidePaneTabs = React118.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideControl
           },
           "data-testid": "close_chat"
         },
-        /* @__PURE__ */ React118.createElement(CrossIcon18, null)
+        /* @__PURE__ */ React118.createElement(CrossIcon19, null)
       )),
       /* @__PURE__ */ React118.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React118.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole })),
       /* @__PURE__ */ React118.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React118.createElement(Chat, null))
@@ -25378,7 +25440,7 @@ var TileConnection_default = TileConnection;
 // src/Prebuilt/components/TileMenu/TileMenu.tsx
 init_define_process_env();
 import React121, { useState as useState51 } from "react";
-import { useMedia as useMedia20 } from "react-use";
+import { useMedia as useMedia21 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID11,
   selectPeerByID as selectPeerByID2,
@@ -25388,12 +25450,12 @@ import {
   useHMSStore as useHMSStore63,
   useRemoteAVToggle as useRemoteAVToggle2
 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon19, VerticalMenuIcon as VerticalMenuIcon8 } from "@100mslive/react-icons";
+import { CrossIcon as CrossIcon20, VerticalMenuIcon as VerticalMenuIcon8 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/TileMenu/TileMenuContent.tsx
 init_define_process_env();
 import React120, { Fragment as Fragment12 } from "react";
-import { useMedia as useMedia19 } from "react-use";
+import { useMedia as useMedia20 } from "react-use";
 import {
   selectPermissions as selectPermissions16,
   selectSessionStore as selectSessionStore10,
@@ -25580,7 +25642,7 @@ var TileMenuContent = ({
   const { sendEvent } = useCustomEvent2({
     type: REMOTE_STOP_SCREENSHARE_TYPE
   });
-  const isMobile = useMedia19(config.media.md);
+  const isMobile = useMedia20(config.media.md);
   if (isLocal) {
     return showPinAction || canMinimise || !userName || showSpotlight ? /* @__PURE__ */ React120.createElement(React120.Fragment, null, showPinAction && /* @__PURE__ */ React120.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React120.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() }), canMinimise && /* @__PURE__ */ React120.createElement(MinimiseInset, null), !userName && /* @__PURE__ */ React120.createElement(
       StyledMenuTile.ItemButton,
@@ -25679,7 +25741,7 @@ var TileMenu = ({
   const showPinAction = !!(audioTrackID || videoTrackID && isPrimaryVideoTrack);
   const track = useHMSStore63(selectTrackByID3(videoTrackID));
   const hideSimulcastLayers = !((_b7 = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _b7.length) || track.degraded || !track.enabled;
-  const isMobile = useMedia20(config.media.md);
+  const isMobile = useMedia21(config.media.md);
   const peer = useHMSStore63(selectPeerByID2(peerID));
   const [showNameChangeModal, setShowNameChangeModal] = useState51(false);
   useDropdownList({ open, name: "TileMenu" });
@@ -25724,7 +25786,7 @@ var TileMenu = ({
       }
     },
     /* @__PURE__ */ React121.createElement(Box, null, /* @__PURE__ */ React121.createElement(Text, { css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, peer == null ? void 0 : peer.name, isLocal ? ` (You)` : null), (peer == null ? void 0 : peer.roleName) ? /* @__PURE__ */ React121.createElement(Text, { variant: "xs", css: { color: "$on_surface_low", mt: "$2" } }, peer.roleName) : null),
-    /* @__PURE__ */ React121.createElement(Sheet.Close, { css: { color: "inherit" } }, /* @__PURE__ */ React121.createElement(CrossIcon19, null))
+    /* @__PURE__ */ React121.createElement(Sheet.Close, { css: { color: "inherit" } }, /* @__PURE__ */ React121.createElement(CrossIcon20, null))
   ), /* @__PURE__ */ React121.createElement(Box, { css: { px: "$8", pb: "$8", maxHeight: "80vh", overflowY: "auto" } }, /* @__PURE__ */ React121.createElement(TileMenuContent, __spreadProps(__spreadValues({}, props), { closeSheetOnClick: () => setOpen(false) }))))) : /* @__PURE__ */ React121.createElement(StyledMenuTile.Content, { side: "top", align: "end", css: { maxHeight: "$80", overflowY: "auto" } }, /* @__PURE__ */ React121.createElement(TileMenuContent, __spreadValues({}, props)))), showNameChangeModal && /* @__PURE__ */ React121.createElement(ChangeNameModal, { onOpenChange: setShowNameChangeModal }));
 };
 var TileMenu_default = TileMenu;
@@ -25887,7 +25949,7 @@ import {
   useHMSActions as useHMSActions41,
   useHMSStore as useHMSStore65
 } from "@100mslive/react-sdk";
-import { BlurPersonHighIcon, CrossCircleIcon as CrossCircleIcon3, CrossIcon as CrossIcon20 } from "@100mslive/react-icons";
+import { BlurPersonHighIcon, CrossCircleIcon as CrossCircleIcon3, CrossIcon as CrossIcon21 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/VirtualBackground/VBCollection.tsx
 init_define_process_env();
@@ -26081,10 +26143,10 @@ var VBPicker = ({ backgroundMedia = [] }) => {
   const [blurAmount, setBlurAmount] = useState53(VBHandler.getBlurAmount() || 0.5);
   const roomState = useHMSStore65(selectRoomState4);
   const isLargeRoom = useHMSStore65(selectIsLargeRoom3);
-  const isEffectsEnabled = useHMSStore65(Zn);
-  const effectsKey = useHMSStore65(ec);
+  const isEffectsEnabled = useHMSStore65(ec);
+  const effectsKey = useHMSStore65(tc);
   const isPluginAdded = useHMSStore65(selectIsLocalVideoPluginPresent(((_a8 = VBHandler) == null ? void 0 : _a8.getName()) || ""));
-  const background = useHMSStore65(Zh(APP_DATA.background));
+  const background = useHMSStore65(em(APP_DATA.background));
   const mediaList = backgroundMedia.length ? backgroundMedia.map((media) => media.url || "") : defaultMedia2;
   const inPreview = roomState === HMSRoomState4.Preview;
   const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
@@ -26133,7 +26195,7 @@ var VBPicker = ({ backgroundMedia = [] }) => {
       css: { color: "$on_surface_high", "&:hover": { color: "$on_surface_medium" }, cursor: "pointer" },
       onClick: toggleVB
     },
-    /* @__PURE__ */ React125.createElement(CrossIcon20, null)
+    /* @__PURE__ */ React125.createElement(CrossIcon21, null)
   )), showVideoTile ? /* @__PURE__ */ React125.createElement(
     Video,
     {
@@ -26220,13 +26282,16 @@ var SidePane = ({
   hideControls = false
 }) => {
   var _a8, _b7, _c, _d, _e, _f;
-  const isMobile = useMedia21(config.media.md);
+  const isMobile = useMedia22(config.media.md);
+  const isLandscape = useIsLandscape();
   const sidepane = useHMSStore66(selectAppData6(APP_DATA.sidePane));
   const activeScreensharePeerId = useHMSStore66(selectAppData6(APP_DATA.activeScreensharePeerId));
   const trackId = (_a8 = useHMSStore66(selectVideoTrackByPeerID4(activeScreensharePeerId))) == null ? void 0 : _a8.id;
   const { elements } = useRoomLayoutConferencingScreen();
   const { elements: preview_elements } = useRoomLayoutPreviewScreen();
   const layoutMode = useUISettings(UI_SETTINGS.layoutMode);
+  const isLandscapeHLSStream = useLandscapeHLSStream();
+  const isMobileHLSStream = useMobileHLSStream();
   const backgroundMedia = ((_c = (_b7 = preview_elements == null ? void 0 : preview_elements.virtual_background) == null ? void 0 : _b7.background_media) == null ? void 0 : _c.length) ? (_d = preview_elements == null ? void 0 : preview_elements.virtual_background) == null ? void 0 : _d.background_media : ((_e = elements == null ? void 0 : elements.virtual_background) == null ? void 0 : _e.background_media) || [];
   const resetSidePane = useSidepaneReset();
   let ViewComponent;
@@ -26234,7 +26299,7 @@ var SidePane = ({
     ViewComponent = /* @__PURE__ */ React126.createElement(Polls, null);
   }
   if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
-    ViewComponent = /* @__PURE__ */ React126.createElement(SidePaneTabs, { hideControls, active: sidepane });
+    ViewComponent = /* @__PURE__ */ React126.createElement(SidePaneTabs, { hideControls, active: sidepane, hideTab: isMobileHLSStream || isLandscapeHLSStream });
   }
   if (sidepane === SIDE_PANE_OPTIONS.VB) {
     ViewComponent = /* @__PURE__ */ React126.createElement(VBPicker, { backgroundMedia });
@@ -26266,11 +26331,11 @@ var SidePane = ({
       justify: "center",
       css: {
         w: "$100",
-        h: "100%",
+        h: isMobileHLSStream ? "64%" : "100%",
         flexShrink: 0,
         gap: "$4",
         position: "relative",
-        "@md": { position: mwebStreamingChat ? "absolute" : "", zIndex: 12 }
+        "@md": { position: mwebStreamingChat || isLandscape ? "absolute" : "", zIndex: 12 }
       }
     },
     trackId && layoutMode === LayoutMode.GALLERY && /* @__PURE__ */ React126.createElement(
@@ -26288,12 +26353,12 @@ var SidePane = ({
       {
         css: {
           w: "$100",
-          h: mwebStreamingChat ? "0" : "100%",
+          h: mwebStreamingChat || isLandscape ? "0" : "100%",
           p: VB ? "$10 $6 $10 $10" : "$10",
           flex: "1 1 0",
           minHeight: 0,
-          maxHeight: mwebStreamingChat ? "300px" : "unset",
-          background: mwebStreamingChat ? "linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.94%, rgba(0, 0, 0, 0.64) 100%)" : "$surface_dim",
+          maxHeight: mwebStreamingChat || isLandscape ? "300px" : "unset",
+          background: mwebStreamingChat || isLandscape ? "linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.94%, rgba(0, 0, 0, 0.64) 100%)" : "$surface_dim",
           r: "$1",
           position: "relative",
           "@lg": {
@@ -26301,14 +26366,17 @@ var SidePane = ({
             h: "100%",
             ml: 0,
             right: 0,
-            position: "fixed",
+            position: isLandscapeHLSStream ? "" : "fixed",
+            minHeight: isLandscapeHLSStream ? "100%" : "",
             bottom: 0,
             borderRadius: 0,
             zIndex: 10
           },
           "@md": {
             p: "$6 $8",
-            pb: mwebStreamingChat ? "$20" : "$12",
+            h: isMobileHLSStream ? "64%" : "100%",
+            pb: "$12",
+            minHeight: isMobileHLSStream ? "64%" : "",
             borderTopLeftRadius: sidepane === SIDE_PANE_OPTIONS.POLLS ? "$2" : "0",
             borderTopRightRadius: sidepane === SIDE_PANE_OPTIONS.POLLS ? "$2" : "0",
             animation: `${translateAcross({ yFrom: "100%" })} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
@@ -26408,7 +26476,7 @@ var Logo = () => {
 // 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";
@@ -26425,7 +26493,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) || {};
@@ -26486,7 +26554,7 @@ var getParticipantChipContent = (peerCount = 0) => {
 var useLocalTileAspectRatio = () => {
   const localPeer = useHMSStore68(selectLocalPeer7);
   const videoTrack = useHMSStore68(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;
@@ -26507,7 +26575,7 @@ var PreviewJoin = ({
   const { isStreamingOn } = useRecordingStreaming11();
   const authToken = useAuthToken();
   const [name, setName] = useState55(initialName || previewPreference.name);
-  const { toggleAudio, toggleVideo } = useAVToggle5();
+  const { toggleAudio, toggleVideo } = useAVToggle6();
   const [previewError, setPreviewError] = useState55(false);
   const { endpoints } = useHMSPrebuiltContext();
   const { peerCount } = useParticipants2();
@@ -26595,7 +26663,7 @@ var Container4 = styled("div", __spreadProps(__spreadValues({
 }));
 var PreviewTile = ({ name, error }) => {
   const localPeer = useHMSStore68(selectLocalPeer7);
-  const { isLocalAudioEnabled, toggleAudio } = useAVToggle5();
+  const { isLocalAudioEnabled, toggleAudio } = useAVToggle6();
   const isVideoOn = useHMSStore68(selectIsLocalVideoEnabled6);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const trackSelector = selectVideoTrackByID5(localPeer == null ? void 0 : localPeer.videoTrack);
@@ -26640,7 +26708,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,
     {
@@ -26663,7 +26731,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,
@@ -26673,7 +26741,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 })));
   }
@@ -26785,14 +26853,14 @@ import {
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
 init_define_process_env();
 import React138, { useEffect as useEffect39, useMemo as useMemo13, useState as useState57 } from "react";
-import { useMedia as useMedia27 } from "react-use";
+import { useMedia as useMedia28 } from "react-use";
 import { selectLocalPeer as selectLocalPeer9, useHMSStore as useHMSStore71 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/InsetTile.tsx
 init_define_process_env();
 import React135, { useEffect as useEffect36, useRef as useRef22 } 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,
@@ -26836,8 +26904,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 = useHMSStore70(selector);
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
@@ -26997,7 +27065,7 @@ var Grid = React137.forwardRef(
 // src/Prebuilt/components/hooks/useTileLayout.tsx
 init_define_process_env();
 import { useEffect as useEffect38, useMemo as useMemo12, useState as useState56 } 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 selectTracksMap3,
@@ -27033,7 +27101,7 @@ var useTileLayout = ({
 }) => {
   const vanillaStore = useHMSVanillaStore12();
   const [ref, { width, height }] = useMeasure5();
-  const isMobile = useMedia26(config.media.lg);
+  const isMobile = useMedia27(config.media.lg);
   const [pagesWithTiles, setPagesWithTiles] = useState56([]);
   useEffect38(() => {
     if (width === 0 || height === 0) {
@@ -27103,7 +27171,7 @@ var useTileLayout = ({
 function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }) {
   var _a8;
   const localPeer = useHMSStore71(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({
@@ -27148,13 +27216,13 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
 // src/Prebuilt/components/VideoLayouts/RoleProminence.tsx
 init_define_process_env();
 import React141, { useEffect as useEffect41, useState as useState59 } from "react";
-import { useMedia as useMedia29 } from "react-use";
+import { useMedia as useMedia30 } from "react-use";
 import { selectLocalPeer as selectLocalPeer10, useHMSStore as useHMSStore73 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/SecondaryTiles.tsx
 init_define_process_env();
 import React140, { useEffect as useEffect40, useRef as useRef23, useState as useState58 } from "react";
-import { useMedia as useMedia28 } from "react-use";
+import { useMedia as useMedia29 } from "react-use";
 import { selectAppData as selectAppData7, selectSessionStore as selectSessionStore11, selectTrackByID as selectTrackByID4, useHMSStore as useHMSStore72 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
@@ -27238,7 +27306,7 @@ 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] = useState58(0);
   const pinnedTrackId = useHMSStore72(selectAppData7(APP_DATA.pinnedTrackId));
@@ -27340,7 +27408,7 @@ function RoleProminence({
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
   const localPeer = useHMSStore73(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({
@@ -27382,13 +27450,13 @@ function RoleProminence({
 // src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx
 init_define_process_env();
 import React145, { useEffect as useEffect42, useMemo as useMemo15, useState as useState62 } from "react";
-import { useMedia as useMedia31 } from "react-use";
+import { useMedia as useMedia32 } from "react-use";
 import { selectPeersScreenSharing, useHMSStore as useHMSStore75 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/ScreenshareTile.tsx
 init_define_process_env();
 import React144, { useRef as useRef24, useState as useState61 } 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,
@@ -27500,7 +27568,7 @@ var LayoutModeSelector = () => {
 init_define_process_env();
 import React143 from "react";
 import { useHMSActions as useHMSActions43 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon21, ShareScreenIcon as ShareScreenIcon5 } from "@100mslive/react-icons";
+import { CrossIcon as CrossIcon22, ShareScreenIcon as ShareScreenIcon5 } from "@100mslive/react-icons";
 var ScreenshareDisplay = () => {
   const hmsActions = useHMSActions43();
   return /* @__PURE__ */ React143.createElement(
@@ -27527,7 +27595,7 @@ var ScreenshareDisplay = () => {
         }),
         "data-testid": "stop_screen_share_btn"
       },
-      /* @__PURE__ */ React143.createElement(CrossIcon21, { width: 18, height: 18 }),
+      /* @__PURE__ */ React143.createElement(CrossIcon22, { width: 18, height: 18 }),
       "\xA0 Stop screen share"
     )
   );
@@ -27549,7 +27617,7 @@ var Tile2 = ({ peerId, width = "100%", height = "100%" }) => {
   const peer = useHMSStore74(selectPeerByID4(peerId));
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const [isMouseHovered, setIsMouseHovered] = useState61(false);
-  const isMobile = useMedia30(config.media.md);
+  const isMobile = useMedia31(config.media.md);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
   const fullscreenRef = useRef24(null);
   const [fullscreen, setFullscreen] = useState61(false);
@@ -27641,7 +27709,7 @@ var ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }) => {
   const [page, setPage] = useState62(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 = useMemo15(() => {
     if (layoutMode === LayoutMode.SPOTLIGHT) {
@@ -28052,10 +28120,10 @@ var WaitingView = React149.memo(() => {
 // src/Prebuilt/layouts/WhiteboardView.tsx
 init_define_process_env();
 import React150, { useEffect as useEffect46, useMemo as useMemo18 } from "react";
-import { useMedia as useMedia32 } from "react-use";
+import { useMedia as useMedia33 } from "react-use";
 import { selectPeers as selectPeers5, selectWhiteboard, useHMSStore as useHMSStore78, useWhiteboard as useWhiteboard2 } from "@100mslive/react-sdk";
 var EmbedComponent2 = () => {
-  const isMobile = useMedia32(config.media.md);
+  const isMobile = useMedia33(config.media.md);
   const { iframeRef } = useWhiteboard2(isMobile);
   return /* @__PURE__ */ React150.createElement(
     Box,
@@ -28126,7 +28194,7 @@ var useCloseScreenshareWhiteboard = () => {
 };
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var HLSView = React151.lazy(() => import("./HLSView-CEPQ23TO.js"));
+var HLSView = React151.lazy(() => import("./HLSView-UIPDGADR.js"));
 var VideoStreamingSection = ({
   screenType,
   elements,
@@ -28141,6 +28209,7 @@ var VideoStreamingSection = ({
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFConfig();
+  const isMobileHLSStream = useMobileHLSStream();
   useCloseScreenshareWhiteboard();
   useEffect48(() => {
     if (!isConnected) {
@@ -28180,17 +28249,29 @@ var VideoStreamingSection = ({
         size: "100%",
         position: "relative",
         gap: "$4"
-      }
+      },
+      direction: isMobileHLSStream ? "column" : "row"
     },
     ViewComponent,
-    /* @__PURE__ */ React151.createElement(Box, { css: { height: "100%", maxHeight: "100%", overflowY: "clip", "&:empty": { display: "none" } } }, /* @__PURE__ */ React151.createElement(
-      SidePane_default,
+    /* @__PURE__ */ React151.createElement(
+      Box,
       {
-        screenType,
-        tileProps: (_d = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _d.grid,
-        hideControls
-      }
-    ))
+        css: {
+          height: isMobileHLSStream ? "50%" : "100%",
+          maxHeight: "100%",
+          "&:empty": { display: "none" },
+          overflowY: "clip"
+        }
+      },
+      /* @__PURE__ */ React151.createElement(
+        SidePane_default,
+        {
+          screenType,
+          tileProps: (_d = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _d.grid,
+          hideControls
+        }
+      )
+    )
   ));
 };
 
@@ -28200,17 +28281,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 useHMSStore81 } 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);
@@ -28243,7 +28324,7 @@ import {
   BluetoothIcon,
   CameraFlipIcon as CameraFlipIcon2,
   CheckIcon as CheckIcon9,
-  CrossIcon as CrossIcon22,
+  CrossIcon as CrossIcon23,
   HeadphonesIcon,
   SpeakerIcon as SpeakerIcon4
 } from "@100mslive/react-icons";
@@ -28328,7 +28409,7 @@ var AudioActions = () => {
   );
 };
 var AudioSelectionSheet = ({ audioDevices, audioSelected, onChange, children }) => {
-  return /* @__PURE__ */ React153.createElement(Sheet.Root, null, /* @__PURE__ */ React153.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React153.createElement(Sheet.Content, null, /* @__PURE__ */ React153.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React153.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React153.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio"), /* @__PURE__ */ React153.createElement(Sheet.Close, null, /* @__PURE__ */ React153.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React153.createElement(CrossIcon22, null))))), /* @__PURE__ */ React153.createElement(HorizontalDivider, null), /* @__PURE__ */ React153.createElement(
+  return /* @__PURE__ */ React153.createElement(Sheet.Root, null, /* @__PURE__ */ React153.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React153.createElement(Sheet.Content, null, /* @__PURE__ */ React153.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React153.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React153.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio"), /* @__PURE__ */ React153.createElement(Sheet.Close, null, /* @__PURE__ */ React153.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React153.createElement(CrossIcon23, null))))), /* @__PURE__ */ React153.createElement(HorizontalDivider, null), /* @__PURE__ */ React153.createElement(
     Flex,
     {
       direction: "column",
@@ -28390,7 +28471,7 @@ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React153.createElement(Re
 // src/Prebuilt/components/Header/Header.tsx
 var Header2 = () => {
   const roomState = useHMSStore81(selectRoomState6);
-  const isMobile = useMedia34(config.media.md);
+  const isMobile = useMedia35(config.media.md);
   if (roomState !== HMSRoomState6.Connected) {
     return /* @__PURE__ */ React154.createElement(React154.Fragment, null);
   }
@@ -28431,7 +28512,7 @@ var PreviousRoleInMetadata = () => {
 
 // src/Prebuilt/components/ConferenceScreen.tsx
 var ConferenceScreen = () => {
-  var _a8, _b7, _c, _d, _e;
+  var _a8, _b7, _c, _d, _e, _f;
   const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
@@ -28446,6 +28527,9 @@ var ConferenceScreen = () => {
   const isMobileDevice = isAndroid || isIOS || isIPadOS;
   const dropdownListRef = useRef25();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+  const { toggleAudio, toggleVideo } = useAVToggle7();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
+  const showChat = !!((_a8 = screenProps.elements) == null ? void 0 : _a8.chat);
   const toggleControls = () => {
     var _a9;
     if (((_a9 = dropdownListRef.current) == null ? void 0 : _a9.length) === 0 && isMobileDevice) {
@@ -28453,6 +28537,9 @@ var ConferenceScreen = () => {
     }
   };
   const autoRoomJoined = useRef25(isPreviewScreenEnabled);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
+  const isMwebHLSStream = isMobileHLSStream || isLandscapeHLSStream;
   useEffect50(() => {
     let timeout;
     dropdownListRef.current = dropdownList || [];
@@ -28492,14 +28579,14 @@ var ConferenceScreen = () => {
   if (!isConnectedToRoom && ![HMSRoomState7.Reconnecting, HMSRoomState7.Disconnected].includes(roomState)) {
     return /* @__PURE__ */ React155.createElement(FullPageProgress_default, { text: roomState === HMSRoomState7.Connecting ? "Joining..." : "" });
   }
-  return /* @__PURE__ */ React155.createElement(React155.Fragment, null, isHLSStarted ? /* @__PURE__ */ React155.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ React155.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ React155.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !screenProps.hideSections.includes("header") && /* @__PURE__ */ React155.createElement(
+  return /* @__PURE__ */ React155.createElement(React155.Fragment, null, isHLSStarted ? /* @__PURE__ */ React155.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ React155.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ React155.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !(screenProps.hideSections.includes("header") || isMwebHLSStream) && /* @__PURE__ */ React155.createElement(
     Box,
     {
       ref: headerRef,
       css: {
         h: "$18",
         transition: "margin 0.3s ease-in-out",
-        marginTop: hideControls ? `-${(_a8 = headerRef.current) == null ? void 0 : _a8.clientHeight}px` : "none",
+        marginTop: hideControls ? `-${(_b7 = headerRef.current) == null ? void 0 : _b7.clientHeight}px` : "none",
         "@md": {
           h: "$17"
         }
@@ -28507,7 +28594,7 @@ var ConferenceScreen = () => {
       "data-testid": "header"
     },
     /* @__PURE__ */ React155.createElement(Header2, null)
-  ), /* @__PURE__ */ React155.createElement(
+  ), isMwebHLSStream && /* @__PURE__ */ React155.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$4", top: "$4", zIndex: 1 } }, /* @__PURE__ */ React155.createElement(LeaveRoom, { screenType: screenProps.screenType })), /* @__PURE__ */ React155.createElement(
     Box,
     {
       css: {
@@ -28515,7 +28602,7 @@ var ConferenceScreen = () => {
         flex: "1 1 0",
         minHeight: 0,
         // @ts-ignore
-        px: ((_d = (_c = (_b7 = screenProps == null ? void 0 : screenProps.elements) == null ? void 0 : _b7.video_tile_layout) == null ? void 0 : _c.grid) == null ? void 0 : _d.edge_to_edge) ? 0 : "$10",
+        px: ((_e = (_d = (_c = screenProps == null ? void 0 : screenProps.elements) == null ? void 0 : _c.video_tile_layout) == null ? void 0 : _d.grid) == null ? void 0 : _e.edge_to_edge) ? 0 : "$10",
         // TODO: padding to be controlled by section/element
         paddingBottom: "env(safe-area-inset-bottom)",
         "@lg": {
@@ -28534,7 +28621,7 @@ var ConferenceScreen = () => {
         hideControls
       }
     ) : null
-  ), !screenProps.hideSections.includes("footer") && screenProps.elements && /* @__PURE__ */ React155.createElement(
+  ), !screenProps.hideSections.includes("footer") && screenProps.elements && !isMwebHLSStream && /* @__PURE__ */ React155.createElement(
     Box,
     {
       ref: footerRef,
@@ -28543,7 +28630,7 @@ var ConferenceScreen = () => {
         maxHeight: "$24",
         transition: "margin 0.3s ease-in-out",
         bg: "$background_dim",
-        marginBottom: hideControls ? `-${(_e = footerRef.current) == null ? void 0 : _e.clientHeight}px` : void 0,
+        marginBottom: hideControls ? `-${(_f = footerRef.current) == null ? void 0 : _f.clientHeight}px` : void 0,
         "@md": {
           maxHeight: "unset",
           bg: screenProps.screenType === "hls_live_streaming" ? "transparent" : "$background_dim"
@@ -28552,6 +28639,19 @@ var ConferenceScreen = () => {
       "data-testid": "footer"
     },
     /* @__PURE__ */ React155.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
+  ), isMwebHLSStream && !showChat && /* @__PURE__ */ React155.createElement(
+    Flex,
+    {
+      css: {
+        alignItems: "center",
+        pr: "$4",
+        pb: "$4"
+      },
+      justify: "end",
+      gap: "1"
+    },
+    noAVPermissions ? /* @__PURE__ */ React155.createElement(RaiseHand, null) : null,
+    /* @__PURE__ */ React155.createElement(MoreSettings, { elements: screenProps.elements, screenType: screenProps.screenType })
   ), /* @__PURE__ */ React155.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ React155.createElement(HLSFailureModal, null), /* @__PURE__ */ React155.createElement(ActivatedPIP, null), /* @__PURE__ */ React155.createElement(PreviousRoleInMetadata, null)));
 };
 
@@ -28921,11 +29021,12 @@ var LeaveScreen = () => {
 // src/Prebuilt/components/MwebLandscapePrompt.tsx
 init_define_process_env();
 import React160, { useEffect as useEffect55, useState as useState65 } from "react";
-import { useMedia as useMedia35 } from "react-use";
+import { useMedia as useMedia36 } from "react-use";
 import { RefreshIcon } from "@100mslive/react-icons";
 var MwebLandscapePrompt = () => {
   const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState65(false);
-  const isLandscape = useMedia35(config.media.ls);
+  const isLandscape = useMedia36(config.media.ls);
+  const isLandscapeHLSStream = useLandscapeHLSStream();
   useEffect55(() => {
     var _a8;
     if (!isMobileUserAgent) {
@@ -28947,6 +29048,9 @@ var MwebLandscapePrompt = () => {
       window.screen.orientation.removeEventListener("change", handleRotation);
     };
   }, [isLandscape]);
+  if (isLandscapeHLSStream) {
+    return null;
+  }
   return /* @__PURE__ */ React160.createElement(Dialog.Root, { open: showMwebLandscapePrompt, onOpenChange: setShowMwebLandscapePrompt }, /* @__PURE__ */ React160.createElement(Dialog.Portal, null, /* @__PURE__ */ React160.createElement(Dialog.Overlay, null), /* @__PURE__ */ React160.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ React160.createElement(Box, null, /* @__PURE__ */ React160.createElement(
     Flex,
     {
@@ -29385,7 +29489,7 @@ var PeerNotifications = () => {
 // src/Prebuilt/components/Notifications/PermissionErrorModal.tsx
 init_define_process_env();
 import React165, { useEffect as useEffect60, useState as useState67 } 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
@@ -29399,7 +29503,7 @@ function PermissionErrorModal() {
   const notification = useHMSNotifications5(HMSNotificationTypes5.ERROR);
   const [deviceType, setDeviceType] = useState67("");
   const [isSystemError, setIsSystemError] = useState67(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"))) {
@@ -29655,7 +29759,7 @@ function Notifications() {
   }, []);
   useCustomEvent4({ type: ROLE_CHANGE_DECLINED, onEvent: handleRoleChangeDenied });
   useEffect65(() => {
-    var _a9, _b8, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+    var _a9, _b8, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n2, _o2, _p;
     if (!notification || isNotificationDisabled) {
       return;
     }
@@ -29696,7 +29800,7 @@ function Notifications() {
         });
         break;
       case HMSNotificationTypes10.ROLE_UPDATED: {
-        if (((_m = notification.data) == null ? void 0 : _m.isLocal) && ((_n = notification.data) == null ? void 0 : _n.roleName)) {
+        if (((_m = notification.data) == null ? void 0 : _m.isLocal) && ((_n2 = notification.data) == null ? void 0 : _n2.roleName)) {
           ToastManager.addToast({
             title: `You are now a ${notification.data.roleName}`
           });
@@ -29705,7 +29809,7 @@ function Notifications() {
         break;
       }
       case HMSNotificationTypes10.CHANGE_TRACK_STATE_REQUEST:
-        const track = (_o = notification.data) == null ? void 0 : _o.track;
+        const track = (_o2 = notification.data) == null ? void 0 : _o2.track;
         if (!notification.data.enabled) {
           ToastManager.addToast({
             title: `Your ${track.source} ${track.type} was muted by
@@ -29853,7 +29957,7 @@ import { selectAppData as selectAppData11, useHMSStore as useHMSStore90 } from "
 // src/Prebuilt/components/RoomDetails/RoomDetailsSheet.tsx
 init_define_process_env();
 import React173 from "react";
-import { CrossIcon as CrossIcon23 } from "@100mslive/react-icons";
+import { CrossIcon as CrossIcon24 } from "@100mslive/react-icons";
 var RoomDetailsSheet = () => {
   const { title, description, details } = useRoomLayoutHeader();
   const toggleSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
@@ -29866,7 +29970,7 @@ var RoomDetailsSheet = () => {
       css: { w: "100%", borderBottom: "1px solid $border_bright", pb: "$4", mb: "$4", px: "$8" }
     },
     /* @__PURE__ */ React173.createElement(Text, { css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, "Description"),
-    /* @__PURE__ */ React173.createElement(Sheet.Close, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ React173.createElement(CrossIcon23, null))
+    /* @__PURE__ */ React173.createElement(Sheet.Close, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ React173.createElement(CrossIcon24, null))
   ), /* @__PURE__ */ React173.createElement(Flex, { align: "center", css: { w: "100%", gap: "$4", pb: "$8", px: "$8" } }, /* @__PURE__ */ React173.createElement(Logo, null), /* @__PURE__ */ React173.createElement(Box, null, /* @__PURE__ */ React173.createElement(Text, { variant: "sm", css: { c: "$on_secondary_high", fontWeight: "$semiBold" } }, title), /* @__PURE__ */ React173.createElement(RoomDetailsRow, { details }))), /* @__PURE__ */ React173.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", px: "$8" } }, description)));
 };
 
@@ -29883,7 +29987,7 @@ var Sheet2 = () => {
 // src/Prebuilt/plugins/FlyingEmoji.jsx
 init_define_process_env();
 import React175, { useCallback as useCallback35, useEffect as useEffect67, useMemo as useMemo19, useState as useState72 } from "react";
-import { useMedia as useMedia37 } from "react-use";
+import { useMedia as useMedia38 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID17,
   selectPeerNameByID as selectPeerNameByID6,
@@ -29918,7 +30022,7 @@ function FlyingEmoji() {
   const localPeerId = useHMSStore91(selectLocalPeerID17);
   const vanillaStore = useHMSVanillaStore18();
   const [emojis, setEmojis] = useState72([]);
-  const isMobile = useMedia37(config.media.md);
+  const isMobile = useMedia38(config.media.md);
   const startingPoints = useMemo19(() => getStartingPoints(isMobile), [isMobile]);
   const showFlyingEmoji = useCallback35(
     ({ emojiId, senderId }) => {
@@ -30318,6 +30422,7 @@ export {
   init_define_process_env,
   EMOJI_REACTION_TYPE,
   APP_DATA,
+  SIDE_PANE_OPTIONS,
   theme,
   createThemeBase,
   styled,
@@ -30378,11 +30483,18 @@ export {
   QRCode,
   Link,
   Collapsible,
+  getFormattedCount,
+  useRoomLayoutConferencingScreen,
+  useSidepaneToggle,
   usePollViewToggle,
   IconButton_default,
+  Sheet,
   ToastManager,
+  useIsLandscape,
   DialogContent,
   DialogRow,
+  ChatToggle,
+  Logo,
   HMSPrebuilt,
   Progress,
   TextArea
@@ -30399,4 +30511,4 @@ lodash/lodash.js:
    * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
    *)
 */
-//# sourceMappingURL=chunk-2Y4FJB25.js.map
+//# sourceMappingURL=chunk-J4NOQ2YL.js.map