463 lines
16 KiB
JavaScript
463 lines
16 KiB
JavaScript
import { useState } from 'react'
|
||
import { useNavigate } from 'react-router-dom'
|
||
import { createPortal } from 'react-dom'
|
||
import { Heart, MessageCircle, MoreVertical, ChevronLeft, ChevronRight, Download, Send, X, ZoomIn, Share2 } from 'lucide-react'
|
||
import { likePost, deletePost, sendPhotoToTelegram } from '../utils/api'
|
||
import { hapticFeedback, showConfirm, openTelegramLink } from '../utils/telegram'
|
||
import { decodeHtmlEntities } from '../utils/htmlEntities'
|
||
import CommentsModal from './CommentsModal'
|
||
import PostMenu from './PostMenu'
|
||
import MusicAttachment from './MusicAttachment'
|
||
import './PostCard.css'
|
||
|
||
const TAG_COLORS = {
|
||
furry: '#FF8A33',
|
||
anime: '#4A90E2',
|
||
other: '#A0A0A0'
|
||
}
|
||
|
||
const TAG_NAMES = {
|
||
furry: 'Furry',
|
||
anime: 'Anime',
|
||
other: 'Other'
|
||
}
|
||
|
||
export default function PostCard({ post, currentUser, onUpdate, onAuthRequired }) {
|
||
const navigate = useNavigate()
|
||
const [liked, setLiked] = useState(post.likes?.includes(currentUser.id) || false)
|
||
const [likesCount, setLikesCount] = useState(post.likes?.length || 0)
|
||
const [currentImageIndex, setCurrentImageIndex] = useState(0)
|
||
const [showFullView, setShowFullView] = useState(false)
|
||
const [showComments, setShowComments] = useState(false)
|
||
const [showMenu, setShowMenu] = useState(false)
|
||
const [menuButtonPosition, setMenuButtonPosition] = useState(null)
|
||
|
||
const isGuest = currentUser?.isGuest === true
|
||
|
||
// Проверка на существование автора
|
||
if (!post.author) {
|
||
console.warn('[PostCard] Post without author:', post._id)
|
||
return null // Не показываем посты без автора
|
||
}
|
||
|
||
// Поддержка и старого поля imageUrl и нового images
|
||
// Фильтруем старые URL из Telegram API
|
||
const allImages = post.images && post.images.length > 0 ? post.images : (post.imageUrl ? [post.imageUrl] : [])
|
||
const images = allImages.filter(img => {
|
||
// Игнорируем старые URL из Telegram API
|
||
if (img && typeof img === 'string' && img.includes('api.telegram.org/file/bot')) {
|
||
console.warn('[PostCard] Skipping old Telegram URL:', img)
|
||
return false
|
||
}
|
||
return true
|
||
})
|
||
|
||
const handleLike = async () => {
|
||
// Проверка: гость не может лайкать
|
||
if (isGuest) {
|
||
if (onAuthRequired) {
|
||
onAuthRequired('Войдите, чтобы лайкать посты')
|
||
}
|
||
hapticFeedback('error')
|
||
return
|
||
}
|
||
|
||
try {
|
||
hapticFeedback('light')
|
||
const result = await likePost(post._id)
|
||
setLiked(result.liked)
|
||
setLikesCount(result.likes)
|
||
if (result.liked) {
|
||
hapticFeedback('success')
|
||
}
|
||
} catch (error) {
|
||
console.error('Ошибка лайка:', error)
|
||
}
|
||
}
|
||
|
||
|
||
const handleDelete = async () => {
|
||
const confirmed = await showConfirm('Удалить этот пост?')
|
||
if (confirmed) {
|
||
try {
|
||
await deletePost(post._id)
|
||
hapticFeedback('success')
|
||
onUpdate()
|
||
} catch (error) {
|
||
console.error('Ошибка удаления:', error)
|
||
}
|
||
}
|
||
}
|
||
|
||
const formatDate = (date) => {
|
||
const d = new Date(date)
|
||
return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' })
|
||
}
|
||
|
||
const goToProfile = () => {
|
||
if (post.author?._id) {
|
||
navigate(`/user/${post.author._id}`)
|
||
}
|
||
}
|
||
|
||
const openFullView = () => {
|
||
if (images.length > 0) {
|
||
setShowFullView(true)
|
||
hapticFeedback('light')
|
||
}
|
||
}
|
||
|
||
const handleNext = () => {
|
||
if (currentImageIndex < images.length - 1) {
|
||
setCurrentImageIndex(currentImageIndex + 1)
|
||
hapticFeedback('light')
|
||
}
|
||
}
|
||
|
||
const handlePrev = () => {
|
||
if (currentImageIndex > 0) {
|
||
setCurrentImageIndex(currentImageIndex - 1)
|
||
hapticFeedback('light')
|
||
}
|
||
}
|
||
|
||
const handleDownloadImage = async () => {
|
||
try {
|
||
hapticFeedback('light')
|
||
const imageUrl = images[currentImageIndex]
|
||
await sendPhotoToTelegram(imageUrl)
|
||
hapticFeedback('success')
|
||
} catch (error) {
|
||
console.error('Ошибка отправки фото:', error)
|
||
hapticFeedback('error')
|
||
}
|
||
}
|
||
|
||
const handleRepost = () => {
|
||
try {
|
||
hapticFeedback('light')
|
||
|
||
// Получить имя бота из переменных окружения или использовать дефолтное
|
||
const botName = import.meta.env.VITE_TELEGRAM_BOT_NAME || 'NakamaSpaceBot'
|
||
|
||
// Создать deeplink для открытия поста в миниапп
|
||
// Используем startapp для миниаппов - это правильный формат для передачи параметра в миниапп
|
||
const deeplink = `https://t.me/${botName}?startapp=post_${post._id}`
|
||
|
||
// Открыть нативное окно "Поделиться" в Telegram
|
||
const shareUrl = `https://t.me/share/url?url=${encodeURIComponent(deeplink)}&text=${encodeURIComponent('Смотри пост в Nakama!')}`
|
||
|
||
openTelegramLink(shareUrl)
|
||
hapticFeedback('success')
|
||
} catch (error) {
|
||
console.error('Ошибка репоста:', error)
|
||
hapticFeedback('error')
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="post-card card fade-in">
|
||
{/* Хедер поста */}
|
||
<div className="post-header">
|
||
<div className="post-author" onClick={goToProfile}>
|
||
<img
|
||
src={post.author?.photoUrl || '/default-avatar.png'}
|
||
alt={post.author?.username || post.author?.firstName || 'User'}
|
||
className="author-avatar"
|
||
onError={(e) => {
|
||
e.target.src = '/default-avatar.png'
|
||
}}
|
||
/>
|
||
<div className="author-info">
|
||
<div className="author-name">
|
||
{post.author?.firstName || ''} {post.author?.lastName || ''}
|
||
{!post.author?.firstName && !post.author?.lastName && 'Пользователь'}
|
||
</div>
|
||
<div className="post-date">
|
||
@{post.author?.username || post.author?.firstName || 'user'} · {formatDate(post.createdAt)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
className="menu-btn"
|
||
data-menu-button={post._id}
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
const button = e.currentTarget
|
||
const rect = button.getBoundingClientRect()
|
||
setMenuButtonPosition({
|
||
top: rect.top,
|
||
left: rect.left,
|
||
bottom: rect.bottom,
|
||
right: rect.right
|
||
})
|
||
setShowMenu(true)
|
||
}}
|
||
>
|
||
<MoreVertical size={20} />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Контент */}
|
||
{post.content && (
|
||
<div className="post-content">
|
||
{decodeHtmlEntities(post.content)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Изображения */}
|
||
{images.length > 0 && (
|
||
<div className="post-images">
|
||
<div className="image-carousel" style={{ cursor: 'pointer', position: 'relative' }} onClick={openFullView}>
|
||
<img src={images[currentImageIndex]} alt={`Image ${currentImageIndex + 1}`} />
|
||
|
||
{images.length > 1 && (
|
||
<>
|
||
{/* Левая зона для переключения на предыдущее изображение */}
|
||
<div
|
||
className="carousel-zone carousel-zone-left"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
if (currentImageIndex > 0) {
|
||
handlePrev()
|
||
} else {
|
||
openFullView()
|
||
}
|
||
}}
|
||
style={{ cursor: 'pointer' }}
|
||
/>
|
||
|
||
{/* Правая зона для переключения на следующее изображение */}
|
||
<div
|
||
className="carousel-zone carousel-zone-right"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
if (currentImageIndex < images.length - 1) {
|
||
handleNext()
|
||
} else {
|
||
openFullView()
|
||
}
|
||
}}
|
||
style={{ cursor: 'pointer' }}
|
||
/>
|
||
|
||
<div className="carousel-dots">
|
||
{images.map((_, index) => (
|
||
<span
|
||
key={index}
|
||
className={`dot ${index === currentImageIndex ? 'active' : ''}`}
|
||
onClick={(e) => { e.stopPropagation(); setCurrentImageIndex(index); }}
|
||
/>
|
||
))}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Индикатор что можно открыть fullview */}
|
||
<div className="fullview-hint" onClick={(e) => { e.stopPropagation(); openFullView(); }}>
|
||
<ZoomIn size={20} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Музыкальный трек (после изображений, компактно) */}
|
||
{post.attachedTrack && (
|
||
<div className="post-music">
|
||
<MusicAttachment track={post.attachedTrack} />
|
||
</div>
|
||
)}
|
||
|
||
{/* Теги */}
|
||
<div className="post-tags">
|
||
{post.tags.map((tag, index) => {
|
||
// Для известных тегов используем цвета и имена из объектов
|
||
// Для неизвестных тегов используем дефолтный цвет и само имя тега
|
||
const tagColor = TAG_COLORS[tag] || '#A0A0A0' // Дефолтный серый цвет
|
||
// Если нет имени в TAG_NAMES, используем сам тег с заглавной первой буквой
|
||
const tagName = TAG_NAMES[tag] || (tag.charAt(0).toUpperCase() + tag.slice(1))
|
||
|
||
return (
|
||
<span
|
||
key={index}
|
||
className="post-tag"
|
||
style={{ backgroundColor: tagColor }}
|
||
>
|
||
{tagName}
|
||
</span>
|
||
)
|
||
})}
|
||
{post.isNSFW && (
|
||
<span className="nsfw-badge">NSFW</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* Действия */}
|
||
<div className="post-actions">
|
||
<button
|
||
className={`action-btn ${liked ? 'active' : ''}`}
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handleLike()
|
||
}}
|
||
>
|
||
<Heart size={20} fill={liked ? '#FF3B30' : 'none'} stroke={liked ? '#FF3B30' : 'currentColor'} />
|
||
<span>{likesCount}</span>
|
||
</button>
|
||
|
||
<button
|
||
className="action-btn"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
setShowComments(true)
|
||
}}
|
||
>
|
||
<MessageCircle size={20} stroke="currentColor" />
|
||
<span>{post.comments.length}</span>
|
||
</button>
|
||
|
||
<button
|
||
className="action-btn"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handleRepost()
|
||
}}
|
||
title="Поделиться постом"
|
||
>
|
||
<Share2 size={20} stroke="currentColor" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Fullview модал через Portal */}
|
||
{showFullView && createPortal(
|
||
<div
|
||
className="image-fullview"
|
||
onMouseDown={(e) => e.stopPropagation()}
|
||
onTouchStart={(e) => e.stopPropagation()}
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
e.preventDefault()
|
||
setShowFullView(false)
|
||
}}
|
||
>
|
||
<div className="fullview-header" onClick={(e) => e.stopPropagation()}>
|
||
<button className="fullview-btn" onClick={(e) => { e.stopPropagation(); setShowFullView(false); }}>
|
||
<X size={24} />
|
||
</button>
|
||
<span className="fullview-counter">
|
||
{currentImageIndex + 1} / {images.length}
|
||
</span>
|
||
<button
|
||
className="fullview-btn"
|
||
onClick={(e) => { e.stopPropagation(); handleDownloadImage(); }}
|
||
title="Отправить в Telegram"
|
||
>
|
||
<Download size={24} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="fullview-content" onClick={(e) => e.stopPropagation()}>
|
||
<img
|
||
src={images[currentImageIndex]}
|
||
alt={`Full view ${currentImageIndex + 1}`}
|
||
draggable={false}
|
||
onClick={(e) => e.stopPropagation()}
|
||
/>
|
||
|
||
{images.length > 1 && (
|
||
<>
|
||
{/* Левая зона для переключения на предыдущее изображение */}
|
||
<div
|
||
className="fullview-zone fullview-zone-left"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
if (currentImageIndex > 0) {
|
||
handlePrev()
|
||
}
|
||
}}
|
||
/>
|
||
|
||
{/* Правая зона для переключения на следующее изображение */}
|
||
<div
|
||
className="fullview-zone fullview-zone-right"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
if (currentImageIndex < images.length - 1) {
|
||
handleNext()
|
||
}
|
||
}}
|
||
/>
|
||
|
||
{/* Кнопки навигации - всегда видимые, но неактивные когда нельзя переключить */}
|
||
<button
|
||
className="fullview-nav-btn prev"
|
||
onClick={(e) => { e.stopPropagation(); handlePrev(); }}
|
||
disabled={currentImageIndex === 0}
|
||
style={{ opacity: currentImageIndex === 0 ? 0.3 : 1 }}
|
||
>
|
||
<ChevronLeft size={32} />
|
||
</button>
|
||
|
||
<button
|
||
className="fullview-nav-btn next"
|
||
onClick={(e) => { e.stopPropagation(); handleNext(); }}
|
||
disabled={currentImageIndex === images.length - 1}
|
||
style={{ opacity: currentImageIndex === images.length - 1 ? 0.3 : 1 }}
|
||
>
|
||
<ChevronRight size={32} />
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{images.length > 1 && (
|
||
<div className="fullview-dots" onClick={(e) => e.stopPropagation()}>
|
||
{images.map((_, index) => (
|
||
<span
|
||
key={index}
|
||
className={`fullview-dot ${index === currentImageIndex ? 'active' : ''}`}
|
||
onClick={(e) => { e.stopPropagation(); setCurrentImageIndex(index); }}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>,
|
||
document.body
|
||
)}
|
||
|
||
{/* Модалка комментариев через Portal */}
|
||
{showComments && createPortal(
|
||
<CommentsModal
|
||
post={post}
|
||
currentUser={currentUser}
|
||
onClose={() => setShowComments(false)}
|
||
onUpdate={onUpdate}
|
||
/>,
|
||
document.body
|
||
)}
|
||
|
||
{/* Модалка меню через Portal */}
|
||
{showMenu && createPortal(
|
||
<PostMenu
|
||
post={post}
|
||
currentUser={currentUser}
|
||
onClose={() => {
|
||
setShowMenu(false)
|
||
setMenuButtonPosition(null)
|
||
}}
|
||
onDelete={async () => {
|
||
await handleDelete()
|
||
setShowMenu(false)
|
||
setMenuButtonPosition(null)
|
||
}}
|
||
onUpdate={onUpdate}
|
||
buttonPosition={menuButtonPosition}
|
||
/>,
|
||
document.body
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|