diff --git a/scripts/list-outdated-dependencies/mobile-dependencies.txt b/scripts/list-outdated-dependencies/mobile-dependencies.txt index c8f5e651198..e8d5425c316 100644 --- a/scripts/list-outdated-dependencies/mobile-dependencies.txt +++ b/scripts/list-outdated-dependencies/mobile-dependencies.txt @@ -31,7 +31,7 @@ babel-plugin-transform-inline-environment-variables babel-plugin-transform-remove-console buffer expo-atlas -expo-av +expo-video expo-camera expo-image-picker expo-build-properties diff --git a/suite-native/app/app.config.ts b/suite-native/app/app.config.ts index 810c87fa72f..3b135c2dfd6 100644 --- a/suite-native/app/app.config.ts +++ b/suite-native/app/app.config.ts @@ -95,6 +95,7 @@ const getPlugins = (): ExpoPlugins => { microphonePermission: false, }, ], + ['expo-video'], [ 'expo-build-properties', { @@ -160,7 +161,7 @@ export default ({ config }: ConfigContext): ExpoConfig => { slug: appSlugs[buildType], owner: appOwners[buildType], version: suiteNativeVersion, - runtimeVersion: '11', + runtimeVersion: '12', ...(buildType === 'production' ? {} : { diff --git a/suite-native/app/package.json b/suite-native/app/package.json index 9d87ca131bc..1d60b04a17e 100644 --- a/suite-native/app/package.json +++ b/suite-native/app/package.json @@ -85,7 +85,6 @@ "@trezor/trezor-user-env-link": "workspace:*", "buffer": "^6.0.3", "expo": "^52.0.4", - "expo-av": "^15.0.1", "expo-build-properties": "^0.13.1", "expo-camera": "^16.0.4", "expo-clipboard": "^7.0.0", @@ -102,6 +101,7 @@ "expo-status-bar": "^2.0.0", "expo-system-ui": "^4.0.2", "expo-updates": "0.26.6", + "expo-video": "^2.0.1", "lottie-react-native": "^7.1.0", "node-libs-browser": "^2.2.1", "react": "18.2.0", diff --git a/suite-native/video-assets/package.json b/suite-native/video-assets/package.json index 77ab28fd08e..f9ee3c1b204 100644 --- a/suite-native/video-assets/package.json +++ b/suite-native/video-assets/package.json @@ -13,9 +13,11 @@ }, "dependencies": { "@trezor/styles": "workspace:*", - "expo-av": "^15.0.1", + "expo": "^52.0.4", + "expo-video": "^2.0.1", "prettier": "^3.3.2", "react": "18.2.0", - "react-native": "0.76.1" + "react-native": "0.76.1", + "react-native-reanimated": "3.16.1" } } diff --git a/suite-native/video-assets/src/components/Video.tsx b/suite-native/video-assets/src/components/Video.tsx index 75173120c00..c0f6e01fdd7 100644 --- a/suite-native/video-assets/src/components/Video.tsx +++ b/suite-native/video-assets/src/components/Video.tsx @@ -1,13 +1,14 @@ -import { useState } from 'react'; import { View, ActivityIndicator } from 'react-native'; +import Animated, { FadeIn } from 'react-native-reanimated'; -import { Video as ExpoVideo, VideoProps as ExpoVideoProps, ResizeMode } from 'expo-av'; +import { useEvent } from 'expo'; +import { useVideoPlayer, VideoView } from 'expo-video'; import { useNativeStyles, prepareNativeStyle } from '@trezor/styles'; import { videos, VideoName } from '../videos'; -type VideoProps = ExpoVideoProps & { +type VideoProps = { name: VideoName; aspectRatio?: number; }; @@ -16,33 +17,35 @@ type VideoStyleProps = { aspectRatio: number; }; -const videoContainer = prepareNativeStyle((_, { aspectRatio }: VideoStyleProps) => ({ +const videoContainer = prepareNativeStyle((utils, { aspectRatio }: VideoStyleProps) => ({ justifyContent: 'center', alignItems: 'center', + borderRadius: utils.borders.radii.r20, aspectRatio, })); -const videoStyle = prepareNativeStyle((utils, { aspectRatio }: VideoStyleProps) => ({ +const videoStyle = prepareNativeStyle((_, { aspectRatio }) => ({ flex: 1, aspectRatio, - borderRadius: utils.borders.radii.r20, })); const activityIndicatorStyle = prepareNativeStyle(_ => ({ position: 'absolute', })); -export const Video = ({ - name, - shouldPlay = true, - isMuted = true, - aspectRatio = 1, - ...restProps -}: VideoProps) => { - const [isLoading, setIsLoading] = useState(true); +export const Video = ({ name, aspectRatio = 1 }: VideoProps) => { const { applyStyle, utils } = useNativeStyles(); const videoSource = videos[name]; + const videoPlayer = useVideoPlayer(videoSource, player => { + player.play(); + player.loop = true; + player.muted = true; + }); + + const { status } = useEvent(videoPlayer, 'statusChange', { status: videoPlayer.status }); + const isLoading = status === 'loading'; + return ( {isLoading && ( @@ -52,16 +55,16 @@ export const Video = ({ style={applyStyle(activityIndicatorStyle)} /> )} - setIsLoading(false)} - {...restProps} - /> + {!isLoading && ( + + + + )} ); }; diff --git a/yarn.lock b/yarn.lock index 160d6ba8708..78d44b27cc1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9067,7 +9067,6 @@ __metadata: detox: "npm:^20.25.6" expo: "npm:^52.0.4" expo-atlas: "npm:0.3.27" - expo-av: "npm:^15.0.1" expo-build-properties: "npm:^0.13.1" expo-camera: "npm:^16.0.4" expo-clipboard: "npm:^7.0.0" @@ -9084,6 +9083,7 @@ __metadata: expo-status-bar: "npm:^2.0.0" expo-system-ui: "npm:^4.0.2" expo-updates: "npm:0.26.6" + expo-video: "npm:^2.0.1" jest: "npm:^29.7.0" lottie-react-native: "npm:^7.1.0" metro: "npm:0.81.0" @@ -10271,10 +10271,12 @@ __metadata: resolution: "@suite-native/video-assets@workspace:suite-native/video-assets" dependencies: "@trezor/styles": "workspace:*" - expo-av: "npm:^15.0.1" + expo: "npm:^52.0.4" + expo-video: "npm:^2.0.1" prettier: "npm:^3.3.2" react: "npm:18.2.0" react-native: "npm:0.76.1" + react-native-reanimated: "npm:3.16.1" languageName: unknown linkType: soft @@ -21611,21 +21613,6 @@ __metadata: languageName: node linkType: hard -"expo-av@npm:^15.0.1": - version: 15.0.1 - resolution: "expo-av@npm:15.0.1" - peerDependencies: - expo: "*" - react: "*" - react-native: "*" - react-native-web: "*" - peerDependenciesMeta: - react-native-web: - optional: true - checksum: 10/98f8275e9f7ca29739f291fc85f86261aa29d5c54a716c5f847f833ce17369e2b04f11f79b6940eaac63168041f8346590fe4136e3c60f8f698ebd8661f46669 - languageName: node - linkType: hard - "expo-build-properties@npm:^0.13.1": version: 0.13.1 resolution: "expo-build-properties@npm:0.13.1" @@ -22042,6 +22029,17 @@ __metadata: languageName: node linkType: hard +"expo-video@npm:^2.0.1": + version: 2.0.1 + resolution: "expo-video@npm:2.0.1" + peerDependencies: + expo: "*" + react: "*" + react-native: "*" + checksum: 10/5b442463357fc8ff2fcb96c6377bfc4b680f4d42defb0e7e9c60ef12ac58b052a30388c6164d1d7af3feafc57158cefec74433d0cc218e2baf63eafa2d4e764c + languageName: node + linkType: hard + "expo@npm:^52.0.4": version: 52.0.4 resolution: "expo@npm:52.0.4"