@100mslive/roomkit-react 0.3.8-alpha.2 → 0.3.8-alpha.4
Sign up to get free protection for your applications and to get access to all the features.
- 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"
|