{flashOverlay && (

)} {uploading && (

setUploading(false)} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.85)', zIndex: 9998, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 20, cursor: 'pointer' }}>

UPLOADING...

TAP TO DISMISS

)} {uploadError && (

{uploadError}

)}

SHOW
&TELL

{[ { label: 'CLIPS', val: (clips || []).length }, { label: 'VOTES', val: totalReactions, color: ACCENT }, { label: 'PEOPLE', val: (memberList || []).length } ].map((stat, i) => (

{stat.label}

{stat.val}

))}

{(clips || []).map((clip, index) => { const clipVideoUrl = getClipVideoUrl(clip); const hasMedia = clip?.imageUrl || clipVideoUrl; return (

{clipVideoUrl && (

{clip?.title || 'UNTITLED'}

{ const h = clip?.authorHandle; if(h && typeof openProfile === 'function') openProfile(h); }} style={{ cursor: 'pointer' }}>

POSTED • {clip?.createdAt ? new Date(clip.createdAt).toLocaleString([], {month:'short', day:'numeric', hour:'numeric', minute:'2-digit'}).toUpperCase() : 'JUST NOW'}

{clip?.authorAvatar ? ( avatar

) : (

{(clip?.authorName || 'A').charAt(0).toUpperCase()}

)}

{clip?.authorName || 'ANON'}

{clip?.reactions || 0}

VOTES

{['🔥', '🤯', '😂', '❤️', '👏'].map(emoji => { const reactions = clip?.emojiReactions || {}; const users = reactions[emoji] || []; const count = (users || []).length; const iReacted = user?.id && (users || []).includes(user.id); return ( ); })}

); })}

{showMediaPicker && (

setShowMediaPicker(false)}>

e.stopPropagation()} style={{ background: DARK, width: '100%', padding: '32px 24px calc(32px + env(safe-area-inset-bottom, 20px))', animation: 'slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1)' }}>

ADD A CLIP

{hasVideo && ( )}

FROM GALLERY

{hasVideo && ( )}

)} {activeCommentsClipId && (

{ setActiveCommentsClipId(null); if(audioRef.current) audioRef.current.pause(); setPlayingAudioId(null); }}>

e.stopPropagation()} style={{ background: DARK, width: '100%', height: '80dvh', display: 'flex', flexDirection: 'column', padding: '32px 24px calc(24px + env(safe-area-inset-bottom, 20px))', animation: 'slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1)', color: '#FFF' }}>

VOICE
NOTES

{(() => { const activeClip = (clips || []).find(c => c.id === activeCommentsClipId); const comments = activeClip?.comments || []; if ((comments || []).length === 0) { return

NO VOICES YET.
BE THE FIRST.

; } return (comments || []).map(comment => (

{comment.authorAvatar ? ( avatar

) : (

{(comment.authorName || 'A').charAt(0).toUpperCase()}

)}

{new Date(comment.createdAt).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}

{comment.authorName}

{(() => { const replies = Array.isArray(comment?.replies) ? comment.replies : []; return (

{(replies || []).length > 0 && (

{(replies || []).map(reply => (

{reply?.authorName || 'ANON'} • {reply?.createdAt ? new Date(reply.createdAt).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}) : 'NOW'}

{reply?.text || ''}

))}

)}

setReplyDrafts(prev => ({ ...prev, [comment.id]: e.target.value }))} onKeyDown={(e) => { if (e.key === 'Enter') handleAddReply(comment.id); }} placeholder='REPLY...' maxLength={80} style={{ flex: 1, minHeight: 48, minWidth: 0, background: '#000', color: '#FFF', border: '3px solid #444', padding: '0 12px', fontSize: 16, fontWeight: 900, outline: 'none', letterSpacing: '0.5px' }} />

); })()}

)); })()}

)} {showAddSheet && (

setShowAddSheet(false)}>

e.stopPropagation()} style={{ background: DARK, width: '100%', padding: '40px 24px calc(40px + env(safe-area-inset-bottom, 20px))', animation: 'slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1)', color: '#FFF' }}>

WHAT IS
THIS?

{pendingMedia?.publicUrl && pendingMedia?.type === 'photo' && (

)} {pendingMedia?.publicUrl && pendingMedia?.type === 'video' && (

)}

); }

{clip?.title || 'UNTITLED'}

ADD A CLIP

VOICENOTES

WHAT ISTHIS?

VOICE
NOTES

WHAT IS
THIS?