Private
Public Access
ksmith
f2a59f798b
Images live on the app server's local disk (uploads/), served through an authenticated, room-membership-gated endpoint since rooms can be private. Uploads are streamed with a byte-count cap, validated as genuine decodable images with Pillow (not just a spoofed Content-Type), and downscaled to 2000px on the longer side (except GIF, to preserve animation). Backend: MessageImage model + nullable Message.content/image_id with a content-or-image CheckConstraint, upload/serve endpoints in rooms.py, WS message envelope gains image_id, push notification body says "sent an image" for image-only messages. Frontend: Composer gets an attach button with upload progress and a thumbnail chip; MessageList renders images inline with a click-to-zoom ImageLightbox.
24 lines
603 B
TypeScript
24 lines
603 B
TypeScript
import { useEffect } from 'react'
|
|
import './ImageLightbox.css'
|
|
|
|
interface ImageLightboxProps {
|
|
src: string
|
|
onClose: () => void
|
|
}
|
|
|
|
export function ImageLightbox({ src, onClose }: ImageLightboxProps) {
|
|
useEffect(() => {
|
|
function handleKeyDown(e: KeyboardEvent) {
|
|
if (e.key === 'Escape') onClose()
|
|
}
|
|
window.addEventListener('keydown', handleKeyDown)
|
|
return () => window.removeEventListener('keydown', handleKeyDown)
|
|
}, [onClose])
|
|
|
|
return (
|
|
<div className="image-lightbox" onClick={onClose}>
|
|
<img src={src} alt="" className="image-lightbox-img" />
|
|
</div>
|
|
)
|
|
}
|