From b364b167ad4c879ea7dec6187e3b1b4421fe2236 Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Tue, 11 Oct 2022 20:46:57 +0000
Subject: [PATCH] Show attachments in quoted posts

---
 src/components/Post.vue           | 39 +++++++++++++++----------------
 src/components/PostAttachment.vue | 30 ++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 20 deletions(-)
 create mode 100644 src/components/PostAttachment.vue

diff --git a/src/components/Post.vue b/src/components/Post.vue
index 168324d..68c640a 100644
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@@ -58,12 +58,12 @@
       </a>
     </div>
     <post-content :post="post"></post-content>
-    <div class="post-attachment" v-if="post.media_attachments.length > 0">
-      <template v-for="attachment in post.media_attachments" :key="attachment.id">
-        <img v-if="attachment.type === 'image'" :src="attachment.url">
-        <video v-else-if="attachment.type === 'video'" :src="attachment.url" controls></video>
-        <a v-else :href="attachment.url">{{ attachment.url }}</a>
-      </template>
+    <div class="post-attachments" v-if="post.media_attachments.length > 0">
+      <post-attachment
+        v-for="attachment in post.media_attachments"
+        :attachment="attachment"
+        :key="attachment.id"
+      ></post-attachment>
     </div>
     <a
       v-if="post.quote"
@@ -81,6 +81,13 @@
         </span>
       </div>
       <post-content :post="post.quote"></post-content>
+      <div class="quote-attachments" v-if="post.quote.media_attachments.length > 0">
+        <post-attachment
+          v-for="attachment in post.quote.media_attachments"
+          :attachment="attachment"
+          :key="attachment.id"
+        ></post-attachment>
+      </div>
     </a>
     <div class="post-footer">
       <router-link
@@ -249,6 +256,7 @@ import {
 import { ProfileWrapper } from "@/api/users"
 import Avatar from "@/components/Avatar.vue"
 import CryptoAddress from "@/components/CryptoAddress.vue"
+import PostAttachment from "@/components/PostAttachment.vue"
 import PostContent from "@/components/PostContent.vue"
 import PostEditor from "@/components/PostEditor.vue"
 import VisibilityIcon from "@/components/VisibilityIcon.vue"
@@ -618,6 +626,11 @@ async function onMintToken() {
   }
 }
 
+.post-attachments,
+.quote-attachments {
+  padding: 0 $block-inner-padding $block-inner-padding;
+}
+
 .post-quote {
   border: 1px solid $separator-color;
   border-radius: $block-border-radius;
@@ -657,20 +670,6 @@ async function onMintToken() {
   }
 }
 
-.post-attachment {
-  padding: 0 $block-inner-padding $block-inner-padding;
-  word-wrap: break-word;
-
-  img {
-    display: block;
-    width: 100%;
-  }
-
-  a {
-    @include block-link;
-  }
-}
-
 .post-footer {
   @include post-icon;
 
diff --git a/src/components/PostAttachment.vue b/src/components/PostAttachment.vue
new file mode 100644
index 0000000..14f1c77
--- /dev/null
+++ b/src/components/PostAttachment.vue
@@ -0,0 +1,30 @@
+<template>
+  <img v-if="attachment.type === 'image'" :src="attachment.url">
+  <video v-else-if="attachment.type === 'video'" :src="attachment.url" controls></video>
+  <a v-else :href="attachment.url">{{ attachment.url }}</a>
+</template>
+
+<script setup lang="ts">
+import { Attachment } from "@/api/posts"
+
+/* eslint-disable-next-line no-undef */
+defineProps<{
+  attachment: Attachment,
+}>()
+</script>
+
+<style scoped lang="scss">
+@import "../styles/theme";
+@import "../styles/mixins";
+
+img {
+  display: block;
+  width: 100%;
+}
+
+a {
+  @include block-link;
+
+  word-wrap: break-word;
+}
+</style>