Skip to content

Commit a055259

Browse files
palashgopalashgo
authored
Merge pull request #229 from dyte-io/update-internal-docs
chore: update internal docs
2 parents 930bb35 + 711b9ae commit a055259

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+846
-366
lines changed

‎docs/android/advanced-usage.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@ the meeting. You can get access to meeting object as follows.
2828
val meeting = dyteUIKit.meeting
2929
```
3030

31+
:::tip Note
32+
Once you have access to `meeting` object you can listen to all events triggered in core-sdk.
33+
Please read [core docs](/android-core/)
34+
:::
35+
3136
You can get the UI configuration of the meeting in progress using the
3237
`designTokens` property of `Meeting`.
3338

‎docs/android/components/_category_.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"position": 5,
3+
"label": "Components",
4+
"collapsible": true
5+
}

‎docs/android/components/dyte-audio-visualizer.mdx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
image: /static/ui-kit/1.x.x/components/dyte-audio-visualizer.svg
3+
---
4+
5+
# DyteParticipantAudioIndicator
6+
7+
An audio visualizer component which visualizes a participants audio.
8+
9+
To use this component inside an xml use following syntax
10+
11+
```xml
12+
<dyte.io.uikit.atoms.DyteParticipantAudioIndicator
13+
android:id="@+id/audio_indicator"
14+
android:layout_width="wrap_content"
15+
android:layout_height="wrap_content"
16+
android:src="@drawable/ic_mic_on_24"
17+
... <!--other xml attributes-->
18+
/>
19+
```
20+
21+
Inside kotlin/Java code you need to pass objtec of `DyteMeetingParticipant` to render their audio status.
22+
```kotlin
23+
val audioIndicator = findViewById(R.id.audio_indicator)
24+
audioIndicator.activate(participant)
25+
```

‎docs/android/components/dyte-avatar.mdx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# DyteAvatarView
2+
3+
Avatar component which renders a participant's image or their initials.
4+
5+
```xml
6+
<dyte.io.uikit.view.avatarview.DyteAvatarView
7+
android:id="@+id/dyteavatarview_dyte_participant_tile"
8+
android:layout_width="100dp"
9+
android:layout_height="100dp"
10+
android:layout_gravity="center"
11+
/>
12+
```
13+
14+
And to setup DyteAvatarView inside your kotlin/Java code use as follow:
15+
```kotlin
16+
val avatarView = findViewById(R.id.dyteavatarview_dyte_participant_tile)
17+
avatarView.activate(participant)
18+
```

‎docs/android/components/dyte-button.mdx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
image: /static/ui-kit/1.x.x/components/dyte-button.svg
3+
---
4+
5+
# DyteButton
6+
7+
A button that follows Dyte's Design System.
8+
9+
```xml
10+
<dyte.io.uikit.view.button.DyteButton
11+
android:gravity="center"
12+
android:id="@+id/btn_id"
13+
android:layout_width="200dp"
14+
android:layout_height="48dp"
15+
android:text="Text on Button"
16+
app:dyte_btn_variant="primary"
17+
/>
18+
```
19+
20+
## Button variants
21+
22+
There are 3 variants supported, can be set using xml.
23+
```xml
24+
app:dyte_btn_variant="danger"
25+
app:dyte_btn_variant="primary"
26+
app:dyte_btn_variant="secondary"
27+
```

‎docs/android/components/dyte-camera-toggle.mdx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# DyteCameraToggle
2+
3+
A button which toggles your camera.
4+
5+
```xml
6+
<dyte.io.uikit.view.controlbarbuttons.DyteCameraToggleButton
7+
android:id="@+id/btn_camera_toggle"
8+
android:layout_width="48dp"
9+
android:layout_height="48dp"
10+
app:dyte_cbb_showText="false"
11+
/>
12+
```
13+
14+
To setup the button inside kotlin/Java code do as follows
15+
```kotlin
16+
val cameraToggleButton = findViewById(R.id.btn_camera_toggle)
17+
cameraToggleButton.activate(meeting)
18+
```

‎docs/android/components/dyte-chat.mdx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
image: /static/ui-kit/1.x.x/components/dyte-chat.svg
3+
---
4+
5+
# DyteChat
6+
7+
Fully featured chat screen with image & file upload and auto-scroll.
8+
9+
```kotlin
10+
val dyteChatBottomSheet = DyteChatBottomSheet(meeting)
11+
dyteChatBottomSheet.show(
12+
fragmentManager,
13+
"SOME_TAG_HERE"
14+
)
15+
```

‎docs/android/components/dyte-clock.mdx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
image: /static/ui-kit/1.x.x/components/dyte-clock.svg
3+
---
4+
5+
# DyteClockView
6+
7+
```xml
8+
<dyte.io.uikit.view.DyteClockView
9+
android:id="@+id/dyte_clock_view"
10+
android:layout_width="wrap_content"
11+
android:layout_height="wrap_content"
12+
/>
13+
```
14+
15+
To setup the clock inside kotlin/Java code do as follows
16+
```kotlin
17+
val clockView = findViewById(R.id.dyte_clock_view)
18+
clockView.activate(meeting)
19+
```

‎docs/android/components/dyte-controlbar-button.mdx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
image: /static/ui-kit/1.x.x/components/dyte-controlbar-button.svg
3+
---
4+
5+
# DyteControlBarButton
6+
7+
A skeleton component used for composing buttons.
8+
9+
```xml
10+
<dyte.io.uikit.view.controlbars.DyteMeetingControlBarView
11+
android:id="@+id/dyte_control_bar_button"
12+
android:layout_width="wrap_content"
13+
android:layout_height="wrap_content"
14+
app:dyte_cbb_showText="true"
15+
app:dyte_cbb_iconSize="12sp"
16+
app:dyte_cbb_iconPadding="4dp"
17+
app:dyte_cbb_variant="button|horizontal"
18+
/>
19+
```
20+
21+
To setup the controlbar button inside kotlin/Java code do as follows
22+
```kotlin
23+
val buttonView = findViewById(R.id.dyte_control_bar_button)
24+
buttonView.setOnClickListener(
25+
{
26+
// TODO: your action here
27+
}
28+
)
29+
```

‎docs/android/components/dyte-grid-pagination.mdx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
image: /static/ui-kit/1.x.x/components/dyte-grid-pagination.svg
3+
---
4+
5+
# DyteGridPaginatorView
6+
7+
A component which allows you to change current page and view mode of active
8+
participants list.
9+
10+
```xml
11+
<dyte.io.uikit.view.DyteGridPaginatorView
12+
android:id="@+id/dyte_grid_paginator"
13+
android:layout_width="wrap_content"
14+
android:layout_height="wrap_content" />
15+
```
16+
17+
To setup the paginator inside kotlin/Java code do as follows
18+
```kotlin
19+
val paginatorView = findViewById(R.id.dyte_grid_paginator)
20+
paginatorView.activate(meeting)
21+
```

‎docs/android/components/dyte-grid.mdx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
image: /static/ui-kit/1.x.x/components/dyte-grid.svg
3+
---
4+
5+
# DyteGridViewV2
6+
7+
The main grid component which abstracts all the grid handling logic and renders
8+
it for you.
9+
10+
```xml
11+
<dyte.io.uikit.molecules.dytegrid.DyteGridViewV2
12+
android:id="@+id/dyte_grid_view"
13+
android:layout_width="match_parent"
14+
android:layout_height="match_parent"
15+
/>
16+
```
17+
18+
To setup the grid inside kotlin/Java code do as follows
19+
```kotlin
20+
val gridView = findViewById(R.id.dyte_grid_view)
21+
gridView.activate(meeting)
22+
```

‎docs/android/components/dyte-idle-screen.mdx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
image: /static/ui-kit/1.x.x/components/dyte-idle-screen.svg
3+
---
4+
5+
# DyteLoaderView
6+
7+
A screen that shows full screen loader which is used between a connection is established with Dyte universe.
8+
9+
```xml
10+
<dyte.io.uikit.view.DyteLoaderView
11+
android:id="@+id/clLoader"
12+
android:layout_width="0dp"
13+
android:layout_height="0dp"
14+
app:layout_constraintBottom_toBottomOf="parent"
15+
app:layout_constraintEnd_toEndOf="parent"
16+
app:layout_constraintStart_toStartOf="parent"
17+
app:layout_constraintTop_toTopOf="parent"
18+
/>
19+
```

‎docs/android/components/dyte-join-stage.mdx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# DyteJoinStage
2+
3+
A confirmation dialog screen which is shown
4+
- When the user's request to Join Stage is approved by the meeting host.
5+
- When host invites the localUser to join stage.
6+
7+
```kotlin
8+
val dyteJoinStage = DyteJoinStage(requireContext())
9+
dyteJoinStage.setOnCancelListener {
10+
// when dialog is dismissed by the localUser
11+
}
12+
dyteJoinStage.show()
13+
dyteJoinStage.activate(meeting)
14+
```

‎docs/android/components/dyte-leave-button.mdx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# DyteLeaveButton
2+
3+
A button which toggles visilibility of the leave confirmation dialog.
4+
5+
```xml
6+
<dyte.io.uikit.view.controlbarbuttons.DyteLeaveButton
7+
android:id="@+id/dyte_leave_button"
8+
android:layout_width="48dp"
9+
android:layout_height="48dp"
10+
app:dyte_cbb_showText="false"
11+
/>
12+
```
13+
14+
To activate DyteLeaveButton, do as follows:
15+
```kotlin
16+
val leaveButton = findViewById(R.id.dyte_leave_button)
17+
leaveButton.activate(meeting)
18+
```

‎docs/android/components/dyte-leave-meeting.mdx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
image: /static/ui-kit/1.x.x/components/dyte-leave-meeting.svg
3+
---
4+
5+
# DyteLeaveMeetingView
6+
7+
A component which allows you to leave a meeting or end meeting for all, if you
8+
have the permission.
9+
10+
To use the component do in kotlin/java as follows:
11+
```kotlin
12+
val endCallDialog = DyteLeaveMeetingView(context, meeting)
13+
endCallDialog.show()
14+
```

‎docs/android/components/dyte-meeting-title.mdx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
image: /static/ui-kit/1.x.x/components/dyte-meeting-title.svg
3+
---
4+
5+
# DyteMeetingTitleView
6+
7+
A component which displays the title of the meeting.
8+
9+
```xml
10+
<dyte.io.uikit.view.DyteMeetingTitleView
11+
android:id="@+id/dytemeetingtitletextview"
12+
android:layout_width="wrap_content"
13+
android:layout_height="wrap_content" />
14+
```
15+
16+
To use the component do in kotlin/java as follows:
17+
```kotlin
18+
val meetingTitleView = findViewById(R.id.dytemeetingtitletextview)
19+
meetingTitleView.activate(meeting)
20+
```

‎docs/android/components/dyte-meeting.mdx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
image: /static/ui-kit/1.x.x/components/dyte-meeting.svg
3+
---
4+
5+
# DyteUIKit
6+
7+
A single component which renders an entire meeting UI.
8+
9+
It loads your preset and renders the UI based on it. With this component, you
10+
don't have to handle all the states, dialogs and other smaller bits of managing
11+
the application.
12+
13+
```kotlin
14+
val meetingInfo = DyteMeetingInfoV2(
15+
authToken = authToken,
16+
baseUrl = baseUrl
17+
)
18+
val dyteUIKitInfo = DyteUIKitInfo(
19+
activity = this,
20+
dyteMeetingInfo = meetingInfo
21+
)
22+
val dyteUIKit = DyteUIKitBuilder.build(dyteUIKitInfo)
23+
dyteUIKit.startMeeting()
24+
```

‎docs/android/components/dyte-mic-toggle.mdx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# DyteMicToggleButton
2+
3+
A button which toggles your microphone.
4+
5+
```xml
6+
<dyte.io.uikit.view.controlbarbuttons.DyteMicToggleButton
7+
android:id="@+id/dyte_mic_toggle"
8+
android:layout_width="48dp"
9+
android:layout_height="48dp"
10+
app:dyte_cbb_showText="false"/>
11+
```
12+
13+
To use the component do in kotlin/java as follows:
14+
```kotlin
15+
val micToggleButton = view.findViewById(R.id.dyte_mic_toggle)
16+
micToggleButton.activate(meeting)
17+
```

‎docs/android/components/dyte-more-toggle.mdx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# DyteMoreToggleButton
2+
3+
A button which toggles visibility of a more menu.
4+
5+
```xml
6+
<dyte.io.uikit.view.controlbarbuttons.DyteMoreToggleButton
7+
android:id="@+id/dyte_more_toggle"
8+
android:layout_width="50dp"
9+
android:layout_height="50dp" />
10+
```
11+
12+
To use the component do in kotlin/java as follows:
13+
```kotlin
14+
var moreToggleButton = findViewById(R.id.dyte_more_toggle)
15+
moreToggleButton.activate()
16+
```

0 commit comments

Comments
 (0)