gpatti/MediaLore
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add viewer navigation and doom scroll mode

Browse Source 
- Add prev/next arrow buttons and ArrowLeft/ArrowRight keyboard shortcuts to ImageLightbox and VideoPlayerModal
- Wire prev/next navigation in MixedView (through filtered media entries), TvView (through season episodes), and MoviesView/MovieDetailModal (through filtered movie list)
- Add new DoomScrollView component: fullscreen random-media mode with scroll/swipe/keyboard navigation, 100-item back-history, and per-library mute settings
- Add Doom Scroll button to mixed, movies, and TV library views
- Doom scroll respects active filters: mixed uses filtered entries, movies uses filtered movie list, TV fetches episodes from matching series only

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Garret Patti
2026-04-05 21:34:32 -04:00
parent 334d62e3b3
commit 4f54a7c888
7 changed files with 535 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/mixed/ImageLightbox.tsx
View File

@@ -7,11 +7,13 @@ interface Props {
url: string
name: string
onClose: () => void
onPrev?: () => void
onNext?: () => void
mediaKey?: string
onTagsChanged?: () => void
}
export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChanged }: Props) {
export default function ImageLightbox({ url, name, onClose, onPrev, onNext, mediaKey, onTagsChanged }: Props) {
const overlayRef = useRef<HTMLDivElement>(null)
const [showTags, setShowTags] = useState(
() => !!mediaKey && typeof window !== 'undefined' && window.innerWidth >= 1280
@@ -20,6 +22,8 @@ export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChan
useEffect(() => {
const handleKey = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose()
if (e.key === 'ArrowLeft') onPrev?.()
if (e.key === 'ArrowRight') onNext?.()
}
document.addEventListener('keydown', handleKey)
document.body.style.overflow = 'hidden'
@@ -27,7 +31,7 @@ export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChan
document.removeEventListener('keydown', handleKey)
document.body.style.overflow = ''
}
}, [onClose])
}, [onClose, onPrev, onNext])
const handleOverlayClick = (e: React.MouseEvent) => {
if (e.target === overlayRef.current) onClose()
@@ -83,7 +87,7 @@ export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChan
{showTags ? (
<div className="flex gap-4 w-full flex-1 min-h-0 items-start overflow-hidden max-h-full">
{/* Image */}
<div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-screen">
<div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-screen relative">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={url}
@@ -91,6 +95,26 @@ export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChan
className="object-contain rounded-lg"
onClick={(e) => e.stopPropagation()}
/>
{onPrev && (
<button
onClick={(e) => { e.stopPropagation(); onPrev() }}
className="absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
aria-label="Previous"
>
‹
</button>
)}
{onNext && (
<button
onClick={(e) => { e.stopPropagation(); onNext() }}
className="absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
aria-label="Next"
>
›
</button>
)}
</div>
{/* Tag panel */}
<div
@@ -105,7 +129,7 @@ export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChan
</div>
</div>
) : (
<div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-full">
<div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-full relative">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={url}
@@ -113,6 +137,26 @@ export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChan
className="max-w-full max-h-full object-contain rounded-lg"
onClick={(e) => e.stopPropagation()}
/>
{onPrev && (
<button
onClick={(e) => { e.stopPropagation(); onPrev() }}
className="absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
aria-label="Previous"
>
‹
</button>
)}
{onNext && (
<button
onClick={(e) => { e.stopPropagation(); onNext() }}
className="absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
aria-label="Next"
>
›
</button>
)}
</div>
)}
</div>