attachments

mrmegatelo · Jan 17, 2025 · f79e06a · f79e06a
1 parent 1eff1eb
commit f79e06a
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 8 deletions.
diff --git a/feed/serializers.py b/feed/serializers.py
@@ -2,7 +2,7 @@
 from rest_framework import serializers
 from rest_framework.relations import PrimaryKeyRelatedField, StringRelatedField
 
-from feed.models import Feed, Collection, FeedItem
+from feed.models import Feed, Collection, FeedItem, Attachment
 
 
 class ExistenceCheckRelatedField(serializers.RelatedField):
@@ -30,9 +30,19 @@ class Meta:
         fields = ["id", "title", "slug", "feeds", "user"]
 
 
+class AttachmentSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Attachment
+        fields = [
+            "type",
+            "url"
+        ]
+
+
 class FeedItemSerializer(serializers.ModelSerializer):
     feed = PrimaryKeyRelatedField(read_only=True)
     actions = StringRelatedField(many=True)
+    attachments = AttachmentSerializer(many=True, read_only=True)
 
     class Meta:
         model = FeedItem
@@ -46,4 +56,5 @@ class Meta:
             "preview",
             "feed",
             "actions",
+            "attachments"
         ]
diff --git a/feed/views/api/feed.py b/feed/views/api/feed.py
@@ -105,6 +105,7 @@ def get_queryset(self):
             self.model.objects.filter(feed__subscribers=self.request.user)
             .prefetch_related("feed")
             .prefetch_related("actions")
+            .prefetch_related("attachments")
         )
 
         queryset = self.apply_type_filters(queryset)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
@@ -1018,6 +1018,7 @@ a:hover {
   max-height: 240px;
   margin: 0 auto;
   border-radius: calc(var(--grid-step) * 1.25);
+  overflow: hidden;
 }
 
 .feed-detail-description {

diff --git a/frontend/src/stores/feed.ts b/frontend/src/stores/feed.ts
@@ -1,6 +1,12 @@
 import { defineStore } from 'pinia'
 
+interface Attachment {
+  url: string;
+  type: 'audio' | 'video' | 'embed'
+}
+
 interface FeedItem {
+  attachments: Attachment[]
   description: string
   has_paid_content: boolean
   link: string

diff --git a/frontend/src/views/FeedItemDetail.vue b/frontend/src/views/FeedItemDetail.vue
@@ -28,16 +28,16 @@ const subscriptionUrl = computed(() => {
 
 function toggleAction(action: string) {
   if (!feedItem.value) {
-    return;
+    return
   }
 
   const appliedActionsSet = new Set(feedItem?.value?.actions)
   const url = new URL(
     '/api/v1/feed/' + route.params.id + '/actions/' + action + '/',
-    window.location.origin,
+    window.location.origin
   )
   const request = new Request(url, {
-    method: appliedActionsSet.has(action) ? 'DELETE' : 'POST',
+    method: appliedActionsSet.has(action) ? 'DELETE' : 'POST'
   })
 
   request.headers.append('X-CSRFToken', getCookie('csrftoken'))
@@ -65,7 +65,7 @@ watch(
 
     toggleAction('view')
   },
-  { immediate: true },
+  { immediate: true }
 )
 </script>
 
@@ -92,9 +92,23 @@ watch(
         </span>
       </button>
     </div>
-    <section v-if="feedItem?.preview" class="feed-detail-section">
+    <section v-if="feedItem?.preview && !feedItem.attachments.length" class="feed-detail-section">
       <img class="feed-detail-preview" :src="feedItem.preview" :alt="feedItem.title" />
     </section>
+    <section v-else-if="feedItem?.attachments.length" class="feed-detail-section">
+      <div class="feed-detail-preview" :key="file.url" v-for="file in feedItem.attachments">
+        <iframe v-if="file.type === 'embed'" class="feed-links-list-item__attachment embed"
+                height="240"
+                type="text/html"
+                loading="lazy"
+                referrerpolicy="strict-origin-when-cross-origin"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen
+                :src="file.url"
+        ></iframe>
+        <audio v-else-if="file.type === 'audio'" :src="file.url" controls></audio>
+      </div>
+    </section>
     <section class="feed-detail-section">
       <h1>{{ feedItem?.title }}</h1>
     </section>
@@ -108,7 +122,9 @@ watch(
         :href="feedItem.link"
         class="button button--ghost button--sm button--outline"
         target="_blank"
-        ><IconLink class="button__icon" />Read on {{ subscriptionUrl }}</a
+      >
+        <IconLink class="button__icon" />
+        Read on {{ subscriptionUrl }}</a
       >
     </div>
   </div>

diff --git a/frontend/templates/spa.html b/frontend/templates/spa.html
@@ -9,7 +9,6 @@
     {% endif %}
     {% load static %}
     {% entrypoint_assets %}
-    <link rel="stylesheet" href="{% static 'feed/styles/main.css' %}">
 </head>
 <body>
 <div id="app"></div>