refactor(desktop): move electron actions to entry actions (#3483)

Co-authored-by: Stephen Zhou <[email protected]>

Author: kovsu

apps/desktop/src/renderer/src/hooks/biz/useEntryActions.tsx

@@ -1,15 +1,17 @@
 import { isMobile } from "@follow/components/hooks/useMobile.js"
-import { FeedViewType, UserRole } from "@follow/constants"
+import { FeedViewType, UserRole, views } from "@follow/constants"
 import { IN_ELECTRON } from "@follow/shared/constants"
-import { useCallback, useMemo } from "react"
+import { useMemo } from "react"
 
 import { useShowAISummaryAuto, useShowAISummaryOnce } from "~/atoms/ai-summary"
 import { useShowAITranslationAuto, useShowAITranslationOnce } from "~/atoms/ai-translation"
 import {
   getReadabilityStatus,
+  isInReadability,
   ReadabilityStatus,
   setReadabilityContent,
   setReadabilityStatus,
+  useEntryInReadabilityStatus,
 } from "~/atoms/readability"
 import { useShowSourceContent } from "~/atoms/source-content"
 import { useUserRole, whoami } from "~/atoms/user"
@@ -25,41 +27,40 @@ import { useInboxById } from "~/store/inbox"
 
 import { useRouteParamsSelector } from "./useRouteParams"
 
-export const useEntryReadabilityToggle = ({ id, url }: { id: string; url: string }) =>
-  useCallback(async () => {
-    const status = getReadabilityStatus()[id]
-    const isTurnOn = status !== ReadabilityStatus.INITIAL && !!status
+export const toggleEntryReadability = async ({ id, url }: { id: string; url: string }) => {
+  const status = getReadabilityStatus()[id]
+  const isTurnOn = status !== ReadabilityStatus.INITIAL && !!status
 
-    if (!isTurnOn && url) {
-      setReadabilityStatus({
-        [id]: ReadabilityStatus.WAITING,
+  if (!isTurnOn && url) {
+    setReadabilityStatus({
+      [id]: ReadabilityStatus.WAITING,
+    })
+    const result = await tipcClient
+      ?.readability({
+        url,
       })
-      const result = await tipcClient
-        ?.readability({
-          url,
-        })
-        .catch(() => {
-          setReadabilityStatus({
-            [id]: ReadabilityStatus.FAILURE,
-          })
-        })
-
-      if (result) {
-        const status = getReadabilityStatus()[id]
-        if (status !== ReadabilityStatus.WAITING) return
+      .catch(() => {
         setReadabilityStatus({
-          [id]: ReadabilityStatus.SUCCESS,
-        })
-        setReadabilityContent({
-          [id]: result,
+          [id]: ReadabilityStatus.FAILURE,
         })
-      }
-    } else {
+      })
+
+    if (result) {
+      const status = getReadabilityStatus()[id]
+      if (status !== ReadabilityStatus.WAITING) return
       setReadabilityStatus({
-        [id]: ReadabilityStatus.INITIAL,
+        [id]: ReadabilityStatus.SUCCESS,
+      })
+      setReadabilityContent({
+        [id]: result,
       })
     }
-  }, [id, url])
+  } else {
+    setReadabilityStatus({
+      [id]: ReadabilityStatus.INITIAL,
+    })
+  }
+}
 
 export type EntryActionItem = {
   id: FollowCommandId
@@ -70,8 +71,17 @@ export type EntryActionItem = {
   disabled?: boolean
 }
 
-export const useEntryActions = ({ entryId, view }: { entryId: string; view?: FeedViewType }) => {
+export const useEntryActions = ({
+  entryId,
+  view,
+  compact,
+}: {
+  entryId: string
+  view?: FeedViewType
+  compact?: boolean
+}) => {
   const entry = useEntry(entryId)
+  const entryReadabilityStatus = useEntryInReadabilityStatus(entry?.entries.id)
   const imageLength = entry?.entries.media?.filter((a) => a.type === "photo").length || 0
   const feed = useFeedById(entry?.feedId, (feed) => {
     return {
@@ -208,17 +218,36 @@ export const useEntryActions = ({ entryId, view }: { entryId: string; view?: Fee
         active: !!entry?.read,
         shortcut: shortcuts.entry.toggleRead.key,
       },
+      {
+        id: COMMAND_ID.entry.tts,
+        onClick: runCmdFn(COMMAND_ID.entry.tts, [
+          { entryId, entryContent: entry?.entries.content },
+        ]),
+        hide: !IN_ELECTRON || compact || !entry?.entries.content,
+        shortcut: shortcuts.entry.tts.key,
+      },
+      {
+        id: COMMAND_ID.entry.readability,
+        onClick: runCmdFn(COMMAND_ID.entry.readability, [
+          { entryId, entryUrl: entry?.entries.url },
+        ]),
+        hide: !IN_ELECTRON || compact || (view && views[view]!.wideMode) || !entry?.entries.url,
+        active: isInReadability(entryReadabilityStatus),
+      },
       {
         id: COMMAND_ID.settings.customizeToolbar,
         onClick: runCmdFn(COMMAND_ID.settings.customizeToolbar, []),
       },
     ].filter((config) => !config.hide)
   }, [
+    compact,
     entry?.collections,
+    entry?.entries.content,
     entry?.entries.url,
     entry?.read,
     entry?.view,
     entryId,
+    entryReadabilityStatus,
     feed?.id,
     feed?.ownerUserId,
     hasEntry,
@@ -241,11 +270,13 @@ export const useEntryActions = ({ entryId, view }: { entryId: string; view?: Fee
 export const useSortedEntryActions = ({
   entryId,
   view,
+  compact,
 }: {
   entryId: string
   view?: FeedViewType
+  compact?: boolean
 }) => {
-  const entryActions = useEntryActions({ entryId, view })
+  const entryActions = useEntryActions({ entryId, view, compact })
   const orderMap = useToolbarOrderMap()
   const mainAction = useMemo(
     () =>

apps/desktop/src/renderer/src/modules/command/commands/entry.tsx

@@ -7,15 +7,19 @@ import { toast } from "sonner"
 
 import { toggleShowAISummaryOnce } from "~/atoms/ai-summary"
 import { toggleShowAITranslationOnce } from "~/atoms/ai-translation"
+import { AudioPlayer, getAudioPlayerAtomValue } from "~/atoms/player"
+import { useGeneralSettingKey } from "~/atoms/settings/general"
 import {
   getShowSourceContent,
   toggleShowSourceContent,
   useSourceContentModal,
 } from "~/atoms/source-content"
 import { useUserRole } from "~/atoms/user"
+import { toggleEntryReadability } from "~/hooks/biz/useEntryActions"
 import { navigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { getRouteParams } from "~/hooks/biz/useRouteParams"
 import { tipcClient } from "~/lib/client"
+import { parseHtml } from "~/lib/parse-html"
 import { useActivationModal } from "~/modules/activation"
 import { useGalleryModal } from "~/modules/entry-content/hooks"
 import { useTipModal } from "~/modules/wallet/hooks"
@@ -100,6 +104,8 @@ export const useRegisterEntryCommands = () => {
   const role = useUserRole()
   const presentActivationModal = useActivationModal()
 
+  const voice = useGeneralSettingKey("voice")
+
   useRegisterFollowCommand([
     {
       id: COMMAND_ID.entry.tip,
@@ -313,6 +319,43 @@ export const useRegisterEntryCommands = () => {
         openGalleryModal(entryId)
       },
     },
+    {
+      id: COMMAND_ID.entry.tts,
+      label: t("entry_content.header.play_tts"),
+      icon: <i className="i-mgc-voice-cute-re" />,
+      run: async ({ entryId, entryContent }) => {
+        if (getAudioPlayerAtomValue().entryId === entryId) {
+          AudioPlayer.togglePlayAndPause()
+        } else {
+          const filePath = await tipcClient?.tts({
+            id: entryId,
+            text: parseHtml(entryContent).toText(),
+            voice,
+          })
+          if (filePath) {
+            AudioPlayer.mount({
+              type: "audio",
+              entryId,
+              src: `file://${filePath}`,
+              currentTime: 0,
+            })
+          }
+        }
+      },
+    },
+    {
+      id: COMMAND_ID.entry.readability,
+      label: t("entry_content.header.readability"),
+      icon: (props) => (
+        <i className={props?.isActive ? "i-mgc-docment-cute-fi" : "i-mgc-docment-cute-re"} />
+      ),
+      run: async ({ entryId, entryUrl }) => {
+        return toggleEntryReadability({
+          id: entryId,
+          url: entryUrl,
+        })
+      },
+    },
   ])
 
   useRegisterFollowCommand(

apps/desktop/src/renderer/src/modules/command/commands/id.ts

@@ -13,6 +13,8 @@ export const COMMAND_ID = {
     toggleAITranslation: "entry:toggle-ai-translation",
     exportAsPDF: "entry:export-as-pdf",
     imageGallery: "entry:image-gallery",
+    tts: "entry:tts",
+    readability: "entry:ability",
   },
   integration: {
     saveToEagle: "integration:save-to-eagle",

apps/desktop/src/renderer/src/modules/command/commands/types.ts

@@ -70,6 +70,16 @@ export type ImageGalleryCommand = Command<{
   fn: ({ entryId }) => void
 }>
 
+export type TTSCommand = Command<{
+  id: typeof COMMAND_ID.entry.tts
+  fn: ({ entryId, entryContent }) => void
+}>
+
+export type ReadabilityCommand = Command<{
+  id: typeof COMMAND_ID.entry.readability
+  fn: ({ entryId, entryUrl }) => void
+}>
+
 export type EntryCommand =
   | TipCommand
   | StarCommand
@@ -84,6 +94,8 @@ export type EntryCommand =
   | ToggleAISummaryCommand
   | ToggleAITranslationCommand
   | ImageGalleryCommand
+  | TTSCommand
+  | ReadabilityCommand
 
 // Settings commands