Composer Codebase Guide

Quick Answer

The TikTok composer flow starts with media capture or selection, optionally adds a sound from composer_songs, opens NewPostScreen, collects caption and mentions, uploads media through the social feed module, and creates a post document.

When debugging composer issues, separate the flow into camera/media, sound picker, caption editor, media upload, and feed write stages.

Source Map

In the TikTok app, the key files are:

src/screens/NewPostScreen/NewPostScreen.tsx
src/screens/SongPickerScreen/SongPickerScreen.tsx
src/screens/SongPickerScreen/api/firebase/songs.ts
src/core/media
src/core/mentions
src/core/socialgraph/feed

The navigation stack connects camera, song picker, and new post screens.

Composer Flow

1. The user records or selects a video.

2. The user optionally selects a sound.

3. The app navigates to NewPostScreen with:

   {
     media,
     songItem,
   }

4. NewPostScreen previews the selected media.

5. IMRichTextInput collects caption text and mentions.

6. usePostMutations().addPost() creates the feed post.

7. The social graph/feed module handles media upload and post persistence.

Caption And Mentions

NewPostScreen uses the mentions core module:

src/core/mentions/IMRichTextInput
src/core/mentions/IMMentionList

The screen formats friends into mention suggestions and stores both display text and raw text. The post object includes:

{
  postText,
  displayText,
  mentions,
  commentCount: 0,
  reactionsCount: 0,
  reactions: {
    like: 0,
  },
}

If mentions do not appear, verify that the social graph friends hook returns data for the current user.

Sound Picker

The sound picker reads songs from the Firestore collection:

composer_songs

Each song document should include fields such as:

Field	Purpose
title	Song title shown in the picker.
artist	Artist name.
duration	Display duration, for example 00:28.
coverURL	Public image URL for the song artwork.
streamURL	Public or authenticated audio URL used for playback.

SongPickerScreen caches and previews audio through shared media/audio helpers before returning the selected songItem to the camera/composer flow.

Post Creation

NewPostScreen builds the temporary post object:

const tempPost = {
  ...newPost.current,
  authorID: currentUser.id,
  postMedia: media,
  song: songItem,
}

Then it calls:

await addPost(tempPost, [media], currentUser)

The addPost implementation lives in the social graph feed provider. For Firebase apps, that path is under:

src/core/socialgraph/feed/api/firebase

Verification Checklist

Test:

• record a short video;
• select a video from the gallery if enabled;
• open the song picker;
• preview a song;
• save a selected song;
• write a caption;
• mention a friend;
• publish the post;
• confirm the post appears in the feed and profile;
• confirm the media URL and song metadata are present in Firestore;
• confirm upload failures show an error and do not create broken posts.

Troubleshooting

Problem	Fix
Song list is empty	Add documents to composer_songs and check Firestore rules.
Song preview does not play	Check streamURL, audio file permissions, and device silent-mode behavior.
Mentions are empty	Create friends/follows first and verify useSocialGraphFriends returns data.
Post fails with media upload error	Debug src/core/media, Firebase Storage/Functions, and Blaze plan requirements.
Post succeeds but does not appear	Check feed query filters, current user ID, timestamps, and required Firestore indexes.

Next Steps

• Manage Songs
• Hashtags
• Media Upload and Storage
• Social Graph, Feed, Stories, and Mentions