From db848a1f19fa60747742ca06fb35ffae94ec63b0 Mon Sep 17 00:00:00 2001 From: Andrea Maria Piana Date: Wed, 14 Apr 2021 13:59:45 +0200 Subject: [PATCH] Add permission handling & enable HW acceleration on webview This extend adding permissions to a separate webview used for buying crypto. It also removes a fix with hardware acceleration, as the camera does not work if disabled. Signed-off-by: Andrea Maria Piana --- src/status_im/ui/screens/browser/views.cljs | 14 ++++++------- .../ui/screens/wallet/buy_crypto/views.cljs | 20 +++++++++++++++---- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/status_im/ui/screens/browser/views.cljs b/src/status_im/ui/screens/browser/views.cljs index 446edac718..2d04d4d24d 100644 --- a/src/status_im/ui/screens/browser/views.cljs +++ b/src/status_im/ui/screens/browser/views.cljs @@ -112,7 +112,7 @@ (def resources-to-permissions-map {"android.webkit.resource.VIDEO_CAPTURE" :camera "android.webkit.resource.AUDIO_CAPTURE" :record-audio}) -(views/defview request-resources-panel [resources url] +(views/defview request-resources-panel [resources url webview-ref] [react/view styles/blocked-access-container [react/view styles/blocked-access-icon-container [icons/icon :main-icons/camera styles/blocked-access-camera-icon]] @@ -127,8 +127,8 @@ :on-press (fn [] (components.permissions/request-permissions {:permissions (map resources-to-permissions-map resources) - :on-allowed #(.answerPermissionRequest ^js @webview-ref/webview-ref true resources) - :on-denied #(.answerPermissionRequest ^js @webview-ref/webview-ref false)}) + :on-allowed #(.answerPermissionRequest ^js webview-ref true resources) + :on-denied #(.answerPermissionRequest ^js webview-ref false)}) (re-frame/dispatch [:bottom-sheet/hide]))} (i18n/label :t/allow)]] [react/view styles/blocked-access-button-wrapper @@ -136,7 +136,7 @@ {:theme :negative :style styles/blocked-access-button :on-press (fn [] - (.answerPermissionRequest ^js @webview-ref/webview-ref false) + (.answerPermissionRequest ^js webview-ref false) (re-frame/dispatch [:bottom-sheet/hide]))} (i18n/label :t/deny)]]]]) @@ -148,10 +148,10 @@ [react/text {:style styles/blocked-access-text} (str url " " (i18n/label :t/page-camera-request-blocked))]]]) -(defn request-resources-access-for-page [resources url] +(defn request-resources-access-for-page [resources url webview-ref] (re-frame/dispatch [:bottom-sheet/show-sheet - {:content (fn [] [request-resources-panel resources url]) + {:content (fn [] [request-resources-panel resources url webview-ref]) :show-handle? false :backdrop-dismiss? false :disable-drag? true @@ -193,7 +193,7 @@ 500)) :on-permission-request #(if resources-permission? - (request-resources-access-for-page (-> ^js % .-nativeEvent .-resources) url) + (request-resources-access-for-page (-> ^js % .-nativeEvent .-resources) url @webview-ref/webview-ref) (block-resources-access-and-notify-user url)) ;; Extract event data here due to ;; https://reactjs.org/docs/events.html#event-pooling diff --git a/src/status_im/ui/screens/wallet/buy_crypto/views.cljs b/src/status_im/ui/screens/wallet/buy_crypto/views.cljs index b1780691a1..f421ecdaf9 100644 --- a/src/status_im/ui/screens/wallet/buy_crypto/views.cljs +++ b/src/status_im/ui/screens/wallet/buy_crypto/views.cljs @@ -6,6 +6,7 @@ [status-im.ui.screens.wallet.buy-crypto.sheets :as sheets] [status-im.ui.components.icons.icons :as icons] [status-im.ui.screens.chat.photos :as photos] + [status-im.ui.screens.browser.views :as browser.views] [quo.core :as quo] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] @@ -14,6 +15,8 @@ (def learn-more-url "") +(def webview-ref (atom nil)) + (defn on-buy-crypto-pressed [] (re-frame/dispatch [:buy-crypto.ui/open-screen])) @@ -65,7 +68,8 @@ logo-url site-url]} (get-in route [:route :params])] (fn [] - [react/view {:flex 1} + ;; overflow hidden needed for the crash on android + [react/view {:flex 1 :overflow :hidden} [topbar/topbar {:content [react/view {:flex 1 :align-items :center :justify-content :center} @@ -81,6 +85,8 @@ :top 0 :left 0 :right 0 + :z-index 1 + :background-color "#ffffff" :bottom 0 :align-items :center :justify-content :center}} @@ -94,9 +100,15 @@ (i18n/label :t/buy-crypto-leaving)]]]) [components.webview/webview {:onLoadEnd #(reset! has-loaded? true) - ;; NOTE: without this it crashes on android 11 - :androidHardwareAccelerationDisabled true - :containerStyle (when-not @has-loaded? {:opacity 0}) + :ref #(reset! webview-ref %) + :on-permission-request #(browser.views/request-resources-access-for-page + (-> ^js % .-nativeEvent .-resources) site-url @webview-ref) + :java-script-enabled true + ;; This is to avoid crashes on android devices + ;; due to https://github.com/react-native-webview/react-native-webview/issues/1838 + ;; We can't disable hardware acceleration as we need to use camera + :style {:opacity 0.99} + :local-storage-enabled true :source {:uri site-url}}]]))) (defn container []