![]()
{
v-for="gif in displayedGifs"
:key="gif.id"
class="group relative cursor-pointer overflow-hidden rounded-xl border-2 border-foreground bg-muted shadow-2xs transition-all hover:-translate-y-0.5 hover:shadow-md"
- @click="previewImage = gif.url_original"
+ @click="previewGiphyGif(gif)"
>
![]()
@@ -900,6 +924,6 @@ onUnmounted(() => {
:cancel="trans('assets.delete.cancel')"
/>
-
+
diff --git a/resources/js/components/posts/editor/PostEditorComposer.vue b/resources/js/components/posts/editor/PostEditorComposer.vue
index 195e5bb9..32089152 100644
--- a/resources/js/components/posts/editor/PostEditorComposer.vue
+++ b/resources/js/components/posts/editor/PostEditorComposer.vue
@@ -71,18 +71,18 @@ const signaturesModal = ref
| null>(null);
const dragMediaIndex = ref(null);
const dragOverIndex = ref(null);
const mediaThumbRefs = ref([]);
-const previewIndex = ref(null);
-
-const previewItems = computed<{ url: string; type: 'image' | 'video' }[]>(() =>
- media.value.map((m) => ({
- url: m.url,
- type: isVideo(m) ? 'video' : 'image',
- })),
-);
+const lightbox = ref | null>(null);
const openPreview = (item: MediaItem) => {
const idx = media.value.findIndex((m) => m.id === item.id);
- previewIndex.value = idx >= 0 ? idx : 0;
+ if (idx < 0) return;
+ lightbox.value?.openCollection(
+ media.value.map((m) => ({
+ url: m.url,
+ type: isVideo(m) ? 'video' as const : 'image' as const,
+ })),
+ idx,
+ );
};
const isVideo = (item: MediaItem): boolean =>
@@ -434,11 +434,6 @@ const issueLabel = (reason: string): string => trans(`posts.form.warnings.${reas
-
+