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,13 @@
   [{: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]
+  (let [updated-db (assoc db :shared-element-id shared-element-id)]
+    (reagent/next-tick #(rf/dispatch [:navigate-to :lightbox screen-params]))
+    {:db updated-db}))
+
 (rf/defn exit-lightbox-signal
   {:events [:chat.ui/exit-lightbox-signal]}
   [{:keys [db]} value]
@@ -357,4 +365,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

@@ -3,6 +3,7 @@
     [clojure.string :as string]
     [quo2.foundations.colors :as colors]
     [react-native.core :as rn]
+    [react-native.fast-image :as fast-image]
     [react-native.navigation :as navigation]
     [react-native.orientation :as orientation]
     [react-native.platform :as platform]
@@ -189,6 +190,7 @@
                           (rf/dispatch [:chat.ui/zoom-out-signal nil])
                           (when platform/android?
                             (rf/dispatch [:chat.ui/lightbox-scale 1])))))
+
        [:f>
         (fn []
           (let [curr-orientation (or (rf/sub [:lightbox/orientation]) orientation/portrait)
@@ -202,13 +204,18 @@
                                    window-height
                                    window-width)
                 item-width       (if (and landscape? platform/ios?) screen-height screen-width)]
+            ;[gesture/flat-list
+            ; {:data [1]
+            ;  :horizontal true
+            ;  :render-fn (fn [] [rn/view {:style {:width 300 :height 300 :background-color :red}
+            ;                              :native-ID :shared-element}])}]
             [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
@@ -221,7 +228,8 @@
                  :key-fn                            :message-id
                  :style                             {:width (+ screen-width seperator-width)}
                  :data                              @data
-                 :render-fn                         image
+                 :render-fn                         (fn [] [rn/view {:style {:width 300 :height 300 :background-color :red}
+                                                                     :native-ID :shared-element}])
                  :render-data                       {:opacity-value    (:opacity animations)
                                                      :border-value     (:border animations)
                                                      :transparent?     transparent?
@@ -240,6 +248,9 @@
                  :shows-vertical-scroll-indicator   false
                  :shows-horizontal-scroll-indicator false
                  :on-viewable-items-changed         callback}]]]
-             (when (and (not @transparent?) (not landscape?))
+             ;(when (and (not @transparent?) (not landscape?))
-               [bottom-view/bottom-view messages index scroll-index insets animations derived
+             ;  [bottom-view/bottom-view messages index scroll-index insets animations derived
-                item-width atoms])]))]))])
+             ;   item-width atoms])
+             ]
+            ))]
+       ))])

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

@@ -272,7 +272,12 @@
                                        animations
                                        @set-full-height?
                                        (= curr-orientation orientation/portrait))}
-              [reanimated/fast-image
+              [rn/view {:style {:width 300 :height 300 :background-color :red}
-               {:source    {:uri (:image content)}
+                        :native-ID :shared-element}]
-                :native-ID (when focused? :shared-element)
+              ;[reanimated/fast-image
-                :style     (style/image dimensions animations (:border-value args))}]]]))]))])
+              ; {:source    {:uri (:image content)}
+              ;  ;:native-ID (when focused? :shared-element)
+              ;  :native-ID :shared-element
+              ;  :style     (style/image dimensions animations (:border-value args))}]
+              ]]
+            ))]))])

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

@@ -52,19 +52,19 @@
                  {: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)
-                                                                  {:messages (:album message)
+                                                  :index    index
-                                                                   :index    index
+                                                  :insets   insets}])}
-                                                                   :insets   insets}])
-                                                   100))}
                  [fast-image/fast-image
                   {:style     (style/image dimensions index portrait? images-count)
                    :source    {:uri (:image (:content item))}
-                   :native-ID (when (and (= shared-element-id (:message-id item))
+                   :native-ID :source-image
-                                         (< index constants/max-album-photos))
+                   ;:native-ID (when (and (= shared-element-id (:message-id item))
-                                :shared-element)}]
+                   ;                      (< index constants/max-album-photos))
+                   ;             :shared-element)
+                   }]
                  (when (and (> images-count constants/max-album-photos)
                             (= index (- constants/max-album-photos 1)))
                    [rn/view

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

@@ -2,6 +2,7 @@
   (:require
     [react-native.core :as rn]
     [react-native.fast-image :as fast-image]
+    [react-native.reanimated :as reanimated]
     [react-native.safe-area :as safe-area]
     [status-im2.constants :as constants]
     [utils.re-frame :as rf]
@@ -24,19 +25,23 @@
          (let [shared-element-id (rf/sub [:shared-element-id])]
            [rn/touchable-opacity
             {:active-opacity 1
+             ;:native-ID :source-image
              :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]
-                                                             {:messages [message]
+                                             :index    0
-                                                              :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
+            [rn/view {:style {:width 300 :height 300 :background-color :red}
-             {:source    {:uri (:image content)}
+                      :native-ID :shared-element}]
-              :style     (merge dimensions {:border-radius 12})
+            ;[fast-image/fast-image
-              :native-ID (when (= shared-element-id message-id) :shared-element)}]]))))])
+            ; {:source    {:uri (:image content)}
+            ;  :style     (merge dimensions {:border-radius 12})
+            ;  :native-ID :shared-element
+            ;  ;:native-ID (when (= shared-element-id message-id) :shared-element)
+            ;  }]
+            ]))))])

src/status_im2/navigation/screens.cljs

@@ -64,7 +64,8 @@
 
     {:name      :lightbox
      :insets    {:top false :bottom false}
-     :options   {:topBar        {:visible false}
+     :options   {
+                 :topBar        {:visible false}
                  :statusBar     {:backgroundColor :transparent
                                  :style           :light
                                  :animate         true
@@ -75,13 +76,15 @@
                                  :backgroundColor          :transparent}
                  :animations    {:push {:sharedElementTransitions [{:fromId        :shared-element
                                                                     :toId          :shared-element
-                                                                    :interpolation {:type   :decelerate
+                                                                    :interpolation {:type
+                                                                                    :decelerate
                                                                                     :factor 1.5}}]}
                                  :pop  {:sharedElementTransitions [{:fromId        :shared-element
                                                                     :toId          :shared-element
                                                                     :interpolation {:type
                                                                                     :decelerate
-                                                                                    :factor 1.5}}]}}}
+                                                                                    :factor 1.5}}]}
+                                 }}
      :component lightbox/lightbox}
     {:name      :photo-selector
      :options   {:topBar {:visible false}}