feat: audio player for audio item

RSSNext · Jun 4, 2024 · d5d9ce6 · d5d9ce6
1 parent 7f4269c
commit d5d9ce6
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 1 deletion.
diff --git a/src/renderer/src/components/entry-column/audio-item.tsx b/src/renderer/src/components/entry-column/audio-item.tsx
@@ -0,0 +1,40 @@
+import { FeedIcon } from "@renderer/components/feed-icon"
+import dayjs from "@renderer/lib/dayjs"
+import { cn } from "@renderer/lib/utils"
+import { useEntry } from "@renderer/store/entry"
+
+import { ReactVirtuosoItemPlaceholder } from "../ui/placeholder"
+import type { UniversalItemProps } from "./types"
+
+export function AudioItem({ entryId, entryPreview }: UniversalItemProps) {
+  const entry = useEntry(entryId) || entryPreview
+  if (!entry) return <ReactVirtuosoItemPlaceholder />
+  return (
+    <div className="flex px-2 py-4">
+      <FeedIcon feed={entry.feeds} />
+      <div className="-mt-0.5 line-clamp-5 flex-1 text-sm leading-tight">
+        <div className="space-x-1 text-[10px] text-zinc-500">
+          <span>{entry.feeds.title}</span>
+          <span>·</span>
+          <span>
+            {dayjs
+              .duration(
+                dayjs(entry.entries.publishedAt).diff(dayjs(), "minute"),
+                "minute",
+              )
+              .humanize()}
+          </span>
+        </div>
+        <div className={cn("relative my-0.5", !!entry.collections && "pr-4")}>
+          {entry.entries.title}
+          {!!entry.collections && (
+            <i className="i-mingcute-star-fill absolute right-0 top-0.5 text-orange-400" />
+          )}
+        </div>
+        {entry.entries?.enclosures?.[0].url && (
+          <audio className="mt-2 h-10 w-full" controls src={entry.entries?.enclosures?.[0].url} />
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/src/components/entry-column/index.tsx b/src/renderer/src/components/entry-column/index.tsx
@@ -26,6 +26,7 @@ import { useEventCallback } from "usehooks-ts"
 import { useShallow } from "zustand/react/shallow"
 
 import { ArticleItem } from "./article-item"
+import { AudioItem } from "./audio-item"
 import { EntryItemWrapper } from "./item-wrapper"
 import { NotificationItem } from "./notification-item"
 import { PictureItem } from "./picture-item"
@@ -67,6 +68,10 @@ export function EntryColumn() {
       Item = VideoItem
       break
     }
+    case FeedViewType.Audios: {
+      Item = AudioItem
+      break
+    }
     case FeedViewType.Notifications: {
       Item = NotificationItem
       break

diff --git a/src/renderer/src/components/entry-column/notification-item.tsx b/src/renderer/src/components/entry-column/notification-item.tsx
@@ -10,7 +10,7 @@ export function NotificationItem({ entryId, entryPreview }: UniversalItemProps)
   const entry = useEntry(entryId) || entryPreview
   if (!entry) return <ReactVirtuosoItemPlaceholder />
   return (
-    <div className="flex px-2 py-5">
+    <div className="flex px-2 py-4">
       <FeedIcon feed={entry.feeds} />
       <div className="-mt-0.5 line-clamp-5 flex-1 text-sm leading-tight">
         <div className="space-x-1 text-[10px] text-zinc-500">

diff --git a/src/renderer/src/hono.ts b/src/renderer/src/hono.ts
@@ -238,6 +238,12 @@ declare const routes: hono_hono_base.HonoBase<hono.Env, {
                         publishedAt: string;
                         images: string[] | null;
                         categories: string[] | null;
+                        enclosures?: {
+                            url: string;
+                            length?: number | undefined;
+                            type?: string | undefined;
+                            title?: string | undefined;
+                        }[] | undefined;
                     }[] | undefined;
                     docs?: string | undefined;
                     isSubscribed?: boolean | undefined;
@@ -317,6 +323,12 @@ declare const routes: hono_hono_base.HonoBase<hono.Env, {
                         publishedAt: string;
                         images: string[] | null;
                         categories: string[] | null;
+                        enclosures?: {
+                            url: string;
+                            length?: number | undefined;
+                            type?: string | undefined;
+                            title?: string | undefined;
+                        }[] | undefined;
                     };
                     feeds: {
                         description: string | null;
@@ -363,6 +375,12 @@ declare const routes: hono_hono_base.HonoBase<hono.Env, {
                         publishedAt: string;
                         images: string[] | null;
                         categories: string[] | null;
+                        enclosures?: {
+                            url: string;
+                            length?: number | undefined;
+                            type?: string | undefined;
+                            title?: string | undefined;
+                        }[] | undefined;
                     };
                     collections: {
                         createdAt: string;
@@ -411,6 +429,12 @@ declare const routes: hono_hono_base.HonoBase<hono.Env, {
                     publishedAt: string;
                     images: string[] | null;
                     categories: string[] | null;
+                    enclosures?: {
+                        url: string;
+                        length?: number | undefined;
+                        type?: string | undefined;
+                        title?: string | undefined;
+                    }[] | undefined;
                 }[];
             };
             outputFormat: "json";