mirror of
https://github.com/simstudioai/sim.git
synced 2026-04-28 03:00:29 -04:00
948cdbcc3f
* fix(docs): preserve gif playback position in lightbox and clean up ui components - Capture currentTime on click and seek lightbox video to match using useLayoutEffect - Convert lightboxStartTime from useState to useRef (no independent render needed) - Apply same fix to ActionVideo in action-media.tsx - Remove dead AnimatedBlocks component (zero imports) - Fix language-dropdown to derive currentLang during render instead of mirroring into state via effect - Replace template literals with cn() in faq.tsx and video.tsx * fix(chat): prevent @-mention menu focus loss and stabilize render identity Radix DropdownMenu's FocusScope was restoring focus from the search input to the content root whenever registered menu items mounted or unmounted inside the content, interrupting typing after a keystroke or two. - Keep the default tree always mounted under `hidden` instead of swapping subtrees when the filter activates. - Render filtered results as plain <button role="menuitem"> so they do not participate in Radix's menu Collection. - Add activeIndex state with ArrowUp/Down/Enter keyboard nav, mouse-hover sync, and scrollIntoView so the highlighted row stays visible and users can see what Enter will select. While tracing the cascade that compounded the bug: - Hoist `select` in useWorkflowMap / useWorkspacesQuery / useFolderMap to module scope so TanStack Query caches the select result across renders. - Guard setSelectedContexts([]) with a functional updater that bails out when already empty, preventing a fresh [] literal from invalidating consumers that key on reference identity. - Wrap WorkspaceHeader in React.memo so it bails out on parent renders once its (now-stable) props are unchanged. Made-with: Cursor * remove extraneous comments * cleanup * fix(chat): apply same setState bail-out to clearContexts for consistency Matches the invariant we already established for the message effect: calling setSelectedContexts([]) against an already-empty array emits a fresh [] reference (Object.is bails out are not reference-level), which cascades through consumers that key on selectedContexts identity. clearContexts is part of the hook's public API so callers can't know whether the list is empty — make it safe for them. Made-with: Cursor
86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useLayoutEffect, useRef } from 'react'
|
|
import { getAssetUrl } from '@/lib/utils'
|
|
|
|
interface LightboxProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
src: string
|
|
alt: string
|
|
type: 'image' | 'video'
|
|
startTime?: number
|
|
}
|
|
|
|
export function Lightbox({ isOpen, onClose, src, alt, type, startTime }: LightboxProps) {
|
|
const overlayRef = useRef<HTMLDivElement>(null)
|
|
const videoRef = useRef<HTMLVideoElement>(null)
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') {
|
|
onClose()
|
|
}
|
|
}
|
|
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (overlayRef.current && event.target === overlayRef.current) {
|
|
onClose()
|
|
}
|
|
}
|
|
|
|
if (isOpen) {
|
|
document.addEventListener('keydown', handleKeyDown)
|
|
document.addEventListener('click', handleClickOutside)
|
|
document.body.style.overflow = 'hidden'
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener('keydown', handleKeyDown)
|
|
document.removeEventListener('click', handleClickOutside)
|
|
document.body.style.overflow = 'unset'
|
|
}
|
|
}, [isOpen, onClose])
|
|
|
|
useLayoutEffect(() => {
|
|
if (isOpen && type === 'video' && videoRef.current && startTime != null && startTime > 0) {
|
|
videoRef.current.currentTime = startTime
|
|
}
|
|
}, [isOpen, startTime, type])
|
|
|
|
if (!isOpen) return null
|
|
|
|
return (
|
|
<div
|
|
ref={overlayRef}
|
|
className='fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-12 backdrop-blur-sm'
|
|
role='dialog'
|
|
aria-modal='true'
|
|
aria-label='Media viewer'
|
|
>
|
|
<div className='relative max-h-full max-w-full overflow-hidden rounded-xl'>
|
|
{type === 'image' ? (
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
className='max-h-[75vh] max-w-[75vw] cursor-pointer rounded-xl object-contain'
|
|
loading='lazy'
|
|
onClick={onClose}
|
|
/>
|
|
) : (
|
|
<video
|
|
ref={videoRef}
|
|
src={getAssetUrl(src)}
|
|
autoPlay
|
|
loop
|
|
muted
|
|
playsInline
|
|
className='max-h-[75vh] max-w-[75vw] cursor-pointer rounded-xl outline-none focus:outline-none'
|
|
onClick={onClose}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|