diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue index ec2e049f..6c0e35fd 100644 --- a/components/account/AccountHeader.vue +++ b/components/account/AccountHeader.vue @@ -45,11 +45,21 @@ function getFieldNameIcon(fieldName: string) { } function previewHeader() { - openImagePreviewDialog({ src: account.header, alt: `${account.username}'s profile header` }) + openMediaPreview([{ + id: `${account.acct}:header`, + type: 'image', + previewUrl: account.header, + description: `${account.username}'s profile header`, + }]) } function previewAvatar() { - openImagePreviewDialog({ src: account.avatar, alt: account.username }) + openMediaPreview([{ + id: `${account.acct}:avatar`, + type: 'image', + previewUrl: account.avatar, + description: `${account.username}'s avatar`, + }]) } watchEffect(() => { diff --git a/components/modal/ModalContainer.vue b/components/modal/ModalContainer.vue index b1d51656..312ea91c 100644 --- a/components/modal/ModalContainer.vue +++ b/components/modal/ModalContainer.vue @@ -1,7 +1,7 @@ + + + + + {{ mediaPreviewIndex + 1 }} / {{ mediaPreviewList.length }} + + + + + + + + + + diff --git a/components/status/StatusAttachment.vue b/components/status/StatusAttachment.vue index dfa537a2..b1031db9 100644 --- a/components/status/StatusAttachment.vue +++ b/components/status/StatusAttachment.vue @@ -4,6 +4,7 @@ import type { Attachment } from 'masto' const { attachment } = defineProps<{ attachment: Attachment + attachments?: Attachment[] }>() const src = $computed(() => attachment.remoteUrl || attachment.url || attachment.previewUrl!) @@ -62,10 +63,7 @@ const aspectRatio = computed(() => { focus:ring="2 primary inset" rounded-lg aria-label="Open image preview dialog" - @click="openImagePreviewDialog({ - src, - alt: attachment.description!, - })" + @click="openMediaPreview(attachments ? attachments : [attachment], attachments?.indexOf(attachment) || 0)" > - + diff --git a/composables/dialog.ts b/composables/dialog.ts index 590b2c3e..9dbe5e82 100644 --- a/composables/dialog.ts +++ b/composables/dialog.ts @@ -1,20 +1,24 @@ -import type { StatusEdit } from 'masto' +import type { Attachment, StatusEdit } from 'masto' import type { Draft } from './statusDrafts' import { STORAGE_KEY_FIRST_VISIT, STORAGE_KEY_ZEN_MODE } from '~/constants' -export const imagePreview = ref({ src: '', alt: '' }) +export const mediaPreviewList = ref([]) +export const mediaPreviewIndex = ref(0) + export const statusEdit = ref() export const dialogDraftKey = ref() + export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, !process.mock) export const isZenMode = useLocalStorage(STORAGE_KEY_ZEN_MODE, false) -export const toggleZenMode = useToggle(isZenMode) export const isSigninDialogOpen = ref(false) export const isPublishDialogOpen = ref(false) -export const isImagePreviewDialogOpen = ref(false) +export const isMediaPreviewOpen = ref(false) export const isEditHistoryDialogOpen = ref(false) export const isPreviewHelpOpen = ref(isFirstVisit.value) +export const toggleZenMode = useToggle(isZenMode) + export function openSigninDialog() { isSigninDialogOpen.value = true } @@ -46,9 +50,14 @@ if (isPreviewHelpOpen.value) { }) } -export function openImagePreviewDialog(image: { src: string; alt: string }) { - imagePreview.value = image - isImagePreviewDialogOpen.value = true +export function openMediaPreview(attachments: Attachment[], index = 0) { + mediaPreviewList.value = attachments + mediaPreviewIndex.value = index + isMediaPreviewOpen.value = true +} + +export function closeMediaPreview() { + isMediaPreviewOpen.value = false } export function openEditHistoryDialog(edit: StatusEdit) {