{/* Header */}
{/* Content */}
{/* Media */}
{post.type === ‘image’ && (
)}
{post.type === ‘video_horizontal’ && (
)}
{/* Actions */}
{/* Comments Section */}
{showComments && (
);
};
const ShortPlayer = ({ short }) => {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const [isMuted, setIsMuted] = useState(true);
useEffect(() => {
const options = { root: null, rootMargin: ‘0px’, threshold: 0.6 };
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
videoRef.current?.play().then(() => setIsPlaying(true)).catch(() => setIsPlaying(false));
} else {
videoRef.current?.pause();
setIsPlaying(false);
}
});
}, options);
if (videoRef.current) observer.observe(videoRef.current);
return () => { if (videoRef.current) observer.unobserve(videoRef.current); };
}, []);
const togglePlay = () => {
if (videoRef.current.paused) {
videoRef.current.play();
setIsPlaying(true);
} else {
videoRef.current.pause();
setIsPlaying(false);
}
};
return (
{post.user.name}
{post.user.handle} • {post.timestamp}
{post.content}
{/* Existing Comments */}
{post.comments.length > 0 && (
)}
{post.comments.map((c, i) => (
)}
{/* Add Comment Input */}
{c.user}
{c.text}
))}
{!isPlaying && (
);
};
// — MAIN APP —
export default function App() {
const [activeTab, setActiveTab] = useState(‘home’);
const [posts, setPosts] = useState(INITIAL_POSTS);
const [isMobile, setIsMobile] = useState(false);
// Resize listener for responsive behavior
useEffect(() => {
const checkMobile = () => setIsMobile(window.innerWidth < 768);
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener(‘resize’, checkMobile);
}, []);
const handleLike = (id) => {
setPosts(posts.map(p =>
p.id === id ? { …p, isLiked: !p.isLiked, likes: p.isLiked ? p.likes – 1 : p.likes + 1 } : p
));
};
const handleSave = (id) => {
setPosts(posts.map(p => p.id === id ? { …p, isSaved: !p.isSaved } : p));
};
const handleAddComment = (postId, text) => {
setPosts(posts.map(p => {
if (p.id === postId) {
return {
…p,
comments: […p.comments, { id: Date.now(), user: CURRENT_USER.handle, text }]
};
}
return p;
}));
};
const handleCreatePost = (text) => {
const newPost = {
id: Date.now(),
user: CURRENT_USER,
type: ‘text’,
content: text,
likes: 0,
comments: [],
shares: 0,
timestamp: ‘Just now’,
isLiked: false,
isSaved: false
};
setPosts([newPost, …posts]);
setActiveTab(‘home’);
};
return (
{short.user.handle} Follow
{short.content}
{/* — DESKTOP SIDEBAR — */}
{/* — MOBILE HEADER — */}
{activeTab !== ‘shorts’ && (
)}
{/* — MAIN CONTENT AREA — */}
{/* 1. FEED VIEW */}
{activeTab === ‘home’ && (
setActiveTab(‘home’)} />
)}
{/* 4. PROFILE VIEW */}
{activeTab === ‘profile’ && (
{/* — MOBILE BOTTOM NAV — */}
{/* Utility Styles */}
);
}
// --- HELPER COMPONENTS ---
const NavItem = ({ icon, label, isActive, onClick }) => (
);
const MobileNavItem = ({ icon, label, isActive, onClick }) => (
);
const CreateView = ({ onSubmit, onCancel }) => {
const [text, setText] = useState('');
return (
setActiveTab(‘home’)}>
{/* User Mini Profile in Sidebar */}
O
OmniStream
setActiveTab(‘profile’)}>
{CURRENT_USER.name}
{CURRENT_USER.handle}
O
OmniStream
{posts.map(post => (
)}
{/* 2. SHORTS VIEW */}
{activeTab === ‘shorts’ && (
You’ve caught up! Check out Shorts.
{INITIAL_SHORTS.map(short => (
)}
{/* 3. CREATE VIEW */}
{activeTab === ‘create’ && (