versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 11:39:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ✨ Add alt text viewer to media

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-07 18:09:34 +01:00
parent 90c5241de0
commit a207dea817
No known key found for this signature in database
5 changed files with 106 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

41
components/notes/attachment.vue
View file

@ -1,24 +1,40 @@
<template>
<Dialog>
<DialogTrigger :as-child="true">
<Card class="w-full h-full overflow-hidden">
<img v-if="attachment.type === 'image'" :src="attachment.url" :alt="attachment.description ?? ''"
<Card class="w-full h-full overflow-hidden relative">
<DialogTrigger v-if="attachment.type === 'image'" :as-child="true">
<img :src="attachment.url" :alt="attachment.description ?? undefined"
class="w-full h-full object-contain bg-muted/20" />
<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">
</DialogTrigger>
<video v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :src="attachment.url"
:alt="attachment.description ?? undefined" class="w-full h-full object-cover bg-muted/20" controls />
<audio v-else-if="attachment.type === 'audio'" :src="attachment.url"
:alt="attachment.description ?? undefined" class="w-full h-full object-cover bg-muted/20" controls />
<DialogTrigger v-else :as-child="true">
<div class="w-full h-full flex flex-col items-center justify-center bg-muted/20">
<File class="size-12" />
<span class="text-sm"></span>
</div>
</Card>
</DialogTrigger>
</DialogTrigger>
<!-- Alt text viewer -->
<Popover v-if="attachment.description">
<div class="absolute top-0 right-0 p-2">
<PopoverTrigger :as-child="true">
<Button variant="outline" size="icon" class="[&_svg]:size-6">
<Captions />
</Button>
</PopoverTrigger>
</div>
<PopoverContent>
<p class="text-sm">{{ attachment.description }}</p>
</PopoverContent>
</Popover>
</Card>
<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">
<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">
@ -50,7 +66,7 @@
<script lang="ts" setup>
import type { Attachment } from "@versia/client/types";
import { Download, File, X } from "lucide-vue-next";
import { Captions, Download, File, X } from "lucide-vue-next";
import { Card } from "~/components/ui/card";
import { Button } from "../ui/button";
import {
@ -61,6 +77,7 @@ import {
DialogTitle,
DialogTrigger,
} from "../ui/dialog";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
defineProps<{
attachment: Attachment;