add attachment rendering

kitsune-soc · Oct 7, 2023 · 388bf2c · 388bf2c
1 parent 91ed291
commit 388bf2c
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 40 deletions.
diff --git a/kitsune-fe/src/components/BaseTimeline.vue b/kitsune-fe/src/components/BaseTimeline.vue
@@ -24,6 +24,7 @@
             :account="item.account"
             :subject="item.subject"
             :content="item.content"
+            :attachments="item.attachments"
           />
           <!-- Load bearing little div -->
           <!-- Without this div, the height computation is all messed up and the margin of the post gets ignored -->

diff --git a/kitsune-fe/src/components/Post.vue b/kitsune-fe/src/components/Post.vue
@@ -1,26 +1,38 @@
 <template>
   <article class="post">
-    <div class="account-info">
-      <a :href="account.url">
-        <img
-          class="account-info-profile-picture"
-          :src="profilePictureUrl"
-          :alt="`${account.username}'s profile picture`"
-        />
-        <div class="account-info-names">
-          <strong class="account-info-names-displayname">
-            {{ account.displayName ? account.displayName : account.username }}
-          </strong>
-          <span class="account-info-names-username">
-            @{{ account.username }}
-          </span>
-        </div>
-      </a>
-    </div>
+    <a class="account-info" :href="account.url">
+      <img
+        class="account-info-profile-picture"
+        :src="profilePictureUrl"
+        :alt="`${account.username}'s profile picture`"
+      />
+      <div class="account-info-names">
+        <strong class="account-info-names-displayname">
+          {{ account.displayName ? account.displayName : account.username }}
+        </strong>
+        <span class="account-info-names-username">
+          @{{ account.username }}
+        </span>
+      </div>
+    </a>
     <p v-if="subject">
       <strong><span v-html="subject" /></strong>
     </p>
     <span class="post-content" v-html="content" />
+    <div class="post-attachments">
+      <div v-for="attachment in attachments" :title="attachment.description!">
+        <audio
+          v-if="attachment.contentType.startsWith('audio')"
+          :src="attachment.url"
+        />
+        <video
+          v-else-if="attachment.contentType.startsWith('video')"
+          :src="attachment.url"
+          controls
+        />
+        <img v-else :src="attachment.url" :alt="attachment.description!" />
+      </div>
+    </div>
   </article>
 </template>
 
@@ -38,10 +50,17 @@
     url: string;
   };
 
+  export type PostAttachment = {
+    contentType: string;
+    description?: string | null;
+    url: string;
+  };
+
   export type Post = {
     subject?: string | null;
     content: string;
     account: PostAccount;
+    attachments: PostAttachment[];
   };
 
   const props = defineProps<Post>();
@@ -55,37 +74,49 @@
 <style lang="scss" scoped>
   @use '../styles/colours' as *;
 
-  .account-info {
-    display: flex;
-
-    align-items: center;
-    gap: 0.5em;
-    line-height: 100%;
+  .post {
+    border: 1px solid white;
+    border-radius: 3px;
+    padding: 1em;
 
-    &-profile-picture {
-      width: 4em;
-    }
+    background-color: $dark2;
 
-    &-names {
+    & .account-info {
       display: flex;
-      flex-direction: column;
+      align-items: center;
+      gap: 0.5em;
+      line-height: 100%;
 
-      &-displayname {
-        font-size: large;
+      width: fit-content;
+
+      &-profile-picture {
+        width: 3em;
       }
-    }
-  }
 
-  .post {
-    border: 1px solid white;
-    border-radius: 3px;
-    padding: 1em;
+      &-names {
+        display: flex;
+        flex-direction: column;
 
-    background-color: $dark2;
+        &-displayname {
+          font-size: large;
+        }
+      }
+    }
 
     &-content {
       word-wrap: break-word;
       white-space: pre-wrap;
     }
+
+    &-attachments {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 0.25em;
+
+      & * {
+        width: 100%;
+        max-height: 50ch;
+      }
+    }
   }
 </style>
diff --git a/kitsune-fe/src/graphql/timeline.ts b/kitsune-fe/src/graphql/timeline.ts
@@ -22,6 +22,11 @@ function getHome() {
               username
               url
             }
+            attachments {
+              contentType
+              description
+              url
+            }
           }
           pageInfo {
             startCursor

diff --git a/kitsune-fe/src/graphql/types/gql.ts b/kitsune-fe/src/graphql/types/gql.ts
@@ -18,7 +18,7 @@ const documents = {
     types.RegisterUserDocument,
   '\n      query getInstanceInfo {\n        instance {\n          description\n          domain\n          localPostCount\n          registrationsOpen\n          name\n          userCount\n          version\n          captcha {\n            backend\n            key\n          }\n        }\n      }\n    ':
     types.GetInstanceInfoDocument,
-  '\n      query getHomeTimeline {\n        homeTimeline(before: "00000000-0000-0000-0000-000000000000")\n          @_relayPagination(mergeMode: "after") {\n          nodes {\n            id\n            subject\n            content\n            url\n            account {\n              id\n              avatar {\n                url\n              }\n              displayName\n              username\n              url\n            }\n          }\n          pageInfo {\n            startCursor\n            endCursor\n          }\n        }\n      }\n    ':
+  '\n      query getHomeTimeline {\n        homeTimeline(before: "00000000-0000-0000-0000-000000000000")\n          @_relayPagination(mergeMode: "after") {\n          nodes {\n            id\n            subject\n            content\n            url\n            account {\n              id\n              avatar {\n                url\n              }\n              displayName\n              username\n              url\n            }\n            attachments {\n              contentType\n              description\n              url\n            }\n          }\n          pageInfo {\n            startCursor\n            endCursor\n          }\n        }\n      }\n    ':
     types.GetHomeTimelineDocument,
   '\n      mutation registerOauthApplication(\n        $name: String!\n        $redirect_uri: String!\n      ) {\n        registerOauthApplication(name: $name, redirectUri: $redirect_uri) {\n          id\n          secret\n          redirectUri\n        }\n      }\n    ':
     types.RegisterOauthApplicationDocument,
@@ -54,8 +54,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: '\n      query getHomeTimeline {\n        homeTimeline(before: "00000000-0000-0000-0000-000000000000")\n          @_relayPagination(mergeMode: "after") {\n          nodes {\n            id\n            subject\n            content\n            url\n            account {\n              id\n              avatar {\n                url\n              }\n              displayName\n              username\n              url\n            }\n          }\n          pageInfo {\n            startCursor\n            endCursor\n          }\n        }\n      }\n    ',
-): (typeof documents)['\n      query getHomeTimeline {\n        homeTimeline(before: "00000000-0000-0000-0000-000000000000")\n          @_relayPagination(mergeMode: "after") {\n          nodes {\n            id\n            subject\n            content\n            url\n            account {\n              id\n              avatar {\n                url\n              }\n              displayName\n              username\n              url\n            }\n          }\n          pageInfo {\n            startCursor\n            endCursor\n          }\n        }\n      }\n    '];
+  source: '\n      query getHomeTimeline {\n        homeTimeline(before: "00000000-0000-0000-0000-000000000000")\n          @_relayPagination(mergeMode: "after") {\n          nodes {\n            id\n            subject\n            content\n            url\n            account {\n              id\n              avatar {\n                url\n              }\n              displayName\n              username\n              url\n            }\n            attachments {\n              contentType\n              description\n              url\n            }\n          }\n          pageInfo {\n            startCursor\n            endCursor\n          }\n        }\n      }\n    ',
+): (typeof documents)['\n      query getHomeTimeline {\n        homeTimeline(before: "00000000-0000-0000-0000-000000000000")\n          @_relayPagination(mergeMode: "after") {\n          nodes {\n            id\n            subject\n            content\n            url\n            account {\n              id\n              avatar {\n                url\n              }\n              displayName\n              username\n              url\n            }\n            attachments {\n              contentType\n              description\n              url\n            }\n          }\n          pageInfo {\n            startCursor\n            endCursor\n          }\n        }\n      }\n    '];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

diff --git a/kitsune-fe/src/graphql/types/graphql.ts b/kitsune-fe/src/graphql/types/graphql.ts
@@ -305,6 +305,12 @@ export type GetHomeTimelineQuery = {
         url: string;
         avatar?: { __typename?: 'MediaAttachment'; url: string } | null;
       };
+      attachments: Array<{
+        __typename?: 'MediaAttachment';
+        contentType: string;
+        description?: string | null;
+        url: string;
+      }>;
     }>;
     pageInfo: {
       __typename?: 'PageInfo';
@@ -595,6 +601,27 @@ export const GetHomeTimelineDocument = {
                           ],
                         },
                       },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'attachments' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'contentType' },
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'description' },
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'url' },
+                            },
+                          ],
+                        },
+                      },
                     ],
                   },
                 },