doom scroll and viewer improvements
- move play/pause to clicking the video directly; remove dedicated button - replace emoji mute icons with flat minimal SVGs - add view-in-library button in doom scroll that navigates to the file's directory and opens it in the regular viewer - add display text overlay button in doom scroll and image lightbox; shows extracted text (translated by default when available) in a semi-transparent box at the bottom; toggle between translated/original - hide tag panel by default in image lightbox and video player modal Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Garret Patti
@@ -14,6 +14,7 @@ interface Props {
|
||||
items: DoomScrollItem[]
|
||||
videoContext?: 'mixed' | 'movies' | 'tv'
|
||||
onClose: () => void
|
||||
onViewInLibrary?: (item: DoomScrollItem) => void
|
||||
}
|
||||
|
||||
const HISTORY_CAP = 100
|
||||
@@ -26,7 +27,7 @@ function pickRandom(items: DoomScrollItem[], excludeRecent: DoomScrollItem[]): D
|
||||
return pool[Math.floor(Math.random() * pool.length)]
|
||||
}
|
||||
|
||||
export default function DoomScrollView({ items, videoContext = 'mixed', onClose }: Props) {
|
||||
export default function DoomScrollView({ items, videoContext = 'mixed', onClose, onViewInLibrary }: Props) {
|
||||
const settings = useUserSettings()
|
||||
const settingsMuted = videoContext === 'mixed' ? settings.mixedMuted : videoContext === 'movies' ? settings.moviesMuted : settings.tvMuted
|
||||
|
||||
@@ -40,6 +41,12 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose
|
||||
const [autoPlayEnabled, setAutoPlayEnabled] = useState(false)
|
||||
const [autoPlaySeconds, setAutoPlaySeconds] = useState(5)
|
||||
|
||||
// Text overlay state
|
||||
const [extractedText, setExtractedText] = useState<string | null>(null)
|
||||
const [translatedText, setTranslatedText] = useState<string | null>(null)
|
||||
const [showTextOverlay, setShowTextOverlay] = useState(false)
|
||||
const [showOriginal, setShowOriginal] = useState(false)
|
||||
|
||||
const videoRef = useRef<HTMLVideoElement>(null)
|
||||
const cooldownRef = useRef(false)
|
||||
const touchStartY = useRef<number | null>(null)
|
||||
@@ -48,6 +55,9 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose
|
||||
const isVideo = current?.mediaType === 'video'
|
||||
const backCount = history.length - 1 - historyIndex
|
||||
|
||||
// Derived: what text to display in the overlay
|
||||
const displayText = (translatedText && !showOriginal) ? translatedText : extractedText
|
||||
|
||||
const goNext = useCallback(() => {
|
||||
if (items.length === 0) return
|
||||
setHistoryIndex((idx) => {
|
||||
@@ -114,11 +124,30 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose
|
||||
return () => clearTimeout(id)
|
||||
}, [autoPlayEnabled, isPaused, autoPlaySeconds, current?.url, goNext])
|
||||
|
||||
// Fetch extracted text for current item
|
||||
useEffect(() => {
|
||||
setExtractedText(null)
|
||||
setTranslatedText(null)
|
||||
setShowTextOverlay(false)
|
||||
setShowOriginal(false)
|
||||
if (!current?.itemKey) return
|
||||
fetch(`/api/ai-tagging/fields?itemKey=${encodeURIComponent(current.itemKey)}`)
|
||||
.then((r) => r.json())
|
||||
.then((data: { extractedText: string | null; extractedTextTranslated: string | null }) => {
|
||||
setExtractedText(data.extractedText)
|
||||
setTranslatedText(data.extractedTextTranslated)
|
||||
})
|
||||
.catch(() => {})
|
||||
}, [current?.itemKey])
|
||||
|
||||
useEffect(() => {
|
||||
const handleKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') { onClose(); return }
|
||||
if (e.key === 'ArrowDown' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); navigate('next') }
|
||||
if (e.key === 'ArrowUp' || e.key === 'PageUp') { e.preventDefault(); navigate('prev') }
|
||||
if (e.key === 't' || e.key === 'T') {
|
||||
if (extractedText) setShowTextOverlay((v) => !v)
|
||||
}
|
||||
}
|
||||
const handleWheel = (e: WheelEvent) => {
|
||||
e.preventDefault()
|
||||
@@ -147,7 +176,7 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose
|
||||
document.removeEventListener('touchend', handleTouchEnd)
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}, [navigate, onClose])
|
||||
}, [navigate, onClose, extractedText])
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex flex-col" style={{ backgroundColor: '#000' }}>
|
||||
@@ -219,8 +248,9 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose
|
||||
loop={!autoPlayEnabled}
|
||||
muted={localMuted}
|
||||
playsInline
|
||||
className="max-w-full max-h-full object-contain"
|
||||
className="max-w-full max-h-full object-contain cursor-pointer"
|
||||
style={{ backgroundColor: '#000' }}
|
||||
onClick={() => setIsPaused((v) => !v)}
|
||||
/>
|
||||
) : current?.mediaType === 'image' ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
@@ -233,32 +263,88 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Bottom bar: mute | filename | play-pause */}
|
||||
{/* Text overlay */}
|
||||
{showTextOverlay && displayText && (
|
||||
<div
|
||||
className="absolute bottom-16 left-4 right-4 z-20 rounded-xl p-4"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{extractedText && translatedText && (
|
||||
<div className="flex justify-end mb-2">
|
||||
<button
|
||||
onClick={() => setShowOriginal((v) => !v)}
|
||||
className="text-xs px-2 py-0.5 rounded-full"
|
||||
style={{ backgroundColor: 'rgba(255,255,255,0.15)', color: 'rgba(255,255,255,0.7)' }}
|
||||
>
|
||||
{showOriginal ? 'Show Translation' : 'Show Original'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm whitespace-pre-wrap" style={{ color: 'rgba(255,255,255,0.9)' }}>
|
||||
{displayText}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bottom bar: mute | filename | action buttons */}
|
||||
<div className="absolute bottom-0 left-0 right-0 flex items-center gap-3 px-4 pb-3 pt-2 z-10">
|
||||
<div className="w-9 flex-shrink-0">
|
||||
{isVideo && (
|
||||
<button
|
||||
onClick={() => setLocalMuted((v) => !v)}
|
||||
className="w-9 h-9 rounded-full flex items-center justify-center text-base transition-opacity hover:opacity-100 opacity-70"
|
||||
className="w-9 h-9 rounded-full flex items-center justify-center transition-opacity hover:opacity-100 opacity-70"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: '#fff' }}
|
||||
aria-label={localMuted ? 'Unmute' : 'Mute'}
|
||||
>
|
||||
{localMuted ? '🔇' : '🔊'}
|
||||
{localMuted ? (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
||||
<line x1="23" y1="9" x2="17" y2="15"/>
|
||||
<line x1="17" y1="9" x2="23" y2="15"/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
||||
<path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
|
||||
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<span className="flex-1 text-xs truncate text-center" style={{ color: 'rgba(255,255,255,0.4)' }}>
|
||||
{current?.name}
|
||||
</span>
|
||||
<div className="w-9 flex-shrink-0 flex justify-end">
|
||||
{isVideo && (
|
||||
<div className="flex-shrink-0 flex items-center gap-1">
|
||||
{extractedText && (
|
||||
<button
|
||||
onClick={() => setIsPaused((v) => !v)}
|
||||
className="w-9 h-9 rounded-full flex items-center justify-center text-sm transition-opacity hover:opacity-100 opacity-70"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: '#fff' }}
|
||||
aria-label={isPaused ? 'Play' : 'Pause'}
|
||||
onClick={() => setShowTextOverlay((v) => !v)}
|
||||
className="w-9 h-9 rounded-full flex items-center justify-center transition-opacity hover:opacity-100 opacity-70"
|
||||
style={{
|
||||
backgroundColor: showTextOverlay ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.5)',
|
||||
color: '#fff',
|
||||
}}
|
||||
aria-label={showTextOverlay ? 'Hide text' : 'Show text'}
|
||||
>
|
||||
{isPaused ? '▶' : '⏸'}
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||||
<line x1="3" y1="12" x2="15" y2="12"/>
|
||||
<line x1="3" y1="18" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
{onViewInLibrary && current?.itemKey && (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onViewInLibrary(current) }}
|
||||
className="w-9 h-9 rounded-full flex items-center justify-center transition-opacity hover:opacity-100 opacity-70"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: '#fff' }}
|
||||
aria-label="View in library"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user