diff --git a/apps/desktop/layer/renderer/src/modules/entry-content/EntryContent.tsx b/apps/desktop/layer/renderer/src/modules/entry-content/EntryContent.tsx index 8841b5cc3..94d08a438 100644 --- a/apps/desktop/layer/renderer/src/modules/entry-content/EntryContent.tsx +++ b/apps/desktop/layer/renderer/src/modules/entry-content/EntryContent.tsx @@ -8,6 +8,7 @@ import { useFeedById } from "@follow/store/feed/hooks" import type { FeedModel } from "@follow/store/feed/types" import { useIsInbox } from "@follow/store/inbox/hooks" import { useSubscriptionByFeedId } from "@follow/store/subscription/hooks" +import { useEntryTranslation } from "@follow/store/translation/hooks" import { thenable } from "@follow/utils" import { stopPropagation } from "@follow/utils/dom" import { EventBus } from "@follow/utils/event-bus" @@ -17,7 +18,9 @@ import { useAnimationControls } from "motion/react" import * as React from "react" import { memo, useEffect, useRef, useState } from "react" +import { useShowAITranslation } from "~/atoms/ai-translation" import { useEntryIsInReadability } from "~/atoms/readability" +import { useActionLanguage } from "~/atoms/settings/general" import { AppErrorBoundary } from "~/components/common/AppErrorBoundary" import { Focusable } from "~/components/common/Focusable" import { m } from "~/components/common/Motion" @@ -40,6 +43,7 @@ import { EntryScrollingAndNavigationHandler } from "./components/entry-content/E import { EntryTitleMetaHandler } from "./components/entry-content/EntryTitleMetaHandler" import type { EntryContentProps } from "./components/entry-content/types" import { getEntryContentLayout } from "./components/layouts" +import type { EntryLayoutProps } from "./components/layouts/types" import { SourceContentPanel } from "./components/SourceContentView" import { useEntryContent } from "./hooks" @@ -71,6 +75,13 @@ const EntryContentImpl: Component = ({ const isInReadabilityMode = useEntryIsInReadability(entryId) const { error, content, isPending } = useEntryContent(entryId) + const enableTranslation = useShowAITranslation() + const actionLanguage = useActionLanguage() + const entryTranslation = useEntryTranslation({ + entryId, + language: actionLanguage, + enabled: enableTranslation, + }) const routeView = useRouteParamsSelector((route) => route.view) const subscriptionView = subscription?.view @@ -133,6 +144,16 @@ const EntryContentImpl: Component = ({ }, [scrollerRef]) const scrollerRefObject = React.useMemo(() => ({ current: scrollerRef }), [scrollerRef]) + const layoutTranslation = React.useMemo( + () => + entryTranslation + ? { + content: entryTranslation.content ?? undefined, + title: entryTranslation.title ?? undefined, + } + : undefined, + [entryTranslation?.content, entryTranslation?.title], + ) return (
@@ -219,6 +240,7 @@ const EntryContentImpl: Component = ({ view={view} compact={compact} noMedia={noMedia} + translation={layoutTranslation} /> )} @@ -269,8 +291,16 @@ const AdaptiveContentRenderer: React.FC<{ view: FeedViewType compact?: boolean noMedia?: boolean -}> = ({ entryId, view, compact = false, noMedia = false }) => { + translation?: EntryLayoutProps["translation"] +}> = ({ entryId, view, compact = false, noMedia = false, translation }) => { const LayoutComponent = getEntryContentLayout(view) - return + return ( + + ) }