feat: only show has media entry item in picture view

Signed-off-by: Innei <i@innei.in>

locales/app/en.json

@@ -48,11 +48,13 @@
  "entry_content.web_app_notice": "Maybe web app doesn't support this content type. But you can download the desktop app.",
  "entry_list.zero_unread": "Zero Unread",
  "entry_list_header.daily_report": "Daily Report",
+ "entry_list_header.hide_no_image_items": "Hide no images's entry items",
  "entry_list_header.items": "items",
  "entry_list_header.new_entries_available": "New entries available",
  "entry_list_header.refetch": "Refetch",
  "entry_list_header.refresh": "Refresh",
  "entry_list_header.show_all": "Show all",
+ "entry_list_header.show_all_items": "Show all entry items",
  "entry_list_header.show_unread_only": "Show unread Only",
  "entry_list_header.switch_to_grid": "Switch to Grid",
  "entry_list_header.switch_to_masonry": "Switch to Masonry",
@@ -109,6 +111,13 @@
  "mark_all_read_button.mark_all_as_read": "Mark all as read",
  "mark_all_read_button.mark_as_read": "Mark {{which}} as read",
  "mark_all_read_button.undo": "Undo",
+ "player.back_10s": "Back 10s",
+ "player.close": "Close",
+ "player.download": "Download",
+ "player.forward_10s": "Forward 10s",
+ "player.open_entry": "Open Entry",
+ "player.playback_rate": "Playback Rate",
+ "player.volume": "Volume",
  "search.empty.no_results": "No results found.",
  "search.group.entries": "Entries",
  "search.group.feeds": "Feeds",

locales/app/zh-CN.json

@@ -38,7 +38,7 @@
  "entry_list_header.daily_report": "每日报告",
  "entry_list_header.items": "内容",
  "entry_list_header.new_entries_available": "有新内容",
- "entry_list_header.refetch": "重新获取",
+ "entry_list_header.refetch": "刷新",
  "entry_list_header.refresh": "刷新",
  "entry_list_header.show_all": "显示全部",
  "entry_list_header.show_unread_only": "仅显示未读",

src/renderer/src/atoms/settings/ui.ts

@@ -30,6 +30,7 @@ export const createDefaultSettings = (): UISettings => ({
 
  // View
  pictureViewMasonry: true,
+ pictureViewFilterNoImage: false,
 
  // TTS
  voice: "en-US-AndrewMultilingualNeural",

src/renderer/src/modules/entry-column/index.tsx

@@ -15,10 +15,10 @@ import { useTitle, useTypeScriptHappyCallback } from "@renderer/hooks/common"
 import { FeedViewType } from "@renderer/lib/enum"
 import { cn, isBizId } from "@renderer/lib/utils"
 import { useFeed } from "@renderer/queries/feed"
-import { entryActions, useEntry } from "@renderer/store/entry"
+import { entryActions, getEntry, useEntry } from "@renderer/store/entry"
 import { useFeedByIdSelector } from "@renderer/store/feed"
 import { useSubscriptionByFeedId } from "@renderer/store/subscription"
-import { memo, useCallback, useEffect, useRef, useState } from "react"
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import type {
  ScrollSeekConfiguration,
@@ -238,17 +238,34 @@ const ListGird = ({
  const masonry = useUISettingKey("pictureViewMasonry")
  const view = useRouteParamsSelector((s) => s.view)
  const feedId = useRouteParamsSelector((s) => s.feedId)
+ const filterNoImage = useUISettingKey("pictureViewFilterNoImage")
+ const nextData = useMemo(() => {
+ if (filterNoImage) {
+ return virtuosoOptions.data.filter((entryId) => {
+ const entry = getEntry(entryId)
+ return entry?.entries.media?.length && entry.entries.media.length > 0
+ })
+ }
+ return virtuosoOptions.data
+ }, [virtuosoOptions.data, filterNoImage])
  if (masonry && view === FeedViewType.Pictures) {
  return (
  <PictureMasonry
  key={feedId}
  hasNextPage={virtuosoOptions.totalCount! > virtuosoOptions.data.length}
  endReached={virtuosoOptions.endReached}
- data={virtuosoOptions.data}
+ data={nextData}
  />
  )
  }
- return <VirtuosoGrid listClassName={girdClassNames} {...virtuosoOptions} ref={virtuosoRef} />
+ return (
+ <VirtuosoGrid
+ listClassName={girdClassNames}
+ {...virtuosoOptions}
+ data={nextData}
+ ref={virtuosoRef}
+ />
+ )
 }
 
 const AddFeedHelper = () => {

src/renderer/src/modules/entry-column/layouts/EntryListHeader.tsx

@@ -96,6 +96,7 @@ export const EntryListHeader: FC<{
  <AppendTaildingDivider>
  {view === FeedViewType.SocialMedia && <DailyReportButton />}
  {view === FeedViewType.Pictures && <SwitchToMasonryButton />}
+ {view === FeedViewType.Pictures && <FilterNoImageButton />}
  </AppendTaildingDivider>
 
  {isOnline ? (
@@ -173,6 +174,25 @@ const DailyReportButton: FC = () => {
  )
 }
 
+const FilterNoImageButton = () => {
+ const enabled = useUISettingKey("pictureViewFilterNoImage")
+ const { t } = useTranslation()
+
+ return (
+ <ActionButton
+ active={enabled}
+ onClick={() => {
+ setUISetting("pictureViewFilterNoImage", !enabled)
+ }}
+ tooltip={t(
+ enabled ? "entry_list_header.show_all_items" : "entry_list_header.hide_no_image_items",
+ )}
+ >
+ <i className="i-mgc-photo-album-cute-re" />
+ </ActionButton>
+ )
+}
+
 const SwitchToMasonryButton = () => {
  const isMasonry = useUISettingKey("pictureViewMasonry")
  const { t } = useTranslation()
@@ -193,7 +213,7 @@ const SwitchToMasonryButton = () => {
  })
  }}
  tooltip={
- isMasonry
+ !isMasonry
  ? t("entry_list_header.switch_to_masonry")
  : t("entry_list_header.switch_to_grid")
  }

src/renderer/src/modules/feed-column/corner-player.tsx

@@ -21,6 +21,7 @@ import { AnimatePresence, m } from "framer-motion"
 import { useEffect, useState } from "react"
 import Marquee from "react-fast-marquee"
 import { useHotkeys } from "react-hotkeys-hook"
+import { useTranslation } from "react-i18next"
 
 const handleClickPlay = () => {
  AudioPlayer.togglePlayAndPause()
@@ -85,6 +86,7 @@ const usePlayerTracker = () => {
  }, [show])
 }
 const CornerPlayerImpl = () => {
+ const { t } = useTranslation()
  const entryId = useAudioPlayerAtomSelector((v) => v.entryId)
  const status = useAudioPlayerAtomSelector((v) => v.status)
  const isMute = useAudioPlayerAtomSelector((v) => v.isMute)
@@ -156,7 +158,7 @@ const CornerPlayerImpl = () => {
  <ActionIcon
  className="i-mgc-close-cute-re"
  onClick={() => AudioPlayer.close()}
- label="Close"
+ label={t("player.close")}
  />
  <ActionIcon
  className="i-mgc-external-link-cute-re"
@@ -167,12 +169,12 @@ const CornerPlayerImpl = () => {
  view: FeedViewType.Audios,
  })
  }
- label="Open Entry"
+ label={t("player.open_entry")}
  />
  </div>
  <div className="flex items-center">
  <ActionIcon
- label="Download"
+ label={t("player.download")}
  onClick={() => {
  window.open(AudioPlayer.get().src, "_blank")
  }}
@@ -193,12 +195,12 @@ const CornerPlayerImpl = () => {
  <ActionIcon
  className="i-mgc-back-2-cute-re"
  onClick={() => AudioPlayer.back(10)}
- label="Back 10s"
+ label={t("player.back_10s")}
  />
  <ActionIcon
  className="i-mgc-forward-2-cute-re"
  onClick={() => AudioPlayer.forward(10)}
- label="Forward 10s"
+ label={t("player.forward_10s")}
  tooltipAlign="end"
  />
  </div>

src/shared/src/interface/settings.ts

@@ -30,6 +30,7 @@ export interface UISettings {
 
  // view
  pictureViewMasonry: boolean
+ pictureViewFilterNoImage: boolean
 
  // tts
  voice: string