feat(rss-feed): add optional poster (#5452)

packages/api/src/router/test/widgets/rssFeed.spec.ts

@@ -208,6 +208,7 @@ async function setupUrlRestrictionAsync(dbUrls: string[]) {
               hideDescription: false,
               textLinesClamp: 3,
               maximumAmountPosts: 5,
+              showPosterImage: true,
             } satisfies WidgetComponentProps<"rssFeed">["options"]),
           }) satisfies InferInsertModel<typeof items>,
       ),

packages/old-import/src/widgets/options.ts

@@ -122,6 +122,7 @@ const optionMapping: OptionMapping = {
     maximumAmountPosts: (oldOptions) => oldOptions.maximumAmountOfPosts,
     textLinesClamp: (oldOptions) => oldOptions.textLinesClamp,
     hideDescription: () => undefined,
+    showPosterImage: () => true, // This was the default in oldmarr
   },
   notebook: {
     allowReadOnlyCheck: (oldOptions) => oldOptions.allowReadOnlyCheck,

packages/translation/src/lang/en.json

@@ -2516,6 +2516,9 @@
         },
         "hideDescription": {
           "label": "Hide description"
+        },
+        "showPosterImage": {
+          "label": "Show poster image"
         }
       }
     },

packages/widgets/src/rssFeed/component.tsx

@@ -39,7 +39,7 @@ const useLiveFeedEntries = (input: RouterInputs["widget"]["rssFeed"]["getFeeds"]
   return feedEntries;
 };
 
-export default function RssFeed({ options }: WidgetComponentProps<"rssFeed">) {
+export default function RssFeed({ options, width }: WidgetComponentProps<"rssFeed">) {
   const feedEntries = useLiveFeedEntries({
     urls: options.feedUrls,
     maximumAmountPosts: typeof options.maximumAmountPosts === "number" ? options.maximumAmountPosts : 100,
@@ -49,6 +49,8 @@ export default function RssFeed({ options }: WidgetComponentProps<"rssFeed">) {
 
   const languageDir = options.enableRtl ? "RTL" : "LTR";
 
+  const isNarrow = width < 128 * 3;
+
   return (
     <ScrollArea className="scroll-area-w100" w="100%" p="sm">
       <Stack w={"100%"} gap="sm">
@@ -63,27 +65,33 @@ export default function RssFeed({ options }: WidgetComponentProps<"rssFeed">) {
             w="100%"
             p="sm"
           >
-            {feedEntry.enclosure && (
+            {feedEntry.enclosure !== undefined && (
               <Image className={classes.backgroundImage} src={feedEntry.enclosure} alt="backdrop" />
             )}
 
-            <Flex gap="sm" direction="column" w="100%">
-              <Text dir={languageDir} fz="sm" lh="sm" lineClamp={2}>
-                {feedEntry.title}
-              </Text>
-              {!options.hideDescription && feedEntry.description && (
-                <Text
-                  className={feedEntry.description}
-                  dir={languageDir}
-                  c="dimmed"
-                  size="sm"
-                  lineClamp={options.textLinesClamp}
-                  dangerouslySetInnerHTML={{ __html: feedEntry.description }}
-                />
+            <Group wrap="nowrap">
+              {feedEntry.enclosure !== undefined && options.showPosterImage && !isNarrow && (
+                <Image src={feedEntry.enclosure} alt={feedEntry.title} w={140} h={140} radius="sm" />
               )}
 
-              {feedEntry.published && <InfoDisplay date={dayjs(feedEntry.published).fromNow()} />}
-            </Flex>
+              <Flex gap="sm" direction="column" w="100%">
+                <Text dir={languageDir} fz="sm" lh="sm" lineClamp={2}>
+                  {feedEntry.title}
+                </Text>
+                {!options.hideDescription && feedEntry.description && (
+                  <Text
+                    className={feedEntry.description}
+                    dir={languageDir}
+                    c="dimmed"
+                    size="sm"
+                    lineClamp={options.textLinesClamp}
+                    dangerouslySetInnerHTML={{ __html: feedEntry.description }}
+                  />
+                )}
+
+                {feedEntry.published && <InfoDisplay date={dayjs(feedEntry.published).fromNow()} />}
+              </Flex>
+            </Group>
           </Card>
         ))}
       </Stack>

packages/widgets/src/rssFeed/index.ts

@@ -32,6 +32,9 @@ export const { definition, componentLoader } = createWidgetDefinition("rssFeed",
       hideDescription: factory.switch({
         defaultValue: false,
       }),
+      showPosterImage: factory.switch({
+        defaultValue: false,
+      }),
     }));
   },
 }).withDynamicImport(() => import("./component"));