+
+ )
+}
diff --git a/src/components/movies/MoviesView.tsx b/src/components/movies/MoviesView.tsx
new file mode 100644
index 0000000..a19778b
--- /dev/null
+++ b/src/components/movies/MoviesView.tsx
@@ -0,0 +1,169 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import type { Movie } from '@/types'
+import MovieDetailModal from './MovieDetailModal'
+import FilterPanel from '@/components/FilterPanel'
+
+interface Props {
+ libraryId: string
+}
+
+export default function MoviesView({ libraryId }: Props) {
+ const [movies, setMovies] = useState
+ {/* Close button */}
+
+
+ {/* Hero image */}
+
+
+ {heroUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : (
+
+
+ {/* Info */}
+ ๐ฌ
+ )}
+
+
+
+
+
+ {/* Meta row */}
+ {(movie.rating !== null || movie.runtime !== null || movie.genres.length > 0) && (
+ + {movie.title} +
+ {movie.year && ( + + {movie.year} + + )} +
+ {movie.rating !== null && (
+
+ โ
{movie.rating.toFixed(1)}
+
+ )}
+ {movie.runtime !== null && (
+
+ {movie.runtime} min
+
+ )}
+ {movie.genres.map((g) => (
+
+ {g}
+
+ ))}
+
+ )}
+
+ {movie.plot && (
+ + {movie.plot} +
+ )} + + {/* Play button */} + + + {/* Tags */} +
+
+
+ {/* Delete */}
+ + Tags +
+
+ {confirming && (
+
+ + This will permanently delete the folder and all its contents. +
+ )} + {confirming && ( + + )} + +
+
+ )
+}
+
+function LoadingGrid() {
+ return (
+
+
+
+ {loading ? (
+ setSelected(null)}
+ onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
+ onDeleted={handleDeleted}
+ />
+ )}
+
+
+ {error}
+
+ ) : movies.length === 0 ? (
+
+
+ ) : (
+ No movies found
+Each movie should be a folder containing a video file.
+
+ {filtered.map((movie) => (
+
+ ))}
+
+ )}
+
+ {selected && (
+
+ {Array.from({ length: 12 }).map((_, i) => (
+
+ )
+}
diff --git a/src/components/tv/EpisodeCard.tsx b/src/components/tv/EpisodeCard.tsx
new file mode 100644
index 0000000..c59e371
--- /dev/null
+++ b/src/components/tv/EpisodeCard.tsx
@@ -0,0 +1,67 @@
+'use client'
+
+import type { TvEpisode } from '@/types'
+
+interface Props {
+ episode: TvEpisode
+ onClick: () => void
+}
+
+export default function EpisodeCard({ episode, onClick }: Props) {
+ const epLabel = episode.episodeNumber !== null ? `E${String(episode.episodeNumber).padStart(2, '0')}` : null
+
+ return (
+
+ )
+}
diff --git a/src/components/tv/TvView.tsx b/src/components/tv/TvView.tsx
new file mode 100644
index 0000000..6e45a45
--- /dev/null
+++ b/src/components/tv/TvView.tsx
@@ -0,0 +1,421 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import type { TvSeries, TvSeason, TvEpisode } from '@/types'
+import FilterPanel from '@/components/FilterPanel'
+import VideoPlayerModal from '@/components/mixed/VideoPlayerModal'
+import EpisodeCard from './EpisodeCard'
+
+interface Props {
+ libraryId: string
+}
+
+type ViewLevel = 'series' | 'seasons' | 'episodes'
+
+export default function TvView({ libraryId }: Props) {
+ const [view, setView] = useState
+
+
+ ))}
+
+
+
+
+ {/* Breadcrumb */}
+
+ )
+}
+
+function ErrorMsg({ message }: { message: string }) {
+ return (
+
+ {view !== 'series' ? (
+
+ ) : (
+ All Series
+ )}
+ {selectedSeries && (
+ <>
+ /
+ {view === 'episodes' ? (
+
+ ) : (
+
+ {selectedSeries.title}
+
+ )}
+
+ )}
+ {selectedSeason && (
+ <>
+ /
+
+ {selectedSeason.title}
+
+
+ )}
+
+
+ {view === 'series' && (
+
+
+ )}
+
+ {view === 'seasons' && selectedSeries && (
+
+
+
+ {loading ? (
+
+
+
+ ) : (
+ No TV shows found
+Each series should be a folder containing season subdirectories with video files.
+
+ {filteredSeries.map((s) => (
+
+ ))}
+
+ )}
+
+ {/* Series info header */}
+
+ )}
+
+ {view === 'episodes' && selectedSeason && (
+
+ {selectedSeries.posterUrl && (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ )}
+
+
+ {loading ? (
+
+
+ {/* Delete series button */}
+ {selectedSeries.title}
+ {(selectedSeries.year || selectedSeries.genres.length > 0) && ( +
+ {selectedSeries.year && {selectedSeries.year}}
+ {selectedSeries.genres.map((g) => (
+ {g}
+ ))}
+
+ )}
+ {selectedSeries.plot && (
+ {selectedSeries.plot}
+ )} +
+ {confirming && (
+
+ )}
+
+
+
+ No seasons found.
+
+ ) : (
+
+ {seasons.map((season) => (
+
+ ))}
+
+ )}
+
+ {loading ? (
+
+ )}
+
+ No episodes found.
+
+ ) : (
+
+ {episodes.map((ep) => (
+ setPlayingEpisode(ep)}
+ />
+ ))}
+
+ )}
+
+ {message}
+
+ )
+}
+
+function SeriesLoadingGrid() {
+ return (
+
+ {Array.from({ length: 12 }).map((_, i) => (
+
+ )
+}
+
+function SeasonLoadingGrid() {
+ return (
+
+
+
+ ))}
+
+
+
+
+ {Array.from({ length: 6 }).map((_, i) => (
+
+ )
+}
+
+function EpisodeLoadingGrid() {
+ return (
+
+
+
+ ))}
+
+
+
+
+ {Array.from({ length: 8 }).map((_, i) => (
+
+ )
+}
diff --git a/src/lib/db.ts b/src/lib/db.ts
index 4f188e9..1ae1da4 100644
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -41,8 +41,33 @@ function initDb(db: Database.Database): void {
id TEXT PRIMARY KEY,
name TEXT NOT NULL,
path TEXT NOT NULL,
- type TEXT NOT NULL CHECK(type IN ('games', 'mixed')),
+ type TEXT NOT NULL CHECK(type IN ('games', 'mixed', 'movies', 'tv')),
cover_ext TEXT NULL
);
`)
+
+ migrateLibrariesType(db)
+}
+
+function migrateLibrariesType(db: Database.Database): void {
+ const row = db
+ .prepare("SELECT sql FROM sqlite_master WHERE type='table' AND name='libraries'")
+ .get() as { sql: string } | undefined
+
+ if (row && !row.sql.includes("'movies'")) {
+ db.exec(`
+ BEGIN TRANSACTION;
+ CREATE TABLE libraries_new (
+ id TEXT PRIMARY KEY,
+ name TEXT NOT NULL,
+ path TEXT NOT NULL,
+ type TEXT NOT NULL CHECK(type IN ('games', 'mixed', 'movies', 'tv')),
+ cover_ext TEXT NULL
+ );
+ INSERT INTO libraries_new SELECT * FROM libraries;
+ DROP TABLE libraries;
+ ALTER TABLE libraries_new RENAME TO libraries;
+ COMMIT;
+ `)
+ }
}
diff --git a/src/lib/movies.ts b/src/lib/movies.ts
new file mode 100644
index 0000000..72dfd8d
--- /dev/null
+++ b/src/lib/movies.ts
@@ -0,0 +1,110 @@
+import fs from 'fs'
+import path from 'path'
+import type { Movie } from '@/types'
+import { parseMovieNfo } from './nfo'
+
+const HIDDEN_FILES = /^\./
+
+const VIDEO_EXTENSIONS = new Set(['.mkv', '.mp4', '.avi', '.mov', '.m4v', '.wmv', '.ts', '.m2ts'])
+
+function fileApiUrl(libraryId: string, relativePath: string): string {
+ return `/api/file?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(relativePath)}`
+}
+
+function thumbnailApiUrl(libraryId: string, relativePath: string): string {
+ return `/api/thumbnail?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(relativePath)}`
+}
+
+/**
+ * Finds the first file in a directory whose basename (without extension)
+ * matches the given pattern (case-insensitive).
+ */
+function findFile(dir: string, pattern: RegExp): string | null {
+ let entries: string[]
+ try {
+ entries = fs.readdirSync(dir)
+ } catch {
+ return null
+ }
+ return entries.find(
+ (e) => !HIDDEN_FILES.test(e) && pattern.test(path.basename(e, path.extname(e)))
+ ) ?? null
+}
+
+function findVideoFile(dir: string): string | null {
+ let entries: string[]
+ try {
+ entries = fs.readdirSync(dir)
+ } catch {
+ return null
+ }
+ return entries.find(
+ (e) => !HIDDEN_FILES.test(e) && VIDEO_EXTENSIONS.has(path.extname(e).toLowerCase())
+ ) ?? null
+}
+
+function findNfoFile(dir: string, dirName: string): string | null {
+ // Try {dirName}.nfo first, then movie.nfo, then any .nfo
+ const candidates = [`${dirName}.nfo`, 'movie.nfo']
+ let entries: string[]
+ try {
+ entries = fs.readdirSync(dir)
+ } catch {
+ return null
+ }
+ for (const candidate of candidates) {
+ if (entries.find((e) => e.toLowerCase() === candidate.toLowerCase())) {
+ return entries.find((e) => e.toLowerCase() === candidate.toLowerCase())!
+ }
+ }
+ return entries.find((e) => path.extname(e).toLowerCase() === '.nfo') ?? null
+}
+
+export function scanMoviesLibrary(libraryRoot: string, libraryId: string): Movie[] {
+ let dirs: string[]
+ try {
+ dirs = fs
+ .readdirSync(libraryRoot, { withFileTypes: true })
+ .filter((d) => d.isDirectory() && !HIDDEN_FILES.test(d.name))
+ .map((d) => d.name)
+ } catch {
+ return []
+ }
+
+ const movies: Movie[] = []
+
+ for (const dirName of dirs) {
+ const moviePath = path.join(libraryRoot, dirName)
+
+ const videoFile = findVideoFile(moviePath)
+ if (!videoFile) continue
+
+ const nfoFile = findNfoFile(moviePath, dirName)
+ const nfo = nfoFile ? parseMovieNfo(path.join(moviePath, nfoFile)) : null
+
+ const posterFile = findFile(moviePath, /^(poster|cover|folder)$/i)
+ const backdropFile = findFile(moviePath, /^(backdrop|fanart|background)$/i)
+
+ const id = encodeURIComponent(dirName)
+ const videoRelPath = path.join(dirName, videoFile)
+
+ movies.push({
+ id,
+ title: nfo?.title ?? dirName,
+ year: nfo?.year ?? null,
+ plot: nfo?.plot ?? null,
+ rating: nfo?.rating ?? null,
+ genres: nfo?.genres ?? [],
+ runtime: nfo?.runtime ?? null,
+ posterUrl: posterFile
+ ? thumbnailApiUrl(libraryId, path.join(dirName, posterFile))
+ : null,
+ backdropUrl: backdropFile
+ ? fileApiUrl(libraryId, path.join(dirName, backdropFile))
+ : null,
+ videoPath: videoRelPath,
+ })
+ }
+
+ return movies.sort((a, b) => a.title.localeCompare(b.title))
+}
diff --git a/src/lib/nfo.ts b/src/lib/nfo.ts
new file mode 100644
index 0000000..82b8cd7
--- /dev/null
+++ b/src/lib/nfo.ts
@@ -0,0 +1,108 @@
+import fs from 'fs'
+import { XMLParser } from 'fast-xml-parser'
+
+const parser = new XMLParser({ isArray: (name) => name === 'genre' })
+
+function parseFile(filePath: string): Record
+
+
+ ))}
+
+
+
+