diff --git a/docs/android-core-new/participants/events.mdx b/docs/android-core-new/participants/events.mdx index 5f47590cb6..29b6009233 100644 --- a/docs/android-core-new/participants/events.mdx +++ b/docs/android-core-new/participants/events.mdx @@ -1,192 +1,231 @@ --- -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 + - mobile-core - participants - self --- -You can subscribe to events for all participants using -`meeting.participants.on()` method. Here are the supported events: +# All Participant 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 + +Triggers an event when any participant joins the meeting. + +```kotlin + private val participantEventsListener = object : DyteParticipantEventsListener { + override fun onParticipantJoin(participant: DyteMeetingParticipant) { + // your code here to handle new participant + } + } ``` -### Page change +## Participant left -```ts -meeting.participants.on( - 'pageChanged', - ({ viewMode, currentPage, pageCount }) => { - console.log('page changed', currentPage); - } -); +Triggers an event when any participant leaves the meeting. + +```kotlin + private val participantEventsListener = object : DyteParticipantEventsListener { + override fun onParticipantLeave(participant: DyteMeetingParticipant) { + // your code here to handle participant left from meeting + } + } ``` -### Active speaker +## Participant update -This event is triggered when a participant becomes `active` when they starts to -speak. +Triggers an event whenever there is any change in participant. -```ts -meeting.participants.on('activeSpeaker', (participant) => { - console.log(`${participant.id} is currently speaking`); -}); +```kotlin + private val participantEventsListener = object : DyteParticipantEventsListener { + override fun onUpdate(participants: DyteParticipants) { + // your code here to handle participant update + } + } ``` -## Events on all participants +## Video 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. +Trigger an event when any participant starts / stops video. -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 onVideoUpdate(videoEnabled: Boolean, participant: DyteMeetingParticipant) { + // your code here to handle participant video toggle update + } + } +``` -### Participant joined +## Audio update -Trigger an event when any participant joins the meeting. +Trigger an event when any participant starts / stops audio. -```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 onAudioUpdate(audioEnabled: Boolean, participant: DyteMeetingParticipant) { + // your code here to handle participant audio toggle update + } + } ``` -### Participant left +## 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 any participant leaves the meeting. + override fun onScreenShareStarted(participant: DyteJoinedMeetingParticipant) { + // participant stared presenting screen in the meeting + } -```ts -meeting.participants.joined.on('participantLeft', (participant) => { - console.log(`A participant with id "${participant.id}" has left the meeting`); -}); + override fun onScreenShareEnded(participant: DyteJoinedMeetingParticipant) { + // participant stopped presenting screen in the meeting + } + } ``` -### Participant pinned +## Active speaker + +Trigger an event when any is change in active speaker in the meeting. -Trigger an event when a participant is pinned. +```kotlin + private val participantEventsListener = object : DyteParticipantEventsListener { + override fun onActiveSpeakerChanged(participant: DyteMeetingParticipant) { + // your code here to handle active speaker + } -```ts -meeting.participants.joined.on('pinned', (participant) => { - console.log(`Participant with id "${participant.id}" was pinned`); -}); + override fun onNoActiveSpeaker() { + // your code here to handle no active speaker + } + } ``` -### Participant unpinned +## Pinned participant + +Trigger an event when any is change in pinned participant in the meeting. -Trigger an event when a participant is unpinned. +```kotlin + private val participantEventsListener = object : DyteParticipantEventsListener { + override fun onParticipantPinned(participant: DyteMeetingParticipant) { + // your code here to show pinned participant + } -```ts -meeting.participants.joined.on('unpinned', (participant) => { - console.log(`Participant with id "${participant.id}" was unpinned`); -}); + override fun onParticipantUnpinned() { + // your code here to remove pinned participant + } + } ``` -### Video update +## Active participants list change -Trigger an event when any participant starts / stops video. +Triggers an event when any is change in active participants list 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 onActiveParticipantsChanged(active: List) { + // your code here to refresh active participants + } + } ``` -### Audio update +## All participants list change -Trigger an event when any participant starts / stops audio. +Triggers an event when any is change in all 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 onAllParticipantsChanged(all: List) { + // your code here to refresh all 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 - if (score < 5) { - console.log(`Participant ${participantId}'s media quality is poor`); +Trigger an event when the participant is pinned / unpinned. + +```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 + +Trigger an event when the participant starts / stops screen sharing. -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. +```kotlin + private val participantUpdateListener = object : DyteParticipantUpdateListener { + override fun onScreenShareStarted() { + // your code here to handle screen share started + } + override fun onScreenShareEnded() { + // your code here to handle screen share ended + } + } +``` - - Web Core Participant Events - diff --git a/docs/android-core-new/participants/participant-object.mdx b/docs/android-core-new/participants/participant-object.mdx index 5850eb11e8..cb7ffde09d 100644 --- a/docs/android-core-new/participants/participant-object.mdx +++ b/docs/android-core-new/participants/participant-object.mdx @@ -4,116 +4,84 @@ description: The object corresponding to a particular participant. sidebar_position: 2 slug: /participants/participant-object tags: - - web-core + - mobile-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 `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. The participant object has the following properties. -**Media**: - -- `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. - -**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 -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 -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 - ); - } -); -``` +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. + +## Host Controls + +If you are the host of the room, you will see the **host controls** when you click the **three-dot menu** on the top right corner of the participants list. The host controls allow you to manage the participants in the room. -Read more about the participant events in the -[events](/web-core/participants/events) section in the API reference. +The host controls include the following options: -## Host controls methods +- **Mute/Unmute**: Mute or unmute a participant. +- **Kick**: Kick a participant from the room. +- **Pin**: Pin a participant's video. +- **Turn off video**: Turn off a participant's video. -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. +You can also use these methods from our participant object to +perform these actions programmatically. -```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 } -// Pin a participant to the meeting. -await participant.pin(); +participant?.let { pcpt -> + // To pin a participant + pcpt.pin(); -// Unpin a participant in the meeting. -await participant.unpin(); + // To unpin a participant + pcpt.unpin(); +} ``` - 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..47890bb50d 100644 --- a/docs/android-core-new/participants/remote-participants.mdx +++ b/docs/android-core-new/participants/remote-participants.mdx @@ -1,117 +1,41 @@ --- -title: Participant Maps +title: Participant Types description: 'Events, methods and data pertaining to meeting participants.' sidebar_position: 1 slug: /participants/ tags: - - web-core + - mobile-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 all participants +val all: List = meeting.participants.all ``` -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 +- **all**: A list that contains all the participants who have joined the meeting except the local user +- **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 +- **active**: A list 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. +- **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` map, but to display the list of all participants in the meeting you'd use the `joined` map. -```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` and `all` list is of type `DyteParticipant`. - 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 index 38e250d212..e818402b80 100644 --- a/docs/android-core-new/plugins/disable-plugin.mdx +++ b/docs/android-core-new/plugins/disable-plugin.mdx @@ -3,7 +3,7 @@ title: Functions to disable plugins description: Methods on a plugin in a meeting. sidebar_position: 3 tags: - - web-core + - mobile-core - plugins --- @@ -13,63 +13,17 @@ Each plugin in `meeting.plugins` object is of type [`DytePlugin`](./introduction) and exposes the following functions to disable plugins. -## Remove Plugin View +### 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. +The `deactivate()` method removes the WebView from the ViewGroup and stops the +communication between the plugin and the core application. -```ts -const plugins = meeting.plugins.all.toArray(); +```kotlin +val plugin = meeting.plugins.get(0) -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(); +plugin.deactivate() ``` - Web Core Functions to disable plugins + Mobile Core Function to disable plugins diff --git a/docs/android-core-new/plugins/enable-plugin.mdx b/docs/android-core-new/plugins/enable-plugin.mdx index 56e0e35c17..804d7e765b 100644 --- a/docs/android-core-new/plugins/enable-plugin.mdx +++ b/docs/android-core-new/plugins/enable-plugin.mdx @@ -3,7 +3,7 @@ title: Functions to enable plugins description: Methods on a plugin in a meeting. sidebar_position: 2 tags: - - web-core + - mobile-core - plugins --- @@ -13,20 +13,19 @@ Each plugin in `meeting.plugins` object is of type [`DytePlugin`](./introduction) and exposes the following functions to enable plugins. -### Add Plugin View +### Get 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(); +```kotlin +val plugin = meeting.plugins.get(0) -plugins.forEach(async (plugin: DytePlugin) => { - const iframe = document.createElement('iframe'); - await plugin.addPluginView(iframe); -}); +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 @@ -35,42 +34,34 @@ 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); -}); -``` +```kotlin +val plugin: DytePlugin = meeting.plugins.get(0) -Here is another way you can activate a plugin. +plugin.activate() +``` -```ts -const plugins = meeting.plugins.all.toArray(); -const plugin = plugins.find((p) => p.name === 'YouTube'); +This directly activates the plugin without any user interaction. -await plugin?.activate(); -``` +### Activate a plugin on click -### ~~Enable Plugins~~ +You can also show a list of all plugins and activate a plugin on click programmatically. -**_Deprecated_** +```kotlin +val plugins: List = meeting.plugins.all -The `enable()` method enables a plugin for the current user. This does not -affect other users in the meeting. +plugins.forEach { plugin -> + val button = Button(context) -```ts -const plugins = meeting.plugins.all.toArray(); -const plugin = plugins.find((p) => p.name === 'YouTube'); + button.text = "Activate ${plugin.name}" + button.setOnClickListener { + plugin.activate() + } -await plugin?.enable(); + // Add the button to your view + view.addView(button) +} ``` - Web Core Functions to enable plugins + Mobile Core Function to enable plugins diff --git a/docs/android-core-new/plugins/extra.mdx b/docs/android-core-new/plugins/extra.mdx index 2533499681..c5c4ecb6d4 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 + - mobile-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 +## Receive data from the plugin + +You can receive data from a plugin by implementing the methods 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..ec27f6a52e 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 + - mobile-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