Merge pull request #364 from dyte-io/docs/WEB-3793-network-indicator

docs(network-indicator): added dyte-network-indicator docs
dyte-io · May 14, 2024 · 7c1f177 · 7c1f177
2 parents b3b8057 + f80459c
commit 7c1f177
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 0 deletions.
diff --git a/docs/angular-ui-kit/components/dyte-network-indicator.mdx b/docs/angular-ui-kit/components/dyte-network-indicator.mdx
@@ -0,0 +1,31 @@
+---
+description: >-
+ Learn how to use and customize the dyte-network-indicator component in Dyte's React UI
+ Kit with our detailed documentation.
+---
+
+# dyte-network-indicator
+
+A component that indicates poor network connection.
+
+It listens to the mediaScoreUpdate event of the passed participant to get the score.
+
+```tsx
+ (participant as DyteParticipant).addListener('mediaScoreUpdate', ({ kind, isScreenshare, score }) => {
+ console.log(`Score for ${isScreenshare ? 'screen share': ''} ${kind} was:: ${score}`);
+});
+```
+
+:::note info
+
+This component will only be visible if the network quality is poor (less than or equal to 3, on a scale of 5, 5 being best).
+
+:::
+
+## Props
+
+<PropsTable of="dyte-network-indicator" />
+
+<head>
+ <title>React UI Kit dyte-network-indicator</title>
+</head>
diff --git a/docs/react-ui-kit/components/dyte-network-indicator.mdx b/docs/react-ui-kit/components/dyte-network-indicator.mdx
@@ -0,0 +1,35 @@
+---
+description: >-
+ Learn how to use and customize the DyteNetworkIndicator component in Dyte's React UI
+ Kit with our detailed documentation.
+---
+
+# DyteNetworkIndicator
+
+A component that indicates poor network connection.
+
+```jsx
+<DyteNetworkIndicator meeting={meeting} participant={meeting.self} />
+```
+
+It listens to the mediaScoreUpdate event of the passed participant to get the score.
+
+```tsx
+ (participant as DyteParticipant).addListener('mediaScoreUpdate', ({ kind, isScreenshare, score }) => {
+ console.log(`Score for ${isScreenshare ? 'screen share': ''} ${kind} was:: ${score}`);
+});
+```
+
+:::note info
+
+This component will only be visible if the network quality is poor (less than or equal to 3, on a scale of 5, 5 being best).
+
+:::
+
+## Props
+
+<PropsTable of="dyte-network-indicator" />
+
+<head>
+ <title>React UI Kit DyteNetworkIndicator</title>
+</head>
diff --git a/docs/ui-kit/components/dyte-network-indicator.mdx b/docs/ui-kit/components/dyte-network-indicator.mdx
@@ -0,0 +1,43 @@
+---
+description: >-
+ Learn how to use and customize the dyte-network-indicator component in Dyte's React UI
+ Kit with our detailed documentation.
+---
+
+# dyte-network-indicator
+
+A component that indicates poor network connection.
+
+```html
+<dyte-network-indicator class="dyte-el"></dyte-network-indicator>
+
+<script>
+ const elements = document.getElementsByClassName('dyte-el');
+ for (const el of elements) {
+ el.participant = meeting.self;
+ el.meeting = meeting;
+ }
+</script>
+```
+
+It listens to the mediaScoreUpdate event of the passed participant to get the score.
+
+```tsx
+participant.addListener('mediaScoreUpdate', ({ kind, isScreenshare, score }) => {
+ console.log(`Score for ${isScreenshare ? 'screen share': ''} ${kind} was:: ${score}`);
+});
+```
+
+:::note info
+
+This component will only be visible if the network quality is poor (less than or equal to 3, on a scale of 5, 5 being best).
+
+:::
+
+## Props
+
+<PropsTable of="dyte-network-indicator" />
+
+<head>
+ <title>React UI Kit dyte-network-indicator</title>
+</head>