xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(mobile): video player

This commit is contained in:
DIYgod 2025-03-11 19:23:20 +08:00
parent 4e2cdbee2d
commit 5609d72c80
No known key found for this signature in database
4 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/mobile/app.config.ts
View File

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

1
apps/mobile/package.json
View File

@ -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",

27
apps/mobile/src/components/ui/carousel/MediaCarousel.tsx
View File

@ -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
}
})}

22
pnpm-lock.yaml
View File

@ -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