(chore) : Improve QR code quo2 component (#15755)
This PR adds the ability to : - Generate a QR by passing any url. - See different error correction levels. - Shows the media server url for that specific QR code. - Moved media server URI generation logic to `image_server.cljs`
This commit is contained in:
parent
8e49a06dbe
commit
2eed30be8f
|
@ -2,22 +2,57 @@
|
|||
(:require [quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[quo2.core :as quo]
|
||||
[status-im2.common.resources :as resources]))
|
||||
[utils.image-server :as image-server]
|
||||
[utils.re-frame :as rf]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
(def descriptor
|
||||
[{:label "URL For QR"
|
||||
:key :text
|
||||
:type :text}
|
||||
{:label "Error Correction Level:"
|
||||
:key :error-correction-level
|
||||
:type :select
|
||||
:options [{:key :low
|
||||
:value "Low"}
|
||||
{:key :medium
|
||||
:value "Medium"}
|
||||
{:key :quart
|
||||
:value "Quart"}
|
||||
{:key :highest
|
||||
:value "Highest"}]}])
|
||||
|
||||
(defn cool-preview
|
||||
[]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:style {:padding-bottom 150}}
|
||||
[rn/view {:style {:flex 1}}]
|
||||
[rn/view
|
||||
{:style {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}}
|
||||
[quo/qr-code
|
||||
{:source (resources/get-mock-image :qr-code)
|
||||
:height 250
|
||||
:width 250}]]]]))
|
||||
(let [state (reagent/atom {:text "https://status.im"
|
||||
:error-correction-level :highest})
|
||||
text (reagent/cursor state [:text])
|
||||
error-correction-level (reagent/cursor state [:error-correction-level])
|
||||
media-server-uri (reagent/atom "")]
|
||||
(fn []
|
||||
(reset! media-server-uri (image-server/get-qr-image-uri-for-any-url
|
||||
{:url @text
|
||||
:port (rf/sub [:mediaserver/port])
|
||||
:error-level @error-correction-level
|
||||
:qr-size 250}))
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:style {:padding-bottom 150}}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:style {:flex 1}}]
|
||||
[rn/view
|
||||
{:style {:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}}
|
||||
[rn/view
|
||||
[quo/qr-code
|
||||
{:source {:uri @media-server-uri}
|
||||
:height 250
|
||||
:width 250}]
|
||||
|
||||
[rn/view
|
||||
[rn/text {:style {:padding 20 :flex-shrink 1}} "Media server url -> "
|
||||
@media-server-uri]]]]]])))
|
||||
|
||||
(defn preview-qr-code
|
||||
[]
|
||||
|
|
|
@ -5,6 +5,8 @@
|
|||
(def ^:const identicons-action "/messages/identicons")
|
||||
(def ^:const account-images-action "/accountImages")
|
||||
(def ^:const contact-images-action "/contactImages")
|
||||
(def ^:const generate-qr-action "/GenerateQRCode")
|
||||
(def ^:const status-profile-base-url "https://join.status.im/u/")
|
||||
|
||||
(defn timestamp [] (datetime/timestamp))
|
||||
|
||||
|
@ -14,6 +16,15 @@
|
|||
:light 1
|
||||
:dark 2))
|
||||
|
||||
(defn correction-level->index
|
||||
[level]
|
||||
(case (keyword level)
|
||||
:low 1
|
||||
:medium 2
|
||||
:quart 3
|
||||
:highest 4
|
||||
4))
|
||||
|
||||
(defn get-identicons-uri
|
||||
[port public-key theme]
|
||||
(str image-server-uri-prefix
|
||||
|
@ -58,3 +69,45 @@
|
|||
"&clock="
|
||||
clock
|
||||
"&addRing=1"))
|
||||
|
||||
(defn get-account-qr-image-uri
|
||||
[{:keys [key-uid public-key port qr-size]}]
|
||||
(let [profile-qr-url (str status-profile-base-url public-key)
|
||||
base-64-qr-url (js/btoa profile-qr-url)
|
||||
profile-image-type "large"
|
||||
error-correction-level (correction-level->index :highest)
|
||||
superimpose-profile? true
|
||||
media-server-url (str image-server-uri-prefix
|
||||
port
|
||||
generate-qr-action
|
||||
"?level="
|
||||
error-correction-level
|
||||
"&url="
|
||||
base-64-qr-url
|
||||
"&keyUid="
|
||||
key-uid
|
||||
"&allowProfileImage="
|
||||
superimpose-profile?
|
||||
"&size="
|
||||
qr-size
|
||||
"&imageName="
|
||||
profile-image-type)]
|
||||
media-server-url))
|
||||
|
||||
(defn get-qr-image-uri-for-any-url
|
||||
[{:keys [url port qr-size error-level]}]
|
||||
(let [qr-url-base64 (js/btoa url)
|
||||
error-correction-level (correction-level->index error-level)
|
||||
superimpose-profile? false
|
||||
media-server-url (str image-server-uri-prefix
|
||||
port
|
||||
generate-qr-action
|
||||
"?level="
|
||||
error-correction-level
|
||||
"&url="
|
||||
qr-url-base64
|
||||
"&allowProfileImage="
|
||||
superimpose-profile?
|
||||
"&size="
|
||||
qr-size)]
|
||||
media-server-url))
|
||||
|
|
Loading…
Reference in New Issue