add user settings

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"

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()}

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"
       />
     )
   }

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"
       />
     )
   }