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

FeatureiOSAndroidWebFlutterReact 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

FeatureDescription
Video RecordingReal-time camera integration for capturing short-form videos
Media SelectionAccess to device gallery for selecting existing video content
Recording ControlsVideo duration limits, quality settings, and capture controls
Target SelectionChoose community or personal timeline for content sharing

Required Properties

PropertyTypeDescription
targetIdStringThe ID of the target (community ID or user ID)
targetTypeAmityPostTargetTypeType of target (community or user)

Customization Options

Config IDTypeDescription
create_clip_post_page/*/*PageCustomize clip creation page theme and styling
create_clip_post_page/*/add_thumbnail_buttonElementCustomize thumbnail selection with custom image
create_clip_post_page/*/switch_camera_buttonElementCustomize camera switching controls with custom image
create_clip_post_page/*/recording_controlsElementCustomize 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

FeatureDescription
Video PreviewFull preview of clip content before publishing
Content EditingVideo trimming and editing capabilities
Aspect Ratio ControlAdjust video dimensions and presentation format
Audio ControlsMute/unmute audio with visual feedback
Publishing OptionsFinal review and clip publishing controls

Required Properties

PropertyTypeDescription
targetIdStringThe ID of the target (community ID or user ID)
targetTypeAmityPostTargetTypeType of target (community or user)
clipURLURLLocal URL of the video content to edit

Customization Options

Config IDTypeDescription
draft_clip_page/*/*PageCustomize draft page theme and styling
draft_clip_page/*/back_buttonElementCustomize back navigation with custom image
draft_clip_page/*/mute_buttonElementCustomize audio controls with custom image
draft_clip_page/*/aspect_ratio_buttonElementCustomize aspect ratio controls with custom image
draft_clip_page/*/publish_buttonElementCustomize 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
}
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.