diff --git a/neode-ui/src/components/cloud/MediaLightbox.vue b/neode-ui/src/components/cloud/MediaLightbox.vue
index 4515ceff..adc3d483 100644
--- a/neode-ui/src/components/cloud/MediaLightbox.vue
+++ b/neode-ui/src/components/cloud/MediaLightbox.vue
@@ -63,11 +63,13 @@
@@ -126,6 +128,7 @@ const loading = ref(false)
const mediaError = ref(false)
const currentUrl = ref(null)
const backdropEl = ref(null)
+const videoEl = ref(null)
const urlCache = new Map()
@@ -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; }
}