draft

src/status_im2/contexts/chat/events.cljs

@@ -13,7 +13,8 @@
             [status-im2.contexts.contacts.events :as contacts-store]
             [status-im.multiaccounts.model :as multiaccounts.model]
             [status-im.utils.clocks :as utils.clocks]
-            [status-im.utils.types :as types]))
+            [status-im.utils.types :as types]
+            [reagent.core :as reagent]))
 
 (defn- get-chat
   [cofx chat-id]
@@ -338,6 +339,12 @@
   [{:keys [db]} shared-element-id]
   {:db (assoc db :shared-element-id shared-element-id)})
 
+(rf/defn navigate-to-lightbox
+  {:events [:chat.ui/navigate-to-lightbox]}
+  [{:keys [db]} shared-element-id screen-params]
+  (reagent/next-tick #(rf/dispatch [:navigate-to :lightbox screen-params]))
+  {:db (assoc db :shared-element-id shared-element-id)})
+
 (rf/defn exit-lightbox-signal
   {:events [:chat.ui/exit-lightbox-signal]}
   [{:keys [db]} value]
@@ -357,4 +364,3 @@
   {:events [:chat.ui/lightbox-scale]}
   [{:keys [db]} value]
   {:db (assoc db :lightbox/scale value)})
-

src/status_im2/contexts/chat/lightbox/top_view.cljs

@@ -65,7 +65,7 @@
                        (anim/animate background-color :transparent)
                        (anim/animate opacity 0)
                        (rf/dispatch (if platform/ios?
-                                      [:chat.ui/exit-lightbox-signal @index]
+                                      [:navigate-back]
                                       [:navigate-back])))
            :style    style/close-container}
           [quo/icon :close {:size 20 :color colors/white}]]

src/status_im2/contexts/chat/lightbox/view.cljs

@@ -124,6 +124,7 @@
      ;; we get `insets` from `screen-params` because trying to consume it from
      ;; lightbox screen causes lots of problems
      (let [{:keys [messages index insets]} (rf/sub [:get-screen-params])
+           render-list      (reagent/atom false)
            atoms            {:flat-list-ref      (atom nil)
                              :small-list-ref     (atom nil)
                              :scroll-index-lock? (atom true)}
@@ -185,6 +186,7 @@
                                          (anim/animate (:border animations) 12))
                                        (if platform/ios? 250 100))
                         (js/setTimeout #(reset! (:scroll-index-lock? atoms) false) 300)
+                        (js/setTimeout #(reset! render-list true) 500)
                         (fn []
                           (rf/dispatch [:chat.ui/zoom-out-signal nil])
                           (when platform/android?
@@ -202,13 +204,22 @@
                                    window-height
                                    window-width)
                 item-width       (if (and landscape? platform/ios?) screen-height screen-width)]
+            ;[rn/view {:style (merge (style/image (+ screen-width seperator-width) screen-height) {:background-color :black})}
+            ;[reanimated/fast-image
+            ; {:source    {:uri (:image (:content (nth messages index)))}
+            ;  :native-ID :shared-element
+            ;  :style {:width window-width
+            ;          :height (* (:image-height  (nth messages index)) (/ window-width (:image-width (nth messages index))))}
+            ;  ;:style     (style/image dimensions animations (:border-value args))
+            ;  }]]
+
             [reanimated/view
              {:style (reanimated/apply-animations-to-style {:background-color (:background-color
                                                                                 animations)}
                                                            {:height screen-height})}
-             (when-not @transparent?
+             ;(when-not @transparent?
-               [top-view/top-view (first messages) insets scroll-index animations derived landscape?
+             ;  [top-view/top-view (first messages) insets scroll-index animations derived landscape?
-                screen-width])
+             ;   screen-width])
              [gesture/gesture-detector
               {:gesture (drag-gesture animations (and landscape? platform/ios?) set-full-height?)}
               [reanimated/view
@@ -216,6 +227,7 @@
                          {:transform [{:translateY (:pan-y animations)}
                                       {:translateX (:pan-x animations)}]}
                          {})}
+               (if @render-list
                  [gesture/flat-list
                   {:ref                               #(reset! (:flat-list-ref atoms) %)
                    :key-fn                            :message-id
@@ -231,6 +243,7 @@
                                                        :window-height    window-height
                                                        :window-width     window-width
                                                        :atoms            atoms}
+                   :initial-scroll-index index
                    :horizontal                        horizontal?
                    :inverted                          inverted?
                    :paging-enabled                    true
@@ -239,7 +252,25 @@
                                                        :wait-for-interaction                 true}
                    :shows-vertical-scroll-indicator   false
                    :shows-horizontal-scroll-indicator false
-                 :on-viewable-items-changed         callback}]]]
+                   :on-viewable-items-changed         callback}]
-             (when (and (not @transparent?) (not landscape?))
+               [rn/view
-               [bottom-view/bottom-view messages index scroll-index insets animations derived
+                {:style (style/image (+ screen-width seperator-width) screen-height)}
-                item-width atoms])]))]))])
+                 [rn/view {:style {:width window-width
+                                   :height (* (:image-height  (nth messages index)) (/ window-width (:image-width (nth messages index))))}}
+                  [reanimated/fast-image
+                   {:source    {:uri (:image (:content (nth messages index)))}
+                    :native-ID :shared-element
+                    :style {:border-radius 12
+                            :width window-width
+                            :height (* (:image-height  (nth messages index)) (/ window-width (:image-width (nth messages index))))}
+                    ;:style     (style/image dimensions animations (:border-value args))
+                    }]
+                  ]
+                [rn/view {:style {:width seperator-width}}]]
+                 )
+               ]]
+             ;(when (and (not @transparent?) (not landscape?))
+             ;  [bottom-view/bottom-view messages index scroll-index insets animations derived
+             ;   item-width atoms])
+             ]
+            ))]))])

src/status_im2/contexts/chat/messages/content/album/view.cljs

@@ -52,13 +52,11 @@
                  {:key            (:message-id item)
                   :active-opacity 1
                   :on-long-press  #(on-long-press message context)
-                  :on-press       (fn []
+                  :on-press       #(rf/dispatch [:chat.ui/navigate-to-lightbox
-                                    (rf/dispatch [:chat.ui/update-shared-element-id (:message-id item)])
+                                                 (:message-id item)
-                                    (js/setTimeout #(rf/dispatch [:navigate-to :lightbox
                                                  {:messages (:album message)
                                                   :index    index
-                                                                   :insets   insets}])
+                                                  :insets   insets}])}
-                                                   100))}
                  [fast-image/fast-image
                   {:style     (style/image dimensions index portrait? images-count)
                    :source    {:uri (:image (:content item))}

src/status_im2/contexts/chat/messages/content/image/view.cljs

@@ -27,13 +27,11 @@
              :key            message-id
              :style          {:margin-top (when (pos? index) 10)}
              :on-long-press  on-long-press
-             :on-press       (fn []
+             :on-press       #(rf/dispatch [:chat.ui/navigate-to-lightbox
-                               (rf/dispatch [:chat.ui/update-shared-element-id message-id])
+                                            message-id
-                               (js/setTimeout #(rf/dispatch [:navigate-to :lightbox
                                             {:messages [message]
                                              :index    0
-                                                              :insets   insets}])
+                                             :insets   insets}])}
-                                              100))}
             (when (and (not= text "placeholder") (= index 0))
               [rn/view {:style {:margin-bottom 10}} [text/text-content message context]])
             [fast-image/fast-image