Component Customization Limitation

Amity UIKit provides already built UI elements on single page. You can change the appearance such as color and typography, in the . However, the UIKit does not allow you to replace these small components with other views. In addition, you cannot modify the view hierarchy inside the page.

Components

Usage:

Create a view controller

let viewController = AmityCommunityHomePageViewController.make()

Features

Usage

Create a view controller

let viewController = AmityMyCommunityPreviewViewController.make()

Components

Usage

Create a view controller

let viewController = AmityNewsfeedViewController.make()

Features

Usage

You can use either of these two methods:

1. make - the posts will be ranked in chronological order. Below is the sample code.

   Copy

   let viewController = AmityGlobalFeedViewController.make()

2. makeCustomPostRanking - the posts will be ranked according to a score-sorting mechanism. Refer to Custom Post Ranking for more information about this feature. You can retrieve your global feed sorted by ranking score with this code.

   Copy

   let viewController = AmityGlobalFeedViewController.makeCustomPostRanking()

Features

Usage

Create a view controller

let viewController = AmityRecommendedCommunityViewController.make()

Features

Usage

Create a view controller

let viewController = AmityCategoryListViewController.make()

Features

Usage

Create a view controller

let viewController = AmityTrendingCommunityViewController.make()

Features

Usage

Create a view controller

let viewController = AmityCategoryListViewController.make()

Features

Usage

let viewController = AmityMyCommunityViewController.make()

Features

Usage

Create a view controller

let viewController = EkoCategoryCommunityListViewController.make(categoryId: "CATEGORY_ID")

Feature and Component

Usage

Create a view controller

// Create type
let viewController = AmityCommunityCreatorViewController.make()

// Edit type
let viewController = AmityCommunityEditorViewController.make(withCommunityId: "COMMUNITY_ID")

Features

Features

Components

• Recommended Community

• Top trending

• Categories

Usage

Create a view controller

let viewController = AmityCommunityExplorerViewController.make()

Text only

Text and Images

Device Camera

Device Image Gallery

Text and Files

Text and Videos

Polls

You can create a poll post and other users can interact with that poll post by selecting from the poll options.

Live Stream

To create a live stream post and for a detailed discussion on the live stream features, refer to Livestream Post documentation.

Features

Supported types

• File: All file types are supported

• Image: JPG, JPEG, and PNG

• Video: 3GP, AVI, FLV, MP4 and MPEG-2

Usage

Create a view controller

// Post to user feed
let viewController = AmityPostCreatorViewController.make(postTarget: .myFeed)

// Post to community feed
let viewController = AmityPostCreatorViewController.make(postTarget: .community(object: postModel))

// Poll post
let viewController = AmityPollCreatorViewController.make(postTarget: <your post target>)
self.present(viewController, animated: true, completion: nil)

Parameter

Attachment options

By default AmityPostCreatorViewController allows all attachments when creating a post. You can optionally choose attachment options when creating the post.

All available attachment options are image, video, and file. These can be found in AmityPostAttachmentType.

// Only allow file attachment in post creator page.
let settings = AmityPostEditorSettings()
settings.allowPostAttachments = [.file]
let postCreator = AmityPostCreatorViewController.make(postTarget: postTarget, settings: settings)

Features

Features

Usage

Create a view controller

let viewController = AmityUserProfileEditorViewController.make()

Features

Features

Usage

Create a view controller

let editCommentViewController = AmityCommentEditorViewController.make(comment: AmityCommentModel, communityId: String?)

The function will create a new instance of AmityCommentEditorViewController.

Parameters

Features

Usage

Create a view controller

let viewController = AmityPostEditorViewController.make(withPostId: "POST_ID")

Parameter

AmityUIKit provides the livestream recording feature that allows you to record livestreams and broadcast simultaneously in real-time. You can also play historical streams when the livestream ends.

This section describes the livestream feature in detail. Refer to our Livestream documentation to enable livestream functionalities.

A livestream post can be viewed in the following feeds:

• Community feed

• User feed

• Global feed

• Content feed

You will be able to see the livestream post and interact with it as soon as the livestreamer starts streaming.

Creating a livestream post

To create a livestream post, follow these steps:

1. Create a livestream post by selecting Livestream from the pop-up and selecting a location where you want to post the stream.

2. Provide a title and description for your livestream. The Go live button will not enable if you don't provide a title and description.
3. Add a cover thumbnail from your media gallery for the livestream post and preview the cover image. This step however is optional. You may also update and delete the cover thumbnail.

   Note: A default cover will be used if no cover thumbnail is selected.

4. Tap Go live to start streaming.
5. There will be a time indicator on the upper left. It will indicate how long it has been since the livestream started.

6. The livestream post will then show in the feed.

7. Tap Finish to end livestreaming. It will then show Ending livestream once the livestream has ended.

   Note: You have the option to edit or delete the livestream post from the feed.

Viewing a livestream post

Live

Other viewers can watch your livestreaming while you are simultaneously recording it. They will see a LIVE indicator on the video.

Tapping the play button in the livestream post will play the video in a full screen mode.

Livestream ended

After ending your livestreaming, the playback video may not be available instantly for viewers to see while it is still in the process of producing the playback video. The viewers will see a message that the playback will be available for watching shortly.

Playback

When the playback video is already available for viewing, a RECORDED indicator is shown on the video post.

Idle state

The livestream may be in idle state. This happens when you delete the livestream in console or or other issues that will not enable the livestreaming to start. The viewer will see a message that the stream is currently unavailable.

Read-only mode

A livestream post will have the same privacy and access controls as with the other posts. This means that users without the permission, such as those who are not members of the community, won’t be able to view the livestreaming/playback video in a private community. If the community is public, non-members can view the post as read only so they won't be able to interact with it.

Permissions

If it's your first time creating a livestream, your device will prompt to allow access to your device's camera and microphone.

You need to allow access to be able to start a livestream. The pop-up below will not show once you allow access to your camera and microphone.

Features

How to use

Create a view controller

let viewController = AmityPostDetailViewController.make(withPostId: "POST_ID")

Link Preview in Post

The Link Preview feature in posts is designed to enrich user experience by providing a visual and informative preview of external links. This feature enhances content sharing, making it more interactive and engaging. This feature significantly improves the user's posting experience. It allows for a preliminary check of the link's accuracy and relevance, adding visual appeal to the post with an informative preview.

When a user includes a link in a post, the feature automatically extracts and displays key information: the title, main image, and a short description, creating an informative preview of the linked content. If the link is unavailable, it will show a empty placeholder or error view instead.

Editing Capability

Users can edit the link preview even after the post is created. This flexibility ensures that the information remains up-to-date and accurate, enhancing the overall quality of the post.

Limitations and Use Cases:

The preview feature is designed to only display images, titles, and descriptions after a post is created. This ensures clarity and relevance in the shared content.

Features

Usage

Create a view controller

let editCommentViewController = AmityCommentCreatorViewController.make(comment: AmityCommentModel, communityId: String?)

The function will create a new instance of AmityCommentCreatorViewController.

Parameters

Non-member View

Community Member View

Community Creator View

Components

Features

Usage

Create a view controller

let viewController = AmityCommunityProfilePageViewController
.make(withCommunityId: "COMMUNITY_ID")

Features

Features

Usage

let viewController = AmityCommunityMemberSettingsViewController.make(community: community)
navigationController?.pushViewController(viewController, animated: true)

Features

Usage

// Current user feed
let viewController = AmityMyFeedViewController.make()

// Some user feed
let viewController = AmityUserFeedViewController.makeUserFeed(withUserId: "USER_ID")

There are 2 states of User profile page:

1. User's own profile

2. Other User's Profile

Components

Features

Usage

let viewController = AmityUserProfilePageViewController.make(withUserId: "USER_ID")

Features

Usage

let viewController = AmityCommunityFeedViewController.make(communityId: "COMMUNITY_ID")

There are two views for the user profile page.

1. User's own profile

This view allows the user to see his own user profile detail and his own user feed, there are two state user can see.

Default state : Allows user to see his own following user counter and Follower user counter.

Request pending state : Allows user to see his own following user counter, Follower user counter, and also the follow request he received.

Components

• User feed (2.2)

You can get this view by using this code:

let userProfileViewController = AmityUserProfilePageViewController.make(withUserId: "userId")

2. Other user's profile

This view allows the user to see other user's profile detail and their user feed. There are two states user can see

In the other user view , UIKIT has two main views that support the Follow user connection and the User privacy view.

Default state : Allows user to see the connection between the current user and the target user profile.

If the current user is NOT connected to the viewing user and Private setting is Public

If the current user is connected to the viewing user and Private setting is Public

If the current user is NOT connected to the viewing user and Private setting is Private

If the current user has send request to the viewing user and Private setting is Private

Components

• User feed (2.2)

You can get this view by using this code:

let userProfileViewController = AmityUserProfilePageViewController.make(withUserId: "userId")

User's Own Profile Setting Page

Other User's profile setting page

There are two main state based on the user connection.

If user is already connected with the target user

If user is not connected with the target user

You can try this code:

let userSettingsViewController = AmityUserSettingsViewController.make(withUserId: "userId")

In this page , user will see the list of the following user (users who the target userId has been following) and the follower user(users who follow the target userId).

Features

You can try it with this code:

let vc = AmityUserFollowersViewController.make(withUserId: "userId")
navigationController?.pushViewController(vc, animated: true)

Default User Feed

This view allows user to view and interact with the feed content normally. This also applies when the Privacy setting is Public.

Private User Feed

This view blocks any user to see the target user's feed content. This view only exist if the Private setting is Private.

Features

Usage

// Current user feed
let viewController = AmityMyFeedViewController.make()

// Some user feed
let viewController = AmityUserFeedViewController.makeUserFeed(withUserId: "USER_ID")

In this page, user can see all the follow request he has received. He can either accept or decline the request as well.

You can use the component with this code:

let requestsViewController = AmityFollowRequestsViewController.make(withUserId: "userId")
navigationController?.pushViewController(requestsViewController, animated: true)

`

Features

Usage

let viewController = AmityUserProfileEditorViewController.make()

Features

Usage

let viewController = AmityPostTargetPickerViewController.make()

Features

Usage

let vwiewController = AmityMemberPickerViewController.make()
navigationController?.pushViewController(viewController, animated: true)