From 5b5503b7a6d8a4cc42224d3c09c68dfda0fd8f2a Mon Sep 17 00:00:00 2001
From: Garret Patti <42485635+garretpatti@users.noreply.github.com>
Date: Sun, 5 Apr 2026 18:15:08 -0400
Subject: [PATCH] add user settings

---
 src/app/api/settings/route.ts              |  39 ++++++
 src/app/settings/SettingsForm.tsx          | 136 +++++++++++++++++++++
 src/app/settings/page.tsx                  |  27 ++++
 src/components/HeaderNav.tsx               |  11 +-
 src/components/mixed/VideoPlayerModal.tsx  |  20 +--
 src/components/movies/MovieDetailModal.tsx |   1 +
 src/components/tv/TvView.tsx               |   1 +
 src/hooks/useUserSettings.ts               |  31 +++++
 src/lib/db.ts                              |  13 ++
 src/lib/settings.ts                        |  81 ++++++++++++
 src/types/index.ts                         |  12 ++
 11 files changed, 363 insertions(+), 9 deletions(-)
 create mode 100644 src/app/api/settings/route.ts
 create mode 100644 src/app/settings/SettingsForm.tsx
 create mode 100644 src/app/settings/page.tsx
 create mode 100644 src/hooks/useUserSettings.ts
 create mode 100644 src/lib/settings.ts

diff --git a/src/app/api/settings/route.ts b/src/app/api/settings/route.ts
new file mode 100644
index 0000000..ad18e5b
--- /dev/null
+++ b/src/app/api/settings/route.ts
@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { requireAuth } from '@/lib/auth'
+import { getUserSettings, updateUserSettings } from '@/lib/settings'
+import type { UserSettings } from '@/types'
+
+export async function GET(req: NextRequest) {
+  const auth = await requireAuth(req)
+  if (auth instanceof NextResponse) return auth
+
+  const settings = getUserSettings(auth.session.userId)
+  return NextResponse.json(settings)
+}
+
+export async function PUT(req: NextRequest) {
+  const auth = await requireAuth(req)
+  if (auth instanceof NextResponse) return auth
+
+  let body: unknown
+  try {
+    body = await req.json()
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 })
+  }
+
+  const s = body as Record<string, unknown>
+  const boolFields: (keyof UserSettings)[] = [
+    'mixedAutoplay', 'mixedLoop', 'mixedMuted',
+    'moviesAutoplay', 'moviesLoop', 'moviesMuted',
+    'tvAutoplay', 'tvLoop', 'tvMuted',
+  ]
+  for (const field of boolFields) {
+    if (typeof s[field] !== 'boolean') {
+      return NextResponse.json({ error: `Invalid value for ${field}` }, { status: 400 })
+    }
+  }
+
+  updateUserSettings(auth.session.userId, s as unknown as UserSettings)
+  return NextResponse.json({ ok: true })
+}
diff --git a/src/app/settings/SettingsForm.tsx b/src/app/settings/SettingsForm.tsx
new file mode 100644
index 0000000..96a25c4
--- /dev/null
+++ b/src/app/settings/SettingsForm.tsx
@@ -0,0 +1,136 @@
+'use client'
+
+import { useState } from 'react'
+import type { UserSettings } from '@/types'
+
+interface Props {
+  initialSettings: UserSettings
+}
+
+interface ToggleProps {
+  label: string
+  checked: boolean
+  onChange: (v: boolean) => void
+}
+
+function Toggle({ label, checked, onChange }: ToggleProps) {
+  return (
+    <label className="flex items-center justify-between py-2 cursor-pointer select-none">
+      <span className="text-sm" style={{ color: 'var(--text-primary)' }}>
+        {label}
+      </span>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        onClick={() => onChange(!checked)}
+        className="relative w-10 h-6 rounded-full transition-colors flex-shrink-0"
+        style={{
+          backgroundColor: checked ? 'var(--accent)' : 'var(--border)',
+        }}
+      >
+        <span
+          className="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform"
+          style={{ transform: checked ? 'translateX(16px)' : 'translateX(0)' }}
+        />
+      </button>
+    </label>
+  )
+}
+
+interface SectionProps {
+  title: string
+  icon: string
+  children: React.ReactNode
+}
+
+function SettingsSection({ title, icon, children }: SectionProps) {
+  return (
+    <div
+      className="rounded-xl p-5 mb-4"
+      style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+    >
+      <h2 className="text-sm font-semibold uppercase tracking-wider mb-3 flex items-center gap-2"
+        style={{ color: 'var(--text-secondary)' }}>
+        <span>{icon}</span>
+        {title}
+      </h2>
+      <div className="divide-y" style={{ borderColor: 'var(--border)' }}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default function SettingsForm({ initialSettings }: Props) {
+  const [settings, setSettings] = useState<UserSettings>(initialSettings)
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  function set<K extends keyof UserSettings>(key: K, value: boolean) {
+    setSettings((prev) => ({ ...prev, [key]: value }))
+    setSaved(false)
+  }
+
+  async function handleSave() {
+    setSaving(true)
+    setError(null)
+    try {
+      const res = await fetch('/api/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(settings),
+      })
+      if (!res.ok) throw new Error('Failed to save')
+      setSaved(true)
+    } catch {
+      setError('Failed to save settings. Please try again.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="max-w-md">
+      <SettingsSection title="Mixed Library" icon="🗂️">
+        <Toggle label="Autoplay" checked={settings.mixedAutoplay} onChange={(v) => set('mixedAutoplay', v)} />
+        <Toggle label="Loop" checked={settings.mixedLoop} onChange={(v) => set('mixedLoop', v)} />
+        <Toggle label="Start muted" checked={settings.mixedMuted} onChange={(v) => set('mixedMuted', v)} />
+      </SettingsSection>
+
+      <SettingsSection title="Movies" icon="🎬">
+        <Toggle label="Autoplay" checked={settings.moviesAutoplay} onChange={(v) => set('moviesAutoplay', v)} />
+        <Toggle label="Loop" checked={settings.moviesLoop} onChange={(v) => set('moviesLoop', v)} />
+        <Toggle label="Start muted" checked={settings.moviesMuted} onChange={(v) => set('moviesMuted', v)} />
+      </SettingsSection>
+
+      <SettingsSection title="TV Shows" icon="📺">
+        <Toggle label="Autoplay" checked={settings.tvAutoplay} onChange={(v) => set('tvAutoplay', v)} />
+        <Toggle label="Loop" checked={settings.tvLoop} onChange={(v) => set('tvLoop', v)} />
+        <Toggle label="Start muted" checked={settings.tvMuted} onChange={(v) => set('tvMuted', v)} />
+      </SettingsSection>
+
+      <div className="flex items-center gap-3 mt-2">
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className="px-4 py-2 rounded-lg text-sm font-medium transition-opacity"
+          style={{ backgroundColor: 'var(--accent)', color: '#fff', opacity: saving ? 0.6 : 1 }}
+        >
+          {saving ? 'Saving…' : 'Save Settings'}
+        </button>
+        {saved && (
+          <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+            Saved
+          </span>
+        )}
+        {error && (
+          <span className="text-sm" style={{ color: '#ef4444' }}>
+            {error}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
new file mode 100644
index 0000000..5fbede2
--- /dev/null
+++ b/src/app/settings/page.tsx
@@ -0,0 +1,27 @@
+import { redirect } from 'next/navigation'
+import { getServerSession } from '@/lib/auth'
+import { getUserSettings } from '@/lib/settings'
+import SettingsForm from './SettingsForm'
+
+export default async function SettingsPage() {
+  const session = await getServerSession()
+  if (!session.userId) redirect('/login')
+
+  const settings = getUserSettings(session.userId)
+
+  return (
+    <div className="p-6 max-w-2xl">
+      <h1 className="text-2xl font-semibold mb-1" style={{ color: 'var(--text-primary)' }}>
+        Settings
+      </h1>
+      <p className="text-sm mb-8" style={{ color: 'var(--text-secondary)' }}>
+        Signed in as <strong>{session.username}</strong>
+      </p>
+
+      <h2 className="text-base font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
+        Video Playback
+      </h2>
+      <SettingsForm initialSettings={settings} />
+    </div>
+  )
+}
diff --git a/src/components/HeaderNav.tsx b/src/components/HeaderNav.tsx
index f9fafd0..80f4e76 100644
--- a/src/components/HeaderNav.tsx
+++ b/src/components/HeaderNav.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useRouter } from 'next/navigation'
+import Link from 'next/link'
 import NavLink from './NavLink'
 
 interface Props {
@@ -20,9 +21,15 @@ export default function HeaderNav({ username, isAdmin }: Props) {
   return (
     <div className="flex items-center gap-3">
       {isAdmin && <NavLink href="/manage">Manage</NavLink>}
-      <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+      <Link
+        href="/settings"
+        className="text-sm transition-colors"
+        style={{ 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)')}
+      >
         {username}
-      </span>
+      </Link>
       <button
         onClick={handleLogout}
         className="text-sm px-3 py-1.5 rounded-lg transition-colors"
diff --git a/src/components/mixed/VideoPlayerModal.tsx b/src/components/mixed/VideoPlayerModal.tsx
index a0476cc..52fa1d3 100644
--- a/src/components/mixed/VideoPlayerModal.tsx
+++ b/src/components/mixed/VideoPlayerModal.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState } from 'react'
 import TagSelector from '@/components/tags/TagSelector'
+import { useUserSettings } from '@/hooks/useUserSettings'
 
 interface Props {
   url: string
@@ -9,9 +10,14 @@ interface Props {
   onClose: () => void
   mediaKey?: string
   onTagsChanged?: () => void
+  context?: 'mixed' | 'movies' | 'tv'
 }
 
-export default function VideoPlayerModal({ url, name, onClose, mediaKey, onTagsChanged }: Props) {
+export default function VideoPlayerModal({ url, name, onClose, mediaKey, 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
@@ -86,9 +92,9 @@ export default function VideoPlayerModal({ url, name, onClose, mediaKey, onTagsC
             <video
               src={url}
               controls
-              autoPlay
-              muted
-              loop
+              autoPlay={autoPlay}
+              muted={muted}
+              loop={loop}
               className="w-full h-full object-contain rounded-lg"
               style={{ backgroundColor: '#000' }}
               onClick={(e) => e.stopPropagation()}
@@ -111,9 +117,9 @@ export default function VideoPlayerModal({ url, name, onClose, mediaKey, onTagsC
           <video
             src={url}
             controls
-            autoPlay
-            muted
-            loop
+            autoPlay={autoPlay}
+            muted={muted}
+            loop={loop}
             className="w-full h-full max-w-4xl object-contain rounded-lg"
             style={{ backgroundColor: '#000' }}
             onClick={(e) => e.stopPropagation()}
diff --git a/src/components/movies/MovieDetailModal.tsx b/src/components/movies/MovieDetailModal.tsx
index 4411943..1e8f481 100644
--- a/src/components/movies/MovieDetailModal.tsx
+++ b/src/components/movies/MovieDetailModal.tsx
@@ -72,6 +72,7 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onTagsChan
         mediaKey={`${libraryId}:${movie.id}`}
         onTagsChanged={onTagsChanged}
         onClose={() => setPlaying(false)}
+        context="movies"
       />
     )
   }
diff --git a/src/components/tv/TvView.tsx b/src/components/tv/TvView.tsx
index 3639cfc..a5bfce2 100644
--- a/src/components/tv/TvView.tsx
+++ b/src/components/tv/TvView.tsx
@@ -142,6 +142,7 @@ export default function TvView({ libraryId }: Props) {
         url={videoUrl}
         name={playingEpisode.title}
         onClose={() => setPlayingEpisode(null)}
+        context="tv"
       />
     )
   }
diff --git a/src/hooks/useUserSettings.ts b/src/hooks/useUserSettings.ts
new file mode 100644
index 0000000..a70435d
--- /dev/null
+++ b/src/hooks/useUserSettings.ts
@@ -0,0 +1,31 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import type { UserSettings } from '@/types'
+
+const DEFAULTS: UserSettings = {
+  mixedAutoplay: true,
+  mixedLoop: true,
+  mixedMuted: true,
+  moviesAutoplay: true,
+  moviesLoop: false,
+  moviesMuted: false,
+  tvAutoplay: true,
+  tvLoop: false,
+  tvMuted: false,
+}
+
+export function useUserSettings(): UserSettings {
+  const [settings, setSettings] = useState<UserSettings>(DEFAULTS)
+
+  useEffect(() => {
+    fetch('/api/settings')
+      .then((r) => (r.ok ? r.json() : null))
+      .then((data: UserSettings | null) => {
+        if (data) setSettings(data)
+      })
+      .catch(() => {/* fall back to defaults */})
+  }, [])
+
+  return settings
+}
diff --git a/src/lib/db.ts b/src/lib/db.ts
index 5b8724c..0936ec1 100644
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -58,6 +58,19 @@ function initDb(db: Database.Database): void {
       library_id TEXT NOT NULL REFERENCES libraries(id) ON DELETE CASCADE,
       PRIMARY KEY (user_id, library_id)
     );
+
+    CREATE TABLE IF NOT EXISTS user_settings (
+      user_id         TEXT PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+      mixed_autoplay  INTEGER NOT NULL DEFAULT 1,
+      mixed_loop      INTEGER NOT NULL DEFAULT 1,
+      mixed_muted     INTEGER NOT NULL DEFAULT 1,
+      movies_autoplay INTEGER NOT NULL DEFAULT 1,
+      movies_loop     INTEGER NOT NULL DEFAULT 0,
+      movies_muted    INTEGER NOT NULL DEFAULT 0,
+      tv_autoplay     INTEGER NOT NULL DEFAULT 1,
+      tv_loop         INTEGER NOT NULL DEFAULT 0,
+      tv_muted        INTEGER NOT NULL DEFAULT 0
+    );
   `)
 
   migrateLibrariesType(db)
diff --git a/src/lib/settings.ts b/src/lib/settings.ts
new file mode 100644
index 0000000..395dadc
--- /dev/null
+++ b/src/lib/settings.ts
@@ -0,0 +1,81 @@
+import { getDb } from './db'
+import type { UserSettings } from '@/types'
+
+const DEFAULTS: UserSettings = {
+  mixedAutoplay: true,
+  mixedLoop: true,
+  mixedMuted: true,
+  moviesAutoplay: true,
+  moviesLoop: false,
+  moviesMuted: false,
+  tvAutoplay: true,
+  tvLoop: false,
+  tvMuted: false,
+}
+
+interface SettingsRow {
+  mixed_autoplay: number
+  mixed_loop: number
+  mixed_muted: number
+  movies_autoplay: number
+  movies_loop: number
+  movies_muted: number
+  tv_autoplay: number
+  tv_loop: number
+  tv_muted: number
+}
+
+function rowToSettings(row: SettingsRow): UserSettings {
+  return {
+    mixedAutoplay: row.mixed_autoplay === 1,
+    mixedLoop: row.mixed_loop === 1,
+    mixedMuted: row.mixed_muted === 1,
+    moviesAutoplay: row.movies_autoplay === 1,
+    moviesLoop: row.movies_loop === 1,
+    moviesMuted: row.movies_muted === 1,
+    tvAutoplay: row.tv_autoplay === 1,
+    tvLoop: row.tv_loop === 1,
+    tvMuted: row.tv_muted === 1,
+  }
+}
+
+export function getUserSettings(userId: string): UserSettings {
+  const db = getDb()
+  const row = db
+    .prepare('SELECT * FROM user_settings WHERE user_id = ?')
+    .get(userId) as SettingsRow | undefined
+  return row ? rowToSettings(row) : { ...DEFAULTS }
+}
+
+export function updateUserSettings(userId: string, settings: UserSettings): void {
+  const db = getDb()
+  db.prepare(`
+    INSERT INTO user_settings (
+      user_id,
+      mixed_autoplay, mixed_loop, mixed_muted,
+      movies_autoplay, movies_loop, movies_muted,
+      tv_autoplay, tv_loop, tv_muted
+    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+    ON CONFLICT(user_id) DO UPDATE SET
+      mixed_autoplay  = excluded.mixed_autoplay,
+      mixed_loop      = excluded.mixed_loop,
+      mixed_muted     = excluded.mixed_muted,
+      movies_autoplay = excluded.movies_autoplay,
+      movies_loop     = excluded.movies_loop,
+      movies_muted    = excluded.movies_muted,
+      tv_autoplay     = excluded.tv_autoplay,
+      tv_loop         = excluded.tv_loop,
+      tv_muted        = excluded.tv_muted
+  `).run(
+    userId,
+    settings.mixedAutoplay ? 1 : 0,
+    settings.mixedLoop ? 1 : 0,
+    settings.mixedMuted ? 1 : 0,
+    settings.moviesAutoplay ? 1 : 0,
+    settings.moviesLoop ? 1 : 0,
+    settings.moviesMuted ? 1 : 0,
+    settings.tvAutoplay ? 1 : 0,
+    settings.tvLoop ? 1 : 0,
+    settings.tvMuted ? 1 : 0,
+  )
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 4f2d51f..830332a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -95,3 +95,15 @@ export interface Tag {
   name: string
   categoryId: string
 }
+
+export interface UserSettings {
+  mixedAutoplay: boolean
+  mixedLoop: boolean
+  mixedMuted: boolean
+  moviesAutoplay: boolean
+  moviesLoop: boolean
+  moviesMuted: boolean
+  tvAutoplay: boolean
+  tvLoop: boolean
+  tvMuted: boolean
+}