diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 0000000000..674766d7ca --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1,5 @@ +@raviteja83 +@KaustubhKumar05 +@amar-1995 +@hdz-666 +@ygit \ No newline at end of file diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md new file mode 100644 index 0000000000..6ba377a75a --- /dev/null +++ b/.github/CODE_OF_CONDUCT.md @@ -0,0 +1,76 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to make participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, sex characteristics, gender identity and expression, +level of experience, education, socio-economic status, nationality, personal +appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behaviour that contributes to creating a positive environment +include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behaviour by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or + advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic + address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behaviour and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behaviour. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviours that they deem inappropriate, +threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces +when an individual is representing the project or its community. Examples of +representing a project or community include using an official project e-mail +address, posting via an official social media account or acting as an appointed +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing or otherwise unacceptable behaviour may be +reported by contacting the 100ms team. All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality concerning the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, +available at + +[homepage]: https://www.contributor-covenant.org + +For answers to common questions about this code of conduct, see + diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 049d4b5ba6..a58e397fe4 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -30,5 +30,4 @@ body: - Firefox - Chrome - Safari - - Microsoft Edge - \ No newline at end of file + - Microsoft Edge \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 0000000000..852ba8201e --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,11 @@ +blank_issues_enabled: false +contact_links: + - name: 📃 100ms Documentation + url: https://www.100ms.live/docs + about: Explore the 100ms capabilities with our Popular Guides, Demos & Blogs on 100ms Documentation page + - name: 💫 Register on 100ms Dashboard + url: https://dashboard.100ms.live/register + about: Try the gold-standard for adding live audio-video to your apps for free. + - name: 🗣️ Talk to us + url: https://www.100ms.live/contact + about: Get in touch with the 100ms team today! We are committed to helping our customers maximize the potential of our cutting-edge live video platform. Whether you need advice on how to leverage live streaming for your business, pricing information, or want to learn more about the 100ms platform, our team is here to answer all your questions and provide tailored solutions to meet your unique needs. diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml index f8e83701f3..33f595c361 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.yml +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -13,5 +13,4 @@ body: label: What's the feature? description: Describe the feature, who it would help, and link to any examples from other apps. validations: - required: true - \ No newline at end of file + required: true \ No newline at end of file diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index c5b46c9ad9..684a291339 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,11 +1,29 @@ -### Details(context, link the issue, how was the bug fixed, what does the new feature do) +# Description + +_Replace this paragraph with a description of what this PR is changing or adding, and why. Consider including before/after screenshots._ + +_List which issues are fixed by this PR. You must list at least one issue._ + +--- + +## Implementation note, gotchas, related work and Future TODOs (optional) + + -- - -### Implementation note, gotchas, related work and Future TODOs (optional) +### Pre-launch Checklist +- [ ] The [Documentation] is updated accordingly, or this PR doesn't require it. +- [ ] I updated/added relevant documentation. +- [ ] I listed at least one issue that this PR fixes in the description above. +- [ ] I added new tests to check the change I am making, or this PR is test-exempt. +- [ ] All existing and new tests are passing. ### Merging: - Squash merge to dev - Merge commit to publish-alpha and main + + + +[Documentation]: https://www.100ms.live/docs \ No newline at end of file diff --git a/.github/workflows/alpha-release.yml b/.github/workflows/alpha-release.yml index 200a536c34..a1388d3b95 100644 --- a/.github/workflows/alpha-release.yml +++ b/.github/workflows/alpha-release.yml @@ -9,7 +9,7 @@ jobs: bump_versions: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 @@ -41,10 +41,8 @@ jobs: needs: bump_versions steps: - name: Trigger Publish Packages workflow - uses: aurelien-baudet/workflow-dispatch@v2.1.1 + uses: aurelien-baudet/workflow-dispatch@v4.0.0 with: workflow: publish.yml token: ${{ secrets.GITHUB_TOKEN }} - inputs: '{ "publishFlag": "alpha" }' - - \ No newline at end of file + inputs: '{ "publishFlag": "alpha" }' \ No newline at end of file diff --git a/.github/workflows/create-release-pr.yml b/.github/workflows/create-release-pr.yml index 1aac560706..25b42a8a6f 100644 --- a/.github/workflows/create-release-pr.yml +++ b/.github/workflows/create-release-pr.yml @@ -1,4 +1,4 @@ -name: Create release PR +name: Create Release PR on: workflow_dispatch: inputs: @@ -19,7 +19,7 @@ jobs: if: github.event.inputs.versionBump != 'prerelease' && github.ref != 'refs/heads/dev' run: exit 1 - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 @@ -48,7 +48,7 @@ jobs: echo $STORE_VERSION echo "::set-output name=store_version::$(echo $STORE_VERSION)" - - uses: peter-evans/create-pull-request@v4 + - uses: peter-evans/create-pull-request@v7 with: commit-message: 'ci: update versions for release' title: 'ci: update versions for release' diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index 34ed21abac..0ace350abd 100644 --- a/.github/workflows/cypress.yml +++ b/.github/workflows/cypress.yml @@ -8,8 +8,8 @@ jobs: runs-on: ubuntu-latest if: github.event.pull_request.draft != true steps: - - uses: actions/checkout@v2 - - uses: dorny/paths-filter@v2 + - uses: actions/checkout@v4 + - uses: dorny/paths-filter@v3 id: filter with: filters: | diff --git a/.github/workflows/firstinteraction.yml b/.github/workflows/firstinteraction.yml new file mode 100644 index 0000000000..345e65ee85 --- /dev/null +++ b/.github/workflows/firstinteraction.yml @@ -0,0 +1,34 @@ +name: first-interaction + +on: + workflow_dispatch: {} + issues: + types: [opened] + pull_request: + branches: + - main + - develop + types: [opened] + +jobs: + check_for_first_interaction: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/first-interaction@main + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + issue-message: | + Hello! Thank you for filing an issue. + + Please include relevant logs or detailed description for faster resolutions. + + We really appreciate your contribution! + pr-message: | + Hello! Thank you for your contribution. + + If you are fixing a bug, please reference the issue number in the description. + + If you are implementing a feature request, please check with the maintainers that the feature will be accepted first. + + We really appreciate your contribution! diff --git a/.github/workflows/generate-docs.yml b/.github/workflows/generate-docs.yml index cf434339c9..113382818a 100644 --- a/.github/workflows/generate-docs.yml +++ b/.github/workflows/generate-docs.yml @@ -3,7 +3,7 @@ on: workflow_dispatch: workflow_call: secrets: - DOCKER_GIT_TOKEN: + DOCKER_GIT_TOKEN: required: true jobs: @@ -11,10 +11,10 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout repo - uses: actions/checkout@v2 + uses: actions/checkout@v4 - name: Use Node ${{ matrix.node }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node }} cache: 'yarn' @@ -34,7 +34,7 @@ jobs: run: yarn docs - name: checkout 100ms-docs - uses: actions/checkout@v2 + uses: actions/checkout@v4 with: token: ${{ secrets.DOCKER_GIT_TOKEN }} repository: 100mslive/100ms-docs @@ -52,9 +52,9 @@ jobs: rm -r v2 mv docs v2 mv react/docs v2/react-hooks - + - name: Create PR - uses: peter-evans/create-pull-request@v3 + uses: peter-evans/create-pull-request@v7 with: path: 100ms-docs token: ${{ secrets.DOCKER_GIT_TOKEN }} diff --git a/.github/workflows/lint-test-build.yml b/.github/workflows/lint-test-build.yml index c81b8cbf5b..92c54ad683 100644 --- a/.github/workflows/lint-test-build.yml +++ b/.github/workflows/lint-test-build.yml @@ -1,18 +1,18 @@ name: Lint, Test and Build -on: +on: push: merge_group: types: [checks_requested] - + jobs: build: runs-on: ubuntu-latest steps: - name: Checkout repo - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Setup Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: 18 cache: 'yarn' diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 64ad12c0dd..3935706aeb 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -17,8 +17,8 @@ jobs: publish_packages: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v3 + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 with: node-version: 18 registry-url: https://registry.npmjs.org/ @@ -30,7 +30,7 @@ jobs: - name: Notify slack starting if: github.event.inputs.publishFlag == 'latest' && success() id: slack # IMPORTANT: reference this step ID value in future Slack steps - env: + env: SLACK_BOT_TOKEN: ${{ secrets.SLACK_DEPLOY_BOT_TOKEN }} uses: voxmedia/github-action-slack-notify-build@v1 with: diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml index 246d2fb95b..8e9e78c8c8 100644 --- a/.github/workflows/stale.yml +++ b/.github/workflows/stale.yml @@ -8,7 +8,7 @@ jobs: stale: runs-on: ubuntu-latest steps: - - uses: actions/stale@v8 + - uses: actions/stale@v9 with: stale-issue-message: "This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days." stale-pr-message: "This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 10 days." diff --git a/.github/workflows/sync-alpha-to-main.yml b/.github/workflows/sync-alpha-to-main.yml index 34dee4d4ab..0557263d8f 100644 --- a/.github/workflows/sync-alpha-to-main.yml +++ b/.github/workflows/sync-alpha-to-main.yml @@ -9,7 +9,7 @@ jobs: pull-request: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v1 + - uses: actions/checkout@v4 - name: pull-request uses: repo-sync/pull-request@v2 if: github.event.pull_request.merged == true diff --git a/README.md b/README.md index c7c247dcd9..07fd77dc2a 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,16 @@ - # Web SDKs -This monorepo contains all the packages required to integrate 100ms on the web. +This monorepo contains all the packages required to integrate 100ms on the web. ## What is included? + The packages folder contains all the SDK's of 100ms. Here is a brief overview of them: | Directory | Package | Description | Link | |--|--|--|--| -| `hms-video-store` | `@100mslive/hms-video-store` | This package contains the core SDK and the reactive store parts. | [README](./packages/hms-video-store) | -| `react-icons` | `@100mslive/react-icons` | This contains all the icons used in the 100ms prebuilt. | [README](./packages/react-icons) | +| `hms-video-store` | `@100mslive/hms-video-store` | This package contains the core SDK and the reactive store parts. | [README](./packages/hms-video-store) | +| `react-icons` | `@100mslive/react-icons` | This contains all the icons used in the 100ms prebuilt. | [README](./packages/react-icons) | | `react-sdk` | `@100mslive/react-sdk` | This contains the base React Hooks and some commonly used functionalities as React Hooks. | [README](./packages/react-sdk) | -| `roomkit-react` | `@100mslive/roomkit-react`| This contains the React components used in the Prebuilt and the Prebuilt component itself. | [README](./packages/roomkit-react) | +| `roomkit-react` | `@100mslive/roomkit-react`| This contains the React components used in the Prebuilt and the Prebuilt component itself. | [README](./packages/roomkit-react) | | `roomkit-web` | `@100mslive/roomkit-web` | This is a web component port of the `HMSPrebuilt` component from the `roomkit-react`. If you are not using React,this can be used as a web component. | [README](./packages/roomkit-web)| For full documentation, visit [100ms.live/docs](https://www.100ms.live/docs) @@ -18,21 +18,22 @@ For full documentation, visit [100ms.live/docs](https://www.100ms.live/docs)
## How to integrate? -The 100ms SDK gives you everything you need to build scalable, high-quality live video and audio experiences. + +The 100ms SDK gives you everything you need to build scalable, high-quality live video and audio experiences. **There are two ways you can add 100ms to your apps:** 1. ## Custom UI - - 100ms SDKs are powerful and highly extensible to build and support all custom experiences and UI. - - **Related packages include:** `@100mslive/react-sdk`, `@100mslive/hms-video-store` and `@100mslive/react-icons`. - - Get started with integrating the SDK using the [How to Guide](https://www.100ms.live/docs/javascript/v2/how-to-guides/install-the-sdk/integration).
+ - 100ms SDKs are powerful and highly extensible to build and support all custom experiences and UI. + - **Related packages include:** `@100mslive/react-sdk`, `@100mslive/hms-video-store` and `@100mslive/react-icons`. + - Get started with integrating the SDK using the [How to Guide](https://www.100ms.live/docs/javascript/v2/how-to-guides/install-the-sdk/integration).
> Navigate to `react-sdk` for the base React Hooks and some commonly used functionalities by clicking [here](./packages/react-sdk). -2. ## 100ms Prebuilt - - 100ms Prebuilt is a high-level abstraction with no-code customization that enables you to embed video conferencing and/or live streaming UI—with a few lines of code. - - **Related packages include:** `roomkit-react` and `roomkit-web`. - - Get started with 100ms Prebuilt using the [Prebuilt Quickstart for Web](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart).
+2. ## 100ms Prebuilt + - 100ms Prebuilt is a high-level abstraction with no-code customization that enables you to embed video conferencing and/or live streaming UI—with a few lines of code. + - **Related packages include:** `roomkit-react` and `roomkit-web`. + - Get started with 100ms Prebuilt using the [Prebuilt Quickstart for Web](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart).
> Navigate to `roomkit-react` for the React components used in Prebuilt and the Prebuilt component itself by clicking [here](./packages/roomkit-react). @@ -40,16 +41,15 @@ The 100ms SDK gives you everything you need to build scalable, high-quality live ![Banner](prebuilt-banner.png) +### 100ms Prebuilt Cross Platform Support -### 100ms Prebuilt Cross Platform Support -| Client | Repository | Docs | Example | -|--|--|--|--| -| Web | [web-sdks](https://github.com/100mslive/web-sdks/tree/main/packages/roomkit-react) | [Link](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart) | [prebuilt-react-integration](https://github.com/100mslive/web-sdks/tree/main/examples/prebuilt-react-integration) -| Android | [100ms-android](https://github.com/100mslive/100ms-android/tree/release-v2/room-kit) | [Link](https://www.100ms.live/docs/android/v2/quickstart/prebuilt-android) | [AndroidPrebuiltDemo](https://github.com/100mslive/AndroidPrebuiltDemo) -| iOS | [100ms-roomkit-ios](https://github.com/100mslive/100ms-roomkit-ios) | [Link](https://www.100ms.live/docs/ios/v2/quickstart/prebuilt) | [100ms-roomkit-example](https://github.com/100mslive/100ms-roomkit-example) -| Flutter | [100ms-flutter](https://github.com/100mslive/100ms-flutter/tree/main/packages/hms_room_kit)| [Link](https://www.100ms.live/docs/flutter/v2/quickstart/prebuilt) | [hms_room_kit/example](https://github.com/100mslive/100ms-flutter/tree/main/packages/hms_room_kit/example) -| React Native | [100ms-react-native](https://github.com/100mslive/100ms-react-native/tree/main/packages/react-native-room-kit)| [Link](https://www.100ms.live/docs/react-native/v2/quickstart/prebuilt) | [react-native-room-kit/example](https://github.com/100mslive/100ms-react-native/tree/main/packages/react-native-room-kit/example) - +| Client | Repository | Docs | Example | +| ------------ | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| Web | [web-sdks](https://github.com/100mslive/web-sdks/tree/main/packages/roomkit-react) | [Link](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart) | [prebuilt-react-integration](https://github.com/100mslive/web-sdks/tree/main/examples/prebuilt-react-integration) | +| Android | [100ms-android](https://github.com/100mslive/100ms-android/tree/release-v2/room-kit) | [Link](https://www.100ms.live/docs/android/v2/quickstart/prebuilt-android) | [AndroidPrebuiltDemo](https://github.com/100mslive/AndroidPrebuiltDemo) | +| iOS | [100ms-roomkit-ios](https://github.com/100mslive/100ms-roomkit-ios) | [Link](https://www.100ms.live/docs/ios/v2/quickstart/prebuilt) | [100ms-roomkit-example](https://github.com/100mslive/100ms-roomkit-example) | +| Flutter | [100ms-flutter](https://github.com/100mslive/100ms-flutter/tree/main/packages/hms_room_kit) | [Link](https://www.100ms.live/docs/flutter/v2/quickstart/prebuilt) | [hms_room_kit/example](https://github.com/100mslive/100ms-flutter/tree/main/packages/hms_room_kit/example) | +| React Native | [100ms-react-native](https://github.com/100mslive/100ms-react-native/tree/main/packages/react-native-room-kit) | [Link](https://www.100ms.live/docs/react-native/v2/quickstart/prebuilt) | [react-native-room-kit/example](https://github.com/100mslive/100ms-react-native/tree/main/packages/react-native-room-kit/example) |

@@ -62,7 +62,6 @@ The 100ms SDK gives you everything you need to build scalable, high-quality live if you are using a different version in other projects, use [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating) to manage node versions. - ``` git clone https://github.com/100mslive/web-sdks.git cd web-sdks @@ -81,16 +80,14 @@ yarn dev Once you run `yarn dev`, the localhost link with the port will be generated automatically. Just get the roomCode from [100ms dashboard](https://dashboard.100ms.live) and append at the end - ### Testing Changes Locally + Run `yarn start` by navigating to the package you are making changes to, the changes should reflect in the above sample app. For example, if you are making changes in roomkit-react(prebuilt), run `yarn start` in that package. The sample app should auto reload. > Note: Make sure `yarn build` is run atleast once before using `yarn start` - -
### Deploying Your Changes @@ -100,8 +97,8 @@ Once you have forked the repository and tested your changes on the local build, - Import the fork repository - Set `examples/prebuilt-react-integration` as the root directory - Use the Create React App preset and update the build and install commands `Project Settings` to use the root level scripts - - install: `cd ../../ && yarn install` - - build: `cd ../../ && yarn build` + - install: `cd ../../ && yarn install` + - build: `cd ../../ && yarn build` For reference: @@ -109,7 +106,7 @@ For reference:
-Once the app has been deployed, you can append the room code at the end of the deployment URL to preview your changes +Once the app has been deployed, you can append the room code at the end of the deployment URL to preview your changes
@@ -142,14 +139,12 @@ import { HMSPrebuilt } from '@100mslive/roomkit-react'; ``` ## Contributing -We welcome external contributors or anyone excited to help improve 100ms SDKs. If you'd like to get involved, check out our [contribution guide](./DEVELOPER.MD), and get started exploring the codebase. -Please join us [on Discord](https://discord.com/invite/kGdmszyzq2) to discuss any new ideas and/or PRs. +We welcome external contributors or anyone excited to help improve 100ms SDKs. If you'd like to get involved, check out our [contribution guide](./DEVELOPER.MD), and get started exploring the codebase.
## Community & Support -- [GitHub Issues](https://github.com/100mslive/web-sdks/issues) - Submit any bugs or errors you encounter using the Web SDKs. -- [Discord](https://discord.com/invite/kGdmszyzq2) - Hang out with the community members, share your projects or ask questions to get help from the 100ms team. -- [Contact](https://www.100ms.live/contact) - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform. +- [GitHub Issues](https://github.com/100mslive/web-sdks/issues) - Submit any bugs or errors you encounter using the Web SDKs. +- [Contact](https://www.100ms.live/contact) - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform. diff --git a/examples/prebuilt-react-integration/README.md b/examples/prebuilt-react-integration/README.md index c0ba926c6d..244c6693f5 100644 --- a/examples/prebuilt-react-integration/README.md +++ b/examples/prebuilt-react-integration/README.md @@ -6,6 +6,3 @@ - Run `yarn && yarn build` at the root level of the repo (./web-sdks) - Then, navigate to this folder and run `yarn dev` - -### Facing a problem? -Join us on the [100ms Discord](https://discord.com/invite/kGdmszyzq2) to ask questions and get help from the 100ms team. diff --git a/packages/hms-video-store/src/device-manager/DeviceManager.ts b/packages/hms-video-store/src/device-manager/DeviceManager.ts index 41ef7972b7..fd7bfcf9f3 100644 --- a/packages/hms-video-store/src/device-manager/DeviceManager.ts +++ b/packages/hms-video-store/src/device-manager/DeviceManager.ts @@ -7,6 +7,7 @@ import { DeviceMap, HMSDeviceChangeEvent, SelectedDevices } from '../interfaces' import { getAudioDeviceCategory, HMSAudioDeviceCategory, isIOS } from '../internal'; import { HMSAudioTrackSettingsBuilder, HMSVideoTrackSettingsBuilder } from '../media/settings'; import { HMSLocalAudioTrack, HMSLocalTrack, HMSLocalVideoTrack } from '../media/tracks'; +import { HMSTrackExceptionTrackType } from '../media/tracks/HMSTrackExceptionTrackType'; import { Store } from '../sdk/store'; import HMSLogger from '../utils/logger'; import { debounce } from '../utils/timer-utils'; @@ -325,7 +326,7 @@ export class DeviceManager implements HMSDeviceManager { this.eventBus.analytics.publish( AnalyticsEventFactory.deviceChange({ selection: { audioInput: newSelection }, - error: ErrorFactory.TracksErrors.SelectedDeviceMissing('audio'), + error: ErrorFactory.TracksErrors.SelectedDeviceMissing(HMSTrackExceptionTrackType.AUDIO), devices: this.getDevices(), type: 'audioInput', }), @@ -383,7 +384,7 @@ export class DeviceManager implements HMSDeviceManager { this.eventBus.analytics.publish( AnalyticsEventFactory.deviceChange({ selection: { videoInput: newSelection }, - error: ErrorFactory.TracksErrors.SelectedDeviceMissing('video'), + error: ErrorFactory.TracksErrors.SelectedDeviceMissing(HMSTrackExceptionTrackType.VIDEO), devices: this.getDevices(), type: 'video', }), diff --git a/packages/hms-video-store/src/error/ErrorFactory.ts b/packages/hms-video-store/src/error/ErrorFactory.ts index 7345d26749..c4b258c4a8 100644 --- a/packages/hms-video-store/src/error/ErrorFactory.ts +++ b/packages/hms-video-store/src/error/ErrorFactory.ts @@ -8,6 +8,8 @@ import { ErrorCodes } from './ErrorCodes'; import { HMSAction } from './HMSAction'; import { HMSException } from './HMSException'; +import { HMSTrackException } from './HMSTrackException'; +import { HMSTrackExceptionTrackType } from '../media/tracks/HMSTrackExceptionTrackType'; import { HMSSignalMethod } from '../signal/jsonrpc/models'; const terminalActions: (HMSSignalMethod | HMSAction)[] = [ @@ -98,52 +100,56 @@ export const ErrorFactory = { TracksErrors: { GenericTrack(action: HMSAction, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.GENERIC_TRACK, 'GenericTrack', action, `[TRACK]: ${description}`, `[TRACK]: ${description}`, + HMSTrackExceptionTrackType.AUDIO_VIDEO, ); }, - CantAccessCaptureDevice(action: HMSAction, deviceInfo: string, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.CANT_ACCESS_CAPTURE_DEVICE, 'CantAccessCaptureDevice', action, `User denied permission to access capture device - ${deviceInfo}`, description, + deviceInfo as HMSTrackExceptionTrackType, ); }, DeviceNotAvailable(action: HMSAction, deviceInfo: string, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.DEVICE_NOT_AVAILABLE, 'DeviceNotAvailable', action, `[TRACK]: Capture device is no longer available - ${deviceInfo}`, description, + deviceInfo as HMSTrackExceptionTrackType, ); }, DeviceInUse(action: HMSAction, deviceInfo: string, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.DEVICE_IN_USE, 'DeviceInUse', action, `[TRACK]: Capture device is in use by another application - ${deviceInfo}`, description, + deviceInfo as HMSTrackExceptionTrackType, ); }, DeviceLostMidway(action: HMSAction, deviceInfo: string, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.DEVICE_LOST_MIDWAY, 'DeviceLostMidway', action, `Lost access to capture device midway - ${deviceInfo}`, description, + deviceInfo as HMSTrackExceptionTrackType, ); }, @@ -152,113 +158,123 @@ export const ErrorFactory = { description = '', message = `There is no media to return. Please select either video or audio or both.`, ) { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.NOTHING_TO_RETURN, 'NothingToReturn', action, message, description, + HMSTrackExceptionTrackType.AUDIO_VIDEO, ); }, InvalidVideoSettings(action: HMSAction, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.INVALID_VIDEO_SETTINGS, 'InvalidVideoSettings', action, `Cannot enable simulcast when no video settings are provided`, description, + HMSTrackExceptionTrackType.VIDEO, ); }, AutoplayBlocked(action: HMSAction, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.AUTOPLAY_ERROR, 'AutoplayBlocked', action, "Autoplay blocked because the user didn't interact with the document first", description, + HMSTrackExceptionTrackType.AUDIO, ); }, CodecChangeNotPermitted(action: HMSAction, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.CODEC_CHANGE_NOT_PERMITTED, 'CodecChangeNotPermitted', action, `Codec can't be changed mid call.`, description, + HMSTrackExceptionTrackType.AUDIO_VIDEO, ); }, OverConstrained(action: HMSAction, deviceInfo: string, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.OVER_CONSTRAINED, 'OverConstrained', action, `[TRACK]: Requested constraints cannot be satisfied with the device hardware - ${deviceInfo}`, description, + deviceInfo as HMSTrackExceptionTrackType, ); }, NoAudioDetected(action: HMSAction, description = 'Please check the mic or use another audio input') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.NO_AUDIO_DETECTED, 'NoAudioDetected', action, 'No audio input detected from microphone', description, + HMSTrackExceptionTrackType.AUDIO, ); }, SystemDeniedPermission(action: HMSAction, deviceInfo: string, description = '') { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.SYSTEM_DENIED_PERMISSION, 'SystemDeniedPermission', action, `Operating System denied permission to access capture device - ${deviceInfo}`, description, + deviceInfo as HMSTrackExceptionTrackType, ); }, CurrentTabNotShared() { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.CURRENT_TAB_NOT_SHARED, 'CurrentTabNotShared', HMSAction.TRACK, 'The app requires you to share the current tab', 'You must screen share the current tab in order to proceed', + HMSTrackExceptionTrackType.SCREEN, ); }, AudioPlaybackError(description: string) { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.AUDIO_PLAYBACK_ERROR, 'Audio playback error', HMSAction.TRACK, description, description, + HMSTrackExceptionTrackType.AUDIO, ); }, SelectedDeviceMissing(deviceType: string) { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.SELECTED_DEVICE_MISSING, 'SelectedDeviceMissing', HMSAction.TRACK, `Could not detect selected ${deviceType} device`, `Please check connection to the ${deviceType} device`, - false, + deviceType as HMSTrackExceptionTrackType, ); }, NoDataInTrack(description: string) { - return new HMSException( + return new HMSTrackException( ErrorCodes.TracksErrors.NO_DATA, 'Track does not have any data', HMSAction.TRACK, description, 'This could possibily due to another application taking priority over the access to camera or microphone or due to an incoming call', + HMSTrackExceptionTrackType.AUDIO_VIDEO, ); }, }, diff --git a/packages/hms-video-store/src/error/HMSException.ts b/packages/hms-video-store/src/error/HMSException.ts index 03c6afa687..88513d117d 100644 --- a/packages/hms-video-store/src/error/HMSException.ts +++ b/packages/hms-video-store/src/error/HMSException.ts @@ -38,13 +38,13 @@ export class HMSException extends Error implements IAnalyticsPropertiesProvider toString() { return `{ - code: ${this.code}; - name: ${this.name}; - action: ${this.action}; - message: ${this.message}; - description: ${this.description}; - isTerminal: ${this.isTerminal}; - nativeError: ${this.nativeError?.message}; - }`; + code: ${this.code}; + name: ${this.name}; + action: ${this.action}; + message: ${this.message}; + description: ${this.description}; + isTerminal: ${this.isTerminal}; + nativeError: ${this.nativeError?.message}; + }`; } } diff --git a/packages/hms-video-store/src/error/HMSTrackException.ts b/packages/hms-video-store/src/error/HMSTrackException.ts new file mode 100644 index 0000000000..1a8f9c666b --- /dev/null +++ b/packages/hms-video-store/src/error/HMSTrackException.ts @@ -0,0 +1,37 @@ +import { HMSAction } from './HMSAction'; +import { HMSException } from './HMSException'; +import { HMSTrackExceptionTrackType } from '../media/tracks/HMSTrackExceptionTrackType'; +import { HMSSignalMethod } from '../signal/jsonrpc/models'; + +export class HMSTrackException extends HMSException { + constructor( + public readonly code: number, + public name: string, + action: HMSAction | HMSSignalMethod, + public message: string, + public description: string, + public trackType: HMSTrackExceptionTrackType, + ) { + super(code, name, action, message, description, false); + } + + toAnalyticsProperties() { + return { + ...super.toAnalyticsProperties(), + track_type: this.trackType, + }; + } + + toString() { + return `{ + code: ${this.code}; + name: ${this.name}; + action: ${this.action}; + message: ${this.message}; + description: ${this.description}; + isTerminal: ${this.isTerminal}; + nativeError: ${this.nativeError?.message}; + trackType: ${this.trackType}; + }`; + } +} diff --git a/packages/hms-video-store/src/error/utils.ts b/packages/hms-video-store/src/error/utils.ts index 42dea262ce..36c5efbbbf 100644 --- a/packages/hms-video-store/src/error/utils.ts +++ b/packages/hms-video-store/src/error/utils.ts @@ -1,7 +1,7 @@ import adapter from 'webrtc-adapter'; import { ErrorFactory } from './ErrorFactory'; import { HMSAction } from './HMSAction'; -import { HMSException } from './HMSException'; +import { HMSTrackException } from './HMSTrackException'; export enum HMSGetMediaActions { UNKNOWN = 'unknown(video or audio)', @@ -13,13 +13,15 @@ export enum HMSGetMediaActions { function getDefaultError(error: string, deviceInfo: string) { const message = error.toLowerCase(); + let exception = ErrorFactory.TracksErrors.GenericTrack(HMSAction.TRACK, error); + if (message.includes('device not found')) { - return ErrorFactory.TracksErrors.DeviceNotAvailable(HMSAction.TRACK, deviceInfo, error); + exception = ErrorFactory.TracksErrors.DeviceNotAvailable(HMSAction.TRACK, deviceInfo, error); } else if (message.includes('permission denied')) { - return ErrorFactory.TracksErrors.CantAccessCaptureDevice(HMSAction.TRACK, deviceInfo, error); - } else { - return ErrorFactory.TracksErrors.GenericTrack(HMSAction.TRACK, error); + exception = ErrorFactory.TracksErrors.CantAccessCaptureDevice(HMSAction.TRACK, deviceInfo, error); } + + return exception; } /** @@ -31,7 +33,7 @@ function getDefaultError(error: string, deviceInfo: string) { * System blocked - NotAllowedError - Permission denied by system */ // eslint-disable-next-line complexity -function convertMediaErrorToHMSException(err: Error, deviceInfo = ''): HMSException { +function convertMediaErrorToHMSException(err: Error, deviceInfo = ''): HMSTrackException { /** * Note: Adapter detects all chromium browsers as 'chrome' */ @@ -70,7 +72,7 @@ function convertMediaErrorToHMSException(err: Error, deviceInfo = ''): HMSExcept } } -export function BuildGetMediaError(err: Error, deviceInfo: string): HMSException { +export function BuildGetMediaError(err: Error, deviceInfo: string): HMSTrackException { const exception = convertMediaErrorToHMSException(err, deviceInfo); exception.addNativeError(err); return exception; diff --git a/packages/hms-video-store/src/index.ts b/packages/hms-video-store/src/index.ts index e26beb60ef..8d44ae20d5 100644 --- a/packages/hms-video-store/src/index.ts +++ b/packages/hms-video-store/src/index.ts @@ -78,3 +78,5 @@ export type { } from './internal'; export * from './diagnostics'; export { DomainCategory } from './analytics/AnalyticsEventDomains'; + +export { HMSTrackExceptionTrackType } from './media/tracks/HMSTrackExceptionTrackType'; diff --git a/packages/hms-video-store/src/internal.ts b/packages/hms-video-store/src/internal.ts index 22ad33d6c9..dda7d2ba85 100644 --- a/packages/hms-video-store/src/internal.ts +++ b/packages/hms-video-store/src/internal.ts @@ -11,6 +11,7 @@ export * from './utils/media'; export * from './utils/device-error'; export * from './utils/support'; export * from './error/HMSException'; +export * from './error/HMSTrackException'; export * from './interfaces'; export * from './rtc-stats'; export * from './plugins'; diff --git a/packages/hms-video-store/src/media/tracks/HMSTrackExceptionTrackType.ts b/packages/hms-video-store/src/media/tracks/HMSTrackExceptionTrackType.ts new file mode 100644 index 0000000000..5bca9518b2 --- /dev/null +++ b/packages/hms-video-store/src/media/tracks/HMSTrackExceptionTrackType.ts @@ -0,0 +1,6 @@ +export enum HMSTrackExceptionTrackType { + AUDIO = 'audio', + VIDEO = 'video', + AUDIO_VIDEO = 'audio, video', + SCREEN = 'screen', +} diff --git a/packages/hms-video-store/src/reactive-store/adapter.ts b/packages/hms-video-store/src/reactive-store/adapter.ts index c765a4c8b3..b6c4ea7b29 100644 --- a/packages/hms-video-store/src/reactive-store/adapter.ts +++ b/packages/hms-video-store/src/reactive-store/adapter.ts @@ -24,6 +24,7 @@ import { HMSRoom, HMSScreenVideoTrack, HMSTrack, + HMSTrackException, HMSTrackFacingMode, HMSVideoTrack, } from '../schema'; @@ -203,8 +204,9 @@ export class SDKToHMS { }; } - static convertException(sdkException: sdkTypes.HMSException): HMSException { - return { + static convertException(sdkException: sdkTypes.HMSException): HMSException | HMSTrackException { + const isTrackException = 'trackType' in sdkException; + const exp = { code: sdkException.code, action: sdkException.action, name: sdkException.name, @@ -213,7 +215,12 @@ export class SDKToHMS { isTerminal: sdkException.isTerminal, nativeError: sdkException.nativeError, timestamp: new Date(), - }; + } as HMSException; + if (isTrackException) { + (exp as HMSTrackException).trackType = (sdkException as sdkTypes.HMSTrackException)?.trackType; + return exp as HMSTrackException; + } + return exp; } static convertDeviceChangeUpdate(sdkDeviceChangeEvent: sdkTypes.HMSDeviceChangeEvent): HMSDeviceChangeEvent { diff --git a/packages/hms-video-store/src/schema/error.ts b/packages/hms-video-store/src/schema/error.ts index 7a19a4a7a0..ca9dcb4572 100644 --- a/packages/hms-video-store/src/schema/error.ts +++ b/packages/hms-video-store/src/schema/error.ts @@ -1,3 +1,5 @@ +import { HMSTrackExceptionTrackType } from '../media/tracks/HMSTrackExceptionTrackType'; + /** * any mid call error notification will be in this format */ @@ -11,3 +13,7 @@ export interface HMSException { timestamp: Date; nativeError?: Error; } + +export interface HMSTrackException extends HMSException { + trackType: HMSTrackExceptionTrackType; +} diff --git a/packages/hms-video-store/src/sdk/LocalTrackManager.ts b/packages/hms-video-store/src/sdk/LocalTrackManager.ts index 64c0251a7e..70103137db 100644 --- a/packages/hms-video-store/src/sdk/LocalTrackManager.ts +++ b/packages/hms-video-store/src/sdk/LocalTrackManager.ts @@ -7,7 +7,7 @@ import { ErrorCodes } from '../error/ErrorCodes'; import { ErrorFactory } from '../error/ErrorFactory'; import { HMSAction } from '../error/HMSAction'; import { HMSException } from '../error/HMSException'; -import { BuildGetMediaError, HMSGetMediaActions } from '../error/utils'; +import { BuildGetMediaError } from '../error/utils'; import { EventBus } from '../events/EventBus'; import { HMSAudioCodec, @@ -27,6 +27,7 @@ import { HMSVideoTrackSettingsBuilder, } from '../media/settings'; import { HMSLocalStream } from '../media/streams/HMSLocalStream'; +import { HMSTrackExceptionTrackType } from '../media/tracks/HMSTrackExceptionTrackType'; import ITransportObserver from '../transport/ITransportObserver'; import HMSLogger from '../utils/logger'; import { HMSAudioContextHandler } from '../utils/media'; @@ -236,7 +237,7 @@ export class LocalTrackManager { } } catch (err) { HMSLogger.w(this.TAG, 'error in getting screenshare - ', err); - const error = BuildGetMediaError(err as Error, HMSGetMediaActions.SCREEN); + const error = BuildGetMediaError(err as Error, HMSTrackExceptionTrackType.SCREEN); this.eventBus.analytics.publish( AnalyticsEventFactory.publish({ error: error as Error, @@ -478,17 +479,17 @@ export class LocalTrackManager { } } - getErrorType(videoError: boolean, audioError: boolean): HMSGetMediaActions { + getErrorType(videoError: boolean, audioError: boolean): HMSTrackExceptionTrackType { if (videoError && audioError) { - return HMSGetMediaActions.AV; + return HMSTrackExceptionTrackType.AUDIO_VIDEO; } if (videoError) { - return HMSGetMediaActions.VIDEO; + return HMSTrackExceptionTrackType.VIDEO; } if (audioError) { - return HMSGetMediaActions.AUDIO; + return HMSTrackExceptionTrackType.AUDIO; } - return HMSGetMediaActions.UNKNOWN; + return HMSTrackExceptionTrackType.AUDIO_VIDEO; } private getEmptyTracks(fetchTrackOptions: IFetchAVTrackOptions) { diff --git a/packages/hms-video-store/src/utils/media.ts b/packages/hms-video-store/src/utils/media.ts index 025fc7a4bb..05d60e443f 100644 --- a/packages/hms-video-store/src/utils/media.ts +++ b/packages/hms-video-store/src/utils/media.ts @@ -1,12 +1,13 @@ import HMSLogger from './logger'; -import { BuildGetMediaError, HMSGetMediaActions } from '../error/utils'; +import { BuildGetMediaError } from '../error/utils'; +import { HMSTrackExceptionTrackType } from '../media/tracks/HMSTrackExceptionTrackType'; export async function getLocalStream(constraints: MediaStreamConstraints): Promise { try { const stream = await navigator.mediaDevices.getUserMedia(constraints); return stream; } catch (err) { - throw BuildGetMediaError(err as Error, HMSGetMediaActions.AV); + throw BuildGetMediaError(err as Error, HMSTrackExceptionTrackType.AUDIO_VIDEO); } } @@ -16,7 +17,7 @@ export async function getLocalScreen(constraints: MediaStreamConstraints['video' const stream = await navigator.mediaDevices.getDisplayMedia({ video: constraints, audio: false }); return stream; } catch (err) { - throw BuildGetMediaError(err as Error, HMSGetMediaActions.SCREEN); + throw BuildGetMediaError(err as Error, HMSTrackExceptionTrackType.SCREEN); } } @@ -37,7 +38,7 @@ export async function getLocalDevices(): Promise { devices.forEach(device => deviceGroups[device.kind].push(device)); return deviceGroups; } catch (err) { - throw BuildGetMediaError(err as Error, HMSGetMediaActions.AV); + throw BuildGetMediaError(err as Error, HMSTrackExceptionTrackType.AUDIO_VIDEO); } } diff --git a/packages/hms-video-store/src/utils/track.ts b/packages/hms-video-store/src/utils/track.ts index fea545dd08..6af65ce30f 100644 --- a/packages/hms-video-store/src/utils/track.ts +++ b/packages/hms-video-store/src/utils/track.ts @@ -1,5 +1,6 @@ -import { BuildGetMediaError, HMSGetMediaActions } from '../error/utils'; +import { BuildGetMediaError } from '../error/utils'; import { HMSAudioTrackSettings, HMSVideoTrackSettings } from '../media/settings'; +import { HMSTrackExceptionTrackType } from '../media/tracks/HMSTrackExceptionTrackType'; export async function getAudioTrack(settings: HMSAudioTrackSettings): Promise { try { @@ -8,7 +9,7 @@ export async function getAudioTrack(settings: HMSAudioTrackSettings): PromiseSomething's gone wrong.

Sorry, we encountered an error. Please refresh the page to continue. If you keep seeing this error, you - can ask for help on Discord. + can ask for help on Dashboard.

{shouldShowError && (
diff --git a/packages/roomkit-react/README.md b/packages/roomkit-react/README.md index 92bff98b9c..b4a8f1f1ae 100644 --- a/packages/roomkit-react/README.md +++ b/packages/roomkit-react/README.md @@ -1,7 +1,6 @@ - ![Banner](https://github.com/100mslive/web-sdks/blob/06c65259912db6ccd8617f2ecb6fef51429251ec/prebuilt-banner.png) -# Room Kit React Library +# Room Kit React Library 100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps. @@ -44,6 +43,7 @@ export default App() { For additional props, refer the [docs](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart#props-for-hmsprebuilt) ## Customisation + While we offer [a no-code way to customize Prebuilt](https://www.100ms.live/docs/get-started/v2/get-started/prebuilt/overview#customize-prebuilt), you can fork your copy of the Prebuilt component and make changes to the code to allow for more fine-tuning. Prebuilt customisations are available on [100ms Dashboard](https://dashboard.100ms.live). @@ -56,15 +56,14 @@ The `Prebuilt` folder contains the full Prebuilt implementation. ### Major Components in Prebuilt -| Component | Description | -|--|--| -| [RoomLayoutProvider](src/Prebuilt/provider/roomLayoutProvider/index.tsx) | This is a context that contains the configuration from the dashboard [customiser](https://dashboard.100ms.live/). Whatever changes are made in the dashboard customiser are available the next time you join.| -|[AppStateContext](src/Prebuilt/AppStateContext.tsx) | Contains the logic to switch between different screens, for example, Preview to Meeting, Meeting to Leave. These transitions are based on the roomState that is available from the reactive store (`useHMSStore(selectHMSRoomState)`). | -| [PreviewScreen](src/Prebuilt/components/Preview/PreviewScreen.tsx) | Contains the Preview implementation. Contains the Video tile, video, audio toggles and Virtual background and settings along with the name input.| -| [ConferenceScreen](src/Prebuilt/components/ConferenceScreen.tsx) | This contains the screen once you finish Preview and enter the meeting. This contains the header and footer and the main content.| -| [VideoStreamingSection](src/Prebuilt/layouts/VideoStreamingSection.tsx) |This is the component that contains the main video rendering components and a sidebar (Interactive features like Chat and Polls are displayed here) | -| [LeaveScreen](src/Prebuilt/components/LeaveScreen.tsx) |This is the screen that is shown when you leave the meeting | - +| Component | Description | +| ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [RoomLayoutProvider](src/Prebuilt/provider/roomLayoutProvider/index.tsx) | This is a context that contains the configuration from the dashboard [customiser](https://dashboard.100ms.live/). Whatever changes are made in the dashboard customiser are available the next time you join. | +| [AppStateContext](src/Prebuilt/AppStateContext.tsx) | Contains the logic to switch between different screens, for example, Preview to Meeting, Meeting to Leave. These transitions are based on the roomState that is available from the reactive store (`useHMSStore(selectHMSRoomState)`). | +| [PreviewScreen](src/Prebuilt/components/Preview/PreviewScreen.tsx) | Contains the Preview implementation. Contains the Video tile, video, audio toggles and Virtual background and settings along with the name input. | +| [ConferenceScreen](src/Prebuilt/components/ConferenceScreen.tsx) | This contains the screen once you finish Preview and enter the meeting. This contains the header and footer and the main content. | +| [VideoStreamingSection](src/Prebuilt/layouts/VideoStreamingSection.tsx) | This is the component that contains the main video rendering components and a sidebar (Interactive features like Chat and Polls are displayed here) | +| [LeaveScreen](src/Prebuilt/components/LeaveScreen.tsx) | This is the screen that is shown when you leave the meeting | ### Customising the Styles @@ -74,14 +73,13 @@ When [`HMSThemeProvider`](./src/Theme/ThemeProvider.tsx) is used at the top leve For components created using the base components like `Box`, `Flex`, `Button` etc, css Prop is available to modify the styles. Within the css prop, you can access the variables from the [base config](./src/Theme/base.config.ts). - ## Contributing - Make sure whatever new Component/file you create is in `Typescript`. - Don't forget to add data-testid for actionables like buttons, menus etc. -- Setup proper tooling ([ESLint](https://eslint.org/) and [Prettier](https://prettier.io/)) in your editor. +- Setup proper tooling ([ESLint](https://eslint.org/) and [Prettier](https://prettier.io/)) in your editor. - `yarn lint` will be run before you push the changes, so whenever a push fails, check if there are any lint errors. @@ -89,6 +87,6 @@ Read this [doc](../../DEVELOPER.MD) for the coding guidelines. ## Community & Support -- [GitHub Issues](https://github.com/100mslive/web-sdks/issues) - Submit any bugs or errors you encounter using the Web SDKs. -- [Discord](https://discord.com/invite/kGdmszyzq2) - Hang out with the community members, share your projects or ask questions to get help from the 100ms team. -- [Contact](https://www.100ms.live/contact) - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform. +- [GitHub Issues](https://github.com/100mslive/web-sdks/issues) - Submit any bugs or errors you encounter using the Web SDKs. +- [Dashboard](https://dashboard.100ms.live/dashboard) - ask questions to get help from the 100ms team. +- [Contact](https://www.100ms.live/contact) - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform. diff --git a/packages/roomkit-react/src/Prebuilt/components/AuthToken.tsx b/packages/roomkit-react/src/Prebuilt/components/AuthToken.tsx index ed83c3a51b..7546be7dc2 100644 --- a/packages/roomkit-react/src/Prebuilt/components/AuthToken.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/AuthToken.tsx @@ -107,8 +107,8 @@ const AuthToken = React.memo<{ const convertError = (error: HMSException) => { console.error('[error]', { error }); console.warn( - 'If you think this is a mistake on our side, please reach out to us over Discord:', - 'https://discord.com/invite/kGdmszyzq2', + 'If you think this is a mistake on our side, please reach out to us on Dashboard:', + 'https://dashboard.100ms.live/dashboard', ); return match([error.action, error.code]) .with(['GET_TOKEN', 403], () => ({ diff --git a/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx b/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx index 8ae2dcdc49..a245758b59 100644 --- a/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx @@ -49,8 +49,8 @@ export class ErrorBoundary extends Component { Message: ${this.state.error}
Please reload to see if it works. If you think this is a mistake on our side, please reach out to us on - - Discord + + Dashboard
diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/DeviceInUseError.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/DeviceInUseError.tsx index 3249d845ca..4dcceb3821 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/DeviceInUseError.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/DeviceInUseError.tsx @@ -1,5 +1,10 @@ import React, { useEffect, useState } from 'react'; -import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk'; +import { + HMSNotificationTypes, + HMSTrackException, + HMSTrackExceptionTrackType, + useHMSNotifications, +} from '@100mslive/react-sdk'; import { Button, Dialog, Text } from '../../..'; // @ts-ignore: No implicit Any import { DialogContent, DialogRow } from '../../primitives/DialogContent'; @@ -24,6 +29,11 @@ export function DeviceInUseError() { if (!error || error.code !== 3003) { return; } + const errorTrackExceptionType = (error as HMSTrackException)?.trackType; + const hasAudio = errorTrackExceptionType === HMSTrackExceptionTrackType.AUDIO; + const hasVideo = errorTrackExceptionType === HMSTrackExceptionTrackType.VIDEO; + const hasAudioVideo = errorTrackExceptionType === HMSTrackExceptionTrackType.AUDIO_VIDEO; + const hasScreen = errorTrackExceptionType === HMSTrackExceptionTrackType.SCREEN; const errorMessage = error?.message; ToastManager.addToast({ @@ -35,10 +45,7 @@ export function DeviceInUseError() { ), }); - const hasAudio = errorMessage.includes('audio'); - const hasVideo = errorMessage.includes('video'); - const hasScreen = errorMessage.includes('screen'); - if (hasAudio && hasVideo) { + if (hasAudioVideo) { setDeviceType('camera and microphone'); } else if (hasAudio) { setDeviceType('microphone'); diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/PermissionErrorModal.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/PermissionErrorModal.tsx index 982fa900a5..c605dd5b3e 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/PermissionErrorModal.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/PermissionErrorModal.tsx @@ -1,6 +1,12 @@ import React, { useEffect, useState } from 'react'; import { useMedia } from 'react-use'; -import { HMSException, HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk'; +import { + HMSException, + HMSNotificationTypes, + HMSTrackException, + HMSTrackExceptionTrackType, + useHMSNotifications, +} from '@100mslive/react-sdk'; import { Button, config as cssConfig, Dialog, Flex, Text } from '../../..'; // @ts-ignore: No implicit Any import androidPermissionAlert from '../../images/android-perm-1.png'; @@ -26,11 +32,13 @@ export const PermissionErrorModal = ({ error }: { error?: HMSException }) => { ) { return; } - const errorMessage = error?.message; - const hasAudio = errorMessage.includes('audio'); - const hasVideo = errorMessage.includes('video'); - const hasScreen = errorMessage.includes('screen'); - if (hasAudio && hasVideo) { + + const errorTrackExceptionType = (error as HMSTrackException)?.trackType; + const hasAudio = errorTrackExceptionType === HMSTrackExceptionTrackType.AUDIO; + const hasVideo = errorTrackExceptionType === HMSTrackExceptionTrackType.VIDEO; + const hasAudioVideo = errorTrackExceptionType === HMSTrackExceptionTrackType.AUDIO_VIDEO; + const hasScreen = errorTrackExceptionType === HMSTrackExceptionTrackType.SCREEN; + if (hasAudioVideo) { setDeviceType('camera and microphone'); } else if (hasAudio) { setDeviceType('microphone'); diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx index 3c8e46a107..751d5eed8b 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/Grid.tsx @@ -20,7 +20,7 @@ export const Grid = React.forwardRef {tiles?.map(tile => { diff --git a/packages/roomkit-react/src/Prebuilt/components/hooks/useTileLayout.tsx b/packages/roomkit-react/src/Prebuilt/components/hooks/useTileLayout.tsx index 84c7630a42..cf38dd7af1 100644 --- a/packages/roomkit-react/src/Prebuilt/components/hooks/useTileLayout.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/hooks/useTileLayout.tsx @@ -77,7 +77,7 @@ export const useTileLayout = ({ return rowElements; }); - const gap = edgeToEdge ? 0 : 8; // gap between flex items + const gap = edgeToEdge && isMobile ? 0 : 8; // gap between flex items const maxHeight = height - (maxRows - 1) * gap; const maxRowHeight = maxHeight / matrix.length; const aspectRatios = @@ -115,11 +115,10 @@ export const useTileLayout = ({ } } } - // Beam layout breaks at 480p resolution because the gap of $4 between tiles is not accounted for - // There could be more such cases, this is a generic fix + for (let i = 0; i < row.length; i++) { - row[i].width = tileWidth - (gap / maxCols) * (maxCols - 1); - row[i].height = tileHeight - (gap / maxRows) * (maxRows - 1); + row[i].width = tileWidth; + row[i].height = tileHeight; } } }