fix: fix the issue where the video does not fully cover the hardware …

…wallet page. (#6331)
OneKeyHQ · Dec 12, 2024 · 1b56cad · 1b56cad
1 parent c761359
commit 1b56cad
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 29 deletions.
diff --git a/apps/mobile/ios/Podfile.lock b/apps/mobile/ios/Podfile.lock
@@ -111,9 +111,6 @@ PODS:
     - MMKVCore (~> 1.3.1)
   - MMKVCore (1.3.1)
   - MultiplatformBleAdapter (0.1.9)
-  - PromisesObjC (2.3.1)
-  - PromisesSwift (2.3.1):
-    - PromisesObjC (= 2.3.1)
   - RCT-Folly (2022.05.16.00):
     - boost
     - DoubleConversion
@@ -1026,11 +1023,14 @@ PODS:
   - react-native-tcp-socket (6.0.6):
     - CocoaAsyncSocket
     - React-Core
-  - react-native-video (6.0.0-beta.6):
+  - react-native-video (6.2.0):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
     - React-Core
-    - react-native-video/Video (= 6.0.0-beta.6)
-  - react-native-video/Video (6.0.0-beta.6):
-    - PromisesSwift
+    - react-native-video/Video (= 6.2.0)
+  - react-native-video/Video (6.2.0):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
     - React-Core
   - react-native-view-shot (3.1.2):
     - React
@@ -1437,8 +1437,6 @@ SPEC REPOS:
     - MMKV
     - MMKVCore
     - MultiplatformBleAdapter
-    - PromisesObjC
-    - PromisesSwift
     - ScreenshotPreventing
     - SDWebImage
     - SDWebImageWebPCoder
@@ -1730,8 +1728,6 @@ SPEC CHECKSUMS:
   MMKV: 5a07930c70c70b86cd87761a42c8f3836fb681d7
   MMKVCore: e50135dbd33235b6ab390635991bab437ab873c0
   MultiplatformBleAdapter: 5a6a897b006764392f9cef785e4360f54fb9477d
-  PromisesObjC: c50d2056b5253dadbd6c2bea79b0674bd5a52fa4
-  PromisesSwift: 28dca69a9c40779916ac2d6985a0192a5cb4a265
   RCT-Folly: 7169b2b1c44399c76a47b5deaaba715eeeb476c0
   RCTRequired: 77f73950d15b8c1a2b48ba5b79020c3003d1c9b5
   RCTTypeSafety: ede1e2576424d89471ef553b2aed09fbbcc038e3
@@ -1768,7 +1764,7 @@ SPEC CHECKSUMS:
   react-native-slider: 1cdd6ba29675df21f30544253bf7351d3c2d68c4
   react-native-tab-page-view: 85c179e539d8a096f13a057ffe97aa3995479dc2
   react-native-tcp-socket: e724380c910c2e704816ec817ed28f1342246ff7
-  react-native-video: dc3118548cf8864a83f57df4345cf6c692402e8f
+  react-native-video: 12a68a3e9a6d93e8bdfa8e352917261c49ac35f7
   react-native-view-shot: 4475fde003fe8a210053d1f98fb9e06c1d834e1c
   react-native-webview: ab8587e1e43e274471ec8dc9342ec1711fa8bf61
   react-native-webview-cleaner: 93c8c73a302c90fcd83a227438b2a53bdb47f7cc

diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -108,7 +108,7 @@
     "react-native-spotlight-tour": "^3.0.1",
     "react-native-svg": "^13.9.0",
     "react-native-tcp-socket": "^6.0.6",
-    "react-native-video": "6.0.0-beta.6",
+    "react-native-video": "6.2.0",
     "react-native-view-shot": "3.1.2",
     "react-native-webview": "npm:@onekeyfe/[email protected]",
     "react-native-webview-cleaner": "npm:@onekeyfe/[email protected]",

diff --git a/packages/components/src/layouts/Navigation/Navigator/types.ts b/packages/components/src/layouts/Navigation/Navigator/types.ts
@@ -10,7 +10,7 @@ import type { ParamListBase } from '@react-navigation/routers';
 import type { Animated, StyleProp, ViewStyle } from 'react-native';
 
 export type ICommonScreenOptions = {
-  showHeader?: boolean;
+  headerShown?: boolean;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

diff --git a/packages/components/src/layouts/Page/PageHeader.tsx b/packages/components/src/layouts/Page/PageHeader.tsx
@@ -58,7 +58,7 @@ const usePageHeaderReloadOptions = () => {
   return useMemo(() => ({ reload }), [reload]);
 };
 
-const PageHeader = (props: IPageHeaderProps) => {
+function PageHeader(props: IPageHeaderProps) {
   const pageHeaderReload = usePageHeaderReloadOptions();
   const reloadOptions = pageHeaderReload.reload(props);
   const navigation = useNavigation();
@@ -82,7 +82,7 @@ const PageHeader = (props: IPageHeaderProps) => {
       onSearchButtonPress={headerSearchBarOptions?.onSearchButtonPress}
     />
   ) : null;
-};
+}
 
 PageHeader.usePageHeaderReloadOptions = usePageHeaderReloadOptions;
 

diff --git a/packages/kit/assets/onboarding/onekey-all-products.mp4 b/packages/kit/assets/onboarding/onekey-all-products.mp4
diff --git a/packages/kit/src/views/Onboarding/pages/ConnectHardwareWallet/OneKeyHardwareWallet.tsx b/packages/kit/src/views/Onboarding/pages/ConnectHardwareWallet/OneKeyHardwareWallet.tsx
@@ -1,24 +1,24 @@
 import { useCallback } from 'react';
 
 import { useIntl } from 'react-intl';
-import { Linking, StyleSheet } from 'react-native';
+import { Linking, StyleSheet, useWindowDimensions } from 'react-native';
 
 import {
   EVideoResizeMode,
   Heading,
   Icon,
   LinearGradient,
+  NavBackButton,
   Page,
   SizableText,
   Stack,
   Video,
   XStack,
   useSafeAreaInsets,
 } from '@onekeyhq/components';
+import useAppNavigation from '@onekeyhq/kit/src/hooks/useAppNavigation';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
 
-const source = require('@onekeyhq/kit/assets/onboarding/onekey-all-products.mp4');
-
 export function OneKeyHardwareWallet() {
   const { bottom } = useSafeAreaInsets();
   const intl = useIntl();
@@ -35,17 +35,23 @@ export function OneKeyHardwareWallet() {
     }
   }, []);
 
+  const { width } = useWindowDimensions();
+
+  const navigation = useAppNavigation();
+
+  const popPage = useCallback(() => {
+    navigation.pop();
+  }, [navigation]);
+
   return (
     <Page safeAreaEnabled={false}>
-      <Page.Header
-        title={intl.formatMessage({ id: ETranslations.onboarding_onekey_hw })}
-        headerTransparent
-      />
       <Page.Body>
         <Video
           muted
           repeat
-          source={source}
+          source={{
+            uri: 'https://asset.onekey-asset.com/app-monorepo/bb7a4e71aba56b405faf9278776d57d73b829708/static/media/onekey-all-products.05e87080767d0733c1f4.mp4',
+          }}
           flex={1}
           resizeMode={EVideoResizeMode.COVER}
           controls={false}
@@ -60,6 +66,29 @@ export function OneKeyHardwareWallet() {
           zIndex={1}
           justifyContent="flex-end"
         >
+          <XStack
+            position="absolute"
+            h={64}
+            w={width}
+            top={0}
+            px={16}
+            ai="center"
+            $platform-ios={{
+              jc: 'center',
+            }}
+          >
+            <NavBackButton
+              iconProps={{ color: '$whiteA12' }}
+              onPress={popPage}
+              $platform-ios={{
+                position: 'absolute',
+                left: 16,
+              }}
+            />
+            <SizableText size="$headingLg" mx={14} color="$whiteA12">
+              {intl.formatMessage({ id: ETranslations.onboarding_onekey_hw })}
+            </SizableText>
+          </XStack>
           <Stack p="$5" pt="$10">
             <LinearGradient
               colors={['transparent', '$blackA11']}

diff --git a/packages/kit/src/views/Onboarding/router/index.ts b/packages/kit/src/views/Onboarding/router/index.ts
@@ -111,6 +111,9 @@ export const OnboardingRouter: IModalFlowNavigatorConfig<
   {
     name: EOnboardingPages.OneKeyHardwareWallet,
     component: OneKeyHardwareWallet,
+    options: {
+      headerShown: false,
+    },
   },
   {
     name: EOnboardingPages.ActivateDevice,

diff --git a/yarn.lock b/yarn.lock
@@ -7050,7 +7050,7 @@ __metadata:
     react-native-spotlight-tour: "npm:^3.0.1"
     react-native-svg: "npm:^13.9.0"
     react-native-tcp-socket: "npm:^6.0.6"
-    react-native-video: "npm:6.0.0-beta.6"
+    react-native-video: "npm:6.2.0"
     react-native-view-shot: "npm:3.1.2"
     react-native-webview: "npm:@onekeyfe/[email protected]"
     react-native-webview-cleaner: "npm:@onekeyfe/[email protected]"
@@ -34284,13 +34284,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-video@npm:6.0.0-beta.6":
-  version: 6.0.0-beta.6
-  resolution: "react-native-video@npm:6.0.0-beta.6"
+"react-native-video@npm:6.2.0":
+  version: 6.2.0
+  resolution: "react-native-video@npm:6.2.0"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10/f8a53a428907b00f8ca74e7f81988b5603a6383943a9b5883c642d99845f04e5340f2254aa573dbde630e5668ac7cee8345bf0f37812de7d7e3a4db925216cd1
+  checksum: 10/5a8d6d5b778b9eb432dc0b3994c7ade44fde343778a3aca1e5b2f38daae834625824249fe4185def6d75a8fd0da89886264284de392a10396e91bdd8920d7549
   languageName: node
   linkType: hard