lfg2025/archy
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects Releases 44 Wiki Activity

fix: fullscreen video in media lightbox

Browse Source 
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
1 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
neode-ui/src/components/cloud/MediaLightbox.vue
View File

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