add tagging to tv

2026-04-05 19:24:28 -04:00
parent 8829188c58
commit 6858c1e8cf
5 changed files with 170 additions and 25 deletions
--- a/src/app/api/browse/route.ts
+++ b/src/app/api/browse/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server'
 import { getLibrary, resolveLibraryRoot } from '@/lib/libraries'
-import { scanDirectory } from '@/lib/files'
+import { scanDirectory, scanDirectoryRecursive } from '@/lib/files'
 import { requireLibraryAccess } from '@/lib/auth'

 export async function GET(request: NextRequest) {
@@ -24,6 +24,9 @@ export async function GET(request: NextRequest) {
  }

  const root = resolveLibraryRoot(library)
-  const listing = scanDirectory(root, libraryId, subpath)
+  const recursive = request.nextUrl.searchParams.get('recursive') === 'true'
+  const listing = recursive
+    ? scanDirectoryRecursive(root, libraryId, subpath)
+    : scanDirectory(root, libraryId, subpath)
  return NextResponse.json(listing)
 }
--- a/src/components/mixed/MixedView.tsx
+++ b/src/components/mixed/MixedView.tsx
@@ -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"
--- a/src/components/tv/EpisodeCard.tsx
+++ b/src/components/tv/EpisodeCard.tsx
@@ -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>
  )
 }
--- a/src/components/tv/TvView.tsx
+++ b/src/components/tv/TvView.tsx
@@ -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>
  )
 }
--- a/src/lib/files.ts
+++ b/src/lib/files.ts
@@ -76,3 +76,55 @@ export function scanDirectory(

  return { path: subpath, entries }
 }
+
+/**
+ * Recursively walks every subdirectory under `subpath` and returns a flat list
+ * of all files. Directory entries are omitted. Each FileEntry.name is the full
+ * relative path from the library root (e.g. FolderA/SubFolder/video.mp4).
+ */
+export function scanDirectoryRecursive(
+  libraryRoot: string,
+  libraryId: string,
+  subpath: string
+): DirectoryListing {
+  let rootAbsPath: string
+  try {
+    rootAbsPath = subpath ? resolveAndJail(libraryRoot, subpath) : libraryRoot
+  } catch {
+    return { path: subpath, entries: [] }
+  }
+
+  const entries: FileEntry[] = []
+
+  function walk(absDir: string, relDir: string): void {
+    let dirents: fs.Dirent[]
+    try {
+      dirents = fs.readdirSync(absDir, { withFileTypes: true })
+    } catch {
+      return
+    }
+    for (const d of dirents) {
+      if (HIDDEN_FILES.test(d.name)) continue
+      const relPath = relDir ? path.join(relDir, d.name) : d.name
+      if (d.isDirectory()) {
+        walk(path.join(absDir, d.name), relPath)
+      } else {
+        const mediaType = getMediaType(d.name)
+        const hasThumbnail = mediaType === 'image' || mediaType === 'video'
+        // name = full relative path from library root so media keys match
+        const fullRelPath = subpath ? path.join(subpath, relPath) : relPath
+        entries.push({
+          name: fullRelPath,
+          type: 'file',
+          mediaType,
+          url: fileApiUrl(libraryId, fullRelPath),
+          thumbnailUrl: hasThumbnail ? thumbnailApiUrl(libraryId, fullRelPath) : null,
+        })
+      }
+    }
+  }
+
+  walk(rootAbsPath, '')
+  entries.sort((a, b) => a.name.localeCompare(b.name))
+  return { path: subpath, entries }
+}