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
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
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
Navigation Behavior
Related Components
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.