wip images

src/status_im/chat/models.cljs

@@ -21,7 +21,9 @@
             [status-im.utils.platform :as platform]
             [status-im.utils.priority-map :refer [empty-message-map]]
             [status-im.utils.utils :as utils]
-            [taoensso.timbre :as log]))
+            [taoensso.timbre :as log]
+            [status-im.utils.image-processing :as image-processing]
+            [status-im.ipfs.core :as ipfs]))
 
 (defn- get-chat [cofx chat-id]
   (get-in cofx [:db :chats chat-id]))
@@ -325,3 +327,32 @@
             (contact.core/create-contact identity)
             (tribute-to-talk/check-tribute identity)
             (navigation/navigate-to-cofx :profile nil)))
+
+(re-frame/reg-fx
+ :chat-open-image-picker
+ (fn []
+   (react/show-image-picker
+    (fn [image]
+      (let [path (get (js->clj image) "path")
+            _ (log/debug path)
+            on-success (fn [base64]
+                         (re-frame/dispatch [:chat.ui/set-chat-ui-props {:send-image base64}]))
+            on-error (fn [type error]
+                       (.log js/console type error))]
+        (image-processing/img->base64 path on-success on-error 150 150)))
+    "photo")))
+
+(fx/defn chat-open-image-picker
+  {:events [:chat.ui/open-image-picker]}
+  [cofx]
+  {:chat-open-image-picker nil})
+
+(fx/defn chat-image-added-to-ipfs
+  {:events [:chat-image-added-to-ipfs]}
+  [cofx ipfs]
+  nil)
+
+(fx/defn send-image
+  {:events [:chat.ui/send-image]}
+  [cofx send-image]
+  (ipfs/add cofx {:value send-image :on-success #(re-frame/dispatch [:chat-image-added-to-ipfs %])}))

src/status_im/chat/models/input.cljs

@@ -159,6 +159,14 @@
                                                             :pack    pack
                                                             :text    "Update to latest version to see a nice sticker here!"})})))
 
+(fx/defn send-image
+  [{:keys [db] :as cofx} hash current-chat-id]
+  (when-not (string/blank? hash)
+    (chat.message/send-message cofx {:chat-id      current-chat-id
+                                     :content-type constants/content-type-image
+                                     :content      {:chat-id current-chat-id
+                                                    :hash    hash}})))
+
 (fx/defn send-current-message
   "Sends message from current chat input"
   [{{:keys [current-chat-id id->command access-scope->command-id] :as db} :db :as cofx}]

src/status_im/constants.cljs

@@ -9,6 +9,7 @@
 
 (def content-type-text "text/plain")
 (def content-type-sticker "sticker")
+(def content-type-image "image")
 (def content-type-status "status")
 (def content-type-command "command")
 (def content-type-command-request "command-request")

src/status_im/core.cljs

@@ -12,7 +12,9 @@
             cljs.core.specs.alpha))
 
 (if js/goog.DEBUG
-  (.ignoreWarnings (.-YellowBox js-dependencies/react-native) #js ["re-frame: overwriting"])
+  (.ignoreWarnings (.-YellowBox js-dependencies/react-native) #js ["re-frame: overwriting"
+                                                                   "Warning: componentWillMount is deprecated and will be removed in the next major version. Use componentDidMount instead. As a temporary workaround, you can rename to UNSAFE_componentWillMount."
+                                                                   "Warning: componentWillUpdate is deprecated and will be removed in the next major version. Use componentDidUpdate instead. As a temporary workaround, you can rename to UNSAFE_componentWillUpdate."])
   (aset js/console "disableYellowBox" true))
 
 (defn init [app-root]

src/status_im/ipfs/core.cljs

@@ -37,7 +37,8 @@
                    (.append "file" value))]
     {:http-raw-post (cond-> {:url  ipfs-add-url
                              :body formdata
-                             :timeout-ms 5000
+                             :opts {:headers {"Content-Type" "multipart/form-data"}}
+                             :timeout-ms 15000
                              :success-event-creator
                              (fn [{:keys [status body]}]
                                (if (= 200 status)

src/status_im/ui/screens/chat/image/styles.cljs

@@ -0,0 +1,8 @@
+(ns status-im.ui.screens.chat.image.styles
+  (:require [status-im.utils.platform :as platform]))
+
+(defn image-panel-height []
+  (cond
+    platform/iphone-x? 199
+    platform/ios? 158
+    :else 172))

src/status_im/ui/screens/chat/image/views.cljs

@@ -0,0 +1,59 @@
+(ns status-im.ui.screens.chat.image.views
+  (:require-macros [status-im.utils.views :refer [defview letsubs]])
+  (:require [status-im.ui.components.react :as react]
+            [status-im.ui.components.icons.vector-icons :as vector-icons]
+            [status-im.utils.platform :as platform]
+            [re-frame.core :as re-frame]
+            [status-im.ui.components.colors :as colors]
+            [status-im.ui.components.animation :as anim]
+            [status-im.ui.screens.chat.image.styles :as styles]
+            [status-im.ui.components.button :as button]
+            [status-im.utils.utils :as utils]
+            [status-im.i18n :as i18n]))
+
+(defn button [show-image?]
+  [react/touchable-highlight
+   {:on-press            (fn [_]
+                           (re-frame/dispatch [:chat.ui/set-chat-ui-props {:show-image? (not show-image?)}])
+                           (when-not platform/desktop? (js/setTimeout #(react/dismiss-keyboard!) 100)))
+    :accessibility-label :show-photo-icon}
+   [vector-icons/icon :main-icons/photo {:container-style {:margin 14 :margin-right 6}
+                                         :color           (if show-image? colors/blue colors/gray)}]])
+
+(defn show-panel-anim
+  [bottom-anim-value alpha-value]
+  (anim/start
+   (anim/parallel
+    [(anim/spring bottom-anim-value {:toValue 0
+                                     :useNativeDriver true})
+     (anim/timing alpha-value {:toValue  1
+                               :duration 500
+                               :useNativeDriver true})])))
+
+(defview image-view []
+  (letsubs [send-image        [:chats/current-chat-ui-prop :send-image]
+            bottom-anim-value  (anim/create-value (styles/image-panel-height))
+            alpha-value        (anim/create-value 0)]
+    {:component-did-mount #(show-panel-anim bottom-anim-value alpha-value)}
+    [react/animated-view {:style {:background-color :white
+                                  :height           (styles/image-panel-height)
+                                  :transform        [{:translateY bottom-anim-value}]
+                                  :opacity          alpha-value}}
+     [react/view {:align-items :center :justify-content :center}
+      (if send-image
+        [react/view {:align-items :center}
+         [react/image {:source {:uri (str "data:image/jpeg;base64," send-image)} :style {:width 150 :height 150}}]
+         [react/view {:flex-direction :row}
+          [button/button {:label :t/cancel :on-press #(re-frame/dispatch [:chat.ui/set-chat-ui-props {:send-image nil}])}]
+          [button/button {:label "Send" :on-press #(re-frame/dispatch [:chat.ui/send-image (str "data:image/jpeg;base64," send-image)])}]]]
+        [react/view {:flex-direction :row}
+         [button/button {:label "Camera" :on-press (fn []
+                                                     (re-frame/dispatch [:request-permissions
+                                                                         {:permissions [:camera]
+                                                                          :on-allowed  #(re-frame/dispatch [:navigate-to :profile-photo-capture])
+                                                                          :on-denied (fn []
+                                                                                       (utils/set-timeout
+                                                                                        #(utils/show-popup (i18n/label :t/error)
+                                                                                                           (i18n/label :t/camera-access-error))
+                                                                                        50))}]))}]
+         [button/button {:label "Galery" :on-press #(re-frame/dispatch [:chat.ui/open-image-picker])}]])]]))

src/status_im/ui/screens/chat/input/input.cljs

@@ -21,6 +21,7 @@
             [status-im.utils.utils :as utils]
             [status-im.utils.config :as config]
             [taoensso.timbre :as log]
+            [status-im.ui.screens.chat.image.views :as image]
             [status-im.ui.screens.chat.stickers.views :as stickers]))
 
 (defview basic-text-input [{:keys [set-container-width-fn height single-line-input?]}]
@@ -36,6 +37,7 @@
        :blur-on-submit         false
        :on-focus               #(re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-focused?    true
                                                                                 :show-stickers?    false
+                                                                                :show-image?    false
                                                                                 :messages-focused? false}])
        :on-blur                #(re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-focused? false}])
        :on-submit-editing      #(when single-line-input?
@@ -67,6 +69,7 @@
        :blur-on-submit         false
        :on-focus               #(re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-focused?    true
                                                                                 :show-stickers?    false
+                                                                                :show-image?    false
                                                                                 :messages-focused? false}])
        :on-blur                #(re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-focused? false}])
        :submit-shortcut        {:key "Enter"}
@@ -182,6 +185,7 @@
             {:keys [input-text]} [:chats/current-chat]
             result-box           [:chats/current-chat-ui-prop :result-box]
             show-stickers?       [:chats/current-chat-ui-prop :show-stickers?]
+            show-image?       [:chats/current-chat-ui-prop :show-image?]
             state-text (reagent/atom "")]
     {:component-will-unmount #(when platform/desktop?
                                 (re-frame/dispatch [:chat.ui/set-chat-input-text @state-text]))
@@ -202,6 +206,8 @@
        [reply-message-view]
        [react/view {:style style/input-container}
         [input-view {:single-line-input? single-line-input? :set-text set-text :state-text state-text}]
+        (when input-text-empty?
+          [image/button show-image?])
         (when (and input-text-empty? mainnet?)
           [stickers/button show-stickers?])
         (if input-text-empty?

src/status_im/ui/screens/chat/message/datemark.cljs

@@ -15,7 +15,8 @@
    {:on-press (fn [_]
                 (re-frame/dispatch
                  [:chat.ui/set-chat-ui-props {:messages-focused? true
-                                              :show-stickers?    false}])
+                                              :show-stickers?    false
+                                              :show-image?    false}])
                 (react/dismiss-keyboard!))}
    [react/view style/datemark-mobile
     [react/text {:style style/datemark-text}

src/status_im/ui/screens/chat/message/message.cljs

@@ -244,7 +244,8 @@
                           (when (and (= content-type constants/content-type-sticker) (:pack content))
                             (re-frame/dispatch [:stickers/open-sticker-pack (:pack content)]))
                           (re-frame/dispatch [:chat.ui/set-chat-ui-props {:messages-focused? true
-                                                                          :show-stickers?    false}])
+                                                                          :show-stickers?    false
+                                                                          :show-image?    false}])
                           (when-not platform/desktop?
                             (react/dismiss-keyboard!)))))
      :on-long-press #(when (or (= content-type constants/content-type-text)

src/status_im/ui/screens/chat/views.cljs

@@ -25,6 +25,7 @@
             [status-im.ui.screens.chat.stickers.views :as stickers]
             [status-im.ui.screens.chat.styles.main :as style]
             [status-im.ui.screens.chat.toolbar-content :as toolbar-content]
+            [status-im.ui.screens.chat.image.views :as image]
             [status-im.ui.screens.profile.tribute-to-talk.views
              :as
              tribute-to-talk.views]
@@ -289,7 +290,8 @@
         :on-press (fn [_]
                     (re-frame/dispatch
                      [:chat.ui/set-chat-ui-props {:messages-focused? true
-                                                  :show-stickers?    false}])
+                                                  :show-stickers?    false
+                                                  :show-image?    false}])
                     (react/dismiss-keyboard!))}
        [react/view (style/intro-header-container height intro-status no-messages)
         ;; Icon section
@@ -401,6 +403,7 @@
             current-chat-id       [:chats/current-chat-id]
             show-message-options? [:chats/current-chat-ui-prop :show-message-options?]
             show-stickers?        [:chats/current-chat-ui-prop :show-stickers?]
+            show-image?       [:chats/current-chat-ui-prop :show-image?]
             two-pane-ui-enabled?  [:two-pane-ui-enabled?]
             anim-translate-y      (animation/create-value
                                    (if two-pane-ui-enabled? 0 connectivity/neg-connectivity-bar-height))]
@@ -438,6 +441,8 @@
          [messages-view current-chat modal?])]]
      (when show-input?
        [input/container])
+     (when show-image?
+       [image/image-view])
      (when show-stickers?
        [stickers/stickers-view])
      (when show-message-options?

src/status_im/utils/contenthash.cljs

@@ -57,6 +57,7 @@
 
 (defn url [hex]
   (let [{:keys [namespace hash]} (decode (ethereum/normalized-address hex))]
+    (println hash)
     (case namespace
       :ipfs (str "https://ipfs.infura.io/ipfs/" hash)
       "")))

src/status_im/utils/http.cljs

@@ -8,7 +8,7 @@
 ;; Default HTTP request timeout ms
 (def http-request-default-timeout-ms 3000)
 
-(defn- headers [response]
+(defn- response-headers [response]
   (let [entries (es6-iterator-seq (.entries (.-headers response)))]
     (reduce #(assoc %1 (string/trim (string/lower-case (first %2))) (string/trim (second %2))) {} entries)))
 
@@ -17,19 +17,19 @@
   ([url body on-success] (raw-post url body on-success nil))
   ([url body on-success on-error]
    (raw-post url body on-success on-error nil))
-  ([url body on-success on-error {:keys [timeout-ms]}]
+  ([url body on-success on-error {:keys [timeout-ms headers]}]
    (-> (rn-dependencies/fetch
         url
         (clj->js {:method  "POST"
-                  :headers {"Cache-Control" "no-cache"}
+                  :headers (merge {"Cache-Control" "no-cache"} headers)
                   :body    body
                   :timeout (or timeout-ms http-request-default-timeout-ms)}))
        (.then (fn [response]
                 (->
                  (.text response)
                  (.then (fn [body]
                           (on-success {:status  (.-status response)
-                                       :headers (headers response)
+                                       :headers (response-headers response)
                                        :body    body}))))))
        (.catch (or on-error
                    (fn [error]
@@ -92,7 +92,7 @@
                  (.text response)
                  (.then (fn [body]
                           (on-success {:status  (.-status response)
-                                       :headers (headers response)
+                                       :headers (response-headers response)
                                        :body    body}))))))
        (.catch (or on-error
                    (fn [error]

src/status_im/utils/image_processing.cljs

@@ -3,7 +3,7 @@
             [status-im.utils.fs :as fs]
             [status-im.react-native.js-dependencies :as rn-dependencies]))
 
-(defn- resize [path max-width max-height on-resize on-error]
+(defn resize [path max-width max-height on-resize on-error]
   (let [resize-fn (-> rn-dependencies/image-resizer
                       (object/get "default")
                       (object/get "createResizedImage"))]