versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: ✨ Implement attachment viewer

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-07 18:04:07 +01:00
parent 9098720b49
commit 90c5241de0
No known key found for this signature in database
1 changed files with 57 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
components/notes/attachment.vue
View file

@ -1,19 +1,66 @@
<template> <template>
<Dialog>
<DialogTrigger :as-child="true">
<Card class="w-full h-full overflow-hidden"> <Card class="w-full h-full overflow-hidden">
<img v-if="attachment.type === 'image'" :src="attachment.url" :alt="attachment.description ?? ''" class="w-full h-full object-contain bg-muted/20" /> <img v-if="attachment.type === 'image'" :src="attachment.url" :alt="attachment.description ?? ''"
<video v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :src="attachment.url" :alt="attachment.description ?? ''" class="w-full h-full object-cover bg-muted/20" controls /> class="w-full h-full object-contain bg-muted/20" />
<audio v-else-if="attachment.type === 'audio'" :src="attachment.url" :alt="attachment.description ?? ''" class="w-full h-full object-cover bg-muted/20" controls /> <video v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :src="attachment.url"
:alt="attachment.description ?? ''" class="w-full h-full object-cover bg-muted/20" controls />
<audio v-else-if="attachment.type === 'audio'" :src="attachment.url" :alt="attachment.description ?? ''"
class="w-full h-full object-cover bg-muted/20" controls />
<div v-else class="w-full h-full flex flex-col items-center justify-center bg-muted/20"> <div v-else class="w-full h-full flex flex-col items-center justify-center bg-muted/20">
<File class="size-12" /> <File class="size-12" />
<span class="text-sm"></span> <span class="text-sm"></span>
</div> </div>
</Card> </Card>
</DialogTrigger>
<DialogContent :hide-close="true"
class="fixed inset-0 z-50 w-screen h-screen p-6 duration-200 bg-transparent border-none grid grid-rows-[auto,1fr,auto] overflow-hidden translate-x-0 translate-y-0 max-w-full !animate-none gap-6">
<div class="flex flex-row gap-2 w-full">
<DialogTitle class="sr-only">{{ attachment.type }}</DialogTitle>
<Button as="a" :href="attachment?.url" target="_blank" :download="true" variant="ghost" size="icon" class="[&_svg]:size-6 ml-auto">
<Download />
</Button>
<DialogClose :as-child="true">
<Button variant="ghost" size="icon" class="[&_svg]:size-6">
<X />
</Button>
</DialogClose>
</div>
<div class="flex items-center justify-center overflow-hidden *:max-h-[80vh] *:max-w-[80vh]">
<img v-if="attachment.type === 'image'" :src="attachment.url" :alt="attachment.description ?? ''"
class="object-contain" />
<video v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :src="attachment.url"
:alt="attachment.description ?? ''" class="object-cover" controls />
<audio v-else-if="attachment.type === 'audio'" :src="attachment.url" :alt="attachment.description ?? ''"
class="object-cover" controls />
<div v-else class="flex flex-col items-center justify-center">
<File class="size-12" />
<span class="text-sm"></span>
</div>
</div>
<DialogDescription class="flex items-center justify-center">
<Card v-if="attachment.description" class="p-4 max-w-md max-h-48 overflow-auto">
<p class="text-sm">{{ attachment.description }}</p>
</Card>
</DialogDescription>
</DialogContent>
</Dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { Attachment } from "@versia/client/types"; import type { Attachment } from "@versia/client/types";
import { File } from "lucide-vue-next"; import { Download, File, X } from "lucide-vue-next";
import { Card } from "~/components/ui/card"; import { Card } from "~/components/ui/card";
import { Button } from "../ui/button";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogTitle,
DialogTrigger,
} from "../ui/dialog";
defineProps<{ defineProps<{
attachment: Attachment; attachment: Attachment;