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

viewer-improvements #6

Merged
gpatti merged 3 commits from viewer-improvements into main 2026-04-05 20:32:18 +00:00
Conversation 0 Commits 3 Files Changed 7 +37 -29
2 changed files with 37 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bc77abbd8b - Show all commits

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

@@ -36,12 +36,12 @@ export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChan
return (
<div
ref={overlayRef}
className="fixed inset-0 z-50 flex flex-col items-center justify-center p-4 gap-3"
style={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
className="fixed inset-0 z-50 flex flex-col items-center p-4 gap-3 overflow-hidden max-h-screen"
style={{ backgroundColor: 'rgba(0,0,0,0.9)', height: '100vh', maxHeight: '100vh' }}
onClick={handleOverlayClick}
>
{/* Toolbar */}
<div className={`flex items-center justify-between w-full ${showTags ? '' : 'max-w-4xl'}`}>
<div className={`flex items-center justify-between w-full flex-shrink-0 ${showTags ? '' : 'max-w-4xl'}`}>
<span className="text-sm truncate max-w-[80%]" style={{ color: 'var(--text-secondary)' }}>
{name}
</span>
@@ -80,20 +80,20 @@ export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChan
</div>
{showTags ? (
<div className="flex gap-4 w-full flex-1 min-h-0 items-start">
<div className="flex gap-4 w-full flex-1 min-h-0 items-start overflow-hidden max-h-full">
{/* Image */}
<div className="flex-1 min-w-0 flex items-center justify-center">
<div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-screen">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={url}
alt={name}
className="max-w-full max-h-full object-contain rounded-lg"
className="object-contain rounded-lg"
onClick={(e) => e.stopPropagation()}
/>
</div>
{/* Tag panel */}
<div
className="w-80 flex-shrink-0 rounded-xl overflow-y-auto max-h-[80vh] p-4"
className="w-80 h-full max-h-full flex-shrink-0 rounded-xl overflow-y-auto p-4"
style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
onClick={(e) => e.stopPropagation()}
>
@@ -104,13 +104,15 @@ export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChan
</div>
</div>
) : (
/* eslint-disable-next-line @next/next/no-img-element */
<img
src={url}
alt={name}
className="max-w-full max-h-[80vh] object-contain rounded-lg"
onClick={(e) => e.stopPropagation()}
/>
<div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-full">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={url}
alt={name}
className="max-w-full max-h-full object-contain rounded-lg"
onClick={(e) => e.stopPropagation()}
/>
</div>
)}
</div>
)

36
src/components/mixed/VideoPlayerModal.tsx
View File

@@ -36,12 +36,12 @@ export default function VideoPlayerModal({ url, name, onClose, mediaKey, onTagsC
return (
<div
ref={overlayRef}
className="fixed inset-0 z-50 flex flex-col items-center justify-center p-4 gap-3"
style={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
className="fixed inset-0 z-50 flex flex-col items-center p-4 gap-3 overflow-hidden max-h-screen"
style={{ backgroundColor: 'rgba(0,0,0,0.9)', height: '100vh', maxHeight: '100vh' }}
onClick={handleOverlayClick}
>
{/* Toolbar */}
<div className={`flex items-center justify-between w-full ${showTags ? '' : 'max-w-4xl'}`}>
<div className={`flex items-center justify-between w-full flex-shrink-0 ${showTags ? '' : 'max-w-4xl'}`}>
<span className="text-sm truncate max-w-[80%]" style={{ color: 'var(--text-secondary)' }}>
{name}
</span>
@@ -80,21 +80,23 @@ export default function VideoPlayerModal({ url, name, onClose, mediaKey, onTagsC
</div>
{showTags ? (
<div className="flex gap-4 w-full flex-1 min-h-0 items-start">
<div className="flex gap-4 w-full flex-1 min-h-0 items-start overflow-hidden">
{/* Video */}
<div className="flex-1 min-w-0 flex items-center justify-center">
<div className="flex-1 min-w-0 min-h-0 flex items-center justify-center max-h-full">
<video
src={url}
controls
autoPlay
className="w-full max-h-full rounded-lg"
muted
loop
className="w-full h-full object-contain rounded-lg"
style={{ backgroundColor: '#000' }}
onClick={(e) => e.stopPropagation()}
/>
</div>
{/* Tag panel */}
<div
className="w-80 flex-shrink-0 rounded-xl overflow-y-auto max-h-[80vh] p-4"
className="w-80 h-full max-h-full flex-shrink-0 rounded-xl overflow-y-auto p-4"
style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
onClick={(e) => e.stopPropagation()}
>
@@ -105,14 +107,18 @@ export default function VideoPlayerModal({ url, name, onClose, mediaKey, onTagsC
</div>
</div>
) : (
<video
src={url}
controls
autoPlay
className="w-full max-w-4xl max-h-[80vh] rounded-lg"
style={{ backgroundColor: '#000' }}
onClick={(e) => e.stopPropagation()}
/>
<div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-full">
<video
src={url}
controls
autoPlay
muted
loop
className="w-full h-full max-w-4xl object-contain rounded-lg"
style={{ backgroundColor: '#000' }}
onClick={(e) => e.stopPropagation()}
/>
</div>
)}
</div>
)