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:
Gheorghe Pinzaru 2020-01-14 15:25:12 +03:00
parent a22bd83a27
commit 59140d971f
No known key found for this signature in database
GPG Key ID: C9A094959935A952
20 changed files with 168 additions and 90 deletions

View File

@ -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

View File

@ -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)

View File

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

View File

@ -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

View File

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

View File

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

View File

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

View File

@ -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

View File

@ -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

BIN
resources/videos/browser.mp4 Executable file

Binary file not shown.

BIN
resources/videos/chat.mp4 Executable file

Binary file not shown.

BIN
resources/videos/keys.mp4 Executable file

Binary file not shown.

BIN
resources/videos/wallet.mp4 Executable file

Binary file not shown.

Binary file not shown.

View File

@ -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")))

View File

@ -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

View File

@ -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)}]]]))