Usage

First, you need to get your api key and authToken from the authorization server. Then, to render the whole social kit:

import { AmityUiKitProvider, AmityUiKitSocial } from '@amityco/ui-kit';

function MyApp() {
  return (
    <AmityUiKitProvider
      apiKey={...}
      authToken={...}
      userId="myUserId"
      displayName="myUserName"
    >
      <AmityUiKitSocial />
    </AmityUiKitProvider>
  );
}

To render the user feed only:

import { PostTargetType } from '@amityco/js-sdk'
import { AmityUiKitProvider, AmityUiKitFeed } from '@amityco/ui-kit';

function UserFeedPage({ user, isMe }) {
  return (
    <AmityUiKitProvider
  	apiKey={...}
  	authToken={...}
  	userId="myUserId"
  	displayName="myUserName"
    >
  	<AmityUiKitFeed
        targetType={isMe ? PostTargetType.MyFeed : PostTargetType.UserFeed}
        targetId={user.userId}
        showPostCreator={isMe}
      />
    </AmityUiKitProvider>
  );
}

Component Customization Limitation

Amity UIKit provides already built UI elements on a single page. You can change the appearance such as color and typography in the global settings. 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.

The community section consists of three components:

• Search communities

• NewsFeed

• Explore

Features

The Community Newsfeed consists of:

• Global Feed

Features

Features

Features

Features

Features

Features

Feature and Component

Default post creation stage

Features

Types of Posts

1. Text

2. Text and Image

Creating a text and image post

After posting a text and image post

3. Text and File

Creating a text and file post

After posting a text and file post

4. Text and Video

Creating a text and video post

After posting a text and video post

5. Poll Post

Default poll creation page

Poll post

Poll voting

Mention users in a poll post

5. Livestream Post

Mention users in a livestream post

Features

Out Web UIKit 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 viewing feature in detail. Refer to our Livestream documentation to create a livestream in console.

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

Creating a livestream can be done in Console. There are two parts before you can create the livestream post. First, create the livestream. You need to have a third-party software installed such as OBS or any livestreaming tool. Then, create the post.

Create livestream

1. In Console, go to Livestream menu.

2. In Streaming management page, click .

3. In Create new stream pop-up, provide the title, description, and thumbnail.

4. Click OK to submit.

5. In Streaming management list, select the stream that you created.

6. In Streaming details page, copy the Server URL. Paste it in your livestreaming software and start the livestream.

Create livestream post

1. In Console, go to Posts menu.

3. In Create livestream post pop-up, provide the Target type, Target ID, and Stream ID.

   • Target type - can be Content, Community, or User

   • Target ID - community ID or user ID of the community or User where you want to post the livestream

   • Stream ID - search for the streamId value in the stream's Raw model in Streaming details

4. Click OK to submit.

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.

The LIVE indicator on the upper left corner of the video indicates that the video is currently streaming while you are watching it.

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.

Feature

This page consists of three components:

Our community group functionality within UIKit allows you to explore social features and see how they will look in your app.

Components

• Community feed

• Media Gallery

• Community Members

Below are the different views of the community profile page depending on your role and permission.

Moderator views

Non-community members

Features

Features

Edit Post Pop-up

Features

Features

There are two types of user profiles:

1. Your own profile

1. Profile of another user

Components

• User feed

Features

Features

import { FeedType, PostTargetType } from '@amityco/js-sdk'

const CommunityFeed = ({ communityId, currentUserId, isNewCommunity }) => {
return (
            <AmityUiKitFeed
                        targetType={PostTargetType.CommunityFeed}
                        targetId={communityId}
                        feedType={FeedType.Published}
            />
    )
}

Features

Community settings can be accessed by clicking the Edit profile button in the Community profile page.

Features

Features

Manage your profile settings on this Profile Settings page.

Edit Profile

Feature

In this section, you can see all your pending follow requests. You can either Accept or Decline a request.

If a user in your pending list has withdrawn the request, the system error below will show when you accept or decline the user's follow request.

Features

In the Followings page you can see the list of users you are following.

In the Followers page you can see the list of users who follow you.

Usage

You need to pass all your custom components into AmityUiKitProvider using customComponents prop.

import { AmityUiKitProvider } from '@amityco/ui-kit';

function CustomPostLikeButton({ onClick, isActive, isDisabled }) {
  return (...);
}

function MyApp() {
  return (
    <AmityUiKitProvider
      customComponents={{
        PostLikeButton: CustomPostLikeButton,
        anotherComponentId: AnotherCustomComponent,
      }}
    >
    </AmityUiKitProvider>
  );
}

Custom Post Rendering

UIKit provides default renderers for the core data types: text, image, and file. It also provides a way to render your own UI for your custom post.

Post Structure

A single post UI is composed of 1 or more blocks. This allows reusability of block components such as header or footer which can be shared by different kinds of posts.

This is an example of an image post which contains three tableview cells. Top cell represents the header, middle cell contains content and bottom cell is footer cell.

Creating UI for custom posts

First, you need to create your custom renderer.

import { AmityPostContainer, AmityPostEngagementBar } from '@amityco/ui-kit';

function CustomPostRenderer({ className, post }) {
  return (
    <AmityPostContainer className={className}>
      ...

      <AmityPostEngagementBar postId={post.postId} />
    </AmityPostContainer>
  );
}

Then, you need to pass your renderer into AmityUiKitProvider

function MyApp() {
  return (
    <AmityUiKitProvider
      postRenderers={{
        customPostDataType: CustomPostRenderer,
        image: CustomImagePostRenderer,
      }}
    >
      ...
    </AmityUiKitProvider>
  );
}

UIKit provides a way to render your own UI and override the default UIKit behavior.

Feature

• Post rendering

UIKit provides a way to use your own UI to replace the default UIKit components.

Feature

• Using your own like button for posts

Features

Default User Feed

This view allows you to see and interact with the feed content normally. This 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 exists if the Privacy setting is Private.

Features

This feature allows the transfer of moderator roles and blocks the last moderator to leave a community without transferring the role to other members, giving continuity to groups and creating a clear assignment to future moderators.

How it works

When a moderator leaves the community and there are no other moderators left, a pop-up will show that the moderator needs to nominate other members before leaving the community.

The moderator needs to promote a member to a moderator to transfer the moderator role to that member.

After a new moderator is selected, the moderator who wishes to leave can now leave the community.