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

add tagging to tv

Browse Source
This commit is contained in:
Garret Patti
2026-04-05 19:24:28 -04:00
parent 8829188c58
commit 6858c1e8cf
5 changed files with 170 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,6 +31,9 @@ export default function MixedView({ libraryId, initialPath }: Props) {
const [assignments, setAssignments] = useState<Record<string, string[]>>({})
const [filterRefreshKey, setFilterRefreshKey] = useState(0)
const [showFilters, setShowFilters] = useState(true)
const [recursiveEntries, setRecursiveEntries] = useState<FileEntry[]>([])
const [recursiveLoading, setRecursiveLoading] = useState(false)
const [recursiveLoaded, setRecursiveLoaded] = useState(false)
const toggleTag = (tagId: string) =>
setSelectedTagIds((prev) => {
@@ -73,6 +76,29 @@ export default function MixedView({ libraryId, initialPath }: Props) {
useEffect(() => { fetchAssignments() }, [fetchAssignments])
const filtersActive = search !== '' || selectedTagIds.size > 0
// Fetch the full recursive listing the first time any filter becomes active
useEffect(() => {
if (!filtersActive || recursiveLoaded || recursiveLoading) return
setRecursiveLoading(true)
fetch(`/api/browse?libraryId=${encodeURIComponent(libraryId)}&path=&recursive=true`)
.then((r) => r.json())
.then((data: DirectoryListing) => {
setRecursiveEntries(data.entries)
setRecursiveLoaded(true)
})
.catch(() => {})
.finally(() => setRecursiveLoading(false))
}, [filtersActive, libraryId, recursiveLoaded, recursiveLoading])
const mediaKeyFor = (entry: FileEntry) => {
// In recursive mode entry.name is already the full relative path from the library root
if (filtersActive) return `${libraryId}:${encodeURIComponent(entry.name)}`
const rel = currentPath ? `${currentPath}/${entry.name}` : entry.name
return `${libraryId}:${encodeURIComponent(rel)}`
}
const handleEntry = (entry: FileEntry) => {
if (entry.type === 'directory') {
const newPath = currentPath ? `${currentPath}/${entry.name}` : entry.name
@@ -85,15 +111,12 @@ export default function MixedView({ libraryId, initialPath }: Props) {
} else if (entry.mediaType === 'image') {
setModal({ type: 'image', url: entry.url, name: entry.name, mediaKey: mediaKeyFor(entry) })
} else {
// Download other file types
window.open(entry.url, '_blank')
}
}
const handleTagEntry = (entry: FileEntry) => {
const relativePath = currentPath ? `${currentPath}/${entry.name}` : entry.name
const mediaKey = `${libraryId}:${encodeURIComponent(relativePath)}`
setTagPanel({ entry, mediaKey })
setTagPanel({ entry, mediaKey: mediaKeyFor(entry) })
}
const navigateUp = () => {
@@ -107,12 +130,9 @@ export default function MixedView({ libraryId, initialPath }: Props) {
? currentPath.split('/').filter(Boolean)
: []
const mediaKeyFor = (entry: FileEntry) => {
const rel = currentPath ? `${currentPath}/${entry.name}` : entry.name
return `${libraryId}:${encodeURIComponent(rel)}`
}
const sourceEntries = filtersActive ? recursiveEntries : (listing?.entries ?? [])
const filteredEntries = (listing?.entries ?? []).filter((entry) => {
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)] ?? []
@@ -121,8 +141,6 @@ export default function MixedView({ libraryId, initialPath }: Props) {
return true
})
const filtersActive = search !== '' || selectedTagIds.size > 0
return (
<>
<div className="flex items-center gap-2 mb-4">
@@ -184,23 +202,23 @@ export default function MixedView({ libraryId, initialPath }: Props) {
})}
</nav>
{loading && <LoadingSkeleton />}
{(loading || recursiveLoading) && <LoadingSkeleton />}
{error && (
<div className="rounded-lg border p-8 text-center" style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}>
{error}
</div>
)}
{!loading && !error && listing && (
{!loading && !recursiveLoading && !error && (filtersActive || listing) && (
<>
{filteredEntries.length === 0 ? (
<div className="rounded-lg border p-12 text-center" style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}>
This folder is empty.
{filtersActive ? 'No results found.' : 'This folder is empty.'}
</div>
) : (
<div className="grid gap-2 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
{/* Up button */}
{breadcrumbs.length > 0 && (
{/* Up button — hidden during recursive search */}
{!filtersActive && breadcrumbs.length > 0 && (
<button
onClick={navigateUp}
className="flex flex-col items-center justify-center gap-2 rounded-xl border p-4 text-xs transition-colors"

24
src/components/tv/EpisodeCard.tsx
View File

@@ -5,15 +5,19 @@ import type { TvEpisode } from '@/types'
interface Props {
episode: TvEpisode
onClick: () => void
onTag?: () => void
}
export default function EpisodeCard({ episode, onClick }: Props) {
export default function EpisodeCard({ episode, onClick, onTag }: Props) {
const epLabel = episode.episodeNumber !== null ? `E${String(episode.episodeNumber).padStart(2, '0')}` : null
return (
<button
<div
role="button"
tabIndex={0}
onClick={onClick}
className="group text-left rounded-xl overflow-hidden border transition-all focus:outline-none focus-visible:ring-2"
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick() } }}
className="group text-left rounded-xl overflow-hidden border transition-all focus:outline-none focus-visible:ring-2 cursor-pointer"
style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)' }}
onMouseEnter={(e) => {
;(e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'
@@ -42,6 +46,18 @@ export default function EpisodeCard({ episode, onClick }: Props) {
>
<span className="text-3xl text-white">▶</span>
</div>
{/* Tag button */}
{onTag && (
<button
onClick={(e) => { e.stopPropagation(); onTag() }}
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 ${episode.title}`}
title="Tags"
>
🏷
</button>
)}
</div>
<div className="p-2">
{epLabel && (
@@ -62,6 +78,6 @@ export default function EpisodeCard({ episode, onClick }: Props) {
</p>
)}
</div>
</button>
</div>
)
}

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

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState, useCallback } from 'react'
import type { TvSeries, TvSeason, TvEpisode } from '@/types'
import FilterPanel from '@/components/FilterPanel'
import VideoPlayerModal from '@/components/mixed/VideoPlayerModal'
import TagSelector from '@/components/tags/TagSelector'
import EpisodeCard from './EpisodeCard'
interface Props {
@@ -27,6 +28,7 @@ export default function TvView({ libraryId }: Props) {
const [assignments, setAssignments] = 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 [menuOpen, setMenuOpen] = useState(false)
const [confirming, setConfirming] = useState(false)
const [deleting, setDeleting] = useState(false)
@@ -141,6 +143,8 @@ export default function TvView({ libraryId }: Props) {
<VideoPlayerModal
url={videoUrl}
name={playingEpisode.title}
mediaKey={`${libraryId}:${playingEpisode.id}`}
onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
onClose={() => setPlayingEpisode(null)}
context="tv"
/>
@@ -225,10 +229,13 @@ export default function TvView({ libraryId }: Props) {
) : (
<div className="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
{filteredSeries.map((s) => (
<button
<div
key={s.id}
role="button"
tabIndex={0}
onClick={() => openSeries(s)}
className="group text-left rounded-xl overflow-hidden border transition-all focus:outline-none focus-visible:ring-2"
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openSeries(s) } }}
className="group text-left rounded-xl overflow-hidden border transition-all focus:outline-none focus-visible:ring-2 cursor-pointer"
style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)' }}
onMouseEnter={(e) => {
;(e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'
@@ -246,6 +253,15 @@ 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 }) }}
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}`}
title="Tags"
>
🏷
</button>
</div>
<div className="p-2">
<p className="text-xs font-medium truncate leading-tight" style={{ color: 'var(--text-primary)' }} title={s.title}>
@@ -255,7 +271,7 @@ export default function TvView({ libraryId }: Props) {
{s.year ? `${s.year} · ` : ''}{s.seasonCount} season{s.seasonCount !== 1 ? 's' : ''}
</p>
</div>
</button>
</div>
))}
</div>
)}
@@ -416,12 +432,52 @@ export default function TvView({ libraryId }: Props) {
key={ep.id}
episode={ep}
onClick={() => setPlayingEpisode(ep)}
onTag={() => setTagPanel({ mediaKey: `${libraryId}:${ep.id}`, title: ep.title })}
/>
))}
</div>
)}
</div>
)}
{tagPanel && (
<div
className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4"
style={{ backgroundColor: 'rgba(0,0,0,0.6)' }}
onClick={(e) => { if (e.target === e.currentTarget) setTagPanel(null) }}
>
<div
className="w-full max-w-md rounded-2xl shadow-2xl overflow-hidden"
style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
>
<div className="flex items-center justify-between px-5 py-4" style={{ borderBottom: '1px solid var(--border)' }}>
<div className="min-w-0">
<p className="text-xs font-semibold uppercase tracking-wider mb-0.5" style={{ color: 'var(--text-secondary)' }}>
Tags
</p>
<p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>
{tagPanel.title}
</p>
</div>
<button
onClick={() => setTagPanel(null)}
className="ml-4 w-8 h-8 flex-shrink-0 rounded-full flex items-center justify-center text-sm transition-colors"
style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
aria-label="Close"
>
✕
</button>
</div>
<div className="px-5 py-4">
<TagSelector
mediaKey={tagPanel.mediaKey}
onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments(); setTagPanel(null) }}
/>
</div>
</div>
</div>
)}
</div>
)
}