From f80459cdec08901d73e8be76c29760196acc4d96 Mon Sep 17 00:00:00 2001 From: Ravindra Singh Rathor Date: Wed, 8 May 2024 01:24:45 +0530 Subject: [PATCH] docs(network-indicator): added dyte-network-indicator docs --- .../components/dyte-network-indicator.mdx | 31 +++++++++++++ .../components/dyte-network-indicator.mdx | 35 +++++++++++++++ .../components/dyte-network-indicator.mdx | 43 +++++++++++++++++++ 3 files changed, 109 insertions(+) create mode 100644 docs/angular-ui-kit/components/dyte-network-indicator.mdx create mode 100644 docs/react-ui-kit/components/dyte-network-indicator.mdx create mode 100644 docs/ui-kit/components/dyte-network-indicator.mdx diff --git a/docs/angular-ui-kit/components/dyte-network-indicator.mdx b/docs/angular-ui-kit/components/dyte-network-indicator.mdx new file mode 100644 index 0000000000..04f3b942f5 --- /dev/null +++ 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 + + + + + React UI Kit dyte-network-indicator + \ No newline at end of file diff --git a/docs/react-ui-kit/components/dyte-network-indicator.mdx b/docs/react-ui-kit/components/dyte-network-indicator.mdx new file mode 100644 index 0000000000..16fa65d534 --- /dev/null +++ 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 + +``` + +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 + + + + + React UI Kit DyteNetworkIndicator + \ No newline at end of file diff --git a/docs/ui-kit/components/dyte-network-indicator.mdx b/docs/ui-kit/components/dyte-network-indicator.mdx new file mode 100644 index 0000000000..f001aade36 --- /dev/null +++ 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 + + + +``` + +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 + + + + + React UI Kit dyte-network-indicator + \ No newline at end of file