> ## Documentation Index
> Fetch the complete documentation index at: https://social-b97141fb-auto-generate-llmstxt.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Clip

> Create, share, and discover short-form video content with engaging vertical feed experiences

<Info>
  **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.
</Info>

## 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

<CardGroup cols={2}>
  <Card title="Clip Creation" icon="video">
    **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
  </Card>

  <Card title="Clip Feed Viewing" icon="play">
    **Immersive vertical video feed**

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

  <Card title="Content Editing" icon="scissors">
    **Video preparation and customization**

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

  <Card title="Social Engagement" icon="heart">
    **Interactive video features**

    * Real-time reactions and comments
    * User profile integration
    * Community content sharing
    * Engagement analytics and insights
  </Card>
</CardGroup>

### Platform Support

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

## Implementation Guide

<Tabs>
  <Tab title="Clip Creation">
    **Short-form video creation and recording**

    Clip 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

    <CodeGroup>
      ```swift iOS theme={null}
      // 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)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCreateClipPage(
          community: AmityCommunity? = null, 
          targetType: AmityPostTargetType
      ) {
          AmityCreateClipPage(
              targetId = community?.getCommunityId() ?: "UserId",
              targetType = targetType
          )
      }

      // Using Activity
      fun startCreateClipActivity(
          context: Context, 
          community: AmityCommunity? = null, 
          targetType: AmityPostTargetType
      ) {
          val intent = AmityCreateClipPageActivity.newIntent(
              context = context,
              targetId = community?.getCommunityId() ?: "UserId",
              targetType = targetType
          )
          context.startActivity(intent)
      }
      ```
    </CodeGroup>

    ### 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

    <CodeGroup>
      ```swift iOS theme={null}
      // 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)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeDraftClipPage(
          community: AmityCommunity? = null,
          targetType: AmityPostTargetType = AmityPostTargetType.COMMUNITY,
          mediaUri: Uri,
      ) {
          AmityDraftClipPage(
              targetId = community?.getCommunityId() ?: "UserId",
              targetType = targetType,
              media = mediaUri,
          )
      }

      // Using Activity
      fun startDraftClipActivity(
          context: Context,
          community: AmityCommunity? = null,
          targetType: AmityPostTargetType = AmityPostTargetType.COMMUNITY,
          mediaUri: Uri,
      ) {
          val intent = AmityDraftClipPageActivity.newIntent(
              context = context,
              targetId = community?.getCommunityId() ?: "UserId",
              targetType = targetType,
              media = mediaUri,
          )
          context.startActivity(intent)
      }
      ```

      ```tsx React theme={null}
      import React from 'react';
      import { AmityUiKitProvider, AmityDraftClipPage } from '@amityco/ui-kit';

      const DraftClipPage = () => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
            pageBehavior={{
              AmityDraftClipPageBehavior: {
                goToPostComposerPage: (context) => {
                  // Handle navigation to post composer
                  console.log('Navigate to post composer:', context);
                },
              },
            }}
          >
            <AmityDraftClipPage
              targetId={null}
              targetType="user"
              community={undefined}
            />
          </AmityUiKitProvider>
        );
      };

      export default DraftClipPage;
      ```
    </CodeGroup>

    ### Navigation Behavior

    <CodeGroup>
      ```swift iOS theme={null}
      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
      }
      ```

      ```kotlin Android theme={null}
      class CustomDraftClipPageBehavior : AmityDraftClipPageBehavior() {
          override fun goToPostComposerPage(
              context: Context,
              clip: AmityClip,
              uri: Uri,
              launcher: ActivityResultLauncher<Intent>,
              targetId: String,
              targetType: AmityPostTargetType,
              community: AmityCommunity?,
              isMute: Boolean,
              aspectRatio: AmityClip.DisplayMode
          ) {
              // Navigate to post composer with clip content
              val intent = AmityPostComposerPageActivity.newIntent(
                  context = context,
                  mode = AmityPostComposerPageMode.CREATE,
                  targetId = targetId,
                  targetType = targetType,
                  isClipPost = true
              )
              launcher.launch(intent)
          }
      }

      // Setup custom behavior
      fun setCustomBehavior() {
          val customBehaviour = CustomDraftClipPageBehavior()
          AmityUIKit4Manager.behavior.draftClipPageBehavior = customBehaviour
      }
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Clip Feed Viewing">
    **Immersive vertical video feed experience**

    Clip 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

    <CodeGroup>
      ```swift iOS theme={null}
      // 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)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeClipFeedPage(type: AmityClipFeedPageType) {
          AmityClipFeedPage(
              type = type
          )
      }

      // Using Activity
      fun startClipFeedActivity(context: Context, type: AmityClipFeedPageType) {
          val intent = AmityClipFeedPageActivity.newIntent(
              context = context,
              type = type
          )
          context.startActivity(intent)
      }
      ```

      ```tsx React theme={null}
      import React from 'react';
      import { AmityUiKitProvider, AmityClipFeedPage } from '@amityco/ui-kit';

      const ClipFeedPage = () => {
        return (
          <AmityUiKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={{}}
            pageBehavior={{
              AmityClipFeedPageBehavior: {
                goToSelectClipPostTargetPage: (context) => {
                  // Handle clip creation navigation
                },
                goToPostDetailPage: (context) => {
                  // Handle post detail navigation
                },
                goToUserProfilePage: (context) => {
                  // Handle user profile navigation
                },
                goToCommunityPage: (context) => {
                  // Handle community navigation
                },
              },
            }}
          >
            <AmityClipFeedPage
              currentPostId="postId"
              postIndex={0}
              targetType="user"
              targetId={null}
            />
          </AmityUiKitProvider>
        );
      };

      export default ClipFeedPage;
      ```
    </CodeGroup>

    ### Navigation Behavior

    <CodeGroup>
      ```swift iOS theme={null}
      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
      }
      ```

      ```kotlin Android theme={null}
      class CustomClipFeedPageBehavior : AmityClipPageBehavior() {
          override fun goToPostDetailPage(context: Context, postId: String) {
              // Navigate to post detail page
              val intent = AmityPostDetailPageActivity.newIntent(
                  context = context,
                  postId = postId
              )
              context.startActivity(intent)
          }

          override fun goToClipPostComposerPage(
              context: Context,
              targetId: String?,
              targetType: AmityPostTargetType,
          ) {
              // Navigate to clip creation
              val intent = AmityCreateClipPageActivity.newIntent(
                  context = context,
                  targetId = targetId ?: "UserId",
                  targetType = targetType
              )
              context.startActivity(intent)
          }

          override fun goToCommunityProfilePage(
              context: Context,
              community: AmityCommunity,
          ) {
              // Navigate to community profile
              val intent = AmityCommunityProfilePageActivity.newIntent(
                  context = context,
                  community = community
              )
              context.startActivity(intent)
          }

          override fun goToUserProfilePage(context: Context, userId: String) {
              // Navigate to user profile
              val intent = AmityUserProfilePageActivity.newIntent(
                  context = context,
                  userId = userId
              )
              context.startActivity(intent)
          }

          override fun goToSelectPostTargetPage(
              context: Context,
              type: AmityPostTargetSelectionPageType,
          ) {
              // Navigate to target selection
              val intent = AmityPostTargetSelectionPageActivity.newIntent(
                  context = context,
                  type = type
              )
              context.startActivity(intent)
          }

          override fun goToCreateCommunityPage(context: Context) {
              // Navigate to community creation
              val intent = AmityCreateCommunityPageActivity.newIntent(context)
              context.startActivity(intent)
          }
      }

      // Setup custom behavior
      fun setCustomBehavior() {
          val customBehaviour = CustomClipFeedPageBehavior()
          AmityUIKit4Manager.behavior.clipFeedPageBehavior = customBehaviour
      }
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Related Components

<CardGroup cols={3}>
  <Card title="Posts & Media" href="/uikit/components/social/posts" icon="file">
    **Post Components**
    Standard post creation and media management for longer-form content
  </Card>

  <Card title="Social Feeds" href="/uikit/components/social/feeds" icon="newspaper">
    **Feed Components**
    Traditional social feeds and timeline content displays
  </Card>

  <Card title="Communities" href="/uikit/components/social/communities" icon="building">
    **Community Features**
    Community-based clip sharing and content organization
  </Card>

  <Card title="Users & Profiles" href="/uikit/components/social/users" icon="user">
    **User Management**
    User profile integration with clip content and viewing history
  </Card>

  <Card title="Comments & Reactions" href="/uikit/components/social/comments-reactions" icon="heart">
    **Interaction Components**
    Clip engagement through comments, reactions, and social features
  </Card>

  <Card title="Story" href="/uikit/components/social/story" icon="camera">
    **Story Features**
    Ephemeral content creation as an alternative to permanent clips
  </Card>
</CardGroup>

<Tip>
  **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.
</Tip>