feat(mobile): video player

Author: DIYgod

apps/mobile/app.config.ts

@@ -118,6 +118,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
         photosPermission: "Allow $(PRODUCT_NAME) to access your photos.",
       },
     ],
+    "react-native-video",
   ],
   experiments: {
     typedRoutes: true,

apps/mobile/package.json

@@ -100,6 +100,7 @@
     "react-native-svg": "15.8.0",
     "react-native-track-player": "4.1.1",
     "react-native-uikit-colors": "0.3.8",
+    "react-native-video": "6.10.2",
     "react-native-volume-manager": "2.0.8",
     "react-native-web": "0.19.13",
     "react-native-webview": "13.12.5",

apps/mobile/src/components/ui/carousel/MediaCarousel.tsx

@@ -6,6 +6,7 @@ import Animated, {
   useSharedValue,
   withSpring,
 } from "react-native-reanimated"
+import Video from "react-native-video"
 
 import { Galeria } from "@/src/components/ui/image/galeria"
 import type { MediaModel } from "@/src/database/schemas/types"
@@ -32,6 +33,8 @@ export const MediaCarousel = ({
   // const activeIndex = useSharedValue(0)
   const [activeIndex, setActiveIndex] = useState(0)
 
+  const [isVideoInFullscreen, setIsVideoInFullscreen] = useState(false)
+
   return (
     <View
       onLayout={(e) => {
@@ -78,17 +81,25 @@ export const MediaCarousel = ({
                     </ImageContextMenu>
                   </View>
                 )
-              } else if (m.preview_image_url) {
-                // TODO: video preview
+              } else if (m.type === "video") {
                 return (
-                  <Image
-                    key={index}
-                    source={{ uri: m.preview_image_url }}
-                    aspectRatio={aspectRatio}
-                  />
+                  <ImageContextMenu key={index} entryId={entryId} imageUrl={m.url}>
+                    <Video
+                      source={{ uri: m.url }}
+                      style={{ width: containerWidth, height: containerHeight }}
+                      muted={!isVideoInFullscreen}
+                      repeat
+                      poster={{
+                        source: { uri: m.preview_image_url },
+                        resizeMode: "cover",
+                      }}
+                      controls
+                      onFullscreenPlayerWillPresent={() => setIsVideoInFullscreen(true)}
+                      onFullscreenPlayerWillDismiss={() => setIsVideoInFullscreen(false)}
+                    />
+                  </ImageContextMenu>
                 )
               } else {
-                // TODO: video preview
                 return null
               }
             })}