💄 Hide blob list by default and add image viewer #252
Conversation
foysalit
commented
Dec 3, 2024
•
foysalit
commented
- To make more room in the Quick Action Panel, we are now hiding blob list by default, allowing mods to open it as a dropdown when they actually want to action blobs.
- Added an image viewer to the blob list so that mods can view each individual blob item.
- Fixed a bug ensuring we open the image that the user clicks in the lightbox view if there are multiple in a post, instead of the first one in the list.
| {!blobs.length ? ( | ||
| <div className="text-sm text-gray-400">No blobs found</div> | ||
| ) : ( | ||
| <BlobListLightbox | ||
| blobs={blobs} | ||
| authorDid={props.authorDid} | ||
| slideIndex={lightboxImageIndex} | ||
| onClose={() => setLightboxImageIndex(-1)} | ||
| /> | ||
| )} |
There was a problem hiding this comment.
Nit: for the sake of readability I would invert the conditions blobs.length > 0 ? <BlobListLightbox /> : <div />
| const { appview } = useServerConfig() | ||
| const cdnUrl = appview?.endsWith('.bsky.app') | ||
| ? 'https://cdn.bsky.app' | ||
| : appview |
There was a problem hiding this comment.
Wouldn't it be better to make that part of the server config ?
There was a problem hiding this comment.
yep but im trying to reduce server side touch points. i have a ticket on trello to send it from server.
| console.log( | ||
| blobs.map((blob) => ({ | ||
| src: getBlobUrl({ | ||
| cid: blob.cid, | ||
| }), | ||
| })), | ||
| ) |
There was a problem hiding this comment.
| console.log( | |
| blobs.map((blob) => ({ | |
| src: getBlobUrl({ | |
| cid: blob.cid, | |
| }), | |
| })), | |
| ) |
| const handleKeyDown = (event) => { | ||
| if (event.key === 'Escape') { | ||
| event.stopPropagation() | ||
| } | ||
| } |
There was a problem hiding this comment.
You need to useCallback here. Otherwise the document.addEventListener('keydown', handleKeyDown) and document.removeEventListener('keydown', handleKeyDown) might not refer to the same function (resulting in the listener staying there forever)
There was a problem hiding this comment.
ermm.. not sure if that's correct? what would the deps for the hook be? also, wouldn't it depend on how the exit and entered handler is defined?
There was a problem hiding this comment.
happy to address this later and if we find this to be an issue, this will need to be updated in a few other places where lightbox is used.
arcalinea
temporarily deployed
to
hide-bloblist-by-default - ozone-staging PR #252
Render
Destroyed
