# Home & Feed — Screen Specifications --- ## Home Screen (Main Feed) ### Overview The central screen of TikTok where users see a full-screen, vertically scrolling feed of short-form videos, with navigation tabs at the top to switch between "Following" and "For You" feeds. ### UI Elements **Top Navigation Bar** - App is full-screen / edge-to-edge with a transparent status bar - Two tab labels at the top center: - **"Following"** — shows videos from accounts the user follows - **"For You"** — algorithmically recommended videos (default/active tab) - Both tabs are text labels; the active tab is highlighted (bold or underlined indicator); tapping switches the feed - A **search/discover icon** may appear in the top-right corner (navigates to Search) - A **Live** button or label may appear to the left of the tabs **Full-Screen Video Player (Feed Item)** Each video occupies the entire viewport. While a video plays: - **Video** auto-plays looped, full-screen - **Creator username** (e.g., `@surfingdave`) — bottom-left, tappable - **Caption/description text** (e.g., `"This wave was INSANE 🌊 #surf #ocean"`) — below username, up to 4 lines, with a "more" link if truncated - **Sound/music name** (e.g., `♪ Ocean Sounds - Chill Beats`) — scrolling marquee at bottom-left - **Hashtag tags** — tappable inline in caption - **Like button** with count (e.g., `124.5K`) — right side, heart icon - **Comment button** with count (e.g., `3,287`) — right side, speech bubble icon - **Bookmark/Save button** — right side, bookmark icon (label: "Add to Favorites") - **Share button** — right side, arrow/share icon - **Creator avatar** — right side above action buttons, circular thumbnail with a "+" follow button overlay - **Progress bar** — thin bar at the very bottom of the video showing playback position **Bottom Navigation Bar** - Five tabs spanning the full width: 1. **Home** (house icon) — currently active 2. **Discover/Search** (magnifying glass icon) 3. **Create** (large center "+" button, distinct styling) 4. **Inbox** (speech bubble / notification icon) 5. **Profile** (person icon) **Toast Notifications** (appear briefly at center of screen) - Small pill/capsule shape with rounded corners, dark semi-transparent background - Optional leading icon (18×18) + text message - Example: `"Copied"`, `"Link copied"`, `"Added to Favorites"`, `"Removed from Favorites"` ### Interactions - **Swipe up** — advances to the next video in the feed; the current video slides out and the next slides in (full-screen transition) - **Swipe down** — goes back to the previous video - **Tap on video** — pauses / resumes playback - **Double-tap on video** — likes the video (heart animation pulses from tap point); like count increments - **Tap "Following" tab** — switches feed to videos from followed accounts - **Tap "For You" tab** — switches feed to algorithmic recommendations - **Tap creator avatar / username** — navigates to that creator's Profile page - **Tap "+" on avatar** — follows the creator; "+" changes to a checkmark or disappears - **Tap Like (heart) button** — toggles like; count updates; button color changes (red when liked) - **Tap Comment (speech bubble) button** — opens the Comment Sheet (slides up from bottom) - **Tap Bookmark button** — saves video to Favorites; toast shows `"Added to Favorites"` (or `"Removed from Favorites"` if already saved) - **Tap Share button** — opens Share Sheet with sharing options - **Tap sound/music name** — navigates to the Sound Detail page for that audio track - **Tap hashtag in caption** — navigates to a Hashtag feed for that tag - **Tap "more" in caption** — expands full caption text inline - **Tap Home tab in bottom nav** — if already on Home, scrolls back to the top / refreshes feed - **Tap Discover tab** — navigates to Search/Discover screen - **Tap "+" Create button** — opens the video creation flow - **Tap Inbox tab** — navigates to Notifications/Messages screen - **Tap Profile tab** — navigates to the logged-in user's Profile screen ### State Changes - Active tab label is visually emphasized (bold weight, white color, underline indicator) - Liked videos show the heart icon in red with an animated pulse - Saved videos show the bookmark icon in a highlighted/filled state - When the feed reaches the end of loaded content, new videos are fetched automatically (infinite scroll) - If the network is unavailable, an inline message appears: `"Connect to the internet and try again."` - When the user returns to the app from background, the feed resumes at the last-viewed position ### Sample Data | Field | Example Value | |---|---| | Creator | @noodlequeen_official | | Caption | Making ramen from scratch takes 18 hours but it's worth it 🍜 #ramen #cooking #foodie | | Likes | 847.2K | | Comments | 12.4K | | Sound | ♪ Lo-Fi Chill - Beats to Cook To | | Video duration | 0:47 | --- ## Following Feed ### Overview A dedicated feed showing only videos posted by accounts the user follows, accessed by tapping the "Following" tab at the top of the Home screen. ### UI Elements - **Identical layout to the Home / For You Feed** (full-screen video player, same right-side action buttons, same bottom nav) - **"Following" tab** is the active/highlighted tab in the top navigation - If the user follows no one or no new content is available: - Empty state message in the center of the screen - A **"Find friends"** button (label: `"Find friends"`) that navigates to a user discovery screen ### Interactions - All video interactions are identical to the For You Feed (swipe, tap, like, comment, share, bookmark) - **Tap "For You" tab** — switches back to the algorithmic recommendation feed - **Tap "Find friends"** (empty state) — navigates to a user search / suggested accounts screen ### State Changes - The "Following" tab label is highlighted/bold when active - If new posts from followed creators have appeared since the last visit, the feed loads them at the top - Pulling down from the first video triggers a refresh ### Sample Data | Field | Example Value | |---|---| | Creator | @techwithtim | | Caption | I built a working game in Python in 10 minutes ⚡ #python #coding #programming | | Likes | 32.1K | | Comments | 891 | | Sound | ♪ Original Sound - @techwithtim | --- ## Comment Sheet ### Overview A bottom sheet that slides up over the video when the user taps the comment icon, showing all comments on the current video and allowing the user to add their own. ### UI Elements **Sheet Header** - "Comments" label or comment count (e.g., `"3,287 comments"`) centered at top - Close button (✕) on the right **Comments List (scrollable)** Each comment row shows: - **Avatar** — circular thumbnail of the commenter (left side) - **Username** (e.g., `@wave_rider99`) — bold text - **Verified badge** (if applicable) — small blue checkmark next to username - **Comment text** (e.g., `"This is the most satisfying thing I've ever seen 😭"`) — wraps to multiple lines - **Timestamp** (e.g., `"2d"`, `"5h"`) — muted color, small text - **Like count** for the comment — small heart icon + number, right side of comment row - **Reply count** (e.g., `"View 14 replies"`) — below the comment, tappable **Pinned Comment** (optional) - Appears at the top of the list, labeled with a pin icon **Comment Input Bar (bottom of sheet, above keyboard)** - **User's own avatar** — small circular thumbnail on the left - **Text input field** — placeholder text: `"Add comment…"` - **Emoji button** — smiley face icon - **@ Mention button** — "@" icon - **Image/GIF attachment button** — image icon (labeled with accessibility: opens media picker) - **Send / Post button** (appears when text is entered) — arrow-up icon ### Interactions - **Scroll the comment list** — scrolls through comments; sheet background dims the video - **Tap "View X replies"** — expands inline threaded replies under that comment - **Tap like icon on a comment** — toggles like; count updates - **Tap avatar or username** — navigates to that user's profile - **Tap text input field** — keyboard rises; input bar moves up with it - **Type comment + tap Send** — posts comment; new comment appears at top of list with user's avatar and text; input field clears - **Tap @ button** — opens mention search: `"Search for an account to mention"` prompt appears - **Tap emoji button** — opens emoji picker overlay - **Tap image button** — opens media picker (options: `"Select from Gallery"`, `"Take photo"`, `"Cancel"`) - **Swipe sheet down / tap ✕** — dismisses the comment sheet; video resumes - **Tap "more"** on long comment text — expands full comment inline ### State Changes - Like count on a comment increments/decrements immediately on tap - Posted comment appears at top of list in pending state, then confirmed - If comment fails to post, an inline error toast shows: `"Couldn't add comment"` - Reply count updates after a reply is posted - When keyboard is open, the comment sheet scrolls up to keep the input bar visible above the keyboard ### Sample Data | Field | Example Value | |---|---| | Total comments | 12,450 | | Top comment | @beachbum_kelly: "I've watched this 47 times today 🔥" · 18h · 4.2K ♥ | | Reply count | View 89 replies | | Pinned | Creator pinned: "Thank you all so much!! 🙏" | --- ## Share Sheet ### Overview A bottom sheet that appears when the user taps the Share button on any video, offering multiple ways to share that video with others or save it. ### UI Elements **Sheet Header** - Drag handle at top center - Video thumbnail preview (small) with title/creator name **Primary Action Row (icon grid)** Large icons in a horizontal scrollable row: - **Direct Message** — send to a friend in TikTok DMs (person + chat icon) - **Copy link** — copies the video URL; label: `"Link copied"` toast on tap - **WhatsApp**, **Instagram**, **Messenger**, **SMS**, and other installed share targets - **More** — opens the system share sheet for additional apps **Secondary Actions List** - **Save video** — downloads to device; label: `"Downloading..."` - **Add to Favorites** — bookmarks the video (label: `"Add to Favorites"` / `"Removed from Favorites"`) - **Not interested** — hides this type of content from feed - **Report** — opens report flow - **Duet** — opens video creation in Duet mode with this video - **Stitch** — opens video creation in Stitch mode with this video **Copyright Notice** (conditionally shown) - If the video has a restricted audio track: `"Can't save video with this sound due to copyright regulations."` ### Interactions - **Tap any app icon** — shares the video URL/content to that app; sheet dismisses - **Tap "Copy link"** — copies link to clipboard; toast shows `"Link copied"`; sheet remains open briefly - **Tap "Save video"** — begins download; progress indicator; toast shows `"Downloading..."` then completion - **Tap "Add to Favorites"** — bookmarks; toast shows `"Added to Favorites"`; button label changes to indicate saved state - **Tap "Not interested"** — removes this video from feed; sheet dismisses; video skips to next - **Tap "Report"** — navigates to the Report screen with reason selection - **Tap "Duet" / "Stitch"** — navigates to the video creation screen in the appropriate mode - **Swipe down / tap outside** — dismisses the sheet ### Sample Data | Field | Example Value | |---|---| | Video being shared | @chef_marco's pasta recipe video | | Share target apps shown | WhatsApp, Instagram Stories, Messenger, X (Twitter), SMS | | Link copied message | `"Link copied"` (toast) | --- # Video Player Screen Specification ## Video Player (Full-Screen Video Playback) ### Overview The user sees a full-screen video player that automatically begins playing a video (with looping support), and can tap to pause/resume playback or dismiss the player. ### UI Elements **Video Surface / Playback Area** - Full-screen video rendering surface that fills the entire viewport (width × height of the display) - During loading/buffering before the first frame renders: a static cover image (thumbnail) is displayed over the video surface to mask the blank frame - Once the first frame renders, the cover image disappears and the video plays - The video scales to fill the screen while maintaining aspect ratio (portrait or landscape, depending on the video's ratio — e.g., "9:16", "16:9", "1:1") **Cover / Thumbnail Image** - Displayed in the center of the screen while the video is loading - Uses the video's cover image URL - Hidden automatically once the first video frame is rendered - Shown again if a playback error occurs (error state) **Play/Pause Button (Overlay)** - An icon button centered on the screen (image button style) - Hidden by default during active playback - Appears when the user taps the video or when playback is paused - Icon indicates current state: show a "play" icon when paused, or can be tapped to resume - When the video resumes, the button hides itself again **Error State** - If the video fails to load or play, the cover image becomes visible again (replaces blank screen) - No explicit error message UI is shown to the user in this minimal player — the cover image serves as a visual fallback ### Interactions **Tap on video surface** - Toggles playback: if playing → pauses the video and shows the play/pause button overlay; if paused → resumes the video and hides the overlay **Tap the play/pause button overlay** - If currently paused: resumes playback and hides the button - If currently playing: pauses playback and shows the button **Tap the cover/thumbnail image** - Tapping the cover image (visible during loading) triggers the same play/pause toggle behavior **Video reaches the end (first completion)** - Default behavior (loop enabled): video automatically restarts from the beginning and plays again with no visible interruption - Non-loop mode: the player screen closes and the user is returned to the previous screen **Seeking / Resume from a saved position** - If the video was opened with a specific start position (e.g., from a shared link with a timestamp), playback begins from that position rather than the start - This seek happens after the first frame renders, so the cover image disappears at the correct frame **App goes to background (user switches apps)** - Playback automatically pauses; the play/pause button becomes visible - When the user returns to the app (foreground), playback automatically resumes **Buffering** - No separate loading spinner UI is defined in this player screen; the cover image remains visible until the first frame renders, providing an implicit loading state **Back navigation** - Tapping the system back button closes the player and returns the user to the previous screen ### Sample Data | Field | Example | |---|---| | Video title / tag line | "#TikTok Dance Challenge – Original Sound" | | Video URL | A CDN URL such as `https://v19-webapp.tiktok.com/video/tos/useast5/...` | | Cover image | A static JPEG thumbnail showing the video's first representative frame | | Video aspect ratio | 9:16 (portrait, typical TikTok video) | | Video duration | 28 seconds | | Loop | Enabled (video restarts automatically after finishing) | | Enter from | "for_you_feed" (the feed the video was opened from) | | Start position | 0.0 (beginning) or e.g. 14.5 (mid-video from a shared timestamp link) | **Example entry point:** User taps a shared video link or a video card from another surface → the player opens full-screen, the cover image of a dancer is shown for ~0.3 seconds while the stream loads, then the 28-second clip begins playing in a seamless loop. --- # Content Creation & Editing — Screen Specifications --- ## Video Record Permission Gate ### Overview A transitional screen the user passes through when tapping the "+" (create) button; it checks camera/microphone permissions before launching the actual recording screen. ### UI Elements - **Full-screen background**: Blank/loading state — no persistent UI chrome visible to the user during the brief permission check - **Toast notification (error state — already recording)**: A pill-shaped toast bar appears at the bottom of the screen with the message "Recording is currently in progress. Please try again later." (shown to regular users) or a variant message for verified/creator accounts - **Toast notification (error state — no internet)**: Toast bar with the message "Connect to the internet and try again." (`epc`) ### Interactions - **On successful permission grant**: User is automatically taken to the Video Recording screen with no visible interaction required - **On permission denied / camera already in use**: A toast message appears briefly, then the screen closes and the user is returned to the previous screen (e.g., the main feed) - **Back navigation**: Tapping the system back button dismisses this screen and returns the user to wherever they launched from ### Sample Data - User taps "+" from the For You feed → permission check passes → camera opens automatically - User taps "+" while a recording session is already active → toast: "Recording is currently in progress" → screen closes --- ## Video Recording ### Overview The primary camera screen where the user records short-form video, with controls for duration, speed, beauty filters, effects, flash, flip, and timer. ### UI Elements **Top toolbar (left to right):** - **Close/Back button** — "Back" (`dph`) — exits recording and returns to previous screen - **Beauty toggle button** — "Beauty" (`drn`) — opens beauty settings panel - **Filter button** — opens filter selector - **Timer button** — opens countdown timer selector - **Flash toggle** — cycles flash on/off/auto - **Effects button** — opens effects panel **Center viewfinder:** - Live camera preview occupying the full screen - A thin progress bar along the top edge indicating recording duration (fills left to right as the user records) - Countdown overlay when timer is active (e.g., "3… 2… 1…") **Duration selector (below viewfinder or top):** - Horizontal pill-style segmented control with options: **15s**, **60s**, **3m**, **10m** (exact options depend on server config; visible as selectable tabs) **Speed selector:** - Row of buttons: **0.3x**, **0.5x**, **1x** (default), **2x**, **3x** — labeled with their multiplier values **Bottom controls:** - **Record button** — large circular button in the center; tap to start/stop recording a clip; hold to record continuously - While recording: button animates (pulsing ring) and a "Stop" state is shown - Label/hint: "Start recording" (`fdh`) / "Record video" (`g0g`) - **Flip camera** icon — switches between front and rear cameras - **Upload from gallery** button — icon on the left side; opens the device gallery picker; labeled "Select from Gallery" (`bwh`) on long press or visible label - **Drafts** button — opens saved drafts **After recording at least one clip:** - **"Discard last clip?"** (`g3w`) dialog option appears if the user tries to delete the most recent clip - **Next button** appears in the top-right corner — "Next" (`click_next`) — advances to the video editing/trim screen ### Interactions - **Tap Record button**: Starts recording; progress bar begins filling; button shows stop indicator - **Tap Record button again (or release hold)**: Stops current clip; clip count indicator updates - **Tap Flip camera**: Switches camera; viewfinder updates instantly - **Tap Beauty**: Opens a bottom panel with skin smoothing, whitening, and reshaping sliders - **Tap Filter**: Opens a horizontally scrollable filter tray with previews (e.g., Normal, Black/White, Arts, Vintage, Retrolux, Saturated, Chrome — from `ab` array) - **Tap Timer**: Opens a small popover to select a countdown delay (3s or 10s) before recording begins automatically - **Tap Effects**: Opens the effects panel with trending effects browsable by category - **Tap Upload (gallery icon)**: Navigates to the media picker / gallery screen - **Tap Next**: If one or more clips have been recorded, navigates to the Video Trim / Edit screen - **Tap Back**: If clips have been recorded, shows "Discard" (`diu`) confirmation dialog; if confirmed, exits to the previous screen ### Sample Data - Duration: **15s** selected, **1x** speed - User records 3 clips totaling 12 seconds; progress bar shows ~80% filled - Filter applied: **Vintage** --- ## Video Trim & Edit ### Overview After recording (or importing from gallery), the user trims their clips, adjusts audio, adds music, applies effects, and rotates before proceeding to the post screen. ### UI Elements **Top toolbar:** - **Back button** — "Back" (`dph`) — returns to the recording screen - Title area (no explicit title text) - **Rotate button** — rotates the video 90°; labeled "Rotate" (referenced in analytics as `click_rotate`) **Full-screen video preview** (center): - Plays back the recorded/imported clip in loop - Scrubber/timeline below the preview **Timeline scrubber:** - Horizontal strip showing video frames as thumbnails - Drag handles on either end to trim in/out points - Current playback indicator (vertical line) moves as video plays **Bottom toolbar tabs/buttons (horizontal scroll):** - **Sounds / Music** — opens music picker; labeled "Added sound" (`diy`) once a track is selected - **Text** — opens text overlay editor; `enter_text` analytics label - **Stickers/Effects** — opens sticker tray - **Filters** — same filter tray as recording screen - **Adjust clip** — fine-tune individual clip in/out points; `adjust_clip` label - **Voice effects** — applies voice filter (e.g., chipmunk, deep); `select_voice_effect` label - **Volume** — slider to balance original audio vs. added music; `select_volume` label **Bottom action buttons:** - **Next button** (right side) — "Next" / advances to post screen; `click_next` label **Dialogs / sheets triggered from this screen:** - **Music picker sheet** (full-height bottom sheet): tabs "Online sound library" and "My Sound" (from `k` array); search bar at top with placeholder "Search for an account to mention" (`dby`); trending tracks list - **Volume mixer sheet**: Two sliders — "Original sound" and "Added sound" — with percentage indicators - **Text editor overlay**: Full-screen text input with font, color, and alignment options; "Confirm" (`f_x`) and "Cancel" (`eha`) buttons ### Interactions - **Drag trim handles**: Trims video start/end; preview updates in real time - **Tap Sounds**: Opens music picker bottom sheet; selecting a track shows its waveform on the timeline and updates label to "Added sound" - **Tap Text**: Opens a text input overlay; user types text, selects style/color, taps "Confirm" to place text sticker on the video - **Tap Rotate**: Rotates the clip 90° clockwise; preview updates - **Tap Adjust clip**: Opens per-clip trim view for multi-clip recordings - **Tap Volume**: Opens volume balance sheet - **Tap Next**: If clip is valid (non-zero duration), navigates to the Post / Describe Video screen - **Tap Back**: Returns to Video Recording screen; may show "Discard" (`diu`) confirmation ### Sample Data - Clip duration: 12.4s trimmed to 10.0s - Music added: "As It Was – Harry Styles" at 80% volume, original at 20% - Text sticker: "summer vibes 🌞" in white, centered, at 4s–7s --- ## Video Post (Describe & Share) ### Overview The final step before publishing where the user writes a caption, sets a cover image, chooses an audience, and taps "Post." ### UI Elements **Top toolbar:** - **Back button** — returns to the trim/edit screen - Screen title or no title (contextually implied) **Cover selector:** - Horizontal thumbnail strip of video frames; user taps a frame to set it as the cover image - Label: "Select cover" (`select_cover` analytics) **Caption input field:** - Multi-line text input - Placeholder or hint text prompts the user to describe their video (`describe_video` analytics) - Inline **hashtag** (`#`) shortcut button and **@ mention** button - Tapping `@` shows "Search for an account to mention" (`dby`) inline search - Tapping `#` shows "Hashtags" (`eyd`) suggestion row **Audience selector:** - Row item labeled "Who can watch this video" - Current value displayed (e.g., **"Everyone"** / `d4h`, **"Friends only"** — from `aj` array) - Tapping opens a bottom sheet with options: "Everyone", "Friends only" **Additional toggles/rows (vertical list):** - **Allow comments** — toggle on/off - **Allow duet** — toggle on/off - **Allow stitch** — toggle on/off - **Save to device** — toggle; labeled "Downloading..." (`d5u`) while in progress **Bottom action buttons:** - **Drafts / Save** button — "Save" (`click_save`) — saves as a draft without publishing - **Post button** — primary CTA; large, filled button — posts the video to TikTok **Error/warning banners:** - Copyright warning: "Can't save video with this sound due to copyright regulations." (`egr`) — appears as a banner if copyrighted music was used and save-to-device is toggled on ### Interactions - **Tap caption field**: Opens keyboard; user types description with hashtags and mentions - **Tap `#`**: Inline hashtag suggestions appear; tapping a suggestion appends it to the caption - **Tap `@`**: Inline account search appears; tapping a result appends `@username` to caption - **Tap audience selector**: Bottom sheet opens with "Everyone" / "Friends only" options; tapping one closes the sheet and updates the displayed value - **Toggle Allow comments / Duet / Stitch**: Immediately updates preference (reflected visually) - **Tap Save**: Video saved to drafts; user sees confirmation toast "Downloading..." and remains on screen or navigates back - **Tap Post**: Video uploads; user is navigated to their profile or the For You feed; upload progress may be shown as a banner - **Tap Back**: Returns to trim/edit screen; draft is preserved ### Sample Data - Caption: "Morning hike in Yosemite 🏔️ #hiking #nature #yosemite" - Cover: Frame at 2.1s selected - Audience: **Everyone** - Comments: On, Duet: On, Stitch: Off - Music: "Mountain Sound – Of Monsters and Men" (copyright-cleared) --- ## Gallery / Media Picker ### Overview Allows the user to browse their device photo library and select one or more videos or photos to upload and edit. ### UI Elements **Top toolbar:** - **Back / Cancel** button — "Cancel" (`eha`) — dismisses the picker and returns to the recording screen - Title: **"Album"** (`d2n`) - **Album dropdown** — displays current album name (e.g., "Camera Roll"); tapping opens album list **Album selector (bottom sheet or inline):** - List of albums from the device (Camera Roll, Videos, Favorites, etc.) - Each row shows: album thumbnail, album name, item count **Media grid (main content area):** - 3-column grid of photo/video thumbnails - Video items show a duration badge in the bottom-right corner (e.g., "0:23") - Selected items show a numbered selection indicator (1, 2, 3…) in the top-right corner of the thumbnail **Filter tabs (top of grid):** - Tabs or pills to filter: **"Trending"**, **"Latest"**, and additional options (from `t` array: "Trending", "Latest") **Bottom action bar:** - Count of selected items (e.g., "3 selected") - **"Selected"** (`elz`) state label - **Next** button — enabled only when at least one item is selected; advances to the video trim/edit screen **Contextual options (long press on item):** - **"View photo"** (`em0`) - **"Cancel"** (`eha`) ### Interactions - **Tap a thumbnail**: Toggles selection; numbered badge appears on item - **Tap album dropdown**: Opens album list sheet; selecting an album updates the grid - **Tap Next**: Navigates to the Video Trim & Edit screen with the selected media loaded - **Tap Back / Cancel**: Returns to the Video Recording screen with no media selected - **Long press a thumbnail**: Shows context menu with "View photo" and "Cancel" ### Sample Data - Current album: "Camera Roll" — 847 items - 2 videos selected: "0:34" clip from yesterday, "1:12" clip from last week - Grid shows thumbnails in reverse chronological order --- ## Duet Setup ### Overview When a user chooses to create a Duet with someone else's video, this screen handles downloading the original video and launching the side-by-side recording interface. ### UI Elements - **Loading/transition state**: A brief loading indicator is shown while the original video is fetched from the network - **Error toast — no internet**: "Connect to the internet and try again." (`epc`) - **Error toast — video unavailable**: Shown if the original post cannot be found (private or deleted) - **Error toast — private video**: Shown if the video's privacy status prevents duetting - **Error toast — dual/split-screen mode active**: Shown if the device is in split-screen mode and duet cannot launch **Once loading completes:** - Transitions automatically into the full Video Recording screen in Duet mode (split-screen layout showing the original video on one half and the camera on the other) ### Interactions - **Successful load**: Automatically navigates to the Duet recording screen — no user action required - **Error state**: Toast appears briefly, then user is returned to the video they were viewing - **Back**: Cancels the Duet setup and returns the user to the feed/post they initiated from ### Sample Data - Original video: @charlidamelio — "dance tutorial pt. 2" (45s) - Loading time: ~1–2 seconds on Wi-Fi - Error example: "This video is private and can't be used for Duet" --- ## Stitch Setup ### Overview When a user chooses to Stitch another creator's video, this screen downloads the original clip and transitions into the stitch recording flow. ### UI Elements - **Loading/transition state**: Brief loading indicator while original video segment is fetched - **Error toasts** (same variants as Duet Setup): - No internet: "Connect to the internet and try again." (`epc`) - Video unavailable or deleted - Video is private **Once loading completes:** - Transitions into the Video Recording screen in Stitch mode, where the first N seconds of the original video play before the user's camera recording begins ### Interactions - **Successful load**: Automatically navigates into the Stitch recording interface - **Error state**: Toast appears and user is returned to the originating feed view - **Back**: Returns to the video being stitched ### Sample Data - Original video: @khaby.lame — "life hack reaction" (30s); user will stitch the first 5 seconds - Stitch clip selected segment: 0:00–0:05 --- ## Effect Inspector (Effect Adjustment Panel) ### Overview When the user applies an effect during recording or editing, this panel appears with parameter sliders so they can fine-tune the effect's visual properties. ### UI Elements **Panel header:** - Effect name (e.g., "Glitch", "Neon Glow") **Parameter sliders (vertical list, scrollable):** Each slider row shows: - Parameter label on the left - Horizontal slider control - Current value (0–100 or descriptive) Available parameter labels (from `AME_editEffect_inspector_*` strings): - **Intensity** — overall effect strength - **Blur** - **Brightness** - **Saturation** - **Opacity** - **Size** - **Speed** - **Rotation** - **Sharpness** - **Color** - **Grain** ("Roughness") - **Vignette** - **Glare** - **Zoom** ("Scope") - **Aberration** - **Noise** - **Ripple** - **Vortex** - **Haze** - **Glow** ("Luminous") - **Offset**, **Offset 1**, **Offset 2** - **Position**, **Position 1**, **Position 2** - **X-axis**, **Y-axis**, **X-offset**, **Y-offset** - **Horizontal**, **Vertical** - Additional effect-specific parameters as needed **Bottom actions:** - **Reset** button — resets all sliders to default - **Apply / Confirm** button — applies the current settings and closes the panel ### Interactions - **Drag a slider**: Adjusts the parameter in real time; the camera preview or video preview updates live - **Tap Reset**: All sliders return to their default midpoint values; preview reverts - **Tap Apply/Confirm**: Closes the panel and saves the effect settings; user returns to recording or editing - **Tap outside the panel / swipe down**: Dismisses the panel; settings may or may not be saved depending on whether user tapped Apply ### Sample Data - Effect: "Glitch" - Intensity: 65 - Speed: 40 - Aberration: 30 - Color: 80 - All others at default (50) --- ## Beauty & Makeup Editor ### Overview Accessed from the recording screen, this panel lets the user adjust real-time facial enhancement filters including skin, makeup, and style settings. ### UI Elements **Panel title area:** - "Beauty" (`drn`) as the section label **Tab bar (horizontal):** - Tabs for different beauty categories: e.g., **Smooth**, **Reshape**, **Makeup** **Makeup sub-panel (when Makeup tab is active):** - **Color** selector (`AME_makeup_color`) — horizontal color swatch row - **Texture / Finish** selector (`AME_makeup_finish`) — e.g., matte, glossy, shimmer - **Style** selector (`AME_makeup_style`) — preset makeup looks - Tooltip: **"Tap to switch properties"** (`AME_makeup_switchProperty_tooltip`) - Error toast if user adjusts a slider without selecting a property first: **"Select current property first"** (`AME_makeup_selectProperty_toast`) **Adjustment sliders:** - Each active property shows a horizontal intensity slider (0–100) - Label above or beside slider shows the property name **Reset / Clear button:** - Labeled "Clean" (from `l` array) — resets all beauty adjustments **Close/Done button:** - Closes the beauty panel and returns to the camera viewfinder with effects applied live ### Interactions - **Tap a tab**: Switches between beauty sub-categories; content area updates - **Tap a color swatch**: Selects that color for the active makeup property; applied in real time to the camera preview - **Drag intensity slider**: Adjusts the strength of the selected property; live preview updates - **Tap a makeup preset**: Applies full makeup look; individual sliders update to reflect the preset values - **Tap "Clean"**: Removes all beauty adjustments; skin returns to natural - **Tap Close/Done**: Dismisses the panel; effects remain active during recording ### Sample Data - Smooth: 70 - Reshape (slim face): 30 - Makeup style: Natural - Lip color: Coral pink, Texture: Gloss, Style: Everyday --- # Shop & E-commerce: Screen Specifications --- ## Seller Showcase Page ### Overview The user views a seller's TikTok Shop showcase — a full-screen web-rendered storefront displaying the seller's products, profile, and shoppable content, opened via a deep link or in-app navigation. ### UI Elements **Full-Screen Content Area** - The entire screen is occupied by a dynamically loaded Lynx/web view rendering the seller's showcase storefront - No native Android navigation bar or toolbar is shown; the status bar is transparent and overlaid - The content rendered inside the showcase includes (based on typical TikTok Shop showcase behavior and the layout structures provided): - **Seller profile header**: Seller avatar (circular, with optional border), seller display name (bold, max 1 line, ellipsized), optional verification badge, and a secondary label (e.g., follower count or tagline) - **Product listing area**: A horizontally or vertically scrolling list/grid of product cards, each showing: - Product image thumbnail - Product name (truncated to 1–2 lines) - Price label (e.g., "$24.99") - Optional discount badge or tag - **Description/bio area**: Short text block with the seller's shop description - **Tab or category strip**: Horizontally scrollable category tabs (e.g., "All", "New Arrivals", "Top Sellers") to filter displayed products - **"More" / "See All" link**: Navigates deeper into the seller's product catalog - **Sort/filter controls**: Buttons or dropdowns to sort products (e.g., "Trending", "Latest") **Loading State** - A skeleton or spinner placeholder is shown while the showcase content loads from the network - Background color matches the app theme (light or dark) **Error / Empty State** - If the showcase URL is invalid or the seller is not found, the screen closes automatically (no content is shown to the user; the activity finishes) **System Overlay Elements** - Status bar is transparent; content renders edge-to-edge - No bottom navigation bar is visible on this screen ### Interactions - **Tapping a product card**: Opens the product detail page (PDP) for that product, either as a full-screen sheet or new screen - **Tapping seller avatar or name**: Navigates to the seller's TikTok profile page - **Tapping a category tab**: Filters the product grid to show only items in that category; the grid refreshes in place - **Scrolling the product grid**: Loads more products (infinite scroll / pagination) - **Tapping a "See All" or "More" link**: Expands the product listing to a full catalog view - **Tapping "Sort" or "Filter"**: Opens a bottom sheet or dropdown with sort/filter options (e.g., "Trending", "Latest", "Price: Low to High") - **Swipe down / Back gesture**: Closes the showcase and returns the user to the previous screen (e.g., a video feed or profile) - **Pull to refresh** (if supported by the web content): Reloads the showcase content ### State Changes - On load: Skeleton/loading placeholder → Fully rendered showcase storefront - On category tab tap: Active tab highlight moves to the selected tab; product grid updates - On scroll to bottom: New products append to the grid; a loading indicator may briefly appear at the bottom - On network error: The screen closes silently (user is returned to the previous screen) ### Sample Data **Seller:** GlowBySophie **Tagline:** ✨ Skincare & Beauty | Ships from LA **Categories:** All · Skincare · Makeup · Sets · New Arrivals **Product Cards (example):** | Product | Price | Tag | |---|---|---| | Vitamin C Glow Serum (30ml) | $18.99 | 🔥 Best Seller | | Hydrating Face Mask Set (5-pack) | $12.49 | 20% OFF | | SPF 50 Daily Moisturizer | $24.99 | New | | Rose Lip Oil | $9.99 | | | Brightening Eye Cream | $21.00 | Limited | **Sort Options:** Trending · Latest · Price: Low to High · Price: High to Low **Filter Options (example):** Under $15 · Under $25 · Sets & Bundles --- # Live Streaming — Screen Specifications --- ## Live Broadcast Screen (Host / Anchor View) ### Overview The host sees their live camera feed full-screen and controls all aspects of their broadcast, including going live, managing viewers, reading chat, and accessing tools like effects, beauty filters, and gifts. ### UI Elements **Camera Preview Area (Full Screen)** - Full-screen live camera preview occupying the entire background - Real-time video rendered directly behind all overlaid controls **Top Bar (overlaid on video)** - Close/end live button (X or back arrow) — top-left - Live room title text (e.g., "Cooking with me tonight 🍜") — top-center - Viewer count badge showing current live viewers (e.g., "1.2K viewers") — top-right - Share button — top-right area - Minimize / collapse button (optional, top-right) **Left Side Panel (overlaid)** - Flip camera button (front/back toggle) - Beauty filter toggle button (labeled "Beauty") - Filter button for color/style filters - Effects button for AR/face effects - Timer / countdown button - Flash toggle **Right Side Panel (overlaid)** - Scrollable list of top gifters / top fans (avatar thumbnails with username) **Bottom Bar (overlaid)** - Comment input field — tappable, opens keyboard with toolbar showing: - Video clip icon (hidden by default) - Link icon (hidden by default) - @ mention icon - Chat bubble icon (hidden by default) - Emoji picker icon - Image/photo attach icon - Microphone icon (hidden by default) - Gift shortcut icon (hidden by default) - Send / post button (arrow up icon) — disabled until text is entered - Live tools row of icon buttons: - Effects - Beauty - Filters - Manage comments - More (…) **Live Chat Feed (overlaid, scrolling)** - Scrolling list of viewer comments, displayed bottom-up - Each comment shows: viewer avatar, username (colored), comment text - Gift animations float up from bottom when viewers send gifts **Gift / Interaction Panel** (slide-up sheet, triggered from tools) - Grid of sendable gift items, each showing: gift image, gift name, coin price - "Send" button per gift **Viewer Count & Stats Strip** (top area) - Current viewer count: "1,247" - Like count accumulator - Duration indicator (e.g., "LIVE · 00:14:32") **"Go Live" Button** (shown before stream starts) - Large prominent button labeled "Start recording" / "Go Live" - Tapping it begins the broadcast **End Live Confirmation Dialog** (triggered by tapping X / back) - Title: "Discard" - Body: confirmation message asking if the host wants to end the live - Two buttons: "Cancel" and "Confirm" **Try Mode Banner** (shown when in try/practice mode) - Top banner indicating this is a practice session, not a real broadcast - Guidance bubble with tips ### Interactions - Tapping the comment input field expands the keyboard and shows the toolbar with @, emoji, image, and send icons - Typing a comment and tapping the send button posts the comment as the host into the chat feed - Tapping the @ icon opens a mention search sheet ("Search for an account to mention") - Tapping the emoji icon opens the emoji picker panel - Tapping the Beauty button opens the beauty adjustment panel (sliders for smoothing, brightness, face shape) - Tapping Effects opens the effects picker panel - Tapping Flip camera switches between front and rear cameras - Tapping "Go Live" / "Start recording" begins the live broadcast; button disappears and the LIVE badge appears - Tapping the X / back button triggers the "Confirm end live?" dialog - Tapping "Confirm" in the dialog ends the broadcast and navigates to the Live End / Recap screen - Tapping "Cancel" dismisses the dialog and resumes the broadcast - Tapping the share icon opens the native share sheet with a link to the live room - Receiving a gift triggers an on-screen animation; a toast or floating notification shows the gifter's name and gift - Tapping the viewer count opens the Viewer List panel ### Sample Data - Title: "Late night Q&A with @sarahcreates ✨" - Viewers: "4,831" - Likes: "12.6K" - Duration: "LIVE · 00:32:15" - Top fan: "@moonlight_kai sent 5 Roses 🌹" - Chat messages: - "@beachvibes22: omg love your hair today!!" - "@techguru_5: how long have you been streaming?" - "@kikifan99: 🔥🔥🔥" - "@newuser: just joined, hello everyone!" --- ## Live Viewer Screen (Watch Live) ### Overview A viewer watches a host's live stream full-screen, can send comments and gifts, follow the host, and interact with the live room in real time. ### UI Elements **Video Playback Area (Full Screen)** - Full-screen live video stream playing automatically - Tap anywhere on screen to show/hide UI controls **Top Bar (overlaid)** - Back arrow button — top-left - Host avatar (circular, tappable) — top-left, adjacent to back arrow - Host username (e.g., "@sarahcreates") — next to avatar - Follow button — next to host name (shows "Follow" if not yet following, hidden/checkmark if already following) - Share button — top-right - Close (X) button — top-right **Viewer Count Strip (top area)** - "4.8K" viewers icon - Like count total - "LIVE" badge (red pill) - Duration or time elapsed **Top Fan / Gift Rail (below top bar)** - Horizontal row of top gifters' avatars with rank badge (1st, 2nd, 3rd) **Live Chat Feed (lower-left, scrolling)** - Scrolling comments displayed over the video - Each entry: avatar + username (with color/badge) + comment text - System messages like "[username] joined" or "[username] followed [host]" - Gift messages: "[username] sent [gift name]" with gift icon inline **Bottom Bar** - Comment input field ("Add comment…") — tappable - Like button (heart icon) — hold to rapidly send likes; like count animates - Gift button (gift box icon) — opens Gift Panel - Share button (arrow icon) - Additional tools (…) icon **Gift Panel** (bottom sheet, opens when Gift button is tapped) - Section header: "Send a gift" - Horizontal tab bar at top: categories (e.g., "Trending", "Latest") - Grid of gift items, each showing: - Animated gift image - Gift name (e.g., "Rose", "Universe") - Coin cost (e.g., "1", "299", "34,999") - Coin balance shown in corner (e.g., "You have 500 coins") - "Recharge" / "Get coins" button - "Send" button per gift (or tap gift to send immediately) **Comment Input Sheet** (slides up when input field is tapped) - Text input field (placeholder: "Add comment…") - Toolbar above keyboard: - @ mention button - Emoji button - Image button - Send button (active once text is entered) **Follow Confirmation Toast** (appears after tapping Follow) - Brief toast: "@sarahcreates is now in your Following list" **Link Mic / Co-host Panel** (if applicable) - Small video tile of a guest/co-host overlaid in a corner, showing their video feed and username **Room Info Panel** (swipe up or tap title area) - Room title: "Late night Q&A with @sarahcreates ✨" - Hashtag tags (e.g., "#TikTok", "#QandA") - Number of viewers - Host bio summary **Subscriber-Only Badge** (if applicable) - Lock overlay with message indicating sub-only access and a "Subscribe" button ### Interactions - Tapping the back arrow exits the live room and returns to the feed or previous screen - Tapping the host avatar or username navigates to the host's profile page - Tapping "Follow" follows the host; button state changes to "Following" with a checkmark - Tapping the comment input field slides up the keyboard and comment toolbar - Typing a comment and tapping send posts it to the chat feed; it appears at the bottom of the chat scroll - Tapping the @ icon in the comment toolbar opens a mention search overlay ("Search for an account to mention") - Tapping the heart/like button sends a like; holding it rapidly sends multiple likes with floating heart animations - Tapping the Gift button slides up the Gift Panel - Tapping a gift in the Gift Panel sends it; a full-screen gift animation plays - Tapping "Recharge" / "Get coins" navigates to the coin purchase screen - Tapping Share opens a share sheet with the live room link - Swiping up dismisses the live room back to the feed - Tapping (…) opens additional options: Report, Block, etc. ### Sample Data - Host: "@sarahcreates · Sarah Lee" - Viewers: "4,831" - Likes: "12.6K" - Chat: - "@cosmic_jay: when's your next upload??" - "@neon_panda: LOVEEE your energy 🌟" - "System: @newviewer joined the stream" - "@gifter_max sent a Universe 🌌 × 1" - Top fans: @gifter_max (🥇), @luna77 (🥈), @topviewer (🥉) - Gift examples: Rose (1 coin), TikTok (1 coin), Drama Queen (299 coins), Universe (34,999 coins) --- ## Live End / Recap Screen ### Overview After a broadcast ends, the host sees a summary of their live session with key stats, highlights, and options to save or share the recap. ### UI Elements **Header** - Title: "Live Ended" or "Your Live Summary" - Close button (X) — top-right **Stats Summary Cards** - "Viewers" card: total unique viewers (e.g., "8,247") - "Duration" card: total broadcast time (e.g., "1h 04m 32s") - "Likes" card: total likes received (e.g., "53.4K") - "New Followers" card: followers gained during the live (e.g., "+312") - "Diamonds / Gifts" card: total gifts received in diamonds/value (e.g., "1,450 💎") **Top Comments / Highlights Section** - Section header: "Top Moments" - List of most-liked or pinned comments from the session - Each entry: avatar, username, comment text, like count on comment **Top Gifters Section** - Section header: "Top Supporters" - Ranked list (top 3–5): rank number, avatar, username, total gifted amount (e.g., "@gifter_max · 500 💎") **Action Buttons** - "Share Recap" button — primary, full-width — shares the live summary - "Save to Device" button — saves a clip or summary image - "Go to Profile" button — navigates to the host's own profile - "Done" button — exits back to the main feed or home screen **New Follower Notification Strip** - Animated strip: "You gained 312 new followers during this live!" ### Interactions - Tapping "Share Recap" opens the native share sheet with the session summary image/link - Tapping "Save to Device" downloads the recap summary card or clip - Tapping "Go to Profile" navigates to the host's profile page - Tapping "Done" or the X button dismisses the recap screen and returns to the main app feed - Tapping a top gifter's name navigates to that user's profile ### Sample Data - Duration: "0h 32m 15s" - Viewers: "4,831" - Likes: "12.6K" - New followers: "+89" - Gifts received: "340 💎" - Top gifters: 1. @gifter_max — 200 💎 2. @luna77 — 85 💎 3. @topviewer — 55 💎 - Top comment: "@beachvibes22: omg love your hair today!! — ❤️ 247" --- ## Live Setup / Go Live Setup Screen ### Overview Before starting a broadcast, the host configures their live room by setting a title, choosing a cover image, selecting privacy settings, and adding optional features like topics or Q&A. ### UI Elements **Header** - Back arrow button — top-left - Title: "Go Live" or "Set Up Your Live" - "Start" / "Go Live" button — top-right (disabled until required fields are filled) **Camera Preview Thumbnail** - Small live camera preview at the top showing what viewers will see - Flip camera icon (↻) overlaid on preview **Title Input** - Label: "Title" - Text input field (placeholder: e.g., "Add a title for your live…") - Character counter (e.g., "0/40") **Cover Image Selector** - Label: "Cover" - Rectangular thumbnail showing either the live frame or a selected photo - "Edit" / change cover button - Tapping opens options: - "Select from Gallery" - "Take photo" - "Cancel" **Audience / Privacy Selector** - Label: "Who can watch" - Dropdown or segmented control: - "Everyone" - "Friends only" **Category / Topic Selector** (optional) - Label: "Topic" - Horizontal scrollable chip list: Gaming, Music, Beauty, Cooking, Q&A, Just Chatting, etc. - Selected chip is highlighted **Additional Options Section** - Toggle row: "Q&A enabled" — on/off toggle - Toggle row: "Filter comments" — on/off toggle **Beauty & Filter Quick Access** - Row of icon buttons below the preview: Beauty, Filters, Effects — tapping each opens that panel in-context **"Go Live" / "Start Recording" Button** - Full-width prominent button at the bottom - Disabled (greyed out) if no title is entered - Active (colored) once title is provided **Permission Notice** (if camera/mic not yet granted) - Inline banner: "TikTok needs access to your camera and microphone to go live." - "Enable" button ### Interactions - Tapping the title input field opens the keyboard; typing updates the title and character counter - Tapping the cover area opens a bottom sheet with "Select from Gallery", "Take photo", "Cancel" - Selecting from Gallery opens the photo picker; chosen photo becomes the cover thumbnail - Tapping "Everyone" / "Friends only" updates the audience setting - Tapping a topic chip selects it (and deselects the previous one); tapping again deselects - Toggling Q&A or Filter comments immediately updates the toggle state - Tapping Beauty / Filters / Effects navigates into those respective adjustment panels while keeping setup state - Tapping "Go Live" or "Start Recording" validates inputs and begins the live stream, transitioning to the Live Broadcast Screen - If permissions are not granted, tapping "Enable" opens the system permissions dialog ### Sample Data - Title placeholder: "Late night Q&A with me ✨" - Entered title: "Cooking tonight — Pasta from scratch 🍝" - Cover: captured from live camera frame - Audience: "Everyone" - Selected topic: "Cooking" - Q&A: enabled --- # Search & Discovery — UI Screen Specifications --- ## Search Bar / Search Entry ### Overview The user taps the search bar (typically accessible from the top of the main feed or Discover tab) and sees a text input field with suggested searches, trending topics, and recent search history before typing anything. ### UI Elements - **Search input field** — full-width text input at the top of the screen, placeholder text "Search for an account to mention" (or generic search placeholder); autofocused with keyboard raised on entry - **Back / close button** — left of the search field; icon-based (chevron/arrow), labeled "Back" - **Clear button** — appears inside the search field once the user starts typing; clears current input - **Recent searches section** — labeled header (e.g., "Recent"); list of previously searched terms, each shown as a text row with an × dismiss button - **Trending / suggested searches section** — list of trending search terms; tab bar at the top with "Trending" and "Latest" options (from arrays.xml array `t`: `Trending`, `Latest`) - **Hashtag suggestions chip list** — horizontal scroll of hashtag chips (e.g., #TikTok) tied to trending content - **Account mention search hint** — "Search for an account to mention" displayed as placeholder when the search context is for @-mentions (from strings.xml: `dby`) ### Interactions - **Typing in the field** — fetches and displays live search suggestions in a dropdown list below the field; each suggestion shows matched text - **Tapping a suggestion** — auto-fills the search field and immediately triggers the Search Results screen - **Tapping a recent search** — re-runs that search, navigates to Search Results - **Tapping × on a recent item** — removes that item from recent history; list updates immediately - **Pressing Back** — dismisses the keyboard and returns to the previous screen (feed/Discover) - **Tapping "Trending" tab** — shows trending search terms for the current moment - **Tapping "Latest" tab** — shows the most recent/live search terms ### Sample Data - Recent: "charli damelio dance", "cooking hacks", "BTS concert" - Trending: "#SummerVibes", "Gordon Ramsay recipe", "skateboarding tricks", "BeachDay 2024" --- ## Search Results ### Overview After the user submits a search query, this screen presents tabbed result categories (Videos, Users, Sounds, Hashtags, Live, etc.) with a filterable content feed for the selected tab. ### UI Elements - **Search bar (persistent at top)** — shows the current query with an editable field; back/close button on the left - **Results tab bar** — horizontal scrollable tab strip showing result categories. Based on code and UI strings, tabs include: - **Top** (default) - **Videos** — "%1$s views" count format (from `ekj`) - **Users** - **Sounds** - **Hashtags** (label from `eyd`) - **Live** - **Shopping / Products** (when available) - **Content list / feed** — scrollable list of result cards for the active tab (see card descriptions below) - **Filter / sort controls** — appears on some tabs; options such as "Trending" and "Latest" (from array `t`) and sort selectors - **"No results" empty state** — illustrated empty state with prompt to try different terms; "Connect to the internet and try again." shown on network error (from `epc`) **Video result card** (in Top/Videos tab): - Thumbnail with play icon overlay - View count (e.g., "1.2M views") - Caption/description text (truncated to ~2 lines) - Author username (e.g., @gordonramsay) - Sound name with music note icon - Like count **User result card** (in Users tab): - Circular avatar - Display name (bold) + username (@handle) in secondary text - Follower count - Verified badge if applicable - "Follow" button (pill-shaped) on the right **Hashtag result card** (in Hashtags tab): - Hashtag icon - Hashtag name (e.g., #FoodTok) - Video count below hashtag name **Sound result card** (in Sounds tab): - Album art thumbnail (square) - Sound/song name - Artist name - Video count using this sound **Live result card** (in Live tab): - Live preview thumbnail - "LIVE" badge overlaid on thumbnail - Creator display name - Current viewer count - Category/topic label ### Interactions - **Tapping a tab** — switches the result list to that category; tab indicator animates to selected tab - **Tapping a video card** — opens full-screen video player at that video - **Tapping a user card** — navigates to that user's profile page - **Tapping a hashtag card** — opens the Hashtag page showing all videos under that tag - **Tapping a sound card** — opens the Sound detail page - **Tapping a Live card** — enters the live stream - **Tapping "Follow" on a user card** — toggles to "Following"; button label updates immediately; unauthenticated users are prompted to log in - **Scrolling down** — loads more results (pagination); spinner shown at bottom while loading - **Editing search query and re-submitting** — refreshes all results for the new query - **Pulling down** — refreshes the results feed ### Sample Data Query: "cooking hacks" - Top tab shows: video by @tasty (4.2M views, "#cookinghacks Life-changing kitchen tips"), video by @gordonramsay (8.1M views), hashtag #CookingHacks (1.2B videos), user @kitchenwizard (3.4M followers) - Users tab: @tasty (Tasty — 32.1M followers), @gordonramsay (Gordon Ramsay — 21.4M followers) - Hashtags tab: #CookingHacks 1.2B videos, #KitchenTips 540M videos --- ## Hashtag / Topic Page ### Overview A dedicated page for a single hashtag (e.g., #FoodTok) showing the total video count, a description, and a scrollable grid or list of videos tagged with it. ### UI Elements - **Header / banner area**: - Hashtag name in large text (e.g., "#FoodTok") - Total video count (e.g., "42.3B videos") - Short description (1–2 lines) if available - **"Add to Favorites" button** — bookmark icon; label "Add to Favorites" / "Added to Favorites" on toggle (from `ccl` / `ccu`) - **Tab bar** — typically "Top" and "Latest" tabs (from array `t`) to sort videos within the hashtag - **Video grid** — 2-column thumbnail grid; each cell shows: - Video thumbnail - View count overlaid at the bottom (e.g., "2.1M") - **Share button** — in the header; opens sharing sheet ### Interactions - **Tapping a video thumbnail** — opens the video in full-screen player; swiping navigates within hashtag videos - **Tapping "Add to Favorites"** — bookmarks the hashtag; button text changes to "Added to Favorites"; toast appears confirming action (using strings `ccl` → `ccu`) - **Tapping "Top" tab** — shows most-viewed videos for this hashtag - **Tapping "Latest" tab** — shows most recently posted videos - **Scrolling** — loads more videos in the grid (infinite scroll) - **Tapping Back** — returns to Search Results or the previous screen ### Sample Data - Hashtag: **#FoodTok** - 42.3B videos - Description: "Discover delicious recipes and cooking tips from creators around the world." - Top video: @tasty — 14.2M views, pasta tutorial thumbnail --- ## Discover / Explore Feed ### Overview The Discover (Explore) tab presents the user with trending content, suggested searches, trending hashtags, popular creators, and curated topic categories to browse without a specific search query. ### UI Elements - **Search bar at top** — tappable (not focused); label or placeholder "Search"; tapping enters the Search Entry screen - **"For You" / Trending banner carousel** — horizontal auto-scrolling banner cards highlighting trending topics or events; each card has a background image, topic title, and video count - **Trending hashtags row** — horizontal scrollable list of hashtag chips (e.g., #TikTok, #FoodTok, #Dance) - **"Trending" section header** with "Trending" and "Latest" sub-tabs (from array `t`) - **Trending video grid / list** — grid of video cards (2-column) showing: - Thumbnail - View count - Creator handle - **Suggested accounts section** — "Find friends" (from `cc8`) or "Suggested for you" header; horizontal scroll of user cards showing avatar, name, and Follow button - **Topic / category chips** — e.g., "Cars" (from `evl`), "Beauty" (from `drn`), "Comedy", "Gaming" — tapping filters the feed to that category - **"Everyone" audience filter** — pill button labeled "Everyone" (from `d4h`) to adjust content visibility scope ### Interactions - **Tapping the search bar** — navigates to Search Entry screen with keyboard raised - **Tapping a trending hashtag chip** — navigates to the Hashtag page for that tag - **Tapping a video thumbnail** — opens the video in the full-screen video player - **Tapping "Follow" on a suggested user** — follows that user; button changes to "Following" - **Tapping a category chip** — filters the Discover feed to show content in that category; selected chip highlights - **Tapping "Find friends"** — navigates to a contacts/friends discovery screen - **Pulling down** — refreshes the Discover feed - **Scrolling** — loads more trending content ### Sample Data - Trending hashtags: #SummerVibes, #FoodTok, #DIY, #Gaming, #BeachDay - Trending video: @charlidamelio — 12.8M views, dance challenge - Suggested users: @gordonramsay (Gordon Ramsay), @nasa, @therock - Categories: Cars, Beauty, Comedy, Gaming, Dance, Food, Sports --- ## Search Suggestions / Autocomplete Overlay ### Overview While the user is actively typing in the search field, a live suggestion list drops down below the input showing query completions, matching user handles, and trending terms. ### UI Elements - **Suggestion list** — full-width list below the search bar; each row contains: - **Search icon** (magnifying glass) or **user avatar** (for account suggestions) - **Suggestion text** — partial or full matched text; typed portion shown in regular weight, completion in bold (or vice versa) - **Category label** in secondary text (e.g., "in Videos", "Account", "Hashtag") - **"Search for an account to mention"** hint text at top when in @-mention context (from `dby`) - **Divider lines** between suggestion rows ### Interactions - **Tapping a text suggestion** — fills the search bar with that text and submits the search, navigating to Search Results - **Tapping an account suggestion** — navigates directly to that user's profile (bypassing results page) - **Tapping the search icon row** — equivalent to submitting the current typed query - **Continuing to type** — refreshes the suggestion list in real time (debounced) - **Tapping the × / clear button** — clears the search field; suggestion list resets to show recent searches and trending ### Sample Data Typed: "cook" - Suggestions: "cooking hacks" (in Videos), "cooking with kids" (Trending), "cook with me" (in Videos), @cookingwithshereen (Account — 2.1M followers), #CookingTips (Hashtag — 800M videos) --- # Profile & Account Screens — UI Specification --- ## Edit Profile ### Overview The user views and edits their public profile information, including avatar, display name, username, bio, and other personal details. ### UI Elements **Header / Top Bar** - Back button (left): navigates back to the profile page - Title: (none visible by default, or "Edit profile" depending on variant) - The status bar is transparent/edge-to-edge **Profile Photo Section** - Current avatar displayed as a circular image - Tapping it opens an action sheet or camera/gallery picker **Editable Fields (vertically stacked)** - **Name** — single-line text input; user's display name (e.g., "Alex Rivera") - **Username** — single-line text input, prefixed with `@` (e.g., "@alexrivera_99"); may have uniqueness validation - **Bio** — multiline text area; up to 4 lines visible, expands on focus; placeholder hints user to write something about themselves - **Link** — optional URL field (e.g., "https://mysite.com"); shows a link icon; may be hidden unless account type supports it - **Category** (for creator accounts) — shows current selected category (e.g., "Cars", "Entertainment") **Accessibility / Mention-related toolbar** (visible when a text input is focused and the keyboard is open) - Icon: Video (hidden by default) - Icon: Link - Icon: @Mention — tapping opens a search overlay: "Search for an account to mention" - Icon: Emoji picker - Icon: Image picker — shows gallery thumbnail or image attach button - Icon: Microphone (hidden by default) - Icon: Gift (hidden by default) - Right side: optional character count or word limit indicator **Email Consent Tip Banner** (conditionally shown for some users) - A floating pill/button near the bottom of the screen - Icon: paper plane (send icon) - Short text label describing the email update offer - Tapping it opens the Email Consent page - A dismiss ("X") control is visible **Bottom area** - Save / confirmation action is typically done via a button in the top-right or a floating "Save" button ### Interactions - **Back button / Back gesture**: if unsaved changes exist, prompts user to discard; otherwise navigates back to the profile - **Avatar tap**: opens a choice between camera ("Take photo") or gallery ("Select from Gallery") or cancel - **Name / Username / Bio fields**: keyboard opens; tapping outside the active field hides the keyboard if the touch is outside the focused input's bounds - **@Mention icon tap**: opens a user-search overlay with the placeholder "Search for an account to mention" - **Emoji icon**: opens the emoji picker panel - **Image icon**: opens device gallery picker labeled "Select from Gallery" - **Email consent banner tap**: navigates to the Email Consent page - **Email consent banner dismiss**: banner disappears immediately ### Sample Data - Name: "Mia Johnson" - Username: "@mia.johnson" - Bio: "📍 NYC | travel + food content ✈️🍜 | collabs: mia@email.com" - Link: "https://linktr.ee/miajohnson" - Category: "Travel" --- ## Email Consent ### Overview A full-screen page asking the user whether they want to receive email updates from TikTok, with options to agree or decline. ### UI Elements **Navigation Bar (top)** - Close button (X icon, top-right): dismisses the page and records a "back" action - No back arrow (users must tap X to close) **Header Illustration / Logo** - A brand image or TikTok logo displayed prominently at the top of the content area **Title Text** - Headline text set dynamically based on entry point: - From profile page: a consent-specific title is shown (e.g., text fetched from compliance service) - From manage account page: a different, manage-account–specific message is shown **Body / Description Text** - A paragraph explaining what the user is signing up for when they agree to receive email updates - Text is fetched from the compliance service based on the current entry context (profile_page or manage_account_page) **Primary Button — "Get updates"** - Full-width or prominent button - Tapping records consent as GRANTED and closes the page **Secondary / Decline Button — "No thanks"** - Text button or link below the primary button - Tapping records consent as REJECTED and closes the page ### Interactions - **X / Close button tap**: records action as "back", dismisses the page, returns to where the user came from (profile or manage account) - **"Get updates" button tap**: consent status saved as GRANTED; the profile page's email consent tip banner updates to reflect the accepted state; page closes - **"No thanks" button tap**: consent status saved as REJECTED; page closes - **Back gesture (Android)**: intercepted — the system back is blocked; user must tap X explicitly ### Sample Data - Title: "Stay in the loop" - Body: "Get the latest updates, tips, and news from TikTok delivered to your inbox. You can unsubscribe at any time." - Primary button: "Get updates" - Secondary button: "No thanks" --- ## Comment Input Toolbar (within comment section) ### Overview A compact horizontal toolbar above the keyboard that provides rich-input options when the user is composing a comment on a video. ### UI Elements **Input Toolbar (horizontal row of icons, left to right)** - **Video icon** (conditionally shown): attach a video clip - **Link icon** (conditionally shown): insert a link - **@ Mention icon** (always visible): tag another user; placeholder "Search for an account to mention" - **Conversation / Threads icon** (conditionally shown) - **Emoji icon** (always visible): opens emoji panel - **Image icon** (with gallery preview): attach an image; shows a small badge/count overlay if media is already attached - **Microphone icon** (conditionally shown): voice input - **Gift icon** (conditionally shown): send a gift **Right side of toolbar** - **Word/character count button** (conditionally shown): displays current input length; tapping may scroll or expand the text field; styled as a pill (e.g., "First 20", "First 40") **Bottom comment bar (below toolbar)** - The comment text input field itself - A separator line at the very top of the bar - An optional top content slot (e.g., suggested questions or welcome messages, hidden by default) ### Interactions - **@ Mention tap**: keyboard remains open; a mention-search overlay appears above the keyboard allowing the user to type a username - **Emoji tap**: keyboard switches to emoji panel - **Image icon tap**: opens image picker ("Select from Gallery") - **Gift icon tap**: opens gift selection panel - **Microphone tap**: starts voice input - **Word count button**: shows remaining characters or scrolls the input; not user-editable directly ### Sample Data - Placeholder in text field: "Add a comment..." - After image attached: image thumbnail preview appears in the toolbar slot with a badge "1" - Character count: "280" remaining, displayed as a small pill label on the right --- ## Comment Thread / Video Description Panel ### Overview A scrollable panel overlaid at the bottom of a video screen showing the video's description, author info, associated sound, and expandable details. ### UI Elements **Author Info Row** - Circular avatar (28×28 dp) of the video author - Author display name (bold, single line, truncated with ellipsis) — e.g., "travel_with_mia" - Verification badge (if applicable) shown next to the name - Timestamp label in muted color — e.g., "3d" (3 days ago) - Dropdown/sort icon on the far right (arrow icon, shown conditionally) **Video Description Area** - Multi-line text (up to 4 lines, then truncated with a "more" link) — e.g., "Finally explored the hidden temples of Bali 🌿 #travel #Bali #temples" - Inline hashtags rendered as tappable links - A "more" / "See more" link appears when text is truncated; tapping expands to full description - A gradient fade-out overlay at the right edge when text overflows **Sound / Music Row** - Scrolling marquee of the current sound name — e.g., "Original sound - travel_with_mia" - Scrollable horizontally if long **Comment/Stats Row** - Horizontally scrollable thumbnails of recent comments or user avatars - Comment count (e.g., "1.2K") - Sort selector (e.g., "Trending", "Latest") **Tags / Badges (optional, conditionally shown)** - Rounded pill badge for topic tags — e.g., "#TikTok", "Travel" - Location badge or "Added sound" badge **Separator line** - A thin horizontal divider between the description panel and the comment list below ### Interactions - **Author avatar / name tap**: navigates to that user's profile - **Hashtag tap**: navigates to the hashtag discovery/search page for that tag - **"See more" / "more" tap**: expands the description to full text in-place; the button changes to "less" or disappears - **Sound name tap**: navigates to the sound's page showing other videos using the same sound - **Sort icon tap**: toggles comment sort order between "Trending" and "Latest" - **Comment avatar tap**: navigates to that commenter's profile ### Sample Data - Author: "travel_with_mia" · 2d ago - Description: "Finally explored the hidden temples of Bali 🌿 This place is absolutely magical. Link in bio for the full vlog! #travel #Bali #temples #exploreasia" - Sound: "Original sound - travel_with_mia" - Tags: "#TikTok", "Travel" - Comment count: 847 --- # Messaging & Social — Screen Specifications --- ## Direct Messages Inbox ### Overview The user sees a list of all their direct message conversations, with the most recent at the top, and can open any conversation or start a new one. ### UI Elements **Header/Toolbar** - Title: "Messages" displayed prominently at the top - Search icon (magnifying glass) in the top-right corner to search conversations - Compose/new message icon (pencil or edit icon) in the top-right corner **Conversation List** Each row in the list shows: - **Avatar**: Circular profile photo of the other person (or group icon). Unread conversations may show an indicator dot/badge - **Username / Display Name**: Bold text for unread conversations, regular weight for read - **Message Preview**: Truncated last message text (1 line, ellipsized). Could be "You: [message]" if the current user sent it last, or the other person's name prefix in a group - **Timestamp**: Relative time (e.g., "2m", "1h", "3d") right-aligned on the same row as the username - **Unread badge**: If there are unread messages, a red/pink circular count badge appears on the right side of the row **Suggested Questions / Welcome Message Banner** (conditionally shown) - A dismissible banner at the top of the list suggesting conversation starters or prompting the user to message someone (e.g., from `dm_suggested_question` and `dm_welcome_message` parameters) **Empty State** - If no conversations exist: An illustration and prompt text encouraging the user to find friends (e.g., "Find friends") with a button **Bottom Navigation** - Standard TikTok bottom navigation bar with Home, Discover, Create (+), Inbox/Activity, and Profile tabs. The Inbox tab is active. ### Interactions - **Tapping a conversation row** → Opens the Chat / Conversation Detail screen for that contact - **Tapping the Search icon** → Activates an in-list search bar to filter conversations by username - **Tapping the Compose icon** → Opens a "New Message" / contact picker to start a conversation with someone - **Swiping left on a conversation row** → Reveals quick actions (e.g., Delete, Mute) - **Pull-to-refresh** → Refreshes the conversation list from the server - **Tapping "Find friends"** on empty state → Navigates to a friend/contact discovery screen ### Sample Data | Avatar | Name | Last Message | Time | Unread | |--------|------|-------------|------|--------| | 🟣 | **@zoemusic** | "omg did you see that trend??" | 2m | 3 | | 🔵 | @jake_creates | "You: sent a video 📹" | 1h | — | | 🟠 | **@dance_crew** | "Priya: everyone come live tonight!" | 3h | 1 | | 🟢 | @tiktok.support | "Your account has been verified." | 2d | — | --- ## Chat / Conversation ### Overview The user reads and sends messages in a one-on-one (or group) conversation, with support for text, emoji, media, links, GIFs, voice messages, and shared videos. ### UI Elements **Header/Toolbar** - **Back arrow** (left side) to return to the inbox - **Profile avatar + username** (center or left-center) — tapping navigates to that user's profile - **Verified badge** (if applicable) shown next to the username - **Online/Activity indicator** (optional subtitle, e.g., "Active now" or "Active 3h ago") - **More options icon** (⋮ or ···) on the right — reveals options like Block, Report, Mute, Clear chat **Message Bubbles (scrollable list)** - Messages from the other person appear on the **left**, with their avatar thumbnail - Messages from the current user appear on the **right**, in a colored bubble (TikTok pink/red tint) - Each bubble shows: - **Text content** (or media preview) - **Timestamp** (shown on tap or below the bubble) - **Read receipt** (e.g., small avatar or "Seen" label for the last read message) - **Shared video card**: A video thumbnail with the creator's name, view count, and a caption — tappable to watch - **Shared link card**: URL preview with favicon, title, and description - **Image/photo message**: Inline thumbnail, full-screen on tap - **Voice message**: Waveform visualization with a play button and duration - **Emoji-only message**: Displayed larger than standard text - **Sticker/GIF**: Inline animated image - **Reaction bar**: Long-pressing a message reveals quick emoji reactions (❤️ 😂 😮 😢 👍 and more) - **Date dividers** between messages from different days (e.g., "Today", "Yesterday", "Mon, Jun 9") - **"Typing…" indicator**: Three animated dots when the other person is typing **Input Bar (bottom)** - **Text input field**: Placeholder "Message…" — expands to multi-line as the user types - **@ Mention button**: Icon to tag another user in the message - **Emoji button**: Opens the emoji picker panel - **Image/Gallery button**: Opens the photo picker to send an image from the device gallery (labeled "Select from Gallery") - **Voice message button**: Hold-to-record microphone icon - **Gift button** (conditionally shown): Send a virtual gift to the other person - **Video link button** (conditionally shown): Share a TikTok video into the chat - **Link button** (conditionally shown): Share a URL - **Send button**: Appears when the input field has text; replaces or sits beside the input; tapping sends the message - **Character/word counter** or send character limit indicator (if applicable) **Bottom Safe Area** - A thin divider line separates the input toolbar from the keyboard / bottom edge ### Interactions - **Typing in the input field** → Send button activates; character count may appear - **Tapping Send** → Message appears in the bubble list immediately (optimistic update); network syncs in background - **Tapping @ Mention button** → Shows a search panel ("Search for an account to mention") with autocomplete results; selecting a user inserts "@username" into the input - **Tapping Emoji button** → Emoji picker opens above the keyboard; selecting an emoji inserts it into the input - **Tapping Image/Gallery button** → Native image picker opens; selecting image(s) sends them as a message - **Holding Voice message button** → Records audio; releasing sends it; swiping left cancels - **Tapping a shared video card** → Opens the TikTok video player for that video - **Tapping a shared link** → Opens the link in an in-app browser - **Tapping the other user's avatar/name in the header** → Navigates to their public profile - **Long-pressing a message bubble** → Shows context menu: React, Reply, Copy, Delete (for own messages), Report (for others') - **Tapping a reaction emoji** → Adds/toggles your reaction on that message; reaction count updates - **Tapping More options (⋮)** → Bottom sheet appears with: Mute notifications, Block, Report, Delete conversation, Clear chat **State Changes** - When keyboard opens, the message list scrolls up to keep the latest message visible - New incoming messages arrive in real-time (WebSocket/push connection); unread badge in toolbar clears when chat is open - Failed-to-send messages show a red error icon with a retry tap target - "Seen" receipt updates as the other person reads ### Sample Data > **@zoemusic** · Active now --- *(Mon, Jun 9)* **zoe** · 10:14 AM omg did you see that @charlidamelio trend?? 😭 **You** · 10:15 AM YES I've been trying it all morning lol **zoe** · 10:15 AM *[Shared video card: "@charlidamelio · 2.1M views · the renegade but make it 2025"]* **You** · 10:16 AM bro she's so good 🔥🔥 **zoe** · 10:17 AM we should do a duet!! when are you free? **You** · 10:18 AM this weekend? I'm free Saturday **zoe** · 10:18 AM ✅ *Seen* *(Typing…)* --- ## New Message / Contact Picker ### Overview The user searches for or selects a contact to start a new direct message conversation. ### UI Elements **Header/Toolbar** - **Back/Close button** (top-left, "×" or back arrow) to dismiss - **Title**: "New Message" - **Next / Done button** (top-right, grayed out until a contact is selected): "Next" or "Confirm" **Search Bar** - Full-width text input at the top of the content area - Placeholder text: "Search for an account to mention" (or equivalent: "Search") - Clear (×) button appears when text is entered **Suggested / Frequent Contacts Section** - Section header: "Suggested" or "Recent" - Horizontal scrollable row of circular avatar thumbnails with usernames below them - Tapping an avatar selects that contact immediately **Search Results List** (appears as user types) Each result row shows: - **Avatar** (circular, 40–48px) - **Display Name** (bold) - **Username** (e.g., @jake_creates, secondary text color) - **Follow relationship label** (e.g., "Follows you", "Following") - **Select checkbox** or tap-to-select highlighting on the right **Selected Recipients Chips** (if multi-select is supported for group DMs) - Selected users appear as dismissible chips/tags at the top of the list **Empty/No Results State** - Text: "No results found" or "No accounts found" with a neutral illustration ### Interactions - **Typing in search bar** → Filters the contact list in real time; shows matching TikTok usernames - **Tapping a contact row** → Highlights/selects that contact; "Next" button becomes active - **Tapping a selected chip's × button** → Removes that person from the selection - **Tapping "Next"** → Navigates to the Chat / Conversation screen for the selected recipient(s) - **Tapping Back/Close** → Returns to the Messages Inbox without starting a conversation ### Sample Data **Search: "dance"** | Avatar | Name | Username | Relationship | |--------|------|----------|--------------| | 🟠 | Dance Crew | @dance_crew | Follows you | | 🔴 | DanceKing99 | @danceking99 | — | | 🟣 | Priya Dances | @priyadances | Following | --- ## Chat Options / More Actions Sheet ### Overview A bottom sheet offering conversation management options, triggered from the "⋮" menu inside a chat. ### UI Elements **Sheet Handle** - A small pill/drag handle at the top center **Action List** (vertically stacked, full-width tappable rows) - **Mute notifications** — with a toggle or separate on/off states - **Block [username]** — e.g., "Block @zoemusic" - **Report** — Opens a sub-flow for reporting the user or message - **Delete conversation** — Destructive action, red text - **Clear chat** — Removes message history locally **Cancel Button** - A prominent "Cancel" button at the bottom to dismiss the sheet ### Interactions - **Tapping Mute notifications** → Toggles notification muting; label changes to "Unmute notifications" - **Tapping Block** → Confirmation dialog appears: "Block @zoemusic?" with "Block" (confirm) and "Cancel" buttons. Confirming blocks the user, closes the chat, and returns to inbox - **Tapping Report** → Opens a report flow with reason selection (Spam, Harassment, Inappropriate content, etc.) - **Tapping Delete conversation** → Confirmation dialog: "Delete this conversation?" with "Delete" and "Cancel". Confirming removes the conversation from the inbox - **Tapping Clear chat** → Confirmation dialog; confirming removes all message bubbles from the current view - **Tapping Cancel or dragging down** → Dismisses the sheet ### Sample Data > *More options for @zoemusic* - 🔕 Mute notifications - 🚫 Block @zoemusic - ⚠️ Report - 🗑 Delete conversation - 🧹 Clear chat - **Cancel** --- # Notifications & Inbox — Screen Specifications --- ## Notification Detail Screen ### Overview The user sees a full-screen, scrollable list of notifications for a specific notification category (Likes, Comments, Mentions, or New Followers), with the ability to pull-to-refresh and load more items as they scroll. ### UI Elements **Header / Navigation Bar** - Back button (left side) — returns to the previous screen - Title text — displays the category name, such as "Likes," "Comments," "Mentions," or "New Followers" - Optional settings/gear icon (right side) — appears only when unsubscribe settings are available for this notification type (e.g., certain promotional or shop-related notifications) **Notification List** A vertically scrollable list of notification cards. Each card typically shows: - **Avatar** — circular profile photo of the user who triggered the notification (e.g., the person who liked, commented, or followed) - **Username / Display name** — bold text identifying the acting user - **Verification badge** — shown inline next to the username if the account is verified - **Action description** — secondary text describing the action, e.g., "liked your video," "commented: [comment text]," "mentioned you in a comment," "started following you" - **Content thumbnail** — small square thumbnail of the related video or photo (on the right side), if the notification is tied to a piece of content - **Timestamp** — relative time text (e.g., "2h," "3d") shown in a subdued color - **Unread indicator** — a subtle visual treatment (e.g., different background or dot) on notifications the user hasn't seen yet - **Follow button** — shown on New Followers notifications if the user is not yet followed back; labeled "Follow" or shows a follow-back state **Pull-to-Refresh Indicator** - Standard spinner at the top of the list; visible when the user pulls down to refresh **Load More / Footer** - Loading spinner at the bottom of the list while more notifications are being fetched - "No more content" empty state shown when all notifications have been loaded **Empty State** - Full-screen empty state illustration and message when there are no notifications in this category (e.g., no likes yet, no comments yet) - If a network error occurs, a "Connect to the internet and try again." message is displayed with a retry option ### Interactions - **Tap on a notification card** — navigates to the relevant content: - Like notification → opens the liked video - Comment notification → opens the video with the comment thread - Mention notification → opens the content where the user was mentioned - New Follower notification → opens the follower's profile - **Tap on avatar** — navigates to the profile of the user who triggered the notification - **Tap Follow button** (on Followers tab) — follows that user back; button state updates to "Following" - **Tap gear/settings icon** (top right, when present) — opens notification subscription settings for this category (see Notification Subscription Settings sheet below) - **Pull down to refresh** — reloads the notification list from the top; spinner is shown during load; list is replaced with fresh data when complete - **Scroll to bottom** — triggers automatic loading of older notifications; a loading spinner appears at the bottom - **Tap Back button** — returns to the Inbox / main notification hub screen - **Tap retry on error state** — re-attempts loading the notification list ### State Changes - On first load: empty state or loading spinner is shown until data arrives - After data loads: list populates and unread items are visually distinguished - After pull-to-refresh: the full list refreshes; unread counts may update - After scrolling to end and loading more: new items append to the bottom of the list; if no more items exist, "end of list" state is shown - If the user taps a notification: that item may be marked as read (visual distinction removed) - If a gear icon appears (for shop/promotional categories): it signals that the user can manage notification preferences for this category ### Sample Data **Likes category — example items:** - Avatar: @dancequeen99 — "liked your video" — thumbnail of a dance video — "5m ago" (unread) - Avatar: @techbro.mike — "liked your video" — thumbnail of a cooking tutorial — "1h ago" (read) - Avatar: @sunflower_vibes — "liked your video" — thumbnail of a travel clip — "3h ago" (read) **Comments category — example items:** - Avatar: @coffeelover22 — "commented: This is so aesthetic 😍" — thumbnail of a café video — "20m ago" (unread) - Avatar: @bestfriend_jess — "replied to your comment: haha same!!" — thumbnail of a comedy skit — "2h ago" (read) **Mentions category — example items:** - Avatar: @trendreport — "mentioned you in a comment: @yourusername check this out!" — thumbnail of a trending video — "45m ago" (unread) **New Followers category — example items:** - Avatar: @skater_phoenix — "started following you" — [Follow] button — "10m ago" (unread) - Avatar: @bookworm.ellie — "started following you" — [Following] button — "1d ago" (read) --- ## Notification Subscription Settings Sheet ### Overview A bottom sheet or settings screen where the user can manage whether they are subscribed to or unsubscribed from a specific notification category (typically for shop, promotional, or creator-related notifications). ### UI Elements **Header** - Title indicating the notification type being managed (e.g., "Shop Notifications," "Promotional Updates") - Close/back button to dismiss the sheet **Subscription Toggle / Options** - Current subscription status indicator — shows whether the user is currently subscribed or unsubscribed to this notification type - Toggle or button to subscribe/unsubscribe: - "Subscribe" action — re-enables notifications for this category - "Unsubscribe" action — stops this category of notifications from appearing **Description Text** - Brief explanation of what this notification category includes and what will happen if the user unsubscribes ### Interactions - **Tap Unsubscribe** — marks the user as unsubscribed from this notification type; the gear icon in the parent Notification Detail screen may update to reflect the new state - **Tap Subscribe** — re-subscribes the user; notifications for this category will resume - **Tap Close / Back** — dismisses the sheet and returns to the Notification Detail screen; no changes are saved if the user dismisses without confirming ### State Changes - When the user confirms an unsubscribe: the notification list in the parent screen may show an "unsubscribed" banner or empty state for future notifications - When the user re-subscribes: the state reverts to normal subscribed behavior ### Sample Data - Title: "TikTok Shop Notifications" - Description: "You'll stop receiving updates about orders, promotions, and seller activity." - Current state: "You are currently subscribed to these notifications." - Button: "Unsubscribe" --- # Music & Audio — UI Screen Specifications --- ## Music Detail Page ### Overview The user lands on a dedicated full-screen page for a single sound/song, where they can preview the track, view metadata, see videos made with it, save it to favorites, and use it to create their own video. ### UI Elements **Header / Top Bar** - Back button (left) — chevron/arrow icon labeled "Back" - Music/sound title truncated to one line in the center - Optional overflow menu (right) — for share or additional actions **Hero Section (top area)** - Circular or square album art / cover image, medium size, prominently centered - Track title in large bold text (e.g., "Flowers") - Artist/author name in smaller secondary text (e.g., "Miley Cyrus") - Artist profile avatar thumbnail (small, tappable) next to the author name - Exclusive sub-label or commercial tag badge when applicable (e.g., "Commercial sound") - Billboard chart rank badge if the track is on a chart (e.g., "#3 on Billboard Hot 100") - Promotion tag label when present (e.g., "Trending") - "Original sound" indicator when applicable **Playback Controls** - Large circular play/pause button centered below the cover art - Audio waveform or progress bar showing current playback position with total duration - Duration label (e.g., "0:18 / 2:47") - Volume/mute controls (hardware volume keys also supported) **Action Buttons Row** - **Use this sound** (primary CTA button) — tapping opens the video creation/recording screen with this sound pre-loaded - **Add to Favorites** / **Favorites** toggle button — heart icon; label "Add to Favorites" (unfavorited) or "Added to Favorites" (favorited, from `ccu`); shows toast "Removed from Favorites" (from `eho`) on removal - **Save / Download** button (when not copyright-restricted; if restricted shows toast: "Can't save video with this sound due to copyright regulations." from `egr`) - **Share** button — opens the system share sheet or TikTok share dialog **Stats Row** - Video count: e.g., "2.4M videos" (format: `%1$s views` from `ekj` adapted for videos) - Favorite/collection count **Lyrics Panel** (when lyrics are available) - Scrolling lyrics synchronized to playback, displaying the current line highlighted - "Translating…" spinner state during translation (from `dh9`) **Related / Similar Sounds Section** - Horizontal scroll strip labeled something like "Similar sounds" - Each item: small cover art thumbnail + track name + artist name **Videos Made With This Sound** - Grid or vertical list of video thumbnails showing user-created content using this track - Each tile: video thumbnail, play count, creator username - Sorted by "Trending" or "Latest" (from array `t`: "Trending", "Latest") - Tapping a video opens it in the feed player **Bottom Input / Comment Bar** (if comment-style interaction exists on this page) - Text input field with placeholder "Comment" (from `f0a`) - Emoji icon button - "@" mention button **Offline / Unavailable State** - If the sound is unavailable, shows `offlineDesc` text in place of playback controls - "Connect to the internet and try again." message (from `epc`) when network is absent **Dialogs / Sheets** - **Favorites confirmation toast**: "Added to Favorites" / "Removed from Favorites" - **Copyright error toast**: "Can't save video with this sound due to copyright regulations." - **Edit sheet** (conditionally shown on entry): a bottom sheet for editing sound start/end trim points, original sound volume slider vs. added sound volume slider - **Delete confirmation dialog**: buttons "Delete" / "Cancel" (from array `q`) ### Interactions - Tapping **play/pause** toggles audio playback; progress bar animates in real time - Tapping **Use this sound** navigates to the video creation/recording screen with the track pre-selected and trimmed to the configured begin/end time - Tapping **Add to Favorites** toggles saved state; shows a brief toast ("Added to Favorites" / "Removed from Favorites") - Tapping the **artist avatar or name** navigates to the artist/creator profile page - Tapping a **video thumbnail** in the "Videos made with this sound" section opens that video in the full-screen feed player, anchored to this sound's feed - Tapping **Back** returns to the previous screen (search result, feed, profile, etc.) and dismisses the audio playback - Scrolling the lyrics panel while audio plays auto-scrolls to the current line; user can also scroll manually - Tapping a **similar sound** item navigates to that sound's own Music Detail page - Pressing hardware volume up/down while on this page adjusts media volume and logs the volume key event ### Sample Data - **Track**: "Flowers" - **Artist**: Miley Cyrus - **Duration**: 3:20 (full) / 0:30 (shoot clip duration) - **Stats**: 4.8M videos · 1.2M favorites - **Chart rank**: #4 on TikTok Weekly Chart - **Lyrics excerpt**: *"I can buy myself flowers / Write my name in the sand…"* - **Similar sounds**: "Cruel Summer – Taylor Swift", "Watermelon Sugar – Harry Styles" - **Videos grid**: thumbnails from @dancequeen99, @viralmoments, @sunsetvibes showing 1.2M / 840K / 612K plays respectively --- ## Sound Picker / Music Selection Screen ### Overview The user browses, searches, and selects a background sound or music track to add to their video while in the creation flow. ### UI Elements **Header** - Close/back button (top left) - Title: "Add Sound" or "Sounds" (screen-level heading) - Search bar with placeholder "Search for an account to mention" (from `dby`); for music search, placeholder is contextual like "Search sounds" **Tab Bar (top)** - Tabs: displayed from array `k`: "Online sound library" · "My Sound" - Selected tab has an accent underline; unselected tabs are in secondary text color **"Online Sound Library" Tab Content** - **Sub-tabs / category filters**: "Trending", "Latest", and additional filter chips (from array `t`) - **Recommended / Featured Banner**: optional carousel at top showing promoted sounds with a cover image and title - **Sound List** (scrollable vertical list): - Each row: - Album art thumbnail (square, ~44 pt) - Track title (bold, one line, truncated) - Artist name (secondary text, one line) - Duration label (e.g., "0:45") - Favorite/heart icon toggle (tappable) - "Use" / checkmark button on the right — tapping selects this sound - Currently playing track shows an animated waveform icon next to the album art - Favorited tracks show a filled heart icon - **Filters** (optional): "Normal", "Black/White", "Arts", "Vintage", etc. from array `ab` — if applicable for filter/mood categories - **"Downloading…"** inline indicator (from `d5u`) while a sound preview is buffering **"My Sound" Tab Content** - List of sounds the user has previously saved/favorited or recorded - Same row format as the online library - Empty state: "No saved sounds yet" with a suggestion to browse the library **Search Results State** - Replaces the list with search results matching the query - Each result: album art + title + artist + duration + use button - No results state: brief message suggesting alternate search terms **Bottom Action Area** - **Selected sound bar** (appears after a sound is selected): shows album art thumbnail + track name + "Added sound" label (from `diy`) + a remove/clear "×" button - "Confirm" button (from `f_x`) or checkmark to finalize the sound selection and return to the creation screen **Dialogs / Sheets** - Tapping a track row while a different track is playing shows a brief play preview automatically - A bottom sheet may appear for trim/clip selection: drag handles on a waveform strip to set start and end times ### Interactions - Tapping a **sound row** starts previewing that sound and highlights the row; the selected sound bar appears at the bottom - Tapping the **heart / favorite icon** on a row toggles the saved state; shows "Added to Favorites" toast (from `ccl`) - Tapping **"Use"** on a row selects that sound and updates the bottom selection bar - Tapping **Confirm** closes the picker and returns to the video creation screen with the chosen sound applied - Tapping **Close/Back** discards any unsaved selection and returns to the creation screen without changing the sound - Typing in the **search bar** filters the list in real time; clearing the query restores the default list - Switching **tabs** ("Online sound library" / "My Sound") loads the corresponding content list ### Sample Data - **Online library tab, Trending**: 1. "Espresso" – Sabrina Carpenter · 0:15 ❤️ 2. "Good Luck, Babe!" – Chappell Roan · 0:30 3. "BIRDS OF A FEATHER" – Billie Eilish · 0:28 ❤️ 4. "Too Sweet" – Hozier · 0:30 - **My Sound tab**: 1. "original sound – @user123" · 0:12 (saved) 2. "Flowers" – Miley Cyrus · 0:30 --- ## Sound Chart / Billboard Page ### Overview The user browses trending and charting music tracks ranked on TikTok's internal or external charts (e.g., TikTok Billboard chart), displayed as a ranked list they can preview and use. ### UI Elements **Header** - Back button (top left) - Title: chart name, e.g., "TikTok Billboard Chart" or "Music Charts" - Optional sort/filter icon (top right) **Chart List** (scrollable vertical list) - Each row displays: - **Rank number** (large, left-aligned, e.g., "#1") - **Album art** (square thumbnail) - **Track title** (bold) - **Artist name** (secondary text) - **Billboard rank** indicator or chart movement arrow (up/down/new) - **Duration** (e.g., "3:20") - **Play/Preview** button (small circular play icon) - **Use** button (right edge) — navigates to the sound's detail page or directly to creation - **Favorite** heart icon **Category / Tab Filter** - Tabs or chip filters to switch between chart categories (e.g., "Pop", "Hip-Hop", "Global") **Currently Playing Row** - The row of the actively previewing track is highlighted with an animated waveform icon ### Interactions - Tapping a **row or track title** navigates to the Music Detail page for that track - Tapping the **play icon** on a row previews that track in-place without navigating away - Tapping the **Use button** on a row takes the user directly to the video creation screen with that track pre-loaded - Tapping the **heart** saves the track to "My Sound" favorites - Scrolling reveals more ranked tracks; list may paginate on scroll to bottom ### Sample Data - #1 — "Espresso" · Sabrina Carpenter · 3:06 · ↑ 2 - #2 — "Beautiful Things" · Benson Boone · 3:45 · ↑ 1 - #3 — "Too Sweet" · Hozier · 3:58 · → (stable) - #4 — "BIRDS OF A FEATHER" · Billie Eilish · 3:30 · ↓ 1 - #5 — "Good Luck, Babe!" · Chappell Roan · 3:37 · NEW --- ## Sound Volume / Edit Sheet (Bottom Sheet) ### Overview A bottom sheet overlay that appears during video creation when the user taps to adjust the balance between the original recorded audio and the added background sound, or to trim the sound clip. ### UI Elements **Sheet Handle** (top drag indicator bar) **Title**: "Edit sound" or "Adjust volume" area **Original Sound Row** - Label: "Original sound" (with a small microphone icon) - Horizontal slider: 0–100% volume - Current value label (e.g., "80%") **Added Sound Row** - Label: "Added sound" (with a music note icon); shows the track name below (e.g., "Flowers – Miley Cyrus"), labeled "Added sound" (from `diy`) - Horizontal slider: 0–100% volume - Current value label **Trim / Clip Section** (when applicable) - Label: "Clip" or "Trim" - Waveform strip with two draggable handles for setting the start and end of the sound within the video - Time range indicator (e.g., "0:05 – 0:35") **Action Buttons (bottom)** - "Cancel" button (from `eha`) — dismisses the sheet without saving changes - "Confirm" button (from `f_x`) — applies the volume and trim changes and returns to the creation screen ### Interactions - Dragging the **Original Sound slider** adjusts the volume of the recorded microphone audio in real time; the video preview audio updates live - Dragging the **Added Sound slider** adjusts the background music volume in real time - Dragging either **waveform trim handle** repositions the start or end point; the clip preview jumps to that position - Tapping **Cancel** closes the sheet and reverts all changes - Tapping **Confirm** saves the settings, closes the sheet, and returns to the creation screen with the adjusted audio levels applied ### Sample Data - Original sound slider: 70% - Added sound: "Flowers – Miley Cyrus" slider at 85% - Trim range: 0:08 – 0:38 (30-second clip selected from a 3:20 track) --- # Settings & Privacy — Screen Specifications --- ## Settings (Main Settings Screen) ### Overview The primary settings hub where users manage their TikTok account configuration, privacy, and app preferences through an organized list of categories. ### UI Elements **Header/Toolbar** - Back arrow (←) button on the left - Title: "Settings" centered or left-aligned - No additional toolbar actions **Settings Categories — Scrollable List** Each row is a tappable list item with a label and a right-pointing chevron (›): **Account section:** - "Manage account" — password, username, linked accounts - "Privacy" — visibility, interactions, safety controls - "Security" — two-factor authentication, login activity **Content & Activity section:** - "Push notifications" — notification preferences - "Content preferences" — language, restricted mode - "Digital Wellbeing" — screen time, restricted mode - "Data Saver" — toggle or sub-screen for data usage **Support section:** - "Free up space" / "Clear cache" — shows current cache size - "Report a problem" — feedback form link - "Help Center" — opens in-app browser **About section:** - "Community Guidelines" — opens `https://www.tiktok.com/community-guidelines` - "Privacy Policy" — opens web view - "Terms of Use" — opens web view - "Copyright Policy" — opens web view - "Version" — read-only, displays app version (e.g., "35.4.3") **Footer:** - "Log out" — text button, distinct color (e.g., red or accent) ### Interactions - Tapping any category row navigates to that sub-screen - Tapping "Log out" shows a confirmation dialog ("Log out?" with "Log out" / "Cancel" buttons) - Tapping "Clear cache" shows a confirmation or immediately clears and displays a toast - Tapping legal/policy rows opens an in-app web browser to the corresponding URL - Back arrow returns to the Profile screen ### Sample Data - Version: 35.4.3 - Cache size shown: "235 MB" --- ## Privacy Settings Screen ### Overview Users control who can view their content and interact with them, covering account visibility, interaction permissions, and safety features. ### UI Elements **Header/Toolbar** - Back arrow (←) - Title: "Privacy" **Discoverability section:** - "Private account" — toggle switch (on/off). When on, only approved followers see content - "Suggest your account to others" — toggle switch **Interactions section (each row shows current value and chevron):** - "Who can send you direct messages" — current value: "Everyone" / "Friends only" / "No one" - "Who can comment on your videos" — current value: "Everyone" / "Friends" / "No one" - "Who can duet with your videos" — current value: "Everyone" / "Friends" / "No one" - "Who can stitch your videos" — current value: "Everyone" / "Friends" / "No one" - "Who can view your liked videos" — current value: "Everyone" / "Only me" - "Who can view your following list" — current value: "Everyone" / "Only me" **Safety section:** - "Block" — navigates to blocked users list - "Filter comments" — sub-screen for keyword filtering - "Filter DM requests" — toggle or sub-screen - "Muted accounts" — navigates to muted list **Ads section:** - "Ads personalization" — toggle or sub-screen ### Interactions - Toggling "Private account" immediately updates account visibility; a brief confirmation toast appears - Tapping interaction rows (e.g., "Who can comment") opens a bottom sheet picker with options: "Everyone," "Friends only," "No one" (or subset thereof) - Selecting an option from the picker saves immediately and updates the displayed value on the row - "Block" navigates to Blocked Users list - "Filter comments" navigates to a keyword filter management screen ### Sample Data - Private account: OFF - Who can send DMs: "Friends only" - Who can comment: "Everyone" - Who can duet: "Everyone" - Who can stitch: "Friends" - Liked videos visibility: "Only me" --- ## Privacy Interaction Picker (Bottom Sheet) ### Overview A bottom sheet that slides up when the user taps a "Who can…" privacy row, letting them select from a short list of audience options. ### UI Elements - A drag handle bar at the top center - Title label at top: e.g., "Who can send you direct messages" - List of selectable options, each with: - Option label (e.g., "Everyone", "Friends only", "No one") - Checkmark (✓) icon on the currently selected option - "Cancel" text button or ability to swipe/tap outside to dismiss (string: "Cancel" — `eha`) ### Interactions - Tapping an option immediately selects it (checkmark moves), saves the preference, and dismisses the sheet - Tapping "Cancel" or tapping the backdrop dismisses without saving - The parent Privacy Settings screen row updates to show the newly selected value ### Sample Data Options for "Who can comment on your videos": - ✓ Everyone - Friends only - No one --- ## Account Management Screen ### Overview Users update core account information including username, email, phone number, password, and linked external accounts. ### UI Elements **Header/Toolbar** - Back arrow (←) - Title: "Manage account" **Account info section (tappable rows with current value displayed):** - "Username" — shows current username (e.g., @dancewithme_official) - "Email" — shows masked email (e.g., d•••••@gmail.com) or "Add email" - "Phone number" — shows masked number (e.g., +1 •••-•••-4521) or label "Add phone number" (string: `dt9`) - "Password" — shows "Change" or asterisks **Linked accounts section:** - "Google" — shows linked status (e.g., "Linked" or "Not linked") - "Facebook" — shows linked status - "Apple" — shows linked status - "Twitter/X" — shows linked status **Account control section:** - "Delete account" — destructive action, shown in red/accent ### Interactions - Tapping "Username" opens an edit field in a new screen for changing username with a character counter - Tapping "Email" navigates to email change flow (requires password verification) - Tapping "Phone number" opens phone number addition/change flow with OTP verification - Tapping "Password" navigates to password change screen - Tapping a linked account row either initiates OAuth linking or shows an "Unlink" confirmation dialog - Tapping "Delete account" opens a multi-step confirmation/warning flow ### Sample Data - Username: @dancewithme_official - Email: d•••••@gmail.com - Phone: +1 •••-•••-4521 - Google: Linked - Facebook: Not linked --- ## Digital Wellbeing Screen ### Overview Parents and users configure screen-time management tools, content restrictions, and usage limits. ### UI Elements **Header/Toolbar** - Back arrow (←) - Title: "Digital Wellbeing" **Screen Time Management section:** - "Screen Time Management" — tappable row with chevron; shows current daily limit or "Off" - "Restricted Mode" — toggle switch with description text: "Restrict content that may not be appropriate for all audiences" (string reference: `g64`) **Family Pairing section:** - "Family Pairing" — tappable row with chevron - Sub-description: "Link to a teen's account to manage their TikTok experience" **Scheduled breaks section (if enabled):** - "Scheduled breaks" — tappable row, shows current schedule (e.g., "Every 30 min") or "Off" ### Interactions - Toggling "Restricted Mode" on for the first time prompts a 4-digit passcode setup screen - If Restricted Mode is already on, toggling off prompts passcode entry to confirm - Tapping "Screen Time Management" opens a sub-screen to set daily usage limits - Tapping "Family Pairing" opens QR-code-based pairing flow - Tapping "Scheduled breaks" opens a time interval picker ### Sample Data - Screen Time Management: 2 hours/day limit active - Restricted Mode: OFF - Scheduled breaks: Every 30 minutes --- ## Content Preferences Screen ### Overview Users configure how TikTok personalizes their For You feed and select language preferences for content and the app UI. ### UI Elements **Header/Toolbar** - Back arrow (←) - Title: "Content preferences" **Content language section:** - "Content languages" — tappable row showing currently selected languages (e.g., "English, Spanish") with chevron - Description: "Select languages for videos and captions you'd like to see" **Feed filtering section:** - "Filter video keywords" — tappable row with chevron; shows number of active filters (e.g., "3 keywords") **Video quality section:** - "Data saver" — toggle. When on, loads lower resolution videos. String options from `ai` array: "Data-saving first" / "High-resolution first" **Autoplay section:** - "Autoplay" — toggle for auto-playing the next video ### Interactions - Tapping "Content languages" opens a searchable multi-select list of languages (pulled from the 43-language list in strings: Afrikaans, Bahasa Indonesia, English, Español, etc.) - Tapping "Filter video keywords" opens a keyword blocklist management screen - Toggling "Data saver" immediately applies and shows a brief confirmation toast - Toggling "Autoplay" takes effect immediately ### Sample Data - Content languages: English, Spanish - Active keyword filters: 3 - Data saver: OFF - Autoplay: ON --- ## Notification Settings Screen ### Overview Users manage which push notifications TikTok sends, organized by notification category. ### UI Elements **Header/Toolbar** - Back arrow (←) - Title: "Push notifications" **Activity section (toggle rows):** - "Likes" — ON/OFF toggle - "Comments" — ON/OFF toggle - "Mentions and tags" — ON/OFF toggle - "Followers" — ON/OFF toggle (new followers) - "Direct messages" — ON/OFF toggle **Live section:** - "Live" — ON/OFF toggle (alerts when followed accounts go live) - "Live gifts" — ON/OFF toggle **Updates section:** - "App updates" — ON/OFF toggle - "Trending" — ON/OFF toggle **"Open settings" button** — deep-links to device notification settings if all notifications are disabled (string: `f_y`) ### Interactions - Toggling any switch immediately saves that preference - If all notifications are blocked at the OS level, a banner appears above the list: "Notifications are turned off. Turn on to get updates." with an "Open settings" button (`f_y`) that navigates to device OS settings - Tapping "Open settings" opens the operating system notification permissions screen ### Sample Data - Likes: ON - Comments: ON - Mentions and tags: ON - Followers: OFF - Direct messages: ON - Live: ON - App updates: ON --- ## Clear Cache Confirmation Dialog ### Overview A modal dialog triggered from the Settings main screen asking the user to confirm clearing cached data. ### UI Elements - Dialog title: e.g., "Free up space" - Body text describing the current cache size: e.g., "Clearing your cache will free up 235 MB of space on your device." - Two buttons: - Primary: "Confirm" (string: `f_x`) - Secondary: "Cancel" (string: `eha`) ### Interactions - Tapping "Confirm" clears the cache and shows a brief toast notification confirming success (e.g., "Cache cleared") - Tapping "Cancel" dismisses the dialog with no action - After successful clearing, the settings row updates to show "0 MB" or a much smaller size ### Sample Data - Cache size before clear: 235 MB - Cache size after clear: 1.2 MB --- ## Log Out Confirmation Dialog ### Overview A confirmation dialog triggered when the user taps "Log out" on the Settings main screen. ### UI Elements - Dialog title: "Log out" - Body text: e.g., "Are you sure you want to log out of @dancewithme_official?" - Two buttons: - Destructive primary: "Log out" (red or accent color) - Secondary: "Cancel" (string: `eha`) ### Interactions - Tapping "Log out" signs the user out, clears session data, and navigates to the app's login/onboarding screen - Tapping "Cancel" dismisses the dialog and returns to Settings - On successful log-out, back navigation does not return to the authenticated Settings screen ### Sample Data - Account shown in confirmation: @dancewithme_official --- # Login & Authentication — UI Screen Specifications --- ## Sign Up / Log In Screen (Login & Sign-Up Landing) ### Overview The first screen a new or returning user sees when they need to authenticate; it presents tabs or entry points to either create a new TikTok account or log into an existing one, displayed as a bottom sheet that slides up over the app. ### UI Elements **Bottom Sheet Panel** - A draggable bottom sheet that slides up from the bottom of the screen. On phones in portrait mode the sheet starts at a peeked height and can be dragged to full-screen. On landscape, the sheet has an increased bottom margin. - A thin horizontal drag handle at the top center of the sheet (visual affordance for dragging). **Header Row (inside sheet)** - **Close / Back icon button** (top-left or top-right corner) — an icon (arrow or X) that dismisses the login panel and returns the user to wherever they came from. - **TikTok logo or wordmark** centered in the header area. **Tab Bar** - Two tabs displayed horizontally: - **Log in** — navigates to the log-in flow - **Sign up** — navigates to the sign-up / registration flow - The active tab is underlined or highlighted. **Content Area (below tabs)** - The main content region loads the currently selected tab's content (login form or sign-up options). This area scrolls independently inside the sheet. **Authentication Method Buttons** - A vertical list of sign-in/sign-up options, each as a full-width outlined or filled button with an icon on the left and a label. Typical options (inferred from code references to one-click login, phone/email, and social auth): - **Use phone / email / username** - **Continue with Google** (or other social providers) - **One-click login** (carrier-based, when available) - Each button shows the provider icon on the left and the label centered or left-aligned. **Terms & Privacy Notice** - Small text at the bottom of the sheet: a disclaimer referencing Community Guidelines, Terms of Service, and Privacy Policy, with tappable links inline. - Text reads something like: *"By continuing, you agree to our [Terms of Service] and confirm that you have read our [Privacy Policy] and [Community Guidelines]."* **Loading Dialog** - A non-dismissible spinner dialog that appears on top of the sheet while an authentication action is in progress (e.g., during auto-login or one-click login). - No buttons; the user waits for the result. **Error Toast** - A small floating toast notification that appears at the bottom of the screen when an action fails (e.g., network error). ### Interactions - **Drag sheet upward** → Sheet expands to full screen, revealing more options. - **Drag sheet downward past threshold** → Sheet collapses or dismisses (if the panel is dismissible from the launch context). - **Tap close/back icon** → Records an "exit_method: go_back" event and closes the screen; returns user to the previous context (feed, profile, etc.). - **Tap "Log in" tab** → Switches content area to the log-in form; tab indicator moves to "Log in." - **Tap "Sign up" tab** → Switches content area to the sign-up form; tab indicator moves to "Sign up." - **Tap an authentication method button** → Navigates to the corresponding sub-flow (phone/email entry, Google OAuth, etc.). - **Tap a legal link (Terms / Privacy / Community Guidelines)** → Opens a web view or browser with the relevant policy document (e.g., `https://www.tiktok.com/community-guidelines`). - **Back button (system)** → Logs an "exit_method: go_back" analytics event and dismisses the panel, returning the user to their prior screen. **State changes:** - On successful authentication → loading dialog dismisses, sheet closes, user is taken to the For You feed. - On error → loading dialog hides, an error toast appears briefly at the bottom. - If the app was launched specifically for login (cold boot), dismissal may be blocked depending on entry context (e.g., age gate entry point prevents back-navigation). ### Sample Data ``` Tab 1: Log in | Tab 2: Sign up ────────────────────────────────────── [ 📱 ] Use phone / email / username [ G ] Continue with Google [ ⚡ ] Continue with [Carrier name] By continuing, you agree to our Terms of Service and confirm that you have read our Privacy Policy and Community Guidelines. ``` --- ## Phone / Email / Username Entry Screen ### Overview The user enters their phone number, email address, or username to proceed with logging in or registering, with optional country/region selection for phone entry. ### UI Elements **Header / Toolbar** - **Back arrow** (top-left) — returns to the previous authentication method selection screen. - **Title text** — e.g., *"Enter phone or email"* or *"Log in"* (centered or left-aligned). **Input Field Area** - **Country/Region selector** (visible when phone number mode is active): - Shows the selected country name and its dialing code prefix (e.g., *"United States +1"*). - Tapping opens the country picker. - **Text input field** — full-width, placeholder text such as *"Phone number"*, *"Email address"*, or *"Username"*. - **Mode toggle/tabs** below or above the field: - *"Phone"* and *"Email / Username"* — switching modes changes the input field's keyboard type and placeholder. **Next / Continue Button** - Full-width button at the bottom of the input area (or at the bottom of the screen above the keyboard). - Label: *"Continue"* (string `e7q`). - Disabled (grayed out) until valid input is entered; activates once the field has content. **Legal Notice** - Small text beneath the button referencing Terms of Service and Privacy Policy (same as the landing screen). **Keyboard** - Phone number mode: numeric keypad. - Email/username mode: standard QWERTY keyboard with email suggestions. ### Interactions - **Tap country/region selector** → Opens the Country/Region Picker screen (see below). - **Type in the input field** → Continue button becomes active once the minimum required characters are entered. - **Tap "Continue"** → Validates the input; if valid, navigates to the next step (OTP verification for phone, or password/OTP entry for email). Shows a loading indicator on the button while the network request is in progress. - **Tap back arrow** → Returns to the method selection screen. - **System back** → Same as back arrow. **State changes:** - Invalid phone format → inline error message appears below the input field (e.g., *"Please enter a valid phone number"*). - Network error → toast notification appears: *"Connect to the internet and try again."* (string `epc`). ### Sample Data ``` ← Log in ┌────────────────────────────────────┐ │ 🇺🇸 United States +1 │ │ Phone number │ │ (212) 555-0198 │ └────────────────────────────────────┘ [ Continue ] By continuing, you agree to our Terms of Service. ``` --- ## Country / Region Picker Screen ### Overview A searchable list screen where the user selects their country or region to set the phone dialing code prefix. ### UI Elements **Header / Toolbar** - **Back arrow** (top-left). - **Title**: *"Select country/region"* (string `eqb`). **Search Bar** - Full-width search input at the top of the list. - Placeholder: *"Search"*. - Keyboard opens automatically when the screen appears. **Country List** - A scrollable list of country/region rows. - Each row contains: - **Country flag emoji or image** (left). - **Country name** (e.g., *"Czech Republic"*, string `g1k`) — left-aligned. - **Dialing code** (e.g., *"+420"*) — right-aligned. - Rows are grouped alphabetically with section headers (A, B, C…). - The currently selected country has a checkmark or highlight. **No Results State** - If search yields no match, an empty state message appears: *"No results found"*. ### Interactions - **Type in search bar** → List filters in real time to matching country names. - **Tap a country row** → Selects that country; updates the dialing code shown in the phone entry field; navigates back to the phone entry screen. - **Tap back arrow** → Returns to phone/email entry without changing the selection. ### Sample Data ``` ← Select country/region [ 🔍 Search ] A ────────────────────────────────────── 🇦🇫 Afghanistan +93 🇦🇱 Albania +355 🇩🇿 Algeria +213 C ────────────────────────────────────── 🇨🇿 Czech Republic +420 ``` --- ## Password Entry Screen ### Overview After entering an email or username, the user is prompted to enter their account password to complete login. ### UI Elements **Header / Toolbar** - **Back arrow** (top-left). - **Title**: *"Log in"* or *"Enter password"*. **Email / Username Display** - Read-only text showing the email or username that was entered in the previous step (so the user can confirm they are signing in to the correct account). **Password Input Field** - Full-width text field with obscured characters (dots). - Placeholder: *"Password"*. - **Show/hide password toggle** icon on the right edge of the field (eye icon) — toggles between obscured and plain text. **Forgot Password Link** - Tappable text below the password field: *"Forgot password?"*. **Log In Button** - Full-width button. - Label: *"Log in"*. - Disabled until the password field is non-empty. **Legal Notice** - Small text at the bottom referencing Terms of Service and Privacy Policy. ### Interactions - **Type in password field** → Log In button activates once at least one character is entered. - **Tap show/hide icon** → Toggles password visibility. - **Tap "Forgot password?"** → Navigates to the password reset / account recovery flow. - **Tap "Log in"** → Sends authentication request; shows loading indicator; on success, closes the login sheet and navigates to the For You feed; on failure, shows an inline error message such as *"Incorrect password"* and clears the field. - **Tap back arrow** → Returns to the phone/email/username entry screen. **State changes:** - Wrong password → red error text appears below the field. - Account locked → an informational dialog appears explaining the account status. - Network error → toast: *"Connect to the internet and try again."* ### Sample Data ``` ← Log in alex.johnson@email.com ┌────────────────────────────────────┐ │ ●●●●●●●● 👁 │ └────────────────────────────────────┘ Forgot password? [ Log in ] ``` --- ## OTP / Verification Code Entry Screen ### Overview After the user submits their phone number or email, they receive a one-time verification code and must type it here to confirm their identity. ### UI Elements **Header / Toolbar** - **Back arrow** (top-left). - **Title**: *"Enter verification code"*. **Instruction Text** - Centered or left-aligned text below the header: - For phone: *"We sent a 6-digit code to +1 (212) 555-0198."* - For email: *"We sent a code to alex.johnson@email.com."* **Code Input** - A row of 6 individual character boxes (or a single text field styled as segmented boxes) for entering the OTP. - Auto-advances focus as digits are entered. - Numeric keyboard opens automatically. **Resend Code** - A countdown timer text below the input: *"Resend code in 0:58"*. - Once the timer reaches zero, a tappable *"Resend code"* link appears. **Confirm Button** - Full-width button. - Label: *"Confirm"* (string `f_x`). - Activates automatically once all 6 digits have been entered (or requires manual tap). ### Interactions - **Enter each digit** → Focus moves to the next box automatically; Confirm button activates when all boxes are filled. - **Tap "Confirm"** → Verifies the code with the server; shows a loading indicator; on success, either completes login or proceeds to profile setup; on failure, shows an inline error: *"Incorrect code. Please try again."* - **Tap "Resend code"** (after timer expires) → Re-sends the OTP; resets the countdown timer; briefly shows a toast: *"Code sent"*. - **Tap back arrow** → Returns to the phone/email entry screen. **State changes:** - Expired code → error text: *"This code has expired. Please request a new one."* - Network error → toast: *"Connect to the internet and try again."* ### Sample Data ``` ← Enter verification code We sent a 6-digit code to +1 (212) 555-0198. [ 4 ] [ 2 ] [ 7 ] [ _ ] [ _ ] [ _ ] Resend code in 0:45 [ Confirm ] ``` --- # Effects & Stickers — UI Specification --- ## Effect / Sticker Detail Page ### Overview The user views a specific AR effect or sticker's detail page, where they can preview the effect, see who created it, read usage stats, bookmark it, and launch the camera to record a video using that effect. ### UI Elements **Header / Toolbar** - Back button (arrow icon, top-left) — navigates back to the previous screen. When arriving from a push notification, the back button is replaced with an "X" (close) icon. - Effect/sticker name title — displayed at the top, fades in as the user scrolls; tapping it does nothing. - Edit button (pencil/edit icon, top-right) — visible only if the current user owns the effect and the effect is marked as editable. Tapping it opens the effect editing flow. - Share/options button (top-right area) — opens a share or options sheet. **Effect Preview Area** - A large preview image/thumbnail for the effect — shown prominently near the top of the page. - When the page is in "panel" mode (entered from a bottom sheet / flexible panel), a secondary preview image with a gradient shimmer animation is shown behind or around the primary preview. - Effect title label overlaid on the preview — pulled from the sticker/effect name (e.g., "Butterfly Wings", "Neon Glow"). **Creator Info Row** - Creator avatar (round image, ~28–40 dp) — tapping navigates to the creator's profile page. - Creator username (e.g., "@visual_creator") — tapping also navigates to the creator's profile. - Verified or tag badge next to the username (if applicable). **Stats Row** - Usage count label (e.g., "2.4M uses") — read-only, shown below the creator row. **Variant Selector Grid** - A horizontal or grid view of variant thumbnails (when the effect has multiple variants, e.g., multiple color options or sub-effects). - Each thumbnail is selectable; the selected one is highlighted. - Tapping a thumbnail switches the active variant and updates the preview area. **Bookmark / Favorite Button** - Icon button (bookmark outline when not saved; filled bookmark or colored when saved) with a label below: - Not saved: label reads **"Add to Favorites"** (string `ccl`) - Saved: label reads **"Added to Favorites"** (string `ccu`) - Tapping toggles the saved state. If the user is not logged in, a login prompt appears first. - On successful save (first time), a toast or inline notification appears with an action button labeled **"Added to Favorites"** and a contextual CTA. **"Use Effect" / Record Button** - A prominent button in the lower portion of the header area labeled with the effect name or a generic "Use this effect" call-to-action. - This button is visually dimmed (opacity ~0.34) and disabled when a locked/commerce variant is selected. - Tapping it launches the camera in record mode with the effect pre-applied. **"Create Effect" / Effect House Banner (conditional)** - A large promotional banner that appears for eligible effects (user-created effects from Effect House / AME). Contains: - Background image (loaded from remote URL, with a fallback gradient). - Effect House logo icon (house icon). - Promotional text (e.g., "Create your own effect") — text, color, and size are remotely configurable. - A close (X) button in the corner. Tapping "X" permanently dismisses the banner (stored in preferences). - Tapping the banner body opens a WebView to the Effect House creation page. **Media Filter / Video Style Selector** - A horizontal row of filter/style thumbnails (e.g., "Normal", "Black/White", "Arts", "Vintage", "Retrolux", "Saturated", "Chrome"). - Tapping a filter applies it to the preview. - Hidden by default; revealed via a dedicated toggle button or scrolling. **Videos Tab (scrollable feed below)** - A scrollable list of short videos that used this effect, loaded beneath the header area. - Each video item shows: thumbnail, play icon, like count, username. - Tabs above the video list (when multiple variants exist): - **"Trending"** — shows most popular videos using this effect. - **"Latest"** — shows most recent videos. - Pull-to-refresh is supported on the video feed. **Error / Loading States** - A full-area loading placeholder is shown while data loads. - On network error, an error state UI is displayed with a retry option. Error message: **"Connect to the internet and try again."** (string `epc`). **Progress Indicator** - A modal progress dialog (circular spinner with no label) is shown while the effect is being downloaded before opening the camera. ### Interactions | Element | Action | Result | |---|---|---| | Back / Close button | Tap | Returns to the previous screen | | Creator avatar or username | Tap | Navigates to the creator's profile page | | Variant grid thumbnail | Tap | Switches active effect variant; updates preview image and locked/unlocked state | | Bookmark button | Tap (logged in) | Toggles saved state; updates icon and label; shows "Added to Favorites" confirmation toast | | Bookmark button | Tap (logged out) | Opens login prompt; on success, saves the effect | | "Use Effect" / Record button | Tap | Downloads the effect if needed (shows progress spinner), then opens the camera pre-loaded with this effect | | Effect House banner | Tap body | Opens a WebView to the Effect House / AME creation page | | Effect House banner close (X) | Tap | Permanently hides the banner | | Edit button | Tap | Opens the effect editor for this effect (only visible to the effect's owner) | | Video thumbnail in feed | Tap | Opens the video detail / playback page | | Trending / Latest tab | Tap | Switches the video feed between trending and latest videos | | Pull down on video feed | Swipe down | Refreshes the video feed | | Filter row item | Tap | Applies the selected visual filter style to the preview | | Share/options button | Tap | Opens a bottom sheet with share options | | Title (scrolled into header) | Tap | No action | **Scroll Behavior** - As the user scrolls down, the effect title fades in at the top of the screen. - In panel/sheet mode, the content area resizes dynamically based on scroll offset, and a secondary action bar (with close button) fades in at the top when the user scrolls past a certain threshold. ### Sample Data **Effect name:** "Neon Butterfly" **Creator:** @VisualStudio_Effects **Usage count:** 3.1M uses **Variants:** 4 thumbnails (blue, pink, gold, white) **Trending videos:** 20+ video thumbnails with usernames like @dance.trends, @kpop.edits **Filter options:** Normal · Black/White · Arts · Vintage · Retrolux · Saturated · Chrome **Bookmark state:** Not saved (shows "Add to Favorites") --- ## Effect Picker / Grid Browser (Inline — within Camera or Editor) ### Overview An inline panel (bottom sheet or tab within the camera/editor) showing a browsable grid of available effects and stickers organized by category, where the user selects an effect to apply in real time. ### UI Elements **Search Bar (top)** - Placeholder text: **"Search for an account to mention"** (adapted here to "Search effects…"). - Tapping opens an effect search input. **Category Tabs (horizontal scroll)** - Scrollable tabs at the top of the panel, e.g.: - **Trending** · **Latest** · additional categories (ellipsized as "…") - The active tab is underlined or highlighted. **Effect Grid** - A grid of effect thumbnail cards (3–4 columns). - Each card shows: - Thumbnail preview image or short looping GIF. - Effect name label beneath the thumbnail (truncated if long). - A heart / bookmark icon overlay for favorited effects. - A "NEW" badge for recently released effects. - Long-pressing a card may show a larger preview. - The currently applied effect is visually highlighted with a selection ring or checkmark. **Favorites Section** - A row or section at the top labeled "Favorites" or similar, showing the user's bookmarked effects for quick access. **"No Effect" / Clear Option** - First item in the grid, allowing the user to remove any applied effect and return to the plain camera view. **Download Indicator** - Effects not yet downloaded show a small cloud/download icon overlay on the thumbnail. - While downloading, a circular progress indicator overlays the thumbnail. ### Interactions | Element | Action | Result | |---|---|---| | Category tab | Tap | Switches displayed effect set to that category | | Effect thumbnail | Tap | Applies the effect to the live camera preview immediately | | Effect thumbnail | Long-press | Opens a full-screen preview or the Effect Detail Page | | Bookmark icon on card | Tap | Toggles saved/unsaved; shows confirmation toast | | "No Effect" card | Tap | Removes the current effect; camera returns to unfiltered view | | Search bar | Tap | Opens a search input; user types to filter effects by name | ### Sample Data **Trending effects:** "Neon Butterfly", "Retro Glitch", "Heart Bokeh", "Sky Swap", "Big Eyes", "Cartoon Face" **New badge on:** "Pixel Storm" (released this week) **Downloaded:** 12 of 18 visible effects **User favorites:** 3 effects pinned at the top --- ## Effect Search ### Overview A dedicated search screen where users type to find effects and stickers by name, enabling them to apply an effect or view its detail page. ### UI Elements **Search Input Bar** - Auto-focused text input at the top. - Cancel button (labeled **"Cancel"**, string `eha`) on the right — tapping dismisses search and returns to the previous screen. - Placeholder: "Search effects & stickers". **Search Suggestions / History (before typing)** - Recent search terms shown as chips or list rows. - A "Clear history" option at the bottom of the list. **Search Results Grid** - Same grid layout as the Effect Picker. - Each result card shows: thumbnail, effect name, creator handle, usage count. - No results state: centered message indicating no matching effects were found, with a suggestion to try different keywords. **"Translating…" indicator** - A subtle label (string `dh9`, **"Translating…"**) appears briefly when the app translates a non-English query. ### Interactions | Element | Action | Result | |---|---|---| | Type in search bar | Input | Results update in real time below | | Tap a search result | Tap | Navigates to that effect's Detail Page | | Tap cancel | Tap | Returns to the previous screen (effect picker or camera) | | Tap recent search chip | Tap | Populates the search bar with that term and triggers results | | Clear history | Tap | Removes all recent search terms | ### Sample Data **Recent searches:** "glitter", "cartoon", "eye color" **Top result for "neon":** "Neon Butterfly" — 3.1M uses — @VisualStudio_Effects **Second result:** "Neon Retro Grid" — 850K uses — @retro.vibes --- # Sharing & QR Codes — UI Screen Specifications --- ## Share Sheet (System Share Entry) ### Overview A bottom sheet that appears when a user shares content (video, image, or link) into TikTok from another app, or when TikTok's share flow is triggered, letting the user choose how to share the content within TikTok. ### UI Elements **Bottom Sheet Container** - Slides up from the bottom of the screen - Semi-transparent dark overlay behind it (tap outside to dismiss) - Rounded top corners **Header Area** - Content preview thumbnail (video or image) shown at top of sheet - Title/description of the content being shared (e.g., video title or URL) **Primary Share Destinations — Row of icon buttons, each with a label beneath:** - **Direct Message (DM)** — Share directly to a TikTok conversation - **Post** — Share as a new TikTok post - **Copy Link** — Copies the content link to clipboard; shows a "Copied" toast (string: `fd8 = "Copied"` / `fd_ = "Link copied"`) - **Add to Favorites** — Saves the content; shows confirmation (string: `ccl = "Add to Favorites"` / `ccu = "Added to Favorites"`) **Toolbar / Action Buttons Row (bottom of sheet)** - Icons for: video attachment (`icon_video`), link attachment (`icon_link`), mention (`@`, `icon_at`), emoji picker (`icon_emoji`), image/gallery (`icon_image_alt`), microphone (`icon_microphone`), gift (`icon_gift`) - A "send" or submit button — styled pill/button with an up-arrow icon (`icon_arrow_up_bold`), appears when content is ready to send; disabled state uses secondary text color; max width ~200dp, min width ~46dp **Close / Cancel Button** - "Cancel" label (string: `eha = "Cancel"`) or back gesture dismisses the sheet ### Interactions - Tapping **Direct Message**: navigates to the DM contact picker (if user is logged in) or triggers login flow (if not logged in) - Tapping **Post**: navigates to the TikTok video posting/creation flow - Tapping **Copy Link**: copies the URL to clipboard and shows a brief toast notification "Link copied" - Tapping **Add to Favorites**: toggles favorite state; label changes from "Add to Favorites" → "Added to Favorites" - Tapping the **@ (mention)** icon: opens a contact/user mention search prompt ("Search for an account to mention" — string: `dby`) - Tapping the **emoji icon**: opens the emoji picker panel - Tapping the **image/gallery icon**: opens the device gallery picker - Tapping **Cancel** or the overlay: dismisses the sheet with a slide-down animation - If the user is **not logged in**: tapping any share destination redirects to the login/sign-up screen before proceeding ### State Changes - When content is valid and ready to share, the send button becomes active (colored, enabled) - When a video exceeds 60 seconds, a dialog appears warning the user (cannot share long videos via DM) - If the share request contains an invalid or missing URL/entity, an error toast is shown - "Added to Favorites" / "Removed from Favorites" confirmation toast appears after toggling favorite state (string: `eho = "Removed from Favorites"`) ### Sample Data - Content preview: A 30-second cooking tutorial video by @chef_mike - Description: "The easiest pasta recipe you'll ever make 🍝 #cooking #pasta" - Share destinations shown: DM, Post, Copy Link, Add to Favorites --- ## Direct Message Share — Contact Picker ### Overview A screen where the user selects which TikTok contact(s) to send shared content to via direct message. ### UI Elements **Header / Toolbar** - Back arrow (left side) — navigates back to the share sheet - Title: implied "Send to" or contact search header - Search bar with placeholder text: "Search for an account to mention" (string: `dby`) **Contact List** - Scrollable list of suggested/recent contacts - Each contact row shows: - Circular avatar (profile photo) - Username (bold, primary text color) - Optional verified badge or follower info in secondary text color - Timestamp or last interaction note **Selected Contact Indicator** - Checkmark or highlight on selected contact row **Send Button** - Enabled only after a contact is selected - Label: "Send" or uses the arrow-up icon button from the share toolbar - Located at bottom of screen **Cancel / Back** - String: `eha = "Cancel"` ### Interactions - Typing in the search bar filters the contact list in real time - Tapping a contact row selects that contact (highlighted state) - Tapping the selected contact again deselects them - Tapping **Send**: sends the shared content as a DM and navigates to the conversation (inbox) for that contact; the share sheet activity closes - If the shared video is longer than 60 seconds, a dialog appears before sending: - Title (approximately): "Video too long" - Message: Indicates videos over 60 seconds cannot be shared via DM - Buttons: "Confirm" (string: `f_x = "Confirm"`) and "Cancel" (string: `eha = "Cancel"`) ### State Changes - Send button activates when at least one contact is selected - After successful send, the screen closes and the user is taken to their inbox conversation with the recipient - If sending fails, an error toast appears ### Sample Data - Suggested contacts: @travelwithsarah, @mike_creates, @foodie_jen - Search result for "mike": shows @mike_creates, @mike.art, @mikeofficial --- ## Media Permission Request Dialog ### Overview A dialog that asks the user to grant TikTok access to their device photos and videos before the share flow can proceed. ### UI Elements **Dialog Container** - Modal dialog centered on screen (not a bottom sheet) - Title text: permission rationale heading (e.g., "Allow access to photos and videos") - Body text: explanation of why permission is needed (e.g., "TikTok needs access to your media library to share photos and videos.") - Two buttons: - **Open settings** (string: `f_y = "Open settings"`) — primary action - **Cancel** (string: `eha = "Cancel"`) — secondary/dismissive action ### Interactions - Tapping **Open settings**: navigates the user to the device's app permission settings page for TikTok, then returns to the app on resume - Tapping **Cancel**: dismisses the dialog; the share flow is cancelled and the share sheet closes - On returning from device settings: - If permission was granted: the share flow resumes and the share sheet appears - If permission was still denied: a toast or message confirms failure; share flow does not proceed ### State Changes - If the user grants permission from device settings and returns, the app automatically continues the share flow without requiring manual interaction - If permission is still denied on return, the screen shows a failure state and closes ### Sample Data - Dialog title: "Allow TikTok to access your photos and videos" - Body: "To share media, TikTok needs permission to view your photos and videos." - Primary button: "Open settings" - Secondary button: "Cancel" --- ## Share Error / Failure Toast ### Overview A brief non-blocking notification that slides in near the top or bottom of the screen to inform the user that a share action failed or a warning applies. ### UI Elements **Toast Container** - Horizontally centered, pill-shaped or rounded rectangle - Padding: 16dp horizontal, 12dp vertical - Background: semi-opaque dark (default toast style) - Maximum width: adapts to screen; on landscape uses larger corner radius **Icon (optional)** - Small 18×18dp icon on the left side of the toast (e.g., warning or info icon); hidden when no icon applies **Message Text** - Single line of text in primary white/light color - Examples: - "Couldn't add comment" (string: `f3w = ""Couldn't add comment""`) - "Can't save video with this sound due to copyright regulations." (string: `egr`) - "Link copied" (string: `fd_ = "Link copied"`) - "Added to Favorites" (string: `ccu = "Added to Favorites"`) - "Removed from Favorites" (string: `eho = "Removed from Favorites"`) ### Interactions - Auto-dismisses after ~2–3 seconds - No user interaction required; non-blocking ### State Changes - Appears over current screen content without interrupting navigation - Fades or slides out after the display duration ### Sample Data - Error scenario: User attempts to share a copyrighted audio video externally → toast: "Can't save video with this sound due to copyright regulations." - Success scenario: User copies a link → toast: "Link copied" - Favorites scenario: User saves a video → toast: "Added to Favorites" --- # Special Content & Series — UI Screen Specifications --- ## Series Inner Feed (Series Episode Player) ### Overview The user watches episodes of a short drama / video series in a vertically scrollable full-screen video player, one episode at a time, with series-specific actions and purchase flows layered on top. ### UI Elements **Full-Screen Video Player (Main Content Area)** - Video plays full-screen, auto-advancing or swipe-navigated - Video title / episode description overlaid at the bottom-left - Author avatar (circular, ~40×40 dp) with a thin border ring - Author username (e.g., "@drama_official") in bold white text - Description text (up to 4 lines, with "more" / truncation), white, bottom-left - Hashtag tags rendered as tappable chips (e.g., "#ShortDrama") - Sound name label (e.g., "Added sound — Original Sound") with a spinning disc icon **Right-Side Action Bar (vertical column of icon buttons)** - ❤️ Like button with count (e.g., "124K") - 💬 Comment button with count (e.g., "3.2K") — labeled "Comment" - ↗ Share button with count - ⋯ More / overflow button **Bottom Comment Input Bar** - Text input field: placeholder "Add comment…" - Toolbar icons (left-to-right): @ mention, emoji picker, image attachment, gift (when enabled) - "Post" / send button (activated when input is non-empty) **Series Navigation Header (top area, conditionally visible)** - Back arrow (←) at top-left — labeled "Back" - Series title (e.g., "The Billionaire's Secret — Ep. 3") centered at top - Episode count chip (e.g., "Ep 3 / 24") **Purchase / Paywall Sheet (bottom sheet, appears when locked episode is reached)** - Headline: "Unlock Episode" or series-specific paywall title - Episode thumbnail preview (blurred or locked) - Price and coin bundle options (e.g., "100 Coins — Unlock 1 Episode") - "Confirm Purchase" primary button - "Cancel" text button - Dismissing the sheet returns the user to the last unlocked episode **Favorite Drama Guide Popup (modal overlay, shown once)** - Headline encouraging the user to save the series to their favorites - "Add to Favorites" confirm button - Dismiss / "Maybe Later" option **Toast Notifications** - "Added to Favorites" — appears after favoriting the series - "Couldn't add comment" — on comment post failure - Brief icon + text in a pill-shaped toast at bottom of screen ### Interactions | Action | Result | |--------|--------| | Swipe up | Advance to next episode; video plays automatically | | Swipe down | Return to previous episode | | Tap video | Pause / resume playback | | Tap Like ❤️ | Toggles like state; count animates up/down | | Tap Comment 💬 | Opens comment panel as a bottom sheet from the bottom | | Tap Share ↗ | Opens share sheet with platform options | | Tap author avatar | Navigates to author's profile page | | Tap hashtag chip | Navigates to hashtag feed page | | Tap Back (←) | Returns to previous screen (e.g., series listing or For You feed); no enter/exit transition animation | | Reach a locked episode | Purchase/paywall bottom sheet slides up automatically | | Tap "Confirm Purchase" | Processes coin payment; unlocks episode; sheet dismisses; video resumes | | Tap "Cancel" on paywall | Dismisses sheet; user stays on last unlocked episode | | Tap @ in comment bar | Shows mention-search overlay ("Search for an account to mention") | | Tap emoji icon | Opens emoji picker panel | | Tap image icon | Opens gallery picker ("Select from Gallery") | | Long-press on video | Shows overflow menu (e.g., Report, Not Interested, Share) | **Navigation:** - Back → previous screen the user came from (homepage feed, profile, search result, etc.) - Author avatar → User Profile screen - Hashtag → Hashtag Feed screen - Comment 💬 → Comment panel slides up within the same screen (not a new page) - Share → System share sheet / TikTok share options **State Changes:** - Episode counter in header increments as the user swipes to new episodes - Like button heart fills red when liked, returns to outline when unliked - Paywall sheet blocks upward swipe past the last unlocked episode - After purchase, episode unlocks silently and episode counter updates - "Added to Favorites" toast appears after favoriting ### Sample Data **Series:** "The Billionaire's Secret" **Episode:** Ep 3 / 24 **Author:** @romance_dramas **Description:** "She never expected the CEO to recognize her from that stormy night… 💔 #ShortDrama #RomanceDrama" **Likes:** 218K **Comments:** 14.3K **Shares:** 8.7K **Paywall:** > Unlock Episode 10 > Continue watching "The Billionaire's Secret" > 🪙 80 Coins — Unlock 1 Episode > 🪙 350 Coins — Unlock 5 Episodes (Save 12%) > [Confirm Purchase] [Cancel] **Favorite Drama Popup:** > "Save this series to watch more later!" > [Add to Favorites] [Maybe Later] --- ## Video Detail / Single Video Player ### Overview The user views a single video full-screen, with all engagement controls, creator info, and sound details visible — this is the standard detail page reached by tapping any video in any feed. ### UI Elements **Full-Screen Video Area** - Video fills the entire screen, loops automatically - Progress bar (thin line) at the very bottom edge of the video **Creator Info Panel (bottom-left overlay)** - Circular avatar (40 dp) with optional "+" follow badge if not following - Username in bold white (e.g., "@creativechef") - Video description text (up to 4 lines); tap "more" reveals full text - Trending / sponsored tag pill (e.g., labeled with a border and small text for brand content) - Music disc icon + scrolling sound name (e.g., "♫ Original Sound — creativechef") **Right-Side Action Bar** - ❤️ Like — count label below icon (e.g., "45.2K"); fills red when liked - 💬 Comment — count label (e.g., "1.8K"); labeled "Comment" - ↗ Share — opens share options - 🔖 Bookmark / "Add to Favorites" — labeled "Add to Favorites" / "Added to Favorites" - ⋯ More **Top Navigation** - "Back" (←) button at top-left - Centered page title (e.g., "Videos" or context-dependent like "Following") **Comment Panel (bottom sheet)** - "Comment" header with count - Comment list — each item: avatar, username, comment text, like count, timestamp, reply option - Pinned comment (if any) at top with a "Pinned" badge - Input bar at bottom: placeholder text, @ mention, emoji, image, gift icons - "Discard" option if user abandons a draft comment (dialog: "Discard last clip?") **Share Sheet (bottom sheet)** - Row of platform icons: Messages, Instagram, WhatsApp, Twitter/X, Copy Link, etc. - "Copy Link" — labeled "Link copied" toast on tap - "Save Video" — attempts download; shows "Downloading..." toast; may show "Can't save video with this sound due to copyright regulations." **More / Overflow Menu** - "Block" — labeled "Block" - "Delete" — labeled "Delete" (only if own video) - "Report" — reporting flow - "Not Interested" - "Find friends" - "Restricted Mode" indicator ### Interactions | Action | Result | |--------|--------| | Tap video | Pause / resume | | Swipe up | Next video in the feed | | Swipe down | Previous video | | Tap ❤️ Like | Toggles; animates heart; count updates | | Tap 💬 Comment | Comment bottom sheet slides up | | Tap "Add to Favorites" 🔖 | Toast: "Added to Favorites"; icon state changes | | Tap "Added to Favorites" again | Toast: "Removed from Favorites" | | Tap ↗ Share | Share bottom sheet appears | | Tap "Copy Link" | Toast: "Link copied" | | Tap ⋯ More | Overflow action sheet | | Tap "Block" | Confirmation flow; creator removed from feed | | Tap "Delete" | Confirmation dialog: [Delete] [Cancel] | | Tap Back | Returns to previous feed (no transition animation for series context) | | Tap music disc | Opens Sound / Music detail page | | Tap author avatar | Opens User Profile | | Tap hashtag in description | Opens Hashtag feed | | Comment: tap Send | Posts comment; optimistic UI shows it immediately | | Comment: tap Reply | Indented reply input with "@username" pre-filled | | Comment: tap Like on a comment | Animates heart; count updates | **State Changes:** - Like count animates when toggled - "Add to Favorites" ↔ "Added to Favorites" label toggles - Comment count increments after posting - Video progress bar advances; loops back to 0 on repeat ### Sample Data **Video by:** @creativechef **Description:** "5-minute pasta that slaps every time 🍝🔥 #cooking #easyrecipes #pasta" **Sound:** ♫ "Italian Kitchen Vibes" — creativechef **Likes:** 45.2K **Comments:** 1.8K **Shares:** 3.4K **Favorites:** 12.1K **Top comment:** > @foodlover99 · 2h > "Made this last night, my family is obsessed 😭❤️" > 4.2K ❤️ [Reply] --- # Kids Mode UI Specification --- ## Kids Mode Home (Main Feed) ### Overview The child-facing home screen shows a curated, age-appropriate video feed with a bottom tab bar for navigating between sections. ### UI Elements **Bottom Tab Bar** — 4 to 5 tabs, always visible at the bottom: - **Home** (hot feed / recommended videos) — default selected tab on launch - **Discover** — browse/explore content - **Create / Publish** (camera/plus icon) — tap to start recording a new video - **Liked** — videos the child has liked - **Profile** (personal homepage) — the child's own profile **Video Feed Area** (Home tab): - Full-screen, vertically scrollable video feed - One video at a time, auto-plays - Video title/description text overlaid at bottom-left - Like button (heart icon) on the right side panel - Comment button on the right side panel - Share button on the right side panel - Author avatar and username overlaid on the video **Status Bar / Immersion**: - App runs in full-screen/immersive mode - Status bar icons adapt to video background (light or dark tint depending on current tab) ### Interactions - **Swipe up** — advances to next video - **Swipe down** — goes back to previous video - **Double-back press to exit**: first back press shows a toast; second press within 2 seconds exits the app - **Tap Home tab while already on Home** — refreshes/scrolls back to top and re-triggers the feed - **Tap Discover tab** — navigates to the Discover/Explore screen - **Tap Create tab** — opens the camera/recording screen directly (labeled "direct_shoot" internally); launches the video creation flow - **Tap Liked tab** — navigates to the Liked Videos screen - **Tap Profile tab** — navigates to the child's personal profile page ### Sample Data - **Video 1**: "How to draw a cartoon dog 🐶" by @artteacher_kids — 24K likes - **Video 2**: "Easy science experiment at home 🔬" by @scienceforkids — 8.2K likes - **Video 3**: "#DanceChallenge for kids 💃" by @kidsdance — 51K likes --- ## Kids Mode Discover / Explore ### Overview The Discover tab lets children browse trending topics, hashtags, and recommended content in a grid or list format. ### UI Elements **Search Bar** at the top: - Placeholder: "Search for an account to mention" (or generic search) - Tapping opens a search input **Trending / Latest Tabs** (horizontal pill tabs near top): - "Trending" - "Latest" - Additional category tabs may appear (e.g., "Cars" based on string arrays) **Content Grid / Feed**: - Rows of video thumbnails (2–3 columns) - Each thumbnail shows: video cover image, view count (e.g., "24K views"), creator username - Hashtag cards (e.g., #TikTok, Hashtags section) **Category Labels** (if present): - Horizontal scrollable chip row: e.g., "Cars", etc. ### Interactions - **Tap search bar** — opens search input with keyboard; user can type a query - **Tap a video thumbnail** — opens the video in a full-screen player - **Tap a hashtag** — navigates to hashtag video feed - **Tap "Trending" / "Latest"** — switches between sorted content lists - **Scroll down** — loads more content ### Sample Data - Trending: #LearnOnTikTok, #ScienceExperiment, #DrawWithMe - Search suggestion: "artteacher" - Video thumbnails: "Rainbow slime DIY", "Baby animals compilation", "Kids cooking pasta" --- ## Kids Mode Liked Videos ### Overview Shows a grid of all videos the child has previously liked, so they can easily re-watch favorites. ### UI Elements **Header / Toolbar**: - Back arrow (left) to return to the previous screen - Title: "Liked" (or heart icon) **Video Grid**: - 2–3 column thumbnail grid - Each tile: video thumbnail, view count or like count overlay - Empty state: friendly illustration + message if no liked videos yet **No Content State** (if empty): - Illustrated icon - Text: "Videos you like will appear here" ### Interactions - **Tap a video** — opens it in full-screen playback - **Tap back arrow** — returns to the Home tab - **Scroll** — loads more liked videos ### Sample Data - "Puppy training tips 🐾" — 3.1K views - "Easy origami butterfly ✂️" — 910 views - "Funny cat moments 😂" — 12K views --- ## Kids Mode Personal Profile ### Overview Displays the child's own profile: their avatar, username, stats (following, followers, likes), and their posted videos. ### UI Elements **Profile Header**: - Avatar / profile photo (circular, large) - Display name (e.g., "KidsUser123") - Username (e.g., "@kidsuser123") - Stats row: Following count · Followers count · Likes count - Edit Profile button (if allowed in Kids Mode) **Video Grid** (below stats): - 3-column grid of the child's own posted videos - Each tile: thumbnail, play count - Empty state if no videos posted: "No videos yet" **Tab Row** (below stats, if multiple sections): - "Videos" tab (default) - May include "Liked" sub-tab ### Interactions - **Tap avatar / Edit Profile** — opens profile editing if permitted by Kids Mode settings - **Tap a video tile** — opens that video in full-screen playback - **Tap Following / Followers count** — may be restricted in Kids Mode - **Tap back** — returns to previous screen ### Sample Data - Name: Emma T. - Username: @emma_draws - Following: 5 | Followers: 12 | Likes: 47 - 3 posted videos: "My art project", "Dancing with my dog", "Cake decorating" --- ## Kids Mode Drafts ### Overview Accessible from the personal profile or a dedicated tab, showing video drafts the child has saved but not yet published. ### UI Elements **Header**: - Back arrow - Title: "Drafts" **Draft Video Grid**: - 2–3 column thumbnail grid - Each tile: video thumbnail, "Draft" label badge, creation date - Delete button (trash icon) accessible via long-press or swipe **Empty State**: - Illustration + text: "Your drafts will appear here" **Delete Confirmation Dialog** (triggered on delete tap): - Message: "Discard?" or "Delete?" - Buttons: "Delete" | "Cancel" ### Interactions - **Tap a draft** — opens video editor to continue editing the draft - **Delete a draft** — shows confirmation dialog; on confirm, removes draft from list; the app navigates back to the profile/homepage tab - **Confirm delete** (dialog): removes the draft; navigates to personal profile tab - **Cancel delete** (dialog): dismisses dialog, draft remains ### Sample Data - Draft 1: "My morning routine" — saved 2 days ago - Draft 2: "Art tutorial part 2" — saved 1 week ago --- ## Kids Mode Screen Time Notification (Screen Time Break Popup) ### Overview A parental-control popup that appears when the child's allowed screen time is up or a scheduled break is due, interrupting the viewing session. ### UI Elements **Dimmed Background Overlay** — covers the entire screen **Center Card / Bottom Sheet**: - Illustration (e.g., a clock or rest icon) - Title: e.g., "Time for a break!" - Body text: explains the screen time limit has been reached - **OK / Snooze** button — primary action - **Edit** button (smaller, secondary) — allows the parent to modify screen time settings (requires parental PIN) **Error State** (if screen time service fails): - Error message text - Retry or dismiss button ### Interactions - **Tap OK / Snooze** — dismisses the popup and either locks the app or grants a short extension (depending on parental settings) - **Tap Edit** — prompts for a parental passcode, then opens Screen Time settings - **Cannot dismiss by tapping outside** — the overlay is blocking; only the provided buttons dismiss it ### Sample Data - Title: "Time's up for today!" - Body: "You've reached your screen time limit. Come back tomorrow!" - Button: "OK" --- ## Kids Mode Parental PIN Entry ### Overview A secure code-entry screen that appears when a parent needs to verify identity to access Kids Mode settings or override controls. ### UI Elements **Header**: - Title: e.g., "Enter passcode" - Back / close button (top-left or top-right) **PIN Input Area**: - Row of 4–6 circular dot indicators (filled as digits are entered) - Numeric keypad (0–9) below the dots - Delete / backspace key **Math Challenge** (optional alternate verification for screen time setup): - A simple arithmetic question displayed (e.g., "What is 4 + 3?") - Number input field for the answer - "Submit" button **Error State**: - Red shake animation on the dots - Text: "Incorrect code. Try again." - After multiple failures: "Too many attempts. Please try again later." ### Interactions - **Tap a digit** — fills one dot; auto-submits when all digits entered - **Tap delete** — removes last entered digit - **Correct PIN** — navigates to Kids Mode Settings - **Incorrect PIN** — shows error, clears input, allows retry - **Tap back** — cancels and returns to previous screen without granting access ### Sample Data - Math challenge: "What is 6 + 2?" → Answer: 8 - PIN: 4-digit numeric code set by parent --- ## Kids Mode Settings (Parental Controls) ### Overview Parent-accessible settings screen (unlocked via PIN) where parents configure Kids Mode options including screen time, content restrictions, and account preferences. ### UI Elements **Header**: - Back arrow - Title: "Restricted Mode" or "Kids Mode Settings" **Settings Sections** (grouped list): *Account & Safety*: - "Account and safety" row → navigates to account settings *Content & Wellbeing*: - "Digital wellbeing" row → screen time and usage controls - "Restricted Mode" toggle — enables/disables content filtering - "Data Saver" toggle *Screen Time*: - Current daily limit display (e.g., "60 minutes per day") - "Edit screen time" row → opens time limit configuration - "Scheduled breaks" row → configure break intervals *Support*: - "Feedback and help" row - "Community Guidelines" row → opens https://www.tiktok.com/community-guidelines - "Privacy Policy" row - "Terms of Use" row - "Safety Center" row *Account Actions*: - "Log out" row (red text) - "Clear cache" row **Bottom**: App version text (e.g., "TikTok v34.x.x") ### Interactions - **Tap any row** — navigates to that subsection or opens a toggle - **Toggle Restricted Mode** — immediately applies content filtering - **Tap "Log out"** — shows confirmation dialog: "Are you sure you want to log out?" with "Confirm" | "Cancel" - **Tap "Clear cache"** — shows confirmation; clears cached data - **Tap "Community Guidelines"** — opens in-app browser to https://www.tiktok.com/community-guidelines - **Tap back** — returns to Kids Mode home ### Sample Data - Screen time: 45 min/day used of 60 min limit - Restricted Mode: ON - Data Saver: OFF --- # Web & Hybrid Pages — UI Specification --- ## In-App Web Page (Spark/Hybrid Page Viewer) ### Overview A full-screen in-app browser/hybrid renderer that displays TikTok's internal web pages, mini-apps, and hybrid Lynx/WebView content — used for features like the TikTok Shop, creator tools, donation pages, community guidelines, privacy policy, OBS intro, and other web-based flows accessed from within the app. ### UI Elements **Status Bar Area** - Adapts dynamically: can be transparent, hidden, or colored depending on the page being loaded. - Status bar icons (time, battery, signal) may appear in light or dark style depending on the page's theme. - Navigation bar at the bottom of the screen may also be transparent or colored to match the page. **Content Area (Full Screen)** - The web/hybrid page occupies the full screen by default. - A **loading state** is displayed while the page content is being fetched and rendered: - Background color may match the page's declared loading background color (e.g., white, dark, or a custom hex color). - A loading indicator (skeleton screen or progress animation) may appear during load, unless disabled for the specific page. - The rendered page content fills the viewport once loaded. Content types include: - TikTok Shop product pages (e.g., `https://inapp.tiktokv.com/...`) - OBS setup / streaming intro pages - Donation creation pages - Legal pages (Community Guidelines, Privacy Policy, Terms of Use) - Creator Studio download page - AI-generated content pages - Live gifting and wallet pages **Progress Bar** (optional, per-page configuration) - A thin horizontal progress bar at the top of the content area indicating page load progress. - Only shown when the specific page opts into it; hidden by default. **Error State** (when page fails to load) - Displays an error message when the page cannot be loaded (e.g., no internet connection). - Error text: **"Connect to the internet and try again."** - Retry button or back option may appear. - Some pages suppress the error UI entirely (configured per-page). **Navigation Controls** - **Back gesture / hardware back button**: Pressing back navigates the page back within the web content's own history if applicable, or closes the page and returns to the previous TikTok screen. - Some pages block the back button programmatically (e.g., checkout flows, onboarding flows), preventing the user from navigating away until they complete or dismiss the flow. - The back action fires a **"Back"** event to the page before closing, allowing the page to handle it. **Keyboard / Input Handling** - When the user taps a text input within the web page, the native keyboard appears. - The page layout adjusts to accommodate the keyboard height, ensuring input fields remain visible. - The page receives keyboard show/hide events with the keyboard height. **Close Button** (optional, per-page) - Some pages render a close (×) button within their own web UI. - Tapping it dismisses the page and returns to the previous TikTok screen. **"Close All" Option** (optional, per-page) - Certain pages (e.g., multi-step checkout flows) may show a "Close All" option that dismisses the entire web page stack, not just a single page. ### Interactions | User Action | Result | |---|---| | Taps a link inside the page | Navigates within the web page (new URL loads in the same container) | | Presses back (hardware or swipe) | Goes back in page history, or closes the in-app browser and returns to TikTok | | Taps a text field | Native keyboard appears; page scrolls/adjusts to keep field visible | | Page fails to load | Error state shown: "Connect to the internet and try again." | | Page loads successfully | Loading indicator fades away; rendered content appears | | Taps an in-page "Close" button | Dismisses the in-app browser; returns to TikTok | | Rotates device (landscape) | Page reflows to landscape layout; status/nav bar behavior may change | | Taps a payment or checkout button | May open a new page within the same container or navigate to a system payment flow | ### State Changes - **Loading → Loaded**: Loading background and skeleton disappear; page content becomes visible. - **Focused input field**: Keyboard slides up; visible display frame shrinks; page content compresses or scrolls above keyboard. - **Keyboard dismissed**: Page layout returns to full-screen state. - **Back blocked** (e.g., during checkout): Back press is swallowed; page may animate or display a confirmation dialog instead of closing. - **Theme change** (light/dark): Status bar icon tint, navigation bar color, and status bar background update to match the page's declared theme. ### Sample Data - **TikTok Shop product page**: A seller's item listing for "Wireless Earbuds Pro – $29.99" rendered as a scrollable web page with product images, description, reviews, and "Add to Cart" button. - **Community Guidelines page**: `https://www.tiktok.com/community-guidelines/` rendered in a full-screen in-app browser with TikTok's standard legal formatting. - **OBS Studio intro page**: An animated instructional page at `https://inapp.tiktokv.com/falcon/webcast_mt/page/obs_intro/index.html` explaining how to connect OBS for live streaming. - **Donation creation page**: `https://inapp.tiktokv.com/tpp/inapp/pns_product_poseidon/donation-creation.html` — a form for setting up live donation options. - **Creator Studio download**: `https://www.tiktok.com/studio/download` rendered in full-screen with a download CTA. --- ## Authorized / OAuth Web Page ### Overview A dedicated page that handles third-party OAuth authorization requests, allowing external apps or services to request permission to access a user's TikTok account data. ### UI Elements **Full-Screen Web Content Area** - Renders a TikTok-branded authorization page inside a hybrid web container. - Displays the name and icon of the third-party app requesting access. - Lists the permissions the third-party app is requesting (e.g., profile info, video list, follower count). - Two primary action buttons: - **"Agree"** — grants the requested permissions - **"Cancel"** — denies the request and closes the page **Status Bar** - Displayed in light or dark mode depending on system/app theme. **Loading State** - A loading indicator while the authorization page content fetches from TikTok's servers. **Error State** - If the authorization URL is invalid or the network is unavailable, an error message appears. ### Interactions | User Action | Result | |---|---| | Taps **"Agree"** | Permissions are granted; page sends a success callback to the requesting app; view closes and returns to TikTok | | Taps **"Cancel"** | Authorization is denied; view closes and returns to TikTok or the referring app | | Presses back | Same as tapping "Cancel" — authorization is denied and the user returns to TikTok | | Page fails to load | Error state is shown; user can retry or go back | ### Sample Data - **Requesting app**: "MyBrand Analytics Tool" - **Permissions requested**: - View your TikTok profile and username - View the list of videos you've posted - View your follower and following counts - **Agree** / **Cancel** buttons displayed prominently at the bottom of the page. --- Based on my analysis of the provided source code, all of the files in this "Other" feature area are purely internal infrastructure components — not user-facing screens. Here is what each component actually is: - **AwemeAuthorizedActivity** — A theme-applying authorization trampoline that has no UI layout (`setContentView` is never called). It exists solely to apply the correct app theme and is never directly seen by users. - **RedirectUriReceiverActivity** — An OAuth redirect handler (from the AppAuth library). It receives a deep-link URI, immediately forwards it to the authorization management flow, and calls `finish()`. No UI is shown. - **BwaRedirectUriReceiverActivity** — A Buy-with-Amazon OAuth redirect receiver. It reads `code`, `state`, and `error` parameters from the incoming URI and immediately calls `finish()`. No UI is displayed. - **BaseActivity / BaseViewModel** — Abstract base classes used internally by all activities. Not a screen. - **Covode, TryCatchGuardChecker, EnterTransitionCrashOptimizer** — Crash monitoring and code-coverage infrastructure. No UI. - **RouterPageMonitor / RouterMonitor / RouterPageEventDispatcher** — Internal navigation/routing telemetry system. No UI. - **NxRewordManager / NxResourceUtils** — Runtime locale/resource-switching infrastructure. No UI. - **SmartIntent** — A wrapper around Android `Intent` with type-safe extra parsing. No UI. - **ActivityAgent / PageShowCallback / AutoPageTraceHelper / InstructOperationSwitch** — APM (Application Performance Monitoring) instrumentation hooks. No UI. - **UriProtector** — A utility that safely parses URIs with crash protection. No UI. **None of the source files in this feature area produce user-facing screens.** They are all plumbing-level infrastructure components: OAuth redirect handlers (which are invisible by design, showing no UI before calling `finish()`), internal routing and monitoring frameworks, crash-protection utilities, and base classes. There are no layouts, dialogs, or user-interactable surfaces to specify.