Clip

UIKit Component: Clip components are built on top of the social.plus SDK, providing ready-to-use short-form video creation, editing, and viewing UI with full data management handled automatically.

Feature Overview

The Clip feature in social.plus UIKit v4 enables users to create, share, and discover engaging short-form video content, fostering community interaction through immersive vertical feed experiences. This suite of components provides comprehensive tools for capturing moments, editing content, and consuming user-generated videos within communities.

Key Features

Clip Creation

Rich short-form video creation

Camera integration with video recording
Media picker for existing video selection
Video editing and trimming capabilities
Community and user targeting options

Clip Feed Viewing

Immersive vertical video feed

TikTok-style vertical scrolling experience
Auto-play with seamless transitions
Engagement features (reactions, comments)
Community-based content discovery

Content Editing

Video preparation and customization

Video preview and trimming tools
Aspect ratio adjustment controls
Audio mute/unmute options
Publishing and draft management

Social Engagement

Interactive video features

Real-time reactions and comments
User profile integration
Community content sharing
Engagement analytics and insights

Platform Support

Feature	iOS	Android	Web	Flutter	React Native
Clip Creation	✅	✅	✅	-	-
Clip Editing & Draft	✅	✅	✅	-	-
Clip Feed Viewing	✅	✅	✅	-	-
Video Recording	✅	✅	-	-	-
Engagement Features	✅	✅	✅	-	-

Implementation Guide

Clip Creation
Clip Feed Viewing

Short-form video creation and recordingClip Creation components enable users to capture or select video content with comprehensive recording controls, media selection, and content preparation workflows.

Clip Post Creation Page

The Clip Post Creation Page provides integrated camera functionality and media selection for creating engaging short-form video content. Users can record new videos or select existing content from their device gallery.

Features

Feature	Description
Video Recording	Real-time camera integration for capturing short-form videos
Media Selection	Access to device gallery for selecting existing video content
Recording Controls	Video duration limits, quality settings, and capture controls
Target Selection	Choose community or personal timeline for content sharing

Required Properties

Property	Type	Description
`targetId`	`String`	The ID of the target (community ID or user ID)
`targetType`	`AmityPostTargetType`	Type of target (community or user)

Customization Options

Config ID	Type	Description
`create_clip_post_page//`	Page	Customize clip creation page theme and styling
`create_clip_post_page/*/add_thumbnail_button`	Element	Customize thumbnail selection with custom `image`
`create_clip_post_page/*/switch_camera_button`	Element	Customize camera switching controls with custom `image`
`create_clip_post_page/*/recording_controls`	Element	Customize video recording interface elements

Code Examples

// Create clip for community
let createClipPage = AmityCreateClipPostPage(
    targetId: "<community-id>", 
    targetType: .community
)
let viewController = AmitySwiftUIHostingController(rootView: createClipPage)
navigationController?.pushViewController(viewController, animated: true)

// Create clip for user timeline
let userClipPage = AmityCreateClipPostPage(
    targetId: "<user-id>", 
    targetType: .user
)
let userViewController = AmitySwiftUIHostingController(rootView: userClipPage)
navigationController?.pushViewController(userViewController, animated: true)

Draft Clip Page

The Draft Clip Page enables users to preview, edit, and customize their video content before publishing. This component provides comprehensive editing tools including trimming, aspect ratio adjustment, and audio controls.

Features

Feature	Description
Video Preview	Full preview of clip content before publishing
Content Editing	Video trimming and editing capabilities
Aspect Ratio Control	Adjust video dimensions and presentation format
Audio Controls	Mute/unmute audio with visual feedback
Publishing Options	Final review and clip publishing controls

Required Properties

Property	Type	Description
`targetId`	`String`	The ID of the target (community ID or user ID)
`targetType`	`AmityPostTargetType`	Type of target (community or user)
`clipURL`	`URL`	Local URL of the video content to edit

Customization Options

Config ID	Type	Description
`draft_clip_page//`	Page	Customize draft page theme and styling
`draft_clip_page/*/back_button`	Element	Customize back navigation with custom `image`
`draft_clip_page/*/mute_button`	Element	Customize audio controls with custom `image`
`draft_clip_page/*/aspect_ratio_button`	Element	Customize aspect ratio controls with custom `image`
`draft_clip_page/*/publish_button`	Element	Customize publishing controls and styling

Code Examples

// Draft clip for community
let draftClipPage = AmityDraftClipPage(
    targetId: "<community-id>", 
    targetType: .community, 
    clipURL: localVideoURL
)
let viewController = AmitySwiftUIHostingController(rootView: draftClipPage)
navigationController?.pushViewController(viewController, animated: true)

// Draft clip for user timeline
let userDraftPage = AmityDraftClipPage(
    targetId: "<user-id>", 
    targetType: .user, 
    clipURL: localVideoURL
)
let userViewController = AmitySwiftUIHostingController(rootView: userDraftPage)
navigationController?.pushViewController(userViewController, animated: true)

class CustomDraftClipBehavior: AmityDraftClipPageBehavior {
    override init() {
        super.init()
    }
    
    override func goToPostComposerPage(context: AmityDraftClipPageBehavior.Context) {
        // Navigate to post composer with clip content
        let composerPage = AmityPostComposerPage(
            mode: .create,
            targetId: context.targetId,
            targetType: context.targetType,
            isClipPost: true
        )
        let viewController = AmitySwiftUIHostingController(rootView: composerPage)
        navigationController?.pushViewController(viewController, animated: true)
    }
}

// Setup custom behavior
func setDraftClipBehavior() {
    let customBehavior = CustomDraftClipBehavior()
    AmityUIKit4Manager.behaviour.draftClipPageBehavior = customBehavior
}

Immersive vertical video feed experienceClip Feed components provide TikTok-style vertical scrolling video consumption with engagement features, community integration, and seamless content discovery.

Clip Feed Page

The Clip Feed Page offers an immersive vertical scrolling experience for discovering and engaging with short-form video content. Users can swipe through clips, interact with content, and discover videos from their communities.

Features

Feature	Description
Vertical Scrolling	TikTok-style vertical feed with seamless transitions
Auto-Play Videos	Automatic video playback with smooth progression
Engagement Controls	Like, comment, and share functionality
Content Discovery	Community-based and personalized content recommendations
User Interaction	Profile viewing and community navigation

Required Properties

Property	Type	Description
`type`	`AmityClipFeedPageType`	Type of clip feed (community, user, or global)

Customization Options

Config ID	Type	Description
`clip_feed_page//`	Page	Customize clip feed page theme and styling
`clip_feed_page/*/create_new_clip_button`	Element	Customize clip creation button with custom `image`
`clip_feed_page/*/reaction_button`	Element	Customize reaction controls with custom `image`
`clip_feed_page/*/comment_button`	Element	Customize comment interface with custom `image`
`clip_feed_page/*/mute_button`	Element	Customize audio controls with custom `image`
`clip_feed_page/*/option_button`	Element	Customize options menu with custom `image`

Code Examples

// General clip feed
let clipFeedPage = AmityClipFeedPage()
let hostController = AmitySwiftUIHostingNavigationController(rootView: clipFeedPage)
present(hostController, animated: true)

// Community-specific clip feed
let communityClipFeed = AmityClipFeedPage(type: .community("<community-id>"))
let communityController = AmitySwiftUIHostingNavigationController(rootView: communityClipFeed)
present(communityController, animated: true)

class CustomClipFeedPageBehavior: AmityClipFeedPageBehavior {
    override init() {
        super.init()
    }
    
    override func goToPostDetailPage(context: AmityClipFeedPageBehavior.Context) {
        // Navigate to post detail page
        let postDetailPage = AmityPostDetailPage(postId: context.postId)
        let viewController = AmitySwiftUIHostingController(rootView: postDetailPage)
        navigationController?.pushViewController(viewController, animated: true)
    }
    
    override func goToUserProfilePage(context: AmityClipFeedPageBehavior.Context) {
        // Navigate to user profile page
        let userProfilePage = AmityUserProfilePage(userId: context.userId)
        let viewController = AmitySwiftUIHostingController(rootView: userProfilePage)
        navigationController?.pushViewController(viewController, animated: true)
    }
    
    override func goToCommunityProfilePage(context: AmityClipFeedPageBehavior.Context) {
        // Navigate to community profile page
        let communityProfilePage = AmityCommunityProfilePage(community: context.community)
        let viewController = AmitySwiftUIHostingController(rootView: communityProfilePage)
        navigationController?.pushViewController(viewController, animated: true)
    }
    
    override func goToSelectPostTargetPage(context: AmityClipFeedPageBehavior.Context) {
        // Navigate to post target selection
        let targetSelectionPage = AmityPostTargetSelectionPage(isClipPost: true)
        let viewController = AmitySwiftUIHostingController(rootView: targetSelectionPage)
        navigationController?.pushViewController(viewController, animated: true)
    }
}

// Setup custom behavior
func setClipFeedBehavior() {
    let customBehavior = CustomClipFeedPageBehavior()
    AmityUIKit4Manager.behaviour.clipFeedPageBehavior = customBehavior
}

Posts & Media

Post Components Standard post creation and media management for longer-form content

Social Feeds

Feed Components Traditional social feeds and timeline content displays

Communities

Community Features Community-based clip sharing and content organization

Users & Profiles

User Management User profile integration with clip content and viewing history

Comments & Reactions

Interaction Components Clip engagement through comments, reactions, and social features

Story

Story Features Ephemeral content creation as an alternative to permanent clips

Implementation Strategy: Start with the Clip Creation Page to establish video capture and editing workflows, then implement the Draft Page for content refinement and publishing controls. Add the Clip Feed Page for consumption experiences with TikTok-style vertical scrolling. Focus on smooth video transitions, responsive controls, and seamless navigation between creation, editing, and viewing features. Consider implementing proper video compression and quality optimization for mobile performance, and ensure engagement features work smoothly during video playback.

Powered by

Getting Started

Customization

Components

Release Notes

Support

Feature Overview

Key Features

Clip Creation

Clip Feed Viewing

Content Editing

Social Engagement

Platform Support

Implementation Guide

Clip Post Creation Page

Features

Required Properties

Customization Options

Code Examples

Draft Clip Page

Features

Required Properties

Customization Options

Code Examples

Navigation Behavior

Clip Feed Page

Features

Required Properties

Customization Options

Code Examples

Navigation Behavior

Posts & Media

Social Feeds

Communities

Users & Profiles

Comments & Reactions

Story

Powered by

Getting Started

Customization

Components

Release Notes

Support

​Feature Overview

​Key Features

Clip Creation

Clip Feed Viewing

Content Editing

Social Engagement

​Platform Support

​Implementation Guide

​Clip Post Creation Page

​Features

​Required Properties

​Customization Options

​Code Examples

​Draft Clip Page

​Features

​Required Properties

​Customization Options

​Code Examples

​Navigation Behavior

​Clip Feed Page

​Features

​Required Properties

​Customization Options

​Code Examples

​Navigation Behavior

​Related Components

Posts & Media

Social Feeds

Communities

Users & Profiles

Comments & Reactions

Story

Feature Overview

Key Features

Platform Support

Implementation Guide

Clip Post Creation Page

Features

Required Properties

Customization Options

Code Examples

Draft Clip Page

Features

Required Properties

Customization Options

Code Examples

Navigation Behavior

Clip Feed Page

Features

Required Properties

Customization Options

Code Examples

Navigation Behavior

Related Components