feat(mobile): video support (#3512)

hyoban · web-flow · commit e0b2611e3908 · 2025-04-23T03:58:50.000Z
diff --git a/apps/mobile/app.config.ts b/apps/mobile/app.config.ts
@@ -132,7 +132,13 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
       },
     ],
     "expo-apple-authentication",
-    "expo-av",
+    [
+      "expo-video",
+      {
+        supportsBackgroundPlayback: true,
+        supportsPictureInPicture: true,
+      },
+    ],
     [
       require("./plugins/with-follow-assets.js"),
       {
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -54,7 +54,6 @@
     "expo": "52.0.46",
     "expo-apple-authentication": "7.1.3",
     "expo-application": "6.0.2",
-    "expo-av": "15.0.2",
     "expo-background-fetch": "13.0.6",
     "expo-blur": "14.0.3",
     "expo-build-properties": "0.13.2",
@@ -82,6 +81,7 @@
     "expo-system-ui": "4.0.9",
     "expo-task-manager": "12.0.6",
     "expo-updates": "0.27.4",
+    "expo-video": "2.0.6",
     "expo-web-browser": "14.0.2",
     "franc-min": "6.2.0",
     "hono": "4.7.7",
diff --git a/apps/mobile/src/components/ui/video/VideoPlayer.tsx b/apps/mobile/src/components/ui/video/VideoPlayer.tsx
@@ -0,0 +1,57 @@
+import { useEvent } from "expo"
+import type { VideoSource } from "expo-video"
+import { useVideoPlayer, VideoView } from "expo-video"
+import { useRef, useState } from "react"
+import { View } from "react-native"
+
+import { NativePressable } from "@/src/components/ui/pressable/NativePressable"
+
+export function VideoPlayer({
+  source,
+  placeholder,
+  width,
+  height,
+}: {
+  source: VideoSource
+  placeholder?: React.ReactNode
+  width?: number
+  height?: number
+}) {
+  const [isFullScreen, setIsFullScreen] = useState(false)
+  const viewViewRef = useRef<null | VideoView>(null)
+  const player = useVideoPlayer(source, (player) => {
+    player.loop = true
+    player.muted = true
+    player.play()
+  })
+  const { status } = useEvent(player, "statusChange", { status: player.status })
+  return (
+    <NativePressable
+      onPress={() => {
+        viewViewRef.current?.enterFullscreen()
+        player.muted = false
+      }}
+    >
+      <VideoView
+        ref={viewViewRef}
+        style={{
+          width: "100%",
+          aspectRatio: width && height ? width / height : 1,
+        }}
+        contentFit={isFullScreen ? "contain" : "cover"}
+        player={player}
+        allowsFullscreen
+        allowsPictureInPicture
+        nativeControls={isFullScreen}
+        onFullscreenEnter={() => {
+          setIsFullScreen(true)
+        }}
+        onFullscreenExit={() => {
+          setIsFullScreen(false)
+          player.muted = true
+        }}
+      />
+      {status !== "readyToPlay" && <View className="absolute inset-0">{placeholder}</View>}
+    </NativePressable>
+  )
+}
diff --git a/apps/mobile/src/modules/entry-list/templates/EntrySocialItem.tsx b/apps/mobile/src/modules/entry-list/templates/EntrySocialItem.tsx
@@ -11,6 +11,7 @@ import { Galeria } from "@/src/components/ui/image/galeria"
 import { Image } from "@/src/components/ui/image/Image"
 import { ItemPressableStyle } from "@/src/components/ui/pressable/enum"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
+import { VideoPlayer } from "@/src/components/ui/video/VideoPlayer"
 import { useNavigation } from "@/src/lib/navigation/hooks"
 import { EntryDetailScreen } from "@/src/screens/(stack)/entries/[entryId]/EntryDetailScreen"
 import { FeedScreen } from "@/src/screens/(stack)/feeds/[feedId]/FeedScreen"
@@ -114,26 +115,45 @@ export const EntrySocialItem = memo(({ entryId }: { entryId: string }) => {
                       : undefined
                 const fullWidth = index === media.length - 1 && media.length % 2 === 1
                 if (!imageUrl) return null
+
+                const ImageItem = (
+                  <Galeria.Image index={index}>
+                    <Image
+                      proxy={{
+                        width: fullWidth ? 400 : 200,
+                      }}
+                      source={{ uri: imageUrl }}
+                      blurhash={mediaItem.blurhash}
+                      className="border-secondary-system-background w-full rounded-lg border"
+                      aspectRatio={
+                        fullWidth && mediaItem.width && mediaItem.height
+                          ? mediaItem.width / mediaItem.height
+                          : 1
+                      }
+                    />
+                  </Galeria.Image>
+                )
+
+                if (mediaItem.type === "video") {
+                  return (
+                    <View key={`${entryId}-${mediaItem.url}`} className="w-full">
+                      <VideoPlayer
+                        source={{
+                          uri: mediaItem.url,
+                        }}
+                        height={mediaItem.height}
+                        width={mediaItem.width}
+                        placeholder={ImageItem}
+                      />
+                    </View>
+                  )
+                }
                 return (
                   <Pressable
                     key={`${entryId}-${imageUrl}`}
                     className={fullWidth ? "w-full" : "w-1/2 p-0.5"}
                   >
-                    <Galeria.Image index={index}>
-                      <Image
-                        proxy={{
-                          width: fullWidth ? 400 : 200,
-                        }}
-                        source={{ uri: imageUrl }}
-                        blurhash={mediaItem.blurhash}
-                        className="border-secondary-system-background w-full rounded-lg border"
-                        aspectRatio={
-                          fullWidth && mediaItem.width && mediaItem.height
-                            ? mediaItem.width / mediaItem.height
-                            : 1
-                        }
-                      />
-                    </Galeria.Image>
+                    {ImageItem}
                   </Pressable>
                 )
               })}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
