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 <andrea.maria.piana@gmail.com>
This commit is contained in:
Andrea Maria Piana 2021-04-14 13:59:45 +02:00
parent 85a01f5404
commit db848a1f19
No known key found for this signature in database
GPG Key ID: AA6CCA6DE0E06424
2 changed files with 23 additions and 11 deletions

View File

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

View File

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