feat: web-core version 0.27.x docs

.github/workflows/update-api-specs-check.yml

@@ -0,0 +1,37 @@
+name: Update API Specs Check
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  update-api-specs-check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v23
+        with:
+          since_last_remote_commit: true
+          files_separator: ","
+          files: static/api/v1.yaml,static/api/v2.yaml
+
+      - name: Fail workflow if api specs has updated - comment err msg on PR
+        if: steps.changed-files.outputs.only_changed == 'true' && github.event_name == 'pull_request'
+        env:
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: gh pr comment $PR_NUMBER --body 'Avoid updating the api-specs directly. They will be overwritten.' && exit 1
+
+      - name: Fail workflow if api specs has updated - echo err msg
+        if: steps.changed-files.outputs.only_changed == 'true' && github.event_name != 'pull_request'
+        run: echo 'Avoid updating the api-specs directly. They will be overwritten.' && exit 1

docs/web-core/04-room-metadata.mdx

@@ -9,7 +9,6 @@ tags: [web-core, room-metadata]
 
 All metadata pertaining to a meeting is stored in `meeting.meta`. This includes:
 - `roomName`: The name of the room the current participant is connected to.
-- `joined`: Indicates whether the participant has successfully joined the room successfully or not.
 - `roomType`: Indicates the meeting is a group-call or a webinar.
 - `meetingTitle`: The title of the meeting.
 - `meetingStartedTimestamp`: The timestamp when the meeting started.

docs/web-core/05-Participants/01-participants.mdx

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 1
 title: Participants
 description: Events, methods and data pertaining to meeting participants.
 slug: participants
@@ -8,67 +7,76 @@ tags: [web-core, participants, participant]
 
 # Participants
 
-All meeting participants data is stored under `meeting.participants`. Use the methods and events to consume the participants data. 
+The data regarding all meeting participants is stored under `meeting.participants`. This **does not** include the local user. Use the methods and events to consume the participants data. 
 For example, to get all the participants who joined the meeting:
 
 ```ts
 // get all joined participants
 const joinedParticipants = meeting.participants.joined;
 ```
 
-## Properties
+The `meeting.participants` object has the following properties.
 
-- `joined`: Contains all the participants who have joined the meeting.
-- `waitlisted`: Contains all the participants waiting to join the meeting.
-- `active`: Contains all the active participants producing media (audio/ video/screen).
-- `pinned`: Contains all the pinned participants of the meeting.
+- `joined`: A map that contains all the participants who have joined the meeting except the local user
+- `waitlisted`: A map that contains all the participants waiting to join the meeting.
+- `active`: A map that contains all the participants except the local user who are supposed to be on the screen at the moment 
+- `pinned`: A map that contains all the pinned participants of the meeting.
 - `count`: The number of participants who are joined in the meeting.
 - `pageCount`: Number of pages available in paginated mode. 
 - `maxActiveParticipantsCount`: The maximum number of participants that can be present in the active state.
 
+Therefore, if you were to make a grid of participants, you'd use the `active` map, but to display all participants in the meeting you'd use the `joined` map.
 
-## Methods
+Each participant in each of the `joined`, `waitlisted`, `active`, and `pinned` maps is of type [`DyteParticipant`](../../Reference/DyteParticipant). Read more about each individual `participant` object [here](../participant-object).
 
-### Set view mode
+Each of these maps are of type [`DyteParticipantMap`](../../Reference/DyteParticipantMap), and therefore emit a `participantJoined` event when a participant is added to the map, and a `participantLeft` event when a participant leaves the map. For instance, to listen for when a participant gets pinned in the meeting, you can use the following snippet:
 
-Change the participant view between paginated and active grid mode. This will trigger `viewModeChanged` event as a side affect.
+```ts
+meeting.participants.pinned.on('participantJoined', (participant) => {
+    console.log(`Participant ${participant.name} got pinned`);
+});
+```
+
+## Set participant view mode
+
+The view mode indicates whether the participants are populated in `ACTIVE_GRID` mode or `PAGINATED` mode. In `ACTIVE_GRID` mode, the partcipants are automatically replaced in `meeting.participants.active`, based on who is speaking or who has their video turned on.
+
+In `PAGINATED` mode, the participants in `meeting.participants.active` will be fixed. Only when you call the `meeting.participants.setPage(pageNumber)` method, it will replace the `active` participants with a different set of participants.
+
+You can change the participant view between `ACTIVE_GRID` and `PAGINATED` mode using the following method. This will trigger `viewModeChanged` event as a side affect.
 
 ```ts
 // set the view mode to paginated
 await meeting.participants.setViewMode('PAGINATED');
+
 // set the view mode to active grid
 await meeting.participants.setViewMode('ACTIVE_GRID');
 ```
 
-### Set page number
+## Set page number in paginated mode
 
-Switching beween pages 
+The `setPage()` method allows you to switch between pages of participants present in the meeting.
 
 ```ts
 // switch to second page
 await meeting.participants.setPage(2);
 ```
 
-### Disable audio or video for participants
+## Host control methods
+
+The `meeting.participants` object has host control methods that allow you to disable the audio and video streams of other users in the meeting (given that the user preset has the right permissions).
 
 ```ts
 // mute all participants
 await meeting.participants.disableAllAudio();
+
 // disable video for all participants
 await meeting.participants.disableAllVideo();
-// disable audio for a specific participant
-await meeting.participants.disableAudio(peerId);
-// disable video for a specific participant
-await meeting.participants.disableVideo(peerId);
 ```
 
-### Kick participants
-
-To remove participats from a meeting, you can user kick methods
+To remove all participants from a meeting, you can call the `kickAll()` method.
 
 ```ts
 // remove all participants from the meeting
 await meeting.participants.kickAll();
-// remove a specified participant from the meeting
-await meeting.participants.kick(peerId);
 ```

docs/web-core/05-Participants/02-participant-object.mdx

@@ -0,0 +1,84 @@
+---
+title: The participant object
+description: The object corresponding to a particular participant.
+slug: participants/participant
+tags: [web-core, participants, participant]
+---
+
+# The participant object
+
+The `participant` object consists of all the information related to a particular participant. For instance, it contains a partcipants video/audio/screenshare stream, and the participant's name. It also contains state variables that indicate whether a participant's camera is on or off, and whether they are muted or unmuted. Head over to [DyteParticipant](../../Reference/DyteParticipant) for a detailed reference.
+
+The participant object has the following properties.
+
+- `id`: The `participantId` of the participant (aka `peerId`).
+- `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 participant.
+- `device`: Information about the device used by the participant.
+- `videoTrack`: The video track of the participant.
+- `audioTrack`: The audio track of the participant.
+- `screenShareTracks`: The video and audio (if any) track of the participant's screen share stream.
+- `videoEnabled`: Set to true if the participant's camera is on.
+- `audioEnabled`: Set to true if the participant is unmuted.
+- `screenShareEnabled`: Set to true if the participant is sharing their screen.
+- `supportsRemoteControl`: Set to true if the participant is using an SDK that supports remote control.
+- `isPinned`: Set to true if the participant is pinned.
+
+The participant object is an event emitter, so you can set listeners on this object for events such as video and audio updates. For instance, to fire a callback when a participant toggles their mic, you can subscribe to the following events.
+
+```ts
+meeting.participants.joined.get(participantId).on('audioUpdate', ({ audioEnabled, audioTrack }) => {
+    // This will only be fired on mic toggles for the participant with ID `participantId`
+    console.log('The participant with id',
+        participantId,
+        'has toggled their mic to',
+        audioEnabled,
+    );
+});
+```
+
+The events emitted by all participant objects are also re-emitted by all the maps in `meeting.participants`. Therefore, you can add a listener to `meeting.participants.joined` for the `audioUpdate` event. For instance, the same code above can be re-implemented as follows.
+
+```ts
+meeting.participants.joined.on('audioUpdate', (participant, { audioEnabled, audioTrack }) => {
+    // This will be fired on mic toggles for all participants in the meeting
+    console.log('The participant with id',
+        participantId,
+        'has toggled their mic to',
+        audioEnabled,
+    );
+});
+```
+
+Read more about the participant events in the [events](../../Reference/DyteParticipant) section in the API reference.
+
+## Host controls methods
+
+If you (the local user) have the relevant permissions in the meeting, you can disable a participant's video/audio streams, or even remove them from the meeting.
+
+```ts
+const participant = meeting.participants.joined.get(participantId);
+
+// To disable a participant's video stream
+participant.disableVideo();
+
+// To disable a participant's audio stream
+participant.disableAudio();
+
+// To kick a participant from the meeting
+participant.kick();
+```
+
+You can also `pin` or `unpin` a participant in the meeting. All "pinned" participants are added to the `meeting.participants.pinned` map.
+
+```ts
+const participant = meeting.participants.joined.get(participantId);
+
+// Pin a participant to the meeting.
+await participant.pin();
+
+// Unpin a participant in the meeting.
+await participant.unpin();
+```

docs/web-core/05-Participants/02-events.mdx → docs/web-core/05-Participants/03-events.mdx

@@ -1,5 +1,4 @@
 ---
-sidebar_position: 2
 title: Participant Events
 description: Event handling for participants.
 slug: participants/events

docs/web-core/09-recording.mdx

@@ -0,0 +1,36 @@
+---
+title: Recording
+description: Control recordings in a meeting.
+slug: recording
+tags: [web-core, recording]
+---
+
+# Recording
+
+The `meeting.recording` object can be used start and stop recordings in a meeting. You can also get the current status of a recording using this API.
+
+The `meeting.recording` object has the following properties:
+
+- `recordingState`: Indicates the current recording state of the meeting.
+
+## Start a recording
+
+To start a recording, you can call the `start` method in the `meeting.recording` object. The valid states are `IDLE`, `STARTING`, `RECORDING`, and `STOPPING`.
+
+```ts
+await meeting.recording.start();
+```
+
+## Stop a recording
+
+Call `meeting.recording.stop()` to stop the active recording.
+
+```ts
+await meeting.recording.stop();
+```
+
+## Get active recording state
+
+The `meeting.recording.recordingState` property describes the current state of the recording. The valid states are `IDLE`, `STARTING`, `RECORDING`, and `STOPPING`.
+
+To update the state of recording at any time, call the `meeting.recording.refreshActiveRecordingState()` method.

web-core_versioned_docs/version-0.27.x/01-installation.mdx

@@ -0,0 +1,47 @@
+---
+title: Installation
+description: Install web-core.
+slug: installation
+tags: [web-core, installation, setup]
+---
+
+# Installation
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+
+<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
+```
+
+  </TabItem>
+  <TabItem value="yarn">
+Install the SDK using yarn.
+
+```shell
+yarn add @dytesdk/web-core
+```
+
+  </TabItem>
+  <TabItem value="CDN">
+Add the following script tag in the head of your HTML file.
+
+```html
+<script src="https://cdn.dyte.in/core/dyte.js" />
+```
+
+  </TabItem>
+</Tabs>

web-core_versioned_docs/version-0.27.x/02-quickstart.md

@@ -0,0 +1,22 @@
+---
+title: Quickstart
+description: Quickstart guide for web-core.
+slug: quickstart
+tags: [web-core, quickstart, setup]
+---
+
+# Quickstart
+
+The DyteClient is the root class of the SDK. It is the main entry point of the SDK. It is the only class that you need to instantiate in order to use the SDK. To instantiate DyteClient, you can run the following command:
+
+```js
+const meeting = await DyteClient.init({
+    roomName,
+    authToken
+});
+await meeting.joinRoom();
+```
+
+You can get the roomName and authToken using our backend APIs and then pass it to the init method of DyteClient.
+
+Now at this point you have joined the meeting, the next steps would be configuring local media publishing and participant's media playback