@100mslive/roomkit-react 0.2.8-alpha.5 → 0.2.8-alpha.7

package/dist/index.cjs.js

@@ -108,7 +108,7 @@ var __async = (__this, __arguments, generator) => {
 var define_process_env_default;
 var init_define_process_env = __esm({
   "<define:process.env>"() {
-    define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_a2d25392-e983-4dc8-a996-752ed975f55d", 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.5", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_a2d25392-e983-4dc8-a996-752ed975f55d", 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.5", 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: "589", 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:18567", 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.5", 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: "8076840402", 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: "6ba28232c0bb10f4ba990777369c5c5b132203b1", 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: "43ae19c6eb82415162c072f1b28234ed0a19acf289ee178d82b17b9909ab16c5", 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--1709105780086-0.8969639265451106:/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--1709105779889-0.36514107301713383:/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--1709105757584-0.07376076545779098:/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--1709105757404-0.9859750851125968:/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_e97489a3-4673-4f20-bf72-485a5bc17b12", INVOCATION_ID: "90956711b8e6428b938e419d68168b61", 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: "454", 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 438", 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.5", 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.5", 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: "6ba28232c0bb10f4ba990777369c5c5b132203b1", 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_a2d25392-e983-4dc8-a996-752ed975f55d", 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_a2d25392-e983-4dc8-a996-752ed975f55d", 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_a2d25392-e983-4dc8-a996-752ed975f55d" };
+    define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_185c518e-14fa-4a8e-bf76-523e6a97de22", 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.7", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_185c518e-14fa-4a8e-bf76-523e6a97de22", 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.7", 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: "593", npm_package_scripts_postinstall: "husky install && lerna bootstrap", npm_package_devDependencies_husky: "^6.0.0", npm_package_dependencies_recordrtc: "^5.6.2", npm_package_dependencies_eventemitter2: "^6.4.9", npm_package_dependencies__radix_ui_react_label: "1.0.0", npm_package_dependencies__radix_ui_react_dropdown_menu: "2.0.5", npm_package_keywords_0: "100mslive", GITHUB_GRAPHQL_URL: "https://api.github.com/graphql", npm_package_description: "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.", npm_package_devDependencies_typescript: "~4.7.4", npm_package_devDependencies_typedoc: "^0.24.8", npm_package_devDependencies_babel_loader: "^8.2.5", npm_package_devDependencies__rollup_plugin_image: "^3.0.2", npm_package_keywords_1: "react", GOROOT_1_20_X64: "/opt/hostedtoolcache/go/1.20.14/x64", NVM_DIR: "/home/runner/.nvm", npm_package_readmeFilename: "README.md", npm_package_devDependencies_react: "^18.1.0", npm_package_devDependencies__babel_preset_env: "^7.22.5", npm_package_keywords_2: "prebuilt", DOTNET_SKIP_FIRST_TIME_EXPERIENCE: "1", GOROOT_1_21_X64: "/opt/hostedtoolcache/go/1.21.7/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240225.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:20547", 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.7", 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: "8081355382", npm_package_workspaces_0: "packages/*", npm_package_scripts_store: "cd packages/hms-video-store && yarn start", npm_package_devDependencies__babel_core: "^7.18.2", npm_package_dependencies_ts_pattern: "4.3.0", npm_package_devDependencies__storybook_addon_interactions: "^7.0.27", npm_package_devDependencies__storybook_addon_actions: "^7.0.27", GITHUB_REF_TYPE: "branch", BOOTSTRAP_HASKELL_NONINTERACTIVE: "1", GITHUB_WORKFLOW_SHA: "48bc1b57113a4245b79055a80f4f1f5d3b8795aa", 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: "f6aeb3782206d0c2fca9cbf488ceb0a35487be7c645191f5cf0163a3eb01e719", 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--1709127809318-0.9086977243625547:/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--1709127809126-0.6095770090936108:/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--1709127787109-0.0814847064321016:/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--1709127786931-0.6972012578357483:/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_2ee04255-38bc-4c51-b269-6782657e4adf", INVOCATION_ID: "18dfc21d5d544d1b8eb77f790b149ed9", NPM_CONFIG_USERCONFIG: "/home/runner/work/_temp/.npmrc", RUNNER_TOOL_CACHE: "/opt/hostedtoolcache", npm_package_scripts_size: "size-limit", npm_package_devDependencies_size_limit: "^5.0.3", npm_package_name: "@100mslive/roomkit-react", npm_package_devDependencies__storybook_react_webpack5: "^7.0.27", npm_package_repository_type: "git", GITHUB_ACTION: "__run_3", GITHUB_RUN_NUMBER: "456", 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 141", 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.7", 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.7", 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: "48bc1b57113a4245b79055a80f4f1f5d3b8795aa", 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_185c518e-14fa-4a8e-bf76-523e6a97de22", 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_185c518e-14fa-4a8e-bf76-523e6a97de22", 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_185c518e-14fa-4a8e-bf76-523e6a97de22" };
   }
 });
 
@@ -6870,8 +6870,8 @@ var require_lodash = __commonJS({
           return { "start": start, "end": end };
         }
         function getWrapDetails(source) {
-          var match = source.match(reWrapDetails);
-          return match ? match[1].split(reSplitDetails) : [];
+          var match8 = source.match(reWrapDetails);
+          return match8 ? match8[1].split(reSplitDetails) : [];
         }
         function hasPath(object, path, hasFunc) {
           path = castPath(path, object);
@@ -7139,8 +7139,8 @@ var require_lodash = __commonJS({
           if (string.charCodeAt(0) === 46) {
             result2.push("");
           }
-          string.replace(rePropName, function(match, number, quote, subString) {
-            result2.push(quote ? subString.replace(reEscapeChar, "$1") : number || match);
+          string.replace(rePropName, function(match8, number, quote, subString) {
+            result2.push(quote ? subString.replace(reEscapeChar, "$1") : number || match8);
           });
           return result2;
         });
@@ -8706,7 +8706,7 @@ var require_lodash = __commonJS({
             "g"
           );
           var sourceURL = "//# sourceURL=" + (hasOwnProperty.call(options, "sourceURL") ? (options.sourceURL + "").replace(/\s/g, " ") : "lodash.templateSources[" + ++templateCounter + "]") + "\n";
-          string.replace(reDelimiters, function(match, escapeValue, interpolateValue, esTemplateValue, evaluateValue, offset) {
+          string.replace(reDelimiters, function(match8, escapeValue, interpolateValue, esTemplateValue, evaluateValue, offset) {
             interpolateValue || (interpolateValue = esTemplateValue);
             source += string.slice(index, offset).replace(reUnescapedString, escapeStringChar);
             if (escapeValue) {
@@ -8720,8 +8720,8 @@ var require_lodash = __commonJS({
             if (interpolateValue) {
               source += "' +\n((__t = (" + interpolateValue + ")) == null ? '' : __t) +\n'";
             }
-            index = offset + match.length;
-            return match;
+            index = offset + match8.length;
+            return match8;
           });
           source += "';\n";
           var variable = hasOwnProperty.call(options, "variable") && options.variable;
@@ -8809,13 +8809,13 @@ var require_lodash = __commonJS({
           }
           if (isRegExp(separator)) {
             if (string.slice(end).search(separator)) {
-              var match, substring = result2;
+              var match8, substring = result2;
               if (!separator.global) {
                 separator = RegExp2(separator.source, toString(reFlags.exec(separator)) + "g");
               }
               separator.lastIndex = 0;
-              while (match = separator.exec(substring)) {
-                var newEnd = match.index;
+              while (match8 = separator.exec(substring)) {
+                var newEnd = match8.index;
               }
               result2 = result2.slice(0, newEnd === undefined2 ? end : newEnd);
             }
@@ -9890,12 +9890,13 @@ var init_useRoomLayoutScreen = __esm({
 });
 
 // src/Prebuilt/components/AppData/useSidepane.js
-var import_react33, import_react_sdk9, useIsSidepaneTypeOpen, useSidepaneState, useSidepaneToggle, usePollViewToggle, useSidepaneReset;
+var import_react33, import_ts_pattern, import_react_sdk9, useIsSidepaneTypeOpen, useSidepaneState, useSidepaneToggle, usePollViewToggle, useSidepaneReset;
 var init_useSidepane = __esm({
   "src/Prebuilt/components/AppData/useSidepane.js"() {
     "use strict";
     init_define_process_env();
     import_react33 = require("react");
+    import_ts_pattern = require("ts-pattern");
     import_react_sdk9 = require("@100mslive/react-sdk");
     init_useUISettings();
     init_constants();
@@ -9924,13 +9925,36 @@ var init_useSidepane = __esm({
       const isOpen = useSidepaneState() === SIDE_PANE_OPTIONS.POLLS;
       const togglePollView = (0, import_react33.useCallback)(
         (id) => {
-          id = typeof id === "string" ? id : void 0;
-          const newView = id ? POLL_VIEWS.VOTE : isOpen && view ? null : POLL_VIEWS.CREATE_POLL_QUIZ;
-          setPollState({
-            [POLL_STATE.pollInView]: id,
-            [POLL_STATE.view]: newView
+          (0, import_ts_pattern.match)({ id, isOpen, view }).with(
+            {
+              id: import_ts_pattern.P.string
+            },
+            () => {
+              setPollState({
+                [POLL_STATE.pollInView]: id,
+                [POLL_STATE.view]: POLL_VIEWS.VOTE
+              });
+              hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.POLLS);
+            }
+          ).with(
+            {
+              isOpen: true,
+              view: import_ts_pattern.P.when((view2) => !!view2)
+            },
+            () => {
+              setPollState({
+                [POLL_STATE.pollInView]: void 0,
+                [POLL_STATE.view]: null
+              });
+              hmsActions.setAppData(APP_DATA.sidePane, "");
+            }
+          ).otherwise(() => {
+            setPollState({
+              [POLL_STATE.pollInView]: void 0,
+              [POLL_STATE.view]: POLL_VIEWS.CREATE_POLL_QUIZ
+            });
+            hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.POLLS);
           });
-          hmsActions.setAppData(APP_DATA.sidePane, newView ? SIDE_PANE_OPTIONS.POLLS : "");
         },
         [hmsActions, view, setPollState, isOpen]
       );
@@ -10194,7 +10218,7 @@ var init_AuthToken = __esm({
               alignItems: "center"
             }
           },
-          /* @__PURE__ */ import_react36.default.createElement("img", { src: transaction_error_default, height: 80, width: 80 }),
+          /* @__PURE__ */ import_react36.default.createElement("img", { src: transaction_error_default, height: 80, width: 80, alt: "Token Error" }),
           /* @__PURE__ */ import_react36.default.createElement(Text, { variant: "h4", css: { textAlign: "center", mb: "$4", mt: "$10" } }, error.title),
           /* @__PURE__ */ import_react36.default.createElement(Text, { css: { c: "$on_surface_medium", textAlign: "center" } }, error.body)
         ));
@@ -10475,6 +10499,10 @@ var init_Sheet = __esm({
           animation: `${sheetSlideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
         }
       },
+      "@ls": {
+        maxWidth: "50%",
+        margin: "0 auto"
+      },
       variants: {
         side: {
           top: {
@@ -13123,12 +13151,13 @@ var init_StartRecording = __esm({
 });
 
 // src/Prebuilt/components/StatsForNerds.jsx
-var import_react61, import_react_sdk23, StatsForNerds, useTracksWithLabel, LocalPeerStats, TrackStats, StatsRow2, formatBytes2;
+var import_react61, import_ts_pattern2, import_react_sdk23, StatsForNerds, useTracksWithLabel, LocalPeerStats, TrackStats, StatsRow2, formatBytes2;
 var init_StatsForNerds = __esm({
   "src/Prebuilt/components/StatsForNerds.jsx"() {
     "use strict";
     init_define_process_env();
     import_react61 = __toESM(require("react"));
+    import_ts_pattern2 = require("ts-pattern");
     import_react_sdk23 = require("@100mslive/react-sdk");
     init_Divider2();
     init_Dropdown2();
@@ -13267,7 +13296,12 @@ var init_StatsForNerds = __esm({
     };
     TrackStats = ({ trackID, layer, local }) => {
       var _a8;
-      const selector = layer ? import_react_sdk23.selectHMSStats.localVideoTrackStatsByLayer(layer)(trackID) : local ? import_react_sdk23.selectHMSStats.localAudioTrackStatsByID(trackID) : import_react_sdk23.selectHMSStats.trackStatsByID(trackID);
+      const selector = (0, import_ts_pattern2.match)({ trackID, layer, local }).with(
+        {
+          layer: import_ts_pattern2.P.when((layer2) => !!layer2)
+        },
+        () => import_react_sdk23.selectHMSStats.localVideoTrackStatsByLayer(layer)(trackID)
+      ).with({ local: import_ts_pattern2.P.when((local2) => !!local2) }, () => import_react_sdk23.selectHMSStats.localAudioTrackStatsByID(trackID)).otherwise(() => import_react_sdk23.selectHMSStats.trackStatsByID(trackID));
       const stats = (0, import_react_sdk23.useHMSStatsStore)(selector);
       if (!stats) {
         return null;
@@ -13279,7 +13313,13 @@ var init_StatsForNerds = __esm({
           label: inbound ? "Bytes Received" : "Bytes Sent",
           value: formatBytes2(inbound ? stats.bytesReceived : stats.bytesSent)
         }
-      ), stats.kind === "video" && /* @__PURE__ */ import_react61.default.createElement(import_react61.default.Fragment, null, /* @__PURE__ */ import_react61.default.createElement(StatsRow2, { label: "Framerate", value: stats.framesPerSecond }), !inbound && /* @__PURE__ */ import_react61.default.createElement(StatsRow2, { label: "Quality Limitation Reason", value: stats.qualityLimitationReason })), /* @__PURE__ */ import_react61.default.createElement(StatsRow2, { label: "Round Trip Time", value: stats.roundTripTime ? `${stats.roundTripTime * 1e3} ms` : "-" }));
+      ), stats.kind === "video" && /* @__PURE__ */ import_react61.default.createElement(import_react61.default.Fragment, null, /* @__PURE__ */ import_react61.default.createElement(StatsRow2, { label: "Framerate", value: stats.framesPerSecond }), !inbound && /* @__PURE__ */ import_react61.default.createElement(StatsRow2, { label: "Quality Limitation Reason", value: stats.qualityLimitationReason })), /* @__PURE__ */ import_react61.default.createElement(
+        StatsRow2,
+        {
+          label: "Round Trip Time",
+          value: stats.roundTripTime ? `${(stats.roundTripTime * 1e3).toFixed(3)} ms` : "-"
+        }
+      ));
     };
     StatsRow2 = import_react61.default.memo(({ label, value }) => /* @__PURE__ */ import_react61.default.createElement(Box, { css: { bg: "$surface_bright", w: "calc(50% - $6)", p: "$8", r: "$3" } }, /* @__PURE__ */ import_react61.default.createElement(
       Text,
@@ -13689,13 +13729,14 @@ var init_useMetadata = __esm({
 });
 
 // src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
-var import_react68, import_hls_player, import_react_sdk28, import_react_icons27, MODALS, DesktopOptions;
+var import_react68, import_hls_player, import_ts_pattern3, import_react_sdk28, import_react_icons27, MODALS, DesktopOptions;
 var init_DesktopOptions = __esm({
   "src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx"() {
     "use strict";
     init_define_process_env();
     import_react68 = __toESM(require("react"));
     import_hls_player = require("@100mslive/hls-player");
+    import_ts_pattern3 = require("ts-pattern");
     import_react_sdk28 = require("@100mslive/react-sdk");
     import_react_icons27 = require("@100mslive/react-icons");
     init_src();
@@ -13779,23 +13820,33 @@ var init_DesktopOptions = __esm({
           /* @__PURE__ */ import_react68.default.createElement(FullScreenItem, null),
           /* @__PURE__ */ import_react68.default.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }),
           /* @__PURE__ */ import_react68.default.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.DEVICE_SETTINGS, true), "data-testid": "device_settings_btn" }, /* @__PURE__ */ import_react68.default.createElement(import_react_icons27.SettingsIcon, null), /* @__PURE__ */ import_react68.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Settings")),
-          screenType === "hls_live_streaming" ? import_hls_player.HMSHLSPlayer.isSupported() ? /* @__PURE__ */ import_react68.default.createElement(
+          (0, import_ts_pattern3.match)({ screenType, isSupported: import_hls_player.HMSHLSPlayer.isSupported() }).with({ screenType: "hls_live_streaming", isSupported: false }, () => null).with({ screenType: "hls_live_streaming", isSupported: true }, () => {
+            return /* @__PURE__ */ import_react68.default.createElement(
+              Dropdown.Item,
+              {
+                onClick: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats),
+                "data-testid": "hls_stats"
+              },
+              /* @__PURE__ */ import_react68.default.createElement(
+                Checkbox.Root,
+                {
+                  css: { margin: "$2" },
+                  checked: enablHlsStats,
+                  onCheckedChange: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)
+                },
+                /* @__PURE__ */ import_react68.default.createElement(Checkbox.Indicator, null, /* @__PURE__ */ import_react68.default.createElement(import_react_icons27.CheckIcon, { width: 16, height: 16 }))
+              ),
+              /* @__PURE__ */ import_react68.default.createElement(Flex, { justify: "between", css: { width: "100%" } }, /* @__PURE__ */ import_react68.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Show HLS Stats"), /* @__PURE__ */ import_react68.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, `${isMacOS ? "\u2318" : "ctrl"} + ]`))
+            );
+          }).otherwise(() => /* @__PURE__ */ import_react68.default.createElement(
             Dropdown.Item,
             {
-              onClick: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats),
-              "data-testid": "hls_stats"
+              onClick: () => updateState(MODALS.STATS_FOR_NERDS, true),
+              "data-testid": "stats_for_nerds_btn"
             },
-            /* @__PURE__ */ import_react68.default.createElement(
-              Checkbox.Root,
-              {
-                css: { margin: "$2" },
-                checked: enablHlsStats,
-                onCheckedChange: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)
-              },
-              /* @__PURE__ */ import_react68.default.createElement(Checkbox.Indicator, null, /* @__PURE__ */ import_react68.default.createElement(import_react_icons27.CheckIcon, { width: 16, height: 16 }))
-            ),
-            /* @__PURE__ */ import_react68.default.createElement(Flex, { justify: "between", css: { width: "100%" } }, /* @__PURE__ */ import_react68.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Show HLS Stats"), /* @__PURE__ */ import_react68.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, `${isMacOS ? "\u2318" : "ctrl"} + ]`))
-          ) : null : /* @__PURE__ */ import_react68.default.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.STATS_FOR_NERDS, true), "data-testid": "stats_for_nreds_btn" }, /* @__PURE__ */ import_react68.default.createElement(import_react_icons27.InfoIcon, null), /* @__PURE__ */ import_react68.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Stats for Nerds"))
+            /* @__PURE__ */ import_react68.default.createElement(import_react_icons27.InfoIcon, null),
+            /* @__PURE__ */ import_react68.default.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Stats for Nerds")
+          ))
         )
       ), openModals.has(MODALS.BULK_ROLE_CHANGE) && /* @__PURE__ */ import_react68.default.createElement(BulkRoleChangeModal, { onOpenChange: (value) => updateState(MODALS.BULK_ROLE_CHANGE, value) }), openModals.has(MODALS.MUTE_ALL) && /* @__PURE__ */ import_react68.default.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS.MUTE_ALL, value) }), openModals.has(MODALS.START_RECORDING) && /* @__PURE__ */ import_react68.default.createElement(StartRecording_default, { open: true, onOpenChange: (value) => updateState(MODALS.START_RECORDING, value) }), openModals.has(MODALS.DEVICE_SETTINGS) && /* @__PURE__ */ import_react68.default.createElement(
         SettingsModal_default,
@@ -13934,7 +13985,7 @@ var require_ua_parser = __commonJS({
         }
       };
       var rgxMapper = function(ua, arrays) {
-        var i = 0, j, k2, p, q2, matches, match;
+        var i = 0, j, k2, p, q2, matches, match8;
         while (i < arrays.length && !matches) {
           var regex = arrays[i], props = arrays[i + 1];
           j = k2 = 0;
@@ -13945,26 +13996,26 @@ var require_ua_parser = __commonJS({
             matches = regex[j++].exec(ua);
             if (!!matches) {
               for (p = 0; p < props.length; p++) {
-                match = matches[++k2];
+                match8 = matches[++k2];
                 q2 = props[p];
                 if (typeof q2 === OBJ_TYPE && q2.length > 0) {
                   if (q2.length === 2) {
                     if (typeof q2[1] == FUNC_TYPE) {
-                      this[q2[0]] = q2[1].call(this, match);
+                      this[q2[0]] = q2[1].call(this, match8);
                     } else {
                       this[q2[0]] = q2[1];
                     }
                   } else if (q2.length === 3) {
                     if (typeof q2[1] === FUNC_TYPE && !(q2[1].exec && q2[1].test)) {
-                      this[q2[0]] = match ? q2[1].call(this, match, q2[2]) : undefined2;
+                      this[q2[0]] = match8 ? q2[1].call(this, match8, q2[2]) : undefined2;
                     } else {
-                      this[q2[0]] = match ? match.replace(q2[1], q2[2]) : undefined2;
+                      this[q2[0]] = match8 ? match8.replace(q2[1], q2[2]) : undefined2;
                     }
                   } else if (q2.length === 4) {
-                    this[q2[0]] = match ? q2[3].call(this, match.replace(q2[1], q2[2])) : undefined2;
+                    this[q2[0]] = match8 ? q2[3].call(this, match8.replace(q2[1], q2[2])) : undefined2;
                   }
                 } else {
-                  this[q2] = match ? match : undefined2;
+                  this[q2] = match8 ? match8 : undefined2;
                 }
               }
             }
@@ -15855,8 +15906,8 @@ var require_lodash2 = __commonJS({
 
 // ../../node_modules/webrtc-adapter/src/js/utils.js
 function extractVersion(uastring, expr, pos) {
-  const match = uastring.match(expr);
-  return match && match.length >= pos && parseInt(match[pos], 10);
+  const match8 = uastring.match(expr);
+  return match8 && match8.length >= pos && parseInt(match8[pos], 10);
 }
 function wrapPeerConnectionEvent(window2, eventNameToWrap, wrapper) {
   if (!window2.RTCPeerConnection) {
@@ -16148,7 +16199,7 @@ function shimGetUserMedia(window2, browserDetails) {
         if (matches) {
           return navigator2.mediaDevices.enumerateDevices().then((devices) => {
             devices = devices.filter((d2) => d2.kind === "videoinput");
-            let dev = devices.find((d2) => matches.some((match) => d2.label.toLowerCase().includes(match)));
+            let dev = devices.find((d2) => matches.some((match8) => d2.label.toLowerCase().includes(match8)));
             if (!dev && devices.length && matches.includes("back")) {
               dev = devices[devices.length - 1];
             }
@@ -18246,11 +18297,11 @@ function shimMaxMessageSize(window2, browserDetails) {
     });
   };
   const getRemoteFirefoxVersion = function(description) {
-    const match = description.sdp.match(/mozilla...THIS_IS_SDPARTA-(\d+)/);
-    if (match === null || match.length < 2) {
+    const match8 = description.sdp.match(/mozilla...THIS_IS_SDPARTA-(\d+)/);
+    if (match8 === null || match8.length < 2) {
       return -1;
     }
-    const version = parseInt(match[1], 10);
+    const version = parseInt(match8[1], 10);
     return version !== version ? -1 : version;
   };
   const getCanSendMaxMessageSize = function(remoteIsFirefox) {
@@ -18275,12 +18326,12 @@ function shimMaxMessageSize(window2, browserDetails) {
     if (browserDetails.browser === "firefox" && browserDetails.version === 57) {
       maxMessageSize = 65535;
     }
-    const match = import_sdp.default.matchPrefix(
+    const match8 = import_sdp.default.matchPrefix(
       description.sdp,
       "a=max-message-size:"
     );
-    if (match.length > 0) {
-      maxMessageSize = parseInt(match[0].substring(19), 10);
+    if (match8.length > 0) {
+      maxMessageSize = parseInt(match8[0].substring(19), 10);
     } else if (browserDetails.browser === "firefox" && remoteIsFirefox !== -1) {
       maxMessageSize = 2147483637;
     }
@@ -19102,13 +19153,13 @@ var require_parser = __commonJS({
     var toIntIfInt = function(v2) {
       return String(Number(v2)) === v2 ? Number(v2) : v2;
     };
-    var attachProperties = function(match, location, names, rawName) {
+    var attachProperties = function(match8, location, names, rawName) {
       if (rawName && !names) {
-        location[rawName] = toIntIfInt(match[1]);
+        location[rawName] = toIntIfInt(match8[1]);
       } else {
         for (var i = 0; i < names.length; i += 1) {
-          if (match[i + 1] != null) {
-            location[names[i]] = toIntIfInt(match[i + 1]);
+          if (match8[i + 1] != null) {
+            location[names[i]] = toIntIfInt(match8[i + 1]);
           }
         }
       }
@@ -19457,7 +19508,7 @@ var init_dist = __esm({
     };
     ba = (a2, e) => () => (e || a2((e = { exports: {} }).exports, e), e.exports);
     dr = ba((Xc, $a) => {
-      $a.exports = { version: "0.11.8-alpha.5", 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"] };
+      $a.exports = { version: "0.11.8-alpha.7", 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"] };
     });
     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 || {});
     Aa = ((e) => (e.CHAT = "chat", e))(Aa || {});
@@ -20652,7 +20703,7 @@ var init_StreamActions = __esm({
             setLiveTime(Date.now() - timeStamp.getTime());
           }
         }, 1e3);
-      }, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants]);
+      }, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants, screenType]);
       (0, import_react72.useEffect)(() => {
         if (hlsState == null ? void 0 : hlsState.running) {
           startTimer();
@@ -21133,13 +21184,14 @@ var init_useUnreadPollQuizPresent = __esm({
 });
 
 // src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx
-var import_react78, import_react_use11, import_react_sdk36, import_react_icons31, MODALS2, MwebOptions;
+var import_react78, import_react_use11, import_ts_pattern4, import_react_sdk36, import_react_icons31, MODALS2, MwebOptions;
 var init_MwebOptions = __esm({
   "src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx"() {
     "use strict";
     init_define_process_env();
     import_react78 = __toESM(require("react"));
     import_react_use11 = require("react-use");
+    import_ts_pattern4 = require("ts-pattern");
     import_react_sdk36 = require("@100mslive/react-sdk");
     import_react_icons31 = require("@100mslive/react-icons");
     init_src();
@@ -21352,7 +21404,7 @@ var init_MwebOptions = __esm({
             })
           },
           isRecordingLoading ? /* @__PURE__ */ import_react78.default.createElement(Loading, null) : /* @__PURE__ */ import_react78.default.createElement(import_react_icons31.RecordIcon, null),
-          /* @__PURE__ */ import_react78.default.createElement(ActionTile.Title, null, isBrowserRecordingOn ? "Recording On" : isRecordingLoading ? "Starting Recording" : "Start Recording")
+          /* @__PURE__ */ import_react78.default.createElement(ActionTile.Title, null, (0, import_ts_pattern4.match)({ isBrowserRecordingOn, isRecordingLoading }).with({ isBrowserRecordingOn: true, isRecordingLoading: false }, () => "Recording On").with({ isRecordingLoading: true }, () => "Starting Recording").with({ isRecordingLoading: false }, () => "Start Recording").otherwise(() => null))
         ) : null,
         title || description ? /* @__PURE__ */ import_react78.default.createElement(
           ActionTile.Root,
@@ -22279,25 +22331,29 @@ var init_RoleOptions = __esm({
     init_useRoomLayoutScreen();
     init_utils2();
     dropdownItemCSS = { backgroundColor: "$surface_default", gap: "$4", p: "$8" };
-    optionTextCSS = { fontWeight: "$semiBold", color: "$on_surface_high", textTransform: "none" };
+    optionTextCSS = {
+      fontWeight: "$semiBold",
+      color: "$on_surface_high",
+      textTransform: "none",
+      whiteSpace: "nowrap"
+    };
     MuteUnmuteOption = ({ roleName, peerList }) => {
-      var _a8, _b7;
       const vanillaStore = (0, import_react_sdk43.useHMSVanillaStore)();
       const store = vanillaStore.getState();
       const hmsActions = (0, import_react_sdk43.useHMSActions)();
       const permissions = (0, import_react_sdk43.useHMSStore)(import_react_sdk43.selectPermissions);
       const role = (0, import_react_sdk43.useHMSStore)((0, import_react_sdk43.selectRoleByRoleName)(roleName));
-      let allPeersHaveVideoOn = true;
-      let allPeersHaveAudioOn = true;
+      let isVideoOnForSomePeers = false;
+      let isAudioOnForSomePeers = false;
       peerList.forEach((peer) => {
-        var _a9, _b8;
+        var _a8, _b7;
         if (peer.isLocal) {
           return;
         }
-        const isAudioOn = !!peer.audioTrack && ((_a9 = store.tracks[peer.audioTrack]) == null ? void 0 : _a9.enabled);
-        const isVideoOn = !!peer.videoTrack && ((_b8 = store.tracks[peer.videoTrack]) == null ? void 0 : _b8.enabled);
-        allPeersHaveAudioOn = allPeersHaveAudioOn && isAudioOn;
-        allPeersHaveVideoOn = allPeersHaveVideoOn && isVideoOn;
+        const isAudioOn = !!peer.audioTrack && ((_a8 = store.tracks[peer.audioTrack]) == null ? void 0 : _a8.enabled);
+        const isVideoOn = !!peer.videoTrack && ((_b7 = store.tracks[peer.videoTrack]) == null ? void 0 : _b7.enabled);
+        isAudioOnForSomePeers = isAudioOnForSomePeers || isAudioOn;
+        isVideoOnForSomePeers = isVideoOnForSomePeers || isVideoOn;
       });
       const setTrackEnabled = (type, enabled = false) => __async(void 0, null, function* () {
         try {
@@ -22306,7 +22362,10 @@ var init_RoleOptions = __esm({
           console.error(e);
         }
       });
-      return /* @__PURE__ */ import_react92.default.createElement(import_react92.default.Fragment, null, ((_a8 = role.publishParams.allowed) == null ? void 0 : _a8.includes("audio")) && /* @__PURE__ */ import_react92.default.createElement(import_react92.default.Fragment, null, allPeersHaveAudioOn && (permissions == null ? void 0 : permissions.mute) ? /* @__PURE__ */ import_react92.default.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("audio", false) }, /* @__PURE__ */ import_react92.default.createElement(import_react_icons41.MicOffIcon, null), /* @__PURE__ */ import_react92.default.createElement(Text, { variant: "sm", css: optionTextCSS }, "Mute Audio for All")) : null, !allPeersHaveAudioOn && (permissions == null ? void 0 : permissions.unmute) ? /* @__PURE__ */ import_react92.default.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("audio", true) }, /* @__PURE__ */ import_react92.default.createElement(import_react_icons41.MicOnIcon, null), /* @__PURE__ */ import_react92.default.createElement(Text, { variant: "sm", css: optionTextCSS }, "Unmute Audio for All")) : null), ((_b7 = role.publishParams.allowed) == null ? void 0 : _b7.includes("audio")) && /* @__PURE__ */ import_react92.default.createElement(import_react92.default.Fragment, null, allPeersHaveVideoOn && (permissions == null ? void 0 : permissions.mute) ? /* @__PURE__ */ import_react92.default.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("video", false) }, /* @__PURE__ */ import_react92.default.createElement(import_react_icons41.VideoOffIcon, null), /* @__PURE__ */ import_react92.default.createElement(Text, { variant: "sm", css: optionTextCSS }, "Mute Video for All")) : null, !allPeersHaveVideoOn && (permissions == null ? void 0 : permissions.unmute) ? /* @__PURE__ */ import_react92.default.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("video", true) }, /* @__PURE__ */ import_react92.default.createElement(import_react_icons41.VideoOnIcon, null), /* @__PURE__ */ import_react92.default.createElement(Text, { variant: "sm", css: optionTextCSS }, "Unmute Video for All")) : null));
+      if (!role) {
+        return null;
+      }
+      return /* @__PURE__ */ import_react92.default.createElement(import_react92.default.Fragment, null, role.publishParams.allowed.includes("audio") && /* @__PURE__ */ import_react92.default.createElement(import_react92.default.Fragment, null, isAudioOnForSomePeers && (permissions == null ? void 0 : permissions.mute) ? /* @__PURE__ */ import_react92.default.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("audio", false) }, /* @__PURE__ */ import_react92.default.createElement(import_react_icons41.MicOffIcon, null), /* @__PURE__ */ import_react92.default.createElement(Text, { variant: "sm", css: optionTextCSS }, "Mute Audio for All")) : null, !isAudioOnForSomePeers && (permissions == null ? void 0 : permissions.unmute) ? /* @__PURE__ */ import_react92.default.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("audio", true) }, /* @__PURE__ */ import_react92.default.createElement(import_react_icons41.MicOnIcon, null), /* @__PURE__ */ import_react92.default.createElement(Text, { variant: "sm", css: optionTextCSS }, "Request to Unmute Audio for All")) : null), role.publishParams.allowed.includes("video") && /* @__PURE__ */ import_react92.default.createElement(import_react92.default.Fragment, null, isVideoOnForSomePeers && (permissions == null ? void 0 : permissions.mute) ? /* @__PURE__ */ import_react92.default.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("video", false) }, /* @__PURE__ */ import_react92.default.createElement(import_react_icons41.VideoOffIcon, null), /* @__PURE__ */ import_react92.default.createElement(Text, { variant: "sm", css: optionTextCSS }, "Mute Video for All")) : null, !isVideoOnForSomePeers && (permissions == null ? void 0 : permissions.unmute) ? /* @__PURE__ */ import_react92.default.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("video", true) }, /* @__PURE__ */ import_react92.default.createElement(import_react_icons41.VideoOnIcon, null), /* @__PURE__ */ import_react92.default.createElement(Text, { variant: "sm", css: optionTextCSS }, "Request to Unmute Video for All")) : null));
     };
     RoleOptions = ({ roleName, peerList }) => {
       const [openOptions, setOpenOptions] = (0, import_react92.useState)(false);
@@ -22316,8 +22375,10 @@ var init_RoleOptions = __esm({
       const { on_stage_role, off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
       const canMuteOrUnmute = (permissions == null ? void 0 : permissions.mute) || (permissions == null ? void 0 : permissions.unmute);
       const canRemoveRoleFromStage = (permissions == null ? void 0 : permissions.changeRole) && roleName === on_stage_role;
+      const role = (0, import_react_sdk43.useHMSStore)((0, import_react_sdk43.selectRoleByRoleName)(roleName));
       const canRemoveRoleFromRoom = (permissions == null ? void 0 : permissions.removeOthers) && (on_stage_role === roleName || (off_stage_roles == null ? void 0 : off_stage_roles.includes(roleName)));
-      if (!(canMuteOrUnmute || canRemoveRoleFromStage || canRemoveRoleFromRoom) || peerList.length === 0) {
+      if (!(canMuteOrUnmute || canRemoveRoleFromStage || canRemoveRoleFromRoom) || peerList.length === 0 || // if only local peer is present no need to show any options
+      peerList.length === 1 && peerList[0].isLocal || !role) {
         return null;
       }
       const removeAllFromStage = () => {
@@ -22362,7 +22423,7 @@ var init_RoleOptions = __esm({
         Dropdown.Content,
         {
           onClick: (e) => e.stopPropagation(),
-          css: { w: "max-content", maxWidth: "$64", bg: "$surface_default", py: 0 },
+          css: { w: "max-content", bg: "$surface_default", py: 0 },
           align: "end"
         },
         canRemoveRoleFromStage && /* @__PURE__ */ import_react92.default.createElement(
@@ -24396,12 +24457,13 @@ var init_LeaderboardSummary = __esm({
 });
 
 // src/Prebuilt/components/Polls/Voting/QuestionCard.jsx
-var import_react117, import_react_sdk55, import_react_icons57, QuestionCard2, QuestionActions;
+var import_react117, import_ts_pattern5, import_react_sdk55, import_react_icons57, QuestionCard2, QuestionActions;
 var init_QuestionCard = __esm({
   "src/Prebuilt/components/Polls/Voting/QuestionCard.jsx"() {
     "use strict";
     init_define_process_env();
     import_react117 = __toESM(require("react"));
+    import_ts_pattern5 = require("ts-pattern");
     import_react_sdk55 = require("@100mslive/react-sdk");
     import_react_icons57 = require("@100mslive/react-icons");
     init_src();
@@ -24482,15 +24544,22 @@ var init_QuestionCard = __esm({
           {
             variant: "caption",
             css: {
-              color: respondedToQuiz && !isLive ? isCorrectAnswer ? "$alert_success" : "$alert_error_default" : "$on_surface_low",
+              color: (0, import_ts_pattern5.match)({ respondedToQuiz, isLive, isCorrectAnswer }).when(
+                ({ respondedToQuiz: respondedToQuiz2, isLive: isLive2 }) => respondedToQuiz2 && !isLive2,
+                ({ isCorrectAnswer: isCorrectAnswer2 }) => isCorrectAnswer2 ? "$alert_success" : "$alert_error_default"
+              ).otherwise(() => "$on_surface_low"),
               fontWeight: "$semiBold",
               display: "flex",
               alignItems: "center",
               gap: "$4"
             }
           },
-          respondedToQuiz && isCorrectAnswer && pollEnded ? /* @__PURE__ */ import_react117.default.createElement(import_react_icons57.CheckCircleIcon, { height: 16, width: 16 }) : null,
-          respondedToQuiz && !isCorrectAnswer && pollEnded ? /* @__PURE__ */ import_react117.default.createElement(import_react_icons57.CrossCircleIcon, { height: 16, width: 16 }) : null,
+          (0, import_ts_pattern5.match)({ respondedToQuiz, pollEnded, isCorrectAnswer }).when(
+            ({ respondedToQuiz: respondedToQuiz2, pollEnded: pollEnded2 }) => respondedToQuiz2 && pollEnded2,
+            ({ isCorrectAnswer: isCorrectAnswer2 }) => {
+              return isCorrectAnswer2 ? /* @__PURE__ */ import_react117.default.createElement(import_react_icons57.CheckCircleIcon, { height: 16, width: 16 }) : /* @__PURE__ */ import_react117.default.createElement(import_react_icons57.CrossCircleIcon, { height: 16, width: 16 });
+            }
+          ).otherwise(() => null),
           "QUESTION ",
           index,
           " OF ",
@@ -25254,13 +25323,13 @@ var init_usePinnedBy = __esm({
       const pinnedMessages = (0, import_react_sdk61.useHMSStore)((0, import_react_sdk61.selectSessionStore)("pinnedMessages" /* PINNED_MESSAGES */));
       const [pinnedBy, setPinnedBy] = (0, import_react130.useState)("");
       (0, import_react130.useEffect)(() => {
-        let match = "";
+        let match8 = "";
         pinnedMessages == null ? void 0 : pinnedMessages.forEach((pinnedMessage) => {
           if (pinnedMessage.id === messageId) {
-            match = pinnedMessage.pinnedBy;
+            match8 = pinnedMessage.pinnedBy;
           }
         });
-        setPinnedBy(match);
+        setPinnedBy(match8);
       }, [messageId, pinnedMessages]);
       return pinnedBy;
     };
@@ -26146,7 +26215,7 @@ var init_ChatFooter = __esm({
         if (!selectedPeer.id && !selectedRole && !["Everyone", ""].includes(defaultSelection)) {
           setRoleSelector(defaultSelection);
         } else {
-          if (!(isMobile || isLandscapeHLSStream) || !((_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();
           }
         }
@@ -26848,13 +26917,14 @@ var init_ChatSettings = __esm({
 });
 
 // src/Prebuilt/components/SidePaneTabs.tsx
-var import_react145, import_react_use24, import_react_sdk71, import_react_icons70, tabTriggerCSS, ParticipantCount2, SidePaneTabs;
+var import_react145, import_react_use24, import_ts_pattern6, import_react_sdk71, import_react_icons70, tabTriggerCSS, ParticipantCount2, SidePaneTabs;
 var init_SidePaneTabs = __esm({
   "src/Prebuilt/components/SidePaneTabs.tsx"() {
     "use strict";
     init_define_process_env();
     import_react145 = __toESM(require("react"));
     import_react_use24 = require("react-use");
+    import_ts_pattern6 = require("ts-pattern");
     import_react_sdk71 = require("@100mslive/react-sdk");
     import_react_icons70 = require("@100mslive/react-icons");
     init_Chat();
@@ -26868,12 +26938,15 @@ var init_SidePaneTabs = __esm({
     init_utils2();
     init_constants();
     tabTriggerCSS = {
-      color: "$on_surface_high",
+      color: "$on_surface_low",
       p: "$4",
       fontWeight: "$semiBold",
       fontSize: "$sm",
       w: "100%",
-      justifyContent: "center"
+      justifyContent: "center",
+      '&[data-state="active"]': {
+        color: "$on_surface_high"
+      }
     };
     ParticipantCount2 = ({ count }) => {
       return count < 1e3 ? /* @__PURE__ */ import_react145.default.createElement("span", null, "(", count, ")") : /* @__PURE__ */ import_react145.default.createElement(Tooltip, { title: count }, /* @__PURE__ */ import_react145.default.createElement("span", null, "(", getFormattedCount(count), ")"));
@@ -26897,13 +26970,13 @@ var init_SidePaneTabs = __esm({
       const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
       const showChatSettings = showChat && isChatOpen && (!isMobile || !isOverlayChat);
       (0, import_react145.useEffect)(() => {
-        if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) {
+        (0, import_ts_pattern6.match)({ activeTab, showChat, showParticipants }).with({ activeTab: SIDE_PANE_OPTIONS.CHAT, showChat: false, showParticipants: true }, () => {
           setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
-        } else if (activeTab === SIDE_PANE_OPTIONS.PARTICIPANTS && showChat && !showParticipants) {
+        }).with({ activeTab: SIDE_PANE_OPTIONS.PARTICIPANTS, showChat: true, showParticipants: false }, () => {
           setActiveTab(SIDE_PANE_OPTIONS.CHAT);
-        } else if (!showChat && !showParticipants) {
+        }).with({ showChat: false, showParticipants: false }, () => {
           resetSidePane();
-        }
+        });
       }, [showChat, activeTab, showParticipants, resetSidePane]);
       (0, import_react145.useEffect)(() => {
         setActiveTab(active);
@@ -26935,74 +27008,29 @@ var init_SidePaneTabs = __esm({
             transition: "margin 0.3s ease-in-out"
           }
         },
-        isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ import_react145.default.createElement(Chat, null) : /* @__PURE__ */ import_react145.default.createElement(import_react145.default.Fragment, null, hideTabs ? /* @__PURE__ */ import_react145.default.createElement(import_react145.default.Fragment, null, /* @__PURE__ */ import_react145.default.createElement(Flex, { justify: "between", css: { w: "100%", "&:empty": { display: "none" } } }, /* @__PURE__ */ import_react145.default.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__ */ import_react145.default.createElement("span", null, "Participants\xA0", /* @__PURE__ */ import_react145.default.createElement(ParticipantCount2, { count: peerCount }))
-        ), /* @__PURE__ */ import_react145.default.createElement(Flex, null, showChatSettings ? /* @__PURE__ */ import_react145.default.createElement(ChatSettings, null) : null, isOverlayChat && isChatOpen ? null : /* @__PURE__ */ import_react145.default.createElement(
-          IconButton,
-          {
-            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) {
-                toggleChat();
-              } else {
-                toggleParticipants();
-              }
-            },
-            "data-testid": "close_chat"
-          },
-          screenType === "hls_live_streaming" && isChatOpen ? null : /* @__PURE__ */ import_react145.default.createElement(import_react_icons70.CrossIcon, null)
-        ))), activeTab === SIDE_PANE_OPTIONS.CHAT ? /* @__PURE__ */ import_react145.default.createElement(Chat, null) : /* @__PURE__ */ import_react145.default.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole })) : /* @__PURE__ */ import_react145.default.createElement(
-          Tabs.Root,
-          {
-            value: activeTab,
-            onValueChange: setActiveTab,
-            css: {
-              flexDirection: "column",
-              size: "100%"
-            }
-          },
-          /* @__PURE__ */ import_react145.default.createElement(Flex, { css: { w: "100%" } }, /* @__PURE__ */ import_react145.default.createElement(Tabs.List, { css: { flexGrow: 1, borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ import_react145.default.createElement(
-            Tabs.Trigger,
-            {
-              value: SIDE_PANE_OPTIONS.CHAT,
-              onClick: toggleChat,
-              css: __spreadProps(__spreadValues({}, tabTriggerCSS), {
-                color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? "$on_surface_low" : "$on_surface_high"
-              })
-            },
-            chat_title
-          ), /* @__PURE__ */ import_react145.default.createElement(
-            Tabs.Trigger,
+        (0, import_ts_pattern6.match)({ isOverlayChat, isChatOpen, showChat, hideTabs }).with({ isOverlayChat: true, isChatOpen: true, showChat: true }, () => /* @__PURE__ */ import_react145.default.createElement(Chat, null)).with({ hideTabs: true }, () => {
+          return /* @__PURE__ */ import_react145.default.createElement(import_react145.default.Fragment, null, /* @__PURE__ */ import_react145.default.createElement(Flex, { justify: "between", css: { w: "100%", "&:empty": { display: "none" } } }, /* @__PURE__ */ import_react145.default.createElement(
+            Text,
             {
-              value: SIDE_PANE_OPTIONS.PARTICIPANTS,
-              onClick: toggleParticipants,
-              css: __spreadProps(__spreadValues({}, tabTriggerCSS), {
-                color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? "$on_surface_low" : "$on_surface_high"
-              })
+              variant: "sm",
+              css: {
+                fontWeight: "$semiBold",
+                p: "$4",
+                c: "$on_surface_high",
+                pr: "$12",
+                "&:empty": { display: "none" }
+              }
             },
-            "Participants\xA0",
-            /* @__PURE__ */ import_react145.default.createElement(ParticipantCount2, { count: peerCount })
-          )), showChatSettings ? /* @__PURE__ */ import_react145.default.createElement(ChatSettings, null) : null, isOverlayChat && isChatOpen ? null : /* @__PURE__ */ import_react145.default.createElement(
+            activeTab === SIDE_PANE_OPTIONS.CHAT ? screenType !== "hls_live_streaming" && chat_title : /* @__PURE__ */ import_react145.default.createElement("span", null, "Participants\xA0", /* @__PURE__ */ import_react145.default.createElement(ParticipantCount2, { count: peerCount }))
+          ), /* @__PURE__ */ import_react145.default.createElement(Flex, null, showChatSettings ? /* @__PURE__ */ import_react145.default.createElement(ChatSettings, null) : null, isOverlayChat && isChatOpen ? null : /* @__PURE__ */ import_react145.default.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) {
@@ -27013,11 +27041,39 @@ var init_SidePaneTabs = __esm({
               },
               "data-testid": "close_chat"
             },
-            /* @__PURE__ */ import_react145.default.createElement(import_react_icons70.CrossIcon, null)
-          )),
-          /* @__PURE__ */ import_react145.default.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ import_react145.default.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole })),
-          /* @__PURE__ */ import_react145.default.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ import_react145.default.createElement(Chat, null))
-        ))
+            screenType === "hls_live_streaming" && isChatOpen ? null : /* @__PURE__ */ import_react145.default.createElement(import_react_icons70.CrossIcon, null)
+          ))), activeTab === SIDE_PANE_OPTIONS.CHAT ? /* @__PURE__ */ import_react145.default.createElement(Chat, null) : /* @__PURE__ */ import_react145.default.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole }));
+        }).otherwise(() => {
+          return /* @__PURE__ */ import_react145.default.createElement(
+            Tabs.Root,
+            {
+              value: activeTab,
+              onValueChange: setActiveTab,
+              css: {
+                flexDirection: "column",
+                size: "100%"
+              }
+            },
+            /* @__PURE__ */ import_react145.default.createElement(Flex, { css: { w: "100%" } }, /* @__PURE__ */ import_react145.default.createElement(Tabs.List, { css: { flexGrow: 1, borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ import_react145.default.createElement(Tabs.Trigger, { value: SIDE_PANE_OPTIONS.CHAT, onClick: toggleChat, css: tabTriggerCSS }, chat_title), /* @__PURE__ */ import_react145.default.createElement(Tabs.Trigger, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, onClick: toggleParticipants, css: tabTriggerCSS }, "Participants\xA0", /* @__PURE__ */ import_react145.default.createElement(ParticipantCount2, { count: peerCount }))), showChatSettings ? /* @__PURE__ */ import_react145.default.createElement(ChatSettings, null) : null, isOverlayChat && isChatOpen ? null : /* @__PURE__ */ import_react145.default.createElement(
+              IconButton,
+              {
+                css: { my: "$1", color: "$on_surface_medium", "&:hover": { color: "$on_surface_high" } },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
+                    toggleChat();
+                  } else {
+                    toggleParticipants();
+                  }
+                },
+                "data-testid": "close_chat"
+              },
+              /* @__PURE__ */ import_react145.default.createElement(import_react_icons70.CrossIcon, null)
+            )),
+            /* @__PURE__ */ import_react145.default.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ import_react145.default.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole })),
+            /* @__PURE__ */ import_react145.default.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ import_react145.default.createElement(Chat, null))
+          );
+        })
       );
     });
   }
@@ -27291,7 +27347,7 @@ var init_TileMenuContent = __esm({
           "data-testid": isVideoEnabled ? "mute_video_participant_btn" : "unmute_video_participant_btn"
         },
         isVideoEnabled ? /* @__PURE__ */ import_react147.default.createElement(import_react_icons72.VideoOnIcon, { height: 20, width: 20 }) : /* @__PURE__ */ import_react147.default.createElement(import_react_icons72.VideoOffIcon, { height: 20, width: 20 }),
-        /* @__PURE__ */ import_react147.default.createElement("span", null, isVideoEnabled ? "Mute" : "Request Unmute")
+        /* @__PURE__ */ import_react147.default.createElement("span", null, isVideoEnabled ? "Mute Video" : "Request to Unmute Video")
       ) : null, toggleAudio ? /* @__PURE__ */ import_react147.default.createElement(
         StyledMenuTile.ItemButton,
         {
@@ -27304,7 +27360,7 @@ var init_TileMenuContent = __esm({
           "data-testid": isAudioEnabled ? "mute_audio_participant_btn" : "unmute_audio_participant_btn"
         },
         isAudioEnabled ? /* @__PURE__ */ import_react147.default.createElement(import_react_icons72.MicOnIcon, { height: 20, width: 20 }) : /* @__PURE__ */ import_react147.default.createElement(import_react_icons72.MicOffIcon, { height: 20, width: 20 }),
-        /* @__PURE__ */ import_react147.default.createElement("span", null, isAudioEnabled ? "Mute" : "Request Unmute")
+        /* @__PURE__ */ import_react147.default.createElement("span", null, isAudioEnabled ? "Mute Audio" : "Request to Unmute Audio")
       ) : null, audioTrackID ? /* @__PURE__ */ import_react147.default.createElement(StyledMenuTile.VolumeItem, { "data-testid": "participant_volume_slider", css: __spreadProps(__spreadValues({}, spacingCSS), { mb: "$0" }) }, /* @__PURE__ */ import_react147.default.createElement(Flex, { align: "center", gap: 1 }, /* @__PURE__ */ import_react147.default.createElement(import_react_icons72.SpeakerIcon, { height: 20, width: 20 }), /* @__PURE__ */ import_react147.default.createElement(Box, { as: "span", css: { ml: "$4" } }, "Volume (", volume, ")")), /* @__PURE__ */ import_react147.default.createElement(
         Slider,
         {
@@ -27980,13 +28036,14 @@ var init_VBPicker = __esm({
 });
 
 // src/Prebuilt/layouts/SidePane.tsx
-var import_react153, import_react_use28, import_react_sdk77, SidePane, SidePane_default;
+var import_react153, import_react_use28, import_ts_pattern7, import_react_sdk77, Wrapper3, SidePane, SidePane_default;
 var init_SidePane = __esm({
   "src/Prebuilt/layouts/SidePane.tsx"() {
     "use strict";
     init_define_process_env();
     import_react153 = __toESM(require("react"));
     import_react_use28 = require("react-use");
+    import_ts_pattern7 = require("ts-pattern");
     import_react_sdk77 = require("@100mslive/react-sdk");
     init_Polls();
     init_RoomDetailsPane();
@@ -28002,13 +28059,86 @@ var init_SidePane = __esm({
     init_hooks();
     init_utils();
     init_constants();
+    Wrapper3 = styled("div", {
+      w: "$100",
+      h: "100%",
+      p: "$10",
+      flex: "1 1 0",
+      background: "$surface_dim",
+      r: "$1",
+      position: "relative",
+      "@lg": {
+        w: "100%",
+        h: "100%",
+        ml: 0,
+        right: 0,
+        position: "fixed",
+        bottom: 0,
+        borderRadius: 0,
+        zIndex: 10
+      },
+      "@md": {
+        p: "$6 $8",
+        pb: "$12",
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        animation: `${translateAcross({ yFrom: "100%" })} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
+      },
+      variants: {
+        landscapeStream: {
+          true: {
+            "@lg": {
+              position: "unset !important",
+              minHeight: "100%"
+            }
+          }
+        },
+        mobileStream: {
+          true: {
+            "@md": {
+              position: "unset !important",
+              background: "red"
+            }
+          }
+        },
+        overlayChat: {
+          true: {
+            height: "unset",
+            maxHeight: 300,
+            background: "linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.94%, rgba(0, 0, 0, 0.64) 100%)",
+            "@md": {
+              pb: "$20"
+            }
+          }
+        }
+      },
+      compoundVariants: [
+        {
+          landscapeStream: true,
+          overlayChat: true,
+          css: {
+            position: "unset",
+            height: "100%",
+            maxHeight: "unset"
+          }
+        },
+        {
+          mobileStream: true,
+          overlayChat: true,
+          css: {
+            position: "unset",
+            height: "100%",
+            maxHeight: "unset"
+          }
+        }
+      ]
+    });
     SidePane = ({
       tileProps,
       hideControls = false
     }) => {
       var _a8, _b7, _c, _d, _e, _f;
       const isMobile = (0, import_react_use28.useMedia)(config.media.md);
-      const isLandscape = useIsLandscape();
       const sidepane = (0, import_react_sdk77.useHMSStore)((0, import_react_sdk77.selectAppData)(APP_DATA.sidePane));
       const activeScreensharePeerId = (0, import_react_sdk77.useHMSStore)((0, import_react_sdk77.selectAppData)(APP_DATA.activeScreensharePeerId));
       const trackId = (_a8 = (0, import_react_sdk77.useHMSStore)((0, import_react_sdk77.selectVideoTrackByPeerID)(activeScreensharePeerId))) == null ? void 0 : _a8.id;
@@ -28019,27 +28149,11 @@ var init_SidePane = __esm({
       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;
-      if (sidepane === SIDE_PANE_OPTIONS.POLLS) {
-        ViewComponent = /* @__PURE__ */ import_react153.default.createElement(Polls, null);
-      }
-      if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
-        ViewComponent = /* @__PURE__ */ import_react153.default.createElement(SidePaneTabs, { hideControls, active: sidepane, hideTab: isMobileHLSStream || isLandscapeHLSStream });
-      }
-      if (sidepane === SIDE_PANE_OPTIONS.VB) {
-        ViewComponent = /* @__PURE__ */ import_react153.default.createElement(VBPicker, { backgroundMedia });
-      }
-      if (sidepane === SIDE_PANE_OPTIONS.ROOM_DETAILS) {
-        ViewComponent = /* @__PURE__ */ import_react153.default.createElement(RoomDetailsPane, null);
-      }
       (0, import_react153.useEffect)(() => {
         return () => {
           resetSidePane();
         };
       }, [resetSidePane]);
-      if (!ViewComponent && (!trackId || layoutMode !== LayoutMode.GALLERY)) {
-        return null;
-      }
       const tileLayout = {
         hideParticipantNameOnTile: tileProps == null ? void 0 : tileProps.hide_participant_name_on_tile,
         roundedVideoTile: tileProps == null ? void 0 : tileProps.rounded_video_tile,
@@ -28047,8 +28161,11 @@ var init_SidePane = __esm({
         hideMetadataOnTile: tileProps == null ? void 0 : tileProps.hide_metadata_on_tile,
         objectFit: tileProps == null ? void 0 : tileProps.video_object_fit
       };
-      const VB = sidepane === SIDE_PANE_OPTIONS.VB;
       const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT && ((_f = elements == null ? void 0 : elements.chat) == null ? void 0 : _f.is_overlay);
+      const commonProps = {
+        landscapeStream: isLandscapeHLSStream,
+        mobileStream: isMobileHLSStream
+      };
       return /* @__PURE__ */ import_react153.default.createElement(
         Flex,
         {
@@ -28056,11 +28173,14 @@ var init_SidePane = __esm({
           justify: "center",
           css: {
             w: "$100",
-            h: isMobileHLSStream ? "64%" : "100%",
+            h: "100%",
             flexShrink: 0,
             gap: "$4",
             position: "relative",
-            "@md": { position: mwebStreamingChat || isLandscape ? "absolute" : "", zIndex: 12 }
+            "&:empty": { display: "none" },
+            "@ls": {
+              w: isMobileHLSStream || isLandscapeHLSStream ? "340px" : "$100"
+            }
           }
         },
         trackId && layoutMode === LayoutMode.GALLERY && /* @__PURE__ */ import_react153.default.createElement(
@@ -28073,43 +28193,27 @@ var init_SidePane = __esm({
             rootCSS: { p: 0, alignSelf: "start", flexShrink: 0 }
           }, tileLayout)
         ),
-        !!ViewComponent && /* @__PURE__ */ import_react153.default.createElement(
-          Box,
-          {
+        (0, import_ts_pattern7.match)(sidepane).with(SIDE_PANE_OPTIONS.POLLS, () => /* @__PURE__ */ import_react153.default.createElement(
+          Wrapper3,
+          __spreadValues({
             css: {
-              w: "$100",
-              h: mwebStreamingChat || isLandscape ? "0" : "100%",
-              p: VB ? "$10 $6 $10 $10" : "$10",
-              flex: "1 1 0",
-              minHeight: 0,
-              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": {
-                w: "100%",
-                h: "100%",
-                ml: 0,
-                right: 0,
-                position: isLandscapeHLSStream ? "" : "fixed",
-                minHeight: isLandscapeHLSStream ? "100%" : "",
-                bottom: 0,
-                borderRadius: 0,
-                zIndex: 10
-              },
               "@md": {
-                p: "$6 $8",
-                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)`
+                borderTopLeftRadius: "$2",
+                borderTopRightRadius: "$2"
               }
             }
-          },
-          ViewComponent
-        )
+          }, commonProps),
+          /* @__PURE__ */ import_react153.default.createElement(Polls, null)
+        )).with(SIDE_PANE_OPTIONS.VB, () => /* @__PURE__ */ import_react153.default.createElement(Wrapper3, __spreadValues({ css: { p: "$10 $6 $10 $10" } }, commonProps), /* @__PURE__ */ import_react153.default.createElement(VBPicker, { backgroundMedia }))).with(SIDE_PANE_OPTIONS.CHAT, SIDE_PANE_OPTIONS.PARTICIPANTS, () => /* @__PURE__ */ import_react153.default.createElement(Wrapper3, __spreadProps(__spreadValues({}, commonProps), { overlayChat: mwebStreamingChat }), /* @__PURE__ */ import_react153.default.createElement(
+          SidePaneTabs,
+          {
+            hideControls,
+            active: sidepane,
+            hideTab: isMobileHLSStream || isLandscapeHLSStream
+          }
+        ))).with(SIDE_PANE_OPTIONS.ROOM_DETAILS, () => /* @__PURE__ */ import_react153.default.createElement(Wrapper3, __spreadValues({}, commonProps), /* @__PURE__ */ import_react153.default.createElement(RoomDetailsPane, null))).otherwise(() => {
+          return null;
+        })
       );
     };
     SidePane_default = SidePane;
@@ -30299,15 +30403,19 @@ var init_Controls = __esm({
 });
 
 // src/Prebuilt/components/HMSVideo/HMSVideo.jsx
-var import_react182, HMSVideo;
+var import_react182, import_react_use41, HMSVideo;
 var init_HMSVideo = __esm({
   "src/Prebuilt/components/HMSVideo/HMSVideo.jsx"() {
     "use strict";
     init_define_process_env();
     import_react182 = __toESM(require("react"));
+    import_react_use41 = require("react-use");
     init_src();
+    init_hooks();
     HMSVideo = (0, import_react182.forwardRef)((_a8, videoRef) => {
       var _b7 = _a8, { children } = _b7, props = __objRest(_b7, ["children"]);
+      const isLandscape = useIsLandscape();
+      const isMobile = (0, import_react_use41.useMedia)(config.media.md);
       return /* @__PURE__ */ import_react182.default.createElement(
         Flex,
         __spreadValues({
@@ -30343,7 +30451,9 @@ var init_HMSVideo = __esm({
               margin: "0 auto",
               minHeight: "0",
               objectFit: "contain",
-              width: "inherit"
+              width: "inherit",
+              height: isLandscape || isMobile ? "100%" : "",
+              position: isLandscape || isMobile ? "absolute" : ""
             },
             ref: videoRef,
             playsInline: true
@@ -30372,17 +30482,17 @@ var init_PlayerContext = __esm({
   }
 });
 
-// src/Prebuilt/components/HMSVideo/PlayButton.tsx
-var import_react184, import_react_icons86, PlayButton;
-var init_PlayButton = __esm({
-  "src/Prebuilt/components/HMSVideo/PlayButton.tsx"() {
+// src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx
+var import_react184, import_react_icons86, PlayPauseButton;
+var init_PlayPauseButton = __esm({
+  "src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx"() {
     "use strict";
     init_define_process_env();
     import_react184 = __toESM(require("react"));
     import_react_icons86 = require("@100mslive/react-icons");
     init_src();
     init_PlayerContext();
-    PlayButton = ({
+    PlayPauseButton = ({
       isPaused,
       width = 20,
       height = 20
@@ -30397,6 +30507,25 @@ var init_PlayButton = __esm({
   }
 });
 
+// src/Prebuilt/components/HMSVideo/SeekControls.tsx
+var import_react185, SeekControls;
+var init_SeekControls = __esm({
+  "src/Prebuilt/components/HMSVideo/SeekControls.tsx"() {
+    "use strict";
+    init_define_process_env();
+    import_react185 = __toESM(require("react"));
+    init_src();
+    SeekControls = ({
+      title,
+      onClick,
+      children,
+      css: css2
+    }) => {
+      return /* @__PURE__ */ import_react185.default.createElement(Tooltip, { title, side: "top" }, /* @__PURE__ */ import_react185.default.createElement(IconButton, { onClick, "data-testid": "backward_forward_arrow_btn", css: css2 }, children));
+    };
+  }
+});
+
 // src/Prebuilt/components/HMSVideo/utils.ts
 function getPercentage(a2, b2) {
   return a2 / b2 * 100;
@@ -30431,24 +30560,24 @@ var init_utils6 = __esm({
 });
 
 // src/Prebuilt/components/HMSVideo/VideoProgress.tsx
-var import_react185, VideoProgress;
+var import_react186, VideoProgress;
 var init_VideoProgress = __esm({
   "src/Prebuilt/components/HMSVideo/VideoProgress.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react185 = __toESM(require("react"));
+    import_react186 = __toESM(require("react"));
     init_src();
     init_PlayerContext();
     init_utils6();
-    VideoProgress = () => {
+    VideoProgress = ({ isDvr = true }) => {
       const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-      const [videoProgress, setVideoProgress] = (0, import_react185.useState)(0);
-      const [bufferProgress, setBufferProgress] = (0, import_react185.useState)(0);
+      const [videoProgress, setVideoProgress] = (0, import_react186.useState)(0);
+      const [bufferProgress, setBufferProgress] = (0, import_react186.useState)(0);
       const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
       const onValueChange = (time) => {
         hlsPlayer2 == null ? void 0 : hlsPlayer2.seekTo(time);
       };
-      (0, import_react185.useEffect)(() => {
+      (0, import_react186.useEffect)(() => {
         if (!videoEl) {
           return;
         }
@@ -30481,7 +30610,7 @@ var init_VideoProgress = __esm({
       if (!videoEl) {
         return null;
       }
-      return /* @__PURE__ */ import_react185.default.createElement(Flex, { align: "center", css: { cursor: "pointer", h: "$2", alignSelf: "stretch" } }, /* @__PURE__ */ import_react185.default.createElement(
+      return /* @__PURE__ */ import_react186.default.createElement(Flex, { align: "center", css: { cursor: "pointer", h: "$2", alignSelf: "stretch", pointerEvents: isDvr ? "" : "none" } }, /* @__PURE__ */ import_react186.default.createElement(
         Slider,
         {
           id: "video-actual-rest",
@@ -30489,7 +30618,8 @@ var init_VideoProgress = __esm({
             cursor: "pointer",
             h: "$2",
             zIndex: 1,
-            transition: `all .2s ease .5s`
+            transition: `all .2s ease .5s`,
+            pointerEvents: isDvr ? "" : "none"
           },
           min: 0,
           max: 100,
@@ -30497,9 +30627,9 @@ var init_VideoProgress = __esm({
           value: [videoProgress],
           showTooltip: false,
           onValueChange: onProgress,
-          thumbStyles: { w: "$6", h: "$6" }
+          thumbStyles: { w: "$6", h: "$6", display: isDvr ? "" : "none" }
         }
-      ), /* @__PURE__ */ import_react185.default.createElement(
+      ), /* @__PURE__ */ import_react186.default.createElement(
         Box,
         {
           id: "video-buffer",
@@ -30518,20 +30648,20 @@ var init_VideoProgress = __esm({
 });
 
 // src/Prebuilt/components/HMSVideo/VideoTime.tsx
-var import_react186, import_hls_player2, VideoTime;
+var import_react187, import_hls_player2, VideoTime;
 var init_VideoTime = __esm({
   "src/Prebuilt/components/HMSVideo/VideoTime.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react186 = __toESM(require("react"));
+    import_react187 = __toESM(require("react"));
     import_hls_player2 = require("@100mslive/hls-player");
     init_Text2();
     init_PlayerContext();
     init_utils6();
     VideoTime = () => {
       const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-      const [videoTime, setVideoTime] = (0, import_react186.useState)("");
-      (0, import_react186.useEffect)(() => {
+      const [videoTime, setVideoTime] = (0, import_react187.useState)("");
+      (0, import_react187.useEffect)(() => {
         const timeupdateHandler = (currentTime) => {
           const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
           if (videoEl) {
@@ -30547,7 +30677,7 @@ var init_VideoTime = __esm({
           hlsPlayer2 == null ? void 0 : hlsPlayer2.off(import_hls_player2.HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
         };
       }, [hlsPlayer2]);
-      return hlsPlayer2 ? /* @__PURE__ */ import_react186.default.createElement(
+      return hlsPlayer2 ? /* @__PURE__ */ import_react187.default.createElement(
         Text,
         {
           variant: "body1",
@@ -30567,20 +30697,21 @@ var init_VideoTime = __esm({
 });
 
 // src/Prebuilt/components/HMSVideo/VolumeControl.tsx
-var import_react187, import_react_icons87, VolumeControl, VolumeIcon;
+var import_react188, import_react_icons87, VolumeControl, VolumeIcon;
 var init_VolumeControl = __esm({
   "src/Prebuilt/components/HMSVideo/VolumeControl.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react187 = __toESM(require("react"));
+    import_react188 = __toESM(require("react"));
     import_react_icons87 = require("@100mslive/react-icons");
     init_src();
     init_PlayerContext();
     VolumeControl = () => {
+      var _a8;
       const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-      const [volume, setVolume] = (0, import_react187.useState)((hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) || 0);
-      const [showSlider, setShowSlider] = (0, import_react187.useState)(false);
-      return /* @__PURE__ */ import_react187.default.createElement(
+      const [volume, setVolume] = (0, import_react188.useState)((_a8 = hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) != null ? _a8 : 100);
+      const [showSlider, setShowSlider] = (0, import_react188.useState)(false);
+      return /* @__PURE__ */ import_react188.default.createElement(
         Flex,
         {
           align: "center",
@@ -30594,7 +30725,7 @@ var init_VolumeControl = __esm({
             setShowSlider(false);
           }
         },
-        /* @__PURE__ */ import_react187.default.createElement(
+        /* @__PURE__ */ import_react188.default.createElement(
           VolumeIcon,
           {
             volume,
@@ -30609,7 +30740,7 @@ var init_VolumeControl = __esm({
             }
           }
         ),
-        /* @__PURE__ */ import_react187.default.createElement(
+        /* @__PURE__ */ import_react188.default.createElement(
           Slider,
           {
             css: {
@@ -30637,9 +30768,9 @@ var init_VolumeControl = __esm({
     };
     VolumeIcon = ({ volume, onClick }) => {
       if (volume === 0) {
-        return /* @__PURE__ */ import_react187.default.createElement(import_react_icons87.VolumeZeroIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
+        return /* @__PURE__ */ import_react188.default.createElement(import_react_icons87.VolumeZeroIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
       }
-      return volume < 50 ? /* @__PURE__ */ import_react187.default.createElement(import_react_icons87.VolumeOneIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick }) : /* @__PURE__ */ import_react187.default.createElement(import_react_icons87.VolumeTwoIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
+      return volume < 50 ? /* @__PURE__ */ import_react188.default.createElement(import_react_icons87.VolumeOneIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick }) : /* @__PURE__ */ import_react188.default.createElement(import_react_icons87.VolumeTwoIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
     };
   }
 });
@@ -30652,13 +30783,14 @@ var init_HMSVideo2 = __esm({
     init_define_process_env();
     init_Controls();
     init_HMSVideo();
-    init_PlayButton();
+    init_PlayPauseButton();
+    init_SeekControls();
     init_VideoProgress();
     init_VideoTime();
     init_VolumeControl();
     HMSVideoPlayer = {
       Root: HMSVideo,
-      PlayButton,
+      PlayPauseButton,
       Progress: VideoProgress,
       Duration: VideoTime,
       Volume: VolumeControl,
@@ -30666,22 +30798,23 @@ var init_HMSVideo2 = __esm({
         Root: VideoControls,
         Left: LeftControls,
         Right: RightControls
-      }
+      },
+      Seeker: SeekControls
     };
   }
 });
 
 // src/Prebuilt/components/HMSVideo/FullscreenButton.tsx
-var import_react188, import_react_icons88, FullScreenButton2;
+var import_react189, import_react_icons88, FullScreenButton2;
 var init_FullscreenButton = __esm({
   "src/Prebuilt/components/HMSVideo/FullscreenButton.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react188 = __toESM(require("react"));
+    import_react189 = __toESM(require("react"));
     import_react_icons88 = require("@100mslive/react-icons");
     init_src();
     FullScreenButton2 = ({ isFullScreen, onToggle }) => {
-      return /* @__PURE__ */ import_react188.default.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ import_react188.default.createElement(IconButton, { css: { margin: "0px" }, onClick: onToggle, key: "fullscreen_btn", "data-testid": "fullscreen_btn" }, /* @__PURE__ */ import_react188.default.createElement(Flex, null, isFullScreen ? /* @__PURE__ */ import_react188.default.createElement(import_react_icons88.ShrinkIcon, null) : /* @__PURE__ */ import_react188.default.createElement(import_react_icons88.ExpandIcon, null))));
+      return /* @__PURE__ */ import_react189.default.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ import_react189.default.createElement(IconButton, { css: { margin: "0px" }, onClick: onToggle, key: "fullscreen_btn", "data-testid": "fullscreen_btn" }, /* @__PURE__ */ import_react189.default.createElement(Flex, null, isFullScreen ? /* @__PURE__ */ import_react189.default.createElement(import_react_icons88.ShrinkIcon, null) : /* @__PURE__ */ import_react189.default.createElement(import_react_icons88.ExpandIcon, null))));
     };
   }
 });
@@ -30691,7 +30824,38 @@ function HLSAutoplayBlockedPrompt({
   open,
   unblockAutoPlay
 }) {
-  return /* @__PURE__ */ import_react189.default.createElement(
+  const isLandscape = useIsLandscape();
+  const isMobile = (0, import_react_use42.useMedia)(config.media.md);
+  if ((isMobile || isLandscape) && open) {
+    return /* @__PURE__ */ import_react190.default.createElement(
+      IconButton,
+      {
+        css: {
+          border: "1px solid white",
+          bg: "white",
+          color: "#000",
+          r: "$2"
+        },
+        onClick: () => __async(this, null, function* () {
+          return yield unblockAutoPlay();
+        })
+      },
+      /* @__PURE__ */ import_react190.default.createElement(import_react_icons89.VolumeTwoIcon, { width: "32", height: "32" }),
+      /* @__PURE__ */ import_react190.default.createElement(
+        Text,
+        {
+          variant: "body1",
+          css: {
+            fontWeight: "$semiBold",
+            px: "$2",
+            color: "#000"
+          }
+        },
+        "Tap To Unmute"
+      )
+    );
+  }
+  return /* @__PURE__ */ import_react190.default.createElement(
     Dialog.Root,
     {
       open,
@@ -30701,7 +30865,7 @@ function HLSAutoplayBlockedPrompt({
         }
       })
     },
-    /* @__PURE__ */ import_react189.default.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ import_react189.default.createElement(DialogRow, null, /* @__PURE__ */ import_react189.default.createElement(Text, { variant: "md" }, 'The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to proceed.')), /* @__PURE__ */ import_react189.default.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ import_react189.default.createElement(
+    /* @__PURE__ */ import_react190.default.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ import_react190.default.createElement(DialogRow, null, /* @__PURE__ */ import_react190.default.createElement(Text, { variant: "md" }, 'The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to proceed.')), /* @__PURE__ */ import_react190.default.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ import_react190.default.createElement(
       Button,
       {
         variant: "primary",
@@ -30713,29 +30877,32 @@ function HLSAutoplayBlockedPrompt({
     )))
   );
 }
-var import_react189;
+var import_react190, import_react_use42, import_react_icons89;
 var init_HLSAutoplayBlockedPrompt = __esm({
   "src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react189 = __toESM(require("react"));
+    import_react190 = __toESM(require("react"));
+    import_react_use42 = require("react-use");
+    import_react_icons89 = require("@100mslive/react-icons");
     init_src();
     init_DialogContent2();
+    init_hooks();
   }
 });
 
 // src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx
 function HLSCaptionSelector({ isEnabled }) {
   const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-  return /* @__PURE__ */ import_react190.default.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ import_react190.default.createElement(IconButton, { css: { p: "$2" }, onClick: () => hlsPlayer2 == null ? void 0 : hlsPlayer2.toggleCaption() }, isEnabled ? /* @__PURE__ */ import_react190.default.createElement(import_react_icons89.ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ import_react190.default.createElement(import_react_icons89.OpenCaptionIcon, { width: "20", height: "20px" })));
+  return /* @__PURE__ */ import_react191.default.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ import_react191.default.createElement(IconButton, { css: { p: "$2" }, onClick: () => hlsPlayer2 == null ? void 0 : hlsPlayer2.toggleCaption() }, isEnabled ? /* @__PURE__ */ import_react191.default.createElement(import_react_icons90.ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ import_react191.default.createElement(import_react_icons90.OpenCaptionIcon, { width: "20", height: "20px" })));
 }
-var import_react190, import_react_icons89;
+var import_react191, import_react_icons90;
 var init_HLSCaptionSelector = __esm({
   "src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react190 = __toESM(require("react"));
-    import_react_icons89 = require("@100mslive/react-icons");
+    import_react191 = __toESM(require("react"));
+    import_react_icons90 = require("@100mslive/react-icons");
     init_src();
     init_PlayerContext();
   }
@@ -30750,10 +30917,10 @@ function HLSQualitySelector({
   selection,
   isAuto
 }) {
-  const isMobile = (0, import_react_use41.useMedia)(config.media.md);
+  const isMobile = (0, import_react_use43.useMedia)(config.media.md);
   const isLandscape = useIsLandscape();
   if (isMobile || isLandscape) {
-    return /* @__PURE__ */ import_react191.default.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ import_react191.default.createElement(Sheet.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ import_react191.default.createElement(
+    return /* @__PURE__ */ import_react192.default.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ import_react192.default.createElement(Sheet.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ import_react192.default.createElement(
       Flex,
       {
         css: {
@@ -30763,8 +30930,8 @@ function HLSQualitySelector({
           p: "$2"
         }
       },
-      /* @__PURE__ */ import_react191.default.createElement(import_react_icons90.SettingsIcon, null)
-    )), layers.length > 0 && /* @__PURE__ */ import_react191.default.createElement(Sheet.Content, { css: { bg: "$surface_default", pb: "$1" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ import_react191.default.createElement(
+      /* @__PURE__ */ import_react192.default.createElement(import_react_icons91.SettingsIcon, null)
+    )), layers.length > 0 && /* @__PURE__ */ import_react192.default.createElement(Sheet.Content, { css: { bg: "$surface_default", pb: "$1" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ import_react192.default.createElement(
       Sheet.Title,
       {
         css: {
@@ -30781,9 +30948,9 @@ function HLSQualitySelector({
         }
       },
       "Quality",
-      /* @__PURE__ */ import_react191.default.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ import_react191.default.createElement(import_react_icons90.CrossIcon, null))
+      /* @__PURE__ */ import_react192.default.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ import_react192.default.createElement(import_react_icons91.CrossIcon, null))
     ), layers.map((layer) => {
-      return /* @__PURE__ */ import_react191.default.createElement(
+      return /* @__PURE__ */ import_react192.default.createElement(
         Flex,
         {
           align: "center",
@@ -30801,11 +30968,11 @@ function HLSQualitySelector({
           key: layer.width,
           onClick: () => onQualityChange(layer)
         },
-        /* @__PURE__ */ import_react191.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
-        /* @__PURE__ */ import_react191.default.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
-        !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ import_react191.default.createElement(import_react_icons90.CheckIcon, { width: "16px", height: "16px" })
+        /* @__PURE__ */ import_react192.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
+        /* @__PURE__ */ import_react192.default.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
+        !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ import_react192.default.createElement(import_react_icons91.CheckIcon, { width: "16px", height: "16px" })
       );
-    }), /* @__PURE__ */ import_react191.default.createElement(
+    }), /* @__PURE__ */ import_react192.default.createElement(
       Flex,
       {
         align: "center",
@@ -30823,11 +30990,11 @@ function HLSQualitySelector({
         key: "auto",
         onClick: () => onQualityChange({ height: "auto" })
       },
-      /* @__PURE__ */ import_react191.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
-      isAuto && /* @__PURE__ */ import_react191.default.createElement(import_react_icons90.CheckIcon, { width: "16px", height: "16px" })
+      /* @__PURE__ */ import_react192.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
+      isAuto && /* @__PURE__ */ import_react192.default.createElement(import_react_icons91.CheckIcon, { width: "16px", height: "16px" })
     )));
   }
-  return /* @__PURE__ */ import_react191.default.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpenChange(value) }, /* @__PURE__ */ import_react191.default.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ import_react191.default.createElement(
+  return /* @__PURE__ */ import_react192.default.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpenChange(value) }, /* @__PURE__ */ import_react192.default.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ import_react192.default.createElement(
     Flex,
     {
       css: {
@@ -30837,7 +31004,7 @@ function HLSQualitySelector({
         p: "$2"
       }
     },
-    /* @__PURE__ */ import_react191.default.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ import_react191.default.createElement(Flex, { align: "center" }, /* @__PURE__ */ import_react191.default.createElement(
+    /* @__PURE__ */ import_react192.default.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ import_react192.default.createElement(Flex, { align: "center" }, /* @__PURE__ */ import_react192.default.createElement(
       Box,
       {
         css: {
@@ -30848,8 +31015,8 @@ function HLSQualitySelector({
           c: "$on_surface_high"
         }
       },
-      /* @__PURE__ */ import_react191.default.createElement(import_react_icons90.SettingsIcon, null)
-    ), /* @__PURE__ */ import_react191.default.createElement(
+      /* @__PURE__ */ import_react192.default.createElement(import_react_icons91.SettingsIcon, null)
+    ), /* @__PURE__ */ import_react192.default.createElement(
       Text,
       {
         variant: {
@@ -30859,7 +31026,7 @@ function HLSQualitySelector({
         },
         css: { display: "flex", alignItems: "center", ml: "$2", c: "$on_surface_medium" }
       },
-      isAuto && /* @__PURE__ */ import_react191.default.createElement(import_react191.default.Fragment, null, "Auto", /* @__PURE__ */ import_react191.default.createElement(
+      isAuto && /* @__PURE__ */ import_react192.default.createElement(import_react192.default.Fragment, null, "Auto", /* @__PURE__ */ import_react192.default.createElement(
         Box,
         {
           css: {
@@ -30874,7 +31041,7 @@ function HLSQualitySelector({
       selection && Math.min(selection.width || 0, selection.height || 0),
       "p"
     )))
-  )), layers.length > 0 && /* @__PURE__ */ import_react191.default.createElement(
+  )), layers.length > 0 && /* @__PURE__ */ import_react192.default.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
@@ -30890,7 +31057,7 @@ function HLSQualitySelector({
       }
     },
     layers.map((layer) => {
-      return /* @__PURE__ */ import_react191.default.createElement(
+      return /* @__PURE__ */ import_react192.default.createElement(
         Dropdown.Item,
         {
           onClick: () => onQualityChange(layer),
@@ -30905,12 +31072,12 @@ function HLSQualitySelector({
             gap: "$2"
           }
         },
-        /* @__PURE__ */ import_react191.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
-        /* @__PURE__ */ import_react191.default.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
-        !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ import_react191.default.createElement(import_react_icons90.CheckIcon, { width: "16px", height: "16px" })
+        /* @__PURE__ */ import_react192.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
+        /* @__PURE__ */ import_react192.default.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
+        !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ import_react192.default.createElement(import_react_icons91.CheckIcon, { width: "16px", height: "16px" })
       );
     }),
-    /* @__PURE__ */ import_react191.default.createElement(
+    /* @__PURE__ */ import_react192.default.createElement(
       Dropdown.Item,
       {
         onClick: () => onQualityChange({ height: "auto" }),
@@ -30925,19 +31092,19 @@ function HLSQualitySelector({
           gap: "$2"
         }
       },
-      /* @__PURE__ */ import_react191.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
-      isAuto && /* @__PURE__ */ import_react191.default.createElement(import_react_icons90.CheckIcon, { width: "16px", height: "16px" })
+      /* @__PURE__ */ import_react192.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
+      isAuto && /* @__PURE__ */ import_react192.default.createElement(import_react_icons91.CheckIcon, { width: "16px", height: "16px" })
     )
   ));
 }
-var import_react191, import_react_use41, import_react_icons90, getQualityText, getBitrateText;
+var import_react192, import_react_use43, import_react_icons91, getQualityText, getBitrateText;
 var init_HLSQualitySelector = __esm({
   "src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react191 = __toESM(require("react"));
-    import_react_use41 = require("react-use");
-    import_react_icons90 = require("@100mslive/react-icons");
+    import_react192 = __toESM(require("react"));
+    import_react_use43 = require("react-use");
+    import_react_icons91 = require("@100mslive/react-icons");
     init_src();
     init_Sheet2();
     init_Theme();
@@ -30948,12 +31115,12 @@ var init_HLSQualitySelector = __esm({
 });
 
 // src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx
-var import_react192, import_react_sdk96, HLSViewTitle;
+var import_react193, import_react_sdk96, HLSViewTitle;
 var init_MwebHLSViewTitle = __esm({
   "src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react192 = __toESM(require("react"));
+    import_react193 = __toESM(require("react"));
     import_react_sdk96 = require("@100mslive/react-sdk");
     init_Layout();
     init_Text2();
@@ -30964,10 +31131,10 @@ var init_MwebHLSViewTitle = __esm({
     HLSViewTitle = () => {
       const peerCount = (0, import_react_sdk96.useHMSStore)(import_react_sdk96.selectPeerCount);
       const hlsState = (0, import_react_sdk96.useHMSStore)(import_react_sdk96.selectHLSState);
-      const intervalRef = (0, import_react192.useRef)(null);
+      const intervalRef = (0, import_react193.useRef)(null);
       const { screenType } = useRoomLayoutConferencingScreen();
-      const [liveTime, setLiveTime] = (0, import_react192.useState)(0);
-      const startTimer = (0, import_react192.useCallback)(() => {
+      const [liveTime, setLiveTime] = (0, import_react193.useState)(0);
+      const startTimer = (0, import_react193.useCallback)(() => {
         intervalRef.current = setInterval(() => {
           var _a8;
           const timeStamp = (_a8 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a8[screenType === "hls_live_streaming" ? "startedAt" : "initialisedAt"];
@@ -30976,7 +31143,7 @@ var init_MwebHLSViewTitle = __esm({
           }
         }, 6e4);
       }, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants, screenType]);
-      (0, import_react192.useEffect)(() => {
+      (0, import_react193.useEffect)(() => {
         var _a8;
         if (hlsState == null ? void 0 : hlsState.running) {
           startTimer();
@@ -30994,7 +31161,7 @@ var init_MwebHLSViewTitle = __esm({
           }
         };
       }, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants, screenType, startTimer]);
-      return /* @__PURE__ */ import_react192.default.createElement(
+      return /* @__PURE__ */ import_react193.default.createElement(
         Flex,
         {
           gap: "4",
@@ -31008,8 +31175,8 @@ var init_MwebHLSViewTitle = __esm({
             backgroundColor: "$surface_dim"
           }
         },
-        /* @__PURE__ */ import_react192.default.createElement(Logo, null),
-        /* @__PURE__ */ import_react192.default.createElement(Flex, { direction: "column" }, /* @__PURE__ */ import_react192.default.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, "Tech Talk"), /* @__PURE__ */ import_react192.default.createElement(Flex, { gap: "1" }, /* @__PURE__ */ import_react192.default.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, getFormattedCount(peerCount) + " watching"), /* @__PURE__ */ import_react192.default.createElement(
+        /* @__PURE__ */ import_react193.default.createElement(Logo, null),
+        /* @__PURE__ */ import_react193.default.createElement(Flex, { direction: "column" }, /* @__PURE__ */ import_react193.default.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, "Tech Talk"), /* @__PURE__ */ import_react193.default.createElement(Flex, { gap: "1" }, /* @__PURE__ */ import_react193.default.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, getFormattedCount(peerCount) + " watching"), /* @__PURE__ */ import_react193.default.createElement(
           Flex,
           {
             direction: "column",
@@ -31021,7 +31188,7 @@ var init_MwebHLSViewTitle = __esm({
               alignSelf: "center"
             }
           }
-        ), /* @__PURE__ */ import_react192.default.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, "Started " + getTime(liveTime) + " ago")))
+        ), /* @__PURE__ */ import_react193.default.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, "Started " + getTime(liveTime) + " ago")))
       );
     };
   }
@@ -31032,17 +31199,17 @@ var HLSView_exports = {};
 __export(HLSView_exports, {
   default: () => HLSView_default
 });
-var import_react193, import_react_use42, import_hls_player3, import_screenfull3, import_react_sdk97, import_react_icons91, hlsPlayer, toastMap, HLSView, HLSView_default;
+var import_react194, import_react_use44, import_hls_player3, import_screenfull3, import_react_sdk97, import_react_icons92, hlsPlayer, toastMap, HLSView, HLSView_default;
 var init_HLSView = __esm({
   "src/Prebuilt/layouts/HLSView.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react193 = __toESM(require("react"));
-    import_react_use42 = require("react-use");
+    import_react194 = __toESM(require("react"));
+    import_react_use44 = require("react-use");
     import_hls_player3 = require("@100mslive/hls-player");
     import_screenfull3 = __toESM(require("screenfull"));
     import_react_sdk97 = require("@100mslive/react-sdk");
-    import_react_icons91 = require("@100mslive/react-icons");
+    import_react_icons92 = require("@100mslive/react-icons");
     init_ChatToggle();
     init_HlsStatsOverlay();
     init_HMSVideo2();
@@ -31052,6 +31219,7 @@ var init_HLSView = __esm({
     init_HLSQualitySelector();
     init_MwebHLSViewTitle();
     init_PlayerContext();
+    init_LeaveRoom();
     init_ToastManager();
     init_Button2();
     init_IconButton2();
@@ -31066,51 +31234,52 @@ var init_HLSView = __esm({
     init_constants();
     toastMap = {};
     HLSView = () => {
-      var _a8, _b7, _c;
-      const videoRef = (0, import_react193.useRef)(null);
-      const hlsViewRef = (0, import_react193.useRef)(null);
+      var _a8, _b7;
+      const videoRef = (0, import_react194.useRef)(null);
+      const hlsViewRef = (0, import_react194.useRef)(null);
       const hlsState = (0, import_react_sdk97.useHMSStore)(import_react_sdk97.selectHLSState);
       const enablHlsStats = (0, import_react_sdk97.useHMSStore)((0, import_react_sdk97.selectAppData)(APP_DATA.hlsStats));
       const { elements, screenType } = useRoomLayoutConferencingScreen();
       const notification = (0, import_react_sdk97.useHMSNotifications)(import_react_sdk97.HMSNotificationTypes.POLL_STOPPED);
       const hmsActions = (0, import_react_sdk97.useHMSActions)();
       const { themeType } = useTheme();
-      const [streamEnded, setStreamEnded] = (0, import_react193.useState)(false);
-      let [hlsStatsState, setHlsStatsState] = (0, import_react193.useState)(null);
+      const [streamEnded, setStreamEnded] = (0, import_react194.useState)(false);
+      let [hlsStatsState, setHlsStatsState] = (0, import_react194.useState)(null);
       const hlsUrl = (_a8 = hlsState.variants[0]) == null ? void 0 : _a8.url;
-      const [availableLayers, setAvailableLayers] = (0, import_react193.useState)([]);
-      const [isVideoLive, setIsVideoLive] = (0, import_react193.useState)(true);
-      const [isCaptionEnabled, setIsCaptionEnabled] = (0, import_react193.useState)(true);
-      const [hasCaptions, setHasCaptions] = (0, import_react193.useState)(false);
-      const [currentSelectedQuality, setCurrentSelectedQuality] = (0, import_react193.useState)(null);
-      const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = (0, import_react193.useState)(false);
-      const [isPaused, setIsPaused] = (0, import_react193.useState)(false);
-      const [show, toggle] = (0, import_react_use42.useToggle)(false);
-      const lastHlsUrl = (0, import_react_use42.usePrevious)(hlsUrl);
+      const [availableLayers, setAvailableLayers] = (0, import_react194.useState)([]);
+      const [isVideoLive, setIsVideoLive] = (0, import_react194.useState)(true);
+      const [isCaptionEnabled, setIsCaptionEnabled] = (0, import_react194.useState)(true);
+      const [hasCaptions, setHasCaptions] = (0, import_react194.useState)(false);
+      const [currentSelectedQuality, setCurrentSelectedQuality] = (0, import_react194.useState)(null);
+      const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = (0, import_react194.useState)(false);
+      const [isSeekEnabled, setIsSeekEnabled] = (0, import_react194.useState)(false);
+      const [isPaused, setIsPaused] = (0, import_react194.useState)(false);
+      const [show, toggle] = (0, import_react_use44.useToggle)(false);
+      const lastHlsUrl = (0, import_react_use44.usePrevious)(hlsUrl);
       const togglePollView = usePollViewToggle();
       const vanillaStore = (0, import_react_sdk97.useHMSVanillaStore)();
-      const [controlsVisible, setControlsVisible] = (0, import_react193.useState)(true);
-      const [isUserSelectedAuto, setIsUserSelectedAuto] = (0, import_react193.useState)(true);
-      const [qualityDropDownOpen, setQualityDropDownOpen] = (0, import_react193.useState)(false);
-      const controlsRef = (0, import_react193.useRef)(null);
-      const controlsTimerRef = (0, import_react193.useRef)();
+      const [controlsVisible, setControlsVisible] = (0, import_react194.useState)(true);
+      const [isUserSelectedAuto, setIsUserSelectedAuto] = (0, import_react194.useState)(true);
+      const [qualityDropDownOpen, setQualityDropDownOpen] = (0, import_react194.useState)(false);
+      const controlsRef = (0, import_react194.useRef)(null);
+      const controlsTimerRef = (0, import_react194.useRef)();
       const sidepane = (0, import_react_sdk97.useHMSStore)((0, import_react_sdk97.selectAppData)(APP_DATA.sidePane));
       const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
       const showChat = !!(elements == null ? void 0 : elements.chat);
       const isFullScreenSupported = import_screenfull3.default.isEnabled;
-      const isMobile = (0, import_react_use42.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use44.useMedia)(config.media.md);
       const isLandscape = useIsLandscape();
-      const isFullScreen = (0, import_react_use42.useFullscreen)(hlsViewRef, show, {
+      const isFullScreen = (0, import_react_use44.useFullscreen)(hlsViewRef, show, {
         onClose: () => toggle(false)
       });
-      const [showLoader, setShowLoader] = (0, import_react193.useState)(false);
+      const [showLoader, setShowLoader] = (0, import_react194.useState)(false);
       const isMwebHLSStream = screenType === "hls_live_streaming" && isMobile;
-      (0, import_react193.useEffect)(() => {
+      (0, import_react194.useEffect)(() => {
         if (sidepane === "" && isMwebHLSStream && showChat) {
           toggleChat();
         }
       }, [sidepane, isMwebHLSStream, toggleChat, showChat]);
-      (0, import_react193.useEffect)(() => {
+      (0, import_react194.useEffect)(() => {
         const videoEl = videoRef.current;
         const showLoader2 = () => setShowLoader(true);
         const hideLoader = () => setShowLoader(false);
@@ -31121,12 +31290,12 @@ var init_HLSView = __esm({
           videoEl == null ? void 0 : videoEl.removeEventListener("waiting", showLoader2);
         };
       }, []);
-      (0, import_react193.useEffect)(() => {
+      (0, import_react194.useEffect)(() => {
         if (streamEnded && lastHlsUrl !== hlsUrl) {
           setStreamEnded(false);
         }
       }, [hlsUrl, streamEnded, lastHlsUrl]);
-      (0, import_react193.useEffect)(() => {
+      (0, import_react194.useEffect)(() => {
         if (!notification)
           return;
         const toastID = toastMap == null ? void 0 : toastMap[notification.data.id];
@@ -31135,7 +31304,7 @@ var init_HLSView = __esm({
           delete toastMap[notification.data.id];
         }
       }, [notification]);
-      (0, import_react193.useEffect)(() => {
+      (0, import_react194.useEffect)(() => {
         const videoElem = videoRef.current;
         const setStreamEndedCallback = () => {
           setStreamEnded(true);
@@ -31146,7 +31315,7 @@ var init_HLSView = __esm({
           videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
         };
       }, [hlsUrl]);
-      const handleQuality = (0, import_react193.useCallback)(
+      const handleQuality = (0, import_react194.useCallback)(
         (quality) => {
           var _a9;
           if (hlsPlayer) {
@@ -31157,7 +31326,7 @@ var init_HLSView = __esm({
         [availableLayers]
         //eslint-disable-line
       );
-      (0, import_react193.useEffect)(() => {
+      (0, import_react194.useEffect)(() => {
         let videoEl = videoRef.current;
         const manifestLoadedHandler = ({ layers }) => {
           setAvailableLayers(layers);
@@ -31184,7 +31353,7 @@ var init_HLSView = __esm({
             const pollStartedBy = vanillaStore.getState((0, import_react_sdk97.selectPeerNameByID)(poll.startedBy)) || "Participant";
             const toastID = ToastManager.addToast({
               title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,
-              action: /* @__PURE__ */ import_react193.default.createElement(
+              action: /* @__PURE__ */ import_react194.default.createElement(
                 Button,
                 {
                   onClick: () => togglePollView(pollId),
@@ -31252,7 +31421,7 @@ var init_HLSView = __esm({
           };
         }
       }, [hlsUrl, togglePollView, vanillaStore]);
-      (0, import_react193.useEffect)(() => {
+      (0, import_react194.useEffect)(() => {
         const onHLSStats = (state) => setHlsStatsState(state);
         if (enablHlsStats) {
           hlsPlayer == null ? void 0 : hlsPlayer.on(import_hls_player3.HMSHLSPlayerEvents.STATS, onHLSStats);
@@ -31274,46 +31443,61 @@ var init_HLSView = __esm({
       const sfnOverlayClose = () => {
         hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);
       };
-      (0, import_react193.useEffect)(() => {
+      (0, import_react194.useEffect)(() => {
         if (controlsVisible && isFullScreen && !qualityDropDownOpen) {
           if (controlsTimerRef.current) {
             clearTimeout(controlsTimerRef.current);
           }
-          controlsTimerRef.current = setTimeout(() => {
-            setControlsVisible(false);
-          }, 5e3);
         }
         if (!isFullScreen && controlsTimerRef.current) {
           clearTimeout(controlsTimerRef.current);
         }
+        controlsTimerRef.current = setTimeout(() => {
+          setControlsVisible(false);
+        }, 5e3);
         return () => {
           if (controlsTimerRef.current) {
             clearTimeout(controlsTimerRef.current);
           }
         };
       }, [controlsVisible, isFullScreen, qualityDropDownOpen]);
-      const onTouchHandler = (0, import_react193.useCallback)(
+      const onSeekTo = (0, import_react194.useCallback)((seek) => {
+        var _a9;
+        hlsPlayer == null ? void 0 : hlsPlayer.seekTo(((_a9 = videoRef.current) == null ? void 0 : _a9.currentTime) + seek);
+      }, []);
+      const onDoubleClickHandler = (0, import_react194.useCallback)(
         (event) => {
-          event.preventDefault();
-          if (event.type === "ontouchstart" && controlsVisible) {
-            setControlsVisible(false);
-            return;
-          }
-          if (event.type === "ontouchstart" || qualityDropDownOpen) {
-            setControlsVisible(true);
+          if (!(isMobile || isLandscape)) {
             return;
           }
-          if (isFullScreen && !controlsVisible && event.type === "touchmove") {
-            setControlsVisible(true);
-            if (controlsTimerRef.current) {
-              clearTimeout(controlsTimerRef.current);
-            }
+          const sidePercentage = event.screenX * 100 / event.target.clientWidth;
+          setIsSeekEnabled(true);
+          if (sidePercentage < 45) {
+            onSeekTo(-10);
+          } else {
+            onSeekTo(10);
           }
+          setTimeout(() => {
+            setIsSeekEnabled(false);
+          }, 200);
         },
-        [controlsVisible, isFullScreen, qualityDropDownOpen]
+        [isLandscape, isMobile, onSeekTo]
       );
-      const onHoverHandler = (0, import_react193.useCallback)(
+      const onClickHandler = (0, import_react194.useCallback)(() => {
+        if (!(isMobile || isLandscape)) {
+          return;
+        }
+        setControlsVisible((value) => !value);
+        if (controlsTimerRef.current) {
+          clearTimeout(controlsTimerRef.current);
+        }
+      }, [isLandscape, isMobile]);
+      const onHoverHandler = (0, import_react194.useCallback)(
         (event) => {
+          event.preventDefault();
+          if (isMobile || isLandscape) {
+            return;
+          }
           if (event.type === "mouseenter" || qualityDropDownOpen) {
             setControlsVisible(true);
             return;
@@ -31327,9 +31511,9 @@ var init_HLSView = __esm({
             }
           }
         },
-        [controlsVisible, isFullScreen, qualityDropDownOpen]
+        [controlsVisible, isFullScreen, isLandscape, isMobile, qualityDropDownOpen]
       );
-      return /* @__PURE__ */ import_react193.default.createElement(
+      return /* @__PURE__ */ import_react194.default.createElement(
         Flex,
         {
           key: "hls-viewer",
@@ -31337,11 +31521,12 @@ var init_HLSView = __esm({
           ref: hlsViewRef,
           direction: isMobile || isLandscape ? "column" : "row",
           css: {
-            w: sidepane !== "" && isLandscape ? "55%" : "100%",
-            h: sidepane !== "" && isMobile ? "36%" : "100%"
+            w: sidepane !== "" && isLandscape ? "" : "100%",
+            h: sidepane !== "" && isMobile ? "36%" : "100%",
+            flex: "1 1 0"
           }
         },
-        hlsUrl && !streamEnded ? /* @__PURE__ */ import_react193.default.createElement(import_react193.default.Fragment, null, /* @__PURE__ */ import_react193.default.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ import_react193.default.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ import_react193.default.createElement(
+        hlsUrl && !streamEnded ? /* @__PURE__ */ import_react194.default.createElement(import_react194.default.Fragment, null, /* @__PURE__ */ import_react194.default.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ import_react194.default.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ import_react194.default.createElement(
           Flex,
           {
             id: "hls-player-container",
@@ -31352,8 +31537,8 @@ var init_HLSView = __esm({
               margin: "0 auto"
             }
           },
-          /* @__PURE__ */ import_react193.default.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
-          showLoader && /* @__PURE__ */ import_react193.default.createElement(
+          !(isMobile || isLandscape) && /* @__PURE__ */ import_react194.default.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
+          showLoader && /* @__PURE__ */ import_react194.default.createElement(
             Flex,
             {
               align: "center",
@@ -31362,56 +31547,68 @@ var init_HLSView = __esm({
                 position: "absolute"
               }
             },
-            /* @__PURE__ */ import_react193.default.createElement(Loading, { width: 72, height: 72 })
+            /* @__PURE__ */ import_react194.default.createElement(Loading, { width: 72, height: 72 })
           ),
-          /* @__PURE__ */ import_react193.default.createElement(
+          /* @__PURE__ */ import_react194.default.createElement(
             HMSVideoPlayer.Root,
             {
               ref: videoRef,
               onMouseEnter: onHoverHandler,
               onMouseMove: onHoverHandler,
               onMouseLeave: onHoverHandler,
-              onTouchStart: onTouchHandler,
-              onTouchMove: onTouchHandler
+              onClick: onClickHandler,
+              onDoubleClick: (e) => {
+                onDoubleClickHandler(e);
+              }
             },
-            /* @__PURE__ */ import_react193.default.createElement(import_react193.default.Fragment, null, isMobile || isLandscape ? /* @__PURE__ */ import_react193.default.createElement(import_react193.default.Fragment, null, !showLoader && /* @__PURE__ */ import_react193.default.createElement(
-              Box,
+            /* @__PURE__ */ import_react194.default.createElement(import_react194.default.Fragment, null, isMobile || isLandscape ? /* @__PURE__ */ import_react194.default.createElement(import_react194.default.Fragment, null, !showLoader && /* @__PURE__ */ import_react194.default.createElement(
+              Flex,
               {
+                align: "center",
+                justify: "center",
                 css: {
-                  position: "absolute",
-                  top: "40%",
-                  left: "50%",
-                  transform: "translateY(-40%) translateX(-50%)",
-                  padding: "$4",
+                  bg: "#00000066",
                   display: "inline-flex",
-                  r: "$round",
-                  gap: "$1",
-                  bg: "rgba(0, 0, 0, 0.6)",
+                  gap: "$2",
                   zIndex: 1,
+                  size: "100%",
                   visibility: controlsVisible ? `` : `hidden`,
                   opacity: controlsVisible ? `1` : "0"
                 }
               },
-              isPaused ? /* @__PURE__ */ import_react193.default.createElement(
-                IconButton,
+              /* @__PURE__ */ import_react194.default.createElement(
+                HMSVideoPlayer.Seeker,
                 {
-                  onClick: () => __async(void 0, null, function* () {
-                    yield hlsPlayer == null ? void 0 : hlsPlayer.play();
-                  }),
-                  "data-testid": "play_btn"
+                  title: "backward",
+                  css: {
+                    visibility: isSeekEnabled ? `` : `hidden`,
+                    opacity: isSeekEnabled ? `1` : "0"
+                  }
                 },
-                /* @__PURE__ */ import_react193.default.createElement(import_react_icons91.PlayIcon, { width: "48px", height: "48px" })
-              ) : /* @__PURE__ */ import_react193.default.createElement(
-                IconButton,
+                /* @__PURE__ */ import_react194.default.createElement(import_react_icons92.BackwardArrowIcon, { width: 32, height: 32 })
+              ),
+              /* @__PURE__ */ import_react194.default.createElement(
+                Box,
                 {
-                  onClick: () => __async(void 0, null, function* () {
-                    yield hlsPlayer == null ? void 0 : hlsPlayer.pause();
-                  }),
-                  "data-testid": "pause_btn"
+                  css: {
+                    bg: "rgba(0, 0, 0, 0.6)",
+                    r: "$round"
+                  }
                 },
-                /* @__PURE__ */ import_react193.default.createElement(import_react_icons91.PauseIcon, { width: "48px", height: "48px" })
+                /* @__PURE__ */ import_react194.default.createElement(HMSVideoPlayer.PlayPauseButton, { isPaused, width: 48, height: 48 })
+              ),
+              /* @__PURE__ */ import_react194.default.createElement(
+                HMSVideoPlayer.Seeker,
+                {
+                  title: "forward",
+                  css: {
+                    visibility: isSeekEnabled ? `` : `hidden`,
+                    opacity: isSeekEnabled ? `1` : "0"
+                  }
+                },
+                /* @__PURE__ */ import_react194.default.createElement(import_react_icons92.ForwardArrowIcon, { width: 32, height: 32 })
               )
-            ), /* @__PURE__ */ import_react193.default.createElement(
+            ), /* @__PURE__ */ import_react194.default.createElement(
               Flex,
               {
                 ref: controlsRef,
@@ -31424,18 +31621,20 @@ var init_HLSView = __esm({
                   left: "0",
                   width: "100%",
                   flexShrink: 0,
+                  zIndex: 1,
                   visibility: controlsVisible ? `` : `hidden`,
                   opacity: controlsVisible ? `1` : "0"
                 }
               },
-              /* @__PURE__ */ import_react193.default.createElement(
+              /* @__PURE__ */ import_react194.default.createElement(
                 HMSVideoPlayer.Controls.Root,
                 {
                   css: {
                     p: "$4 $8"
                   }
                 },
-                /* @__PURE__ */ import_react193.default.createElement(HMSVideoPlayer.Controls.Right, null, isLandscape && /* @__PURE__ */ import_react193.default.createElement(ChatToggle, null), hasCaptions && /* @__PURE__ */ import_react193.default.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 ? /* @__PURE__ */ import_react193.default.createElement(
+                /* @__PURE__ */ import_react194.default.createElement(HMSVideoPlayer.Controls.Left, null, /* @__PURE__ */ import_react194.default.createElement(LeaveRoom, { screenType })),
+                /* @__PURE__ */ import_react194.default.createElement(HMSVideoPlayer.Controls.Right, null, isLandscape && /* @__PURE__ */ import_react194.default.createElement(ChatToggle, null), hasCaptions && !isHlsAutoplayBlocked && /* @__PURE__ */ import_react194.default.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !isHlsAutoplayBlocked ? /* @__PURE__ */ import_react194.default.createElement(
                   HLSQualitySelector,
                   {
                     layers: availableLayers,
@@ -31445,19 +31644,20 @@ var init_HLSView = __esm({
                     onQualityChange: handleQuality,
                     isAuto: isUserSelectedAuto
                   }
-                ) : null)
+                ) : null, /* @__PURE__ */ import_react194.default.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }))
               )
-            )) : null, /* @__PURE__ */ import_react193.default.createElement(
+            )) : null, /* @__PURE__ */ import_react194.default.createElement(
               Flex,
               {
                 ref: controlsRef,
-                direction: "column",
+                direction: isMobile ? "columnReverse" : "column",
                 justify: "end",
                 align: "start",
                 css: {
                   position: "absolute",
                   bottom: "0",
                   left: "0",
+                  zIndex: 1,
                   background: isMobile || isLandscape ? "" : `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
                   width: "100%",
                   pt: "$8",
@@ -31467,23 +31667,33 @@ var init_HLSView = __esm({
                   opacity: controlsVisible ? `1` : "0"
                 }
               },
-              !(isMobile || isLandscape) && ((_b7 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b7.playlist_type) === import_react_sdk97.HLSPlaylistType.DVR && /* @__PURE__ */ import_react193.default.createElement(HMSVideoPlayer.Progress, null),
-              /* @__PURE__ */ import_react193.default.createElement(
+              /* @__PURE__ */ import_react194.default.createElement(HMSVideoPlayer.Progress, { isDvr: ((_b7 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b7.playlist_type) === import_react_sdk97.HLSPlaylistType.DVR }),
+              /* @__PURE__ */ import_react194.default.createElement(
                 HMSVideoPlayer.Controls.Root,
                 {
                   css: {
                     p: "$4 $8"
                   }
                 },
-                /* @__PURE__ */ import_react193.default.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ import_react193.default.createElement(import_react193.default.Fragment, null, /* @__PURE__ */ import_react193.default.createElement(
-                  HMSVideoPlayer.PlayButton,
+                /* @__PURE__ */ import_react194.default.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ import_react194.default.createElement(import_react194.default.Fragment, null, /* @__PURE__ */ import_react194.default.createElement(
+                  HMSVideoPlayer.Seeker,
                   {
-                    onClick: () => __async(void 0, null, function* () {
-                      isPaused ? yield hlsPlayer == null ? void 0 : hlsPlayer.play() : hlsPlayer == null ? void 0 : hlsPlayer.pause();
-                    }),
-                    isPaused
-                  }
-                ), !isVideoLive ? /* @__PURE__ */ import_react193.default.createElement(HMSVideoPlayer.Duration, null) : null, /* @__PURE__ */ import_react193.default.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ import_react193.default.createElement(
+                    onClick: () => {
+                      onSeekTo(-10);
+                    },
+                    title: "backward"
+                  },
+                  /* @__PURE__ */ import_react194.default.createElement(import_react_icons92.BackwardArrowIcon, { width: 20, height: 20 })
+                ), /* @__PURE__ */ import_react194.default.createElement(HMSVideoPlayer.PlayPauseButton, { isPaused }), /* @__PURE__ */ import_react194.default.createElement(
+                  HMSVideoPlayer.Seeker,
+                  {
+                    onClick: () => {
+                      onSeekTo(10);
+                    },
+                    title: "forward"
+                  },
+                  /* @__PURE__ */ import_react194.default.createElement(import_react_icons92.ForwardArrowIcon, { width: 20, height: 20 })
+                ), !isVideoLive ? /* @__PURE__ */ import_react194.default.createElement(HMSVideoPlayer.Duration, null) : null, /* @__PURE__ */ import_react194.default.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ import_react194.default.createElement(
                   IconButton,
                   {
                     css: { px: "$2" },
@@ -31494,7 +31704,7 @@ var init_HLSView = __esm({
                     key: "jump-to-live_btn",
                     "data-testid": "jump-to-live_btn"
                   },
-                  /* @__PURE__ */ import_react193.default.createElement(Tooltip, { title: isVideoLive ? "Live" : "Go to Live", side: "top" }, /* @__PURE__ */ import_react193.default.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ import_react193.default.createElement(
+                  /* @__PURE__ */ import_react194.default.createElement(Tooltip, { title: isVideoLive ? "Live" : "Go to Live", side: "top" }, /* @__PURE__ */ import_react194.default.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ import_react194.default.createElement(
                     Box,
                     {
                       css: {
@@ -31504,7 +31714,7 @@ var init_HLSView = __esm({
                         r: "$1"
                       }
                     }
-                  ), /* @__PURE__ */ import_react193.default.createElement(
+                  ), /* @__PURE__ */ import_react194.default.createElement(
                     Text,
                     {
                       variant: "$body1",
@@ -31515,8 +31725,8 @@ var init_HLSView = __esm({
                     },
                     isVideoLive ? "LIVE" : "GO LIVE"
                   )))
-                ), (isMobile || isLandscape) && !isVideoLive ? /* @__PURE__ */ import_react193.default.createElement(HMSVideoPlayer.Duration, null) : null),
-                /* @__PURE__ */ import_react193.default.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && !(isMobile || isLandscape) && /* @__PURE__ */ import_react193.default.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !(isMobile || isLandscape) ? /* @__PURE__ */ import_react193.default.createElement(
+                ), (isMobile || isLandscape) && !isVideoLive ? /* @__PURE__ */ import_react194.default.createElement(HMSVideoPlayer.Duration, null) : null),
+                /* @__PURE__ */ import_react194.default.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && !(isMobile || isLandscape) && /* @__PURE__ */ import_react194.default.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !(isMobile || isLandscape) ? /* @__PURE__ */ import_react194.default.createElement(
                   HLSQualitySelector,
                   {
                     layers: availableLayers,
@@ -31526,12 +31736,11 @@ var init_HLSView = __esm({
                     onQualityChange: handleQuality,
                     isAuto: isUserSelectedAuto
                   }
-                ) : null, isFullScreenSupported ? /* @__PURE__ */ import_react193.default.createElement(FullScreenButton2, { isFullScreen, onToggle: toggle }) : null)
-              ),
-              (isMobile || isLandscape) && ((_c = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _c.playlist_type) === import_react_sdk97.HLSPlaylistType.DVR ? /* @__PURE__ */ import_react193.default.createElement(HMSVideoPlayer.Progress, null) : null
+                ) : null, isFullScreenSupported ? /* @__PURE__ */ import_react194.default.createElement(FullScreenButton2, { isFullScreen, onToggle: toggle }) : null)
+              )
             ))
           )
-        )), isMobile && !isFullScreen && /* @__PURE__ */ import_react193.default.createElement(HLSViewTitle, null)) : /* @__PURE__ */ import_react193.default.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ import_react193.default.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ import_react193.default.createElement(import_react_icons91.ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ import_react193.default.createElement(import_react_icons91.GoLiveIcon, { height: 56, width: 56 })), /* @__PURE__ */ import_react193.default.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ import_react193.default.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, streamEnded ? "Have a nice day!" : "Sit back and relax"))
+        )), isMobile && !isFullScreen && /* @__PURE__ */ import_react194.default.createElement(HLSViewTitle, null)) : /* @__PURE__ */ import_react194.default.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ import_react194.default.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$4", top: "$4", zIndex: 1 } }, /* @__PURE__ */ import_react194.default.createElement(LeaveRoom, { screenType })), /* @__PURE__ */ import_react194.default.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ import_react194.default.createElement(import_react_icons92.ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ import_react194.default.createElement(import_react_icons92.GoLiveIcon, { height: 56, width: 56 })), /* @__PURE__ */ import_react194.default.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ import_react194.default.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, streamEnded ? "Have a nice day!" : "Sit back and relax"))
       );
     };
     HLSView_default = HLSView;
@@ -31539,12 +31748,12 @@ var init_HLSView = __esm({
 });
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var import_react194, import_react_sdk98, HLSView2, VideoStreamingSection;
+var import_react195, import_react_sdk98, HLSView2, VideoStreamingSection;
 var init_VideoStreamingSection = __esm({
   "src/Prebuilt/layouts/VideoStreamingSection.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react194 = __toESM(require("react"));
+    import_react195 = __toESM(require("react"));
     import_react_sdk98 = require("@100mslive/react-sdk");
     init_FullPageProgress();
     init_GridLayout();
@@ -31557,7 +31766,7 @@ var init_VideoStreamingSection = __esm({
     init_useUISettings();
     init_useCloseScreenshareWhiteboard();
     init_hooks();
-    HLSView2 = import_react194.default.lazy(() => Promise.resolve().then(() => (init_HLSView(), HLSView_exports)));
+    HLSView2 = import_react195.default.lazy(() => Promise.resolve().then(() => (init_HLSView(), HLSView_exports)));
     VideoStreamingSection = ({
       screenType,
       elements,
@@ -31574,7 +31783,7 @@ var init_VideoStreamingSection = __esm({
       const pdfAnnotatorActive = usePDFConfig();
       const isMobileHLSStream = useMobileHLSStream();
       useCloseScreenshareWhiteboard();
-      (0, import_react194.useEffect)(() => {
+      (0, import_react195.useEffect)(() => {
         if (!isConnected) {
           return;
         }
@@ -31591,21 +31800,21 @@ var init_VideoStreamingSection = __esm({
       }
       let ViewComponent;
       if (screenType === "hls_live_streaming") {
-        ViewComponent = /* @__PURE__ */ import_react194.default.createElement(HLSView2, null);
+        ViewComponent = /* @__PURE__ */ import_react195.default.createElement(HLSView2, null);
       } else if (localPeerRole === waitingViewerRole) {
-        ViewComponent = /* @__PURE__ */ import_react194.default.createElement(WaitingView, null);
+        ViewComponent = /* @__PURE__ */ import_react195.default.createElement(WaitingView, null);
       } else if (pdfAnnotatorActive) {
-        ViewComponent = /* @__PURE__ */ import_react194.default.createElement(PDFView, null);
+        ViewComponent = /* @__PURE__ */ import_react195.default.createElement(PDFView, null);
       } else if (urlToIframe) {
-        ViewComponent = /* @__PURE__ */ import_react194.default.createElement(EmbedView, null);
+        ViewComponent = /* @__PURE__ */ import_react195.default.createElement(EmbedView, null);
       } else if (peerSharing) {
-        ViewComponent = /* @__PURE__ */ import_react194.default.createElement(GridLayout, __spreadValues({}, (_b7 = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _b7.grid));
+        ViewComponent = /* @__PURE__ */ import_react195.default.createElement(GridLayout, __spreadValues({}, (_b7 = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _b7.grid));
       } else if (isWhiteboardOpen) {
-        ViewComponent = /* @__PURE__ */ import_react194.default.createElement(WhiteboardView, null);
+        ViewComponent = /* @__PURE__ */ import_react195.default.createElement(WhiteboardView, null);
       } else {
-        ViewComponent = /* @__PURE__ */ import_react194.default.createElement(GridLayout, __spreadValues({}, (_c = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _c.grid));
+        ViewComponent = /* @__PURE__ */ import_react195.default.createElement(GridLayout, __spreadValues({}, (_c = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _c.grid));
       }
-      return /* @__PURE__ */ import_react194.default.createElement(import_react194.Suspense, { fallback: /* @__PURE__ */ import_react194.default.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ import_react194.default.createElement(
+      return /* @__PURE__ */ import_react195.default.createElement(import_react195.Suspense, { fallback: /* @__PURE__ */ import_react195.default.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ import_react195.default.createElement(
         Flex,
         {
           css: {
@@ -31616,17 +31825,18 @@ var init_VideoStreamingSection = __esm({
           direction: isMobileHLSStream ? "column" : "row"
         },
         ViewComponent,
-        /* @__PURE__ */ import_react194.default.createElement(
+        /* @__PURE__ */ import_react195.default.createElement(
           Box,
           {
             css: {
-              height: isMobileHLSStream ? "50%" : "100%",
+              flex: isMobileHLSStream ? "1 1 0" : void 0,
+              height: !isMobileHLSStream ? "100%" : void 0,
               maxHeight: "100%",
               "&:empty": { display: "none" },
               overflowY: "clip"
             }
           },
-          /* @__PURE__ */ import_react194.default.createElement(
+          /* @__PURE__ */ import_react195.default.createElement(
             SidePane_default,
             {
               screenType,
@@ -31641,14 +31851,14 @@ var init_VideoStreamingSection = __esm({
 });
 
 // src/Prebuilt/components/Header/RoomDetailsHeader.tsx
-var import_react195, import_react_use43, import_react_icons92, RoomDetailsHeader;
+var import_react196, import_react_use45, import_react_icons93, RoomDetailsHeader;
 var init_RoomDetailsHeader = __esm({
   "src/Prebuilt/components/Header/RoomDetailsHeader.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react195 = __toESM(require("react"));
-    import_react_use43 = require("react-use");
-    import_react_icons92 = require("@100mslive/react-icons");
+    import_react196 = __toESM(require("react"));
+    import_react_use45 = require("react-use");
+    import_react_icons93 = require("@100mslive/react-icons");
     init_Layout();
     init_Text2();
     init_Theme();
@@ -31658,34 +31868,34 @@ var init_RoomDetailsHeader = __esm({
     init_constants();
     RoomDetailsHeader = () => {
       const { title, description } = useRoomLayoutHeader();
-      const isMobile = (0, import_react_use43.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use45.useMedia)(config.media.md);
       const clipLength = 30;
       const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
       const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
       if (!title && !description || isMobile && !title) {
         return null;
       }
-      return /* @__PURE__ */ import_react195.default.createElement(Flex, { direction: isMobile ? "row" : "column", css: { ml: "$8", alignItems: isMobile ? "center" : "start" } }, /* @__PURE__ */ import_react195.default.createElement(Text, { variant: "sm", css: { c: "$on_surface_high", fontWeight: "$semiBold" } }, title), !isMobile && /* @__PURE__ */ import_react195.default.createElement(Flex, { align: "end", css: { color: "$on_surface_high" } }, /* @__PURE__ */ import_react195.default.createElement(Text, { variant: "xs", css: { c: "$on_surface_medium" } }, description.slice(0, clipLength)), description.length > clipLength ? /* @__PURE__ */ import_react195.default.createElement(
+      return /* @__PURE__ */ import_react196.default.createElement(Flex, { direction: isMobile ? "row" : "column", css: { ml: "$8", alignItems: isMobile ? "center" : "start" } }, /* @__PURE__ */ import_react196.default.createElement(Text, { variant: "sm", css: { c: "$on_surface_high", fontWeight: "$semiBold" } }, title), !isMobile && /* @__PURE__ */ import_react196.default.createElement(Flex, { align: "end", css: { color: "$on_surface_high" } }, /* @__PURE__ */ import_react196.default.createElement(Text, { variant: "xs", css: { c: "$on_surface_medium" } }, description.slice(0, clipLength)), description.length > clipLength ? /* @__PURE__ */ import_react196.default.createElement(
         "span",
         {
           style: { fontWeight: "600", fontSize: "12px", cursor: "pointer", lineHeight: "1rem" },
           onClick: toggleDetailsPane
         },
         "\xA0...more"
-      ) : null), isMobile && description ? /* @__PURE__ */ import_react195.default.createElement(Flex, { css: { color: "$on_surface_medium" } }, /* @__PURE__ */ import_react195.default.createElement(import_react_icons92.ChevronRightIcon, { height: 16, width: 16, onClick: toggleDetailsSheet })) : null);
+      ) : null), isMobile && description ? /* @__PURE__ */ import_react196.default.createElement(Flex, { css: { color: "$on_surface_medium" } }, /* @__PURE__ */ import_react196.default.createElement(import_react_icons93.ChevronRightIcon, { height: 16, width: 16, onClick: toggleDetailsSheet })) : null);
     };
   }
 });
 
 // src/Prebuilt/components/Header/common.jsx
-var import_react196, import_react_sdk99, import_react_icons93, CamaraFlipActions, AudioActions, AudioSelectionSheet, SelectWithLabel;
+var import_react197, import_react_sdk99, import_react_icons94, CamaraFlipActions, AudioActions, AudioSelectionSheet, SelectWithLabel;
 var init_common2 = __esm({
   "src/Prebuilt/components/Header/common.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react196 = __toESM(require("react"));
+    import_react197 = __toESM(require("react"));
     import_react_sdk99 = require("@100mslive/react-sdk");
-    import_react_icons93 = require("@100mslive/react-icons");
+    import_react_icons94 = require("@100mslive/react-icons");
     init_Divider2();
     init_Label2();
     init_Layout();
@@ -31703,7 +31913,7 @@ var init_common2 = __esm({
       if (!videoInput || !(videoInput == null ? void 0 : videoInput.length) || !(localVideoTrack == null ? void 0 : localVideoTrack.facingMode)) {
         return null;
       }
-      return /* @__PURE__ */ import_react196.default.createElement(Box, null, /* @__PURE__ */ import_react196.default.createElement(
+      return /* @__PURE__ */ import_react197.default.createElement(Box, null, /* @__PURE__ */ import_react197.default.createElement(
         IconButton_default,
         {
           disabled: !isVideoOn,
@@ -31718,7 +31928,7 @@ var init_common2 = __esm({
             }
           })
         },
-        /* @__PURE__ */ import_react196.default.createElement(import_react_icons93.CameraFlipIcon, null)
+        /* @__PURE__ */ import_react197.default.createElement(import_react_icons94.CameraFlipIcon, null)
       ));
     };
     AudioActions = () => {
@@ -31737,13 +31947,13 @@ var init_common2 = __esm({
       if (!audioFiltered) {
         return null;
       }
-      let AudioIcon = /* @__PURE__ */ import_react196.default.createElement(import_react_icons93.SpeakerIcon, null);
+      let AudioIcon = /* @__PURE__ */ import_react197.default.createElement(import_react_icons94.SpeakerIcon, null);
       if (currentSelection && currentSelection.label.toLowerCase().includes("bluetooth")) {
-        AudioIcon = /* @__PURE__ */ import_react196.default.createElement(import_react_icons93.BluetoothIcon, null);
+        AudioIcon = /* @__PURE__ */ import_react197.default.createElement(import_react_icons94.BluetoothIcon, null);
       } else if (currentSelection && currentSelection.label.toLowerCase().includes("wired")) {
-        AudioIcon = /* @__PURE__ */ import_react196.default.createElement(import_react_icons93.HeadphonesIcon, null);
+        AudioIcon = /* @__PURE__ */ import_react197.default.createElement(import_react_icons94.HeadphonesIcon, null);
       }
-      return /* @__PURE__ */ import_react196.default.createElement(
+      return /* @__PURE__ */ import_react197.default.createElement(
         AudioSelectionSheet,
         {
           audioDevices: availableAudioDevices,
@@ -31762,19 +31972,19 @@ var init_common2 = __esm({
             }
           })
         },
-        /* @__PURE__ */ import_react196.default.createElement(
+        /* @__PURE__ */ import_react197.default.createElement(
           Box,
           {
             onClick: () => __async(void 0, null, function* () {
               yield hmsActions.refreshDevices();
             })
           },
-          /* @__PURE__ */ import_react196.default.createElement(IconButton_default, null, AudioIcon, " ")
+          /* @__PURE__ */ import_react197.default.createElement(IconButton_default, null, AudioIcon, " ")
         )
       );
     };
     AudioSelectionSheet = ({ audioDevices, audioSelected, onChange, children }) => {
-      return /* @__PURE__ */ import_react196.default.createElement(Sheet.Root, null, /* @__PURE__ */ import_react196.default.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ import_react196.default.createElement(Sheet.Content, null, /* @__PURE__ */ import_react196.default.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ import_react196.default.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ import_react196.default.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio"), /* @__PURE__ */ import_react196.default.createElement(Sheet.Close, null, /* @__PURE__ */ import_react196.default.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ import_react196.default.createElement(import_react_icons93.CrossIcon, null))))), /* @__PURE__ */ import_react196.default.createElement(HorizontalDivider, null), /* @__PURE__ */ import_react196.default.createElement(
+      return /* @__PURE__ */ import_react197.default.createElement(Sheet.Root, null, /* @__PURE__ */ import_react197.default.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ import_react197.default.createElement(Sheet.Content, null, /* @__PURE__ */ import_react197.default.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ import_react197.default.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ import_react197.default.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio"), /* @__PURE__ */ import_react197.default.createElement(Sheet.Close, null, /* @__PURE__ */ import_react197.default.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ import_react197.default.createElement(import_react_icons94.CrossIcon, null))))), /* @__PURE__ */ import_react197.default.createElement(HorizontalDivider, null), /* @__PURE__ */ import_react197.default.createElement(
         Flex,
         {
           direction: "column",
@@ -31785,7 +31995,7 @@ var init_common2 = __esm({
           }
         },
         audioDevices.map((audioDevice) => {
-          return /* @__PURE__ */ import_react196.default.createElement(
+          return /* @__PURE__ */ import_react197.default.createElement(
             SelectWithLabel,
             {
               key: audioDevice.deviceId,
@@ -31798,8 +32008,8 @@ var init_common2 = __esm({
         })
       )));
     };
-    SelectWithLabel = ({ label, icon = /* @__PURE__ */ import_react196.default.createElement(import_react196.default.Fragment, null), checked, id, onChange }) => {
-      return /* @__PURE__ */ import_react196.default.createElement(
+    SelectWithLabel = ({ label, icon = /* @__PURE__ */ import_react197.default.createElement(import_react197.default.Fragment, null), checked, id, onChange }) => {
+      return /* @__PURE__ */ import_react197.default.createElement(
         Flex,
         {
           align: "center",
@@ -31811,7 +32021,7 @@ var init_common2 = __esm({
           },
           onClick: onChange
         },
-        /* @__PURE__ */ import_react196.default.createElement(
+        /* @__PURE__ */ import_react197.default.createElement(
           Label3,
           {
             htmlFor: id,
@@ -31829,20 +32039,20 @@ var init_common2 = __esm({
           icon,
           label
         ),
-        checked && /* @__PURE__ */ import_react196.default.createElement(import_react_icons93.CheckIcon, { width: 24, height: 24 })
+        checked && /* @__PURE__ */ import_react197.default.createElement(import_react_icons94.CheckIcon, { width: 24, height: 24 })
       );
     };
   }
 });
 
 // src/Prebuilt/components/Header/Header.tsx
-var import_react197, import_react_use44, import_react_sdk100, Header2;
+var import_react198, import_react_use46, import_react_sdk100, Header2;
 var init_Header = __esm({
   "src/Prebuilt/components/Header/Header.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react197 = __toESM(require("react"));
-    import_react_use44 = require("react-use");
+    import_react198 = __toESM(require("react"));
+    import_react_use46 = require("react-use");
     import_react_sdk100 = require("@100mslive/react-sdk");
     init_src();
     init_HeaderComponents();
@@ -31851,11 +32061,11 @@ var init_Header = __esm({
     init_common2();
     Header2 = () => {
       const roomState = (0, import_react_sdk100.useHMSStore)(import_react_sdk100.selectRoomState);
-      const isMobile = (0, import_react_use44.useMedia)(config.media.md);
+      const isMobile = (0, import_react_use46.useMedia)(config.media.md);
       if (roomState !== import_react_sdk100.HMSRoomState.Connected) {
-        return /* @__PURE__ */ import_react197.default.createElement(import_react197.default.Fragment, null);
+        return /* @__PURE__ */ import_react198.default.createElement(import_react198.default.Fragment, null);
       }
-      return /* @__PURE__ */ import_react197.default.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ import_react197.default.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ import_react197.default.createElement(Logo, null), /* @__PURE__ */ import_react197.default.createElement(RoomDetailsHeader, null), /* @__PURE__ */ import_react197.default.createElement(SpeakerTag, null), isMobile && /* @__PURE__ */ import_react197.default.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ import_react197.default.createElement(LiveStatus, null), /* @__PURE__ */ import_react197.default.createElement(RecordingStatus, null), /* @__PURE__ */ import_react197.default.createElement(RecordingPauseStatus, null))), /* @__PURE__ */ import_react197.default.createElement(
+      return /* @__PURE__ */ import_react198.default.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ import_react198.default.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ import_react198.default.createElement(Logo, null), /* @__PURE__ */ import_react198.default.createElement(RoomDetailsHeader, null), /* @__PURE__ */ import_react198.default.createElement(SpeakerTag, null), isMobile && /* @__PURE__ */ import_react198.default.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ import_react198.default.createElement(LiveStatus, null), /* @__PURE__ */ import_react198.default.createElement(RecordingStatus, null), /* @__PURE__ */ import_react198.default.createElement(RecordingPauseStatus, null))), /* @__PURE__ */ import_react198.default.createElement(
         Flex,
         {
           align: "center",
@@ -31865,8 +32075,8 @@ var init_Header = __esm({
             gap: "$4"
           }
         },
-        /* @__PURE__ */ import_react197.default.createElement(StreamActions, null),
-        isMobile ? /* @__PURE__ */ import_react197.default.createElement(import_react197.default.Fragment, null, /* @__PURE__ */ import_react197.default.createElement(CamaraFlipActions, null), /* @__PURE__ */ import_react197.default.createElement(AudioActions, null)) : null
+        /* @__PURE__ */ import_react198.default.createElement(StreamActions, null),
+        isMobile ? /* @__PURE__ */ import_react198.default.createElement(import_react198.default.Fragment, null, /* @__PURE__ */ import_react198.default.createElement(CamaraFlipActions, null), /* @__PURE__ */ import_react198.default.createElement(AudioActions, null)) : null
       ));
     };
   }
@@ -31882,18 +32092,18 @@ var init_Header2 = __esm({
 });
 
 // src/Prebuilt/components/PreviousRoleInMetadata.tsx
-var import_react198, import_react_sdk101, PreviousRoleInMetadata;
+var import_react199, import_react_sdk101, PreviousRoleInMetadata;
 var init_PreviousRoleInMetadata = __esm({
   "src/Prebuilt/components/PreviousRoleInMetadata.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react198 = require("react");
+    import_react199 = require("react");
     import_react_sdk101 = require("@100mslive/react-sdk");
     init_useMetadata();
     PreviousRoleInMetadata = () => {
       const vanillaStore = (0, import_react_sdk101.useHMSVanillaStore)();
       const { updateMetaData } = useMyMetadata();
-      (0, import_react198.useEffect)(() => {
+      (0, import_react199.useEffect)(() => {
         let previousRole = vanillaStore.getState(import_react_sdk101.selectLocalPeerRoleName);
         const unsubscribe = vanillaStore.subscribe((currentRole) => {
           if (previousRole !== currentRole && currentRole) {
@@ -31909,16 +32119,15 @@ var init_PreviousRoleInMetadata = __esm({
 });
 
 // src/Prebuilt/components/ConferenceScreen.tsx
-var import_react199, import_uuid12, import_react_sdk102, ConferenceScreen;
+var import_react200, import_uuid12, import_react_sdk102, ConferenceScreen;
 var init_ConferenceScreen = __esm({
   "src/Prebuilt/components/ConferenceScreen.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react199 = __toESM(require("react"));
+    import_react200 = __toESM(require("react"));
     import_uuid12 = require("uuid");
     import_react_sdk102 = require("@100mslive/react-sdk");
     init_Footer3();
-    init_LeaveRoom();
     init_MoreSettings();
     init_HLSFailureModal();
     init_PIPComponent();
@@ -31943,28 +32152,28 @@ var init_ConferenceScreen = __esm({
       const roomState = (0, import_react_sdk102.useHMSStore)(import_react_sdk102.selectRoomState);
       const isConnectedToRoom = (0, import_react_sdk102.useHMSStore)(import_react_sdk102.selectIsConnectedToRoom);
       const hmsActions = (0, import_react_sdk102.useHMSActions)();
-      const [hideControls, setHideControls] = (0, import_react199.useState)(false);
+      const [hideControls, setHideControls] = (0, import_react200.useState)(false);
       const dropdownList = (0, import_react_sdk102.useHMSStore)((0, import_react_sdk102.selectAppData)(APP_DATA.dropdownList));
       const authTokenInAppData = useAuthToken();
-      const headerRef = (0, import_react199.useRef)(null);
-      const footerRef = (0, import_react199.useRef)(null);
+      const headerRef = (0, import_react200.useRef)(null);
+      const footerRef = (0, import_react200.useRef)(null);
       const isMobileDevice = isAndroid || isIOS || isIPadOS;
-      const dropdownListRef = (0, import_react199.useRef)();
+      const dropdownListRef = (0, import_react200.useRef)();
       const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
       const { toggleAudio, toggleVideo } = (0, import_react_sdk102.useAVToggle)();
       const noAVPermissions = !(toggleAudio || toggleVideo);
       const showChat = !!((_a8 = screenProps.elements) == null ? void 0 : _a8.chat);
+      const autoRoomJoined = (0, import_react200.useRef)(isPreviewScreenEnabled);
+      const isMobileHLSStream = useMobileHLSStream();
+      const isLandscapeHLSStream = useLandscapeHLSStream();
+      const isMwebHLSStream = isMobileHLSStream || isLandscapeHLSStream;
       const toggleControls = () => {
         var _a9;
-        if (((_a9 = dropdownListRef.current) == null ? void 0 : _a9.length) === 0 && isMobileDevice) {
+        if (((_a9 = dropdownListRef.current) == null ? void 0 : _a9.length) === 0 && isMobileDevice && !isMwebHLSStream) {
           setHideControls((value) => !value);
         }
       };
-      const autoRoomJoined = (0, import_react199.useRef)(isPreviewScreenEnabled);
-      const isMobileHLSStream = useMobileHLSStream();
-      const isLandscapeHLSStream = useLandscapeHLSStream();
-      const isMwebHLSStream = isMobileHLSStream || isLandscapeHLSStream;
-      (0, import_react199.useEffect)(() => {
+      (0, import_react200.useEffect)(() => {
         let timeout;
         dropdownListRef.current = dropdownList || [];
         if (dropdownListRef.current && dropdownListRef.current.length === 0) {
@@ -31979,7 +32188,7 @@ var init_ConferenceScreen = __esm({
           clearTimeout(timeout);
         };
       }, [dropdownList, hideControls, isMobileDevice]);
-      (0, import_react199.useEffect)(() => {
+      (0, import_react200.useEffect)(() => {
         if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== import_react_sdk102.HMSRoomState.Connecting && !autoRoomJoined.current) {
           hmsActions.join({
             userName: userName || (0, import_uuid12.v4)(),
@@ -31994,31 +32203,32 @@ var init_ConferenceScreen = __esm({
           autoRoomJoined.current = true;
         }
       }, [authTokenInAppData, endpoints == null ? void 0 : endpoints.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
-      (0, import_react199.useEffect)(() => {
+      (0, import_react200.useEffect)(() => {
         onJoinFunc == null ? void 0 : onJoinFunc();
         return () => {
           PictureInPicture.stop().catch((error) => console.error("stopping pip", error.message));
         };
       }, [onJoinFunc]);
       if (!isConnectedToRoom && ![import_react_sdk102.HMSRoomState.Reconnecting, import_react_sdk102.HMSRoomState.Disconnected].includes(roomState)) {
-        return /* @__PURE__ */ import_react199.default.createElement(FullPageProgress_default, { text: roomState === import_react_sdk102.HMSRoomState.Connecting ? "Joining..." : "" });
+        return /* @__PURE__ */ import_react200.default.createElement(FullPageProgress_default, { text: roomState === import_react_sdk102.HMSRoomState.Connecting ? "Joining..." : "" });
       }
-      return /* @__PURE__ */ import_react199.default.createElement(import_react199.default.Fragment, null, isHLSStarted ? /* @__PURE__ */ import_react199.default.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ import_react199.default.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ import_react199.default.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !(screenProps.hideSections.includes("header") || isMwebHLSStream) && /* @__PURE__ */ import_react199.default.createElement(
+      const hideControlsForStreaming = isMwebHLSStream ? true : hideControls;
+      return /* @__PURE__ */ import_react200.default.createElement(import_react200.default.Fragment, null, isHLSStarted ? /* @__PURE__ */ import_react200.default.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ import_react200.default.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ import_react200.default.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !(screenProps.hideSections.includes("header") || isMwebHLSStream) && /* @__PURE__ */ import_react200.default.createElement(
         Box,
         {
           ref: headerRef,
           css: {
             h: "$18",
             transition: "margin 0.3s ease-in-out",
-            marginTop: hideControls ? `-${(_b7 = headerRef.current) == null ? void 0 : _b7.clientHeight}px` : "none",
+            marginTop: hideControlsForStreaming ? `-${(_b7 = headerRef.current) == null ? void 0 : _b7.clientHeight}px` : "none",
             "@md": {
               h: "$17"
             }
           },
           "data-testid": "header"
         },
-        /* @__PURE__ */ import_react199.default.createElement(Header2, null)
-      ), isMwebHLSStream && /* @__PURE__ */ import_react199.default.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$4", top: "$4", zIndex: 1 } }, /* @__PURE__ */ import_react199.default.createElement(LeaveRoom, { screenType: screenProps.screenType })), /* @__PURE__ */ import_react199.default.createElement(
+        /* @__PURE__ */ import_react200.default.createElement(Header2, null)
+      ), /* @__PURE__ */ import_react200.default.createElement(
         Box,
         {
           css: {
@@ -32037,15 +32247,15 @@ var init_ConferenceScreen = __esm({
           "data-testid": "conferencing",
           onClick: toggleControls
         },
-        screenProps.elements ? /* @__PURE__ */ import_react199.default.createElement(
+        screenProps.elements ? /* @__PURE__ */ import_react200.default.createElement(
           VideoStreamingSection,
           {
             screenType: screenProps.screenType,
             elements: screenProps.elements,
-            hideControls
+            hideControls: hideControlsForStreaming
           }
         ) : null
-      ), !screenProps.hideSections.includes("footer") && screenProps.elements && !isMwebHLSStream && /* @__PURE__ */ import_react199.default.createElement(
+      ), !screenProps.hideSections.includes("footer") && screenProps.elements && !isMwebHLSStream && /* @__PURE__ */ import_react200.default.createElement(
         Box,
         {
           ref: footerRef,
@@ -32054,7 +32264,7 @@ var init_ConferenceScreen = __esm({
             maxHeight: "$24",
             transition: "margin 0.3s ease-in-out",
             bg: "$background_dim",
-            marginBottom: hideControls ? `-${(_f = footerRef.current) == null ? void 0 : _f.clientHeight}px` : void 0,
+            marginBottom: hideControlsForStreaming ? `-${(_f = footerRef.current) == null ? void 0 : _f.clientHeight}px` : void 0,
             "@md": {
               maxHeight: "unset",
               bg: screenProps.screenType === "hls_live_streaming" ? "transparent" : "$background_dim"
@@ -32062,8 +32272,8 @@ var init_ConferenceScreen = __esm({
           },
           "data-testid": "footer"
         },
-        /* @__PURE__ */ import_react199.default.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
-      ), isMwebHLSStream && !showChat && /* @__PURE__ */ import_react199.default.createElement(
+        /* @__PURE__ */ import_react200.default.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
+      ), isMwebHLSStream && !showChat && /* @__PURE__ */ import_react200.default.createElement(
         Flex,
         {
           css: {
@@ -32074,26 +32284,26 @@ var init_ConferenceScreen = __esm({
           justify: "end",
           gap: "1"
         },
-        noAVPermissions ? /* @__PURE__ */ import_react199.default.createElement(RaiseHand, null) : null,
-        /* @__PURE__ */ import_react199.default.createElement(MoreSettings, { elements: screenProps.elements, screenType: screenProps.screenType })
-      ), /* @__PURE__ */ import_react199.default.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ import_react199.default.createElement(HLSFailureModal, null), /* @__PURE__ */ import_react199.default.createElement(ActivatedPIP, null), /* @__PURE__ */ import_react199.default.createElement(PreviousRoleInMetadata, null)));
+        noAVPermissions ? /* @__PURE__ */ import_react200.default.createElement(RaiseHand, null) : null,
+        /* @__PURE__ */ import_react200.default.createElement(MoreSettings, { elements: screenProps.elements, screenType: screenProps.screenType })
+      ), /* @__PURE__ */ import_react200.default.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ import_react200.default.createElement(HLSFailureModal, null), /* @__PURE__ */ import_react200.default.createElement(ActivatedPIP, null), /* @__PURE__ */ import_react200.default.createElement(PreviousRoleInMetadata, null)));
     };
   }
 });
 
 // src/Prebuilt/components/ErrorBoundary.jsx
-var import_react200, import_react_icons94, ErrorBoundary;
+var import_react201, import_react_icons95, ErrorBoundary;
 var init_ErrorBoundary = __esm({
   "src/Prebuilt/components/ErrorBoundary.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react200 = __toESM(require("react"));
-    import_react_icons94 = require("@100mslive/react-icons");
+    import_react201 = __toESM(require("react"));
+    import_react_icons95 = require("@100mslive/react-icons");
     init_Button2();
     init_Layout();
     init_Text2();
     init_Tooltip2();
-    ErrorBoundary = class extends import_react200.Component {
+    ErrorBoundary = class extends import_react201.Component {
       constructor(props) {
         super(props);
         this.state = { error: null, errorInfo: null, isErrorCopied: false };
@@ -32107,7 +32317,7 @@ var init_ErrorBoundary = __esm({
       }
       render() {
         if (this.state.errorInfo) {
-          return /* @__PURE__ */ import_react200.default.createElement(
+          return /* @__PURE__ */ import_react201.default.createElement(
             Flex,
             {
               align: "center",
@@ -32120,7 +32330,7 @@ var init_ErrorBoundary = __esm({
                 backgroundColor: "$background_default"
               }
             },
-            /* @__PURE__ */ import_react200.default.createElement(Box, { css: { position: "relative", overflow: "hidden", r: "$3", height: "100%", width: "100%" } }, /* @__PURE__ */ import_react200.default.createElement(
+            /* @__PURE__ */ import_react201.default.createElement(Box, { css: { position: "relative", overflow: "hidden", r: "$3", height: "100%", width: "100%" } }, /* @__PURE__ */ import_react201.default.createElement(
               Flex,
               {
                 direction: "column",
@@ -32131,8 +32341,8 @@ var init_ErrorBoundary = __esm({
                   left: 0
                 }
               },
-              /* @__PURE__ */ import_react200.default.createElement("div", { style: { margin: "1.5rem", width: "100%" } }, /* @__PURE__ */ import_react200.default.createElement(Text, null, "Something went wrong"), /* @__PURE__ */ import_react200.default.createElement(Text, null, "Message: $", this.state.error), /* @__PURE__ */ import_react200.default.createElement("br", null), "Please reload to see if it works. If you think this is a mistake on our side, please reach out to us on", /* @__PURE__ */ import_react200.default.createElement("a", { href: "https://discord.com/invite/kGdmszyzq2", target: "_blank", rel: "noreferrer" }, "Discord")),
-              /* @__PURE__ */ import_react200.default.createElement(Flex, null, /* @__PURE__ */ import_react200.default.createElement(Tooltip, { title: "Reload page" }, /* @__PURE__ */ import_react200.default.createElement(
+              /* @__PURE__ */ import_react201.default.createElement("div", { style: { margin: "1.5rem", width: "100%" } }, /* @__PURE__ */ import_react201.default.createElement(Text, null, "Something went wrong"), /* @__PURE__ */ import_react201.default.createElement(Text, null, "Message: $", this.state.error), /* @__PURE__ */ import_react201.default.createElement("br", null), "Please reload to see if it works. If you think this is a mistake on our side, please reach out to us on", /* @__PURE__ */ import_react201.default.createElement("a", { href: "https://discord.com/invite/kGdmszyzq2", target: "_blank", rel: "noreferrer" }, "Discord")),
+              /* @__PURE__ */ import_react201.default.createElement(Flex, null, /* @__PURE__ */ import_react201.default.createElement(Tooltip, { title: "Reload page" }, /* @__PURE__ */ import_react201.default.createElement(
                 Button,
                 {
                   onClick: () => {
@@ -32142,7 +32352,7 @@ var init_ErrorBoundary = __esm({
                   "data-testid": "join_again_btn"
                 },
                 "Reload"
-              )), /* @__PURE__ */ import_react200.default.createElement(Tooltip, { title: "Copy error details to clipboard" }, /* @__PURE__ */ import_react200.default.createElement(
+              )), /* @__PURE__ */ import_react201.default.createElement(Tooltip, { title: "Copy error details to clipboard" }, /* @__PURE__ */ import_react201.default.createElement(
                 Button,
                 {
                   onClick: () => {
@@ -32158,11 +32368,11 @@ var init_ErrorBoundary = __esm({
                   css: { mx: "$8" },
                   "data-testid": "join_again_btn"
                 },
-                /* @__PURE__ */ import_react200.default.createElement(import_react_icons94.CopyIcon, null),
+                /* @__PURE__ */ import_react201.default.createElement(import_react_icons95.CopyIcon, null),
                 " ",
                 this.state.isErrorCopied ? "Copied" : "Copy Details"
               ))),
-              /* @__PURE__ */ import_react200.default.createElement("details", { style: { whiteSpace: "pre-wrap", margin: "1.5rem" } }, /* @__PURE__ */ import_react200.default.createElement(Text, null, this.state.error && this.state.error.toString()), /* @__PURE__ */ import_react200.default.createElement("br", null), /* @__PURE__ */ import_react200.default.createElement(Text, null, JSON.stringify(this.state.errorInfo)))
+              /* @__PURE__ */ import_react201.default.createElement("details", { style: { whiteSpace: "pre-wrap", margin: "1.5rem" } }, /* @__PURE__ */ import_react201.default.createElement(Text, null, this.state.error && this.state.error.toString()), /* @__PURE__ */ import_react201.default.createElement("br", null), /* @__PURE__ */ import_react201.default.createElement(Text, null, JSON.stringify(this.state.errorInfo)))
             ))
           );
         }
@@ -32175,19 +32385,19 @@ var init_ErrorBoundary = __esm({
 // src/Prebuilt/services/FeatureFlags.jsx
 function FeatureFlagsInit() {
   const roomId = (0, import_react_sdk103.useHMSStore)(import_react_sdk103.selectRoomID);
-  (0, import_react201.useEffect)(() => {
+  (0, import_react202.useEffect)(() => {
     if (roomId) {
       FeatureFlags.init(roomId);
     }
   }, [roomId]);
   return null;
 }
-var import_react201, import_react_sdk103, FeatureFlags;
+var import_react202, import_react_sdk103, FeatureFlags;
 var init_FeatureFlags = __esm({
   "src/Prebuilt/services/FeatureFlags.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react201 = require("react");
+    import_react202 = require("react");
     import_react_sdk103 = require("@100mslive/react-sdk");
     FeatureFlags = class {
       static init(roomId) {
@@ -32216,20 +32426,20 @@ var init_FeatureFlags = __esm({
 });
 
 // src/Prebuilt/components/init/Init.jsx
-var import_react202, Init;
+var import_react203, Init;
 var init_Init = __esm({
   "src/Prebuilt/components/init/Init.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react202 = __toESM(require("react"));
+    import_react203 = __toESM(require("react"));
     init_src();
     init_FeatureFlags();
     Init = () => {
       const { toggleTheme } = useTheme();
-      (0, import_react202.useEffect)(() => {
+      (0, import_react203.useEffect)(() => {
         window.toggleUiTheme = toggleTheme;
       }, [toggleTheme]);
-      (0, import_react202.useEffect)(() => {
+      (0, import_react203.useEffect)(() => {
         function resetHeight() {
           var _a8;
           document.body.style.height = `${((_a8 = window.visualViewport) == null ? void 0 : _a8.height) || window.innerHeight}px`;
@@ -32240,18 +32450,18 @@ var init_Init = __esm({
           window.removeEventListener("resize", resetHeight);
         };
       }, []);
-      return /* @__PURE__ */ import_react202.default.createElement(FeatureFlagsInit, null);
+      return /* @__PURE__ */ import_react203.default.createElement(FeatureFlagsInit, null);
     };
   }
 });
 
 // src/Prebuilt/components/Input/KeyboardInputManager.js
-var import_react203, import_react_sdk104, isEvenListenersAttached, _actions, _store, _toggleAudio, _toggleVideo, _hideSidepane, _toggleStatsForNerds, _toggleHlsStats, _keyDownHandler, _bind, _unbind, KeyboardInputManager, KeyboardHandler;
+var import_react204, import_react_sdk104, isEvenListenersAttached, _actions, _store, _toggleAudio, _toggleVideo, _hideSidepane, _toggleStatsForNerds, _toggleHlsStats, _keyDownHandler, _bind, _unbind, KeyboardInputManager, KeyboardHandler;
 var init_KeyboardInputManager = __esm({
   "src/Prebuilt/components/Input/KeyboardInputManager.js"() {
     "use strict";
     init_define_process_env();
-    import_react203 = require("react");
+    import_react204 = require("react");
     import_react_sdk104 = require("@100mslive/react-sdk");
     init_constants();
     isEvenListenersAttached = false;
@@ -32340,7 +32550,7 @@ var init_KeyboardInputManager = __esm({
     KeyboardHandler = () => {
       const store = (0, import_react_sdk104.useHMSVanillaStore)();
       const actions = (0, import_react_sdk104.useHMSActions)();
-      (0, import_react203.useEffect)(() => {
+      (0, import_react204.useEffect)(() => {
         const keyboardManager = new KeyboardInputManager(store, actions);
         keyboardManager.bindAllShortcuts();
         return keyboardManager.unbindAllShortcuts;
@@ -32351,18 +32561,18 @@ var init_KeyboardInputManager = __esm({
 });
 
 // src/Prebuilt/components/hooks/useRedirectToLeave.tsx
-var import_react204, useRedirectToLeave;
+var import_react205, useRedirectToLeave;
 var init_useRedirectToLeave = __esm({
   "src/Prebuilt/components/hooks/useRedirectToLeave.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react204 = require("react");
+    import_react205 = require("react");
     init_AppContext();
     init_PIPManager();
     init_ToastManager();
     useRedirectToLeave = () => {
       const { onLeave } = useHMSPrebuiltContext();
-      const redirect = (0, import_react204.useCallback)(
+      const redirect = (0, import_react205.useCallback)(
         (timeout = 0) => {
           setTimeout(() => {
             PictureInPicture.stop().catch(() => console.error("stopping pip"));
@@ -32378,26 +32588,26 @@ var init_useRedirectToLeave = __esm({
 });
 
 // src/Prebuilt/AppStateContext.tsx
-var import_react205, import_react_use45, import_react_sdk105, AppStateContext, useHMSAppStateContext, useAppStateManager;
+var import_react206, import_react_use47, import_react_sdk105, AppStateContext, useHMSAppStateContext, useAppStateManager;
 var init_AppStateContext = __esm({
   "src/Prebuilt/AppStateContext.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react205 = __toESM(require("react"));
-    import_react_use45 = require("react-use");
+    import_react206 = __toESM(require("react"));
+    import_react_use47 = require("react-use");
     import_react_sdk105 = require("@100mslive/react-sdk");
     init_VBHandler();
     init_roomLayoutProvider();
     init_useRedirectToLeave();
     init_useRoomLayoutScreen();
-    AppStateContext = import_react205.default.createContext({
+    AppStateContext = import_react206.default.createContext({
       rejoin: () => {
         console.log("Rejoin");
       }
     });
     AppStateContext.displayName = "AppStateContext";
     useHMSAppStateContext = () => {
-      const context = (0, import_react205.useContext)(AppStateContext);
+      const context = (0, import_react206.useContext)(AppStateContext);
       if (!context) {
         throw Error("Make sure AppStateContext.Provider is present at the top level of your application");
       }
@@ -32405,16 +32615,16 @@ var init_AppStateContext = __esm({
     };
     useAppStateManager = () => {
       const roomLayout = useRoomLayout();
-      const [activeState, setActiveState] = import_react205.default.useState();
+      const [activeState, setActiveState] = import_react206.default.useState();
       const roomState = (0, import_react_sdk105.useHMSStore)(import_react_sdk105.selectRoomState);
-      const prevRoomState = (0, import_react_use45.usePreviousDistinct)(roomState);
+      const prevRoomState = (0, import_react_use47.usePreviousDistinct)(roomState);
       const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
       const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
       const { redirectToLeave } = useRedirectToLeave();
       const rejoin = () => {
         setActiveState(isPreviewScreenEnabled ? "preview" /* PREVIEW */ : "meeting" /* MEETING */);
       };
-      (0, import_react205.useEffect)(() => {
+      (0, import_react206.useEffect)(() => {
         if (!roomLayout) {
           return;
         }
@@ -32435,13 +32645,13 @@ var init_AppStateContext = __esm({
 });
 
 // src/Prebuilt/components/LeaveScreen.tsx
-var import_react206, import_react_icons95, LeaveScreen;
+var import_react207, import_react_icons96, LeaveScreen;
 var init_LeaveScreen = __esm({
   "src/Prebuilt/components/LeaveScreen.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react206 = __toESM(require("react"));
-    import_react_icons95 = require("@100mslive/react-icons");
+    import_react207 = __toESM(require("react"));
+    import_react_icons96 = require("@100mslive/react-icons");
     init_ToastManager();
     init_Button2();
     init_Layout();
@@ -32453,7 +32663,7 @@ var init_LeaveScreen = __esm({
     LeaveScreen = () => {
       const { rejoin } = useHMSAppStateContext();
       const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
-      return /* @__PURE__ */ import_react206.default.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ import_react206.default.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ import_react206.default.createElement(Header2, null)), /* @__PURE__ */ import_react206.default.createElement(
+      return /* @__PURE__ */ import_react207.default.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ import_react207.default.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ import_react207.default.createElement(Header2, null)), /* @__PURE__ */ import_react207.default.createElement(
         Flex,
         {
           justify: "center",
@@ -32461,9 +32671,9 @@ var init_LeaveScreen = __esm({
           align: "center",
           css: { bg: "$background_dim", flex: "1 1 0", position: "relative" }
         },
-        /* @__PURE__ */ import_react206.default.createElement(Text, { variant: "h2", css: { fontWeight: "$semiBold" } }, "\u{1F44B}"),
-        /* @__PURE__ */ import_react206.default.createElement(Text, { variant: "h4", css: { color: "$on_surface_high", fontWeight: "$semiBold", mt: "$12" } }, "You left the room"),
-        /* @__PURE__ */ import_react206.default.createElement(
+        /* @__PURE__ */ import_react207.default.createElement(Text, { variant: "h2", css: { fontWeight: "$semiBold" } }, "\u{1F44B}"),
+        /* @__PURE__ */ import_react207.default.createElement(Text, { variant: "h4", css: { color: "$on_surface_high", fontWeight: "$semiBold", mt: "$12" } }, "You left the room"),
+        /* @__PURE__ */ import_react207.default.createElement(
           Text,
           {
             variant: "body1",
@@ -32475,10 +32685,10 @@ var init_LeaveScreen = __esm({
             }
           },
           "Have a nice day",
-          previewPreference.name && /* @__PURE__ */ import_react206.default.createElement(Box, { as: "span", css: __spreadValues({}, textEllipsis(100)) }, ", ", previewPreference.name),
+          previewPreference.name && /* @__PURE__ */ import_react207.default.createElement(Box, { as: "span", css: __spreadValues({}, textEllipsis(100)) }, ", ", previewPreference.name),
           "!"
         ),
-        /* @__PURE__ */ import_react206.default.createElement(Flex, { css: { mt: "$14", gap: "$10", alignItems: "center" } }, /* @__PURE__ */ import_react206.default.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium", fontWeight: "$regular" } }, "Left by mistake?"), /* @__PURE__ */ import_react206.default.createElement(
+        /* @__PURE__ */ import_react207.default.createElement(Flex, { css: { mt: "$14", gap: "$10", alignItems: "center" } }, /* @__PURE__ */ import_react207.default.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium", fontWeight: "$regular" } }, "Left by mistake?"), /* @__PURE__ */ import_react207.default.createElement(
           Button,
           {
             onClick: () => {
@@ -32487,8 +32697,8 @@ var init_LeaveScreen = __esm({
             },
             "data-testid": "join_again_btn"
           },
-          /* @__PURE__ */ import_react206.default.createElement(import_react_icons95.ExitIcon, null),
-          /* @__PURE__ */ import_react206.default.createElement(Text, { css: { ml: "$3", fontWeight: "$semiBold", color: "inherit" } }, "Rejoin")
+          /* @__PURE__ */ import_react207.default.createElement(import_react_icons96.ExitIcon, null),
+          /* @__PURE__ */ import_react207.default.createElement(Text, { css: { ml: "$3", fontWeight: "$semiBold", color: "inherit" } }, "Rejoin")
         ))
       ));
     };
@@ -32496,14 +32706,14 @@ var init_LeaveScreen = __esm({
 });
 
 // src/Prebuilt/components/MwebLandscapePrompt.tsx
-var import_react207, import_react_use46, import_react_icons96, MwebLandscapePrompt;
+var import_react208, import_react_use48, import_react_icons97, MwebLandscapePrompt;
 var init_MwebLandscapePrompt = __esm({
   "src/Prebuilt/components/MwebLandscapePrompt.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react207 = __toESM(require("react"));
-    import_react_use46 = require("react-use");
-    import_react_icons96 = require("@100mslive/react-icons");
+    import_react208 = __toESM(require("react"));
+    import_react_use48 = require("react-use");
+    import_react_icons97 = require("@100mslive/react-icons");
     init_Button2();
     init_Layout();
     init_Modal();
@@ -32512,10 +32722,10 @@ var init_MwebLandscapePrompt = __esm({
     init_hooks();
     init_utils2();
     MwebLandscapePrompt = () => {
-      const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = (0, import_react207.useState)(false);
-      const isLandscape = (0, import_react_use46.useMedia)(config.media.ls);
+      const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = (0, import_react208.useState)(false);
+      const isLandscape = (0, import_react_use48.useMedia)(config.media.ls);
       const isLandscapeHLSStream = useLandscapeHLSStream();
-      (0, import_react207.useEffect)(() => {
+      (0, import_react208.useEffect)(() => {
         var _a8;
         if (!isMobileUserAgent) {
           setShowMwebLandscapePrompt(false);
@@ -32539,7 +32749,7 @@ var init_MwebLandscapePrompt = __esm({
       if (isLandscapeHLSStream) {
         return null;
       }
-      return /* @__PURE__ */ import_react207.default.createElement(Dialog.Root, { open: showMwebLandscapePrompt, onOpenChange: setShowMwebLandscapePrompt }, /* @__PURE__ */ import_react207.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react207.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react207.default.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ import_react207.default.createElement(Box, null, /* @__PURE__ */ import_react207.default.createElement(
+      return /* @__PURE__ */ import_react208.default.createElement(Dialog.Root, { open: showMwebLandscapePrompt, onOpenChange: setShowMwebLandscapePrompt }, /* @__PURE__ */ import_react208.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react208.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react208.default.createElement(Dialog.Content, { css: { w: "min(420px, 90%)", p: "$8", bg: "$surface_dim" } }, /* @__PURE__ */ import_react208.default.createElement(Box, null, /* @__PURE__ */ import_react208.default.createElement(
         Flex,
         {
           css: {
@@ -32548,9 +32758,9 @@ var init_MwebLandscapePrompt = __esm({
             alignItems: "center"
           }
         },
-        /* @__PURE__ */ import_react207.default.createElement(import_react_icons96.RefreshIcon, { style: { marginRight: "0.5rem" } }),
-        /* @__PURE__ */ import_react207.default.createElement(Text, { variant: "lg", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, "Please rotate your device")
-      ), /* @__PURE__ */ import_react207.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mb: "$8", mt: "$4" } }, "We do not support landscape mode as of now, please use the app in portrait mode for the best experience."), /* @__PURE__ */ import_react207.default.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ import_react207.default.createElement(Button, { outlined: true, variant: "standard", css: { w: "100%" }, onClick: () => setShowMwebLandscapePrompt(false) }, "Continue anyway"))))));
+        /* @__PURE__ */ import_react208.default.createElement(import_react_icons97.RefreshIcon, { style: { marginRight: "0.5rem" } }),
+        /* @__PURE__ */ import_react208.default.createElement(Text, { variant: "lg", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, "Please rotate your device")
+      ), /* @__PURE__ */ import_react208.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mb: "$8", mt: "$4" } }, "We do not support landscape mode as of now, please use the app in portrait mode for the best experience."), /* @__PURE__ */ import_react208.default.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ import_react208.default.createElement(Button, { outlined: true, variant: "standard", css: { w: "100%" }, onClick: () => setShowMwebLandscapePrompt(false) }, "Continue anyway"))))));
     };
   }
 });
@@ -32558,7 +32768,7 @@ var init_MwebLandscapePrompt = __esm({
 // src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx
 function AutoplayBlockedModal() {
   const { error, resetError, unblockAudio } = (0, import_react_sdk106.useAutoplayError)();
-  return /* @__PURE__ */ import_react208.default.createElement(
+  return /* @__PURE__ */ import_react209.default.createElement(
     Dialog.Root,
     {
       open: !!error,
@@ -32569,7 +32779,7 @@ function AutoplayBlockedModal() {
         resetError();
       }
     },
-    /* @__PURE__ */ import_react208.default.createElement(DialogContent, { title: "Permission Error", closeable: false }, /* @__PURE__ */ import_react208.default.createElement(DialogRow, null, /* @__PURE__ */ import_react208.default.createElement(Text, { variant: "md" }, "The browser wants us to get a confirmation for playing the Audio. Please allow audio to proceed.")), /* @__PURE__ */ import_react208.default.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ import_react208.default.createElement(
+    /* @__PURE__ */ import_react209.default.createElement(DialogContent, { title: "Permission Error", closeable: false }, /* @__PURE__ */ import_react209.default.createElement(DialogRow, null, /* @__PURE__ */ import_react209.default.createElement(Text, { variant: "md" }, "The browser wants us to get a confirmation for playing the Audio. Please allow audio to proceed.")), /* @__PURE__ */ import_react209.default.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ import_react209.default.createElement(
       Button,
       {
         variant: "primary",
@@ -32582,12 +32792,12 @@ function AutoplayBlockedModal() {
     )))
   );
 }
-var import_react208, import_react_sdk106;
+var import_react209, import_react_sdk106;
 var init_AutoplayBlockedModal = __esm({
   "src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react208 = __toESM(require("react"));
+    import_react209 = __toESM(require("react"));
     import_react_sdk106 = require("@100mslive/react-sdk");
     init_src();
     init_DialogContent2();
@@ -32595,21 +32805,21 @@ var init_AutoplayBlockedModal = __esm({
 });
 
 // src/Prebuilt/components/Notifications/ChatNotifications.tsx
-var import_react209, import_uuid13, import_react_sdk107, import_react_icons97, NOTIFICATION_TIME_DIFFERENCE, ChatNotifications;
+var import_react210, import_uuid13, import_react_sdk107, import_react_icons98, NOTIFICATION_TIME_DIFFERENCE, ChatNotifications;
 var init_ChatNotifications = __esm({
   "src/Prebuilt/components/Notifications/ChatNotifications.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react209 = __toESM(require("react"));
+    import_react210 = __toESM(require("react"));
     import_uuid13 = require("uuid");
     import_react_sdk107 = require("@100mslive/react-sdk");
-    import_react_icons97 = require("@100mslive/react-icons");
+    import_react_icons98 = require("@100mslive/react-icons");
     init_ToastManager();
     NOTIFICATION_TIME_DIFFERENCE = 5e3;
     ChatNotifications = () => {
       const chatState = (0, import_react_sdk107.useHMSStore)((0, import_react_sdk107.selectSessionStore)("chatState" /* CHAT_STATE */));
       const localPeerId = (0, import_react_sdk107.useHMSStore)(import_react_sdk107.selectLocalPeerID);
-      (0, import_react209.useEffect)(() => {
+      (0, import_react210.useEffect)(() => {
         var _a8, _b7;
         if (!chatState || ((_a8 = chatState.updatedBy) == null ? void 0 : _a8.peerId) === localPeerId) {
           return;
@@ -32620,38 +32830,38 @@ var init_ChatNotifications = __esm({
         }
         const notification = {
           id: (0, import_uuid13.v4)(),
-          icon: chatState.enabled ? /* @__PURE__ */ import_react209.default.createElement(import_react_icons97.ChatUnreadIcon, null) : /* @__PURE__ */ import_react209.default.createElement(import_react_icons97.ChatIcon, null),
+          icon: chatState.enabled ? /* @__PURE__ */ import_react210.default.createElement(import_react_icons98.ChatUnreadIcon, null) : /* @__PURE__ */ import_react210.default.createElement(import_react_icons98.ChatIcon, null),
           title: `Chat ${chatState.enabled ? "resumed" : "paused"} by ${(_b7 = chatState.updatedBy) == null ? void 0 : _b7.userName}`
         };
         ToastManager.addToast(notification);
       }, [chatState, localPeerId]);
-      return /* @__PURE__ */ import_react209.default.createElement(import_react209.default.Fragment, null);
+      return /* @__PURE__ */ import_react210.default.createElement(import_react210.default.Fragment, null);
     };
   }
 });
 
 // src/Prebuilt/components/Toast/ToastConfig.jsx
-var import_react210, import_react_sdk108, import_react_icons98, ChatAction, HandRaiseAction, ToastConfig;
+var import_react211, import_react_sdk108, import_react_icons99, ChatAction, HandRaiseAction, ToastConfig;
 var init_ToastConfig = __esm({
   "src/Prebuilt/components/Toast/ToastConfig.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react210 = __toESM(require("react"));
+    import_react211 = __toESM(require("react"));
     import_react_sdk108 = require("@100mslive/react-sdk");
-    import_react_icons98 = require("@100mslive/react-icons");
+    import_react_icons99 = require("@100mslive/react-icons");
     init_Button2();
     init_roomLayoutProvider();
     init_useSidepane();
     init_constants();
-    ChatAction = import_react210.default.forwardRef((_, ref) => {
+    ChatAction = import_react211.default.forwardRef((_, ref) => {
       const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
       const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
       if (isChatOpen) {
         return null;
       }
-      return /* @__PURE__ */ import_react210.default.createElement(Button, { outlined: true, as: "div", variant: "standard", css: { w: "max-content" }, onClick: toggleChat, ref }, "Open Chat");
+      return /* @__PURE__ */ import_react211.default.createElement(Button, { outlined: true, as: "div", variant: "standard", css: { w: "max-content" }, onClick: toggleChat, ref }, "Open Chat");
     });
-    HandRaiseAction = import_react210.default.forwardRef(({ id = "", isSingleHandRaise = true }, ref) => {
+    HandRaiseAction = import_react211.default.forwardRef(({ id = "", isSingleHandRaise = true }, ref) => {
       var _a8, _b7, _c;
       const hmsActions = (0, import_react_sdk108.useHMSActions)();
       const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
@@ -32664,7 +32874,7 @@ var init_ToastConfig = __esm({
         off_stage_roles = [],
         skip_preview_for_role_change = false
       } = ((_c = (_b7 = (_a8 = layout == null ? void 0 : layout.screens) == null ? void 0 : _a8.conferencing) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements.on_stage_exp) || {};
-      const onClickHandler = (0, import_react210.useCallback)(() => __async(void 0, null, function* () {
+      const onClickHandler = (0, import_react211.useCallback)(() => __async(void 0, null, function* () {
         if (isSingleHandRaise) {
           hmsActions.changeRoleOfPeer(id, on_stage_role, skip_preview_for_role_change);
           if (skip_preview_for_role_change) {
@@ -32685,7 +32895,7 @@ var init_ToastConfig = __esm({
       if (isSingleHandRaise && (!peer || !off_stage_roles.includes(peer.roleName))) {
         return null;
       }
-      return /* @__PURE__ */ import_react210.default.createElement(Button, { outlined: true, as: "div", variant: "standard", css: { w: "max-content" }, onClick: onClickHandler, ref }, isSingleHandRaise ? bring_to_stage_label : "View");
+      return /* @__PURE__ */ import_react211.default.createElement(Button, { outlined: true, as: "div", variant: "standard", css: { w: "max-content" }, onClick: onClickHandler, ref }, isSingleHandRaise ? bring_to_stage_label : "View");
     });
     ToastConfig = {
       PEER_LIST: {
@@ -32694,18 +32904,18 @@ var init_ToastConfig = __esm({
           if (notification.data.length === 1) {
             return {
               title: `${(_a8 = notification.data[0]) == null ? void 0 : _a8.name} joined`,
-              icon: /* @__PURE__ */ import_react210.default.createElement(import_react_icons98.PeopleAddIcon, null)
+              icon: /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.PeopleAddIcon, null)
             };
           }
           return {
             title: `${(_b7 = notification.data[notification.data.length - 1]) == null ? void 0 : _b7.name} and ${notification.data.length - 1} others joined`,
-            icon: /* @__PURE__ */ import_react210.default.createElement(import_react_icons98.PeopleAddIcon, null)
+            icon: /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.PeopleAddIcon, null)
           };
         },
         multiple: (notifications) => {
           return {
             title: `${notifications[0].data.name} and ${notifications.length - 1} others joined`,
-            icon: /* @__PURE__ */ import_react210.default.createElement(import_react_icons98.PeopleAddIcon, null)
+            icon: /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.PeopleAddIcon, null)
           };
         }
       },
@@ -32714,13 +32924,13 @@ var init_ToastConfig = __esm({
           var _a8;
           return {
             title: `${(_a8 = notification.data) == null ? void 0 : _a8.name} joined`,
-            icon: /* @__PURE__ */ import_react210.default.createElement(import_react_icons98.PeopleAddIcon, null)
+            icon: /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.PeopleAddIcon, null)
           };
         },
         multiple: function(notifications) {
           return {
             title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others joined`,
-            icon: /* @__PURE__ */ import_react210.default.createElement(import_react_icons98.PeopleAddIcon, null)
+            icon: /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.PeopleAddIcon, null)
           };
         }
       },
@@ -32729,23 +32939,43 @@ var init_ToastConfig = __esm({
           var _a8;
           return {
             title: `${(_a8 = notification.data) == null ? void 0 : _a8.name} left`,
-            icon: /* @__PURE__ */ import_react210.default.createElement(import_react_icons98.PeopleRemoveIcon, null)
+            icon: /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.PeopleRemoveIcon, null)
           };
         },
         multiple: function(notifications) {
           return {
             title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others left`,
-            icon: /* @__PURE__ */ import_react210.default.createElement(import_react_icons98.PeopleRemoveIcon, null)
+            icon: /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.PeopleRemoveIcon, null)
           };
         }
       },
       RAISE_HAND: {
+        single: (notification) => {
+          var _a8;
+          return {
+            title: `${(_a8 = notification.data) == null ? void 0 : _a8.name} raised hand`,
+            icon: /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.HandIcon, null)
+          };
+        },
+        multiple: (notifications) => {
+          var _a8;
+          const count = new Set(notifications.map((notification) => {
+            var _a9;
+            return (_a9 = notification.data) == null ? void 0 : _a9.id;
+          })).size;
+          return {
+            title: `${(_a8 = notifications[notifications.length - 1].data) == null ? void 0 : _a8.name} ${count > 1 ? `${count} and others` : ""} raised hand`,
+            icon: /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.HandIcon, null)
+          };
+        }
+      },
+      RAISE_HAND_HLS: {
         single: (notification) => {
           var _a8, _b7;
           return {
             title: `${(_a8 = notification.data) == null ? void 0 : _a8.name} raised hand`,
-            icon: /* @__PURE__ */ import_react210.default.createElement(import_react_icons98.HandIcon, null),
-            action: /* @__PURE__ */ import_react210.default.createElement(HandRaiseAction, { id: (_b7 = notification.data) == null ? void 0 : _b7.id })
+            icon: /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.HandIcon, null),
+            action: /* @__PURE__ */ import_react211.default.createElement(HandRaiseAction, { id: (_b7 = notification.data) == null ? void 0 : _b7.id })
           };
         },
         multiple: (notifications) => {
@@ -32756,8 +32986,8 @@ var init_ToastConfig = __esm({
           })).size;
           return {
             title: `${(_a8 = notifications[notifications.length - 1].data) == null ? void 0 : _a8.name} ${count > 1 ? `${count} and others` : ""} raised hand`,
-            icon: /* @__PURE__ */ import_react210.default.createElement(import_react_icons98.HandIcon, null),
-            action: /* @__PURE__ */ import_react210.default.createElement(HandRaiseAction, { isSingleHandRaise: false })
+            icon: /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.HandIcon, null),
+            action: /* @__PURE__ */ import_react211.default.createElement(HandRaiseAction, { isSingleHandRaise: false })
           };
         }
       },
@@ -32766,15 +32996,15 @@ var init_ToastConfig = __esm({
           var _a8;
           return {
             title: `New message from ${(_a8 = notification.data) == null ? void 0 : _a8.senderName}`,
-            icon: /* @__PURE__ */ import_react210.default.createElement(import_react_icons98.ChatUnreadIcon, null),
-            action: /* @__PURE__ */ import_react210.default.createElement(ChatAction, null)
+            icon: /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.ChatUnreadIcon, null),
+            action: /* @__PURE__ */ import_react211.default.createElement(ChatAction, null)
           };
         },
         multiple: (notifications) => {
           return {
             title: `${notifications.length} new messages`,
-            icon: /* @__PURE__ */ import_react210.default.createElement(import_react_icons98.ChatUnreadIcon, null),
-            action: /* @__PURE__ */ import_react210.default.createElement(ChatAction, null)
+            icon: /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.ChatUnreadIcon, null),
+            action: /* @__PURE__ */ import_react211.default.createElement(ChatAction, null)
           };
         }
       },
@@ -32782,7 +33012,7 @@ var init_ToastConfig = __esm({
         single: () => {
           return {
             title: `You are now connected`,
-            icon: /* @__PURE__ */ import_react210.default.createElement(import_react_icons98.ConnectivityIcon, null),
+            icon: /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.ConnectivityIcon, null),
             variant: "success",
             duration: 3e3
           };
@@ -32794,7 +33024,7 @@ var init_ToastConfig = __esm({
             title: `You are offline for now. while we try to reconnect, please check
         your internet connection. ${message}.
       `,
-            icon: /* @__PURE__ */ import_react210.default.createElement(import_react_icons98.PoorConnectivityIcon, null),
+            icon: /* @__PURE__ */ import_react211.default.createElement(import_react_icons99.PoorConnectivityIcon, null),
             variant: "warning",
             duration: 3e4
           };
@@ -32814,6 +33044,7 @@ var init_ToastBatcher = __esm({
     init_ToastManager();
     ToastBatcher = {
       toastsType: /* @__PURE__ */ new Map(),
+      toastCache: {},
       showToastInternal({ notification, duration, type }) {
         let notificationType = type;
         if (!type) {
@@ -32849,7 +33080,13 @@ var init_ToastBatcher = __esm({
       },
       showToast({ notification, duration = 3e3, type }) {
         try {
-          this.showToastInternal({ notification, duration, type });
+          if (!this.toastCache[notification.id]) {
+            this.showToastInternal({ notification, duration, type });
+          }
+          this.toastCache[notification.id] = true;
+          if (Object.keys(this.toastCache).length > 100) {
+            this.toastCache = {};
+          }
         } catch (err) {
           console.debug("Notifications", err);
         }
@@ -32867,12 +33104,12 @@ var init_ToastBatcher = __esm({
 });
 
 // src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx
-var import_react211, import_react_sdk109, HandRaisedNotifications;
+var import_react212, import_react_sdk109, HandRaisedNotifications;
 var init_HandRaisedNotifications = __esm({
   "src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react211 = require("react");
+    import_react212 = require("react");
     import_react_sdk109 = require("@100mslive/react-sdk");
     init_ToastBatcher();
     init_useRoomLayoutScreen();
@@ -32884,16 +33121,16 @@ var init_HandRaisedNotifications = __esm({
       const vanillaStore = (0, import_react_sdk109.useHMSVanillaStore)();
       const { on_stage_exp } = useRoomLayoutConferencingScreen().elements || {};
       const isSubscribing = !!useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED);
-      (0, import_react211.useEffect)(() => {
+      (0, import_react212.useEffect)(() => {
         if (!(notification == null ? void 0 : notification.data)) {
           return;
         }
-        if (roomState !== import_react_sdk109.HMSRoomState.Connected || notification.data.isLocal || !on_stage_exp || !isSubscribing) {
+        if (roomState !== import_react_sdk109.HMSRoomState.Connected || notification.data.isLocal || !isSubscribing) {
           return;
         }
         const hasPeerHandRaised = vanillaStore.getState((0, import_react_sdk109.selectHasPeerHandRaised)(notification.data.id));
         if (hasPeerHandRaised) {
-          ToastBatcher.showToast({ notification, type: "RAISE_HAND" });
+          ToastBatcher.showToast({ notification, type: on_stage_exp ? "RAISE_HAND_HLS" : "RAISE_HAND" });
           console.debug("Metadata updated", notification.data);
         }
       }, [isSubscribing, notification, on_stage_exp, roomState, vanillaStore]);
@@ -32903,20 +33140,20 @@ var init_HandRaisedNotifications = __esm({
 });
 
 // src/Prebuilt/components/Notifications/InitErrorModal.tsx
-var import_react212, import_react_sdk110, InitErrorModal;
+var import_react213, import_react_sdk110, InitErrorModal;
 var init_InitErrorModal = __esm({
   "src/Prebuilt/components/Notifications/InitErrorModal.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react212 = __toESM(require("react"));
+    import_react213 = __toESM(require("react"));
     import_react_sdk110 = require("@100mslive/react-sdk");
     init_src();
     init_DialogContent2();
     InitErrorModal = () => {
       const notification = (0, import_react_sdk110.useHMSNotifications)(import_react_sdk110.HMSNotificationTypes.ERROR);
-      const [showModal, setShowModal] = (0, import_react212.useState)(false);
-      const [info, setInfo] = (0, import_react212.useState)({ title: "Init Error", description: "" });
-      (0, import_react212.useEffect)(() => {
+      const [showModal, setShowModal] = (0, import_react213.useState)(false);
+      const [info, setInfo] = (0, import_react213.useState)({ title: "Init Error", description: "" });
+      (0, import_react213.useEffect)(() => {
         const data3 = notification == null ? void 0 : notification.data;
         if (!data3 || data3.action !== "INIT") {
           return;
@@ -32936,18 +33173,18 @@ var init_InitErrorModal = __esm({
         setInfo({ title, description });
         setShowModal(true);
       }, [notification]);
-      return /* @__PURE__ */ import_react212.default.createElement(ErrorDialog, { open: showModal, onOpenChange: setShowModal, title: info.title }, /* @__PURE__ */ import_react212.default.createElement(Text, { variant: "sm", css: { wordBreak: "break-word" } }, info.description, " ", /* @__PURE__ */ import_react212.default.createElement("br", null), "Current URL - ", window.location.href));
+      return /* @__PURE__ */ import_react213.default.createElement(ErrorDialog, { open: showModal, onOpenChange: setShowModal, title: info.title }, /* @__PURE__ */ import_react213.default.createElement(Text, { variant: "sm", css: { wordBreak: "break-word" } }, info.description, " ", /* @__PURE__ */ import_react213.default.createElement("br", null), "Current URL - ", window.location.href));
     };
   }
 });
 
 // src/Prebuilt/components/Notifications/PeerNotifications.tsx
-var import_react213, import_react_sdk111, notificationTypes, PeerNotifications;
+var import_react214, import_react_sdk111, notificationTypes, PeerNotifications;
 var init_PeerNotifications = __esm({
   "src/Prebuilt/components/Notifications/PeerNotifications.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react213 = require("react");
+    import_react214 = require("react");
     import_react_sdk111 = require("@100mslive/react-sdk");
     init_ToastBatcher();
     init_useUISettings();
@@ -32962,7 +33199,7 @@ var init_PeerNotifications = __esm({
       const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
       const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);
       const [selectedPeer, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
-      (0, import_react213.useEffect)(() => {
+      (0, import_react214.useEffect)(() => {
         if (!(notification == null ? void 0 : notification.data)) {
           return;
         }
@@ -32990,7 +33227,7 @@ var init_PeerNotifications = __esm({
             return;
         }
         ToastBatcher.showToast({ notification });
-      }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed]);
+      }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed, selectedPeer.id, setPeerSelector]);
       return null;
     };
   }
@@ -33015,10 +33252,10 @@ var init_ios_perm_0 = __esm({
 // src/Prebuilt/components/Notifications/PermissionErrorModal.tsx
 function PermissionErrorModal() {
   const notification = (0, import_react_sdk112.useHMSNotifications)(import_react_sdk112.HMSNotificationTypes.ERROR);
-  const [deviceType, setDeviceType] = (0, import_react214.useState)("");
-  const [isSystemError, setIsSystemError] = (0, import_react214.useState)(false);
-  const isMobile = (0, import_react_use47.useMedia)(config.media.md);
-  (0, import_react214.useEffect)(() => {
+  const [deviceType, setDeviceType] = (0, import_react215.useState)("");
+  const [isSystemError, setIsSystemError] = (0, import_react215.useState)(false);
+  const isMobile = (0, import_react_use49.useMedia)(config.media.md);
+  (0, import_react215.useEffect)(() => {
     var _a8, _b7, _c, _d, _e;
     if (!notification || ((_a8 = notification.data) == null ? void 0 : _a8.code) !== 3001 && ((_b7 = notification.data) == null ? void 0 : _b7.code) !== 3011 || ((_c = notification.data) == null ? void 0 : _c.code) === 3001 && ((_d = notification.data) == null ? void 0 : _d.message.includes("screen"))) {
       return;
@@ -33039,7 +33276,7 @@ function PermissionErrorModal() {
     }
     setIsSystemError(notification.data.code === 3011);
   }, [notification]);
-  return deviceType ? /* @__PURE__ */ import_react214.default.createElement(Dialog.Root, { open: !!deviceType }, /* @__PURE__ */ import_react214.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react214.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react214.default.createElement(
+  return deviceType ? /* @__PURE__ */ import_react215.default.createElement(Dialog.Root, { open: !!deviceType }, /* @__PURE__ */ import_react215.default.createElement(Dialog.Portal, null, /* @__PURE__ */ import_react215.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react215.default.createElement(
     Dialog.Content,
     {
       css: {
@@ -33049,15 +33286,15 @@ function PermissionErrorModal() {
         zIndex: 23
       }
     },
-    /* @__PURE__ */ import_react214.default.createElement(
+    /* @__PURE__ */ import_react215.default.createElement(
       Dialog.Title,
       {
         css: {
           borderBottom: "1px solid $border_default"
         }
       },
-      isMobile && isIOS ? /* @__PURE__ */ import_react214.default.createElement("img", { style: { maxWidth: "100%", maxHeight: "100%" }, src: ios_perm_0_default, alt: "iOS Permission flow" }) : null,
-      isMobile && isAndroid ? /* @__PURE__ */ import_react214.default.createElement(
+      isMobile && isIOS ? /* @__PURE__ */ import_react215.default.createElement("img", { style: { maxWidth: "100%", maxHeight: "100%" }, src: ios_perm_0_default, alt: "iOS Permission flow" }) : null,
+      isMobile && isAndroid ? /* @__PURE__ */ import_react215.default.createElement(
         "img",
         {
           src: android_perm_1_default,
@@ -33065,21 +33302,21 @@ function PermissionErrorModal() {
           alt: "Android Permission flow "
         }
       ) : null,
-      /* @__PURE__ */ import_react214.default.createElement(Text, { variant: "h6" }, "We can't access your ", deviceType)
+      /* @__PURE__ */ import_react215.default.createElement(Text, { variant: "h6" }, "We can't access your ", deviceType)
     ),
-    /* @__PURE__ */ import_react214.default.createElement(Text, { variant: "sm", css: { pt: "$4", pb: "$10", color: "$on_surface_medium" } }, isMobile && isIOS ? 'Enable permissions by reloading this page and clicking "Allow" on the pop-up, or change settings from the address bar.' : null, isMobile && isAndroid ? `To allow other users to see and hear you, click the blocked camera icon in your browser's address bar.` : null, !isMobile ? `Access to ${deviceType} is required. ` : null, isSystemError && !isMobile ? `Enable permissions for ${deviceType}${deviceType === "screen" ? "share" : ""} from sytem settings` : null, !isSystemError && !isMobile ? `Enable permissions for ${deviceType}${deviceType === "screen" ? "share" : ""} from address bar or browser settings.` : null),
-    isMobile && isIOS ? /* @__PURE__ */ import_react214.default.createElement(import_react214.default.Fragment, null, /* @__PURE__ */ import_react214.default.createElement(Button, { onClick: () => window.location.reload(), css: { w: "100%", mb: "$6" } }, "Reload"), /* @__PURE__ */ import_react214.default.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType(""), css: { w: "100%" } }, "Continue anyway")) : null,
-    isMobile && isAndroid ? /* @__PURE__ */ import_react214.default.createElement(import_react214.default.Fragment, null, /* @__PURE__ */ import_react214.default.createElement(Button, { onClick: () => setDeviceType(""), css: { w: "100%", mb: "$6" } }, "I've allowed access"), /* @__PURE__ */ import_react214.default.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType(""), css: { w: "100%" } }, "Continue anyway")) : null,
-    !isMobile ? /* @__PURE__ */ import_react214.default.createElement(Flex, { justify: "end", css: { w: "100%" } }, /* @__PURE__ */ import_react214.default.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType("") }, "Dismiss")) : null
+    /* @__PURE__ */ import_react215.default.createElement(Text, { variant: "sm", css: { pt: "$4", pb: "$10", color: "$on_surface_medium" } }, isMobile && isIOS ? 'Enable permissions by reloading this page and clicking "Allow" on the pop-up, or change settings from the address bar.' : null, isMobile && isAndroid ? `To allow other users to see and hear you, click the blocked camera icon in your browser's address bar.` : null, !isMobile ? `Access to ${deviceType} is required. ` : null, isSystemError && !isMobile ? `Enable permissions for ${deviceType}${deviceType === "screen" ? "share" : ""} from sytem settings` : null, !isSystemError && !isMobile ? `Enable permissions for ${deviceType}${deviceType === "screen" ? "share" : ""} from address bar or browser settings.` : null),
+    isMobile && isIOS ? /* @__PURE__ */ import_react215.default.createElement(import_react215.default.Fragment, null, /* @__PURE__ */ import_react215.default.createElement(Button, { onClick: () => window.location.reload(), css: { w: "100%", mb: "$6" } }, "Reload"), /* @__PURE__ */ import_react215.default.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType(""), css: { w: "100%" } }, "Continue anyway")) : null,
+    isMobile && isAndroid ? /* @__PURE__ */ import_react215.default.createElement(import_react215.default.Fragment, null, /* @__PURE__ */ import_react215.default.createElement(Button, { onClick: () => setDeviceType(""), css: { w: "100%", mb: "$6" } }, "I've allowed access"), /* @__PURE__ */ import_react215.default.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType(""), css: { w: "100%" } }, "Continue anyway")) : null,
+    !isMobile ? /* @__PURE__ */ import_react215.default.createElement(Flex, { justify: "end", css: { w: "100%" } }, /* @__PURE__ */ import_react215.default.createElement(Button, { outlined: true, variant: "standard", onClick: () => setDeviceType("") }, "Dismiss")) : null
   ))) : null;
 }
-var import_react214, import_react_use47, import_react_sdk112;
+var import_react215, import_react_use49, import_react_sdk112;
 var init_PermissionErrorModal = __esm({
   "src/Prebuilt/components/Notifications/PermissionErrorModal.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react214 = __toESM(require("react"));
-    import_react_use47 = require("react-use");
+    import_react215 = __toESM(require("react"));
+    import_react_use49 = require("react-use");
     import_react_sdk112 = require("@100mslive/react-sdk");
     init_src();
     init_android_perm_1();
@@ -33089,12 +33326,12 @@ var init_PermissionErrorModal = __esm({
 });
 
 // src/Prebuilt/components/Notifications/ReconnectNotifications.tsx
-var import_react215, import_react_sdk113, notificationTypes2, notificationId, ReconnectNotifications;
+var import_react216, import_react_sdk113, notificationTypes2, notificationId, ReconnectNotifications;
 var init_ReconnectNotifications = __esm({
   "src/Prebuilt/components/Notifications/ReconnectNotifications.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react215 = __toESM(require("react"));
+    import_react216 = __toESM(require("react"));
     import_react_sdk113 = require("@100mslive/react-sdk");
     init_src();
     init_ToastConfig();
@@ -33107,8 +33344,8 @@ var init_ReconnectNotifications = __esm({
     notificationId = null;
     ReconnectNotifications = () => {
       const notification = (0, import_react_sdk113.useHMSNotifications)(notificationTypes2);
-      const [open, setOpen] = (0, import_react215.useState)(false);
-      (0, import_react215.useEffect)(() => {
+      const [open, setOpen] = (0, import_react216.useState)(false);
+      (0, import_react216.useEffect)(() => {
         var _a8, _b7;
         if (!notification) {
           return;
@@ -33127,7 +33364,7 @@ var init_ReconnectNotifications = __esm({
       }, [notification]);
       if (!open)
         return null;
-      return /* @__PURE__ */ import_react215.default.createElement(Dialog.Root, { open, modal: true }, /* @__PURE__ */ import_react215.default.createElement(Dialog.Portal, { container: document.getElementById("conferencing") }, /* @__PURE__ */ import_react215.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react215.default.createElement(
+      return /* @__PURE__ */ import_react216.default.createElement(Dialog.Root, { open, modal: true }, /* @__PURE__ */ import_react216.default.createElement(Dialog.Portal, { container: document.getElementById("conferencing") }, /* @__PURE__ */ import_react216.default.createElement(Dialog.Overlay, null), /* @__PURE__ */ import_react216.default.createElement(
         Dialog.Content,
         {
           css: {
@@ -33141,31 +33378,31 @@ var init_ReconnectNotifications = __esm({
             animation: "none !important"
           }
         },
-        /* @__PURE__ */ import_react215.default.createElement(Flex, { align: "center" }, /* @__PURE__ */ import_react215.default.createElement("div", { style: { display: "inline", margin: "0.25rem" } }, /* @__PURE__ */ import_react215.default.createElement(Loading, { size: 16 })), /* @__PURE__ */ import_react215.default.createElement(Text, { css: { fontSize: "$space$8", color: "$on_surface_high" } }, "You lost your network connection. Trying to reconnect."))
+        /* @__PURE__ */ import_react216.default.createElement(Flex, { align: "center" }, /* @__PURE__ */ import_react216.default.createElement("div", { style: { display: "inline", margin: "0.25rem" } }, /* @__PURE__ */ import_react216.default.createElement(Loading, { size: 16 })), /* @__PURE__ */ import_react216.default.createElement(Text, { css: { fontSize: "$space$8", color: "$on_surface_high" } }, "You lost your network connection. Trying to reconnect."))
       )));
     };
   }
 });
 
 // src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx
-var import_react216, import_react_sdk114, import_react_icons99, TrackBulkUnmuteModal;
+var import_react217, import_react_sdk114, import_react_icons100, TrackBulkUnmuteModal;
 var init_TrackBulkUnmuteModal = __esm({
   "src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react216 = __toESM(require("react"));
+    import_react217 = __toESM(require("react"));
     import_react_sdk114 = require("@100mslive/react-sdk");
-    import_react_icons99 = require("@100mslive/react-icons");
+    import_react_icons100 = require("@100mslive/react-icons");
     init_DialogContent2();
     TrackBulkUnmuteModal = () => {
       const hmsActions = (0, import_react_sdk114.useHMSActions)();
-      const [muteNotification, setMuteNotification] = (0, import_react216.useState)(null);
+      const [muteNotification, setMuteNotification] = (0, import_react217.useState)(null);
       const notification = (0, import_react_sdk114.useHMSNotifications)([
         import_react_sdk114.HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST,
         import_react_sdk114.HMSNotificationTypes.ROOM_ENDED,
         import_react_sdk114.HMSNotificationTypes.REMOVED_FROM_ROOM
       ]);
-      (0, import_react216.useEffect)(() => {
+      (0, import_react217.useEffect)(() => {
         switch (notification == null ? void 0 : notification.type) {
           case import_react_sdk114.HMSNotificationTypes.REMOVED_FROM_ROOM:
           case import_react_sdk114.HMSNotificationTypes.ROOM_ENDED:
@@ -33185,7 +33422,7 @@ var init_TrackBulkUnmuteModal = __esm({
       }
       const { requestedBy: peer, tracks, enabled } = muteNotification;
       const types = new Set(tracks.map((track) => track.type));
-      return /* @__PURE__ */ import_react216.default.createElement(
+      return /* @__PURE__ */ import_react217.default.createElement(
         RequestDialog,
         {
           title: "Unmute request",
@@ -33197,7 +33434,7 @@ var init_TrackBulkUnmuteModal = __esm({
             });
             setMuteNotification(null);
           },
-          Icon: import_react_icons99.MicOnIcon
+          Icon: import_react_icons100.MicOnIcon
         }
       );
     };
@@ -33205,12 +33442,12 @@ var init_TrackBulkUnmuteModal = __esm({
 });
 
 // src/Prebuilt/components/Notifications/TrackNotifications.tsx
-var import_react217, import_react_sdk115, notificationTypes3, TrackNotifications;
+var import_react218, import_react_sdk115, notificationTypes3, TrackNotifications;
 var init_TrackNotifications = __esm({
   "src/Prebuilt/components/Notifications/TrackNotifications.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react217 = require("react");
+    import_react218 = require("react");
     import_react_sdk115 = require("@100mslive/react-sdk");
     notificationTypes3 = [
       import_react_sdk115.HMSNotificationTypes.TRACK_ADDED,
@@ -33220,7 +33457,7 @@ var init_TrackNotifications = __esm({
     ];
     TrackNotifications = () => {
       const notification = (0, import_react_sdk115.useHMSNotifications)(notificationTypes3);
-      (0, import_react217.useEffect)(() => {
+      (0, import_react218.useEffect)(() => {
         if (notification) {
           console.debug(`[${notification.type}]`, notification);
         }
@@ -33231,14 +33468,14 @@ var init_TrackNotifications = __esm({
 });
 
 // src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx
-var import_react218, import_react_sdk116, import_react_icons100, TrackUnmuteModal;
+var import_react219, import_react_sdk116, import_react_icons101, TrackUnmuteModal;
 var init_TrackUnmuteModal = __esm({
   "src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react218 = __toESM(require("react"));
+    import_react219 = __toESM(require("react"));
     import_react_sdk116 = require("@100mslive/react-sdk");
-    import_react_icons100 = require("@100mslive/react-icons");
+    import_react_icons101 = require("@100mslive/react-icons");
     init_DialogContent2();
     TrackUnmuteModal = () => {
       const hmsActions = (0, import_react_sdk116.useHMSActions)();
@@ -33247,8 +33484,8 @@ var init_TrackUnmuteModal = __esm({
         import_react_sdk116.HMSNotificationTypes.ROOM_ENDED,
         import_react_sdk116.HMSNotificationTypes.REMOVED_FROM_ROOM
       ]);
-      const [muteNotification, setMuteNotification] = (0, import_react218.useState)(null);
-      (0, import_react218.useEffect)(() => {
+      const [muteNotification, setMuteNotification] = (0, import_react219.useState)(null);
+      (0, import_react219.useEffect)(() => {
         switch (notification == null ? void 0 : notification.type) {
           case import_react_sdk116.HMSNotificationTypes.REMOVED_FROM_ROOM:
           case import_react_sdk116.HMSNotificationTypes.ROOM_ENDED:
@@ -33267,7 +33504,7 @@ var init_TrackUnmuteModal = __esm({
         return null;
       }
       const { requestedBy: peer, track, enabled } = muteNotification;
-      return /* @__PURE__ */ import_react218.default.createElement(
+      return /* @__PURE__ */ import_react219.default.createElement(
         RequestDialog,
         {
           title: `Unmute your ${track.type}?`,
@@ -33277,7 +33514,7 @@ var init_TrackUnmuteModal = __esm({
             hmsActions.setEnabledTrack(track.id, enabled);
             setMuteNotification(null);
           },
-          Icon: import_react_icons100.MicOnIcon
+          Icon: import_react_icons101.MicOnIcon
         }
       );
     };
@@ -33299,14 +33536,14 @@ function Notifications() {
   const { showNotification } = (0, import_react_sdk117.useAwayNotifications)();
   const amIScreenSharing = (0, import_react_sdk117.useHMSStore)(import_react_sdk117.selectIsLocalScreenShared);
   const logoURL = (_b7 = (_a8 = useRoomLayout()) == null ? void 0 : _a8.logo) == null ? void 0 : _b7.url;
-  const handleRoleChangeDenied = (0, import_react219.useCallback)((request) => {
+  const handleRoleChangeDenied = (0, import_react220.useCallback)((request) => {
     ToastManager.addToast({
       title: `${request.peerName} denied your request to join the ${request.role.name} role`,
       variant: "error"
     });
   }, []);
   (0, import_react_sdk117.useCustomEvent)({ type: ROLE_CHANGE_DECLINED, onEvent: handleRoleChangeDenied });
-  (0, import_react219.useEffect)(() => {
+  (0, import_react220.useEffect)(() => {
     var _a9, _b8, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n2, _o2, _p;
     if (!notification || isNotificationDisabled) {
       return;
@@ -33325,7 +33562,7 @@ function Notifications() {
             ToastManager.addToast({
               title: "The room is currently full, try joining later",
               close: true,
-              icon: /* @__PURE__ */ import_react219.default.createElement(Box, { css: { color: "$alert_error_default" } }, /* @__PURE__ */ import_react219.default.createElement(import_react_icons101.GroupIcon, null))
+              icon: /* @__PURE__ */ import_react220.default.createElement(Box, { css: { color: "$alert_error_default" } }, /* @__PURE__ */ import_react220.default.createElement(import_react_icons102.GroupIcon, null))
             });
           } else {
             ToastManager.addToast({
@@ -33382,7 +33619,7 @@ function Notifications() {
           const pollStartedBy = vanillaStore.getState((0, import_react_sdk117.selectPeerNameByID)(notification.data.startedBy)) || "Participant";
           const pollToastID = ToastManager.addToast({
             title: `${pollStartedBy} started a ${notification.data.type}: ${notification.data.title}`,
-            action: /* @__PURE__ */ import_react219.default.createElement(
+            action: /* @__PURE__ */ import_react220.default.createElement(
               Button,
               {
                 onClick: () => togglePollView(notification.data.id),
@@ -33423,16 +33660,16 @@ function Notifications() {
   if (isNotificationDisabled) {
     return null;
   }
-  return /* @__PURE__ */ import_react219.default.createElement(import_react219.default.Fragment, null, /* @__PURE__ */ import_react219.default.createElement(TrackUnmuteModal, null), /* @__PURE__ */ import_react219.default.createElement(TrackBulkUnmuteModal, null), /* @__PURE__ */ import_react219.default.createElement(TrackNotifications, null), roomState === import_react_sdk117.HMSRoomState.Connected ? /* @__PURE__ */ import_react219.default.createElement(PeerNotifications, null) : null, /* @__PURE__ */ import_react219.default.createElement(ReconnectNotifications, null), /* @__PURE__ */ import_react219.default.createElement(AutoplayBlockedModal, null), /* @__PURE__ */ import_react219.default.createElement(PermissionErrorModal, null), /* @__PURE__ */ import_react219.default.createElement(InitErrorModal, null), /* @__PURE__ */ import_react219.default.createElement(ChatNotifications, null), /* @__PURE__ */ import_react219.default.createElement(HandRaisedNotifications, null));
+  return /* @__PURE__ */ import_react220.default.createElement(import_react220.default.Fragment, null, /* @__PURE__ */ import_react220.default.createElement(TrackUnmuteModal, null), /* @__PURE__ */ import_react220.default.createElement(TrackBulkUnmuteModal, null), /* @__PURE__ */ import_react220.default.createElement(TrackNotifications, null), roomState === import_react_sdk117.HMSRoomState.Connected ? /* @__PURE__ */ import_react220.default.createElement(PeerNotifications, null) : null, /* @__PURE__ */ import_react220.default.createElement(ReconnectNotifications, null), /* @__PURE__ */ import_react220.default.createElement(AutoplayBlockedModal, null), /* @__PURE__ */ import_react220.default.createElement(PermissionErrorModal, null), /* @__PURE__ */ import_react220.default.createElement(InitErrorModal, null), /* @__PURE__ */ import_react220.default.createElement(ChatNotifications, null), /* @__PURE__ */ import_react220.default.createElement(HandRaisedNotifications, null));
 }
-var import_react219, import_react_sdk117, import_react_icons101, pollToastKey;
+var import_react220, import_react_sdk117, import_react_icons102, pollToastKey;
 var init_Notifications = __esm({
   "src/Prebuilt/components/Notifications/Notifications.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react219 = __toESM(require("react"));
+    import_react220 = __toESM(require("react"));
     import_react_sdk117 = require("@100mslive/react-sdk");
-    import_react_icons101 = require("@100mslive/react-icons");
+    import_react_icons102 = require("@100mslive/react-icons");
     init_src();
     init_roomLayoutProvider();
     init_ToastManager();
@@ -33464,13 +33701,13 @@ var init_Notifications2 = __esm({
 });
 
 // src/Prebuilt/components/Preview/PreviewScreen.tsx
-var import_react220, import_react_use48, PreviewScreen;
+var import_react221, import_react_use50, PreviewScreen;
 var init_PreviewScreen = __esm({
   "src/Prebuilt/components/Preview/PreviewScreen.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react220 = __toESM(require("react"));
-    import_react_use48 = require("react-use");
+    import_react221 = __toESM(require("react"));
+    import_react_use50 = require("react-use");
     init_src();
     init_AppContext();
     init_roomLayoutProvider();
@@ -33483,36 +33720,36 @@ var init_PreviewScreen = __esm({
       var _a8, _b7, _c;
       const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
       const skipPreview = !isPreviewScreenEnabled;
-      const previewAsRole = (0, import_react_use48.useSearchParam)(QUERY_PARAM_PREVIEW_AS_ROLE);
+      const previewAsRole = (0, import_react_use50.useSearchParam)(QUERY_PARAM_PREVIEW_AS_ROLE);
       const { userName } = useHMSPrebuiltContext();
       const initialName = userName || (skipPreview ? "Beam" : "");
       const authToken = useAuthToken();
       const roomLayout = useRoomLayout();
       const { preview_header: previewHeader = {} } = ((_c = (_b7 = (_a8 = roomLayout == null ? void 0 : roomLayout.screens) == null ? void 0 : _a8.preview) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements) || {};
-      return /* @__PURE__ */ import_react220.default.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ import_react220.default.createElement(
+      return /* @__PURE__ */ import_react221.default.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ import_react221.default.createElement(
         Flex,
         {
           css: { flex: "1 1 0", position: "relative", overflowY: "auto", color: "$primary_default" },
           justify: "center",
           align: "center"
         },
-        authToken && Object.keys(previewHeader).length > 0 ? /* @__PURE__ */ import_react220.default.createElement(PreviewJoin_default, { initialName, skipPreview, asRole: previewAsRole != null ? previewAsRole : void 0 }) : /* @__PURE__ */ import_react220.default.createElement(FullPageProgress_default, null)
+        authToken && Object.keys(previewHeader).length > 0 ? /* @__PURE__ */ import_react221.default.createElement(PreviewJoin_default, { initialName, skipPreview, asRole: previewAsRole != null ? previewAsRole : void 0 }) : /* @__PURE__ */ import_react221.default.createElement(FullPageProgress_default, null)
       ));
     };
   }
 });
 
 // src/Prebuilt/components/Toast/Toast.jsx
-var import_react221, Toast2;
+var import_react222, Toast2;
 var init_Toast3 = __esm({
   "src/Prebuilt/components/Toast/Toast.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react221 = __toESM(require("react"));
+    import_react222 = __toESM(require("react"));
     init_Toast2();
     Toast2 = (_a8) => {
       var _b7 = _a8, { title, description, close = true, open, duration, onOpenChange, icon } = _b7, props = __objRest(_b7, ["title", "description", "close", "open", "duration", "onOpenChange", "icon"]);
-      return /* @__PURE__ */ import_react221.default.createElement(
+      return /* @__PURE__ */ import_react222.default.createElement(
         Toast.HMSToast,
         __spreadValues({
           title,
@@ -33529,12 +33766,12 @@ var init_Toast3 = __esm({
 });
 
 // src/Prebuilt/components/Toast/ToastContainer.jsx
-var import_react222, import_react_sdk118, ToastContainer;
+var import_react223, import_react_sdk118, ToastContainer;
 var init_ToastContainer = __esm({
   "src/Prebuilt/components/Toast/ToastContainer.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react222 = __toESM(require("react"));
+    import_react223 = __toESM(require("react"));
     import_react_sdk118 = require("@100mslive/react-sdk");
     init_Toast2();
     init_Toast3();
@@ -33542,16 +33779,16 @@ var init_ToastContainer = __esm({
     init_constants();
     ToastContainer = () => {
       const isConnected = (0, import_react_sdk118.useHMSStore)(import_react_sdk118.selectIsConnectedToRoom);
-      const [toasts, setToast] = (0, import_react222.useState)([]);
-      (0, import_react222.useEffect)(() => {
+      const [toasts, setToast] = (0, import_react223.useState)([]);
+      (0, import_react223.useEffect)(() => {
         ToastManager.addListener(setToast);
         return () => {
           ToastManager.removeListener(setToast);
         };
       }, []);
-      return /* @__PURE__ */ import_react222.default.createElement(Toast.Provider, { swipeDirection: "left", duration: 3e3 }, toasts.slice(0, MAX_TOASTS).map((toast) => {
-        return /* @__PURE__ */ import_react222.default.createElement(Toast2, __spreadProps(__spreadValues({ key: toast.id }, toast), { onOpenChange: (value) => !value && ToastManager.removeToast(toast.id) }));
-      }), /* @__PURE__ */ import_react222.default.createElement(
+      return /* @__PURE__ */ import_react223.default.createElement(Toast.Provider, { swipeDirection: "left", duration: 3e3 }, toasts.slice(0, MAX_TOASTS).map((toast) => {
+        return /* @__PURE__ */ import_react223.default.createElement(Toast2, __spreadProps(__spreadValues({ key: toast.id }, toast), { onOpenChange: (value) => !value && ToastManager.removeToast(toast.id) }));
+      }), /* @__PURE__ */ import_react223.default.createElement(
         Toast.Viewport,
         {
           css: __spreadValues({
@@ -33564,13 +33801,13 @@ var init_ToastContainer = __esm({
 });
 
 // src/Prebuilt/components/RoomDetails/RoomDetailsSheet.tsx
-var import_react223, import_react_icons102, RoomDetailsSheet;
+var import_react224, import_react_icons103, RoomDetailsSheet;
 var init_RoomDetailsSheet = __esm({
   "src/Prebuilt/components/RoomDetails/RoomDetailsSheet.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react223 = __toESM(require("react"));
-    import_react_icons102 = require("@100mslive/react-icons");
+    import_react224 = __toESM(require("react"));
+    import_react_icons103 = require("@100mslive/react-icons");
     init_Layout();
     init_Sheet2();
     init_Text2();
@@ -33583,27 +33820,27 @@ var init_RoomDetailsSheet = __esm({
       const { title, description, details } = useRoomLayoutHeader();
       const toggleSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
       const showRoomDetailsSheet = useIsSheetTypeOpen(SHEET_OPTIONS.ROOM_DETAILS);
-      return /* @__PURE__ */ import_react223.default.createElement(Sheet.Root, { open: showRoomDetailsSheet, onOpenChange: toggleSheet }, /* @__PURE__ */ import_react223.default.createElement(Sheet.Content, { css: { py: "$8", pb: "$12" } }, /* @__PURE__ */ import_react223.default.createElement(
+      return /* @__PURE__ */ import_react224.default.createElement(Sheet.Root, { open: showRoomDetailsSheet, onOpenChange: toggleSheet }, /* @__PURE__ */ import_react224.default.createElement(Sheet.Content, { css: { py: "$8", pb: "$12" } }, /* @__PURE__ */ import_react224.default.createElement(
         Flex,
         {
           justify: "between",
           align: "center",
           css: { w: "100%", borderBottom: "1px solid $border_bright", pb: "$4", mb: "$4", px: "$8" }
         },
-        /* @__PURE__ */ import_react223.default.createElement(Text, { css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, "Description"),
-        /* @__PURE__ */ import_react223.default.createElement(Sheet.Close, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ import_react223.default.createElement(import_react_icons102.CrossIcon, null))
-      ), /* @__PURE__ */ import_react223.default.createElement(Flex, { align: "center", css: { w: "100%", gap: "$4", pb: "$8", px: "$8" } }, /* @__PURE__ */ import_react223.default.createElement(Logo, null), /* @__PURE__ */ import_react223.default.createElement(Box, null, /* @__PURE__ */ import_react223.default.createElement(Text, { variant: "sm", css: { c: "$on_secondary_high", fontWeight: "$semiBold" } }, title), /* @__PURE__ */ import_react223.default.createElement(RoomDetailsRow, { details }))), /* @__PURE__ */ import_react223.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", px: "$8" } }, description)));
+        /* @__PURE__ */ import_react224.default.createElement(Text, { css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, "Description"),
+        /* @__PURE__ */ import_react224.default.createElement(Sheet.Close, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ import_react224.default.createElement(import_react_icons103.CrossIcon, null))
+      ), /* @__PURE__ */ import_react224.default.createElement(Flex, { align: "center", css: { w: "100%", gap: "$4", pb: "$8", px: "$8" } }, /* @__PURE__ */ import_react224.default.createElement(Logo, null), /* @__PURE__ */ import_react224.default.createElement(Box, null, /* @__PURE__ */ import_react224.default.createElement(Text, { variant: "sm", css: { c: "$on_secondary_high", fontWeight: "$semiBold" } }, title), /* @__PURE__ */ import_react224.default.createElement(RoomDetailsRow, { details }))), /* @__PURE__ */ import_react224.default.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", px: "$8" } }, description)));
     };
   }
 });
 
 // src/Prebuilt/layouts/Sheet.tsx
-var import_react224, import_react_sdk119, Sheet2;
+var import_react225, import_react_sdk119, Sheet2;
 var init_Sheet3 = __esm({
   "src/Prebuilt/layouts/Sheet.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react224 = __toESM(require("react"));
+    import_react225 = __toESM(require("react"));
     import_react_sdk119 = require("@100mslive/react-sdk");
     init_RoomDetailsSheet();
     init_Layout();
@@ -33612,9 +33849,9 @@ var init_Sheet3 = __esm({
       const sheet = (0, import_react_sdk119.useHMSStore)((0, import_react_sdk119.selectAppData)(APP_DATA.sheet));
       let ViewComponent;
       if (sheet === SHEET_OPTIONS.ROOM_DETAILS) {
-        ViewComponent = /* @__PURE__ */ import_react224.default.createElement(RoomDetailsSheet, null);
+        ViewComponent = /* @__PURE__ */ import_react225.default.createElement(RoomDetailsSheet, null);
       }
-      return /* @__PURE__ */ import_react224.default.createElement(Box, null, ViewComponent);
+      return /* @__PURE__ */ import_react225.default.createElement(Box, null, ViewComponent);
     };
   }
 });
@@ -33623,10 +33860,10 @@ var init_Sheet3 = __esm({
 function FlyingEmoji() {
   const localPeerId = (0, import_react_sdk120.useHMSStore)(import_react_sdk120.selectLocalPeerID);
   const vanillaStore = (0, import_react_sdk120.useHMSVanillaStore)();
-  const [emojis, setEmojis] = (0, import_react225.useState)([]);
-  const isMobile = (0, import_react_use49.useMedia)(config.media.md);
-  const startingPoints = (0, import_react225.useMemo)(() => getStartingPoints(isMobile), [isMobile]);
-  const showFlyingEmoji = (0, import_react225.useCallback)(
+  const [emojis, setEmojis] = (0, import_react226.useState)([]);
+  const isMobile = (0, import_react_use51.useMedia)(config.media.md);
+  const startingPoints = (0, import_react226.useMemo)(() => getStartingPoints(isMobile), [isMobile]);
+  const showFlyingEmoji = (0, import_react226.useCallback)(
     ({ emojiId, senderId }) => {
       if (!emojiId || !senderId || document.hidden) {
         return;
@@ -33654,10 +33891,10 @@ function FlyingEmoji() {
     type: EMOJI_REACTION_TYPE,
     onEvent: showFlyingEmoji
   });
-  (0, import_react225.useEffect)(() => {
+  (0, import_react226.useEffect)(() => {
     window.showFlyingEmoji = showFlyingEmoji;
   }, [showFlyingEmoji]);
-  return /* @__PURE__ */ import_react225.default.createElement(
+  return /* @__PURE__ */ import_react226.default.createElement(
     Box,
     {
       css: {
@@ -33673,7 +33910,7 @@ function FlyingEmoji() {
       }
     },
     emojis.map((emoji) => {
-      return /* @__PURE__ */ import_react225.default.createElement(
+      return /* @__PURE__ */ import_react226.default.createElement(
         Flex,
         {
           key: emoji.id,
@@ -33689,8 +33926,8 @@ function FlyingEmoji() {
             setEmojis(emojis.filter((item) => item.id !== emoji.id));
           }
         },
-        /* @__PURE__ */ import_react225.default.createElement(Box, null, /* @__PURE__ */ import_react225.default.createElement("em-emoji", { id: emoji.emojiId, size: "48px", set: "apple" })),
-        /* @__PURE__ */ import_react225.default.createElement(
+        /* @__PURE__ */ import_react226.default.createElement(Box, null, /* @__PURE__ */ import_react226.default.createElement("em-emoji", { id: emoji.emojiId, size: "48px", set: "apple" })),
+        /* @__PURE__ */ import_react226.default.createElement(
           Box,
           {
             css: {
@@ -33700,7 +33937,7 @@ function FlyingEmoji() {
               borderRadius: "$1"
             }
           },
-          /* @__PURE__ */ import_react225.default.createElement(
+          /* @__PURE__ */ import_react226.default.createElement(
             Text,
             {
               css: {
@@ -33716,13 +33953,13 @@ function FlyingEmoji() {
     })
   );
 }
-var import_react225, import_react_use49, import_react_sdk120, emojiCount, flyAndFade, wiggleLeftRight, wiggleRightLeft, getStartingPoints;
+var import_react226, import_react_use51, import_react_sdk120, emojiCount, flyAndFade, wiggleLeftRight, wiggleRightLeft, getStartingPoints;
 var init_FlyingEmoji = __esm({
   "src/Prebuilt/plugins/FlyingEmoji.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react225 = __toESM(require("react"));
-    import_react_use49 = require("react-use");
+    import_react226 = __toESM(require("react"));
+    import_react_use51 = require("react-use");
     import_react_sdk120 = require("@100mslive/react-sdk");
     init_Layout();
     init_Text2();
@@ -33757,33 +33994,33 @@ var init_FlyingEmoji = __esm({
 // src/Prebuilt/plugins/RemoteStopScreenshare.jsx
 function RemoteStopScreenshare() {
   const actions = (0, import_react_sdk121.useHMSActions)();
-  const onRemoteStopScreenshare = (0, import_react226.useCallback)(() => __async(this, null, function* () {
+  const onRemoteStopScreenshare = (0, import_react227.useCallback)(() => __async(this, null, function* () {
     yield actions.setScreenShareEnabled(false);
   }), [actions]);
   (0, import_react_sdk121.useCustomEvent)({
     type: REMOTE_STOP_SCREENSHARE_TYPE,
     onEvent: onRemoteStopScreenshare
   });
-  return /* @__PURE__ */ import_react226.default.createElement(import_react226.default.Fragment, null);
+  return /* @__PURE__ */ import_react227.default.createElement(import_react227.default.Fragment, null);
 }
-var import_react226, import_react_sdk121;
+var import_react227, import_react_sdk121;
 var init_RemoteStopScreenshare = __esm({
   "src/Prebuilt/plugins/RemoteStopScreenshare.jsx"() {
     "use strict";
     init_define_process_env();
-    import_react226 = __toESM(require("react"));
+    import_react227 = __toESM(require("react"));
     import_react_sdk121 = require("@100mslive/react-sdk");
     init_constants();
   }
 });
 
 // src/Prebuilt/components/hooks/useAutoStartStreaming.tsx
-var import_react227, import_react_sdk122, useAutoStartStreaming;
+var import_react228, import_react_sdk122, useAutoStartStreaming;
 var init_useAutoStartStreaming = __esm({
   "src/Prebuilt/components/hooks/useAutoStartStreaming.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react227 = require("react");
+    import_react228 = require("react");
     import_react_sdk122 = require("@100mslive/react-sdk");
     init_useUISettings();
     init_hooks();
@@ -33795,8 +34032,8 @@ var init_useAutoStartStreaming = __esm({
       const hmsActions = (0, import_react_sdk122.useHMSActions)();
       const isConnected = (0, import_react_sdk122.useHMSStore)(import_react_sdk122.selectIsConnectedToRoom);
       const { isHLSRunning, isRTMPRunning, isHLSRecordingOn, isBrowserRecordingOn } = (0, import_react_sdk122.useRecordingStreaming)();
-      const streamStartedRef = (0, import_react227.useRef)(false);
-      const startHLS = (0, import_react227.useCallback)(() => __async(void 0, null, function* () {
+      const streamStartedRef = (0, import_react228.useRef)(false);
+      const startHLS = (0, import_react228.useCallback)(() => __async(void 0, null, function* () {
         try {
           if (isHLSStarted || !showStreamingUI || isHLSRunning || isRTMPRunning || isHLSRecordingOn || isBrowserRecordingOn) {
             return;
@@ -33819,12 +34056,12 @@ var init_useAutoStartStreaming = __esm({
         isHLSRecordingOn,
         isBrowserRecordingOn
       ]);
-      (0, import_react227.useEffect)(() => {
+      (0, import_react228.useEffect)(() => {
         if (!isHLSStarted && !isHLSRunning) {
           streamStartedRef.current = false;
         }
       }, [isHLSStarted, isHLSRunning]);
-      (0, import_react227.useEffect)(() => {
+      (0, import_react228.useEffect)(() => {
         if (!isConnected || streamStartedRef.current || !(permissions == null ? void 0 : permissions.hlsStreaming)) {
           return;
         }
@@ -33842,14 +34079,14 @@ function AppRoutes({
   const roomLayout = useRoomLayout();
   const isNotificationsDisabled = useIsNotificationDisabled();
   const { activeState, rejoin } = useAppStateManager();
-  return /* @__PURE__ */ import_react228.default.createElement(AppStateContext.Provider, { value: { rejoin } }, /* @__PURE__ */ import_react228.default.createElement(import_react228.default.Fragment, null, activeState !== "leave" /* LEAVE */ && /* @__PURE__ */ import_react228.default.createElement(AppData, null), /* @__PURE__ */ import_react228.default.createElement(ToastContainer, null), /* @__PURE__ */ import_react228.default.createElement(Notifications, null), /* @__PURE__ */ import_react228.default.createElement(MwebLandscapePrompt, null), /* @__PURE__ */ import_react228.default.createElement(Sheet2, null), /* @__PURE__ */ import_react228.default.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ import_react228.default.createElement(FlyingEmoji, null), /* @__PURE__ */ import_react228.default.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ import_react228.default.createElement(KeyboardHandler, null), /* @__PURE__ */ import_react228.default.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && activeState && /* @__PURE__ */ import_react228.default.createElement(AppStates, { activeState })));
+  return /* @__PURE__ */ import_react229.default.createElement(AppStateContext.Provider, { value: { rejoin } }, /* @__PURE__ */ import_react229.default.createElement(import_react229.default.Fragment, null, activeState !== "leave" /* LEAVE */ && /* @__PURE__ */ import_react229.default.createElement(AppData, null), /* @__PURE__ */ import_react229.default.createElement(ToastContainer, null), /* @__PURE__ */ import_react229.default.createElement(Notifications, null), /* @__PURE__ */ import_react229.default.createElement(MwebLandscapePrompt, null), /* @__PURE__ */ import_react229.default.createElement(Sheet2, null), /* @__PURE__ */ import_react229.default.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ import_react229.default.createElement(FlyingEmoji, null), /* @__PURE__ */ import_react229.default.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ import_react229.default.createElement(KeyboardHandler, null), /* @__PURE__ */ import_react229.default.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && activeState && /* @__PURE__ */ import_react229.default.createElement(AppStates, { activeState })));
 }
-var import_react228, import_react_sdk123, HMSPrebuilt, AppStates, BackSwipe;
+var import_react229, import_react_sdk123, HMSPrebuilt, AppStates, BackSwipe;
 var init_App = __esm({
   "src/Prebuilt/App.tsx"() {
     "use strict";
     init_define_process_env();
-    import_react228 = __toESM(require("react"));
+    import_react229 = __toESM(require("react"));
     import_react_sdk123 = require("@100mslive/react-sdk");
     init_AppData();
     init_AuthToken();
@@ -33877,7 +34114,7 @@ var init_App = __esm({
     init_useRoomLayoutScreen();
     init_FeatureFlags();
     init_constants();
-    HMSPrebuilt = import_react228.default.forwardRef(
+    HMSPrebuilt = import_react229.default.forwardRef(
       ({
         roomCode = "",
         authToken = "",
@@ -33891,9 +34128,9 @@ var init_App = __esm({
         onJoin
       }, ref) => {
         var _a8, _b7, _c, _d;
-        const reactiveStore = (0, import_react228.useRef)();
-        const [hydrated, setHydrated] = import_react228.default.useState(false);
-        (0, import_react228.useEffect)(() => {
+        const reactiveStore = (0, import_react229.useRef)();
+        const [hydrated, setHydrated] = import_react229.default.useState(false);
+        (0, import_react229.useEffect)(() => {
           setHydrated(true);
           const hms = new import_react_sdk123.HMSReactiveStore();
           const hmsStore = hms.getStore();
@@ -33908,13 +34145,13 @@ var init_App = __esm({
             hmsNotifications
           };
         }, []);
-        (0, import_react228.useEffect)(() => {
+        (0, import_react229.useEffect)(() => {
           if (!ref || !reactiveStore.current) {
             return;
           }
           ref.current = __spreadValues({}, reactiveStore.current);
         }, [ref]);
-        (0, import_react228.useEffect)(() => {
+        (0, import_react229.useEffect)(() => {
           return () => {
             var _a9;
             VBHandler.reset();
@@ -33943,7 +34180,7 @@ var init_App = __esm({
           return null;
         }
         globalStyles();
-        return /* @__PURE__ */ import_react228.default.createElement(ErrorBoundary, null, /* @__PURE__ */ import_react228.default.createElement(
+        return /* @__PURE__ */ import_react229.default.createElement(ErrorBoundary, null, /* @__PURE__ */ import_react229.default.createElement(
           HMSPrebuiltContext.Provider,
           {
             value: {
@@ -33960,7 +34197,7 @@ var init_App = __esm({
               }
             }
           },
-          /* @__PURE__ */ import_react228.default.createElement(
+          /* @__PURE__ */ import_react229.default.createElement(
             import_react_sdk123.HMSRoomProvider,
             {
               isHMSStatsOn: FeatureFlags.enableStatsForNerds,
@@ -33969,7 +34206,7 @@ var init_App = __esm({
               notifications: (_c = reactiveStore.current) == null ? void 0 : _c.hmsNotifications,
               stats: (_d = reactiveStore.current) == null ? void 0 : _d.hmsStats
             },
-            /* @__PURE__ */ import_react228.default.createElement(RoomLayoutProvider, { roomLayoutEndpoint, overrideLayout }, /* @__PURE__ */ import_react228.default.createElement(RoomLayoutContext.Consumer, null, (data3) => {
+            /* @__PURE__ */ import_react229.default.createElement(RoomLayoutProvider, { roomLayoutEndpoint, overrideLayout }, /* @__PURE__ */ import_react229.default.createElement(RoomLayoutContext.Consumer, null, (data3) => {
               var _a9;
               const layout = data3 == null ? void 0 : data3.layout;
               const theme2 = ((_a9 = layout == null ? void 0 : layout.themes) == null ? void 0 : _a9[0]) || {};
@@ -33978,7 +34215,7 @@ var init_App = __esm({
               if (typography2 == null ? void 0 : typography2.font_family) {
                 fontFamily = [`${typography2 == null ? void 0 : typography2.font_family}`, ...fontFamily];
               }
-              return /* @__PURE__ */ import_react228.default.createElement(
+              return /* @__PURE__ */ import_react229.default.createElement(
                 HMSThemeProvider,
                 {
                   themeType: `${theme2.name}-${Date.now()}`,
@@ -33991,8 +34228,8 @@ var init_App = __esm({
                     }
                   }
                 },
-                /* @__PURE__ */ import_react228.default.createElement(Init, null),
-                /* @__PURE__ */ import_react228.default.createElement(DialogContainerProvider, { dialogContainerSelector: containerSelector }, /* @__PURE__ */ import_react228.default.createElement(
+                /* @__PURE__ */ import_react229.default.createElement(Init, null),
+                /* @__PURE__ */ import_react229.default.createElement(DialogContainerProvider, { dialogContainerSelector: containerSelector }, /* @__PURE__ */ import_react229.default.createElement(
                   Box,
                   {
                     className: DEFAULT_PORTAL_CONTAINER.slice(1),
@@ -34004,7 +34241,7 @@ var init_App = __esm({
                       position: "relative"
                     }
                   },
-                  /* @__PURE__ */ import_react228.default.createElement(
+                  /* @__PURE__ */ import_react229.default.createElement(
                     AppRoutes,
                     {
                       authTokenByRoomCodeEndpoint: tokenByRoomCodeEndpoint,
@@ -34024,16 +34261,16 @@ var init_App = __esm({
       const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
       useAutoStartStreaming();
       if (activeState === "preview" /* PREVIEW */ && isPreviewScreenEnabled) {
-        return /* @__PURE__ */ import_react228.default.createElement(PreviewScreen, null);
+        return /* @__PURE__ */ import_react229.default.createElement(PreviewScreen, null);
       } else if (activeState === "leave" /* LEAVE */ && isLeaveScreenEnabled) {
-        return /* @__PURE__ */ import_react228.default.createElement(LeaveScreen, null);
+        return /* @__PURE__ */ import_react229.default.createElement(LeaveScreen, null);
       }
-      return /* @__PURE__ */ import_react228.default.createElement(ConferenceScreen, null);
+      return /* @__PURE__ */ import_react229.default.createElement(ConferenceScreen, null);
     };
     BackSwipe = () => {
       const isConnectedToRoom = (0, import_react_sdk123.useHMSStore)(import_react_sdk123.selectIsConnectedToRoom);
       const hmsActions = (0, import_react_sdk123.useHMSActions)();
-      (0, import_react228.useEffect)(() => {
+      (0, import_react229.useEffect)(() => {
         const onRouteLeave = () => __async(void 0, null, function* () {
           if (isConnectedToRoom) {
             yield hmsActions.leave();