From 5609d72c80b87f8628a14cf9ae69c9187d27ef0a Mon Sep 17 00:00:00 2001 From: DIYgod Date: Tue, 11 Mar 2025 19:23:20 +0800 Subject: [PATCH] feat(mobile): video player --- apps/mobile/app.config.ts | 1 + apps/mobile/package.json | 1 + .../components/ui/carousel/MediaCarousel.tsx | 27 +++++++++++++------ pnpm-lock.yaml | 22 ++++++++++++--- 4 files changed, 39 insertions(+), 12 deletions(-) diff --git a/apps/mobile/app.config.ts b/apps/mobile/app.config.ts index 4402fdfb8..674c8576c 100644 --- a/apps/mobile/app.config.ts +++ b/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, diff --git a/apps/mobile/package.json b/apps/mobile/package.json index b80dfd231..5aa10c518 100644 --- a/apps/mobile/package.json +++ b/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", diff --git a/apps/mobile/src/components/ui/carousel/MediaCarousel.tsx b/apps/mobile/src/components/ui/carousel/MediaCarousel.tsx index c75338084..b5ee56fba 100644 --- a/apps/mobile/src/components/ui/carousel/MediaCarousel.tsx +++ b/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 ( { @@ -78,17 +81,25 @@ export const MediaCarousel = ({ ) - } else if (m.preview_image_url) { - // TODO: video preview + } else if (m.type === "video") { return ( - + + ) } else { - // TODO: video preview return null } })} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0f4994663..1d24edcdb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1000,6 +1000,9 @@ importers: react-native-uikit-colors: specifier: 0.3.8 version: 0.3.8(lzrt4tau4pj6b2xu525yk3mqoq) + react-native-video: + specifier: 6.10.2 + version: 6.10.2(react-native@0.77.0(@babel/core@7.26.9)(@babel/preset-env@7.26.9(@babel/core@7.26.9))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1) react-native-volume-manager: specifier: 2.0.8 version: 2.0.8(react-native@0.77.0(@babel/core@7.26.9)(@babel/preset-env@7.26.9(@babel/core@7.26.9))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1) @@ -4146,7 +4149,7 @@ packages: '@radix-ui/react-compose-refs@1.1.1': resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==} peerDependencies: - '@types/react': '*' + '@types/react': npm:@types/react@18.3.12 react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc peerDependenciesMeta: '@types/react': @@ -4168,7 +4171,7 @@ packages: '@radix-ui/react-context@1.1.1': resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==} peerDependencies: - '@types/react': '*' + '@types/react': npm:@types/react@18.3.12 react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc peerDependenciesMeta: '@types/react': @@ -4225,7 +4228,7 @@ packages: '@radix-ui/react-focus-guards@1.1.1': resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==} peerDependencies: - '@types/react': '*' + '@types/react': npm:@types/react@18.3.12 react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc peerDependenciesMeta: '@types/react': @@ -4513,7 +4516,7 @@ packages: '@radix-ui/react-use-controllable-state@1.1.0': resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==} peerDependencies: - '@types/react': '*' + '@types/react': npm:@types/react@18.3.12 react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc peerDependenciesMeta: '@types/react': @@ -12774,6 +12777,12 @@ packages: react-native: '>=0.76.0' tailwindcss: '>=3.0.0' + react-native-video@6.10.2: + resolution: {integrity: sha512-ua/7mGZVJYe0pUh5tWccG4h+Jj3IGemGSwsc6E7HFV+nfvUfULtWuCth4dYDU1HPeuVW+aDlD660AnKD+mdS1w==} + peerDependencies: + react: '*' + react-native: '*' + react-native-volume-manager@2.0.8: resolution: {integrity: sha512-aZM47/mYkdQ4CbXpKYO6Ajiczv7fxbQXZ9c0H8gRuQUaS3OCz/MZABer6o9aDWq0KMNsQ7q7GVFLRPnSSeeMmw==} peerDependencies: @@ -29871,6 +29880,11 @@ snapshots: tailwindcss: 3.4.16(ts-node@10.9.2(@types/node@22.13.4)(typescript@5.7.3)) tailwindcss-uikit-colors: 0.3.8 + react-native-video@6.10.2(react-native@0.77.0(@babel/core@7.26.9)(@babel/preset-env@7.26.9(@babel/core@7.26.9))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1): + dependencies: + react: 18.3.1 + react-native: 0.77.0(@babel/core@7.26.9)(@babel/preset-env@7.26.9(@babel/core@7.26.9))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5) + react-native-volume-manager@2.0.8(react-native@0.77.0(@babel/core@7.26.9)(@babel/preset-env@7.26.9(@babel/core@7.26.9))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1): dependencies: react: 18.3.1