diff --git a/apps/renderer/src/atoms/settings/ui.ts b/apps/renderer/src/atoms/settings/ui.ts index da103aaaa..98bbe652c 100644 --- a/apps/renderer/src/atoms/settings/ui.ts +++ b/apps/renderer/src/atoms/settings/ui.ts @@ -12,6 +12,7 @@ export const createDefaultSettings = (): UISettings => ({ opaqueSidebar: false, sidebarShowUnreadCount: true, + thumbnailRatio: "square", // Global UI uiTextSize: 16, 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 index df79c877d..80ab4960f 100644 --- a/apps/renderer/src/modules/entry-column/templates/list-item-template.tsx +++ b/apps/renderer/src/modules/entry-column/templates/list-item-template.tsx @@ -63,6 +63,8 @@ export function ListItem({ ) const settingWideMode = useUISettingKey("wideMode") + const thumbnailRatio = useUISettingKey("thumbnailRatio") + const rid = `list-item-${entryId}` // NOTE: prevent 0 height element, react virtuoso will not stop render any more if (!entry || !(feed || inbox)) return @@ -187,9 +189,10 @@ export function ListItem({ )} mediaContainerClassName={"w-auto h-auto rounded"} loading="lazy" + key={`${rid}-media-${thumbnailRatio}`} proxy={{ width: 160, - height: 0, + height: thumbnailRatio === "square" ? 160 : 0, }} height={entry.entries.media[0].height} width={entry.entries.media[0].width} diff --git a/apps/renderer/src/modules/settings/tabs/apperance.tsx b/apps/renderer/src/modules/settings/tabs/apperance.tsx index 9a3027077..f77af2442 100644 --- a/apps/renderer/src/modules/settings/tabs/apperance.tsx +++ b/apps/renderer/src/modules/settings/tabs/apperance.tsx @@ -70,6 +70,7 @@ export const SettingAppearance = () => { description: t("appearance.hide_extra_badge.description"), }), ZenMode, + ThumbnailRatio, { type: "title", @@ -254,3 +255,38 @@ const ZenMode = () => { ) } + +const ThumbnailRatio = () => { + const { t } = useTranslation("settings") + + const thumbnailRatio = useUISettingKey("thumbnailRatio") + + return ( + +
+ + {t("appearance.thumbnail_ratio.title")} + + +
+ {t("appearance.thumbnail_ratio.description")} +
+ ) +} diff --git a/locales/settings/en.json b/locales/settings/en.json index 8386015e9..c286a9d2c 100644 --- a/locales/settings/en.json +++ b/locales/settings/en.json @@ -80,6 +80,10 @@ "appearance.theme.label": "Theme", "appearance.theme.light": "Light", "appearance.theme.system": "System", + "appearance.thumbnail_ratio.description": "The ratio of the thumbnail in the entry list.", + "appearance.thumbnail_ratio.original": "Original", + "appearance.thumbnail_ratio.square": "Square", + "appearance.thumbnail_ratio.title": "Thumbnail ratio", "appearance.title": "Appearance", "appearance.ui_font": "UI Font", "appearance.unread_count": "Unread count", diff --git a/packages/shared/src/interface/settings.ts b/packages/shared/src/interface/settings.ts index 64ba0ee0c..db6bb1910 100644 --- a/packages/shared/src/interface/settings.ts +++ b/packages/shared/src/interface/settings.ts @@ -19,6 +19,7 @@ export interface UISettings { opaqueSidebar: boolean sidebarShowUnreadCount: boolean hideExtraBadge: boolean + thumbnailRatio: "square" | "original" uiTextSize: number showDockBadge: boolean modalOverlay: boolean