✨ Attachments

pkg/views/src/components/posts/PostAttachment.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-card variant="tonal" class="max-w-[540px]" :ripple="canLightbox" @click="openLightbox">
+    <div class="content">
+      <img v-if="current.type === 1" :src="getUrl(current)" />
+      <video v-if="current.type === 2" controls class="w-full">
+        <source :src="getUrl(current)"></source>
+      </video>
+    </div>
+
+    <vue-easy-lightbox teleport="#app" :visible="lightbox" :imgs="[getUrl(current)]" @hide="lightbox = false">
+      <template v-slot:close-btn="{ close }">
+        <v-btn class="fixed left-2 top-2" icon="mdi-close" variant="text" color="white" @click="close" />
+      </template>
+    </vue-easy-lightbox>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import VueEasyLightbox from "vue-easy-lightbox"
+
+const props = defineProps<{ attachments: any[] }>()
+
+const lightbox = ref(false)
+const focus = ref(0)
+
+const current = computed(() => props.attachments[focus.value])
+const canLightbox = computed(() => current.value.type === 1)
+
+function getUrl(item: any) {
+  return item.external_url ? item.external_url : `/api/attachments/o/${item.file_id}`
+}
+
+function openLightbox() {
+  if (canLightbox.value) {
+    lightbox.value = true
+  }
+}
+</script>
+
+<style>
+.vel-model {
+  z-index: 10;
+}
+</style>

pkg/views/src/components/posts/PostItem.vue

@@ -18,6 +18,8 @@
 
       <component :is="renderer[props.item?.model_type]" v-bind="props" />
 
+      <post-attachment v-if="props.item?.attachments" :attachments="props.item?.attachments" />
+
       <post-reaction
         size="small"
         :item="props.item"
@@ -34,6 +36,7 @@ import type { Component } from "vue"
 import ArticleContent from "@/components/posts/ArticleContent.vue"
 import MomentContent from "@/components/posts/MomentContent.vue"
 import CommentContent from "@/components/posts/CommentContent.vue"
+import PostAttachment from "./PostAttachment.vue"
 import PostReaction from "@/components/posts/PostReaction.vue"
 
 const props = defineProps<{ item: any; brief?: boolean }>()