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

scaling tweaks

Browse Source
This commit is contained in:
Garret Patti
2026-04-05 16:03:51 -04:00
parent 427aade21a
commit bc77abbd8b
2 changed files with 37 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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