diff --git a/docs/android-core-new/participants/events.mdx b/docs/android-core-new/participants/events.mdx index 5f47590cb6..fae4b813f1 100644 --- a/docs/android-core-new/participants/events.mdx +++ b/docs/android-core-new/participants/events.mdx @@ -1,192 +1,218 @@ --- -title: Events -description: Event handling for participants. +title: Participant Events +description: >- + Dive into the details of handling participant events in your Android + application using Dyte's comprehensive documentation. sidebar_position: 3 tags: - - web-core + - android-core - participants - self --- -You can subscribe to events for all participants using -`meeting.participants.on()` method. Here are the supported events: +## All Participants Events -### View mode change +You can subscribe to events for all participants by implementing +`DyteParticipantEventsListener` callback and then passing that object to +`meeting.addParticipantEventsListener(dyteParticipantEventsListener)` method. -Triggered when the View mode changes +Here are the supported methods: -```ts -meeting.participants.on( - 'viewModeChanged', - ({ viewMode, currentPage, pageCount }) => { - console.log('view mode changed', viewMode); - } -); -``` +### Participant joined -### Page change +Triggers an event when any participant joins the meeting. -```ts -meeting.participants.on( - 'pageChanged', - ({ viewMode, currentPage, pageCount }) => { - console.log('page changed', currentPage); - } -); +```kotlin + private val participantEventsListener = object : DyteParticipantEventsListener { + override fun onParticipantJoin(participant: DyteMeetingParticipant) { + // your code here to handle new participant + } + } ``` -### Active speaker +### Participant left -This event is triggered when a participant becomes `active` when they starts to -speak. +Triggers an event when any participant leaves the meeting. -```ts -meeting.participants.on('activeSpeaker', (participant) => { - console.log(`${participant.id} is currently speaking`); -}); +```kotlin + private val participantEventsListener = object : DyteParticipantEventsListener { + override fun onParticipantLeave(participant: DyteMeetingParticipant) { + // your code here to handle participant left from meeting + } + } ``` -## Events on all participants +### Participants update -Instead of subscribing to individual participant events, you can subscribe to a -participant map, such as `joined` & `active` and get updated when any of the -participant emits an event. +Triggers an event whenever there is any change in the `meeting.participants` object. This includes any updates to participant lists or changes in individual participant within those lists. -If you want to subscribe to participants when they become `active`, you can do -so by subscribing to `meetings.participants.active.on('participantJoined')` +```kotlin + private val participantEventsListener = object : DyteParticipantEventsListener { + override fun onUpdate(participants: DyteParticipants) { + // your code here to handle participant update + } + } +``` -### Participant joined +### Video update -Trigger an event when any participant joins the meeting. +Trigger an event when any participant starts / stops video. -```ts -meeting.participants.joined.on('participantJoined', (participant) => { - console.log(`A participant with id "${participant.id}" has joined`); -}); +```kotlin + private val participantEventsListener = object : DyteParticipantEventsListener { + override fun onVideoUpdate(videoEnabled: Boolean, participant: DyteMeetingParticipant) { + // your code here to handle participant video toggle update + } + } ``` -### Participant left +### Audio update -Trigger an event when any participant leaves the meeting. +Trigger an event when any participant starts / stops audio. -```ts -meeting.participants.joined.on('participantLeft', (participant) => { - console.log(`A participant with id "${participant.id}" has left the meeting`); -}); +```kotlin + private val participantEventsListener = object : DyteParticipantEventsListener { + override fun onAudioUpdate(audioEnabled: Boolean, participant: DyteMeetingParticipant) { + // your code here to handle participant audio toggle update + } + } ``` -### Participant pinned +### Screenshare updates + +Triggers an event when there is any change in screenshares in a meeting. + +```kotlin + private val participantEventsListener = object : DyteParticipantEventsListener { + override fun onScreenSharesUpdated() { + // your code here to handle screenshares from meeting + // you can use `meeting.participants.screenshares` to get latest screenshare participants + } -Trigger an event when a participant is pinned. + override fun onScreenShareStarted(participant: DyteJoinedMeetingParticipant) { + // participant stared presenting screen in the meeting + } -```ts -meeting.participants.joined.on('pinned', (participant) => { - console.log(`Participant with id "${participant.id}" was pinned`); -}); + override fun onScreenShareEnded(participant: DyteJoinedMeetingParticipant) { + // participant stopped presenting screen in the meeting + } + } ``` -### Participant unpinned +### Active speaker + +Trigger an event when there is any change in active speaker in the meeting. -Trigger an event when a participant is unpinned. +```kotlin + private val participantEventsListener = object : DyteParticipantEventsListener { + override fun onActiveSpeakerChanged(participant: DyteMeetingParticipant) { + // your code here to handle active speaker + } -```ts -meeting.participants.joined.on('unpinned', (participant) => { - console.log(`Participant with id "${participant.id}" was unpinned`); -}); + override fun onNoActiveSpeaker() { + // your code here to handle no active speaker + } + } ``` -### Video update +### Pinned participant -Trigger an event when any participant starts / stops video. +Trigger an event when there is any change in pinned participant in the meeting. -```ts -meeting.participants.joined.on('videoUpdate', (participant) => { - console.log( - `A participant with id "${participant.id}" updated their video track in the meeting` - ); - // Use the video track if it exists - if (participant.videoEnabled) { - // participant.videoTrack - } else { - // handle stop video - } -}); +```kotlin + private val participantEventsListener = object : DyteParticipantEventsListener { + override fun onParticipantPinned(participant: DyteMeetingParticipant) { + // your code here to show pinned participant + } + + override fun onParticipantUnpinned() { + // your code here to remove pinned participant + } + } ``` -### Audio update +### Active participants list change -Trigger an event when any participant starts / stops audio. +Triggers an event when there is any change in active participants list in the meeting. -```ts -meeting.participants.joined.on('audioUpdate', (participant) => { - console.log( - `A participant with id "${participant.id}" updated their audio track in the meeting` - ); - // Use the audio track if it exists - if (participant.audioEnabled) { - // participant.audioTrack - } else { - // handle stop audio - } -}); +```kotlin + private val participantEventsListener = object : DyteParticipantEventsListener { + override fun onActiveParticipantsChanged(active: List) { + // your code here to refresh active participants + } + } ``` -### Screen share update - -Trigger an event when any participant starts / stops screen share. - -```ts -meeting.participants.joined.on('screenShareUpdate', (participant) => { - console.log( - `A participant with id "${participant.id}" updated their screen share in the meeting` - ); - // Use the screen share track if it exists - if (participant.screenShareEnabled) { - // participant.screenShareTrack - } else { - // handle stop screen share - } -}); +## Single Participant Events + +You can also subscribe to events for a single participant by implementing `DyteParticipantUpdateListener` callback and then passing that object to `participant.addParticipantUpdateListener(dyteParticipantUpdateListener)` method. + +Here are the supported methods: + +### Participant update + +Triggers an event whenever there is any change in participant. + +```kotlin + private val participantUpdateListener = object : DyteParticipantUpdateListener { + override fun onUpdate() { + // your code here to handle participant update + } + } ``` -## Network quality score - -Subscribe to the `mediaScoreUpdate` event to monitor network - -```ts -meeting.participants.joined.on( - 'mediaScoreUpdate', - ({ participantId, kind, isScreenshare, score }) => { - if (kind === 'video') { - console.log( - `Participant ${participantId}'s ${ - isScreenshare ? 'screenshare' : 'video' - } quality score is `, - score - ); +### Video update + +Trigger an event when the participant starts / stops video. + +```kotlin + private val participantUpdateListener = object : DyteParticipantUpdateListener { + override fun onVideoUpdate(isEnabled: Boolean) { + // your code here to handle participant video toggle update + } } +``` + +### Audio update + +Trigger an event when the participant starts / stops audio. - if (kind === 'audio') { - console.log( - `Participant ${participantId}'s audio quality score is `, - score - ); +```kotlin + private val participantUpdateListener = object : DyteParticipantUpdateListener { + override fun onAudioUpdate(isEnabled: Boolean) { + // your code here to handle participant audio toggle update + } } +``` + +### Pinned & Unpinned participant + +Trigger an event when the participant is pinned / unpinned. - if (score < 5) { - console.log(`Participant ${participantId}'s media quality is poor`); +```kotlin + private val participantUpdateListener = object : DyteParticipantUpdateListener { + override fun onPinned() { + // your code here to show pinned participant + } + + override fun onUnpinned() { + // your code here to remove pinned participant + } } - } -); ``` -## Events for specific participant +### Screen share started & ended -If you want to subscribe to above events but for a specific participant only, -you can do so by binding event to `meeting.participants.joined.get(peerId).on()` -method. where the `peerId` is the id of the participant that you want to watch. +Trigger an event when the participant starts / stops screen sharing. +```kotlin + private val participantUpdateListener = object : DyteParticipantUpdateListener { + override fun onScreenShareStarted() { + // your code here to handle screen share started + } - - Web Core Participant Events - + override fun onScreenShareEnded() { + // your code here to handle screen share ended + } + } +``` diff --git a/docs/android-core-new/participants/participant-object.mdx b/docs/android-core-new/participants/participant-object.mdx index 5850eb11e8..263e16cf47 100644 --- a/docs/android-core-new/participants/participant-object.mdx +++ b/docs/android-core-new/participants/participant-object.mdx @@ -4,116 +4,110 @@ description: The object corresponding to a particular participant. sidebar_position: 2 slug: /participants/participant-object tags: - - web-core + - android-core - participants - - participant --- -# Participant Object +# The participant object -The `participant` object consists of all the information related to a particular -participant. For instance, it contains a participants 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.md) for -a detailed reference. +The data regarding all meeting participants is stored under `meeting.participants`. Use the methods and events to consume the participants data. -The participant object has the following properties. - -**Media**: +The `participant` object consists of all the information related to a particular participant. For instance, it contains a participants 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. -- `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. -- `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. +The participant object has the following properties. -**Metadata**: - `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. -- `isPinned`: Set to true if the participant is pinned. +- `videoTrack`: The video track of the participant. +- `screenShareTrack`: 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. +- `isPinned`: True if current user is pinned in the meeting room. - `presetName`: Name of the preset associated with the participant. +- `stageStatus`: Status of stage for the participant +- `maxNumberOnScreen`: A int showing the maximum number of people set for this meeting. +- `currentPageNumber`: A int showing the current page in this meeting. Participants from this page are filled in the `active` list. +- `pageCount`: A int showing total number of pages available in the meeting. +- `canGoNextPage`: A boolean indicating if next page of joined participants is available to show. +- `canGoPreviousPage`: A boolean indicating if previous page of joined participants is available to show. -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 - ); - }); -``` +## To get video view of a given participant + +You can call `participant.getVideoView()` which will return a View which further +can used to add in any ViewGroup in android. + +Similarly one can use `participant.getScreenShareView()` which will return a +View which further can used to add in any ViewGroup in android. -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', - participant.id, - 'has toggled their mic to', - audioEnabled - ); - } -); +Similarly, you can also access the pagination related information like follows: + +```kotlin +val maxNumberOnScreen = meeting.participants.maxNumberOnScreen +val currentPageNumber = meeting.participants.currentPageNumber +val pageCount = meeting.participants.pageCount +val canGoNextPage = meeting.participants.canGoNextPage +val canGoPreviousPage = meeting.participants.canGoPreviousPage ``` -Read more about the participant events in the -[events](/web-core/participants/events) section in the API reference. +## Move between pages in paginated mode + +The `setPage(pageNumber: Int)` method allows you to switch between pages of participants present in the meeting. -## Host controls methods +```kotlin +// switch to 1st page +meeting.participants.setPage(1) +``` + +## Host Controls -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. +If you (the local user) have the relevant permissions, you can disable a participant's video or audio, or kick them from the meeting. -```ts -const participant = meeting.participants.joined.get(participantId); +```kotlin +val participant = meeting.participants.joined.firstOrNull { it.id == participantId } -// To disable a participant's video stream -participant.disableVideo(); +participant?.let { pcpt -> + // To disable a participant's video stream + pcpt.disableVideo(); -// To disable a participant's audio stream -participant.disableAudio(); + // To disable a participant's audio stream + pcpt.disableAudio(); -// To kick a participant from the meeting -participant.kick(); + // To kick a participant from the meeting + pcpt.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); +```kotlin +val participant = meeting.participants.joined.firstOrNull { it.id == participantId } + +participant?.let { pcpt -> + // To pin a participant + pcpt.pin(); + + // To unpin a participant + pcpt.unpin(); +} +``` -// Pin a participant to the meeting. -await participant.pin(); +## Broadcast message to all participants -// Unpin a participant in the meeting. -await participant.unpin(); +```kotlin +// broadcast message +meeting.participants.broadcastMessage(type, payload) ``` - Web Core The participant object + Android Core The participant object + diff --git a/docs/android-core-new/participants/permissions.mdx b/docs/android-core-new/participants/permissions.mdx deleted file mode 100644 index dec9f4db92..0000000000 --- a/docs/android-core-new/participants/permissions.mdx +++ /dev/null @@ -1,52 +0,0 @@ -# Permissions - -Permissions for a participant are defined by the preset. However they can updated in meeting by calling `updatePermissions` for remote participants - -## Find the target participants - -Permissions can be updated for either a single participant or multiple participant at once. Find the `id`s of the participant whose permissions need to be updated - -```ts -const participantIds = meeting.participants.joined - .toArray() - .filter((e) => { - return e.name.startsWith('John'); - }) - .map((p) => p.id); -``` - -## Update permissions - -```ts -// Allow file upload permissions in public chat -const newPermissions = { chat: { public: { files: true } } }; - -meeting.participants.updatePermissions(participantIds, newPermissions); -``` - -Allowed values for update permissions objects. Every field is optional - -```ts -interface UpdatedPermissions { - polls?: { - canCreate?: boolean; - canVote?: boolean; - }; - plugins?: { - canClose?: boolean; - canStart?: boolean; - }; - chat?: { - public?: { - canSend?: boolean; - text?: boolean; - files?: boolean; - }; - private?: { - canSend?: boolean; - text?: boolean; - files?: boolean; - };; - }; -} -``` diff --git a/docs/android-core-new/participants/pip.mdx b/docs/android-core-new/participants/pip.mdx deleted file mode 100644 index 56d29a0dbb..0000000000 --- a/docs/android-core-new/participants/pip.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Picture-in-Picture -description: 'Events, methods and data pertaining to browser picture in picture mode' -sidebar_position: 3 -tags: - - web-core - - participants - - participant ---- - -Picture-in-Picture API allows you to render `meeting.participants.active` participant's video as a floating tile outside of the current webpage's context. - -Supported in Chrome/Edge/Chromium based browsers - -## Methods - -### Check if supported - -Use the boolean value at `meeting.participants.pip.isSupported` to check if the browser supports PIP capabilities - -### Initialization - -Call `meeting.participant.pip.init()` to activate PIP mode. Optionally you can pass height and width the configure the size of the PIP tile - -```ts -meeting.participant.pip.init({ - width: 360, - height: 360, -}); -``` - -### Enable - -`meeting.participant.pip.enable()` to enable PIP mode if disabled - -### Disable - -`meeting.participant.pip.disable()` to enable PIP mode if enabled - - - Web Core Picture-in-Picture - diff --git a/docs/android-core-new/participants/remote-participants.mdx b/docs/android-core-new/participants/remote-participants.mdx index 10ec193fac..613a904800 100644 --- a/docs/android-core-new/participants/remote-participants.mdx +++ b/docs/android-core-new/participants/remote-participants.mdx @@ -1,117 +1,39 @@ --- -title: Participant Maps +title: Participant Types description: 'Events, methods and data pertaining to meeting participants.' sidebar_position: 1 slug: /participants/ tags: - - web-core + - android-core - participants - - participant --- -# Participant Maps +# Participant Types -The data regarding all meeting participants is stored under -`meeting.participants`. These **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: +The data regarding all meeting participants is stored under `meeting.participants`. These **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 +```kotlin // get all joined participants -const joinedParticipants = meeting.participants.joined; +val joined: List = meeting.participants.joined + +// get active participants +val active: List = meeting.participants.active ``` -The `meeting.participants` object has the following **maps** of participants +The `meeting.participants` object has the following **lists** of participants -- **joined**: A map that contains all the participants who are currently in the meeting +- **joined**: A list that contains all the participants who are currently in the meeting except the local user -- **waitlisted**: A map that contains all the participants waiting to join the +- **waitlisted**: A list that contains all the participants waiting to join the meeting. -- **active**: A map that contains all the participants except the local user whose media is subscribed to i.e - participants are supposed to be on the screen at the moment except the local user -- **pinned**: A map that contains all the pinned participants of the meeting. - -Therefore if you were to make a video / audio grid of participants, you'd use the `active` -map, but to display the list of all participants in the meeting you'd use the `joined` map. - -Each participant in each of the `joined`, `waitlisted`, `active`, and `pinned` -maps is of type [`DyteParticipant`](../reference/DyteParticipant.md). Read more -about each individual `participant` object -[here](../participants/participant-object.mdx). - -Each of these maps are of type -[`DyteParticipantMap`](../reference/DyteParticipantMap.md), 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: - -```ts -meeting.participants.pinned.on('participantJoined', (participant) => { - console.log(`Participant ${participant.name} got pinned`); -}); -``` - ---- - -and these other properties - -- `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. -- `lastActiveSpeaker `: This stores the `participantId` of the last participant - who spoke in the meeting. - -## 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 participants 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. +- **active**: A list that contains all the participants, **including** the local user whose media is subscribed to i.e participants who are supposed to be on the screen at the moment, including the local user. +- **pinned**: A list that contains all the pinned participants of the meeting. +- **screenShares**: A list that contains all the participants who are sharing their screen. -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. +Therefore if you were to make a video / audio grid of participants, you'd use the `active` list, but to display the list of all participants in the meeting you'd use the `joined` list. -```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 in paginated mode - -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); -``` - -## Waiting room methods - -The `acceptWaitingRoomRequest()` method accepts requests from waitlisted -participants if user has appropriate permissions. - -```ts -await meeting.participants.joined.acceptWaitingRoomRequest(participantId); -``` - -The `rejectWaitingRoomRequest()` method requests from waitlisted participants if -user has appropriate permissions. - -```ts -await meeting.participants.joined.rejectWaitingRoomRequest(participantId); -``` +Each participant in each of the `joined`, `active`, `pinned` and `screenShares` list are of type `DyteJoinedMeetingParticipant`, `waitlisted` list is of type `DyteWaitlistedParticipant`. - Web Core Participants + Android Core Participants diff --git a/docs/android-core-new/plugins/disable-plugin.mdx b/docs/android-core-new/plugins/disable-plugin.mdx deleted file mode 100644 index 38e250d212..0000000000 --- a/docs/android-core-new/plugins/disable-plugin.mdx +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Functions to disable plugins -description: Methods on a plugin in a meeting. -sidebar_position: 3 -tags: - - web-core - - plugins ---- - -# Functions to disable plugins - -Each plugin in `meeting.plugins` object is of type -[`DytePlugin`](./introduction) and exposes the following functions to disable -plugins. - -## Remove Plugin View - -This method is used for cleaning up event listeners attached to an iframe. It -must be used before the iframe is removed from the DOM. - -```ts -const plugins = meeting.plugins.all.toArray(); - -plugins.forEach(async (plugin: DytePlugin) => { - await plugin.removePluginView(); -}); -``` - -### Deactivate Plugins - -The `deactivate()` method deactivates the plugin for all users in the meeting. -When you deactivate a plugin, it gets removed from the active plugins map and -can only be accessed from `meeting.plugins.all`. - -The snippet below displays all active plugins and deactivate a plugin on click. - -```ts -const plugins = meeting.plugins.active.toArray(); - -plugins.forEach((plugin: DytePlugin) => { - const button = document.createElement('button'); - button.innerText = `Deactivate ${plugin.name}`; - button.onclick = async () => { - await plugin.deactivate(); - }; - document.body.appendChild(button); -}); -``` - -Here is another way you can deactivate a plugin. - -```ts -const plugins = meeting.plugins.active.toArray(); -const plugin = plugins.find((p) => p.name === 'YouTube'); - -await plugin?.deactivate(); -``` - -### ~~Disable Plugins~~ - -**_Deprecated_** - -The `disable()` method deactivates the plugin for the current user. This does -not affect other users in the meeting. - -```ts -const plugins = meeting.plugins.active.toArray(); -const plugin = plugins.find((p) => p.name === 'YouTube'); - -await plugin?.disable(); -``` - - - Web Core Functions to disable plugins - diff --git a/docs/android-core-new/plugins/enable-disable-plugin.mdx b/docs/android-core-new/plugins/enable-disable-plugin.mdx new file mode 100644 index 0000000000..b4e624a375 --- /dev/null +++ b/docs/android-core-new/plugins/enable-disable-plugin.mdx @@ -0,0 +1,83 @@ +--- +title: Functions to enable plugins +description: Methods on a plugin in a meeting. +sidebar_position: 2 +tags: + - android-core + - plugins +--- + +## Functions to enable plugins + +Each plugin in `meeting.plugins` object is of type +[`DytePlugin`](./introduction) and exposes the following functions to enable +plugins. + +### Get Plugin View + +This method adds the communication layer between the plugin inside the WebView and +the core SDK (meeting object) in your application. + +```kotlin +val plugin = meeting.plugins.active[0] + +plugin.getPluginView() // This will return a WebView +``` + +The `getPluginView()` method returns a WebView that can be added to a ViewGroup. + +### Activate Plugins + +The `activate()` method activates a plugin for all users in the meeting. When +you activate a plugin, it moves into the active plugins map and can be accessed +from `meeting.plugins.active`. + +The snippet below retrieves the first plugin from the list and activates it. + +```kotlin +val plugin: DytePlugin = meeting.plugins.all[0] + +plugin.activate() +``` + +This directly activates the plugin without any user interaction. + +### Show a list of all plugins and activate a plugin on click + +You can also show a list of all plugins and activate a plugin on click programmatically. + +```kotlin +val plugins: List = meeting.plugins.all + +plugins.forEach { plugin -> + val button = Button(context) + + button.text = "Activate ${plugin.name}" + button.setOnClickListener { + plugin.activate() + } + + // Add the button to your view + view.addView(button) +} +``` + +## Functions to disable plugins + +Each plugin in `meeting.plugins` object is of type +[`DytePlugin`](./introduction) and exposes the following functions to disable +plugins. + +### Deactivate Plugin + +The `deactivate()` method deactivates the plugin for all users in the meeting. When you deactivate a plugin, it moves out of the active plugins map and can only be accessed from `meeting.plugins.all`. + +```kotlin +val plugin = meeting.plugins.active[0] + +plugin.deactivate() +``` + + + Android Core Function to enable plugins + diff --git a/docs/android-core-new/plugins/enable-plugin.mdx b/docs/android-core-new/plugins/enable-plugin.mdx deleted file mode 100644 index 56e0e35c17..0000000000 --- a/docs/android-core-new/plugins/enable-plugin.mdx +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Functions to enable plugins -description: Methods on a plugin in a meeting. -sidebar_position: 2 -tags: - - web-core - - plugins ---- - -# Functions to enable plugins - -Each plugin in `meeting.plugins` object is of type -[`DytePlugin`](./introduction) and exposes the following functions to enable -plugins. - -### Add Plugin View - -This method adds the communication layer between the plugin inside the iframe and -the core application (meeting object) in the main window. - -```ts -const plugins = meeting.plugins.all.toArray(); - -plugins.forEach(async (plugin: DytePlugin) => { - const iframe = document.createElement('iframe'); - await plugin.addPluginView(iframe); -}); -``` - -### Activate Plugins - -The `activate()` method activates a plugin for all users in the meeting. When -you activate a plugin, it moves into the active plugins map and can be accessed -from `meeting.plugins.active`. - -The snippet below displays all plugins and activates a plugin on click. - -```ts -const plugins = meeting.plugins.all.toArray(); - -plugins.forEach((plugin: DytePlugin) => { - const button = document.createElement('button'); - button.innerText = plugin.name; - button.onclick = async () => { - await plugin.activate(); - }; - document.body.appendChild(button); -}); -``` - -Here is another way you can activate a plugin. - -```ts -const plugins = meeting.plugins.all.toArray(); -const plugin = plugins.find((p) => p.name === 'YouTube'); - -await plugin?.activate(); -``` - -### ~~Enable Plugins~~ - -**_Deprecated_** - -The `enable()` method enables a plugin for the current user. This does not -affect other users in the meeting. - -```ts -const plugins = meeting.plugins.all.toArray(); -const plugin = plugins.find((p) => p.name === 'YouTube'); - -await plugin?.enable(); -``` - - - Web Core Functions to enable plugins - diff --git a/docs/android-core-new/plugins/extra.mdx b/docs/android-core-new/plugins/extra.mdx index 2533499681..bb186bc24f 100644 --- a/docs/android-core-new/plugins/extra.mdx +++ b/docs/android-core-new/plugins/extra.mdx @@ -3,45 +3,66 @@ title: Other methods description: Methods on a plugin in a meeting. sidebar_position: 4 tags: - - web-core + - android-core - plugins --- -## Subscribe to events from a plugin +## Send data to the plugin -A plugin emits the following events: +You can send data (type `any`) to a plugin using the `sendData()` method. This method comes in handy when building your own plugin. -- `enabled` - Emitted when a plugin is enabled. -- `closed` - Emitted when a plugin is closed. -- `dyteStateUpdate` - Emitted when the state of the plugin has changed. -- `ready` - Emitted when the plugin is ready to exchange data with client SDK. -- `toggleViewMode` - Emitted when the control is toggled for users with - view-only permissions for a plugin. +```kotlin +val pluginId = '...'; +val plugin = meeting.plugins.active.firstOrNull { it.id == pluginId } -```ts -const pluginId = '...'; -const plugin = meeting.plugins.active.get(pluginId); -plugin.on('enabled', () => { - console.log('The plugin has been enabled'); -}); +plugin?.let { p -> + p.sendData( + eventName = "my-custom-event", + data = "Hello world" + ) +} ``` -## Send data to the plugin +## Listening to plugin events + +You can receive data from a plugin by implementing the `onPluginMessage()` method defined in `DytePluginEventsListener` interface. This method comes in handy when building your own plugin. + +```kotlin +val pluginEventListener = object : DytePluginEventsListener { + override fun onPluginActivated(plugim: DytePlugin) { + ... + } + + override fun onPluginDeactivated(plugin: DytePlugin) { + ... + } + + override onPluginMessage(plugin: DytePlugin, eventName: String, data: Any?) { + ... + } -You can send data (type `any`) to a plugin using the `sendData()` method. This -method comes in handy when building your own plugin. - -```ts -const pluginId = '...'; -const plugin = meeting.plugins.active.get(pluginId); -plugin.on('ready', () => { - plugin.sendData({ - eventName: 'my-custom-event', - data: 'Hello world', - }); -}); + override onPluginFileRequest(plugin: DytePlugin) { + ... + } +} + +meeting.addPluginEventsListener(pluginEventListener) ``` - - Web Core Other methods - +## Upload file to a plugin + +You can upload a file to a plugin using the `uploadFile()` method. This method comes in handy when building your own plugin. + +```kotlin +val pluginId = '...'; +val plugin = meeting.plugins.active.firstOrNull { it.id == pluginId } + +plugin?.let { p -> + p.uploadFile( + DytePluginFile( + resultCode = 1, + data = Intent() // Intent with the file data + ) + ) +} +``` diff --git a/docs/android-core-new/plugins/introduction.mdx b/docs/android-core-new/plugins/introduction.mdx index 4e2682c396..d2e211260d 100644 --- a/docs/android-core-new/plugins/introduction.mdx +++ b/docs/android-core-new/plugins/introduction.mdx @@ -3,82 +3,52 @@ title: Introduction description: Manage plugins in a meeting. sidebar_position: 1 tags: - - web-core + - android-core - plugins --- # Introduction -Plugins are one-click add-ons that can make your meetings more immersive and -collaborative. Dyte provides a bunch of inbuilt plugins to choose from, you can -also build your own plugins using the Plugin SDK. +Plugins are one-click add-ons that can make your meetings more immersive and collaborative. Dyte provides a bunch of inbuilt plugins to choose from, you can also build your own plugins using the [Plugin SDK](../../plugin-sdk/). -The meeting plugins can be accessed from the `meeting.plugins` object, it -exposes the following. +The meeting plugins can be accessed from the `meeting.plugins` object, it exposes the following. | Property | Type | Description | | -------- | ---- | -------------------------------------- | -| active | Map | All plugins that are currently in use. | -| all | Map | All plugins the meeting has access to. | - -Each plugin in the map is of type `DytePlugin`. - -```ts -interface DytePlugin { - baseURL: string; - createdAt: string; - description: string; - id: string; - name: string; - config: PluginConfig | undefined; - organizationId: string; - picture: string; - private: boolean; - published: boolean; - staggered: boolean; - tags: string[]; - type: string; - updatedAt: string; +| active | List | All plugins that are currently in use. | +| all | List | All plugins the meeting has access to. | + +Each plugin in the list is of type `DytePlugin` which has the following public fields and methods: + +```kotlin +class DytePlugin { + val id: String + val name: String + val description: String + val picture: String + val isPrivate: Boolean + val staggered: Boolean + val baseURL: String + val config: PluginConfig + val isActive: Boolean + val enabledBy: String? + + fun activate() + fun deactivate() + fun getPluginView(): WebView + fun uploadFile(file: DytePluginFile) + fun sendData(eventName: String, data: Any?) } ``` -Once a plugin is activated, `plugin.config` get's populated. It is of type -`PluginConfig`. +The `PluginConfig` type consists of the following fields: -```ts -interface PluginConfig { - name: string; - pluginId: string; - version: string; - description: string; - author?: string; - repository?: string; - tags?: string[]; - picture?: string; - url?: string; - files: { - include: string[]; - exclude?: string[]; - }; - views?: { - [viewId: string]: { - url: string; - suggestedPosition: string; - }; - }; - contentScript?: string; - permissions?: { - [key: string]: { - default: boolean; - description: string; - }; - }; - config?: { - [key: string]: string; - }; -} +```kotlin +data class PluginConfig( + val accessControl: String = "FULL_ACCESS" +) ``` - Web Core Introduction + Mobile Core Introduction