fix(mobile): images in video item

Author: DIYgod

apps/mobile/src/components/ui/image/Image.tsx

@@ -27,7 +27,7 @@ export type ImageProps = Omit<ExpoImageProps, "source"> & {
 export const Image = forwardRef<ExpoImage, ImageProps>(
   ({ proxy, source, blurhash, aspectRatio, ...rest }, ref) => {
     const safeSource: ImageProps["source"] = useMemo(() => {
-      return source
+      return source?.uri
         ? {
             ...source,
             headers: {
@@ -66,6 +66,10 @@ export const Image = forwardRef<ExpoImage, ImageProps>(
       [isError, rest],
     )
 
+    if (!source?.uri) {
+      return null
+    }
+
     return (
       <ExpoImage
         source={isError ? safeSource : proxiesSafeSource}

apps/mobile/src/modules/entry-list/templates/EntrySocialItem.tsx

@@ -118,7 +118,7 @@ export function EntrySocialItem({ entryId }: { entryId: string }) {
                     <Galeria.Image index={index}>
                       <Image
                         proxy={{
-                          height: 80,
+                          width: fullWidth ? 400 : 200,
                         }}
                         source={{ uri: image.url }}
                         blurhash={image.blurhash}

apps/mobile/src/modules/entry-list/templates/EntryVideoItem.tsx

@@ -2,14 +2,15 @@ import { transformVideoUrl } from "@follow/utils"
 import { Linking } from "react-native"
 
 import { useGeneralSettingKey } from "@/src/atoms/settings/general"
-import { MediaCarousel } from "@/src/components/ui/carousel/MediaCarousel"
+import { Image } from "@/src/components/ui/image/Image"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
 import { openLink } from "@/src/lib/native"
 import { toast } from "@/src/lib/toast"
 import { useEntry } from "@/src/store/entry/hooks"
 import { unreadSyncService } from "@/src/store/unread/store"
 
 import { VideoContextMenu } from "../../context-menu/video"
+import { EntryGridFooter } from "../../entry-content/EntryGridFooter"
 
 export function EntryVideoItem({ id }: { id: string }) {
   const item = useEntry(id)
@@ -19,12 +20,10 @@ export function EntryVideoItem({ id }: { id: string }) {
     return null
   }
 
-  const firstMedia = item.media.slice(0, 1)
-
   return (
     <VideoContextMenu entryId={id}>
       <ItemPressable
-        className="m-1 overflow-hidden rounded-md"
+        className="m-1"
         onPress={() => {
           unreadSyncService.markEntryAsRead(id)
           if (!item.url) {
@@ -34,13 +33,15 @@ export function EntryVideoItem({ id }: { id: string }) {
           openVideo(item.url, needOpenVideoInApp)
         }}
       >
-        <MediaCarousel
-          entryId={id}
-          media={firstMedia}
+        <Image
+          source={{ uri: item.media[0]?.url || "" }}
           aspectRatio={16 / 9}
-          // AccessoryProps={{ id }}
-          noPreview={true}
+          className="w-full rounded-lg"
+          proxy={{
+            width: 200,
+          }}
         />
+        <EntryGridFooter entryId={id} />
       </ItemPressable>
     </VideoContextMenu>
   )

packages/utils/src/headers.ts

@@ -35,12 +35,14 @@ export const createBuildSafeHeaders =
     }
 
     try {
-      const urlObj = new URL(url)
+      if (url) {
+        const urlObj = new URL(url)
 
-      headers.Referer = urlObj.origin
-      headers.Origin = urlObj.origin
+        headers.Referer = urlObj.origin
+        headers.Origin = urlObj.origin
+      }
     } catch (error) {
-      console.warn(error)
+      console.warn(`Url parsing error: ${error}, url: ${url}.`)
     }
 
     return headers