fix: optimize no audio cover list item style, fixed #1979

Signed-off-by: Innei <tukon479@gmail.com>
RSSNext · Dec 4, 2024 · 8de8501 · 8de8501
1 parent 5c4b5f0
commit 8de8501
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/apps/renderer/src/modules/entry-column/templates/list-item-template.tsx b/apps/renderer/src/modules/entry-column/templates/list-item-template.tsx
@@ -1,6 +1,6 @@
 import { useMobile } from "@follow/components/hooks/useMobile.js"
 import { EllipsisHorizontalTextWithTooltip } from "@follow/components/ui/typography/index.js"
-import { cn, isSafari } from "@follow/utils/utils"
+import { clsx, cn, isSafari } from "@follow/utils/utils"
 
 import { AudioPlayer, useAudioPlayerAtomSelector } from "~/atoms/player"
 import { useRealInWideMode, useUISettingKey } from "~/atoms/settings/ui"
@@ -63,6 +63,8 @@ export function ListItem({
 
   const related = feed || inbox
 
+  const hasAudio = entry.entries?.attachments?.[0].url
+
   return (
     <div
       className={cn(
@@ -79,7 +81,7 @@ export function ListItem({
 
           // FIXME: Safari bug, not support line-clamp cross elements
           !envIsSafari && (settingWideMode ? "line-clamp-2" : "line-clamp-4"),
-          withAudio && "max-w-[calc(100%-88px)]",
+          withAudio && !!hasAudio && "max-w-[calc(100%-88px)]",
         )}
       >
         <div
@@ -144,17 +146,26 @@ export function ListItem({
         )}
       </div>
 
-      {withAudio && entry.entries?.attachments?.[0].url && (
+      {withAudio && !!hasAudio && (
         <AudioCover
           entryId={entryId}
-          src={entry.entries?.attachments?.[0].url}
+          src={entry.entries!.attachments![0].url}
           durationInSeconds={Number.parseInt(
-            String(entry.entries?.attachments?.[0].duration_in_seconds ?? 0),
+            String(entry.entries!.attachments![0].duration_in_seconds ?? 0),
             10,
           )}
           feedIcon={
             <FeedIcon
-              fallback={false}
+              fallback={true}
+              fallbackElement={
+                <div
+                  className={clsx(
+                    "bg-theme-placeholder-image",
+                    settingWideMode ? "size-[65px]" : "size-[80px]",
+                    "rounded",
+                  )}
+                />
+              }
               feed={feed || inbox}
               entry={entry.entries}
               size={settingWideMode ? 65 : 80}

diff --git a/apps/renderer/src/modules/feed/feed-icon.tsx b/apps/renderer/src/modules/feed/feed-icon.tsx
@@ -85,6 +85,7 @@ export function FeedIcon({
   className,
   size = 20,
   fallback = true,
+  fallbackElement,
   siteUrl,
   useMedia,
   disableFadeIn,
@@ -100,6 +101,7 @@ export function FeedIcon({
    * Image loading error fallback to site icon
    */
   fallback?: boolean
+  fallbackElement?: ReactNode
 
   useMedia?: boolean
   disableFadeIn?: boolean
@@ -251,7 +253,7 @@ export function FeedIcon({
           {ImageElement}
         </AvatarImage>
         <AvatarFallback delayMs={200} asChild>
-          {fallbackIcon}
+          {fallbackElement || fallbackIcon}
         </AvatarFallback>
       </Avatar>
     )