Merge pull request #233 from dyte-io/upstream/2024-01-03

docs: plugin, mobile and the rest!

docs/android-core/quickstart.mdx

@@ -47,9 +47,9 @@ You must complete the following steps:
 
 ## Step 1: Install the SDK
 
-1. Install the SDK using maven dependency.
+1. Install the SDK using maven central
 
-<MavenLatestInstallation />
+<MavenLatestInstallation pkg="core-android" />
 
 2. Add the following permissions to the AndroidManifest.xml file.
 

docs/android-core/recording.mdx

@@ -31,6 +31,22 @@ Call `meeting.recording.stop()` to stop the active recording.
 meeting.recording.stop();
 ```
 
+## Pause a recording
+
+Call `meeting.recording.pause()` to pause the active recording.
+
+```kotlin
+meeting.recording.pause();
+```
+
+## Resume a paused recording
+
+Call `meeting.recording.resume()` to resume the paused recording.
+
+```kotlin
+meeting.recording.resume();
+```
+
 ## Get active recording state
 
 The `meeting.recording.recordingState` property describes the current state of

docs/android-core/release-notes.mdx

@@ -0,0 +1,10 @@
+---
+title: Release Notes
+sidebar_position: 101
+sidebar_class_name: releaseSidebarHeading
+tags: [mobile-core, releasenotes]
+---
+
+import ReleaseNotesGenerator from '@site/src/components/ReleaseNotesGenerator';
+
+<ReleaseNotesGenerator noteKey="android-core" />

docs/android/quickstart.mdx

@@ -3,6 +3,8 @@ sidebar_position: 1
 slug: /
 ---
 
+import { MavenLatestInstallation } from '@site/src/components/LatestInstallation';
+
 # Quickstart
 
 This quickstart shows how to use Dyte's Android UI Kit SDK to add live video and
@@ -42,10 +44,7 @@ You must complete the following steps:
 
 1. Install the SDK using maven dependency.
 
-```python
-  // other dependencies here
-  implementation 'io.dyte:uikit:1.14.2'
-```
+<MavenLatestInstallation pkg="uikit" />
 
 2. Add the following permissions to the AndroidManifest.xml file.
 
@@ -94,8 +93,6 @@ val dyteUIKitInfo = DyteUIKitInfo(
 val dyteUIKit = DyteUIKitBuilder.build(dyteUIKitInfo)
 ```
 
-
-
 ## Step 4: Launch the meeting UI
 
 To launch the meeting UI all you need to do is call `startMeeting()` which will take

docs/android/release-notes.mdx

@@ -0,0 +1,10 @@
+---
+title: Release Notes
+sidebar_position: 101
+sidebar_class_name: releaseSidebarHeading
+tags: [releasenotes]
+---
+
+import ReleaseNotesGenerator from '@site/src/components/ReleaseNotesGenerator';
+
+<ReleaseNotesGenerator noteKey="android-ui-kit" />

docs/flutter-core/release-notes.mdx

@@ -0,0 +1,10 @@
+---
+title: Release Notes
+sidebar_position: 101
+sidebar_class_name: releaseSidebarHeading
+tags: [mobile-core, releasenotes]
+---
+
+import ReleaseNotesGenerator from '@site/src/components/ReleaseNotesGenerator';
+
+<ReleaseNotesGenerator noteKey="flutter-core" />

docs/flutter/release-notes.mdx

@@ -0,0 +1,10 @@
+---
+title: Release Notes
+sidebar_position: 101
+sidebar_class_name: releaseSidebarHeading
+tags: [releasenotes]
+---
+
+import ReleaseNotesGenerator from '@site/src/components/ReleaseNotesGenerator';
+
+<ReleaseNotesGenerator noteKey="flutter-ui-kit" />

docs/guides/capabilities/breakoutroom/integrating-breakout-rooms.mdx

@@ -0,0 +1,115 @@
+---
+title: 'Integrating Breakout Rooms'
+sidebar_position: 3
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { WebCoreCDNInstallation } from '@site/src/components/LatestInstallation';
+
+## Step 1: Install the SDK
+
+You can install the package using CDN, npm or Yarn.
+
+<Tabs
+  groupId="node-pm"
+  defaultValue="npm"
+  values={[
+    { label: "npm", value: "npm" },
+    { label: "yarn", value: "yarn" },
+    { label: "CDN", value: "CDN" },
+  ]}
+>
+  <TabItem value="npm">
+Install the SDK using npm.
+
+```shell
+npm install @dytesdk/web-core
+```
+
+[![npm version](https://badge.fury.io/js/@dytesdk%2Fweb-core.svg)](https://badge.fury.io/js/@dytesdk%2Fweb-core)
+
+  </TabItem>
+  <TabItem value="yarn">
+Install the SDK using yarn.
+
+```shell
+yarn add @dytesdk/web-core
+```
+
+[![npm version](https://badge.fury.io/js/@dytesdk%2Fweb-core.svg)](https://badge.fury.io/js/@dytesdk%2Fweb-core)
+
+  </TabItem>
+  <TabItem value="CDN">
+Add the following script tag in the head of your HTML file.
+
+  <WebCoreCDNInstallation />
+  </TabItem>
+</Tabs>
+
+## Step 2: Initialize the SDK
+
+|             |                                                                                                                                                                                   |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `authToken` | After you've created the meeting, add each participant to the meeting using the [Add Participant API](/api#/operations/add_participant). The API response contains the authToken. |
+
+```js
+let meeting = await DyteClient.init({
+  authToken,
+});
+
+// add additional event handler for breakout rooms
+meeting.connectedMeetings.on('meetingChanged', (newMeeting) => {
+  meeting = newMeeting;
+});
+```
+
+## Step 3: Pass the meeting object to pre-built ui component
+
+<Tabs>
+  <TabItem value="HTML">
+
+```html
+<body>
+  <dyte-meeting id="my-meeting"></dyte-meeting>
+  <script>
+    document.getElementById('my-meeting').meeting = meeting;
+  </script>
+</body>
+```
+
+For detailed guide, check out - https://docs.dyte.io/ui-kit/quickstart
+
+  </TabItem>
+  <TabItem value="ReactJS">
+
+```jsx
+<DyteMeeting meeting={meeting} />
+```
+
+For detailed guide, check out - https://docs.dyte.io/react-ui-kit/quickstart
+
+  </TabItem>
+  <TabItem value="Angular">
+
+```js
+class AppComponent {
+  title = 'MyProject';
+  @ViewChild('myid') meetingComponent: DyteMeeting;
+  dyteMeeting: DyteClient;
+
+  async ngAfterViewInit() {
+    const meeting = await DyteClient.init({
+      authToken: '<auth-token>',
+    });
+    meeting.joinRoom();
+    this.dyteMeeting = meeting;
+    if (this.meetingComponent) this.meetingComponent.meeting = meeting;
+  }
+}
+```
+
+For detailed guide, check out - https://docs.dyte.io/angular-ui-kit/quickstart
+
+  </TabItem>
+</Tabs>

docs/guides/capabilities/plugins/_category_.json

@@ -0,0 +1,5 @@
+{
+  "position": 4,
+  "label": "Plugins",
+  "collapsible": true
+}

docs/guides/capabilities/plugins/docshare.mdx

@@ -0,0 +1,37 @@
+# Document Sharing
+
+DocShare allows you to share, view documents and annotate the documents collaboratively.
+The plugin exposes a few APIs to control the document viewer
+
+## Loading a document
+
+You can specify the following parameters:
+
+- `followId`: It syncs the zoom and scroll values of the userId specified to other users (including the recording)
+- `document` : You can also specify the document that you wish to open beforehand.
+
+```ts
+const id = '317b4f59-40f0-46af-90d6-1ed6035bb477';
+const docsharePlugin = meeting.plugins.all.get(id);
+docsharePlugin.on('ready', () => {
+  // Ensure the isHost check is only there for one participant
+  // since the recording can't follow multiple people
+  const isHost = meeting.self.presetName === '<presetnameofhost>';
+  if (!isHost) return;
+  docsharePlugin.sendData({
+    eventName: 'config',
+    data: {
+      eventName: 'config',
+      document: '<document-url>',
+      followId: meeting.self.userId,
+    },
+  });
+});
+```
+
+Now whenever the plugin is loaded it will use the specified parameters.
+To open the plugin you can call
+
+```ts
+docsharePlugin.activate();
+```