salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "lightbox"

Browse Source 
This reverts commit 469e07e046.
This commit is contained in:
Desktop
2025-11-13 00:36:08 +05:00
parent 07fd04e9f3
commit 77ec8af4d1
3 changed files with 5 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/common/ContentImageCell.tsx
View File

@@ -20,10 +20,9 @@ export interface ContentImageData {
interface ContentImageCellProps {
image: ContentImageData | null;
maxPromptLength?: number;
onImageClick?: () => void;
}
export default function ContentImageCell({ image, maxPromptLength = 100, onImageClick }: ContentImageCellProps) {
export default function ContentImageCell({ image, maxPromptLength = 100 }: ContentImageCellProps) {
const [showFullPrompt, setShowFullPrompt] = useState(false);
// Check if image_path is a valid local file path (not a URL)
@@ -114,14 +113,7 @@ export default function ContentImageCell({ image, maxPromptLength = 100, onImage
<img
src={getLocalImageUrl(image.image_path)}
alt={prompt || 'Generated image'}
className={`w-full h-24 object-cover rounded border border-gray-300 dark:border-gray-600 ${
onImageClick ? 'cursor-pointer hover:opacity-80 transition-opacity' : ''
}`}
onClick={() => {
if (onImageClick) {
onImageClick();
}
}}
className="w-full h-24 object-cover rounded border border-gray-300 dark:border-gray-600"
onError={(e) => {
// Show empty placeholder if local image fails to load
const target = e.target as HTMLImageElement;

13
frontend/src/config/pages/images.config.tsx
View File

@@ -52,7 +52,6 @@ export const createImagesPageConfig = (
setCurrentPage: (page: number) => void;
maxInArticleImages?: number; // Optional: max in-article images to display
onGenerateImages?: (contentId: number) => void; // Handler for generate images button
onImageClick?: (contentId: number, imageType: 'featured' | 'in_article', position?: number) => void; // Handler for image click
}
): ImagesPageConfig => {
const maxImages = handlers.maxInArticleImages || 5; // Default to 5 in-article images
@@ -85,10 +84,7 @@ export const createImagesPageConfig = (
sortable: false,
width: '200px',
render: (_value: any, row: ContentImagesGroup) => (
<ContentImageCell
image={row.featured_image}
onImageClick={handlers.onImageClick ? () => handlers.onImageClick!(row.content_id, 'featured') : undefined}
/>
<ContentImageCell image={row.featured_image} />
),
},
];
@@ -102,12 +98,7 @@ export const createImagesPageConfig = (
width: '200px',
render: (_value: any, row: ContentImagesGroup) => {
const image = row.in_article_images.find(img => img.position === i);
return (
<ContentImageCell
image={image || null}
onImageClick={handlers.onImageClick && image ? () => handlers.onImageClick!(row.content_id, 'in_article', i) : undefined}
/>
);
return <ContentImageCell image={image || null} />;
},
});
}

101
frontend/src/pages/Writer/Images.tsx
View File

@@ -12,7 +12,6 @@ import {
fetchImageGenerationSettings,
generateImages,
bulkUpdateImagesStatus,
ContentImage,
} from '../../services/api';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { FileIcon, DownloadIcon, BoltIcon } from '../../icons';
@@ -21,8 +20,6 @@ import ImageQueueModal, { ImageQueueItem } from '../../components/common/ImageQu
import SingleRecordStatusUpdateModal from '../../components/common/SingleRecordStatusUpdateModal';
import { useResourceDebug } from '../../hooks/useResourceDebug';
import PageHeader from '../../components/common/PageHeader';
import Lightbox from 'yet-another-react-lightbox';
import 'yet-another-react-lightbox/styles.css';
export default function Images() {
const toast = useToast();
@@ -88,11 +85,6 @@ export default function Images() {
const [statusUpdateRecordName, setStatusUpdateRecordName] = useState<string>('');
const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);
// Lightbox state
const [lightboxOpen, setLightboxOpen] = useState(false);
const [lightboxIndex, setLightboxIndex] = useState(0);
const [lightboxSlides, setLightboxSlides] = useState<Array<{ src: string; alt?: string }>>([]);
// Load images - wrapped in useCallback
const loadImages = useCallback(async () => {
setLoading(true);
@@ -361,87 +353,6 @@ export default function Images() {
}
}, [toast, images, buildImageQueue]);
// Helper function to convert image_path to web-accessible URL
const getImageUrl = useCallback((image: ContentImage | null): string | null => {
if (!image || !image.image_path) return null;
// Check if image_path is a valid local file path (not a URL)
const isValidLocalPath = (imagePath: string): boolean => {
if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
return false;
}
return imagePath.includes('ai-images');
};
if (!isValidLocalPath(image.image_path)) return null;
// Convert local file path to web-accessible URL
if (image.image_path.includes('ai-images')) {
const filename = image.image_path.split('ai-images/')[1] || image.image_path.split('ai-images\\')[1];
if (filename) {
return `/images/ai-images/${filename}`;
}
}
if (image.image_path.startsWith('/images/')) {
return image.image_path;
}
const filename = image.image_path.split('/').pop() || image.image_path.split('\\').pop();
return filename ? `/images/ai-images/${filename}` : null;
}, []);
// Handle image click - open lightbox with all images from the same content
const handleImageClick = useCallback((contentId: number, imageType: 'featured' | 'in_article', position?: number) => {
const contentGroup = images.find(g => g.content_id === contentId);
if (!contentGroup) return;
// Collect all generated images from this content
const slides: Array<{ src: string; alt?: string }> = [];
let startIndex = 0;
// Add featured image first (if it exists and is generated)
if (contentGroup.featured_image && contentGroup.featured_image.status === 'generated') {
const url = getImageUrl(contentGroup.featured_image);
if (url) {
slides.push({
src: url,
alt: contentGroup.featured_image.prompt || 'Featured image',
});
// If clicked image is featured, start at index 0
if (imageType === 'featured') {
startIndex = 0;
}
}
}
// Add in-article images in order
const sortedInArticle = [...contentGroup.in_article_images]
.filter(img => img.status === 'generated')
.sort((a, b) => (a.position || 0) - (b.position || 0));
sortedInArticle.forEach((img) => {
const url = getImageUrl(img);
if (url) {
const currentIndex = slides.length;
slides.push({
src: url,
alt: img.prompt || `In-article image ${img.position}`,
});
// If clicked image is this in-article image, set start index
if (imageType === 'in_article' && img.position === position) {
startIndex = currentIndex;
}
}
});
if (slides.length > 0) {
setLightboxSlides(slides);
setLightboxIndex(startIndex);
setLightboxOpen(true);
}
}, [images, getImageUrl]);
// Get max in-article images from the data (to determine column count)
const maxInArticleImages = useMemo(() => {
if (images.length === 0) return 5; // Default
@@ -459,9 +370,8 @@ export default function Images() {
setCurrentPage,
maxInArticleImages,
onGenerateImages: handleGenerateImages,
onImageClick: handleImageClick,
});
}, [searchTerm, statusFilter, maxInArticleImages, handleGenerateImages, handleImageClick]);
}, [searchTerm, statusFilter, maxInArticleImages, handleGenerateImages]);
// Calculate header metrics
const headerMetrics = useMemo(() => {
@@ -569,15 +479,6 @@ export default function Images() {
isLoading={isUpdatingStatus}
/>
{/* Lightbox */}
<Lightbox
open={lightboxOpen}
close={() => setLightboxOpen(false)}
index={lightboxIndex}
slides={lightboxSlides}
on={{ view: ({ index }) => setLightboxIndex(index) }}
/>
{/* AI Function Logs - Display below table (only when Resource Debug is enabled) */}
{resourceDebugEnabled && aiLogs.length > 0 && (
<div className="mt-6 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">