add user settings

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