gpatti/MediaLore
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify media_key and item_key — use item_key everywhere

Browse Source 
media_key was a lossy shortening of item_key (libraryId:lastSegment) that
introduced a real collision bug: two TV episodes from different series with
the same filename would share the same media_key and each other's tags.

- DB migration converts existing media_tags rows from short format to full
  item_key by joining against media_items; ambiguous/orphaned rows are dropped
- media_tags column renamed media_key → item_key
- Removed itemKeyToMediaKey() from scanner; reconcileAndPrune now passes
  item_key directly to reKeyMediaItem
- DB reader functions (tv, movies, games) now expose item_key on returned
  entities; frontend components use entity.item_key instead of constructing
  the short libraryId:id form
- MixedView now constructs the full mixed_file: item_key format
- Tag API renamed mediaKey param → itemKey throughout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Garret Patti
2026-04-10 18:04:29 -04:00
parent 390ce8fcc6
commit 6f86750a99
20 changed files with 161 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/DoomScrollView.tsx
View File

@@ -7,7 +7,7 @@ export interface DoomScrollItem {
url: string
name: string
mediaType: 'video' | 'image'
mediaKey?: string
itemKey?: string
}
interface Props {

2
src/components/games/GameDetailModal.tsx
View File

@@ -142,7 +142,7 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
<p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--text-secondary)' }}>
Tags
</p>
<TagSelector mediaKey={`${libraryId}:${game.id}`} onTagsChanged={onTagsChanged} />
<TagSelector itemKey={game.item_key!} onTagsChanged={onTagsChanged} />
</div>
</div>
</>

4
src/components/games/GamesView.tsx
View File

@@ -81,7 +81,7 @@ export default function GamesView({ libraryId }: Props) {
if (!searchMatch) return false
if (selectedTagIds.size > 0) {
return item.games.some((g) => {
const gameTags = assignments[`${libraryId}:${g.id}`] ?? []
const gameTags = assignments[g.item_key!] ?? []
return [...selectedTagIds].every((id) => gameTags.includes(id))
})
}
@@ -89,7 +89,7 @@ export default function GamesView({ libraryId }: Props) {
}
if (search && !item.title.toLowerCase().includes(search.toLowerCase())) return false
if (selectedTagIds.size > 0) {
const gameTags = assignments[`${libraryId}:${item.id}`] ?? []
const gameTags = assignments[item.item_key!] ?? []
if (![...selectedTagIds].every((id) => gameTags.includes(id))) return false
}
return true

10
src/components/mixed/ImageLightbox.tsx
View File

@@ -9,14 +9,14 @@ interface Props {
onClose: () => void
onPrev?: () => void
onNext?: () => void
mediaKey?: string
itemKey?: string
onTagsChanged?: () => void
}
export default function ImageLightbox({ url, name, onClose, onPrev, onNext, mediaKey, onTagsChanged }: Props) {
export default function ImageLightbox({ url, name, onClose, onPrev, onNext, itemKey, onTagsChanged }: Props) {
const overlayRef = useRef<HTMLDivElement>(null)
const [showTags, setShowTags] = useState(
() => !!mediaKey && typeof window !== 'undefined' && window.innerWidth >= 1280
() => !!itemKey && typeof window !== 'undefined' && window.innerWidth >= 1280
)
useEffect(() => {
@@ -50,7 +50,7 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, medi
{name}
</span>
<div className="flex items-center gap-2 flex-shrink-0">
{mediaKey && (
{itemKey && (
<button
onClick={(e) => { e.stopPropagation(); setShowTags((v) => !v) }}
className="w-12 h-12 rounded-full flex items-center justify-center text-sm transition-colors"
@@ -125,7 +125,7 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, medi
<p className="text-xs font-semibold uppercase tracking-wider mb-3" style={{ color: 'var(--text-secondary)' }}>
Tags
</p>
<TagSelector mediaKey={mediaKey!} onTagsChanged={onTagsChanged} />
<TagSelector itemKey={itemKey!} onTagsChanged={onTagsChanged} />
</div>
</div>
) : (

28
src/components/mixed/MixedView.tsx
View File

@@ -14,11 +14,11 @@ interface Props {
}
type ModalState =
| { type: 'video'; url: string; name: string; mediaKey: string; mediaIndex: number }
| { type: 'image'; url: string; name: string; mediaKey: string; mediaIndex: number }
| { type: 'video'; url: string; name: string; itemKey: string; mediaIndex: number }
| { type: 'image'; url: string; name: string; itemKey: string; mediaIndex: number }
| null
type TagPanelState = { entry: FileEntry; mediaKey: string } | null
type TagPanelState = { entry: FileEntry; itemKey: string } | null
export default function MixedView({ libraryId, initialPath }: Props) {
const [currentPath, setCurrentPath] = useState(initialPath)
@@ -100,11 +100,11 @@ export default function MixedView({ libraryId, initialPath }: Props) {
fetchRecursive()
}, [filtersActive, fetchRecursive])
const mediaKeyFor = (entry: FileEntry) => {
const itemKeyFor = (entry: FileEntry) => {
// In recursive mode entry.name is already the full relative path from the library root
if (filtersActive) return `${libraryId}:${encodeURIComponent(entry.name)}`
if (filtersActive) return `${libraryId}:mixed_file:${encodeURIComponent(entry.name)}`
const rel = currentPath ? `${currentPath}/${entry.name}` : entry.name
return `${libraryId}:${encodeURIComponent(rel)}`
return `${libraryId}:mixed_file:${encodeURIComponent(rel)}`
}
const sourceEntries = filtersActive ? recursiveEntries : (listing?.entries ?? [])
@@ -112,7 +112,7 @@ export default function MixedView({ libraryId, initialPath }: Props) {
const filteredEntries = sourceEntries.filter((entry) => {
if (search && !entry.name.toLowerCase().includes(search.toLowerCase())) return false
if (selectedTagIds.size > 0 && entry.type !== 'directory') {
const entryTags = assignments[mediaKeyFor(entry)] ?? []
const entryTags = assignments[itemKeyFor(entry)] ?? []
if (![...selectedTagIds].every((id) => entryTags.includes(id))) return false
}
return true
@@ -124,11 +124,11 @@ export default function MixedView({ libraryId, initialPath }: Props) {
const openMediaEntry = (entry: FileEntry, idx: number) => {
if (!entry.url) return
const mediaKey = mediaKeyFor(entry)
const itemKey = itemKeyFor(entry)
if (entry.mediaType === 'video') {
setModal({ type: 'video', url: entry.url, name: entry.name, mediaKey, mediaIndex: idx })
setModal({ type: 'video', url: entry.url, name: entry.name, itemKey, mediaIndex: idx })
} else if (entry.mediaType === 'image') {
setModal({ type: 'image', url: entry.url, name: entry.name, mediaKey, mediaIndex: idx })
setModal({ type: 'image', url: entry.url, name: entry.name, itemKey, mediaIndex: idx })
}
}
@@ -155,7 +155,7 @@ export default function MixedView({ libraryId, initialPath }: Props) {
}
const handleTagEntry = (entry: FileEntry) => {
setTagPanel({ entry, mediaKey: mediaKeyFor(entry) })
setTagPanel({ entry, itemKey: itemKeyFor(entry) })
}
const navigateUp = () => {
@@ -326,7 +326,7 @@ export default function MixedView({ libraryId, initialPath }: Props) {
<VideoPlayerModal
url={modal.url}
name={modal.name}
mediaKey={modal.mediaKey}
itemKey={modal.itemKey}
onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
onClose={() => setModal(null)}
onPrev={modal.mediaIndex > 0 ? () => navigateModal(-1) : undefined}
@@ -337,7 +337,7 @@ export default function MixedView({ libraryId, initialPath }: Props) {
<ImageLightbox
url={modal.url}
name={modal.name}
mediaKey={modal.mediaKey}
itemKey={modal.itemKey}
onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
onClose={() => setModal(null)}
onPrev={modal.mediaIndex > 0 ? () => navigateModal(-1) : undefined}
@@ -378,7 +378,7 @@ export default function MixedView({ libraryId, initialPath }: Props) {
</div>
<div className="px-5 py-4">
<TagSelector
mediaKey={tagPanel.mediaKey}
itemKey={tagPanel.itemKey}
onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
/>
</div>

10
src/components/mixed/VideoPlayerModal.tsx
View File

@@ -10,19 +10,19 @@ interface Props {
onClose: () => void
onPrev?: () => void
onNext?: () => void
mediaKey?: string
itemKey?: string
onTagsChanged?: () => void
context?: 'mixed' | 'movies' | 'tv'
}
export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, mediaKey, onTagsChanged, context = 'mixed' }: Props) {
export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, itemKey, onTagsChanged, context = 'mixed' }: Props) {
const settings = useUserSettings()
const autoPlay = context === 'mixed' ? settings.mixedAutoplay : context === 'movies' ? settings.moviesAutoplay : settings.tvAutoplay
const loop = context === 'mixed' ? settings.mixedLoop : context === 'movies' ? settings.moviesLoop : settings.tvLoop
const muted = context === 'mixed' ? settings.mixedMuted : context === 'movies' ? settings.moviesMuted : settings.tvMuted
const overlayRef = useRef<HTMLDivElement>(null)
const [showTags, setShowTags] = useState(
() => !!mediaKey && typeof window !== 'undefined' && window.innerWidth >= 1280
() => !!itemKey && typeof window !== 'undefined' && window.innerWidth >= 1280
)
useEffect(() => {
@@ -56,7 +56,7 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, m
{name}
</span>
<div className="flex items-center gap-2 flex-shrink-0">
{mediaKey && (
{itemKey && (
<button
onClick={(e) => { e.stopPropagation(); setShowTags((v) => !v) }}
className="w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
@@ -134,7 +134,7 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, m
<p className="text-xs font-semibold uppercase tracking-wider mb-3" style={{ color: 'var(--text-secondary)' }}>
Tags
</p>
<TagSelector mediaKey={mediaKey!} onTagsChanged={onTagsChanged} />
<TagSelector itemKey={itemKey!} onTagsChanged={onTagsChanged} />
</div>
</div>
) : (

4
src/components/movies/MovieDetailModal.tsx
View File

@@ -85,7 +85,7 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
<VideoPlayerModal
url={videoUrl}
name={movie.title}
mediaKey={`${libraryId}:${movie.id}`}
itemKey={movie.item_key!}
onTagsChanged={onTagsChanged}
onClose={() => setPlaying(false)}
onPrev={onPrev}
@@ -288,7 +288,7 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
<p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--text-secondary)' }}>
Tags
</p>
<TagSelector mediaKey={`${libraryId}:${movie.id}`} onTagsChanged={onTagsChanged} />
<TagSelector itemKey={movie.item_key!} onTagsChanged={onTagsChanged} />
</div>
</div>
</div>

2
src/components/movies/MoviesView.tsx
View File

@@ -57,7 +57,7 @@ export default function MoviesView({ libraryId }: Props) {
const filtered = movies.filter((movie) => {
if (search && !movie.title.toLowerCase().includes(search.toLowerCase())) return false
if (selectedTagIds.size > 0) {
const movieTags = assignments[`${libraryId}:${movie.id}`] ?? []
const movieTags = assignments[movie.item_key!] ?? []
if (![...selectedTagIds].every((id) => movieTags.includes(id))) return false
}
return true

14
src/components/tags/TagSelector.tsx
View File

@@ -5,7 +5,7 @@ import type { Tag, TagCategory } from '@/types'
import TagBadge from './TagBadge'
interface Props {
mediaKey: string
itemKey: string
onTagsChanged?: () => void
}
@@ -14,7 +14,7 @@ interface AllTags {
tags: Tag[]
}
export default function TagSelector({ mediaKey, onTagsChanged }: Props) {
export default function TagSelector({ itemKey, onTagsChanged }: Props) {
const [assigned, setAssigned] = useState<{ tags: Tag[]; categories: TagCategory[] }>({
tags: [],
categories: [],
@@ -39,10 +39,10 @@ export default function TagSelector({ mediaKey, onTagsChanged }: Props) {
const [savingCategory, setSavingCategory] = useState(false)
const fetchAssigned = useCallback(() => {
return fetch(`/api/tags/assignments?mediaKey=${encodeURIComponent(mediaKey)}`)
return fetch(`/api/tags/assignments?itemKey=${encodeURIComponent(itemKey)}`)
.then((r) => r.json())
.then((data) => setAssigned(data))
}, [mediaKey])
}, [itemKey])
const fetchAll = useCallback(() => {
return Promise.all([
@@ -66,14 +66,14 @@ export default function TagSelector({ mediaKey, onTagsChanged }: Props) {
try {
if (isAssigned(tag.id)) {
await fetch(
`/api/tags/assignments?mediaKey=${encodeURIComponent(mediaKey)}&tagId=${encodeURIComponent(tag.id)}`,
`/api/tags/assignments?itemKey=${encodeURIComponent(itemKey)}&tagId=${encodeURIComponent(tag.id)}`,
{ method: 'DELETE' }
)
} else {
await fetch('/api/tags/assignments', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ mediaKey, tagId: tag.id }),
body: JSON.stringify({ itemKey, tagId: tag.id }),
})
}
await fetchAssigned()
@@ -106,7 +106,7 @@ export default function TagSelector({ mediaKey, onTagsChanged }: Props) {
fetch('/api/tags/assignments', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ mediaKey, tagId: newTag.id }),
body: JSON.stringify({ itemKey, tagId: newTag.id }),
}),
fetchAll(),
])

14
src/components/tv/TvView.tsx
View File

@@ -31,7 +31,7 @@ export default function TvView({ libraryId }: Props) {
const [seriesEpisodeTags, setSeriesEpisodeTags] = useState<Record<string, string[]>>({})
const [filterRefreshKey, setFilterRefreshKey] = useState(0)
const [showFilters, setShowFilters] = useState(true)
const [tagPanel, setTagPanel] = useState<{ mediaKey: string; title: string } | null>(null)
const [tagPanel, setTagPanel] = useState<{ itemKey: string; title: string } | null>(null)
const [menuOpen, setMenuOpen] = useState(false)
const [confirming, setConfirming] = useState(false)
const [deleting, setDeleting] = useState(false)
@@ -229,7 +229,7 @@ export default function TvView({ libraryId }: Props) {
const filteredSeries = series.filter((s) => {
if (search && !s.title.toLowerCase().includes(search.toLowerCase())) return false
if (selectedTagIds.size > 0) {
const seriesTags = assignments[`${libraryId}:${s.id}`] ?? []
const seriesTags = assignments[s.item_key!] ?? []
const episodeTags = seriesEpisodeTags[s.id] ?? []
const allTags = seriesTags.length === 0 ? episodeTags
: episodeTags.length === 0 ? seriesTags
@@ -242,7 +242,7 @@ export default function TvView({ libraryId }: Props) {
const filteredEpisodes = episodes.filter((ep) => {
if (search && !ep.title.toLowerCase().includes(search.toLowerCase())) return false
if (selectedTagIds.size > 0) {
const epTags = assignments[`${libraryId}:${ep.id}`] ?? []
const epTags = assignments[ep.item_key!] ?? []
if (![...selectedTagIds].every((id) => epTags.includes(id))) return false
}
return true
@@ -256,7 +256,7 @@ export default function TvView({ libraryId }: Props) {
<VideoPlayerModal
url={videoUrl}
name={playingEpisode.title}
mediaKey={`${libraryId}:${playingEpisode.id}`}
itemKey={playingEpisode.item_key!}
onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments(); fetchSeriesEpisodeTags() }}
onClose={() => setPlayingEpisodeIndex(null)}
onPrev={playingEpisodeIndex > 0 ? () => setPlayingEpisodeIndex((i) => (i !== null ? i - 1 : null)) : undefined}
@@ -391,7 +391,7 @@ export default function TvView({ libraryId }: Props) {
<div className="absolute inset-0 flex items-center justify-center text-4xl">📺</div>
)}
<button
onClick={(e) => { e.stopPropagation(); setTagPanel({ mediaKey: `${libraryId}:${s.id}`, title: s.title }) }}
onClick={(e) => { e.stopPropagation(); setTagPanel({ itemKey: s.item_key!, title: s.title }) }}
className="absolute top-2 left-2 w-6 h-6 rounded-full items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity hidden group-hover:flex"
style={{ backgroundColor: 'rgba(0,0,0,0.55)', color: '#fff' }}
aria-label={`Tag ${s.title}`}
@@ -579,7 +579,7 @@ export default function TvView({ libraryId }: Props) {
key={ep.id}
episode={ep}
onClick={() => setPlayingEpisodeIndex(episodes.indexOf(ep))}
onTag={() => setTagPanel({ mediaKey: `${libraryId}:${ep.id}`, title: ep.title })}
onTag={() => setTagPanel({ itemKey: ep.item_key!, title: ep.title })}
/>
))}
</div>
@@ -618,7 +618,7 @@ export default function TvView({ libraryId }: Props) {
</div>
<div className="px-5 py-4">
<TagSelector
mediaKey={tagPanel.mediaKey}
itemKey={tagPanel.itemKey}
onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments(); fetchSeriesEpisodeTags() }}
/>
</div>