feature: rss improvements (#1810)

public/locales/en/modules/rss.json

@@ -17,6 +17,9 @@
       },
       "textLinesClamp": {
         "label": "Text lines clamp"
+      },
+      "sortByPublishDateAscending": {
+        "label": "Sort by publish date (ascending)"
       }
     },
     "card": {

src/server/api/routers/rss.ts

@@ -15,6 +15,11 @@ type CustomItem = {
   enclosure: {
     url: string;
   };
+  'media:group'?: {
+    'media:description'?: string;
+    'media:thumbnail'?: string;
+  },
+  pubDate?: string;
 };
 
 const rssFeedResultObjectSchema = z
@@ -38,7 +43,7 @@ const rssFeedResultObjectSchema = z
             categories: z.array(z.string()).or(z.undefined()),
             title: z.string(),
             content: z.string(),
-            pubDate: z.string().optional(),
+            pubDate: z.date().optional(),
           }),
         ),
       }),
@@ -73,13 +78,11 @@ export const rssRouter = createTRPCRouter({
         return [];
       }
 
-      const result = await Promise.all(
+      return await Promise.all(
         input.feedUrls.map(async (feedUrl) =>
           getFeedUrl(feedUrl, rssWidget.properties.dangerousAllowSanitizedItemContent),
         ),
       );
-
-      return result;
     }),
 });
 
@@ -97,7 +100,12 @@ const getFeedUrl = async (feedUrl: string, dangerousAllowSanitizedItemContent: b
           title: string;
           content: string;
           'content:encoded': string;
+          'media:group'?: {
+            'media:description'?: string;
+            'media:thumbnail'?: string;
+          }
           categories: string[] | { _: string }[];
+          pubDate?: string;
         }) => ({
           ...item,
           categories: item.categories
@@ -105,11 +113,12 @@ const getFeedUrl = async (feedUrl: string, dangerousAllowSanitizedItemContent: b
             .filter((category: unknown): category is string => typeof category === 'string'),
           title: item.title ? decode(item.title) : undefined,
           content: processItemContent(
-            item['content:encoded'] ?? item.content,
+            item['content:encoded'] ?? item.content ?? item['media:group']?.['media:description'],
             dangerousAllowSanitizedItemContent,
           ),
           enclosure: createEnclosure(item),
           link: createLink(item),
+          pubDate: item.pubDate ? new Date(item.pubDate) : null,
         }),
       )
       .sort((a: { pubDate: number }, b: { pubDate: number }) => {
@@ -183,11 +192,18 @@ const createEnclosure = (item: any) => {
     };
   }
 
+  if (item['media:group'] && item['media:group']['media:thumbnail']) {
+    // no clue why this janky parse is needed
+    return {
+      url: item['media:group']['media:thumbnail'][0].$.url
+    };
+  }
+
   return undefined;
 };
 
 const parser: RssParser<any, CustomItem> = new RssParser({
   customFields: {
-    item: ['media:content', 'enclosure'],
+    item: ['media:content', 'enclosure', 'media:group'],
   },
 });

src/widgets/rss/RssWidgetTile.tsx

@@ -51,6 +51,10 @@ const definition = defineWidget({
       max: 50,
       step: 1,
     },
+    sortByPublishDateAscending: {
+      type: 'switch',
+      defaultValue: true,
+    },
   },
   gridstack: {
     minWidth: 2,
@@ -74,7 +78,7 @@ function RssTile({ widget }: RssTileProps) {
     configName,
     widget.properties.rssFeedUrl,
     widget.properties.refreshInterval,
-    widget.id
+    widget.id,
   );
   const { classes } = useStyles();
 
@@ -100,7 +104,7 @@ function RssTile({ widget }: RssTileProps) {
     );
   }
 
-  if (!data || data.length < 1 || !data[0].feed || isError) {
+  if (!data || data.length < 1 || isError) {
     return (
       <Center h="100%">
         <Stack align="center">
@@ -113,70 +117,73 @@ function RssTile({ widget }: RssTileProps) {
     );
   }
 
+  const flatFeeds = data.filter(feed => feed.success).flatMap(feed => feed.feed);
+  const flatFeedItems = flatFeeds.flatMap(feed => feed!.items);
+  const orderedFeedItems = widget.properties.sortByPublishDateAscending ?
+    flatFeedItems.sort((item1, item2) =>
+      (item2.pubDate?.getTime() as number) - (item1.pubDate?.getTime() as number)) : flatFeedItems;
+
   return (
     <Stack h="100%">
       <ScrollArea className="scroll-area-w100" w="100%" mt="sm" mb="sm">
-        {data.map((feed, index) => (
+        <Stack w="100%" spacing="xs">
-          <Stack w="100%" spacing="xs">
+          {orderedFeedItems.map((item: any, index: number) => (
-            {feed.feed &&
+            <Card
-              feed.feed.items.map((item: any, index: number) => (
+              key={index}
-                <Card
+              withBorder
-                  key={index}
+              component={Link ?? 'div'}
-                  withBorder
+              href={item.link}
-                  component={Link ?? 'div'}
+              radius="md"
-                  href={item.link}
+              target="_blank"
-                  radius="md"
+              w="100%"
-                  target="_blank"
+            >
-                  w="100%"
+              {item.enclosure && (
-                >
+                // eslint-disable-next-line @next/next/no-img-element
-                  {item.enclosure && (
+                <img
-                    // eslint-disable-next-line @next/next/no-img-element
+                  className={classes.backgroundImage}
-                    <img
+                  src={item.enclosure.url ?? undefined}
-                      className={classes.backgroundImage}
+                  alt="backdrop"
+                />
+              )}
+
+              <Flex gap="xs">
+                {item.enclosure && item.enclosure.url && (
+                  <MediaQuery query="(max-width: 1200px)" styles={{ display: 'none' }}>
+                    <Image
                       src={item.enclosure.url ?? undefined}
-                      alt="backdrop"
+                      width={140}
+                      height={140}
+                      radius="md"
+                      withPlaceholder
                     />
+                  </MediaQuery>
+                )}
+                <Flex gap={2} direction="column" w="100%">
+                  {item.categories && (
+                    <Flex gap="xs" wrap="wrap" h={20} style={{ overflow: 'hidden' }}>
+                      {item.categories.map((category: any, categoryIndex: number) => (
+                        <Badge key={categoryIndex}>{category}</Badge>
+                      ))}
+                    </Flex>
                   )}
 
-                  <Flex gap="xs">
+                  <Text lineClamp={2}>{item.title}</Text>
-                    {item.enclosure && item.enclosure.url && (
+                  <Text
-                      <MediaQuery query="(max-width: 1200px)" styles={{ display: 'none' }}>
+                    className={classes.itemContent}
-                        <Image
+                    color="dimmed"
-                          src={item.enclosure.url ?? undefined}
+                    size="xs"
-                          width={140}
+                    lineClamp={widget.properties.textLinesClamp}
-                          height={140}
+                    dangerouslySetInnerHTML={{ __html: item.content }}
-                          radius="md"
+                  />
-                          withPlaceholder
-                        />
-                      </MediaQuery>
-                    )}
-                    <Flex gap={2} direction="column" w="100%">
-                      {item.categories && (
-                        <Flex gap="xs" wrap="wrap" h={20} style={{ overflow: 'hidden' }}>
-                          {item.categories.map((category: any, categoryIndex: number) => (
-                            <Badge key={categoryIndex}>{category}</Badge>
-                          ))}
-                        </Flex>
-                      )}
 
-                      <Text lineClamp={2}>{item.title}</Text>
+                  {item.pubDate && (
-                      <Text
+                    <InfoDisplay title={item.title} date={formatDate(item.pubDate)} />
-                        className={classes.itemContent}
+                  )}
-                        color="dimmed"
+                </Flex>
-                        size="xs"
+              </Flex>
-                        lineClamp={widget.properties.textLinesClamp}
+            </Card>
-                        dangerouslySetInnerHTML={{ __html: item.content }}
+          ))}
-                      />
+        </Stack>
-
-                      {item.pubDate && (
-                        <InfoDisplay title={feed.feed.title} date={formatDate(item.pubDate)} />
-                      )}
-                    </Flex>
-                  </Flex>
-                </Card>
-              ))}
-          </Stack>
-        ))}
       </ScrollArea>
 
       <RefetchButton refetch={refetch} isFetching={isFetching} />
@@ -188,7 +195,7 @@ export const useGetRssFeeds = (
   configName: string | undefined,
   feedUrls: string[],
   refreshInterval: number,
-  widgetId: string
+  widgetId: string,
 ) =>
   api.rss.all.useQuery(
     {
@@ -201,7 +208,7 @@ export const useGetRssFeeds = (
       cacheTime: 1000 * 60 * 60 * 24,
       staleTime: 1000 * 60 * refreshInterval,
       enabled: !!configName,
-    }
+    },
   );
 
 interface RefetchButtonProps {