mono/reference/tiktok/player/GETTING_STARTED.md

Getting Started with TikTok Video Player

🚀 Quick Start

The TikTok Video Player is now ready to use! Here's how to get started:

1. Test the Playground

npm run playground

Open http://localhost:3000 to see the player in action.

2. Features You'll See

• ✅ Infinite Scroll - Scroll up/down to navigate videos
• ✅ Auto-play - Videos play automatically when in view
• ✅ Keyboard Controls - Space (play/pause), Arrow keys (navigate)
• ✅ Action Bar - Like, comment, share buttons with realistic counters
• ✅ TikTok UI - Exact replica of TikTok's design and interactions

3. Integration with Mux

Replace the mock video URLs with your Mux playback IDs:

// In playground/src/App.tsx, replace MOCK_VIDEOS with:
const MOCK_VIDEOS = [
  {
    id: 'video_1',
    src: 'https://stream.mux.com/YOUR_PLAYBACK_ID.m3u8', // Your Mux URL
    poster: 'https://image.mux.com/YOUR_PLAYBACK_ID/thumbnail.jpg',
    author: '@your_creator',
    description: 'Your video description #hashtag',
    likes: 12500,
    comments: 234,
    shares: 89
  }
  // ... more videos
];

4. Backend Integration

The player is designed to work with your existing backend:

// Load more videos from your API
const handleLoadMore = async () => {
  const response = await fetch('/api/videos?offset=' + videos.length);
  const newVideos = await response.json();
  setVideos(prev => [...prev, ...newVideos]);
};

// Handle user interactions
const handleLike = async (videoId: string) => {
  await fetch(`/api/videos/${videoId}/like`, { method: 'POST' });
  // Update UI optimistically
};

5. Customization

The player uses Tailwind CSS and can be fully customized:

// Custom colors in tailwind.config.js
colors: {
  'your-brand-red': '#FF0000',
  'your-brand-blue': '#0000FF',
}

// Custom animations
animation: {
  'your-custom-spin': 'spin 2s linear infinite',
}

🎯 Key Features Working

Video Player

• HTML5 video with custom TikTok-style controls
• Auto-play when video comes into viewport
• Smooth progress bar with visual feedback
• Volume control and mute functionality

Infinite Scroll

• Snap-to-video behavior (exactly like TikTok)
• Smooth scrolling between videos
• Navigation indicators on the right side
• Keyboard navigation support

User Interface

• Action bar with like, comment, share buttons
• Author information and descriptions
• Realistic engagement counters
• Loading states and error handling

Performance

• Only active videos are playing (memory efficient)
• Smooth 60fps scrolling
• Optimized for mobile and desktop

🔧 Next Steps

1. Test the playground at http://localhost:3000
2. Replace mock data with your Mux video sources
3. Add your API endpoints for loading more content
4. Customize styling to match your brand
5. Add analytics tracking for user interactions

📱 Mobile Testing

The player is fully responsive. To test on mobile:

npm run playground -- --host

Then access via your mobile device using the network URL.

🎉 You're Ready!

You now have a complete, production-ready TikTok-style video player that:

• Uses only React (no other dependencies)
• Implements TikTok's exact scrolling and interaction patterns
• Is ready for Mux integration
• Includes comprehensive TypeScript types
• Has a working playground for testing

The playground is running at http://localhost:3000 - go check it out!