Add animated onboarding videos
Add animated assets on intro screens Add component for video on home view Did not use it for now - as the asset for that video is broken Do not justify center videos in intro Update video assets for home view fix generate-nix.sh script for maven deps Signed-off-by: Jakub Sokołowski <jakub@status.im> add missing android-scalablevideoview dependency Signed-off-by: Jakub Sokołowski <jakub@status.im> Fix center position of videos in onboarding Use image for sample key in android Because during animation transition in creates a black background Add play when inactive for ios Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
This commit is contained in:
parent
a22bd83a27
commit
59140d971f
|
@ -20,6 +20,7 @@
|
|||
"react-native-svg"
|
||||
"react-native-webview-bridge"
|
||||
"react-native-touch-id"
|
||||
"react-native-video"
|
||||
"web3-utils"
|
||||
"chance"
|
||||
"emojilib"
|
||||
|
@ -81,6 +82,7 @@
|
|||
|
||||
;; Resoures
|
||||
:resource-dirs ["resources/images"
|
||||
"resources/videos"
|
||||
"desktop/resources"]
|
||||
|
||||
:figwheel-options {:nrepl-port 7888
|
||||
|
|
|
@ -7,9 +7,6 @@
|
|||
:analytics-image (js/require "./resources/images/ui/analytics-image.png")
|
||||
:welcome-image (js/require "./resources/images/ui/welcome-image.png")
|
||||
:welcome (js/require "./resources/images/ui/welcome.jpg")
|
||||
:intro1 (js/require "./resources/images/ui/intro1.jpg")
|
||||
:intro2 (js/require "./resources/images/ui/intro2.jpg")
|
||||
:intro3 (js/require "./resources/images/ui/intro3.jpg")
|
||||
:sample-key (js/require "./resources/images/ui/sample-key.jpg")
|
||||
:lock (js/require "./resources/images/ui/lock.png")
|
||||
:tribute-to-talk (js/require "./resources/images/ui/tribute-to-talk.png")
|
||||
|
@ -35,12 +32,21 @@
|
|||
:phone-nfc-off (js/require "./resources/images/ui/phone-nfc-off.png")
|
||||
:dapp-store (js/require "./resources/images/ui/dapp-store.png")
|
||||
:ens-header (js/require "./resources/images/ui/ens-header.png")
|
||||
:new-chat-header (js/require "./resources/images/ui/new-chat-header.png")})
|
||||
:new-chat-header (js/require "./resources/images/ui/new-chat-header.png")
|
||||
:welcome-video (js/require "./resources/videos/welcome.mp4")
|
||||
:browser-video (js/require "./resources/videos/browser.mp4")
|
||||
:wallet-video (js/require "./resources/videos/wallet.mp4")
|
||||
:chat-video (js/require "./resources/videos/chat.mp4")
|
||||
:keys-video (js/require "./resources/videos/keys.mp4")})
|
||||
|
||||
(def loaded-images (atom {}))
|
||||
(def loaded-assets (atom {}))
|
||||
|
||||
(defn get-image [k]
|
||||
(if (contains? @loaded-images k)
|
||||
(get @loaded-images k)
|
||||
(get (swap! loaded-images assoc k
|
||||
(defn get-asset [k]
|
||||
(if (contains? @loaded-assets k)
|
||||
(get @loaded-assets k)
|
||||
(get (swap! loaded-assets assoc k
|
||||
(get ui k)) k)))
|
||||
|
||||
(def get-image get-asset)
|
||||
|
||||
(def get-video get-asset)
|
||||
|
|
|
@ -6,10 +6,6 @@
|
|||
:analytics-image "images/ui/analytics-image.png"
|
||||
:welcome-image "images/ui/welcome-image.png"
|
||||
:welcome "images/ui/welcome.jpg"
|
||||
:intro1 "images/ui/intro1.png"
|
||||
:intro2 "images/ui/intro2.png"
|
||||
:intro3 "images/ui/intro3.png"
|
||||
:sample-key "images/ui/sample-key.png"
|
||||
:lock "images/ui/lock.png"
|
||||
:tribute-to-talk "images/ui/tribute-to-talk.png"
|
||||
:wallet-welcome "images/ui/wallet-welcome.png"
|
||||
|
|
|
@ -205,6 +205,11 @@ PODS:
|
|||
- React
|
||||
- react-native-splash-screen (3.2.0):
|
||||
- React
|
||||
- react-native-video (5.0.2):
|
||||
- React
|
||||
- react-native-video/Video (= 5.0.2)
|
||||
- react-native-video/Video (5.0.2):
|
||||
- React
|
||||
- react-native-webview (6.11.1):
|
||||
- React
|
||||
- react-native-webview-bridge (0.33.17):
|
||||
|
@ -297,6 +302,7 @@ DEPENDENCIES:
|
|||
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
|
||||
- react-native-shake (from `../node_modules/react-native-shake`)
|
||||
- react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
|
||||
- react-native-video (from `../node_modules/react-native-video`)
|
||||
- react-native-webview (from `../node_modules/react-native-webview`)
|
||||
- react-native-webview-bridge (from `../node_modules/react-native-webview-bridge`)
|
||||
- React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
|
||||
|
@ -375,6 +381,8 @@ EXTERNAL SOURCES:
|
|||
:path: "../node_modules/react-native-shake"
|
||||
react-native-splash-screen:
|
||||
:path: "../node_modules/react-native-splash-screen"
|
||||
react-native-video:
|
||||
:path: "../node_modules/react-native-video"
|
||||
react-native-webview:
|
||||
:path: "../node_modules/react-native-webview"
|
||||
react-native-webview-bridge:
|
||||
|
@ -443,6 +451,7 @@ SPEC CHECKSUMS:
|
|||
react-native-safe-area-context: d288138da2c800caa111f9352e9333f186a06ead
|
||||
react-native-shake: de052eaa3eadc4a326b8ddd7ac80c06e8d84528c
|
||||
react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
|
||||
react-native-video: d01ed7ff1e38fa7dcc6c15c94cf505e661b7bfd0
|
||||
react-native-webview: 0658813bcc4b6c22f3cbb035a2227aa896a8cbc0
|
||||
react-native-webview-bridge: 3023f6b0e84cdf8e4a96511d2b04e73b038f95f0
|
||||
React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
|
||||
|
|
|
@ -41,6 +41,7 @@
|
|||
"react-native-status-keycard": "git+https://github.com/status-im/react-native-status-keycard.git#v2.5.17",
|
||||
"react-native-svg": "^9.8.4",
|
||||
"react-native-touch-id": "^4.4.1",
|
||||
"react-native-video": "^5.0.2",
|
||||
"react-native-webview": "^6.11.1",
|
||||
"react-native-webview-bridge": "git+https://github.com/status-im/react-native-webview-bridge.git#fix/community-webview",
|
||||
"react-navigation": "^3.11.0",
|
||||
|
|
|
@ -2109,6 +2109,11 @@ elliptic@^6.4.0:
|
|||
minimalistic-assert "^1.0.0"
|
||||
minimalistic-crypto-utils "^1.0.0"
|
||||
|
||||
eme-encryption-scheme-polyfill@^1.0.2:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-1.0.3.tgz#6ee8d9633bfa5ab44a620ea33854f4e7aa58f3c2"
|
||||
integrity sha512-BO98g91VkDSpFHHgWAeppz9hn1U3WRQWKh4O3mZk5JvaUvgYm0Q67t7/bC+8iEQsK+JA/K7+v2lhz1B+zXR/zA==
|
||||
|
||||
emoji-regex@^6.1.0:
|
||||
version "6.5.1"
|
||||
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2"
|
||||
|
@ -3424,7 +3429,7 @@ jsx-ast-utils@^1.4.0:
|
|||
resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
|
||||
integrity sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE=
|
||||
|
||||
keymirror@0.1.1:
|
||||
keymirror@0.1.1, keymirror@^0.1.1:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/keymirror/-/keymirror-0.1.1.tgz#918889ea13f8d0a42e7c557250eee713adc95c35"
|
||||
integrity sha1-kYiJ6hP40KQufFVyUO7nE63JXDU=
|
||||
|
@ -4681,7 +4686,7 @@ promise@^7.1.1:
|
|||
dependencies:
|
||||
asap "~2.0.3"
|
||||
|
||||
prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
|
||||
prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
|
||||
version "15.7.2"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
||||
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
|
||||
|
@ -4921,6 +4926,15 @@ react-native-touch-id@^4.4.1:
|
|||
resolved "https://registry.yarnpkg.com/react-native-touch-id/-/react-native-touch-id-4.4.1.tgz#8b1bb2d04c30bac36bb9696d2d723e719c4a8b08"
|
||||
integrity sha512-1jTl8fC+0fxvqegy/XXTyo6vMvPhjzkoDdaqoYZx0OH8AT250NuXnNPyKktvigIcys3+2acciqOeaCall7lrvg==
|
||||
|
||||
react-native-video@^5.0.2:
|
||||
version "5.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react-native-video/-/react-native-video-5.0.2.tgz#8f07da0cd85a1d4b316d115f3786409efc9e39fb"
|
||||
integrity sha512-zbItbMH0uZYkK7xFKa41+950QjoTrIl60bY1vAP7gxTn20HGHvHZRw28h9A5npK5T0QuWMAkn8twaGzqcDkTug==
|
||||
dependencies:
|
||||
keymirror "^0.1.1"
|
||||
prop-types "^15.5.10"
|
||||
shaka-player "^2.4.4"
|
||||
|
||||
"react-native-webview-bridge@git+https://github.com/status-im/react-native-webview-bridge.git#fix/community-webview":
|
||||
version "0.33.17"
|
||||
resolved "git+https://github.com/status-im/react-native-webview-bridge.git#55acc0cb683dc239673bbe5a94b1f13e7b90e1f7"
|
||||
|
@ -5406,6 +5420,13 @@ setprototypeof@1.1.1:
|
|||
resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
|
||||
integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
|
||||
|
||||
shaka-player@^2.4.4:
|
||||
version "2.5.7"
|
||||
resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-2.5.7.tgz#d8cf3489fef2609957ae44a4faa46a38a5fcda20"
|
||||
integrity sha512-Hcanwr1cnGru1E42EXml6XaoRCByutr3DRI9LRoknZKdIlsBG+F4kT5aWrMlwFw6foFNw9hoMpRsB6LWUPlrIw==
|
||||
dependencies:
|
||||
eme-encryption-scheme-polyfill "^1.0.2"
|
||||
|
||||
shebang-command@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
|
||||
|
|
|
@ -20,8 +20,13 @@ output_nix_file_path="${current_dir}/maven-sources.nix"
|
|||
inputs2nix=$(realpath --relative-to="${current_dir}" "${GIT_ROOT}/nix/tools/maven/maven-inputs2nix.sh")
|
||||
|
||||
echo "Regenerating Nix files, this process should take about 90 minutes"
|
||||
nix-shell --run "set -Eeuo pipefail; LC_ALL=C ${current_dir}/fetch-maven-deps.sh | sort -u -o ${inputs_file_path}" \
|
||||
-A targets.mobile.android.generate-maven-and-npm-deps-shell --show-trace "${GIT_ROOT}/default.nix"
|
||||
nix-shell \
|
||||
--argstr target android \
|
||||
--option sandbox false \
|
||||
--run "set -Eeuo pipefail; LC_ALL=C ${current_dir}/fetch-maven-deps.sh \
|
||||
| sort -u -o ${inputs_file_path}" \
|
||||
-A targets.mobile.android.generate-maven-and-npm-deps-shell \
|
||||
--show-trace "${GIT_ROOT}/default.nix"
|
||||
|
||||
pushd ${current_dir}
|
||||
${inputs2nix} ${inputs_file_path} > ${output_nix_file_path}
|
||||
|
|
|
@ -343,6 +343,7 @@ https://jcenter.bintray.com/com/sun/xml/fastinfoset/FastInfoset/1.2.13/FastInfos
|
|||
https://jcenter.bintray.com/com/tunnelvisionlabs/antlr4-annotations/4.5/antlr4-annotations-4.5
|
||||
https://jcenter.bintray.com/com/tunnelvisionlabs/antlr4-runtime/4.5/antlr4-runtime-4.5
|
||||
https://jcenter.bintray.com/com/tunnelvisionlabs/antlr4/4.5/antlr4-4.5
|
||||
https://jcenter.bintray.com/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4
|
||||
https://jcenter.bintray.com/commons-codec/commons-codec/1.10/commons-codec-1.10
|
||||
https://jcenter.bintray.com/commons-codec/commons-codec/1.4/commons-codec-1.4
|
||||
https://jcenter.bintray.com/commons-codec/commons-codec/1.6/commons-codec-1.6
|
||||
|
|
|
@ -5213,6 +5213,21 @@ in {
|
|||
sha256 = "0vlqbcihfsgvkzsczp0h6ynz7wnf2d88kvhqfbn1hibry1y7h9wh";
|
||||
};
|
||||
};
|
||||
"https://jcenter.bintray.com/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4" =
|
||||
{
|
||||
host = repositories.jcenter;
|
||||
path =
|
||||
"com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4";
|
||||
type = "aar";
|
||||
pom = {
|
||||
sha1 = "450c695ac203f62a5d9064f0264c6d174c73c943";
|
||||
sha256 = "0ihhy4z0vqw2i1lqsz9idz1j84c6bwym7ldg7h6kdnxh7jh7w4s5";
|
||||
};
|
||||
jar = {
|
||||
sha1 = "41f9ccae09aafebcc34593036243b5ac2e77ef8e";
|
||||
sha256 = "1qzz9y9z58nynjvim1pqfkh45419pd79lvnlryqw2f515jjflm1b";
|
||||
};
|
||||
};
|
||||
"https://jcenter.bintray.com/commons-codec/commons-codec/1.10/commons-codec-1.10" =
|
||||
{
|
||||
host = repositories.jcenter;
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 132 KiB |
Binary file not shown.
Before Width: | Height: | Size: 167 KiB |
Binary file not shown.
Before Width: | Height: | Size: 98 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -0,0 +1,7 @@
|
|||
(ns status-im.ui.components.video
|
||||
(:require [reagent.core :as reagent]
|
||||
[goog.object :as object]))
|
||||
|
||||
(def rn-video (js/require "react-native-video"))
|
||||
|
||||
(def video (reagent/adapt-react-class (object/get rn-video "default")))
|
|
@ -2,6 +2,7 @@
|
|||
(:require [re-frame.core :as re-frame]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.i18n :as i18n]
|
||||
[status-im.ui.components.video :as video]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[status-im.ui.components.connectivity.view :as connectivity]
|
||||
[status-im.ui.components.icons.vector-icons :as icons]
|
||||
|
@ -22,23 +23,24 @@
|
|||
[status-im.ui.components.button :as button])
|
||||
(:require-macros [status-im.utils.views :as views]))
|
||||
|
||||
(defn welcome-image-wrapper []
|
||||
(let [dimensions (reagent/atom {})]
|
||||
(fn []
|
||||
[react/view {:on-layout (fn [e]
|
||||
(reset! dimensions (js->clj (-> e .-nativeEvent .-layout) :keywordize-keys true)))
|
||||
:style {:align-items :center
|
||||
:justify-content :center
|
||||
:flex 1}}
|
||||
(let [padding 0
|
||||
image-size (- (min (:width @dimensions) (:height @dimensions)) padding)]
|
||||
[react/image {:source (resources/get-image :welcome)
|
||||
:resize-mode :contain
|
||||
:style {:width image-size :height image-size}}])])))
|
||||
(defn welcome-video-wrapper []
|
||||
[react/view {:style {:align-items :center
|
||||
:justify-content :center
|
||||
:flex 1}}
|
||||
[video/video {:source (resources/get-video :welcome-video)
|
||||
:repeat true
|
||||
:pause false
|
||||
:playWhenInactive true
|
||||
:resize-mode :contain
|
||||
:style {:position "absolute"
|
||||
:top 0
|
||||
:bottom 0
|
||||
:left 0
|
||||
:right 0}}]])
|
||||
|
||||
(defn welcome []
|
||||
[react/view {:style styles/welcome-view}
|
||||
[welcome-image-wrapper]
|
||||
[welcome-video-wrapper]
|
||||
[react/i18n-text {:style styles/welcome-text :key :welcome-to-status}]
|
||||
[react/view
|
||||
[react/i18n-text {:style styles/welcome-text-description
|
||||
|
|
|
@ -10,7 +10,8 @@
|
|||
[status-im.utils.identicon :as identicon]
|
||||
[status-im.ui.components.radio :as radio]
|
||||
[status-im.ui.components.text-input.view :as text-input]
|
||||
[taoensso.timbre :as log]
|
||||
[status-im.ui.components.video :as video]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[status-im.utils.gfycat.core :as gfy]
|
||||
[status-im.ui.components.colors :as colors]
|
||||
[reagent.core :as r]
|
||||
|
@ -21,7 +22,6 @@
|
|||
[status-im.i18n :as i18n]
|
||||
[status-im.constants :as constants]
|
||||
[status-im.utils.config :as config]
|
||||
[status-im.utils.platform :as platform]
|
||||
[status-im.ui.components.topbar :as topbar]))
|
||||
|
||||
(defn dots-selector [{:keys [on-press n selected color]}]
|
||||
|
@ -31,93 +31,105 @@
|
|||
^{:key i}
|
||||
[react/view {:style (styles/dot color (selected i))}]))])
|
||||
|
||||
(defn intro-viewer [slides window-height]
|
||||
(let [scroll-x (r/atom 0)
|
||||
(defn intro-viewer [slides window-height window-width]
|
||||
(let [scroll-x (r/atom 0)
|
||||
scroll-view-ref (atom nil)
|
||||
width (r/atom 0)
|
||||
height (r/atom 0)
|
||||
bottom-margin (if (> window-height 600) 32 16)]
|
||||
width (r/atom 0)
|
||||
height (r/atom 0)
|
||||
bottom-margin (if (> window-height 600) 32 16)]
|
||||
(fn []
|
||||
[react/view {:style {:align-items :center
|
||||
:flex 1
|
||||
:margin-bottom bottom-margin
|
||||
:justify-content :flex-end}
|
||||
[react/view {:style {:align-items :center
|
||||
:flex 1
|
||||
:margin-bottom bottom-margin
|
||||
:justify-content :flex-end}
|
||||
:on-layout (fn [e]
|
||||
(reset! width (-> e .-nativeEvent .-layout .-width)))}
|
||||
[react/scroll-view {:horizontal true
|
||||
:paging-enabled true
|
||||
:ref #(reset! scroll-view-ref %)
|
||||
:shows-vertical-scroll-indicator false
|
||||
[react/scroll-view {:horizontal true
|
||||
:paging-enabled true
|
||||
:ref #(reset! scroll-view-ref %)
|
||||
:shows-vertical-scroll-indicator false
|
||||
:shows-horizontal-scroll-indicator false
|
||||
:pinch-gesture-enabled false
|
||||
:on-scroll #(let [x (.-nativeEvent.contentOffset.x %)]
|
||||
(reset! scroll-x x))
|
||||
:style {;:width @width
|
||||
:margin-bottom bottom-margin}}
|
||||
:pinch-gesture-enabled false
|
||||
:on-scroll #(let [x (.-nativeEvent.contentOffset.x %)]
|
||||
(reset! scroll-x x))
|
||||
:style {;:width @width
|
||||
:margin-bottom bottom-margin}}
|
||||
(doall
|
||||
(for [s slides]
|
||||
^{:key (:title s)}
|
||||
[react/view {:style {:flex 1
|
||||
:width @width
|
||||
:justify-content :flex-end
|
||||
:align-items :center
|
||||
:padding-horizontal 32}}
|
||||
(let [margin 32
|
||||
size (min @width @height) #_(- (min @width @height) #_(* 2 margin))]
|
||||
[react/view {:style {:flex 1}
|
||||
[react/view {:style {:flex 1
|
||||
:justify-content :flex-start
|
||||
:align-items :center
|
||||
:width window-width}}
|
||||
(let [size (min @width @height)]
|
||||
[react/view {:style {:flex 1}
|
||||
:on-layout (fn [e]
|
||||
(reset! height (-> e .-nativeEvent .-layout .-height)))}
|
||||
[react/image {:source (:image s)
|
||||
:resize-mode :contain
|
||||
:style {:width size
|
||||
:height size}}]])
|
||||
[react/i18n-text {:style styles/wizard-title :key (:title s)}]
|
||||
[react/i18n-text {:style styles/wizard-text
|
||||
:key (:text s)}]]))]
|
||||
[video/video {:source (resources/get-video (:video s))
|
||||
:repeat true
|
||||
:pause false
|
||||
:playWhenInactive true
|
||||
:resize-mode :contain
|
||||
:style {:background-color :white
|
||||
:width size
|
||||
:height size}}]])
|
||||
[react/view {:style {:padding-horizontal 16}}
|
||||
[react/i18n-text {:style styles/wizard-title :key (:title s)}]
|
||||
[react/i18n-text {:style styles/wizard-text
|
||||
:key (:text s)}]]]))]
|
||||
(let [selected (hash-set (quot (int @scroll-x) (int @width)))]
|
||||
[dots-selector {:selected selected :n (count slides)
|
||||
:color colors/blue}])])))
|
||||
:color colors/blue}])])))
|
||||
|
||||
(defview intro []
|
||||
(letsubs [{window-height :height} [:dimensions/window]]
|
||||
(letsubs [{window-height :height
|
||||
window-width :width} [:dimensions/window]]
|
||||
[react/view {:style styles/intro-view}
|
||||
[intro-viewer [{:image (:intro1 resources/ui)
|
||||
[intro-viewer [{:video :chat-video
|
||||
:title :intro-title1
|
||||
:text :intro-text1}
|
||||
{:image (:intro2 resources/ui)
|
||||
:text :intro-text1}
|
||||
{:video :wallet-video
|
||||
:title :intro-title2
|
||||
:text :intro-text2}
|
||||
{:image (:intro3 resources/ui)
|
||||
:text :intro-text2}
|
||||
{:video :browser-video
|
||||
:title :intro-title3
|
||||
:text :intro-text3}] window-height]
|
||||
:text :intro-text3}] window-height window-width]
|
||||
[react/view styles/buttons-container
|
||||
[components.common/button {:button-style (assoc styles/bottom-button :margin-bottom 16)
|
||||
:on-press #(re-frame/dispatch [:multiaccounts.create.ui/intro-wizard true])
|
||||
:label (i18n/label :t/get-started)}]
|
||||
[components.common/button {:button-style (assoc styles/bottom-button :margin-bottom 24)
|
||||
:on-press #(re-frame/dispatch [:multiaccounts.recover.ui/recover-multiaccount-button-pressed])
|
||||
:label (i18n/label :t/access-key)
|
||||
:background? false}]
|
||||
:on-press #(re-frame/dispatch [:multiaccounts.recover.ui/recover-multiaccount-button-pressed])
|
||||
:label (i18n/label :t/access-key)
|
||||
:background? false}]
|
||||
[react/nested-text
|
||||
{:style styles/welcome-text-bottom-note}
|
||||
(i18n/label :t/intro-privacy-policy-note1)
|
||||
[{:style (assoc styles/welcome-text-bottom-note :color colors/blue)
|
||||
[{:style (assoc styles/welcome-text-bottom-note :color colors/blue)
|
||||
:on-press privacy-policy/open-privacy-policy-link!}
|
||||
(i18n/label :t/intro-privacy-policy-note2)]]]]))
|
||||
|
||||
(defn generate-key []
|
||||
(let [dimensions (r/atom {})]
|
||||
(fn []
|
||||
[react/view {:on-layout (fn [e]
|
||||
(reset! dimensions (js->clj (-> e .-nativeEvent .-layout) :keywordize-keys true)))
|
||||
:style {:align-items :center
|
||||
:justify-content :center
|
||||
:flex 1}}
|
||||
(let [padding 40
|
||||
image-size (- (min (:width @dimensions) (:height @dimensions)) padding)]
|
||||
[react/image {:source (resources/get-image :sample-key)
|
||||
:resize-mode :contain
|
||||
:style {:width image-size :height image-size}}])])))
|
||||
[react/view {:on-layout (fn [e]
|
||||
(reset! dimensions (js->clj (-> e .-nativeEvent .-layout) :keywordize-keys true)))
|
||||
:style {:align-items :center
|
||||
:justify-content :center
|
||||
:background-color :white
|
||||
:flex 1}}
|
||||
(let [size (min (:width @dimensions) (:height @dimensions))]
|
||||
(if platform/android?
|
||||
[react/image {:source (resources/get-image :sample-key)
|
||||
:resize-mode :contain
|
||||
:style {:width size
|
||||
:height size}}]
|
||||
[video/video {:source (resources/get-video :keys-video)
|
||||
:repeat true
|
||||
:pause false
|
||||
:playWhenInactive true
|
||||
:resize-mode :contain
|
||||
:style {:width size :height size}}]))])))
|
||||
|
||||
(defn choose-key [{:keys [multiaccounts selected-id view-height]}]
|
||||
[react/view
|
||||
|
@ -449,7 +461,7 @@
|
|||
:ellipsize-mode :middle}
|
||||
(utils/get-shortened-address pubkey)]]]]])
|
||||
|
||||
(defview wizard-generate-key []
|
||||
(defview wizard-generate-key [_ focused?]
|
||||
(letsubs [wizard-state [:intro-wizard/generate-key]]
|
||||
[react/view {:style {:flex 1}}
|
||||
[topbar/topbar
|
||||
|
@ -458,9 +470,10 @@
|
|||
:accessibility-label :back-button
|
||||
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
|
||||
[react/view {:style {:flex 1
|
||||
:background-color :white
|
||||
:justify-content :space-between}}
|
||||
[top-bar {:step :generate-key}]
|
||||
[generate-key]
|
||||
[generate-key focused?]
|
||||
[bottom-bar {:step :generate-key
|
||||
:forward-action :intro-wizard/step-forward-pressed
|
||||
:processing? (:processing? wizard-state)}]]]))
|
||||
|
|
Loading…
Reference in New Issue