@100mslive/roomkit-react 0.3.8-alpha.2 → 0.3.8-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{HLSView-XZDT3RRC.js → HLSView-KESSHZG2.js} +2 -2
- package/dist/{chunk-SQPIZNW2.js → chunk-KRTJ2T7F.js} +277 -272
- package/dist/{chunk-SQPIZNW2.js.map → chunk-KRTJ2T7F.js.map} +4 -4
- package/dist/index.cjs.js +521 -513
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.js +1 -1
- package/dist/meta.cjs.json +93 -78
- package/dist/meta.esbuild.json +98 -83
- package/package.json +6 -6
- package/src/Prebuilt/components/AppData/AppData.tsx +2 -1
- package/src/Prebuilt/components/ConferenceScreen.tsx +2 -34
- package/src/Prebuilt/layouts/VideoStreamingSection.tsx +3 -1
- package/src/Prebuilt/plugins/CaptionsViewer.tsx +46 -11
- /package/dist/{HLSView-XZDT3RRC.js.map → HLSView-KESSHZG2.js.map} +0 -0
package/dist/index.cjs.js
CHANGED
|
@@ -108,7 +108,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
108
108
|
var define_process_env_default;
|
|
109
109
|
var init_define_process_env = __esm({
|
|
110
110
|
"<define:process.env>"() {
|
|
111
|
-
define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_18af0324-8864-474f-b9dc-4ef9d10cae3f", npm_package_devDependencies_ts_node: "^10.4.0", npm_package_devDependencies__types_node: "^16.11.17", npm_package_devDependencies_rollup: "^2.70.1", npm_package_exports___require: "./dist/index.cjs.js", STATS_TRP: "true", DEPLOYMENT_BASEPATH: "/opt/runner", DOTNET_NOLOGO: "1", npm_package_dependencies_screenfull: "^5.1.0", npm_package_dependencies_react_draggable: "^4.4.5", npm_package_dependencies__radix_ui_react_switch: "1.0.0", USER: "runner", npm_package_devDependencies_jest: "26.6.0", npm_config_version_commit_hooks: "true", npm_config_user_agent: "yarn/1.22.22 npm/? node/v18.20.2 linux x64", npm_config_always_auth: "", NX_WORKSPACE_ROOT: "/home/runner/work/web-sdks/web-sdks", npm_package_devDependencies__rollup_plugin_node_resolve: "^13.1.3", npm_package_scripts_babel: "npx storybook@latest babelrc", CI: "true", npm_package_devDependencies__size_limit_file: "^5.0.3", npm_config_bin_links: "true", npm_config_wrap_output: "", npm_package_dependencies__radix_ui_react_tabs: "1.0.0", npm_package_dependencies__100mslive_react_sdk: "0.10.8-alpha.2", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_18af0324-8864-474f-b9dc-4ef9d10cae3f", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.20.2/x64/bin/node", npm_config_init_version: "1.0.0", npm_package_dependencies__emoji_mart_react: "^1.0.1", npm_package_dependencies__emoji_mart_data: "^1.0.6", npm_package_dependencies__100mslive_hms_virtual_background: "1.13.8-alpha.2", JAVA_HOME_8_X64: "/usr/lib/jvm/temurin-8-jdk-amd64", NODE_AUTH_TOKEN: "XXXXX-XXXXX-XXXXX-XXXXX", SHLVL: "1", npm_package_dependencies__radix_ui_react_tooltip: "1.0.6", npm_package_dependencies__radix_ui_react_popover: "1.0.6", npm_package_dependencies__100mslive_types_prebuilt: "0.12.8", npm_package_peerDependencies_react: ">=17.0.2 <19.0.0", npm_package_devDependencies__storybook_addon_links: "^7.0.27", npm_package_files_0: "dist", HOME: "/home/runner", npm_package_devDependencies__typescript_eslint_parser: "^5.4.0", npm_package_dependencies__radix_ui_react_dialog: "1.0.4", npm_package_devDependencies__types_react_window: "^1.8.5", npm_package_files_1: "src", npm_package_repository_directory: "packages/roomkit-react", RUNNER_TEMP: "/home/runner/work/_temp", GITHUB_EVENT_PATH: "/home/runner/work/_temp/_github_workflow/event.json", npm_package_scripts_controller: "cd packages/hls-controller && yarn start", npm_package_dependencies__stitches_react: "^1.2.8", JAVA_HOME_11_X64: "/usr/lib/jvm/temurin-11-jdk-amd64", PIPX_BIN_DIR: "/opt/pipx_bin", GITHUB_REPOSITORY_OWNER: "100mslive", npm_package_engines_node: ">=16", npm_package_devDependencies_typedoc_plugin_markdown: "^3.14.0", npm_config_init_license: "MIT", GRADLE_HOME: "/usr/share/gradle-8.7", ANDROID_NDK_LATEST_HOME: "/usr/local/lib/android/sdk/ndk/26.3.11579264", JAVA_HOME_21_X64: "/usr/lib/jvm/temurin-21-jdk-amd64", STATS_RDCL: "true", GITHUB_RETENTION_DAYS: "90", YARN_WRAP_OUTPUT: "false", npm_config_version_tag_prefix: "v", GITHUB_REPOSITORY_OWNER_ID: "73883131", POWERSHELL_DISTRIBUTION_CHANNEL: "GitHub-Actions-ubuntu22", AZURE_EXTENSION_DIR: "/opt/az/azcliextensions", GITHUB_HEAD_REF: "", npm_package_scripts_lint_fix: "yarn lint --fix", npm_config_userconfig: "/home/runner/work/_temp/.npmrc", npm_package_devDependencies__storybook_addon_a11y: "^7.0.27", SYSTEMD_EXEC_PID: "593", npm_package_scripts_postinstall: "husky install && lerna bootstrap", npm_package_devDependencies_husky: "^6.0.0", npm_package_dependencies_recordrtc: "^5.6.2", npm_package_dependencies_eventemitter2: "^6.4.9", npm_package_dependencies__radix_ui_react_label: "1.0.0", npm_package_dependencies__radix_ui_react_dropdown_menu: "2.0.5", npm_package_keywords_0: "100mslive", GITHUB_GRAPHQL_URL: "https://api.github.com/graphql", npm_package_description: "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.", npm_package_devDependencies_typescript: "~4.7.4", npm_package_devDependencies_typedoc: "^0.24.8", npm_package_devDependencies_babel_loader: "^8.2.5", npm_package_devDependencies__rollup_plugin_image: "^3.0.2", npm_package_keywords_1: "react", GOROOT_1_20_X64: "/opt/hostedtoolcache/go/1.20.14/x64", NVM_DIR: "/home/runner/.nvm", npm_package_readmeFilename: "README.md", npm_package_devDependencies_react: "^18.1.0", npm_package_devDependencies__babel_preset_env: "^7.22.5", npm_package_keywords_2: "prebuilt", DOTNET_SKIP_FIRST_TIME_EXPERIENCE: "1", GOROOT_1_21_X64: "/opt/hostedtoolcache/go/1.21.9/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240414.1.0", npm_package_devDependencies_prettier: "^2.4.1", npm_package_devDependencies_babel_jest: "^26.6.0", npm_package_scripts_dev: "node ../../scripts/dev", npm_package_keywords_3: "roomkit", RUNNER_OS: "Linux", GITHUB_API_URL: "https://api.github.com", GOROOT_1_22_X64: "/opt/hostedtoolcache/go/1.22.2/x64", SWIFT_PATH: "/usr/share/swift/usr/bin", FORCE_COLOR: "true", npm_package_dependencies__radix_ui_react_toast: "1.0.0", npm_package_dependencies__radix_ui_react_radio_group: "1.0.0", npm_package_dependencies__100mslive_hms_noise_cancellation: "0.0.1", npm_package_devDependencies__babel_preset_typescript: "^7.22.5", npm_package_exports___default: "./dist/index.js", RUNNER_USER: "runner", STATS_V3PS: "true", CHROMEWEBDRIVER: "/usr/local/share/chromedriver-linux64", JOURNAL_STREAM: "8:17297", GITHUB_WORKFLOW: "Publish Packages", _: "/usr/local/bin/yarn", npm_package_devDependencies_ts_jest: "26.5.6", npm_package_devDependencies_lerna: "^5.6.2", npm_package_devDependencies__types_jest: "^27.0.3", npm_package_devDependencies__commitlint_config_conventional: "^15.0.0", npm_package_private: "true", npm_package_dependencies__radix_ui_react_accordion: "1.0.0", npm_package_devDependencies__rollup_plugin_commonjs: "^21.0.3", npm_package_devDependencies__babel_preset_react: "^7.22.5", npm_package_module: "dist/index.js", npm_package_scripts_lint: "eslint -c .eslintrc --no-error-on-unmatched-pattern src --ext .js --ext .jsx --ext .ts --ext .tsx", npm_package_devDependencies__typescript_eslint_eslint_plugin: "^5.4.0", npm_config_registry: "https://registry.yarnpkg.com", npm_package_dependencies_react_window: "^1.8.7", npm_package_dependencies__100mslive_hls_player: "0.3.8-alpha.2", npm_package_devDependencies__types_lodash_merge: "^4.6.6", npm_package_devDependencies__storybook_cli: "^7.0.27", npm_package_devDependencies__rollup_plugin_json: "^6.0.0", ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: "/opt/actionarchivecache", STATS_D: "false", GITHUB_RUN_ID: "8733614318", STATS_VMFE: "true", npm_package_workspaces_0: "packages/*", npm_package_scripts_store: "cd packages/hms-video-store && yarn start", npm_package_devDependencies__babel_core: "^7.18.2", npm_package_dependencies_ts_pattern: "4.3.0", npm_package_devDependencies__storybook_addon_interactions: "^7.0.27", npm_package_devDependencies__storybook_addon_actions: "^7.0.27", GITHUB_REF_TYPE: "branch", BOOTSTRAP_HASKELL_NONINTERACTIVE: "1", GITHUB_WORKFLOW_SHA: "43ee35cc85faabb5a827f7f41a5affebffcfca18", 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: "95df9f0c033bc7c59bd2fa8d3691f90bf1be75979b078bed08630f864f94cf44", 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--1713423059436-0.3850776627007606:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1713423059245-0.29214208114594054:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1713423037053-0.4791034998563062:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1713423036876-0.027893925476550452:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin:/snap/bin:/home/runner/.local/bin:/opt/pipx_bin:/home/runner/.cargo/bin:/home/runner/.config/composer/vendor/bin:/usr/local/.ghcup/bin:/home/runner/.dotnet/tools:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin", NODE: "/opt/hostedtoolcache/node/18.20.2/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_9dc605a9-58f7-40de-96a3-569be9ef0a3b", INVOCATION_ID: "e6e8fab8c8224f6aa21b42c148af9743", 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: "517", 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 271", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "publish-alpha", GITHUB_REPOSITORY: "100mslive/web-sdks", STATS_D_D: "false", npm_lifecycle_script: "rm -rf dist && node ../../scripts/build-webapp", npm_package_size_limit_2_limit: "400 KB", npm_package_resolutions_loader_utils: "^2.0.4", npm_package_devDependencies_dotenv: "^14.2.0", npm_package_dependencies__radix_ui_react_slider: "1.0.0", npm_package_devDependencies_rollup_plugin_import_css: "^3.3.1", npm_package_scripts_types_build: "tsc -p tsconfig.json", npm_package_main: "dist/index.cjs.js", STATS_UE: "true", ANDROID_NDK_ROOT: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_ACTION_REF: "", DEBIAN_FRONTEND: "noninteractive", npm_package_size_limit_3_limit: "20 KB", npm_package_size_limit_0_path: "packages/hms-video-store/dist/index.cjs.js", npm_package_scripts_cypress_open: "cypress open", npm_package_scripts_lerna_publish: "lerna publish from-package --dist-tag $PUBLISH_FLAG --yes --no-verify-access", npm_package_scripts_test: "yarn build --no-private && lerna run test", npm_package_devDependencies_concurrently: "^6.4.0", npm_config_version_git_message: "v%s", npm_package_dependencies__radix_ui_react_checkbox: "1.0.0", npm_package_dependencies__100mslive_react_icons: "0.10.8-alpha.2", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.3.8-alpha.2", npm_package_size_limit_4_limit: "20 KB", npm_package_size_limit_1_path: "packages/hms-video-store/dist/index.js", npm_package_scripts_build_only: "rm -rf dist && node ../../scripts/build-webapp", npm_package_devDependencies__types_react: "^18.1.0", npm_package_sideEffects: "false", npm_package_repository_url: "https://github.com/100mslive/web-sdks.git", npm_package_source: "src/index.ts", GITHUB_REF_PROTECTED: "true", npm_config_argv: '{"remain":[],"cooked":["run","test"],"original":["test"]}', npm_package_size_limit_5_limit: "20 KB", npm_package_size_limit_2_path: "packages/roomkit-react/dist/index.cjs.js", npm_package_scripts_build: "yarn build:only && yarn types:build", npm_package_devDependencies_tslib: "^2.2.0", npm_package_devDependencies_nx: "^14.5.1", npm_package_devDependencies_lint_staged: "^12.0.3", NX_CLI_SET: "true", npm_package_dependencies_uuid: "^8.3.2", npm_package_dependencies_react_virtualized_auto_sizer: "^1.0.7", npm_package_dependencies_lodash_merge: "^4.6.2", npm_package_dependencies_emoji_mart: "^5.2.2", GITHUB_WORKSPACE: "/home/runner/work/web-sdks/web-sdks", ACCEPT_EULA: "Y", GITHUB_JOB: "publish_packages", RUNNER_PERFLOG: "/home/runner/perflog", npm_package_size_limit_6_limit: "150 KB", npm_package_size_limit_3_path: "packages/roomkit-react/dist/index.js", npm_package_devDependencies_cypress: "^9.5.2", npm_package_devDependencies_rollup_plugin_esbuild: "^5.0.0", GITHUB_SHA: "43ee35cc85faabb5a827f7f41a5affebffcfca18", 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_18af0324-8864-474f-b9dc-4ef9d10cae3f", 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_18af0324-8864-474f-b9dc-4ef9d10cae3f", npm_package_scripts_prestart: "rm -rf dist && yarn types:build", npm_package_author_name: "100ms", EDGEWEBDRIVER: "/usr/local/share/edge_driver", STATS_EXT: "true", npm_package_scripts_build_storybook: "sb build", npm_package_devDependencies_postcss: "^8.4.5", npm_package_devDependencies_esbuild: "^0.18.13", npm_config_save_prefix: "^", npm_config_ignore_optional: "", npm_package_dependencies_worker_timers: "^7.0.40", npm_package_typings: "dist/index.d.ts", ANDROID_NDK: "/usr/local/lib/android/sdk/ndk/25.2.9519653", SGX_AESM_ADDR: "1", CHROME_BIN: "/usr/bin/google-chrome", npm_package_scripts_storybook: "sb dev -p 6006", npm_package_devDependencies_esbuild_plugin_postcss2: "0.1.1", npm_package_dependencies_react_swipeable: "^7.0.1", npm_package_devDependencies_babel_plugin_react_require: "3.1.3", npm_package_devDependencies__storybook_testing_library: "^0.2.0", npm_package_devDependencies__storybook_addon_essentials: "^7.0.27", SELENIUM_JAR_PATH: "/usr/share/java/selenium-server.jar", STATS_EXTP: "https://provjobdsettingscdn.blob.core.windows.net/settings/provjobdsettings-0.5.172+1/provjobd.data", npm_package_scripts_reactsdk: "cd packages/react-sdk && yarn start", npm_package_dependencies_react_use: "^17.4.0", npm_package_dependencies__radix_ui_react_collapsible: "1.0.0", npm_package_devDependencies_storybook_dark_mode: "^3.0.0", npm_package_devDependencies__storybook_react: "^7.0.27", INIT_CWD: "/home/runner/work/web-sdks/web-sdks", ANDROID_NDK_HOME: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_STEP_SUMMARY: "/home/runner/work/_temp/_runner_file_commands/step_summary_18af0324-8864-474f-b9dc-4ef9d10cae3f" };
|
|
111
|
+
define_process_env_default = { GITHUB_STATE: "/home/runner/work/_temp/_runner_file_commands/save_state_99ff87f3-70ec-4a4f-affe-f5887196edd9", npm_package_devDependencies_ts_node: "^10.4.0", npm_package_devDependencies__types_node: "^16.11.17", npm_package_devDependencies_rollup: "^2.70.1", npm_package_exports___require: "./dist/index.cjs.js", STATS_TRP: "true", DEPLOYMENT_BASEPATH: "/opt/runner", DOTNET_NOLOGO: "1", npm_package_dependencies_screenfull: "^5.1.0", npm_package_dependencies_react_draggable: "^4.4.5", npm_package_dependencies__radix_ui_react_switch: "1.0.0", USER: "runner", npm_package_devDependencies_jest: "26.6.0", npm_config_version_commit_hooks: "true", npm_config_user_agent: "yarn/1.22.22 npm/? node/v18.20.2 linux x64", npm_config_always_auth: "", NX_WORKSPACE_ROOT: "/home/runner/work/web-sdks/web-sdks", npm_package_devDependencies__rollup_plugin_node_resolve: "^13.1.3", npm_package_scripts_babel: "npx storybook@latest babelrc", CI: "true", npm_package_devDependencies__size_limit_file: "^5.0.3", npm_config_bin_links: "true", npm_config_wrap_output: "", npm_package_dependencies__radix_ui_react_tabs: "1.0.0", npm_package_dependencies__100mslive_react_sdk: "0.10.8-alpha.4", RUNNER_ENVIRONMENT: "github-hosted", GITHUB_ENV: "/home/runner/work/_temp/_runner_file_commands/set_env_99ff87f3-70ec-4a4f-affe-f5887196edd9", PIPX_HOME: "/opt/pipx", npm_node_execpath: "/opt/hostedtoolcache/node/18.20.2/x64/bin/node", npm_config_init_version: "1.0.0", npm_package_dependencies__emoji_mart_react: "^1.0.1", npm_package_dependencies__emoji_mart_data: "^1.0.6", npm_package_dependencies__100mslive_hms_virtual_background: "1.13.8-alpha.4", JAVA_HOME_8_X64: "/usr/lib/jvm/temurin-8-jdk-amd64", NODE_AUTH_TOKEN: "XXXXX-XXXXX-XXXXX-XXXXX", SHLVL: "1", npm_package_dependencies__radix_ui_react_tooltip: "1.0.6", npm_package_dependencies__radix_ui_react_popover: "1.0.6", npm_package_dependencies__100mslive_types_prebuilt: "0.12.8", npm_package_peerDependencies_react: ">=17.0.2 <19.0.0", npm_package_devDependencies__storybook_addon_links: "^7.0.27", npm_package_files_0: "dist", HOME: "/home/runner", npm_package_devDependencies__typescript_eslint_parser: "^5.4.0", npm_package_dependencies__radix_ui_react_dialog: "1.0.4", npm_package_devDependencies__types_react_window: "^1.8.5", npm_package_files_1: "src", npm_package_repository_directory: "packages/roomkit-react", RUNNER_TEMP: "/home/runner/work/_temp", GITHUB_EVENT_PATH: "/home/runner/work/_temp/_github_workflow/event.json", npm_package_scripts_controller: "cd packages/hls-controller && yarn start", npm_package_dependencies__stitches_react: "^1.2.8", JAVA_HOME_11_X64: "/usr/lib/jvm/temurin-11-jdk-amd64", PIPX_BIN_DIR: "/opt/pipx_bin", GITHUB_REPOSITORY_OWNER: "100mslive", npm_package_engines_node: ">=16", npm_package_devDependencies_typedoc_plugin_markdown: "^3.14.0", npm_config_init_license: "MIT", GRADLE_HOME: "/usr/share/gradle-8.7", ANDROID_NDK_LATEST_HOME: "/usr/local/lib/android/sdk/ndk/26.3.11579264", JAVA_HOME_21_X64: "/usr/lib/jvm/temurin-21-jdk-amd64", STATS_RDCL: "true", GITHUB_RETENTION_DAYS: "90", YARN_WRAP_OUTPUT: "false", npm_config_version_tag_prefix: "v", GITHUB_REPOSITORY_OWNER_ID: "73883131", POWERSHELL_DISTRIBUTION_CHANNEL: "GitHub-Actions-ubuntu22", AZURE_EXTENSION_DIR: "/opt/az/azcliextensions", GITHUB_HEAD_REF: "", npm_package_scripts_lint_fix: "yarn lint --fix", npm_config_userconfig: "/home/runner/work/_temp/.npmrc", npm_package_devDependencies__storybook_addon_a11y: "^7.0.27", SYSTEMD_EXEC_PID: "597", npm_package_scripts_postinstall: "husky install && lerna bootstrap", npm_package_devDependencies_husky: "^6.0.0", npm_package_dependencies_recordrtc: "^5.6.2", npm_package_dependencies_eventemitter2: "^6.4.9", npm_package_dependencies__radix_ui_react_label: "1.0.0", npm_package_dependencies__radix_ui_react_dropdown_menu: "2.0.5", npm_package_keywords_0: "100mslive", GITHUB_GRAPHQL_URL: "https://api.github.com/graphql", npm_package_description: "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.", npm_package_devDependencies_typescript: "~4.7.4", npm_package_devDependencies_typedoc: "^0.24.8", npm_package_devDependencies_babel_loader: "^8.2.5", npm_package_devDependencies__rollup_plugin_image: "^3.0.2", npm_package_keywords_1: "react", GOROOT_1_20_X64: "/opt/hostedtoolcache/go/1.20.14/x64", NVM_DIR: "/home/runner/.nvm", npm_package_readmeFilename: "README.md", npm_package_devDependencies_react: "^18.1.0", npm_package_devDependencies__babel_preset_env: "^7.22.5", npm_package_keywords_2: "prebuilt", DOTNET_SKIP_FIRST_TIME_EXPERIENCE: "1", GOROOT_1_21_X64: "/opt/hostedtoolcache/go/1.21.9/x64", JAVA_HOME_17_X64: "/usr/lib/jvm/temurin-17-jdk-amd64", ImageVersion: "20240414.1.0", npm_package_devDependencies_prettier: "^2.4.1", npm_package_devDependencies_babel_jest: "^26.6.0", npm_package_scripts_dev: "node ../../scripts/dev", npm_package_keywords_3: "roomkit", RUNNER_OS: "Linux", GITHUB_API_URL: "https://api.github.com", GOROOT_1_22_X64: "/opt/hostedtoolcache/go/1.22.2/x64", SWIFT_PATH: "/usr/share/swift/usr/bin", FORCE_COLOR: "true", npm_package_dependencies__radix_ui_react_toast: "1.0.0", npm_package_dependencies__radix_ui_react_radio_group: "1.0.0", npm_package_dependencies__100mslive_hms_noise_cancellation: "0.0.1", npm_package_devDependencies__babel_preset_typescript: "^7.22.5", npm_package_exports___default: "./dist/index.js", RUNNER_USER: "runner", STATS_V3PS: "true", CHROMEWEBDRIVER: "/usr/local/share/chromedriver-linux64", JOURNAL_STREAM: "8:17353", GITHUB_WORKFLOW: "Publish Packages", _: "/usr/local/bin/yarn", npm_package_devDependencies_ts_jest: "26.5.6", npm_package_devDependencies_lerna: "^5.6.2", npm_package_devDependencies__types_jest: "^27.0.3", npm_package_devDependencies__commitlint_config_conventional: "^15.0.0", npm_package_private: "true", npm_package_dependencies__radix_ui_react_accordion: "1.0.0", npm_package_devDependencies__rollup_plugin_commonjs: "^21.0.3", npm_package_devDependencies__babel_preset_react: "^7.22.5", npm_package_module: "dist/index.js", npm_package_scripts_lint: "eslint -c .eslintrc --no-error-on-unmatched-pattern src --ext .js --ext .jsx --ext .ts --ext .tsx", npm_package_devDependencies__typescript_eslint_eslint_plugin: "^5.4.0", npm_config_registry: "https://registry.yarnpkg.com", npm_package_dependencies_react_window: "^1.8.7", npm_package_dependencies__100mslive_hls_player: "0.3.8-alpha.4", npm_package_devDependencies__types_lodash_merge: "^4.6.6", npm_package_devDependencies__storybook_cli: "^7.0.27", npm_package_devDependencies__rollup_plugin_json: "^6.0.0", ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: "/opt/actionarchivecache", STATS_D: "false", GITHUB_RUN_ID: "8749330041", STATS_VMFE: "true", npm_package_workspaces_0: "packages/*", npm_package_scripts_store: "cd packages/hms-video-store && yarn start", npm_package_devDependencies__babel_core: "^7.18.2", npm_package_dependencies_ts_pattern: "4.3.0", npm_package_devDependencies__storybook_addon_interactions: "^7.0.27", npm_package_devDependencies__storybook_addon_actions: "^7.0.27", GITHUB_REF_TYPE: "branch", BOOTSTRAP_HASKELL_NONINTERACTIVE: "1", GITHUB_WORKFLOW_SHA: "1ac0f11a034d8e0aed06479e20671c86bffd77f8", 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: "fca5e903c9a2399e3cdd373a0e29fd3a22d2c47d2154454f738eee43975db61a", 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--1713507861459-0.8404529433065979:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1713507861261-0.435899755627573:/home/runner/work/web-sdks/web-sdks/packages/roomkit-react/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1713507839160-0.06303379929561603:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/tmp/yarn--1713507838975-0.7068313429725521:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/home/runner/.config/yarn/link/node_modules/.bin:/home/runner/work/web-sdks/web-sdks/node_modules/.bin:/opt/hostedtoolcache/node/18.20.2/x64/libexec/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/lib/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin/node_modules/npm/bin/node-gyp-bin:/opt/hostedtoolcache/node/18.20.2/x64/bin:/snap/bin:/home/runner/.local/bin:/opt/pipx_bin:/home/runner/.cargo/bin:/home/runner/.config/composer/vendor/bin:/usr/local/.ghcup/bin:/home/runner/.dotnet/tools:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin", NODE: "/opt/hostedtoolcache/node/18.20.2/x64/bin/node", ANT_HOME: "/usr/share/ant", DOTNET_MULTILEVEL_LOOKUP: "0", RUNNER_TRACKING_ID: "github_613f38a3-ba05-4673-afed-2c4e52ebfa99", INVOCATION_ID: "9934528957ed4a47acf8a3a1df0d25e2", 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: "519", 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 262", XDG_CONFIG_HOME: "/home/runner/.config", STATS_VMD: "true", GITHUB_REF_NAME: "publish-alpha", GITHUB_REPOSITORY: "100mslive/web-sdks", STATS_D_D: "false", npm_lifecycle_script: "rm -rf dist && node ../../scripts/build-webapp", npm_package_size_limit_2_limit: "400 KB", npm_package_resolutions_loader_utils: "^2.0.4", npm_package_devDependencies_dotenv: "^14.2.0", npm_package_dependencies__radix_ui_react_slider: "1.0.0", npm_package_devDependencies_rollup_plugin_import_css: "^3.3.1", npm_package_scripts_types_build: "tsc -p tsconfig.json", npm_package_main: "dist/index.cjs.js", STATS_UE: "true", ANDROID_NDK_ROOT: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_ACTION_REF: "", DEBIAN_FRONTEND: "noninteractive", npm_package_size_limit_3_limit: "20 KB", npm_package_size_limit_0_path: "packages/hms-video-store/dist/index.cjs.js", npm_package_scripts_cypress_open: "cypress open", npm_package_scripts_lerna_publish: "lerna publish from-package --dist-tag $PUBLISH_FLAG --yes --no-verify-access", npm_package_scripts_test: "yarn build --no-private && lerna run test", npm_package_devDependencies_concurrently: "^6.4.0", npm_config_version_git_message: "v%s", npm_package_dependencies__radix_ui_react_checkbox: "1.0.0", npm_package_dependencies__100mslive_react_icons: "0.10.8-alpha.4", npm_package_scripts_types: "tsc -w", GITHUB_REPOSITORY_ID: "429826515", GITHUB_ACTIONS: "true", npm_lifecycle_event: "build:only", npm_package_version: "0.3.8-alpha.4", npm_package_size_limit_4_limit: "20 KB", npm_package_size_limit_1_path: "packages/hms-video-store/dist/index.js", npm_package_scripts_build_only: "rm -rf dist && node ../../scripts/build-webapp", npm_package_devDependencies__types_react: "^18.1.0", npm_package_sideEffects: "false", npm_package_repository_url: "https://github.com/100mslive/web-sdks.git", npm_package_source: "src/index.ts", GITHUB_REF_PROTECTED: "true", npm_config_argv: '{"remain":[],"cooked":["run","test"],"original":["test"]}', npm_package_size_limit_5_limit: "20 KB", npm_package_size_limit_2_path: "packages/roomkit-react/dist/index.cjs.js", npm_package_scripts_build: "yarn build:only && yarn types:build", npm_package_devDependencies_tslib: "^2.2.0", npm_package_devDependencies_nx: "^14.5.1", npm_package_devDependencies_lint_staged: "^12.0.3", NX_CLI_SET: "true", npm_package_dependencies_uuid: "^8.3.2", npm_package_dependencies_react_virtualized_auto_sizer: "^1.0.7", npm_package_dependencies_lodash_merge: "^4.6.2", npm_package_dependencies_emoji_mart: "^5.2.2", GITHUB_WORKSPACE: "/home/runner/work/web-sdks/web-sdks", ACCEPT_EULA: "Y", GITHUB_JOB: "publish_packages", RUNNER_PERFLOG: "/home/runner/perflog", npm_package_size_limit_6_limit: "150 KB", npm_package_size_limit_3_path: "packages/roomkit-react/dist/index.js", npm_package_devDependencies_cypress: "^9.5.2", npm_package_devDependencies_rollup_plugin_esbuild: "^5.0.0", GITHUB_SHA: "1ac0f11a034d8e0aed06479e20671c86bffd77f8", 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_99ff87f3-70ec-4a4f-affe-f5887196edd9", 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_99ff87f3-70ec-4a4f-affe-f5887196edd9", npm_package_scripts_prestart: "rm -rf dist && yarn types:build", npm_package_author_name: "100ms", EDGEWEBDRIVER: "/usr/local/share/edge_driver", STATS_EXT: "true", npm_package_scripts_build_storybook: "sb build", npm_package_devDependencies_postcss: "^8.4.5", npm_package_devDependencies_esbuild: "^0.18.13", npm_config_save_prefix: "^", npm_config_ignore_optional: "", npm_package_dependencies_worker_timers: "^7.0.40", npm_package_typings: "dist/index.d.ts", ANDROID_NDK: "/usr/local/lib/android/sdk/ndk/25.2.9519653", SGX_AESM_ADDR: "1", CHROME_BIN: "/usr/bin/google-chrome", npm_package_scripts_storybook: "sb dev -p 6006", npm_package_devDependencies_esbuild_plugin_postcss2: "0.1.1", npm_package_dependencies_react_swipeable: "^7.0.1", npm_package_devDependencies_babel_plugin_react_require: "3.1.3", npm_package_devDependencies__storybook_testing_library: "^0.2.0", npm_package_devDependencies__storybook_addon_essentials: "^7.0.27", SELENIUM_JAR_PATH: "/usr/share/java/selenium-server.jar", STATS_EXTP: "https://provjobdsettingscdn.blob.core.windows.net/settings/provjobdsettings-0.5.172+1/provjobd.data", npm_package_scripts_reactsdk: "cd packages/react-sdk && yarn start", npm_package_dependencies_react_use: "^17.4.0", npm_package_dependencies__radix_ui_react_collapsible: "1.0.0", npm_package_devDependencies_storybook_dark_mode: "^3.0.0", npm_package_devDependencies__storybook_react: "^7.0.27", INIT_CWD: "/home/runner/work/web-sdks/web-sdks", ANDROID_NDK_HOME: "/usr/local/lib/android/sdk/ndk/25.2.9519653", GITHUB_STEP_SUMMARY: "/home/runner/work/_temp/_runner_file_commands/step_summary_99ff87f3-70ec-4a4f-affe-f5887196edd9" };
|
|
112
112
|
}
|
|
113
113
|
});
|
|
114
114
|
|
|
@@ -10046,7 +10046,8 @@ var init_AppData = __esm({
|
|
|
10046
10046
|
[POLL_STATE.pollInView]: "",
|
|
10047
10047
|
[POLL_STATE.view]: ""
|
|
10048
10048
|
},
|
|
10049
|
-
|
|
10049
|
+
// by default off, so it will not appear in beam bots
|
|
10050
|
+
[APP_DATA.caption]: false
|
|
10050
10051
|
};
|
|
10051
10052
|
AppData = import_react34.default.memo(() => {
|
|
10052
10053
|
var _a8;
|
|
@@ -19630,7 +19631,7 @@ var init_dist = __esm({
|
|
|
19630
19631
|
};
|
|
19631
19632
|
_a7 = (a2, e) => () => (e || a2((e = { exports: {} }).exports, e), e.exports);
|
|
19632
19633
|
nr = _a7((yc, Wa) => {
|
|
19633
|
-
Wa.exports = { version: "0.12.8-alpha.
|
|
19634
|
+
Wa.exports = { version: "0.12.8-alpha.4", license: "MIT", repository: { type: "git", url: "https://github.com/100mslive/web-sdks.git", directory: "packages/hms-video-store" }, main: "dist/index.cjs.js", module: "dist/index.js", typings: "dist/index.d.ts", files: ["dist", "src"], engines: { node: ">=12" }, exports: { ".": { require: "./dist/index.cjs.js", import: "./dist/index.js", default: "./dist/index.js" } }, sideEffects: false, scripts: { prestart: "rm -rf dist && yarn types:build", start: 'concurrently "yarn dev" "yarn types"', dev: "node ../../scripts/dev", "build:only": "node ../../scripts/build", build: "yarn build:only && yarn types:build", types: "tsc -w", "types:build": "tsc -p tsconfig.json", format: "prettier --write src/**/*.ts", test: "jest --maxWorkers=1", "test:watch": "jest --watch", "test:coverage": "jest --coverage", lint: "eslint -c ../../.eslintrc .", "lint:fix": "yarn lint --fix", prepare: "yarn build", size: "size-limit", analyze: "size-limit --why", docs: "rm -rf ./docs && typedoc && rm -f ./docs/README.md && mkdir ./docs/home &&mv ./docs/modules.md ./docs/home/content.md && node ../../scripts/docs-store && npx prettier --write './docs/**/*'" }, name: "@100mslive/hms-video-store", author: "100ms", dependencies: { eventemitter2: "^6.4.9", immer: "^9.0.6", "lodash.isequal": "^4.5.0", reselect: "4.0.0", "sdp-transform": "^2.14.1", "ua-parser-js": "^1.0.1", uuid: "^8.3.2", "webrtc-adapter": "^8.0.0", zustand: "3.5.7" }, devDependencies: { "@types/dom-screen-wake-lock": "^1.0.1", "@types/lodash.isequal": "^4.5.8", "@types/sdp-transform": "^2.4.4", "@types/ua-parser-js": "^0.7.36", "@types/uuid": "^8.3.0", "jest-canvas-mock": "^2.3.1", "jsdom-worker": "^0.3.0", tslib: "^2.2.0" }, description: "@100mslive Core SDK which abstracts the complexities of webRTC while providing a reactive store for data management with a unidirectional data flow", keywords: ["video", "webrtc", "conferencing", "100ms"] };
|
|
19634
19635
|
});
|
|
19635
19636
|
er = ((n) => (n.Disconnected = "Disconnected", n.Preview = "Preview", n.Connecting = "Connecting", n.Connected = "Connected", n.Reconnecting = "Reconnecting", n.Disconnecting = "Disconnecting", n.Failed = "Failed", n))(er || {});
|
|
19636
19637
|
Na = ((e) => (e.CHAT = "chat", e))(Na || {});
|
|
@@ -30729,18 +30730,244 @@ var init_WaitingView = __esm({
|
|
|
30729
30730
|
}
|
|
30730
30731
|
});
|
|
30731
30732
|
|
|
30733
|
+
// src/Prebuilt/plugins/CaptionsViewer.tsx
|
|
30734
|
+
var import_react182, import_react_use40, import_react_sdk97, SimpleQueue, Queue, CaptionMaintainerQueue, TranscriptView, CaptionsViewer;
|
|
30735
|
+
var init_CaptionsViewer = __esm({
|
|
30736
|
+
"src/Prebuilt/plugins/CaptionsViewer.tsx"() {
|
|
30737
|
+
"use strict";
|
|
30738
|
+
init_define_process_env();
|
|
30739
|
+
import_react182 = __toESM(require("react"));
|
|
30740
|
+
import_react_use40 = require("react-use");
|
|
30741
|
+
import_react_sdk97 = require("@100mslive/react-sdk");
|
|
30742
|
+
init_Layout();
|
|
30743
|
+
init_Text2();
|
|
30744
|
+
init_Theme();
|
|
30745
|
+
init_useSidepane();
|
|
30746
|
+
init_useUISettings();
|
|
30747
|
+
init_useRoomLayoutScreen();
|
|
30748
|
+
init_constants();
|
|
30749
|
+
SimpleQueue = class {
|
|
30750
|
+
constructor(capacity = 3, MAX_STORAGE_TIME = 5e3) {
|
|
30751
|
+
this.capacity = capacity;
|
|
30752
|
+
this.MAX_STORAGE_TIME = MAX_STORAGE_TIME;
|
|
30753
|
+
this.storage = [];
|
|
30754
|
+
}
|
|
30755
|
+
enqueue(data3) {
|
|
30756
|
+
var _a8;
|
|
30757
|
+
if (this.size() === this.capacity && this.storage[this.size() - 1].final) {
|
|
30758
|
+
this.dequeue(this.storage[this.size() - 1]);
|
|
30759
|
+
}
|
|
30760
|
+
if (this.size() === 0) {
|
|
30761
|
+
this.storage.push(data3);
|
|
30762
|
+
this.addTimeout(this.storage[this.size() - 1], data3.final);
|
|
30763
|
+
return;
|
|
30764
|
+
}
|
|
30765
|
+
if (this.size() > 0 && ((_a8 = this.storage[this.size() - 1]) == null ? void 0 : _a8.final) === true) {
|
|
30766
|
+
this.storage.push(data3);
|
|
30767
|
+
this.addTimeout(this.storage[this.size() - 1], data3.final);
|
|
30768
|
+
return;
|
|
30769
|
+
}
|
|
30770
|
+
this.storage[this.size() - 1].transcript = data3.transcript;
|
|
30771
|
+
this.storage[this.size() - 1].final = data3.final;
|
|
30772
|
+
this.storage[this.size() - 1].end = data3.end;
|
|
30773
|
+
this.addTimeout(this.storage[this.size() - 1], data3.final);
|
|
30774
|
+
}
|
|
30775
|
+
addTimeout(item, isFinal) {
|
|
30776
|
+
if (!isFinal) {
|
|
30777
|
+
return;
|
|
30778
|
+
}
|
|
30779
|
+
item.timeout = setTimeout(() => {
|
|
30780
|
+
this.dequeue(item);
|
|
30781
|
+
}, this.MAX_STORAGE_TIME);
|
|
30782
|
+
}
|
|
30783
|
+
dequeue(item) {
|
|
30784
|
+
const index = this.storage.indexOf(item);
|
|
30785
|
+
if (index === -1) {
|
|
30786
|
+
return void 0;
|
|
30787
|
+
}
|
|
30788
|
+
const removedItem = this.storage.splice(index, 1);
|
|
30789
|
+
if (removedItem.length <= 0) {
|
|
30790
|
+
return void 0;
|
|
30791
|
+
}
|
|
30792
|
+
this.clearTimeout(removedItem[0]);
|
|
30793
|
+
return item;
|
|
30794
|
+
}
|
|
30795
|
+
clearTimeout(item) {
|
|
30796
|
+
if (!item.timeout) {
|
|
30797
|
+
return;
|
|
30798
|
+
}
|
|
30799
|
+
clearTimeout(item.timeout);
|
|
30800
|
+
}
|
|
30801
|
+
peek() {
|
|
30802
|
+
if (this.size() <= 0) {
|
|
30803
|
+
return void 0;
|
|
30804
|
+
}
|
|
30805
|
+
return this.storage[0];
|
|
30806
|
+
}
|
|
30807
|
+
getTranscription() {
|
|
30808
|
+
let script = "";
|
|
30809
|
+
this.storage.forEach((value) => script += value.transcript + " ");
|
|
30810
|
+
return script;
|
|
30811
|
+
}
|
|
30812
|
+
reset() {
|
|
30813
|
+
this.storage.length = 0;
|
|
30814
|
+
}
|
|
30815
|
+
size() {
|
|
30816
|
+
return this.storage.length;
|
|
30817
|
+
}
|
|
30818
|
+
};
|
|
30819
|
+
Queue = class {
|
|
30820
|
+
constructor(capacity = 3) {
|
|
30821
|
+
this.capacity = capacity;
|
|
30822
|
+
this.storage = {};
|
|
30823
|
+
}
|
|
30824
|
+
enqueue(data3) {
|
|
30825
|
+
if (this.size() === this.capacity) {
|
|
30826
|
+
this.dequeue();
|
|
30827
|
+
}
|
|
30828
|
+
if (!this.storage[data3.peer_id]) {
|
|
30829
|
+
this.storage[data3.peer_id] = {
|
|
30830
|
+
peer_id: data3.peer_id,
|
|
30831
|
+
transcript: data3.transcript,
|
|
30832
|
+
final: data3.final,
|
|
30833
|
+
transcriptQueue: new SimpleQueue(),
|
|
30834
|
+
start: data3.start,
|
|
30835
|
+
end: data3.end
|
|
30836
|
+
};
|
|
30837
|
+
this.storage[data3.peer_id].transcriptQueue.enqueue(data3);
|
|
30838
|
+
return;
|
|
30839
|
+
}
|
|
30840
|
+
this.storage[data3.peer_id].transcriptQueue.enqueue(data3);
|
|
30841
|
+
}
|
|
30842
|
+
dequeue() {
|
|
30843
|
+
const key = Object.keys(this.storage).shift() || "";
|
|
30844
|
+
const captionData = this.storage[key];
|
|
30845
|
+
captionData.transcriptQueue.reset();
|
|
30846
|
+
delete this.storage[key];
|
|
30847
|
+
return captionData;
|
|
30848
|
+
}
|
|
30849
|
+
peek() {
|
|
30850
|
+
if (this.size() <= 0)
|
|
30851
|
+
return void 0;
|
|
30852
|
+
const key = Object.keys(this.storage).shift() || "";
|
|
30853
|
+
return this.storage[key];
|
|
30854
|
+
}
|
|
30855
|
+
findPeerData() {
|
|
30856
|
+
const keys = Object.keys(this.storage);
|
|
30857
|
+
const data3 = keys.map((key) => {
|
|
30858
|
+
const data4 = this.storage[key];
|
|
30859
|
+
const word = data4.transcriptQueue.getTranscription();
|
|
30860
|
+
return { [key]: word };
|
|
30861
|
+
});
|
|
30862
|
+
return data3;
|
|
30863
|
+
}
|
|
30864
|
+
size() {
|
|
30865
|
+
return Object.keys(this.storage).length;
|
|
30866
|
+
}
|
|
30867
|
+
};
|
|
30868
|
+
CaptionMaintainerQueue = class {
|
|
30869
|
+
constructor() {
|
|
30870
|
+
this.captionData = new Queue();
|
|
30871
|
+
}
|
|
30872
|
+
push(data3 = []) {
|
|
30873
|
+
data3.forEach((value) => {
|
|
30874
|
+
this.captionData.enqueue(value);
|
|
30875
|
+
});
|
|
30876
|
+
}
|
|
30877
|
+
};
|
|
30878
|
+
TranscriptView = ({ peer_id, data: data3 }) => {
|
|
30879
|
+
const peerName = (0, import_react_sdk97.useHMSStore)((0, import_react_sdk97.selectPeerNameByID)(peer_id)) || "Participant";
|
|
30880
|
+
data3 = data3.trim();
|
|
30881
|
+
if (!data3)
|
|
30882
|
+
return null;
|
|
30883
|
+
return /* @__PURE__ */ import_react182.default.createElement(
|
|
30884
|
+
Text,
|
|
30885
|
+
{
|
|
30886
|
+
variant: "body2",
|
|
30887
|
+
css: {
|
|
30888
|
+
fontWeight: "$normal"
|
|
30889
|
+
}
|
|
30890
|
+
},
|
|
30891
|
+
/* @__PURE__ */ import_react182.default.createElement("b", null, peerName, ": "),
|
|
30892
|
+
data3
|
|
30893
|
+
);
|
|
30894
|
+
};
|
|
30895
|
+
CaptionsViewer = () => {
|
|
30896
|
+
var _a8;
|
|
30897
|
+
const { elements, screenType } = useRoomLayoutConferencingScreen();
|
|
30898
|
+
const isMobile = (0, import_react_use40.useMedia)(config.media.md);
|
|
30899
|
+
const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
|
|
30900
|
+
const showCaptionAtTop = ((_a8 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a8.is_overlay) && isChatOpen && isMobile;
|
|
30901
|
+
const [captionQueue] = (0, import_react182.useState)(new CaptionMaintainerQueue());
|
|
30902
|
+
const [currentData, setCurrentData] = (0, import_react182.useState)([]);
|
|
30903
|
+
const isCaptionEnabled = useIsCaptionEnabled();
|
|
30904
|
+
(0, import_react182.useEffect)(() => {
|
|
30905
|
+
const timeInterval = setInterval(() => {
|
|
30906
|
+
var _a9;
|
|
30907
|
+
if (!captionQueue) {
|
|
30908
|
+
return;
|
|
30909
|
+
}
|
|
30910
|
+
const data3 = (_a9 = captionQueue.captionData) == null ? void 0 : _a9.findPeerData();
|
|
30911
|
+
setCurrentData(data3);
|
|
30912
|
+
}, 1e3);
|
|
30913
|
+
return () => clearInterval(timeInterval);
|
|
30914
|
+
}, [captionQueue]);
|
|
30915
|
+
(0, import_react_sdk97.useTranscript)({
|
|
30916
|
+
onTranscript: (data3) => {
|
|
30917
|
+
captionQueue && captionQueue.push(data3);
|
|
30918
|
+
}
|
|
30919
|
+
});
|
|
30920
|
+
const dataToShow = currentData.filter((data3) => {
|
|
30921
|
+
const key = Object.keys(data3)[0];
|
|
30922
|
+
if (data3[key]) {
|
|
30923
|
+
return true;
|
|
30924
|
+
}
|
|
30925
|
+
return false;
|
|
30926
|
+
});
|
|
30927
|
+
if (dataToShow.length <= 0 || screenType === "hls_live_streaming" || !isCaptionEnabled) {
|
|
30928
|
+
return null;
|
|
30929
|
+
}
|
|
30930
|
+
return /* @__PURE__ */ import_react182.default.createElement(
|
|
30931
|
+
Box,
|
|
30932
|
+
{
|
|
30933
|
+
css: {
|
|
30934
|
+
position: "absolute",
|
|
30935
|
+
w: isMobile ? "100%" : "40%",
|
|
30936
|
+
bottom: showCaptionAtTop ? "" : "0",
|
|
30937
|
+
top: showCaptionAtTop ? "0" : "",
|
|
30938
|
+
left: isMobile ? 0 : "50%",
|
|
30939
|
+
transform: isMobile ? "" : "translateX(-50%)",
|
|
30940
|
+
background: "#000000A3",
|
|
30941
|
+
overflow: "clip",
|
|
30942
|
+
zIndex: 10,
|
|
30943
|
+
height: "fit-content",
|
|
30944
|
+
r: "$1",
|
|
30945
|
+
p: "$6",
|
|
30946
|
+
transition: "bottom 0.3s ease-in-out",
|
|
30947
|
+
"&:empty": { display: "none" }
|
|
30948
|
+
}
|
|
30949
|
+
},
|
|
30950
|
+
/* @__PURE__ */ import_react182.default.createElement(Flex, { direction: "column" }, dataToShow.map((data3, index) => {
|
|
30951
|
+
const key = Object.keys(data3)[0];
|
|
30952
|
+
return /* @__PURE__ */ import_react182.default.createElement(TranscriptView, { key: index, peer_id: key, data: data3[key] });
|
|
30953
|
+
}))
|
|
30954
|
+
);
|
|
30955
|
+
};
|
|
30956
|
+
}
|
|
30957
|
+
});
|
|
30958
|
+
|
|
30732
30959
|
// src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx
|
|
30733
|
-
var
|
|
30960
|
+
var import_react183, import_react_sdk98, useCloseScreenshareWhiteboard;
|
|
30734
30961
|
var init_useCloseScreenshareWhiteboard = __esm({
|
|
30735
30962
|
"src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx"() {
|
|
30736
30963
|
"use strict";
|
|
30737
30964
|
init_define_process_env();
|
|
30738
|
-
|
|
30739
|
-
|
|
30965
|
+
import_react183 = require("react");
|
|
30966
|
+
import_react_sdk98 = require("@100mslive/react-sdk");
|
|
30740
30967
|
useCloseScreenshareWhiteboard = () => {
|
|
30741
|
-
const peerSharing = (0,
|
|
30742
|
-
const { isOwner: isWhiteboardOwner, toggle: toggleWhiteboard } = (0,
|
|
30743
|
-
(0,
|
|
30968
|
+
const peerSharing = (0, import_react_sdk98.useHMSStore)(import_react_sdk98.selectPeerScreenSharing);
|
|
30969
|
+
const { isOwner: isWhiteboardOwner, toggle: toggleWhiteboard } = (0, import_react_sdk98.useWhiteboard)();
|
|
30970
|
+
(0, import_react183.useEffect)(() => {
|
|
30744
30971
|
if (isWhiteboardOwner && peerSharing) {
|
|
30745
30972
|
toggleWhiteboard == null ? void 0 : toggleWhiteboard();
|
|
30746
30973
|
}
|
|
@@ -30752,7 +30979,7 @@ var init_useCloseScreenshareWhiteboard = __esm({
|
|
|
30752
30979
|
// src/Prebuilt/components/HlsStatsOverlay.jsx
|
|
30753
30980
|
function HlsStatsOverlay({ hlsStatsState, onClose }) {
|
|
30754
30981
|
var _a8, _b7, _c;
|
|
30755
|
-
return /* @__PURE__ */
|
|
30982
|
+
return /* @__PURE__ */ import_react184.default.createElement(
|
|
30756
30983
|
Flex,
|
|
30757
30984
|
{
|
|
30758
30985
|
css: {
|
|
@@ -30766,8 +30993,8 @@ function HlsStatsOverlay({ hlsStatsState, onClose }) {
|
|
|
30766
30993
|
},
|
|
30767
30994
|
direction: "column"
|
|
30768
30995
|
},
|
|
30769
|
-
/* @__PURE__ */
|
|
30770
|
-
/* @__PURE__ */
|
|
30996
|
+
/* @__PURE__ */ import_react184.default.createElement(IconButton_default, { css: { position: "absolute", top: "$2", right: "$2" }, onClick: onClose }, /* @__PURE__ */ import_react184.default.createElement(import_react_icons86.CrossIcon, null)),
|
|
30997
|
+
/* @__PURE__ */ import_react184.default.createElement(HlsStatsRow, { label: "URL" }, /* @__PURE__ */ import_react184.default.createElement(Flex, { align: "center" }, /* @__PURE__ */ import_react184.default.createElement(
|
|
30771
30998
|
"a",
|
|
30772
30999
|
{
|
|
30773
31000
|
style: { cursor: "pointer", textDecoration: "underline" },
|
|
@@ -30777,12 +31004,12 @@ function HlsStatsOverlay({ hlsStatsState, onClose }) {
|
|
|
30777
31004
|
},
|
|
30778
31005
|
"Stream url"
|
|
30779
31006
|
))),
|
|
30780
|
-
/* @__PURE__ */
|
|
30781
|
-
/* @__PURE__ */
|
|
30782
|
-
/* @__PURE__ */
|
|
30783
|
-
/* @__PURE__ */
|
|
30784
|
-
/* @__PURE__ */
|
|
30785
|
-
/* @__PURE__ */
|
|
31007
|
+
/* @__PURE__ */ import_react184.default.createElement(HlsStatsRow, { label: "Video size" }, ` ${(_a8 = hlsStatsState == null ? void 0 : hlsStatsState.videoSize) == null ? void 0 : _a8.width}x${(_b7 = hlsStatsState == null ? void 0 : hlsStatsState.videoSize) == null ? void 0 : _b7.height}`),
|
|
31008
|
+
/* @__PURE__ */ import_react184.default.createElement(HlsStatsRow, { label: "Buffer duration" }, (_c = hlsStatsState == null ? void 0 : hlsStatsState.bufferedDuration) == null ? void 0 : _c.toFixed(2), " "),
|
|
31009
|
+
/* @__PURE__ */ import_react184.default.createElement(HlsStatsRow, { label: "Connection speed" }, `${((hlsStatsState == null ? void 0 : hlsStatsState.bandwidthEstimate) / (1e3 * 1e3)).toFixed(2)} Mbps`),
|
|
31010
|
+
/* @__PURE__ */ import_react184.default.createElement(HlsStatsRow, { label: "Bitrate" }, `${((hlsStatsState == null ? void 0 : hlsStatsState.bitrate) / (1e3 * 1e3)).toFixed(2)} Mbps`),
|
|
31011
|
+
/* @__PURE__ */ import_react184.default.createElement(HlsStatsRow, { label: "distance from live" }, getDurationFromSeconds(hlsStatsState.distanceFromLive / 1e3)),
|
|
31012
|
+
/* @__PURE__ */ import_react184.default.createElement(HlsStatsRow, { label: "Dropped frames" }, hlsStatsState == null ? void 0 : hlsStatsState.droppedFrames)
|
|
30786
31013
|
);
|
|
30787
31014
|
}
|
|
30788
31015
|
function getDurationFromSeconds(timeInSeconds) {
|
|
@@ -30800,18 +31027,18 @@ function getDurationFromSeconds(timeInSeconds) {
|
|
|
30800
31027
|
}
|
|
30801
31028
|
return videoTimeStr;
|
|
30802
31029
|
}
|
|
30803
|
-
var
|
|
31030
|
+
var import_react184, import_react_icons86, HlsStatsRow;
|
|
30804
31031
|
var init_HlsStatsOverlay = __esm({
|
|
30805
31032
|
"src/Prebuilt/components/HlsStatsOverlay.jsx"() {
|
|
30806
31033
|
"use strict";
|
|
30807
31034
|
init_define_process_env();
|
|
30808
|
-
|
|
31035
|
+
import_react184 = __toESM(require("react"));
|
|
30809
31036
|
import_react_icons86 = require("@100mslive/react-icons");
|
|
30810
31037
|
init_Layout();
|
|
30811
31038
|
init_Text2();
|
|
30812
31039
|
init_IconButton3();
|
|
30813
|
-
HlsStatsRow = (0,
|
|
30814
|
-
return /* @__PURE__ */
|
|
31040
|
+
HlsStatsRow = (0, import_react184.memo)(({ label, children }) => {
|
|
31041
|
+
return /* @__PURE__ */ import_react184.default.createElement(Flex, { gap: 4, justify: "center", css: { width: "100%" } }, /* @__PURE__ */ import_react184.default.createElement(
|
|
30815
31042
|
Text,
|
|
30816
31043
|
{
|
|
30817
31044
|
css: {
|
|
@@ -30822,7 +31049,7 @@ var init_HlsStatsOverlay = __esm({
|
|
|
30822
31049
|
}
|
|
30823
31050
|
},
|
|
30824
31051
|
label
|
|
30825
|
-
), /* @__PURE__ */
|
|
31052
|
+
), /* @__PURE__ */ import_react184.default.createElement(
|
|
30826
31053
|
Text,
|
|
30827
31054
|
{
|
|
30828
31055
|
css: {
|
|
@@ -30869,16 +31096,16 @@ var init_Controls = __esm({
|
|
|
30869
31096
|
});
|
|
30870
31097
|
|
|
30871
31098
|
// src/Prebuilt/components/HMSVideo/HMSVideo.jsx
|
|
30872
|
-
var
|
|
31099
|
+
var import_react185, HMSVideo;
|
|
30873
31100
|
var init_HMSVideo = __esm({
|
|
30874
31101
|
"src/Prebuilt/components/HMSVideo/HMSVideo.jsx"() {
|
|
30875
31102
|
"use strict";
|
|
30876
31103
|
init_define_process_env();
|
|
30877
|
-
|
|
31104
|
+
import_react185 = __toESM(require("react"));
|
|
30878
31105
|
init_Layout();
|
|
30879
|
-
HMSVideo = (0,
|
|
31106
|
+
HMSVideo = (0, import_react185.forwardRef)((_a8, videoRef) => {
|
|
30880
31107
|
var _b7 = _a8, { children } = _b7, props = __objRest(_b7, ["children"]);
|
|
30881
|
-
return /* @__PURE__ */
|
|
31108
|
+
return /* @__PURE__ */ import_react185.default.createElement(
|
|
30882
31109
|
Flex,
|
|
30883
31110
|
__spreadValues({
|
|
30884
31111
|
"data-testid": "hms-video",
|
|
@@ -30913,7 +31140,7 @@ var init_HMSVideo = __esm({
|
|
|
30913
31140
|
},
|
|
30914
31141
|
direction: "column"
|
|
30915
31142
|
}, props),
|
|
30916
|
-
/* @__PURE__ */
|
|
31143
|
+
/* @__PURE__ */ import_react185.default.createElement(
|
|
30917
31144
|
"video",
|
|
30918
31145
|
{
|
|
30919
31146
|
style: {
|
|
@@ -30935,29 +31162,29 @@ var init_HMSVideo = __esm({
|
|
|
30935
31162
|
});
|
|
30936
31163
|
|
|
30937
31164
|
// src/Prebuilt/components/HMSVideo/PlayerContext.tsx
|
|
30938
|
-
var
|
|
31165
|
+
var import_react186, HMSPlayerContext, useHMSPlayerContext;
|
|
30939
31166
|
var init_PlayerContext = __esm({
|
|
30940
31167
|
"src/Prebuilt/components/HMSVideo/PlayerContext.tsx"() {
|
|
30941
31168
|
"use strict";
|
|
30942
31169
|
init_define_process_env();
|
|
30943
|
-
|
|
30944
|
-
HMSPlayerContext =
|
|
31170
|
+
import_react186 = __toESM(require("react"));
|
|
31171
|
+
HMSPlayerContext = import_react186.default.createContext({
|
|
30945
31172
|
hlsPlayer: void 0
|
|
30946
31173
|
});
|
|
30947
31174
|
useHMSPlayerContext = () => {
|
|
30948
|
-
const context = (0,
|
|
31175
|
+
const context = (0, import_react186.useContext)(HMSPlayerContext);
|
|
30949
31176
|
return context;
|
|
30950
31177
|
};
|
|
30951
31178
|
}
|
|
30952
31179
|
});
|
|
30953
31180
|
|
|
30954
31181
|
// src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx
|
|
30955
|
-
var
|
|
31182
|
+
var import_react187, import_react_icons87, PlayPauseButton;
|
|
30956
31183
|
var init_PlayPauseButton = __esm({
|
|
30957
31184
|
"src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx"() {
|
|
30958
31185
|
"use strict";
|
|
30959
31186
|
init_define_process_env();
|
|
30960
|
-
|
|
31187
|
+
import_react187 = __toESM(require("react"));
|
|
30961
31188
|
import_react_icons87 = require("@100mslive/react-icons");
|
|
30962
31189
|
init_src();
|
|
30963
31190
|
init_PlayerContext();
|
|
@@ -30971,18 +31198,18 @@ var init_PlayPauseButton = __esm({
|
|
|
30971
31198
|
event == null ? void 0 : event.stopPropagation();
|
|
30972
31199
|
isPaused ? yield hlsPlayer2 == null ? void 0 : hlsPlayer2.play() : hlsPlayer2 == null ? void 0 : hlsPlayer2.pause();
|
|
30973
31200
|
});
|
|
30974
|
-
return /* @__PURE__ */
|
|
31201
|
+
return /* @__PURE__ */ import_react187.default.createElement(Tooltip, { title: isPaused ? "Play" : "Pause", side: "top" }, /* @__PURE__ */ import_react187.default.createElement(IconButton, { onClick, "data-testid": "play_pause_btn" }, isPaused ? /* @__PURE__ */ import_react187.default.createElement(import_react_icons87.PlayIcon, { width, height }) : /* @__PURE__ */ import_react187.default.createElement(import_react_icons87.PauseIcon, { width, height })));
|
|
30975
31202
|
};
|
|
30976
31203
|
}
|
|
30977
31204
|
});
|
|
30978
31205
|
|
|
30979
31206
|
// src/Prebuilt/components/HMSVideo/SeekControl.tsx
|
|
30980
|
-
var
|
|
31207
|
+
var import_react188, SeekControl;
|
|
30981
31208
|
var init_SeekControl = __esm({
|
|
30982
31209
|
"src/Prebuilt/components/HMSVideo/SeekControl.tsx"() {
|
|
30983
31210
|
"use strict";
|
|
30984
31211
|
init_define_process_env();
|
|
30985
|
-
|
|
31212
|
+
import_react188 = __toESM(require("react"));
|
|
30986
31213
|
init_src();
|
|
30987
31214
|
SeekControl = ({
|
|
30988
31215
|
title,
|
|
@@ -30990,19 +31217,19 @@ var init_SeekControl = __esm({
|
|
|
30990
31217
|
children,
|
|
30991
31218
|
css: css2
|
|
30992
31219
|
}) => {
|
|
30993
|
-
return /* @__PURE__ */
|
|
31220
|
+
return /* @__PURE__ */ import_react188.default.createElement(Tooltip, { title, side: "top" }, /* @__PURE__ */ import_react188.default.createElement(IconButton, { onClick, "data-testid": "backward_forward_arrow_btn", css: css2 }, children));
|
|
30994
31221
|
};
|
|
30995
31222
|
}
|
|
30996
31223
|
});
|
|
30997
31224
|
|
|
30998
31225
|
// src/Prebuilt/components/HMSVideo/PlayPauseSeekControls.tsx
|
|
30999
|
-
var
|
|
31226
|
+
var import_react189, import_react_use41, import_react_icons88, PlayPauseSeekControls, PlayPauseSeekOverlayControls;
|
|
31000
31227
|
var init_PlayPauseSeekControls = __esm({
|
|
31001
31228
|
"src/Prebuilt/components/HMSVideo/PlayPauseSeekControls.tsx"() {
|
|
31002
31229
|
"use strict";
|
|
31003
31230
|
init_define_process_env();
|
|
31004
|
-
|
|
31005
|
-
|
|
31231
|
+
import_react189 = __toESM(require("react"));
|
|
31232
|
+
import_react_use41 = require("react-use");
|
|
31006
31233
|
import_react_icons88 = require("@100mslive/react-icons");
|
|
31007
31234
|
init_Layout();
|
|
31008
31235
|
init_Text2();
|
|
@@ -31014,7 +31241,7 @@ var init_PlayPauseSeekControls = __esm({
|
|
|
31014
31241
|
isPaused,
|
|
31015
31242
|
onSeekTo
|
|
31016
31243
|
}) => {
|
|
31017
|
-
return /* @__PURE__ */
|
|
31244
|
+
return /* @__PURE__ */ import_react189.default.createElement(import_react189.default.Fragment, null, /* @__PURE__ */ import_react189.default.createElement(
|
|
31018
31245
|
SeekControl,
|
|
31019
31246
|
{
|
|
31020
31247
|
onClick: (e) => {
|
|
@@ -31023,8 +31250,8 @@ var init_PlayPauseSeekControls = __esm({
|
|
|
31023
31250
|
},
|
|
31024
31251
|
title: "backward"
|
|
31025
31252
|
},
|
|
31026
|
-
/* @__PURE__ */
|
|
31027
|
-
), /* @__PURE__ */
|
|
31253
|
+
/* @__PURE__ */ import_react189.default.createElement(import_react_icons88.BackwardArrowIcon, { width: 20, height: 20 })
|
|
31254
|
+
), /* @__PURE__ */ import_react189.default.createElement(PlayPauseButton, { isPaused }), /* @__PURE__ */ import_react189.default.createElement(
|
|
31028
31255
|
SeekControl,
|
|
31029
31256
|
{
|
|
31030
31257
|
onClick: (e) => {
|
|
@@ -31033,7 +31260,7 @@ var init_PlayPauseSeekControls = __esm({
|
|
|
31033
31260
|
},
|
|
31034
31261
|
title: "forward"
|
|
31035
31262
|
},
|
|
31036
|
-
/* @__PURE__ */
|
|
31263
|
+
/* @__PURE__ */ import_react189.default.createElement(import_react_icons88.ForwardArrowIcon, { width: 20, height: 20 })
|
|
31037
31264
|
));
|
|
31038
31265
|
};
|
|
31039
31266
|
PlayPauseSeekOverlayControls = ({
|
|
@@ -31041,10 +31268,10 @@ var init_PlayPauseSeekControls = __esm({
|
|
|
31041
31268
|
showControls,
|
|
31042
31269
|
hoverControlsVisible
|
|
31043
31270
|
}) => {
|
|
31044
|
-
const isMobile = (0,
|
|
31271
|
+
const isMobile = (0, import_react_use41.useMedia)(config.media.md);
|
|
31045
31272
|
const isLandscape = useIsLandscape();
|
|
31046
31273
|
if (!isMobile && !isLandscape) {
|
|
31047
|
-
return /* @__PURE__ */
|
|
31274
|
+
return /* @__PURE__ */ import_react189.default.createElement(import_react189.default.Fragment, null, /* @__PURE__ */ import_react189.default.createElement(
|
|
31048
31275
|
Flex,
|
|
31049
31276
|
{
|
|
31050
31277
|
css: {
|
|
@@ -31057,9 +31284,9 @@ var init_PlayPauseSeekControls = __esm({
|
|
|
31057
31284
|
direction: "column",
|
|
31058
31285
|
align: "center"
|
|
31059
31286
|
},
|
|
31060
|
-
/* @__PURE__ */
|
|
31061
|
-
/* @__PURE__ */
|
|
31062
|
-
), /* @__PURE__ */
|
|
31287
|
+
/* @__PURE__ */ import_react189.default.createElement(SeekControl, { title: "backward" }, /* @__PURE__ */ import_react189.default.createElement(import_react_icons88.BackwardArrowIcon, { width: 52, height: 52 })),
|
|
31288
|
+
/* @__PURE__ */ import_react189.default.createElement(Text, { variant: "body2", css: { fontWeight: "$regular" } }, "10 secs")
|
|
31289
|
+
), /* @__PURE__ */ import_react189.default.createElement(
|
|
31063
31290
|
Box,
|
|
31064
31291
|
{
|
|
31065
31292
|
css: {
|
|
@@ -31069,8 +31296,8 @@ var init_PlayPauseSeekControls = __esm({
|
|
|
31069
31296
|
opacity: hoverControlsVisible.pausePlay ? `1` : "0"
|
|
31070
31297
|
}
|
|
31071
31298
|
},
|
|
31072
|
-
/* @__PURE__ */
|
|
31073
|
-
), /* @__PURE__ */
|
|
31299
|
+
/* @__PURE__ */ import_react189.default.createElement(PlayPauseButton, { isPaused, width: 48, height: 48 })
|
|
31300
|
+
), /* @__PURE__ */ import_react189.default.createElement(
|
|
31074
31301
|
Flex,
|
|
31075
31302
|
{
|
|
31076
31303
|
css: {
|
|
@@ -31083,11 +31310,11 @@ var init_PlayPauseSeekControls = __esm({
|
|
|
31083
31310
|
direction: "column",
|
|
31084
31311
|
align: "center"
|
|
31085
31312
|
},
|
|
31086
|
-
/* @__PURE__ */
|
|
31087
|
-
/* @__PURE__ */
|
|
31313
|
+
/* @__PURE__ */ import_react189.default.createElement(SeekControl, { title: "forward" }, /* @__PURE__ */ import_react189.default.createElement(import_react_icons88.ForwardArrowIcon, { width: 52, height: 52 })),
|
|
31314
|
+
/* @__PURE__ */ import_react189.default.createElement(Text, { variant: "body2", css: { fontWeight: "$regular" } }, "10 secs")
|
|
31088
31315
|
));
|
|
31089
31316
|
}
|
|
31090
|
-
return /* @__PURE__ */
|
|
31317
|
+
return /* @__PURE__ */ import_react189.default.createElement(
|
|
31091
31318
|
Flex,
|
|
31092
31319
|
{
|
|
31093
31320
|
align: "center",
|
|
@@ -31103,7 +31330,7 @@ var init_PlayPauseSeekControls = __esm({
|
|
|
31103
31330
|
opacity: showControls ? `1` : "0"
|
|
31104
31331
|
}
|
|
31105
31332
|
},
|
|
31106
|
-
/* @__PURE__ */
|
|
31333
|
+
/* @__PURE__ */ import_react189.default.createElement(
|
|
31107
31334
|
SeekControl,
|
|
31108
31335
|
{
|
|
31109
31336
|
title: "backward",
|
|
@@ -31112,9 +31339,9 @@ var init_PlayPauseSeekControls = __esm({
|
|
|
31112
31339
|
opacity: hoverControlsVisible.seekBackward ? `1` : "0"
|
|
31113
31340
|
}
|
|
31114
31341
|
},
|
|
31115
|
-
/* @__PURE__ */
|
|
31342
|
+
/* @__PURE__ */ import_react189.default.createElement(import_react_icons88.BackwardArrowIcon, { width: 32, height: 32 })
|
|
31116
31343
|
),
|
|
31117
|
-
/* @__PURE__ */
|
|
31344
|
+
/* @__PURE__ */ import_react189.default.createElement(
|
|
31118
31345
|
Box,
|
|
31119
31346
|
{
|
|
31120
31347
|
css: {
|
|
@@ -31122,9 +31349,9 @@ var init_PlayPauseSeekControls = __esm({
|
|
|
31122
31349
|
r: "$round"
|
|
31123
31350
|
}
|
|
31124
31351
|
},
|
|
31125
|
-
/* @__PURE__ */
|
|
31352
|
+
/* @__PURE__ */ import_react189.default.createElement(PlayPauseButton, { isPaused, width: 48, height: 48 })
|
|
31126
31353
|
),
|
|
31127
|
-
/* @__PURE__ */
|
|
31354
|
+
/* @__PURE__ */ import_react189.default.createElement(
|
|
31128
31355
|
SeekControl,
|
|
31129
31356
|
{
|
|
31130
31357
|
title: "forward",
|
|
@@ -31133,7 +31360,7 @@ var init_PlayPauseSeekControls = __esm({
|
|
|
31133
31360
|
opacity: hoverControlsVisible.seekForward ? `1` : "0"
|
|
31134
31361
|
}
|
|
31135
31362
|
},
|
|
31136
|
-
/* @__PURE__ */
|
|
31363
|
+
/* @__PURE__ */ import_react189.default.createElement(import_react_icons88.ForwardArrowIcon, { width: 32, height: 32 })
|
|
31137
31364
|
)
|
|
31138
31365
|
);
|
|
31139
31366
|
};
|
|
@@ -31176,12 +31403,12 @@ var init_utils6 = __esm({
|
|
|
31176
31403
|
});
|
|
31177
31404
|
|
|
31178
31405
|
// src/Prebuilt/components/HMSVideo/VideoProgress.tsx
|
|
31179
|
-
var
|
|
31406
|
+
var import_react190, VideoProgress;
|
|
31180
31407
|
var init_VideoProgress = __esm({
|
|
31181
31408
|
"src/Prebuilt/components/HMSVideo/VideoProgress.tsx"() {
|
|
31182
31409
|
"use strict";
|
|
31183
31410
|
init_define_process_env();
|
|
31184
|
-
|
|
31411
|
+
import_react190 = __toESM(require("react"));
|
|
31185
31412
|
init_src();
|
|
31186
31413
|
init_PlayerContext();
|
|
31187
31414
|
init_utils6();
|
|
@@ -31190,10 +31417,10 @@ var init_VideoProgress = __esm({
|
|
|
31190
31417
|
setSeekProgress
|
|
31191
31418
|
}) => {
|
|
31192
31419
|
const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
|
|
31193
|
-
const [videoProgress, setVideoProgress] = (0,
|
|
31194
|
-
const [bufferProgress, setBufferProgress] = (0,
|
|
31420
|
+
const [videoProgress, setVideoProgress] = (0, import_react190.useState)(0);
|
|
31421
|
+
const [bufferProgress, setBufferProgress] = (0, import_react190.useState)(0);
|
|
31195
31422
|
const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
|
|
31196
|
-
const setProgress = (0,
|
|
31423
|
+
const setProgress = (0, import_react190.useCallback)(() => {
|
|
31197
31424
|
var _a8;
|
|
31198
31425
|
if (!videoEl) {
|
|
31199
31426
|
return;
|
|
@@ -31211,13 +31438,13 @@ var init_VideoProgress = __esm({
|
|
|
31211
31438
|
setBufferProgress(bufferProgress2);
|
|
31212
31439
|
}
|
|
31213
31440
|
}, [videoEl]);
|
|
31214
|
-
const timeupdateHandler = (0,
|
|
31441
|
+
const timeupdateHandler = (0, import_react190.useCallback)(() => {
|
|
31215
31442
|
if (!videoEl || seekProgress) {
|
|
31216
31443
|
return;
|
|
31217
31444
|
}
|
|
31218
31445
|
setProgress();
|
|
31219
31446
|
}, [seekProgress, setProgress, videoEl]);
|
|
31220
|
-
(0,
|
|
31447
|
+
(0, import_react190.useEffect)(() => {
|
|
31221
31448
|
if (!videoEl) {
|
|
31222
31449
|
return;
|
|
31223
31450
|
}
|
|
@@ -31242,7 +31469,7 @@ var init_VideoProgress = __esm({
|
|
|
31242
31469
|
if (!videoEl) {
|
|
31243
31470
|
return null;
|
|
31244
31471
|
}
|
|
31245
|
-
return /* @__PURE__ */
|
|
31472
|
+
return /* @__PURE__ */ import_react190.default.createElement(Flex, { align: "center", css: { cursor: "pointer", h: "$2", alignSelf: "stretch" } }, /* @__PURE__ */ import_react190.default.createElement(
|
|
31246
31473
|
Slider,
|
|
31247
31474
|
{
|
|
31248
31475
|
id: "video-actual-rest",
|
|
@@ -31262,7 +31489,7 @@ var init_VideoProgress = __esm({
|
|
|
31262
31489
|
onPointerUp: () => setSeekProgress(false),
|
|
31263
31490
|
thumbStyles: { w: "$6", h: "$6" }
|
|
31264
31491
|
}
|
|
31265
|
-
), /* @__PURE__ */
|
|
31492
|
+
), /* @__PURE__ */ import_react190.default.createElement(
|
|
31266
31493
|
Box,
|
|
31267
31494
|
{
|
|
31268
31495
|
id: "video-buffer",
|
|
@@ -31281,20 +31508,20 @@ var init_VideoProgress = __esm({
|
|
|
31281
31508
|
});
|
|
31282
31509
|
|
|
31283
31510
|
// src/Prebuilt/components/HMSVideo/VideoTime.tsx
|
|
31284
|
-
var
|
|
31511
|
+
var import_react191, import_hls_player2, VideoTime;
|
|
31285
31512
|
var init_VideoTime = __esm({
|
|
31286
31513
|
"src/Prebuilt/components/HMSVideo/VideoTime.tsx"() {
|
|
31287
31514
|
"use strict";
|
|
31288
31515
|
init_define_process_env();
|
|
31289
|
-
|
|
31516
|
+
import_react191 = __toESM(require("react"));
|
|
31290
31517
|
import_hls_player2 = require("@100mslive/hls-player");
|
|
31291
31518
|
init_Text2();
|
|
31292
31519
|
init_PlayerContext();
|
|
31293
31520
|
init_utils6();
|
|
31294
31521
|
VideoTime = () => {
|
|
31295
31522
|
const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
|
|
31296
|
-
const [videoTime, setVideoTime] = (0,
|
|
31297
|
-
const updateTime = (0,
|
|
31523
|
+
const [videoTime, setVideoTime] = (0, import_react191.useState)(getDurationFromSeconds2(0));
|
|
31524
|
+
const updateTime = (0, import_react191.useCallback)(
|
|
31298
31525
|
(currentTime) => {
|
|
31299
31526
|
const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
|
|
31300
31527
|
if (videoEl) {
|
|
@@ -31306,7 +31533,7 @@ var init_VideoTime = __esm({
|
|
|
31306
31533
|
},
|
|
31307
31534
|
[hlsPlayer2]
|
|
31308
31535
|
);
|
|
31309
|
-
(0,
|
|
31536
|
+
(0, import_react191.useEffect)(() => {
|
|
31310
31537
|
const timeupdateHandler = (currentTime) => {
|
|
31311
31538
|
updateTime(currentTime);
|
|
31312
31539
|
};
|
|
@@ -31319,7 +31546,7 @@ var init_VideoTime = __esm({
|
|
|
31319
31546
|
hlsPlayer2 == null ? void 0 : hlsPlayer2.off(import_hls_player2.HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
|
|
31320
31547
|
};
|
|
31321
31548
|
}, [hlsPlayer2, updateTime]);
|
|
31322
|
-
return hlsPlayer2 ? /* @__PURE__ */
|
|
31549
|
+
return hlsPlayer2 ? /* @__PURE__ */ import_react191.default.createElement(
|
|
31323
31550
|
Text,
|
|
31324
31551
|
{
|
|
31325
31552
|
variant: "body1",
|
|
@@ -31339,21 +31566,21 @@ var init_VideoTime = __esm({
|
|
|
31339
31566
|
});
|
|
31340
31567
|
|
|
31341
31568
|
// src/Prebuilt/components/HMSVideo/VolumeControl.tsx
|
|
31342
|
-
var
|
|
31569
|
+
var import_react192, import_react_icons89, VolumeControl, VolumeIcon;
|
|
31343
31570
|
var init_VolumeControl = __esm({
|
|
31344
31571
|
"src/Prebuilt/components/HMSVideo/VolumeControl.tsx"() {
|
|
31345
31572
|
"use strict";
|
|
31346
31573
|
init_define_process_env();
|
|
31347
|
-
|
|
31574
|
+
import_react192 = __toESM(require("react"));
|
|
31348
31575
|
import_react_icons89 = require("@100mslive/react-icons");
|
|
31349
31576
|
init_src();
|
|
31350
31577
|
init_PlayerContext();
|
|
31351
31578
|
VolumeControl = () => {
|
|
31352
31579
|
var _a8;
|
|
31353
31580
|
const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
|
|
31354
|
-
const [volume, setVolume] = (0,
|
|
31355
|
-
const [showSlider, setShowSlider] = (0,
|
|
31356
|
-
return /* @__PURE__ */
|
|
31581
|
+
const [volume, setVolume] = (0, import_react192.useState)((_a8 = hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) != null ? _a8 : 100);
|
|
31582
|
+
const [showSlider, setShowSlider] = (0, import_react192.useState)(false);
|
|
31583
|
+
return /* @__PURE__ */ import_react192.default.createElement(
|
|
31357
31584
|
Flex,
|
|
31358
31585
|
{
|
|
31359
31586
|
align: "center",
|
|
@@ -31367,7 +31594,7 @@ var init_VolumeControl = __esm({
|
|
|
31367
31594
|
setShowSlider(false);
|
|
31368
31595
|
}
|
|
31369
31596
|
},
|
|
31370
|
-
/* @__PURE__ */
|
|
31597
|
+
/* @__PURE__ */ import_react192.default.createElement(
|
|
31371
31598
|
VolumeIcon,
|
|
31372
31599
|
{
|
|
31373
31600
|
volume,
|
|
@@ -31382,7 +31609,7 @@ var init_VolumeControl = __esm({
|
|
|
31382
31609
|
}
|
|
31383
31610
|
}
|
|
31384
31611
|
),
|
|
31385
|
-
/* @__PURE__ */
|
|
31612
|
+
/* @__PURE__ */ import_react192.default.createElement(
|
|
31386
31613
|
Slider,
|
|
31387
31614
|
{
|
|
31388
31615
|
css: {
|
|
@@ -31410,9 +31637,9 @@ var init_VolumeControl = __esm({
|
|
|
31410
31637
|
};
|
|
31411
31638
|
VolumeIcon = ({ volume, onClick }) => {
|
|
31412
31639
|
if (volume === 0) {
|
|
31413
|
-
return /* @__PURE__ */
|
|
31640
|
+
return /* @__PURE__ */ import_react192.default.createElement(import_react_icons89.VolumeZeroIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
|
|
31414
31641
|
}
|
|
31415
|
-
return volume < 50 ? /* @__PURE__ */
|
|
31642
|
+
return volume < 50 ? /* @__PURE__ */ import_react192.default.createElement(import_react_icons89.VolumeOneIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick }) : /* @__PURE__ */ import_react192.default.createElement(import_react_icons89.VolumeTwoIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
|
|
31416
31643
|
};
|
|
31417
31644
|
}
|
|
31418
31645
|
});
|
|
@@ -31448,16 +31675,16 @@ var init_HMSVideo2 = __esm({
|
|
|
31448
31675
|
});
|
|
31449
31676
|
|
|
31450
31677
|
// src/Prebuilt/components/HMSVideo/FullscreenButton.tsx
|
|
31451
|
-
var
|
|
31678
|
+
var import_react193, import_react_icons90, FullScreenButton2;
|
|
31452
31679
|
var init_FullscreenButton = __esm({
|
|
31453
31680
|
"src/Prebuilt/components/HMSVideo/FullscreenButton.tsx"() {
|
|
31454
31681
|
"use strict";
|
|
31455
31682
|
init_define_process_env();
|
|
31456
|
-
|
|
31683
|
+
import_react193 = __toESM(require("react"));
|
|
31457
31684
|
import_react_icons90 = require("@100mslive/react-icons");
|
|
31458
31685
|
init_src();
|
|
31459
31686
|
FullScreenButton2 = ({ isFullScreen, onToggle }) => {
|
|
31460
|
-
return /* @__PURE__ */
|
|
31687
|
+
return /* @__PURE__ */ import_react193.default.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ import_react193.default.createElement(IconButton, { css: { margin: "0px" }, onClick: onToggle, key: "fullscreen_btn", "data-testid": "fullscreen_btn" }, /* @__PURE__ */ import_react193.default.createElement(Flex, null, isFullScreen ? /* @__PURE__ */ import_react193.default.createElement(import_react_icons90.ShrinkIcon, null) : /* @__PURE__ */ import_react193.default.createElement(import_react_icons90.ExpandIcon, null))));
|
|
31461
31688
|
};
|
|
31462
31689
|
}
|
|
31463
31690
|
});
|
|
@@ -31468,9 +31695,9 @@ function HLSAutoplayBlockedPrompt({
|
|
|
31468
31695
|
unblockAutoPlay
|
|
31469
31696
|
}) {
|
|
31470
31697
|
const isLandscape = useIsLandscape();
|
|
31471
|
-
const isMobile = (0,
|
|
31698
|
+
const isMobile = (0, import_react_use42.useMedia)(config.media.md);
|
|
31472
31699
|
if ((isMobile || isLandscape) && open) {
|
|
31473
|
-
return /* @__PURE__ */
|
|
31700
|
+
return /* @__PURE__ */ import_react194.default.createElement(
|
|
31474
31701
|
IconButton,
|
|
31475
31702
|
{
|
|
31476
31703
|
css: {
|
|
@@ -31483,8 +31710,8 @@ function HLSAutoplayBlockedPrompt({
|
|
|
31483
31710
|
return yield unblockAutoPlay();
|
|
31484
31711
|
})
|
|
31485
31712
|
},
|
|
31486
|
-
/* @__PURE__ */
|
|
31487
|
-
/* @__PURE__ */
|
|
31713
|
+
/* @__PURE__ */ import_react194.default.createElement(import_react_icons91.VolumeTwoIcon, { width: "32", height: "32" }),
|
|
31714
|
+
/* @__PURE__ */ import_react194.default.createElement(
|
|
31488
31715
|
Text,
|
|
31489
31716
|
{
|
|
31490
31717
|
variant: "body1",
|
|
@@ -31498,7 +31725,7 @@ function HLSAutoplayBlockedPrompt({
|
|
|
31498
31725
|
)
|
|
31499
31726
|
);
|
|
31500
31727
|
}
|
|
31501
|
-
return /* @__PURE__ */
|
|
31728
|
+
return /* @__PURE__ */ import_react194.default.createElement(
|
|
31502
31729
|
Dialog.Root,
|
|
31503
31730
|
{
|
|
31504
31731
|
open,
|
|
@@ -31508,7 +31735,7 @@ function HLSAutoplayBlockedPrompt({
|
|
|
31508
31735
|
}
|
|
31509
31736
|
})
|
|
31510
31737
|
},
|
|
31511
|
-
/* @__PURE__ */
|
|
31738
|
+
/* @__PURE__ */ import_react194.default.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ import_react194.default.createElement(DialogRow, null, /* @__PURE__ */ import_react194.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_react194.default.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ import_react194.default.createElement(
|
|
31512
31739
|
Button,
|
|
31513
31740
|
{
|
|
31514
31741
|
variant: "primary",
|
|
@@ -31520,13 +31747,13 @@ function HLSAutoplayBlockedPrompt({
|
|
|
31520
31747
|
)))
|
|
31521
31748
|
);
|
|
31522
31749
|
}
|
|
31523
|
-
var
|
|
31750
|
+
var import_react194, import_react_use42, import_react_icons91;
|
|
31524
31751
|
var init_HLSAutoplayBlockedPrompt = __esm({
|
|
31525
31752
|
"src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx"() {
|
|
31526
31753
|
"use strict";
|
|
31527
31754
|
init_define_process_env();
|
|
31528
|
-
|
|
31529
|
-
|
|
31755
|
+
import_react194 = __toESM(require("react"));
|
|
31756
|
+
import_react_use42 = require("react-use");
|
|
31530
31757
|
import_react_icons91 = require("@100mslive/react-icons");
|
|
31531
31758
|
init_src();
|
|
31532
31759
|
init_DialogContent2();
|
|
@@ -31537,14 +31764,14 @@ var init_HLSAutoplayBlockedPrompt = __esm({
|
|
|
31537
31764
|
// src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx
|
|
31538
31765
|
function HLSCaptionSelector({ isEnabled }) {
|
|
31539
31766
|
const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
|
|
31540
|
-
return /* @__PURE__ */
|
|
31767
|
+
return /* @__PURE__ */ import_react195.default.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ import_react195.default.createElement(IconButton, { css: { p: "$2" }, onClick: () => hlsPlayer2 == null ? void 0 : hlsPlayer2.toggleCaption() }, isEnabled ? /* @__PURE__ */ import_react195.default.createElement(import_react_icons92.ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ import_react195.default.createElement(import_react_icons92.OpenCaptionIcon, { width: "20", height: "20px" })));
|
|
31541
31768
|
}
|
|
31542
|
-
var
|
|
31769
|
+
var import_react195, import_react_icons92;
|
|
31543
31770
|
var init_HLSCaptionSelector = __esm({
|
|
31544
31771
|
"src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx"() {
|
|
31545
31772
|
"use strict";
|
|
31546
31773
|
init_define_process_env();
|
|
31547
|
-
|
|
31774
|
+
import_react195 = __toESM(require("react"));
|
|
31548
31775
|
import_react_icons92 = require("@100mslive/react-icons");
|
|
31549
31776
|
init_src();
|
|
31550
31777
|
init_PlayerContext();
|
|
@@ -31561,13 +31788,13 @@ function HLSQualitySelector({
|
|
|
31561
31788
|
isAuto,
|
|
31562
31789
|
containerRef
|
|
31563
31790
|
}) {
|
|
31564
|
-
const isMobile = (0,
|
|
31791
|
+
const isMobile = (0, import_react_use43.useMedia)(config.media.md);
|
|
31565
31792
|
const isLandscape = useIsLandscape();
|
|
31566
31793
|
if (layers.length === 0) {
|
|
31567
31794
|
return null;
|
|
31568
31795
|
}
|
|
31569
31796
|
if (isMobile || isLandscape) {
|
|
31570
|
-
return /* @__PURE__ */
|
|
31797
|
+
return /* @__PURE__ */ import_react196.default.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ import_react196.default.createElement(Sheet.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ import_react196.default.createElement(
|
|
31571
31798
|
Flex,
|
|
31572
31799
|
{
|
|
31573
31800
|
css: {
|
|
@@ -31577,15 +31804,15 @@ function HLSQualitySelector({
|
|
|
31577
31804
|
p: "$2"
|
|
31578
31805
|
}
|
|
31579
31806
|
},
|
|
31580
|
-
/* @__PURE__ */
|
|
31581
|
-
)), /* @__PURE__ */
|
|
31807
|
+
/* @__PURE__ */ import_react196.default.createElement(import_react_icons93.SettingsIcon, null)
|
|
31808
|
+
)), /* @__PURE__ */ import_react196.default.createElement(
|
|
31582
31809
|
Sheet.Content,
|
|
31583
31810
|
{
|
|
31584
31811
|
container: containerRef,
|
|
31585
31812
|
css: { bg: "$surface_default", pb: "$1" },
|
|
31586
31813
|
onClick: () => onOpenChange(false)
|
|
31587
31814
|
},
|
|
31588
|
-
/* @__PURE__ */
|
|
31815
|
+
/* @__PURE__ */ import_react196.default.createElement(
|
|
31589
31816
|
Sheet.Title,
|
|
31590
31817
|
{
|
|
31591
31818
|
css: {
|
|
@@ -31602,10 +31829,10 @@ function HLSQualitySelector({
|
|
|
31602
31829
|
}
|
|
31603
31830
|
},
|
|
31604
31831
|
"Quality",
|
|
31605
|
-
/* @__PURE__ */
|
|
31832
|
+
/* @__PURE__ */ import_react196.default.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ import_react196.default.createElement(import_react_icons93.CrossIcon, null))
|
|
31606
31833
|
),
|
|
31607
31834
|
layers.map((layer) => {
|
|
31608
|
-
return /* @__PURE__ */
|
|
31835
|
+
return /* @__PURE__ */ import_react196.default.createElement(
|
|
31609
31836
|
Flex,
|
|
31610
31837
|
{
|
|
31611
31838
|
align: "center",
|
|
@@ -31623,12 +31850,12 @@ function HLSQualitySelector({
|
|
|
31623
31850
|
key: layer.width,
|
|
31624
31851
|
onClick: () => onQualityChange(layer)
|
|
31625
31852
|
},
|
|
31626
|
-
/* @__PURE__ */
|
|
31627
|
-
/* @__PURE__ */
|
|
31628
|
-
!isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */
|
|
31853
|
+
/* @__PURE__ */ import_react196.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
|
|
31854
|
+
/* @__PURE__ */ import_react196.default.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
|
|
31855
|
+
!isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ import_react196.default.createElement(import_react_icons93.CheckIcon, { width: "16px", height: "16px" })
|
|
31629
31856
|
);
|
|
31630
31857
|
}),
|
|
31631
|
-
/* @__PURE__ */
|
|
31858
|
+
/* @__PURE__ */ import_react196.default.createElement(
|
|
31632
31859
|
Flex,
|
|
31633
31860
|
{
|
|
31634
31861
|
align: "center",
|
|
@@ -31646,12 +31873,12 @@ function HLSQualitySelector({
|
|
|
31646
31873
|
key: "auto",
|
|
31647
31874
|
onClick: () => onQualityChange({ height: "auto" })
|
|
31648
31875
|
},
|
|
31649
|
-
/* @__PURE__ */
|
|
31650
|
-
isAuto && /* @__PURE__ */
|
|
31876
|
+
/* @__PURE__ */ import_react196.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
|
|
31877
|
+
isAuto && /* @__PURE__ */ import_react196.default.createElement(import_react_icons93.CheckIcon, { width: "16px", height: "16px" })
|
|
31651
31878
|
)
|
|
31652
31879
|
));
|
|
31653
31880
|
}
|
|
31654
|
-
return /* @__PURE__ */
|
|
31881
|
+
return /* @__PURE__ */ import_react196.default.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpenChange(value), modal: false }, /* @__PURE__ */ import_react196.default.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ import_react196.default.createElement(
|
|
31655
31882
|
Flex,
|
|
31656
31883
|
{
|
|
31657
31884
|
css: {
|
|
@@ -31661,7 +31888,7 @@ function HLSQualitySelector({
|
|
|
31661
31888
|
p: "$2"
|
|
31662
31889
|
}
|
|
31663
31890
|
},
|
|
31664
|
-
/* @__PURE__ */
|
|
31891
|
+
/* @__PURE__ */ import_react196.default.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ import_react196.default.createElement(Flex, { align: "center" }, /* @__PURE__ */ import_react196.default.createElement(
|
|
31665
31892
|
Box,
|
|
31666
31893
|
{
|
|
31667
31894
|
css: {
|
|
@@ -31672,8 +31899,8 @@ function HLSQualitySelector({
|
|
|
31672
31899
|
c: "$on_surface_high"
|
|
31673
31900
|
}
|
|
31674
31901
|
},
|
|
31675
|
-
/* @__PURE__ */
|
|
31676
|
-
), /* @__PURE__ */
|
|
31902
|
+
/* @__PURE__ */ import_react196.default.createElement(import_react_icons93.SettingsIcon, null)
|
|
31903
|
+
), /* @__PURE__ */ import_react196.default.createElement(
|
|
31677
31904
|
Text,
|
|
31678
31905
|
{
|
|
31679
31906
|
variant: {
|
|
@@ -31683,7 +31910,7 @@ function HLSQualitySelector({
|
|
|
31683
31910
|
},
|
|
31684
31911
|
css: { display: "flex", alignItems: "center", ml: "$2", c: "$on_surface_medium" }
|
|
31685
31912
|
},
|
|
31686
|
-
isAuto && /* @__PURE__ */
|
|
31913
|
+
isAuto && /* @__PURE__ */ import_react196.default.createElement(import_react196.default.Fragment, null, "Auto", /* @__PURE__ */ import_react196.default.createElement(
|
|
31687
31914
|
Box,
|
|
31688
31915
|
{
|
|
31689
31916
|
css: {
|
|
@@ -31698,7 +31925,7 @@ function HLSQualitySelector({
|
|
|
31698
31925
|
selection && Math.min(selection.width || 0, selection.height || 0),
|
|
31699
31926
|
"p"
|
|
31700
31927
|
)))
|
|
31701
|
-
)), /* @__PURE__ */
|
|
31928
|
+
)), /* @__PURE__ */ import_react196.default.createElement(Dropdown.Portal, { container: containerRef }, /* @__PURE__ */ import_react196.default.createElement(
|
|
31702
31929
|
Dropdown.Content,
|
|
31703
31930
|
{
|
|
31704
31931
|
sideOffset: 5,
|
|
@@ -31714,7 +31941,7 @@ function HLSQualitySelector({
|
|
|
31714
31941
|
}
|
|
31715
31942
|
},
|
|
31716
31943
|
layers.map((layer) => {
|
|
31717
|
-
return /* @__PURE__ */
|
|
31944
|
+
return /* @__PURE__ */ import_react196.default.createElement(
|
|
31718
31945
|
Dropdown.Item,
|
|
31719
31946
|
{
|
|
31720
31947
|
onClick: () => onQualityChange(layer),
|
|
@@ -31729,12 +31956,12 @@ function HLSQualitySelector({
|
|
|
31729
31956
|
gap: "$2"
|
|
31730
31957
|
}
|
|
31731
31958
|
},
|
|
31732
|
-
/* @__PURE__ */
|
|
31733
|
-
/* @__PURE__ */
|
|
31734
|
-
!isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */
|
|
31959
|
+
/* @__PURE__ */ import_react196.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
|
|
31960
|
+
/* @__PURE__ */ import_react196.default.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
|
|
31961
|
+
!isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ import_react196.default.createElement(import_react_icons93.CheckIcon, { width: "16px", height: "16px" })
|
|
31735
31962
|
);
|
|
31736
31963
|
}),
|
|
31737
|
-
/* @__PURE__ */
|
|
31964
|
+
/* @__PURE__ */ import_react196.default.createElement(
|
|
31738
31965
|
Dropdown.Item,
|
|
31739
31966
|
{
|
|
31740
31967
|
onClick: () => onQualityChange({ height: "auto" }),
|
|
@@ -31749,18 +31976,18 @@ function HLSQualitySelector({
|
|
|
31749
31976
|
gap: "$2"
|
|
31750
31977
|
}
|
|
31751
31978
|
},
|
|
31752
|
-
/* @__PURE__ */
|
|
31753
|
-
isAuto && /* @__PURE__ */
|
|
31979
|
+
/* @__PURE__ */ import_react196.default.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
|
|
31980
|
+
isAuto && /* @__PURE__ */ import_react196.default.createElement(import_react_icons93.CheckIcon, { width: "16px", height: "16px" })
|
|
31754
31981
|
)
|
|
31755
31982
|
)));
|
|
31756
31983
|
}
|
|
31757
|
-
var
|
|
31984
|
+
var import_react196, import_react_use43, import_react_icons93, getQualityText, getBitrateText;
|
|
31758
31985
|
var init_HLSQualitySelector = __esm({
|
|
31759
31986
|
"src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx"() {
|
|
31760
31987
|
"use strict";
|
|
31761
31988
|
init_define_process_env();
|
|
31762
|
-
|
|
31763
|
-
|
|
31989
|
+
import_react196 = __toESM(require("react"));
|
|
31990
|
+
import_react_use43 = require("react-use");
|
|
31764
31991
|
import_react_icons93 = require("@100mslive/react-icons");
|
|
31765
31992
|
init_src();
|
|
31766
31993
|
init_Sheet2();
|
|
@@ -31772,12 +31999,12 @@ var init_HLSQualitySelector = __esm({
|
|
|
31772
31999
|
});
|
|
31773
32000
|
|
|
31774
32001
|
// src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx
|
|
31775
|
-
var
|
|
32002
|
+
var import_react197, import_react_icons94, HLSViewTitle;
|
|
31776
32003
|
var init_MwebHLSViewTitle = __esm({
|
|
31777
32004
|
"src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx"() {
|
|
31778
32005
|
"use strict";
|
|
31779
32006
|
init_define_process_env();
|
|
31780
|
-
|
|
32007
|
+
import_react197 = __toESM(require("react"));
|
|
31781
32008
|
import_react_icons94 = require("@100mslive/react-icons");
|
|
31782
32009
|
init_Layout();
|
|
31783
32010
|
init_Text2();
|
|
@@ -31791,7 +32018,7 @@ var init_MwebHLSViewTitle = __esm({
|
|
|
31791
32018
|
const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
|
|
31792
32019
|
const isDetailSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.ROOM_DETAILS);
|
|
31793
32020
|
if (isDetailSidepaneOpen) {
|
|
31794
|
-
return /* @__PURE__ */
|
|
32021
|
+
return /* @__PURE__ */ import_react197.default.createElement(
|
|
31795
32022
|
Flex,
|
|
31796
32023
|
{
|
|
31797
32024
|
gap: "4",
|
|
@@ -31806,8 +32033,8 @@ var init_MwebHLSViewTitle = __esm({
|
|
|
31806
32033
|
backgroundColor: "$surface_dim"
|
|
31807
32034
|
}
|
|
31808
32035
|
},
|
|
31809
|
-
/* @__PURE__ */
|
|
31810
|
-
/* @__PURE__ */
|
|
32036
|
+
/* @__PURE__ */ import_react197.default.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, "About Session"),
|
|
32037
|
+
/* @__PURE__ */ import_react197.default.createElement(
|
|
31811
32038
|
Flex,
|
|
31812
32039
|
{
|
|
31813
32040
|
onClick: toggleDetailsPane,
|
|
@@ -31817,11 +32044,11 @@ var init_MwebHLSViewTitle = __esm({
|
|
|
31817
32044
|
"&:hover": { opacity: "0.8" }
|
|
31818
32045
|
}
|
|
31819
32046
|
},
|
|
31820
|
-
/* @__PURE__ */
|
|
32047
|
+
/* @__PURE__ */ import_react197.default.createElement(import_react_icons94.ChevronDownIcon, null)
|
|
31821
32048
|
)
|
|
31822
32049
|
);
|
|
31823
32050
|
}
|
|
31824
|
-
return /* @__PURE__ */
|
|
32051
|
+
return /* @__PURE__ */ import_react197.default.createElement(
|
|
31825
32052
|
Flex,
|
|
31826
32053
|
{
|
|
31827
32054
|
gap: "4",
|
|
@@ -31835,8 +32062,8 @@ var init_MwebHLSViewTitle = __esm({
|
|
|
31835
32062
|
backgroundColor: "$surface_dim"
|
|
31836
32063
|
}
|
|
31837
32064
|
},
|
|
31838
|
-
/* @__PURE__ */
|
|
31839
|
-
/* @__PURE__ */
|
|
32065
|
+
/* @__PURE__ */ import_react197.default.createElement(Logo, null),
|
|
32066
|
+
/* @__PURE__ */ import_react197.default.createElement(Flex, { direction: "column" }, title ? /* @__PURE__ */ import_react197.default.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, title) : null, /* @__PURE__ */ import_react197.default.createElement(Flex, null, /* @__PURE__ */ import_react197.default.createElement(RoomDetailsRow, { details }), description ? /* @__PURE__ */ import_react197.default.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" }, onClick: toggleDetailsPane }, "\xA0...more") : null))
|
|
31840
32067
|
);
|
|
31841
32068
|
};
|
|
31842
32069
|
}
|
|
@@ -31847,17 +32074,17 @@ var HLSView_exports = {};
|
|
|
31847
32074
|
__export(HLSView_exports, {
|
|
31848
32075
|
default: () => HLSView_default
|
|
31849
32076
|
});
|
|
31850
|
-
var
|
|
32077
|
+
var import_react198, import_react_use44, import_hls_player3, import_screenfull3, import_ts_pattern12, import_react_sdk99, import_react_icons95, hlsPlayer, toastMap, ToggleChat, HLSView, HLSView_default;
|
|
31851
32078
|
var init_HLSView = __esm({
|
|
31852
32079
|
"src/Prebuilt/layouts/HLSView.jsx"() {
|
|
31853
32080
|
"use strict";
|
|
31854
32081
|
init_define_process_env();
|
|
31855
|
-
|
|
31856
|
-
|
|
32082
|
+
import_react198 = __toESM(require("react"));
|
|
32083
|
+
import_react_use44 = require("react-use");
|
|
31857
32084
|
import_hls_player3 = require("@100mslive/hls-player");
|
|
31858
32085
|
import_screenfull3 = __toESM(require("screenfull"));
|
|
31859
32086
|
import_ts_pattern12 = require("ts-pattern");
|
|
31860
|
-
|
|
32087
|
+
import_react_sdk99 = require("@100mslive/react-sdk");
|
|
31861
32088
|
import_react_icons95 = require("@100mslive/react-icons");
|
|
31862
32089
|
init_ChatToggle();
|
|
31863
32090
|
init_HlsStatsOverlay();
|
|
@@ -31884,12 +32111,12 @@ var init_HLSView = __esm({
|
|
|
31884
32111
|
toastMap = {};
|
|
31885
32112
|
ToggleChat = ({ isFullScreen = false }) => {
|
|
31886
32113
|
const { elements } = useRoomLayoutConferencingScreen();
|
|
31887
|
-
const sidepane = (0,
|
|
32114
|
+
const sidepane = (0, import_react_sdk99.useHMSStore)((0, import_react_sdk99.selectAppData)(APP_DATA.sidePane));
|
|
31888
32115
|
const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
|
|
31889
32116
|
const showChat = !!(elements == null ? void 0 : elements.chat);
|
|
31890
|
-
const isMobile = (0,
|
|
31891
|
-
const hmsActions = (0,
|
|
31892
|
-
(0,
|
|
32117
|
+
const isMobile = (0, import_react_use44.useMedia)(config.media.md);
|
|
32118
|
+
const hmsActions = (0, import_react_sdk99.useHMSActions)();
|
|
32119
|
+
(0, import_react198.useEffect)(() => {
|
|
31893
32120
|
(0, import_ts_pattern12.match)({ sidepane, isMobile, showChat, isFullScreen }).with({ isFullScreen: true }, () => {
|
|
31894
32121
|
hmsActions.setAppData(APP_DATA.sidePane, "");
|
|
31895
32122
|
}).with({ isMobile: true, showChat: true, sidepane: import_ts_pattern12.P.when((value) => !value) }, () => {
|
|
@@ -31903,48 +32130,48 @@ var init_HLSView = __esm({
|
|
|
31903
32130
|
};
|
|
31904
32131
|
HLSView = () => {
|
|
31905
32132
|
var _a8, _b7, _c, _d, _e, _f, _g;
|
|
31906
|
-
const videoRef = (0,
|
|
31907
|
-
const hlsViewRef = (0,
|
|
32133
|
+
const videoRef = (0, import_react198.useRef)(null);
|
|
32134
|
+
const hlsViewRef = (0, import_react198.useRef)();
|
|
31908
32135
|
const { elements } = useRoomLayoutConferencingScreen();
|
|
31909
|
-
const hlsState = (0,
|
|
31910
|
-
const enablHlsStats = (0,
|
|
31911
|
-
const notification = (0,
|
|
31912
|
-
const hmsActions = (0,
|
|
32136
|
+
const hlsState = (0, import_react_sdk99.useHMSStore)(import_react_sdk99.selectHLSState);
|
|
32137
|
+
const enablHlsStats = (0, import_react_sdk99.useHMSStore)((0, import_react_sdk99.selectAppData)(APP_DATA.hlsStats));
|
|
32138
|
+
const notification = (0, import_react_sdk99.useHMSNotifications)(import_react_sdk99.HMSNotificationTypes.POLL_STOPPED);
|
|
32139
|
+
const hmsActions = (0, import_react_sdk99.useHMSActions)();
|
|
31913
32140
|
const { themeType } = useTheme();
|
|
31914
|
-
const [streamEnded, setStreamEnded] = (0,
|
|
31915
|
-
let [hlsStatsState, setHlsStatsState] = (0,
|
|
32141
|
+
const [streamEnded, setStreamEnded] = (0, import_react198.useState)(false);
|
|
32142
|
+
let [hlsStatsState, setHlsStatsState] = (0, import_react198.useState)(null);
|
|
31916
32143
|
const hlsUrl = (_a8 = hlsState.variants[0]) == null ? void 0 : _a8.url;
|
|
31917
|
-
const [availableLayers, setAvailableLayers] = (0,
|
|
31918
|
-
const [isVideoLive, setIsVideoLive] = (0,
|
|
31919
|
-
const [isCaptionEnabled, setIsCaptionEnabled] = (0,
|
|
31920
|
-
const [hasCaptions, setHasCaptions] = (0,
|
|
31921
|
-
const [currentSelectedQuality, setCurrentSelectedQuality] = (0,
|
|
31922
|
-
const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = (0,
|
|
31923
|
-
const [hoverControlsVisible, setHoverControlsVisible] = (0,
|
|
32144
|
+
const [availableLayers, setAvailableLayers] = (0, import_react198.useState)([]);
|
|
32145
|
+
const [isVideoLive, setIsVideoLive] = (0, import_react198.useState)(true);
|
|
32146
|
+
const [isCaptionEnabled, setIsCaptionEnabled] = (0, import_react198.useState)(true);
|
|
32147
|
+
const [hasCaptions, setHasCaptions] = (0, import_react198.useState)(false);
|
|
32148
|
+
const [currentSelectedQuality, setCurrentSelectedQuality] = (0, import_react198.useState)(null);
|
|
32149
|
+
const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = (0, import_react198.useState)(false);
|
|
32150
|
+
const [hoverControlsVisible, setHoverControlsVisible] = (0, import_react198.useState)({
|
|
31924
32151
|
seekForward: false,
|
|
31925
32152
|
pausePlay: false,
|
|
31926
32153
|
seekBackward: false
|
|
31927
32154
|
});
|
|
31928
|
-
const [isPaused, setIsPaused] = (0,
|
|
31929
|
-
const [show, toggle] = (0,
|
|
31930
|
-
const lastHlsUrl = (0,
|
|
31931
|
-
const vanillaStore = (0,
|
|
31932
|
-
const [controlsVisible, setControlsVisible] = (0,
|
|
31933
|
-
const [isUserSelectedAuto, setIsUserSelectedAuto] = (0,
|
|
31934
|
-
const [qualityDropDownOpen, setQualityDropDownOpen] = (0,
|
|
31935
|
-
const controlsRef = (0,
|
|
31936
|
-
const controlsTimerRef = (0,
|
|
31937
|
-
const [seekProgress, setSeekProgress] = (0,
|
|
32155
|
+
const [isPaused, setIsPaused] = (0, import_react198.useState)(false);
|
|
32156
|
+
const [show, toggle] = (0, import_react_use44.useToggle)(false);
|
|
32157
|
+
const lastHlsUrl = (0, import_react_use44.usePrevious)(hlsUrl);
|
|
32158
|
+
const vanillaStore = (0, import_react_sdk99.useHMSVanillaStore)();
|
|
32159
|
+
const [controlsVisible, setControlsVisible] = (0, import_react198.useState)(true);
|
|
32160
|
+
const [isUserSelectedAuto, setIsUserSelectedAuto] = (0, import_react198.useState)(true);
|
|
32161
|
+
const [qualityDropDownOpen, setQualityDropDownOpen] = (0, import_react198.useState)(false);
|
|
32162
|
+
const controlsRef = (0, import_react198.useRef)(null);
|
|
32163
|
+
const controlsTimerRef = (0, import_react198.useRef)();
|
|
32164
|
+
const [seekProgress, setSeekProgress] = (0, import_react198.useState)(false);
|
|
31938
32165
|
const isFullScreenSupported = import_screenfull3.default.isEnabled;
|
|
31939
32166
|
const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
|
|
31940
32167
|
const showChat = !!(elements == null ? void 0 : elements.chat);
|
|
31941
|
-
const isMobile = (0,
|
|
32168
|
+
const isMobile = (0, import_react_use44.useMedia)(config.media.md);
|
|
31942
32169
|
const isLandscape = useIsLandscape();
|
|
31943
|
-
const isFullScreen = (0,
|
|
32170
|
+
const isFullScreen = (0, import_react_use44.useFullscreen)(hlsViewRef, show, {
|
|
31944
32171
|
onClose: () => toggle(false)
|
|
31945
32172
|
});
|
|
31946
|
-
const [showLoader, setShowLoader] = (0,
|
|
31947
|
-
(0,
|
|
32173
|
+
const [showLoader, setShowLoader] = (0, import_react198.useState)(false);
|
|
32174
|
+
(0, import_react198.useEffect)(() => {
|
|
31948
32175
|
const videoEl = videoRef.current;
|
|
31949
32176
|
const showLoader2 = () => setShowLoader(true);
|
|
31950
32177
|
const hideLoader = () => setShowLoader(false);
|
|
@@ -31955,12 +32182,12 @@ var init_HLSView = __esm({
|
|
|
31955
32182
|
videoEl == null ? void 0 : videoEl.removeEventListener("waiting", showLoader2);
|
|
31956
32183
|
};
|
|
31957
32184
|
}, []);
|
|
31958
|
-
(0,
|
|
32185
|
+
(0, import_react198.useEffect)(() => {
|
|
31959
32186
|
if (streamEnded && lastHlsUrl !== hlsUrl) {
|
|
31960
32187
|
setStreamEnded(false);
|
|
31961
32188
|
}
|
|
31962
32189
|
}, [hlsUrl, streamEnded, lastHlsUrl]);
|
|
31963
|
-
(0,
|
|
32190
|
+
(0, import_react198.useEffect)(() => {
|
|
31964
32191
|
if (!notification)
|
|
31965
32192
|
return;
|
|
31966
32193
|
const toastID = toastMap == null ? void 0 : toastMap[notification.data.id];
|
|
@@ -31969,7 +32196,7 @@ var init_HLSView = __esm({
|
|
|
31969
32196
|
delete toastMap[notification.data.id];
|
|
31970
32197
|
}
|
|
31971
32198
|
}, [notification]);
|
|
31972
|
-
(0,
|
|
32199
|
+
(0, import_react198.useEffect)(() => {
|
|
31973
32200
|
const videoElem = videoRef.current;
|
|
31974
32201
|
const setStreamEndedCallback = () => {
|
|
31975
32202
|
setStreamEnded(true);
|
|
@@ -31980,7 +32207,7 @@ var init_HLSView = __esm({
|
|
|
31980
32207
|
videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
|
|
31981
32208
|
};
|
|
31982
32209
|
}, [hlsUrl]);
|
|
31983
|
-
const handleQuality = (0,
|
|
32210
|
+
const handleQuality = (0, import_react198.useCallback)(
|
|
31984
32211
|
(quality) => {
|
|
31985
32212
|
var _a9;
|
|
31986
32213
|
if (hlsPlayer) {
|
|
@@ -31991,7 +32218,7 @@ var init_HLSView = __esm({
|
|
|
31991
32218
|
[availableLayers]
|
|
31992
32219
|
//eslint-disable-line
|
|
31993
32220
|
);
|
|
31994
|
-
(0,
|
|
32221
|
+
(0, import_react198.useEffect)(() => {
|
|
31995
32222
|
let videoEl = videoRef.current;
|
|
31996
32223
|
const manifestLoadedHandler = ({ layers }) => {
|
|
31997
32224
|
setAvailableLayers(layers);
|
|
@@ -32014,12 +32241,12 @@ var init_HLSView = __esm({
|
|
|
32014
32241
|
const parsedPayload = parsePayload(payload);
|
|
32015
32242
|
if (parsedPayload.startsWith("poll:")) {
|
|
32016
32243
|
const pollId = parsedPayload.substr(parsedPayload.indexOf(":") + 1);
|
|
32017
|
-
const poll = vanillaStore.getState((0,
|
|
32018
|
-
const pollStartedBy = vanillaStore.getState((0,
|
|
32244
|
+
const poll = vanillaStore.getState((0, import_react_sdk99.selectPollByID)(pollId));
|
|
32245
|
+
const pollStartedBy = vanillaStore.getState((0, import_react_sdk99.selectPeerNameByID)(poll.startedBy)) || "Participant";
|
|
32019
32246
|
if (!toastMap[pollId]) {
|
|
32020
32247
|
const toastID = ToastManager.addToast({
|
|
32021
32248
|
title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,
|
|
32022
|
-
action: /* @__PURE__ */
|
|
32249
|
+
action: /* @__PURE__ */ import_react198.default.createElement(
|
|
32023
32250
|
Button,
|
|
32024
32251
|
{
|
|
32025
32252
|
onClick: () => {
|
|
@@ -32104,7 +32331,7 @@ var init_HLSView = __esm({
|
|
|
32104
32331
|
};
|
|
32105
32332
|
}
|
|
32106
32333
|
}, [hlsUrl, vanillaStore, hmsActions]);
|
|
32107
|
-
(0,
|
|
32334
|
+
(0, import_react198.useEffect)(() => {
|
|
32108
32335
|
const onHLSStats = (state) => setHlsStatsState(state);
|
|
32109
32336
|
if (enablHlsStats) {
|
|
32110
32337
|
hlsPlayer == null ? void 0 : hlsPlayer.on(import_hls_player3.HMSHLSPlayerEvents.STATS, onHLSStats);
|
|
@@ -32126,7 +32353,7 @@ var init_HLSView = __esm({
|
|
|
32126
32353
|
const sfnOverlayClose = () => {
|
|
32127
32354
|
hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);
|
|
32128
32355
|
};
|
|
32129
|
-
(0,
|
|
32356
|
+
(0, import_react198.useEffect)(() => {
|
|
32130
32357
|
if (controlsVisible && isFullScreen && !qualityDropDownOpen) {
|
|
32131
32358
|
if (controlsTimerRef.current) {
|
|
32132
32359
|
clearTimeout(controlsTimerRef.current);
|
|
@@ -32146,7 +32373,7 @@ var init_HLSView = __esm({
|
|
|
32146
32373
|
}
|
|
32147
32374
|
};
|
|
32148
32375
|
}, [controlsVisible, isFullScreen, seekProgress, qualityDropDownOpen]);
|
|
32149
|
-
const onSeekTo = (0,
|
|
32376
|
+
const onSeekTo = (0, import_react198.useCallback)(
|
|
32150
32377
|
(seek) => {
|
|
32151
32378
|
var _a9;
|
|
32152
32379
|
(0, import_ts_pattern12.match)({ isLandscape, isMobile, seek }).with({ seek: -10, isMobile: false, isLandscape: false }, () => {
|
|
@@ -32168,10 +32395,10 @@ var init_HLSView = __esm({
|
|
|
32168
32395
|
},
|
|
32169
32396
|
[hoverControlsVisible, isLandscape, isMobile]
|
|
32170
32397
|
);
|
|
32171
|
-
const onDoubleClickHandler = (0,
|
|
32398
|
+
const onDoubleClickHandler = (0, import_react198.useCallback)(
|
|
32172
32399
|
(event) => {
|
|
32173
32400
|
var _a9;
|
|
32174
|
-
if (!(isMobile || isLandscape) || ((_a9 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a9.playlist_type) !==
|
|
32401
|
+
if (!(isMobile || isLandscape) || ((_a9 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a9.playlist_type) !== import_react_sdk99.HLSPlaylistType.DVR) {
|
|
32175
32402
|
return;
|
|
32176
32403
|
}
|
|
32177
32404
|
const sidePercentage = event.screenX * 100 / event.target.clientWidth;
|
|
@@ -32195,9 +32422,9 @@ var init_HLSView = __esm({
|
|
|
32195
32422
|
},
|
|
32196
32423
|
[hlsState == null ? void 0 : hlsState.variants, hoverControlsVisible, isLandscape, isMobile, onSeekTo]
|
|
32197
32424
|
);
|
|
32198
|
-
const onClickHandler = (0,
|
|
32425
|
+
const onClickHandler = (0, import_react198.useCallback)(() => __async(void 0, null, function* () {
|
|
32199
32426
|
var _a9;
|
|
32200
|
-
(0, import_ts_pattern12.match)({ isMobile, isLandscape, playlist_type: (_a9 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a9.playlist_type }).with({ playlist_type:
|
|
32427
|
+
(0, import_ts_pattern12.match)({ isMobile, isLandscape, playlist_type: (_a9 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a9.playlist_type }).with({ playlist_type: import_react_sdk99.HLSPlaylistType.DVR, isMobile: false, isLandscape: false }, () => __async(void 0, null, function* () {
|
|
32201
32428
|
if (isPaused) {
|
|
32202
32429
|
yield hlsPlayer == null ? void 0 : hlsPlayer.play();
|
|
32203
32430
|
} else {
|
|
@@ -32213,7 +32440,7 @@ var init_HLSView = __esm({
|
|
|
32213
32440
|
}
|
|
32214
32441
|
).otherwise(() => null);
|
|
32215
32442
|
}), [hlsState == null ? void 0 : hlsState.variants, isLandscape, isMobile, isPaused]);
|
|
32216
|
-
const onHoverHandler = (0,
|
|
32443
|
+
const onHoverHandler = (0, import_react198.useCallback)(
|
|
32217
32444
|
(event) => {
|
|
32218
32445
|
event.preventDefault();
|
|
32219
32446
|
if (isMobile || isLandscape) {
|
|
@@ -32236,7 +32463,7 @@ var init_HLSView = __esm({
|
|
|
32236
32463
|
);
|
|
32237
32464
|
const keyHandler = useKeyboardHandler(isPaused, hlsPlayer);
|
|
32238
32465
|
if (!hlsUrl || streamEnded) {
|
|
32239
|
-
return /* @__PURE__ */
|
|
32466
|
+
return /* @__PURE__ */ import_react198.default.createElement(import_react198.default.Fragment, null, /* @__PURE__ */ import_react198.default.createElement(ToggleChat, null), hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */ import_react198.default.createElement(Box, { css: { position: "fixed", left: "$4", top: "$4", zIndex: 11 } }, /* @__PURE__ */ import_react198.default.createElement(LeaveRoom, { screenType: "hls_live_streaming", container: hlsViewRef.current })), /* @__PURE__ */ import_react198.default.createElement(
|
|
32240
32467
|
Flex,
|
|
32241
32468
|
{
|
|
32242
32469
|
key: "hls-viewer",
|
|
@@ -32248,10 +32475,10 @@ var init_HLSView = __esm({
|
|
|
32248
32475
|
flex: isLandscape ? "2 1 0" : "1 1 0"
|
|
32249
32476
|
}
|
|
32250
32477
|
},
|
|
32251
|
-
/* @__PURE__ */
|
|
32478
|
+
/* @__PURE__ */ import_react198.default.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ import_react198.default.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ import_react198.default.createElement(import_react_icons95.ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ import_react198.default.createElement(import_react_icons95.GoLiveIcon, { height: 56, width: 56 })), /* @__PURE__ */ import_react198.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_react198.default.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, streamEnded ? "Have a nice day!" : "Sit back and relax"))
|
|
32252
32479
|
));
|
|
32253
32480
|
}
|
|
32254
|
-
return /* @__PURE__ */
|
|
32481
|
+
return /* @__PURE__ */ import_react198.default.createElement(
|
|
32255
32482
|
Flex,
|
|
32256
32483
|
{
|
|
32257
32484
|
key: "hls-viewer",
|
|
@@ -32269,8 +32496,8 @@ var init_HLSView = __esm({
|
|
|
32269
32496
|
}
|
|
32270
32497
|
}
|
|
32271
32498
|
},
|
|
32272
|
-
hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */
|
|
32273
|
-
/* @__PURE__ */
|
|
32499
|
+
hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */ import_react198.default.createElement(Box, { css: { position: "fixed", left: "$4", top: "$4", zIndex: 11 } }, /* @__PURE__ */ import_react198.default.createElement(LeaveRoom, { screenType: "hls_live_streaming", container: hlsViewRef.current })),
|
|
32500
|
+
/* @__PURE__ */ import_react198.default.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ import_react198.default.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ import_react198.default.createElement(
|
|
32274
32501
|
Flex,
|
|
32275
32502
|
{
|
|
32276
32503
|
id: "hls-player-container",
|
|
@@ -32286,14 +32513,14 @@ var init_HLSView = __esm({
|
|
|
32286
32513
|
},
|
|
32287
32514
|
onKeyDown: (event) => __async(void 0, null, function* () {
|
|
32288
32515
|
var _a9;
|
|
32289
|
-
if (((_a9 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a9.playlist_type) ===
|
|
32516
|
+
if (((_a9 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a9.playlist_type) === import_react_sdk99.HLSPlaylistType.DVR) {
|
|
32290
32517
|
yield keyHandler(event);
|
|
32291
32518
|
}
|
|
32292
32519
|
}),
|
|
32293
32520
|
tabIndex: "0"
|
|
32294
32521
|
},
|
|
32295
|
-
!(isMobile || isLandscape) && /* @__PURE__ */
|
|
32296
|
-
showLoader && /* @__PURE__ */
|
|
32522
|
+
!(isMobile || isLandscape) && /* @__PURE__ */ import_react198.default.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
|
|
32523
|
+
showLoader && /* @__PURE__ */ import_react198.default.createElement(
|
|
32297
32524
|
Flex,
|
|
32298
32525
|
{
|
|
32299
32526
|
align: "center",
|
|
@@ -32302,9 +32529,9 @@ var init_HLSView = __esm({
|
|
|
32302
32529
|
position: "absolute"
|
|
32303
32530
|
}
|
|
32304
32531
|
},
|
|
32305
|
-
/* @__PURE__ */
|
|
32532
|
+
/* @__PURE__ */ import_react198.default.createElement(Loading, { width: 72, height: 72 })
|
|
32306
32533
|
),
|
|
32307
|
-
/* @__PURE__ */
|
|
32534
|
+
/* @__PURE__ */ import_react198.default.createElement(
|
|
32308
32535
|
HMSVideoPlayer.Root,
|
|
32309
32536
|
{
|
|
32310
32537
|
ref: videoRef,
|
|
@@ -32316,7 +32543,7 @@ var init_HLSView = __esm({
|
|
|
32316
32543
|
onDoubleClickHandler(e);
|
|
32317
32544
|
}
|
|
32318
32545
|
},
|
|
32319
|
-
/* @__PURE__ */
|
|
32546
|
+
/* @__PURE__ */ import_react198.default.createElement(import_react198.default.Fragment, null, !(isMobile || isLandscape) && /* @__PURE__ */ import_react198.default.createElement(
|
|
32320
32547
|
Flex,
|
|
32321
32548
|
{
|
|
32322
32549
|
align: "center",
|
|
@@ -32330,7 +32557,7 @@ var init_HLSView = __esm({
|
|
|
32330
32557
|
size: "100%"
|
|
32331
32558
|
}
|
|
32332
32559
|
},
|
|
32333
|
-
!showLoader && ((_b7 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b7.playlist_type) ===
|
|
32560
|
+
!showLoader && ((_b7 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b7.playlist_type) === import_react_sdk99.HLSPlaylistType.DVR && /* @__PURE__ */ import_react198.default.createElement(
|
|
32334
32561
|
HMSVideoPlayer.PlayPauseSeekControls.Overlay,
|
|
32335
32562
|
{
|
|
32336
32563
|
isPaused,
|
|
@@ -32338,14 +32565,14 @@ var init_HLSView = __esm({
|
|
|
32338
32565
|
hoverControlsVisible
|
|
32339
32566
|
}
|
|
32340
32567
|
)
|
|
32341
|
-
), isMobile || isLandscape ? /* @__PURE__ */
|
|
32568
|
+
), isMobile || isLandscape ? /* @__PURE__ */ import_react198.default.createElement(import_react198.default.Fragment, null, !showLoader && ((_c = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _c.playlist_type) === import_react_sdk99.HLSPlaylistType.DVR && /* @__PURE__ */ import_react198.default.createElement(
|
|
32342
32569
|
HMSVideoPlayer.PlayPauseSeekControls.Overlay,
|
|
32343
32570
|
{
|
|
32344
32571
|
isPaused,
|
|
32345
32572
|
showControls: controlsVisible,
|
|
32346
32573
|
hoverControlsVisible
|
|
32347
32574
|
}
|
|
32348
|
-
), /* @__PURE__ */
|
|
32575
|
+
), /* @__PURE__ */ import_react198.default.createElement(
|
|
32349
32576
|
Flex,
|
|
32350
32577
|
{
|
|
32351
32578
|
ref: controlsRef,
|
|
@@ -32363,7 +32590,7 @@ var init_HLSView = __esm({
|
|
|
32363
32590
|
opacity: controlsVisible ? `1` : "0"
|
|
32364
32591
|
}
|
|
32365
32592
|
},
|
|
32366
|
-
/* @__PURE__ */
|
|
32593
|
+
/* @__PURE__ */ import_react198.default.createElement(
|
|
32367
32594
|
HMSVideoPlayer.Controls.Root,
|
|
32368
32595
|
{
|
|
32369
32596
|
css: {
|
|
@@ -32371,7 +32598,7 @@ var init_HLSView = __esm({
|
|
|
32371
32598
|
},
|
|
32372
32599
|
onClick: (e) => e.stopPropagation()
|
|
32373
32600
|
},
|
|
32374
|
-
/* @__PURE__ */
|
|
32601
|
+
/* @__PURE__ */ import_react198.default.createElement(HMSVideoPlayer.Controls.Right, null, (isLandscape || isMobile && isFullScreen) && showChat && /* @__PURE__ */ import_react198.default.createElement(
|
|
32375
32602
|
ChatToggle,
|
|
32376
32603
|
{
|
|
32377
32604
|
onClick: () => {
|
|
@@ -32383,7 +32610,7 @@ var init_HLSView = __esm({
|
|
|
32383
32610
|
}, 0);
|
|
32384
32611
|
}
|
|
32385
32612
|
}
|
|
32386
|
-
), hasCaptions && !isHlsAutoplayBlocked && /* @__PURE__ */
|
|
32613
|
+
), hasCaptions && !isHlsAutoplayBlocked && /* @__PURE__ */ import_react198.default.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? /* @__PURE__ */ import_react198.default.createElement(
|
|
32387
32614
|
HLSQualitySelector,
|
|
32388
32615
|
{
|
|
32389
32616
|
layers: availableLayers,
|
|
@@ -32394,9 +32621,9 @@ var init_HLSView = __esm({
|
|
|
32394
32621
|
isAuto: isUserSelectedAuto,
|
|
32395
32622
|
containerRef: hlsViewRef.current
|
|
32396
32623
|
}
|
|
32397
|
-
) : null, /* @__PURE__ */
|
|
32624
|
+
) : null, /* @__PURE__ */ import_react198.default.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }))
|
|
32398
32625
|
)
|
|
32399
|
-
)) : null, controlsVisible && /* @__PURE__ */
|
|
32626
|
+
)) : null, controlsVisible && /* @__PURE__ */ import_react198.default.createElement(
|
|
32400
32627
|
Flex,
|
|
32401
32628
|
{
|
|
32402
32629
|
ref: controlsRef,
|
|
@@ -32405,7 +32632,7 @@ var init_HLSView = __esm({
|
|
|
32405
32632
|
align: "start",
|
|
32406
32633
|
css: {
|
|
32407
32634
|
position: "absolute",
|
|
32408
|
-
bottom: isFullScreen && ((_d = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _d.playlist_type) ===
|
|
32635
|
+
bottom: isFullScreen && ((_d = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _d.playlist_type) === import_react_sdk99.HLSPlaylistType.DVR ? "$8" : "0",
|
|
32409
32636
|
left: "0",
|
|
32410
32637
|
zIndex: 1,
|
|
32411
32638
|
background: isMobile || isLandscape ? "" : `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
|
|
@@ -32415,8 +32642,8 @@ var init_HLSView = __esm({
|
|
|
32415
32642
|
transition: "visibility 0s 0.5s, opacity 0.5s linear"
|
|
32416
32643
|
}
|
|
32417
32644
|
},
|
|
32418
|
-
((_e = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _e.playlist_type) ===
|
|
32419
|
-
/* @__PURE__ */
|
|
32645
|
+
((_e = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _e.playlist_type) === import_react_sdk99.HLSPlaylistType.DVR ? /* @__PURE__ */ import_react198.default.createElement(HMSVideoPlayer.Progress, { seekProgress, setSeekProgress }) : null,
|
|
32646
|
+
/* @__PURE__ */ import_react198.default.createElement(
|
|
32420
32647
|
HMSVideoPlayer.Controls.Root,
|
|
32421
32648
|
{
|
|
32422
32649
|
css: {
|
|
@@ -32424,7 +32651,7 @@ var init_HLSView = __esm({
|
|
|
32424
32651
|
},
|
|
32425
32652
|
onClick: (e) => e.stopPropagation()
|
|
32426
32653
|
},
|
|
32427
|
-
/* @__PURE__ */
|
|
32654
|
+
/* @__PURE__ */ import_react198.default.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ import_react198.default.createElement(import_react198.default.Fragment, null, ((_f = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _f.playlist_type) === import_react_sdk99.HLSPlaylistType.DVR ? /* @__PURE__ */ import_react198.default.createElement(import_react198.default.Fragment, null, /* @__PURE__ */ import_react198.default.createElement(HMSVideoPlayer.PlayPauseSeekControls.Button, { isPaused, onSeekTo }), !isVideoLive ? /* @__PURE__ */ import_react198.default.createElement(HMSVideoPlayer.Duration, null) : null) : null, /* @__PURE__ */ import_react198.default.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ import_react198.default.createElement(
|
|
32428
32655
|
IconButton,
|
|
32429
32656
|
{
|
|
32430
32657
|
css: { px: "$2" },
|
|
@@ -32436,7 +32663,7 @@ var init_HLSView = __esm({
|
|
|
32436
32663
|
key: "jump-to-live_btn",
|
|
32437
32664
|
"data-testid": "jump-to-live_btn"
|
|
32438
32665
|
},
|
|
32439
|
-
/* @__PURE__ */
|
|
32666
|
+
/* @__PURE__ */ import_react198.default.createElement(Tooltip, { title: isVideoLive ? "Live" : "Go to Live", side: "top" }, /* @__PURE__ */ import_react198.default.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ import_react198.default.createElement(
|
|
32440
32667
|
Box,
|
|
32441
32668
|
{
|
|
32442
32669
|
css: {
|
|
@@ -32446,7 +32673,7 @@ var init_HLSView = __esm({
|
|
|
32446
32673
|
r: "$1"
|
|
32447
32674
|
}
|
|
32448
32675
|
}
|
|
32449
|
-
), /* @__PURE__ */
|
|
32676
|
+
), /* @__PURE__ */ import_react198.default.createElement(
|
|
32450
32677
|
Text,
|
|
32451
32678
|
{
|
|
32452
32679
|
variant: "$body1",
|
|
@@ -32457,8 +32684,8 @@ var init_HLSView = __esm({
|
|
|
32457
32684
|
},
|
|
32458
32685
|
isVideoLive ? "LIVE" : "GO LIVE"
|
|
32459
32686
|
)))
|
|
32460
|
-
), (isMobile || isLandscape) && !isVideoLive && ((_g = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _g.playlist_type) ===
|
|
32461
|
-
/* @__PURE__ */
|
|
32687
|
+
), (isMobile || isLandscape) && !isVideoLive && ((_g = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _g.playlist_type) === import_react_sdk99.HLSPlaylistType.DVR ? /* @__PURE__ */ import_react198.default.createElement(HMSVideoPlayer.Duration, null) : null),
|
|
32688
|
+
/* @__PURE__ */ import_react198.default.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && !(isMobile || isLandscape) && /* @__PURE__ */ import_react198.default.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !(isMobile || isLandscape) ? /* @__PURE__ */ import_react198.default.createElement(
|
|
32462
32689
|
HLSQualitySelector,
|
|
32463
32690
|
{
|
|
32464
32691
|
layers: availableLayers,
|
|
@@ -32468,13 +32695,13 @@ var init_HLSView = __esm({
|
|
|
32468
32695
|
onQualityChange: handleQuality,
|
|
32469
32696
|
isAuto: isUserSelectedAuto
|
|
32470
32697
|
}
|
|
32471
|
-
) : null, isFullScreenSupported ? /* @__PURE__ */
|
|
32698
|
+
) : null, isFullScreenSupported ? /* @__PURE__ */ import_react198.default.createElement(FullScreenButton2, { isFullScreen, onToggle: toggle }) : null)
|
|
32472
32699
|
)
|
|
32473
32700
|
))
|
|
32474
32701
|
)
|
|
32475
32702
|
)),
|
|
32476
|
-
/* @__PURE__ */
|
|
32477
|
-
isMobile && !isFullScreen && /* @__PURE__ */
|
|
32703
|
+
/* @__PURE__ */ import_react198.default.createElement(ToggleChat, { isFullScreen }),
|
|
32704
|
+
isMobile && !isFullScreen && /* @__PURE__ */ import_react198.default.createElement(HLSViewTitle, null)
|
|
32478
32705
|
);
|
|
32479
32706
|
};
|
|
32480
32707
|
HLSView_default = HLSView;
|
|
@@ -32482,14 +32709,14 @@ var init_HLSView = __esm({
|
|
|
32482
32709
|
});
|
|
32483
32710
|
|
|
32484
32711
|
// src/Prebuilt/layouts/VideoStreamingSection.tsx
|
|
32485
|
-
var
|
|
32712
|
+
var import_react199, import_ts_pattern13, import_react_sdk100, HLSView2, VideoStreamingSection;
|
|
32486
32713
|
var init_VideoStreamingSection = __esm({
|
|
32487
32714
|
"src/Prebuilt/layouts/VideoStreamingSection.tsx"() {
|
|
32488
32715
|
"use strict";
|
|
32489
32716
|
init_define_process_env();
|
|
32490
|
-
|
|
32717
|
+
import_react199 = __toESM(require("react"));
|
|
32491
32718
|
import_ts_pattern13 = require("ts-pattern");
|
|
32492
|
-
|
|
32719
|
+
import_react_sdk100 = require("@100mslive/react-sdk");
|
|
32493
32720
|
init_FullPageProgress();
|
|
32494
32721
|
init_GridLayout();
|
|
32495
32722
|
init_Layout();
|
|
@@ -32497,26 +32724,27 @@ var init_VideoStreamingSection = __esm({
|
|
|
32497
32724
|
init_PDFView();
|
|
32498
32725
|
init_SidePane();
|
|
32499
32726
|
init_WaitingView();
|
|
32727
|
+
init_CaptionsViewer();
|
|
32500
32728
|
init_useUISettings();
|
|
32501
32729
|
init_useCloseScreenshareWhiteboard();
|
|
32502
32730
|
init_hooks();
|
|
32503
|
-
HLSView2 =
|
|
32731
|
+
HLSView2 = import_react199.default.lazy(() => Promise.resolve().then(() => (init_HLSView(), HLSView_exports)));
|
|
32504
32732
|
VideoStreamingSection = ({
|
|
32505
32733
|
screenType,
|
|
32506
32734
|
elements,
|
|
32507
32735
|
hideControls = false
|
|
32508
32736
|
}) => {
|
|
32509
32737
|
var _a8;
|
|
32510
|
-
const localPeerRole = (0,
|
|
32511
|
-
const isConnected = (0,
|
|
32512
|
-
const hmsActions = (0,
|
|
32738
|
+
const localPeerRole = (0, import_react_sdk100.useHMSStore)(import_react_sdk100.selectLocalPeerRoleName);
|
|
32739
|
+
const isConnected = (0, import_react_sdk100.useHMSStore)(import_react_sdk100.selectIsConnectedToRoom);
|
|
32740
|
+
const hmsActions = (0, import_react_sdk100.useHMSActions)();
|
|
32513
32741
|
const waitingViewerRole = useWaitingViewerRole();
|
|
32514
32742
|
const urlToIframe = useUrlToEmbed();
|
|
32515
32743
|
const pdfAnnotatorActive = usePDFConfig();
|
|
32516
32744
|
const isMobileHLSStream = useMobileHLSStream();
|
|
32517
32745
|
const isLandscapeHLSStream = useLandscapeHLSStream();
|
|
32518
32746
|
useCloseScreenshareWhiteboard();
|
|
32519
|
-
(0,
|
|
32747
|
+
(0, import_react199.useEffect)(() => {
|
|
32520
32748
|
if (!isConnected) {
|
|
32521
32749
|
return;
|
|
32522
32750
|
}
|
|
@@ -32531,7 +32759,7 @@ var init_VideoStreamingSection = __esm({
|
|
|
32531
32759
|
if (!localPeerRole) {
|
|
32532
32760
|
return null;
|
|
32533
32761
|
}
|
|
32534
|
-
return /* @__PURE__ */
|
|
32762
|
+
return /* @__PURE__ */ import_react199.default.createElement(import_react199.Suspense, { fallback: /* @__PURE__ */ import_react199.default.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ import_react199.default.createElement(
|
|
32535
32763
|
Flex,
|
|
32536
32764
|
{
|
|
32537
32765
|
css: {
|
|
@@ -32545,21 +32773,22 @@ var init_VideoStreamingSection = __esm({
|
|
|
32545
32773
|
{
|
|
32546
32774
|
screenType: "hls_live_streaming"
|
|
32547
32775
|
},
|
|
32548
|
-
() => /* @__PURE__ */
|
|
32776
|
+
() => /* @__PURE__ */ import_react199.default.createElement(HLSView2, null)
|
|
32549
32777
|
).when(
|
|
32550
32778
|
({ localPeerRole: localPeerRole2 }) => localPeerRole2 === waitingViewerRole,
|
|
32551
|
-
() => /* @__PURE__ */
|
|
32779
|
+
() => /* @__PURE__ */ import_react199.default.createElement(WaitingView, null)
|
|
32552
32780
|
).when(
|
|
32553
32781
|
({ pdfAnnotatorActive: pdfAnnotatorActive2 }) => !!pdfAnnotatorActive2,
|
|
32554
|
-
() => /* @__PURE__ */
|
|
32782
|
+
() => /* @__PURE__ */ import_react199.default.createElement(PDFView, null)
|
|
32555
32783
|
).when(
|
|
32556
32784
|
({ urlToIframe: urlToIframe2 }) => !!urlToIframe2,
|
|
32557
|
-
() => /* @__PURE__ */
|
|
32785
|
+
() => /* @__PURE__ */ import_react199.default.createElement(EmbedView, null)
|
|
32558
32786
|
).otherwise(() => {
|
|
32559
32787
|
var _a9;
|
|
32560
|
-
return /* @__PURE__ */
|
|
32788
|
+
return /* @__PURE__ */ import_react199.default.createElement(GridLayout, __spreadValues({}, (_a9 = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a9.grid));
|
|
32561
32789
|
}),
|
|
32562
|
-
/* @__PURE__ */
|
|
32790
|
+
/* @__PURE__ */ import_react199.default.createElement(CaptionsViewer, null),
|
|
32791
|
+
/* @__PURE__ */ import_react199.default.createElement(
|
|
32563
32792
|
Box,
|
|
32564
32793
|
{
|
|
32565
32794
|
css: {
|
|
@@ -32571,7 +32800,7 @@ var init_VideoStreamingSection = __esm({
|
|
|
32571
32800
|
overflowY: "clip"
|
|
32572
32801
|
}
|
|
32573
32802
|
},
|
|
32574
|
-
/* @__PURE__ */
|
|
32803
|
+
/* @__PURE__ */ import_react199.default.createElement(
|
|
32575
32804
|
SidePane_default,
|
|
32576
32805
|
{
|
|
32577
32806
|
screenType,
|
|
@@ -32586,13 +32815,13 @@ var init_VideoStreamingSection = __esm({
|
|
|
32586
32815
|
});
|
|
32587
32816
|
|
|
32588
32817
|
// src/Prebuilt/components/Header/RoomDetailsHeader.tsx
|
|
32589
|
-
var
|
|
32818
|
+
var import_react200, import_react_use45, import_react_icons96, RoomDetailsHeader;
|
|
32590
32819
|
var init_RoomDetailsHeader = __esm({
|
|
32591
32820
|
"src/Prebuilt/components/Header/RoomDetailsHeader.tsx"() {
|
|
32592
32821
|
"use strict";
|
|
32593
32822
|
init_define_process_env();
|
|
32594
|
-
|
|
32595
|
-
|
|
32823
|
+
import_react200 = __toESM(require("react"));
|
|
32824
|
+
import_react_use45 = require("react-use");
|
|
32596
32825
|
import_react_icons96 = require("@100mslive/react-icons");
|
|
32597
32826
|
init_Layout();
|
|
32598
32827
|
init_Text2();
|
|
@@ -32603,33 +32832,33 @@ var init_RoomDetailsHeader = __esm({
|
|
|
32603
32832
|
init_constants();
|
|
32604
32833
|
RoomDetailsHeader = () => {
|
|
32605
32834
|
const { title, description } = useRoomLayoutHeader();
|
|
32606
|
-
const isMobile = (0,
|
|
32835
|
+
const isMobile = (0, import_react_use45.useMedia)(config.media.md);
|
|
32607
32836
|
const clipLength = 30;
|
|
32608
32837
|
const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
|
|
32609
32838
|
const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
|
|
32610
32839
|
if (!title && !description || isMobile && !title) {
|
|
32611
32840
|
return null;
|
|
32612
32841
|
}
|
|
32613
|
-
return /* @__PURE__ */
|
|
32842
|
+
return /* @__PURE__ */ import_react200.default.createElement(Flex, { direction: isMobile ? "row" : "column", css: { ml: "$8", alignItems: isMobile ? "center" : "start" } }, /* @__PURE__ */ import_react200.default.createElement(Text, { variant: "sm", css: { c: "$on_surface_high", fontWeight: "$semiBold" } }, title), !isMobile && /* @__PURE__ */ import_react200.default.createElement(Flex, { align: "end", css: { color: "$on_surface_high" } }, /* @__PURE__ */ import_react200.default.createElement(Text, { variant: "xs", css: { c: "$on_surface_medium" } }, description.slice(0, clipLength)), description.length > clipLength ? /* @__PURE__ */ import_react200.default.createElement(
|
|
32614
32843
|
"span",
|
|
32615
32844
|
{
|
|
32616
32845
|
style: { fontWeight: "600", fontSize: "12px", cursor: "pointer", lineHeight: "1rem" },
|
|
32617
32846
|
onClick: toggleDetailsPane
|
|
32618
32847
|
},
|
|
32619
32848
|
"\xA0...more"
|
|
32620
|
-
) : null), isMobile && description ? /* @__PURE__ */
|
|
32849
|
+
) : null), isMobile && description ? /* @__PURE__ */ import_react200.default.createElement(Flex, { css: { color: "$on_surface_medium" } }, /* @__PURE__ */ import_react200.default.createElement(import_react_icons96.ChevronRightIcon, { height: 16, width: 16, onClick: toggleDetailsSheet })) : null);
|
|
32621
32850
|
};
|
|
32622
32851
|
}
|
|
32623
32852
|
});
|
|
32624
32853
|
|
|
32625
32854
|
// src/Prebuilt/components/Header/common.jsx
|
|
32626
|
-
var
|
|
32855
|
+
var import_react201, import_react_sdk101, import_react_icons97, CamaraFlipActions, AudioActions, AudioSelectionSheet, SelectWithLabel;
|
|
32627
32856
|
var init_common2 = __esm({
|
|
32628
32857
|
"src/Prebuilt/components/Header/common.jsx"() {
|
|
32629
32858
|
"use strict";
|
|
32630
32859
|
init_define_process_env();
|
|
32631
|
-
|
|
32632
|
-
|
|
32860
|
+
import_react201 = __toESM(require("react"));
|
|
32861
|
+
import_react_sdk101 = require("@100mslive/react-sdk");
|
|
32633
32862
|
import_react_icons97 = require("@100mslive/react-icons");
|
|
32634
32863
|
init_Divider2();
|
|
32635
32864
|
init_Label2();
|
|
@@ -32639,16 +32868,16 @@ var init_common2 = __esm({
|
|
|
32639
32868
|
init_IconButton3();
|
|
32640
32869
|
init_ToastManager();
|
|
32641
32870
|
CamaraFlipActions = () => {
|
|
32642
|
-
const actions = (0,
|
|
32643
|
-
const { allDevices } = (0,
|
|
32871
|
+
const actions = (0, import_react_sdk101.useHMSActions)();
|
|
32872
|
+
const { allDevices } = (0, import_react_sdk101.useDevices)();
|
|
32644
32873
|
const { videoInput } = allDevices;
|
|
32645
|
-
const isVideoOn = (0,
|
|
32646
|
-
const videoTrackId = (0,
|
|
32647
|
-
const localVideoTrack = (0,
|
|
32874
|
+
const isVideoOn = (0, import_react_sdk101.useHMSStore)(import_react_sdk101.selectIsLocalVideoEnabled);
|
|
32875
|
+
const videoTrackId = (0, import_react_sdk101.useHMSStore)(import_react_sdk101.selectLocalVideoTrackID);
|
|
32876
|
+
const localVideoTrack = (0, import_react_sdk101.useHMSStore)((0, import_react_sdk101.selectVideoTrackByID)(videoTrackId));
|
|
32648
32877
|
if (!videoInput || !(videoInput == null ? void 0 : videoInput.length) || !(localVideoTrack == null ? void 0 : localVideoTrack.facingMode)) {
|
|
32649
32878
|
return null;
|
|
32650
32879
|
}
|
|
32651
|
-
return /* @__PURE__ */
|
|
32880
|
+
return /* @__PURE__ */ import_react201.default.createElement(Box, null, /* @__PURE__ */ import_react201.default.createElement(
|
|
32652
32881
|
IconButton_default,
|
|
32653
32882
|
{
|
|
32654
32883
|
disabled: !isVideoOn,
|
|
@@ -32663,11 +32892,11 @@ var init_common2 = __esm({
|
|
|
32663
32892
|
}
|
|
32664
32893
|
})
|
|
32665
32894
|
},
|
|
32666
|
-
/* @__PURE__ */
|
|
32895
|
+
/* @__PURE__ */ import_react201.default.createElement(import_react_icons97.CameraFlipIcon, null)
|
|
32667
32896
|
));
|
|
32668
32897
|
};
|
|
32669
32898
|
AudioActions = () => {
|
|
32670
|
-
const { allDevices, selectedDeviceIDs, updateDevice } = (0,
|
|
32899
|
+
const { allDevices, selectedDeviceIDs, updateDevice } = (0, import_react_sdk101.useDevices)();
|
|
32671
32900
|
const shouldShowAudioOutput = "setSinkId" in HTMLMediaElement.prototype;
|
|
32672
32901
|
const { audioInput, audioOutput } = allDevices;
|
|
32673
32902
|
let availableAudioDevices = audioInput;
|
|
@@ -32676,19 +32905,19 @@ var init_common2 = __esm({
|
|
|
32676
32905
|
availableAudioDevices = audioOutput;
|
|
32677
32906
|
selectedAudio = selectedDeviceIDs.audioOutput;
|
|
32678
32907
|
}
|
|
32679
|
-
const hmsActions = (0,
|
|
32908
|
+
const hmsActions = (0, import_react_sdk101.useHMSActions)();
|
|
32680
32909
|
const audioFiltered = availableAudioDevices == null ? void 0 : availableAudioDevices.find((item) => !!item.label);
|
|
32681
32910
|
const currentSelection = availableAudioDevices == null ? void 0 : availableAudioDevices.find((item) => item.deviceId === selectedAudio);
|
|
32682
32911
|
if (!audioFiltered) {
|
|
32683
32912
|
return null;
|
|
32684
32913
|
}
|
|
32685
|
-
let AudioIcon = /* @__PURE__ */
|
|
32914
|
+
let AudioIcon = /* @__PURE__ */ import_react201.default.createElement(import_react_icons97.SpeakerIcon, null);
|
|
32686
32915
|
if (currentSelection && currentSelection.label.toLowerCase().includes("bluetooth")) {
|
|
32687
|
-
AudioIcon = /* @__PURE__ */
|
|
32916
|
+
AudioIcon = /* @__PURE__ */ import_react201.default.createElement(import_react_icons97.BluetoothIcon, null);
|
|
32688
32917
|
} else if (currentSelection && currentSelection.label.toLowerCase().includes("wired")) {
|
|
32689
|
-
AudioIcon = /* @__PURE__ */
|
|
32918
|
+
AudioIcon = /* @__PURE__ */ import_react201.default.createElement(import_react_icons97.HeadphonesIcon, null);
|
|
32690
32919
|
}
|
|
32691
|
-
return /* @__PURE__ */
|
|
32920
|
+
return /* @__PURE__ */ import_react201.default.createElement(
|
|
32692
32921
|
AudioSelectionSheet,
|
|
32693
32922
|
{
|
|
32694
32923
|
audioDevices: availableAudioDevices,
|
|
@@ -32697,7 +32926,7 @@ var init_common2 = __esm({
|
|
|
32697
32926
|
try {
|
|
32698
32927
|
yield updateDevice({
|
|
32699
32928
|
deviceId,
|
|
32700
|
-
deviceType: shouldShowAudioOutput ?
|
|
32929
|
+
deviceType: shouldShowAudioOutput ? import_react_sdk101.DeviceType.audioOutput : import_react_sdk101.DeviceType.audioInput
|
|
32701
32930
|
});
|
|
32702
32931
|
} catch (e) {
|
|
32703
32932
|
ToastManager.addToast({
|
|
@@ -32707,19 +32936,19 @@ var init_common2 = __esm({
|
|
|
32707
32936
|
}
|
|
32708
32937
|
})
|
|
32709
32938
|
},
|
|
32710
|
-
/* @__PURE__ */
|
|
32939
|
+
/* @__PURE__ */ import_react201.default.createElement(
|
|
32711
32940
|
Box,
|
|
32712
32941
|
{
|
|
32713
32942
|
onClick: () => __async(void 0, null, function* () {
|
|
32714
32943
|
yield hmsActions.refreshDevices();
|
|
32715
32944
|
})
|
|
32716
32945
|
},
|
|
32717
|
-
/* @__PURE__ */
|
|
32946
|
+
/* @__PURE__ */ import_react201.default.createElement(IconButton_default, null, AudioIcon, " ")
|
|
32718
32947
|
)
|
|
32719
32948
|
);
|
|
32720
32949
|
};
|
|
32721
32950
|
AudioSelectionSheet = ({ audioDevices, audioSelected, onChange, children }) => {
|
|
32722
|
-
return /* @__PURE__ */
|
|
32951
|
+
return /* @__PURE__ */ import_react201.default.createElement(Sheet.Root, null, /* @__PURE__ */ import_react201.default.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ import_react201.default.createElement(Sheet.Content, null, /* @__PURE__ */ import_react201.default.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ import_react201.default.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ import_react201.default.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio"), /* @__PURE__ */ import_react201.default.createElement(Sheet.Close, null, /* @__PURE__ */ import_react201.default.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ import_react201.default.createElement(import_react_icons97.CrossIcon, null))))), /* @__PURE__ */ import_react201.default.createElement(HorizontalDivider, null), /* @__PURE__ */ import_react201.default.createElement(
|
|
32723
32952
|
Flex,
|
|
32724
32953
|
{
|
|
32725
32954
|
direction: "column",
|
|
@@ -32730,7 +32959,7 @@ var init_common2 = __esm({
|
|
|
32730
32959
|
}
|
|
32731
32960
|
},
|
|
32732
32961
|
audioDevices.map((audioDevice) => {
|
|
32733
|
-
return /* @__PURE__ */
|
|
32962
|
+
return /* @__PURE__ */ import_react201.default.createElement(
|
|
32734
32963
|
SelectWithLabel,
|
|
32735
32964
|
{
|
|
32736
32965
|
key: audioDevice.deviceId,
|
|
@@ -32743,8 +32972,8 @@ var init_common2 = __esm({
|
|
|
32743
32972
|
})
|
|
32744
32973
|
)));
|
|
32745
32974
|
};
|
|
32746
|
-
SelectWithLabel = ({ label, icon = /* @__PURE__ */
|
|
32747
|
-
return /* @__PURE__ */
|
|
32975
|
+
SelectWithLabel = ({ label, icon = /* @__PURE__ */ import_react201.default.createElement(import_react201.default.Fragment, null), checked, id, onChange }) => {
|
|
32976
|
+
return /* @__PURE__ */ import_react201.default.createElement(
|
|
32748
32977
|
Flex,
|
|
32749
32978
|
{
|
|
32750
32979
|
align: "center",
|
|
@@ -32756,7 +32985,7 @@ var init_common2 = __esm({
|
|
|
32756
32985
|
},
|
|
32757
32986
|
onClick: onChange
|
|
32758
32987
|
},
|
|
32759
|
-
/* @__PURE__ */
|
|
32988
|
+
/* @__PURE__ */ import_react201.default.createElement(
|
|
32760
32989
|
Label3,
|
|
32761
32990
|
{
|
|
32762
32991
|
htmlFor: id,
|
|
@@ -32774,33 +33003,33 @@ var init_common2 = __esm({
|
|
|
32774
33003
|
icon,
|
|
32775
33004
|
label
|
|
32776
33005
|
),
|
|
32777
|
-
checked && /* @__PURE__ */
|
|
33006
|
+
checked && /* @__PURE__ */ import_react201.default.createElement(import_react_icons97.CheckIcon, { width: 24, height: 24 })
|
|
32778
33007
|
);
|
|
32779
33008
|
};
|
|
32780
33009
|
}
|
|
32781
33010
|
});
|
|
32782
33011
|
|
|
32783
33012
|
// src/Prebuilt/components/Header/Header.tsx
|
|
32784
|
-
var
|
|
33013
|
+
var import_react202, import_react_use46, import_react_sdk102, Header2;
|
|
32785
33014
|
var init_Header = __esm({
|
|
32786
33015
|
"src/Prebuilt/components/Header/Header.tsx"() {
|
|
32787
33016
|
"use strict";
|
|
32788
33017
|
init_define_process_env();
|
|
32789
|
-
|
|
32790
|
-
|
|
32791
|
-
|
|
33018
|
+
import_react202 = __toESM(require("react"));
|
|
33019
|
+
import_react_use46 = require("react-use");
|
|
33020
|
+
import_react_sdk102 = require("@100mslive/react-sdk");
|
|
32792
33021
|
init_src();
|
|
32793
33022
|
init_HeaderComponents();
|
|
32794
33023
|
init_RoomDetailsHeader();
|
|
32795
33024
|
init_StreamActions();
|
|
32796
33025
|
init_common2();
|
|
32797
33026
|
Header2 = () => {
|
|
32798
|
-
const roomState = (0,
|
|
32799
|
-
const isMobile = (0,
|
|
32800
|
-
if (roomState !==
|
|
32801
|
-
return /* @__PURE__ */
|
|
33027
|
+
const roomState = (0, import_react_sdk102.useHMSStore)(import_react_sdk102.selectRoomState);
|
|
33028
|
+
const isMobile = (0, import_react_use46.useMedia)(config.media.md);
|
|
33029
|
+
if (roomState !== import_react_sdk102.HMSRoomState.Connected) {
|
|
33030
|
+
return /* @__PURE__ */ import_react202.default.createElement(import_react202.default.Fragment, null);
|
|
32802
33031
|
}
|
|
32803
|
-
return /* @__PURE__ */
|
|
33032
|
+
return /* @__PURE__ */ import_react202.default.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ import_react202.default.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ import_react202.default.createElement(Logo, null), /* @__PURE__ */ import_react202.default.createElement(RoomDetailsHeader, null), /* @__PURE__ */ import_react202.default.createElement(SpeakerTag, null), isMobile && /* @__PURE__ */ import_react202.default.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ import_react202.default.createElement(LiveStatus, null), /* @__PURE__ */ import_react202.default.createElement(RecordingStatus, null), /* @__PURE__ */ import_react202.default.createElement(RecordingPauseStatus, null))), /* @__PURE__ */ import_react202.default.createElement(
|
|
32804
33033
|
Flex,
|
|
32805
33034
|
{
|
|
32806
33035
|
align: "center",
|
|
@@ -32810,8 +33039,8 @@ var init_Header = __esm({
|
|
|
32810
33039
|
gap: "$4"
|
|
32811
33040
|
}
|
|
32812
33041
|
},
|
|
32813
|
-
/* @__PURE__ */
|
|
32814
|
-
isMobile ? /* @__PURE__ */
|
|
33042
|
+
/* @__PURE__ */ import_react202.default.createElement(StreamActions, null),
|
|
33043
|
+
isMobile ? /* @__PURE__ */ import_react202.default.createElement(import_react202.default.Fragment, null, /* @__PURE__ */ import_react202.default.createElement(CamaraFlipActions, null), /* @__PURE__ */ import_react202.default.createElement(AudioActions, null)) : null
|
|
32815
33044
|
));
|
|
32816
33045
|
};
|
|
32817
33046
|
}
|
|
@@ -32827,25 +33056,25 @@ var init_Header2 = __esm({
|
|
|
32827
33056
|
});
|
|
32828
33057
|
|
|
32829
33058
|
// src/Prebuilt/components/PreviousRoleInMetadata.tsx
|
|
32830
|
-
var
|
|
33059
|
+
var import_react203, import_react_sdk103, PreviousRoleInMetadata;
|
|
32831
33060
|
var init_PreviousRoleInMetadata = __esm({
|
|
32832
33061
|
"src/Prebuilt/components/PreviousRoleInMetadata.tsx"() {
|
|
32833
33062
|
"use strict";
|
|
32834
33063
|
init_define_process_env();
|
|
32835
|
-
|
|
32836
|
-
|
|
33064
|
+
import_react203 = require("react");
|
|
33065
|
+
import_react_sdk103 = require("@100mslive/react-sdk");
|
|
32837
33066
|
init_useMetadata();
|
|
32838
33067
|
PreviousRoleInMetadata = () => {
|
|
32839
|
-
const vanillaStore = (0,
|
|
33068
|
+
const vanillaStore = (0, import_react_sdk103.useHMSVanillaStore)();
|
|
32840
33069
|
const { updateMetaData } = useMyMetadata();
|
|
32841
|
-
(0,
|
|
32842
|
-
let previousRole = vanillaStore.getState(
|
|
33070
|
+
(0, import_react203.useEffect)(() => {
|
|
33071
|
+
let previousRole = vanillaStore.getState(import_react_sdk103.selectLocalPeerRoleName);
|
|
32843
33072
|
const unsubscribe = vanillaStore.subscribe((currentRole) => {
|
|
32844
33073
|
if (previousRole !== currentRole && currentRole) {
|
|
32845
33074
|
updateMetaData({ prevRole: previousRole });
|
|
32846
33075
|
previousRole = currentRole;
|
|
32847
33076
|
}
|
|
32848
|
-
},
|
|
33077
|
+
}, import_react_sdk103.selectLocalPeerRoleName);
|
|
32849
33078
|
return unsubscribe;
|
|
32850
33079
|
}, [vanillaStore]);
|
|
32851
33080
|
return null;
|
|
@@ -32853,206 +33082,13 @@ var init_PreviousRoleInMetadata = __esm({
|
|
|
32853
33082
|
}
|
|
32854
33083
|
});
|
|
32855
33084
|
|
|
32856
|
-
// src/Prebuilt/plugins/CaptionsViewer.tsx
|
|
32857
|
-
var import_react203, import_react_sdk103, SimpleQueue, Queue, CaptionMaintainerQueue, TranscriptView, CaptionsViewer;
|
|
32858
|
-
var init_CaptionsViewer = __esm({
|
|
32859
|
-
"src/Prebuilt/plugins/CaptionsViewer.tsx"() {
|
|
32860
|
-
"use strict";
|
|
32861
|
-
init_define_process_env();
|
|
32862
|
-
import_react203 = __toESM(require("react"));
|
|
32863
|
-
import_react_sdk103 = require("@100mslive/react-sdk");
|
|
32864
|
-
init_Layout();
|
|
32865
|
-
init_Text2();
|
|
32866
|
-
SimpleQueue = class {
|
|
32867
|
-
constructor(capacity = 3, MAX_STORAGE_TIME = 5e3) {
|
|
32868
|
-
this.capacity = capacity;
|
|
32869
|
-
this.MAX_STORAGE_TIME = MAX_STORAGE_TIME;
|
|
32870
|
-
this.storage = [];
|
|
32871
|
-
}
|
|
32872
|
-
enqueue(data3) {
|
|
32873
|
-
var _a8;
|
|
32874
|
-
if (this.size() === this.capacity && this.storage[this.size() - 1].final) {
|
|
32875
|
-
this.dequeue(this.storage[this.size() - 1]);
|
|
32876
|
-
}
|
|
32877
|
-
if (this.size() === 0) {
|
|
32878
|
-
this.storage.push(data3);
|
|
32879
|
-
this.addTimeout(this.storage[this.size() - 1], data3.final);
|
|
32880
|
-
return;
|
|
32881
|
-
}
|
|
32882
|
-
if (this.size() > 0 && ((_a8 = this.storage[this.size() - 1]) == null ? void 0 : _a8.final) === true) {
|
|
32883
|
-
this.storage.push(data3);
|
|
32884
|
-
this.addTimeout(this.storage[this.size() - 1], data3.final);
|
|
32885
|
-
return;
|
|
32886
|
-
}
|
|
32887
|
-
this.storage[this.size() - 1].transcript = data3.transcript;
|
|
32888
|
-
this.storage[this.size() - 1].final = data3.final;
|
|
32889
|
-
this.storage[this.size() - 1].end = data3.end;
|
|
32890
|
-
this.addTimeout(this.storage[this.size() - 1], data3.final);
|
|
32891
|
-
}
|
|
32892
|
-
addTimeout(item, isFinal) {
|
|
32893
|
-
if (!isFinal) {
|
|
32894
|
-
return;
|
|
32895
|
-
}
|
|
32896
|
-
item.timeout = setTimeout(() => {
|
|
32897
|
-
this.dequeue(item);
|
|
32898
|
-
}, this.MAX_STORAGE_TIME);
|
|
32899
|
-
}
|
|
32900
|
-
dequeue(item) {
|
|
32901
|
-
const index = this.storage.indexOf(item);
|
|
32902
|
-
if (index === -1) {
|
|
32903
|
-
return void 0;
|
|
32904
|
-
}
|
|
32905
|
-
const removedItem = this.storage.splice(index, 1);
|
|
32906
|
-
if (removedItem.length <= 0) {
|
|
32907
|
-
return void 0;
|
|
32908
|
-
}
|
|
32909
|
-
this.clearTimeout(removedItem[0]);
|
|
32910
|
-
return item;
|
|
32911
|
-
}
|
|
32912
|
-
clearTimeout(item) {
|
|
32913
|
-
if (!item.timeout) {
|
|
32914
|
-
return;
|
|
32915
|
-
}
|
|
32916
|
-
clearTimeout(item.timeout);
|
|
32917
|
-
}
|
|
32918
|
-
peek() {
|
|
32919
|
-
if (this.size() <= 0) {
|
|
32920
|
-
return void 0;
|
|
32921
|
-
}
|
|
32922
|
-
return this.storage[0];
|
|
32923
|
-
}
|
|
32924
|
-
getTranscription() {
|
|
32925
|
-
let script = "";
|
|
32926
|
-
this.storage.forEach((value) => script += value.transcript + " ");
|
|
32927
|
-
return script;
|
|
32928
|
-
}
|
|
32929
|
-
reset() {
|
|
32930
|
-
this.storage.length = 0;
|
|
32931
|
-
}
|
|
32932
|
-
size() {
|
|
32933
|
-
return this.storage.length;
|
|
32934
|
-
}
|
|
32935
|
-
};
|
|
32936
|
-
Queue = class {
|
|
32937
|
-
constructor(capacity = 3) {
|
|
32938
|
-
this.capacity = capacity;
|
|
32939
|
-
this.storage = {};
|
|
32940
|
-
}
|
|
32941
|
-
enqueue(data3) {
|
|
32942
|
-
if (this.size() === this.capacity) {
|
|
32943
|
-
this.dequeue();
|
|
32944
|
-
}
|
|
32945
|
-
if (!this.storage[data3.peer_id]) {
|
|
32946
|
-
this.storage[data3.peer_id] = {
|
|
32947
|
-
peer_id: data3.peer_id,
|
|
32948
|
-
transcript: data3.transcript,
|
|
32949
|
-
final: data3.final,
|
|
32950
|
-
transcriptQueue: new SimpleQueue(),
|
|
32951
|
-
start: data3.start,
|
|
32952
|
-
end: data3.end
|
|
32953
|
-
};
|
|
32954
|
-
this.storage[data3.peer_id].transcriptQueue.enqueue(data3);
|
|
32955
|
-
return;
|
|
32956
|
-
}
|
|
32957
|
-
this.storage[data3.peer_id].transcriptQueue.enqueue(data3);
|
|
32958
|
-
}
|
|
32959
|
-
dequeue() {
|
|
32960
|
-
const key = Object.keys(this.storage).shift() || "";
|
|
32961
|
-
const captionData = this.storage[key];
|
|
32962
|
-
captionData.transcriptQueue.reset();
|
|
32963
|
-
delete this.storage[key];
|
|
32964
|
-
return captionData;
|
|
32965
|
-
}
|
|
32966
|
-
peek() {
|
|
32967
|
-
if (this.size() <= 0)
|
|
32968
|
-
return void 0;
|
|
32969
|
-
const key = Object.keys(this.storage).shift() || "";
|
|
32970
|
-
return this.storage[key];
|
|
32971
|
-
}
|
|
32972
|
-
findPeerData() {
|
|
32973
|
-
const keys = Object.keys(this.storage);
|
|
32974
|
-
const data3 = keys.map((key) => {
|
|
32975
|
-
const data4 = this.storage[key];
|
|
32976
|
-
const word = data4.transcriptQueue.getTranscription();
|
|
32977
|
-
return { [key]: word };
|
|
32978
|
-
});
|
|
32979
|
-
return data3;
|
|
32980
|
-
}
|
|
32981
|
-
size() {
|
|
32982
|
-
return Object.keys(this.storage).length;
|
|
32983
|
-
}
|
|
32984
|
-
};
|
|
32985
|
-
CaptionMaintainerQueue = class {
|
|
32986
|
-
constructor() {
|
|
32987
|
-
this.captionData = new Queue();
|
|
32988
|
-
}
|
|
32989
|
-
push(data3 = []) {
|
|
32990
|
-
data3.forEach((value) => {
|
|
32991
|
-
this.captionData.enqueue(value);
|
|
32992
|
-
});
|
|
32993
|
-
}
|
|
32994
|
-
};
|
|
32995
|
-
TranscriptView = ({ peer_id, data: data3 }) => {
|
|
32996
|
-
const peerName = (0, import_react_sdk103.useHMSStore)((0, import_react_sdk103.selectPeerNameByID)(peer_id));
|
|
32997
|
-
data3 = data3.trim();
|
|
32998
|
-
if (!data3)
|
|
32999
|
-
return null;
|
|
33000
|
-
return /* @__PURE__ */ import_react203.default.createElement(
|
|
33001
|
-
Text,
|
|
33002
|
-
{
|
|
33003
|
-
variant: "body2",
|
|
33004
|
-
css: {
|
|
33005
|
-
fontWeight: "$normal"
|
|
33006
|
-
}
|
|
33007
|
-
},
|
|
33008
|
-
`${peerName}: ${data3}`
|
|
33009
|
-
);
|
|
33010
|
-
};
|
|
33011
|
-
CaptionsViewer = () => {
|
|
33012
|
-
const [captionQueue] = (0, import_react203.useState)(new CaptionMaintainerQueue());
|
|
33013
|
-
const [currentData, setCurrentData] = (0, import_react203.useState)([]);
|
|
33014
|
-
(0, import_react203.useEffect)(() => {
|
|
33015
|
-
const timeInterval = setInterval(() => {
|
|
33016
|
-
var _a8;
|
|
33017
|
-
if (!captionQueue) {
|
|
33018
|
-
return;
|
|
33019
|
-
}
|
|
33020
|
-
const data3 = (_a8 = captionQueue.captionData) == null ? void 0 : _a8.findPeerData();
|
|
33021
|
-
setCurrentData(data3);
|
|
33022
|
-
}, 1e3);
|
|
33023
|
-
return () => clearInterval(timeInterval);
|
|
33024
|
-
}, [captionQueue]);
|
|
33025
|
-
(0, import_react_sdk103.useTranscript)({
|
|
33026
|
-
onTranscript: (data3) => {
|
|
33027
|
-
captionQueue && captionQueue.push(data3);
|
|
33028
|
-
}
|
|
33029
|
-
});
|
|
33030
|
-
const dataToShow = currentData.filter((data3) => {
|
|
33031
|
-
const key = Object.keys(data3)[0];
|
|
33032
|
-
if (data3[key]) {
|
|
33033
|
-
return true;
|
|
33034
|
-
}
|
|
33035
|
-
return false;
|
|
33036
|
-
});
|
|
33037
|
-
if (dataToShow.length <= 0) {
|
|
33038
|
-
return null;
|
|
33039
|
-
}
|
|
33040
|
-
return /* @__PURE__ */ import_react203.default.createElement(Flex, { direction: "column", gap: 1 }, dataToShow.map((data3, index) => {
|
|
33041
|
-
const key = Object.keys(data3)[0];
|
|
33042
|
-
return /* @__PURE__ */ import_react203.default.createElement(TranscriptView, { key: index, peer_id: key, data: data3[key] });
|
|
33043
|
-
}));
|
|
33044
|
-
};
|
|
33045
|
-
}
|
|
33046
|
-
});
|
|
33047
|
-
|
|
33048
33085
|
// src/Prebuilt/components/ConferenceScreen.tsx
|
|
33049
|
-
var import_react204,
|
|
33086
|
+
var import_react204, import_uuid12, import_react_sdk104, ConferenceScreen;
|
|
33050
33087
|
var init_ConferenceScreen = __esm({
|
|
33051
33088
|
"src/Prebuilt/components/ConferenceScreen.tsx"() {
|
|
33052
33089
|
"use strict";
|
|
33053
33090
|
init_define_process_env();
|
|
33054
33091
|
import_react204 = __toESM(require("react"));
|
|
33055
|
-
import_react_use46 = require("react-use");
|
|
33056
33092
|
import_uuid12 = require("uuid");
|
|
33057
33093
|
import_react_sdk104 = require("@100mslive/react-sdk");
|
|
33058
33094
|
init_Footer3();
|
|
@@ -33062,7 +33098,6 @@ var init_ConferenceScreen = __esm({
|
|
|
33062
33098
|
init_PIPManager();
|
|
33063
33099
|
init_RoleChangeRequestModal();
|
|
33064
33100
|
init_Layout();
|
|
33065
|
-
init_Theme();
|
|
33066
33101
|
init_AppContext();
|
|
33067
33102
|
init_VideoStreamingSection();
|
|
33068
33103
|
init_EmojiReaction();
|
|
@@ -33070,16 +33105,13 @@ var init_ConferenceScreen = __esm({
|
|
|
33070
33105
|
init_Header2();
|
|
33071
33106
|
init_PreviousRoleInMetadata();
|
|
33072
33107
|
init_RaiseHand();
|
|
33073
|
-
init_CaptionsViewer();
|
|
33074
33108
|
init_useRoomLayoutScreen();
|
|
33075
|
-
init_useSidepane();
|
|
33076
33109
|
init_useUISettings();
|
|
33077
33110
|
init_hooks();
|
|
33078
33111
|
init_constants();
|
|
33079
33112
|
ConferenceScreen = () => {
|
|
33080
|
-
var _a8, _b7, _c, _d, _e, _f
|
|
33113
|
+
var _a8, _b7, _c, _d, _e, _f;
|
|
33081
33114
|
const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
|
|
33082
|
-
const isMobile = (0, import_react_use46.useMedia)(config.media.md);
|
|
33083
33115
|
const screenProps = useRoomLayoutConferencingScreen();
|
|
33084
33116
|
const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
|
|
33085
33117
|
const roomState = (0, import_react_sdk104.useHMSStore)(import_react_sdk104.selectRoomState);
|
|
@@ -33098,9 +33130,6 @@ var init_ConferenceScreen = __esm({
|
|
|
33098
33130
|
const isMobileHLSStream = useMobileHLSStream();
|
|
33099
33131
|
const isLandscapeHLSStream = useLandscapeHLSStream();
|
|
33100
33132
|
const isMwebHLSStream = isMobileHLSStream || isLandscapeHLSStream;
|
|
33101
|
-
const isCaptionEnabled = useIsCaptionEnabled();
|
|
33102
|
-
const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
|
|
33103
|
-
const showCaptionAtTop = ((_c = (_b7 = screenProps.elements) == null ? void 0 : _b7.chat) == null ? void 0 : _c.is_overlay) && isChatOpen;
|
|
33104
33133
|
const toggleControls = () => {
|
|
33105
33134
|
var _a9;
|
|
33106
33135
|
if (((_a9 = dropdownListRef.current) == null ? void 0 : _a9.length) === 0 && isMobileDevice && !isMwebHLSStream) {
|
|
@@ -33147,35 +33176,14 @@ var init_ConferenceScreen = __esm({
|
|
|
33147
33176
|
return /* @__PURE__ */ import_react204.default.createElement(FullPageProgress_default, { text: roomState === import_react_sdk104.HMSRoomState.Connecting ? "Joining..." : "" });
|
|
33148
33177
|
}
|
|
33149
33178
|
const hideControlsForStreaming = isMwebHLSStream ? true : hideControls;
|
|
33150
|
-
return /* @__PURE__ */ import_react204.default.createElement(import_react204.default.Fragment, null, isHLSStarted ? /* @__PURE__ */ import_react204.default.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ import_react204.default.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null,
|
|
33151
|
-
Box,
|
|
33152
|
-
{
|
|
33153
|
-
css: {
|
|
33154
|
-
position: "fixed",
|
|
33155
|
-
maxWidth: isMobile ? "100%" : "40%",
|
|
33156
|
-
bottom: showCaptionAtTop ? "" : hideControlsForStreaming ? "5%" : "10%",
|
|
33157
|
-
top: showCaptionAtTop ? hideControlsForStreaming ? "5%" : "10%" : "",
|
|
33158
|
-
left: isMobile ? 0 : "50%",
|
|
33159
|
-
transform: isMobile ? "" : "translateX(-50%)",
|
|
33160
|
-
background: "#000000A3",
|
|
33161
|
-
overflow: "clip",
|
|
33162
|
-
zIndex: 10,
|
|
33163
|
-
height: "fit-content",
|
|
33164
|
-
r: "$1",
|
|
33165
|
-
p: "$6",
|
|
33166
|
-
transition: "bottom 0.3s ease-in-out",
|
|
33167
|
-
"&:empty": { display: "none" }
|
|
33168
|
-
}
|
|
33169
|
-
},
|
|
33170
|
-
/* @__PURE__ */ import_react204.default.createElement(CaptionsViewer, null)
|
|
33171
|
-
), /* @__PURE__ */ import_react204.default.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !(screenProps.hideSections.includes("header") || isMwebHLSStream) && /* @__PURE__ */ import_react204.default.createElement(
|
|
33179
|
+
return /* @__PURE__ */ import_react204.default.createElement(import_react204.default.Fragment, null, isHLSStarted ? /* @__PURE__ */ import_react204.default.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ import_react204.default.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ import_react204.default.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !(screenProps.hideSections.includes("header") || isMwebHLSStream) && /* @__PURE__ */ import_react204.default.createElement(
|
|
33172
33180
|
Box,
|
|
33173
33181
|
{
|
|
33174
33182
|
ref: headerRef,
|
|
33175
33183
|
css: {
|
|
33176
33184
|
h: "$18",
|
|
33177
33185
|
transition: "margin 0.3s ease-in-out",
|
|
33178
|
-
marginTop: hideControlsForStreaming ? `-${(
|
|
33186
|
+
marginTop: hideControlsForStreaming ? `-${(_b7 = headerRef.current) == null ? void 0 : _b7.clientHeight}px` : "none",
|
|
33179
33187
|
"@md": {
|
|
33180
33188
|
h: "$17"
|
|
33181
33189
|
}
|
|
@@ -33191,7 +33199,7 @@ var init_ConferenceScreen = __esm({
|
|
|
33191
33199
|
flex: "1 1 0",
|
|
33192
33200
|
minHeight: 0,
|
|
33193
33201
|
// @ts-ignore
|
|
33194
|
-
px: ((
|
|
33202
|
+
px: ((_e = (_d = (_c = screenProps == null ? void 0 : screenProps.elements) == null ? void 0 : _c.video_tile_layout) == null ? void 0 : _d.grid) == null ? void 0 : _e.edge_to_edge) ? 0 : "$10",
|
|
33195
33203
|
// TODO: padding to be controlled by section/element
|
|
33196
33204
|
paddingBottom: "env(safe-area-inset-bottom)",
|
|
33197
33205
|
"@lg": {
|
|
@@ -33219,7 +33227,7 @@ var init_ConferenceScreen = __esm({
|
|
|
33219
33227
|
maxHeight: "$24",
|
|
33220
33228
|
transition: "margin 0.3s ease-in-out",
|
|
33221
33229
|
bg: "$background_dim",
|
|
33222
|
-
marginBottom: hideControlsForStreaming ? `-${(
|
|
33230
|
+
marginBottom: hideControlsForStreaming ? `-${(_f = footerRef.current) == null ? void 0 : _f.clientHeight}px` : void 0,
|
|
33223
33231
|
"@md": {
|
|
33224
33232
|
maxHeight: "unset",
|
|
33225
33233
|
bg: screenProps.screenType === "hls_live_streaming" ? "transparent" : "$background_dim"
|