428 lines
18 KiB
TypeScript
428 lines
18 KiB
TypeScript
import { useState } from 'react'
|
||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||
import { useBreadcrumb } from '../../hooks/useBreadcrumb'
|
||
import { breadcrumbConfig } from '../../config/breadcrumbConfig'
|
||
import {
|
||
Bell,
|
||
BellRing,
|
||
Loader2,
|
||
AlertCircle,
|
||
Video,
|
||
Download,
|
||
RefreshCw,
|
||
CheckCircle,
|
||
XCircle,
|
||
Info,
|
||
Clock,
|
||
Trash2,
|
||
} from 'lucide-react'
|
||
import { api, getErrorMessage, PaidContentNotification } from '../../lib/api'
|
||
import { formatRelativeTime, formatBytes, THUMB_CACHE_V } from '../../lib/utils'
|
||
import { notificationManager } from '../../lib/notificationManager'
|
||
import BundleLightbox from '../../components/paid-content/BundleLightbox'
|
||
import { PaidContentPost, PaidContentAttachment } from '../../lib/api'
|
||
|
||
interface MediaFile {
|
||
file_path: string
|
||
filename: string
|
||
source?: string
|
||
content_type?: string
|
||
file_size?: number
|
||
width?: number
|
||
height?: number
|
||
file_type?: string
|
||
platform?: string
|
||
post_id?: number | null
|
||
post_content?: string
|
||
post_date?: string
|
||
duration?: number
|
||
attachment_id?: number
|
||
downloaded_at?: string
|
||
}
|
||
|
||
// Create a minimal post object from notification data for BundleLightbox
|
||
function createMinimalPost(notification: PaidContentNotification, mediaFiles: MediaFile[]): PaidContentPost {
|
||
// Use post_content from the first media file if available (backend includes this)
|
||
const firstMedia = mediaFiles[0]
|
||
const postContent = firstMedia?.post_content || null
|
||
const postDate = firstMedia?.post_date || notification.created_at
|
||
|
||
return {
|
||
id: notification.post_id || 0,
|
||
creator_id: notification.creator_id || 0,
|
||
post_id: String(notification.post_id || ''),
|
||
title: null,
|
||
content: postContent,
|
||
published_at: postDate,
|
||
added_at: notification.created_at,
|
||
has_attachments: 1,
|
||
attachment_count: mediaFiles.length,
|
||
downloaded: 1,
|
||
download_date: notification.created_at,
|
||
is_favorited: 0,
|
||
is_viewed: 0,
|
||
is_pinned: 0,
|
||
pinned_at: null,
|
||
username: notification.username || firstMedia?.source || '',
|
||
platform: notification.platform || firstMedia?.platform || '',
|
||
service_id: '',
|
||
display_name: notification.username || firstMedia?.source || null,
|
||
profile_image_url: null,
|
||
identity_id: null,
|
||
attachments: [],
|
||
}
|
||
}
|
||
|
||
// Convert notification media files to attachment format
|
||
function mediaFilesToAttachments(mediaFiles: MediaFile[]): PaidContentAttachment[] {
|
||
return mediaFiles.map((mf, index) => ({
|
||
id: mf.attachment_id || index,
|
||
post_id: mf.post_id || 0,
|
||
attachment_index: index,
|
||
name: mf.filename,
|
||
file_type: mf.file_type || (isVideoFile(mf.filename) ? 'video' : 'image'),
|
||
extension: mf.filename.split('.').pop() || null,
|
||
server_path: null,
|
||
download_url: null,
|
||
file_size: mf.file_size || null,
|
||
width: mf.width || null,
|
||
height: mf.height || null,
|
||
duration: mf.duration || null,
|
||
status: 'completed',
|
||
local_path: mf.file_path,
|
||
local_filename: mf.filename,
|
||
file_hash: null,
|
||
error_message: null,
|
||
download_attempts: 0,
|
||
downloaded_at: mf.downloaded_at || mf.post_date || null,
|
||
created_at: mf.post_date || null,
|
||
}))
|
||
}
|
||
|
||
function isVideoFile(filename: string): boolean {
|
||
const ext = filename.split('.').pop()?.toLowerCase()
|
||
return ['mp4', 'mov', 'avi', 'mkv', 'webm', 'm4v'].includes(ext || '')
|
||
}
|
||
|
||
import LazyThumbnail from '../../components/LazyThumbnail'
|
||
|
||
function NotificationIcon({ type }: { type: string }) {
|
||
switch (type) {
|
||
case 'new_content':
|
||
return (
|
||
<div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">
|
||
<Download className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||
</div>
|
||
)
|
||
case 'download_complete':
|
||
return (
|
||
<div className="p-2 rounded-lg bg-emerald-100 dark:bg-emerald-900/30">
|
||
<CheckCircle className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
|
||
</div>
|
||
)
|
||
case 'sync_complete':
|
||
return (
|
||
<div className="p-2 rounded-lg bg-violet-100 dark:bg-violet-900/30">
|
||
<RefreshCw className="w-4 h-4 text-violet-600 dark:text-violet-400" />
|
||
</div>
|
||
)
|
||
case 'error':
|
||
return (
|
||
<div className="p-2 rounded-lg bg-red-100 dark:bg-red-900/30">
|
||
<XCircle className="w-4 h-4 text-red-600 dark:text-red-400" />
|
||
</div>
|
||
)
|
||
default:
|
||
return (
|
||
<div className="p-2 rounded-lg bg-slate-100 dark:bg-slate-900/30">
|
||
<Info className="w-4 h-4 text-slate-600 dark:text-slate-400" />
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default function PaidContentNotifications() {
|
||
useBreadcrumb(breadcrumbConfig['/paid-content/notifications'])
|
||
|
||
const queryClient = useQueryClient()
|
||
const [lightboxNotification, setLightboxNotification] = useState<PaidContentNotification | null>(null)
|
||
const [lightboxMediaFiles, setLightboxMediaFiles] = useState<MediaFile[]>([])
|
||
const [lightboxIndex, setLightboxIndex] = useState<number>(0)
|
||
|
||
const { data: notifications, isLoading } = useQuery<PaidContentNotification[]>({
|
||
queryKey: ['paid-content-notifications'],
|
||
queryFn: () => api.paidContent.getNotifications({}),
|
||
refetchInterval: 30000,
|
||
})
|
||
|
||
const deleteNotificationMutation = useMutation({
|
||
mutationFn: (id: number) => api.paidContent.deleteNotification(id),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['paid-content-notifications'] })
|
||
notificationManager.success('Deleted', 'Notification removed')
|
||
},
|
||
onError: (error: unknown) => {
|
||
notificationManager.error('Error', getErrorMessage(error))
|
||
},
|
||
})
|
||
|
||
const totalCount = notifications?.length || 0
|
||
|
||
// Calculate stats
|
||
const stats = {
|
||
total: totalCount,
|
||
byType: notifications?.reduce((acc, n) => {
|
||
acc[n.notification_type] = (acc[n.notification_type] || 0) + 1
|
||
return acc
|
||
}, {} as Record<string, number>) || {},
|
||
}
|
||
|
||
const getThumbnailUrl = (media: MediaFile) => {
|
||
// Use ID-based endpoint if available (matches Feed), otherwise fall back to file path
|
||
if (media.attachment_id) {
|
||
return `/api/paid-content/files/thumbnail/${media.attachment_id}?size=large&${THUMB_CACHE_V}`
|
||
}
|
||
return `/api/paid-content/thumbnail?file_path=${encodeURIComponent(media.file_path)}`
|
||
}
|
||
|
||
const openLightbox = (notification: PaidContentNotification, mediaFiles: MediaFile[], index: number) => {
|
||
setLightboxNotification(notification)
|
||
setLightboxMediaFiles(mediaFiles)
|
||
setLightboxIndex(index)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* Header */}
|
||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||
<div>
|
||
<h1 className="text-2xl sm:text-3xl font-bold flex items-center gap-2 sm:gap-3">
|
||
<BellRing className="w-8 h-8 text-violet-500" />
|
||
Notification History
|
||
</h1>
|
||
<p className="text-slate-600 dark:text-slate-400 mt-1">
|
||
{totalCount} notification{totalCount !== 1 ? 's' : ''}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stats Cards */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="card-glass-hover rounded-xl p-4 border stat-card-green shadow-green-glow">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">Total</p>
|
||
<p className="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{stats.total}</p>
|
||
</div>
|
||
<div className="p-3 rounded-xl bg-emerald-500/20">
|
||
<Bell className="w-6 h-6 text-emerald-600 dark:text-emerald-400" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card-glass-hover rounded-xl p-4 border stat-card-purple shadow-purple-glow">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">Sync Complete</p>
|
||
<p className="text-2xl font-bold text-violet-600 dark:text-violet-400">
|
||
{stats.byType['sync_complete'] || 0}
|
||
</p>
|
||
</div>
|
||
<div className="p-3 rounded-xl bg-violet-500/20">
|
||
<RefreshCw className="w-6 h-6 text-violet-600 dark:text-violet-400" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card-glass-hover rounded-xl p-4 border stat-card-red shadow-red-glow">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">Errors</p>
|
||
<p className="text-2xl font-bold text-red-600 dark:text-red-400">
|
||
{stats.byType['error'] || 0}
|
||
</p>
|
||
</div>
|
||
<div className="p-3 rounded-xl bg-red-500/20">
|
||
<AlertCircle className="w-6 h-6 text-red-600 dark:text-red-400" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Notifications List */}
|
||
<div className="space-y-3">
|
||
{isLoading ? (
|
||
<div className="flex items-center justify-center py-12">
|
||
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
||
</div>
|
||
) : !notifications || notifications.length === 0 ? (
|
||
<div className="card-glass-hover rounded-xl p-12 text-center">
|
||
<Bell className="w-12 h-12 text-muted-foreground mx-auto mb-4 opacity-50" />
|
||
<h3 className="text-lg font-semibold text-foreground">No notifications</h3>
|
||
<p className="text-muted-foreground mt-1">
|
||
No notifications yet
|
||
</p>
|
||
</div>
|
||
) : (
|
||
notifications.map((notification) => {
|
||
// Enrich media files with post_id from notification
|
||
const mediaFiles = (notification.metadata?.media_files || []).map(mf => ({
|
||
...mf,
|
||
post_id: notification.post_id,
|
||
platform: (mf as any).platform || notification.platform,
|
||
source: mf.source || notification.username,
|
||
}))
|
||
const hasMedia = mediaFiles.length > 0
|
||
|
||
return (
|
||
<div
|
||
key={notification.id}
|
||
className="card-glass-hover rounded-xl p-4"
|
||
>
|
||
<div className="flex flex-col gap-4">
|
||
<div className="flex items-start gap-4">
|
||
<NotificationIcon type={notification.notification_type} />
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-start justify-between">
|
||
<div>
|
||
<h3 className="font-semibold text-foreground">{notification.title}</h3>
|
||
<p className="text-sm text-muted-foreground mt-1 whitespace-pre-line">{notification.message}</p>
|
||
</div>
|
||
<div className="flex items-center gap-2 flex-shrink-0 ml-2">
|
||
<button
|
||
onClick={() => {
|
||
if (confirm('Delete this notification?')) {
|
||
deleteNotificationMutation.mutate(notification.id)
|
||
}
|
||
}}
|
||
className="p-1.5 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/20 transition-colors"
|
||
title="Delete notification"
|
||
>
|
||
<Trash2 className="w-4 h-4 text-muted-foreground hover:text-red-500" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="mt-2 flex items-center gap-3 text-xs text-muted-foreground">
|
||
<span className="flex items-center gap-1">
|
||
<Clock className="w-3 h-3" />
|
||
<span>{formatRelativeTime(notification.created_at)}</span>
|
||
</span>
|
||
{notification.username && (
|
||
<span className="px-2 py-0.5 bg-secondary rounded-full">
|
||
@{notification.username}
|
||
</span>
|
||
)}
|
||
{notification.download_count !== undefined && notification.download_count > 0 && (
|
||
<span className="text-emerald-600 dark:text-emerald-400">
|
||
{notification.download_count} posts
|
||
</span>
|
||
)}
|
||
{notification.file_count !== undefined && notification.file_count > 0 && (
|
||
<span className="text-blue-600 dark:text-blue-400">
|
||
{notification.file_count} files
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Media Thumbnails Grid */}
|
||
{hasMedia && (
|
||
<div className="pt-3 border-t border-border">
|
||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
|
||
{mediaFiles.slice(0, 10).map((media: MediaFile, idx: number) => {
|
||
const isMediaVideo = isVideoFile(media.filename)
|
||
return (
|
||
<div
|
||
key={idx}
|
||
className={`relative ${isMediaVideo ? 'aspect-video' : 'aspect-square'} cursor-pointer group rounded-lg overflow-hidden border-2 border-border hover:border-primary transition-colors`}
|
||
onClick={() => openLightbox(notification, mediaFiles, idx)}
|
||
>
|
||
<LazyThumbnail
|
||
src={getThumbnailUrl(media)}
|
||
alt={media.filename}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
|
||
{/* Video badge - top left with icon and duration */}
|
||
{isMediaVideo && (
|
||
<div className="absolute top-1 left-1 bg-black/60 text-white rounded px-1.5 py-0.5 text-xs">
|
||
<Video className="w-3 h-3 inline mr-1" />
|
||
{media.duration ? `${Math.floor(media.duration / 60)}:${(media.duration % 60).toString().padStart(2, '0')}` : 'Video'}
|
||
</div>
|
||
)}
|
||
|
||
{/* Hover overlay with file info */}
|
||
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||
<div className="text-white text-xs truncate">
|
||
{media.filename}
|
||
</div>
|
||
<div className="text-white/70 text-xs flex items-center space-x-2">
|
||
{media.file_size && <span>{formatBytes(media.file_size)}</span>}
|
||
{media.width && media.height && <span>{media.width}×{media.height}</span>}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
{mediaFiles.length > 10 && (
|
||
<div
|
||
className="relative aspect-square cursor-pointer rounded-lg overflow-hidden border-2 border-border bg-secondary flex items-center justify-center"
|
||
onClick={() => openLightbox(notification, mediaFiles, 10)}
|
||
>
|
||
<span className="text-2xl font-bold text-muted-foreground">
|
||
+{mediaFiles.length - 10}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
)}
|
||
</div>
|
||
|
||
{/* Notification Types Legend */}
|
||
<div className="bg-card rounded-xl border border-border p-4">
|
||
<h3 className="text-sm font-medium text-foreground mb-3">Notification Types</h3>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<div className="flex items-center gap-2">
|
||
<NotificationIcon type="new_content" />
|
||
<span className="text-sm text-muted-foreground">New Content</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<NotificationIcon type="download_complete" />
|
||
<span className="text-sm text-muted-foreground">Download Complete</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<NotificationIcon type="sync_complete" />
|
||
<span className="text-sm text-muted-foreground">Sync Complete</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<NotificationIcon type="error" />
|
||
<span className="text-sm text-muted-foreground">Error</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* BundleLightbox */}
|
||
{lightboxNotification && lightboxMediaFiles.length > 0 && (
|
||
<BundleLightbox
|
||
post={createMinimalPost(lightboxNotification, lightboxMediaFiles)}
|
||
attachments={mediaFilesToAttachments(lightboxMediaFiles)}
|
||
currentIndex={lightboxIndex}
|
||
autoPlayVideo
|
||
onNavigate={setLightboxIndex}
|
||
onClose={() => {
|
||
setLightboxNotification(null)
|
||
setLightboxMediaFiles([])
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|