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:
parent
bb14490fb7
commit
aae3391ce8
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user