chore(suite-native): expo-video

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

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'
             ? {}
             : {

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

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"
     }
 }

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<VideoStyleProps>((_, { 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 (
         <View style={applyStyle(videoContainer, { aspectRatio })}>
             {isLoading && (
@@ -52,16 +55,16 @@ export const Video = ({
                     style={applyStyle(activityIndicatorStyle)}
                 />
             )}
-            <ExpoVideo
-                style={applyStyle(videoStyle, { aspectRatio })}
-                source={videoSource}
-                shouldPlay
-                isMuted={isMuted}
-                isLooping
-                resizeMode={ResizeMode.CONTAIN}
-                onLoad={() => setIsLoading(false)}
-                {...restProps}
-            />
+            {!isLoading && (
+                <Animated.View entering={FadeIn}>
+                    <VideoView
+                        player={videoPlayer}
+                        style={applyStyle(videoStyle, { aspectRatio })}
+                        contentFit="contain"
+                        nativeControls={false}
+                    />
+                </Animated.View>
+            )}
         </View>
     );
 };

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"