dyte-io · palashgo · Jul 31, 2024 · Jul 31, 2024 · Jul 31, 2024
diff --git a/docs/react-web-core/advanced/_category_.json b/docs/react-web-core/advanced/_category_.json
@@ -1,5 +1,5 @@
 {
-  "position": 4,
+  "position": 5,
   "label": "Initialization",
   "collapsible": true
 }
diff --git a/docs/react-web-core/introduction.mdx b/docs/react-web-core/introduction.mdx
@@ -1,6 +1,6 @@
 ---
 title: Introduction
-sidebar_position: 3
+sidebar_position: 4
 sidebar_class_name: module-seperation
 ---
 

diff --git a/docs/react-web-core/participants/participant-object.mdx b/docs/react-web-core/participants/participant-object.mdx
@@ -34,7 +34,7 @@ The participant object has the following properties.
 - `userId`: The `userId` of the participant.
 - `name`: The participant's name.
 - `picture`: The participant's picture (if any).
-- `clientSpecificId`: An arbitrary ID that can be set to identify the
+- `customParticipantId`: An arbitrary ID that can be set to identify the
   participant.
 - `isPinned`: Set to true if the participant is pinned.
 - `presetName`: Name of the preset associated with the participant.

diff --git a/docs/react-web-core/pre-call/3-virtual-bg.mdx b/docs/react-web-core/pre-call/3-virtual-bg.mdx
@@ -37,9 +37,14 @@ import DyteVideoBackgroundTransformer from '@dytesdk/video-background-transforme
 If you installed the package using a script tag, the `DyteVideoBackgroundTransformer` will be automatically available for use once the installation process is complete.
 
 ```js
-const videoBackgroundTransformer = await DyteVideoBackgroundTransformer.init();
+const videoBackgroundTransformer = await DyteVideoBackgroundTransformer.init({
+            meeting: meeting
+        });
+
+await meeting.self.setVideoMiddlewareGlobalConfig({ disablePerFrameCanvasRendering: true });
 ```
 
+
 ### Add an image as a background
 
 To incorporate an image as a background, create a static background video middleware using the `createStaticBackgroundVideoMiddleware` method provided by the `videoBackgroundTransformer` object.

diff --git a/docs/react-web-core/pre-call/_category_.json b/docs/react-web-core/pre-call/_category_.json
@@ -1,5 +1,5 @@
 {
-  "position": 2,
+  "position": 3,
   "label": "Pre-call",
   "collapsible": true,
   "className":"pre-call-docs"

diff --git a/docs/react-web-core/quickstart.mdx b/docs/react-web-core/quickstart.mdx
@@ -1,6 +1,6 @@
 ---
 slug: /
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 # Quickstart

diff --git a/docs/react-web-core/reference/DyteMeta.md b/docs/react-web-core/reference/DyteMeta.md
@@ -88,13 +88,3 @@ Sets current active tab for user
 | Param |
 | --- |
 | spotlightTab | 
-
-<a name="module_DyteMeta+joined"></a>
-
-### ~~meta.joined~~
-***Deprecated***
-
-<a name="module_DyteMeta+roomName"></a>
-
-### ~~meta.roomName~~
-***Deprecated***
diff --git a/docs/react-web-core/reference/DyteParticipant.md b/docs/react-web-core/reference/DyteParticipant.md
@@ -168,35 +168,4 @@ Requires the permission to kick a participant.
 
 #### participant.disableVideo()
 Disables video for this participant.
-Requires the permission to disable video for a participant.
-
-<a name="module_DyteParticipant--this.+acceptJoinStageRequest"></a>
-
-#### ~~participant.acceptJoinStageRequest()~~
-***Deprecated***
-
-<a name="module_DyteParticipant--this.+rejectRequestToJoinStage"></a>
-
-#### ~~participant.rejectRequestToJoinStage()~~
-***Deprecated***
-
-<a name="module_DyteParticipant--this.+removeFromStage"></a>
-
-#### ~~participant.removeFromStage()~~
-***Deprecated***
-
-<a name="module_DyteParticipant--this.+setWebinarStageStatus"></a>
-
-#### ~~participant.setWebinarStageStatus()~~
-***Deprecated***
-
-
-<a name="module_DyteParticipant--this.+clientSpecificId"></a>
-
-#### ~~participant.clientSpecificId~~
-***Deprecated***
-
-<a name="module_DyteParticipant--this.+webinarStageStatus"></a>
-
-#### ~~participant.webinarStageStatus~~
-***Deprecated***
+Requires the permission to disable video for a participant.
diff --git a/docs/react-web-core/reference/DyteSelf.md b/docs/react-web-core/reference/DyteSelf.md
@@ -197,48 +197,3 @@ Change the current media device that is being used by the local participant.
 | Param | Description |
 | --- | --- |
 | device | The device that is to be used. A device of the same `kind` will be replaced. the primary stream. |
-
-<a name="module_DyteSelf+requestToJoinStage"></a>
-
-### ~~self.requestToJoinStage()~~
-***Deprecated***
-
-<a name="module_DyteSelf+withdrawRequestToJoinStage"></a>
-
-### ~~self.withdrawRequestToJoinStage()~~
-***Deprecated***
-
-<a name="module_DyteSelf+leaveStage"></a>
-
-### ~~self.leaveStage()~~
-***Deprecated***
-
-<a name="module_DyteSelf+joinStage"></a>
-
-### ~~self.joinStage()~~
-***Deprecated***
-
-<a name="module_DyteSelf+setWebinarStageStatus"></a>
-
-### ~~self.setWebinarStageStatus()~~
-***Deprecated***
-
-<a name="module_DyteSelf+disablePreview"></a>
-
-### ~~self.disablePreview()~~
-***Deprecated***
-
-<a name="module_DyteSelf+clientSpecificId"></a>
-
-### ~~self.clientSpecificId~~
-***Deprecated***
-
-<a name="module_DyteSelf+suggestedTheme"></a>
-
-### ~~self.suggestedTheme~~
-***Deprecated***
-
-<a name="module_DyteSelf+webinarStageStatus"></a>
-
-### ~~self.webinarStageStatus~~
-***Deprecated***
diff --git a/docs/react-web-core/release-notes.mdx b/docs/react-web-core/release-notes.mdx
@@ -8,6 +8,12 @@ tags:
 
 import ReleaseNotesGenerator from '@site/src/components/ReleaseNotesGenerator';
 
+:::danger
+
+Looking to upgrade from a 1.x -> 2.x version, read the upgrade [guide here](/react-web-core/upgrade)
+
+:::
+
 The release notes lists all new features, resolved issues, and known issues of React Web Core in chronological order.
 
 <ReleaseNotesGenerator noteKey="react-web-core" />

diff --git a/docs/react-web-core/room-metadata.mdx b/docs/react-web-core/room-metadata.mdx
@@ -1,13 +1,13 @@
 ---
-title: Room Metadata
+title: Meeting Metadata
 description: All metadata pertaining to a meeting.
 sidebar_position: 11
 tags:
   - web-core
   - room-metadata
 ---
 
-# Room Metadata
+# Meeting Metadata
 
 All metadata pertaining to a meeting is stored in `meeting.meta`. This includes:
 
@@ -16,7 +16,8 @@ All metadata pertaining to a meeting is stored in `meeting.meta`. This includes:
 - `roomType`: Indicates the meeting is a group-call or a webinar.
 - `meetingTitle`: The title of the meeting.
 - `meetingStartedTimestamp`: The timestamp when the meeting started.
-- `socketConnected`: Boolean flag to show when the socket is connected.
+- `mediaState`: Media Connection state
+- `socketState`: Socket Connection state
 
 For example, if you want to get the title of the meeting the current participant
 is connected to, you can do so by doing:
@@ -32,32 +33,28 @@ if (meeting.self.roomJoined) {
 }
 ```
 
+**Events**
+
 The `meta` object also emits events for indicating the change in the connection
-state of the room. For example, you can listen for the `connected` event to know
-when the local user has successfully joined the room, and for the `disconnected`
-event to find out if the local user's connection has dropped.
+state of the room. 
+
+1. **Media Connection**
+
+Updates to Media connection (WebRTC connection used for the transfer of actual media) will be sent on `mediaConnectionUpdate` event with the payload
 
 ```ts
-const meetingconnected = useDyteSelector(
-  (meeting) => meeting.meta.socketConnected
-);
-useEffect(() => {
-  console.log('I got meetingconnected as: ', meetingconnected);
-}, [meetingconnected]);
-
-const meetingTitle = useDyteSelector((meeting) => meeting.meta.meetingTitle);
-useEffect(() => {
-  console.log('I got meetingTitle as: ', meetingTitle);
-}, [meetingTitle]);
-
-const meetingStartedTimestamp = useDyteSelector(
-  (meeting) => meeting.meta.meetingStartedTimestamp
-);
-useEffect(() => {
-  console.log('I got meetingStartedTimestamp as: ', meetingStartedTimestamp);
-}, [meetingStartedTimestamp]);
+meeting.meta.on('mediaConnectionUpdate', ({ transport, state }) => {
+  // transport - 'consuming' | 'producing'
+  // state - 'new' | 'connecting' | 'connected' | 'disconnected' | 'reconnecting' | 'failed'
+});
 ```
 
-<head>
-  <title>React Web Core Room Metadata</title>
-</head>
+2. **Socket Connection**
+
+Updates to Websocket connection (used for chat, polls and other basic signaling) will be sent on `socketConnectionUpdate` event
+
+```ts
+meeting.meta.on('socketConnectionUpdate', ({ state, reconnectionAttempt, reconnected }) => {
+  // state - 'connected' | 'disconnected' | 'reconnecting' | 'failed'
+});
+```
diff --git a/docs/react-web-core/upgrade.mdx b/docs/react-web-core/upgrade.mdx
@@ -0,0 +1,44 @@
+---
+title: 2.x Upgrade Guide
+sidebar_position: 1
+---
+
+### Breaking changes
+
+With this major release we tried to reduce the number of breaking changes to the minimal amount.
+
+**1. Removal of V1 REST API terminology in favor of V2 REST API terminology**
+
+- meeting.self.`clientSpecificId` - > meeting.self.`customParticipantId`
+- meeting.meta.`roomName` → meeting.meta.`meetingId`
+- meeting.self.`suggestedTheme` → meeting.self.`config`
+- Dropped meeting.meta.`joined` (Duplicate of meeting.self.`joined`)
+
+
+**2. Event changes ️‍🔥 ️‍🔥 ️‍🔥**
+
+Network disconnects now trigger roomLeft event on meeting.self with a state indicating the cause of leaving the room. If you have redirection logic on `roomLeft`, please update it accordingly.
+
+```jsx
+meeting.self.on('roomLeft', ({ state }) => {
+	if(state === 'ended' || state == "left" || state == "kicked"){
+		// maybe redirect to another page
+	}
+}
+```
+
+Possible state values are ‘kicked’ | 'ended' | 'left'  | 'rejected' | 'connected-meeting' | 'disconnected' | 'failed';
+
+**3. Handling Reconnection / Disconnection**
+
+- `connected` `disconnected` `connectionError` `iceConnected` `iceDisconnected` `iceFailed` `iceReconnecting` `socketConnected` `socketDisconnected` `socketReconnecting` `socketReconnectAttempt` `socketReconnectFailure` `socketReconnected` `socketFailure`
+
+    events on meeting.meta are **removed and replaced** with new simplified connection events and properties
+
+    - Updates to Media connection (WebRTC connection used for the transfer of actual media) will be sent on `mediaConnectionUpdate` event with the payload    
+      You can also get the value of this payload by checking the `meeting.meta.mediaState` property
+
+    - Updates to Websocket connection (used for chat, polls and other basic signaling) will be sent on `socketConnectionUpdate` event.    
+      You can also get the value of this payload by checking the `meeting.meta.socketState` property
+
+    Read more on the [meeting metadata page](/web-core/room-metadata)
diff --git a/docs/web-core/Introduction.mdx b/docs/web-core/Introduction.mdx
@@ -1,6 +1,6 @@
 ---
 title: Introduction
-sidebar_position: 3
+sidebar_position: 4
 sidebar_class_name: module-seperation
 ---
 

diff --git a/docs/web-core/local-user/events.mdx b/docs/web-core/local-user/events.mdx
@@ -14,9 +14,9 @@ tags:
 You can subscribe to various events on the local user by calling
 `meeting.self.on(EVENT_NAME)`.
 
-## Room joined
+## Meeting joined
 
-Triggered when the room join event completes and now the `meeting` is ready to
+Triggered when the join event completes and now the `meeting` is ready to
 produce and consume media.
 
 ```ts
@@ -27,7 +27,7 @@ meeting.self.on('roomJoined', () => {
 });
 ```
 
-## Room left
+## Meeting left
 
 Triggered when the local user leaves the meeting.
 
@@ -44,10 +44,13 @@ Here are all the possible values of the `state` variable.
 
 | Event      | Description                                                                         |
 | ---------- | ----------------------------------------------------------------------------------- |
-| `left`     | Participant has left the room.                                                      |
+| `left`     | Participant has left the meeting.                                                      |
 | `kicked`   | Participant is removed from the meeting.                                            |
 | `ended`    | Everyone is removed from the meeting, and the session has ended.                    |
-| `rejected` | Participant's request to join the room is rejected (when you're in a waiting room). |
+| `rejected` | Participant's request to join the meeting is rejected (when you're in a waiting room). |
+| `disconnected` | Temporary network disconnection |
+| `failed` | Failed to join the meeting |
+| `connected-meeting` | Participant has left this meeting and joined a connected meeting (Breakout meeting) |
 
 ## Video update
 

diff --git a/docs/web-core/participants/participant-object.mdx b/docs/web-core/participants/participant-object.mdx
@@ -35,7 +35,7 @@ The participant object has the following properties.
 - `userId`: The `userId` of the participant.
 - `name`: The participant's name.
 - `picture`: The participant's picture (if any).
-- `clientSpecificId`: An arbitrary ID that can be set to identify the
+- `customParticipantId`: An arbitrary ID that can be set to identify the
   participant.
 - `isPinned`: Set to true if the participant is pinned.
 - `presetName`: Name of the preset associated with the participant.

diff --git a/docs/web-core/pre-call/3-virtual-bg.mdx b/docs/web-core/pre-call/3-virtual-bg.mdx
@@ -37,7 +37,11 @@ import DyteVideoBackgroundTransformer from '@dytesdk/video-background-transforme
 If you installed the package using a script tag, the `DyteVideoBackgroundTransformer` will be automatically available for use once the installation process is complete.
 
 ```js
-const videoBackgroundTransformer = await DyteVideoBackgroundTransformer.init();
+const videoBackgroundTransformer = await DyteVideoBackgroundTransformer.init({
+            meeting: meeting
+        });
+
+await meeting.self.setVideoMiddlewareGlobalConfig({ disablePerFrameCanvasRendering: true });
 ```
 
 ### Add an image as a background

diff --git a/docs/web-core/pre-call/_category_.json b/docs/web-core/pre-call/_category_.json
@@ -1,5 +1,5 @@
 {
-  "position": 2,
+  "position": 3,
   "label": "Pre-call",
   "collapsible": true,
   "className":"pre-call-docs"

diff --git a/docs/web-core/quickstart.mdx b/docs/web-core/quickstart.mdx
@@ -4,7 +4,7 @@ tags:
   - quickstart
   - setup
 slug: /
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 import Tabs from '@theme/Tabs';

diff --git a/docs/web-core/reference/DyteMeta.md b/docs/web-core/reference/DyteMeta.md
@@ -88,13 +88,3 @@ Sets current active tab for user
 | Param |
 | --- |
 | spotlightTab | 
-
-<a name="module_DyteMeta+joined"></a>
-
-### ~~meta.joined~~
-***Deprecated***
-
-<a name="module_DyteMeta+roomName"></a>
-
-### ~~meta.roomName~~
-***Deprecated***