add tag selector to image and video viewers

This commit is contained in:
Garret Patti
2026-04-05 14:01:32 -04:00
parent 2ba887dba6
commit 427aade21a
4 changed files with 177 additions and 50 deletions

View File

@@ -13,8 +13,8 @@ interface Props {
}
type ModalState =
| { type: 'video'; url: string; name: string }
| { type: 'image'; url: string; name: string }
| { type: 'video'; url: string; name: string; mediaKey: string }
| { type: 'image'; url: string; name: string; mediaKey: string }
| null
type TagPanelState = { entry: FileEntry; mediaKey: string } | null
@@ -80,9 +80,9 @@ export default function MixedView({ libraryId, initialPath }: Props) {
}
if (!entry.url) return
if (entry.mediaType === 'video') {
setModal({ type: 'video', url: entry.url, name: entry.name })
setModal({ type: 'video', url: entry.url, name: entry.name, mediaKey: mediaKeyFor(entry) })
} else if (entry.mediaType === 'image') {
setModal({ type: 'image', url: entry.url, name: entry.name })
setModal({ type: 'image', url: entry.url, name: entry.name, mediaKey: mediaKeyFor(entry) })
} else {
// Download other file types
window.open(entry.url, '_blank')
@@ -201,10 +201,22 @@ export default function MixedView({ libraryId, initialPath }: Props) {
)}
{modal?.type === 'video' && (
<VideoPlayerModal url={modal.url} name={modal.name} onClose={() => setModal(null)} />
<VideoPlayerModal
url={modal.url}
name={modal.name}
mediaKey={modal.mediaKey}
onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
onClose={() => setModal(null)}
/>
)}
{modal?.type === 'image' && (
<ImageLightbox url={modal.url} name={modal.name} onClose={() => setModal(null)} />
<ImageLightbox
url={modal.url}
name={modal.name}
mediaKey={modal.mediaKey}
onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
onClose={() => setModal(null)}
/>
)}
{/* Tag panel */}