fix: fullscreen video in media lightbox

Video fills entire viewport with no padding/border-radius. Double-click
toggles native fullscreen. Reduced padding for all media types.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian 2026-04-11 23:38:36 -04:00
parent bb14490fb7
commit aae3391ce8

View File

@ -63,11 +63,13 @@
<!-- Video -->
<video
v-else-if="currentItem && currentUrl && isVideoFile(currentItem)"
ref="videoEl"
:src="currentUrl"
:key="currentUrl"
class="lightbox-media-video"
controls
autoplay
@dblclick="toggleFullscreen"
@error="onMediaError"
/>
@ -126,6 +128,7 @@ const loading = ref(false)
const mediaError = ref(false)
const currentUrl = ref<string | null>(null)
const backdropEl = ref<HTMLElement | null>(null)
const videoEl = ref<HTMLVideoElement | null>(null)
const urlCache = new Map<string, string>()
@ -207,6 +210,16 @@ function close() {
emit('close')
}
function toggleFullscreen() {
const el = videoEl.value
if (!el) return
if (document.fullscreenElement) {
document.exitFullscreen()
} else {
el.requestFullscreen().catch(() => {})
}
}
function onMediaError() {
mediaError.value = true
loading.value = false
@ -326,7 +339,7 @@ onUnmounted(() => {
justify-content: center;
width: 100%;
height: 100%;
padding: 4rem 5rem;
padding: 3.5rem 1rem;
}
.lightbox-media-img {
@ -338,11 +351,12 @@ onUnmounted(() => {
}
.lightbox-media-video {
max-width: 100%;
max-height: 100%;
border-radius: 0.75rem;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0;
background: black;
cursor: pointer;
}
.lightbox-audio-container {
@ -386,10 +400,11 @@ onUnmounted(() => {
/* Mobile */
@media (max-width: 768px) {
.lightbox-content { padding: 3.5rem 1rem; }
.lightbox-content { padding: 3rem 0; }
.lightbox-nav { width: 2.5rem; height: 2.5rem; }
.lightbox-nav-prev { left: 0.5rem; }
.lightbox-nav-next { right: 0.5rem; }
.lightbox-audio-artwork { width: 8rem; height: 8rem; }
.lightbox-media-video { border-radius: 0; }
}
</style>