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

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