feat: add parallax to biometrics page for whitelisted devices (#16296)

This commit is contained in:
Jamie Caprani 2023-06-27 10:50:27 +01:00 committed by GitHub
parent 79151ee85d
commit fa698dbc30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 70 additions and 26 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 593 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -13,6 +13,7 @@ which is explained in better detail in this video
https://www.youtube.com/watch?v=iEBoZDHCN5Y&t=2205s
there is a bug with the pitch and roll calculations provided directly from the sensor data so the calculation had to
be done using the quaternions directly.
This link is useful to understand this: https://engineering.stackexchange.com/questions/3348/calculating-pitch-yaw-and-roll-from-mag-acc-and-gyro-data
*/
export function sensorAnimatedImage(zIndex, offset, stretch) {
'worklet';

View File

@ -68,6 +68,10 @@
(fn []
(js->clj (.get (.-Dimensions ^js react-native) "screen") :keywordize-keys true))))
(def small-screen?
(let [height (:height (get-screen))]
(< height 700)))
(defn hw-back-add-listener
[callback]
(.addEventListener (.-BackHandler ^js react-native) "hardwareBackPress" callback))

View File

@ -1,12 +1,10 @@
(ns status-im2.common.parallax.style
(:require [react-native.safe-area :as safe-area]
[react-native.platform :as platform]))
[react-native.core :as rn]))
(def outer-container
{:position :absolute
:top (if platform/android?
(+ (safe-area/get-top) (safe-area/get-bottom))
(safe-area/get-bottom))
:top (if rn/small-screen? (safe-area/get-top) 0)
:left 0
:right 0
:bottom 0})

View File

@ -0,0 +1,12 @@
(ns status-im2.common.parallax.whitelist
(:require [native-module.core :as native-module]
[clojure.string :as string]))
(def ^:const device-id (:device-id (native-module/get-device-model-info)))
;; iPhone 14 is 15 for some reason
(def ^:const whitelist #{"iPhone11" "iPhone12" "iPhone13" "iPhone14" "iPhone15"})
(def whitelisted?
(let [device-type (first (string/split (str device-id) ","))]
(whitelist device-type)))

View File

@ -3,6 +3,7 @@
(def ui
{:add-new-contact (js/require "../resources/images/ui2/add-contact.png")
:biometrics (js/require "../resources/images/ui2/biometrics.png")
:desktop-how-to-pair-sign-in (js/require "../resources/images/ui2/desktop-how-to-pair-sign-in.png")
:desktop-how-to-pair-logged-in (js/require
"../resources/images/ui2/desktop-how-to-pair-logged-in.png")
@ -82,6 +83,12 @@
:usdt (js/require "../resources/images/tokens/mainnet/USDT.png")
:snt (js/require "../resources/images/tokens/mainnet/SNT.png")})
(def parallax-video
{:biometrics [(js/require "../resources/videos2/biometrics_01.mp4")
(js/require "../resources/videos2/biometrics_02.mp4")
(js/require "../resources/videos2/biometrics_03.mp4")
(js/require "../resources/videos2/biometrics_04.mp4")]})
(defn get-mock-image
[k]
(get mock-images k))

View File

@ -1,24 +1,19 @@
(ns status-im2.contexts.onboarding.enable-biometrics.style
(:require [quo2.foundations.colors :as colors]))
(ns status-im2.contexts.onboarding.enable-biometrics.style)
(def default-margin 20)
(defn page-container
[insets]
{:flex 1
:padding-top (:top insets)
:background-color colors/neutral-80-opa-80-blur})
:justify-content :space-between
:padding-top (:top insets)})
(def page-illustration
(defn page-illustration
[width]
{:flex 1
:background-color colors/danger-50
:align-items :center
:margin-horizontal default-margin
:border-radius 20
:margin-top default-margin
:justify-content :center})
:width width})
(defn buttons
[insets]
{:margin default-margin
:margin-bottom (+ 14 (:bottom insets))})
:margin-bottom (+ 12 (:bottom insets))})

View File

@ -7,7 +7,11 @@
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
[status-im.multiaccounts.biometric.core :as biometric]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
[utils.re-frame :as rf]
[status-im2.common.resources :as resources]
[status-im2.common.parallax.view :as parallax]
[status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.common.parallax.whitelist :as whitelist]))
(defn page-title
[]
@ -19,7 +23,7 @@
:subtitle-accessibility-label :enable-biometrics-sub-title}])
(defn enable-biometrics-buttons
[{:keys [insets]}]
[insets]
(let [supported-biometric (rf/sub [:supported-biometric-auth])
bio-type-label (biometric/get-label supported-biometric)
profile-color (:color (rf/sub [:onboarding-2/profile]))]
@ -37,13 +41,36 @@
:style {:margin-top 12}}
(i18n/label :t/maybe-later)]]))
(defn enable-biometrics-parallax
[]
(let [stretch (if rn/small-screen? 25 40)]
[:<>
[parallax/video
{:layers (:biometrics resources/parallax-video)
:stretch stretch}]
[rn/view
[navigation-bar/navigation-bar {:disable-back-button? true}]
[page-title]]]))
(defn enable-biometrics-simple
[]
(let [width (:width (rn/get-window))]
[:<>
[rn/view {:flex 1}
[navigation-bar/navigation-bar {:disable-back-button? true}]
[page-title]
[rn/view {:style {:flex 1}}
[rn/image
{:resize-mode :contain
:style (style/page-illustration width)
:source (resources/get-image :biometrics)}]]]]))
(defn enable-biometrics
[]
(let [insets (safe-area/get-insets)]
[rn/view {:style (style/page-container insets)}
[navigation-bar/navigation-bar {:disable-back-button? true}]
[page-title]
[rn/view {:style style/page-illustration}
[quo/text
"Illustration here"]]
[enable-biometrics-buttons {:insets insets}]]))
[background/view true]
(if whitelist/whitelisted?
[enable-biometrics-parallax]
[enable-biometrics-simple])
[enable-biometrics-buttons insets]]))