feat(mobile): Add media preview accessories and no-media rendering support

Innei · Innei · commit 9113c0a2e53b · 2025-02-19T20:07:48.000+08:00
- Enhance PreviewImage with optional Accessory component
- Update PreviewPageProvider to support rendering accessories in image preview
- Add noMedia prop to EntryContentWebView for selective media rendering
- Implement EntryGridItemAccessory to show entry details in image preview
- Update HTML renderer to support noMedia configuration

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/mobile/src/components/native/webview/EntryContentWebView.tsx b/apps/mobile/src/components/native/webview/EntryContentWebView.tsx
@@ -22,6 +22,7 @@ const NativeView: React.ComponentType<
 
 type EntryContentWebViewProps = {
   entry: EntryModel
+  noMedia?: boolean
 }
 
 const setCodeTheme = (light: string, dark: string) => {
@@ -36,6 +37,10 @@ export const setWebViewEntry = (entry: EntryModel) => {
   )
 }
 
+const setNoMedia = (value: boolean) => {
+  SharedWebViewModule.evaluateJavaScript(`setNoMedia(${value})`)
+}
+
 const setReaderRenderInlineStyle = (value: boolean) => {
   SharedWebViewModule.evaluateJavaScript(`setReaderRenderInlineStyle(${value})`)
 }
@@ -46,17 +51,22 @@ export function EntryContentWebView(props: EntryContentWebViewProps) {
   const codeThemeLight = useUISettingKey("codeHighlightThemeLight")
   const codeThemeDark = useUISettingKey("codeHighlightThemeDark")
   const readerRenderInlineStyle = useUISettingKey("readerRenderInlineStyle")
-  const { entry } = props
+  const { entry, noMedia } = props
+
+  const [mode, setMode] = React.useState<"normal" | "debug">("normal")
 
   useEffect(() => {
-    setCodeTheme(codeThemeLight, codeThemeDark)
-  }, [codeThemeLight, codeThemeDark])
+    setNoMedia(!!noMedia)
+  }, [noMedia, mode])
 
   useEffect(() => {
     setReaderRenderInlineStyle(readerRenderInlineStyle)
-  }, [readerRenderInlineStyle])
+  }, [readerRenderInlineStyle, mode])
+
+  useEffect(() => {
+    setCodeTheme(codeThemeLight, codeThemeDark)
+  }, [codeThemeLight, codeThemeDark, mode])
 
-  const [mode, setMode] = React.useState<"normal" | "debug">("normal")
   React.useEffect(() => {
     setWebViewEntry(entry)
   }, [entry])
diff --git a/apps/mobile/src/components/ui/image/PreviewImage.tsx b/apps/mobile/src/components/ui/image/PreviewImage.tsx
@@ -1,4 +1,5 @@
 import { Image } from "expo-image"
+import type { FC } from "react"
 import { useRef } from "react"
 import { Pressable, View } from "react-native"
 
@@ -8,9 +9,17 @@ interface PreviewImageProps {
   imageUrl: string
   blurhash?: string | undefined
   aspectRatio: number
+  Accessory?: FC<any>
+  AccessoryProps?: any
 }
 
-export const PreviewImage = ({ imageUrl, blurhash, aspectRatio }: PreviewImageProps) => {
+export const PreviewImage = ({
+  imageUrl,
+  blurhash,
+  aspectRatio,
+  Accessory,
+  AccessoryProps,
+}: PreviewImageProps) => {
   const imageRef = useRef<View>(null)
 
   const { openPreview } = usePreviewImage()
@@ -20,6 +29,7 @@ export const PreviewImage = ({ imageUrl, blurhash, aspectRatio }: PreviewImagePr
         openPreview({
           imageRef,
           images: [{ imageUrl, aspectRatio, blurhash, recyclingKey: imageUrl }],
+          accessoriesElement: Accessory ? <Accessory {...AccessoryProps} /> : undefined,
         })
       }
     >
diff --git a/apps/mobile/src/components/ui/image/PreviewPageProvider.tsx b/apps/mobile/src/components/ui/image/PreviewPageProvider.tsx
@@ -1,3 +1,4 @@
+import { PortalProvider } from "@gorhom/portal"
 import { Image } from "expo-image"
 import type { RefObject } from "react"
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react"
@@ -24,12 +25,15 @@ interface PreviewImageProps {
   recyclingKey?: string
 }
 
+interface OpenPreviewParams {
+  imageRef: RefObject<View>
+  images: PreviewImageProps[]
+  initialIndex?: number
+  accessoriesElement?: React.ReactNode
+}
+
 interface PreviewImageContextType {
-  openPreview: (params: {
-    imageRef: RefObject<View>
-    images: PreviewImageProps[]
-    initialIndex?: number
-  }) => void
+  openPreview: (params: OpenPreviewParams) => void
 }
 const PreviewImageContext = createContext<PreviewImageContextType | null>(null)
 
@@ -48,7 +52,7 @@ export const PreviewImageProvider = ({ children }: { children: React.ReactNode }
   const [currentState, setCurrentState] = useState<PreviewImageProps[] | null>(null)
   const [imageRef, setImageRef] = useState<View | null>(null)
   const [currentIndex, setCurrentIndex] = useState(0)
-
+  const [accessoriesElement, setAccessoriesElement] = useState<React.ReactNode | null>(null)
   const layoutScale = useSharedValue(1)
   const layoutTransformX = useSharedValue(0)
   const layoutTransformY = useSharedValue(0)
@@ -343,10 +347,11 @@ export const PreviewImageProvider = ({ children }: { children: React.ReactNode }
   }
 
   const openPreview = useCallback(
-    (params: { imageRef: RefObject<View>; images: PreviewImageProps[]; initialIndex?: number }) => {
+    (params: OpenPreviewParams) => {
       setCurrentState(params.images)
       setCurrentIndex(params.initialIndex || 0)
       setImageRef(params.imageRef.current)
+      setAccessoriesElement(params.accessoriesElement)
       params.imageRef.current?.measureInWindow((pageX, pageY, w1, h1) => {
         setPreviewModalOpen(true)
 
@@ -388,52 +393,55 @@ export const PreviewImageProvider = ({ children }: { children: React.ReactNode }
       {children}
       {currentState && (
         <Modal transparent visible={previewModalOpen}>
-          <Animated.View style={overlayStyle} className="absolute inset-0" />
-          <Animated.View style={modalStyle} className="w-full flex-1">
-            <GestureHandlerRootView className="w-full flex-1">
-              <View className="flex-1 items-center justify-center">
-                <Pressable
-                  className="absolute right-2 top-safe-offset-2"
-                  onPress={fadeOutCloseAnimation}
-                >
-                  <CloseCuteReIcon color="#fff" />
-                </Pressable>
-                <GestureDetector gesture={composed}>
-                  <Animated.View style={animatedStyle}>
-                    <Animated.View
-                      style={{
-                        transform: [
-                          {
-                            scale: layoutScale,
-                          },
-                          {
-                            translateX: layoutTransformX,
-                          },
-                          {
-                            translateY: layoutTransformY,
-                          },
-                        ],
-                      }}
-                    >
-                      <ImageContextMenu imageUrl={currentState[currentIndex]?.imageUrl}>
-                        <Image
-                          recyclingKey={currentState[currentIndex]?.recyclingKey}
-                          source={{ uri: currentState[currentIndex]?.imageUrl }}
-                          className="w-full"
-                          style={{
-                            aspectRatio: currentState[currentIndex]?.aspectRatio,
-                          }}
-                          placeholder={{
-                            blurhash: currentState[currentIndex]?.blurhash,
-                          }}
-                        />
-                      </ImageContextMenu>
+          <PortalProvider>
+            <Animated.View style={overlayStyle} className="absolute inset-0" />
+            <Animated.View style={modalStyle} className="w-full flex-1">
+              <GestureHandlerRootView className="w-full flex-1">
+                <View className="flex-1 items-center justify-center">
+                  <Pressable
+                    className="absolute right-2 top-safe-offset-2"
+                    onPress={fadeOutCloseAnimation}
+                  >
+                    <CloseCuteReIcon color="#fff" />
+                  </Pressable>
+                  <GestureDetector gesture={composed}>
+                    <Animated.View style={animatedStyle}>
+                      <Animated.View
+                        style={{
+                          transform: [
+                            {
+                              scale: layoutScale,
+                            },
+                            {
+                              translateX: layoutTransformX,
+                            },
+                            {
+                              translateY: layoutTransformY,
+                            },
+                          ],
+                        }}
+                      >
+                        <ImageContextMenu imageUrl={currentState[currentIndex]?.imageUrl}>
+                          <Image
+                            recyclingKey={currentState[currentIndex]?.recyclingKey}
+                            source={{ uri: currentState[currentIndex]?.imageUrl }}
+                            className="w-full"
+                            style={{
+                              aspectRatio: currentState[currentIndex]?.aspectRatio,
+                            }}
+                            placeholder={{
+                              blurhash: currentState[currentIndex]?.blurhash,
+                            }}
+                          />
+                        </ImageContextMenu>
+                      </Animated.View>
                     </Animated.View>
-                  </Animated.View>
-                </GestureDetector>
-              </View>
-            </GestureHandlerRootView>
-          </Animated.View>
+                  </GestureDetector>
+                </View>
+              </GestureHandlerRootView>
+              {accessoriesElement}
+            </Animated.View>
+          </PortalProvider>
         </Modal>
       )}
     </PreviewImageContext.Provider>
diff --git a/apps/mobile/src/modules/entry-list/templates/EntryGridItem.tsx b/apps/mobile/src/modules/entry-list/templates/EntryGridItem.tsx
@@ -1,12 +1,19 @@
 import { FeedViewType } from "@follow/constants"
+import { LinearGradient } from "expo-linear-gradient"
 import { useMemo } from "react"
-import { Text, View } from "react-native"
+import { ScrollView, Text, View } from "react-native"
+import Animated from "react-native-reanimated"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
 
 import { useUISettingKey } from "@/src/atoms/settings/ui"
+import { EntryContentWebView } from "@/src/components/native/webview/EntryContentWebView"
+import { RelativeDateTime } from "@/src/components/ui/datetime/RelativeDateTime"
+import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
 import { ImageContextMenu } from "@/src/components/ui/image/ImageContextMenu"
 import { PreviewImage } from "@/src/components/ui/image/PreviewImage"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
 import { useEntry } from "@/src/store/entry/hooks"
+import { useFeed } from "@/src/store/feed/hooks"
 
 import { useSelectedView } from "../../screen/atoms"
 
@@ -41,7 +48,15 @@ export function EntryGridItem(props: MasonryItem) {
 
         return imageUrl ? (
           <ImageContextMenu imageUrl={imageUrl}>
-            <PreviewImage imageUrl={imageUrl} blurhash={blurhash} aspectRatio={aspectRatio} />
+            <PreviewImage
+              imageUrl={imageUrl}
+              blurhash={blurhash}
+              aspectRatio={aspectRatio}
+              Accessory={EntryGridItemAccessory}
+              AccessoryProps={{
+                id,
+              }}
+            />
           </ImageContextMenu>
         ) : (
           <View className="aspect-video w-full items-center justify-center">
@@ -85,3 +100,34 @@ export function EntryGridItem(props: MasonryItem) {
 
   return <ItemPressable className="m-1 overflow-hidden rounded-md">{Content}</ItemPressable>
 }
+
+const EntryGridItemAccessory = ({ id }: { id: string }) => {
+  const entry = useEntry(id)
+  const feed = useFeed(entry?.feedId || "")
+  const insets = useSafeAreaInsets()
+  if (!entry) {
+    return null
+  }
+  return (
+    <Animated.View className="absolute inset-x-0 bottom-0">
+      <LinearGradient colors={["transparent", "#000"]} locations={[0.1, 1]} className="flex-1">
+        <View className="flex-row items-center gap-2">
+          <View className="border-non-opaque-separator overflow-hidden rounded-full border">
+            <FeedIcon fallback feed={feed} size={40} />
+          </View>
+          <View>
+            <Text className="text-label text-lg font-medium">{entry.author}</Text>
+            <RelativeDateTime className="text-secondary-label" date={entry.publishedAt} />
+          </View>
+        </View>
+
+        <ScrollView
+          className="mt-2 max-h-48"
+          contentContainerStyle={{ paddingBottom: insets.bottom }}
+        >
+          <EntryContentWebView entry={entry} noMedia />
+        </ScrollView>
+      </LinearGradient>
+    </Animated.View>
+  )
+}
diff --git a/apps/mobile/web-app/html-renderer/src/App.tsx b/apps/mobile/web-app/html-renderer/src/App.tsx
@@ -5,6 +5,7 @@ import {
   codeThemeDarkAtom,
   codeThemeLightAtom,
   entryAtom,
+  noMediaAtom,
   readerRenderInlineStyleAtom,
 } from "./atoms"
 import { HTML } from "./HTML"
@@ -23,6 +24,9 @@ Object.assign(window, {
   setReaderRenderInlineStyle(value: boolean) {
     store.set(readerRenderInlineStyleAtom, value)
   },
+  setNoMedia(value: boolean) {
+    store.set(noMediaAtom, value)
+  },
   reset() {
     store.set(entryAtom, null)
     bridge.measure()
@@ -32,9 +36,14 @@ Object.assign(window, {
 export const App = () => {
   const entry = useAtomValue(entryAtom, { store })
   const readerRenderInlineStyle = useAtomValue(readerRenderInlineStyleAtom, { store })
+  const noMedia = useAtomValue(noMediaAtom, { store })
   return (
     <Provider store={store}>
-      <HTML children={entry?.content} renderInlineStyle={readerRenderInlineStyle} />
+      <HTML
+        children={entry?.content}
+        renderInlineStyle={readerRenderInlineStyle}
+        noMedia={noMedia}
+      />
     </Provider>
   )
 }
diff --git a/apps/mobile/web-app/html-renderer/src/atoms/index.ts b/apps/mobile/web-app/html-renderer/src/atoms/index.ts
@@ -1,9 +1,10 @@
 import { atom } from "jotai"
 
-import type { EntryModel } from "../types"
+import type { EntryModel } from "../../types"
 
 export const entryAtom = atom<EntryModel | null>(null)
 
 export const codeThemeLightAtom = atom<string | null>(null)
 export const codeThemeDarkAtom = atom<string | null>(null)
 export const readerRenderInlineStyleAtom = atom<boolean>(false)
+export const noMediaAtom = atom<boolean>(false)
diff --git a/apps/mobile/web-app/html-renderer/vite.config.mts b/apps/mobile/web-app/html-renderer/vite.config.mts
@@ -6,12 +6,13 @@ import { defineConfig } from "vite"
 import { viteRenderBaseConfig } from "../../../../configs/vite.render.config"
 import { astPlugin } from "../../../../plugins/vite/ast"
 
-const isDev = process.env.NODE_ENV === "development"
+// const isDev = process.env.NODE_ENV === "development"
+const isCI = !!process.env.CI
 export default defineConfig({
   ...viteRenderBaseConfig,
   base: "",
   build: {
-    outDir: isDev
+    outDir: !isCI
       ? path.resolve(import.meta.dirname, "../../../../out/rn-web/html-renderer")
       : path.resolve("/tmp/rn-web/html-renderer"),
   },
