🎬 Reels Features

Reels are TikTok-style short-form videos that allow users to watch, interact with, and share vertical video content.

✨ Overview

XHub Chat's Reels system provides:

• 📱 Infinite Scroll Feed - Endless scrolling to watch videos continuously
• 🎥 Video Player - Play videos with full controls
• 💬 Comments - Real-time comments and interactions
• ❤️ Likes & Reactions - Like and react to reels
• 🔄 Pagination - Auto-load more reels
• ⚡ Performance - Optimized memory with EphemeralStore

📚 Key Features

Feed & Discovery

• Reels Feed - Display reels list with infinite scroll
• My Reels - Manage and display user's own reels
• Load More - Auto-load more reels on scroll
• Refresh Feed - Refresh reels list

Player & Interaction

• Reel Player - Play video with Room instance
• Comments - View and send comments
• Likes & Views - Like and view counts

🎯 Use Cases

Social Media Feed

// TikTok-style vertical feed
<ReelsFeed autoPlay infiniteScroll />

User Profile

// Grid view của reels người dùng
<UserReelsGrid userId="@user:server.com" />

Discover Page

// Khám phá reels mới
<DiscoverReels category="trending" />

🏗️ Architecture

EphemeralStore

Reels are stored in memory (not persisted to IndexedDB) for optimal performance:

// Reels only exist in current session
const reelsStore = client.getReelsStore();
const rooms = await reelsStore.getSavedRooms();

Virtual Rooms

Each reel is a virtual room with category 'reel':

// Auto-generated room ID
const roomId = `reel_${reelId}`;

🎨 Supported Platforms

• @xhub-chat/core - Core APIs and client methods
• @xhub-chat/react - React hooks optimized for Reels

📖 Getting Started

Get started with Reels Feed →