Merge pull request #237 from dyte-io/plugin-guides

feat: plugin and screensharing guides

docs/guides/capabilities/polls/getting_started.mdx

@@ -137,7 +137,7 @@ The type `DytePollMessage` is the main class for any poll in Dyte. It also conta
 
 ## Creating a new Poll
 
-### Using the coreSDK
+### Using the Core SDK
 
 The `Polls` object gives a create function to create a new poll. It accepts the following parameters:
 

docs/guides/capabilities/polls/index.mdx

@@ -1,9 +1,9 @@
 # Polls
 
-Polls can be integrated in all kinds of Dyte meetings ranging from voice to livestream. Dyte's SDK makes it really simple to perform all operations required to create and run a poll. You can choose to use the coreSDK with Dyte's UIKit to create seamless poll interactions in a couple of minutes, or you can also use the coreSDK with your custom components.
+Polls can be integrated in all kinds of Dyte meetings ranging from voice to livestream. Dyte's SDK makes it really simple to perform all operations required to create and run a poll. You can choose to use the Core SDK with Dyte's UIKit to create seamless poll interactions in a couple of minutes, or you can also use the Core SDK with your custom components.
 
-The guides walk you through the functionalities that the coreSDK and the UIKit provide you.
+The guides walk you through the functionalities that the Core SDK and the UIKit provide you.
 
-1. [Getting started with Polls](./polls/getting_started) walks through creating polls from the coreSDK
+1. [Getting started with Polls](./polls/getting_started) walks through creating polls from the Core SDK
 
 2. [Integrating UIKit for Polls](./polls/uikit) helps understand the UI components that can be used to make integrating polls even easier

docs/guides/capabilities/polls/uikit.mdx

@@ -4,7 +4,7 @@ Using Dyte's UIKit you can simplify the process of adding polls in your meetings
 
 ### Prerequisites
 
-1. Install coreSDK for your framework
+1. Install Core SDK for your framework
 2. Install UIKit for your framework
 
 ## Dyte Poll Form : Create a new poll

docs/guides/capabilities/screensharing/_category_.json

@@ -1,4 +1,4 @@
 {
-  "position": 8,
+  "position": 3,
   "label": "Screen Sharing"
-}
+}

docs/guides/capabilities/screensharing/displaying.mdx

@@ -0,0 +1,235 @@
+# Displaying Screenshare
+
+## Usage
+
+### Events <div class="header-tag tag-core">Core</div>
+
+Once any user starts sharing the screen, use the screenshare view from the UIKit to display the shared screen. The component allows you to nest other components inside it to create a custom layout based on your needs. Check out a the sample usage of UIKit on your prefered platform.
+
+<Tabs groupId="framework" defaultValue="react">
+<TabItem value="js" label="Javascript">
+
+```jsx
+meeting.participants.joined.on('screenShareUpdate', (participant) => {
+  if (participant.screenShareEnabled) {
+    // participant.screenShareTrack
+  } else {
+    // handle stop screen share
+  }
+});
+```
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```jsx
+const { meeting } = useDyteMeeting();
+
+// Array of participants having their screenshare on
+const ssParticipants = useDyteSelector((m) =>
+  m.participant.joined.toArray().filter((p) => p.screenShareEnabled)
+);
+
+// or using traditional event listeners
+meeting.participants.joined.on('screenShareUpdate', (participant) => {
+  if (participant.screenShareEnabled) {
+    // participant.screenShareTrack
+  } else {
+    // handle stop screen share
+  }
+});
+```
+
+</TabItem>
+<TabItem value="flutter" label="Flutter">
+
+```dart
+...
+
+@override
+void onScreenShareStarted(DyteJoinedMeetingParticipant participant) {
+  /// handle screen share started of `DyteJoinedMeetingParticipant` participant
+}
+
+@override
+void onScreenShareEnded(DyteJoinedMeetingParticipant participant) {
+  /// handle screen share ended of `DyteJoinedMeetingParticipant` participant
+}
+
+...
+```
+
+</TabItem>
+<TabItem value="react-native" label="React Native">
+
+```jsx
+const { meeting } = useDyteMeeting();
+
+// Array of participants having their screenshare on
+const ssParticipants = useDyteSelector((m) =>
+  m.participant.joined.toArray().filter((p) => p.screenShareEnabled)
+);
+
+// or using traditional event listeners
+meeting.participants.joined.on('screenShareUpdate', (participant) => {
+  if (participant.screenShareEnabled) {
+    // participant.screenShareTrack
+  } else {
+    // handle stop screen share
+  }
+});
+```
+
+</TabItem>
+<TabItem value="android" label="Android (Kotlin)">
+
+```kotlin
+
+private val participantEventsListener = object : DyteParticipantEventsListener {
+        override fun onScreenSharesUpdated() {
+            super.onScreenSharesUpdated()
+
+            ...
+        }
+    }
+
+```
+
+</TabItem>
+<TabItem value="ios" label="iOS (Swift)">
+
+```swift
+DyteParticipantEventsListener {
+        func onScreenSharesUpdated() {
+            // your code here to handle screenshares from meeting
+        }
+        func onScreenShareEnded(participant: DyteMeetingParticipant) {
+            // your code here to handle screenshare ended
+        }
+
+        func onScreenShareStarted(participant: DyteMeetingParticipant) {
+            //  your code here to handle screenshare started
+        }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### Components <div class="header-tag tag-ui">UI Kit</div>
+
+This component does not render anything if the participant hasn't start sharing their screen.
+
+<Tabs groupId="framework">
+<TabItem value="web-components" label="Web Components">
+
+```jsx
+<dyte-screenshare-view class="dyte-el" style="height: 480px">
+  <dyte-name-tag class="dyte-el">
+    <dyte-audio-visualizer class="dyte-el" slot="start"></dyte-audio-visualizer>
+  </dyte-name-tag>
+</dyte-screenshare-view>
+
+<script>
+  const elements = document.getElementsByClassName('dyte-el');
+  for (const el of elements) {
+    el.participant = ssParticipant;
+  }
+</script>
+```
+
+Check out the [reference](/ui-kit/components/dyte-screenshare-view) for more details about the attributes.
+
+To create your own component, you can use the `screenShareTracks` property of the [local user](/web-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them.
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```jsx
+import {
+  DyteScreenshareView,
+  DyteNameTag,
+  DyteAudioVisualizer,
+} from '@dytesdk/react-ui-kit';
+
+<DyteScreenshareView participant={ssParticipant} style={{ height: '480px' }}>
+  <DyteNameTag participant={ssParticipant}>
+    <DyteAudioVisualizer slot="start" participant={ssParticipant} />
+  </DyteNameTag>
+</DyteScreenshareView>;
+```
+
+Check out the [reference](/react-ui-kit/components/dyte-screenshare-view) for more details about the props.
+
+To create your own component, you can use the `screenShareTracks` property of the [local user](/react-web-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them.
+
+</TabItem>
+<TabItem value="angular" label="Angular">
+
+```jsx
+<dyte-screenshare-view class="dyte-el" style="height: 480px">
+  <dyte-name-tag class="dyte-el">
+    <dyte-audio-visualizer class="dyte-el" slot="start"></dyte-audio-visualizer>
+  </dyte-name-tag>
+</dyte-screenshare-view>
+
+<script>
+const elements = document.getElementsByClassName('dyte-el');
+  for (const el of elements) {
+    el.participant = ssParticipant;
+  }
+</script>
+```
+
+Check out the [reference](/angular-ui-kit/components/dyte-screenshare-view) for more details about the attributes.
+
+To create your own component, you can use the `screenShareTracks` property of the [local user](/web-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them.
+
+</TabItem>
+<TabItem value="flutter" label="Flutter">
+
+:::info
+This UI component does not currently exist in the Flutter UIKit.
+:::
+
+</TabItem>
+<TabItem value="react-native" label="React Native">
+
+```jsx
+import {
+  DyteScreenshareView,
+  DyteNameTag,
+  DyteAudioVisualizer,
+} from '@dytesdk/react-native-ui-kit';
+
+<DyteScreenshareView participant={ssParticipant} style={{ height: '480px' }}>
+  <DyteNameTag participant={ssParticipant}>
+    <DyteAudioVisualizer slot="start" participant={ssParticipant} />
+  </DyteNameTag>
+</DyteScreenshareView>;
+```
+
+Check out the [reference](/react-native/components/dyte-screenshare-view) for more details about the props.
+
+To create your own component, you can use the `screenShareTracks` property of the [local user](/rn-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them.
+
+</TabItem>
+<TabItem value="android" label="Android (Kotlin)">
+
+:::info
+This UI component does not currently exist in the Android UIKit.
+:::
+
+You can create your own component. To do so use the `screenShareTrack` property of the [local user](/android-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them.
+
+</TabItem>
+<TabItem value="ios" label="iOS (Swift)">
+
+:::info
+This UI component does not currently exist in the iOS UIKit.
+:::
+
+You can create your own component. To do so use the `screenShareTrack` property of the [local user](/ios-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them.
+
+</TabItem>
+</Tabs>