186cb6355c
- Fixed timeframe mapping logic in ScreenshotGallery component - Improved timeframe extraction from filenames with better pattern matching - Added fallback logic to prioritize filename-based timeframe detection - Enhanced sorting to handle all timeframe formats (5m, 1h, 4h, 1d, 1w, 1M) - Resolves UI bug where gallery showed incorrect timeframe descriptions
320 lines
12 KiB
TypeScript
320 lines
12 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
|
|
if (tf.includes('1w') || tf === 'W') return 10080
|
|
if (tf.includes('1M') || tf === 'M') return 43200
|
|
// Default fallback
|
|
return parseInt(tf) || 999
|
|
}
|
|
|
|
// Extract timeframe from filename
|
|
const extractTimeframeFromFilename = (filename: string) => {
|
|
// First try to match the pattern _timeframe_
|
|
const match = filename.match(/_(\d+|D|W|M)_/)
|
|
if (match) {
|
|
const tf = match[1]
|
|
if (tf === 'D') return '1d'
|
|
if (tf === 'W') return '1w'
|
|
if (tf === 'M') return '1M'
|
|
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`
|
|
}
|
|
|
|
// Try to match timeframe patterns anywhere in the filename
|
|
const timeframePatterns = [
|
|
{ pattern: /5m|_5_/i, value: '5m' },
|
|
{ pattern: /15m|_15_/i, value: '15m' },
|
|
{ pattern: /30m|_30_/i, value: '30m' },
|
|
{ pattern: /1h|60m|_60_/i, value: '1h' },
|
|
{ pattern: /2h|120m|_120_/i, value: '2h' },
|
|
{ pattern: /4h|240m|_240_/i, value: '4h' },
|
|
{ pattern: /1d|daily|_D_/i, value: '1d' },
|
|
{ pattern: /1w|weekly|_W_/i, value: '1w' },
|
|
{ pattern: /1M|monthly|_M_/i, value: '1M' }
|
|
]
|
|
|
|
for (const { pattern, value } of timeframePatterns) {
|
|
if (pattern.test(filename)) {
|
|
return value
|
|
}
|
|
}
|
|
|
|
return 'Unknown'
|
|
}
|
|
|
|
// Helper function to detect layout from filename
|
|
const detectLayout = (filename: string) => {
|
|
if (filename.includes('_ai_')) return 'AI'
|
|
if (filename.includes('_diy_') || filename.includes('_Diy module_')) return 'DIY'
|
|
return 'Default'
|
|
}
|
|
|
|
// Create screenshot data with layout and timeframe information
|
|
const screenshotData = screenshots.map((screenshot, index) => {
|
|
const screenshotUrl = typeof screenshot === 'string'
|
|
? screenshot
|
|
: (screenshot as any)?.url || String(screenshot)
|
|
const filename = screenshotUrl.split('/').pop() || ''
|
|
|
|
// Extract timeframe from filename first, then use timeframes array as fallback
|
|
const extractedTimeframe = extractTimeframeFromFilename(filename)
|
|
const timeframe = extractedTimeframe !== 'Unknown'
|
|
? extractedTimeframe
|
|
: (timeframes[index] || extractedTimeframe)
|
|
|
|
const layout = detectLayout(filename)
|
|
|
|
return {
|
|
screenshot,
|
|
screenshotUrl,
|
|
filename,
|
|
timeframe,
|
|
layout,
|
|
index,
|
|
sortOrder: timeframeToMinutes(timeframe)
|
|
}
|
|
})
|
|
|
|
// Group screenshots by layout
|
|
const aiScreenshots = screenshotData
|
|
.filter(item => item.layout === 'AI')
|
|
.sort((a, b) => a.sortOrder - b.sortOrder)
|
|
|
|
const diyScreenshots = screenshotData
|
|
.filter(item => item.layout === 'DIY')
|
|
.sort((a, b) => a.sortOrder - b.sortOrder)
|
|
|
|
const defaultScreenshots = screenshotData
|
|
.filter(item => item.layout === 'Default')
|
|
.sort((a, b) => a.sortOrder - b.sortOrder)
|
|
|
|
// 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}`
|
|
}
|
|
|
|
// Helper function to render a screenshot row
|
|
const renderScreenshotRow = (screenshots: any[], title: string, icon: string, bgGradient: string) => {
|
|
if (screenshots.length === 0) return null
|
|
|
|
return (
|
|
<div className="mb-6">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h5 className={`text-sm font-bold text-white flex items-center bg-gradient-to-r ${bgGradient} px-3 py-1 rounded-lg`}>
|
|
<span className="mr-2">{icon}</span>
|
|
{title}
|
|
</h5>
|
|
<div className="text-xs text-gray-400">
|
|
{screenshots.length} screenshot{screenshots.length !== 1 ? 's' : ''}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
|
{screenshots.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.timeframe} chart (${item.layout} Layout)`}
|
|
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.timeframe} Timeframe</div>
|
|
</div>
|
|
<div className="text-xs text-gray-400">
|
|
Click to view
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
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">
|
|
{screenshotData.length} captured • Click to enlarge
|
|
</div>
|
|
</div>
|
|
|
|
{/* AI Layout Row */}
|
|
{renderScreenshotRow(
|
|
aiScreenshots,
|
|
'AI Layout - RSI, EMAs, MACD',
|
|
'🤖',
|
|
'from-blue-500/30 to-cyan-500/30'
|
|
)}
|
|
|
|
{/* DIY Layout Row */}
|
|
{renderScreenshotRow(
|
|
diyScreenshots,
|
|
'DIY Module Layout - Stochastic RSI, VWAP, OBV',
|
|
'🔧',
|
|
'from-orange-500/30 to-yellow-500/30'
|
|
)}
|
|
|
|
{/* Default Layout Row (if any) */}
|
|
{renderScreenshotRow(
|
|
defaultScreenshots,
|
|
'Default Layout',
|
|
'📊',
|
|
'from-purple-500/30 to-indigo-500/30'
|
|
)}
|
|
|
|
{/* No Screenshots Message */}
|
|
{screenshotData.length === 0 && (
|
|
<div className="text-center py-8 text-gray-400">
|
|
<div className="text-3xl mb-2">📊</div>
|
|
<div className="text-sm">No screenshots available</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>
|
|
)}
|
|
</>
|
|
)
|
|
}
|