8372b271cb
- Extract both layout and timeframe information from filenames - Group screenshots by layout (AI Layout, DIY Module) - Sort timeframes within each layout group ascending (5m -> 4h) - Display proper layout names and timeframes in descriptions - Organize display as: first layout ascending, then second layout ascending - Improve screenshot alt text with layout and timeframe info Screenshots now properly show: Top row: AI Layout (5m, 15m, 30m) Bottom row: DIY Module (5m, 15m, 30m)
271 lines
10 KiB
TypeScript
271 lines
10 KiB
TypeScript
"use client"
|
|
import React, { useEffect } from 'react'
|
|
|
|
interface ScreenshotGalleryProps {
|
|
screenshots: string[]
|
|
symbol: string
|
|
timeframes: string[]
|
|
enlargedImage: string | null
|
|
onImageClick: (src: string) => void
|
|
onClose: () => void
|
|
}
|
|
|
|
export default function ScreenshotGallery({
|
|
screenshots,
|
|
symbol,
|
|
timeframes,
|
|
enlargedImage,
|
|
onImageClick,
|
|
onClose
|
|
}: ScreenshotGalleryProps) {
|
|
// Handle ESC key to close enlarged image
|
|
useEffect(() => {
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape' && enlargedImage) {
|
|
onClose()
|
|
}
|
|
}
|
|
|
|
if (enlargedImage) {
|
|
document.addEventListener('keydown', handleKeyDown)
|
|
return () => document.removeEventListener('keydown', handleKeyDown)
|
|
}
|
|
}, [enlargedImage, onClose])
|
|
|
|
if (screenshots.length === 0) return null
|
|
|
|
// Utility function to convert timeframe to sortable number
|
|
const timeframeToMinutes = (timeframe: string): number => {
|
|
const tf = timeframe.toLowerCase()
|
|
if (tf.includes('5m') || tf === '5') return 5
|
|
if (tf.includes('15m') || tf === '15') return 15
|
|
if (tf.includes('30m') || tf === '30') return 30
|
|
if (tf.includes('1h') || tf === '60') return 60
|
|
if (tf.includes('2h') || tf === '120') return 120
|
|
if (tf.includes('4h') || tf === '240') return 240
|
|
if (tf.includes('1d') || tf === 'D') return 1440
|
|
// Default fallback
|
|
return parseInt(tf) || 999
|
|
}
|
|
|
|
// Extract layout and timeframe from filename
|
|
const extractInfoFromFilename = (filename: string) => {
|
|
// Pattern: SYMBOL_TIMEFRAME_LAYOUT_TIMESTAMP.png
|
|
// e.g., SOLUSD_5_ai_1752749431435.png or SOLUSD_15_Diy module_1752749479893.png
|
|
const parts = filename.replace('.png', '').split('_')
|
|
if (parts.length >= 4) {
|
|
const timeframe = parts[1]
|
|
const layout = parts.slice(2, -1).join('_') // Handle "Diy module" with space
|
|
return { timeframe, layout }
|
|
}
|
|
|
|
// Fallback: try to extract from anywhere in filename
|
|
const timeframeMatch = filename.match(/_(\d+|D)_/)
|
|
const layoutMatch = filename.match(/_(ai|Diy module|diy)_/)
|
|
|
|
return {
|
|
timeframe: timeframeMatch ? timeframeMatch[1] : 'Unknown',
|
|
layout: layoutMatch ? layoutMatch[1] : 'Unknown'
|
|
}
|
|
}
|
|
|
|
// Format timeframe for display
|
|
const formatTimeframe = (tf: string): string => {
|
|
if (tf === 'D') return '1D'
|
|
if (tf === '5') return '5m'
|
|
if (tf === '15') return '15m'
|
|
if (tf === '30') return '30m'
|
|
if (tf === '60') return '1h'
|
|
if (tf === '120') return '2h'
|
|
if (tf === '240') return '4h'
|
|
return `${tf}m`
|
|
}
|
|
|
|
// Format layout name for display
|
|
const formatLayoutName = (layout: string): string => {
|
|
if (layout === 'ai') return 'AI Layout'
|
|
if (layout === 'Diy module') return 'DIY Module'
|
|
return layout
|
|
}
|
|
|
|
// Create screenshot data with extracted info
|
|
const screenshotData = screenshots.map((screenshot, index) => {
|
|
const screenshotUrl = typeof screenshot === 'string'
|
|
? screenshot
|
|
: (screenshot as any)?.url || String(screenshot)
|
|
const filename = screenshotUrl.split('/').pop() || ''
|
|
const { timeframe, layout } = extractInfoFromFilename(filename)
|
|
|
|
return {
|
|
screenshot,
|
|
screenshotUrl,
|
|
filename,
|
|
timeframe,
|
|
layout,
|
|
displayTimeframe: formatTimeframe(timeframe),
|
|
displayLayout: formatLayoutName(layout),
|
|
index,
|
|
sortOrder: timeframeToMinutes(formatTimeframe(timeframe))
|
|
}
|
|
})
|
|
|
|
// Group by layout and sort within each group
|
|
const groupedData = screenshotData.reduce((acc: any, item) => {
|
|
if (!acc[item.layout]) {
|
|
acc[item.layout] = []
|
|
}
|
|
acc[item.layout].push(item)
|
|
return acc
|
|
}, {})
|
|
|
|
// Sort each layout group by timeframe and combine
|
|
// First layout (ai), then second layout (Diy module)
|
|
const layoutOrder = ['ai', 'Diy module']
|
|
const sortedData = layoutOrder.reduce((result: any[], layoutKey) => {
|
|
if (groupedData[layoutKey]) {
|
|
const sortedGroup = groupedData[layoutKey].sort((a: any, b: any) => a.sortOrder - b.sortOrder)
|
|
result.push(...sortedGroup)
|
|
}
|
|
return result
|
|
}, [])
|
|
|
|
// Add any remaining layouts not in the predefined order
|
|
Object.keys(groupedData).forEach(layoutKey => {
|
|
if (!layoutOrder.includes(layoutKey)) {
|
|
const sortedGroup = groupedData[layoutKey].sort((a: any, b: any) => a.sortOrder - b.sortOrder)
|
|
sortedData.push(...sortedGroup)
|
|
}
|
|
})
|
|
|
|
// Helper function to format screenshot URL
|
|
const formatScreenshotUrl = (screenshot: string | any) => {
|
|
// Handle both string URLs and screenshot objects
|
|
const screenshotUrl = typeof screenshot === 'string' ? screenshot : screenshot.url || screenshot
|
|
// Extract just the filename from the full path
|
|
const filename = screenshotUrl.split('/').pop() || screenshotUrl
|
|
// Use the new API route with query parameter
|
|
return `/api/image?file=${filename}`
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Gallery Grid */}
|
|
<div className="mt-6 p-4 bg-gradient-to-br from-purple-500/10 to-indigo-500/10 border border-purple-500/30 rounded-lg">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h4 className="text-lg font-bold text-white flex items-center">
|
|
<span className="w-6 h-6 bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg flex items-center justify-center mr-2 text-sm">
|
|
📸
|
|
</span>
|
|
Chart Screenshots
|
|
</h4>
|
|
<div className="text-xs text-gray-400">
|
|
{sortedData.length} captured • Click to enlarge
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{sortedData.map((item, displayIndex) => {
|
|
const imageUrl = formatScreenshotUrl(item.screenshot)
|
|
|
|
return (
|
|
<div
|
|
key={displayIndex}
|
|
className="group relative bg-gray-800/30 rounded-lg overflow-hidden border border-gray-700 hover:border-purple-500/50 transition-all cursor-pointer transform hover:scale-[1.02]"
|
|
onClick={() => onImageClick(imageUrl)}
|
|
>
|
|
{/* Preview Image */}
|
|
<div className="aspect-video bg-gray-800 flex items-center justify-center relative">
|
|
<img
|
|
src={imageUrl}
|
|
alt={`${symbol} - ${item.displayLayout} - ${item.displayTimeframe} chart`}
|
|
className="w-full h-full object-cover"
|
|
onError={(e: any) => {
|
|
const target = e.target as HTMLImageElement
|
|
target.style.display = 'none'
|
|
const fallback = target.nextElementSibling as HTMLElement
|
|
if (fallback) fallback.classList.remove('hidden')
|
|
}}
|
|
/>
|
|
<div className="hidden absolute inset-0 flex items-center justify-center text-gray-400">
|
|
<div className="text-center">
|
|
<div className="text-3xl mb-2">📊</div>
|
|
<div className="text-sm">Chart Preview</div>
|
|
<div className="text-xs text-gray-500">{item.filename}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Overlay */}
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all flex items-center justify-center">
|
|
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<div className="w-12 h-12 bg-purple-500/80 rounded-full flex items-center justify-center">
|
|
<span className="text-white text-xl">🔍</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Image Info */}
|
|
<div className="p-3">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="text-sm font-medium text-white">{symbol}</div>
|
|
<div className="text-xs text-purple-300">{item.displayLayout}</div>
|
|
<div className="text-xs text-gray-400">{item.displayTimeframe} Timeframe</div>
|
|
</div>
|
|
<div className="text-xs text-gray-400">
|
|
Click to view
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Enlarged Image Modal */}
|
|
{enlargedImage && (
|
|
<div
|
|
className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50"
|
|
onClick={onClose}
|
|
>
|
|
<div className="relative max-w-6xl max-h-[90vh] w-full" onClick={(e: any) => e.stopPropagation()}>
|
|
{/* Close Button */}
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-4 right-4 w-10 h-10 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center text-white z-10 transition-colors"
|
|
>
|
|
✕
|
|
</button>
|
|
|
|
{/* Image */}
|
|
<img
|
|
src={enlargedImage}
|
|
alt="Enlarged chart"
|
|
className="w-full h-full object-contain rounded-lg border border-gray-600"
|
|
onError={(e: any) => {
|
|
console.error('Failed to load enlarged image:', enlargedImage)
|
|
const target = e.target as HTMLImageElement
|
|
target.alt = 'Failed to load image'
|
|
}}
|
|
/>
|
|
|
|
{/* Image Info Overlay */}
|
|
<div className="absolute bottom-4 left-4 right-4 bg-black/70 backdrop-blur-sm rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="text-white font-medium">{symbol} Chart Analysis</div>
|
|
<div className="text-gray-300 text-sm">AI analyzed screenshot • High resolution view</div>
|
|
</div>
|
|
<div className="text-xs text-gray-400">
|
|
ESC to close • Click outside to close
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|